From 0ab5a7aae75356fbe7c97bb8acc34dd8b2ff7952 Mon Sep 17 00:00:00 2001 From: Laliq <105340174+martalalik@users.noreply.github.com> Date: Wed, 15 Jun 2022 16:57:45 +0200 Subject: [PATCH] =?UTF-8?q?=F0=9F=93=9D=20Switch=20documentation=20=20(#22?= =?UTF-8?q?80)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 📝 Add docs file * 📝 Add Introduction * 📝 Add Usage * Add Examples * 📝 Update Default states example * 📝 Update example * Update label value in DefaultStates --- .../src/components/Slider/Slider.stories.tsx | 1 - .../src/components/Switch/Switch.docs.mdx | 66 +++++++ .../src/components/Switch/Switch.stories.tsx | 175 ++++++------------ 3 files changed, 127 insertions(+), 115 deletions(-) create mode 100644 packages/eds-core-react/src/components/Switch/Switch.docs.mdx diff --git a/packages/eds-core-react/src/components/Slider/Slider.stories.tsx b/packages/eds-core-react/src/components/Slider/Slider.stories.tsx index fa97698e38..946129e47d 100644 --- a/packages/eds-core-react/src/components/Slider/Slider.stories.tsx +++ b/packages/eds-core-react/src/components/Slider/Slider.stories.tsx @@ -52,7 +52,6 @@ export const SimpleSliderWithSteps: Story = () => { ) } - SimpleSliderWithSteps.storyName = 'Simple slider with steps' SimpleSliderWithSteps.decorators = [ (Story) => ( diff --git a/packages/eds-core-react/src/components/Switch/Switch.docs.mdx b/packages/eds-core-react/src/components/Switch/Switch.docs.mdx new file mode 100644 index 0000000000..f089cfd811 --- /dev/null +++ b/packages/eds-core-react/src/components/Switch/Switch.docs.mdx @@ -0,0 +1,66 @@ +import { Links, PropsTable, Story } from './../../../.storybook/components' +import { Switch } from '.' + +# Switch + +Selection controls allow users to select options, make decisions and set preferences. + + + + + + +## Usage + +**Selection controls** + +
    +
  • Allow users to select options, make decisions and set preferences.
    • +
  • Are to be visible and understandable at a quick glance.
    • +
  • Are always accompanied with a clear label.
    • +
+ +**Switch** + +
    +
  • Toggle a single item on or off.
    • +
  • Immediately activate or deactivate something.
    • +
  • Switches make it easy to compare available options.
    • +
+ +```tsx +import { Switch } from '@equinor/eds-core-react' + + +``` + +## Examples + +### Default states + + + +### Alternative to label + +To comply with accessibility, a `label` is always required on inputs. In some cases though, a visual label is not desirable.
+In such cases `aria-label` or `aria-labelledby` should be used. + + + +### Compact + +Compact `Switch` using `EdsProvider`. + + + +### Table switch + +Example of usage with `Switch` and `aria-label` in tables for accessibility. + + \ No newline at end of file diff --git a/packages/eds-core-react/src/components/Switch/Switch.stories.tsx b/packages/eds-core-react/src/components/Switch/Switch.stories.tsx index a1aac1ca62..ee2238e489 100644 --- a/packages/eds-core-react/src/components/Switch/Switch.stories.tsx +++ b/packages/eds-core-react/src/components/Switch/Switch.stories.tsx @@ -1,22 +1,14 @@ -import { useState, useEffect } from 'react' +import { useState, useEffect, ChangeEvent } from 'react' import { Switch, SwitchProps, EdsProvider, Table, Density } from '../..' import styled from 'styled-components' -import { Meta, Story } from '@storybook/react' +import { ComponentMeta, Story } from '@storybook/react' import { data } from '../../stories/data' +import page from './Switch.docs.mdx' -type WrapperStyleProps = { - darkMode?: boolean -} -const Wrapper = styled.div` - display: grid; - grid-template-rows: min-width; - padding: 32px; - padding-bottom: 8rem; - grid-gap: 2rem; - position: relative; - background-color: ${({ darkMode }) => (darkMode ? '#0A0310' : 'white')}; - color: ${({ darkMode }) => (darkMode ? 'white' : 'black')}; - transition: all 0.36s; +const UnstyledList = styled.ul` + margin: 0; + padding: 0; + list-style-type: none; ` export default { @@ -24,44 +16,50 @@ export default { component: Switch, parameters: { docs: { - description: { - component: `Selection controls allow users to select options, make decisions and set preferences. - `, - }, + page, }, }, -} as Meta +} as ComponentMeta -export const Default: Story = (args) => ( +export const Introduction: Story = (args) => ( ) export const DefaultStates: Story = () => { - const UnstyledList = styled.ul` - list-style-type: none; - li { - margin-bottom: 8px; - } - ` + const [check, setCheck] = useState(false) + return ( - - -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -     + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + ) => { + setCheck(e.target.checked) + }} + checked={check} + label={`Slider is ${check ? 'checked' : 'unchecked'}`} + /> +
    • +     ) } +DefaultStates.storyName = 'Default states' + +export const AlternativeToLabel: Story = () => ( + +) +AlternativeToLabel.storyName = 'Alternative to label' export const Compact: Story = () => { const [density, setDensity] = useState('comfortable') @@ -71,75 +69,31 @@ export const Compact: Story = () => { setDensity('compact') }, [density]) - const UnstyledList = styled.ul` - list-style-type: none; - li { - margin-bottom: 4px; - } - ` return ( - - -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -     -     + +
  • + +
    • +
  • + +
    • +
  • + +
    • +
  • + +
    • +     ) } -Compact.parameters = { - docs: { - description: { - story: 'Compact `Switch` using `EdsProvider` ', - }, - }, -} - -export const ControlledSwitchControl: Story = () => { - const [darkMode, setDarkMode] = useState(false) - return ( - - setDarkMode(!darkMode)} - label="Dark mode" - /> - - ) -} - -ControlledSwitchControl.storyName = 'Use case with controlled component' - -export const alternativeToLabel: Story = () => ( - -) - -alternativeToLabel.parameters = { - docs: { - description: { - story: - 'To comply with accessibility, a `label` is always required on inputs. In some cases though, a visual label is not desirable. In such cases `aria-label` or `aria-labelledby` should be used', - }, - }, -} - export const TableSwitch: Story = () => { return ( @@ -160,11 +114,4 @@ export const TableSwitch: Story = () => {
    ) } -TableSwitch.parameters = { - docs: { - description: { - story: - 'Example of usage with `Switch` and `aria-label` in tables for accessibility', - }, - }, -} +TableSwitch.storyName = 'Table switch'