diff --git a/.changeset/brave-forks-care.md b/.changeset/brave-forks-care.md new file mode 100644 index 0000000000..bfd0a4c545 --- /dev/null +++ b/.changeset/brave-forks-care.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/design-tokens": minor +"@twilio-paste/core": minor +--- + +[Design tokens] add new border radius tokens (40-90) for new homepage and ai kit' diff --git a/packages/paste-core/components/skeleton-loader/type-docs.json b/packages/paste-core/components/skeleton-loader/type-docs.json index 3a65ae4f62..0ae10da041 100644 --- a/packages/paste-core/components/skeleton-loader/type-docs.json +++ b/packages/paste-core/components/skeleton-loader/type-docs.json @@ -367,35 +367,35 @@ "externalProp": true }, "borderBottomLeftRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, "description": "Responsive prop of BorderRadius tokens for the CSS `border-bottom-left-radius` property" }, "borderBottomRightRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, "description": "Responsive prop of BorderRadius tokens for the CSS `border-bottom-right-radius` property" }, "borderRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": "borderRadius20", "required": false, "externalProp": false, "description": "Responsive prop of BorderRadius tokens for the CSS `border-radius` property" }, "borderTopLeftRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, "description": "Responsive prop of BorderRadius tokens for the CSS `border-top-left-radius` property" }, "borderTopRightRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json index a2ffa59084..2236b63028 100644 --- a/packages/paste-core/primitives/box/type-docs.json +++ b/packages/paste-core/primitives/box/type-docs.json @@ -783,14 +783,14 @@ "description": "Responsive prop of BorderColor tokens for the CSS `border-bottom-color` property" }, "borderBottomLeftRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, "description": "Responsive prop of BorderRadius tokens for the CSS `border-bottom-left-radius` property" }, "borderBottomRightRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -853,7 +853,7 @@ "description": "Responsive prop of BorderWidth tokens for the CSS `border-left-width` property" }, "borderRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -916,14 +916,14 @@ "description": "Responsive prop of BorderColor tokens for the CSS `border-top-color` property" }, "borderTopLeftRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, "description": "Responsive prop of BorderRadius tokens for the CSS `border-top-left-radius` property" }, "borderTopRightRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, diff --git a/packages/paste-core/primitives/sibling-box/type-docs.json b/packages/paste-core/primitives/sibling-box/type-docs.json index 2ad20a8a11..eac1014e4e 100644 --- a/packages/paste-core/primitives/sibling-box/type-docs.json +++ b/packages/paste-core/primitives/sibling-box/type-docs.json @@ -885,14 +885,14 @@ "description": "Responsive prop of BorderColor tokens for the CSS `border-bottom-color` property" }, "borderBottomLeftRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, "description": "Responsive prop of BorderRadius tokens for the CSS `border-bottom-left-radius` property" }, "borderBottomRightRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -955,7 +955,7 @@ "description": "Responsive prop of BorderWidth tokens for the CSS `border-left-width` property" }, "borderRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -1018,14 +1018,14 @@ "description": "Responsive prop of BorderColor tokens for the CSS `border-top-color` property" }, "borderTopLeftRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, "description": "Responsive prop of BorderRadius tokens for the CSS `border-top-left-radius` property" }, "borderTopRightRadius": { - "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | (\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadiusCircle\" | \"borderRadiusPill\" | null)[] | { ...; }", + "type": "\"borderRadius0\" | \"borderRadius10\" | \"borderRadius20\" | \"borderRadius30\" | \"borderRadius40\" | \"borderRadius50\" | \"borderRadius60\" | \"borderRadius70\" | \"borderRadius80\" | ... 4 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, diff --git a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap index 48f6ab3eba..1bcac4214d 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -107,12 +107,18 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"color-border-decorative-10-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(0, 20, 137)\\", \\"color-border-decorative-30-weaker\\": \\"rgb(13, 58, 31)\\", - \\"border-radius-0\\": \\"0\\", - \\"border-radius-10\\": \\"2px\\", - \\"border-radius-20\\": \\"4px\\", - \\"border-radius-30\\": \\"8px\\", \\"border-radius-circle\\": \\"50%\\", + \\"border-radius-90\\": \\"32px\\", + \\"border-radius-80\\": \\"28px\\", \\"border-radius-pill\\": \\"100px\\", + \\"border-radius-70\\": \\"24px\\", + \\"border-radius-60\\": \\"20px\\", + \\"border-radius-50\\": \\"16px\\", + \\"border-radius-40\\": \\"12px\\", + \\"border-radius-0\\": \\"0\\", + \\"border-radius-30\\": \\"8px\\", + \\"border-radius-20\\": \\"4px\\", + \\"border-radius-10\\": \\"2px\\", \\"border-width-0\\": \\"0\\", \\"border-width-10\\": \\"1px\\", \\"border-width-20\\": \\"2px\\", @@ -521,12 +527,18 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"color-border-decorative-10-weaker\\": \\"rgb(225, 227, 234)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(204, 228, 255)\\", \\"color-border-decorative-30-weaker\\": \\"rgb(209, 250, 224)\\", - \\"border-radius-0\\": \\"0\\", - \\"border-radius-10\\": \\"2px\\", - \\"border-radius-20\\": \\"4px\\", - \\"border-radius-30\\": \\"8px\\", \\"border-radius-circle\\": \\"50%\\", + \\"border-radius-90\\": \\"32px\\", + \\"border-radius-80\\": \\"28px\\", \\"border-radius-pill\\": \\"100px\\", + \\"border-radius-70\\": \\"24px\\", + \\"border-radius-60\\": \\"20px\\", + \\"border-radius-50\\": \\"16px\\", + \\"border-radius-40\\": \\"12px\\", + \\"border-radius-0\\": \\"0\\", + \\"border-radius-30\\": \\"8px\\", + \\"border-radius-20\\": \\"4px\\", + \\"border-radius-10\\": \\"2px\\", \\"border-width-0\\": \\"0\\", \\"border-width-10\\": \\"1px\\", \\"border-width-20\\": \\"2px\\", @@ -935,12 +947,18 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"color-border-decorative-10-weaker\\": \\"rgb(225, 227, 234)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(204, 228, 255)\\", \\"color-border-decorative-30-weaker\\": \\"rgb(209, 250, 224)\\", - \\"border-radius-0\\": \\"0\\", - \\"border-radius-10\\": \\"2px\\", - \\"border-radius-20\\": \\"4px\\", - \\"border-radius-30\\": \\"8px\\", \\"border-radius-circle\\": \\"50%\\", + \\"border-radius-90\\": \\"32px\\", + \\"border-radius-80\\": \\"28px\\", \\"border-radius-pill\\": \\"100px\\", + \\"border-radius-70\\": \\"24px\\", + \\"border-radius-60\\": \\"20px\\", + \\"border-radius-50\\": \\"16px\\", + \\"border-radius-40\\": \\"12px\\", + \\"border-radius-0\\": \\"0\\", + \\"border-radius-30\\": \\"8px\\", + \\"border-radius-20\\": \\"4px\\", + \\"border-radius-10\\": \\"2px\\", \\"border-width-0\\": \\"0\\", \\"border-width-10\\": \\"1px\\", \\"border-width-20\\": \\"2px\\", @@ -1349,12 +1367,18 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"color-border-decorative-10-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(4, 60, 181)\\", \\"color-border-decorative-30-weaker\\": \\"rgb(14, 124, 58)\\", - \\"border-radius-0\\": \\"0\\", - \\"border-radius-10\\": \\"2px\\", - \\"border-radius-20\\": \\"4px\\", - \\"border-radius-30\\": \\"8px\\", \\"border-radius-circle\\": \\"50%\\", + \\"border-radius-90\\": \\"32px\\", + \\"border-radius-80\\": \\"28px\\", \\"border-radius-pill\\": \\"100px\\", + \\"border-radius-70\\": \\"24px\\", + \\"border-radius-60\\": \\"20px\\", + \\"border-radius-50\\": \\"16px\\", + \\"border-radius-40\\": \\"12px\\", + \\"border-radius-0\\": \\"0\\", + \\"border-radius-30\\": \\"8px\\", + \\"border-radius-20\\": \\"4px\\", + \\"border-radius-10\\": \\"2px\\", \\"border-width-0\\": \\"0\\", \\"border-width-10\\": \\"1px\\", \\"border-width-20\\": \\"2px\\", @@ -1763,12 +1787,18 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-border-decorative-10-weaker\\": \\"rgb(225, 227, 234)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(204, 228, 255)\\", \\"color-border-decorative-30-weaker\\": \\"rgb(209, 250, 224)\\", - \\"border-radius-0\\": \\"0\\", - \\"border-radius-10\\": \\"2px\\", - \\"border-radius-20\\": \\"4px\\", - \\"border-radius-30\\": \\"8px\\", \\"border-radius-circle\\": \\"50%\\", + \\"border-radius-90\\": \\"32px\\", + \\"border-radius-80\\": \\"28px\\", \\"border-radius-pill\\": \\"100px\\", + \\"border-radius-70\\": \\"24px\\", + \\"border-radius-60\\": \\"20px\\", + \\"border-radius-50\\": \\"16px\\", + \\"border-radius-40\\": \\"12px\\", + \\"border-radius-0\\": \\"0\\", + \\"border-radius-30\\": \\"8px\\", + \\"border-radius-20\\": \\"4px\\", + \\"border-radius-10\\": \\"2px\\", \\"border-width-0\\": \\"0\\", \\"border-width-10\\": \\"1px\\", \\"border-width-20\\": \\"2px\\", diff --git a/packages/paste-design-tokens/tokens/aliases/border-radius.yml b/packages/paste-design-tokens/tokens/aliases/border-radius.yml index 19c91cb24c..b26fdfdd96 100644 --- a/packages/paste-design-tokens/tokens/aliases/border-radius.yml +++ b/packages/paste-design-tokens/tokens/aliases/border-radius.yml @@ -3,5 +3,11 @@ aliases: border-radius-10: "2px" border-radius-20: "4px" border-radius-30: "8px" + border-radius-40: "12px" + border-radius-50: "16px" + border-radius-60: "20px" + border-radius-70: "24px" + border-radius-80: "28px" + border-radius-90: "32px" border-radius-circle: "50%" border-radius-pill: "100px" diff --git a/packages/paste-design-tokens/tokens/global/border-radius.yml b/packages/paste-design-tokens/tokens/global/border-radius.yml index 6fac264301..86b02cabed 100644 --- a/packages/paste-design-tokens/tokens/global/border-radius.yml +++ b/packages/paste-design-tokens/tokens/global/border-radius.yml @@ -9,13 +9,31 @@ props: comment: Border radius reset border-radius-10: value: "{!border-radius-10}" - comment: Small border radius + comment: Smallest border radius border-radius-20: value: "{!border-radius-20}" - comment: Large border radius + comment: Small border radius border-radius-30: value: "{!border-radius-30}" + comment: Small-medium border radius + border-radius-40: + value: "{!border-radius-40}" + comment: Medium border radius + border-radius-50: + value: "{!border-radius-50}" + comment: Medium-large border radius + border-radius-60: + value: "{!border-radius-60}" + comment: Large border radiusr + border-radius-70: + value: "{!border-radius-70}" comment: Larger border radius + border-radius-80: + value: "{!border-radius-80}" + comment: Extra-large border radius + border-radius-90: + value: "{!border-radius-90}" + comment: Largest border radius border-radius-circle: value: "{!border-radius-circle}" comment: Circular border radius diff --git a/packages/paste-website/public/images/avatars/entity-avatar.png b/packages/paste-website/public/images/avatars/entity-avatar.png new file mode 100644 index 0000000000..ed28676d4e Binary files /dev/null and b/packages/paste-website/public/images/avatars/entity-avatar.png differ diff --git a/packages/paste-website/src/assets/illustrations/DoodleLoopFooterSide.tsx b/packages/paste-website/src/assets/illustrations/DoodleLoopFooterSide.tsx new file mode 100644 index 0000000000..de8ecae3c7 --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/DoodleLoopFooterSide.tsx @@ -0,0 +1,244 @@ +/* + * import { animated, useSpring } from "@twilio-paste/animation-library"; + * import { useTheme } from "@twilio-paste/theme"; + * import * as React from "react"; + * import VisibilitySensor from "react-visibility-sensor"; + */ + +// const dashArray = 350; + +export const DoodleLoopFooterSide = (): JSX.Element => { + /* + * const [show, setShow] = React.useState(false); + * const theme = useTheme(); + */ + + /* + * function handleVisibilityChange(isVisible: boolean): void { + * if (!show) { + * setShow(isVisible); + * } + * } + */ + + /* + * const styles = useSpring({ + * x: show ? 0 : -1 * dashArray, + * config: { mass: 1, tension: 280, friction: 40 }, + * }); + */ + + return ( + /* + * + * + */ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + /* + * + * + */ + ); +}; diff --git a/packages/paste-website/src/assets/illustrations/NewDoodleLoop.tsx b/packages/paste-website/src/assets/illustrations/NewDoodleLoop.tsx new file mode 100644 index 0000000000..a68f755808 --- /dev/null +++ b/packages/paste-website/src/assets/illustrations/NewDoodleLoop.tsx @@ -0,0 +1,235 @@ +/* + * import { animated, useSpring } from "@twilio-paste/animation-library"; + * import { useTheme } from "@twilio-paste/theme"; + * import * as React from "react"; + * import VisibilitySensor from "react-visibility-sensor"; + */ + +// const dashArray = 50; + +export const NewDoodleLoop = (): JSX.Element => { + /* + * const [show, setShow] = React.useState(false); + * const theme = useTheme(); + */ + + /* + * function handleVisibilityChange(isVisible: boolean): void { + * if (!show) { + * setShow(isVisible); + * } + * } + */ + + /* + * const styles = useSpring({ + * x: show ? 0 : -1 * dashArray, + * config: { mass: 1, tension: 280, friction: 40 }, + * }); + */ + + return ( + /* + * + * + */ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + /* + * + * + */ + ); +}; diff --git a/packages/paste-website/src/assets/images/acme.png b/packages/paste-website/src/assets/images/acme.png new file mode 100644 index 0000000000..22c9a175ae Binary files /dev/null and b/packages/paste-website/src/assets/images/acme.png differ diff --git a/packages/paste-website/src/components/homepage/Accessibility.tsx b/packages/paste-website/src/components/homepage/Accessibility.tsx index 6c935d2e9a..651835fb80 100644 --- a/packages/paste-website/src/components/homepage/Accessibility.tsx +++ b/packages/paste-website/src/components/homepage/Accessibility.tsx @@ -19,8 +19,11 @@ import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs"; import { useUID } from "@twilio-paste/uid-library"; import * as React from "react"; +import { DoodleLoopFooterSide } from "../../assets/illustrations/DoodleLoopFooterSide"; +import { NewDoodleLoop } from "../../assets/illustrations/NewDoodleLoop"; import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; import { BouncyAnchor } from "./BouncyAnchor"; +import { SectionContainer } from "./SectionContainer"; import { SectionSeparator } from "./SectionSeparator"; const Accessibility: React.FC = (): React.ReactElement => { @@ -31,20 +34,24 @@ const Accessibility: React.FC = (): React.ReactElement => { const modalHeadingID = useUID(); return ( - + + + + Accessibility @@ -66,82 +73,83 @@ const Accessibility: React.FC = (): React.ReactElement => { Keyboard navigation and focus management to allow task completion through a variety of input devices. - - - - - - Focus management - Screen reader support - Keyboard support - - - - - - - - - Focus management - - - - All elements required to interact with the modal, including closing or acknowledging it, are - contained in the modal since they trap focus, and users can't interact with the - underlying page. - - - - - - - - - - - - - - screen reader support - - - - - keyboard support - - - - + + + + + + Focus management + Screen reader support + Keyboard support + + + + + + + + + Focus management + + + + All elements required to interact with the modal, including closing or acknowledging it, are + contained in the modal since they trap focus, and users can't interact with the underlying + page. + + + + + + + + + + + + + + screen reader support + + + + + keyboard support + + + + - + + + + + ); }; diff --git a/packages/paste-website/src/components/homepage/BouncyAnchor.tsx b/packages/paste-website/src/components/homepage/BouncyAnchor.tsx index d3a7576719..623f8df3e1 100644 --- a/packages/paste-website/src/components/homepage/BouncyAnchor.tsx +++ b/packages/paste-website/src/components/homepage/BouncyAnchor.tsx @@ -3,7 +3,11 @@ import { Box } from "@twilio-paste/box"; import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; import * as React from "react"; -const BouncyAnchor: React.FC<{ text: string; href: string }> = ({ text, href }): JSX.Element => { +const BouncyAnchor: React.FC<{ text: string; href: string; inverse?: boolean }> = ({ + text, + href, + inverse = false, +}): JSX.Element => { const [hovered, setHovered] = React.useState(false); const handleMouseEnter = (): void => { @@ -15,7 +19,12 @@ const BouncyAnchor: React.FC<{ text: string; href: string }> = ({ text, href }): return ( - + {text} = ({ text, href }): transform={hovered ? "translateY(1px) translateX(4px)" : "translateY(1px) translateX(0)"} transition="all 100ms ease" > - + ); diff --git a/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx index d1756d8033..d9e9075dc4 100644 --- a/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx +++ b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx @@ -6,6 +6,7 @@ import * as React from "react"; import DesignTool from "../../assets/illustrations/illo_design-tool.svg"; import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { SectionContainer } from "./SectionContainer"; const StatBox: React.FC<{ stat: string; description: string }> = ({ stat, description }): React.ReactElement => { return ( @@ -29,40 +30,42 @@ const StatBox: React.FC<{ stat: string; description: string }> = ({ stat, descri const CommunityOfBuilders: React.FC = (): React.ReactElement => { return ( - - - - - - Join our community of builders - - - - - - - + + + + + Join our community of builders + + + + + + + + + + - - - - + ); }; diff --git a/packages/paste-website/src/components/homepage/DesignEfficiency.tsx b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx index 29e133c50b..5c7ac92464 100644 --- a/packages/paste-website/src/components/homepage/DesignEfficiency.tsx +++ b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx @@ -1,56 +1,50 @@ import { Box } from "@twilio-paste/box"; import { Heading } from "@twilio-paste/heading"; import { LinkExternalIcon } from "@twilio-paste/icons/esm/LinkExternalIcon"; -import { Paragraph } from "@twilio-paste/paragraph"; import { Text } from "@twilio-paste/text"; import Image from "next/image"; import * as React from "react"; import TokenColors from "../../assets/illustrations/token_colors.svg"; -import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { SectionContainer } from "./SectionContainer"; import { SectionSeparator } from "./SectionSeparator"; const DesignEfficiency: React.FC = (): React.ReactElement => { return ( - - - Design efficiency - - - - Built by designers, for designers - - 1-to-1 code and design libraries means production-ready design prototypes, too. - - With our libraries, you can swap themes easily with Figma variable modes, and prep design files for - efficient design and engineering collaboration. - - - Find us on Figma Community - - icons icons icons icons icons - - - - + + Design efficiency + + + + + Built by designers, for designers + + + 1-to-1 code and design libraries means production-ready design prototypes, too. + + + With our libraries, you can swap themes easily with Figma variable modes, and prep design files for + efficient design and engineering collaboration. + + + Find us on Figma Community + + icons icons icons icons icons + + + - + ); }; diff --git a/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx b/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx index c2319a7c1d..c4c712d8a9 100644 --- a/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx +++ b/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx @@ -1,26 +1,35 @@ import { Box } from "@twilio-paste/box"; -import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; import { Text } from "@twilio-paste/text"; import Image from "next/image"; import * as React from "react"; import PuzzleIllo from "../../assets/illustrations/puzzle_illo.svg"; +import { BouncyAnchor } from "./BouncyAnchor"; const ForTwilioCustomers: React.FC = (): React.ReactElement => { return ( - + - + { lineHeight="lineHeightDisplay20" paddingBottom="space130" > - For Twilio customers + For Twilions and Twilio customers alike - - Some blurb here that’s basically a quick setup guide for customers. - - - Eng quick start - - - Customization overview - - - Figma Community file + + Rapidly build enterprise-grade, inclusive, and extensible experiences that look and feel like your brand. + Paste works great with Flex plugins, CodeExchange apps, and more. + + + + + + + + + - - + + diff --git a/packages/paste-website/src/components/homepage/NewHomeHero.tsx b/packages/paste-website/src/components/homepage/NewHomeHero.tsx index 89888c30e0..bb9783303c 100644 --- a/packages/paste-website/src/components/homepage/NewHomeHero.tsx +++ b/packages/paste-website/src/components/homepage/NewHomeHero.tsx @@ -3,27 +3,17 @@ import { DisplayHeading } from "@twilio-paste/display-heading"; import { Text } from "@twilio-paste/text"; import { useTheme } from "@twilio-paste/theme"; -import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; import CircleIcon from "../icons/CircleIcon"; import { BouncyAnchor } from "./BouncyAnchor"; import { SearchBox } from "./SearchBox"; +import { SectionContainer } from "./SectionContainer"; import { ComponentShowcase } from "./component-showcase"; const HomeHero = (): JSX.Element => { const theme = useTheme(); return ( - - + + { paddingTop="space200" paddingRight="space130" alignSelf="center" - element="HEADER" + maxWidth="600px" + element="HOME_HERO_LEFT_SIDE" > @@ -60,16 +51,18 @@ const HomeHero = (): JSX.Element => { - + + + - + - + ); }; diff --git a/packages/paste-website/src/components/homepage/NewSection.tsx b/packages/paste-website/src/components/homepage/NewSection.tsx index dc9266e981..442ca42873 100644 --- a/packages/paste-website/src/components/homepage/NewSection.tsx +++ b/packages/paste-website/src/components/homepage/NewSection.tsx @@ -2,33 +2,35 @@ import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; import * as React from "react"; -import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { NewDoodleLoop } from "../../assets/illustrations/NewDoodleLoop"; +import { SectionContainer } from "./SectionContainer"; import { WhatsNew } from "./WhatsNew"; const NewSection: React.FC = (): React.ReactElement => { return ( - + We're hiring a Product Designer! Apply here - Read more about our latest release + Read about our latest release Check out our roadmap - + + + + ); }; diff --git a/packages/paste-website/src/components/homepage/SectionContainer.tsx b/packages/paste-website/src/components/homepage/SectionContainer.tsx new file mode 100644 index 0000000000..9474323c58 --- /dev/null +++ b/packages/paste-website/src/components/homepage/SectionContainer.tsx @@ -0,0 +1,20 @@ +import { Box, type BoxProps } from "@twilio-paste/box"; +import * as React from "react"; + +import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; + +export const SectionContainer: React.FC = ({ children, ...props }) => { + return ( + + + {children} + + + ); +}; diff --git a/packages/paste-website/src/components/homepage/SectionSeparator.tsx b/packages/paste-website/src/components/homepage/SectionSeparator.tsx index 1f27d3e396..cc5c10ab92 100644 --- a/packages/paste-website/src/components/homepage/SectionSeparator.tsx +++ b/packages/paste-website/src/components/homepage/SectionSeparator.tsx @@ -1,19 +1,25 @@ import { Box } from "@twilio-paste/box"; +import { Separator } from "@twilio-paste/separator"; import { Text } from "@twilio-paste/text"; import * as React from "react"; interface SectionSeparatorProps { children: React.ReactNode; - gridArea?: string; } -const SectionSeparator: React.FC = ({ children, gridArea }) => { +const SectionSeparator: React.FC = ({ children }) => { return ( - - + + {children} - + ); }; diff --git a/packages/paste-website/src/components/homepage/Templates.tsx b/packages/paste-website/src/components/homepage/Templates.tsx index b14f96e8d4..bf6b4486b4 100644 --- a/packages/paste-website/src/components/homepage/Templates.tsx +++ b/packages/paste-website/src/components/homepage/Templates.tsx @@ -6,11 +6,18 @@ import { Text } from "@twilio-paste/text"; import * as React from "react"; import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { SectionContainer } from "./SectionContainer"; const Templates: React.FC = (): React.ReactElement => { return ( - - + + Explore our templates @@ -47,15 +54,12 @@ const Templates: React.FC = (): React.ReactElement => { rowGap="space70" > templates carousel @@ -68,7 +72,7 @@ const Templates: React.FC = (): React.ReactElement => { - + ); }; diff --git a/packages/paste-website/src/components/homepage/Themeable.tsx b/packages/paste-website/src/components/homepage/Themeable.tsx index cfbf838a94..ab39a7375d 100644 --- a/packages/paste-website/src/components/homepage/Themeable.tsx +++ b/packages/paste-website/src/components/homepage/Themeable.tsx @@ -1,6 +1,8 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable react/jsx-max-depth */ +import { Anchor } from "@twilio-paste/anchor"; import { Box } from "@twilio-paste/box"; import { Heading } from "@twilio-paste/heading"; -import { ArrowForwardIcon } from "@twilio-paste/icons/esm/ArrowForwardIcon"; import { Text } from "@twilio-paste/text"; import Image from "next/image"; import * as React from "react"; @@ -9,66 +11,50 @@ import FigmaLogo from "../../assets/illustrations/figma-logo.svg"; import ReactLogo from "../../assets/illustrations/react-logo.svg"; import TypescriptLogo from "../../assets/illustrations/ts-logo.svg"; import { HOMEPAGE_SITE_CONTENT_MAX_WIDTH } from "../../constants"; +import { BouncyAnchor } from "./BouncyAnchor"; +import { SectionContainer } from "./SectionContainer"; import { SectionSeparator } from "./SectionSeparator"; +import { ThemeableBuilder } from "./ThemeableBuilder"; const Themeable: React.FC = (): React.ReactElement => { return ( - + + Themeable and composable - Themeable and composable - - + + Start from anywhere - With Paste, you can get production-ready experiences up in minutes with our 80+ styled components and - pre-built themes. + With Paste, you can get production-ready experiences up in minutes with our 80+{" "} + styled components and pre-built themes. - Or get complete control by bringing your own theme and creating custom components with our functional - primitives. + Or get complete control by bringing your own theme and creating custom components with our{" "} + functional primitives. - - - Check out our templates - - - - component and primitive builder + + + + - + Built with your favorite technologies, Typescript + React + Figma @@ -79,7 +65,7 @@ const Themeable: React.FC = (): React.ReactElement => { - + ); }; diff --git a/packages/paste-website/src/components/homepage/ThemeableBuilder.tsx b/packages/paste-website/src/components/homepage/ThemeableBuilder.tsx new file mode 100644 index 0000000000..14c03303e0 --- /dev/null +++ b/packages/paste-website/src/components/homepage/ThemeableBuilder.tsx @@ -0,0 +1,322 @@ +// eslint-disable-next-line eslint-comments/disable-enable-pair +/* eslint-disable react/jsx-max-depth */ +import { Anchor } from "@twilio-paste/anchor"; +import { Avatar, AvatarGroup } from "@twilio-paste/avatar"; +import { Badge } from "@twilio-paste/badge"; +import { Box } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { Card } from "@twilio-paste/card"; +import { CustomizationProvider } from "@twilio-paste/customization"; +import { BusinessIcon } from "@twilio-paste/icons/esm/BusinessIcon"; +import { ConnectivityAvailableIcon } from "@twilio-paste/icons/esm/ConnectivityAvailableIcon"; +import { ErrorIcon } from "@twilio-paste/icons/esm/ErrorIcon"; +import { HideIcon } from "@twilio-paste/icons/esm/HideIcon"; +import { ShowIcon } from "@twilio-paste/icons/esm/ShowIcon"; +import { RadioButton, RadioButtonGroup } from "@twilio-paste/radio-button-group"; +import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only"; +import { Separator } from "@twilio-paste/separator"; +import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs"; +import { Text } from "@twilio-paste/text"; +import { Theme } from "@twilio-paste/theme"; +import { useUID, useUIDSeed } from "@twilio-paste/uid-library"; +import Image from "next/image"; +import * as React from "react"; + +import Acme from "../../assets/images/acme.png"; +import { usePreviewThemeContext } from "../../context/PreviewThemeContext"; +import { CopyButton } from "../CopyButton"; +import { CodeBlockOverlayShadow } from "../shortcodes/live-preview/CodeBlockOverlayShadow"; + +const StyledComponentsCard: React.FC = (): React.ReactElement => { + return ( + + + + + + ACME production website + + + + Active + + + + + + + + + + Events + + +8% + + + 301,422 + + + + Violations + + -5% + + + 0 + + + Entities + + + + + + + + + ); +}; + +const CodeEditor: React.FC<{ children: string }> = ({ children }): React.ReactElement => { + const [viewCode, setViewCode] = React.useState(false); + const handleToggleCodeEditor = (): void => { + setViewCode(!viewCode); + }; + const liveEditorId = useUID(); + // const theme = useTheme(); + + return ( + + + + + {/* */} + + {children} + + {viewCode ? null : } + {viewCode ? ( + + + + ) : null} + + ); +}; + +const ComponentsTab: React.FC = (): React.ReactElement => { + const { theme, selectTheme } = usePreviewThemeContext(); + const nameSeed = useUIDSeed(); + const { theme: previewTheme } = usePreviewThemeContext(); + + return ( + <> + + + {["twilio", "default", "dark"].includes(previewTheme) ? ( + + + + ) : ( + + + + )} + Component preview theme} + onChange={(newValue) => { + selectTheme(newValue); + }} + orientation="horizontal" + > + + Default + + + Dark + + + Twilio + + + Something fun + + + Something else fun + + + + + + styled components example codestyled components example codestyled components example codestyled components + example codestyled components example codestyled components example codestyled components example codestyled + components example codestyled components example codestyled components example codestyled components example + codestyled components example codestyled components example codestyled components example codestyled components + example codestyled components example codestyled components example codestyled components example code + + + ); +}; + +const PrimitivesTab: React.FC = (): React.ReactElement => { + return ( + <> + + + + acme logo + + + ACME dev + + + + + 3 Errors + + + + + + + + Events + + + 301,422 + + + + + Violations + + + 12 + + + + + Entities + + + + + + + + + + + Primitives example codePrimitives example codePrimitives example codePrimitives example codePrimitives example + codePrimitives example codePrimitives example codePrimitives example codePrimitives example codePrimitives + example codePrimitives example codePrimitives example codePrimitives example codePrimitives example code + + + ); +}; + +const ThemeableBuilder: React.FC = (): React.ReactElement => { + const selectedTabId = useUID(); + + return ( + + + + Build with styled components + Build with primitives + + + + + + + + + + + + ); +}; + +export { ThemeableBuilder }; diff --git a/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx b/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx index 01917b33c0..76f4e7bedf 100644 --- a/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx +++ b/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx @@ -1,35 +1,60 @@ +import { animated, useSpring } from "@twilio-paste/animation-library"; import { Box } from "@twilio-paste/box"; import { Heading } from "@twilio-paste/heading"; import { CheckboxCheckIcon } from "@twilio-paste/icons/esm/CheckboxCheckIcon"; import { Paragraph } from "@twilio-paste/paragraph"; import { Text } from "@twilio-paste/text"; import * as React from "react"; +import VisibilitySensor from "react-visibility-sensor"; + +import { SectionContainer } from "./SectionContainer"; + +const AnimatedBox = animated(Box); const ThinkingLine: React.FC<{ children: React.ReactNode }> = ({ children }): React.ReactElement => { + const [show, setShow] = React.useState(false); + + function handleVisibilityChange(isVisible: boolean): void { + if (!show) { + setShow(isVisible); + } + } + + const styles = useSpring({ + opacity: show ? 1 : 0.1, + }); + return ( - - - + + + + + + + {children} + - - {children} - - + ); }; const WeDoTheThinking: React.FC = (): React.ReactElement => { return ( - - + + - We do the thinking so you don't have to + + We do the thinking{" "} + + so you don't have to Creating seamless and accessible user experiences can be a tough task. But we help you simplify the journey. @@ -38,26 +63,28 @@ const WeDoTheThinking: React.FC = (): React.ReactElement => { Paste handles the research, design, testing, and engineering of the core building blocks. This frees up your energy to tackle customer challenges instead of UI issues. - - Accessibility standards - User research - Competitive analysis - Product requirements - Design & API review - Usage guidelines - Built-in constraints - Dos and Dont's - Performance + + + Accessibility standards + User research + Competitive analysis + Product requirements + Design & API review + Usage guidelines + Built-in constraints + Dos and Dont's + Performance + - + ); }; diff --git a/packages/paste-website/src/components/homepage/WhatsNew.tsx b/packages/paste-website/src/components/homepage/WhatsNew.tsx index 6de29ff5d7..d6e708784e 100644 --- a/packages/paste-website/src/components/homepage/WhatsNew.tsx +++ b/packages/paste-website/src/components/homepage/WhatsNew.tsx @@ -16,10 +16,11 @@ const WhatsNew: React.FC = ({ showExternal, href, children }) => { flexDirection="column" rowGap="space70" gridArea="bottom2" - // width="100%" width="369px" + position="relative" > Auto recharge disabled diff --git a/packages/paste-website/src/components/homepage/component-showcase/ProgressStepsShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ProgressStepsShowcase.tsx deleted file mode 100644 index e99f72a7ca..0000000000 --- a/packages/paste-website/src/components/homepage/component-showcase/ProgressStepsShowcase.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { - ProgressStepComplete, - ProgressStepCurrent, - ProgressStepIncomplete, - ProgressStepSeparator, - ProgressSteps, -} from "@twilio-paste/progress-steps"; -import * as React from "react"; - -export const ProgressStepsShowcase: React.FC = () => { - return ( - - null}> - Account type - - - null}> - General information - - - null} disabled> - Sender types - - - null} disabled> - Connectivity requirements - - - ); -}; diff --git a/packages/paste-website/src/components/homepage/component-showcase/RowOneShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/RowOneShowcase.tsx new file mode 100644 index 0000000000..403695a192 --- /dev/null +++ b/packages/paste-website/src/components/homepage/component-showcase/RowOneShowcase.tsx @@ -0,0 +1,41 @@ +import { Box } from "@twilio-paste/box"; +import { + ProgressStepComplete, + ProgressStepCurrent, + ProgressStepIncomplete, + ProgressStepSeparator, + ProgressSteps, +} from "@twilio-paste/progress-steps"; +import * as React from "react"; + +export const RowOneShowcase: React.FC = () => { + return ( + + + null}> + Account type + + + null}> + General information + + + null} disabled> + Sender types + + + null} disabled> + Connectivity requirements + + + + ); +}; diff --git a/packages/paste-website/src/components/homepage/component-showcase/index.tsx b/packages/paste-website/src/components/homepage/component-showcase/index.tsx index e2d2cde4b1..6150748cd1 100644 --- a/packages/paste-website/src/components/homepage/component-showcase/index.tsx +++ b/packages/paste-website/src/components/homepage/component-showcase/index.tsx @@ -3,13 +3,11 @@ import * as React from "react"; import { ColumnOneShowcase } from "./ColumnOneShowcase"; import { ColumnTwoShowcase } from "./ColumnTwoShowcase"; -import { ProgressStepsShowcase } from "./ProgressStepsShowcase"; +import { RowOneShowcase } from "./RowOneShowcase"; const ComponentShowcase: React.FC = () => { return ( = () => { columnGap="space70" backgroundColor="colorBackgroundInverseStrong" padding="space130" - top="0" height="min-content" width="fit-content" - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - borderBottomLeftRadius="32px" - // eslint-disable-next-line @typescript-eslint/ban-ts-comment - // @ts-expect-error - borderBottomRightRadius="32px" + borderBottomLeftRadius={["borderRadius0", "borderRadius90", "borderRadius90"]} + borderBottomRightRadius={["borderRadius0", "borderRadius90", "borderRadius90"]} zIndex="zIndex10" element="COMPONENT_SHOWCASE" + overflow="hidden" > - - - + diff --git a/packages/paste-website/src/components/site-wrapper-new/site-footer/index.tsx b/packages/paste-website/src/components/site-wrapper-new/site-footer/index.tsx index 356c2f3bab..00a9657bcd 100644 --- a/packages/paste-website/src/components/site-wrapper-new/site-footer/index.tsx +++ b/packages/paste-website/src/components/site-wrapper-new/site-footer/index.tsx @@ -8,7 +8,7 @@ const SiteFooter: React.FC = () => { return ( @@ -45,9 +47,9 @@ const NewHomePage = ({ navigationData }: InferGetStaticPropsType - + {/* - + */} ); };