tide-design-system 2.0.22 → 2.0.23

package/.eslintrc.cjs

@@ -0,0 +1,90 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution');
+
+module.exports = {
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier',
+    'plugin:storybook/recommended',
+  ],
+  ignorePatterns: ['storybook-static/'],
+  parserOptions: {
+    ecmaVersion: 'latest',
+  },
+  root: true,
+  rules: {
+    'prettier/prettier': [
+      'warn',
+      {
+        bracketLine: false,
+        printWidth: 120,
+        quoteProps: 'consistent',
+        singleAttributePerLine: true,
+        singleQuote: true,
+        tabWidth: 2,
+        vueIndentScriptAndStyle: true,
+      },
+    ],
+    'quote-props': ['warn', 'consistent-as-needed'],
+    'vue/attributes-order': [
+      'warn',
+      {
+        alphabetical: true,
+        // Replicates ASCII sort order w/ special characters.
+        order: [
+          [
+            'UNIQUE', // :prop='foo'
+            'ATTR_DYNAMIC', // :class='foo'
+          ],
+          'EVENTS', // @click='getFoo'
+          [
+            'ATTR_SHORTHAND_BOOL',
+            'ATTR_STATIC',
+            'CONDITIONALS',
+            'CONTENT',
+            'DEFINITION',
+            'GLOBAL',
+            'LIST_RENDERING',
+            'OTHER_DIRECTIVES',
+            'RENDER_MODIFIERS',
+            'SLOT',
+            'TWO_WAY_BINDING',
+          ],
+        ],
+      },
+    ],
+    'vue/component-tags-order': [
+      'warn',
+      {
+        order: ['script', 'template', 'style[scoped]', 'style:not([scoped])'],
+      },
+    ],
+    'vue/html-self-closing': [
+      'error',
+      {
+        html: {
+          component: 'always',
+          normal: 'always',
+          void: 'always',
+        },
+      },
+    ],
+    'vue/multiline-html-element-content-newline': [
+      'warn',
+      {
+        ignores: ['pre', 'textarea'],
+      },
+    ],
+    'vue/script-indent': [
+      'off', // Disabled bc ESLint and Prettier's indentation rules conflict.
+      2,
+      {
+        baseIndent: 1,
+        switchCase: 1,
+      },
+    ],
+    'vue/sort-keys': ['warn', 'asc'],
+  },
+};

package/.storybook/main.ts

