Renamed Cell component to CellAccount

MetaMask · Aug 2, 2022 · cb65ae6 · cb65ae6
1 parent 0bb47c2
commit cb65ae6
Show file tree

Hide file tree

Showing 11 changed files with 160 additions and 149 deletions.
diff --git a/app/component-library/components/Cell/Cell.constants.ts b/app/component-library/components/Cell/Cell.constants.ts
diff --git a/app/component-library/components/CellAccount/CellAccount.constants.ts b/app/component-library/components/CellAccount/CellAccount.constants.ts
@@ -0,0 +1,16 @@
+export const TEST_ACCOUNT_ADDRESS =
+  '0x2990079bcdEe240329a520d2444386FC119da21a';
+export const TEST_CELL_ACCOUNT_TITLE = 'Orangefox.eth';
+export const TEST_CELL_ACCOUNT_SECONDARY_TEXT =
+  '0x2990079bcdEe240329a520d2444386FC119da21a';
+export const TEST_CELL_ACCOUNT_TERTIARY_TEXT = 'Updated 1 sec ago';
+export const TEST_TAG_LABEL_TEXT = 'Imported';
+
+export const CELL_ACCOUNT_SINGLE_SELECT_TEST_ID = 'cell-account-single-select';
+export const CELL_ACCOUNT_MULTI_SELECT_TEST_ID = 'cell-account-multi-select';
+export const CELL_ACCOUNT_AVATAR_TEST_ID = 'cell-account-avatar';
+export const CELL_ACCOUNT_TITLE_TEST_ID = 'cell-account-title';
+export const CELL_ACCOUNT_SECONDARY_TEXT_TEST_ID =
+  'cell-account-secondary-text';
+export const CELL_ACCOUNT_TERTIARY_TEXT_TEST_ID = 'cell-account-tertiary-text';
+export const CELL_ACCOUNT_TAG_LABEL_TEST_ID = 'cell-account-label';
diff --git a/...-library/components/Cell/Cell.stories.tsx → ...nents/CellAccount/CellAccount.stories.tsx b/...-library/components/Cell/Cell.stories.tsx → ...nents/CellAccount/CellAccount.stories.tsx
@@ -9,30 +9,30 @@ import { storiesOf } from '@storybook/react-native';
 import { AccountAvatarType } from '../AccountAvatar';
 
 // Internal dependencies
-import Cell from './Cell';
+import CellAccount from './CellAccount';
 import {
   TEST_ACCOUNT_ADDRESS,
-  TEST_CELL_TITLE,
-  TEST_CELL_SECONDARY_TEXT,
-  TEST_CELL_TERTIARY_TEXT,
+  TEST_CELL_ACCOUNT_TITLE,
+  TEST_CELL_ACCOUNT_SECONDARY_TEXT,
+  TEST_CELL_ACCOUNT_TERTIARY_TEXT,
   TEST_TAG_LABEL_TEXT,
-} from './Cell.constants';
+} from './CellAccount.constants';
 
 storiesOf('Component Library / Cell', module).add('Default', () => {
   const groupId = 'Props';
   const isMultiSelect = boolean('IsMultiSelect?', false, groupId);
-  const titleText = text('title', TEST_CELL_TITLE, groupId);
+  const titleText = text('title', TEST_CELL_ACCOUNT_TITLE, groupId);
   const includeSecondaryText = boolean(
     'Includes secondaryText?',
     false,
     groupId,
   );
   const secondaryText = includeSecondaryText
-    ? text('secondaryText', TEST_CELL_SECONDARY_TEXT, groupId)
+    ? text('secondaryText', TEST_CELL_ACCOUNT_SECONDARY_TEXT, groupId)
     : '';
   const includeTertiaryText = boolean('Includes tertiaryText?', false, groupId);
   const tertiaryText = includeTertiaryText
-    ? text('tertiaryText', TEST_CELL_TERTIARY_TEXT, groupId)
+    ? text('tertiaryText', TEST_CELL_ACCOUNT_TERTIARY_TEXT, groupId)
     : '';
   const includeTagLabel = boolean('Includes label?', false, groupId);
   const tagLabel = includeTagLabel
@@ -41,7 +41,7 @@ storiesOf('Component Library / Cell', module).add('Default', () => {
   const isSelected = boolean('isSelected?', false, groupId);
 
   return (
-    <Cell
+    <CellAccount
       accountAddress={TEST_ACCOUNT_ADDRESS}
       accountAvatarType={AccountAvatarType.JazzIcon}
       title={titleText}

diff --git a/...nt-library/components/Cell/Cell.styles.ts → ...ponents/CellAccount/CellAccount.styles.ts b/...nt-library/components/Cell/Cell.styles.ts → ...ponents/CellAccount/CellAccount.styles.ts
@@ -1,5 +1,10 @@
+// 3rd library dependencies
 import { StyleSheet, ViewStyle } from 'react-native';
-import { CellStyleSheetVars } from './Cell.types';
+
+// External dependencies
+import { CellAccountStyleSheetVars } from './CellAccount.types';
+
+// Internal dependencies
 import { Theme } from '../../../util/theme/models';
 
 /**
@@ -10,20 +15,23 @@ import { Theme } from '../../../util/theme/models';
  * @param params.vars Inputs that the style sheet depends on.
  * @returns StyleSheet object.
  */
-const styleSheet = (params: { theme: Theme; vars: CellStyleSheetVars }) => {
+const styleSheet = (params: {
+  theme: Theme;
+  vars: CellAccountStyleSheetVars;
+}) => {
   const { vars, theme } = params;
   const { colors } = theme;
   const { style } = vars;
 
   return StyleSheet.create({
     base: Object.assign({} as ViewStyle, style) as ViewStyle,
-    cell: {
+    cellAccount: {
       flexDirection: 'row',
     },
     accountAvatar: {
       marginRight: 16,
     },
-    cellInfo: {
+    cellAccountInfo: {
       flex: 1,
       alignItems: 'flex-start',
     },