Skip to content

Commit

Permalink
feat(docs): update modal page to use new layout (#618)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jorgemoya
jorgemoya authored Oct 8, 2021
1 parent 08ab38e commit f44b343
Showing 1 changed file with 110 additions and 90 deletions.
200 changes: 110 additions & 90 deletions packages/docs/pages/modal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,106 +1,126 @@
import { Button, H1, Modal, Panel, Text } from '@bigcommerce/big-design';
import React, { useState } from 'react';

import { Code, CodePreview, PageNavigation } from '../components';
import { Code, CodePreview, ContentRoutingTabs, List } from '../components';
import { ModalPropTable } from '../PropTables';

const ModalPage = () => {
const items = [
{
id: 'examples',
title: 'Examples',
render: () => (
<>
<Panel header="Modal variant">
<Text>
A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting with the
page until they complete a specific task.
</Text>
<CodePreview>
{/* jsx-to-string:start */}
{function Example() {
const [isOpen, setIsOpen] = useState(false);
return (
<>
<H1>Modal</H1>

return (
<>
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>
<Panel header="Overview" headerId="overview">
<Text>
Modals sit on top of the page, containing additional content or functionality without leaving the context of a
page.
</Text>
<Text bold>When to use it:</Text>
<List>
<List.Item>To focus on a particular on an specific task or content.</List.Item>
<List.Item>To confirm high impact actions (e.g. deleting a configuration).</List.Item>
</List>
</Panel>

<Modal
actions={[
{ text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
{ text: 'Apply', onClick: () => setIsOpen(false) },
]}
header="Modal title"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
closeOnEscKey={true}
closeOnClickOutside={false}
>
<Text>
Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
pariatur. Nulla sunt ipsum do eu consectetur exercitation occaecat labore aliqua. Aute elit
occaecat esse ea fugiat esse. Reprehenderit sunt ea ea mollit commodo tempor amet fugiat.
</Text>
</Modal>
</>
);
}}
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
<Panel header="Dialog variant">
<Text>
Setting the variant prop to <Code primary>dialog</Code> results in a simplified version of a Modal. The
purpose of a dialog is to act as a safety net for a user attempting a destructive action.
</Text>
<Panel header="Implementation" headerId="implementation">
<ContentRoutingTabs
id="implementation"
routes={[
{
id: 'modal',
title: 'Modal',
render: () => (
<>
<Text>
A modal appears as a layer on top of the primary interface. Modals disrupt users from interacting
with the page until they complete a specific task.
</Text>

<CodePreview>
{/* jsx-to-string:start */}
{function Example() {
const [isOpen, setIsOpen] = useState(false);
<CodePreview>
{/* jsx-to-string:start */}
{function Example() {
const [isOpen, setIsOpen] = useState(false);

return (
<>
<Button onClick={() => setIsOpen(true)}>Open Dialog</Button>
return (
<>
<Button onClick={() => setIsOpen(true)}>Open Modal</Button>

<Modal
actions={[
{ text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
{ text: 'Apply', onClick: () => setIsOpen(false) },
]}
header="Dialog title"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
closeOnEscKey={true}
closeOnClickOutside={false}
variant="dialog"
>
<Text>
Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
pariatur.
</Text>
</Modal>
</>
);
}}
{/* jsx-to-string:end */}
</CodePreview>
</Panel>
</>
),
},
{
id: 'props',
title: 'Props',
render: () => <ModalPropTable />,
},
];
<Modal
actions={[
{ text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
{ text: 'Apply', onClick: () => setIsOpen(false) },
]}
header="Modal title"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
closeOnEscKey={true}
closeOnClickOutside={false}
>
<Text>
Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
pariatur. Nulla sunt ipsum do eu consectetur exercitation occaecat labore aliqua. Aute
elit occaecat esse ea fugiat esse. Reprehenderit sunt ea ea mollit commodo tempor amet
fugiat.
</Text>
</Modal>
</>
);
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
{
id: 'dialog',
title: 'Dialog',
render: () => (
<>
<Text>
Setting the variant prop to <Code primary>dialog</Code> results in a simplified version of a Modal.
The purpose of a dialog is to act as a safety net for a user attempting a destructive action.
</Text>

return (
<>
<H1>Modal</H1>
<CodePreview>
{/* jsx-to-string:start */}
{function Example() {
const [isOpen, setIsOpen] = useState(false);

return (
<>
<Button onClick={() => setIsOpen(true)}>Open Dialog</Button>

<Modal
actions={[
{ text: 'Cancel', variant: 'subtle', onClick: () => setIsOpen(false) },
{ text: 'Apply', onClick: () => setIsOpen(false) },
]}
header="Dialog title"
isOpen={isOpen}
onClose={() => setIsOpen(false)}
closeOnEscKey={true}
closeOnClickOutside={false}
variant="dialog"
>
<Text>
Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt
pariatur.
</Text>
</Modal>
</>
);
}}
{/* jsx-to-string:end */}
</CodePreview>
</>
),
},
]}
/>
</Panel>

<PageNavigation items={items} />
<Panel header="Props" headerId="props">
<ModalPropTable renderPanel={false} />
</Panel>
</>
);
};
Expand Down

0 comments on commit f44b343

Please sign in to comment.