From 995491bec9771180a169351f4d88cb36280de45f Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Fri, 16 Sep 2022 17:12:17 -0700
Subject: [PATCH 1/3] Add Card component

---
 .../Card/Card.stories.tsx}                    | 12 +++++------
 .../Card/Card.styles.ts}                      | 11 ++++------
 .../Card/Card.test.tsx}                       |  8 ++++----
 .../Card/Card.tsx}                            | 14 +++++--------
 .../components/Cards/Card/Card.types.ts       | 17 ++++++++++++++++
 .../Card}/README.md                           | 10 +++++-----
 .../Card/__snapshots__/Card.test.tsx.snap}    |  2 +-
 .../components/Cards/Card/index.ts            |  1 +
 .../foundation/CellBase/CellBase.styles.ts    | 10 ++++++----
 .../CellDisplayContainer.types.ts             | 20 -------------------
 .../foundation/CellDisplayContainer/index.ts  |  1 -
 .../Cell/variants/CellDisplay/CellDisplay.tsx |  6 +++---
 .../__snapshots__/CellDisplay.test.tsx.snap   |  4 ++--
 storybook/storyLoader.js                      |  5 +++--
 14 files changed, 57 insertions(+), 64 deletions(-)
 rename app/component-library/components/{Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.stories.tsx => Cards/Card/Card.stories.tsx} (68%)
 rename app/component-library/components/{Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.styles.ts => Cards/Card/Card.styles.ts} (70%)
 rename app/component-library/components/{Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.test.tsx => Cards/Card/Card.test.tsx} (63%)
 rename app/component-library/components/{Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.tsx => Cards/Card/Card.tsx} (50%)
 create mode 100644 app/component-library/components/Cards/Card/Card.types.ts
 rename app/component-library/components/{Cells/Cell/foundation/CellDisplayContainer => Cards/Card}/README.md (61%)
 rename app/component-library/components/{Cells/Cell/foundation/CellDisplayContainer/__snapshots__/CellDisplayContainer.test.tsx.snap => Cards/Card/__snapshots__/Card.test.tsx.snap} (77%)
 create mode 100644 app/component-library/components/Cards/Card/index.ts
 delete mode 100644 app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.types.ts
 delete mode 100644 app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/index.ts

diff --git a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.stories.tsx b/app/component-library/components/Cards/Card/Card.stories.tsx
similarity index 68%
rename from app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.stories.tsx
rename to app/component-library/components/Cards/Card/Card.stories.tsx
index 10f5a880f31..48238ca7031 100644
--- a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.stories.tsx
+++ b/app/component-library/components/Cards/Card/Card.stories.tsx
@@ -6,16 +6,16 @@ import { View } from 'react-native';
 import { storiesOf } from '@storybook/react-native';
 
 // External dependencies.
-import { mockTheme } from '../../../../../../util/theme';
-import Text, { TextVariant } from '../../../../Text';
+import { mockTheme } from '../../../../util/theme';
+import Text, { TextVariant } from '../../Text';
 
 // Internal dependencies.
-import CellDisplayContainer from './CellDisplayContainer';
+import Card from './Card';
 
