Merge renovate/rollup into renovate/update/tailwindcss-3.x

.changeset/twelve-fans-notice.md

@@ -0,0 +1,2 @@
+---
+---

docs/.storybook/preview.tsx

@@ -4,8 +4,7 @@ import "./preview.css"
 
 import React, { useEffect } from "react"
 import { decorators as bgDecorators } from "@storybook/addon-backgrounds/preview"
-import { Preview } from "@storybook/react"
-import isChromatic from "chromatic"
+import { Decorator, Preview } from "@storybook/react"
 import { KaizenProvider } from "~components/KaizenProvider"
 import { I18nProvider } from "~components/__react-aria-components__"
 import { ReversedColors } from "~components/__utilities__/v3"
@@ -14,7 +13,6 @@ import { backgrounds } from "../utils/backgrounds"
 import { globalA11yRules } from "../utils/global-a11y-rules"
 
 const [, withBackground] = bgDecorators
-const IS_CHROMATIC = isChromatic()
 
 const globalTypes: Preview["globalTypes"] = {
   textDirection: {
@@ -28,7 +26,7 @@ const globalTypes: Preview["globalTypes"] = {
   },
 }
 
-const RACDecorator = (Story, context): JSX.Element => {
+const RACDecorator: Decorator = (Story, context) => {
   const dir = context.parameters.textDirection ?? context.globals.textDirection
 
   useEffect(() => {
@@ -43,7 +41,7 @@ const RACDecorator = (Story, context): JSX.Element => {
   )
 }
 
-const KaizenProviderDecorator = (Story): JSX.Element => (
+const KaizenProviderDecorator: Decorator = Story => (
   <KaizenProvider>
     <Story />
   </KaizenProvider>
@@ -52,14 +50,6 @@ const KaizenProviderDecorator = (Story): JSX.Element => (
 const decorators: Preview["decorators"] = [
   RACDecorator,
   KaizenProviderDecorator,
-  (Story, context) =>
-    (context.args.isReversed || context.args.reversed) && !IS_CHROMATIC ? (
-      <div className="p-16 m-[-1rem]">
-        <Story />
-      </div>
-    ) : (
-      <Story />
-    ),
   // reverseColor parameter wraps story in ReversedColors context and sets default background to Purple 700
   // @ts-ignore
   (Story, context) => {

docs/components/StickerSheet/StickerSheet.module.css

@@ -1,11 +1,23 @@
 .stickerSheetSectionHeading {
-  margin-bottom: var(--spacing-12);
+  margin-bottom: var(--spacing-20);
 
-  .stickerSheet + .stickerSheet & {
-    margin-top: var(--spacing-lg);
+  .stickerSheetContainer + .stickerSheetContainer & {
+    margin-top: var(--spacing-40);
   }
 }
 
-.stickerSheetTable {
-  margin-left: calc(-1 * var(--spacing-12));
+.stickerSheet {
+  max-width: fit-content;
+  display: grid;
+  gap: var(--spacing-24);
+}
+
+.stretch {
+  max-width: unset;
+}
+
+.stickerSheetHeaders {
+  display: grid;
+  grid-template-columns: subgrid;
+  grid-column: 1 / -1;
 }

docs/components/StickerSheet/StickerSheet.tsx

@@ -1,70 +1,115 @@
-import React, { TableHTMLAttributes } from "react"
+import React, { HTMLAttributes } from "react"
+// eslint-disable-next-line import/no-extraneous-dependencies
+import isChromatic from "chromatic"
 import classnames from "classnames"
 import { Heading } from "~components/Heading"
-import {
-  StickerSheetBody,
-  StickerSheetBodyProps,
-} from "./components/StickerSheetBody"
 import { StickerSheetCell } from "./components/StickerSheetCell"
+import { StickerSheetHeader } from "./components/StickerSheetHeader"
 import {
-  StickerSheetHeader,
-  StickerSheetHeaderProps,
-} from "./components/StickerSheetHeader"
-import { StickerSheetRow } from "./components/StickerSheetRow"
+  StickerSheetRow,
+  StickerSheetRowProps,
+} from "./components/StickerSheetRow"
 import styles from "./StickerSheet.module.css"
 
-type ReversibleSubcomponents = StickerSheetBodyProps | StickerSheetHeaderProps
+const IS_CHROMATIC = isChromatic()
+
+const countMaxColumns = (children: React.ReactNode): number =>
+  React.Children.toArray(children).reduce<number>((acc, child) => {
+    if (React.isValidElement(child) && child.type === StickerSheetRow) {
+      return Math.max(acc, React.Children.count(child.props.children))
+    }
+    return acc
+  }, 0)
+
+type ReversibleSubcomponents = StickerSheetRowProps
 
 const isReversibleSubcomponent = (
   child: React.ReactNode
 ): child is React.ReactElement<ReversibleSubcomponents> =>
   React.isValidElement<ReversibleSubcomponents>(child) &&
-  (child.type === StickerSheetHeader || child.type === StickerSheetBody)
+  child.type === StickerSheetRow
 
 export type StickerSheetProps = {
   children: React.ReactNode
-  heading?: string
+  title?: string
+  headers?: string[]
+  layout?: "fit-content" | "stretch"
   isReversed?: boolean
-} & TableHTMLAttributes<HTMLTableElement>
+} & Omit<HTMLAttributes<HTMLDivElement>, "layout">
 
 export const StickerSheet = ({
   children,
-  heading,
+  title,
+  headers,
+  layout = "fit-content",
   isReversed = false,
   className,
+  style,
   ...restProps
-}: StickerSheetProps): JSX.Element => (
-  <div className={styles.stickerSheet}>
-    {heading && (
-      <Heading
-        variant="heading-3"
-        tag="h1"
-        color={isReversed ? "white" : "dark"}
-        classNameOverride={styles.stickerSheetSectionHeading}
-      >
-        {heading}
-      </Heading>
-    )}
+}: StickerSheetProps): JSX.Element => {
+  const hasVerticalHeaders = React.Children.toArray(children).some(
+    child =>
+      React.isValidElement(child) &&
+      child.type === StickerSheetRow &&
+      child.props.header !== undefined
+  )
 
-    <table
-      className={classnames(styles.stickerSheetTable, className)}
-      {...restProps}
+  const colCount = headers?.length ?? countMaxColumns(children)
+
+  const gridTemplateColumns = hasVerticalHeaders
+    ? `fit-content(100%) repeat(${colCount}, 1fr)`
+    : `repeat(${colCount}, 1fr)`
+
+  return (
+    <div
+      className={classnames(
+        styles.stickerSheetContainer,
+        IS_CHROMATIC && "p-12"
+      )}
     >
-      {React.Children.map(children, child => {
-        if (isReversibleSubcomponent(child)) {
-          return React.cloneElement(child, {
-            ...child.props,
-            isReversed,
-          })
-        }
-        return child
-      })}
-    </table>
-  </div>
-)
+      {title && (
+        <Heading
+          variant="heading-3"
+          tag="h1"
+          color={isReversed ? "white" : "dark"}
+          classNameOverride={styles.stickerSheetSectionHeading}
+        >
+          {title}
+        </Heading>
+      )}
+
+      <div
+        className={classnames(
+          styles.stickerSheet,
+          layout === "stretch" && styles.stretch,
+          className
+        )}
+        style={{ gridTemplateColumns, ...style }}
+        {...restProps}
+      >
+        {headers && (
+          <div className={styles.stickerSheetHeaders}>
+            {hasVerticalHeaders && <div />}
+            {headers.map(heading => (
+              <StickerSheetHeader key={heading} isReversed={isReversed}>
+                {heading}
+              </StickerSheetHeader>
+            ))}
+          </div>
+        )}
+        {React.Children.map(children, child => {
+          if (isReversibleSubcomponent(child)) {
+            return React.cloneElement(child, {
+              isReversed,
+            })
+          }
+          return child
+        })}
+      </div>
+    </div>
+  )
+}
 
-StickerSheet.Header = StickerSheetHeader
-StickerSheet.Body = StickerSheetBody
 StickerSheet.Row = StickerSheetRow
 StickerSheet.Cell = StickerSheetCell
 

docs/components/StickerSheet/components/StickerSheetCell/StickerSheetCell.tsx

@@ -1,19 +1,12 @@
-import React, { TdHTMLAttributes } from "react"
-import classnames from "classnames"
-import styles from "./StickerSheetCell.module.scss"
+import React, { HTMLAttributes } from "react"
 
 export type StickerSheetCellProps = {
   children: React.ReactNode
-} & TdHTMLAttributes<HTMLTableCellElement>
+} & HTMLAttributes<HTMLDivElement>
 
 export const StickerSheetCell = ({
   children,
-  className,
   ...restProps
-}: StickerSheetCellProps): JSX.Element => (
-  <td className={classnames(styles.stickerSheetCell, className)} {...restProps}>
-    {children}
-  </td>
-)
+}: StickerSheetCellProps): JSX.Element => <div {...restProps}>{children}</div>
 
 StickerSheetCell.displayName = "StickerSheet.Cell"

docs/components/StickerSheet/components/StickerSheetHeader/StickerSheetHeader.tsx

@@ -1,37 +1,28 @@
 import React, { HTMLAttributes } from "react"
-import { StickerSheetTableHeading } from "../StickerSheetTableHeading"
+import classnames from "classnames"
+import styles from "./StickerSheetHeader.module.css"
 
 export type StickerSheetHeaderProps = {
-  headings: string[]
-  headingsWidth?: number | string
+  children: React.ReactNode
   isReversed?: boolean
-  hasVerticalHeadings?: boolean
-  verticalHeadingsWidth?: number | string
-} & HTMLAttributes<HTMLTableSectionElement>
+} & HTMLAttributes<HTMLDivElement>
 
 export const StickerSheetHeader = ({
-  headings,
-  headingsWidth,
+  children,
   isReversed = false,
-  hasVerticalHeadings = false,
-  verticalHeadingsWidth = "7rem",
+  className,
   ...restProps
 }: StickerSheetHeaderProps): JSX.Element => (
-  <thead {...restProps}>
-    <tr>
-      {hasVerticalHeadings && <td style={{ width: verticalHeadingsWidth }} />}
-      {headings.map(heading => (
-        <StickerSheetTableHeading
-          key={heading}
-          scope="col"
-          isReversed={isReversed}
-          style={{ width: headingsWidth }}
-        >
-          {heading}
-        </StickerSheetTableHeading>
-      ))}
-    </tr>
-  </thead>
+  <div
+    className={classnames(
+      styles.stickerSheetHeader,
+      isReversed && styles.isReversed,
+      className
+    )}
+    {...restProps}
+  >
+    {children}
+  </div>
 )
 
 StickerSheetHeader.displayName = "StickerSheet.Header"