diff --git a/.changeset/few-needles-drop.md b/.changeset/few-needles-drop.md new file mode 100644 index 0000000000..8e86c6467e --- /dev/null +++ b/.changeset/few-needles-drop.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/page-header": minor +"@twilio-paste/core": minor +--- + +[Page Header] Create new PageHeaderSeparator component as part of the Page Header package diff --git a/.changeset/hip-humans-ring.md b/.changeset/hip-humans-ring.md new file mode 100644 index 0000000000..735c96dd14 --- /dev/null +++ b/.changeset/hip-humans-ring.md @@ -0,0 +1,5 @@ +--- +"@twilio-paste/codemods": patch +--- + +[codemods] add new export to page-header package: PageHeaderSeparator diff --git a/.changeset/late-mirrors-rule.md b/.changeset/late-mirrors-rule.md new file mode 100644 index 0000000000..3e58eb73b1 --- /dev/null +++ b/.changeset/late-mirrors-rule.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/input": patch +"@twilio-paste/core": patch +--- + +[Input] Fix rendering logic of decrement arrow on number input diff --git a/packages/paste-codemods/tools/.cache/mappings.json b/packages/paste-codemods/tools/.cache/mappings.json index 638143f952..0183b7e4fa 100644 --- a/packages/paste-codemods/tools/.cache/mappings.json +++ b/packages/paste-codemods/tools/.cache/mappings.json @@ -175,6 +175,7 @@ "PageHeaderMeta": "@twilio-paste/core/page-header", "PageHeaderParagraph": "@twilio-paste/core/page-header", "PageHeaderPrefix": "@twilio-paste/core/page-header", + "PageHeaderSeparator": "@twilio-paste/core/page-header", "PageHeaderSetting": "@twilio-paste/core/page-header", "Pagination": "@twilio-paste/core/pagination", "PaginationArrow": "@twilio-paste/core/pagination", diff --git a/packages/paste-core/components/input/src/Input.tsx b/packages/paste-core/components/input/src/Input.tsx index a635bb2745..c8638b73e4 100644 --- a/packages/paste-core/components/input/src/Input.tsx +++ b/packages/paste-core/components/input/src/Input.tsx @@ -245,7 +245,7 @@ const Input = React.forwardRef( const [showDecrement, setShowDecrement] = React.useState(true); // used for number inputs to be able to track uncontrolled number inputs value being changed by a user and it not being tracked by an applications - const [internalValue, setInternalValue] = React.useState(props.defaultValue ? props.defaultValue : "0"); + const [internalValue, setInternalValue] = React.useState(value ?? props.defaultValue ?? "0"); React.useEffect(() => { if (type !== "number") return; diff --git a/packages/paste-core/components/input/stories/input.stories.tsx b/packages/paste-core/components/input/stories/input.stories.tsx index 9bff54d6ba..57b6e2f10c 100644 --- a/packages/paste-core/components/input/stories/input.stories.tsx +++ b/packages/paste-core/components/input/stories/input.stories.tsx @@ -715,8 +715,8 @@ DefaultNumberInput.storyName = "Number Input - Controlled"; export const TestNumberInput = (): React.ReactNode => { const uid = useUID(); - const [value, setValue] = React.useState("0"); - const [minValue, setMinValue] = React.useState("-10"); + const [value, setValue] = React.useState("5"); + const [minValue, setMinValue] = React.useState("0"); const [maxValue, setMaxValue] = React.useState("10"); const [stepValue, setStepValue] = React.useState("1"); return ( diff --git a/packages/paste-core/components/page-header/package.json b/packages/paste-core/components/page-header/package.json index 6543982ee5..5e225d29ef 100644 --- a/packages/paste-core/components/page-header/package.json +++ b/packages/paste-core/components/page-header/package.json @@ -3,7 +3,7 @@ "version": "0.0.0", "category": "layout", "status": "production", - "description": "Page header is a layout component that wraps all top level components on a page.", + "description": "Page Header is a layout component that wraps all top-level components on a page.", "author": "Twilio Inc.", "license": "MIT", "main:dev": "src/index.tsx", diff --git a/packages/paste-core/components/page-header/src/PageHeader.tsx b/packages/paste-core/components/page-header/src/PageHeader.tsx index 5161ae1ed2..d3e50063c2 100644 --- a/packages/paste-core/components/page-header/src/PageHeader.tsx +++ b/packages/paste-core/components/page-header/src/PageHeader.tsx @@ -33,7 +33,7 @@ const PageHeader = React.forwardRef( element={element} display="grid" gridTemplateRows="auto auto auto" - gridTemplateAreas='"setting" "details" "in_page_navigation"' + gridTemplateAreas='"setting" "details" "content_barrier"' > {children} diff --git a/packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx b/packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx index 9d539a2c05..11abae97cb 100644 --- a/packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx +++ b/packages/paste-core/components/page-header/src/PageHeaderInPageNavigation.tsx @@ -17,7 +17,7 @@ export interface PageHeaderInPageNavigationProps extends HTMLPasteProps<"div"> { const PageHeaderInPageNavigation = React.forwardRef( ({ element = "PAGE_HEADER_IN_PAGE_NAVIGATION", children, ...props }, ref) => { return ( - + {children} ); diff --git a/packages/paste-core/components/page-header/src/PageHeaderSeparator.tsx b/packages/paste-core/components/page-header/src/PageHeaderSeparator.tsx new file mode 100644 index 0000000000..dfa4caf699 --- /dev/null +++ b/packages/paste-core/components/page-header/src/PageHeaderSeparator.tsx @@ -0,0 +1,35 @@ +import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; +import type { BoxProps } from "@twilio-paste/box"; +import type { HTMLPasteProps } from "@twilio-paste/types"; +import * as React from "react"; + +export interface PageHeaderSeparatorProps extends HTMLPasteProps<"div"> { + children?: React.ReactNode; + /** + * Overrides the default element name to apply unique styles with the Customization Provider + * @default 'PAGE_HEADER_SEPARATOR' + * @type {BoxProps['element']} + * @memberof PageHeaderSeparatorProps + */ + element?: BoxProps["element"]; +} + +const PageHeaderSeparator = React.forwardRef( + ({ element = "PAGE_HEADER_SEPARATOR", children, ...props }, ref) => { + return ( + + {children} + + ); + }, +); + +PageHeaderSeparator.displayName = "PageHeaderSeparator"; + +export { PageHeaderSeparator }; diff --git a/packages/paste-core/components/page-header/src/index.tsx b/packages/paste-core/components/page-header/src/index.tsx index 9baffc5653..d530c5761b 100644 --- a/packages/paste-core/components/page-header/src/index.tsx +++ b/packages/paste-core/components/page-header/src/index.tsx @@ -18,3 +18,5 @@ export { PageHeaderActions } from "./PageHeaderActions"; export type { PageHeaderActionsProps } from "./PageHeaderActions"; export { PageHeaderInPageNavigation } from "./PageHeaderInPageNavigation"; export type { PageHeaderInPageNavigationProps } from "./PageHeaderInPageNavigation"; +export { PageHeaderSeparator } from "./PageHeaderSeparator"; +export type { PageHeaderSeparatorProps } from "./PageHeaderSeparator"; diff --git a/packages/paste-core/components/page-header/stories/index.stories.tsx b/packages/paste-core/components/page-header/stories/index.stories.tsx index 150d326999..154de60022 100644 --- a/packages/paste-core/components/page-header/stories/index.stories.tsx +++ b/packages/paste-core/components/page-header/stories/index.stories.tsx @@ -18,6 +18,7 @@ import { ProgressStepSeparator, ProgressSteps, } from "@twilio-paste/progress-steps"; +import { Separator } from "@twilio-paste/separator"; import { StatusBadge } from "@twilio-paste/status"; import { useTheme } from "@twilio-paste/theme"; import * as React from "react"; @@ -32,6 +33,7 @@ import { PageHeaderMeta, PageHeaderParagraph, PageHeaderPrefix, + PageHeaderSeparator, PageHeaderSetting, } from "../src"; @@ -84,6 +86,81 @@ export const Default = (): React.ReactElement => { ); }; +export const SeparatorVersusNav = (): React.ReactElement => { + return ( + + + + + + Breadcrumb + Breadcrumb + + + + Wizard title + + + + Page title + + + + + + Badge + + Meta + Meta + + Paragraph text + + + + + + + + + + + Breadcrumb + Breadcrumb + + + + Wizard title + + + + Page title + + + + + + Badge + + Meta + Meta + + Paragraph text + + + + + Label + + Label + Label + + + + + + ); +}; + export const Compact = (): React.ReactElement => { return ( diff --git a/packages/paste-core/components/page-header/type-docs.json b/packages/paste-core/components/page-header/type-docs.json index f61bfd2e90..e8e4229efe 100644 --- a/packages/paste-core/components/page-header/type-docs.json +++ b/packages/paste-core/components/page-header/type-docs.json @@ -15856,5 +15856,1588 @@ "required": false, "externalProp": true } + }, + "PageHeaderSeparator": { + "about": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "accessKey": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "aria-activedescendant": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application." + }, + "aria-atomic": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether assistive technologies will present all, or only parts of, the changed region based on the change notifications defined by the aria-relevant attribute." + }, + "aria-autocomplete": { + "type": "\"list\" | \"none\" | \"inline\" | \"both\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be\npresented if they are made." + }, + "aria-busy": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element is being modified and that assistive technologies MAY want to wait until the modifications are complete before exposing them to the user." + }, + "aria-checked": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"checked\" state of checkboxes, radio buttons, and other widgets." + }, + "aria-colcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of columns in a table, grid, or treegrid." + }, + "aria-colindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's column index or position with respect to the total number of columns within a table, grid, or treegrid." + }, + "aria-colspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of columns spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-controls": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) whose contents or presence are controlled by the current element." + }, + "aria-current": { + "type": "| boolean\n | \"time\"\n | \"true\"\n | \"false\"\n | \"page\"\n | \"step\"\n | \"location\"\n | \"date\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the element that represents the current item within a container or set of related elements." + }, + "aria-describedby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that describes the object." + }, + "aria-details": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides a detailed, extended description for the object." + }, + "aria-disabled": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is perceivable but disabled, so it is not editable or otherwise operable." + }, + "aria-dropeffect": { + "type": "\"link\" | \"none\" | \"copy\" | \"execute\" | \"move\" | \"popup\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what functions can be performed when a dragged object is released on the drop target." + }, + "aria-errormessage": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element that provides an error message for the object." + }, + "aria-expanded": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element, or another grouping element it controls, is currently expanded or collapsed." + }, + "aria-flowto": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the next element (or elements) in an alternate reading order of content which, at the user's discretion,\nallows assistive technology to override the general default of reading in document source order." + }, + "aria-grabbed": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates an element's \"grabbed\" state in a drag-and-drop operation." + }, + "aria-haspopup": { + "type": "| boolean\n | \"dialog\"\n | \"menu\"\n | \"true\"\n | \"false\"\n | \"grid\"\n | \"listbox\"\n | \"tree\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element." + }, + "aria-hidden": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element is exposed to an accessibility API." + }, + "aria-invalid": { + "type": "boolean | \"true\" | \"false\" | \"grammar\" | \"spelling\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the entered value does not conform to the format expected by the application." + }, + "aria-keyshortcuts": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates keyboard shortcuts that an author has implemented to activate or give focus to an element." + }, + "aria-label": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a string value that labels the current element." + }, + "aria-labelledby": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies the element (or elements) that labels the current element." + }, + "aria-level": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the hierarchical level of an element within a structure." + }, + "aria-live": { + "type": "\"off\" | \"assertive\" | \"polite\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that an element will be updated, and describes the types of updates the user agents, assistive technologies, and user can expect from the live region." + }, + "aria-modal": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether an element is modal when displayed." + }, + "aria-multiline": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether a text box accepts multiple lines of input or only a single line." + }, + "aria-multiselectable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the user may select more than one item from the current selectable descendants." + }, + "aria-orientation": { + "type": "\"horizontal\" | \"vertical\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates whether the element's orientation is horizontal, vertical, or unknown/ambiguous." + }, + "aria-owns": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Identifies an element (or elements) in order to define a visual, functional, or contextual parent/child relationship\nbetween DOM elements where the DOM hierarchy cannot be used to represent the relationship." + }, + "aria-placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a short hint (a word or short phrase) intended to aid the user with data entry when the control has no value.\nA hint could be a sample value or a brief description of the expected format." + }, + "aria-posinset": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's number or position in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-pressed": { + "type": "boolean | \"true\" | \"false\" | \"mixed\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"pressed\" state of toggle buttons." + }, + "aria-readonly": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that the element is not editable, but is otherwise operable." + }, + "aria-relevant": { + "type": "| \"text\"\n | \"additions\"\n | \"additions removals\"\n | \"additions text\"\n | \"all\"\n | \"removals\"\n | \"removals additions\"\n | \"removals text\"\n | \"text additions\"\n | \"text removals\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates what notifications the user agent will trigger when the accessibility tree within a live region is modified." + }, + "aria-required": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates that user input is required on the element before a form may be submitted." + }, + "aria-roledescription": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines a human-readable, author-localized description for the role of an element." + }, + "aria-rowcount": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the total number of rows in a table, grid, or treegrid." + }, + "aria-rowindex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines an element's row index or position with respect to the total number of rows within a table, grid, or treegrid." + }, + "aria-rowspan": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of rows spanned by a cell or gridcell within a table, grid, or treegrid." + }, + "aria-selected": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates the current \"selected\" state of various widgets." + }, + "aria-setsize": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the number of items in the current set of listitems or treeitems. Not required if all elements in the set are present in the DOM." + }, + "aria-sort": { + "type": "\"none\" | \"ascending\" | \"descending\" | \"other\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Indicates if items in a table or grid are sorted in ascending or descending order." + }, + "aria-valuemax": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the maximum allowed value for a range widget." + }, + "aria-valuemin": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the minimum allowed value for a range widget." + }, + "aria-valuenow": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the current value for a range widget." + }, + "aria-valuetext": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Defines the human readable text alternative of aria-valuenow for a range widget." + }, + "autoCapitalize": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoCorrect": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "autoSave": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contentEditable": { + "type": "Booleanish | \"inherit\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "contextMenu": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dangerouslySetInnerHTML": { + "type": "{ __html: string }", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "datatype": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultChecked": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "defaultValue": { + "type": "string | number | readonly string[]", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "dir": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "draggable": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "element": { + "type": "string", + "defaultValue": "'PAGE_HEADER_SEPARATOR'", + "required": false, + "externalProp": false, + "description": "Overrides the default element name to apply unique styles with the Customization Provider" + }, + "hidden": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "id": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inlist": { + "type": "any", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "inputMode": { + "type": "| \"text\"\n | \"none\"\n | \"search\"\n | \"tel\"\n | \"url\"\n | \"email\"\n | \"numeric\"\n | \"decimal\"", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Hints at the type of data that might be entered by the user while editing the element or its contents" + }, + "is": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true, + "description": "Specify that a standard HTML element should behave like a defined custom built-in element" + }, + "itemID": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemProp": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemRef": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemScope": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "itemType": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "key": { + "type": "Key", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "lang": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "nonce": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbort": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAbortCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEnd": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationEndCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIteration": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationIterationCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStart": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAnimationStartCapture": { + "type": "AnimationEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onAuxClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBeforeInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlur": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onBlurCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThrough": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCanPlayThroughCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChange": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onChangeCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEnd": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionEndCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStart": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionStartCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdate": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCompositionUpdateCapture": { + "type": "CompositionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenu": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onContextMenuCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopy": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCopyCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCut": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onCutCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClick": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDoubleClickCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrag": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnd": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEndCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnter": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragEnterCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExit": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragExitCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeave": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragLeaveCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOver": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragOverCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStart": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDragStartCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDrop": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDropCapture": { + "type": "DragEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onDurationChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptied": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEmptiedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncrypted": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEncryptedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEnded": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onEndedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onError": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onErrorCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocus": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onFocusCapture": { + "type": "FocusEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onGotPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInput": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInputCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalid": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onInvalidCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDown": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyDownCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPress": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyPressCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUp": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onKeyUpCapture": { + "type": "KeyboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoad": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedData": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedDataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadata": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadedMetadataCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStart": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLoadStartCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onLostPointerCaptureCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDown": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseDownCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseEnter": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseLeave": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMove": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseMoveCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOut": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOutCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOver": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseOverCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUp": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onMouseUpCapture": { + "type": "MouseEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPaste": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPasteCapture": { + "type": "ClipboardEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPause": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPauseCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlay": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlaying": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPlayingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancel": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerCancelCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDown": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerDownCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnter": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerEnterCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeave": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerLeaveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMove": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerMoveCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOut": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOutCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOver": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerOverCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUp": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onPointerUpCapture": { + "type": "PointerEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgress": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onProgressCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onRateChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onReset": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResetCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResize": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onResizeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScroll": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onScrollCapture": { + "type": "UIEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeked": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekedCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeeking": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSeekingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelect": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSelectCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalled": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onStalledCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmit": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSubmitCapture": { + "type": "FormEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspend": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onSuspendCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdate": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTimeUpdateCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancel": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchCancelCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEnd": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchEndCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMove": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchMoveCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStart": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTouchStartCapture": { + "type": "TouchEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEnd": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onTransitionEndCapture": { + "type": "TransitionEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChange": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onVolumeChangeCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaiting": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWaitingCapture": { + "type": "ReactEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheel": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "onWheelCapture": { + "type": "WheelEventHandler", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "placeholder": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "prefix": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "property": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "radioGroup": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "resource": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "results": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "role": { + "type": "AriaRole", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "security": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "slot": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "spellCheck": { + "type": "Booleanish", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressContentEditableWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "suppressHydrationWarning": { + "type": "boolean", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "tabIndex": { + "type": "number", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "title": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "translate": { + "type": "\"yes\" | \"no\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "typeof": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "unselectable": { + "type": "\"on\" | \"off\"", + "defaultValue": null, + "required": false, + "externalProp": true + }, + "vocab": { + "type": "string", + "defaultValue": null, + "required": false, + "externalProp": true + } } } diff --git a/packages/paste-website/src/__tests__/genericHeader.test.tsx b/packages/paste-website/src/__tests__/genericHeader.test.tsx index feb833e34b..e6fee0e293 100644 --- a/packages/paste-website/src/__tests__/genericHeader.test.tsx +++ b/packages/paste-website/src/__tests__/genericHeader.test.tsx @@ -19,7 +19,7 @@ describe("GenericHeader", () => { figmaStatus={null} githubUrl="https://google.com" packageName="@twilio-paste/alert" - packageStatus="alpha" + packageStatus="Alpha" storybookUrl="/?path=/story/components-alert--" version="1.0.0" /> @@ -29,8 +29,8 @@ describe("GenericHeader", () => { it("should render an h1 tag using the name prop as text", () => { render(); - const heading = screen.getByRole("heading", { level: 1 }); - expect(heading.textContent).toEqual("Alert"); + const heading = screen.getAllByRole("heading", { level: 1 }); + expect(heading[0].textContent).toEqual("Alert"); }); it("should render text using the description prop", () => { diff --git a/packages/paste-website/src/components/paste-mdx-provider/index.tsx b/packages/paste-website/src/components/paste-mdx-provider/index.tsx index 15e12980fc..e761a7c1a6 100644 --- a/packages/paste-website/src/components/paste-mdx-provider/index.tsx +++ b/packages/paste-website/src/components/paste-mdx-provider/index.tsx @@ -105,6 +105,8 @@ const MDXPoviderComponents = { ), a: (props: AnchorProps): React.ReactElement => , // eslint-disable-line jsx-a11y/anchor-has-content + // eslint-disable-next-line @next/next/no-img-element + // biome-ignore lint/a11y/useAltText: img: (props: React.ComponentProps<"img">): React.ReactElement => , // eslint-disable-line jsx-a11y/alt-text sup: (props: React.ComponentProps<"sup">): React.ReactElement => , content: (props: HTMLPasteProps<"div">): React.ReactElement => ( diff --git a/packages/paste-website/src/components/shortcodes/generic-header/index.tsx b/packages/paste-website/src/components/shortcodes/generic-header/index.tsx index d88d660c1c..b1349a2310 100644 --- a/packages/paste-website/src/components/shortcodes/generic-header/index.tsx +++ b/packages/paste-website/src/components/shortcodes/generic-header/index.tsx @@ -1,9 +1,15 @@ import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; import { Breadcrumb, BreadcrumbItem } from "@twilio-paste/breadcrumb"; -import { Heading } from "@twilio-paste/heading"; import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon"; -import { Stack } from "@twilio-paste/stack"; +import { + PageHeader, + PageHeaderDetails, + PageHeaderHeading, + PageHeaderMeta, + PageHeaderParagraph, + PageHeaderSetting, +} from "@twilio-paste/page-header"; import { Text } from "@twilio-paste/text"; import { useTheme } from "@twilio-paste/theme"; import Head from "next/head"; @@ -39,11 +45,13 @@ export interface GenericHeaderProps { figmaStatus?: string | null; githubUrl?: string; packageName?: string; - packageStatus?: string | null; + packageStatus?: "Alpha" | "Beta" | "Production" | null; storybookUrl?: string; url?: string; version?: string; shouldShowBreadcrumbs?: boolean; + productSuitability?: [string]; + children?: React.ReactNode; } const GenericHeader: React.FC> = ({ @@ -60,6 +68,8 @@ const GenericHeader: React.FC> = ({ url, version, shouldShowBreadcrumbs = true, + productSuitability, + children, }) => { const theme = useTheme(); @@ -68,7 +78,7 @@ const GenericHeader: React.FC> = ({ : undefined; const openGraphServiceUrl = ogImagePath ? useOpengraphServiceUrl(ogImagePath) : null; - const shouldShowSecondary = version || githubUrl || storybookUrl; + const shouldShowSecondary = version || githubUrl || storybookUrl || productSuitability; const sharedIconStyles = { height: theme.space.space40, width: theme.space.space40, @@ -89,14 +99,14 @@ const GenericHeader: React.FC> = ({ ].includes(categoryRoute); return ( - + {openGraphServiceUrl && shouldHavePreview && ( )} {shouldShowBreadcrumbs && ( - + {isFoundations ? ( {categoryName} @@ -104,33 +114,12 @@ const GenericHeader: React.FC> = ({ {categoryName} )} - + )} - - - - {name} - - - {showPackageStatus && ( - - )} - - {description && ( - - - {description} - - - )} - {shouldShowSecondary && ( - - + + {name} + {shouldShowSecondary && ( + {version && ( Version {version} @@ -157,10 +146,20 @@ const GenericHeader: React.FC> = ({ Storybook )} - - - )} - + {showPackageStatus && ( + + )} + + )} + {description && {description}} + + {children} + ); }; diff --git a/packages/paste-website/src/components/shortcodes/normalized-component-header/index.tsx b/packages/paste-website/src/components/shortcodes/normalized-component-header/index.tsx index 6456a9bab7..1a8e20c622 100644 --- a/packages/paste-website/src/components/shortcodes/normalized-component-header/index.tsx +++ b/packages/paste-website/src/components/shortcodes/normalized-component-header/index.tsx @@ -1,8 +1,14 @@ +import { InPageNavigation, InPageNavigationItem } from "@twilio-paste/in-page-navigation"; +import { PageHeaderInPageNavigation, PageHeaderSeparator } from "@twilio-paste/page-header"; +import { Separator } from "@twilio-paste/separator"; import merge from "deepmerge"; +import Link from "next/link"; +import { useRouter } from "next/router"; import * as React from "react"; import { getNormalizedHeaderData } from "../../../utils/DataUtils"; import type { ApiData } from "../../../utils/DataUtils"; +import { getPackagePath } from "../../../utils/RouteUtils"; import { GenericHeader } from "../generic-header"; import type { GenericHeaderProps } from "../generic-header"; @@ -10,6 +16,14 @@ interface NormalizedComponentHeaderProps extends Partial { data: ApiData; } +const getInPageNavUrlMap = (componentPath: string): Record => { + return { + GUIDELINES: `${componentPath}`, + API: `${componentPath}/api`, + CHANGELOG: `${componentPath}/changelog`, + }; +}; + export const NormalizedComponentHeader: React.FC> = ({ data, ...props @@ -28,8 +42,14 @@ export const NormalizedComponentHeader: React.FC + > + {shoudShowInPageNav ? ( + + + + {/* @ts-expect-error href is required but is passed down by Next */} + + Guidelines + + + + {/* @ts-expect-error href is required but is passed down by Next */} + + API + + + + {/* @ts-expect-error href is required but is passed down by Next */} + + Changelog + + + + + ) : ( + + + + )} + ); }; diff --git a/packages/paste-website/src/components/shortcodes/normalized-pattern-header/index.tsx b/packages/paste-website/src/components/shortcodes/normalized-pattern-header/index.tsx index 1211f347d3..f662142e53 100644 --- a/packages/paste-website/src/components/shortcodes/normalized-pattern-header/index.tsx +++ b/packages/paste-website/src/components/shortcodes/normalized-pattern-header/index.tsx @@ -1,7 +1,5 @@ -import { Badge } from "@twilio-paste/badge"; -import { Box } from "@twilio-paste/box"; -import { Stack } from "@twilio-paste/stack"; -import { Text } from "@twilio-paste/text"; +import { PageHeaderSeparator } from "@twilio-paste/page-header"; +import { Separator } from "@twilio-paste/separator"; import merge from "deepmerge"; import * as React from "react"; @@ -11,29 +9,17 @@ import type { ApiData } from "../../../utils/DataUtils"; import { GenericHeader } from "../generic-header"; import type { GenericHeaderProps } from "../generic-header"; -const PackageValue: React.FC = ({ children }) => { - return ( - - {children} - - ); -}; - -const PackageLabel: React.FC = ({ children }) => { - return ( - - {children} - - ); -}; - interface NormalizedPatternHeaderProps extends GenericHeaderProps { data: ApiData; + shouldShowVersion: boolean; + shouldShowGithubUrl: boolean; } const NormalizedPatternHeader: React.FC> = ({ data, categoryRoute = SidebarCategoryRoutes.PATTERNS, + shouldShowVersion = false, + shouldShowGithubUrl = false, ...props }) => { const normalizedData = getNormalizedHeaderData(data); @@ -45,34 +31,27 @@ const NormalizedPatternHeader: React.FC - - {productSuitability && ( - - Product - - - {productSuitability.map((product: string) => ( - - {product} - - ))} - - - - )} - + + + + + ); }; diff --git a/packages/paste-website/src/components/shortcodes/package-status-legend/index.tsx b/packages/paste-website/src/components/shortcodes/package-status-legend/index.tsx index 68a1c81d62..ef7389a39d 100644 --- a/packages/paste-website/src/components/shortcodes/package-status-legend/index.tsx +++ b/packages/paste-website/src/components/shortcodes/package-status-legend/index.tsx @@ -1,5 +1,4 @@ import type { BadgeProps } from "@twilio-paste/badge"; -import { Box } from "@twilio-paste/box"; import { NewIcon } from "@twilio-paste/icons/esm/NewIcon"; import { Popover, PopoverBadgeButton, PopoverContainer } from "@twilio-paste/popover"; import { StatusBadge } from "@twilio-paste/status"; @@ -10,7 +9,7 @@ import { StatusDescriptions } from "../../../constants"; type BadgeVariants = BadgeProps["variant"]; interface PackageStatusLegendProps { - packageStatus?: string | null; + packageStatus?: "Alpha" | "Beta" | "Production" | null; figmaStatus?: string | null; designCommitteeReview?: string | null; engineerCommitteeReview?: string | null; @@ -61,11 +60,12 @@ const PackageStatusLegend: React.FC + <> {shouldShowStatusBadge && } {shouldShowFigmaNeeded && ( @@ -77,7 +77,7 @@ const PackageStatusLegend: React.FC ) : null} - + ); } diff --git a/packages/paste-website/src/layouts/ComponentPageLayout.tsx b/packages/paste-website/src/layouts/ComponentPageLayout.tsx index 54b9f7f0d1..a444cbd7bc 100644 --- a/packages/paste-website/src/layouts/ComponentPageLayout.tsx +++ b/packages/paste-website/src/layouts/ComponentPageLayout.tsx @@ -1,7 +1,5 @@ import { Box } from "@twilio-paste/box"; -import { InPageNavigation, InPageNavigationItem } from "@twilio-paste/in-page-navigation"; import Head from "next/head"; -import Link from "next/link"; import { useRouter } from "next/router"; import * as React from "react"; @@ -13,7 +11,6 @@ import { SiteWrapper } from "../components/site-wrapper"; import { SiteMetaDefaults } from "../constants"; import type { NavigationQuery } from "../context/NavigationContext"; import type { ApiData } from "../utils/DataUtils"; -import { getPackagePath } from "../utils/RouteUtils"; interface ComponentPageLayoutProps { children?: React.ReactElement; @@ -37,14 +34,6 @@ const componentOverrides = { h1: () => null, }; -const getInPageNavUrlMap = (componentPath: string): Record => { - return { - GUIDELINES: `${componentPath}`, - API: `${componentPath}/api`, - CHANGELOG: `${componentPath}/changelog`, - }; -}; - const ComponentPageLayout: React.FC> = ({ children, meta, @@ -56,8 +45,6 @@ const ComponentPageLayout: React.FC @@ -73,34 +60,6 @@ const ComponentPageLayout: React.FC - - - - {/* @ts-expect-error href is required but is passed down by Next */} - - Guidelines - - - - {/* @ts-expect-error href is required but is passed down by Next */} - - API - - - - {/* @ts-expect-error href is required but is passed down by Next */} - - Changelog - - - - diff --git a/packages/paste-website/src/pages/blog/index.mdx b/packages/paste-website/src/pages/blog/index.mdx index 2041cc0704..e20dbce898 100644 --- a/packages/paste-website/src/pages/blog/index.mdx +++ b/packages/paste-website/src/pages/blog/index.mdx @@ -4,6 +4,8 @@ export const meta = { slug: '/blog/', }; +import {PageHeader, PageHeaderDetails, PageHeaderHeading} from '@twilio-paste/page-header'; + import {ArticleList} from '../../components/ArticleList'; import DefaultLayout from '../../layouts/DefaultLayout'; import {getArticles, getNavigationData} from '../../utils/api'; @@ -21,8 +23,10 @@ export const getStaticProps = async () => { }; }; -# Articles and Posts about Paste - ---- + + + Articles and Posts about Paste + + diff --git a/packages/paste-website/src/pages/components/index.mdx b/packages/paste-website/src/pages/components/index.mdx index a34137d0e3..07ec25e39a 100644 --- a/packages/paste-website/src/pages/components/index.mdx +++ b/packages/paste-website/src/pages/components/index.mdx @@ -9,6 +9,8 @@ import {Anchor} from '@twilio-paste/anchor'; import {Heading} from '@twilio-paste/heading'; import {Text} from '@twilio-paste/text'; import {Box} from '@twilio-paste/box'; +import {PageHeader, PageHeaderSetting, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph, PageHeaderSeparator} from "@twilio-paste/page-header"; +import {Separator} from "@twilio-paste/separator"; import {Callout, CalloutHeading, CalloutText, CalloutList, CalloutListItem} from '@twilio-paste/callout'; import {SiteLink} from '../../components/SiteLink.tsx'; import {ComponentOverviewTable} from '../../components/component-overview-table'; @@ -30,15 +32,20 @@ export const getStaticProps = async () => { }; }; - - Home - - - Components - - ---- + + + + Home + + + + Components + + + + + For more information about how Paste is built and where components fit into that hierarchy, read [About Paste](/introduction/about-paste#whats-a-design-system). diff --git a/packages/paste-website/src/pages/components/page-header/api.mdx b/packages/paste-website/src/pages/components/page-header/api.mdx index cc70df3e0a..90f7c2b284 100644 --- a/packages/paste-website/src/pages/components/page-header/api.mdx +++ b/packages/paste-website/src/pages/components/page-header/api.mdx @@ -16,7 +16,7 @@ export default ComponentPageLayout; export const getStaticProps = async () => { const navigationData = await getNavigationData(); - const feature = await getFeature('Page header'); + const feature = await getFeature('Page Header'); const {componentApi, componentApiTocData} = getComponentApi('@twilio-paste/page-header'); return { props: { @@ -56,6 +56,7 @@ import { PageHeaderParagraph, PageHeaderPrefix, PageHeaderSetting, + PageHeaderSeparator, } from '@twilio-paste/core/page-header'; const MyPageHeader = () => { diff --git a/packages/paste-website/src/pages/components/page-header/changelog.mdx b/packages/paste-website/src/pages/components/page-header/changelog.mdx index bb54860b6d..92ec9ce913 100644 --- a/packages/paste-website/src/pages/components/page-header/changelog.mdx +++ b/packages/paste-website/src/pages/components/page-header/changelog.mdx @@ -16,7 +16,7 @@ export default ComponentPageLayout; export const getStaticProps = async () => { const navigationData = await getNavigationData(); - const feature = await getFeature('Page header'); + const feature = await getFeature('Page Header'); return { props: { data: { diff --git a/packages/paste-website/src/pages/components/page-header/index.mdx b/packages/paste-website/src/pages/components/page-header/index.mdx index cfdaaa261c..a5223c8c04 100644 --- a/packages/paste-website/src/pages/components/page-header/index.mdx +++ b/packages/paste-website/src/pages/components/page-header/index.mdx @@ -28,7 +28,8 @@ import { PageHeaderMeta, PageHeaderParagraph, PageHeaderPrefix, - PageHeaderSetting + PageHeaderSetting, + PageHeaderSeparator } from '@twilio-paste/page-header'; import { ProgressStepComplete, @@ -37,6 +38,7 @@ import { ProgressStepSeparator, ProgressSteps, } from "@twilio-paste/progress-steps"; +import {Separator} from '@twilio-paste/separator' import {ArrowBackIcon} from '@twilio-paste/icons/esm/ArrowBackIcon'; import { Button } from "@twilio-paste/button"; import { ButtonGroup } from "@twilio-paste/button-group"; @@ -56,7 +58,7 @@ export default ComponentPageLayout; export const getStaticProps = async () => { const navigationData = await getNavigationData(); - const feature = await getFeature('Page header'); + const feature = await getFeature('Page Header'); return { props: { data: { @@ -86,15 +88,15 @@ There are 3 sections that make up the Page Header component, though you won’t 1. **PageHeaderSetting** contains any components that relate to the positioning of the current page in relation to parent or sibling pages, including navigating between those pages. Context components may include: - [Breadcrumb](/components/breadcrumb) - - [Anchor](/components/anchor) (e.g. “<-- Back to parent page” link) + - [Anchor](/components/anchor) (for example, “<-- Back to parent page” link) - [Progress Steps](/components/progress-steps) 2. **PageHeaderDetails** is where all page-related information belongs. It includes static text and interactive components that relate to the page as a whole. Components that might live within the PageHeaderDetails include: - - [Detail Text](/components/detail-text) (e.g. the title of the entire wizard flow) - - [Heading](/components/heading) (e.g. the page title) - - [Badge](/components/badge) (e.g. “enabled”, “beta”, etc.) - - [Paragraph](/components/paragraph) (e.g. additional text below the title) - - [Button](/components/button) and [Button Group](/components/button-group) (e.g. “create”, “edit”, “cancel”, etc. buttons) - - [Anchor](/components/anchor) (e.g. link to a related/useful page such as docs - not a parent page) + - [Detail Text](/components/detail-text) (for example, the title of the entire wizard flow) + - [Heading](/components/heading) (for example, the page title) + - [Badge](/components/badge) (for example, “enabled”, “beta”, etc.) + - [Paragraph](/components/paragraph) (for example, additional text below the title) + - [Button](/components/button) and [Button Group](/components/button-group) (for example, “create”, “edit”, “cancel”, etc. buttons) + - [Anchor](/components/anchor) (for example, link to a related/useful page such as docs - not a parent page) - [Select](/components/select) 3. **PageHeaderInPageNavigation** contains the [In Page Navigation](/components/in-page-navigation) for the page content, if using. @@ -112,9 +114,9 @@ Much of the Paste Page Header component was inspired by the wonderful work of Gi ### Accessibility -Page Header has no inherent accessibility concerns. However, there will likely need to manage accessibility concerns based on the components used within Page Header. Recommended considerations include: -- The accessibility considerations of the components used. See the component’s documentation. -- How the order and visual or content hierarchy of the children passed to Page Header affect readability. +Page Header has no inherent accessibility concerns. However, there will likely be accessibility concerns related to the components used within Page Header. Recommended considerations include: +- The accessibility considerations of the components used. Refer to each component’s documentation. +- The order and visual or content hierarchy of the children passed to Page Header, and how they affect readability. - What you pass to the `as` property when using [Headings](/components/heading). Headings that live at the top of the page and are the title of the page (most Page Headers fall under this category) should be `h1`s. Only use a heading level lower than `h1` if the Page Header exists within a page that already has an `h1` title (very few Page Headers fall under this category). @@ -132,9 +134,9 @@ Default Page Headers should have `space-130` clearspace above them. Place platfo ### Page Header in an interrupted flow -When the user navigates to an unrelated page, such as a separate product’s marketing page, it might not make sense to use a Breadcrumb in the page header for navigation. Instead, use an anchor with the text “<-- Return to [previous page name]”. +When the user navigates to an unrelated page, such as a separate product’s marketing page, it might not make sense to use a Breadcrumb in the page header for navigation. Instead, use an Anchor with `ArrowBackIcon` and the text “Return to [previous page name]”. - + {interruptedPageHeaderExample} @@ -160,7 +162,7 @@ See the [object details page template](/page-templates/object-details) documenta See the [objects list page template](/page-templates/objects-list) documentation for more guidance. - + {objectsListPageHeaderExample} @@ -176,7 +178,7 @@ See the [settings page template](/page-templates/settings) documentation for mor Use the [Progress Steps](/components/progress-steps) in the context wrapper when included as part of the [wizard page template](/page-templates/wizard). - + {wizardPageHeaderExample} @@ -186,11 +188,11 @@ When deciding which components to include in your Page Header, only use what is ### PageHeaderSetting -The most common navigation component that will be used is [Breadcrumb](/components/breadcrumb). In some cases, such as when the user navigates to an unrelated page (e.g., marketing for another product), Breadcrumbs might not make the most sense because the new page isn’t hierarchically related to the previous page. In cases when Breadcrumb isn’t the best option, use an Anchor with the ArrowBackIcon (for example “<-- Return to [previous page name]”). +The most common navigation component that will be used is [Breadcrumb](/components/breadcrumb). In some cases, such as when the user navigates to an unrelated page (for example, marketing for another product), Breadcrumbs might not make the most sense because the new page isn’t hierarchically related to the previous page. When Breadcrumb isn’t the best option, use an Anchor with the ArrowBackIcon (for example, “<-- Return to [previous page name]”). ### PageHeaderDetails -Again, we encourage you to be conservative here when deciding which components to include. Page Headers can feel overwhelming when crowded, so only use what is necessary. +To avoid overcrowding, only use what is necessary. #### Above and before the heading diff --git a/packages/paste-website/src/pages/core/changelog.mdx b/packages/paste-website/src/pages/core/changelog.mdx index 6d39671a65..9d12cbe9d7 100644 --- a/packages/paste-website/src/pages/core/changelog.mdx +++ b/packages/paste-website/src/pages/core/changelog.mdx @@ -1,9 +1,11 @@ export const meta = { - title: 'Core Package Changelog', + title: 'Core package changelog', package: '@twilio-paste/core', slug: '/core/changelog', }; +import {Separator} from "@twilio-paste/separator"; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; import Changelog from '@twilio-paste/core/CHANGELOG.md'; import {SidebarCategoryRoutes} from '../../constants'; import {getNavigationData} from '../../utils/api'; @@ -20,9 +22,11 @@ export const getStaticProps = async () => { }; }; - - ---- + + + + + diff --git a/packages/paste-website/src/pages/core/index.mdx b/packages/paste-website/src/pages/core/index.mdx index 5058fe3916..07fc1c26b0 100644 --- a/packages/paste-website/src/pages/core/index.mdx +++ b/packages/paste-website/src/pages/core/index.mdx @@ -5,6 +5,7 @@ export const meta = { }; import {Separator} from '@twilio-paste/separator'; +import {PageHeaderSeparator} from '@twilio-paste/page-header' import {Text} from '@twilio-paste/text'; import {Paragraph} from '@twilio-paste/paragraph'; import {Box} from '@twilio-paste/box'; @@ -37,9 +38,12 @@ export const getStaticProps = async () => { packageName={PackageJSON.name} version={PackageJSON.version} description={PackageJSON.description} -/> - ---- + shouldShowBreadcrumbs={false} +> + + + + diff --git a/packages/paste-website/src/pages/core/libraries/code-editor/index.mdx b/packages/paste-website/src/pages/core/libraries/code-editor/index.mdx index 70e77488ff..700ea5a44b 100644 --- a/packages/paste-website/src/pages/core/libraries/code-editor/index.mdx +++ b/packages/paste-website/src/pages/core/libraries/code-editor/index.mdx @@ -5,6 +5,8 @@ export const meta = { slug: '/core/libraries/code-editor/', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import packageJson from '@twilio-paste/code-editor-library/package.json'; import {SidebarCategoryRoutes} from '../../../../constants'; import {getNavigationData} from '../../../../utils/api'; @@ -29,9 +31,11 @@ export const getStaticProps = async () => { packageName={packageJson.name} version={packageJson.version} description={packageJson.description} -/> - ---- +> + + + + diff --git a/packages/paste-website/src/pages/core/libraries/codemods/index.mdx b/packages/paste-website/src/pages/core/libraries/codemods/index.mdx index 54f4ed6e5e..19d5e59d2f 100644 --- a/packages/paste-website/src/pages/core/libraries/codemods/index.mdx +++ b/packages/paste-website/src/pages/core/libraries/codemods/index.mdx @@ -5,6 +5,8 @@ export const meta = { slug: '/core/libraries/codemods/', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import {SidebarCategoryRoutes} from '../../../../constants'; import {getNavigationData} from '../../../../utils/api'; import packageJson from '@twilio-paste/codemods/package.json'; @@ -31,9 +33,11 @@ export const getStaticProps = async () => { packageName={props.data.name} version={props.data.version} description={props.data.description} -/> - ---- +> + + + + diff --git a/packages/paste-website/src/pages/core/libraries/data-visualization/index.mdx b/packages/paste-website/src/pages/core/libraries/data-visualization/index.mdx index b733d89d08..ec55e71bde 100644 --- a/packages/paste-website/src/pages/core/libraries/data-visualization/index.mdx +++ b/packages/paste-website/src/pages/core/libraries/data-visualization/index.mdx @@ -5,6 +5,8 @@ export const meta = { slug: '/core/libraries/data-visualization/', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import DefaultLayout from '../../../../layouts/DefaultLayout'; import packageJson from '@twilio-paste/data-visualization-library/package.json'; import Changelog from '@twilio-paste/data-visualization-library/CHANGELOG.md'; @@ -36,9 +38,11 @@ export const getStaticProps = async () => { packageName={props.data.name} version={props.data.version} description={props.data.description} -/> - ---- +> + + + + diff --git a/packages/paste-website/src/pages/core/libraries/index.mdx b/packages/paste-website/src/pages/core/libraries/index.mdx index b6795b2b74..85f4e12090 100644 --- a/packages/paste-website/src/pages/core/libraries/index.mdx +++ b/packages/paste-website/src/pages/core/libraries/index.mdx @@ -4,6 +4,8 @@ export const meta = { slug: '/core/libraries/', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getNavigationData} from '../../../utils/api'; import {SidebarCategoryRoutes} from '../../../constants'; @@ -19,9 +21,11 @@ export const getStaticProps = async () => { }; }; - - ---- + + + + + diff --git a/packages/paste-website/src/pages/core/libraries/uid-library/index.mdx b/packages/paste-website/src/pages/core/libraries/uid-library/index.mdx index 60a4eec42a..f8a9b915a3 100644 --- a/packages/paste-website/src/pages/core/libraries/uid-library/index.mdx +++ b/packages/paste-website/src/pages/core/libraries/uid-library/index.mdx @@ -5,6 +5,8 @@ export const meta = { slug: '/core/libraries/uid-library/', }; +import {Separator} from '@twilio-paste/separator'; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; import {Box} from '@twilio-paste/box'; import packageJson from '@twilio-paste/uid-library/package.json'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; @@ -34,9 +36,11 @@ export const getStaticProps = async () => { packageName={props.data.name} version={props.data.version} description={props.data.description} -/> - ---- +> + + + + diff --git a/packages/paste-website/src/pages/core/libraries/vs-code-plugin/index.mdx b/packages/paste-website/src/pages/core/libraries/vs-code-plugin/index.mdx index 9951293c79..f243725512 100644 --- a/packages/paste-website/src/pages/core/libraries/vs-code-plugin/index.mdx +++ b/packages/paste-website/src/pages/core/libraries/vs-code-plugin/index.mdx @@ -5,6 +5,8 @@ export const meta = { slug: '/core/libraries/vs-code-plugin/', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import {SidebarCategoryRoutes} from '../../../../constants'; import {getNavigationData} from '../../../../utils/api'; import DefaultLayout from '../../../../layouts/DefaultLayout'; @@ -28,9 +30,11 @@ export const getStaticProps = async () => { packageName={meta.title} version="1.0.0" description={meta.description} -/> - ---- +> + + + + diff --git a/packages/paste-website/src/pages/core/upgrade-guide.mdx b/packages/paste-website/src/pages/core/upgrade-guide.mdx index dfe49fabff..911bbf8145 100644 --- a/packages/paste-website/src/pages/core/upgrade-guide.mdx +++ b/packages/paste-website/src/pages/core/upgrade-guide.mdx @@ -1,10 +1,12 @@ export const meta = { title: 'Upgrade Guide', - description: 'Summary of Breaking Changes to Core, with actions that should be taken before upgrading', + description: 'Summary of breaking changes to Core, with actions that should be taken before upgrading', slug: '/core/upgrade-guide', }; import {Card} from '@twilio-paste/card'; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import {Box} from '@twilio-paste/box'; import {Button} from '@twilio-paste/button'; import {Stack} from '@twilio-paste/stack'; @@ -26,10 +28,11 @@ export const getStaticProps = async () => { }; }; - -

{meta.description}

- ---- + + + + + diff --git a/packages/paste-website/src/pages/customization/composing-custom-components-with-design-tokens.mdx b/packages/paste-website/src/pages/customization/composing-custom-components-with-design-tokens.mdx index 5fab1fa80f..2e787c6345 100644 --- a/packages/paste-website/src/pages/customization/composing-custom-components-with-design-tokens.mdx +++ b/packages/paste-website/src/pages/customization/composing-custom-components-with-design-tokens.mdx @@ -5,6 +5,8 @@ export const meta = { slug: '/customization/composing-custom-components-with-design-tokens/', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator' import {Box} from '@twilio-paste/box'; import {Text} from '@twilio-paste/text'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; @@ -24,11 +26,11 @@ export const getStaticProps = async () => { }; }; - - -

{meta.description}

- ---- + + + + + diff --git a/packages/paste-website/src/pages/customization/creating-a-custom-theme.mdx b/packages/paste-website/src/pages/customization/creating-a-custom-theme.mdx index e6c24b39c2..f456021d62 100644 --- a/packages/paste-website/src/pages/customization/creating-a-custom-theme.mdx +++ b/packages/paste-website/src/pages/customization/creating-a-custom-theme.mdx @@ -5,6 +5,8 @@ export const meta = { slug: '/customization/creating-a-custom-theme/', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator' import {Box} from '@twilio-paste/box'; import {ThemeObjectDisplay} from '../../components/ThemeObjectDisplay'; import {AccessibilityCallout} from '../../components/page-components/customization/customization-provider/AccessibilityCallout'; @@ -26,11 +28,11 @@ export const getStaticProps = async () => { }; }; - - -

{meta.description}

- ---- + + + + + diff --git a/packages/paste-website/src/pages/customization/customization-provider.mdx b/packages/paste-website/src/pages/customization/customization-provider.mdx index a38be99b09..57e00c7314 100644 --- a/packages/paste-website/src/pages/customization/customization-provider.mdx +++ b/packages/paste-website/src/pages/customization/customization-provider.mdx @@ -5,6 +5,8 @@ export const meta = { slug: '/customization/customization-provider/', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator' import PackageJSON from '@twilio-paste/customization/package.json'; import Changelog from '@twilio-paste/customization/CHANGELOG.md'; import {ThemeObjectDisplay} from '../../components/ThemeObjectDisplay'; @@ -31,9 +33,11 @@ export const getStaticProps = async () => { packageName={PackageJSON.name} version={PackageJSON.version} description={PackageJSON.description} -/> - ---- +> + + + + diff --git a/packages/paste-website/src/pages/foundations/colors/index.mdx b/packages/paste-website/src/pages/foundations/colors/index.mdx index 33c1fbc2cf..ee43e99f78 100644 --- a/packages/paste-website/src/pages/foundations/colors/index.mdx +++ b/packages/paste-website/src/pages/foundations/colors/index.mdx @@ -7,6 +7,8 @@ export const meta = { import {Button} from '@twilio-paste/button'; import {Anchor} from '@twilio-paste/anchor'; import {Stack} from '@twilio-paste/stack'; +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator' import {DeleteIcon} from '@twilio-paste/icons/esm/DeleteIcon'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; @@ -46,13 +48,13 @@ export const getStaticProps = async () => { }; }; - - - - + + + + + ---- diff --git a/packages/paste-website/src/pages/foundations/content/content-checklist/index.mdx b/packages/paste-website/src/pages/foundations/content/content-checklist/index.mdx index dc02f2b5a3..b0beda2e0a 100644 --- a/packages/paste-website/src/pages/foundations/content/content-checklist/index.mdx +++ b/packages/paste-website/src/pages/foundations/content/content-checklist/index.mdx @@ -6,6 +6,8 @@ export const meta = { import {Anchor} from '@twilio-paste/anchor'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {Separator} from '@twilio-paste/separator'; +import {PageHeader, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph, PageHeaderSeparator} from "@twilio-paste/page-header"; import DefaultLayout from '../../../../layouts/DefaultLayout'; import {getNavigationData} from '../../../../utils/api'; @@ -20,15 +22,15 @@ export const getStaticProps = async () => { }; }; - - -

{meta.title}

- -

{meta.description}

- - - ---- + + + {meta.title} + {meta.description} + + + + + diff --git a/packages/paste-website/src/pages/foundations/content/index.mdx b/packages/paste-website/src/pages/foundations/content/index.mdx index b2031dbfb7..7be84a55e4 100644 --- a/packages/paste-website/src/pages/foundations/content/index.mdx +++ b/packages/paste-website/src/pages/foundations/content/index.mdx @@ -6,6 +6,8 @@ export const meta = { import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {Anchor} from '@twilio-paste/anchor'; +import {Separator} from '@twilio-paste/separator' +import {PageHeader, PageHeaderSeparator, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph} from "@twilio-paste/page-header"; import DefaultLayout from '../../../layouts/DefaultLayout'; import {getNavigationData} from '../../../utils/api'; @@ -21,15 +23,15 @@ export const getStaticProps = async () => { }; }; - - -

{meta.title}

- -

{meta.description}

- - - ---- + + + {meta.title} + {meta.description} + + + + + diff --git a/packages/paste-website/src/pages/foundations/content/product-style-guide/index.mdx b/packages/paste-website/src/pages/foundations/content/product-style-guide/index.mdx index f8b1c2c01d..32406d1497 100644 --- a/packages/paste-website/src/pages/foundations/content/product-style-guide/index.mdx +++ b/packages/paste-website/src/pages/foundations/content/product-style-guide/index.mdx @@ -6,6 +6,8 @@ export const meta = { import {Anchor} from '@twilio-paste/anchor'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {Separator} from '@twilio-paste/separator'; +import {PageHeader, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph, PageHeaderSeparator} from "@twilio-paste/page-header"; import {DoDont, Do, Dont} from '../../../../components/DoDont'; import DefaultLayout from '../../../../layouts/DefaultLayout'; @@ -22,15 +24,15 @@ export const getStaticProps = async () => { }; }; - - -

{meta.title}

- -

{meta.description}

- - - ---- + + + {meta.title} + {meta.description} + + + + + diff --git a/packages/paste-website/src/pages/foundations/content/voice-and-tone/index.mdx b/packages/paste-website/src/pages/foundations/content/voice-and-tone/index.mdx index 24d310f66c..096aab5ae5 100644 --- a/packages/paste-website/src/pages/foundations/content/voice-and-tone/index.mdx +++ b/packages/paste-website/src/pages/foundations/content/voice-and-tone/index.mdx @@ -5,6 +5,8 @@ export const meta = { }; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {Separator} from '@twilio-paste/separator'; +import {PageHeader, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph, PageHeaderSeparator} from "@twilio-paste/page-header"; import DefaultLayout from '../../../../layouts/DefaultLayout'; import {getNavigationData} from '../../../../utils/api'; @@ -20,15 +22,15 @@ export const getStaticProps = async () => { }; }; - - -

{meta.title}

- -

{meta.description}

- - - ---- + + + {meta.title} + {meta.description} + + + + + diff --git a/packages/paste-website/src/pages/foundations/content/word-list/index.mdx b/packages/paste-website/src/pages/foundations/content/word-list/index.mdx index ae6dbec362..b45b31d7a5 100644 --- a/packages/paste-website/src/pages/foundations/content/word-list/index.mdx +++ b/packages/paste-website/src/pages/foundations/content/word-list/index.mdx @@ -6,6 +6,8 @@ export const meta = { }; import {Box} from '@twilio-paste/box'; +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator'; import {SidebarCategoryRoutes} from '../../../../constants'; import {WordsList} from '../../../../components/word-list'; @@ -28,8 +30,10 @@ export const getStaticProps = async () => { categoryRoute={SidebarCategoryRoutes.CONTENT} shouldShowBreadcrumbs={false} description={meta.description} -/> - ---- +> + + + + diff --git a/packages/paste-website/src/pages/foundations/data-visualization/index.mdx b/packages/paste-website/src/pages/foundations/data-visualization/index.mdx index 201476840f..9ea6decd8c 100644 --- a/packages/paste-website/src/pages/foundations/data-visualization/index.mdx +++ b/packages/paste-website/src/pages/foundations/data-visualization/index.mdx @@ -13,6 +13,8 @@ import {Box} from '@twilio-paste/box'; import {Heading} from '@twilio-paste/heading'; import {Text} from '@twilio-paste/text'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import {ResponsiveImage} from '../../../components/ResponsiveImage'; import {SidebarCategoryRoutes} from '../../../constants'; @@ -40,13 +42,13 @@ export const getStaticProps = async () => { }; }; - - - - + + + + + ---- diff --git a/packages/paste-website/src/pages/foundations/illustrations/index.mdx b/packages/paste-website/src/pages/foundations/illustrations/index.mdx index beff3001d5..51ee74c23f 100644 --- a/packages/paste-website/src/pages/foundations/illustrations/index.mdx +++ b/packages/paste-website/src/pages/foundations/illustrations/index.mdx @@ -4,6 +4,9 @@ export const meta = { slug: '/foundations/illustrations/', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator' + import DefaultLayout from '../../../layouts/DefaultLayout'; import {getNavigationData} from '../../../utils/api'; import {SidebarCategoryRoutes} from '../../../constants'; @@ -19,13 +22,12 @@ export const getStaticProps = async () => { }; }; - - - - - ---- + + + + + diff --git a/packages/paste-website/src/pages/foundations/localization/index.mdx b/packages/paste-website/src/pages/foundations/localization/index.mdx index de03c16806..3c6d4d7aed 100644 --- a/packages/paste-website/src/pages/foundations/localization/index.mdx +++ b/packages/paste-website/src/pages/foundations/localization/index.mdx @@ -6,6 +6,8 @@ export const meta = { import {Anchor} from '@twilio-paste/anchor'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import {ResponsiveImage} from '../../../components/ResponsiveImage'; import {SidebarCategoryRoutes} from '../../../constants'; @@ -25,13 +27,11 @@ export const getStaticProps = async () => { }; }; - - - - - - ---- + + + + + diff --git a/packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx b/packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx index b1fa4c6841..ec69ffc770 100644 --- a/packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx +++ b/packages/paste-website/src/pages/foundations/spacing-and-layout/index.mdx @@ -8,6 +8,8 @@ export const meta = { import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {Anchor} from '@twilio-paste/anchor'; import {UnorderedList, ListItem} from '@twilio-paste/list'; +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator'; import {ResponsiveImage} from '../../../components/ResponsiveImage'; import {SidebarCategoryRoutes} from '../../../constants'; @@ -33,13 +35,12 @@ export const getStaticProps = async () => { }; }; - - - - - + + + + + ---- diff --git a/packages/paste-website/src/pages/foundations/typography/index.mdx b/packages/paste-website/src/pages/foundations/typography/index.mdx index 94169c15f4..7b4a2500ab 100644 --- a/packages/paste-website/src/pages/foundations/typography/index.mdx +++ b/packages/paste-website/src/pages/foundations/typography/index.mdx @@ -16,6 +16,7 @@ import {Heading} from '@twilio-paste/heading'; import {DetailText} from '@twilio-paste/detail-text'; import {Paragraph} from '@twilio-paste/paragraph'; import {Box} from '@twilio-paste/box'; +import {PageHeaderSeparator} from '@twilio-paste/page-header' import {TextColorSwatches} from '../../../component-examples/ColorsFoundationExamples'; import {ResponsiveImage} from '../../../components/ResponsiveImage'; @@ -49,13 +50,11 @@ export const getStaticProps = async () => { }; }; - - - - - - ---- + + + + + diff --git a/packages/paste-website/src/pages/inclusive-design/index.mdx b/packages/paste-website/src/pages/inclusive-design/index.mdx index 0e657b3042..acd44837f8 100644 --- a/packages/paste-website/src/pages/inclusive-design/index.mdx +++ b/packages/paste-website/src/pages/inclusive-design/index.mdx @@ -6,6 +6,8 @@ export const meta = { }; import {UnorderedList, ListItem} from '@twilio-paste/list'; +import {Separator} from '@twilio-paste/separator'; +import {PageHeader, PageHeaderSeparator, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph} from "@twilio-paste/page-header"; import {Card} from '@twilio-paste/card'; import {Stack} from '@twilio-paste/stack'; import {Alert} from '@twilio-paste/alert'; @@ -26,14 +28,15 @@ export const getStaticProps = async () => { }; }; - -

{meta.title}

- -

{meta.description}

- - - ---- + + + {meta.title} + {meta.description} + + + + + diff --git a/packages/paste-website/src/pages/introduction/about-paste/index.mdx b/packages/paste-website/src/pages/introduction/about-paste/index.mdx index ac2f41e68b..516d33f519 100644 --- a/packages/paste-website/src/pages/introduction/about-paste/index.mdx +++ b/packages/paste-website/src/pages/introduction/about-paste/index.mdx @@ -6,6 +6,8 @@ export const meta = { import {Stack} from '@twilio-paste/stack'; import {Paragraph} from '@twilio-paste/paragraph'; +import {PageHeader, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph, PageHeaderSeparator} from "@twilio-paste/page-header"; +import {Separator} from "@twilio-paste/separator"; import {UnorderedList, ListItem} from '@twilio-paste/list'; import {Anchor} from '@twilio-paste/anchor'; import {Disclosure, DisclosureHeading, DisclosureContent} from '@twilio-paste/disclosure'; @@ -27,15 +29,17 @@ export const getStaticProps = async () => { }; }; - - -

{meta.title}

-{meta.description} - - + + + {meta.title} + {meta.description} + + + + + ---- diff --git a/packages/paste-website/src/pages/introduction/contributing/components/index.mdx b/packages/paste-website/src/pages/introduction/contributing/components/index.mdx index 3f169a368a..e538edad3a 100644 --- a/packages/paste-website/src/pages/introduction/contributing/components/index.mdx +++ b/packages/paste-website/src/pages/introduction/contributing/components/index.mdx @@ -4,6 +4,9 @@ export const meta = { slug: '/introduction/contributing/components/', }; +import {PageHeader, PageHeaderSeparator, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph} from "@twilio-paste/page-header"; +import {Separator} from "@twilio-paste/separator"; + import DefaultLayout from '../../../../layouts/DefaultLayout'; import {getNavigationData} from '../../../../utils/api'; @@ -18,16 +21,22 @@ export const getStaticProps = async () => { }; }; + + + + {meta.title} + {meta.description} + + + + + + -

{meta.title}

- -How to contribute a component to Paste. - ---- Thanks for your interest in contributing a component! There are many ways to contribute and it’s up to you what scope and type of contribution will have the most impact. diff --git a/packages/paste-website/src/pages/introduction/contributing/icons/index.mdx b/packages/paste-website/src/pages/introduction/contributing/icons/index.mdx index c09bab6a79..f80426e1b2 100644 --- a/packages/paste-website/src/pages/introduction/contributing/icons/index.mdx +++ b/packages/paste-website/src/pages/introduction/contributing/icons/index.mdx @@ -1,11 +1,13 @@ export const meta = { title: 'Contributing an icon', - description: 'Guidelines on how to create and export SVG icons for Paste.', + description: 'How to create and export SVG icons for Paste.', slug: '/introduction/contributing/icons/', }; import Link from 'next/link'; import {Box} from '@twilio-paste/box'; +import {Separator} from "@twilio-paste/separator"; +import {PageHeader, PageHeaderSeparator, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph} from "@twilio-paste/page-header"; import {Text} from '@twilio-paste/text'; import {Button} from '@twilio-paste/button'; import {PlusIcon} from '@twilio-paste/icons/esm/PlusIcon'; @@ -26,14 +28,21 @@ export const getStaticProps = async () => { }; }; + + + {meta.title} + {meta.description} + + + + + + -