-storiesOf('Component Library / CellDisplayContainer', module)
+storiesOf('Component Library / Card', module)
   .addDecorator((getStory) => getStory())
   .add('Default', () => (
-    <CellDisplayContainer>
+    <Card>
       <View
         style={{
           height: 50,
@@ -26,5 +26,5 @@ storiesOf('Component Library / CellDisplayContainer', module)
       >
         <Text variant={TextVariant.sBodySM}>{'Wrapped Content'}</Text>
       </View>
-    </CellDisplayContainer>
+    </Card>
   ));
diff --git a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.styles.ts b/app/component-library/components/Cards/Card/Card.styles.ts
similarity index 70%
rename from app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.styles.ts
rename to app/component-library/components/Cards/Card/Card.styles.ts
index 3dcdc61b50d..c6fb17a319c 100644
--- a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.styles.ts
+++ b/app/component-library/components/Cards/Card/Card.styles.ts
@@ -2,23 +2,20 @@
 import { StyleSheet, ViewStyle } from 'react-native';
 
 // External dependencies.
-import { Theme } from '../../../../../../util/theme/models';
+import { Theme } from '../../../../util/theme/models';
 
 // Internal dependencies.
-import { CellDisplayContainerStyleSheetVars } from './CellDisplayContainer.types';
+import { CardStyleSheetVars } from './Card.types';
 
 /**
- * Style sheet function for CellDisplayContainer component.
+ * Style sheet function for Card component.
  *
  * @param params Style sheet params.
  * @param params.theme App theme from ThemeContext.
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
-const styleSheet = (params: {
-  theme: Theme;
-  vars: CellDisplayContainerStyleSheetVars;
-}) => {
+const styleSheet = (params: { theme: Theme; vars: CardStyleSheetVars }) => {
   const { vars, theme } = params;
   const { colors } = theme;
   const { style } = vars;
diff --git a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.test.tsx b/app/component-library/components/Cards/Card/Card.test.tsx
similarity index 63%
rename from app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.test.tsx
rename to app/component-library/components/Cards/Card/Card.test.tsx
index cf5755b6b56..5bf0913416b 100644
--- a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.test.tsx
+++ b/app/component-library/components/Cards/Card/Card.test.tsx
@@ -4,14 +4,14 @@ import { View } from 'react-native';
 import { shallow } from 'enzyme';
 
 // Internal dependencies.
-import CellDisplayContainer from './CellDisplayContainer';
+import Card from './Card';
 
-describe('CellDisplayContainer - Snapshot', () => {
+describe('Card - Snapshot', () => {
   it('should render correctly', () => {
     const wrapper = shallow(
-      <CellDisplayContainer>
+      <Card>
         <View />
-      </CellDisplayContainer>,
+      </Card>,
     );
     expect(wrapper).toMatchSnapshot();
   });
diff --git a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.tsx b/app/component-library/components/Cards/Card/Card.tsx
similarity index 50%
rename from app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.tsx
rename to app/component-library/components/Cards/Card/Card.tsx
index 68853b0f731..f9a955ab1c3 100644
--- a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.tsx
+++ b/app/component-library/components/Cards/Card/Card.tsx
@@ -5,17 +5,13 @@ import React from 'react';
 import { View } from 'react-native';
 
 // External dependencies.
-import { useStyles } from '../../../../../hooks';
+import { useStyles } from '../../../hooks';
 
 // Internal dependencies.
-import styleSheet from './CellDisplayContainer.styles';
-import { CellDisplayContainerProps } from './CellDisplayContainer.types';
+import styleSheet from './Card.styles';
+import { CardProps } from './Card.types';
 
-const CellDisplayContainer: React.FC<CellDisplayContainerProps> = ({
-  style,
-  children,
-  ...props
-}) => {
+const Card: React.FC<CardProps> = ({ style, children, ...props }) => {
   const { styles } = useStyles(styleSheet, { style });
 
   return (
@@ -25,4 +21,4 @@ const CellDisplayContainer: React.FC<CellDisplayContainerProps> = ({
   );
 };
 
-export default CellDisplayContainer;
+export default Card;
diff --git a/app/component-library/components/Cards/Card/Card.types.ts b/app/component-library/components/Cards/Card/Card.types.ts
new file mode 100644
index 00000000000..b2590017861
--- /dev/null
+++ b/app/component-library/components/Cards/Card/Card.types.ts
@@ -0,0 +1,17 @@
+// Third party dependencies.
+import { ViewProps } from 'react-native';
+
+/**
+ * Card component props.
+ */
+export interface CardProps extends ViewProps {
+  /**
+   * Content to wrap to display.
+   */
+  children: React.ReactNode;
+}
+
+/**
+ * Style sheet input parameters.
+ */
+export type CardStyleSheetVars = Pick<CardProps, 'style'>;
diff --git a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/README.md b/app/component-library/components/Cards/Card/README.md
similarity index 61%
rename from app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/README.md
rename to app/component-library/components/Cards/Card/README.md
index 84386a0744c..c41c5abd2c2 100644
--- a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/README.md
+++ b/app/component-library/components/Cards/Card/README.md
@@ -1,6 +1,6 @@
-# CellAccountDisplayItemContainer
+# Card
 
-CellAccountDisplayItemContainer is a wrapper component typically used for displaying CellAccount Content.
+Card is a wrapper component typically used for displaying Card Content.
 
 ## Props
 
@@ -18,9 +18,9 @@ Content to wrap to display.
 
 ```javascript
 // Replace import with relative path.
-import CellAccountDisplayItemContainer from 'app/component-library/components/Cells/CellAccountDisplayItemContainer/CellAccountDisplayItemContainer';
+import Card from 'app/component-library/components/Cards/Card/Card';
 
-<CellAccountDisplayItemContainer>
+<Card>
   <SampleContent />
-</CellAccountDisplayItemContainer>;
+</Card>;
 ```
diff --git a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/__snapshots__/CellDisplayContainer.test.tsx.snap b/app/component-library/components/Cards/Card/__snapshots__/Card.test.tsx.snap
similarity index 77%
rename from app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/__snapshots__/CellDisplayContainer.test.tsx.snap
rename to app/component-library/components/Cards/Card/__snapshots__/Card.test.tsx.snap
index 780ca224b2c..ff0e960c1b8 100644
--- a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/__snapshots__/CellDisplayContainer.test.tsx.snap
+++ b/app/component-library/components/Cards/Card/__snapshots__/Card.test.tsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`CellDisplayContainer - Snapshot should render correctly 1`] = `
+exports[`Card - Snapshot should render correctly 1`] = `
 <View
   style={
     Object {
diff --git a/app/component-library/components/Cards/Card/index.ts b/app/component-library/components/Cards/Card/index.ts
new file mode 100644
index 00000000000..c68311df80b
--- /dev/null
+++ b/app/component-library/components/Cards/Card/index.ts
@@ -0,0 +1 @@
+export { default } from './Card';
diff --git a/app/component-library/components/Cells/Cell/foundation/CellBase/CellBase.styles.ts b/app/component-library/components/Cells/Cell/foundation/CellBase/CellBase.styles.ts
index e4249cad4da..0d5feaf646b 100644
--- a/app/component-library/components/Cells/Cell/foundation/CellBase/CellBase.styles.ts
+++ b/app/component-library/components/Cells/Cell/foundation/CellBase/CellBase.styles.ts
@@ -21,10 +21,12 @@ const styleSheet = (params: { theme: Theme; vars: CellBaseStyleSheetVars }) => {
   const { style } = vars;
 
   return StyleSheet.create({
-    base: Object.assign({} as ViewStyle, style) as ViewStyle,
-    cellBase: {
-      flexDirection: 'row',
-    },
+    cellBase: Object.assign(
+      {
+        flexDirection: 'row',
+      } as ViewStyle,
+      style,
+    ) as ViewStyle,
     avatar: {
       marginRight: 16,
     },
diff --git a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.types.ts b/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.types.ts
deleted file mode 100644
index 9fa638d4a0d..00000000000
--- a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.types.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// Third party dependencies.
-import { ViewProps } from 'react-native';
-
-/**
- * CellDisplayContainer component props.
- */
-export interface CellDisplayContainerProps extends ViewProps {
-  /**
-   * Content to wrap to display.
-   */
-  children: React.ReactNode;
-}
-
-/**
- * Style sheet input parameters.
- */
-export type CellDisplayContainerStyleSheetVars = Pick<
-  CellDisplayContainerProps,
-  'style'
->;
diff --git a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/index.ts b/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/index.ts
deleted file mode 100644
index e1a62f64690..00000000000
--- a/app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from './CellDisplayContainer';
diff --git a/app/component-library/components/Cells/Cell/variants/CellDisplay/CellDisplay.tsx b/app/component-library/components/Cells/Cell/variants/CellDisplay/CellDisplay.tsx
index 2b55dc5d886..595c14ad582 100644
--- a/app/component-library/components/Cells/Cell/variants/CellDisplay/CellDisplay.tsx
+++ b/app/component-library/components/Cells/Cell/variants/CellDisplay/CellDisplay.tsx
@@ -6,7 +6,7 @@ import React from 'react';
 // External dependencies.
 import { useStyles } from '../../../../../hooks';
 import CellBase from '../../foundation/CellBase';
-import CellDisplayContainer from '../../foundation/CellDisplayContainer';
+import Card from '../../../../Cards/Card';
 
 // Internal dependencies.
 import { CELL_DISPLAY_TEST_ID } from './CellDisplay.constants';
@@ -25,7 +25,7 @@ const CellDisplay = ({
   const { styles } = useStyles(styleSheet, { style });
 
   return (
-    <CellDisplayContainer style={styles.base} testID={CELL_DISPLAY_TEST_ID}>
+    <Card style={styles.base} testID={CELL_DISPLAY_TEST_ID}>
       <CellBase
         avatarProps={avatarProps}
         title={title}
@@ -35,7 +35,7 @@ const CellDisplay = ({
       >
         {children}
       </CellBase>
-    </CellDisplayContainer>
+    </Card>
   );
 };
 
diff --git a/app/component-library/components/Cells/Cell/variants/CellDisplay/__snapshots__/CellDisplay.test.tsx.snap b/app/component-library/components/Cells/Cell/variants/CellDisplay/__snapshots__/CellDisplay.test.tsx.snap
index 21aec29d297..7045a72d473 100644
--- a/app/component-library/components/Cells/Cell/variants/CellDisplay/__snapshots__/CellDisplay.test.tsx.snap
+++ b/app/component-library/components/Cells/Cell/variants/CellDisplay/__snapshots__/CellDisplay.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CellDisplay - Snapshot should render default settings correctly 1`] = `
-<CellDisplayContainer
+<Card
   style={Object {}}
   testID="cell-display"
 >
@@ -15,5 +15,5 @@ exports[`CellDisplay - Snapshot should render default settings correctly 1`] = `
     }
     title="Orangefox.eth"
   />
-</CellDisplayContainer>
+</Card>
 `;
diff --git a/storybook/storyLoader.js b/storybook/storyLoader.js
index 5f6790b76e8..6637d1592bd 100644
--- a/storybook/storyLoader.js
+++ b/storybook/storyLoader.js
@@ -29,9 +29,9 @@ function loadStories() {
   require('../app/component-library/components/Buttons/ButtonPrimary/ButtonPrimary.stories');
   require('../app/component-library/components/Buttons/ButtonSecondary/ButtonSecondary.stories');
   require('../app/component-library/components/Buttons/ButtonTertiary/ButtonTertiary.stories');
+  require('../app/component-library/components/Cards/Card/Card.stories');
   require('../app/component-library/components/Cells/Cell/Cell.stories');
   require('../app/component-library/components/Cells/Cell/foundation/CellBase/CellBase.stories');
-  require('../app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.stories');
   require('../app/component-library/components/Cells/Cell/variants/CellDisplay/CellDisplay.stories');
   require('../app/component-library/components/Cells/Cell/variants/CellMultiselect/CellMultiselect.stories');
   require('../app/component-library/components/Cells/Cell/variants/CellSelect/CellSelect.stories');
@@ -61,6 +61,7 @@ const stories = [
   '../app/components/UI/ButtonReveal/ButtonReveal.stories',
   '../app/components/UI/Fox/Fox.stories',
   '../app/components/UI/StyledButton/StyledButton.stories',
+  '../app/components/UI/WarningAlert/WarningAlert.stories',
   '../app/component-library/components/Avatars/AvatarAccount/AvatarAccount.stories',
   '../app/component-library/components/Avatars/AvatarBase/AvatarBase.stories',
   '../app/component-library/components/Avatars/AvatarFavicon/AvatarFavicon.stories',
@@ -78,9 +79,9 @@ const stories = [
   '../app/component-library/components/Buttons/ButtonPrimary/ButtonPrimary.stories',
   '../app/component-library/components/Buttons/ButtonSecondary/ButtonSecondary.stories',
   '../app/component-library/components/Buttons/ButtonTertiary/ButtonTertiary.stories',
+  '../app/component-library/components/Cards/Card/Card.stories',
   '../app/component-library/components/Cells/Cell/Cell.stories',
   '../app/component-library/components/Cells/Cell/foundation/CellBase/CellBase.stories',
-  '../app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.stories',
   '../app/component-library/components/Cells/Cell/variants/CellDisplay/CellDisplay.stories',
   '../app/component-library/components/Cells/Cell/variants/CellMultiselect/CellMultiselect.stories',
   '../app/component-library/components/Cells/Cell/variants/CellSelect/CellSelect.stories',

From 630353288e149597ae71ab837029d75823176db8 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Tue, 27 Sep 2022 16:25:28 -0700
Subject: [PATCH 2/3] Updated AccountBalance to use Card

---
 .../Accounts/AccountBalance/AccountBalance.tsx           | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/app/component-library/components-temp/Accounts/AccountBalance/AccountBalance.tsx b/app/component-library/components-temp/Accounts/AccountBalance/AccountBalance.tsx
index e39db5c3485..2c0a7f1f7dd 100644
--- a/app/component-library/components-temp/Accounts/AccountBalance/AccountBalance.tsx
+++ b/app/component-library/components-temp/Accounts/AccountBalance/AccountBalance.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { AccountBalanceProps } from './AccountBalance.types';
-import CellDisplayContainer from '../../../components/Cells/Cell/foundation/CellDisplayContainer';
+import Card from '../../../components/Cards/Card';
 import AccountBase from '../AccountBase/AccountBase';
 import { ACCOUNT_BALANCE_TEST_ID } from './AccountBalance.constants';
 import styles from './AccountBalance.styles';
@@ -14,10 +14,7 @@ const AccountBalance = ({
   accountAddress,
   badgeProps,
 }: AccountBalanceProps) => (
-  <CellDisplayContainer
-    style={styles.container}
-    testID={ACCOUNT_BALANCE_TEST_ID}
-  >
+  <Card style={styles.container} testID={ACCOUNT_BALANCE_TEST_ID}>
     <AccountBase
       accountBalance={accountBalance}
       accountNativeCurrency={accountNativeCurrency}
@@ -27,7 +24,7 @@ const AccountBalance = ({
       accountAddress={accountAddress}
       badgeProps={badgeProps}
     />
-  </CellDisplayContainer>
+  </Card>
 );
 
 export default AccountBalance;

From 03615d28cec52f48c774df4b991583effbf97868 Mon Sep 17 00:00:00 2001
From: Brian Nguyen <brianacnguyen@gmail.com>
Date: Tue, 27 Sep 2022 17:20:22 -0700
Subject: [PATCH 3/3] Updated indexjs

---
 index.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/index.js b/index.js
index 62cf1a7e474..7b13b5cc916 100644
--- a/index.js
+++ b/index.js
@@ -62,10 +62,10 @@ LogBox.ignoreLogs([
 ]);
 
 /* Uncomment and comment regular registration below */
-// import Storybook from './storybook';
-// AppRegistry.registerComponent(name, () => Storybook);
+import Storybook from './storybook';
+AppRegistry.registerComponent(name, () => Storybook);
 
 /**
  * Application entry point responsible for registering root component
  */
-AppRegistry.registerComponent(name, () => Root);
+// AppRegistry.registerComponent(name, () => Root);