From d46f41aa37f03cd74e8a7afe5b8849c90278aad2 Mon Sep 17 00:00:00 2001 From: Deen Denno Date: Wed, 18 Aug 2021 13:27:37 -0500 Subject: [PATCH 1/6] feat: status badge --- .../StatusBadge/StatusBadge.stories.tsx | 20 ++++++++++ .../components/StatusBadge/StatusBadge.tsx | 38 +++++++++++++++++++ 2 files changed, 58 insertions(+) create mode 100644 addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx create mode 100644 addons/interactions/src/components/StatusBadge/StatusBadge.tsx diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx new file mode 100644 index 000000000000..b914cdea6144 --- /dev/null +++ b/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx @@ -0,0 +1,20 @@ +import { StatusBadge } from './StatusBadge'; +import { TestingStates } from '../../Panel'; + +export default { + title: 'StatusBadge', + component: StatusBadge, + paramaters: { layout: 'padded' }, +}; + +export const Pass = { + args: { status: TestingStates.DONE }, +}; + +export const Runs = { + args: { status: TestingStates.PENDING }, +}; + +export const Error = { + args: { status: TestingStates.ERROR }, +}; diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx new file mode 100644 index 000000000000..ed6395242cdb --- /dev/null +++ b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx @@ -0,0 +1,38 @@ +import React from 'react'; +import { styled, typography } from '@storybook/theming'; +import { TestState, TestingStates } from '../../Panel'; +import { theme } from '../../theme'; + +interface StatusBadgeProps { + status: TestState; +} +const { + colors: { + pure: { green, red, ochre }, + }, +} = theme; + +const StyledBadge = styled.div(({ status }: StatusBadgeProps) => ({ + padding: '4px 8px', + borderRadius: '4px', + background: status === TestingStates.DONE ? green : status === TestingStates.ERROR ? red : ochre, + color: 'white', + fontFamily: typography.fonts.base, + textTransform: 'uppercase', + fontSize: typography.size.s1, + letterSpacing: 3, + fontWeight: 500, + width: 65, + textAlign: 'center', +})); + +/** + * StatusBadge + * @param status: StatusBadgeProps + * @returns styled badge based on status + */ +export const StatusBadge: React.FC = ({ status }) => { + const badgeText = + status === TestingStates.ERROR ? 'Fail' : status === TestingStates.DONE ? 'Pass' : 'Runs'; + return {badgeText}; +}; From 1a97405aa6091dec3456c25198c659ff314aca9b Mon Sep 17 00:00:00 2001 From: Deen Denno Date: Fri, 20 Aug 2021 10:34:50 -0500 Subject: [PATCH 2/6] fix: story name --- .../src/components/StatusBadge/StatusBadge.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx index b914cdea6144..d741b6df4723 100644 --- a/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx +++ b/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx @@ -15,6 +15,6 @@ export const Runs = { args: { status: TestingStates.PENDING }, }; -export const Error = { +export const Fail = { args: { status: TestingStates.ERROR }, }; From 6af89fc83068a52cf6599eff0bce4d62c123f834 Mon Sep 17 00:00:00 2001 From: Deen Denno Date: Fri, 20 Aug 2021 10:40:00 -0500 Subject: [PATCH 3/6] refactor: remove docblock --- .../interactions/src/components/StatusBadge/StatusBadge.tsx | 5 ----- 1 file changed, 5 deletions(-) diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx index ed6395242cdb..b3b3fc454d26 100644 --- a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx +++ b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx @@ -26,11 +26,6 @@ const StyledBadge = styled.div(({ status }: StatusBadgeProps) => ({ textAlign: 'center', })); -/** - * StatusBadge - * @param status: StatusBadgeProps - * @returns styled badge based on status - */ export const StatusBadge: React.FC = ({ status }) => { const badgeText = status === TestingStates.ERROR ? 'Fail' : status === TestingStates.DONE ? 'Pass' : 'Runs'; From f5b18c341feb3d2111e42d28d2a691f17f67ec86 Mon Sep 17 00:00:00 2001 From: Deen Denno Date: Mon, 23 Aug 2021 18:13:41 -0500 Subject: [PATCH 4/6] refactor: badge text and bg color logic into object lookups --- .../components/StatusBadge/StatusBadge.tsx | 40 ++++++++++++------- 1 file changed, 25 insertions(+), 15 deletions(-) diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx index b3b3fc454d26..7be29d8b9a93 100644 --- a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx +++ b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx @@ -12,22 +12,32 @@ const { }, } = theme; -const StyledBadge = styled.div(({ status }: StatusBadgeProps) => ({ - padding: '4px 8px', - borderRadius: '4px', - background: status === TestingStates.DONE ? green : status === TestingStates.ERROR ? red : ochre, - color: 'white', - fontFamily: typography.fonts.base, - textTransform: 'uppercase', - fontSize: typography.size.s1, - letterSpacing: 3, - fontWeight: 500, - width: 65, - textAlign: 'center', -})); +const StyledBadge = styled.div(({ status }: StatusBadgeProps) => { + const backgroundColor = { + [TestingStates.DONE]: green, + [TestingStates.ERROR]: red, + [TestingStates.PENDING]: ochre, + }[status]; + return { + padding: '4px 8px', + borderRadius: '4px', + backgroundColor: backgroundColor, + color: 'white', + fontFamily: typography.fonts.base, + textTransform: 'uppercase', + fontSize: typography.size.s1, + letterSpacing: 3, + fontWeight: 500, + width: 65, + textAlign: 'center', + }; +}); export const StatusBadge: React.FC = ({ status }) => { - const badgeText = - status === TestingStates.ERROR ? 'Fail' : status === TestingStates.DONE ? 'Pass' : 'Runs'; + const badgeText = { + [TestingStates.DONE]: 'Pass', + [TestingStates.ERROR]: 'Fail', + [TestingStates.PENDING]: 'Runs', + }[status]; return {badgeText}; }; From 439bc39af00954058f6d640b867af66ed16325f1 Mon Sep 17 00:00:00 2001 From: Deen Denno Date: Mon, 23 Aug 2021 18:16:31 -0500 Subject: [PATCH 5/6] refactor: export props so storybook does not get angry --- addons/interactions/src/components/StatusBadge/StatusBadge.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx index 7be29d8b9a93..ae51e92284d4 100644 --- a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx +++ b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx @@ -3,7 +3,7 @@ import { styled, typography } from '@storybook/theming'; import { TestState, TestingStates } from '../../Panel'; import { theme } from '../../theme'; -interface StatusBadgeProps { +export interface StatusBadgeProps { status: TestState; } const { From 46a0813e8208235e93be63b886637543904b70b0 Mon Sep 17 00:00:00 2001 From: Deen Denno Date: Sun, 29 Aug 2021 18:40:03 -0500 Subject: [PATCH 6/6] fix: update types --- .../StatusBadge/StatusBadge.stories.tsx | 8 ++++---- .../src/components/StatusBadge/StatusBadge.tsx | 16 ++++++++-------- 2 files changed, 12 insertions(+), 12 deletions(-) diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx index d741b6df4723..6af9ca751211 100644 --- a/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx +++ b/addons/interactions/src/components/StatusBadge/StatusBadge.stories.tsx @@ -1,5 +1,5 @@ import { StatusBadge } from './StatusBadge'; -import { TestingStates } from '../../Panel'; +import { CallState } from '../../types'; export default { title: 'StatusBadge', @@ -8,13 +8,13 @@ export default { }; export const Pass = { - args: { status: TestingStates.DONE }, + args: { status: CallState.DONE }, }; export const Runs = { - args: { status: TestingStates.PENDING }, + args: { status: CallState.PENDING }, }; export const Fail = { - args: { status: TestingStates.ERROR }, + args: { status: CallState.ERROR }, }; diff --git a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx index ae51e92284d4..620a9cf41e68 100644 --- a/addons/interactions/src/components/StatusBadge/StatusBadge.tsx +++ b/addons/interactions/src/components/StatusBadge/StatusBadge.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { styled, typography } from '@storybook/theming'; -import { TestState, TestingStates } from '../../Panel'; +import { CallState } from '../../types'; import { theme } from '../../theme'; export interface StatusBadgeProps { - status: TestState; + status: `${CallState}`; } const { colors: { @@ -14,9 +14,9 @@ const { const StyledBadge = styled.div(({ status }: StatusBadgeProps) => { const backgroundColor = { - [TestingStates.DONE]: green, - [TestingStates.ERROR]: red, - [TestingStates.PENDING]: ochre, + [CallState.DONE]: green, + [CallState.ERROR]: red, + [CallState.PENDING]: ochre, }[status]; return { padding: '4px 8px', @@ -35,9 +35,9 @@ const StyledBadge = styled.div(({ status }: StatusBadgeProps) => { export const StatusBadge: React.FC = ({ status }) => { const badgeText = { - [TestingStates.DONE]: 'Pass', - [TestingStates.ERROR]: 'Fail', - [TestingStates.PENDING]: 'Runs', + [CallState.DONE]: 'Pass', + [CallState.ERROR]: 'Fail', + [CallState.PENDING]: 'Runs', }[status]; return {badgeText}; };