From 133cb0d3306160b96adbdbb760ffdccddb409d0e Mon Sep 17 00:00:00 2001 From: Shawn Rivers Date: Mon, 9 Aug 2021 14:29:27 +0900 Subject: [PATCH 01/27] feat: add base button components --- .../buttons/base/BaseAnchor/index.stories.tsx | 22 +++++++++++++ .../shared/buttons/base/BaseAnchor/index.tsx | 18 +++++++++++ .../buttons/base/BaseButton/index.stories.tsx | 22 +++++++++++++ .../shared/buttons/base/BaseButton/index.tsx | 18 +++++++++++ .../buttons/base/BaseLink/index.stories.tsx | 22 +++++++++++++ .../v6/shared/buttons/base/BaseLink/index.tsx | 32 +++++++++++++++++++ .../buttons/base/styles/buttonStyles.ts | 27 ++++++++++++++++ 7 files changed, 161 insertions(+) create mode 100644 src/client/components/v6/shared/buttons/base/BaseAnchor/index.stories.tsx create mode 100644 src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx create mode 100644 src/client/components/v6/shared/buttons/base/BaseButton/index.stories.tsx create mode 100644 src/client/components/v6/shared/buttons/base/BaseButton/index.tsx create mode 100644 src/client/components/v6/shared/buttons/base/BaseLink/index.stories.tsx create mode 100644 src/client/components/v6/shared/buttons/base/BaseLink/index.tsx create mode 100644 src/client/components/v6/shared/buttons/base/styles/buttonStyles.ts diff --git a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.stories.tsx b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.stories.tsx new file mode 100644 index 00000000000..bf58243c334 --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, Story } from '@storybook/react'; +import { BaseAnchor } from '.'; +import { ThemeDecorator } from 'storybook/ThemeDecorator'; +import { Typography } from 'client/components/atoms/Typography'; + +export default { + title: 'Components/Shared/Buttons/Base/BaseAnchor', + decorators: [ThemeDecorator()], + component: BaseAnchor, +} as Meta; + +const Template: Story = () => { + return ( + + + Text + + + ); +}; + +export const Default = Template.bind({}); diff --git a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx new file mode 100644 index 00000000000..66b5f5e36da --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx @@ -0,0 +1,18 @@ +import { forwardRef } from 'react'; +import { buttonStyles } from 'client/components/v6/shared/buttons/base/styles/buttonStyles'; + +type BaseAnchorProps = React.ComponentProps<'a'> & { + children?: React.ReactNode; +}; + +export const BaseAnchor = forwardRef( + (props, ref) => { + const { children, ...buttonProps } = props; + + return ( + + {children} + + ); + } +); diff --git a/src/client/components/v6/shared/buttons/base/BaseButton/index.stories.tsx b/src/client/components/v6/shared/buttons/base/BaseButton/index.stories.tsx new file mode 100644 index 00000000000..9905b0c0178 --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/BaseButton/index.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, Story } from '@storybook/react'; +import { BaseButton } from '.'; +import { ThemeDecorator } from 'storybook/ThemeDecorator'; +import { Typography } from 'client/components/atoms/Typography'; + +export default { + title: 'Components/Shared/Buttons/Base/BaseButton', + decorators: [ThemeDecorator()], + component: BaseButton, +} as Meta; + +const Template: Story = () => { + return ( + + + Text + + + ); +}; + +export const Default = Template.bind({}); diff --git a/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx b/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx new file mode 100644 index 00000000000..1f7558b2e8c --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx @@ -0,0 +1,18 @@ +import { forwardRef } from 'react'; +import { buttonStyles } from 'client/components/v6/shared/buttons/base/styles/buttonStyles'; + +type BaseButtonProps = React.ComponentProps<'button'> & { + children?: React.ReactNode; +}; + +export const BaseButton = forwardRef( + (props, ref) => { + const { children, ...buttonProps } = props; + + return ( + + ); + } +); diff --git a/src/client/components/v6/shared/buttons/base/BaseLink/index.stories.tsx b/src/client/components/v6/shared/buttons/base/BaseLink/index.stories.tsx new file mode 100644 index 00000000000..afbaf7c65b7 --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/BaseLink/index.stories.tsx @@ -0,0 +1,22 @@ +import type { Meta, Story } from '@storybook/react'; +import { BaseLink } from '.'; +import { ThemeDecorator } from 'storybook/ThemeDecorator'; +import { Typography } from 'client/components/atoms/Typography'; + +export default { + title: 'Components/Shared/Buttons/Base/BaseLink', + decorators: [ThemeDecorator()], + component: BaseLink, +} as Meta; + +const Template: Story = () => { + return ( + + + Text + + + ); +}; + +export const Default = Template.bind({}); diff --git a/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx b/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx new file mode 100644 index 00000000000..d82dd5f3789 --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx @@ -0,0 +1,32 @@ +import Link, { LinkProps } from 'next/link'; +import { useRouter } from 'next/router'; +import { forwardRef } from 'react'; +import { buttonStyles } from 'client/components/v6/shared/buttons/base/styles/buttonStyles'; + +type BaseAnchorProps = Omit, 'href'> & { + as?: LinkProps['as']; + href: LinkProps['href']; + locale?: LinkProps['locale']; + children?: React.ReactNode; +}; + +export const BaseLink = forwardRef( + (props, ref) => { + const router = useRouter(); + const { + as, + href, + locale = router.locale, + children, + ...buttonProps + } = props; + + return ( + + + {children} + + + ); + } +); diff --git a/src/client/components/v6/shared/buttons/base/styles/buttonStyles.ts b/src/client/components/v6/shared/buttons/base/styles/buttonStyles.ts new file mode 100644 index 00000000000..fc65861dafd --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/styles/buttonStyles.ts @@ -0,0 +1,27 @@ +import { css } from '@emotion/core'; +import { commonStyles } from 'client/styles/tokens'; +import { getColorVarName } from 'client/styles/tokens/colors'; + +export const buttonStyles = css` + display: inline-block; + padding: ${commonStyles.spacing.xxs} ${commonStyles.spacing.xs}; + background: none; + border: 2px solid rgba(0, 0, 0, 0); + transition: border-color 0.3s ease-out; + + &.focus-visible { + outline: 2px solid transparent; + outline-offset: 2px; + } + + &:active, + &.focus-visible { + border-color: var(${getColorVarName('onBackground', 'variant0')}); + } + + @media (hover: hover) and (pointer: fine) { + &:hover { + border-color: var(${getColorVarName('onBackground', 'variant0')}); + } + } +`; From bb2f726460055b4ccda77bbf5d44d2caf88006b8 Mon Sep 17 00:00:00 2001 From: Shawn Rivers Date: Mon, 9 Aug 2021 14:30:22 +0900 Subject: [PATCH 02/27] build: add layout component in Storybook to switch theme --- .storybook/libs/ThemeDecorator.tsx | 56 ++++++++++++++++++++++-------- 1 file changed, 41 insertions(+), 15 deletions(-) diff --git a/.storybook/libs/ThemeDecorator.tsx b/.storybook/libs/ThemeDecorator.tsx index d18fbfd9231..be605ca8850 100644 --- a/.storybook/libs/ThemeDecorator.tsx +++ b/.storybook/libs/ThemeDecorator.tsx @@ -3,34 +3,60 @@ import { css } from '@emotion/core'; import { EmotionThemeProvider } from 'client/store/emotion/provider'; import { ThemeContextProvider } from 'client/store/theme/context'; import { useThemeContext } from 'client/store/theme/hook/useThemeContext'; -import { ThemeMode } from 'client/types/themeMode'; +import { Typography } from 'client/components/atoms/Typography'; -type ThemeConsumerProps = { - theme?: ThemeMode; -}; - -const ThemeConsumer: React.FC = props => { - const { theme = 'light' } = props; +const ThemeConsumer: React.FC = () => { + const { themeMode, setTheme } = useThemeContext(); - const { setTheme } = useThemeContext(); - React.useEffect(() => { - setTheme(theme); - }, [setTheme, theme]); + const handleChange = (event: React.ChangeEvent) => { + const value = event.target.value; + if (value === 'light' || value === 'dark') { + setTheme(value); + } + }; - return null; + return ( +
+ +
+ ); }; -export const ThemeDecorator = (options?: Partial) => { +export const ThemeDecorator = () => { return (Story: any) => { return ( + +
-
From d7a6d76429caaade02b33395d181faecc73ce772 Mon Sep 17 00:00:00 2001 From: Shawn Rivers Date: Mon, 9 Aug 2021 15:17:10 +0900 Subject: [PATCH 03/27] style: refine button styles --- .../shared/buttons/base/BaseAnchor/index.tsx | 4 +- .../shared/buttons/base/BaseButton/index.tsx | 2 +- .../v6/shared/buttons/base/BaseLink/index.tsx | 4 +- .../v6/shared/buttons/base/styles/button.ts | 7 ++++ .../buttons/base/styles/buttonStyles.ts | 27 ------------ .../v6/shared/buttons/base/styles/link.ts | 7 ++++ .../v6/shared/buttons/base/styles/shared.ts | 41 +++++++++++++++++++ 7 files changed, 60 insertions(+), 32 deletions(-) create mode 100644 src/client/components/v6/shared/buttons/base/styles/button.ts delete mode 100644 src/client/components/v6/shared/buttons/base/styles/buttonStyles.ts create mode 100644 src/client/components/v6/shared/buttons/base/styles/link.ts create mode 100644 src/client/components/v6/shared/buttons/base/styles/shared.ts diff --git a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx index 66b5f5e36da..03ba5f8beed 100644 --- a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx @@ -1,5 +1,5 @@ import { forwardRef } from 'react'; -import { buttonStyles } from 'client/components/v6/shared/buttons/base/styles/buttonStyles'; +import { linkStyles } from 'client/components/v6/shared/buttons/base/styles/link'; type BaseAnchorProps = React.ComponentProps<'a'> & { children?: React.ReactNode; @@ -10,7 +10,7 @@ export const BaseAnchor = forwardRef( const { children, ...buttonProps } = props; return ( - + {children} ); diff --git a/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx b/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx index 1f7558b2e8c..361bca8cf08 100644 --- a/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx @@ -1,5 +1,5 @@ import { forwardRef } from 'react'; -import { buttonStyles } from 'client/components/v6/shared/buttons/base/styles/buttonStyles'; +import { buttonStyles } from 'client/components/v6/shared/buttons/base/styles/button'; type BaseButtonProps = React.ComponentProps<'button'> & { children?: React.ReactNode; diff --git a/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx b/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx index d82dd5f3789..e18288b3081 100644 --- a/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx @@ -1,7 +1,7 @@ import Link, { LinkProps } from 'next/link'; import { useRouter } from 'next/router'; import { forwardRef } from 'react'; -import { buttonStyles } from 'client/components/v6/shared/buttons/base/styles/buttonStyles'; +import { linkStyles } from 'client/components/v6/shared/buttons/base/styles/link'; type BaseAnchorProps = Omit, 'href'> & { as?: LinkProps['as']; @@ -23,7 +23,7 @@ export const BaseLink = forwardRef( return ( - + {children} diff --git a/src/client/components/v6/shared/buttons/base/styles/button.ts b/src/client/components/v6/shared/buttons/base/styles/button.ts new file mode 100644 index 00000000000..058bff86056 --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/styles/button.ts @@ -0,0 +1,7 @@ +import { css } from '@emotion/core'; +import { sharedStyles } from 'client/components/v6/shared/buttons/base/styles/shared'; + +export const buttonStyles = css` + ${sharedStyles}; + border-width: 2px; +`; diff --git a/src/client/components/v6/shared/buttons/base/styles/buttonStyles.ts b/src/client/components/v6/shared/buttons/base/styles/buttonStyles.ts deleted file mode 100644 index fc65861dafd..00000000000 --- a/src/client/components/v6/shared/buttons/base/styles/buttonStyles.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { css } from '@emotion/core'; -import { commonStyles } from 'client/styles/tokens'; -import { getColorVarName } from 'client/styles/tokens/colors'; - -export const buttonStyles = css` - display: inline-block; - padding: ${commonStyles.spacing.xxs} ${commonStyles.spacing.xs}; - background: none; - border: 2px solid rgba(0, 0, 0, 0); - transition: border-color 0.3s ease-out; - - &.focus-visible { - outline: 2px solid transparent; - outline-offset: 2px; - } - - &:active, - &.focus-visible { - border-color: var(${getColorVarName('onBackground', 'variant0')}); - } - - @media (hover: hover) and (pointer: fine) { - &:hover { - border-color: var(${getColorVarName('onBackground', 'variant0')}); - } - } -`; diff --git a/src/client/components/v6/shared/buttons/base/styles/link.ts b/src/client/components/v6/shared/buttons/base/styles/link.ts new file mode 100644 index 00000000000..a3d86b4c862 --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/styles/link.ts @@ -0,0 +1,7 @@ +import { css } from '@emotion/core'; +import { sharedStyles } from 'client/components/v6/shared/buttons/base/styles/shared'; + +export const linkStyles = css` + ${sharedStyles}; + border-bottom-width: 2px; +`; diff --git a/src/client/components/v6/shared/buttons/base/styles/shared.ts b/src/client/components/v6/shared/buttons/base/styles/shared.ts new file mode 100644 index 00000000000..6112e76dd72 --- /dev/null +++ b/src/client/components/v6/shared/buttons/base/styles/shared.ts @@ -0,0 +1,41 @@ +import { css } from '@emotion/core'; +import { commonStyles } from 'client/styles/tokens'; +import { getColorVarName } from 'client/styles/tokens/colors'; + +export const sharedStyles = css` + display: inline-block; + position: relative; + overflow: hidden; + padding: ${commonStyles.spacing.xxs} ${commonStyles.spacing.xs}; + background: none; + border: 0 solid var(${getColorVarName('onBackground', 'variant0')}); + + &::before { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + content: ''; + background-color: var(${getColorVarName('primary', 'standard')}); + opacity: 0.25; + transform: translateX(-102%); + transition: transform 0.3s cubic-bezier(0, 0.5, 0.7, 1); + } + + &.focus-visible { + outline: 2px solid transparent; + outline-offset: 2px; + } + + &:active::before, + &.focus-visible::before { + transform: translateX(0); + } + + @media (hover: hover) and (pointer: fine) { + &:hover::before { + transform: translateX(0); + } + } +`; From b813c51e2e446ae0b2e725ccf4a578f7424e3a74 Mon Sep 17 00:00:00 2001 From: Shawn Rivers Date: Mon, 9 Aug 2021 18:16:46 +0900 Subject: [PATCH 04/27] refactor: use styles generation functions --- .../shared/buttons/base/BaseAnchor/index.tsx | 11 ++- .../shared/buttons/base/BaseButton/index.tsx | 10 ++- .../v6/shared/buttons/base/BaseLink/index.tsx | 10 ++- .../v6/shared/buttons/base/styles/button.ts | 17 +++-- .../v6/shared/buttons/base/styles/link.ts | 17 +++-- .../v6/shared/buttons/base/styles/shared.ts | 73 +++++++++++-------- 6 files changed, 85 insertions(+), 53 deletions(-) diff --git a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx index 03ba5f8beed..020206931a1 100644 --- a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx @@ -1,16 +1,19 @@ -import { forwardRef } from 'react'; -import { linkStyles } from 'client/components/v6/shared/buttons/base/styles/link'; +import { forwardRef, useMemo } from 'react'; +import { getLinkStyles } from 'client/components/v6/shared/buttons/base/styles/link'; type BaseAnchorProps = React.ComponentProps<'a'> & { children?: React.ReactNode; + disabled?: boolean; }; export const BaseAnchor = forwardRef( (props, ref) => { - const { children, ...buttonProps } = props; + const { children, disabled, ...buttonProps } = props; + + const styles = useMemo(() => getLinkStyles({ disabled }), [disabled]); return ( - + {children} ); diff --git a/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx b/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx index 361bca8cf08..a0925655410 100644 --- a/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx @@ -1,5 +1,5 @@ -import { forwardRef } from 'react'; -import { buttonStyles } from 'client/components/v6/shared/buttons/base/styles/button'; +import { forwardRef, useMemo } from 'react'; +import { getButtonStyles } from 'client/components/v6/shared/buttons/base/styles/button'; type BaseButtonProps = React.ComponentProps<'button'> & { children?: React.ReactNode; @@ -7,10 +7,12 @@ type BaseButtonProps = React.ComponentProps<'button'> & { export const BaseButton = forwardRef( (props, ref) => { - const { children, ...buttonProps } = props; + const { children, disabled, ...buttonProps } = props; + + const styles = useMemo(() => getButtonStyles({ disabled }), [disabled]); return ( - ); diff --git a/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx b/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx index e18288b3081..0889ff9cd32 100644 --- a/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseLink/index.tsx @@ -1,13 +1,14 @@ import Link, { LinkProps } from 'next/link'; import { useRouter } from 'next/router'; -import { forwardRef } from 'react'; -import { linkStyles } from 'client/components/v6/shared/buttons/base/styles/link'; +import { forwardRef, useMemo } from 'react'; +import { getLinkStyles } from 'client/components/v6/shared/buttons/base/styles/link'; type BaseAnchorProps = Omit, 'href'> & { as?: LinkProps['as']; href: LinkProps['href']; locale?: LinkProps['locale']; children?: React.ReactNode; + disabled?: boolean; }; export const BaseLink = forwardRef( @@ -17,13 +18,16 @@ export const BaseLink = forwardRef( as, href, locale = router.locale, + disabled = false, children, ...buttonProps } = props; + const styles = useMemo(() => getLinkStyles({ disabled }), [disabled]); + return ( - + {children} diff --git a/src/client/components/v6/shared/buttons/base/styles/button.ts b/src/client/components/v6/shared/buttons/base/styles/button.ts index 058bff86056..8e360bb7704 100644 --- a/src/client/components/v6/shared/buttons/base/styles/button.ts +++ b/src/client/components/v6/shared/buttons/base/styles/button.ts @@ -1,7 +1,14 @@ import { css } from '@emotion/core'; -import { sharedStyles } from 'client/components/v6/shared/buttons/base/styles/shared'; +import { + getSharedStyles, + GetSharedStylesParams, +} from 'client/components/v6/shared/buttons/base/styles/shared'; -export const buttonStyles = css` - ${sharedStyles}; - border-width: 2px; -`; +export function getButtonStyles(params?: Partial) { + const sharedStyles = getSharedStyles(params); + + return css` + ${sharedStyles}; + border-width: 2px; + `; +} diff --git a/src/client/components/v6/shared/buttons/base/styles/link.ts b/src/client/components/v6/shared/buttons/base/styles/link.ts index a3d86b4c862..f7a5793d85e 100644 --- a/src/client/components/v6/shared/buttons/base/styles/link.ts +++ b/src/client/components/v6/shared/buttons/base/styles/link.ts @@ -1,7 +1,14 @@ import { css } from '@emotion/core'; -import { sharedStyles } from 'client/components/v6/shared/buttons/base/styles/shared'; +import { + getSharedStyles, + GetSharedStylesParams, +} from 'client/components/v6/shared/buttons/base/styles/shared'; -export const linkStyles = css` - ${sharedStyles}; - border-bottom-width: 2px; -`; +export function getLinkStyles(params?: Partial) { + const sharedStyles = getSharedStyles(params); + + return css` + ${sharedStyles}; + border-bottom-width: 2px; + `; +} diff --git a/src/client/components/v6/shared/buttons/base/styles/shared.ts b/src/client/components/v6/shared/buttons/base/styles/shared.ts index 6112e76dd72..93ede1deff5 100644 --- a/src/client/components/v6/shared/buttons/base/styles/shared.ts +++ b/src/client/components/v6/shared/buttons/base/styles/shared.ts @@ -2,40 +2,49 @@ import { css } from '@emotion/core'; import { commonStyles } from 'client/styles/tokens'; import { getColorVarName } from 'client/styles/tokens/colors'; -export const sharedStyles = css` - display: inline-block; - position: relative; - overflow: hidden; - padding: ${commonStyles.spacing.xxs} ${commonStyles.spacing.xs}; - background: none; - border: 0 solid var(${getColorVarName('onBackground', 'variant0')}); +export type GetSharedStylesParams = { + disabled: boolean; +}; - &::before { - position: absolute; - width: 100%; - height: 100%; - top: 0; - left: 0; - content: ''; - background-color: var(${getColorVarName('primary', 'standard')}); - opacity: 0.25; - transform: translateX(-102%); - transition: transform 0.3s cubic-bezier(0, 0.5, 0.7, 1); - } +export function getSharedStyles(params?: Partial) { + const disabled = params?.disabled ?? false; - &.focus-visible { - outline: 2px solid transparent; - outline-offset: 2px; - } + return css` + display: inline-block; + position: relative; + overflow: hidden; + padding: ${commonStyles.spacing.xxs} ${commonStyles.spacing.xs}; + background: none; + border: 0 solid var(${getColorVarName('onBackground', 'variant0')}); + cursor: ${disabled ? 'default' : 'pointer'}; - &:active::before, - &.focus-visible::before { - transform: translateX(0); - } + &::before { + position: absolute; + width: 100%; + height: 100%; + top: 0; + left: 0; + content: ''; + background-color: var(${getColorVarName('primary', 'standard')}); + opacity: 0.25; + transform: translateX(-102%); + transition: transform 0.3s cubic-bezier(0, 0.5, 0.7, 1); + } + + &.focus-visible { + outline: 2px solid transparent; + outline-offset: 2px; + } + + &:active::before, + &.focus-visible::before { + transform: translateX(${disabled ? '-102%' : '0'}); + } - @media (hover: hover) and (pointer: fine) { - &:hover::before { - transform: translateX(0); + @media (hover: hover) and (pointer: fine) { + &:hover::before { + transform: translateX(${disabled ? '-102%' : '0'}); + } } - } -`; + `; +} From da65917d67a24d9ace58000e47640b16c061648a Mon Sep 17 00:00:00 2001 From: Shawn Rivers Date: Mon, 9 Aug 2021 18:34:37 +0900 Subject: [PATCH 05/27] refactor: add a prop to control border visibility of button component --- .../buttons/base/BaseAnchor/index.stories.tsx | 25 +++++++++++++++--- .../shared/buttons/base/BaseAnchor/index.tsx | 17 ++++++++---- .../buttons/base/BaseButton/index.stories.tsx | 26 ++++++++++++++++--- .../shared/buttons/base/BaseButton/index.tsx | 15 ++++++++--- .../buttons/base/BaseLink/index.stories.tsx | 26 ++++++++++++++++--- .../v6/shared/buttons/base/BaseLink/index.tsx | 20 +++++++++----- .../v6/shared/buttons/base/styles/button.ts | 11 +++++--- .../v6/shared/buttons/base/styles/link.ts | 12 ++++++--- 8 files changed, 120 insertions(+), 32 deletions(-) diff --git a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.stories.tsx b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.stories.tsx index bf58243c334..43c771ef3b0 100644 --- a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.stories.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.stories.tsx @@ -2,16 +2,19 @@ import type { Meta, Story } from '@storybook/react'; import { BaseAnchor } from '.'; import { ThemeDecorator } from 'storybook/ThemeDecorator'; import { Typography } from 'client/components/atoms/Typography'; +import { BaseLinkProps } from 'client/components/v6/shared/buttons/base/BaseLink'; + +type TemplateProps = Pick; export default { title: 'Components/Shared/Buttons/Base/BaseAnchor', decorators: [ThemeDecorator()], component: BaseAnchor, -} as Meta; +} as Meta; -const Template: Story = () => { +const Template: Story = props => { return ( - + Text @@ -20,3 +23,19 @@ const Template: Story = () => { }; export const Default = Template.bind({}); +Default.args = { + disabled: false, + hideBorder: false, +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, + hideBorder: false, +}; + +export const NoBorder = Template.bind({}); +NoBorder.args = { + disabled: false, + hideBorder: true, +}; diff --git a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx index 020206931a1..899958f3c67 100644 --- a/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseAnchor/index.tsx @@ -1,16 +1,23 @@ import { forwardRef, useMemo } from 'react'; -import { getLinkStyles } from 'client/components/v6/shared/buttons/base/styles/link'; +import { + getLinkStyles, + GetLinkStylesParams, +} from 'client/components/v6/shared/buttons/base/styles/link'; -type BaseAnchorProps = React.ComponentProps<'a'> & { - children?: React.ReactNode; +export type BaseAnchorProps = React.ComponentProps<'a'> & { disabled?: boolean; + hideBorder?: GetLinkStylesParams['hideBorder']; + children?: React.ReactNode; }; export const BaseAnchor = forwardRef( (props, ref) => { - const { children, disabled, ...buttonProps } = props; + const { disabled, hideBorder, children, ...buttonProps } = props; - const styles = useMemo(() => getLinkStyles({ disabled }), [disabled]); + const styles = useMemo( + () => getLinkStyles({ disabled, hideBorder }), + [disabled, hideBorder] + ); return ( diff --git a/src/client/components/v6/shared/buttons/base/BaseButton/index.stories.tsx b/src/client/components/v6/shared/buttons/base/BaseButton/index.stories.tsx index 9905b0c0178..20e0b0a0338 100644 --- a/src/client/components/v6/shared/buttons/base/BaseButton/index.stories.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseButton/index.stories.tsx @@ -1,17 +1,19 @@ import type { Meta, Story } from '@storybook/react'; -import { BaseButton } from '.'; +import { BaseButton, BaseButtonProps } from '.'; import { ThemeDecorator } from 'storybook/ThemeDecorator'; import { Typography } from 'client/components/atoms/Typography'; +type TemplateProps = Pick; + export default { title: 'Components/Shared/Buttons/Base/BaseButton', decorators: [ThemeDecorator()], component: BaseButton, -} as Meta; +} as Meta; -const Template: Story = () => { +const Template: Story = props => { return ( - + Text @@ -20,3 +22,19 @@ const Template: Story = () => { }; export const Default = Template.bind({}); +Default.args = { + disabled: false, + hideBorder: false, +}; + +export const Disabled = Template.bind({}); +Disabled.args = { + disabled: true, + hideBorder: false, +}; + +export const NoBorder = Template.bind({}); +NoBorder.args = { + disabled: false, + hideBorder: true, +}; diff --git a/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx b/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx index a0925655410..32b62fcea5c 100644 --- a/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx +++ b/src/client/components/v6/shared/buttons/base/BaseButton/index.tsx @@ -1,15 +1,22 @@ import { forwardRef, useMemo } from 'react'; -import { getButtonStyles } from 'client/components/v6/shared/buttons/base/styles/button'; +import { + getButtonStyles, + GetButtonStylesParams, +} from 'client/components/v6/shared/buttons/base/styles/button'; -type BaseButtonProps = React.ComponentProps<'button'> & { +export type BaseButtonProps = React.ComponentProps<'button'> & { + hideBorder?: GetButtonStylesParams['hideBorder']; children?: React.ReactNode; }; export const BaseButton = forwardRef( (props, ref) => { - const { children, disabled, ...buttonProps } = props; + const { hideBorder, disabled, children, ...buttonProps } = props; - const styles = useMemo(() => getButtonStyles({ disabled }), [disabled]); + const styles = useMemo( + () => getButtonStyles({ hideBorder, disabled }), + [hideBorder, disabled] + ); return (