Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(docs): update modal page to use new layout #618

Merged
merged 2 commits into from
Oct 8, 2021
Merged

feat(docs): update modal page to use new layout #618

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
90e5656
feat(docs): update modal page to use new layout
jorgemoya Oct 8, 2021
69119f3
fix: simply title
jorgemoya Oct 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
200 changes: 110 additions & 90 deletions packages/docs/pages/modal.tsx
View file
Open in desktop
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-variant',
title: 'Modal Variant',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
id: 'modal-variant',
title: 'Modal Variant',
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-variant',
title: 'Dialog variant',
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
id: 'dialog-variant',
title: 'Dialog variant',
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