{meta.title}

- ---- ## Finding an icon diff --git a/packages/paste-website/src/pages/introduction/contributing/patterns/index.mdx b/packages/paste-website/src/pages/introduction/contributing/patterns/index.mdx index 885a67af33..be5ca0346b 100644 --- a/packages/paste-website/src/pages/introduction/contributing/patterns/index.mdx +++ b/packages/paste-website/src/pages/introduction/contributing/patterns/index.mdx @@ -17,11 +17,13 @@ import {Select, Option} from '@twilio-paste/select'; import {Grid, Column} from '@twilio-paste/grid'; import {Heading} from '@twilio-paste/heading'; import {MediaObject, MediaFigure, MediaBody} from '@twilio-paste/media-object'; +import {PageHeader, PageHeaderSeparator, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph} from "@twilio-paste/page-header"; import {Paragraph} from '@twilio-paste/paragraph'; import {Stack} from '@twilio-paste/stack'; import {Tabs, TabList, Tab, TabPanels, TabPanel} from '@twilio-paste/tabs'; import {Text} from '@twilio-paste/text'; import {Toast} from '@twilio-paste/toast'; +import {Separator} from "@twilio-paste/separator"; import {ErrorIcon} from '@twilio-paste/icons/esm/ErrorIcon'; import {SuccessIcon} from '@twilio-paste/icons/esm/SuccessIcon'; import {Codeblock} from '../../../../components/codeblock'; @@ -42,16 +44,22 @@ export const getStaticProps = async () => { }; }; + + + + {meta.title} + {meta.description} + + + + + + -

