From 6d71d19ffebb7aa351634117d1e41567d601fa3e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Wed, 16 Oct 2024 12:14:57 -0400 Subject: [PATCH 1/5] chore: update status pattern --- .../StatusPatternExamples.tsx | 133 ++++++- .../src/pages/patterns/status/index.mdx | 327 ++++++++---------- 2 files changed, 265 insertions(+), 195 deletions(-) diff --git a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx b/packages/paste-website/src/component-examples/StatusPatternExamples.tsx index 63739a74c1..125a7e730e 100644 --- a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx +++ b/packages/paste-website/src/component-examples/StatusPatternExamples.tsx @@ -259,7 +259,7 @@ export const tableWithPlainTextExample = ` Bewitched Series - Progress halted + Progress halted @@ -277,6 +277,81 @@ export const tableWithPlainTextExample = ` `.trim(); +export const connectivityStatusTableExample = ` +<> + + Reboots + + + + + + + + + + + + + + + + + + + + + + +
AgentsQueues
+ + + + Adaline Baxter + + + Available | 12:43 + + + + Queue name
+ + + + Jane Cooper + + + On break | 02:23 + + + + Queue name
+ + + + Dan Reynolds + + + Available | 10:21 + + + + Queue name
+ +`.trim(); + export const linkInStatusExamples = ` @@ -399,7 +474,7 @@ export const otherCommonPlacements = ` `.trim(); export const connectivityStatusExamples = ` - + Offline - + + Success + Success + Success + Success + Success + Success + Success + Success + Success + Success + Success + Success + Success + Success `.trim(); + +export const compactPageHeaderExample = ` +const PageHeaderExample = () => { + return ( + + + + + Parker Smith + + + + + + + + Customer since June 11, 2009 + + Online + + + + + + + Customer details + + Customer history + + + + + ); +}; +render( + +) +`.trim(); diff --git a/packages/paste-website/src/pages/patterns/status/index.mdx b/packages/paste-website/src/pages/patterns/status/index.mdx index 9cd24a68fa..f566009e05 100644 --- a/packages/paste-website/src/pages/patterns/status/index.mdx +++ b/packages/paste-website/src/pages/patterns/status/index.mdx @@ -1,31 +1,47 @@ export const meta = { title: 'Status', - description: 'The status pattern informs the user of the dynamic state or condition of an object.', + description: 'The Object status pattern informs the user of the dynamic state or condition of an object.', slug: '/patterns/status/', }; import {Alert} from '@twilio-paste/alert'; import {Anchor} from '@twilio-paste/anchor'; import {Avatar} from '@twilio-paste/avatar'; +import {Badge} from '@twilio-paste/badge'; import {Box} from '@twilio-paste/box'; import {Button} from '@twilio-paste/button'; +import {ButtonGroup} from '@twilio-paste/button-group'; import {StatusBadge} from '@twilio-paste/status'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {DoDont, Do, Dont} from '../../../components/DoDont'; import {Card} from '@twilio-paste/card'; +import {DetailText} from '@twilio-paste/detail-text'; import {Disclosure, DisclosureHeading, DisclosureContent} from '@twilio-paste/disclosure'; import {Flex} from '@twilio-paste/flex'; import {Input} from '@twilio-paste/input'; +import {InPageNavigation, InPageNavigationItem} from '@twilio-paste/in-page-navigation'; import {Label} from '@twilio-paste/label'; import {HelpText} from '@twilio-paste/help-text'; import {Grid, Column} from '@twilio-paste/grid'; import {Heading} from '@twilio-paste/heading'; import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object'; import {Paragraph} from '@twilio-paste/paragraph'; +import {PageHeader, PageHeaderPrefix, PageHeaderMeta, PageHeaderActions, PageHeaderHeading, PageHeaderDetails, PageHeaderInPageNavigation} from '@twilio-paste/page-header'; import {Stack} from '@twilio-paste/stack'; +import { + StatusMenu, + StatusMenuBadge, + StatusMenuItem, + StatusMenuItemChild, + useStatusMenuState, + StatusMenuItemRadio, + StatusMenuItemCheckbox, +} from '@twilio-paste/status'; import {Table, THead, TBody, Tr, Td, Th} from '@twilio-paste/table'; import {Text} from '@twilio-paste/text'; import {Tooltip} from '@twilio-paste/tooltip'; +import {UserIcon} from '@twilio-paste/icons/esm/UserIcon'; +import {MoreIcon} from '@twilio-paste/icons/esm/MoreIcon'; import {ProcessDisabledIcon} from '@twilio-paste/icons/esm/ProcessDisabledIcon'; import {ProcessDraftIcon} from '@twilio-paste/icons/esm/ProcessDraftIcon'; import {ProcessErrorIcon} from '@twilio-paste/icons/esm/ProcessErrorIcon'; @@ -59,7 +75,15 @@ import { otherCommonPlacements, BannerExample, connectivityStatusExamples, + connectivityStatusTableExample, + compactPageHeaderExample } from '../../../component-examples/StatusPatternExamples.tsx'; +import { + processStatusMenuExample, + availabilityStatusMenuExample, + ConnectivityObject, + ProcessObject, +} from '../../../component-examples/StatusMenuExamples'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getFeature, getNavigationData} from '../../../utils/api'; @@ -81,7 +105,6 @@ export const getStaticProps = async () => { - @@ -96,30 +119,35 @@ export const getStaticProps = async () => { - Icon + Status Badge - Text + Status Menu - - Box - + + Component composition + + + Create a composition with Box,{' '} + Icon, and Text. + ```jsx -// import all components for Status patterns +// import all components for Object status patterns -import {​ Text } from "@twilio-paste/core/text"; +import {​ StatusBadge } from "@twilio-paste/core/status-badge"; +import {​ StatusMenu } from "@twilio-paste/core/status-menu"; import { Box } from "@twilio-paste/core/box"; import { ProcessDisabledIcon } from "@twilio-paste/icons/esm/ProcessDisabledIcon"; import { ProcessDraftIcon } from "@twilio-paste/icons/esm/ProcessDraftIcon"; @@ -135,14 +163,13 @@ import { ProcessWarningIcon } from "@twilio-paste/icons/esm/ProcessWarningIcon"; ### General usage -A Status is used to communicate the dynamic state of an object to a user. -Use them to help the user identify something that requires their attention and often, their action. -When a status is used to indicate to the user that they need to take action, be sure to provide -clear controls to take that action (e.g. a “Try again” button). +An Object status is used to communicate the dynamic state of an object. Use it to help a user identify something that requires their attention and often, their action. When a status is used to indicate to the user that they need to take action, be sure to provide clear controls to take that action (check out the example in [Process status](#process-status)). -Statuses are: -- Always related to an object. For example, a SIM can have a status, but a step in a wizard flow cannot. + +Object statuses are: + +- Always related to an object. For example, this pattern applies to SIMs and regulatory bundles, but not to a step in a wizard flow. Instead, use the [Error state pattern](https://paste.twilio.design/patterns/error-state) or [Progress Steps component](https://paste.twilio.design/components/progress-steps). - Not used for static attributes. For example, “SMS-capable” is not a status on a phone number. - Different from [notification and feedback messaging](/patterns/notifications-and-feedback), which is in direct response to a user action. - Different from [alert messaging](/components/alert), which is from the system. @@ -154,7 +181,7 @@ Non-text status indicators (such as icons or status dots) should be paired with possible and should always be given a `title` to give context and meaning to the icon or shape. Check out the [icon usage guidelines](/components/icon/usage-guidelines) for more detailed accessibility information. -## Variations +## Status types ### Process status @@ -191,6 +218,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit Icon Icon name Token + Status Badge variant Usage @@ -201,6 +229,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit ProcessErrorIcon $color-text-icon-error + ProcessError Indicates an error or that something went wrong. @@ -209,6 +238,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit ProcessWarningIcon $color-text-icon-warning + ProcessWarning Indicates a condition requiring corrective action. @@ -217,6 +247,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit ProcessSuccessIcon $color-text-icon-success + ProcessSuccess Indicates that something is stable, active, or successfully completed. @@ -225,6 +256,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit ProcessNeutralIcon $color-text-icon-neutral + ProcessNeutral Indicates a neutral / informative state. Can be used to fill any gaps that the more specific statuses don’t cover. @@ -236,6 +268,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit ProcessInProgressIcon $color-text-icon-neutral + ProcessInProgress Indicates that something is in progress, in review, or scheduled. @@ -244,6 +277,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit ProcessDisabledIcon $color-text-icon + ProcessInDisabled Indicates that something is inactive, disabled, or paused. @@ -252,22 +286,48 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit ProcessDraftIcon $color-text-icon + ProcessInDisabled Indicates that something is a draft, unused, or not started. +
-### Connectivity status +### Plain text status -Connectivity statuses are used to show if a user, object, or system is online or offline. Connectivity statuses are composed using a connectivity Icon and Text. +Not all object statuses need icons or shapes. In fact, giving every status an icon or a shape can make it difficult for a user to find and focus on the most critical information -**Connectivity statuses should almost always be paired with accompanying text**, though Available and Offline can be used without text in cases where space is constrained, since there is a shape difference. +If some statuses—such as successes or failures—are critical, use plain text for the other statuses that a user doesn’t need to identify as quickly. + + + {tableWithPlainTextExample} + + +### Connectivity status + +Connectivity statuses are used to show if a user, object, or system is online or offline. **Connectivity statuses should always be paired with text.** +To determine how to show a connectivity status: +- If additional information is needed to explain the status, use Icon, Text, and [Anchor](/components/anchor) +- If it’s in a Table and no additional information is needed, use a [borderless Status Badge](/components/status-badge#borderless-badges). +- Otherwise, use the default Status Badge. + + + {connectivityStatusTableExample} + + + + {compactPageHeaderExample} + + #### Connectivity icon and token pairings @@ -350,187 +446,38 @@ Connectivity statuses are used to show if a user, object, or system is online or -### Plain text status - -Not all statuses need icons or shapes. In fact, giving every status an icon or a shape can make it difficult for a user to find and focus on the most critical information. -If some statuses—such as successes or failures—are highly critical, consider using plain text for the other statuses that a user may not need to identify as quickly. - -## Composition - -### Icon and text placement - -The status icon or dot should most often be placed as a prefix, before the status text, though some page layouts may benefit from placing the icon as a suffix. -A suffix icon is often beneficial when a status is right-aligned within a Card or List. +#### Swapping statuses with Status Menu -For process statuses, the icon should generally be the same size as the line-height of the status text (e.g. use `$size-icon-20` for a status icon paired with text at `$line-height-20`) -to ensure that the icon and the text are vertically aligned. +Use a [Status Menu](/components/status-menu) to let users swap between statuses. - {prefixSuffixTooltipExamples} - - -**It is strongly recommended that status icons be paired with text**, especially for statuses that are important for a user to understand. - -### Status badges - -Use the [`StatusBadge`](/components/status-badge) component to compose a status icon with a text label, usually when a status is shown outside of a Table. Common placements are near avatars (particularly for connectivity statuses), in cards, and in lists. - - - {` - - - Success - - - Error - - - Warning - - - Neutral - - - In-progress - - - Disabled - - - Draft - - - - - Available - - - Unavailable - - - Busy - - - Neutral - - - Offline - - - -`.trim()} + {processStatusMenuExample} -### Positioning in a table - -Statuses are most often used in tables across our products. -Placement of the status in the table should depend on the importance of the status to the given user flow and should be tested with users. - - - {tableExample} - - -### Pairing process statuses with plain text statuses - -Using plain text statuses for non-critical information and process statuses for critical information -is a great way to highlight information that is most important for a user to know. - - - {tableWithPlainTextExample} - - -### Providing additional information on a status - -It can often be beneficial to provide additional information on a status. The best way to do this is to provide description text directly below the status. -This makes the information easily discoverable and is the simplest way for screen reader users to access it. - -### Adding a link to a status - -Linking out to additional information is a great way to add more context to a status and guide the user towards their next steps. - -[Anchors](/components/anchor) can be placed directly on status text or within help text below the status. -[Link-style buttons](/components/button/#link-style-button) can be used when clicking the text performs an in-page action, such as opening a modal. - - - {linkInStatusExamples} - - -
-
- -### Other common placements - -Statuses are not always placed in tables. Other common placements are near avatars (particularly for connectivity statuses), in cards, and in lists. - - {otherCommonPlacements} + {availabilityStatusMenuExample} ## Dos and Don'ts @@ -643,10 +590,6 @@ Statuses are not always placed in tables. Other common placements are near avata -## Starter kits - -- [Figma](https://www.figma.com/file/S4z0Kqjb9AYosnkRQldLte/Paste-Patterns?node-id=531%3A8) - ## Related Discussions - [Adding text labels to status icons](https://github.com/twilio-labs/paste/discussions/1523) From 0643cb25257e0ebeb7986b939633f47b72cb3f8d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Thu, 17 Oct 2024 12:34:43 -0400 Subject: [PATCH 2/5] chore: feedback from pr --- .../StatusPatternExamples.tsx | 298 +++++++++++------- .../src/pages/patterns/status/index.mdx | 90 ++++-- 2 files changed, 252 insertions(+), 136 deletions(-) diff --git a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx b/packages/paste-website/src/component-examples/StatusPatternExamples.tsx index 125a7e730e..43c92d8eae 100644 --- a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx +++ b/packages/paste-website/src/component-examples/StatusPatternExamples.tsx @@ -7,14 +7,109 @@ import { ProcessNeutralIcon } from "@twilio-paste/icons/esm/ProcessNeutralIcon"; import { ProcessSuccessIcon } from "@twilio-paste/icons/esm/ProcessSuccessIcon"; import { ProcessWarningIcon } from "@twilio-paste/icons/esm/ProcessWarningIcon"; -export const BannerExample = ` - - - Success - +export const BannerExample = ` +const ObjectStatusPatternComponents = () => { + const [process, setProcess] = React.useState(ProcessObject.Success); + const menu = useStatusMenuState(); + const onClick = (status) => { + setProcess(ProcessObject[status]); + menu.hide(); + }; + return ( + + + + Success + + Success + Available + + + {process.children} + + + onClick('Success')} + variant="default" + > + {ProcessObject.Success.children} + + onClick('Neutral')} + variant="default" + > + {ProcessObject.Neutral.children} + + onClick('Warning')} + variant="default" + > + {ProcessObject.Warning.children} + + onClick('Error')} + variant="default" + > + {ProcessObject.Error.children} + + onClick('InProgress')} + variant="default" + > + {ProcessObject.InProgress.children} + + onClick('Disabled')} + variant="default" + > + {ProcessObject.Disabled.children} + + onClick('Draft')} + variant="default" + > + {ProcessObject.Draft.children} + + + + + ); +}; + +render( + +) `.trim(); export const ProcessError = (): JSX.Element => { @@ -70,56 +165,76 @@ export const ConnectivityOffline = (): JSX.Element => { }; export const processStatusExamples = ` - - - - Error - - - - Warning - - - - Success - - - - Neutral - - - - In-progress - - - - Disabled - - - - Draft - + + + + + Error + + + + Warning + + + + Success + + + + Neutral + + + + In-progress + + + + Disabled + + + + Draft + + + + Success + Success + Success + Success + Success + Success + Success + + + Success + Success + Success + Success + Success + Success + Success + `.trim(); @@ -166,17 +281,18 @@ export const tableExample = ` @@ -232,7 +348,7 @@ export const tableExample = ` @@ -430,46 +546,6 @@ export const otherCommonPlacements = ` Information about your business - - - Account Security - - Connected - - - - Autopilot - - Connected - - - - Carrier Network - - Intermittent - - - `.trim(); diff --git a/packages/paste-website/src/pages/patterns/status/index.mdx b/packages/paste-website/src/pages/patterns/status/index.mdx index f566009e05..8d51e53254 100644 --- a/packages/paste-website/src/pages/patterns/status/index.mdx +++ b/packages/paste-website/src/pages/patterns/status/index.mdx @@ -111,7 +111,9 @@ export const getStaticProps = async () => { -{BannerExample} + + {BannerExample} + ## Ingredients @@ -146,9 +148,10 @@ export const getStaticProps = async () => { ```jsx // import all components for Object status patterns +import { Box } from "@twilio-paste/core/box"; +import {​ Text } from "@twilio-paste/core/text"; import {​ StatusBadge } from "@twilio-paste/core/status-badge"; import {​ StatusMenu } from "@twilio-paste/core/status-menu"; -import { Box } from "@twilio-paste/core/box"; import { ProcessDisabledIcon } from "@twilio-paste/icons/esm/ProcessDisabledIcon"; import { ProcessDraftIcon } from "@twilio-paste/icons/esm/ProcessDraftIcon"; import { ProcessErrorIcon } from "@twilio-paste/icons/esm/ProcessErrorIcon"; @@ -165,11 +168,9 @@ import { ProcessWarningIcon } from "@twilio-paste/icons/esm/ProcessWarningIcon"; An Object status is used to communicate the dynamic state of an object. Use it to help a user identify something that requires their attention and often, their action. When a status is used to indicate to the user that they need to take action, be sure to provide clear controls to take that action (check out the example in [Process status](#process-status)). - - Object statuses are: -- Always related to an object. For example, this pattern applies to SIMs and regulatory bundles, but not to a step in a wizard flow. Instead, use the [Error state pattern](https://paste.twilio.design/patterns/error-state) or [Progress Steps component](https://paste.twilio.design/components/progress-steps). +- Always related to an object. For example, this pattern applies to SIMs and regulatory bundles, but not to a step in a wizard flow. Instead, use the [Error state pattern](/patterns/error-state) or [Progress Steps component](/components/progress-steps). - Not used for static attributes. For example, “SMS-capable” is not a status on a phone number. - Different from [notification and feedback messaging](/patterns/notifications-and-feedback), which is in direct response to a user action. - Different from [alert messaging](/components/alert), which is from the system. @@ -197,6 +198,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit Box, Text, Stack, + StatusBadge, ProcessDisabledIcon, ProcessDraftIcon, ProcessErrorIcon, @@ -210,6 +212,52 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit {processStatusExamples} +To determine how to show a process status: +- If additional information is needed about the status, use Icon, Text, and [Anchor](/components/anchor) (optional). +- If it’s in a Table and no additional information is needed, use a [borderless Status Badge](/components/status-badge#borderless-badges). +- Otherwise, use the default [Status Badge](/components/status-badge). +Placement of the status in a Table should depend on the importance of the status to the given user flow and should be tested with users. +For statuses that are not as critical to a user’s workflow, use [plain text statuses](#plain-text-status). + + + {tableExample} + + + + {otherCommonPlacements} + + #### Icon and token pairings
- - - - Successfully exported - Tuesday, January 2, 2021 - - + + + + Pre-registration needed + + + Fill out the registration form here + + Contacts who did not click @@ -223,7 +339,7 @@ export const tableExample = ` WE902990c21gjioGasd North America - Active + Active 2020-10-15
WE928471c21gjioGasd North America - Ready + Ready 2020-10-15
@@ -277,7 +325,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit - + @@ -286,7 +334,7 @@ used to 3 or 4 of the most important statuses. For statuses that are not as crit - + @@ -340,7 +388,7 @@ Connectivity statuses are used to show if a user, object, or system is online or To determine how to show a connectivity status: -- If additional information is needed to explain the status, use Icon, Text, and [Anchor](/components/anchor) +- If additional information is needed to explain the status, use Icon, Text, and [Anchor](/components/anchor). - If it’s in a Table and no additional information is needed, use a [borderless Status Badge](/components/status-badge#borderless-badges). - Otherwise, use the default Status Badge. @@ -383,6 +431,7 @@ To determine how to show a connectivity status: + @@ -393,6 +442,7 @@ To determine how to show a connectivity status: + @@ -401,6 +451,7 @@ To determine how to show a connectivity status: + @@ -409,6 +460,7 @@ To determine how to show a connectivity status: + @@ -417,6 +469,7 @@ To determine how to show a connectivity status: + @@ -425,28 +478,15 @@ To determine how to show a connectivity status: +
ProcessDisabledIcon $color-text-iconProcessInDisabledProcessDisabled Indicates that something is inactive, disabled, or paused.
ProcessDraftIcon $color-text-iconProcessInDisabledProcessDraft Indicates that something is a draft, unused, or not started.
Icon Icon name TokenStatus Badge variant Usage
ConnectivityAvailableIcon $color-text-icon-availableConnectivityAvailable Indicates that a person or entity is available or online.
ConnectivityBusyIcon $color-text-icon-busyConnectivityBusy Indicates that a person or entity is busy or away.
ConnectivityUnavailableIcon $color-text-icon-unavailableConnectivityUnavailable Indicates that a person or entity is unavailable or at capacity.
ConnectivityNeutralIcon $color-text-icon-neutralConnectivityNeutral Indicates that a person or entity is neutral.
ConnectivityOfflineIcon $color-text-icon-offlineConnectivityOffline Indicates that a person or entity is offline.
- - Connectivity statuses in Flex - - Connectivity statuses are used heavily throughout Flex, where the circle indicators should retain the same color - across the product on any background color (including the dark topmast). - - - Since icons must have high enough contrast with their background, Flex uses Box with a background color here instead - of using an icon. This gives more flexibility to the number of backgrounds a connectivity status can be placed on. - - - In general, Connectivity statuses should use the icons and tokens documented in this pattern, but if you have a use - case similar to Flex, you can follow their approach. - - - -#### Swapping statuses with Status Menu +
+ +### Swapping statuses with Status Menu Use a [Status Menu](/components/status-menu) to let users swap between statuses. From c73881219b6af28e50d096e3c8c8f4bf4353e05f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Fri, 18 Oct 2024 11:48:23 -0400 Subject: [PATCH 3/5] chore: more feedback --- .../paste-website/src/pages/patterns/status/index.mdx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/packages/paste-website/src/pages/patterns/status/index.mdx b/packages/paste-website/src/pages/patterns/status/index.mdx index 8d51e53254..aa4023855c 100644 --- a/packages/paste-website/src/pages/patterns/status/index.mdx +++ b/packages/paste-website/src/pages/patterns/status/index.mdx @@ -186,12 +186,7 @@ Check out the [icon usage guidelines](/components/icon/usage-guidelines) for mor ### Process status -Process statuses indicate an object’s progress through a certain set of stages. There are generally 3 or more stages in a given process, -which may be considered “good”, “bad”, or “neutral”. Process statuses are composed of a status Icon and Text. - -**Process icons should be paired with text whenever possible.** When using process icons, try to limit the number of icons -used to 3 or 4 of the most important statuses. For statuses that are not as critical to a user’s workflow, consider -[plain text statuses](#plain-text-status). +Process statuses indicate an object’s progress through a set of stages. **Process statuses should always be paired with text.** Date: Fri, 18 Oct 2024 15:25:10 -0400 Subject: [PATCH 4/5] chore: more feedback again --- ...es.tsx => ObjectStatusPatternExamples.tsx} | 150 ++++++++++-------- .../src/pages/patterns/status/index.mdx | 2 +- 2 files changed, 87 insertions(+), 65 deletions(-) rename packages/paste-website/src/component-examples/{StatusPatternExamples.tsx => ObjectStatusPatternExamples.tsx} (85%) diff --git a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx b/packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx similarity index 85% rename from packages/paste-website/src/component-examples/StatusPatternExamples.tsx rename to packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx index 43c92d8eae..12a3c80a5c 100644 --- a/packages/paste-website/src/component-examples/StatusPatternExamples.tsx +++ b/packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx @@ -200,7 +200,7 @@ export const processStatusExamples = ` color="colorTextIconNeutral" decorative={false} title="In-progress" /> - In-progress + In progress Success - Success - Success - Success - Success - Success - Success + Error + Warning + Neutral + In progress + Disabled + Draft Success - Success - Success - Success - Success - Success - Success + Error + Warning + Neutral + In progress + Disabled + Draft `.trim(); @@ -550,61 +550,83 @@ export const otherCommonPlacements = ` `.trim(); export const connectivityStatusExamples = ` - - - - Available - - - - Busy - - - + + + + Available + + + + Busy + + + + Unavailable + + + - Unavailable + Neutral - - - Neutral - - - - Offline + + + Offline + + + + + Available + + + Unavailable + + + Busy + + + Neutral + + + Offline + + + + + Available + + + Unavailable + + + Busy + + + Neutral + + + Offline + - Success - Success - Success - Success - Success - Success - Success - Success - Success - Success - Success - Success - Success - Success `.trim(); diff --git a/packages/paste-website/src/pages/patterns/status/index.mdx b/packages/paste-website/src/pages/patterns/status/index.mdx index aa4023855c..9e0ae1898d 100644 --- a/packages/paste-website/src/pages/patterns/status/index.mdx +++ b/packages/paste-website/src/pages/patterns/status/index.mdx @@ -77,7 +77,7 @@ import { connectivityStatusExamples, connectivityStatusTableExample, compactPageHeaderExample -} from '../../../component-examples/StatusPatternExamples.tsx'; +} from '../../../component-examples/ObjectStatusPatternExamples.tsx'; import { processStatusMenuExample, availabilityStatusMenuExample, From bde80fd99c96db1af341dcafa80654ecb7b58dc2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Tue, 22 Oct 2024 11:42:53 -0400 Subject: [PATCH 5/5] chore: another round of feedback and name change --- .../ObjectStatusPatternExamples.tsx | 16 ++++++++-------- .../patterns/{status => object-status}/index.mdx | 6 +++--- 2 files changed, 11 insertions(+), 11 deletions(-) rename packages/paste-website/src/pages/patterns/{status => object-status}/index.mdx (99%) diff --git a/packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx b/packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx index 12a3c80a5c..7a96d494c0 100644 --- a/packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx +++ b/packages/paste-website/src/component-examples/ObjectStatusPatternExamples.tsx @@ -167,6 +167,13 @@ export const ConnectivityOffline = (): JSX.Element => { export const processStatusExamples = ` + + + Success + Warning - - - Success - - Reboots + Agent queues diff --git a/packages/paste-website/src/pages/patterns/status/index.mdx b/packages/paste-website/src/pages/patterns/object-status/index.mdx similarity index 99% rename from packages/paste-website/src/pages/patterns/status/index.mdx rename to packages/paste-website/src/pages/patterns/object-status/index.mdx index 9e0ae1898d..a44719c607 100644 --- a/packages/paste-website/src/pages/patterns/status/index.mdx +++ b/packages/paste-website/src/pages/patterns/object-status/index.mdx @@ -1,7 +1,7 @@ export const meta = { - title: 'Status', + title: 'Object status', description: 'The Object status pattern informs the user of the dynamic state or condition of an object.', - slug: '/patterns/status/', + slug: '/patterns/object-status/', }; import {Alert} from '@twilio-paste/alert'; @@ -91,7 +91,7 @@ export default DefaultLayout; export const getStaticProps = async () => { const navigationData = await getNavigationData(); - const feature = await getFeature('Status'); + const feature = await getFeature('Object status'); return { props: { data: {