Skip to content

Commit

Permalink
add specs
Browse files Browse the repository at this point in the history
  • Loading branch information
@eric2523
eric2523 committed Nov 7, 2023
1 parent 607461b commit f874cff
Show file tree
Hide file tree
Showing 2 changed files with 164 additions and 0 deletions.
107 changes: 107 additions & 0 deletions spec/__snapshots__/Storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6033,6 +6033,113 @@ Array [
]
`;

exports[`Storyshots Components/Drawer Default Expanded 1`] = `
Array [
<button
className="Button btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
Open
</button>,
<div
className="DrawerBackgroundOverlay"
onClick={[Function]}
onKeyDown={[Function]}
role="presentation"
/>,
<div
className="Drawer Drawer--right Drawer--sm Drawer--expanded Drawer--behind-nav"
>
<div
className="Drawer__header Drawer__header--bordered"
>
<div
className="Drawer__title"
>
Title goes here
</div>
<button
aria-label="Close"
className="Drawer__header-action"
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-xmark "
data-icon="xmark"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 384 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
fill="currentColor"
style={Object {}}
/>
</svg>
</button>
</div>
<div
className="Drawer__body"
>
<p>
Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi, vitae malesuada odio. Sed varius libero sed erat faucibus ultrices. Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec porttitor, est quis aliquet condimentum, nisi felis porta odio, eu luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra, imperdiet purus at, finibus turpis. Sed mattis erat a risus dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis, auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales, velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet, pretium ac est.
</p>
</div>
<div
className="DrawerFooter"
>
<div />
<div
className="DrawerFooter__actions"
>
<button
aria-disabled={false}
className="Button btn btn-transparent"
disabled={false}
onClick={[Function]}
type="button"
>
Cancel
</button>
<button
aria-disabled={false}
className="Button btn btn-primary"
disabled={false}
onClick={[Function]}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-envelope icon-left"
data-icon="envelope"
data-prefix="fas"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
fill="currentColor"
style={Object {}}
/>
</svg>
Send
</button>
</div>
</div>
</div>,
]
`;

exports[`Storyshots Components/Drawer Empty 1`] = `
Array [
<button
Expand Down
57 changes: 57 additions & 0 deletions src/Drawer/Drawer.stories.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export const Default = () => {
<Button onClick={toggleVisible}>Open</Button>
<Drawer
behindNav={(boolean('behindNav', true))}
defaultExpanded={boolean('defaultExpanded', false)}
expandable={boolean('expandable', false)}
hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
orientation={select('orientation', ['left', 'right'], 'right')}
Expand Down Expand Up @@ -89,6 +90,7 @@ export const Orientation = () => {
<Button onClick={toggleVisible}>Open</Button>
<Drawer
behindNav={(boolean('behindNav', true))}
defaultExpanded={boolean('defaultExpanded', false)}
expandable={boolean('expandable', false)}
hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
orientation={select('orientation', ['left', 'right'], 'left')}
Expand Down Expand Up @@ -141,6 +143,7 @@ export const Expandable = () => {
<Button onClick={toggleVisible}>Open</Button>
<Drawer
behindNav={(boolean('behindNav', true))}
defaultExpanded={boolean('defaultExpanded', false)}
expandable={boolean('expandable', true)}
hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
orientation={select('orientation', ['left', 'right'], 'right')}
Expand Down Expand Up @@ -183,6 +186,59 @@ export const Expandable = () => {
);
};

export const DefaultExpanded = () => {
const [isVisible, setVisible] = useState(false);

const toggleVisible = () => setVisible(!isVisible);

return (
<>

Check failure on line 195 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 4 space characters but found 6
<Button onClick={toggleVisible}>Open</Button>
<Drawer
behindNav={(boolean('behindNav', true))}

Check failure on line 198 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 10 space characters but found 12
defaultExpanded={boolean('defaultExpanded', true)}

Check failure on line 199 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 10 space characters but found 12
expandable={boolean('expandable', false)}

Check failure on line 200 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 10 space characters but found 12
hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}

Check failure on line 201 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 10 space characters but found 12
orientation={select('orientation', ['left', 'right'], 'right')}

Check failure on line 202 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 10 space characters but found 12
size={select('size', DrawerSizes, 'sm')}

Check failure on line 203 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 10 space characters but found 12
visible={isVisible}

Check failure on line 204 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 10 space characters but found 12
onRequestClose={toggleVisible}

Check failure on line 205 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 10 space characters but found 12
>
<DrawerHeader
bordered={boolean('bordered', true)}

Check failure on line 208 in src/Drawer/Drawer.stories.jsx

View workflow job for this annotation

GitHub Actions / js-lint 

Expected indentation of 12 space characters but found 14
title="Title goes here"
onRequestClose={toggleVisible}
/>
<DrawerBody>
<p>
Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi,
vitae malesuada odio. Sed varius libero sed erat faucibus ultrices.
Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec
porttitor, est quis aliquet condimentum, nisi felis porta odio, eu
luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet
porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in
arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra,
imperdiet purus at, finibus turpis. Sed mattis erat a risus
dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque
tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis,
auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales,
velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis
felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet,
pretium ac est.
</p>
</DrawerBody>
<DrawerFooter
primaryActionIcon={faEnvelope}
primaryActionText="Send"
secondaryActionText="Cancel"
onPrimaryAction={() => null}
onSecondaryAction={toggleVisible}
/>
</Drawer>
</>
);
}

export const AdditionalActions = () => {
const [isVisible, setVisible] = useState(false);

Expand All @@ -193,6 +249,7 @@ export const AdditionalActions = () => {
<Button onClick={toggleVisible}>Open</Button>
<Drawer
behindNav={(boolean('behindNav', true))}
defaultExpanded={boolean('defaultExpanded', false)}
expandable={boolean('expandable', true)}
hasBackgroundOverlay={boolean('hasBackgroundOverlay', false)}
orientation={select('orientation', ['left', 'right'], 'right')}
Expand Down

0 comments on commit f874cff

Please sign in to comment.