From 07894441fc1831279aa17353be0a1fd4b19f7059 Mon Sep 17 00:00:00 2001 From: Jason Rundell Date: Mon, 17 Apr 2023 11:41:22 -0400 Subject: [PATCH 1/2] Story improvements to Spacer --- src/stories/atoms/Spacer/Spacer.stories.mdx | 256 +++++++++++++++----- src/stories/atoms/Spacer/index.jsx | 9 +- src/stories/atoms/Spacer/spacer-story.css | 2 +- 3 files changed, 204 insertions(+), 63 deletions(-) diff --git a/src/stories/atoms/Spacer/Spacer.stories.mdx b/src/stories/atoms/Spacer/Spacer.stories.mdx index 7422dbd..bcc1a60 100644 --- a/src/stories/atoms/Spacer/Spacer.stories.mdx +++ b/src/stories/atoms/Spacer/Spacer.stories.mdx @@ -4,10 +4,30 @@ import { expect } from '@storybook/jest' import { Spacer } from '../Spacer' import { Paragraph } from '../Paragraph' -import { sizes } from '../../../shared/sizes' +import { sizes, sizeKeys } from '../../../shared/sizes' import './spacer-story.css' - - +const argTypes = { + smallScreen: { + control: { + type: 'select', + options: sizeKeys + } + }, + mediumScreen: { + control: { + type: 'select', + options: sizeKeys + } + }, + largeScreen: { + control: { + type: 'select', + options: sizeKeys + } + } +} + + # Spacer @@ -15,16 +35,30 @@ import './spacer-story.css' The Spacer component is used to add spacing (padding only) around elements. +**Spacer appears pink in Storybook but will be transparent when used in a +project.** + -export const Template = (args) => +export const Template = (args) => ( + +) + +export const Controls = Template.bind({}) +Controls.args = { + 'data-testid': 'spacer', + smallScreen: 'small', + mediumScreen: 'small', + largeScreen: 'small' +} +console.log(Array.isArray(sizeKeys), sizeKeys) ## Example This paragraph has a default Spacer below it - + In all screens, this paragraph has a Spacer using "largest" below it @@ -32,189 +66,298 @@ export const Template = (args) => smallScreen="largest" mediumScreen="largest" largeScreen="largest" + className="story--atoms-spacer" /> In small screens, this paragraph has a Spacer using "small" below it. In medium screens, this paragraph has a Spacer using "smallest" below it. In large screens, this paragraph has a Spacer using "larger" below it. - + ## Default - - - + {Template.bind({})} ## Small Viewport: Tiny - - + + {Template.bind({})} ## Small Viewport: Smallest - - + + {Template.bind({})} ## Small Viewport: Small - - + + {Template.bind({})} ## Small Viewport: Normal - - + + {Template.bind({})} ## Small Viewport: Large - - + + {Template.bind({})} ## Small Viewport: Larger - - + + {Template.bind({})} ## Small Viewport: Largest - - + + {Template.bind({})} ## Medium Viewport: Tiny - - + + {Template.bind({})} ## Medium Viewport: Smallest - - + + {Template.bind({})} ## Medium Viewport: Small - - + + {Template.bind({})} ## Medium Viewport: Normal - - + + {Template.bind({})} ## Medium Viewport: Large - - + + {Template.bind({})} ## Medium Viewport: Larger - - + + {Template.bind({})} ## Medium Viewport: Largest - - + + {Template.bind({})} ## Large Viewport: Tiny - - + + {Template.bind({})} ## Large Viewport: Smallest - - + + {Template.bind({})} ## Large Viewport: Small - - + + {Template.bind({})} ## Large Viewport: Normal - - + + {Template.bind({})} ## Large Viewport: Large - - + + {Template.bind({})} ## Large Viewport: Larger - - + + {Template.bind({})} ## Large Viewport: Largest - - + + {Template.bind({})} @@ -222,20 +365,13 @@ export const Template = (args) => Experiment with this story with the Controls addon in the Canvas tab. -{/* https://storybook.js.org/docs/react/api/mdx#play-function */} - { const expectedHeight = sizes.small * 16 - console.log(expectedHeight) const theElement = canvasElement.querySelector('[aria-hidden="true"]') await expect(theElement).not.toBeNull() await expect(theElement.clientHeight).toEqual(expectedHeight) diff --git a/src/stories/atoms/Spacer/index.jsx b/src/stories/atoms/Spacer/index.jsx index 5aec5cb..9bad6c0 100644 --- a/src/stories/atoms/Spacer/index.jsx +++ b/src/stories/atoms/Spacer/index.jsx @@ -5,7 +5,12 @@ import { css } from '@emotion/react' import { sizes, sizeKeys } from '../../../shared/sizes' import { breakpoints } from '../../../shared/breakpoints' -export const Spacer = ({ smallScreen, mediumScreen, largeScreen }) => { +export const Spacer = ({ + smallScreen, + mediumScreen, + largeScreen, + ...props +}) => { const style = css` display: block; height: ${sizes[smallScreen] ?? sizes.normal}rem; @@ -19,7 +24,7 @@ export const Spacer = ({ smallScreen, mediumScreen, largeScreen }) => { } ` - return