Merge pull request #8144 from Expensify/marco-subscriptAvatarSize

change SubscriptAvatar mode prop to size
Expensify · Mar 14, 2022 · 95251f9 · 95251f9
2 parents 90e5af4 + ebbbe4d
commit 95251f9
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 7 deletions.
diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js
@@ -169,7 +169,7 @@ const OptionRow = (props) => {
                                             secondaryAvatar={props.option.icons[1]}
                                             mainTooltip={props.option.ownerEmail}
                                             secondaryTooltip={props.option.subtitle}
-                                            mode={props.mode}
+                                            size={props.mode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
                                         />
                                     ) : (
                                         <MultipleAvatars

diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js
@@ -23,31 +23,31 @@ const propTypes = {
     secondaryTooltip: PropTypes.string,
 
     /** Set the size of avatars */
-    mode: PropTypes.oneOf(_.values(CONST.OPTION_MODE)),
+    size: PropTypes.oneOf(_.values(CONST.AVATAR_SIZE)),
 };
 
 const defaultProps = {
     mainTooltip: '',
     secondaryTooltip: '',
-    mode: CONST.OPTION_MODE.DEFAULT,
+    size: CONST.AVATAR_SIZE.DEFAULT,
 };
 
 const SubscriptAvatar = props => (
-    <View style={props.mode === CONST.OPTION_MODE.COMPACT ? styles.emptyAvatarSmall : styles.emptyAvatar}>
+    <View style={props.size === CONST.AVATAR_SIZE.SMALL ? styles.emptyAvatarSmall : styles.emptyAvatar}>
         <Tooltip text={props.mainTooltip}>
             <Avatar
                 source={props.mainAvatar}
-                size={props.mode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
+                size={props.size === CONST.AVATAR_SIZE.SMALL ? CONST.AVATAR_SIZE.SMALL : CONST.AVATAR_SIZE.DEFAULT}
             />
         </Tooltip>
         <View style={[
-            props.mode === CONST.OPTION_MODE.COMPACT ? styles.secondAvatarSubscriptCompact : styles.secondAvatarSubscript,
+            props.size === CONST.AVATAR_SIZE.SMALL ? styles.secondAvatarSubscriptCompact : styles.secondAvatarSubscript,
             StyleUtils.getBackgroundAndBorderStyle(themeColors.componentBG)]}
         >
             <Tooltip text={props.secondaryTooltip}>
                 <Avatar
                     source={props.secondaryAvatar}
-                    size={props.mode === CONST.OPTION_MODE.COMPACT ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
+                    size={props.size === CONST.AVATAR_SIZE.SMALL ? CONST.AVATAR_SIZE.SMALL_SUBSCRIPT : CONST.AVATAR_SIZE.SUBSCRIPT}
                     fill={themeColors.iconSuccessFill}
                 />
             </Tooltip>

diff --git a/src/stories/SubscriptAvatar.stories.js b/src/stories/SubscriptAvatar.stories.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import SubscriptAvatar from '../components/SubscriptAvatar';
+import * as Expensicons from '../components/Icon/Expensicons';
+import CONST from '../CONST';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+export default {
+    title: 'Components/SubscriptAvatar',
+    component: SubscriptAvatar,
+    args: {
+        mainAvatar: Expensicons.Profile,
+        secondaryAvatar: Expensicons.Workspace,
+        size: CONST.AVATAR_SIZE.DEFAULT,
+    },
+    argTypes: {
+        size: {
+            options: [CONST.AVATAR_SIZE.SMALL, CONST.AVATAR_SIZE.DEFAULT], // SubscriptAvatar only supports these two sizes
+        },
+    },
+};
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = args => <SubscriptAvatar {...args} />;
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default = Template.bind({});
+
+const AvatarURLStory = Template.bind({});
+AvatarURLStory.args = {
+    mainAvatar: `${CONST.CLOUDFRONT_URL}/images/avatars/avatar_1.png`,
+    secondaryAvatar: `${CONST.CLOUDFRONT_URL}/images/avatars/avatar_3.png`,
+};
+
+export {
+    Default,
+    AvatarURLStory,
+};