@kaizen/tailwind 1.3.10 → 1.3.12

package/src/_docs/pages/utility-class-helpers-overview.mdx

@@ -1,8 +1,8 @@
-import { Meta, Unstyled } from "@storybook/blocks"
-import { LinkTo } from "~storybook/components/LinkTo"
-import CopyUtilityClass from "~tailwind/_docs/assets/copy-utility-class.gif?url"
-import UtilitySearchResult from "~tailwind/_docs/assets/utility-search-result.png?url"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
+import { Meta, Unstyled } from '@storybook/blocks'
+import { LinkTo } from '~storybook/components/LinkTo'
+import CopyUtilityClass from '~tailwind/_docs/assets/copy-utility-class.gif?url'
+import UtilitySearchResult from '~tailwind/_docs/assets/utility-search-result.png?url'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
 
 <Meta title="Guides/Tailwind/Utility Class References/Overview" />
 
@@ -18,26 +18,24 @@ As an example, `borderColor` is listed in this section because we have a custom
 - [Structure](#structure)
 - [Example usage](#example-usage)
 
-<br/>
+<br />
 
 ## Structure
 
 The references provide the following structure for each utility class:
 
 <Unstyled>
-<div className="w-100">
-  <TailwindStoryTemplate
-    compiledCssPropertyName="width"
-    classKeyValues={[{utilityClassName: "text-heading-1", cssProperty: "2.125rem"}]}
-    renderExampleComponent={cssProperty => (
-      <p style={{ fontSize: cssProperty }}>Aa</p>
-    )}
-  />
-</div>
+  <div className="w-100">
+    <TailwindStoryTemplate
+      compiledCssPropertyName="width"
+      classKeyValues={[{ utilityClassName: 'text-heading-1', cssProperty: '2.125rem' }]}
+      renderExampleComponent={(cssProperty) => <p style={{ fontSize: cssProperty }}>Aa</p>}
+    />
+  </div>
 </Unstyled>
 
-<br/>
-<br/>
+<br />
+<br />
 
 ### Utility Class
 
@@ -51,7 +49,7 @@ Represents the CSS property that Tailwind will compile for you when it recognize
 
 A visual representation of the CSS generated by the utility class. You can inspect this element in the DOM to see the utility class in action.
 
-<br/>
+<br />
 
 ## Example usage
 
@@ -69,18 +67,21 @@ A visual representation of the CSS generated by the utility class. You can inspe
   <img src={UtilitySearchResult} alt="Utility class search result" />
 </div>
 
-<p>Can&apos;t find it here? That means we don&apos;t have a custom preset for it, and the utility class you need will be unchanged from the Tailwind Default.</p>
+<p>
+  Can&apos;t find it here? That means we don&apos;t have a custom preset for it, and the utility
+  class you need will be unchanged from the Tailwind Default.
+</p>
 <p>Search in the [Tailwind docs](https://tailwindcss.com/docs/installation) instead.</p>
 
-<br/>
-<br/>
+<br />
+<br />
 
 ### 2. Find the utility class that compiles to the desired CSS, and copy it
 
 <img src={CopyUtilityClass} alt="Copy utility class" />
 
-<br/>
-<br/>
+<br />
+<br />
 
 ### 3. Add the utility class to the element
 

package/src/_docs/pages/working-with-tailwind.mdx

@@ -1,5 +1,5 @@
-import { Canvas, Meta } from "@storybook/blocks"
-import * as Examples from "./working-with-tailwind.stories"
+import { Canvas, Meta } from '@storybook/blocks'
+import * as Examples from './working-with-tailwind.stories'
 
 <Meta of={Examples} />
 
@@ -12,7 +12,7 @@ This page describes and demonstrates the main intended use cases for this packag
 - [Creating bespoke components](#creating-bespoke-components)
 - [Recommended escape hatch](#recommended-escape-hatch)
 
-<br/>
+<br />
 
 ## Spacing and layouts
 
@@ -33,7 +33,7 @@ Here's a more complex example, where some `<Card>` components and text have been
 
 <Canvas of={Examples.TailwindExampleSpacingAndLayoutsComplex} />
 
-<br/>
+<br />
 
 ## Altering Kaizen components with classNameOverride
 
@@ -48,18 +48,20 @@ In this example, a Tailwind css rule is being applied to a Kaizen `<Heading />`
 
 - first-letter:capitalize: Adds text-transform: capitalize on the first-letter pseudo selector
 
-<br/>
+<br />
 
 ## Creating bespoke components
+
 Occasionally snowflakes need to be created. This package provides common utilities based on our design tokens, such as color, border-radius, and font-family. Ideally, as much styling of bespoke components should be handled with Tailwind, but keep in mind that scss can still be used when necessary.
 
 Here is an example of our TW package being used to create a bespoke, non-Kaizen component:
 
 <Canvas of={Examples.TailwindExampleSnowflake} />
 
-<br/>
+<br />
 
 ### The container div
+
 - `w-[250px]`: Adds `width: 250px`. This is an example of an arbitrary value being used to inject a custom suffix
 - `rounded`: Adds `border-radius: 7px`. This is one of our custom preset values
 - `border-dashed`: Adds `border-style: dashed`
@@ -68,18 +70,20 @@ Here is an example of our TW package being used to create a bespoke, non-Kaizen
 - `text-center`: Adds `text-align: center`
 
 ### The p tag
+
 - `m-0`: Adds `margin: 0`
 - `p-12`: Adds `padding: .75rem` (12px = 0.75rem)
 - `pl-16`: Adds `padding-left: 1rem` (16px = 1rem)
 - `font-family-paragraph`: Adds `font-family: "Inter", "Noto Sans", ...`
 - `text-blue-500`: Adds `color: #0168b3` (our blue-500 design token)
 
-<br/>
+<br />
 
 ## Recommended Escape Hatch
 
 If you find yourself needing to add styles in a way that is unsupported or otherwise difficult in Tailwind, the recommended alternative is CSS. CSS classes can be added alongside Tailwind utility classes without trouble, and the Tailwind docs recommend some useful post-css plugins [here](https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus).
 
 ### Why not SCSS?
+
 - SCSS is currently a contained option, so writing new SCSS in our codebases is discouraged.
 - The Tailwind docs explicitly recommend <em>not</em> using Tailwind with preprocessors, as it leads to all sorts of quirks and work-arounds. Read more [here](https://tailwindcss.com/docs/using-with-preprocessors#using-sass-less-or-stylus).

package/src/_docs/pages/working-with-tailwind.stories.tsx

@@ -1,17 +1,14 @@
-import React from "react"
-import { StoryFn } from "@storybook/react"
-import { Card } from "~components/Card"
-import { Heading } from "~components/Heading"
-import {
-  CustomSurvey,
-  CustomUnattributedSurvey,
-} from "~components/Illustration"
-import { Skirt } from "~components/Skirt"
-import { Button } from "~components/__actions__/v2"
-import { TailwindStoryTemplate } from "../utils/TailwindStoryTemplate"
+import React from 'react'
+import { StoryFn } from '@storybook/react'
+import { Card } from '~components/Card'
+import { Heading } from '~components/Heading'
+import { CustomSurvey, CustomUnattributedSurvey } from '~components/Illustration'
+import { Skirt } from '~components/Skirt'
+import { Button } from '~components/__actions__/v2'
+import { TailwindStoryTemplate } from '../utils/TailwindStoryTemplate'
 
 export default {
-  title: "Guides/Tailwind/Working with Tailwind",
+  title: 'Guides/Tailwind/Working with Tailwind',
 }
 
 export const TailwindExampleSpacingAndLayouts: StoryFn = () => (
@@ -47,12 +44,8 @@ export const TailwindExampleSpacingAndLayoutsComplex: StoryFn = () => (
         </p>
         {/* Adds margin-top, flex, and a height of 200px */}
         <div className="mt-64 flex h-[200px]">
-          {[0, 1, 2, 3].map(index => (
-            <Card
-              key={index}
-              variant="informative"
-              classNameOverride="mr-24 last:mr-0 w-full"
-            >
+          {[0, 1, 2, 3].map((index) => (
+            <Card key={index} variant="informative" classNameOverride="mr-24 last:mr-0 w-full">
               {/* Adds height and width of 100% */}
               <div className="w-full h-100" />
             </Card>
@@ -75,9 +68,7 @@ export const TailwindExampleClassNameOverrideMargin: StoryFn = () => (
     <Card>
       <TailwindStoryTemplate.CardContent
         title="Card 2"
-        illustration={
-          <CustomUnattributedSurvey alt="custom-unattributed-survey" />
-        }
+        illustration={<CustomUnattributedSurvey alt="custom-unattributed-survey" />}
       />
     </Card>
   </div>

package/src/_docs/utils/TailwindStoryTemplate/TailwindStoryTemplate.tsx

@@ -1,12 +1,12 @@
-import React, { useState } from "react"
-import { InlineNotification } from "~components/Notification"
-import { StickerSheet } from "~storybook/components/StickerSheet"
-import { CardContent } from "./components/CardContent"
-import { CodeSnippet } from "./components/CodeSnippet"
+import React, { useState } from 'react'
+import { Heading } from '~components/Heading'
+import { InlineNotification } from '~components/Notification'
+import { CardContent } from './components/CardContent'
+import { CodeSnippet } from './components/CodeSnippet'
 
 type Props = {
   compiledCssPropertyName: string
-  classKeyValues: Array<{ utilityClassName: string; cssProperty: string }>
+  classKeyValues: { utilityClassName: string; cssProperty: string }[]
   renderExampleComponent: (utilityClass: string) => React.ReactElement
   isReversed?: boolean
 }
@@ -15,48 +15,58 @@ export const TailwindStoryTemplate = ({
   compiledCssPropertyName,
   classKeyValues,
   renderExampleComponent,
-  isReversed = false,
 }: Props): React.ReactElement => {
   const [copiedText, setCopiedText] = useState<null | string>(null)
 
   return (
     <div className="w-full">
-      <StickerSheet
-        className="border-none w-full"
-        isReversed={isReversed}
-        border={1}
-        rules="rows"
-      >
-        <StickerSheet.Header
-          className="text-left border-b border-gray-400"
-          headings={["Utility Class", "Compiled CSS", "Example"]}
-        />
-        <StickerSheet.Body>
-          {classKeyValues.map((presetData, _index) => {
+      <table className="border-collapse w-full font-family-paragraph">
+        <thead className="text-left">
+          <tr className="border-b border-gray-400">
+            <th className="p-12">
+              <Heading variant="heading-5" tag="span">
+                Utility Class
+              </Heading>
+            </th>
+            <th className="p-12">
+              <Heading variant="heading-5" tag="span">
+                Compiled CSS
+              </Heading>
+            </th>
+            <th className="p-12">
+              <Heading variant="heading-5" tag="span">
+                Example
+              </Heading>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          {classKeyValues.map((presetData, index) => {
             const { utilityClassName, cssProperty } = presetData
             return (
-              <StickerSheet.Row
-                key={_index}
-                rowTitle=""
-                className="border-b-1 border-gray-400"
-              >
-                <div className="mr-32 min-w-max max-w-[300px]">
-                  <CodeSnippet
-                    text={utilityClassName.replace("-DEFAULT", "")}
-                    onCopy={(text: string): void => setCopiedText(text)}
-                  />
-                </div>
-                <p className="mr-32 w-max font-family-paragraph">
-                  {compiledCssPropertyName}: {cssProperty}
-                </p>
-                <div className="font-family-paragraph">
-                  {renderExampleComponent(utilityClassName)}
-                </div>
-              </StickerSheet.Row>
+              <tr key={index} className="border-b-1 border-gray-400">
+                <td className="p-12">
+                  <div className="mr-32 min-w-max max-w-[300px]">
+                    <CodeSnippet
+                      text={utilityClassName.replace('-DEFAULT', '')}
+                      onCopy={(text: string): void => setCopiedText(text)}
+                    />
+                  </div>
+                </td>
+                <td className="p-12">
+                  <p className="mr-32 w-max">
+                    {compiledCssPropertyName}: {cssProperty}
+                  </p>
+                </td>
+                <td className="p-12">
+                  <div>{renderExampleComponent(utilityClassName)}</div>
+                </td>
+              </tr>
             )
           })}
-        </StickerSheet.Body>
-      </StickerSheet>
+        </tbody>
+      </table>
+
       <div className="fixed top-[10px] left-[10px]">
         {copiedText && (
           <InlineNotification
@@ -64,8 +74,8 @@ export const TailwindStoryTemplate = ({
             hideCloseIcon
             onHide={(): void => setCopiedText(null)}
             headingProps={{
-              children: "Copied to clipboard: ",
-              variant: "heading-6",
+              children: 'Copied to clipboard: ',
+              variant: 'heading-6',
             }}
           >
             {copiedText}
@@ -78,4 +88,4 @@ export const TailwindStoryTemplate = ({
 
 TailwindStoryTemplate.CardContent = CardContent
 
-TailwindStoryTemplate.displayName = "TailwindStoryTemplate"
+TailwindStoryTemplate.displayName = 'TailwindStoryTemplate'

package/src/_docs/utils/TailwindStoryTemplate/components/CardContent/CardContent.tsx

@@ -1,16 +1,13 @@
-import React from "react"
-import { Heading } from "~components/Heading"
-import { Button } from "~components/__actions__/v2"
+import React from 'react'
+import { Heading } from '~components/Heading'
+import { Button } from '~components/__actions__/v2'
 
 type CardContentProps = {
   title: string
   illustration: React.ReactElement
 }
 
-export const CardContent = ({
-  title,
-  illustration,
-}: CardContentProps): React.ReactElement => (
+export const CardContent = ({ title, illustration }: CardContentProps): React.ReactElement => (
   <div className="flex w-[400px] flex-col items-center p-24 pt-48">
     <Heading variant="heading-3">{title}</Heading>
     <p className="pt-12 pb-24 text-center font-family-paragraph text-heading-6 font-weight-paragraph text-purple-800">
@@ -23,4 +20,4 @@ export const CardContent = ({
   </div>
 )
 
-CardContent.displayName = "CardContent"
+CardContent.displayName = 'CardContent'

package/src/_docs/utils/TailwindStoryTemplate/components/CardContent/index.ts

@@ -1 +1 @@
-export * from "./CardContent"
+export * from './CardContent'

package/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/CodeSnippet.tsx

@@ -1,5 +1,5 @@
-import React, { useState } from "react"
-import { Icon } from "~components/__future__"
+import React, { useState } from 'react'
+import { Icon } from '~components/__future__'
 
 type Props = {
   text: string
@@ -11,7 +11,7 @@ export const CodeSnippet = ({ text, onCopy }: Props): React.ReactElement => {
   const handleCopy = (utilityClassNameName: string): void => {
     navigator.clipboard.writeText(text)
     setCopyIconIsChecked(true)
-    onCopy && onCopy(utilityClassNameName)
+    onCopy?.(utilityClassNameName)
   }
 
   return (

package/src/_docs/utils/TailwindStoryTemplate/components/CodeSnippet/index.ts

@@ -1 +1 @@
-export * from "./CodeSnippet"
+export * from './CodeSnippet'

package/src/_docs/utils/TailwindStoryTemplate/index.ts

@@ -1 +1 @@
-export * from "./TailwindStoryTemplate"
+export * from './TailwindStoryTemplate'

package/src/_docs/utils/flattenEntries.ts

@@ -6,30 +6,29 @@ type ResolvableTo<T> = T | ((utils: any) => T)
 
 export const flattenEntries = (
   prefix: string,
-  themeObj: ResolvableTo<RecursiveKeyValuePair<string, string>>
-): Array<{
+  themeObj: ResolvableTo<RecursiveKeyValuePair<string, string>>,
+): {
   utilityClassName: string
   cssProperty: string
-}> => {
+}[] => {
   const classKeyVal: string[][] = Object.entries(themeObj || [])
-  const flattenedEntries: Array<{
+  const flattenedEntries: {
     utilityClassName: string
     cssProperty: string
-  }> = []
-  classKeyVal.forEach(colorGroup => {
+  }[] = []
+  classKeyVal.forEach((colorGroup) => {
     const [classModifier, cssProperty] = colorGroup
-    if (typeof cssProperty === "string") {
+    if (typeof cssProperty === 'string') {
       flattenedEntries.push({
         utilityClassName: `${prefix}${classModifier}`,
         cssProperty,
       })
     } else {
-      Object.entries(cssProperty as Record<string, string>).forEach(
-        classNamePair =>
-          flattenedEntries.push({
-            utilityClassName: `${prefix}${classModifier}-${classNamePair[0]}`,
-            cssProperty: classNamePair[1],
-          })
+      Object.entries(cssProperty as Record<string, string>).forEach((classNamePair) =>
+        flattenedEntries.push({
+          utilityClassName: `${prefix}${classModifier}-${classNamePair[0]}`,
+          cssProperty: classNamePair[1],
+        }),
       )
     }
   })

package/src/_docs/utils/utilityDescription.ts

@@ -1,5 +1,2 @@
-export const utilityDescription = (
-  prefix: string,
-  utilityClassName: string
-): string =>
+export const utilityDescription = (prefix: string, utilityClassName: string): string =>
   `Use class \`${prefix}\\<SUFFIX>\`, ie: \`className="${utilityClassName}"\``

package/src/index.ts

@@ -1 +1 @@
-export * from "./tailwind-presets"
+export * from './tailwind-presets'

package/src/kz-height.ts

@@ -1,12 +1,12 @@
 export const kzHeight = {
-  0: "0",
-  25: "25%",
-  33: "33.333333%",
-  50: "50%",
-  75: "75%",
-  100: "100%",
-  auto: "auto",
-  min: "min-content",
-  max: "max-content",
-  fit: "fit-content",
+  0: '0',
+  25: '25%',
+  33: '33.333333%',
+  50: '50%',
+  75: '75%',
+  100: '100%',
+  auto: 'auto',
+  min: 'min-content',
+  max: 'max-content',
+  fit: 'fit-content',
 }

package/src/kz-spacing.spec.ts

@@ -1,38 +1,38 @@
-import { filterDenyListValues } from "./kz-spacing"
+import { filterDenyListValues } from './kz-spacing'
 
-describe("filterDenyListValues", () => {
-  it("Keeps all numeric keys", () => {
+describe('filterDenyListValues', () => {
+  it('Keeps all numeric keys', () => {
     const result = filterDenyListValues({
-      0: "0",
-      xs: "0.375rem",
-      1: ".0625rem",
-      sm: "0.75rem",
-      2: ".125rem",
+      0: '0',
+      xs: '0.375rem',
+      1: '.0625rem',
+      sm: '0.75rem',
+      2: '.125rem',
     })
 
     expect(result).toEqual({
-      0: "0",
-      1: ".0625rem",
-      2: ".125rem",
+      0: '0',
+      1: '.0625rem',
+      2: '.125rem',
     })
   })
-  it("Keeps valid tailwind defaults", () => {
+  it('Keeps valid tailwind defaults', () => {
     const result = filterDenyListValues({
-      0: "0",
-      xs: "0.375rem",
-      1: ".0625rem",
-      sm: "0.75rem",
-      2: ".125rem",
-      "w-1/2": "50%",
-      "w-full": "100%",
+      0: '0',
+      'xs': '0.375rem',
+      1: '.0625rem',
+      'sm': '0.75rem',
+      2: '.125rem',
+      'w-1/2': '50%',
+      'w-full': '100%',
     })
 
     expect(result).toEqual({
-      0: "0",
-      1: ".0625rem",
-      2: ".125rem",
-      "w-1/2": "50%",
-      "w-full": "100%",
+      0: '0',
+      1: '.0625rem',
+      2: '.125rem',
+      'w-1/2': '50%',
+      'w-full': '100%',
     })
   })
 })

package/src/kz-spacing.ts

@@ -1,35 +1,34 @@
-import { heartTheme } from "@kaizen/design-tokens"
+import { heartTheme } from '@kaizen/design-tokens'
 
 const tokenDenyList: string[] = [
-  "xs",
-  "sm",
-  "md",
-  "lg",
-  "xl",
-  "xxl",
-  "xxxl",
-  "xxxxl",
-  "xxxxxl",
-  "xs-id",
-  "sm-id",
-  "md-id",
-  "lg-id",
-  "xl-id",
-  "xxl-id",
-  "xxxl-id",
-  "xxxxl-id",
-  "xxxxxl-id",
+  'xs',
+  'sm',
+  'md',
+  'lg',
+  'xl',
+  'xxl',
+  'xxxl',
+  'xxxxl',
+  'xxxxxl',
+  'xs-id',
+  'sm-id',
+  'md-id',
+  'lg-id',
+  'xl-id',
+  'xxl-id',
+  'xxxl-id',
+  'xxxxl-id',
+  'xxxxxl-id',
 ]
 
 /**
  * checks if a key from design tokens should be filtered from tailwind
  */
-const isValidToken = (key: string | number): boolean =>
-  tokenDenyList.indexOf(`${key}`) < 0
+const isValidToken = (key: string | number): boolean => !tokenDenyList.includes(`${key}`)
 
 // Filters out non-pixel-based spacing tokens, such as shirt sizes
 export const filterDenyListValues = (
-  spacingTokensObject: Record<string, string>
+  spacingTokensObject: Record<string, string>,
 ): Record<string, string> => {
   const keyValuePairs = Object.entries(spacingTokensObject)