Merge branch 'main' into feat/minimizable-dialog

.changeset/eighty-cooks-sell.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/label': minor
+'@twilio-paste/core': minor
+---
+
+[Label] add the ability to use the label as a div HTML element

.changeset/famous-dragons-share.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/switch': major
+'@twilio-paste/core': minor
+---
+
+[Switch] add Switch package

.changeset/khaki-dogs-share.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': patch
+'@twilio-paste/theme': patch
+---
+
+[Theme] add new icon size (05) to theme shape

.changeset/large-nails-wave.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': patch
+'@twilio-paste/box': patch
+---
+
+[Box] add a `_checked_hover` pseudo selector style prop for use in switch package

.changeset/neat-rivers-sing.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/core': minor
+'@twilio-paste/design-tokens': minor
+---
+
+[Design tokens] add new icon size and line height tokens (05), adust dark theme background tokens

.changeset/perfect-lobsters-appear.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/alert': patch
+'@twilio-paste/core': patch
+---
+
+[Alert] add screen-reader-only as peerDependency

.changeset/thirty-seas-jog.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/menu': minor
+'@twilio-paste/core': minor
+---
+
+- [menu] add menu item destructive variant

.changeset/wild-weeks-agree.md

@@ -0,0 +1,6 @@
+---
+'@twilio-paste/callout': major
+'@twilio-paste/core': minor
+---
+
+[Callout] Introducing the all-new Callout component! This component is useful in those moments when you want to highlight important - yet static - information in a page of text. 🎉

.codesandbox/ci.json

@@ -15,6 +15,7 @@
     "/packages/paste-core/primitives/box",
     "/packages/paste-core/components/breadcrumb",
     "/packages/paste-core/components/button",
+    "/packages/paste-core/components/callout",
     "/packages/paste-core/components/card",
     "/packages/paste-core/components/chat-log",
     "/packages/paste-core/components/checkbox",
@@ -63,6 +64,7 @@
     "/packages/paste-core/layout/stack",
     "/packages/paste-style-props",
     "/packages/paste-libraries/styling",
+    "/packages/paste-core/components/switch",
     "/packages/paste-core/components/table",
     "/packages/paste-core/components/tabs",
     "/packages/paste-core/primitives/tabs",

cypress/integration/sitemap-vrt/constants.ts

