Skip to content

Commit

Permalink
chore: new api pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@SiTaggart
SiTaggart committed Sep 22, 2023
1 parent a5c2374 commit 2c4bc15
Show file tree
Hide file tree
Showing 42 changed files with 1,619 additions and 1,693 deletions.
108 changes: 108 additions & 0 deletions packages/paste-website/src/pages/components/data-grid/api.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,108 @@
export const meta = {
title: 'Data Grid - API',
package: '@twilio-paste/data-grid',
description:
'A data grid is an interactive table used for working with a large collection of data in a scannable way.',
slug: '/components/data-grid/api',
};

import Changelog from '@twilio-paste/data-grid/CHANGELOG.md'; // I don't know why this is needed but if you remove it the page fails to render
import packageJson from '@twilio-paste/data-grid/package.json';

import {SidebarCategoryRoutes} from '../../../constants';
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
import {getFeature, getNavigationData, getComponentApi} from '../../../utils/api';

export default ComponentPageLayout;

export const getStaticProps = async () => {
const navigationData = await getNavigationData();
const feature = await getFeature('Data Grid');
const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/data-grid');
return {
props: {
data: {
...packageJson,
...feature,
},
componentApi,
mdxHeadings: [...mdxHeadings, ...componentApiTocData],
navigationData,
pageHeaderData: {
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/data-grid',
storybookUrl: '/?path=/story/components-data-grid--plain-data-grid',
},
},
};
};

## Installation

```bash
yarn add @twilio-paste/core
```

## Usage

```jsx
import {
DataGrid,
DataGridHead,
DataGridRow,
DataGridHeader,
DataGridBody,
DataGridCell,
DataGridFoot,
} from '@twilio-paste/core/data-grid';

const Component = () => (
<DataGrid aria-label="User information table" striped>
<DataGridHead>
<DataGridRow>
<DataGridHeader>First Name</DataGridHeader>
<DataGridHeader>Last Name</DataGridHeader>
<DataGridHeader>Country</DataGridHeader>
<DataGridHeader>Email</DataGridHeader>
<DataGridHeader>Phone</DataGridHeader>
</DataGridRow>
</DataGridHead>
<DataGridBody>
<DataGridRow>
<DataGridCell>Devyn</DataGridCell>
<DataGridCell>Weimann</DataGridCell>
<DataGridCell>Congo</DataGridCell>
<DataGridCell>Matilde86@gmail.com</DataGridCell>
<DataGridCell>652-441-1766 x377</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell>Fritz</DataGridCell>
<DataGridCell>Bashirian</DataGridCell>
<DataGridCell>France</DataGridCell>
<DataGridCell>Magali.Harber@hotmail.com</DataGridCell>
<DataGridCell>1-229-278-7567</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell>Jovanny</DataGridCell>
<DataGridCell>Mante</DataGridCell>
<DataGridCell>Pitcairn Islands</DataGridCell>
<DataGridCell>Fausto_Vandervort15@gmail.com</DataGridCell>
<DataGridCell>(629) 375-5743 x726</DataGridCell>
</DataGridRow>
</DataGridBody>
<DataGridFoot>
<DataGridRow>
<DataGridCell>Devyn</DataGridCell>
<DataGridCell>Weimann</DataGridCell>
<DataGridCell>Congo</DataGridCell>
<DataGridCell>Matilde86@gmail.com</DataGridCell>
<DataGridCell>652-441-1766 x377</DataGridCell>
</DataGridRow>
</DataGridFoot>
</DataGrid>
);
```

## Props

<PropsTable componentApi={props.componentApi} />
38 changes: 38 additions & 0 deletions packages/paste-website/src/pages/components/data-grid/changelog.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
export const meta = {
title: 'Data Grid - Changelog',
package: '@twilio-paste/data-grid',
description:
'A data grid is an interactive table used for working with a large collection of data in a scannable way.',
slug: '/components/data-grid/changelog',
};

import Changelog from '@twilio-paste/data-grid/CHANGELOG.md';
import packageJson from '@twilio-paste/data-grid/package.json';

import {SidebarCategoryRoutes} from '../../../constants';
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
import {getFeature, getNavigationData} from '../../../utils/api';