@@ -0,0 +1,60 @@
+import type { StorybookConfig } from '@storybook/vue3-vite';
+
+const config: StorybookConfig = {
+  addons: [
+    '@storybook/addon-a11y',
+    '@storybook/addon-essentials',
+  ],
+  docs: {
+    autodocs: 'tag',
+  },
+  framework: {
+    name: '@storybook/vue3-vite',
+    options: {},
+  },
+  stories: [
+    '../src/stories/Welcome.mdx',
+    // '../src/stories/*.stories.ts',
+
+    '../src/stories/Demo*.stories.ts',
+    '../src/stories/Foundations*.stories.ts',
+
+    '../src/stories/TideAccordionItem.stories.ts',
+    '../src/stories/TideAlert.stories.ts',
+    '../src/stories/TideBackgroundImage.stories.ts',
+    '../src/stories/TideBadge.stories.ts',
+    '../src/stories/TideBadgePremium.stories.ts',
+    '../src/stories/TideBadgeTrustedPartner.stories.ts',
+    '../src/stories/TideBreadCrumbs.stories.ts',
+    '../src/stories/TideButton.stories.ts',
+    '../src/stories/TideButtonIcon.stories.ts',
+    '../src/stories/TideButtonPagination.stories.ts',
+    // '../src/stories/TideCard.stories.ts',
+    // '../src/stories/TideCarousel.stories.ts',
+    '../src/stories/TideChipAction.stories.ts',
+    '../src/stories/TideChipFilter.stories.ts',
+    '../src/stories/TideChipInput.stories.ts',
+    '../src/stories/TideColumns.stories.ts',
+    '../src/stories/TideDivider.stories.ts',
+    '../src/stories/TideIcon.stories.ts',
+    '../src/stories/TideIndicator.stories.ts',
+    // '../src/stories/TideImage.stories.ts',
+    '../src/stories/TideInputCheckbox.stories.ts',
+    '../src/stories/TideInputRadio.stories.ts',
+    '../src/stories/TideInputSelect.stories.ts',
+    '../src/stories/TideInputText.stories.ts',
+    '../src/stories/TideInputTextarea.stories.ts',
+    '../src/stories/TideLink.stories.ts',
+    '../src/stories/TideModal.stories.ts',
+    // '../src/stories/TidePagination.stories.ts',
+    // '../src/stories/TideSeoLinks.stories.ts',
+    '../src/stories/TideTabs.stories.ts',
+    '../src/stories/TideToggle.stories.ts',
+  ],
+  viteFinal: async (config, { configType }) => {
+    if (config.build) config.build.sourcemap = 'inline'
+    return config;
+  },
+};
+
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,252 @@
+import { useArgs } from '@storybook/preview-api';
+
+import type { Preview } from '@storybook/vue3';
+
+import '@/assets/css/main.css';
+import '@/assets/css/reset.css';
+import '@/assets/css/storybook.css';
+
+import DemoCssUtilities from '../src/stories/DemoCssUtilities.stories';
+import DemoCssUtilitiesByTextInput from '../src/stories/DemoCssUtilitiesByTextInput.stories';
+import FoundationsMargin from '../src/stories/FoundationsMargin.stories';
+import TideCarousel from '../src/stories/TideCarousel.stories';
+
+const cssRoot = import.meta.env.PROD ? '/public' : '/src/assets/css/realm';
+
+const replaceRealmStyles = (realm: string) => {
+    document.getElementById('realmStyles')?.remove();
+
+    const href = `${cssRoot}/${realm}.css`;
+    const realmStyles = document.createElement('link');
+
+    realmStyles.href = href;
+    realmStyles.id = 'realmStyles';
+    realmStyles.rel = 'stylesheet';
+    document.body.append(realmStyles);
+};
+
+const preview: Preview = {
+  decorators: [
+    (story, context) => {
+      const decoratorOptOuts = [
+        DemoCssUtilities.title,
+        DemoCssUtilitiesByTextInput.title,
+        FoundationsMargin.title,
+        TideCarousel.title,
+      ];
+
+      const decoratorCss = decoratorOptOuts.includes(context.title) ? '' : 'tide-padding-top-2 tide-padding-x-2';
+
+      replaceRealmStyles(context.globals.realm);
+
+      return {
+        components: { story },
+        template: `<div class="${decoratorCss} tide-padding-bottom-4 ${context.globals.surfaceBg} ${context.globals.surfaceFg}"><story /></div>`
+      };
+    },
+    (story, context) => {
+      const [args, updateArgs] = useArgs();
+
+      return story({ ...context, updateArgs });
+    },
+  ],
+  globalTypes: {
+    realm: {
+      description: 'Determines Realm context of dynamic CSS utilities',
+      defaultValue: 'rv',
+      toolbar: {
+        dynamicTitle: true,
+        items: [
+          {
+            title: 'Realm: Aero',
+            value: 'aero',
+          },
+          {
+            title: 'Realm: ATV',
+            value: 'atv',
+          },
+          {
+            title: 'Realm: Boatmart',
+            value: 'boatmart',
+          },
+          {
+            title: 'Realm: Cycle',
+            value: 'cycle',
+          },
+          {
+            title: 'Realm: Equipment',
+            value: 'equip',
+          },
+          {
+            title: 'Realm: PWC',
+            value: 'pwc',
+          },
+          {
+            title: 'Realm: RV',
+            value: 'rv',
+          },
+          {
+            title: 'Realm: Snow',
+            value: 'snow',
+          },
+          {
+            title: 'Realm: Truck',
+            value: 'truck',
+          },
+        ],
+        title: 'Realm',
+      },
+    },
+    surfaceBg: {
+      description: 'Determines Background context of dynamic CSS utilities',
+      defaultValue: 'tide-bg-surface',
+      toolbar: {
+        dynamicTitle: true,
+        items: [
+          {
+            title: 'Surface: Default',
+            value: 'tide-bg-surface',
+          },
+          {
+            title: 'Surface: Variant',
+            value: 'tide-bg-surface-variant',
+          },
+          {
+            title: 'Surface: Brand',
+            value: 'tide-bg-surface-brand',
+          },
+          {
+            title: 'Surface: Accent',
+            value: 'tide-bg-surface-accent',
+          },
+          {
+            title: 'Surface: Accent Variant',
+            value: 'tide-bg-surface-accent-variant',
+          },
+          {
+            title: 'Surface: Gradient',
+            value: 'tide-bg-surface-gradient',
+          },
+          {
+            title: 'Surface: Floating',
+            value: 'tide-bg-surface-floating',
+          },
+        ],
+        title: 'Surface',
+      },
+    },
+    surfaceFg: {
+      description: 'Determines Foreground context of dynamic CSS utilities',
+      defaultValue: 'tide-on-surface',
+      toolbar: {
+        dynamicTitle: true,
+        items: [
+          {
+            title: 'On Surface: Default',
+            value: 'tide-font-on-surface',
+          },
+          {
+            title: 'On Surface: Variant',
+            value: 'tide-font-on-surface-variant',
+          },
+          {
+            title: 'On Surface: Brand',
+            value: 'tide-font-on-surface-brand',
+          },
+          {
+            title: 'On Surface: Inverse',
+            value: 'tide-font-on-surface-inverse',
+          },
+          {
+            title: 'On Surface: Variant Inverse',
+            value: 'tide-font-on-surface-variant-inverse',
+          },
+        ],
+        title: 'On Surface',
+      },
+    },
+  },
+  parameters: {
+    backgrounds: { disable: true },
+    docs: {
+      canvas: {
+        // sourceState:  'shown',
+        withToolbar: false,
+      },
+      controls: { sort: 'requiredFirst' },
+      source: { type: 'dynamic' },
+    },
+    layout: 'fullscreen',
+    options: {
+      storySort: {
+        order: [
+          'Welcome',
+          'Foundations',
+          'Basic Components',
+          'Proof of Concept', [
+            'CSS Utilities Demo',
+            'CSS Utilities By Text Input',
+          ],
+        ],
+      },
+    },
+    toolbar: {
+      grid: { hidden: true },
+    },
+    viewport: {
+      viewports: {
+        extraSmallMin: {
+          name: 'Extra Small (iPhone 12/13 Mini)',
+          styles: {
+            width: '375px',
+            height: '812px',
+          },
+        },
+        extraSmallMax: {
+          name: 'Extra Small Max',
+          styles: {
+            width: '767px',
+            height: '100%',
+          },
+        },
+        smallMin: {
+          name: 'Small Min',
+          styles: {
+            width: '768px',
+            height: '100%',
+          },
+        },
+        smallMax: {
+          name: 'Small Max',
+          styles: {
+            width: '991px',
+            height: '100%',
+          },
+        },
+        mediumMin: {
+          name: 'Medium Min',
+          styles: {
+            width: '992px',
+            height: '100%',
+          },
+        },
+        mediumMax: {
+          name: 'Medium Max',
+          styles: {
+            width: '1231px',
+            height: '100%',
+          },
+        },
+        largeMin: {
+          name: 'Large Min',
+          styles: {
+            width: '1232px',
+            height: '100%',
+          },
+        },
+      },
+    },
+  },
+};
+
+export default preview;

package/dist/css/grid-layout.css

@@ -11,12 +11,16 @@
   --tide-gap-width:           var(--tide-spacing-1);
   --tide-gutter-width:        var(--tide-spacing-1);
   --tide-gutter-width-offset: calc(var(--tide-gutter-width) - var(--tide-gap-width));
+}
 
-  @media (min-width: 768px) {
-    --tide-gutter-width: var(--tide-spacing-2);
+@media (min-width: 768px) {
+  .tide-grid-layout {
+      --tide-gutter-width: var(--tide-spacing-2);
   }
+}
 
-  @media (min-width: 992px) {
+@media (min-width: 992px) {
+  .tide-grid-layout {
     --tide-gap-width: var(--tide-spacing-2);
   }
 }