@payfit/unity-illustrations 2.49.1 → 2.50.0

package/src/docs/blocks/IllustrationLibrary.tsx

@@ -1,7 +1,22 @@
 import React, { memo, useCallback, useMemo, useState } from 'react'
 
+import { UnityThemeProvider } from '@payfit/unity-themes'
+
 import { LazyIllustration } from '../../components/lazy-illustration/LazyIllustration'
+import type { UnityIllustrationName } from '../../generated/illustrationAssets'
+
 import { illustrationNames } from '../../generated/illustrationAssets'
+import type { BrandSupportFilter } from './BrandSupportFilter'
+
+import {
+  BrandSupportBadge,
+  useBrandSupportRecords,
+} from './BrandSupportBadge'
+import {
+  BrandSupportFilterControl,
+  matchesBrandSupportFilter,
+} from './BrandSupportFilter'
+import { useStorybookTheme } from './useStorybookTheme'
 
 const debounce = <P = unknown,>(
   callback: (...args: P[]) => unknown,
@@ -25,7 +40,7 @@ const IllustrationItem = memo(
     copyText,
     onClick,
   }: React.PropsWithChildren<{
-    name: string
+    name: UnityIllustrationName
     copyText: string
     onClick: () => void
   }>) => {
@@ -33,20 +48,23 @@ const IllustrationItem = memo(
       <li>
         <button
           onClick={onClick}
-          className="uy:group uy:flex uy:flex-col uy:w-full uy:items-center uy:gap-125 uy:p-200 uy:transition-all uy:rounded-100 uy:bg-surface-neutral uy:hover:bg-surface-neutral-low-hover uy:shadow-raising uy:hover:shadow-floating uy:focus-visible:shadow-floating uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-ring uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:border-border-form-hover uy:focus-visible:bg-surface-neutral-low-hover uy:border uy:border-solid uy:border-border-neutral"
+          className="uy:group uy:flex uy:h-full uy:w-full uy:flex-col uy:gap-150 uy:p-200 uy:transition-all uy:rounded-lg uy:bg-surface-neutral uy:shadow-raising uy:hover:shadow-flying uy:focus-visible:shadow-floating uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-ring uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring uy:focus-visible:border-border-form-hover uy:focus-visible:bg-surface-neutral-low-hover uy:border uy:border-solid uy:border-border-neutral"
         >
-          <figure className="uy:flex uy:flex-col uy:items-center uy:w-full">
-            <div className="uy:flex uy:justify-center uy:items-center uy:w-[90%] uy:transition-all uy:group-hover:scale-120">
-              {children}
-            </div>
-            <figcaption className="uy:flex uy:flex-col uy:items-center">
-              <span className="uy:typography-body-strong uy:text-content-neutral uy:cursor-pointer uy:truncate uy:w-full uy:block">
+          <figure className="uy:flex uy:h-full uy:w-full uy:flex-col uy:items-center uy:gap-150">
+            <figcaption className="uy:w-full uy:text-left">
+              <span className="uy:block uy:w-full uy:truncate uy:font-mono uy:text-50 uy:leading-normal uy:text-content-neutral">
                 {name}
               </span>
-              <span className="uy:typography-action-small uy:bg-transparent uy:text-content-primary">
+            </figcaption>
+            <div className="uy:flex uy:py-200 uy:w-[90%] uy:items-center uy:justify-center uy:transition-all uy:group-hover:scale-110">
+              {children}
+            </div>
+            <div className="uy:mt-auto uy:flex uy:w-full uy:items-center uy:justify-between uy:gap-100">
+              <BrandSupportBadge name={name} />
+              <span className="uy:typography-action-small uy:bg-transparent uy:theme-legacy:text-content-primary uy:theme-rebrand:text-content-neutral uy:theme-rebrand:underline uy:whitespace-nowrap">
                 {copyText}
               </span>
-            </figcaption>
+            </div>
           </figure>
         </button>
       </li>
@@ -59,10 +77,12 @@ const IllustrationLibrary = ({
 }: {
   filter?: 'filled' | 'outlined'
 }) => {
+  const theme = useStorybookTheme()
   const [query, setQuery] = useState<string>('')
   const [copiedIllustration, setCopiedIllustration] = useState<string | null>(
     null,
   )
+  const [brandFilter, setBrandFilter] = useState<BrandSupportFilter>('all')
 
   const illustrationList = useMemo(() => {
     const predicate =
@@ -73,6 +93,7 @@ const IllustrationLibrary = ({
       .filter(name => !name.endsWith('Animation'))
       .filter(name => predicate(name))
   }, [filter])
+  const brandSupportByName = useBrandSupportRecords(illustrationList)
 
   const copyToClipboard = useCallback((illustrationName: string) => {
     const importStatement = `import ${illustrationName} from '@payfit/unity-illustrations/assets/${illustrationName}'`
@@ -96,48 +117,62 @@ const IllustrationLibrary = ({
 
   const illustrationListMatchingSearch = illustrationList.filter(
     illustrationName =>
-      illustrationName.toLowerCase().includes(query.toLowerCase()),
+      illustrationName.toLowerCase().includes(query.toLowerCase()) &&
+      matchesBrandSupportFilter(
+        brandSupportByName.get(illustrationName) ?? 'loading',
+        brandFilter,
+      ),
   )
 
   return (
-    <section className="uy:flex uy:flex-col uy:gap-300 uy:max-w-[80vmax] uy:mx-auto">
-      <header>
-        <h3>Illustration Gallery</h3>
-        <p className="uy:m-0!">
-          Click on any illustration to copy its import path to the clipboard.
-        </p>
-      </header>
-      <input
-        type="search"
-        placeholder="Search for an illustration..."
-        className="uy:flex uy:h-500 uy:w-full uy:text-content-form-enabled uy:rounded-100 uy:border uy:border-solid uy:border-border-form-enabled uy:bg-background uy:px-150 uy:py-100 uy:typography-body uy:placeholder:text-content-neutral-lowest uy:hover:border-border-form-hover uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-ring uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring"
-        onChange={e => {
-          updateSearchQuery(e.target.value)
-        }}
-      />
-      <ul className="sb-unstyled uy:list-none uy:grid uy:grid-cols-[repeat(auto-fill,minmax(200px,_1fr))] uy:gap-x-100 uy:gap-y-200">
-        {illustrationListMatchingSearch.map(name => {
-          return (
-            <IllustrationItem
-              name={name}
-              copyText={
-                copiedIllustration === name ? 'Copied!' : 'Click to Copy'
-              }
-              key={name}
-              onClick={() => {
-                copyToClipboard(name)
-              }}
-            >
-              <LazyIllustration
-                variant="picture"
-                alt={`${name} illustration`}
+    <UnityThemeProvider key={theme} theme={theme}>
+      <section className="uy:flex uy:flex-col uy:gap-300 uy:max-w-[80vmax] uy:mx-auto">
+        <header>
+          <h3>Illustration Gallery</h3>
+          <p className="uy:m-0!">
+            Click on any illustration to copy its import path to the clipboard.
+          </p>
+        </header>
+        <div className="uy:flex uy:flex-col uy:gap-150">
+          <BrandSupportFilterControl
+            name="illustration-brand-support-filter"
+            value={brandFilter}
+            onChange={setBrandFilter}
+          />
+          <input
+            type="search"
+            placeholder="Search for an illustration..."
+            className="uy:flex uy:h-500 uy:w-full uy:text-content-form-enabled uy:rounded-100 uy:border uy:border-solid uy:border-border-form-enabled uy:bg-background uy:px-150 uy:py-100 uy:typography-body uy:placeholder:text-content-neutral-lowest uy:hover:border-border-form-hover uy:focus-visible:outline-none uy:focus-visible:ring-2 uy:focus-visible:ring-ring uy:focus-visible:ring-offset-2 uy:focus-visible:ring-utility-focus-ring"
+            onChange={e => {
+              updateSearchQuery(e.target.value)
+            }}
+          />
+        </div>
+        <ul className="sb-unstyled uy:list-none uy:grid uy:grid-cols-[repeat(auto-fill,minmax(200px,_1fr))] uy:gap-x-100 uy:gap-y-200">
+          {illustrationListMatchingSearch.map(name => {
+            return (
+              <IllustrationItem
                 name={name}
-              />
-            </IllustrationItem>
-          )
-        })}
-      </ul>
-    </section>
+                copyText={
+                  copiedIllustration === name ? 'Copied!' : 'Click to Copy'
+                }
+                key={name}
+                onClick={() => {
+                  copyToClipboard(name)
+                }}
+              >
+                <LazyIllustration
+                  variant="picture"
+                  alt={`${name} illustration`}
+                  name={name}
+                  className="uy:h-[160px]"
+                />
+              </IllustrationItem>
+            )
+          })}
+        </ul>
+      </section>
+    </UnityThemeProvider>
   )
 }
 

package/src/docs/blocks/useStorybookTheme.ts

@@ -0,0 +1,73 @@
+import { useSyncExternalStore } from 'react'
+
+import type { UnityTheme } from '@payfit/unity-themes'
+
+import { addons } from 'storybook/preview-api'
+
+const defaultTheme: UnityTheme = 'legacy'
+const globalsUpdatedEvent = 'globalsUpdated'
+let currentTheme: UnityTheme = defaultTheme
+
+function normalizeTheme(theme: unknown): UnityTheme {
+  return theme === 'rebrand' ? 'rebrand' : defaultTheme
+}
+
+function readThemeFromDocument(): UnityTheme {
+  if (typeof document === 'undefined') {
+    return defaultTheme
+  }
+
+  return document.documentElement.getAttribute('data-uy-theme') === 'rebrand'
+    ? 'rebrand'
+    : defaultTheme
+}
+
+function subscribeToThemeChange(onStoreChange: () => void) {
+  const channel = addons.getChannel()
+
+  currentTheme = readThemeFromDocument()
+
+  const handleStoreChange = (theme: UnityTheme) => {
+    if (currentTheme === theme) {
+      return
+    }
+
+    currentTheme = theme
+    onStoreChange()
+  }
+
+  const handleGlobalsUpdated = ({
+    globals,
+  }: {
+    globals?: Record<string, unknown>
+  }) => {
+    handleStoreChange(normalizeTheme(globals?.theme))
+  }
+
+  channel.on(globalsUpdatedEvent, handleGlobalsUpdated)
+
+  const observer =
+    typeof MutationObserver === 'undefined'
+      ? undefined
+      : new MutationObserver(() => {
+          handleStoreChange(readThemeFromDocument())
+        })
+
+  observer?.observe(document.documentElement, {
+    attributes: true,
+    attributeFilter: ['data-uy-theme'],
+  })
+
+  return () => {
+    channel.off(globalsUpdatedEvent, handleGlobalsUpdated)
+    observer?.disconnect()
+  }
+}
+
+export function useStorybookTheme(): UnityTheme {
+  return useSyncExternalStore(
+    subscribeToThemeChange,
+    () => currentTheme,
+    () => defaultTheme,
+  )
+}