Skip to content

Commit

Permalink
docs(pills): add form and display pill docs
Browse files Browse the repository at this point in the history 
docs: suggested updates to working

Co-authored-by: gloriliale <77117846+gloriliale@users.noreply.github.com>

docs: fix props table and paragraph on selection
  • Loading branch information
@SiTaggart
SiTaggart committed Sep 22, 2021
1 parent 529c768 commit 21f0cc6
Show file tree
Hide file tree
Showing 6 changed files with 882 additions and 1 deletion.
1 change: 1 addition & 0 deletions packages/paste-website/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -44,6 +44,7 @@
"@twilio-paste/disclosure-primitive": "^0.3.4",
"@twilio-paste/dropdown-library": "^1.1.1",
"@twilio-paste/flex": "^2.0.3",
"@twilio-paste/form-pill-group": "^1.0.0",
"@twilio-paste/grid": "^2.0.3",
"@twilio-paste/heading": "^5.0.2",
"@twilio-paste/help-text": "^6.1.0",
Expand Down
94 changes: 94 additions & 0 deletions packages/paste-website/src/component-examples/FormPillGroup.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
export const defaultExample = `
const BasicFormPillGroup = () => {
const pillState = useFormPillState();
return (
<form>
<FormPillGroup {...pillState} aria-label="Your favorite sports:">
<FormPill {...pillState}>
<CalendarIcon decorative size="sizeIcon10" />
Tennis
</FormPill>
<FormPill {...pillState}>
Baseball
</FormPill>
<FormPill {...pillState}>Football</FormPill>
<FormPill {...pillState}>
Soccer
</FormPill>
</FormPillGroup>
</form>
);
};
render(
<BasicFormPillGroup />
)
`.trim();

export const selectableExample = `
const SelectableFormPillGroup = () => {
const [pills] = React.useState(['Tennis', 'Baseball', 'Football', 'Soccer']);
const [selectedSet, updateSelectedSet] = React.useState(new Set('Football'));
const pillState = useFormPillState();
return (
<form>
<FormPillGroup {...pillState} aria-label="Your favorite sports:">
{pills.map((pill) => (
<FormPill
key={pill}
{...pillState}
selected={selectedSet.has(pill)}
onSelect={() => {
const newSelectedSet = new Set(selectedSet);
if (newSelectedSet.has(pill)) {
newSelectedSet.delete(pill);
} else {
newSelectedSet.add(pill);
}
updateSelectedSet(newSelectedSet);
}}
>
{pill}
</FormPill>
))}
</FormPillGroup>
</form>
);
};
render(
<SelectableFormPillGroup />
)
`.trim();

export const removableExample = `
const RemovableFormPillGroup = () => {
const [pills, setPills] = React.useState(['Tennis', 'Baseball', 'Football', 'Soccer']);
const pillState = useFormPillState();
return (
<form>
<FormPillGroup {...pillState} aria-label="Your favorite sports:">
{pills.map((pill, index) => (
<FormPill
key={pill}
{...pillState}
onDismiss={() => {
setPills(pills.filter((_, i) => i !== index));
}}
>
{pill}
</FormPill>
))}
{pills.length === 0 ? <Text as="p">No sports remaining</Text> : null}
</FormPillGroup>
</form>
);
};
render(
<RemovableFormPillGroup />
)
`.trim();
109 changes: 109 additions & 0 deletions packages/paste-website/src/components/FormPillVsDisplayPillTable.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
import * as React from 'react';
import {Box} from '@twilio-paste/box';
import {Table, Tr, THead, Th, TBody, Td} from '@twilio-paste/table';
import {SuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon';

export interface FormPillVsDisplayPillTableProps {
children: NonNullable<React.ReactNode>;
}

const FormPillVsDisplayPillTable: React.FC<FormPillVsDisplayPillTableProps> = () => {
return (
<Box marginBottom="space70">
<Table>
<THead>
<Tr>
<Th>&nbsp;</Th>
<Th textAlign="center">Display pill</Th>
<Th textAlign="center">Form Pill</Th>
</Tr>
</THead>
<TBody>
<Tr>
<Td>Used to view data</Td>
<Td>
<Box display="flex" justifyContent="center">
<SuccessIcon color="colorTextIconSuccess" decorative={false} title="Supported feature" />
</Box>
</Td>
<Td>&nbsp;</Td>
</Tr>
<Tr>
<Td>Uses List, List Item semantic</Td>
<Td>
<Box display="flex" justifyContent="center">
<SuccessIcon color="colorTextIconSuccess" decorative={false} title="Supported feature" />
</Box>
</Td>
<Td>&nbsp;</Td>
</Tr>
<Tr>
<Td>Pills can link to a page</Td>
<Td>
<Box display="flex" justifyContent="center">
<SuccessIcon color="colorTextIconSuccess" decorative={false} title="Supported feature" />
</Box>
</Td>
<Td>&nbsp;</Td>
</Tr>
<Tr>
<Td>Used to edit data in a form</Td>
<Td>&nbsp;</Td>
<Td>
<Box display="flex" justifyContent="center">
<SuccessIcon color="colorTextIconSuccess" decorative={false} title="Supported feature" />
</Box>
</Td>
</Tr>
<Tr>
<Td>Uses Listbox, Option semantic</Td>
<Td>&nbsp;</Td>
<Td>
<Box display="flex" justifyContent="center">
<SuccessIcon color="colorTextIconSuccess" decorative={false} title="Supported feature" />
</Box>
</Td>
</Tr>
<Tr>
<Td>Provides keyboard navigation</Td>
<Td>&nbsp;</Td>
<Td>
<Box display="flex" justifyContent="center">
<SuccessIcon color="colorTextIconSuccess" decorative={false} title="Supported feature" />
</Box>
</Td>
</Tr>
<Tr>
<Td>Pills are selectable</Td>
<Td>&nbsp;</Td>
<Td>
<Box display="flex" justifyContent="center">
<SuccessIcon color="colorTextIconSuccess" decorative={false} title="Supported feature" />
</Box>
</Td>
</Tr>
<Tr>
<Td>Pills can perform an action</Td>
<Td>&nbsp;</Td>
<Td>
<Box display="flex" justifyContent="center">
<SuccessIcon color="colorTextIconSuccess" decorative={false} title="Supported feature" />
</Box>
</Td>
</Tr>
<Tr>
<Td>Pills can be removed</Td>
<Td>&nbsp;</Td>
<Td>
<Box display="flex" justifyContent="center">
<SuccessIcon color="colorTextIconSuccess" decorative={false} title="Supported feature" />
</Box>
</Td>
</Tr>
</TBody>
</Table>
</Box>
);
};

export {FormPillVsDisplayPillTable};
Loading

0 comments on commit 21f0cc6

Please sign in to comment.