Merge branch 'main' into update/minimizable-dialog

twilio-labs · Feb 27, 2023 · 679daeb · 679daeb
2 parents dedae1d + b942178
commit 679daeb
Show file tree

Hide file tree

Showing 18 changed files with 73 additions and 21 deletions.
diff --git a/.changeset/empty-mayflies-cry.md b/.changeset/empty-mayflies-cry.md
@@ -0,0 +1,6 @@
+---
+'@twilio-paste/theme': patch
+'@twilio-paste/core': patch
+---
+
+[Theme] Add theme override via url by using `#paste-theme-override=[newtheme]`.
diff --git a/.github/DISCUSSION_TEMPLATE/office-hours-data-growth.yml b/.github/DISCUSSION_TEMPLATE/office-hours-data-growth.yml
@@ -1,5 +1,4 @@
-title: "Office hours"
-description: "Questions and discussion topics for office hours"
+title: ""
 body:
   - type: "textarea"
     id: "background"

diff --git a/.github/DISCUSSION_TEMPLATE/office-hours-visual-design.yml b/.github/DISCUSSION_TEMPLATE/office-hours-visual-design.yml
@@ -1,5 +1,4 @@
-title: "Office hours"
-description: "Questions and discussion topics for office hours"
+title: ""
 body:
   - type: "textarea"
     id: "background"

diff --git a/.github/DISCUSSION_TEMPLATE/office-hours.yml b/.github/DISCUSSION_TEMPLATE/office-hours.yml
@@ -1,4 +1,4 @@
-title: "Office hours"
+title: ""
 body:
   - type: "textarea"
     id: "background"

diff --git a/.github/DISCUSSION_TEMPLATE/request-icon.yml b/.github/DISCUSSION_TEMPLATE/request-icon.yml
@@ -1,4 +1,4 @@
-title: "Icon request"
+title: ""
 body:
   - type: textarea
     id: "description"

diff --git a/.github/workflows/on_pull_request.yml b/.github/workflows/on_pull_request.yml
@@ -303,6 +303,9 @@ jobs:
     name: Storybook test runner
     needs: build
     runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        shard: [1/4, 2/4, 3/4, 4/4]
     steps:
       - name: Checkout Repo
         uses: actions/checkout@v3
@@ -360,7 +363,7 @@ jobs:
         run: npx playwright install --with-deps
 
       - name: Run Storybook test runner