{meta.title}

- -How to contribute a pattern to Paste. - ---- Thanks for your interest in contributing patterns! Since this is a general guideline, feel free to grow or shrink this process however you need. diff --git a/packages/paste-website/src/pages/introduction/for-designers/design-guidelines/index.mdx b/packages/paste-website/src/pages/introduction/for-designers/design-guidelines/index.mdx index 6bc982cabc..4022531db0 100644 --- a/packages/paste-website/src/pages/introduction/for-designers/design-guidelines/index.mdx +++ b/packages/paste-website/src/pages/introduction/for-designers/design-guidelines/index.mdx @@ -5,7 +5,9 @@ export const meta = { }; import {Anchor} from '@twilio-paste/anchor'; +import {Separator} from "@twilio-paste/separator"; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {PageHeader, PageHeaderDetails, PageHeaderSeparator, PageHeaderHeading, PageHeaderParagraph} from "@twilio-paste/page-header"; import DefaultLayout from '../../../../layouts/DefaultLayout'; import {getNavigationData} from '../../../../utils/api'; @@ -20,15 +22,15 @@ export const getStaticProps = async () => { }; }; - - -

{meta.title}

- -

{meta.description}

- - - ---- + + + {meta.title} + {meta.description} + + + + + @@ -86,6 +88,14 @@ The following are the main libraries we recommend you have enabled for each Figm - [Segment Design Library](https://www.figma.com/file/4tOxLhDIMO2MYvF925RQKc/Segment-Design-Library?type=design&mode=design&t=UNWt1yAShGOocSFf-0) for teams with Segment projects, managed by the Segment team. - [File and Cover Sheet Template](https://www.figma.com/file/RfZYRjUH56rZ0qe0veqRJA/File-and-Cover-Sheet-Template) +#### How to swap themes + +The main Paste Components Figma library includes variables in our most-used themes as modes. Check out [Figma's documentation on switching modes](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01H3ADKDF7JBTRV1Z5P1X1DZVE) to learn how to swap from the default "Twilio" theme mode to other modes like "Evergreen" for the Segment transition and "Default" for the legacy visual style. + +As long as every part of your UI (even the white background fill on your frames) is referencing our design tokens in Figma, swapping between modes (i.e., themes) will work smoothly. Your design files will be 1-to-1 with the components your engineering team uses, which makes upgrading, migrating, and switching visual themes in both code and design effortless. + +Switching modes won't work for *detached components* that use raw hex codes, for example, because Figma won't know what to swap them to and you are *no longer using Paste*. + --- ### Library updates diff --git a/packages/paste-website/src/pages/introduction/for-engineers/manual-installation/index.mdx b/packages/paste-website/src/pages/introduction/for-engineers/manual-installation/index.mdx index ba178c5cf0..9cd5b1af1b 100644 --- a/packages/paste-website/src/pages/introduction/for-engineers/manual-installation/index.mdx +++ b/packages/paste-website/src/pages/introduction/for-engineers/manual-installation/index.mdx @@ -6,6 +6,8 @@ export const meta = { import {Box} from '@twilio-paste/box'; import {Paragraph} from '@twilio-paste/paragraph'; +import {Separator} from "@twilio-paste/separator"; +import {PageHeader, PageHeaderSeparator, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph} from "@twilio-paste/page-header"; import {Table, THead, TBody, Td, Th, Tr} from '@twilio-paste/table'; import CorePkgJson from '@twilio-paste/core/package.json'; import IconsPkgJson from '@twilio-paste/icons/package.json'; @@ -25,15 +27,15 @@ export const getStaticProps = async () => { }; }; - - -

{meta.title}

- -{meta.description} - - - ---- + + + {meta.title} + {meta.description} + + + + + diff --git a/packages/paste-website/src/pages/introduction/for-engineers/quickstart/index.mdx b/packages/paste-website/src/pages/introduction/for-engineers/quickstart/index.mdx index 15edf998ce..4feadc33d3 100644 --- a/packages/paste-website/src/pages/introduction/for-engineers/quickstart/index.mdx +++ b/packages/paste-website/src/pages/introduction/for-engineers/quickstart/index.mdx @@ -6,6 +6,8 @@ export const meta = { import {Anchor} from '@twilio-paste/anchor'; import {Paragraph} from '@twilio-paste/paragraph'; +import {Separator} from "@twilio-paste/separator"; +import {PageHeader, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph, PageHeaderSeparator} from "@twilio-paste/page-header"; import DefaultLayout from '../../../../layouts/DefaultLayout'; import {getNavigationData} from '../../../../utils/api'; @@ -20,15 +22,15 @@ export const getStaticProps = async () => { }; }; - - -

{meta.title}

- -{meta.description} - - - ---- + + + {meta.title} + {meta.description} + + + + + diff --git a/packages/paste-website/src/pages/introduction/working-with-us/index.mdx b/packages/paste-website/src/pages/introduction/working-with-us/index.mdx index 3f66921311..c6920cff14 100644 --- a/packages/paste-website/src/pages/introduction/working-with-us/index.mdx +++ b/packages/paste-website/src/pages/introduction/working-with-us/index.mdx @@ -5,6 +5,8 @@ export const meta = { }; import {Anchor} from '@twilio-paste/anchor'; +import {Separator} from "@twilio-paste/separator"; +import {PageHeader, PageHeaderDetails, PageHeaderSeparator, PageHeaderHeading, PageHeaderParagraph} from "@twilio-paste/page-header"; import {Grid} from '../../../components/grid'; import Link from 'next/link'; import DefaultLayout from '../../../layouts/DefaultLayout'; @@ -21,15 +23,15 @@ export const getStaticProps = async () => { }; }; - - -