export default ComponentPageLayout;

export const getStaticProps = async () => {
const navigationData = await getNavigationData();
const feature = await getFeature('Data Grid');
return {
props: {
data: {
...packageJson,
...feature,
},
navigationData,
mdxHeadings,
pageHeaderData: {
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/data-grid',
storybookUrl: '/?path=/story/components-data-grid--plain-data-grid',
},
},
};
};

<Changelog />
181 changes: 8 additions & 173 deletions packages/paste-website/src/pages/components/data-grid/index.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,12 +23,11 @@ import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout';

import {SidebarCategoryRoutes} from '../../../constants';
import {standardDataGrid, TableHeaderData, TableBodyData} from '../../../component-examples/DataGridExamples';
import Changelog from '@twilio-paste/data-grid/CHANGELOG.md';
import packageJson from '@twilio-paste/data-grid/package.json';
import DefaultLayout from '../../../layouts/DefaultLayout';
import ComponentPageLayout from '../../../layouts/ComponentPageLayout';
import {getFeature, getNavigationData} from '../../../utils/api';

export default DefaultLayout;
export default ComponentPageLayout;

export const getStaticProps = async () => {
const navigationData = await getNavigationData();
Expand All @@ -40,25 +39,16 @@ export const getStaticProps = async () => {
...feature,
},
navigationData,
mdxHeadings,
pageHeaderData: {
categoryRoute: SidebarCategoryRoutes.COMPONENTS,
githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/data-grid',
storybookUrl: '/?path=/story/components-data-grid--plain-data-grid',
},
},
};
};

<NormalizedComponentHeader
categoryRoute={SidebarCategoryRoutes.COMPONENTS}
githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/data-grid"
storybookUrl="/?path=/story/components-data-grid--plain-data-grid"
data={props.data}
/>

---

<contentwrapper>

<PageAside data={mdxHeadings} />

<content>

