@kaizen/tailwind 1.3.9 → 1.3.11

package/src/_docs/pages/typography/line-height.stories.tsx

@@ -1,25 +1,24 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import classnames from "classnames"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import classnames from 'classnames'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "leading-"
-const classEntries: Array<{ utilityClassName: string; cssProperty: string }> =
-  Object.entries(kaizenTailwindTheme.lineHeight || []).map(
-    ([suffix, cssProperty]) => ({
-      utilityClassName: `${prefix}${suffix}`,
-      cssProperty,
-    })
-  )
+const prefix = 'leading-'
+const classEntries: { utilityClassName: string; cssProperty: string }[] = Object.entries(
+  kaizenTailwindTheme.lineHeight ?? [],
+).map(([suffix, cssProperty]) => ({
+  utilityClassName: `${prefix}${suffix}`,
+  cssProperty,
+}))
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Typography/Line Height",
+  title: 'Guides/Tailwind/Utility Class References/Typography/Line Height',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -28,17 +27,12 @@ export default {
   },
 } satisfies Meta
 
-export const LineHeight: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const LineHeight: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="line-height"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
-      <p className={classnames("w-0", utilityClass)}>
-        Tutant Meenage Neetle Teetles
-      </p>
+      <p className={classnames('w-0', utilityClass)}>Tutant Meenage Neetle Teetles</p>
     )}
-    isReversed={isReversed}
   />
 )

package/src/_docs/pages/typography/max-text-width.stories.tsx

@@ -1,23 +1,23 @@
-import React from "react"
-import { Meta, StoryFn } from "@storybook/react"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { Meta, StoryFn } from '@storybook/react'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "max-w-"
-const classEntries = Object.entries(
-  kaizenTailwindTheme.extend.maxWidth || []
-).map(([suffix, cssPropertyArr]) => ({
-  utilityClassName: `${prefix}${suffix}`,
-  cssProperty: cssPropertyArr as string,
-}))
+const prefix = 'max-w-'
+const classEntries = Object.entries(kaizenTailwindTheme.extend.maxWidth || []).map(
+  ([suffix, cssPropertyArr]) => ({
+    utilityClassName: `${prefix}${suffix}`,
+    cssProperty: cssPropertyArr as string,
+  }),
+)
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Typography/Max Text Width",
+  title: 'Guides/Tailwind/Utility Class References/Typography/Max Text Width',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -27,34 +27,30 @@ export default {
 } satisfies Meta
 
 const fontClasses = {
-  "max-w-paragraph-lede": "text-paragraph-lede leading-paragraph-lede",
-  "max-w-paragraph": "text-paragraph leading-paragraph",
-  "max-w-paragraph-sm": "text-paragraph-sm leading-paragraph-sm",
-  "max-w-paragraph-xs": "text-paragraph-xs leading-paragraph-xs",
+  'max-w-paragraph-lede': 'text-paragraph-lede leading-paragraph-lede',
+  'max-w-paragraph': 'text-paragraph leading-paragraph',
+  'max-w-paragraph-sm': 'text-paragraph-sm leading-paragraph-sm',
+  'max-w-paragraph-xs': 'text-paragraph-xs leading-paragraph-xs',
 }
 
 const getFontClass = (utilityClass: string): string =>
-  fontClasses[utilityClass as keyof typeof fontClasses] || ""
+  fontClasses[utilityClass as keyof typeof fontClasses] || ''
 
-export const MaxTextWidth: StoryFn<{ isReversed: boolean }> = ({
-  isReversed,
-}) => (
+export const MaxTextWidth: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="max-width"
     classKeyValues={classEntries}
     renderExampleComponent={(utilityClass): React.ReactElement => (
       <>
-        <p className={[utilityClass, getFontClass(utilityClass)].join(" ")}>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, optio
-          incidunt explicabo facilis ipsam, porro magni vero libero itaque rerum
-          deserunt quo molestiae expedita dolor? Alias iusto ad maiores odit! (
-          {[utilityClass, getFontClass(utilityClass)].join(" ")})
+        <p className={[utilityClass, getFontClass(utilityClass)].join(' ')}>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto, optio incidunt explicabo
+          facilis ipsam, porro magni vero libero itaque rerum deserunt quo molestiae expedita dolor?
+          Alias iusto ad maiores odit! ({[utilityClass, getFontClass(utilityClass)].join(' ')})
         </p>
         <code className="text-paragraph-sm bg-gray-300 py-4 px-8">
-          {[utilityClass, getFontClass(utilityClass)].join(" ")}
+          {[utilityClass, getFontClass(utilityClass)].join(' ')}
         </code>
       </>
     )}
-    isReversed={isReversed}
   />
 )

package/src/_docs/pages/typography/text-color.stories.tsx

@@ -1,20 +1,20 @@
-import React from "react"
-import { StoryFn } from "@storybook/react"
-import classnames from "classnames"
-import { TailwindStoryTemplate } from "~tailwind/_docs/utils/TailwindStoryTemplate"
-import { flattenEntries } from "~tailwind/_docs/utils/flattenEntries"
-import { utilityDescription } from "~tailwind/_docs/utils/utilityDescription"
-import { kaizenTailwindTheme } from "~tailwind/tailwind-presets"
+import React from 'react'
+import { StoryFn } from '@storybook/react'
+import classnames from 'classnames'
+import { TailwindStoryTemplate } from '~tailwind/_docs/utils/TailwindStoryTemplate'
+import { flattenEntries } from '~tailwind/_docs/utils/flattenEntries'
+import { utilityDescription } from '~tailwind/_docs/utils/utilityDescription'
+import { kaizenTailwindTheme } from '~tailwind/tailwind-presets'
 
-const prefix = "text-"
-const classEntries = flattenEntries(prefix, kaizenTailwindTheme.colors || {})
+const prefix = 'text-'
+const classEntries = flattenEntries(prefix, kaizenTailwindTheme.colors ?? {})
 
 export default {
-  title: "Guides/Tailwind/Utility Class References/Typography/Text Color",
+  title: 'Guides/Tailwind/Utility Class References/Typography/Text Color',
   parameters: {
     a11y: { disable: true },
     chromatic: { disable: false },
-    docsLayout: "fullPage",
+    docsLayout: 'fullPage',
     docs: {
       description: {
         component: utilityDescription(prefix, classEntries[0].utilityClassName),
@@ -23,7 +23,7 @@ export default {
   },
 }
 
-export const TextColor: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
+export const TextColor: StoryFn = () => (
   <TailwindStoryTemplate
     compiledCssPropertyName="color"
     classKeyValues={classEntries}
@@ -31,22 +31,21 @@ export const TextColor: StoryFn<{ isReversed: boolean }> = ({ isReversed }) => (
       <div className="flex items-center h-100">
         <p
           className={classnames(
-            "font-family-paragraph p-8 rounded font-weight-display text-heading-3 m-0 mr-16",
-            utilityClass
+            'font-family-paragraph p-8 rounded font-weight-display text-heading-3 m-0 mr-16',
+            utilityClass,
           )}
         >
           Light bg
         </p>
         <p
           className={classnames(
-            "font-family-paragraph p-8 bg-[black] rounded font-weight-display text-heading-3 m-0",
-            utilityClass
+            'font-family-paragraph p-8 bg-[black] rounded font-weight-display text-heading-3 m-0',
+            utilityClass,
           )}
         >
           Dark bg
         </p>
       </div>
     )}
-    isReversed={isReversed}
   />
 )

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%',
     })
   })
 })