@envive-ai/react-toolkit 0.3.66 → 0.3.68

package/src/components/SuggestionButton/SuggestionButton.tsx

@@ -2,166 +2,13 @@ import classNames from 'classnames';
 import OutlinedStar from '@envive-ai/react-icons/OutlinedStar';
 import FourPointStar from '@envive-ai/react-icons/FourPointStar';
 import type { SuggestionButtonVariant } from './types';
+import { borderedVariants, getSuggestionButtonVariantClasses } from './variantClasses';
 import { ButtonBase } from '../ButtonBase/ButtonBase';
 
 export const SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS = 'spiffy-suggestion-button-question-class';
 export const SPIFFY_SUGGESTION_BUTTON_ANSWER_CLASS = 'spiffy-suggestion-button-answer-class';
 export const SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS = 'spiffy-suggestion-button-text-class';
 
-// Add a comment that includes the hover prefix so that tailwind will pickup and generate the right css
-// Common class patterns to avoid duplication
-const BORDER_CLASS = 'spiffy-tw-border'; // hover:spiffy-tw-border
-const TEXT_LINK_CLASSES = [
-  'spiffy-tw-text-[--spiffy-colors-text-link]', // hover:spiffy-tw-text-[--spiffy-colors-text-link]
-  'spiffy-tw-fill-[--spiffy-colors-text-link]', // hover:spiffy-tw-fill-[--spiffy-colors-text-link]
-  'spiffy-tw-stroke-[--spiffy-colors-text-link]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-link]
-];
-const TEXT_LIGHT_CLASSES = [
-  'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
-  'spiffy-tw-fill-[--spiffy-colors-text-light]', // hover:spiffy-tw-fill-[--spiffy-colors-text-light]
-  'spiffy-tw-stroke-[--spiffy-colors-text-light]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-light]
-];
-const TEXT_PRIMARY_CLASSES = [
-  'spiffy-tw-text-[--spiffy-colors-text-primary]', // hover:spiffy-tw-text-[--spiffy-colors-text-primary]
-  'spiffy-tw-fill-[--spiffy-colors-text-primary]', // hover:spiffy-tw-fill-[--spiffy-colors-text-primary]
-  'spiffy-tw-stroke-[--spiffy-colors-text-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-primary]
-];
-const ACCENT_PRIMARY_CLASSES = [
-  'spiffy-tw-fill-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-fill-[--spiffy-colors-accent-primary]
-  'spiffy-tw-stroke-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-accent-primary]
-];
-const DARK_BACKGROUND_CLASSES = [
-  'spiffy-tw-bg-[--spiffy-colors-background-dark]', // hover:spiffy-tw-bg-[--spiffy-colors-background-dark]
-  'spiffy-tw-border-[--spiffy-colors-background-dark]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
-];
-const SECONDARY_DARK_BACKGROUND_CLASSES = [
-  'spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]', // hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]
-  'spiffy-tw-border-[--spiffy-colors-background-secondary-dark]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark]
-];
-
-const variantClassMap = new Map<SuggestionButtonVariant, string[]>([
-  [
-    'outlined',
-    [
-      'spiffy-tw-border-[--spiffy-colors-border-outline]', // hover:spiffy-tw-border-[--spiffy-colors-border-outline]
-      ...TEXT_LINK_CLASSES,
-    ],
-  ],
-  [
-    'outlinedLight',
-    [
-      'spiffy-tw-border-[--spiffy-colors-border-outline]', // hover:spiffy-tw-border-[--spiffy-colors-border-outline]
-      'spiffy-tw-bg-[--spiffy-colors-background-light]', // hover:spiffy-tw-bg-[--spiffy-colors-background-light]
-      ...TEXT_LINK_CLASSES,
-      BORDER_CLASS,
-    ],
-  ],
-  [
-    'primary',
-    [
-      'spiffy-tw-bg-[--spiffy-colors-background-primary]', // hover:spiffy-tw-bg-[--spiffy-colors-background-primary]
-      'spiffy-tw-border-[--spiffy-colors-background-primary]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
-      ...TEXT_LIGHT_CLASSES,
-      BORDER_CLASS,
-    ],
-  ],
-  [
-    'secondary',
-    [
-      'spiffy-tw-bg-[--spiffy-colors-background-secondary]', // hover:spiffy-tw-bg-[--spiffy-colors-background-secondary]
-      'spiffy-tw-text-[--spiffy-colors-text-link]', // hover:spiffy-tw-text-[--spiffy-colors-text-link]
-      'spiffy-tw-border-[--spiffy-colors-background-secondary]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
-      ...ACCENT_PRIMARY_CLASSES,
-      BORDER_CLASS,
-    ],
-  ],
-  [
-    'tertiary',
-    [
-      'spiffy-tw-bg-[--spiffy-colors-background-tertiary]', // hover:spiffy-tw-bg-[--spiffy-colors-background-tertiary]
-      'spiffy-tw-border-[--spiffy-colors-background-tertiary]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
-      ...TEXT_LINK_CLASSES,
-      BORDER_CLASS,
-    ],
-  ],
-  ['dark', [...DARK_BACKGROUND_CLASSES, ...TEXT_LIGHT_CLASSES, BORDER_CLASS]],
-  [
-    'darkPrimary',
-    [
-      ...DARK_BACKGROUND_CLASSES,
-      'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
-      ...ACCENT_PRIMARY_CLASSES,
-      BORDER_CLASS,
-    ],
-  ],
-  [
-    'darkAccent',
-    [
-      ...DARK_BACKGROUND_CLASSES,
-      'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
-      'spiffy-tw-fill-[--spiffy-colors-text-accent]', // hover:spiffy-tw-fill-[--spiffy-colors-text-accent]
-      'spiffy-tw-stroke-[--spiffy-colors-text-accent]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-accent]
-      BORDER_CLASS,
-    ],
-  ],
-  // dark accent appears to have been originally been made with the bg color text-accent
-  // instead of the design, acccent-primary. This is a correction to match the design without
-  // regressing intentional uses of the other styling. text-accent and accent-primary are often
-  // the same or very similar colors but in some cases, they are very different to deal with contrast correctly.
-  [
-    'darkAccentContrast',
-    [
-      ...DARK_BACKGROUND_CLASSES,
-      'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
-      'spiffy-tw-fill-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-fill-[--spiffy-colors-accent-primary]
-      'spiffy-tw-stroke-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-accent-primary]
-      BORDER_CLASS,
-    ],
-  ],
-  [
-    'transparent',
-    [
-      'spiffy-tw-bg-transparent', // hover:spiffy-tw-bg-transparent
-      'spiffy-tw-border-[--spiffy-colors-background-light]', // hover:spiffy-tw-border-[--spiffy-colors-background-light]
-      'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
-      'spiffy-tw-fill-transparent', // hover:spiffy-tw-fill-transparent
-      'spiffy-tw-stroke-[--spiffy-colors-text-light]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-light]
-      BORDER_CLASS,
-    ],
-  ],
-  [
-    'transparentDark',
-    [
-      'spiffy-tw-bg-transparent', // hover:spiffy-tw-bg-transparent
-      'spiffy-tw-border-[--spiffy-colors-border-light]', // hover:spiffy-tw-border-[--spiffy-colors-border-light]
-      'spiffy-tw-text-[--spiffy-colors-text-primary]', // hover:spiffy-tw-text-[--spiffy-colors-text-primary]
-      'spiffy-tw-fill-transparent', // hover:spiffy-tw-fill-transparent
-      'spiffy-tw-stroke-[--spiffy-colors-text-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-primary]
-      BORDER_CLASS,
-    ],
-  ],
-  // This is used as the hover state for transparent
-  ['secondaryDark', [...SECONDARY_DARK_BACKGROUND_CLASSES, ...TEXT_LINK_CLASSES, BORDER_CLASS]],
-  [
-    'secondaryAccent',
-    [
-      ...SECONDARY_DARK_BACKGROUND_CLASSES,
-      'spiffy-tw-text-[--spiffy-colors-text-link]', // hover:spiffy-tw-text-[--spiffy-colors-text-link]
-      ...ACCENT_PRIMARY_CLASSES,
-      BORDER_CLASS,
-    ],
-  ],
-  [
-    'lightDark',
-    [
-      'spiffy-tw-bg-[--spiffy-colors-background-light]', // hover:spiffy-tw-bg-[--spiffy-colors-background-light]
-      'spiffy-tw-border-[--spiffy-colors-background-dark]', // hover:spiffy-tw-border-[--spiffy-colors-background-dark]
-      ...TEXT_PRIMARY_CLASSES,
-      BORDER_CLASS,
-    ],
-  ],
-]);
-
 // Choose icon based on variant to match legacy exactly
 const Icon = ({ isAnswer, variant }: { isAnswer: boolean; variant: SuggestionButtonVariant }) => {
   if (isAnswer) return undefined;
@@ -182,28 +29,10 @@ interface SuggestionButtonProps {
   dataAttributes?: Record<string, string>;
   onClick: () => void;
   dataTestId?: string;
+  ariaHidden?: boolean;
+  tabIndex?: number;
 }
 
-const borderedVariants = [
-  'outlined',
-  'outlinedLight',
-  'primary',
-  'secondary',
-  'tertiary',
-  'dark',
-  'darkAccent',
-  'darkAccentContrast',
-  'darkPrimary',
-  'transparent',
-  'transparentDark',
-  'secondaryDark',
-  'secondaryAccent',
-  'lightDark',
-];
-
-const hoverTransform = (variantClass: string[]): string[] =>
-  variantClass?.map(className => `hover:${className}`);
-
 export const SuggestionButton = ({
   variant,
   hoverVariant,
@@ -215,6 +44,8 @@ export const SuggestionButton = ({
   dataAttributes,
   dataTestId,
   onClick,
+  ariaHidden,
+  tabIndex,
 }: SuggestionButtonProps) => {
   const buttonClassName = classNames({
     [SPIFFY_SUGGESTION_BUTTON_QUESTION_CLASS]: !isAnswer,
@@ -238,23 +69,9 @@ export const SuggestionButton = ({
     'spiffy-tw-fill-inherit': true,
   });
 
-  const baseClasses = variantClassMap.get(variant) ?? [];
-  const hoverClasses = variantClassMap.get(hoverVariant) ?? [];
-
-  // Separate border classes for proper cascading
-  const baseBorderClasses = baseClasses.filter(cls => cls.includes('border'));
-  const baseNonBorderClasses = baseClasses.filter(cls => !cls.includes('border'));
-  const hoverBorderClasses = hoverClasses.filter(cls => cls.includes('border'));
-  const hoverNonBorderClasses = hoverClasses.filter(cls => !cls.includes('border'));
-
-  const variantClasses = [
-    ...baseNonBorderClasses,
-    ...hoverTransform(hoverNonBorderClasses),
-    ...baseBorderClasses,
-    ...hoverTransform(hoverBorderClasses),
-  ];
+  const variantClasses = getSuggestionButtonVariantClasses(variant, hoverVariant);
 
-  const buttonClass = `${buttonClassName} ${variantClasses.join(' ')}`;
+  const buttonClass = `${buttonClassName} ${variantClasses}`;
 
   return (
     <ButtonBase
@@ -273,6 +90,8 @@ export const SuggestionButton = ({
       textClass={`${SPIFFY_SUGGESTION_BUTTON_TEXT_CLASS} ${textClassName}`}
       buttonClass={buttonClass}
       onClick={onClick}
+      ariaHidden={ariaHidden}
+      tabIndex={tabIndex}
     />
   );
 };

package/src/components/SuggestionButton/index.ts

@@ -1,2 +1,3 @@
 export * from './SuggestionButton';
 export * from './types';
+export { getSuggestionButtonVariantClasses } from './variantClasses';

package/src/components/SuggestionButton/variantClasses.ts

@@ -0,0 +1,204 @@
+import type { SuggestionButtonVariant } from './types';
+
+// Add a comment that includes the hover prefix so that tailwind will pickup and generate the right css
+// Common class patterns to avoid duplication
+const BORDER_CLASS = 'spiffy-tw-border'; // hover:spiffy-tw-border
+const TEXT_LINK_CLASSES = [
+  'spiffy-tw-text-[--spiffy-colors-text-link]', // hover:spiffy-tw-text-[--spiffy-colors-text-link]
+  'spiffy-tw-fill-[--spiffy-colors-text-link]', // hover:spiffy-tw-fill-[--spiffy-colors-text-link]
+  'spiffy-tw-stroke-[--spiffy-colors-text-link]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-link]
+];
+const TEXT_LIGHT_CLASSES = [
+  'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+  'spiffy-tw-fill-[--spiffy-colors-text-light]', // hover:spiffy-tw-fill-[--spiffy-colors-text-light]
+  'spiffy-tw-stroke-[--spiffy-colors-text-light]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-light]
+];
+const TEXT_PRIMARY_CLASSES = [
+  'spiffy-tw-text-[--spiffy-colors-text-primary]', // hover:spiffy-tw-text-[--spiffy-colors-text-primary]
+  'spiffy-tw-fill-[--spiffy-colors-text-primary]', // hover:spiffy-tw-fill-[--spiffy-colors-text-primary]
+  'spiffy-tw-stroke-[--spiffy-colors-text-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-primary]
+];
+const ACCENT_PRIMARY_CLASSES = [
+  'spiffy-tw-fill-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-fill-[--spiffy-colors-accent-primary]
+  'spiffy-tw-stroke-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-accent-primary]
+];
+const DARK_BACKGROUND_CLASSES = [
+  'spiffy-tw-bg-[--spiffy-colors-background-dark]', // hover:spiffy-tw-bg-[--spiffy-colors-background-dark]
+  'spiffy-tw-border-[--spiffy-colors-background-dark]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
+];
+const SECONDARY_DARK_BACKGROUND_CLASSES = [
+  'spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]', // hover:spiffy-tw-bg-[--spiffy-colors-background-secondary-dark]
+  'spiffy-tw-border-[--spiffy-colors-background-secondary-dark]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary-dark]
+];
+
+const variantClassMap = new Map<SuggestionButtonVariant, string[]>([
+  [
+    'outlined',
+    [
+      'spiffy-tw-border-[--spiffy-colors-border-outline]', // hover:spiffy-tw-border-[--spiffy-colors-border-outline]
+      ...TEXT_LINK_CLASSES,
+    ],
+  ],
+  [
+    'outlinedLight',
+    [
+      'spiffy-tw-border-[--spiffy-colors-border-outline]', // hover:spiffy-tw-border-[--spiffy-colors-border-outline]
+      'spiffy-tw-bg-[--spiffy-colors-background-light]', // hover:spiffy-tw-bg-[--spiffy-colors-background-light]
+      ...TEXT_LINK_CLASSES,
+      BORDER_CLASS,
+    ],
+  ],
+  [
+    'primary',
+    [
+      'spiffy-tw-bg-[--spiffy-colors-background-primary]', // hover:spiffy-tw-bg-[--spiffy-colors-background-primary]
+      'spiffy-tw-border-[--spiffy-colors-background-primary]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
+      ...TEXT_LIGHT_CLASSES,
+      BORDER_CLASS,
+    ],
+  ],
+  [
+    'secondary',
+    [
+      'spiffy-tw-bg-[--spiffy-colors-background-secondary]', // hover:spiffy-tw-bg-[--spiffy-colors-background-secondary]
+      'spiffy-tw-text-[--spiffy-colors-text-link]', // hover:spiffy-tw-text-[--spiffy-colors-text-link]
+      'spiffy-tw-border-[--spiffy-colors-background-secondary]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
+      ...ACCENT_PRIMARY_CLASSES,
+      BORDER_CLASS,
+    ],
+  ],
+  [
+    'tertiary',
+    [
+      'spiffy-tw-bg-[--spiffy-colors-background-tertiary]', // hover:spiffy-tw-bg-[--spiffy-colors-background-tertiary]
+      'spiffy-tw-border-[--spiffy-colors-background-tertiary]', // hover:spiffy-tw-border-[--spiffy-colors-background-secondary]
+      ...TEXT_LINK_CLASSES,
+      BORDER_CLASS,
+    ],
+  ],
+  ['dark', [...DARK_BACKGROUND_CLASSES, ...TEXT_LIGHT_CLASSES, BORDER_CLASS]],
+  [
+    'darkPrimary',
+    [
+      ...DARK_BACKGROUND_CLASSES,
+      'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+      ...ACCENT_PRIMARY_CLASSES,
+      BORDER_CLASS,
+    ],
+  ],
+  [
+    'darkAccent',
+    [
+      ...DARK_BACKGROUND_CLASSES,
+      'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+      'spiffy-tw-fill-[--spiffy-colors-text-accent]', // hover:spiffy-tw-fill-[--spiffy-colors-text-accent]
+      'spiffy-tw-stroke-[--spiffy-colors-text-accent]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-accent]
+      BORDER_CLASS,
+    ],
+  ],
+  // dark accent appears to have been originally been made with the bg color text-accent
+  // instead of the design, acccent-primary. This is a correction to match the design without
+  // regressing intentional uses of the other styling. text-accent and accent-primary are often
+  // the same or very similar colors but in some cases, they are very different to deal with contrast correctly.
+  [
+    'darkAccentContrast',
+    [
+      ...DARK_BACKGROUND_CLASSES,
+      'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+      'spiffy-tw-fill-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-fill-[--spiffy-colors-accent-primary]
+      'spiffy-tw-stroke-[--spiffy-colors-accent-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-accent-primary]
+      BORDER_CLASS,
+    ],
+  ],
+  [
+    'transparent',
+    [
+      'spiffy-tw-bg-transparent', // hover:spiffy-tw-bg-transparent
+      'spiffy-tw-border-[--spiffy-colors-background-light]', // hover:spiffy-tw-border-[--spiffy-colors-background-light]
+      'spiffy-tw-text-[--spiffy-colors-text-light]', // hover:spiffy-tw-text-[--spiffy-colors-text-light]
+      'spiffy-tw-fill-transparent', // hover:spiffy-tw-fill-transparent
+      'spiffy-tw-stroke-[--spiffy-colors-text-light]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-light]
+      BORDER_CLASS,
+    ],
+  ],
+  [
+    'transparentDark',
+    [
+      'spiffy-tw-bg-transparent', // hover:spiffy-tw-bg-transparent
+      'spiffy-tw-border-[--spiffy-colors-border-light]', // hover:spiffy-tw-border-[--spiffy-colors-border-light]
+      'spiffy-tw-text-[--spiffy-colors-text-primary]', // hover:spiffy-tw-text-[--spiffy-colors-text-primary]
+      'spiffy-tw-fill-transparent', // hover:spiffy-tw-fill-transparent
+      'spiffy-tw-stroke-[--spiffy-colors-text-primary]', // hover:spiffy-tw-stroke-[--spiffy-colors-text-primary]
+      BORDER_CLASS,
+    ],
+  ],
+  // This is used as the hover state for transparent
+  ['secondaryDark', [...SECONDARY_DARK_BACKGROUND_CLASSES, ...TEXT_LINK_CLASSES, BORDER_CLASS]],
+  [
+    'secondaryAccent',
+    [
+      ...SECONDARY_DARK_BACKGROUND_CLASSES,
+      'spiffy-tw-text-[--spiffy-colors-text-link]', // hover:spiffy-tw-text-[--spiffy-colors-text-link]
+      ...ACCENT_PRIMARY_CLASSES,
+      BORDER_CLASS,
+    ],
+  ],
+  [
+    'lightDark',
+    [
+      'spiffy-tw-bg-[--spiffy-colors-background-light]', // hover:spiffy-tw-bg-[--spiffy-colors-background-light]
+      'spiffy-tw-border-[--spiffy-colors-background-dark]', // hover:spiffy-tw-border-[--spiffy-colors-background-dark]
+      ...TEXT_PRIMARY_CLASSES,
+      BORDER_CLASS,
+    ],
+  ],
+]);
+
+export const borderedVariants = [
+  'outlined',
+  'outlinedLight',
+  'primary',
+  'secondary',
+  'tertiary',
+  'dark',
+  'darkAccent',
+  'darkAccentContrast',
+  'darkPrimary',
+  'transparent',
+  'transparentDark',
+  'secondaryDark',
+  'secondaryAccent',
+  'lightDark',
+];
+
+const hoverTransform = (variantClass: string[]): string[] =>
+  variantClass?.map(className => `hover:${className}`);
+
+/**
+ * Background/border/text/icon classes for a suggestion button variant plus its hover
+ * variant. Exported so companion controls (e.g. the suggestion bar pause toggle) can
+ * match the merchant's button styling.
+ */
+export const getSuggestionButtonVariantClasses = (
+  variant: SuggestionButtonVariant,
+  hoverVariant: SuggestionButtonVariant,
+): string => {
+  const baseClasses = variantClassMap.get(variant) ?? [];
+  const hoverClasses = variantClassMap.get(hoverVariant) ?? [];
+
+  // Separate border classes for proper cascading
+  const baseBorderClasses = baseClasses.filter(cls => cls.includes('border'));
+  const baseNonBorderClasses = baseClasses.filter(cls => !cls.includes('border'));
+  const hoverBorderClasses = hoverClasses.filter(cls => cls.includes('border'));
+  const hoverNonBorderClasses = hoverClasses.filter(cls => !cls.includes('border'));
+
+  return [
+    ...baseNonBorderClasses,
+    ...hoverTransform(hoverNonBorderClasses),
+    ...baseBorderClasses,
+    ...hoverTransform(hoverBorderClasses),
+    borderedVariants.includes(variant) && 'spiffy-tw-border-[1px] spiffy-tw-border-solid',
+  ]
+    .filter(Boolean)
+    .join(' ');
+};