<LivePreview
scope={{
TableHeaderData,
Expand Down Expand Up @@ -273,158 +263,3 @@ Avoid documenting an entire error message within a row. Use an indicator, like a
<Do title="Do" body="Use data grid for interactive, tabular data" />
<Dont title="Don't" body="Don't use data grid for static data" />
</DoDont>

---

## Usage Guide

### API

#### Installation

```bash
yarn add @twilio-paste/core
```

#### Usage

```jsx
import {
DataGrid,
DataGridHead,
DataGridRow,
DataGridHeader,
DataGridBody,
DataGridCell,
DataGridFoot,
} from '@twilio-paste/core/data-grid';

const Component = () => (
<DataGrid aria-label="User information table" striped>
<DataGridHead>
<DataGridRow>
<DataGridHeader>First Name</DataGridHeader>
<DataGridHeader>Last Name</DataGridHeader>
<DataGridHeader>Country</DataGridHeader>
<DataGridHeader>Email</DataGridHeader>
<DataGridHeader>Phone</DataGridHeader>
</DataGridRow>
</DataGridHead>
<DataGridBody>
<DataGridRow>
<DataGridCell>Devyn</DataGridCell>
<DataGridCell>Weimann</DataGridCell>
<DataGridCell>Congo</DataGridCell>
<DataGridCell>Matilde86@gmail.com</DataGridCell>
<DataGridCell>652-441-1766 x377</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell>Fritz</DataGridCell>
<DataGridCell>Bashirian</DataGridCell>
<DataGridCell>France</DataGridCell>
<DataGridCell>Magali.Harber@hotmail.com</DataGridCell>
<DataGridCell>1-229-278-7567</DataGridCell>
</DataGridRow>
<DataGridRow>
<DataGridCell>Jovanny</DataGridCell>
<DataGridCell>Mante</DataGridCell>
<DataGridCell>Pitcairn Islands</DataGridCell>
<DataGridCell>Fausto_Vandervort15@gmail.com</DataGridCell>
<DataGridCell>(629) 375-5743 x726</DataGridCell>
</DataGridRow>
</DataGridBody>
<DataGridFoot>
<DataGridRow>
<DataGridCell>Devyn</DataGridCell>
<DataGridCell>Weimann</DataGridCell>
<DataGridCell>Congo</DataGridCell>
<DataGridCell>Matilde86@gmail.com</DataGridCell>
<DataGridCell>652-441-1766 x377</DataGridCell>
</DataGridRow>
</DataGridFoot>
</DataGrid>
);
```

#### DataGrid Props

| Prop | Type | Description | Default |
| ------------------- | ----------------------- | ----------------------------------------------------------------------------------------- | ----------- |
| aria-label | `string` | Defines a string value that labels the current element. | null |
| striped? | `boolean` | Toggles row zebra striping | false |
| scrollHorizontally? | `boolean` | Sets the table to scroll horizontally on small screens. | false |
| noWrap? | `boolean` | Sets the table cells to not line wrap. | false |
| tableLayout? | "auto", "fixed" | Sets the `table-layout` style of the Table. Defaults to `auto`. | false |
| variant? | "default", "borderless" | Sets the `border` style of the Table. Defaults to `default`. | false |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `DATA_GRID` |
| children? | `ReactNode` | | null |

#### DataGridHead Props

| Prop | Type | Description | Default |
| ------------- | ---------------- | ----------------------------------------------------------------------------------------- | ---------------- |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `DATA_GRID_HEAD` |
| children? | `ReactNode` | | null |
| stickyHeader? | `boolean` | Makes the data grid head stick to the top of the window as the user scrolls a long table | null |
| top? | `string, number` | Allows manual control of the top offset, used in conjunction with `stickyHeader` | null |

#### DataGridBody Props

| Prop | Type | Description | Default |
| --------- | ----------- | ----------------------------------------------------------------------------------------- | ---------------- |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `DATA_GRID_BODY` |
| children? | `ReactNode` | | null |

#### DataGridFoot Props

| Prop | Type | Description | Default |
| --------- | ----------- | ----------------------------------------------------------------------------------------- | ---------------- |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `DATA_GRID_FOOT` |
| children? | `ReactNode` | | null |

#### DataGridHeader Props

| Prop | Type | Description | Default |
| ---------- | ----------- | ----------------------------------------------------------------------------------------- | ------------------ |
| textAlign? | `string` | CSS text align for this cell | `left` |
| width? | `string` | Allows setting column width programmatically | null |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `DATA_GRID_HEADER` |
| colSpan? | `number` | How many columns the cell spans across | null |
| children? | `ReactNode` | | null |

#### DataGridHeaderSort Props

| Prop | Type | Description | Default |
| -------------------- | --------------------------------- | ----------------------------------------------------------------------------------------- | ----------------------- |
| direction | "ascending", "descending", "none" | Sort direction matching aria spec | null |
| onClick? | `() => {}` | Callback when the sort button is pressed. Used to handle sorting. | null |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `DATA_GRID_HEADER_SORT` |
| i18nAscendingLabel? | `string` | Sort button label text when `direction` is "ascending" | `'Sort ascending'` |
| i18nDescendingLabel? | `string` | Sort button label text when `direction` is "descending" | `'Sort descending'` |
| i18nUnsortedLabel? | `string` | Sort button label text when `direction` is "none" | `'Unsorted'` |

#### DataGridRow Props

| Prop | Type | Description | Default |
| --------- | ----------- | ----------------------------------------------------------------------------------------- | --------------- |
| selected? | `boolean` | Visally displays a row highlight indicating selection and sets `aria-selected` | false |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `DATA_GRID_ROW` |
| children? | `ReactNode` | | null |

#### DataGridCell Props

| Prop | Type | Description | Default |
| ---------- | ----------- | ----------------------------------------------------------------------------------------- | ---------------- |
| as? | "th", "td" | Cells can either be th or td, so rows can have headers. | `td` |
| textAlign? | `string` | CSS text align for this cell | `left` |
| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `DATA_GRID_CELL` |
| colSpan? | `number` | How many columns the cell spans across | null |
| children? | `ReactNode` | | null |

<ChangelogRevealer>
<Changelog />
</ChangelogRevealer>

</content>

</contentwrapper>
Loading

0 comments on commit 2c4bc15

Please sign in to comment.