diff --git a/packages/paste-website/src/component-examples/page-templates/ObjectDetailsExamples.ts b/packages/paste-website/src/component-examples/page-templates/ObjectDetailsExamples.ts new file mode 100644 index 0000000000..cf3082fb16 --- /dev/null +++ b/packages/paste-website/src/component-examples/page-templates/ObjectDetailsExamples.ts @@ -0,0 +1,293 @@ +export const FullObjectDetailsExample = ` + + + + + + Breadcrumb + Breadcrumb + + + + + Object details + + + + + + + + + + + Nav item + + Nav item + Nav item + + + + + Heading + + + + + + Term + Details + + + Term + Details + + + Term + Details + + + Term + Details + + + Term + Details + + + + + + + Term + Details + + + Term + Details + + + Term + Details + + + Term + Details + + + Term + Details + + + + + + + + + Heading + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ex risus. Aenean at ante id lectus + faucibus hendrerit a fringilla lorem. Pellentesque faucibus sit amet dolor vitae lacinia. + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
ContentContentContent
ContentContentContent
ContentContentContent
+ + + +`.trim(); + +export const DefaultObjectDetailsExample = ` + + + + + + Voice + Calls + + + + + Call details + + + + + + + + + + + Overview + + Insights summary + + + + + Properties + + + + + + Message SID + MG48n1d86b68737525hfd84w91dah0w3088n + + + Message service + + + Not available + + + + + Created at + 13:42:57 PDT 2020-09-29 + + + From + (606) 609-4293 + + + To + (323) 754-2093 + + + + + + + Direction + Incoming + + + API endpoint + + + Not available + + + + + Message segments + 1 + + + Encoding + + + Not available + + + + + + + Term + + + + $0.0075 + + + + + + + Term + + + + Want to know what a day in the life of a Robotics Engineer is like? Join UAT tomorrow at 4PM MST + to learn about our innovative degrees. Registration is free but space is limited. Sign up here: + + + + + + + + + Errors and warnings + + + + + + + + + + + + + + + + +
CodeTypeDescription
+ + + + 11200 HTTP retrieval failure + + + WarningTwilio’s servers were unable to fetch a non-error response from the designated URL.
+ + + +`.trim(); diff --git a/packages/paste-website/src/component-examples/page-templates/ObjectsListExamples.ts b/packages/paste-website/src/component-examples/page-templates/ObjectsListExamples.ts new file mode 100644 index 0000000000..ef66f0d8b1 --- /dev/null +++ b/packages/paste-website/src/component-examples/page-templates/ObjectsListExamples.ts @@ -0,0 +1,296 @@ +export const FullObjectsListExample = ` + + + + + + Breadcrumb + Breadcrumb + Breadcrumb + + + + Objects + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ex risus. Aenean at ante id lectus + faucibus hendrerit a fringilla lorem. Pellentesque faucibus sit amet dolor vitae lacinia. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + placeholder="Search" + aria-label={useUID()} + /> + + + + + + + + + + + + + + + + label + + + + + Header + + + + + + Header + + + + + + Header + + + + + + Header + + + + + + + + + + label + + + + Anchor + + Content + Content + Content + + + + + label + + + + Anchor + + Content + Content + Content + + + + + label + + + + Anchor + + Content + Content + Content + + + + +`.trim(); + +export const DefaultObjectsListExample = ` + + + + + + Phone numbers + Manage + + + + Verified caller IDs + + + Verify a number that you own to use it as a caller ID or as the “To” number for outbound calls and messages. + The phone numbers you buy from Twilio or port to Twilio can always be used as caller IDs. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + label + + + + + Phone number + + + + + + Friendly name + + + + + + Actions + + + + + + + + + + label + + + +1 512 809 4343 + (512) 809-4343 + + + + + + + + label + + + +86 591 1093 1093 + +86 591 1093 1093 + + + + + + + + label + + + +1 213 343 1345 + (213) 343-1345 + + + + + + + +`.trim(); diff --git a/packages/paste-website/src/component-examples/page-templates/SettingsExamples.ts b/packages/paste-website/src/component-examples/page-templates/SettingsExamples.ts new file mode 100644 index 0000000000..896fdbd21b --- /dev/null +++ b/packages/paste-website/src/component-examples/page-templates/SettingsExamples.ts @@ -0,0 +1,173 @@ +export const FullSettingsExample = ` + + + + + Breadcrumb + Breadcrumb + Breadcrumb + + + + + Billing settings + + + + + + Invoicing + + Service address + + Tax information + +
+ + + Service address + + + This information will be used for taxation purposes. For US customers, this is your service address. For + international customers, this is your permanent place of establishment (e.g. head office). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ +`.trim(); + +export const SettingsOverviewExample = ` + + + + + + Breadcrumb + Breadcrumb + Breadcrumb + + + + + Welcome, Dena + + + View and manage your user settings, security, and preferences here. + + + + + + + + + + + Personal information + + + + Email address + dena.doe@owl.com + + + Full name + Dena Doe + + + User SID + 123454353SDASDFFSDS + + + + + + + + + Two-factor authentication (2FA) + + + + Phone number + +1 (123) 123-1234 + + + Default 2FA method + Text message (SMS) + + + Alternative 2FA method + Authenticator app + + + + + + + + + + + + + + Password + + + + + + + + + +`.trim(); diff --git a/packages/paste-website/src/pages/page-templates/object-details/index.mdx b/packages/paste-website/src/pages/page-templates/object-details/index.mdx index 9e89412a02..d76ae90dbd 100644 --- a/packages/paste-website/src/pages/page-templates/object-details/index.mdx +++ b/packages/paste-website/src/pages/page-templates/object-details/index.mdx @@ -6,6 +6,7 @@ export const meta = { }; import {ObjectDetailsIngredients} from '../../../components/ingredients/ObjectDetailsIngredients'; +import {FullObjectDetailsExample, DefaultObjectDetailsExample} from '../../../component-examples/page-templates/ObjectDetailsExamples'; import {SidebarCategoryRoutes} from '../../../constants'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; @@ -43,6 +44,12 @@ export const getStaticProps = async () => { + + ## About Object details Object details give customers a primarily read-only view of the properties of an object, such as a message log or sent email. @@ -69,6 +76,12 @@ To structure a page: ## How to use this template + + ### Page header At the top of the page, add a page heading using the format “[Object name] details” for a generic object, or the name of the object if it’s unique or set by the customer. For example, “Call details” or “test audience.” diff --git a/packages/paste-website/src/pages/page-templates/objects-list/index.mdx b/packages/paste-website/src/pages/page-templates/objects-list/index.mdx index 4261b39329..7006933610 100644 --- a/packages/paste-website/src/pages/page-templates/objects-list/index.mdx +++ b/packages/paste-website/src/pages/page-templates/objects-list/index.mdx @@ -6,6 +6,7 @@ export const meta = { }; import {ObjectsListIngredients} from '../../../components/ingredients/ObjectsListIngredients'; +import {FullObjectsListExample, DefaultObjectsListExample} from '../../../component-examples/page-templates/ObjectsListExamples'; import {SidebarCategoryRoutes} from '../../../constants'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; @@ -44,6 +45,12 @@ export const getStaticProps = async () => { + + ## About Objects list An Objects list shows a list of unique items or records (objects), such as logs or contacts. The page can include [search and filtering](/patterns/filter-group) to help customers find an item they’re looking for, and bulk actions like [export](/patterns/data-export) or [delete](/patterns/delete). @@ -63,6 +70,12 @@ If the customer is primarily editing information, use the [Settings](/page-templ ## How to use this template + + ### Page header At the top of the page, use the type of object as the page heading. Use the primary action in the header only for adding a new object. Optionally, use text under the heading to explain the primary use of the page. diff --git a/packages/paste-website/src/pages/page-templates/settings/index.mdx b/packages/paste-website/src/pages/page-templates/settings/index.mdx index a31b256ea4..08f0369519 100644 --- a/packages/paste-website/src/pages/page-templates/settings/index.mdx +++ b/packages/paste-website/src/pages/page-templates/settings/index.mdx @@ -7,6 +7,7 @@ export const meta = { import {SettingsIngredients} from '../../../components/ingredients/SettingsIngredients'; import {SidebarCategoryRoutes} from '../../../constants'; import DefaultLayout from '../../../layouts/DefaultLayout'; +import {FullSettingsExample, SettingsOverviewExample} from '../../../component-examples/page-templates/SettingsExamples'; import {getFeature, getNavigationData} from '../../../utils/api'; export default DefaultLayout; @@ -43,6 +44,12 @@ export const getStaticProps = async () => { + + ## About Settings Settings pages let customers edit information and update simple settings. @@ -77,6 +84,12 @@ If there are too many settings to fit on a single page, split related settings i Position the page content in the center with a max width of `$size-90`. + + ### Using Switches If all settings on a page have only “on/off” or “yes/no” states, you can use Switches. diff --git a/packages/paste-website/stories/PageTemplates.stories.tsx b/packages/paste-website/stories/PageTemplates.stories.tsx new file mode 100644 index 0000000000..598bcd76f2 --- /dev/null +++ b/packages/paste-website/stories/PageTemplates.stories.tsx @@ -0,0 +1,864 @@ +import { Anchor } from "@twilio-paste/anchor"; +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable react/jsx-max-depth */ +import { Box } from "@twilio-paste/box"; +import { Breadcrumb, BreadcrumbItem } from "@twilio-paste/breadcrumb"; +import { Button } from "@twilio-paste/button"; +import { ButtonGroup } from "@twilio-paste/button-group"; +import { Card } from "@twilio-paste/card"; +import { Checkbox } from "@twilio-paste/checkbox"; +import { + DataGrid, + DataGridBody, + DataGridCell, + DataGridHead, + DataGridHeader, + DataGridRow, +} from "@twilio-paste/data-grid"; +import { + DescriptionList, + DescriptionListDetails, + DescriptionListSet, + DescriptionListTerm, +} from "@twilio-paste/description-list"; +import { Form, FormActions, FormControl } from "@twilio-paste/form"; +import { Column, Grid } from "@twilio-paste/grid"; +import { Heading } from "@twilio-paste/heading"; +import { DownloadIcon } from "@twilio-paste/icons/esm/DownloadIcon"; +import { EditIcon } from "@twilio-paste/icons/esm/EditIcon"; +import { FilterIcon } from "@twilio-paste/icons/esm/FilterIcon"; +import { InformationIcon } from "@twilio-paste/icons/esm/InformationIcon"; +import { LockIcon } from "@twilio-paste/icons/esm/LockIcon"; +import { MoreIcon } from "@twilio-paste/icons/esm/MoreIcon"; +import { SearchIcon } from "@twilio-paste/icons/esm/SearchIcon"; +import { UnsortedIcon } from "@twilio-paste/icons/esm/UnsortedIcon"; +import { WarningIcon } from "@twilio-paste/icons/esm/WarningIcon"; +import { InPageNavigation, InPageNavigationItem } from "@twilio-paste/in-page-navigation"; +import { Input } from "@twilio-paste/input"; +import { Label } from "@twilio-paste/label"; +import { Paragraph } from "@twilio-paste/paragraph"; +import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only"; +import { Select } from "@twilio-paste/select"; +import { Separator } from "@twilio-paste/separator"; +import { TBody, THead, Table, Td, Th, Tr } from "@twilio-paste/table"; +import { Text } from "@twilio-paste/text"; +import { useUID } from "@twilio-paste/uid-library"; +import * as React from "react"; + +export default { + title: "Website/PageTemplateExamples", +}; + +export const FullObjectDetailsExample = (): JSX.Element => { + return ( + + + + + + Breadcrumb + Breadcrumb + + + + + Object details + + + + + + + + + + + Nav item + + Nav item + Nav item + + + + + Heading + + + + + + Term + Details + + + Term + Details + + + Term + Details + + + Term + Details + + + Term + Details + + + + + + + Term + Details + + + Term + Details + + + Term + Details + + + Term + Details + + + Term + Details + + + + + + + + + Heading + + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ex risus. Aenean at ante id lectus + faucibus hendrerit a fringilla lorem. Pellentesque faucibus sit amet dolor vitae lacinia. + + + + + + + + + + + + + + + + + + + + + + + + + + + +
HeaderHeaderHeader
ContentContentContent
ContentContentContent
ContentContentContent
+ + + + + ); +}; +FullObjectDetailsExample.parameters = { + padding: false, +}; + +export const DefaultObjectDetailsExample = (): JSX.Element => { + return ( + + + + + + Voice + Calls + + + + + Call details + + + + + + + + + + + Overview + + Insights summary + + + + + Properties + + + + + + Message SID + MG48n1d86b68737525hfd84w91dah0w3088n + + + Message service + + + Not available + + + + + Created at + 13:42:57 PDT 2020-09-29 + + + From + (606) 609-4293 + + + To + (323) 754-2093 + + + + + + + Direction + Incoming + + + API endpoint + + + Not available + + + + + Message segments + 1 + + + Encoding + + + Not available + + + + + + + Term + + + + $0.0075 + + + + + + + Term + + + + Want to know what a day in the life of a Robotics Engineer is like? Join UAT tomorrow at 4PM MST + to learn about our innovative degrees. Registration is free but space is limited. Sign up here: + + + + + + + + + Errors and warnings + + + + + + + + + + + + + + + + +
CodeTypeDescription
+ + + + 11200 HTTP retrieval failure + + + WarningTwilio’s servers were unable to fetch a non-error response from the designated URL.
+ + + + + ); +}; +DefaultObjectDetailsExample.parameters = { + padding: false, +}; + +export const FullObjectsListExample = (): JSX.Element => { + const criteria1 = useUID(); + const criteria2 = useUID(); + const criteria3 = useUID(); + return ( + + + + + + Breadcrumb + Breadcrumb + Breadcrumb + + + + Objects + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi non ex risus. Aenean at ante id lectus + faucibus hendrerit a fringilla lorem. Pellentesque faucibus sit amet dolor vitae lacinia. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + } + placeholder="Search" + aria-label={useUID()} + /> + + + + + + + + + + + + + + + + label + + + + + Header + + + + + + Header + + + + + + Header + + + + + + Header + + + + + + + + + + label + + + + Anchor + + Content + Content + Content + + + + + label + + + + Anchor + + Content + Content + Content + + + + + label + + + + Anchor + + Content + Content + Content + + + + + + ); +}; + +FullObjectsListExample.parameters = { + padding: false, +}; + +export const DefaultObjectsListExample = (): JSX.Element => { + const input1 = useUID(); + const input2 = useUID(); + return ( + + + + + + Phone numbers + Manage + + + + Verified caller IDs + + + Verify a number that you own to use it as a caller ID or as the “To” number for outbound calls and messages. + The phone numbers you buy from Twilio or port to Twilio can always be used as caller IDs. + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + label + + + + + Phone number + + + + + + Friendly name + + + + + + Actions + + + + + + + + + + label + + + +1 512 809 4343 + (512) 809-4343 + + + + + + + + label + + + +86 591 1093 1093 + +86 591 1093 1093 + + + + + + + + label + + + +1 213 343 1345 + (213) 343-1345 + + + + + + + + + ); +}; + +DefaultObjectsListExample.parameters = { + padding: false, +}; + +export const FullSettingsExample = (): JSX.Element => { + const input1 = useUID(); + const input2 = useUID(); + const input3 = useUID(); + const input4 = useUID(); + const input5 = useUID(); + const input6 = useUID(); + return ( + + + + + Breadcrumb + Breadcrumb + Breadcrumb + + + + + Billing settings + + + + + + Invoicing + + Service address + + Tax information + +
+ + + Service address + + + This information will be used for taxation purposes. For US customers, this is your service address. For + international customers, this is your permanent place of establishment (e.g. head office). + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + ); +}; +FullSettingsExample.parameters = { + padding: false, +}; + +export const SettingsOverviewExample = (): JSX.Element => { + return ( + + + + + + Breadcrumb + Breadcrumb + Breadcrumb + + + + + Welcome, Dena + + + View and manage your user settings, security, and preferences here. + + + + + + + + + + + Personal information + + + + Email address + dena.doe@owl.com + + + Full name + Dena Doe + + + User SID + 123454353SDASDFFSDS + + + + + + + + + Two-factor authentication (2FA) + + + + Phone number + +1 (123) 123-1234 + + + Default 2FA method + Text message (SMS) + + + Alternative 2FA method + Authenticator app + + + + + + + + + + + + + + Password + + + + + + + + + + + ); +}; +SettingsOverviewExample.parameters = { + padding: false, +};