@yahoo/uds 3.58.1 → 3.59.0-beta.1

package/src/tokens/automation/configs/switch.ts

@@ -0,0 +1,323 @@
+import {
+  alwaysPaletteAliases,
+  backgroundPaletteColors,
+  borderWidths,
+  foregroundPaletteColors,
+  iconSizes,
+  linePaletteColors,
+  shadowVariants,
+  shadowVariantsWithInvert,
+  spacingAliases,
+  spectrumColors,
+  textVariants,
+} from '@yahoo/uds/fixtures';
+import {
+  createComponentStates,
+  createConfigurableProperty,
+  createLayerConfig,
+  createVariantConfigWithComponentStates,
+  createVariantConfigWithProperties,
+} from '@yahoo/uds/tokens';
+
+import type { ComponentConfig } from '../types';
+
+function defineComponentConfig<T extends ComponentConfig>(config: T): T {
+  // TODO: validation
+  // All subcomponents should have the same variants
+  // The default variant needs to be consistent between sub variants
+  return config;
+}
+
+// TODO: finish the implementation
+export const SwitchConfig = defineComponentConfig({
+  label: 'Switch',
+  description:
+    'A switch is a toggle control that lets users turn a setting on or off. It’s commonly used for binary actions like enabling or disabling a feature.',
+  variants: {
+    variant: createVariantConfigWithComponentStates({
+      label: 'Variant',
+      description:
+        'A switch is a toggle control that lets users turn a setting on or off. It’s commonly used for binary actions like enabling or disabling a feature.',
+      default: 'default',
+      options: ['default'],
+      isConfigurable: true,
+      componentStates: {
+        active: createComponentStates({
+          label: 'active',
+          options: ['on', 'off'],
+          layers: {
+            root: createLayerConfig({
+              label: 'root',
+              properties: {
+                labelColor: createConfigurableProperty({
+                  name: 'color',
+                  label: 'Label color',
+                  pseudoStates: ['hover'],
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'foregroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, foregroundPaletteColors, alwaysPaletteAliases],
+                  defaults: {
+                    default: 'secondary',
+                  },
+                }),
+              },
+            }),
+            switch: createLayerConfig({
+              label: 'switch',
+              properties: {
+                backgroundColor: createConfigurableProperty({
+                  name: 'backgroundColor',
+                  label: 'Track background color',
+                  pseudoStates: ['hover'],
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'backgroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
+                  defaults: {
+                    default: 'brand',
+                  },
+                }),
+                borderColor: createConfigurableProperty({
+                  name: 'borderColor',
+                  label: 'Track border color',
+                  pseudoStates: ['hover'],
+                  typeOfFixture: ['spectrumColors', 'linePaletteColors', 'alwaysPaletteAliases'],
+                  values: [spectrumColors, linePaletteColors, alwaysPaletteAliases],
+                  defaults: {
+                    default: 'brand',
+                  },
+                }),
+                shadow: createConfigurableProperty({
+                  name: 'shadow',
+                  label: 'Drop shadow',
+                  typeOfFixture: ['shadowVariants'],
+                  supportsCustom: true,
+                  values: [shadowVariants],
+                  pseudoStates: ['hover'],
+                  defaults: {
+                    default: 'xl',
+                  },
+                }),
+                insetShadow: createConfigurableProperty({
+                  name: 'insetShadow',
+                  label: 'Inset shadow',
+                  typeOfFixture: ['shadowVariantsWithInvert'],
+                  supportsCustom: true,
+                  values: [shadowVariantsWithInvert],
+                  pseudoStates: ['hover'],
+                  defaults: {
+                    default: '2xl-invert',
+                  },
+                }),
+              },
+            }),
+            handle: createLayerConfig({
+              label: 'handle',
+              properties: {
+                backgroundColor: createConfigurableProperty({
+                  name: 'backgroundColor',
+                  label: 'Handle color',
+                  pseudoStates: ['hover'],
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'backgroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, backgroundPaletteColors, alwaysPaletteAliases],
+                  defaults: {
+                    default: 'primary',
+                  },
+                }),
+                shadow: createConfigurableProperty({
+                  name: 'shadow',
+                  label: 'Drop shadow',
+                  typeOfFixture: ['shadowVariants'],
+                  supportsCustom: true,
+                  values: [shadowVariants],
+                  pseudoStates: ['hover'],
+                  defaults: {
+                    default: 'xl',
+                  },
+                }),
+                insetShadow: createConfigurableProperty({
+                  name: 'insetShadow',
+                  label: 'Inset shadow',
+                  typeOfFixture: ['shadowVariantsWithInvert'],
+                  supportsCustom: true,
+                  values: [shadowVariantsWithInvert],
+                  pseudoStates: ['hover'],
+                  defaults: {
+                    default: '2xl-invert',
+                  },
+                }),
+              },
+            }),
+            handleIcon: createLayerConfig({
+              label: 'handleIcon',
+              properties: {
+                color: createConfigurableProperty({
+                  name: 'color',
+                  label: 'Icon color',
+                  pseudoStates: ['hover'],
+                  typeOfFixture: [
+                    'spectrumColors',
+                    'foregroundPaletteColors',
+                    'alwaysPaletteAliases',
+                  ],
+                  values: [spectrumColors, foregroundPaletteColors],
+                  defaults: {
+                    default: 'brand',
+                  },
+                }),
+              },
+            }),
+          },
+        }),
+      },
+    }),
+    size: createVariantConfigWithProperties({
+      label: 'Size',
+      description: 'These sizes will apply across all variants',
+      isConfigurable: true,
+      default: 'md',
+      options: ['sm', 'md'],
+      layers: {
+        root: createLayerConfig({
+          label: 'root',
+          properties: {
+            spacingHorizontal: createConfigurableProperty({
+              name: 'spacingHorizontal',
+              label: 'Spacing horizontal',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '0',
+                md: '0',
+              },
+            }),
+            spacingVertical: createConfigurableProperty({
+              name: 'spacingVertical',
+              label: 'Spacing vertical',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '1',
+                md: '1.5',
+              },
+            }),
+            gap: createConfigurableProperty({
+              name: 'gap',
+              label: 'Gap',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '2',
+                md: '2',
+              },
+            }),
+            textVariant: createConfigurableProperty({
+              name: 'textVariant',
+              label: 'Text variant',
+              typeOfFixture: ['textVariants'],
+              values: [textVariants],
+              defaults: {
+                sm: 'label4',
+                md: 'label2',
+              },
+            }),
+          },
+        }),
+        switch: createLayerConfig({
+          label: 'switch',
+          properties: {
+            height: createConfigurableProperty({
+              name: 'height',
+              label: 'Track height',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '5',
+                md: '7',
+              },
+            }),
+            width: createConfigurableProperty({
+              name: 'width',
+              label: 'Track width',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '8',
+                md: '12',
+              },
+            }),
+            borderWidth: createConfigurableProperty({
+              name: 'borderWidth',
+              label: 'Track border width',
+              typeOfFixture: ['borderWidths'],
+              values: [borderWidths],
+              defaults: {
+                sm: 'none',
+                md: 'none',
+              },
+            }),
+            padding: createConfigurableProperty({
+              name: 'padding',
+              label: 'Track padding',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '0.5',
+                md: '0.5',
+              },
+            }),
+          },
+        }),
+        handle: createLayerConfig({
+          label: 'Handle',
+          properties: {
+            height: createConfigurableProperty({
+              name: 'height',
+              label: 'Track height',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '4',
+                md: '6',
+              },
+            }),
+            width: createConfigurableProperty({
+              name: 'width',
+              label: 'Track width',
+              typeOfFixture: ['spacingAliases'],
+              values: [spacingAliases],
+              defaults: {
+                sm: '4',
+                md: '6',
+              },
+            }),
+          },
+        }),
+        handleIcon: createLayerConfig({
+          label: 'Icon',
+          properties: {
+            size: createConfigurableProperty({
+              name: 'iconSize',
+              label: 'Icon size',
+              typeOfFixture: ['iconSizes'],
+              values: [iconSizes],
+              defaults: {
+                sm: 'sm',
+                md: 'sm',
+              },
+            }),
+          },
+        }),
+      },
+    }),
+  },
+});

package/src/tokens/automation/index.ts

@@ -0,0 +1,5 @@
+/* eslint-disable @typescript-eslint/consistent-type-exports */
+export type * from './configs';
+export * from './properties';
+export * from './types';
+export * from './utils';

package/src/tokens/automation/mapTextVariantFixtureToValue.ts

@@ -0,0 +1,8 @@
+import { textVariantsSafe } from '../../tailwind/components/getResponsiveTextStyles';
+
+const mapTextVariantFixtureToValue =
+  (key: 'textTransform' | 'fontSize' | 'fontWeight' | 'lineHeight' | 'fontFamily') =>
+  (selected: 'textVariants', value: string) =>
+    `typography.${key}.${textVariantsSafe(value)}`;
+
+export { mapTextVariantFixtureToValue };