{meta.title}

- -

{meta.description}

- - - ---- + + + {meta.title} + {meta.description} + + + + + diff --git a/packages/paste-website/src/pages/page-templates/index.mdx b/packages/paste-website/src/pages/page-templates/index.mdx index a4d5c28da3..e5d26ee3df 100644 --- a/packages/paste-website/src/pages/page-templates/index.mdx +++ b/packages/paste-website/src/pages/page-templates/index.mdx @@ -8,6 +8,7 @@ import {Anchor} from '@twilio-paste/anchor'; import {Box} from '@twilio-paste/box'; import {Heading} from '@twilio-paste/heading'; import {Paragraph} from '@twilio-paste/paragraph'; +import {PageHeader, PageHeaderSetting, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph, PageHeaderSeparator} from "@twilio-paste/page-header"; import {Text} from '@twilio-paste/text'; import {Separator} from '@twilio-paste/separator'; import {SiteLink} from '../../components/SiteLink.tsx'; @@ -30,18 +31,19 @@ export const getStaticProps = async () => { }; }; - - - - Home - - - {meta.title} - - - - ---- + + + + Home + + + + {meta.title} + + + + + ## What is a page template? 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 d76ae90dbd..1fe0f8dcf7 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 @@ -26,7 +26,6 @@ export const getStaticProps = async () => { }; }; - { data={props.data} categoryRoute={SidebarCategoryRoutes.PAGE_TEMPLATES} /> - - ---- 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 7006933610..13d7a61b5b 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 @@ -26,8 +26,6 @@ export const getStaticProps = async () => { }; }; - - { categoryRoute={SidebarCategoryRoutes.PAGE_TEMPLATES} /> - - ---- - 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 08f0369519..4216601396 100644 --- a/packages/paste-website/src/pages/page-templates/settings/index.mdx +++ b/packages/paste-website/src/pages/page-templates/settings/index.mdx @@ -25,7 +25,6 @@ export const getStaticProps = async () => { }; }; - { categoryRoute={SidebarCategoryRoutes.PAGE_TEMPLATES} /> - - ---- diff --git a/packages/paste-website/src/pages/page-templates/wizard/index.mdx b/packages/paste-website/src/pages/page-templates/wizard/index.mdx index ffa2a126d0..326bce32cb 100644 --- a/packages/paste-website/src/pages/page-templates/wizard/index.mdx +++ b/packages/paste-website/src/pages/page-templates/wizard/index.mdx @@ -28,8 +28,6 @@ export const getStaticProps = async () => { }; }; - - { categoryRoute={SidebarCategoryRoutes.PAGE_TEMPLATES} /> - - ---- - diff --git a/packages/paste-website/src/pages/patterns/button-vs-anchor/index.mdx b/packages/paste-website/src/pages/patterns/button-vs-anchor/index.mdx index 1278e9ee30..ab376d25f8 100644 --- a/packages/paste-website/src/pages/patterns/button-vs-anchor/index.mdx +++ b/packages/paste-website/src/pages/patterns/button-vs-anchor/index.mdx @@ -40,13 +40,10 @@ export const getStaticProps = async () => { }; }; - - - + ---- diff --git a/packages/paste-website/src/pages/patterns/confirmation/index.mdx b/packages/paste-website/src/pages/patterns/confirmation/index.mdx index 859be950c1..274365e00d 100644 --- a/packages/paste-website/src/pages/patterns/confirmation/index.mdx +++ b/packages/paste-website/src/pages/patterns/confirmation/index.mdx @@ -36,14 +36,8 @@ export const getStaticProps = async () => { }; }; - - - - ---- - diff --git a/packages/paste-website/src/pages/patterns/create/index.mdx b/packages/paste-website/src/pages/patterns/create/index.mdx index c975a5ba98..8f699e03e6 100644 --- a/packages/paste-website/src/pages/patterns/create/index.mdx +++ b/packages/paste-website/src/pages/patterns/create/index.mdx @@ -40,13 +40,9 @@ export const getStaticProps = async () => { }; }; - - - ---- diff --git a/packages/paste-website/src/pages/patterns/data-export/index.mdx b/packages/paste-website/src/pages/patterns/data-export/index.mdx index 5f71523387..5784726e01 100644 --- a/packages/paste-website/src/pages/patterns/data-export/index.mdx +++ b/packages/paste-website/src/pages/patterns/data-export/index.mdx @@ -51,14 +51,9 @@ export const getStaticProps = async () => { }; }; - - - ---- - diff --git a/packages/paste-website/src/pages/patterns/delete/index.mdx b/packages/paste-website/src/pages/patterns/delete/index.mdx index 9d6bbb41dd..e677b6a80f 100644 --- a/packages/paste-website/src/pages/patterns/delete/index.mdx +++ b/packages/paste-website/src/pages/patterns/delete/index.mdx @@ -48,13 +48,9 @@ export const getStaticProps = async () => { }; }; - - - ---- diff --git a/packages/paste-website/src/pages/patterns/empty-state/index.mdx b/packages/paste-website/src/pages/patterns/empty-state/index.mdx index 6b0d3216eb..ed981aab7d 100644 --- a/packages/paste-website/src/pages/patterns/empty-state/index.mdx +++ b/packages/paste-website/src/pages/patterns/empty-state/index.mdx @@ -44,13 +44,9 @@ export const getStaticProps = async () => { }; }; - - - ---- diff --git a/packages/paste-website/src/pages/patterns/error-state/index.mdx b/packages/paste-website/src/pages/patterns/error-state/index.mdx index b9f10a613c..e125eb58fa 100644 --- a/packages/paste-website/src/pages/patterns/error-state/index.mdx +++ b/packages/paste-website/src/pages/patterns/error-state/index.mdx @@ -35,13 +35,9 @@ export const getStaticProps = async () => { }; }; - - - ---- diff --git a/packages/paste-website/src/pages/patterns/filter-group/index.mdx b/packages/paste-website/src/pages/patterns/filter-group/index.mdx index 6320962058..6f6e2a76de 100644 --- a/packages/paste-website/src/pages/patterns/filter-group/index.mdx +++ b/packages/paste-website/src/pages/patterns/filter-group/index.mdx @@ -36,13 +36,11 @@ export const getStaticProps = async () => { }; }; - + - ---- diff --git a/packages/paste-website/src/pages/patterns/index.mdx b/packages/paste-website/src/pages/patterns/index.mdx index 7e572e191f..85e2be5724 100644 --- a/packages/paste-website/src/pages/patterns/index.mdx +++ b/packages/paste-website/src/pages/patterns/index.mdx @@ -16,6 +16,7 @@ import {UnorderedList, ListItem} from '@twilio-paste/list'; import {Tabs, TabList, Tab, TabPanels, TabPanel} from '@twilio-paste/tabs'; import {Table, THead, TBody, Td, Th, Tr} from '@twilio-paste/table'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; +import {PageHeader, PageHeaderDetails, PageHeaderHeading, PageHeaderSetting, PageHeaderSeparator} from "@twilio-paste/page-header"; import {SiteLink} from '../../components/SiteLink.tsx'; import {Breadcrumb, BreadcrumbItem} from '../../components/breadcrumb'; import {SidebarCategoryRoutes} from '../../constants'; @@ -36,18 +37,19 @@ export const getStaticProps = async () => { }; }; - - - - Home - - - {meta.title} - - - - ---- + + + + Home + + + + {meta.title} + + + + + ## What is a pattern? diff --git a/packages/paste-website/src/pages/patterns/navigation/index.mdx b/packages/paste-website/src/pages/patterns/navigation/index.mdx index 030fef1401..914226d0df 100644 --- a/packages/paste-website/src/pages/patterns/navigation/index.mdx +++ b/packages/paste-website/src/pages/patterns/navigation/index.mdx @@ -34,13 +34,9 @@ export const getStaticProps = async () => { }; }; - - - ---- diff --git a/packages/paste-website/src/pages/patterns/notifications-and-feedback/index.mdx b/packages/paste-website/src/pages/patterns/notifications-and-feedback/index.mdx index 8314fd76d0..1ef4b8cf0f 100644 --- a/packages/paste-website/src/pages/patterns/notifications-and-feedback/index.mdx +++ b/packages/paste-website/src/pages/patterns/notifications-and-feedback/index.mdx @@ -47,14 +47,9 @@ export const getStaticProps = async () => { }; }; - - - ---- - diff --git a/packages/paste-website/src/pages/patterns/privacy/index.mdx b/packages/paste-website/src/pages/patterns/privacy/index.mdx index 57630bdebd..e88e30aaef 100644 --- a/packages/paste-website/src/pages/patterns/privacy/index.mdx +++ b/packages/paste-website/src/pages/patterns/privacy/index.mdx @@ -40,13 +40,9 @@ export const getStaticProps = async () => { }; }; - - - ---- diff --git a/packages/paste-website/src/pages/patterns/status/index.mdx b/packages/paste-website/src/pages/patterns/status/index.mdx index dbb92deb6e..2929ff1fab 100644 --- a/packages/paste-website/src/pages/patterns/status/index.mdx +++ b/packages/paste-website/src/pages/patterns/status/index.mdx @@ -78,13 +78,9 @@ export const getStaticProps = async () => { }; }; - - - ---- diff --git a/packages/paste-website/src/pages/primitives/combobox-primitive/index.mdx b/packages/paste-website/src/pages/primitives/combobox-primitive/index.mdx index c082e8f7dc..a274efdf2d 100644 --- a/packages/paste-website/src/pages/primitives/combobox-primitive/index.mdx +++ b/packages/paste-website/src/pages/primitives/combobox-primitive/index.mdx @@ -48,10 +48,9 @@ export const getStaticProps = async () => { githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/combobox" storybookUrl="/?path=/story/primitives-combobox--dropdown-combobox" data={props.data} + shoudShowInPageNav={false} /> ---- - diff --git a/packages/paste-website/src/pages/primitives/disclosure-primitive/index.mdx b/packages/paste-website/src/pages/primitives/disclosure-primitive/index.mdx index b7a1e39b61..cb7b7f5cf8 100644 --- a/packages/paste-website/src/pages/primitives/disclosure-primitive/index.mdx +++ b/packages/paste-website/src/pages/primitives/disclosure-primitive/index.mdx @@ -47,10 +47,9 @@ export const getStaticProps = async () => { githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/disclosure" storybookUrl="/?path=/story/primitives-disclosure--basic-example" data={props.data} + shoudShowInPageNav={false} /> ---- - diff --git a/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx b/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx index a352819a4f..1df33e097c 100644 --- a/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx +++ b/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx @@ -54,10 +54,9 @@ export const getStaticProps = async () => { githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/listbox" storybookUrl="/?path=/story/primitives-listbox--vertical-listbox" data={props.data} + shoudShowInPageNav={false} /> ---- - diff --git a/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx b/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx index 22b6ffe020..7931d09e66 100644 --- a/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx +++ b/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx @@ -48,10 +48,9 @@ export const getStaticProps = async () => { githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/menu" storybookUrl="/?path=/story/primitives-menu--simple-menu" data={props.data} + shoudShowInPageNav={false} /> ---- - diff --git a/packages/paste-website/src/pages/primitives/modal-dialog-primitive/index.mdx b/packages/paste-website/src/pages/primitives/modal-dialog-primitive/index.mdx index 0fd4816366..0d23eb9928 100644 --- a/packages/paste-website/src/pages/primitives/modal-dialog-primitive/index.mdx +++ b/packages/paste-website/src/pages/primitives/modal-dialog-primitive/index.mdx @@ -38,10 +38,9 @@ export const getStaticProps = async () => { githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/modal-dialog" storybookUrl="/?path=/story/primitives-modaldialog--custom-overlay-and-content" data={props.data} + shoudShowInPageNav={false} /> ---- - diff --git a/packages/paste-website/src/pages/primitives/non-modal-dialog-primitive/index.mdx b/packages/paste-website/src/pages/primitives/non-modal-dialog-primitive/index.mdx index 2164df3414..f4c30b9c24 100644 --- a/packages/paste-website/src/pages/primitives/non-modal-dialog-primitive/index.mdx +++ b/packages/paste-website/src/pages/primitives/non-modal-dialog-primitive/index.mdx @@ -50,10 +50,9 @@ export const getStaticProps = async () => { githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/non-modal-dialog" storybookUrl="/?path=/story/primitives-non-modal-dialog--simple-non-modal-dialog" data={props.data} + shoudShowInPageNav={false} /> ---- - diff --git a/packages/paste-website/src/pages/primitives/tabs-primitive/index.mdx b/packages/paste-website/src/pages/primitives/tabs-primitive/index.mdx index 5c326fe7ad..006cf39285 100644 --- a/packages/paste-website/src/pages/primitives/tabs-primitive/index.mdx +++ b/packages/paste-website/src/pages/primitives/tabs-primitive/index.mdx @@ -41,10 +41,9 @@ export const getStaticProps = async () => { githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/tabs" storybookUrl="/?path=/story/primitives-tabs--horizontal-tabs" data={props.data} + shoudShowInPageNav={false} /> ---- - diff --git a/packages/paste-website/src/pages/primitives/tooltip-primitive/index.mdx b/packages/paste-website/src/pages/primitives/tooltip-primitive/index.mdx index 84125e6ef9..4ed438d8a1 100644 --- a/packages/paste-website/src/pages/primitives/tooltip-primitive/index.mdx +++ b/packages/paste-website/src/pages/primitives/tooltip-primitive/index.mdx @@ -44,10 +44,9 @@ export const getStaticProps = async () => { githubUrl="https://github.com/twilio-labs/paste/tree/main/packages/paste-core/primitives/tooltip" storybookUrl="/?path=/story/primitives-tooltip--simple-tooltip" data={props.data} + shoudShowInPageNav={false} /> ---- - diff --git a/packages/paste-website/src/pages/roadmap/index.mdx b/packages/paste-website/src/pages/roadmap/index.mdx index 4055f038dd..22b17fbc0a 100644 --- a/packages/paste-website/src/pages/roadmap/index.mdx +++ b/packages/paste-website/src/pages/roadmap/index.mdx @@ -5,6 +5,9 @@ export const meta = { slug: '/roadmap/', }; +import {PageHeaderSeparator, PageHeader, PageHeaderDetails, PageHeaderHeading, PageHeaderParagraph} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator' + import {Roadmap, RoadmapAside} from '../../components/Roadmap'; import DefaultLayout from '../../layouts/DefaultLayout'; import {getRoadmap, getNavigationData} from '../../utils/api'; @@ -28,9 +31,12 @@ export const getStaticProps = async () => { -

