From f9309f85b1f07505fbd5dd1aca1e29e04aeb2229 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Sat, 12 Mar 2022 15:50:14 -0600 Subject: [PATCH 1/7] change mode to size prop in SubscriptAvatar --- src/components/SubscriptAvatar.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/SubscriptAvatar.js b/src/components/SubscriptAvatar.js index 61c007b00c2d..fa3b730a806c 100644 --- 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 => ( - + From ba114e391d9755728253e407ee3e9fa7505e4587 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Sat, 12 Mar 2022 15:52:54 -0600 Subject: [PATCH 2/7] change size value in OptionRow --- src/components/OptionRow.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/OptionRow.js b/src/components/OptionRow.js index 9610d5a9200b..535209aec91b 100644 --- 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} /> ) : ( Date: Sat, 12 Mar 2022 15:55:58 -0600 Subject: [PATCH 3/7] create stories file for SubscriptAvatar --- src/stories/SubscriptAvatar.stories.js | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 src/stories/SubscriptAvatar.stories.js diff --git a/src/stories/SubscriptAvatar.stories.js b/src/stories/SubscriptAvatar.stories.js new file mode 100644 index 000000000000..d48cdf235369 --- /dev/null +++ b/src/stories/SubscriptAvatar.stories.js @@ -0,0 +1,24 @@ +import React from 'react'; +import SubscriptAvatar from '../components/SubscriptAvatar'; + +/** + * 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: {}, +}; + +// eslint-disable-next-line react/jsx-props-no-spreading +const Template = 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({}); + +export { + Default, +}; From 56007296b10e51f751bbd3df38e01b2f5dec921e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Sat, 12 Mar 2022 16:02:07 -0600 Subject: [PATCH 4/7] display icons in Storybook --- src/stories/SubscriptAvatar.stories.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/stories/SubscriptAvatar.stories.js b/src/stories/SubscriptAvatar.stories.js index d48cdf235369..1325ec644000 100644 --- a/src/stories/SubscriptAvatar.stories.js +++ b/src/stories/SubscriptAvatar.stories.js @@ -1,5 +1,6 @@ import React from 'react'; import SubscriptAvatar from '../components/SubscriptAvatar'; +import * as Expensicons from '../components/Icon/Expensicons'; /** * We use the Component Story Format for writing stories. Follow the docs here: @@ -9,7 +10,10 @@ import SubscriptAvatar from '../components/SubscriptAvatar'; export default { title: 'Components/SubscriptAvatar', component: SubscriptAvatar, - args: {}, + args: { + mainAvatar: Expensicons.Profile, + secondaryAvatar: Expensicons.Workspace, + }, }; // eslint-disable-next-line react/jsx-props-no-spreading From 93c9fd3ef958340f17c9fd7ddafa305183070861 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Sat, 12 Mar 2022 16:27:37 -0600 Subject: [PATCH 5/7] add size options to stories file --- src/stories/SubscriptAvatar.stories.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/stories/SubscriptAvatar.stories.js b/src/stories/SubscriptAvatar.stories.js index 1325ec644000..d0731bf403c1 100644 --- a/src/stories/SubscriptAvatar.stories.js +++ b/src/stories/SubscriptAvatar.stories.js @@ -1,6 +1,7 @@ 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: @@ -13,6 +14,12 @@ export default { 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 + }, }, }; From 38a45be4c8e36d666ae9130dffff9efcf1947b99 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Sat, 12 Mar 2022 16:50:24 -0600 Subject: [PATCH 6/7] add SubscriptAvatar stories to display avatar URLs --- src/stories/SubscriptAvatar.stories.js | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/stories/SubscriptAvatar.stories.js b/src/stories/SubscriptAvatar.stories.js index d0731bf403c1..85a39e1bffae 100644 --- a/src/stories/SubscriptAvatar.stories.js +++ b/src/stories/SubscriptAvatar.stories.js @@ -30,6 +30,13 @@ const Template = args => ; // See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args const Default = Template.bind({}); +const AvatarURLStory = Template.bind({}); +AvatarURLStory.args = { + mainAvatar: 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_1.png', + secondaryAvatar: 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_3.png', +}; + export { Default, + AvatarURLStory, }; From ebbbe4ddc7766acac3bb1064634b7612efa861a2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marco=20Ch=C3=A1vez?= Date: Mon, 14 Mar 2022 16:19:17 -0600 Subject: [PATCH 7/7] use CLOUDFRONT_URL const --- src/stories/SubscriptAvatar.stories.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/stories/SubscriptAvatar.stories.js b/src/stories/SubscriptAvatar.stories.js index 85a39e1bffae..0a6e67a2fdef 100644 --- a/src/stories/SubscriptAvatar.stories.js +++ b/src/stories/SubscriptAvatar.stories.js @@ -32,8 +32,8 @@ const Default = Template.bind({}); const AvatarURLStory = Template.bind({}); AvatarURLStory.args = { - mainAvatar: 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_1.png', - secondaryAvatar: 'https://d2k5nsl2zxldvw.cloudfront.net/images/avatars/avatar_3.png', + mainAvatar: `${CONST.CLOUDFRONT_URL}/images/avatars/avatar_1.png`, + secondaryAvatar: `${CONST.CLOUDFRONT_URL}/images/avatars/avatar_3.png`, }; export {