-        run: yarn start:test:storybook
+        run: yarn start-server-and-test 'NODE_ENV=test yarn start:storybook' http://localhost:9001 'yarn test:storybook --shard=${{ matrix.shard }}'
 
   prettier:
     name: Prettier checks

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -22,7 +22,7 @@ export const globalTypes = {
       // https://github.com/storybookjs/storybook/blob/master/lib/components/src/icon/icons.tsx
       icon: 'paintbrush',
       // array of plain string values or MenuItem shape (see below)
-      items: ['default', 'dark', 'sendgrid', 'twilio', 'twilio-dark'],
+      items: ['default', 'dark', 'sendgrid', 'evergreen', 'twilio', 'twilio-dark'],
     },
   },
   theme_layout: {

diff --git a/package.json b/package.json
@@ -136,7 +136,7 @@
     "@storybook/cli": "7.0.0-beta.45",
     "@storybook/react": "7.0.0-beta.45",
     "@storybook/react-vite": "7.0.0-beta.45",
-    "@storybook/test-runner": "0.9.1",
+    "@storybook/test-runner": "0.9.3",
     "@storybook/testing-library": "0.0.13",
     "@swc/core": "^1.2.160",
     "@swc/jest": "^0.2.20",

diff --git a/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml b/packages/paste-design-tokens/tokens/themes/evergreen/global/background-color.yml
@@ -152,7 +152,7 @@ props:
 
   # overlay backgrounds
   color-background-overlay:
-    value: "#4D4D66"
+    value: "#4D4D6664"
     comment: Default background for overlays.
 
   #availability

diff --git a/packages/paste-theme/__tests__/themeProvider.spec.tsx b/packages/paste-theme/__tests__/themeProvider.spec.tsx
@@ -35,6 +35,22 @@ describe('Theme.Provider', () => {
     expect(getByText('Color: rgb(2, 99, 224)')).toBeDefined();
   });
 
+  it('should override selected theme with hash value', () => {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    delete window.location;
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    window.location = new URL('https://www.example.com#paste-theme-override=evergreen');
+
+    const {getByText} = render(
+      <Theme.Provider>
+        <ThemeConsumerExampleTextColor />
+      </Theme.Provider>
+    );
+    expect(getByText('Color: rgb(51, 102, 255)')).toBeDefined();
+  });
+
   it('should rely on the default breakpoints set on the theme object', () => {
     const {getByText} = render(
       <Theme.Provider theme="default">

diff --git a/packages/paste-theme/src/themeProvider.tsx b/packages/paste-theme/src/themeProvider.tsx
@@ -9,6 +9,7 @@ import {
 } from '@twilio-paste/styling-library';
 import type {CreateCacheOptions} from '@twilio-paste/styling-library';
 
+import {getThemeFromHash} from './utils/getThemeFromHash';
 import {DefaultTheme, SendGridTheme, DarkTheme, TwilioTheme, TwilioDarkTheme, EvergreenTheme} from './themes';
 import {pasteGlobalStyles} from './styles/global';
 import {pasteBaseStyles} from './styles/base';
@@ -17,6 +18,24 @@ import {ThemeVariants} from './constants';
 
 export const StyledBase = styled.div(pasteBaseStyles);
 
+const useThemeOverwriteHook = (): string | undefined => {
+  const [overwriteTheme, setOverwriteTheme] = React.useState(getThemeFromHash());
+
+  const handleLocationChange = (): void => {
+    setOverwriteTheme(getThemeFromHash());
+  };
+
+  React.useEffect(() => {
+    window.addEventListener('popstate', handleLocationChange);
+
+    return () => {
+      window.removeEventListener('popstate', handleLocationChange);
+    };
+  });
+
+  return overwriteTheme;
+};
+
 // eslint-disable-next-line @typescript-eslint/ban-types
 function getProviderThemeProps(theme: ThemeVariants, customBreakpoints?: string[]): {} {
   switch (theme) {
@@ -76,8 +95,9 @@ const ThemeProvider: React.FunctionComponent<React.PropsWithChildren<ThemeProvid
       skipAnimation: disableAnimations || prefersReducedMotion,
     });
   }, [disableAnimations, prefersReducedMotion]);
+  const overwriteTheme = useThemeOverwriteHook();
 
-  const providerThemeProps = getProviderThemeProps(theme, customBreakpoints);
+  const providerThemeProps = getProviderThemeProps(overwriteTheme || theme, customBreakpoints);
 
   if (cache) {
     return (

diff --git a/packages/paste-theme/src/utils/getThemeFromHash.ts b/packages/paste-theme/src/utils/getThemeFromHash.ts
@@ -0,0 +1,9 @@
+export const getThemeFromHash = (): string | undefined => {
+  try {
+    if (window.location.hash.includes('paste-theme-override')) {
+      return window.location.hash.split('=')[1];
+    }
+    // eslint-disable-next-line unicorn/prefer-optional-catch-binding
+  } catch (error) {}
+  return undefined;
+};
diff --git a/packages/paste-website/src/pages/components/callout/index.mdx b/packages/paste-website/src/pages/components/callout/index.mdx
@@ -108,7 +108,7 @@ Callouts can have lists of information within them. Use the `CalloutList` and `C
     <CalloutHeading>
       Make sure to check for personal data, such as:
     </CalloutHeading>
-    <CalloutList>
+    <CalloutList as="ul">
       <CalloutListItem>Name</CalloutListItem>
       <CalloutListItem>Email</CalloutListItem>
       <CalloutListItem>Phone number</CalloutListItem>

diff --git a/packages/paste-website/src/pages/components/index.mdx b/packages/paste-website/src/pages/components/index.mdx
@@ -44,7 +44,7 @@ export const getStaticProps = async () => {
 
 <Callout variant="neutral" marginY="space70">
   <CalloutHeading as="h2">Don't see a component, primitive, or layout you need listed here?</CalloutHeading>
-  <CalloutList>
+  <CalloutList as="ul">
     <CalloutListItem>
       First off, we recommend <SiteLink href="/roadmap">checking our roadmap</SiteLink>.
     </CalloutListItem>

diff --git a/packages/paste-website/src/pages/primitives/index.mdx b/packages/paste-website/src/pages/primitives/index.mdx
@@ -41,7 +41,7 @@ export const getStaticProps = async () => {
 
 <Callout variant="neutral" marginY="space70">
   <CalloutHeading as="h2">Don't see a primitive, layout, or component you need listed here?</CalloutHeading>
-  <CalloutList>
+  <CalloutList as="ul">
     <CalloutListItem>
       First off, we recommend <SiteLink href="/roadmap">checking our roadmap</SiteLink>.
     </CalloutListItem>

diff --git a/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx b/packages/paste-website/src/pages/primitives/listbox-primitive/index.mdx
@@ -218,7 +218,7 @@ This package is a wrapper around the [Reakit Composite](https://reakit.io/docs/c
 #### Installation
 
 ```bash
-yarn add @twilio-paste/listbox-primitve - or - yarn add @twilio-paste/core
+yarn add @twilio-paste/listbox-primitive - or - yarn add @twilio-paste/core
 ```
 
 #### Props

diff --git a/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx b/packages/paste-website/src/pages/primitives/menu-primitive/index.mdx
@@ -179,7 +179,7 @@ This package is a wrapper around the [Reakit Menu](https://reakit.io/docs/menu/)
 #### Installation
 
 ```bash
-yarn add @twilio-paste/menu-primitve - or - yarn add @twilio-paste/core
+yarn add @twilio-paste/menu-primitive - or - yarn add @twilio-paste/core
 ```
 
 #### Props

diff --git a/yarn.lock b/yarn.lock
@@ -9892,9 +9892,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/test-runner@npm:0.9.1":
-  version: 0.9.1
-  resolution: "@storybook/test-runner@npm:0.9.1"
+"@storybook/test-runner@npm:0.9.3":
+  version: 0.9.3
+  resolution: "@storybook/test-runner@npm:0.9.3"
   dependencies:
     "@babel/core": ^7.18.13
     "@babel/generator": ^7.18.13
@@ -9927,7 +9927,7 @@ __metadata:
     ts-dedent: ^2.0.0
   bin:
     test-storybook: bin/test-storybook.js
-  checksum: de2bf0866adb2fff854f6dfcd7e3904b14326bc8c3f0f137eaa20ad76bc15365443f949cd4299918c34177de4cadb002ffc8825f0dccd669bb95722085c9f645
+  checksum: 665dfddd8b18005b9b0203115e35585410fbbcbcccd9ff220e18914e1131c88898216b468a4ed5d956ceefe2ca1a38d88d22b10b445be0dedb89a19c5f539bca
   languageName: node
   linkType: hard
 
@@ -37416,7 +37416,7 @@ fsevents@^1.2.7:
     "@storybook/cli": 7.0.0-beta.45
     "@storybook/react": 7.0.0-beta.45
     "@storybook/react-vite": 7.0.0-beta.45
-    "@storybook/test-runner": 0.9.1
+    "@storybook/test-runner": 0.9.3
     "@storybook/testing-library": 0.0.13
     "@swc/core": ^1.2.160
     "@swc/jest": ^0.2.20