From 2c4bc15a121f3231e58cca677d102b54cf7369e4 Mon Sep 17 00:00:00 2001 From: Si Taggart Date: Thu, 21 Sep 2023 17:00:00 -0700 Subject: [PATCH] chore: new api pages --- .../src/pages/components/data-grid/api.mdx | 108 +++++++++ .../pages/components/data-grid/changelog.mdx | 38 +++ .../src/pages/components/data-grid/index.mdx | 181 +------------- .../src/pages/components/date-picker/api.mdx | 73 ++++++ .../components/date-picker/changelog.mdx | 37 +++ .../pages/components/date-picker/index.mdx | 221 +----------------- .../pages/components/description-list/api.mdx | 62 +++++ .../components/description-list/changelog.mdx | 37 +++ .../components/description-list/index.mdx | 97 +------- .../src/pages/components/detail-text/api.mdx | 55 +++++ .../components/detail-text/changelog.mdx | 37 +++ .../pages/components/detail-text/index.mdx | 74 +----- .../src/pages/components/disclosure/api.mdx | 64 +++++ .../pages/components/disclosure/changelog.mdx | 37 +++ .../src/pages/components/disclosure/index.mdx | 139 +---------- .../pages/components/display-heading/api.mdx | 60 +++++ .../components/display-heading/changelog.mdx | 38 +++ .../components/display-heading/index.mdx | 69 +----- .../components/display-pill-group/api.mdx | 82 +++++++ .../display-pill-group/changelog.mdx | 37 +++ .../components/display-pill-group/index.mdx | 128 +--------- .../components/editable-code-block/api.mdx | 66 ++++++ .../editable-code-block/changelog.mdx | 37 +++ .../components/editable-code-block/index.mdx | 93 +------- .../src/pages/components/file-picker/api.mdx | 67 ++++++ .../components/file-picker/changelog.mdx | 37 +++ .../pages/components/file-picker/index.mdx | 87 +------ .../pages/components/file-uploader/api.mdx | 69 ++++++ .../components/file-uploader/changelog.mdx | 37 +++ .../pages/components/file-uploader/index.mdx | 174 +------------- .../pages/components/form-pill-group/api.mdx | 76 ++++++ .../components/form-pill-group/changelog.mdx | 38 +++ .../components/form-pill-group/index.mdx | 176 +------------- .../src/pages/components/form/api.mdx | 78 +++++++ .../src/pages/components/form/changelog.mdx | 37 +++ .../src/pages/components/form/index.mdx | 177 +------------- .../src/pages/components/heading/api.mdx | 60 +++++ .../pages/components/heading/changelog.mdx | 38 +++ .../src/pages/components/heading/index.mdx | 69 +----- .../src/pages/components/help-text/api.mdx | 65 ++++++ .../pages/components/help-text/changelog.mdx | 37 +++ .../src/pages/components/help-text/index.mdx | 120 +--------- 42 files changed, 1619 insertions(+), 1693 deletions(-) create mode 100644 packages/paste-website/src/pages/components/data-grid/api.mdx create mode 100644 packages/paste-website/src/pages/components/data-grid/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/date-picker/api.mdx create mode 100644 packages/paste-website/src/pages/components/date-picker/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/description-list/api.mdx create mode 100644 packages/paste-website/src/pages/components/description-list/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/detail-text/api.mdx create mode 100644 packages/paste-website/src/pages/components/detail-text/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/disclosure/api.mdx create mode 100644 packages/paste-website/src/pages/components/disclosure/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/display-heading/api.mdx create mode 100644 packages/paste-website/src/pages/components/display-heading/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/display-pill-group/api.mdx create mode 100644 packages/paste-website/src/pages/components/display-pill-group/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/editable-code-block/api.mdx create mode 100644 packages/paste-website/src/pages/components/editable-code-block/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/file-picker/api.mdx create mode 100644 packages/paste-website/src/pages/components/file-picker/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/file-uploader/api.mdx create mode 100644 packages/paste-website/src/pages/components/file-uploader/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/form-pill-group/api.mdx create mode 100644 packages/paste-website/src/pages/components/form-pill-group/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/form/api.mdx create mode 100644 packages/paste-website/src/pages/components/form/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/heading/api.mdx create mode 100644 packages/paste-website/src/pages/components/heading/changelog.mdx create mode 100644 packages/paste-website/src/pages/components/help-text/api.mdx create mode 100644 packages/paste-website/src/pages/components/help-text/changelog.mdx diff --git a/packages/paste-website/src/pages/components/data-grid/api.mdx b/packages/paste-website/src/pages/components/data-grid/api.mdx new file mode 100644 index 0000000000..cfb0ca8de8 --- /dev/null +++ b/packages/paste-website/src/pages/components/data-grid/api.mdx @@ -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 = () => ( + + + + First Name + Last Name + Country + Email + Phone + + + + + Devyn + Weimann + Congo + Matilde86@gmail.com + 652-441-1766 x377 + + + Fritz + Bashirian + France + Magali.Harber@hotmail.com + 1-229-278-7567 + + + Jovanny + Mante + Pitcairn Islands + Fausto_Vandervort15@gmail.com + (629) 375-5743 x726 + + + + + Devyn + Weimann + Congo + Matilde86@gmail.com + 652-441-1766 x377 + + + +); +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/data-grid/changelog.mdx b/packages/paste-website/src/pages/components/data-grid/changelog.mdx new file mode 100644 index 0000000000..defb2ce8d0 --- /dev/null +++ b/packages/paste-website/src/pages/components/data-grid/changelog.mdx @@ -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', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/data-grid/index.mdx b/packages/paste-website/src/pages/components/data-grid/index.mdx index 8ee84b0c05..78dc182e59 100644 --- a/packages/paste-website/src/pages/components/data-grid/index.mdx +++ b/packages/paste-website/src/pages/components/data-grid/index.mdx @@ -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(); @@ -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', + }, }, }; }; - - ---- - - - - - - - - ---- - -## 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 = () => ( - - - - First Name - Last Name - Country - Email - Phone - - - - - Devyn - Weimann - Congo - Matilde86@gmail.com - 652-441-1766 x377 - - - Fritz - Bashirian - France - Magali.Harber@hotmail.com - 1-229-278-7567 - - - Jovanny - Mante - Pitcairn Islands - Fausto_Vandervort15@gmail.com - (629) 375-5743 x726 - - - - - Devyn - Weimann - Congo - Matilde86@gmail.com - 652-441-1766 x377 - - - -); -``` - -#### 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 | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/date-picker/api.mdx b/packages/paste-website/src/pages/components/date-picker/api.mdx new file mode 100644 index 0000000000..c3d723dca5 --- /dev/null +++ b/packages/paste-website/src/pages/components/date-picker/api.mdx @@ -0,0 +1,73 @@ +export const meta = { + title: 'Date Picker - API', + package: '@twilio-paste/date-picker', + description: 'A form component used to select a date.', + slug: '/components/date-picker/api', +}; + +import Changelog from '@twilio-paste/date-picker/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/date-picker/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('Date Picker'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/date-picker'); + 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/date-picker', + storybookUrl: '/?path=/story/components-date-picker--default-date-picker', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/date-picker - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {DatePicker, formatReturnDate} from '@twilio-paste/core/date-picker'; +import {Label} from '@twilio-paste/core/label'; +import {HelpText} from '@twilio-paste/core/helptext'; + +const DatePickerExample = () => { + return ( + <> + + formatReturnDate(evt.target.value, 'MM/dd/yyyy')} + required + /> + Select a date. + + ); +}; +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/date-picker/changelog.mdx b/packages/paste-website/src/pages/components/date-picker/changelog.mdx new file mode 100644 index 0000000000..44f33c5e58 --- /dev/null +++ b/packages/paste-website/src/pages/components/date-picker/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Date Picker - Changelog', + package: '@twilio-paste/date-picker', + description: 'A form component used to select a date.', + slug: '/components/date-picker/changelog', +}; + +import Changelog from '@twilio-paste/date-picker/CHANGELOG.md'; +import packageJson from '@twilio-paste/date-picker/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('Date Picker'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/date-picker', + storybookUrl: '/?path=/story/components-date-picker--default-date-picker', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/date-picker/index.mdx b/packages/paste-website/src/pages/components/date-picker/index.mdx index 624ca42e7f..b6f18ab5e0 100644 --- a/packages/paste-website/src/pages/components/date-picker/index.mdx +++ b/packages/paste-website/src/pages/components/date-picker/index.mdx @@ -5,7 +5,6 @@ export const meta = { slug: '/components/date-picker/', }; -import Changelog from '@twilio-paste/date-picker/CHANGELOG.md'; import {Anchor} from '@twilio-paste/anchor'; import {Box} from '@twilio-paste/box'; import {Label} from '@twilio-paste/label'; @@ -35,10 +34,10 @@ import { MinAndMaxPicker, } from '../../../component-examples/DatePickerExamples.ts'; import packageJson from '@twilio-paste/date-picker/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(); @@ -50,25 +49,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/date-picker', + storybookUrl: '/?path=/story/components-date-picker--default-date-picker', + }, }, }; }; - - ---- - - - - - - - {LabelOnlyPicker} @@ -359,198 +349,3 @@ For additional guidance on how to compose error messages, refer to the [error st effectively ignored). - -## Anatomy - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefault tokenModifiable?
Label text - - $font-size-30 - Default: $color-text, $font-weight-semibold - Disabled: $color-text-weaker, $font-weight-semibold - - No
Required field indicator - - 4px size (0.25rem) - Background: $color-background-required - - No
Box Shadow - - Default: $shadow-border - Hover: $shadow-border-primary-strong - Disabled: $shadow-border-weak - Error: $shadow-border-error - Error hover: $shadow-border-error-strong - - No
Background - - Default: $color-background-body - Disabled, Readonly: $color-background - - No
Value text - - $font-size-30 - Default, Readonly: $color-text - Disabled: $color-text-weaker - - No
Help text$color-text-weak, $font-size-30No
Inline error - - Text: $color-text-error, $font-size-30 - Icon: IconError, $color-text-error, $icon-size-20 - - No
Spacing - - - Label: - - Bottom: $space-10 - Between label and required indicator: $space-20 - - - - DatePicker: - - Left padding: $space-40 - Top, right, bottom padding: $space-30 - - - - Help text: - - Top: $space-20 - - - - Inline error: - - Spacing between icon and text: $space-20 - Top: $space-20 - - - - No
- - ---- - -## Usage Guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/date-picker - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {DatePicker, formatReturnDate} from '@twilio-paste/core/date-picker'; -import {Label} from '@twilio-paste/core/label'; -import {HelpText} from '@twilio-paste/core/helptext'; - -const DatePickerExample = () => { - return ( - <> - - formatReturnDate(evt.target.value, 'MM/dd/yyyy')} - required - /> - Select a date. - - ); -}; -``` - -#### DatePicker props - -All the valid HTML attributes for `input` (except `type`) are supported, including the following props: - -| Prop | Type | Description | Default | -| --------- | ---------------------------------------- | ----------------------------------------------------------------------------------------- | ------------ | -| id? | string | Sets the id of the date picker. Should match the htmlFor of `Label`. | null | -| name? | string | Sets the name of the date picker. | null | -| value? | string | Sets the value of the date picker. | null | -| disabled? | boolean | Disables the date picker. | false | -| readOnly? | boolean | Sets the date picker to readonly. | false | -| required? | boolean | Sets the date picker as required. | false | -| hasError? | boolean | Sets the date picker to an error state. | false | -| min? | string | Sets the earliest valid date value. | null | -| max? | string | Sets the last valid date value. | null | -| onChange? | `(event: React.MouseEvent)` | | null | -| onFocus? | `(event: React.MouseEvent)` | | null | -| onBlur? | `(event: React.MouseEvent)` | | null | -| variant? | 'default', 'inverse' | | 'default' | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'DATEPICKER' | - -#### formatReturnDate() props - -| Prop | Type | Description | Default | -| ---------- | ------ | --------------------------------------------------------------------------------------------------------------------- | ------- | -| dateValue | string | Date value to be formatted. Must be in yyyy-mm-dd format. | null | -| dateFormat | string | Specify the format in which to return the dateValue. Formats come from the date-fns library. | null | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/description-list/api.mdx b/packages/paste-website/src/pages/components/description-list/api.mdx new file mode 100644 index 0000000000..adbe4350d3 --- /dev/null +++ b/packages/paste-website/src/pages/components/description-list/api.mdx @@ -0,0 +1,62 @@ +export const meta = { + title: 'Description List - API', + package: '@twilio-paste/description-list', + description: 'A Description List is a set or sets of terms and their definitions, or details, used to display data.', + slug: '/components/description-list/api', +}; + +import Changelog from '@twilio-paste/description-list/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/description-list/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('Description List'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/description-list'); + 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/description-list', + storybookUrl: '/?path=/story/components-description-list--default', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/description-list - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {DescriptionList, DescriptionListSet, DescriptionListTerm, DescriptionListDetails} from '@twilio-paste/core/description-list'; + +const Component = () => ( + + + Paste + A design system used to build accessible, cohesive, and high-quality customer experiences at Twilio. + + +); +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/description-list/changelog.mdx b/packages/paste-website/src/pages/components/description-list/changelog.mdx new file mode 100644 index 0000000000..389b9dba7c --- /dev/null +++ b/packages/paste-website/src/pages/components/description-list/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Description List - Changelog', + package: '@twilio-paste/description-list', + description: 'A Description List is a set or sets of terms and their definitions, or details, used to display data.', + slug: '/components/description-list/changelog', +}; + +import Changelog from '@twilio-paste/description-list/CHANGELOG.md'; +import packageJson from '@twilio-paste/description-list/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('Description List'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/description-list', + storybookUrl: '/?path=/story/components-description-list--default', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/description-list/index.mdx b/packages/paste-website/src/pages/components/description-list/index.mdx index 945e0d3478..e0477e0b55 100644 --- a/packages/paste-website/src/pages/components/description-list/index.mdx +++ b/packages/paste-website/src/pages/components/description-list/index.mdx @@ -18,7 +18,6 @@ import {ProcessSuccessIcon} from '@twilio-paste/icons/esm/ProcessSuccessIcon'; import {ProcessErrorIcon} from '@twilio-paste/icons/esm/ProcessErrorIcon'; import {ProcessInProgressIcon} from '@twilio-paste/icons/esm/ProcessInProgressIcon'; import {Text} from '@twilio-paste/text'; -import Changelog from '@twilio-paste/description-list/CHANGELOG.md'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import {Codeblock} from '../../../components/codeblock'; @@ -31,10 +30,10 @@ import { descriptionListWithEmptyState, } from '../../../component-examples/DescriptionListExamples.ts'; import packageJson from '@twilio-paste/description-list/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(); @@ -46,25 +45,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/description-list', + storybookUrl: '/?path=/story/components-description-list--default', + }, }, }; }; - - ---- - - - - - - - {basicDescriptionList} @@ -223,74 +213,3 @@ Instead, include an empty tag (or a symbol, such as `-`) to signify the empty st - ---- - -## Usage Guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/description-list - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {DescriptionList, DescriptionListSet, DescriptionListTerm, DescriptionListDetails} from '@twilio-paste/core/description-list'; - -const Component = () => ( - - - Paste - A design system used to build accessible, cohesive, and high-quality customer experiences at Twilio. - - -); -``` - -#### Description List Props - -All the valid attributes for `
` are supported including the following props: - -| Prop | Type | Description | Default | -| --------- | -------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------------ | -| children? | `DescriptionListTerm`, `DescriptionListDetails`, `
` | | null | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'DESCRIPTION_LIST' | - -#### Description List Set Props - -All the valid attributes for `
` are supported including the following props: - -| Prop | Type | Description | Default | -| --------- | ----------------------------------------------- | ----------------------------------------------------------------------------------------- | ------------------ | -| children? | `DescriptionListTerm`, `DescriptionListDetails` | | null | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'DESCRIPTION_LIST' | - -#### Description List Term Props - -All the valid attributes for `
` are supported including the following props: - -| Prop | Type | Description | Default | -| --------- | ----------------- | ----------------------------------------------------------------------------------------- | ----------------------- | -| children? | `React.ReactNode` | | null | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'DESCRIPTION_LIST_TERM' | - -#### Description List Details Props - -All the valid attributes for `
` are supported including the following props: - -| Prop | Type | Description | Default | -| --------- | ----------------- | ----------------------------------------------------------------------------------------- | -------------------------- | -| children? | `React.ReactNode` | | null | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'DESCRIPTION_LIST_DETAILS' | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/detail-text/api.mdx b/packages/paste-website/src/pages/components/detail-text/api.mdx new file mode 100644 index 0000000000..b28c2eb928 --- /dev/null +++ b/packages/paste-website/src/pages/components/detail-text/api.mdx @@ -0,0 +1,55 @@ +export const meta = { + title: 'Detail Text - API', + package: '@twilio-paste/detail-text', + description: 'Detail Text is typography used for short pieces of secondary text content.', + slug: '/components/detail-text/api', +}; + +import Changelog from '@twilio-paste/detail-text/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/detail-text/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('Detail Text'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/detail-text'); + 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/detail-text', + storybookUrl: '/?path=/story/components-detail-text--default', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/detail-text - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {DetailText} from '@twilio-paste/core/detail-text'; + +const Component = () => This is my detail text.; +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/detail-text/changelog.mdx b/packages/paste-website/src/pages/components/detail-text/changelog.mdx new file mode 100644 index 0000000000..9a3e4b8518 --- /dev/null +++ b/packages/paste-website/src/pages/components/detail-text/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Detail Text - Changelog', + package: '@twilio-paste/detail-text', + description: 'Detail Text is typography used for short pieces of secondary text content.', + slug: '/components/detail-text/changelog', +}; + +import Changelog from '@twilio-paste/detail-text/CHANGELOG.md'; +import packageJson from '@twilio-paste/detail-text/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('Detail Text'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/detail-text', + storybookUrl: '/?path=/story/components-detail-text--default', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/detail-text/index.mdx b/packages/paste-website/src/pages/components/detail-text/index.mdx index e7b5a701fa..92b42a9903 100644 --- a/packages/paste-website/src/pages/components/detail-text/index.mdx +++ b/packages/paste-website/src/pages/components/detail-text/index.mdx @@ -27,10 +27,10 @@ import { detailTextAsFootnote, } from '../../../component-examples/DetailTextExamples.ts'; import packageJson from '@twilio-paste/detail-text/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(); @@ -42,25 +42,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/detail-text', + storybookUrl: '/?path=/story/components-detail-text--default', + }, }, }; }; - - ---- - - - - - - - {detailTextWithImage} @@ -146,52 +137,3 @@ Use Detail Text to add a footnote below a paragraph. body="Don’t use Detail Text for stylistic purposes within other typography. Consider using the Text primitive instead." /> - ---- - -## Usage Guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/detail-text - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {DetailText} from '@twilio-paste/core/detail-text'; - -const Component = () => This is my detail text.; -``` - -### Detail Text props - -| Prop | Type | Description | Default | -| ---------- | ----------------------- | ----------------------------------------------------------------------------------------- | ------------- | -| as? | `string` | The HTML tag to render the Detail Text as | 'div' | -| marginTop? | `'space0' \| 'space30'` | The marginTop of the DetailText. Currently we only allow space0 to remove top margin. | 'space30' | -| children? | `React.ReactNode` | The content of the DetailText | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'DETAIL_TEXT' | - -## Figma - -### Usage - -Detail Text is available in the Paste Components Figma library. - -### Properties - -| Property | Variants | Description | Default | -| -------- | ----------- | ----------------------------------------------- | ------- | -| Margin | "Yes", "No" | If there is a margin on top of the Detail Text. | "Yes" | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/disclosure/api.mdx b/packages/paste-website/src/pages/components/disclosure/api.mdx new file mode 100644 index 0000000000..9200a34a46 --- /dev/null +++ b/packages/paste-website/src/pages/components/disclosure/api.mdx @@ -0,0 +1,64 @@ +export const meta = { + title: 'Disclosure - API', + package: '@twilio-paste/disclosure', + description: 'The Disclosure is used to create accessible, hierarchical, and collapsible structure to your pages.', + slug: '/components/disclosure/api', +}; + +import Changelog from '@twilio-paste/disclosure/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/disclosure/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('Disclosure'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/disclosure'); + 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/disclosure', + storybookUrl: '/?path=/story/components-disclosure--heading-variant-10', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/disclosure - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {Disclosure, DisclosureHeading, DisclosureContent} from '@twilio-paste/core/disclosure'; + +const PopoverExample: React.FC = () => { + return ( + + + Disclosure Heading + + Disclosure content + + ); +}; +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/disclosure/changelog.mdx b/packages/paste-website/src/pages/components/disclosure/changelog.mdx new file mode 100644 index 0000000000..91a8d38f24 --- /dev/null +++ b/packages/paste-website/src/pages/components/disclosure/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Disclosure - Changelog', + package: '@twilio-paste/disclosure', + description: 'The Disclosure is used to create accessible, hierarchical, and collapsible structure to your pages.', + slug: '/components/disclosure/changelog', +}; + +import Changelog from '@twilio-paste/disclosure/CHANGELOG.md'; +import packageJson from '@twilio-paste/disclosure/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('Disclosure'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/disclosure', + storybookUrl: '/?path=/story/components-disclosure--heading-variant-10', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/disclosure/index.mdx b/packages/paste-website/src/pages/components/disclosure/index.mdx index 662f65fdad..627a997abf 100644 --- a/packages/paste-website/src/pages/components/disclosure/index.mdx +++ b/packages/paste-website/src/pages/components/disclosure/index.mdx @@ -15,14 +15,13 @@ import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object'; import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon'; import {SuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon'; import {Disclosure, DisclosureHeading, DisclosureContent, useDisclosureState} from '@twilio-paste/disclosure'; -import Changelog from '@twilio-paste/disclosure/CHANGELOG.md'; import {SidebarCategoryRoutes} from '../../../constants'; import {StateHookExample, StateHookToggleExample} from '../../../component-examples/DisclosureExamples'; import packageJson from '@twilio-paste/disclosure/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(); @@ -34,25 +33,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/disclosure', + storybookUrl: '/?path=/story/components-disclosure--heading-variant-10', + }, }, }; }; - - ---- - - - - - - - `} - -## Usage Guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/disclosure - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {Disclosure, DisclosureHeading, DisclosureContent} from '@twilio-paste/core/disclosure'; - -const PopoverExample: React.FC = () => { - return ( - - - Disclosure Heading - - Disclosure content - - ); -}; -``` - -#### Props - -#### useDisclosureState Props - -Pass these as part of an object to the useDisclosureState hook. - -##### `baseId?: string` - -ID that will serve as a base for all the items IDs. - -##### `visible?: boolean` - -Whether it's visible or not. - -#### useDisclosureState returned props - -These props are returned by the state hook. You can spread them into this component (`{...state}`) or pass them separately. You can also provide these props from your own state logic. - -##### `baseId?: string` - -ID that will serve as a base for all the items IDs. - -##### `visible?: boolean` - -Whether it's visible or not. - -##### `toggle?: () => void` - -Toggles the visible state - -#### Disclosure Props - -All the regular HTML attributes (`role`, `aria-*`, `type`, and so on) including the following custom props: - -##### `baseId?: string` - -ID that will serve as a base for all the items IDs. - -##### `visible?: boolean` - -Whether it's visible or not. - -##### `variant?: 'default' | 'contained'` - -Changes the styling on the component based on the variant selected. - -##### `element?: string` - -Overrides the default element name ('DISCLOSURE') to apply unique styles with the Customization Provider - -#### DisclosureHeading Props - -All the regular HTML attributes (`role`, `aria-*`, `type`, and so on). - -All [Heading](/components/heading) props. - -Also including the following custom props: - -##### `disabled?: boolean | undefined` - -Same as the HTML attribute. - -##### `focusable?: boolean | undefined` - -When an element is `disabled`, it may still be `focusable`. It works similarly to `readOnly` on form elements. In this case, only `aria-disabled` will be set. - -##### `element?: string` - -Overrides the default element name ('DISCLOSURE_HEADING') to apply unique styles with the Customization Provider - -#### DisclosureContent Props - -All the regular HTML attributes (`role`, `aria-*`, `type`, and so on) including the following custom props: - -##### `element?: string` - -Overrides the default element name ('DISCLOSURE_CONTENT') to apply unique styles with the Customization Provider - - - - - - - - diff --git a/packages/paste-website/src/pages/components/display-heading/api.mdx b/packages/paste-website/src/pages/components/display-heading/api.mdx new file mode 100644 index 0000000000..769981ba74 --- /dev/null +++ b/packages/paste-website/src/pages/components/display-heading/api.mdx @@ -0,0 +1,60 @@ +export const meta = { + title: 'Display Heading - API', + package: '@twilio-paste/display-heading', + description: + 'Display heading is large, expressive text that stands out from traditional headings and is used for marketing and attention grabbing purposes.', + slug: '/components/display-heading/', +}; + +import Changelog from '@twilio-paste/display-heading/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/display-heading/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('Display Heading'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/display-heading'); + 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/display-heading', + storybookUrl: '/?path=/story/components-display-heading--all-variants', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/display-heading - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {DisplayHeading} from '@twilio-paste/core/display-heading'; + +const Component = () => ( + + Display Heading + +); +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/display-heading/changelog.mdx b/packages/paste-website/src/pages/components/display-heading/changelog.mdx new file mode 100644 index 0000000000..25ae08ac32 --- /dev/null +++ b/packages/paste-website/src/pages/components/display-heading/changelog.mdx @@ -0,0 +1,38 @@ +export const meta = { + title: 'Display Heading - Changelog', + package: '@twilio-paste/display-heading', + description: + 'Display heading is large, expressive text that stands out from traditional headings and is used for marketing and attention grabbing purposes.', + slug: '/components/display-heading/', +}; + +import Changelog from '@twilio-paste/display-heading/CHANGELOG.md'; +import packageJson from '@twilio-paste/display-heading/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('Display Heading'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/display-heading', + storybookUrl: '/?path=/story/components-display-heading--all-variants', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/display-heading/index.mdx b/packages/paste-website/src/pages/components/display-heading/index.mdx index 00252734b5..b78b31d527 100644 --- a/packages/paste-website/src/pages/components/display-heading/index.mdx +++ b/packages/paste-website/src/pages/components/display-heading/index.mdx @@ -11,12 +11,11 @@ import {DisplayHeading} from '@twilio-paste/display-heading'; import {Paragraph} from '@twilio-paste/paragraph'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import {SidebarCategoryRoutes} from '../../../constants'; -import Changelog from '@twilio-paste/display-heading/CHANGELOG.md'; import packageJson from '@twilio-paste/display-heading/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(); @@ -28,25 +27,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/display-heading', + storybookUrl: '/?path=/story/components-display-heading--all-variants', + }, }, }; }; - - ---- - - - - - - - {` Twilio magic @@ -162,46 +152,3 @@ It is important to not skip one or more heading levels as it is common for scree - ---- - -## Usage Guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/display-heading - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {DisplayHeading} from '@twilio-paste/core/display-heading'; - -const Component = () => ( - - Display Heading - -); -``` - -#### Props - -| Prop | Type | Description | Default | -| ------------- | ------------------------------ | ----------------------------------------------------------------------------------------- | ----------------- | -| as | `asTags` | 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'span' | null | -| id? | `string` | | null | -| marginBottom? | `oneOf(['space0'])` | Currently we only allow `space0` to remove bottom margin | null | -| variant | `displayHeadingVariants` | 'displayHeading10', 'displayHeading20', 'displayHeading30' | null | -| display? | `CSS display property options` | 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid', and more | "block" | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'DISPLAY_HEADING' | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/display-pill-group/api.mdx b/packages/paste-website/src/pages/components/display-pill-group/api.mdx new file mode 100644 index 0000000000..cd9eaee1b6 --- /dev/null +++ b/packages/paste-website/src/pages/components/display-pill-group/api.mdx @@ -0,0 +1,82 @@ +export const meta = { + title: 'Display Pill Group - API', + package: '@twilio-paste/display-pill-group', + description: 'A Display Pill Group is a non-editable set of Pills that represent a collection of static objects.', + slug: '/components/display-pill-group/api', +}; + +import Changelog from '@twilio-paste/display-pill-group/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/display-pill-group/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('Display Pill Group'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/display-pill-group'); + 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/display-pill-group', + storybookUrl: '/?path=/story/components-display-pill-group--basic', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/display-pill-group - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {AgentIcon} from '@twilio-paste/icons/esm/AgentIcon'; +import {Avatar} from '@twilio-paste/core/display-pill-group'; +import {DisplayPillGroup, DisplayPill} from '@twilio-paste/core/display-pill-group'; +import {MMSCapableIcon} from '@twilio-paste/icons/esm/MMSCapableIcon'; +import {SMSCapableIcon} from '@twilio-paste/icons/esm/SMSCapableIcon'; + +const DisplayPillGroupExample = () => { + return ( + + Voice + Studio + + + SMS + + + + MMS + + + + Customer + + + + Agent + + + ); +}; +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/display-pill-group/changelog.mdx b/packages/paste-website/src/pages/components/display-pill-group/changelog.mdx new file mode 100644 index 0000000000..bf815da4ec --- /dev/null +++ b/packages/paste-website/src/pages/components/display-pill-group/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Display Pill Group - Changelog', + package: '@twilio-paste/display-pill-group', + description: 'A Display Pill Group is a non-editable set of Pills that represent a collection of static objects.', + slug: '/components/display-pill-group/changelog', +}; + +import Changelog from '@twilio-paste/display-pill-group/CHANGELOG.md'; +import packageJson from '@twilio-paste/display-pill-group/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('Display Pill Group'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/display-pill-group', + storybookUrl: '/?path=/story/components-display-pill-group--basic', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/display-pill-group/index.mdx b/packages/paste-website/src/pages/components/display-pill-group/index.mdx index 271bf2914c..5d29b07619 100644 --- a/packages/paste-website/src/pages/components/display-pill-group/index.mdx +++ b/packages/paste-website/src/pages/components/display-pill-group/index.mdx @@ -8,7 +8,6 @@ export const meta = { import {Avatar} from '@twilio-paste/avatar'; import {Box} from '@twilio-paste/box'; import {DisplayPill, DisplayPillGroup} from '@twilio-paste/display-pill-group'; -import Changelog from '@twilio-paste/display-pill-group/CHANGELOG.md'; import {Truncate} from '@twilio-paste/truncate'; import {AgentIcon} from '@twilio-paste/icons/esm/AgentIcon'; @@ -42,10 +41,10 @@ import { iconExample, } from '../../../component-examples/DisplayPillGroup.ts'; import packageJson from '@twilio-paste/display-pill-group/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(); @@ -57,26 +56,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/display-pill-group', + storybookUrl: '/?path=/story/components-display-pill-group--basic', + }, }, }; }; - - ---- - - - - - - - {mainExample} @@ -216,104 +205,3 @@ A Display Pill can have an optional [Icon](/components/icon). We recommend placi body="Don’t pass DisplayPillGroup in any other component type, and do not wrap DisplayPill in any other component of the DOM element." /> - -## Usage Guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/display-pill-group - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {AgentIcon} from '@twilio-paste/icons/esm/AgentIcon'; -import {Avatar} from '@twilio-paste/core/display-pill-group'; -import {DisplayPillGroup, DisplayPill} from '@twilio-paste/core/display-pill-group'; -import {MMSCapableIcon} from '@twilio-paste/icons/esm/MMSCapableIcon'; -import {SMSCapableIcon} from '@twilio-paste/icons/esm/SMSCapableIcon'; - -const DisplayPillGroupExample = () => { - return ( - - Voice - Studio - - - SMS - - - - MMS - - - - Customer - - - - Agent - - - ); -}; -``` - -#### Props - -##### DisplayPillGroup - -`DisplayPillGroup` will take any global HTML attribute for an HTML List element, plus the following: - -| Prop | Type | Description | Default | -| ------------ | -------- | ----------------------------------------------------------------------------------------- | ---------------------- | -| `aria-label` | `string` | Defines a string value that labels the DisplayPillGroup | | -| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'DISPLAY_PILL_GROUP'` | - -##### DisplayPill - -`DisplayPill` will take any global HTML attribute for an HTML Anchor element, plus the following: - -| Prop | Type | Description | Default | -| ---------- | -------- | ----------------------------------------------------------------------------------------- | ---------------- | -| `href?` | `string` | URL the pill links to | | -| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'DISPLAY_PILL'` | - -### Figma - -#### Usage - -Display Pill Group is available in the Paste Components Figma library. It has 1 base component, Display Pill, with a ⚙️ emoji in its layer name to indicate there are nested configurable properties available. - -In code, when there are more pills than the max width, they will wrap to the next row. To accomplish the same behavior in Figma, please use the `Row count` property to select a number of rows, or place multiple Display Pill Group components under one another. - -Display Pill Group also contains other Paste components as nested components, including [Avatar](/components/icon) and [Icon](/components/icon). - -#### Properties - -Here is a properties table for Display Pill Group: - -| Property | Variants | Description | Default | -| --------- | ---------- | -------------------------------------------------- | ------- | -| Row count | 1, 2, 3, 4 | Displays a number of rows in a Display Pill Group. | 1 | - -Here is a properties table for its nested component, Display Pill: - -| Property | Variants | Description | Default | -| -------- | --------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| Variant | `Basic`, `Linked` | The variant of the Display Pill. | `Basic` | -| State | `Default`, `Hover`, `Focus` | The state of the Display Pill. If `Variant=Basic`, the state can only be set to `Default`. | `Default` | -| Prefix | `None`, `Icon`, `Avatar` | Adds a prefix ahead of the Display Pill label. If set to `Avatar`, manage the nested properties of Avatar in the layer marked with a ⚙️ emoji. | `None` | -| Icon | | Swaps the icon within a Display Pill. This property is visible in the Figma side panel if `Prefix=Icon`. | | -| Label | | Sets the label of a Display Pill | "Label" | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/editable-code-block/api.mdx b/packages/paste-website/src/pages/components/editable-code-block/api.mdx new file mode 100644 index 0000000000..69a00671e4 --- /dev/null +++ b/packages/paste-website/src/pages/components/editable-code-block/api.mdx @@ -0,0 +1,66 @@ +export const meta = { + title: 'Editable CodeBlock - API', + package: '@twilio-paste/editable-code-block', + description: 'An Editable Code Block is a text field that allows users to enter formatted code.', + slug: '/components/editable-code-block/api', +}; + +import Changelog from '@twilio-paste/editable-code-block/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/editable-code-block/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('Editable Code Block'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/editable-code-block'); + 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/editable-code-block', + storybookUrl: '/?path=/story/components-editable-code-block--default', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/editable-code-block - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import { + EditableCodeBlockHeader, + EditableCodeBlockWrapper, + EditableCodeBlock, +} from '@twilio-paste/core/editable-code-block'; + +const Component = () => { + return ( + + My cool example + + + ); +}; +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/editable-code-block/changelog.mdx b/packages/paste-website/src/pages/components/editable-code-block/changelog.mdx new file mode 100644 index 0000000000..2aa02c85af --- /dev/null +++ b/packages/paste-website/src/pages/components/editable-code-block/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Editable CodeBlock - Changelog', + package: '@twilio-paste/editable-code-block', + description: 'An Editable Code Block is a text field that allows users to enter formatted code.', + slug: '/components/editable-code-block/changelog', +}; + +import Changelog from '@twilio-paste/editable-code-block/CHANGELOG.md'; +import packageJson from '@twilio-paste/editable-code-block/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('Editable Code Block'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/editable-code-block', + storybookUrl: '/?path=/story/components-editable-code-block--default', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/editable-code-block/index.mdx b/packages/paste-website/src/pages/components/editable-code-block/index.mdx index 8436d57e98..0a4324e3ec 100644 --- a/packages/paste-website/src/pages/components/editable-code-block/index.mdx +++ b/packages/paste-website/src/pages/components/editable-code-block/index.mdx @@ -12,10 +12,10 @@ import {DoDont, Do, Dont} from '../../../components/DoDont'; import {Blockquote} from '../../../components/Blockquote'; import {Codeblock} from '../../../components/codeblock'; import {SidebarCategoryRoutes} from '../../../constants'; -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(); @@ -27,25 +27,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/editable-code-block', + storybookUrl: '/?path=/story/components-editable-code-block--default', + }, }, }; }; - - ---- - - - - - - - - -## Usage Guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/editable-code-block - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import { - EditableCodeBlockHeader, - EditableCodeBlockWrapper, - EditableCodeBlock, -} from '@twilio-paste/core/editable-code-block'; - -const Component = () => { - return ( - - My cool example - - - ); -}; -``` - -#### EditableCodeBlockWrapper Props - -| Prop | Type | Description | Default | -| --------- | ----------- | ----------------------------------------------------------------------------------------- | ----------------------------- | -| children? | `ReactNode` | | null | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'EDITABLE_CODE_BLOCK_WRAPPER' | - -#### EditableCodeBlockHeader Props - -| Prop | Type | Description | Default | -| --------- | -------------------------------------------------- | ----------------------------------------------------------------------------------------- | ---------------------------- | -| children? | `ReactNode` | | null | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'EDITABLE_CODE_BLOCK_HEADER' | -| as? | `h1, h2, h3, h4, h5, h6, div, label, span, header` | Replaces the underlying HTML tag | 'h3' | - -#### EditableCodeBlock Props - -| Prop | Type | Description | Default | -| ------------------------ | ----------------- | ----------------------------------------------------------------------------------------- | --------------------- | -| lineNumbers? | `on, off` | Show line numbers in the gutter | 'on' | -| folding? | `boolean` | Enable code folding | true | -| readOnly | `boolean` | Disable editing | false | -| indentationGuide? | `boolean` | Show indentation guides | true | -| showMinimap? | `boolean` | Show minimap | false | -| scrollBeyondLastLine? | `boolean` | Allow scrolling beyond the last line | false | -| inlineErrorRange? | `IRange` | Range of the error in the editor | null | -| inlineErrorHoverMessage? | `IMarkdownString` | Hover message for the error in the editor. If null, the hover message will be cleared. | null | -| inlineErrorIsWholeLine? | `boolean` | Whether the error is a whole line or not. | false | -| i18nLoadingLabel? | `string` | Loading label for the editor. | 'Loading code...' | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'EDITABLE_CODE_BLOCK' | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/file-picker/api.mdx b/packages/paste-website/src/pages/components/file-picker/api.mdx new file mode 100644 index 0000000000..ab84a76f64 --- /dev/null +++ b/packages/paste-website/src/pages/components/file-picker/api.mdx @@ -0,0 +1,67 @@ +export const meta = { + title: 'File Picker - API', + package: '@twilio-paste/file-picker', + description: 'A File Picker is a form element used to upload files.', + slug: '/components/file-picker/api', +}; + +import Changelog from '@twilio-paste/file-picker/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/file-picker/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('File Picker'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/file-picker'); + 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/file-picker', + storybookUrl: '/?path=/story/components-file-picker--default', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/file-picker - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {FilePicker, FilePickerButton} from '@twilio-paste/core/file-picker'; +import {Label} from '@twilio-paste/core/label'; +import {HelpText} from '@twilio-paste/core/help-text'; + +const MyFilePicker = () => ( + <> + + + Choose a file + + Upload an image + +); +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/file-picker/changelog.mdx b/packages/paste-website/src/pages/components/file-picker/changelog.mdx new file mode 100644 index 0000000000..e41f5ca04e --- /dev/null +++ b/packages/paste-website/src/pages/components/file-picker/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'File Picker - Changelog', + package: '@twilio-paste/file-picker', + description: 'A File Picker is a form element used to upload files.', + slug: '/components/file-picker/changelog', +}; + +import Changelog from '@twilio-paste/file-picker/CHANGELOG.md'; +import packageJson from '@twilio-paste/file-picker/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('File Picker'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/file-picker', + storybookUrl: '/?path=/story/components-file-picker--default', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/file-picker/index.mdx b/packages/paste-website/src/pages/components/file-picker/index.mdx index 0ba725a561..6abe511469 100644 --- a/packages/paste-website/src/pages/components/file-picker/index.mdx +++ b/packages/paste-website/src/pages/components/file-picker/index.mdx @@ -20,12 +20,11 @@ import { requiredFilePicker, i18nFilePicker, } from '../../../component-examples/FilePickerExamples.ts'; -import Changelog from '@twilio-paste/file-picker/CHANGELOG.md'; import packageJson from '@twilio-paste/file-picker/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(); @@ -37,25 +36,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/file-picker', + storybookUrl: '/?path=/story/components-file-picker--default', + }, }, }; }; - - ---- - - - - - - - {defaultFilePicker} @@ -201,64 +191,3 @@ Recommended phrasing for File Picker error copy: This file is not an accepted format. You can upload .png and .jpeg file formats. `} - -## Usage guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/file-picker - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {FilePicker, FilePickerButton} from '@twilio-paste/core/file-picker'; -import {Label} from '@twilio-paste/core/label'; -import {HelpText} from '@twilio-paste/core/help-text'; - -const MyFilePicker = () => ( - <> - - - Choose a file - - Upload an image - -); -``` - -#### FilePickerButton Props - -All the valid attributes for `Button` are supported including the following props: - -| Prop | Type | Description | Default | -| -------- | ---------------------------------------- | ------------------------------------------------------------------------------------------ | ------------------- | -| variant? | ButtonVariants | Button variant used for the FilePickerButton. Recommended variant is 'secondary'. | 'primary' | -| element? | string | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILEPICKER_BUTTON' | -| children | React.ReactNode | The text displayed on the FilePickerButton. Recommended for English is "Choose a file". | null | - -#### FilePicker Props - -| Prop | Type | Description | Default | -| -------------------- | ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | -| accept? | string | Specify the desired file type. Note: file type should still be validated server-side, as this prop is not a complete validation. Read more about the accept prop | null | -| children | React.ReactElement | `` | null | -| disabled? | boolean | Disables the File Picker. | false | -| required? | boolean | Sets the File Picker as required. | false | -| i18nNoSelectionText? | string | The text string displayed when no files are selected. | 'No file uploaded' | -| element? | string | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILEPICKER' | -| onChange? | `(event: React.MouseEvent)` | Function will run when the uploaded file changes | null | -| name? | string | | null | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/file-uploader/api.mdx b/packages/paste-website/src/pages/components/file-uploader/api.mdx new file mode 100644 index 0000000000..95003e0218 --- /dev/null +++ b/packages/paste-website/src/pages/components/file-uploader/api.mdx @@ -0,0 +1,69 @@ +export const meta = { + title: 'File Uploader - API', + package: '@twilio-paste/file-uploader', + description: 'A File Uploader is a form element used to upload multiple files.', + slug: '/components/file-uploader/api', +}; + +import Changelog from '@twilio-paste/file-uploader/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/file-uploader/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('File Uploader'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/file-uploader'); + 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/file-uploader', + storybookUrl: '/?path=/story/components-file-uploader--default', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/file-uploader - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import { + FileUploader, + FileUploaderLabel, + FileUploaderHelpText, + FileUploaderDropzone, + FileUploaderDropzoneText, +} from '@twilio-paste/core/file-uploader'; + +const MyFileUploader = () => ( + + Upload files + Files can be up to 50 MB. + + Browse files or drag them here + + +); +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/file-uploader/changelog.mdx b/packages/paste-website/src/pages/components/file-uploader/changelog.mdx new file mode 100644 index 0000000000..946b61c253 --- /dev/null +++ b/packages/paste-website/src/pages/components/file-uploader/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'File Uploader - Changelog', + package: '@twilio-paste/file-uploader', + description: 'A File Uploader is a form element used to upload multiple files.', + slug: '/components/file-uploader/changelog', +}; + +import Changelog from '@twilio-paste/file-uploader/CHANGELOG.md'; +import packageJson from '@twilio-paste/file-uploader/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('File Uploader'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/file-uploader', + storybookUrl: '/?path=/story/components-file-uploader--default', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/file-uploader/index.mdx b/packages/paste-website/src/pages/components/file-uploader/index.mdx index 8397f2a4d4..a21b61e38f 100644 --- a/packages/paste-website/src/pages/components/file-uploader/index.mdx +++ b/packages/paste-website/src/pages/components/file-uploader/index.mdx @@ -5,7 +5,6 @@ export const meta = { slug: '/components/file-uploader/', }; -import Changelog from '@twilio-paste/file-uploader/CHANGELOG.md'; import { FileUploader, FileUploaderLabel, @@ -33,10 +32,10 @@ import { } from '../../../component-examples/FileUploaderExamples.ts'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import packageJson from '@twilio-paste/file-uploader/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(); @@ -48,26 +47,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/file-uploader', + storybookUrl: '/?path=/story/components-file-uploader--default', + }, }, }; }; - - ---- - - - - - - - - -## Usage guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/file-uploader - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import { - FileUploader, - FileUploaderLabel, - FileUploaderHelpText, - FileUploaderDropzone, - FileUploaderDropzoneText, -} from '@twilio-paste/core/file-uploader'; - -const MyFileUploader = () => ( - - Upload files - Files can be up to 50 MB. - - Browse files or drag them here - - -); -``` - -#### FileUploader props - -Accepts all valid attributes for HTML div elements. - -| Prop | Type | Description | Default | -| --------- | ----------------- | ------------------------------------------------------------------------------------------ | --------------- | -| children? | `React.ReactNode` | The contents of the FileUploader | | -| disabled? | `boolean` | Disables the FileUploader | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER' | -| id? | `string` | The id of the FileUploader. Used to create ids for the elements within the FileUploader. | | -| name | `string` | The name for the input within the FileUploader | | -| required? | `boolean` | If the FileUploader is required. | | - -#### FileUploaderDropzone props - -Accepts all attributes for HTML input elements. - -| Prop | Type | Description | Default | -| ------------------ | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------ | ------------------------ | -| acceptedMimeTypes? | `string[]` | The allowed mime types for the input. It is convereted to a string and passed to the accept attribute. | | -| children? | `React.ReactNode` | The contents of the FileUploaderDropzone | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER_DROPZONE' | -| onDragStart? | `(event: React.DragEvent) => void` | A function that runs on drag leave on the label that wraps the FileUploaderDropzone | | -| onDragEnd? | `(event: React.DragEvent) => void` | A function that runs on drag leave on the label that wraps the FileUploaderDropzone | | -| onDragEnter? | `(event: React.DragEvent) => void` | A function that runs on drag leave on the label that wraps the FileUploaderDropzone | | -| onDragLeave? | `(event: React.DragEvent) => void` | A function that runs on drag leave on the label that wraps the FileUploaderDropzone | | -| onDragOver? | `(event: React.DragEvent) => void` | A function that runs on drag over on the label that wraps the FileUploaderDropzone | | -| onDrop? | `(event: React.DragEvent) => void` | A function that runs on drop on the label that wraps the FileUploaderDropzone | | -| onInputChange? | `(event: React.ChangeEvent) => void` | A function that runs when the input within the Dropzone is changed | | - -#### FileUploaderDropzoneText props - -Accepts all attributes for HTML div elements. - -| Prop | Type | Description | Default | -| --------- | ----------------- | ------------------------------------------------------------------------------------------ | ----------------------------- | -| children? | `React.ReactNode` | The contents of the FileUploaderDropzoneText | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER_DROPZONE_TEXT' | - -#### FileUploaderErrorText props - -Accepts all attributes for HTML div elements. - -| Prop | Type | Description | Default | -| --------- | ----------------- | ------------------------------------------------------------------------------------------ | -------------------------- | -| children? | `React.ReactNode` | The contents of the FileUploaderErrorText | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER_ERROR_TEXT' | - -#### FileUploaderHelpText props - -Accepts all attributes for HTML div elements. - -| Prop | Type | Description | Default | -| --------- | ----------------- | ------------------------------------------------------------------------------------------ | ------------------------- | -| children? | `React.ReactNode` | The contents of the FileUploaderHelpText | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER_HELP_TEXT' | - -#### FileUploaderItem props - -Accepts all valid attributes for HTML li elements. - -| Prop | Type | Description | Default | -| ---------------- | ----------------------------------- | ------------------------------------------------------------------------------------------ | -------------------- | -| children? | `React.ReactNode` | The contents of the FileUploaderItem | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER_ITEM' | -| fileIcon? | `React.ReactNode` | The icon displayed when it is not loading or error variant. | | -| i18nButtonText? | `string` | The hidden text for the dismiss button | 'Remove file' | -| i18nErrorText? | `string` | The hidden text for the error icon | '(error)' | -| i18nLoadingText? | `string` | The hidden text for the loading spinner | '(loading)' | -| variant? | `'default' \| 'loading' \| 'error'` | The variant of FileUploaderItem | 'default' | - -#### FileUploaderItemDescription props - -Accepts all attributes for HTML div elements. - -| Prop | Type | Description | Default | -| --------- | ----------------- | ------------------------------------------------------------------------------------------ | -------------------------------- | -| children? | `React.ReactNode` | The contents of the FileUploaderItemDescription | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER_ITEM_DESCRIPTION' | - -#### FileUploaderItemsList props - -Accepts all attributes for HTML ul elements. - -| Prop | Type | Description | Default | -| --------- | ----------------- | ------------------------------------------------------------------------------------------ | -------------------------- | -| children? | `React.ReactNode` | The contents of the FileUploaderItemsList | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER_ITEMS_LIST' | - -#### FileUploaderItemTitle props - -Accepts all attributes for HTML div elements. - -| Prop | Type | Description | Default | -| --------- | ----------------- | ------------------------------------------------------------------------------------------ | -------------------------- | -| children? | `React.ReactNode` | The contents of the FileUploaderItemTitle | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER_ITEM_TITLE' | - -#### FileUploaderUploaderLabel props - -Accepts all attributes for HTML label elements. - -| Prop | Type | Description | Default | -| --------- | ----------------- | ------------------------------------------------------------------------------------------ | --------------------- | -| children? | `React.ReactNode` | The contents of the FileUploaderUploaderLabel | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FILE_UPLOADER_LABEL' | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/form-pill-group/api.mdx b/packages/paste-website/src/pages/components/form-pill-group/api.mdx new file mode 100644 index 0000000000..1c28eb2c5b --- /dev/null +++ b/packages/paste-website/src/pages/components/form-pill-group/api.mdx @@ -0,0 +1,76 @@ +export const meta = { + title: 'Form Pill Group - API', + package: '@twilio-paste/form-pill-group', + description: + 'A Form Pill Group is an editable set of Pills that represent a collection of selectable or removable objects.', + slug: '/components/form-pill-group/api', +}; + +import Changelog from '@twilio-paste/form-pill-group/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/form-pill-group/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('Form Pill Group'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/form-pill-group'); + 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/form-pill-group', + storybookUrl: '/?path=/story/components-form-pill-group--basic', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/form-pill-group - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {useFormPillState, FormPillGroup, FormPill} from '@twilio-paste/core/form-pill-group'; +import {ProductVideoIcon} from '@twilio-paste/icons/esm/ProductVideoIcon'; +import {ProductVerifyIcon} from '@twilio-paste/icons/esm/ProductVerifyIcon'; + +export const BasicFormPillGroup = () => { + const pillState = useFormPillState(); + + return ( +
+ + Voice + + + Video + + + + Verify + + +
+ ); +}; +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/form-pill-group/changelog.mdx b/packages/paste-website/src/pages/components/form-pill-group/changelog.mdx new file mode 100644 index 0000000000..81b8d49afc --- /dev/null +++ b/packages/paste-website/src/pages/components/form-pill-group/changelog.mdx @@ -0,0 +1,38 @@ +export const meta = { + title: 'Form Pill Group - Changelog', + package: '@twilio-paste/form-pill-group', + description: + 'A Form Pill Group is an editable set of Pills that represent a collection of selectable or removable objects.', + slug: '/components/form-pill-group/changelog', +}; + +import Changelog from '@twilio-paste/form-pill-group/CHANGELOG.md'; +import packageJson from '@twilio-paste/form-pill-group/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('Form Pill Group'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/form-pill-group', + storybookUrl: '/?path=/story/components-form-pill-group--basic', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/form-pill-group/index.mdx b/packages/paste-website/src/pages/components/form-pill-group/index.mdx index 77820cca26..77fe8baf3b 100644 --- a/packages/paste-website/src/pages/components/form-pill-group/index.mdx +++ b/packages/paste-website/src/pages/components/form-pill-group/index.mdx @@ -10,7 +10,6 @@ import {AspectRatio} from '@twilio-paste/aspect-ratio'; import {Avatar} from '@twilio-paste/avatar'; import {Box} from '@twilio-paste/box'; import {FormPill, FormPillGroup, useFormPillState} from '@twilio-paste/form-pill-group'; -import Changelog from '@twilio-paste/form-pill-group/CHANGELOG.md'; import {Paragraph} from '@twilio-paste/paragraph'; import {Text} from '@twilio-paste/text'; import {Truncate} from '@twilio-paste/truncate'; @@ -49,10 +48,10 @@ import { iconExample, } from '../../../component-examples/FormPillGroup'; import packageJson from '@twilio-paste/form-pill-group/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(); @@ -64,26 +63,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/form-pill-group', + storybookUrl: '/?path=/story/components-form-pill-group--basic', + }, }, }; }; - - ---- - - - - - - - {basicExample} @@ -314,152 +303,3 @@ Use a Form Pill Group when you’re editing a collection of data within a form. body="Don't pass FormPillGroup any other component type, and do not wrap FormPill in any other component of DOM element." /> - ---- - -## Usage Guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/form-pill-group - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {useFormPillState, FormPillGroup, FormPill} from '@twilio-paste/core/form-pill-group'; -import {ProductVideoIcon} from '@twilio-paste/icons/esm/ProductVideoIcon'; -import {ProductVerifyIcon} from '@twilio-paste/icons/esm/ProductVerifyIcon'; - -export const BasicFormPillGroup = () => { - const pillState = useFormPillState(); - - return ( -
- - Voice - - - Video - - - - Verify - - -
- ); -}; -``` - -#### Props - -##### FormPillGroup - -**Note:** Most required props are provided by spreading the returned state from `useFormPillState`. - -| Prop | Type | Description | Default | -| ----------------------- | ------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------- | -| `aria-label` | `string` | The visually hidden label of the Form Pill Group | `''` | -| `move` | `(id: string \| null) => void` | Moves focus to a given item ID | | -| `first` | `() => void` | Moves focus to the first item | | -| `last` | `() => void` | Moves focus to the last item | | -| `items` | `Item[]` | Lists all the pill items with their id, DOM ref, disabled state and groupId if any. It is updated when registerItem and unregisterItem are called. | | -| `setCurrentId` | `Dispatch>` | Sets currentId. It only updates the currentId state without moving focus. | | -| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'FORM_PILL_GROUP'` | -| `focusable?` | `boolean` | When an element is disabled, it may still be focusable. It works similarly to readOnly on form elements. In this case, only aria-disabled will be set. | | -| `disabled?` | `boolean` | Same as the HTML attribute | | -| `baseId?` | `string` | ID that will serve as a base for all the items IDs | | -| `currentId?` | `string` | The current focused item id | | -| `groups?` | `Group[]` | Lists all the composite groups with their id and DOM ref. It is updated when registerGroup and unregisterGroup are called. | | -| `i18nKeyboardControls?` | `string` | Visually hidden string that has instructions for how to remove and select pills with a keyboard. | `"Press Delete or Backspace to remove. Press Enter to toggle selection."` | - -##### FormPill - -**Note:** Most required props are provided by spreading the returned state from `useFormPillState`. - -| Prop | Type | Description | Default | -| ----------------- | ----------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- | -------------- | -| `baseId` | `string` | ID that will serve as a base for all the items IDs | | -| `setBaseId` | `Dispatch>` | Sets the baseId | | -| `items` | `Item[]` | Lists all the pill items with their id, DOM ref, disabled state and groupId if any. It is updated when registerItem and unregisterItem are called. | | -| `groups` | `Group[]` | Lists all the composite groups with their id and DOM ref. It is updated when registerGroup and unregisterGroup are called. | | -| `rtl` | `boolean` | Determines how next and previous functions will behave | | -| `loop` | `boolean \| "horizontal" \| "vertical"` | Determines how the keyboard navigation loops through the items | `'horizontal'` | -| `registerItem` | `(item: Item) => void` | Registers a composite item. | | -| `unregisterItem` | `(item: Item) => void` | Unregisters a composite item. | | -| `registerGroup` | `(group: Group) => void` | Registers a composite group. | | -| `unregisterGroup` | `(group: Group) => void` | Unregisters a composite group. | | -| `move` | `(id: string \| null) => void` | Moves focus to a given item ID | | -| `next` | `() => void` | Moves focus to the next item | | -| `previous` | `() => void` | Moves focus to the previous item | | -| `up` | `() => void` | Moves focus to the item above | | -| `down` | `() => void` | Moves focus to the item below | | -| `first` | `() => void` | Moves focus to the first item | | -| `last` | `() => void` | Moves focus to the last item | | -| `sort` | `() => void` | Sorts the items based on their position in the DOM | | -| `setRTL` | `Dispatch>` | Sets rtl | | -| `setOrientation` | `Dispatch>` | Sets orientation | | -| `setCurrentId` | `Dispatch>` | Sets currentId. It only updates the currentId state without moving focus. | | -| `setLoop` | `Dispatch>` | Sets loop | | -| `reset` | `() => void` | Resets to the initial state | | -| `variant?` | `"default" \| "error"` | Sets the variant of the pill | `"default"` | -| `selected?` | `boolean` | Set if a pill is in a selected state | | -| `element?` | `string` | Overrides the default element name to apply unique styles with the Customization Provider | `'FORM_PILL'` | -| `disabled?` | `boolean` | Set if a pill is disabled | | -| `onSelect?` | `() => void` | Event handler called when a pill is selected | | -| `onDismiss?` | `() => void` | Event handler called when a pill is dismissed | | -| `onFocus?` | `() => void` | Event handler called when a pill is focused | | -| `onBlur?` | `() => void` | Event handler called when a pill is blurred | | -| `currentId?` | `string` | The current focused item id | | -| `orientation?` | `"horizontal" \| "vertical"` | Defines the orientation of the pill | | -| `i18nErrorLabel?` | `string` | Alternative text for the error icon in the error variant | `"(error)"` | - -##### useFormPillState - -| Prop | Type | Description | Default | -| ------------ | --------- | ------------------------------------------------------ | ------- | -| `baseId?` | `string` | ID that will serve as a base for all the items IDs | | -| `rtl?` | `boolean` | Determines how next and previous functions will behave | | -| `currentId?` | `string` | The current focused item id | | - -### Figma - -#### Usage - -Form Pill Group is available in the Paste Components Figma library. It has 1 base component, Form Pill, with a ⚙️ emoji in its layer name to indicate there are nested configurable properties available. - -In code, when there are more pills than the max width, they will wrap to the next row. To accomplish the same behavior in Figma, please use the `Row count` property to select a number of rows, or place multiple Form Pill Group components under one another. - -Form Pill Group also contains other Paste components as nested components, including [Avatar](/components/avatar) and [Icon](/components/icon). - -#### Properties - -Here is a properties table for Form Pill Group: - -| Property | Variants | Description | Default | -| --------- | ---------- | ----------------------------------------------- | ------- | -| Row count | 1, 2, 3, 4 | Displays a number of rows in a Form Pill Group. | 1 | - -Here is a properties table for its nested component, Form Pill: - -| Property | Variants | Description | Default | -| -------- | ------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -| Variant | `Basic`, `Selectable`, `Dismissible`, `Selectable + Dismissible` | The variant of the Display Pill. | `Basic` | -| State | `Default`, `Hover (Select)`, `Hover (Dismiss)`, `Focus`, `Disabled` | The state of the Display Pill. | `Default` | -| Selected | "Yes", "No" | Toggles to show the selected state of a Form Pill. This property is only configurable if `Variant=Selectable` or `Variant=Selectable + Dismissible`. | "No" | -| Error | "Yes", "No" | Toggles to show the error state of a Form Pill. | "No" | -| Prefix | `None`, `Icon`, `Avatar` | Adds a prefix ahead of the Form Pill label. If set to `Avatar`, manage the nested properties of Avatar in the layer marked with a ⚙️ emoji. | `None` | -| Icon | | Swaps the icon within a Form Pill. This property is visible in the Figma side panel if `Prefix=Icon`. | | -| Label | | Sets the label of a Form Pill | "Label" | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/form/api.mdx b/packages/paste-website/src/pages/components/form/api.mdx new file mode 100644 index 0000000000..a234d1a0af --- /dev/null +++ b/packages/paste-website/src/pages/components/form/api.mdx @@ -0,0 +1,78 @@ +export const meta = { + title: 'Form - API', + package: '@twilio-paste/form', + description: 'A Form groups related form elements that allow users to input information or configure options.', + slug: '/components/form/api', +}; + +import Changelog from '@twilio-paste/form/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/form/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('Form'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/form'); + 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/form', + storybookUrl: '/?path=/story/components-form--default', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/form - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import { + Form, + FormSection, + FormSectionHeading, + FormControl +} from '@twilio-paste/core/form; +import {Input} from '@twilio-paste/core/input; +import {Label} from '@twilio-paste/core/label; + +const SampleForm = () => ( +
+ + + Personal information + + + + + + + + + + + +); +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/form/changelog.mdx b/packages/paste-website/src/pages/components/form/changelog.mdx new file mode 100644 index 0000000000..c00fa6cb26 --- /dev/null +++ b/packages/paste-website/src/pages/components/form/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Form - Changelog', + package: '@twilio-paste/form', + description: 'A Form groups related form elements that allow users to input information or configure options.', + slug: '/components/form/changelog', +}; + +import Changelog from '@twilio-paste/form/CHANGELOG.md'; +import packageJson from '@twilio-paste/form/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('Form'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/form', + storybookUrl: '/?path=/story/components-form--default', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/form/index.mdx b/packages/paste-website/src/pages/components/form/index.mdx index babba369f0..7766af1741 100644 --- a/packages/paste-website/src/pages/components/form/index.mdx +++ b/packages/paste-website/src/pages/components/form/index.mdx @@ -43,12 +43,11 @@ import { errorExample, maxWidthForm, } from '../../../component-examples/FormExamples'; -import Changelog from '@twilio-paste/form/CHANGELOG.md'; import packageJson from '@twilio-paste/form/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(); @@ -60,26 +59,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/form', + storybookUrl: '/?path=/story/components-form--default', + }, }, }; }; - - ---- - - - - - - - ( - - - - Personal information - - - - - - - - - - - -); -``` - -#### Form props - -Accepts all valid attributes for HTML form elements. - -| Prop | Type | Description | Default | -| --------- | ---------------------------------- | ------------------------------------------------------------------------------------------ | ------- | -| children | `React.ReactNode` | The contents of the Form | | -| maxWidth? | `ResponsiveValue` | The maximum width of the Form. | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FORM' | - -#### FormActions props - -Accepts all valid attributes for HTML div elements. - -| Prop | Type | Description | Default | -| -------- | ----------------- | ------------------------------------------------------------------------------------------ | -------------- | -| children | `React.ReactNode` | The contents of the Form Control | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FORM_CONTROL' | - -#### FormControl props - -Accepts all valid attributes for HTML div elements. - -| Prop | Type | Description | Default | -| -------- | ----------------- | ------------------------------------------------------------------------------------------ | -------------- | -| children | `React.ReactNode` | The contents of the Form Actions | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FORM_ACTIONS' | - -#### FormControlTwoColumn props - -Accepts all valid attributes for HTML div elements. - -| Prop | Type | Description | Default | -| -------- | ----------------- | ------------------------------------------------------------------------------------------ | ------------------------- | -| children | `React.ReactNode` | The contents of the Form Control Two Column | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FORM_CONTROL_TWO_COLUMN' | - -#### FormSection props - -Accepts all valid attributes for HTML fieldset elements. - -| Prop | Type | Description | Default | -| -------- | ----------------- | ------------------------------------------------------------------------------------------ | -------------- | -| children | `React.ReactNode` | The contents of the Form Section | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FORM_SECTION' | - -#### FormSectionDescription props - -Accepts all valid attributes for HTML div elements. - -| Prop | Type | Description | Default | -| -------- | ----------------- | ------------------------------------------------------------------------------------------ | -------------------------- | -| children | `React.ReactNode` | The contents of the Form Section Heading | | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FORM_SECTION_DESCRIPTION' | - -#### FormSectionHeading props - -Accepts all valid attributes for HTML heading elements. - -| Prop | Type | Description | Default | -| -------- | ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------ | ---------------------- | -| children | `React.ReactNode` | The contents of the Form Section Description | | -| variant? | `'heading10', 'heading20', 'heading30', 'heading40', 'heading50', 'heading60'` | The heading variant to render | 'heading40' | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider. | 'FORM_SECTION_HEADING' | - -### Figma - -#### Usage - -Form is available in the Paste Components Figma library. It has 3 base components: Form element group, Form section, and Form section header, with a ⚙️emoji in its layer name to indicate there are nested configurable properties available. - -In code, it’s easy to add more than one form element to a form when you need it. To accomplish this in Figma, you can show and hide the number of form elements you need in the form component itself. - -To customize the layout of a single form element in Figma, expand the Form until you reach a “⚙️Form element group” layer within a “⚙️Form section.” From there, you can select the type of form element component you need (e.g. an “Input” or a “Select”) and change the number of columns displayed within a form element group (up to 2 columns). If you need a custom form element, you can create your own local component and use Figma’s component swapping feature to utilize your custom component. - -The Form component allows you to show or hide Form actions. - -To customize the number of sections, expand the Form until you reach the “Form content↓” layer. From there, you can show/hide the “⚙️ Form section” layers until you reach the desired number of sections for your form. - -To customize a Form section’s header, expand the “Form content↓” layer until you reach a “⚙️ Form section header”, which includes a Heading and Paragraph to add more detail to your Form’s sections. - -#### Properties - -Here is a properties table for Form: - -| Property | Variants | Description | Default | -| -------- | ----------- | --------------------------------------- | ------- | -| Actions | "Yes", "No" | Allows for displaying up to two buttons | Yes | - -Here is a properties table for Form’s nested component, Form section: - -| Property | Variants | Description | Default | -| -------- | ----------- | -------------------------------------------------------- | ------- | -| Header | "Yes", "No" | Allows for displaying a section heading and description. | Yes | - -Here is a properties table for Form’s nested component, Form element group: - -| Property | Variants | Description | Default | -| -------- | -------- | -------------------------------------------------------------------------- | ------- | -| Columns | 1,2 | Allows for up a 2-column horizontal layout of the form element components. | 1 | - ## References Further reading on Forms best practices. @@ -679,11 +526,3 @@ Further reading on Forms best practices. 3. Andrew Coyle, [Design Better Forms](https://uxdesign.cc/design-better-forms-96fadca0f49c) (UX Collective, 2016) 4. Adam Silver, [Form Design: From zero to hero all in one blog post](https://adamsilver.io/blog/form-design-from-zero-to-hero-all-in-one-blog-post/) (2019) 5. Luke Wroblewski, [Web Form Design: Filling in the blanks](https://www.lukew.com/resources/web_form_design.asp) (2008) - - - - - - - - diff --git a/packages/paste-website/src/pages/components/heading/api.mdx b/packages/paste-website/src/pages/components/heading/api.mdx new file mode 100644 index 0000000000..96a071a47a --- /dev/null +++ b/packages/paste-website/src/pages/components/heading/api.mdx @@ -0,0 +1,60 @@ +export const meta = { + title: 'Heading - API', + package: '@twilio-paste/heading', + description: + 'Headings are words or phrases that are intended to introduce sections of content. Headings are often used for page headings, as well as content subsections within the page.', + slug: '/components/heading/api', +}; + +import Changelog from '@twilio-paste/heading/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/heading/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('Heading'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/heading'); + 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/heading', + storybookUrl: '/?path=/story/components-heading--heading-10', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/heading - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {Heading} from '@twilio-paste/core/heading'; + +const Component = () => ( + + Heading Two + +); +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/heading/changelog.mdx b/packages/paste-website/src/pages/components/heading/changelog.mdx new file mode 100644 index 0000000000..9feab11405 --- /dev/null +++ b/packages/paste-website/src/pages/components/heading/changelog.mdx @@ -0,0 +1,38 @@ +export const meta = { + title: 'Heading - Changelog', + package: '@twilio-paste/heading', + description: + 'Headings are words or phrases that are intended to introduce sections of content. Headings are often used for page headings, as well as content subsections within the page.', + slug: '/components/heading/changelog', +}; + +import Changelog from '@twilio-paste/heading/CHANGELOG.md'; +import packageJson from '@twilio-paste/heading/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('Heading'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/heading', + storybookUrl: '/?path=/story/components-heading--heading-10', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/heading/index.mdx b/packages/paste-website/src/pages/components/heading/index.mdx index 8abf2a42cf..e0ceb72a00 100644 --- a/packages/paste-website/src/pages/components/heading/index.mdx +++ b/packages/paste-website/src/pages/components/heading/index.mdx @@ -12,12 +12,11 @@ import {Heading} from '@twilio-paste/heading'; import {Paragraph} from '@twilio-paste/paragraph'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import {SidebarCategoryRoutes} from '../../../constants'; -import Changelog from '@twilio-paste/heading/CHANGELOG.md'; import packageJson from '@twilio-paste/heading/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(); @@ -29,25 +28,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/heading', + storybookUrl: '/?path=/story/components-heading--heading-10', + }, }, }; }; - - ---- - - - - - - - {` Black lives matter @@ -230,46 +220,3 @@ Headings should be used for page headings or content subsections. Headings are b - ---- - -## Usage Guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/heading - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {Heading} from '@twilio-paste/core/heading'; - -const Component = () => ( - - Heading Two - -); -``` - -#### Props - -| Prop | Type | Description | Default | -| ------------- | ------------------------------ | ----------------------------------------------------------------------------------------- | --------- | -| as | `asTags` | 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'div', 'label', 'span' | null | -| id? | `string` | | null | -| marginBottom? | `oneOf(['space0'])` | Currently we only allow `space0` to remove bottom margin | null | -| variant | `headingVariants` | 'heading10', 'heading20', 'heading30', 'heading40', 'heading50', 'heading60' | null | -| display? | `CSS display property options` | 'block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid', and more | "block" | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'HEADING' | - - - - - - - - diff --git a/packages/paste-website/src/pages/components/help-text/api.mdx b/packages/paste-website/src/pages/components/help-text/api.mdx new file mode 100644 index 0000000000..8c0d67dc46 --- /dev/null +++ b/packages/paste-website/src/pages/components/help-text/api.mdx @@ -0,0 +1,65 @@ +export const meta = { + title: 'Help Text - API', + package: '@twilio-paste/help-text', + description: 'Help Text that can be paired with a Paste form component.', + slug: '/components/help-text/api', +}; + +import Changelog from '@twilio-paste/help-text/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/help-text/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('Help Text'); + const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/help-text'); + 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/help-text', + storybookUrl: '/?path=/story/components-help-text--default', + }, + }, + }; +}; + +## Installation + +```bash +yarn add @twilio-paste/help-text - or - yarn add @twilio-paste/core +``` + +## Usage + +```jsx +import {Input} from '@twilio-paste/core/input'; +import {Label} from '@twilio-paste/core/label'; +import {HelpText} from '@twilio-paste/core/help-text'; + +const Component = () => ( + <> + + {}} aria-describedby="foo_text" /> + Enter some text. + +); +``` + +## Props + + diff --git a/packages/paste-website/src/pages/components/help-text/changelog.mdx b/packages/paste-website/src/pages/components/help-text/changelog.mdx new file mode 100644 index 0000000000..db88808f59 --- /dev/null +++ b/packages/paste-website/src/pages/components/help-text/changelog.mdx @@ -0,0 +1,37 @@ +export const meta = { + title: 'Help Text - Changelog', + package: '@twilio-paste/help-text', + description: 'Help Text that can be paired with a Paste form component.', + slug: '/components/help-text/changelog', +}; + +import Changelog from '@twilio-paste/help-text/CHANGELOG.md'; +import packageJson from '@twilio-paste/help-text/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('Help Text'); + return { + props: { + data: { + ...packageJson, + ...feature, + }, + navigationData, + mdxHeadings, + pageHeaderData: { + categoryRoute: SidebarCategoryRoutes.COMPONENTS, + githubUrl: 'https://github.com/twilio-labs/paste/tree/main/packages/paste-core/components/help-text', + storybookUrl: '/?path=/story/components-help-text--default', + }, + }, + }; +}; + + diff --git a/packages/paste-website/src/pages/components/help-text/index.mdx b/packages/paste-website/src/pages/components/help-text/index.mdx index 6b05776d58..589c50169f 100644 --- a/packages/paste-website/src/pages/components/help-text/index.mdx +++ b/packages/paste-website/src/pages/components/help-text/index.mdx @@ -21,12 +21,11 @@ import {Callout, CalloutText} from '@twilio-paste/callout'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import {Codeblock} from '../../../components/codeblock'; import {SidebarCategoryRoutes} from '../../../constants'; -import Changelog from '@twilio-paste/help-text/CHANGELOG.md'; import packageJson from '@twilio-paste/help-text/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(); @@ -38,25 +37,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/help-text', + storybookUrl: '/?path=/story/components-help-text--default', + }, }, }; }; - - ---- - - - - - - - {`<> @@ -327,97 +317,3 @@ Use Help Text when users might need additional information to fill out a form fi - -## Anatomy - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyDefault tokenModifiable?
Help Text$color-text-weak, $font-size-30No
Inline error - - Text: $color-text-error, $font-size-30 - Icon: IconError, $color-text-error, $icon-size-20 - - No
Spacing - - - Help Text: - - Top: $space-30 - - - - No
- - ---- - -## Usage guide - -### API - -#### Installation - -```bash -yarn add @twilio-paste/help-text - or - yarn add @twilio-paste/core -``` - -#### Usage - -```jsx -import {Input} from '@twilio-paste/core/input'; -import {Label} from '@twilio-paste/core/label'; -import {HelpText} from '@twilio-paste/core/help-text'; - -const Component = () => ( - <> - - {}} aria-describedby="foo_text" /> - Enter some text. - -); -``` - -#### HelpText props - -All the [valid HTML attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes) (role, aria-\*, type, and so on) are supported including the following props: - -| Prop | Type | Description | Default | -| ---------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- | ----------- | -| children? | `ReactNode` | | null | -| marginTop? | 'space0' | Sets the top margin on the `div` element. | 'space30' | -| variant? | 'default', 'error', 'error_inverse', 'inverse', 'warning', 'success' | Changes the render state. | 'default' | -| element? | `string` | Overrides the default element name to apply unique styles with the Customization Provider | 'HELP_TEXT' | - - - - - - - -