@@ -14,6 +14,7 @@ export const SITEMAP = [
   '/components/avatar/',
   '/components/breadcrumb/',
   '/components/badge/',
+  '/components/callout/',
   '/components/card/',
   '/components/chat-log/',
   '/components/checkbox/',

internal-docs/engineering/core/adding-design-tokens.md

@@ -0,0 +1,13 @@
+# Adding New Design Tokens
+
+Tokens live in `packages/paste-design-tokens/tokens/global`. Dark theme tokens live in `packages/paste-design-tokens/tokens/dark/global`.
+
+After adding a new token, bump the package and core up as a minor by running `yarn changeset`.
+
+## Colors
+
+When adding new color tokens, make sure the value points to an alias (e.g. `red-60`).
+
+## Icon sizes
+
+Make sure the new icon size points to a line height. You may have to add a new token to fit your needs. You'll also have to add the new line height to the alias file. You'll also need to add the new icon size to the `packages/paste-theme/src/generateThemeFromTokens` file and the `packages/paste-theme/src/types/GenericThemeShape` file. That will require a re-build and a snapshot update for the theme shape.

internal-docs/engineering/core/component-rules.md

@@ -2,6 +2,17 @@
 
 Rules to abide by when designing UI components.
 
+## Adding a new component
+
+Run the `yarn create:package` script to create a new package. The initial changeset should be a major for the new package and a minor for core, and the new package should be released as version 1.x.x. Add the following dependencies to the package.json of your new package.
+
+```
+"@twilio-paste/box": "^x.x.x",
+"@twilio-paste/design-tokens": "^x.x.x",
+"@twilio-paste/style-props": "^x.x.x",
+"@twilio-paste/theme": "^x.x.x",
+```
+
 ## All
 
 Parent components should not affect the style of child components (i.e.: .mycomponent > div)

packages/paste-codemods/tools/.cache/mappings.json

@@ -17,6 +17,11 @@
   "Breadcrumb": "@twilio-paste/core/breadcrumb",
   "BreadcrumbItem": "@twilio-paste/core/breadcrumb",
   "Button": "@twilio-paste/core/button",
+  "Callout": "@twilio-paste/core/callout",
+  "CalloutHeading": "@twilio-paste/core/callout",
+  "CalloutList": "@twilio-paste/core/callout",
+  "CalloutListItem": "@twilio-paste/core/callout",
+  "CalloutText": "@twilio-paste/core/callout",
   "Card": "@twilio-paste/core/card",
   "ChatAttachment": "@twilio-paste/core/chat-log",
   "ChatAttachmentDescription": "@twilio-paste/core/chat-log",
@@ -128,6 +133,8 @@
   "Separator": "@twilio-paste/core/separator",
   "SkeletonLoader": "@twilio-paste/core/skeleton-loader",
   "Spinner": "@twilio-paste/core/spinner",
+  "Switch": "@twilio-paste/core/switch",
+  "SwitchContainer": "@twilio-paste/core/switch",
   "TBody": "@twilio-paste/core/table",
   "TBodyPropTypes": "@twilio-paste/core/table",
   "TFoot": "@twilio-paste/core/table",

packages/paste-core/components/alert/package.json

@@ -30,6 +30,7 @@
     "@twilio-paste/design-tokens": "^8.0.0",
     "@twilio-paste/icons": "^9.0.0",
     "@twilio-paste/media-object": "^7.0.0",
+    "@twilio-paste/screen-reader-only": "^10.0.0",
     "@twilio-paste/spinner": "^11.0.0",
     "@twilio-paste/style-props": "^6.0.0",
     "@twilio-paste/styling-library": "^1.0.0",
@@ -46,6 +47,7 @@
     "@twilio-paste/design-tokens": "^8.0.0",
     "@twilio-paste/icons": "^9.0.0",
     "@twilio-paste/media-object": "^7.0.0",
+    "@twilio-paste/screen-reader-only": "^10.0.0",
     "@twilio-paste/spinner": "^11.0.0",
     "@twilio-paste/style-props": "^6.0.0",
     "@twilio-paste/styling-library": "^1.0.2",

packages/paste-core/components/callout/CHANGELOG.md

@@ -0,0 +1 @@
+# Change Log

packages/paste-core/components/callout/__tests__/customization.spec.tsx

@@ -0,0 +1,213 @@
+import * as React from 'react';
+import {render, screen} from '@testing-library/react';
+import {CustomizationProvider} from '@twilio-paste/customization';
+
+import {Callout, CalloutHeading, CalloutList, CalloutListItem, CalloutText} from '../src';
+
+const CustomizationWrapper: React.FC = ({children}) => (
+  <CustomizationProvider
+    baseTheme="default"
+    theme={TestTheme}
+    elements={{
+      CALLOUT: {
+        padding: 'space40',
+        variants: {
+          neutral: {
+            backgroundColor: 'colorBackgroundBodyInverse',
+            color: 'colorTextInverse',
+          },
+          warning: {
+            backgroundColor: 'colorBackground',
+            color: 'colorTextWarningStrong',
+            borderStyle: 'solid',
+            borderWidth: 'borderWidth20',
+            borderColor: 'colorBorderWarning',
+          },
+        },
+      },
+      CALLOUT_HEADING: {
+        fontSize: 'fontSize50',
+        lineHeight: 'lineHeight50',
+      },
+      CALLOUT_TEXT: {
+        fontSize: 'fontSize30',
+        lineHeight: 'lineHeight30',
+      },
+      CALLOUT_LIST: {
+        marginLeft: 'space50',
+      },
+      CALLOUT_LIST_ITEM: {
+        fontSize: 'fontSize30',
+        lineHeight: 'lineHeight30',
+      },
+    }}
+  >
+    {children}
+  </CustomizationProvider>
+);
+
+const MyCustomizationWrapper: React.FC = ({children}) => (
+  <CustomizationProvider
+    baseTheme="default"
+    theme={TestTheme}
+    elements={{
+      FOO_CALLOUT: {
+        padding: 'space40',
+        variants: {
+          neutral: {
+            backgroundColor: 'colorBackgroundBodyInverse',
+            color: 'colorTextInverse',
+          },
+          warning: {
+            backgroundColor: 'colorBackground',
+            color: 'colorTextWarningStrong',
+            borderStyle: 'solid',
+            borderWidth: 'borderWidth20',
+            borderColor: 'colorBorderWarning',
+          },
+        },
+      },
+      FOO_CALLOUT_HEADING: {
+        fontSize: 'fontSize50',
+        lineHeight: 'lineHeight50',
+      },
+      FOO_CALLOUT_TEXT: {
+        fontSize: 'fontSize30',
+        lineHeight: 'lineHeight30',
+      },
+      FOO_CALLOUT_LIST: {
+        marginLeft: 'space50',
+      },
+      FOO_CALLOUT_LIST_ITEM: {
+        fontSize: 'fontSize30',
+        lineHeight: 'lineHeight30',
+      },
+    }}
+  >
+    {children}
+  </CustomizationProvider>
+);
+
+describe('Customization', () => {
+  it('should set a default element data attribute', () => {
+    render(
+      <Callout variant="neutral" data-testid="callout">
+        <CalloutHeading as="h3">Neutral callout</CalloutHeading>
+        <CalloutText data-testid="callout-text">Take a look at this list:</CalloutText>
+        <CalloutList as="ul">
+          <CalloutListItem>Item one</CalloutListItem>
+        </CalloutList>
+      </Callout>
+    );
+
+    const callout = screen.getByTestId('callout');
+    const heading = screen.getByRole('heading', {name: 'Neutral callout'});
+    const text = screen.getByTestId('callout-text');
+    const list = screen.getByRole('list');
+    const listItem = screen.getByRole('listitem');
+
+    expect(callout.getAttribute('data-paste-element')).toEqual('CALLOUT');
+    expect(heading.getAttribute('data-paste-element')).toEqual('CALLOUT_HEADING');
+    expect(text.getAttribute('data-paste-element')).toEqual('CALLOUT_TEXT');
+    expect(list.getAttribute('data-paste-element')).toEqual('CALLOUT_LIST');
+    expect(listItem.getAttribute('data-paste-element')).toEqual('CALLOUT_LIST_ITEM');
+  });
+
+  it('should set a custom element data attribute', () => {
+    render(
+      <Callout variant="neutral" data-testid="callout" element="FOO_CALLOUT">
+        <CalloutHeading as="h3" element="FOO_CALLOUT_HEADING">
+          Neutral callout
+        </CalloutHeading>
+        <CalloutText data-testid="callout-text" element="FOO_CALLOUT_TEXT">
+          Take a look at this list:
+        </CalloutText>
+        <CalloutList as="ul" element="FOO_CALLOUT_LIST">
+          <CalloutListItem element="FOO_CALLOUT_LIST_ITEM">Item one</CalloutListItem>
+        </CalloutList>
+      </Callout>
+    );
+
+    const callout = screen.getByTestId('callout');
+    const heading = screen.getByRole('heading', {name: 'Neutral callout'});
+    const text = screen.getByTestId('callout-text');
+    const list = screen.getByRole('list');
+    const listItem = screen.getByRole('listitem');
+
+    expect(callout.getAttribute('data-paste-element')).toEqual('FOO_CALLOUT');
+    expect(heading.getAttribute('data-paste-element')).toEqual('FOO_CALLOUT_HEADING');
+    expect(text.getAttribute('data-paste-element')).toEqual('FOO_CALLOUT_TEXT');
+    expect(list.getAttribute('data-paste-element')).toEqual('FOO_CALLOUT_LIST');
+    expect(listItem.getAttribute('data-paste-element')).toEqual('FOO_CALLOUT_LIST_ITEM');
+  });
+
+  it('should add custom styles to the components', () => {
+    render(
+      <>
+        <Callout variant="neutral" data-testid="neutral-callout">
+          <CalloutHeading as="h3">Neutral callout</CalloutHeading>
+          <CalloutText data-testid="callout-text">Take a look at this list:</CalloutText>
+          <CalloutList as="ul">
+            <CalloutListItem>Item one</CalloutListItem>
+          </CalloutList>
+        </Callout>
+        <Callout variant="warning" data-testid="warning-callout">
+          <CalloutText>This is a warning callout</CalloutText>
+        </Callout>
+      </>,
+      {wrapper: CustomizationWrapper}
+    );
+
+    const neutralCallout = screen.getByTestId('neutral-callout');
+    const warningCallout = screen.getByTestId('neutral-callout');
+    const heading = screen.getByRole('heading', {name: 'Neutral callout'});
+    const text = screen.getByTestId('callout-text');
+    const list = screen.getByRole('list');
+    const listItem = screen.getByRole('listitem');
+
+    expect(neutralCallout).toHaveStyleRule('padding', '0.75rem');
+    expect(neutralCallout).toHaveStyleRule('background-color', 'rgb(18, 28, 45)');
+    expect(warningCallout).toHaveStyleRule('background-color', 'rgb(18, 28, 45)');
+    expect(heading).toHaveStyleRule('font-size', '1.125rem');
+    expect(text).toHaveStyleRule('font-size', '0.875rem');
+    expect(list).toHaveStyleRule('margin-left', '1rem');
+    expect(listItem).toHaveStyleRule('font-size', '0.875rem');
+  });
+
+  it('shoult add custom styles to the components with custom element names', () => {
+    render(
+      <>
+        <Callout variant="neutral" data-testid="neutral-callout" element="FOO_CALLOUT">
+          <CalloutHeading as="h3" element="FOO_CALLOUT_HEADING">
+            Neutral callout
+          </CalloutHeading>
+          <CalloutText data-testid="callout-text" element="FOO_CALLOUT_TEXT">
+            Take a look at this list:
+          </CalloutText>
+          <CalloutList as="ul" element="FOO_CALLOUT_LIST">
+            <CalloutListItem element="FOO_CALLOUT_LIST_ITEM">Item one</CalloutListItem>
+          </CalloutList>
+        </Callout>
+        <Callout variant="warning" data-testid="warning-callout" element="FOO_CALLOUT">
+          <CalloutText element="FOO_CALLOUT_TEXT">This is a warning callout</CalloutText>
+        </Callout>
+      </>,
+      {wrapper: MyCustomizationWrapper}
+    );
+
+    const neutralCallout = screen.getByTestId('neutral-callout');
+    const warningCallout = screen.getByTestId('neutral-callout');
+    const heading = screen.getByRole('heading', {name: 'Neutral callout'});
+    const text = screen.getByTestId('callout-text');
+    const list = screen.getByRole('list');
+    const listItem = screen.getByRole('listitem');
+
+    expect(neutralCallout).toHaveStyleRule('padding', '0.75rem');
+    expect(neutralCallout).toHaveStyleRule('background-color', 'rgb(18, 28, 45)');
+    expect(warningCallout).toHaveStyleRule('background-color', 'rgb(18, 28, 45)');
+    expect(heading).toHaveStyleRule('font-size', '1.125rem');
+    expect(text).toHaveStyleRule('font-size', '0.875rem');
+    expect(list).toHaveStyleRule('margin-left', '1rem');
+    expect(listItem).toHaveStyleRule('font-size', '0.875rem');
+  });
+});