Skip to content

Commit

Permalink
feat(docs): add modal page
Browse files Browse the repository at this point in the history
  • Loading branch information
@deini
deini committed Aug 7, 2019
1 parent 069cb09 commit 16780fe
Show file tree
Hide file tree
Showing 3 changed files with 150 additions and 95 deletions.
42 changes: 42 additions & 0 deletions packages/docs/PropTables/ModalPropTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import React from 'react';

import { Code, PropTable } from '../components';

export const ModalPropTable: React.FC = () => (
<PropTable>
<PropTable.Prop name="isOpen" types="boolean" required>
Determines if the modal/dialog is open.
</PropTable.Prop>
<PropTable.Prop name="onClose" types="() => void" required>
Function that will be called on close events.
</PropTable.Prop>
<PropTable.Prop name="backdrop" types="boolean" defaults="true">
Determines if the backdrop is shown.
</PropTable.Prop>
<PropTable.Prop name="closeOnClickOutside" types="boolean" defaults="false">
Controls whether <Code>onClose</Code> is called when clicking outside of the modal.
</PropTable.Prop>
<PropTable.Prop name="closeOnEscKey" types="boolean" defaults="true">
Controls whether <Code>onClose</Code> is called when pressing the ESC key.
</PropTable.Prop>
<PropTable.Prop name="variant" types={['modal', 'dialog']} defaults="modal">
Determines the modal variant.
</PropTable.Prop>
</PropTable>
);

export const ModalActionsPropTable: React.FC = () => (
<PropTable>
<PropTable.Prop name="withBorder" types="boolean" defaults="false">
Determines if the actions top border is shown.
</PropTable.Prop>
</PropTable>
);

export const ModalHeaderPropTable: React.FC = () => (
<PropTable>
<PropTable.Prop name="withBorder" types="boolean" defaults="false">
Determines if the header bottom border is shown.
</PropTable.Prop>
</PropTable>
);
1 change: 1 addition & 0 deletions packages/docs/PropTables/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ export * from './GridPropTable';
export * from './IconPropTable';
export * from './InputPropTable';
export * from './MarginPropTable';
export * from './ModalPropTable';
export * from './PaddingPropTable';
export * from './RadioPropTable';
export * from './SelectPropTable';
Expand Down
202 changes: 107 additions & 95 deletions packages/docs/pages/Modal/ModalPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,97 +1,109 @@
import { Button, Flex, Modal, Text } from '@bigcommerce/big-design';
import { Button, H0, H1, H2, Modal, Text } from '@bigcommerce/big-design';
import React from 'react';

interface State {
isModalOpen: boolean;
isDialogOpen: boolean;
}

export default class Story extends React.PureComponent<{}, State> {
state = {
isModalOpen: false,
isDialogOpen: false,
};

render() {
return (
<>
<Flex justifyContent="center" alignItems="center" marginBottom="medium">
<Button onClick={this.openModal}>Open Modal</Button>
</Flex>

<Flex justifyContent="center" alignItems="center">
<Button onClick={this.openDialog}>Open Dialog</Button>
</Flex>

<Modal
isOpen={this.state.isModalOpen}
onClose={this.closeModal}
closeOnEscKey={true}
closeOnClickOutside={false}
>
<Modal.Header>Modal Title</Modal.Header>

<Modal.Body>
<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>
<Text>
Esse ipsum est consectetur nulla aute deserunt. Anim sint nisi consequat officia adipisicing irure. Nulla
ea reprehenderit elit eu nostrud sunt veniam dolore ex occaecat qui. Commodo ullamco ut sint dolor quis
cillum in et enim culpa esse exercitation ad. Eiusmod adipisicing nisi culpa esse laborum cupidatat ad
pariatur proident. Consectetur ex sint ullamco non ex.
</Text>
</Modal.Body>

<Modal.Actions>
<Button variant="subtle" onClick={this.closeModal}>
Cancel
</Button>
<Button onClick={this.closeModal}>Apply</Button>
</Modal.Actions>
</Modal>

<Modal
isOpen={this.state.isDialogOpen}
onClose={this.closeDialog}
closeOnEscKey={true}
closeOnClickOutside={false}
variant="dialog"
>
<Modal.Header>Dialog Title</Modal.Header>

<Modal.Body>
<Text>
Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt pariatur.
</Text>
</Modal.Body>

<Modal.Actions>
<Button variant="subtle" onClick={this.closeDialog}>
Cancel
</Button>
<Button onClick={this.closeDialog}>Apply</Button>
</Modal.Actions>
</Modal>
</>
);
}

private closeModal = () => {
this.setState({ isModalOpen: false });
};

private openModal = () => {
this.setState({ isModalOpen: true });
};

private closeDialog = () => {
this.setState({ isDialogOpen: false });
};

private openDialog = () => {
this.setState({ isDialogOpen: true });
};
}
import { Code, CodePreview } from '../../components';
import { ModalActionsPropTable, ModalHeaderPropTable, ModalPropTable } from '../../PropTables';

export default () => (
<>
<H0>Modal</H0>

<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] = React.useState(false);

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

<Modal isOpen={isOpen} onClose={() => setIsOpen(false)} closeOnEscKey={true} closeOnClickOutside={false}>
<Modal.Header>Modal Title</Modal.Header>

<Modal.Body>
<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>
<Text>
Esse ipsum est consectetur nulla aute deserunt. Anim sint nisi consequat officia adipisicing irure.
Nulla ea reprehenderit elit eu nostrud sunt veniam dolore ex occaecat qui. Commodo ullamco ut sint
dolor quis cillum in et enim culpa esse exercitation ad. Eiusmod adipisicing nisi culpa esse laborum
cupidatat ad pariatur proident. Consectetur ex sint ullamco non ex.
</Text>
</Modal.Body>

<Modal.Actions>
<Button variant="subtle" onClick={() => setIsOpen(false)}>
Cancel
</Button>
<Button onClick={() => setIsOpen(false)}>Apply</Button>
</Modal.Actions>
</Modal>
</>
);
}}
{/* jsx-to-string:end */}
</CodePreview>

<H1>Dialog</H1>

<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>

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

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

<Modal
isOpen={isOpen}
onClose={() => setIsOpen(false)}
closeOnEscKey={true}
closeOnClickOutside={false}
variant="dialog"
>
<Modal.Header>Dialog Title</Modal.Header>

<Modal.Body>
<Text>
Ea tempor sunt amet labore proident dolor proident commodo in exercitation ea nulla sunt pariatur.
</Text>
</Modal.Body>

<Modal.Actions>
<Button variant="subtle" onClick={() => setIsOpen(false)}>
Cancel
</Button>
<Button onClick={() => setIsOpen(false)}>Apply</Button>
</Modal.Actions>
</Modal>
</>
);
}}
{/* jsx-to-string:end */}
</CodePreview>

<H1>API</H1>

<ModalPropTable />

<H2>Modal.Header</H2>
<ModalHeaderPropTable />

<H2>Modal.Actions</H2>
<ModalActionsPropTable />
</>
);

0 comments on commit 16780fe

Please sign in to comment.