Component/4721-card

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;

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.stories.tsx → 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 '../../../../Texts/Text';
+import { mockTheme } from '../../../../util/theme';
+import Text, { TextVariant } from '../../Texts/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>
   ));

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.styles.ts → 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;

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.test.tsx → 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();
   });

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/CellDisplayContainer.tsx → 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;

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'>;

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/README.md → 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>;
 ```

app/component-library/components/Cells/Cell/foundation/CellDisplayContainer/__snapshots__/CellDisplayContainer.test.tsx.snap → 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 {

app/component-library/components/Cards/Card/index.ts

@@ -0,0 +1 @@
+export { default } from './Card';

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,
     },

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>
   );
 };
 

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>
 `;

storybook/storyLoader.js

@@ -31,9 +31,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');
@@ -84,9 +84,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',