diff --git a/.changeset/mean-houses-learn.md b/.changeset/mean-houses-learn.md new file mode 100644 index 0000000000..b3de8cca7f --- /dev/null +++ b/.changeset/mean-houses-learn.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/design-tokens": minor +"@twilio-paste/core": minor +--- + +[Design Tokens] added a new design token for color-border-new-weak and made changes to color-text-icon-warning in the Twilio theme to support design updates to Alert and Callout components diff --git a/.changeset/neat-weeks-rhyme.md b/.changeset/neat-weeks-rhyme.md new file mode 100644 index 0000000000..e86797c306 --- /dev/null +++ b/.changeset/neat-weeks-rhyme.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/callout": minor +"@twilio-paste/core": minor +--- + +[Callout] added dismissible functionality to the component diff --git a/.changeset/plenty-rockets-study.md b/.changeset/plenty-rockets-study.md new file mode 100644 index 0000000000..41c3d5046f --- /dev/null +++ b/.changeset/plenty-rockets-study.md @@ -0,0 +1,7 @@ +--- +"@twilio-paste/alert": patch +"@twilio-paste/callout": patch +"@twilio-paste/core": patch +--- + +[Callout, Alert] updated styling diff --git a/packages/paste-core/components/alert/src/Alert.tsx b/packages/paste-core/components/alert/src/Alert.tsx index 5fe6f952ad..61e04acc7e 100644 --- a/packages/paste-core/components/alert/src/Alert.tsx +++ b/packages/paste-core/components/alert/src/Alert.tsx @@ -22,12 +22,17 @@ export const AlertVariants = { NEUTRAL: "neutral", WARNING: "warning", } as const; -export const AlertBackgroundColors = { +export const AlertBackgroundColors: BoxProps["backgroundColor"] = { ERROR: "colorBackgroundErrorWeakest", NEUTRAL: "colorBackgroundNeutralWeakest", WARNING: "colorBackgroundWarningWeakest", } as const; -export const AlertTextColors = { +export const AlertBorderColors: BoxProps["borderColor"] = { + ERROR: "colorBorderErrorWeaker", + NEUTRAL: "colorBorderNeutralWeaker", + WARNING: "colorBorderWarningWeaker", +} as const; +export const AlertTextColors: BoxProps["color"] = { ERROR: "colorTextError", NEUTRAL: "colorTextNeutral", WARNING: "colorTextWarningStrong", @@ -169,10 +174,11 @@ const Alert = React.forwardRef( ( {onDismiss && typeof onDismiss === "function" && ( diff --git a/packages/paste-core/components/callout/__tests__/index.spec.tsx b/packages/paste-core/components/callout/__tests__/index.spec.tsx index 79dfd2e9ac..2bbb4ac4f8 100644 --- a/packages/paste-core/components/callout/__tests__/index.spec.tsx +++ b/packages/paste-core/components/callout/__tests__/index.spec.tsx @@ -1,4 +1,4 @@ -import { render, screen } from "@testing-library/react"; +import { fireEvent, render, screen, waitFor } from "@testing-library/react"; import * as React from "react"; import { Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText } from "../src"; @@ -179,3 +179,47 @@ describe("i18n", () => { expect(icon?.textContent).toEqual("(nouveau)"); }); }); + +describe("Callout dismiss", () => { + it("should not render close button if no dismiss funciton passed", () => { + render( + + This is some text. + , + ); + + const callout = screen.getByTestId("callout"); + + const text = screen.getByText("This is some text."); + expect(text).toBeTruthy(); + + const dismissButton = callout.querySelector('[data-paste-element="CALLOUT_DISMISS_BUTTON"]'); + expect(dismissButton).toBeNull(); + }); + + it("should render close button if dismiss function passed", async () => { + const closeSpy = jest.fn(); + + render( + + This is some text. + , + ); + + const callout = screen.getByTestId("callout"); + + const text = screen.getByText("This is some text."); + expect(text).toBeTruthy(); + + const dismissButton = callout.querySelector('[data-paste-element="CALLOUT_DISMISS_BUTTON"]'); + expect(dismissButton).toBeTruthy(); + + expect(closeSpy).not.toHaveBeenCalled(); + + await waitFor(() => { + fireEvent.click(dismissButton as HTMLElement); + }); + + expect(closeSpy).toHaveBeenCalled(); + }); +}); diff --git a/packages/paste-core/components/callout/package.json b/packages/paste-core/components/callout/package.json index 73436f67e6..31d54947ee 100644 --- a/packages/paste-core/components/callout/package.json +++ b/packages/paste-core/components/callout/package.json @@ -25,13 +25,17 @@ "tsc": "tsc" }, "peerDependencies": { + "@twilio-paste/anchor": "^12.0.0", "@twilio-paste/animation-library": "^2.0.0", "@twilio-paste/box": "^10.0.0", + "@twilio-paste/button": "^14.0.0", "@twilio-paste/color-contrast-utils": "^5.0.0", "@twilio-paste/customization": "^8.0.0", "@twilio-paste/design-tokens": "^10.0.0", "@twilio-paste/icons": "^12.0.0", "@twilio-paste/screen-reader-only": "^13.0.0", + "@twilio-paste/spinner": "^14.0.0", + "@twilio-paste/stack": "^8.0.0", "@twilio-paste/style-props": "^9.0.0", "@twilio-paste/styling-library": "^3.0.0", "@twilio-paste/text": "^10.0.0", @@ -44,13 +48,17 @@ "react-dom": "^16.8.6 || ^17.0.2 || ^18.0.0" }, "devDependencies": { + "@twilio-paste/anchor": "^12.0.0", "@twilio-paste/animation-library": "^2.0.0", "@twilio-paste/box": "^10.1.0", + "@twilio-paste/button": "^14.1.0", "@twilio-paste/color-contrast-utils": "^5.0.0", "@twilio-paste/customization": "^8.1.0", "@twilio-paste/design-tokens": "^10.2.0", "@twilio-paste/icons": "^12.2.0", "@twilio-paste/screen-reader-only": "^13.1.0", + "@twilio-paste/spinner": "^14.0.0", + "@twilio-paste/stack": "^8.0.0", "@twilio-paste/style-props": "^9.1.0", "@twilio-paste/styling-library": "^3.0.0", "@twilio-paste/text": "^10.1.0", diff --git a/packages/paste-core/components/callout/src/Callout.tsx b/packages/paste-core/components/callout/src/Callout.tsx index ba449ff81f..37959e9fdb 100644 --- a/packages/paste-core/components/callout/src/Callout.tsx +++ b/packages/paste-core/components/callout/src/Callout.tsx @@ -1,5 +1,7 @@ import { Box, safelySpreadBoxProps } from "@twilio-paste/box"; import type { BoxProps, BoxStyleProps } from "@twilio-paste/box"; +import { Button } from "@twilio-paste/button"; +import { CloseIcon } from "@twilio-paste/icons/esm/CloseIcon"; import { ErrorIcon } from "@twilio-paste/icons/esm/ErrorIcon"; import { NeutralIcon } from "@twilio-paste/icons/esm/NeutralIcon"; import { NewIcon } from "@twilio-paste/icons/esm/NewIcon"; @@ -43,33 +45,48 @@ export interface CalloutProps extends HTMLPasteProps<"div"> { * @memberof CalloutProps */ marginY?: BoxStyleProps["marginY"]; + /** + * Function to run on dismiss of the Callout. Adds a close button. + * + * @default null + * @memberof CalloutProps + */ + onDismiss?: () => void; + /** + * Title for dismiss label. Only necessary when using onDismiss. + * + * @default 'Dismiss callout' + * @memberof CalloutProps + * @type {string} + */ + i18nDismissLabel?: string; } const variantStyles: Record = { success: { - backgroundColor: "colorBackgroundSuccessWeakest", + backgroundColor: "colorBackgroundWeak", color: "colorTextSuccess", - borderColor: "colorBorderSuccessWeaker", + borderColor: "colorBorderSuccessWeak", }, error: { backgroundColor: "colorBackgroundErrorWeakest", color: "colorTextError", - borderColor: "colorBorderErrorWeaker", + borderColor: "colorBorderErrorWeak", }, warning: { - backgroundColor: "colorBackgroundWarningWeakest", + backgroundColor: "colorBackgroundWeak", color: "colorTextWarningStrong", - borderColor: "colorBorderWarningWeaker", + borderColor: "colorBorderWarningWeak", }, new: { - backgroundColor: "colorBackgroundNewWeakest", + backgroundColor: "colorBackgroundWeak", color: "colorTextNew", - borderColor: "colorBorderNewWeaker", + borderColor: "colorBorderNewWeak", }, neutral: { - backgroundColor: "colorBackgroundNeutralWeakest", + backgroundColor: "colorBackgroundWeak", color: "colorTextNeutral", - borderColor: "colorBorderNeutralWeaker", + borderColor: "colorBorderNeutralWeak", }, }; @@ -90,7 +107,19 @@ const defaultIconLabels: Record = { }; export const Callout = React.forwardRef( - ({ children, variant, element = "CALLOUT", i18nLabel, marginY, ...props }, ref) => { + ( + { + children, + variant, + element = "CALLOUT", + i18nLabel, + marginY, + onDismiss, + i18nDismissLabel = "Dismiss callout", + ...props + }, + ref, + ) => { const IconComponent = variantIcons[variant]; const iconLabel = i18nLabel ? i18nLabel : defaultIconLabels[variant]; @@ -100,19 +129,31 @@ export const Callout = React.forwardRef( ref={ref} element={element} display="flex" + flexDirection="column" marginY={marginY} - padding="space60" - borderStyle="solid" - borderWidth="borderWidth10" - borderRadius="borderRadius30" + rowGap="space50" + paddingTop="space70" + paddingLeft="space70" + paddingRight="space70" + paddingBottom="space90" + borderLeftStyle="solid" + borderLeftWidth="borderWidth20" variant={variant} {...variantStyles[variant]} > - - {IconComponent} - {iconLabel} + + + {IconComponent} + {iconLabel} + + {onDismiss && typeof onDismiss === "function" && ( + + )} - + {children} diff --git a/packages/paste-core/components/callout/stories/index.stories.tsx b/packages/paste-core/components/callout/stories/index.stories.tsx index 1aef3fc743..b4b316ae67 100644 --- a/packages/paste-core/components/callout/stories/index.stories.tsx +++ b/packages/paste-core/components/callout/stories/index.stories.tsx @@ -85,3 +85,46 @@ export const CalloutWithMargin: StoryFn = () => ( ); + +export const DismissibleVsNonDismissibleVariantsWithDetailedBody: StoryFn = () => { + return ( + + {/* eslint-disable-next-line no-console */} + console.log("dismissed!")}> + New callout + Take a look at this list: + + + {/* eslint-disable-next-line no-console */} + console.log("dismissed!")}> + Neutral callout + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum lectus in congue dignissim. Donec + id blandit justo. Nam dignissim eros sem, sit amet commodo enim dapibus nec. Pellentesque at euismod mi. + Aenean dignissim fringilla ipsum, ac mattis justo vehicula sed. Nulla non vestibulum sapien, ut mollis leo. + Aliquam iaculis urna vel efficitur suscipit. Maecenas id mi vel est elementum varius. Maecenas lobortis, nisi + ut pulvinar accumsan, ante felis consequat neque, id mollis mi eros non eros. Quisque sagittis euismod enim ut + lobortis. Etiam ac diam efficitur, dapibus ligula sit amet, auctor ex. Cras lacinia, lacus id consequat + sollicitudin, augue ex laoreet felis, ac blandit tellus erat vel felis. + + + + New callout + Take a look at this list: + + + + Neutral callout + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas bibendum lectus in congue dignissim. Donec + id blandit justo. Nam dignissim eros sem, sit amet commodo enim dapibus nec. Pellentesque at euismod mi. + Aenean dignissim fringilla ipsum, ac mattis justo vehicula sed. Nulla non vestibulum sapien, ut mollis leo. + Aliquam iaculis urna vel efficitur suscipit. Maecenas id mi vel est elementum varius. Maecenas lobortis, nisi + ut pulvinar accumsan, ante felis consequat neque, id mollis mi eros non eros. Quisque sagittis euismod enim ut + lobortis. Etiam ac diam efficitur, dapibus ligula sit amet, auctor ex. Cras lacinia, lacus id consequat + sollicitudin, augue ex laoreet felis, ac blandit tellus erat vel felis. + + + + ); +}; diff --git a/packages/paste-core/components/callout/type-docs.json b/packages/paste-core/components/callout/type-docs.json index 0c323f1aa0..257d893718 100644 --- a/packages/paste-core/components/callout/type-docs.json +++ b/packages/paste-core/components/callout/type-docs.json @@ -433,6 +433,13 @@ "required": false, "externalProp": true }, + "i18nDismissLabel": { + "type": "string", + "defaultValue": "'Dismiss callout'", + "required": false, + "externalProp": false, + "description": "Title for dismiss label. Only necessary when using onDismiss." + }, "i18nLabel": { "type": "string", "defaultValue": "'(neutral)' | '(warning)' | '(error)' | '(success)' | '(new)'", @@ -724,6 +731,13 @@ "required": false, "externalProp": true }, + "onDismiss": { + "type": "() => void", + "defaultValue": "null", + "required": false, + "externalProp": false, + "description": "Function to run on dismiss of the Callout. Adds a close button." + }, "onDoubleClick": { "type": "MouseEventHandler", "defaultValue": null, diff --git a/packages/paste-core/primitives/box/type-docs.json b/packages/paste-core/primitives/box/type-docs.json index 4d831a8fd8..d16bde90d1 100644 --- a/packages/paste-core/primitives/box/type-docs.json +++ b/packages/paste-core/primitives/box/type-docs.json @@ -776,7 +776,7 @@ "description": "Style prop for the CSS `border-bottom` property" }, "borderBottomColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -818,7 +818,7 @@ "description": "Responsive prop for the CSS `border-collapse` property" }, "borderColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -832,7 +832,7 @@ "description": "Style prop for the CSS `border-left` property" }, "borderLeftColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -867,7 +867,7 @@ "description": "Style prop for the CSS `border-right` property" }, "borderRightColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -909,7 +909,7 @@ "description": "Style prop for the CSS `border-top` property" }, "borderTopColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 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 049b666ebe..f4ae5445c9 100644 --- a/packages/paste-core/primitives/sibling-box/type-docs.json +++ b/packages/paste-core/primitives/sibling-box/type-docs.json @@ -878,7 +878,7 @@ "description": "Style prop for the CSS `border-bottom` property" }, "borderBottomColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -920,7 +920,7 @@ "description": "Responsive prop for the CSS `border-collapse` property" }, "borderColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -934,7 +934,7 @@ "description": "Style prop for the CSS `border-left` property" }, "borderLeftColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -969,7 +969,7 @@ "description": "Style prop for the CSS `border-right` property" }, "borderRightColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 more ... | { ...; }", "defaultValue": null, "required": false, "externalProp": false, @@ -1011,7 +1011,7 @@ "description": "Style prop for the CSS `border-top` property" }, "borderTopColor": { - "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 45 more ... | { ...; }", + "type": "\"inherit\" | \"transparent\" | \"colorBorder\" | \"colorBorderDecorative10Weaker\" | \"colorBorderDecorative20Weaker\" | \"colorBorderDecorative30Weaker\" | \"colorBorderDecorative40Weaker\" | ... 46 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 c26db0565e..03917e39d8 100644 --- a/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap +++ b/packages/paste-design-tokens/__tests__/__snapshots__/index.test.tsx.snap @@ -107,6 +107,7 @@ exports[`Design Tokens matches the Dark theme 1`] = ` \\"color-border-inverse-weakest\\": \\"rgb(31, 48, 76)\\", \\"color-border-destructive-weak\\": \\"rgb(57, 71, 98)\\", \\"color-border-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-border-new-weak\\": \\"rgb(109, 46, 209)\\", \\"color-border-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-border-decorative-10-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(0, 20, 137)\\", @@ -551,6 +552,7 @@ exports[`Design Tokens matches the Global theme 1`] = ` \\"color-border-inverse-weakest\\": \\"rgb(31, 48, 76)\\", \\"color-border-destructive-weak\\": \\"rgb(246, 177, 177)\\", \\"color-border-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-border-new-weak\\": \\"rgb(166, 127, 227)\\", \\"color-border-weaker\\": \\"rgb(225, 227, 234)\\", \\"color-border-decorative-10-weaker\\": \\"rgb(225, 227, 234)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(204, 228, 255)\\", @@ -995,6 +997,7 @@ exports[`Design Tokens matches the Sendgrid theme 1`] = ` \\"color-border-inverse-weakest\\": \\"rgb(31, 48, 76)\\", \\"color-border-destructive-weak\\": \\"rgb(246, 177, 177)\\", \\"color-border-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-border-new-weak\\": \\"rgb(166, 127, 227)\\", \\"color-border-weaker\\": \\"rgb(225, 227, 234)\\", \\"color-border-decorative-10-weaker\\": \\"rgb(225, 227, 234)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(204, 228, 255)\\", @@ -1439,6 +1442,7 @@ exports[`Design Tokens matches the Twilio Dark theme 1`] = ` \\"color-border-inverse-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-border-destructive-weak\\": \\"rgb(117, 12, 12)\\", \\"color-border-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-border-new-weak\\": \\"rgb(109, 46, 209)\\", \\"color-border-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-border-decorative-10-weaker\\": \\"rgb(31, 48, 76)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(4, 60, 181)\\", @@ -1883,6 +1887,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-border-inverse-weakest\\": \\"rgb(18, 28, 45)\\", \\"color-border-destructive-weak\\": \\"rgb(246, 177, 177)\\", \\"color-border-inverse-strongest\\": \\"rgb(255, 255, 255)\\", + \\"color-border-new-weak\\": \\"rgb(166, 127, 227)\\", \\"color-border-weaker\\": \\"rgb(225, 227, 234)\\", \\"color-border-decorative-10-weaker\\": \\"rgb(225, 227, 234)\\", \\"color-border-decorative-20-weaker\\": \\"rgb(204, 228, 255)\\", @@ -2203,7 +2208,7 @@ exports[`Design Tokens matches the Twilio theme 1`] = ` \\"color-text-inverse-weakest\\": \\"rgb(75, 86, 113)\\", \\"color-text-weaker\\": \\"rgb(174, 178, 193)\\", \\"color-text-warning-strong\\": \\"rgb(141, 49, 24)\\", - \\"color-text-icon-warning\\": \\"rgb(141, 49, 24)\\", + \\"color-text-icon-warning\\": \\"rgb(195, 83, 35)\\", \\"color-text-error-stronger\\": \\"rgb(74, 11, 11)\\", \\"color-text-link-destructive-strong\\": \\"rgb(173, 17, 17)\\", \\"z-index-0\\": \\"0\\", diff --git a/packages/paste-design-tokens/tokens/global/border-color.yml b/packages/paste-design-tokens/tokens/global/border-color.yml index d4f23c198c..d8781a7fa0 100644 --- a/packages/paste-design-tokens/tokens/global/border-color.yml +++ b/packages/paste-design-tokens/tokens/global/border-color.yml @@ -215,6 +215,9 @@ props: color-border-error-weakest: value: "{!palette-red-10}" comment: Weakest error border color + color-border-new-weak: + value: "{!palette-purple-40}" + comment: Weak border color for something designated as new color-border-new-weaker: value: "{!palette-purple-20}" comment: Weaker border color for something designated as new diff --git a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml index e933e0bc1a..47c7c0b7c0 100644 --- a/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml +++ b/packages/paste-design-tokens/tokens/themes/dark/global/border-color.yml @@ -99,6 +99,9 @@ props: color-border-error-weakest: value: "{!palette-red-100}" comment: Weakest error border color + color-border-new-weak: + value: "{!palette-purple-60}" + comment: Weak border color for something designated as new color-border-new-weaker: value: "{!palette-purple-70}" comment: Weaker border color for something designated as new diff --git a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/border-color.yml b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/border-color.yml index 894e3fb6dc..537b0d7aa1 100644 --- a/packages/paste-design-tokens/tokens/themes/twilio-dark/global/border-color.yml +++ b/packages/paste-design-tokens/tokens/themes/twilio-dark/global/border-color.yml @@ -42,6 +42,9 @@ props: color-border-neutral-weaker: value: "{!palette-blue-70}" comment: Weaker neutral border color + color-border-new-weak: + value: "{!palette-purple-60}" + comment: Weak border color for something designated as new # destructive borders color-border-destructive-weak: diff --git a/packages/paste-design-tokens/tokens/themes/twilio/global/text-color.yml b/packages/paste-design-tokens/tokens/themes/twilio/global/text-color.yml index 858a85cdcc..e747453a41 100644 --- a/packages/paste-design-tokens/tokens/themes/twilio/global/text-color.yml +++ b/packages/paste-design-tokens/tokens/themes/twilio/global/text-color.yml @@ -39,7 +39,7 @@ props: value: "{!palette-green-80}" comment: Icon color for indicating success. color-text-icon-warning: - value: "{!palette-orange-80}" + value: "{!palette-orange-70}" comment: Icon color for indicating a warning. color-text-icon-neutral: value: "{!palette-blue-90}" diff --git a/packages/paste-website/src/pages/components/callout/index.mdx b/packages/paste-website/src/pages/components/callout/index.mdx index 28a6e60897..42d469b747 100644 --- a/packages/paste-website/src/pages/components/callout/index.mdx +++ b/packages/paste-website/src/pages/components/callout/index.mdx @@ -1,24 +1,24 @@ export const meta = { - title: 'Callout', - package: '@twilio-paste/callout', - description: 'A Callout is a banner that highlights important information on a page.', - slug: '/components/callout/', + title: "Callout", + package: "@twilio-paste/callout", + description: "A Callout is a banner that highlights important information on a page.", + slug: "/components/callout/", }; -import {Anchor} from '@twilio-paste/anchor'; -import {Stack} from '@twilio-paste/stack'; -import {Paragraph} from '@twilio-paste/paragraph'; -import {Callout, CalloutHeading, CalloutText, CalloutList, CalloutListItem} from '@twilio-paste/callout'; -import {SidebarCategoryRoutes} from '../../../constants'; -import packageJson from '@twilio-paste/callout/package.json'; -import ComponentPageLayout from '../../../layouts/ComponentPageLayout'; -import {getFeature, getNavigationData} from '../../../utils/api'; +import { Anchor } from "@twilio-paste/anchor"; +import { Stack } from "@twilio-paste/stack"; +import { Paragraph } from "@twilio-paste/paragraph"; +import { Callout, CalloutHeading, CalloutText, CalloutList, CalloutListItem } from "@twilio-paste/callout"; +import { SidebarCategoryRoutes } from "../../../constants"; +import packageJson from "@twilio-paste/callout/package.json"; +import ComponentPageLayout from "../../../layouts/ComponentPageLayout"; +import { getFeature, getNavigationData } from "../../../utils/api"; export default ComponentPageLayout; export const getStaticProps = async () => { const navigationData = await getNavigationData(); - const feature = await getFeature('Callout'); + const feature = await getFeature("Callout"); return { props: { data: { @@ -29,14 +29,14 @@ export const getStaticProps = async () => { mdxHeadings, pageHeaderData: { categoryRoute: SidebarCategoryRoutes.COMPONENTS, - githubUrl: 'https://github.com/twilio-labs/paste/blob/main/packages/paste-core/components/callout/', - storybookUrl: '/?path=/story/components-callout--variants', + githubUrl: "https://github.com/twilio-labs/paste/blob/main/packages/paste-core/components/callout/", + storybookUrl: "/?path=/story/components-callout--variants", }, }, }; }; - + {` Heads up! This is some information you need to know. @@ -63,7 +63,7 @@ Each variant includes an icon. To internationalize the icon label for a variant, Use a neutral Callout to communicate relevant information to the page or flow. The information is often static. - + {` Neutral Callout @@ -77,7 +77,7 @@ Use a success Callout to communicate that the desired outcome was achieved. A su When composing a success Callout, avoid using the word "successfully"—it's redundant. - + {` Success Callout @@ -91,7 +91,7 @@ Use a warning Callout to help users avoid an undesirable outcome, or inform user A warning Callout should should explain the possible issue, what to do, and what happens if they don't. - + {` Warning Callout @@ -103,7 +103,7 @@ A warning Callout should should explain the possible issue, what to do, and what Use an error Callout to communicate errors for a particular section of a page, or that applies to the whole page. For additional guidance on how to compose error messages, refer to the [error state pattern](/patterns/error-state). - + {` Error Callout @@ -115,7 +115,7 @@ Use an error Callout to communicate errors for a particular section of a page, o Use a new Callout to spotlight a recent addition or update. - + {` New Callout @@ -123,13 +123,23 @@ Use a new Callout to spotlight a recent addition or update. `} +### Dismissible Callout + + + {` + alert("dismissed")}> + Dismissible Callout + This callout can be provided an onDismiss prop to allow for dismissible functionality. + `} + + ### Callout with a list Callouts can have lists of information within them, and are useful for providing error summaries when there are many errors on the page. When creating an error summary, still include inline error messaging using the Help Text component for each field. Use the `CalloutList` and `CalloutListItem` components to make sure the text is the appropriate color for the variant. - + {` Make sure to check for personal data, such as: @@ -146,7 +156,7 @@ Use the `CalloutList` and `CalloutListItem` components to make sure the text is Callouts can be inline with text, so use the `marginY` prop to add a vertical margin. To add a margin only one side, wrap the Callout in a [Box](/primitives/box) to style it further. - + {`<> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. diff --git a/yarn.lock b/yarn.lock index ef15b4e291..cd178a3c97 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11794,13 +11794,17 @@ __metadata: version: 0.0.0-use.local resolution: "@twilio-paste/callout@workspace:packages/paste-core/components/callout" dependencies: + "@twilio-paste/anchor": ^12.0.0 "@twilio-paste/animation-library": ^2.0.0 "@twilio-paste/box": ^10.1.0 + "@twilio-paste/button": ^14.1.0 "@twilio-paste/color-contrast-utils": ^5.0.0 "@twilio-paste/customization": ^8.1.0 "@twilio-paste/design-tokens": ^10.2.0 "@twilio-paste/icons": ^12.2.0 "@twilio-paste/screen-reader-only": ^13.1.0 + "@twilio-paste/spinner": ^14.0.0 + "@twilio-paste/stack": ^8.0.0 "@twilio-paste/style-props": ^9.1.0 "@twilio-paste/styling-library": ^3.0.0 "@twilio-paste/text": ^10.1.0 @@ -11814,13 +11818,17 @@ __metadata: tsx: ^4.0.0 typescript: ^4.9.4 peerDependencies: + "@twilio-paste/anchor": ^12.0.0 "@twilio-paste/animation-library": ^2.0.0 "@twilio-paste/box": ^10.0.0 + "@twilio-paste/button": ^14.0.0 "@twilio-paste/color-contrast-utils": ^5.0.0 "@twilio-paste/customization": ^8.0.0 "@twilio-paste/design-tokens": ^10.0.0 "@twilio-paste/icons": ^12.0.0 "@twilio-paste/screen-reader-only": ^13.0.0 + "@twilio-paste/spinner": ^14.0.0 + "@twilio-paste/stack": ^8.0.0 "@twilio-paste/style-props": ^9.0.0 "@twilio-paste/styling-library": ^3.0.0 "@twilio-paste/text": ^10.0.0