{meta.title}

- -

{meta.description}

+ + + {meta.title} + {meta.description} + + diff --git a/packages/paste-website/src/pages/theme/changing-theme.mdx b/packages/paste-website/src/pages/theme/changing-theme.mdx index 3a60d22c29..50a844e2b3 100644 --- a/packages/paste-website/src/pages/theme/changing-theme.mdx +++ b/packages/paste-website/src/pages/theme/changing-theme.mdx @@ -4,6 +4,9 @@ export const meta = { slug: '/theme/changing-theme', }; +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator' + import {SidebarCategoryRoutes} from '../../constants'; import DefaultLayout from '../../layouts/DefaultLayout'; import {getNavigationData} from '../../utils/api'; @@ -19,9 +22,12 @@ export const getStaticProps = async () => { }; }; - + + + + + ---- @@ -82,7 +88,9 @@ import {Customization} from '@twilio-paste/core/customization'; The main Paste Components Figma library includes variables in our most-used themes as modes. Check out [Figma's documentation on switching modes](https://help.figma.com/hc/en-us/articles/15343816063383-Modes-for-variables#h_01H3ADKDF7JBTRV1Z5P1X1DZVE) to learn how to swap from the default "Twilio" theme mode to other modes. -As long as every part of your UI (even the white background fill on your frames) is referencing tokens in Figma, swapping between modes will work smoothly. Switching modes won't work for raw hex codes, for example, because Figma won't know what to swap them to. +As long as every part of your UI (even the white background fill on your frames) is referencing our design tokens in Figma, swapping between modes (i.e., themes) will work smoothly. Your design files will be 1-to-1 with the components your engineering team uses, which makes upgrading, migrating, and switching visual themes in both code and design effortless. + +Switching modes won't work for *detached components* that use raw hex codes, for example, because Figma won't know what to swap them to and you are *no longer using Paste*. diff --git a/packages/paste-website/src/pages/theme/dark-theme.mdx b/packages/paste-website/src/pages/theme/dark-theme.mdx index c057018e34..f369a1ac2d 100644 --- a/packages/paste-website/src/pages/theme/dark-theme.mdx +++ b/packages/paste-website/src/pages/theme/dark-theme.mdx @@ -5,6 +5,8 @@ export const meta = { }; import {Box} from '@twilio-paste/box'; +import {PageHeaderSeparator} from '@twilio-paste/page-header' +import {Separator} from '@twilio-paste/separator' import {AspectRatio} from '@twilio-paste/aspect-ratio'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {SidebarCategoryRoutes} from '../../constants'; @@ -23,9 +25,11 @@ export const getStaticProps = async () => { }; }; - - ---- + + + + + diff --git a/packages/paste-website/src/pages/theme/index.mdx b/packages/paste-website/src/pages/theme/index.mdx index 5772c1fb0d..b620097a32 100644 --- a/packages/paste-website/src/pages/theme/index.mdx +++ b/packages/paste-website/src/pages/theme/index.mdx @@ -29,13 +29,14 @@ export const getStaticProps = async () => { }; }; - ---- diff --git a/packages/paste-website/src/pages/tokens/design-tokens-package/index.mdx b/packages/paste-website/src/pages/tokens/design-tokens-package/index.mdx index 8cec7e0ed0..95221efc6e 100644 --- a/packages/paste-website/src/pages/tokens/design-tokens-package/index.mdx +++ b/packages/paste-website/src/pages/tokens/design-tokens-package/index.mdx @@ -26,14 +26,14 @@ export const getStaticProps = async () => { }; }; - ---- - diff --git a/packages/paste-website/src/pages/tokens/index.mdx b/packages/paste-website/src/pages/tokens/index.mdx index b8b13ef929..2078959f60 100644 --- a/packages/paste-website/src/pages/tokens/index.mdx +++ b/packages/paste-website/src/pages/tokens/index.mdx @@ -7,6 +7,8 @@ export const meta = { import {Text} from '@twilio-paste/text'; import {Box} from '@twilio-paste/box'; import {Anchor} from '@twilio-paste/anchor'; +import {PageHeaderSeparator} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import {Callout, CalloutHeading, CalloutText} from '@twilio-paste/callout'; import {ResponsiveImage} from '../../components/ResponsiveImage'; import {SidebarCategoryRoutes} from '../../constants'; @@ -33,9 +35,11 @@ export const getStaticProps = async () => { description={meta.description} categoryRoute={SidebarCategoryRoutes.TOKENS} shouldShowBreadcrumbs={false} -/> - ---- +> + + + + diff --git a/packages/paste-website/src/pages/tokens/list/index.mdx b/packages/paste-website/src/pages/tokens/list/index.mdx index 6245f338ac..9a852ff7fb 100644 --- a/packages/paste-website/src/pages/tokens/list/index.mdx +++ b/packages/paste-website/src/pages/tokens/list/index.mdx @@ -5,6 +5,8 @@ export const meta = { }; import {Box} from '@twilio-paste/box'; +import {PageHeaderSetting} from '@twilio-paste/page-header'; +import {Separator} from '@twilio-paste/separator'; import {TokensList} from '../../../components/tokens-list'; import {SidebarCategoryRoutes} from '../../../constants'; import DefaultLayout from '../../../layouts/DefaultLayout'; @@ -25,15 +27,10 @@ export const getStaticProps = async () => { name="Token List" categoryRoute={SidebarCategoryRoutes.TOKENS} description="All tokens that are available in the Paste token system." -/> - - +> + + + + diff --git a/packages/paste-website/src/utils/DataUtils.ts b/packages/paste-website/src/utils/DataUtils.ts index a8bac560f5..2b600db41b 100644 --- a/packages/paste-website/src/utils/DataUtils.ts +++ b/packages/paste-website/src/utils/DataUtils.ts @@ -22,13 +22,14 @@ type NavData = { }; export const getNormalizedHeaderData = (data: ApiData): ApiData => { - const { name: packageName, version, description, status, Figma, ...rest } = data; + const { name: packageName, version, description, status, Feature, Figma, ...rest } = data; return { name: getHumanizedNameFromPackageName(packageName), packageName, version, description, + Feature, packageStatus: status ? sentenceCase(status) : undefined, figmaStatus: Figma, ...mapKeys(rest, (_noop, objKey) => camelCase(objKey)), diff --git a/yarn.lock b/yarn.lock index 391b64c681..97ae48267a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -44846,8 +44846,8 @@ resolve@^2.0.0-next.3: linkType: hard "vite@npm:^4.5.1": - version: 4.5.1 - resolution: "vite@npm:4.5.1" + version: 4.5.2 + resolution: "vite@npm:4.5.2" dependencies: esbuild: ^0.18.10 fsevents: ~2.3.2 @@ -44881,7 +44881,7 @@ resolve@^2.0.0-next.3: optional: true bin: vite: bin/vite.js - checksum: 72b3584b3d3b8d14e8a37f0248e47fb8b4d02ab35de5b5a8e5ca8ae55c3be2aab73760dc36edac4fa722de182f78cc492eb44888fcb4a9a0712c4605dad644f9 + checksum: 9d1f84f703c2660aced34deee7f309278ed368880f66e9570ac115c793d91f7fffb80ab19c602b3c8bc1341fe23437d86a3fcca2a9ef82f7ef0cdac5a40d0c86 languageName: node linkType: hard