From b3dbb345b61e6b997cc55672de106ac447bb7fd5 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Thu, 29 Oct 2020 13:00:00 +0100 Subject: [PATCH 1/4] =?UTF-8?q?=F0=9F=9A=9A=20Rename=20to=20.tsx=20extensi?= =?UTF-8?q?on?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...heckbox.stories.jsx => SelectionControls.Checkbox.stories.tsx} | 0 ...rols.Radio.stories.jsx => SelectionControls.Radio.stories.tsx} | 0 ...ls.Switch.stories.jsx => SelectionControls.Switch.stories.tsx} | 0 3 files changed, 0 insertions(+), 0 deletions(-) rename apps/storybook-react/stories/{SelectionControls.Checkbox.stories.jsx => SelectionControls.Checkbox.stories.tsx} (100%) rename apps/storybook-react/stories/{SelectionControls.Radio.stories.jsx => SelectionControls.Radio.stories.tsx} (100%) rename apps/storybook-react/stories/{SelectionControls.Switch.stories.jsx => SelectionControls.Switch.stories.tsx} (100%) diff --git a/apps/storybook-react/stories/SelectionControls.Checkbox.stories.jsx b/apps/storybook-react/stories/SelectionControls.Checkbox.stories.tsx similarity index 100% rename from apps/storybook-react/stories/SelectionControls.Checkbox.stories.jsx rename to apps/storybook-react/stories/SelectionControls.Checkbox.stories.tsx diff --git a/apps/storybook-react/stories/SelectionControls.Radio.stories.jsx b/apps/storybook-react/stories/SelectionControls.Radio.stories.tsx similarity index 100% rename from apps/storybook-react/stories/SelectionControls.Radio.stories.jsx rename to apps/storybook-react/stories/SelectionControls.Radio.stories.tsx diff --git a/apps/storybook-react/stories/SelectionControls.Switch.stories.jsx b/apps/storybook-react/stories/SelectionControls.Switch.stories.tsx similarity index 100% rename from apps/storybook-react/stories/SelectionControls.Switch.stories.jsx rename to apps/storybook-react/stories/SelectionControls.Switch.stories.tsx From 988eec685baec5d35b6baa1d9c0f9d104ac49ace Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Thu, 29 Oct 2020 14:22:18 +0100 Subject: [PATCH 2/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Add=20new=20naming=20p?= =?UTF-8?q?attern=20for=20Props.=20TS=20for=20checkbox=20stories?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SelectionControls.Checkbox.stories.tsx | 334 +++++++++--------- .../SelectionControls/Checkbox/Checkbox.tsx | 88 ++--- .../src/SelectionControls/Radio/Radio.tsx | 6 +- .../src/SelectionControls/Switch/Input.tsx | 6 +- .../SelectionControls/Switch/InputWrapper.tsx | 21 +- .../src/SelectionControls/Switch/Switch.tsx | 4 +- .../Switch/SwitchDefault.tsx | 4 +- .../SelectionControls/Switch/SwitchSmall.tsx | 4 +- .../core-react/src/SelectionControls/index.js | 4 - .../core-react/src/SelectionControls/index.ts | 3 + libraries/core-react/src/index.ts | 2 +- 11 files changed, 226 insertions(+), 250 deletions(-) delete mode 100644 libraries/core-react/src/SelectionControls/index.js create mode 100644 libraries/core-react/src/SelectionControls/index.ts diff --git a/apps/storybook-react/stories/SelectionControls.Checkbox.stories.tsx b/apps/storybook-react/stories/SelectionControls.Checkbox.stories.tsx index 123cef7d36..de68be310a 100644 --- a/apps/storybook-react/stories/SelectionControls.Checkbox.stories.tsx +++ b/apps/storybook-react/stories/SelectionControls.Checkbox.stories.tsx @@ -1,20 +1,18 @@ import React, { useState, useRef } from 'react' -import { Checkbox, Icon, Typography, Button } from '@equinor/eds-core-react' +import { + Checkbox, + Icon, + Typography, + Button, + CheckboxProps, +} from '@equinor/eds-core-react' import styled from 'styled-components' import { action } from '@storybook/addon-actions' import { checkbox } from '@equinor/eds-icons' import { useForm } from 'react-hook-form' +import { Meta, Story } from '@storybook/react' Icon.add({ checkbox }) -const Wrapper = styled.div` - display: grid; - grid-template-rows: min-width; - padding: 32px; - padding-bottom: 8rem; - grid-gap: 2rem; - position: relative; - transition: all 0.36s; -` const BlockCheckbox = styled(Checkbox)` display: flex; @@ -29,9 +27,13 @@ const UnstyledList = styled.ul` export default { title: 'Components/Selection controls/Checkbox', component: Checkbox, -} +} as Meta + +export const Default: Story = (args) => ( + +) -export const CheckboxControl = () => { +export const SingleCheckbox: Story = () => { // Use this to set the input to indeterminate = true as this must be done via JavaScript // (cannot use an HTML attribute for this) const indeterminateRef = useRef() @@ -39,183 +41,171 @@ export const CheckboxControl = () => { const [checked, updateChecked] = useState(false) return ( - -
- - Single checkbox examples - - -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - { - updateChecked(e.target.checked) - }} - checked={checked} - /> -
    • -     -
    -     + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + { + updateChecked(e.target.checked) + }} + checked={checked} + /> +
    • +     ) } -export const CheckboxGroupControl = () => { +export const GroupedCheckbox: Story = () => { return ( - - - Multiple checkboxes in a group - -
    - - We are in this together! - - ๐Ÿ™Œ - - - -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -
    -     +
    + + We are in this together! + + ๐Ÿ™Œ + + + +
  • + +
    • +
  • + +
    • +
  • + +
    • +     +
    ) } -export const WithFormsControl = () => { +type FormData = { + favourites: string[] + agree: string +} + +export const WithFormsControl: Story = () => { // Example with external forms library, react-hook-form - const { register, handleSubmit, watch, errors } = useForm() + // eslint-disable-next-line @typescript-eslint/unbound-method + const { register, handleSubmit, watch, errors } = useForm() const [isSubmitted, updateIsSubmitted] = useState(false) - const [formData, updateFormData] = useState(null) + const [formData, updateFormData] = useState(null) - const onSubmit = (data) => { - updateFormData(JSON.stringify(data)) + const onSubmit = (data: FormData) => { + updateFormData(data) updateIsSubmitted(true) action('onSubmit')(data) } console.log(watch('example')) return ( - -
    - - Example with React Hook Form - - - Real life example with an external{' '} - - form library - - -
    - {isSubmitted ? ( - <> - Submitted data: -

    {formData}

    - - - ) : ( -
    -
    - Whatโ€˜s your favourites? - {/* Just to demonstrate style addons, a list would have been better for semantic */} - - - - -
    - + + Real life example with an external{' '} + + form library + + + + {isSubmitted ? ( + <> + Submitted data: +

    {JSON.stringify(formData)}

    + + + ) : ( +
    +
    + Whatโ€˜s your favourites? + {/* Just to demonstrate style addons, a list would have been better for semantic */} + + + - - Hey you! This field is required - -
    - -
    + +
    + + + Hey you! This field is required + +
    +
    - )} - -
    - +
    + )} + +
    ) } -CheckboxControl.storyName = 'Single' -CheckboxGroupControl.storyName = 'Multiple' -WithFormsControl.storyName = 'With React Hooks Forms' +GroupedCheckbox.storyName = 'Multiple checkboxes in a group' +WithFormsControl.storyName = 'Example with React Hook Form' diff --git a/libraries/core-react/src/SelectionControls/Checkbox/Checkbox.tsx b/libraries/core-react/src/SelectionControls/Checkbox/Checkbox.tsx index ab77de6158..9224b5df2e 100644 --- a/libraries/core-react/src/SelectionControls/Checkbox/Checkbox.tsx +++ b/libraries/core-react/src/SelectionControls/Checkbox/Checkbox.tsx @@ -1,5 +1,5 @@ /* eslint camelcase: "off" */ -import React, { forwardRef } from 'react' +import React, { forwardRef, Ref } from 'react' import styled from 'styled-components' import { checkbox, @@ -89,7 +89,7 @@ const LabelText = styled.span` ${typographyTemplate(enabled.typography)} ` -type Props = { +export type CheckboxProps = { /** Label for the checkbox */ label: string /** If true, the checkbox will be disabled */ @@ -98,47 +98,49 @@ type Props = { * set the native element to indeterminate yourself. */ indeterminate?: boolean -} & Omit - -export const Checkbox = forwardRef((props, ref) => { - const { label, disabled, indeterminate, className, ...rest } = props +} & Omit & { + ref?: Ref + } - const iconSize = 24 - return ( - - - - {indeterminate ? ( - - - - ) : ( - - - - - )} - - {label} - - ) -}) +export const Checkbox = forwardRef( + ({ label, disabled = false, indeterminate, className, ...rest }, ref) => { + const iconSize = 24 + return ( + + + + {indeterminate ? ( + + + + ) : ( + + + + + )} + + {label} + + ) + }, +) Checkbox.displayName = 'Checkbox' diff --git a/libraries/core-react/src/SelectionControls/Radio/Radio.tsx b/libraries/core-react/src/SelectionControls/Radio/Radio.tsx index e14cfa6059..2db8522e96 100644 --- a/libraries/core-react/src/SelectionControls/Radio/Radio.tsx +++ b/libraries/core-react/src/SelectionControls/Radio/Radio.tsx @@ -45,7 +45,7 @@ const Input = styled.input.attrs(({ type = 'radio' }) => ({ display: inline; } ` -type StyledRadioProps = Pick +type StyledRadioProps = Pick const StyledRadio = styled.label` display: inline-flex; @@ -87,14 +87,14 @@ const InputWrapper = styled.span` disabled ? 'transparent' : color.hover}; } ` -type Props = { +export type RadioProps = { /** Label for the radio */ label: string /** If true, the radio button will be disabled */ disabled?: boolean } & JSX.IntrinsicElements['input'] -export const Radio = forwardRef( +export const Radio = forwardRef( ({ label, disabled = false, className, ...rest }, ref) => { const iconSize = 24 return ( diff --git a/libraries/core-react/src/SelectionControls/Switch/Input.tsx b/libraries/core-react/src/SelectionControls/Switch/Input.tsx index 1bc44a62cb..444f63792a 100644 --- a/libraries/core-react/src/SelectionControls/Switch/Input.tsx +++ b/libraries/core-react/src/SelectionControls/Switch/Input.tsx @@ -5,7 +5,7 @@ import type { Size } from './Switch.types' const { enabled, disabled: _disabled } = tokens -type StyledProps = Pick +type StyledProps = Pick const BaseInput = styled.input.attrs(({ type = 'checkbox' }) => ({ type, @@ -60,12 +60,12 @@ const DefaultInput = styled(BaseInput)` } ` -type Props = { +type InputProps = { size?: Size disabled?: boolean } & React.HTMLAttributes -export const Input = forwardRef( +export const Input = forwardRef( ({ size = 'default', ...rest }, ref) => { return ( <> diff --git a/libraries/core-react/src/SelectionControls/Switch/InputWrapper.tsx b/libraries/core-react/src/SelectionControls/Switch/InputWrapper.tsx index 1ec7f621c1..c9ec2576aa 100644 --- a/libraries/core-react/src/SelectionControls/Switch/InputWrapper.tsx +++ b/libraries/core-react/src/SelectionControls/Switch/InputWrapper.tsx @@ -1,12 +1,11 @@ import React, { ReactNode } from 'react' -import PropTypes from 'prop-types' import styled from 'styled-components' import { switchControl as tokens } from './Switch.tokens' import type { Size } from './Switch.types' const { enabled, disabled: _disabled } = tokens -type StyledProps = Pick +type StyledProps = Pick const BaseInputWrapper = styled.span` width: ${enabled.clickSize}; @@ -31,7 +30,7 @@ const InputWrapperSmall = styled(BaseInputWrapper)` isDisabled ? 'transparent' : enabled.hover.background}; } ` -type Props = { +type InputWrapperProps = { children: ReactNode isDisabled?: boolean size?: Size @@ -41,7 +40,7 @@ export const InputWrapper = ({ children, isDisabled, size = 'default', -}: Props): JSX.Element => { +}: InputWrapperProps): JSX.Element => { return ( <> {size === 'small' ? ( @@ -56,17 +55,3 @@ export const InputWrapper = ({ ) } - -InputWrapper.propTypes = { - // Track and handle - children: PropTypes.node.isRequired, - // Whether styles should be reflecting disabled state or not - isDisabled: PropTypes.bool, - // Default or small version - size: PropTypes.oneOf(['default', 'small']), -} - -InputWrapper.defaultProps = { - isDisabled: false, - size: 'default', -} diff --git a/libraries/core-react/src/SelectionControls/Switch/Switch.tsx b/libraries/core-react/src/SelectionControls/Switch/Switch.tsx index 5806cbb976..f1efb89db1 100644 --- a/libraries/core-react/src/SelectionControls/Switch/Switch.tsx +++ b/libraries/core-react/src/SelectionControls/Switch/Switch.tsx @@ -25,7 +25,7 @@ const Label = styled.span` ${typographyTemplate(enabled.typography)} ` -type Props = { +export type SwitchProps = { /** Label for the switch. Required to make it a11y compliant */ label: string /** Switch size, use the small version with caution */ @@ -34,7 +34,7 @@ type Props = { disabled?: boolean } & Omit -export const Switch = forwardRef( +export const Switch = forwardRef( ({ size = 'default', disabled, label, className, ...rest }, ref) => { return ( diff --git a/libraries/core-react/src/SelectionControls/Switch/SwitchDefault.tsx b/libraries/core-react/src/SelectionControls/Switch/SwitchDefault.tsx index e8587a7f2a..960abd42ea 100644 --- a/libraries/core-react/src/SelectionControls/Switch/SwitchDefault.tsx +++ b/libraries/core-react/src/SelectionControls/Switch/SwitchDefault.tsx @@ -42,11 +42,11 @@ const Handle = styled.span` transition: transform 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86); ` -type Props = { +type SwitchDefaultProps = { disabled?: boolean } -export const SwitchDefault = forwardRef( +export const SwitchDefault = forwardRef( ({ disabled, ...rest }, ref) => { return ( <> diff --git a/libraries/core-react/src/SelectionControls/Switch/SwitchSmall.tsx b/libraries/core-react/src/SelectionControls/Switch/SwitchSmall.tsx index ff0c8b8084..13be70fe6f 100644 --- a/libraries/core-react/src/SelectionControls/Switch/SwitchSmall.tsx +++ b/libraries/core-react/src/SelectionControls/Switch/SwitchSmall.tsx @@ -34,11 +34,11 @@ const Handle = styled.span` transition: transform 0.36s cubic-bezier(0.78, 0.14, 0.15, 0.86); ` -type Props = { +type SwitchSmallProps = { disabled?: boolean } -export const SwitchSmall = forwardRef( +export const SwitchSmall = forwardRef( ({ disabled, ...rest }, ref) => { return ( <> diff --git a/libraries/core-react/src/SelectionControls/index.js b/libraries/core-react/src/SelectionControls/index.js deleted file mode 100644 index ed50d472f5..0000000000 --- a/libraries/core-react/src/SelectionControls/index.js +++ /dev/null @@ -1,4 +0,0 @@ -// @ts-nocheck -export { Radio } from './Radio/Radio' -export { Checkbox } from './Checkbox/Checkbox' -export { Switch } from './Switch/Switch' diff --git a/libraries/core-react/src/SelectionControls/index.ts b/libraries/core-react/src/SelectionControls/index.ts new file mode 100644 index 0000000000..54e0aa5037 --- /dev/null +++ b/libraries/core-react/src/SelectionControls/index.ts @@ -0,0 +1,3 @@ +export * from './Radio/Radio' +export * from './Checkbox/Checkbox' +export * from './Switch/Switch' diff --git a/libraries/core-react/src/index.ts b/libraries/core-react/src/index.ts index 9da5d5b0a8..11131a17ed 100644 --- a/libraries/core-react/src/index.ts +++ b/libraries/core-react/src/index.ts @@ -22,7 +22,7 @@ export { Tooltip } from './Tooltip' export { Snackbar } from './Snackbar' export { Popover } from './Popover' export * from './Banner' -export { Radio, Checkbox, Switch } from './SelectionControls' +export * from './SelectionControls' export * from './Progress' export { Breadcrumbs } from './Breadcrumbs' export { Menu } from './Menu' From f0c4a9423b5663fa6b4f4ffe5040198d26cdfc96 Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Thu, 29 Oct 2020 14:49:24 +0100 Subject: [PATCH 3/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor=20to=20typesc?= =?UTF-8?q?ript=20in=20radio=20story?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SelectionControls.Radio.stories.tsx | 129 ++++++++---------- .../src/SelectionControls/Radio/Radio.tsx | 6 +- 2 files changed, 64 insertions(+), 71 deletions(-) diff --git a/apps/storybook-react/stories/SelectionControls.Radio.stories.tsx b/apps/storybook-react/stories/SelectionControls.Radio.stories.tsx index 122a84b17d..58fbacf25c 100644 --- a/apps/storybook-react/stories/SelectionControls.Radio.stories.tsx +++ b/apps/storybook-react/stories/SelectionControls.Radio.stories.tsx @@ -1,13 +1,10 @@ import React, { useState } from 'react' -import { Radio, Icon, Typography } from '@equinor/eds-core-react' +import { Radio, RadioProps, Icon } from '@equinor/eds-core-react' import styled from 'styled-components' import { checkbox } from '@equinor/eds-icons' +import { Meta, Story } from '@storybook/react' Icon.add({ checkbox }) -const Wrapper = styled.div` - padding: 32px; - padding-bottom: 8rem; -` const BlockRadio = styled(Radio)` display: flex; @@ -22,78 +19,72 @@ const UnstyledList = styled.ul` export default { title: 'Components/Selection controls/Radio', component: Radio, -} +} as Meta + +export const Default: Story = (args) => ( + +) -export const RadioControl = () => { +export const SingleRadio: Story = () => { return ( - - - Single radiobox examples - -
    - - - - -
    -     +
    + + + + +
    ) } -export const RadioGroupControl = () => { +export const GroupedRadio: Story = () => { const [checked, updateChecked] = useState('one') - const onChange = (event) => { + const onChange = (event: React.ChangeEvent) => { updateChecked(event.target.value) } return ( - - - Group example as controlled components and onChange - -
    - - We are in this together! - - ๐Ÿ™Œ - - - -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -
    -     +
    + + We are in this together! + + ๐Ÿ™Œ + + + +
  • + +
    • +
  • + +
    • +
  • + +
    • +     +
    ) } -RadioControl.storyName = 'Single' -RadioGroupControl.storyName = 'Group' +GroupedRadio.storyName = 'Multiple radio buttons in a group' +SingleRadio.storyName = 'Single radio buttons' diff --git a/libraries/core-react/src/SelectionControls/Radio/Radio.tsx b/libraries/core-react/src/SelectionControls/Radio/Radio.tsx index 2db8522e96..8b7c83854d 100644 --- a/libraries/core-react/src/SelectionControls/Radio/Radio.tsx +++ b/libraries/core-react/src/SelectionControls/Radio/Radio.tsx @@ -1,5 +1,5 @@ /* eslint camelcase: "off" */ -import React, { forwardRef } from 'react' +import React, { forwardRef, Ref } from 'react' import styled from 'styled-components' import { radio_button_selected, // eslint-disable-line camelcase @@ -92,7 +92,9 @@ export type RadioProps = { label: string /** If true, the radio button will be disabled */ disabled?: boolean -} & JSX.IntrinsicElements['input'] +} & JSX.IntrinsicElements['input'] & { + ref?: Ref + } export const Radio = forwardRef( ({ label, disabled = false, className, ...rest }, ref) => { From f8a457897132d14bd925e1cd3a70a901e9eea88b Mon Sep 17 00:00:00 2001 From: Wenche Tollevsen Date: Thu, 29 Oct 2020 15:01:12 +0100 Subject: [PATCH 4/4] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Rewrite=20Switch=20sto?= =?UTF-8?q?ry=20to=20typescript?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SelectionControls.Switch.stories.tsx | 36 ++++++++----------- .../src/SelectionControls/Switch/Switch.tsx | 6 ++-- 2 files changed, 18 insertions(+), 24 deletions(-) diff --git a/apps/storybook-react/stories/SelectionControls.Switch.stories.tsx b/apps/storybook-react/stories/SelectionControls.Switch.stories.tsx index 0e02fe8177..b5133b3718 100644 --- a/apps/storybook-react/stories/SelectionControls.Switch.stories.tsx +++ b/apps/storybook-react/stories/SelectionControls.Switch.stories.tsx @@ -1,10 +1,12 @@ import React, { useState } from 'react' -import { Switch, Icon, Typography } from '@equinor/eds-core-react' +import { Switch, SwitchProps } from '@equinor/eds-core-react' import styled from 'styled-components' -import { checkbox } from '@equinor/eds-icons' +import { Meta, Story } from '@storybook/react' -Icon.add({ checkbox }) -const Wrapper = styled.div` +type WrapperStyleProps = { + darkMode?: boolean +} +const Wrapper = styled.div` display: grid; grid-template-rows: min-width; padding: 32px; @@ -22,15 +24,6 @@ const UnstyledList = styled.ul` list-style-type: none; ` -const DarkModeTypography = styled(Typography)` - margin: '1rem 0'; - ${({ darkMode }) => - darkMode && { - color: 'white', - }}; - transition: all 0.36s; -` - const Examples = styled.div` display: grid; grid-gap: 3rem; @@ -41,9 +34,13 @@ const Examples = styled.div` export default { title: 'Components/Selection controls/Switch', component: Switch, -} +} as Meta + +export const Default: Story = (args) => ( + +) -export const SwitchControl = () => { +export const Variants: Story = () => { return ( @@ -91,16 +88,12 @@ export const SwitchControl = () => { ) } -export const ControlledSwitchControl = () => { +export const ControlledSwitchControl: Story = () => { const [darkMode, setDarkMode] = useState(false) return ( - - Use case with controlled component - setDarkMode(!darkMode)} label="Dark mode" /> @@ -108,5 +101,4 @@ export const ControlledSwitchControl = () => { ) } -SwitchControl.storyName = 'Examples' -ControlledSwitchControl.storyName = 'Controlled' +ControlledSwitchControl.storyName = 'Use case with controlled component' diff --git a/libraries/core-react/src/SelectionControls/Switch/Switch.tsx b/libraries/core-react/src/SelectionControls/Switch/Switch.tsx index f1efb89db1..5e7d421ad6 100644 --- a/libraries/core-react/src/SelectionControls/Switch/Switch.tsx +++ b/libraries/core-react/src/SelectionControls/Switch/Switch.tsx @@ -1,4 +1,4 @@ -import React, { forwardRef } from 'react' +import React, { forwardRef, Ref } from 'react' import styled from 'styled-components' import { SwitchSmall } from './SwitchSmall' import { SwitchDefault } from './SwitchDefault' @@ -32,7 +32,9 @@ export type SwitchProps = { size?: Size /** If true, the switch will be disabled */ disabled?: boolean -} & Omit +} & Omit & { + ref?: Ref + } export const Switch = forwardRef( ({ size = 'default', disabled, label, className, ...rest }, ref) => {