tide-design-system 2.2.4 → 2.2.6

package/src/docs/storybook.md

@@ -1,26 +1,17 @@
 # TIDE Storybook
-
-Storybook is a frontend workshop for building, testing, and documenting UI components and styles in isolation.
+[Storybook](https://tide-design-system.netlify.app) is a third-party frontend interface for providing dynamic, integrated documentation for custom UI components and styles in isolation.
 
 ## Benefits
+The TIDE Storybook was implemented to facilitate collaboration between departments within the Trader Interactive development group:
+- **Product Managers** can reference TIDE utilities and components when writing requirements for new pages and features.
+- **Designers** can interact with TIDE utilities and components in real browser conditions independent from any specific business context.
+- **Developers** can dynamically leverage components without having to become reacquinted with formatting standards, styling structures, or complex prop implementations.
+- **QA Engineers** can compare changes under test to the intended design and behavior of TIDE structures absent the context of a consumer repository.
 
-The TIDE Storybook was implemented to facilitate collaboration between 3 primary departments within the Trader Interactive development group:
-- **Product Managers** can reference our components library when writing requirements for new pages and features.
-- **Designers** can interact with our components in real browser conditions independent from any specific context in our websites.
-- **Engineers** can leverage our components without having to become reacquinted with formatting standards, styling structures, or complex prop implementations.
-
-## TODO
-- based in stories
-- args -> props, etc.
-
-## Public
-
-The TIDE Storybook UI is currently hosted from Netlify, a free, third-party platform connected to the Trader developer's personal GitHub fork. This is a temporary measure, to be replaced by a permanent solution that integrates the private server deployment process into the `tide-design-system` repository of the `traderinteractive` GitHub account for hosting to users within the Trader VPN.
-
-https://tide-design-system.netlify.app
+## Hosting
+TIDE Storybook is currently publicly hosted via Netlify, a free, third-party platform connected to a fork of the TIDE repository. This is a temporary measure, to be replaced by a permanent solution that integrates the private server deployment process directly into the `traderinteractive` GitHub account for hosting to users within the Trader VPN.
 
 ## Local Setup
-
 1. Install dependencies:
 
    `npm install`
@@ -30,10 +21,24 @@ https://tide-design-system.netlify.app
    `npm run storybook`
 
 ## Storybook UI
-
-1. **Sidebar** serves as table of contents along the left edge of the screen
-2. **Toolbar** offers project-level controls across the top of the screen
-3. **Canvas** contains an interactive demo
-4. **Code snippet** displays live-updated markup implementation available to copy
-5. **Controls** determine the options passed into demo and code snippet
-6. **Stories** demonstrate all major features of a given structure
+1. **Sidebar** serves as table of contents along the left edge of the screen.
+2. **Toolbar** offers project-level controls across the top of the screen.
+3. **Canvas** contains an interactive demo.
+4. **Code Snippet** displays live-updated markup implementation available to copy.
+5. **Controls** determine the options passed into demo and code snippet.
+6. **Stories** demonstrate all major features of a given structure.
+
+## Using Storybook
+### Utilities
+1. Visit the [Storybook](https://tide-design-system.netlify.app) site.
+2. Select the relevant utility from the Sidebar.
+3. Use the Controls table to modify the options to reflect Jira requirements and/or Figma mock.
+4. The Canvas panel is updated dynamically to reflect the options as implemented via the CSS utility classes.
+5. The Code Snippet panel (activated by clicking the "Show code" button) is updated dynamically to demonstrate the correct implementation of the CSS utilities.
+
+### Components
+1. Visit the [Storybook](https://tide-design-system.netlify.app) site.
+2. Select the relevant component from the Sidebar.
+3. Use the Controls table to modify the options to reflect Jira requirements and/or Figma mock.
+4. The Canvas panel is updated dynamically to demonstrate an interactive implementation of the correct component variant.
+5. The Code Snippet panel (activated by clicking the "Show code" button) is updated dynamically to demonstrate the correct implementation of the TIDE component.

package/src/docs/style-guide.md

@@ -0,0 +1,22 @@
+# TIDE Marketplace Style Guides
+Each redesign realm has an unlinked, yet publicly-accessible Style Guide page that demonstrates the styling and behavior of all major TIDE styles and components in a realm-specific production environment.
+
+## Benefits
+The TIDE Marketplace Style Guides were implemented to facilitate collaboration between departments within the Trader Interactive development group:
+- **Product Managers** can quickly review which TIDE structures are already integrated into the `marketplace` repository.
+- **Designers** can quickly verify that TIDE structures accurately reflect the designs.
+- **Developers** can quickly view the standard implementation of any given structure as both source code and distributed code.
+- **QA Engineers** can quickly verify that the design and behavior of TIDE structures have not been unintentionally altered by a dependency upgrade under test.
+
+## Links
+- Current redesign realms:
+  - [ATV](https://www.atvtrader.com/style-guide)
+  - [Boatmart](https://www.boatmart.com/style-guide)
+  - [RV](https://www.rvtrader.com/style-guide)
+- Forthcoming redesign realms:
+  - [Aero](https://www.aerotrader.com/style-guide)
+  - [Cycle](https://www.cycletrader.com/style-guide)
+  - [Equipment](https://www.equipmenttrader.com/style-guide)
+  - [PWC](https://www.pwctrader.com/style-guide)
+  - [Snow](https://www.snowmobiletrader.com/style-guide)
+  - [Truck](https://www.commercialtrucktrader.com/style-guide)

package/src/docs/workflows.md

@@ -0,0 +1,20 @@
+# TIDE Collaborative Workflows
+
+## TIDE-first development
+
+1. Identify a ticket on your product team's Jira backlog that has a dependency on an approved TIDE structure not yet present in the TIDE repository.
+2. Contact the TIDE team via the [#ti-marketplaces-design-system-public](https://cargroup.enterprise.slack.com/archives/C08TEFUUE4X) Slack channel to discuss the dependency and to determine whether a TIDE ticket already exists in Jira or must be created, then mark the dependent ticket as `blocked by` the TIDE ticket via Jira's `Add > Linked work item` feature.
+3. The TIDE team will estimate and prioritize the ticket and pull it into a TIDE sprint accordingly.
+4. Once pulled into a sprint, the TIDE team will develop, peer review, test, and merge a new branch into the TIDE repository, then publish a new version of the `tide-design-system` package to the NPM registry.
+5. The TIDE team will notify the owners of the dependent ticket that the blockage has been removed.
+6. From the consumer repository, manually upgrade the dependency to the latest version of the `tide-design-system` package, then develop, peer review, test, and release the dependent ticket in the consumer repository as normal.
+
+## Consumer-first development
+
+1. Develop, peer review, test, and release the proposed TIDE structures in a consumer repository as with any other Jira task.
+2. Create a ticket in the [TIDE Jira backlog](https://traderinteractive.atlassian.net/jira/software/c/projects/TIDE/boards/1092/backlog) identifying the relevant structures and requesting that they be migrated/adapted into the TIDE repository.
+3. Post a message in the [#ti-marketplaces-design-system-public](https://cargroup.enterprise.slack.com/archives/C08TEFUUE4X) Slack channel to make the TIDE team aware of the proposal.
+4. The TIDE team will review the proposal.
+   1. If accepted, the TIDE team will prioritize the ticket for development and release.
+   2. If not accepted, the TIDE team will contact the reporter for additional discussion before closing the Jira ticket as `Won't Do`.
+5. Jira will automatically contact the Reporter of the ticket with relevant updates, including publication.

package/src/stories/FoundationsBorder.stories.ts

@@ -88,7 +88,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Border',
+  title: 'Utilities/Border',
 };
 
 export const Default = {};

package/src/stories/FoundationsColor.stories.ts

@@ -94,7 +94,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Color',
+  title: 'Utilities/Color',
 };
 
 export const Default = {};

package/src/stories/FoundationsGap.stories.ts

@@ -103,7 +103,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Gap',
+  title: 'Utilities/Gap',
 };
 
 export const Default = {};

package/src/stories/FoundationsGrid.stories.ts

@@ -102,7 +102,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Grid',
+  title: 'Utilities/Grid',
 };
 
 export const Default = {};

package/src/stories/FoundationsMargin.stories.ts

@@ -94,7 +94,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Margin',
+  title: 'Utilities/Margin',
 };
 
 export const MarginDefault = {

package/src/stories/FoundationsPadding.stories.ts

@@ -67,7 +67,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Padding',
+  title: 'Utilities/Padding',
 };
 
 export const Default = {};

package/src/stories/FoundationsShadow.stories.ts

@@ -79,7 +79,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Shadow',
+  title: 'Utilities/Shadow',
 };
 
 export const Default = {};

package/src/stories/FoundationsTransparency.stories.ts

@@ -84,7 +84,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Transparency',
+  title: 'Utilities/Transparency',
 };
 
 export const Default = {};

package/src/stories/FoundationsTypography.stories.ts

@@ -80,7 +80,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Typography',
+  title: 'Utilities/Typography',
 };
 
 export const Default = {};

package/src/stories/TideAccordionItem.stories.ts

@@ -88,7 +88,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideAccordionItem',
+  title: 'Components/TideAccordionItem',
 };
 
 export const Demo = {};

package/src/stories/TideAlert.stories.ts

@@ -1,8 +1,12 @@
+import { action } from '@storybook/addon-actions';
+
 import TideAlert from '@/components/TideAlert.vue';
 import * as STANDARD_ALERT from '@/types/Alert';
 import {
   argTypeBooleanUnrequired,
   dataTrack,
+  disabledArgType,
+  doSomething,
   formatArgType,
   parameters,
   prependNoneAsUndefined,
@@ -10,14 +14,31 @@ import {
 
 const render = (args: any) => ({
   components: { TideAlert },
+  methods: {
+    doSomething,
+    handleClose: () => {
+      action('TideAlert closed')({});
+
+      try {
+        const callback = eval(args.handleClose);
+
+        if (callback) {
+          callback();
+        }
+      } catch {
+        alert('Please specify a valid handler in the "close" control.');
+      }
+    },
+  },
   setup: () => ({ args }),
-  template: `<TideAlert v-bind="args">{{ args.default }}</TideAlert>`,
+  template: `<TideAlert @close="handleClose" v-bind="args">{{ args.default }}</TideAlert>`,
 });
 
 const ALERT = prependNoneAsUndefined(STANDARD_ALERT.ALERT);
 
 export default {
   argTypes: {
+    close: disabledArgType,
     dataTrack,
     default: {
       control: 'text',
@@ -27,6 +48,17 @@ export default {
         type: { summary: 'HTML' },
       },
     },
+    handleClose: {
+      control: 'text',
+      description: 'JS code or function to execute on close event',
+      isEmit: true,
+      name: 'close',
+      table: {
+        category: 'Events',
+        defaultValue: { summary: 'None' },
+        type: { summary: '() => void' },
+      },
+    },
     heading: {
       control: 'text',
       description: 'Heading text',
@@ -35,6 +67,10 @@ export default {
         type: { summary: 'HTML' },
       },
     },
+    isDismissible: {
+      ...argTypeBooleanUnrequired,
+      description: 'Determines whether the Alert can be closed by the user',
+    },
     isToast: {
       ...argTypeBooleanUnrequired,
       description: 'Determines whether the Alert is an overlay or displaces content',
@@ -47,12 +83,20 @@ export default {
       },
     },
   },
-  args: { dataTrack: '', default: '', heading: 'Heading', isToast: undefined, type: undefined },
+  args: {
+    dataTrack: '',
+    default: '',
+    handleClose: 'doSomething',
+    heading: 'Heading',
+    isDismissible: undefined,
+    isToast: undefined,
+    type: undefined,
+  },
   component: TideAlert,
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideAlert',
+  title: 'Components/TideAlert',
 };
 
 export const Demo = {};

package/src/stories/TideBadge.stories.ts

@@ -36,7 +36,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideBadge',
+  title: 'Components/TideBadge',
 };
 
 export const Demo = {};

package/src/stories/TideBadgeTrustedPartner.stories.ts

@@ -27,7 +27,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideBadgeTrustedPartner',
+  title: 'Components/TideBadgeTrustedPartner',
 };
 
 export const Demo = {};

package/src/stories/TideBadgeVerifiedVehicle.stories.ts

@@ -14,7 +14,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideBadgeVerifiedVehicle',
+  title: 'Components/TideBadgeVerifiedVehicle',
 };
 
 export const Demo = {};

package/src/stories/TideBreadCrumbs.stories.ts

@@ -37,7 +37,7 @@ export default {
   component: TideBreadCrumbs,
   parameters,
   tags: ['autodocs'],
-  title: 'Basic Components/TideBreadCrumbs',
+  title: 'Components/TideBreadCrumbs',
 };
 
 export const Demo = {};

package/src/stories/TideButton.stories.ts

@@ -122,7 +122,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideButton',
+  title: 'Components/TideButton',
 };
 
 export const Demo = {};

package/src/stories/TideButtonIcon.stories.ts

@@ -97,7 +97,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideButtonIcon',
+  title: 'Components/TideButtonIcon',
 };
 
 export const Demo = {};

package/src/stories/TideButtonPagination.stories.ts

@@ -93,7 +93,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideButtonPagination',
+  title: 'Components/TideButtonPagination',
 };
 
 export const Demo = {};

package/src/stories/TideButtonSegmented.stories.ts

@@ -92,7 +92,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideButtonSegmented',
+  title: 'Components/TideButtonSegmented',
 };
 
 export const Demo = {};

package/src/stories/TideCard.stories.ts

@@ -91,7 +91,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideCard',
+  title: 'Components/TideCard',
 };
 
 export const Demo = {};

package/src/stories/TideCarousel.stories.ts

@@ -182,7 +182,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideCarousel',
+  title: 'Components/TideCarousel',
 };
 
 export const Demo = {};

package/src/stories/TideChipAction.stories.ts

@@ -40,7 +40,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideChipAction',
+  title: 'Components/TideChipAction',
 };
 
 export const Demo = {};

package/src/stories/TideChipFilter.stories.ts

@@ -63,7 +63,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideChipFilter',
+  title: 'Components/TideChipFilter',
 };
 
 export const Demo = {};

package/src/stories/TideChipInput.stories.ts

@@ -47,7 +47,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideChipInput',
+  title: 'Components/TideChipInput',
 };
 
 export const Demo = {};

package/src/stories/TideColumns.stories.ts

@@ -84,7 +84,7 @@ export default {
   component: TideColumns,
   parameters,
   tags: ['autodocs'],
-  title: 'Basic Components/TideColumns',
+  title: 'Components/TideColumns',
 };
 
 export const Demo = {};

package/src/stories/TideDivider.stories.ts

@@ -39,7 +39,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideDivider',
+  title: 'Components/TideDivider',
 };
 
 export const Demo = {};

package/src/stories/TideIcon.stories.ts

@@ -27,7 +27,7 @@ export default {
   component: TideIcon,
   parameters,
   tags: ['autodocs'],
-  title: 'Basic Components/TideIcon',
+  title: 'Components/TideIcon',
 };
 
 export const Demo = {};

package/src/stories/TideImage.stories.ts

@@ -108,7 +108,7 @@ export default {
   component: TideImage,
   parameters,
   tags: ['autodocs'],
-  title: 'Basic Components/TideImage',
+  title: 'Components/TideImage',
 };
 
 export const Demo = {};

package/src/stories/TideImageBackground.stories.ts

@@ -103,7 +103,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideImageBackground',
+  title: 'Components/TideImageBackground',
 };
 
 export const Demo = {};

package/src/stories/TideIndicator.stories.ts

@@ -25,7 +25,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideIndicator',
+  title: 'Components/TideIndicator',
 };
 
 export const Demo = {};

package/src/stories/TideInputCheckbox.stories.ts

@@ -95,7 +95,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputCheckbox',
+  title: 'Components/TideInputCheckbox',
 };
 
 export const Demo = {};

package/src/stories/TideInputRadio.stories.ts

@@ -78,7 +78,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputRadio',
+  title: 'Components/TideInputRadio',
 };
 
 export const Demo = {};

package/src/stories/TideInputSelect.stories.ts

@@ -206,7 +206,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputSelect',
+  title: 'Components/TideInputSelect',
 };
 
 export const Demo = {};

package/src/stories/TideInputText.stories.ts

@@ -172,7 +172,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputText',
+  title: 'Components/TideInputText',
 };
 
 export const Demo = {};

package/src/stories/TideInputTextarea.stories.ts

@@ -110,7 +110,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideInputTextarea',
+  title: 'Components/TideInputTextarea',
 };
 
 export const Demo = {};

package/src/stories/TideLink.stories.ts

@@ -36,6 +36,7 @@ const formatSnippet = (code: string, context: StoryContext) => {
     argsWithValues.push(`:icon-trailing="${formatValueAsConstant({ iconTrailing }, argTypes)}"`);
   if (args.isNewTab !== undefined) argsWithValues.push(`:is-new-tab="${args.isNewTab}"`);
   if (args.label !== undefined) argsWithValues.push(`:label="${args.label}"`);
+  if (args.subtle !== undefined) argsWithValues.push(`:subtle="${args.subtle}"`);
   if (args.click !== undefined) argsWithValues.push(`@click="${args.click}"`);
 
   return `<TideLink ${argsWithValues.join(' ')} />`;
@@ -117,23 +118,28 @@ export default {
         type: { summary: 'string' },
       },
     },
+    subtle: {
+      ...argTypeBooleanUnrequired,
+      description: 'Hides the underline until hovered, de-emphasizing the link',
+    },
   },
   args: {
     click: 'doSomething',
     dataTrack: '',
     element: undefined,
-    href: '/',
+    href: '#',
     iconLeading: undefined,
     iconTrailing: undefined,
     isNewTab: undefined,
     label: 'Demo',
     size: undefined,
+    subtle: undefined,
   },
   component: TideLink,
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideLink',
+  title: 'Components/TideLink',
 };
 
 export const Demo = {};

package/src/stories/TideModal.stories.ts

@@ -180,7 +180,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideModal',
+  title: 'Components/TideModal',
 };
 
 export const Demo = {};

package/src/stories/TidePagination.stories.ts

@@ -77,7 +77,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TidePagination',
+  title: 'Components/TidePagination',
 };
 
 export const Demo = {};

package/src/stories/TidePopover.stories.ts

@@ -92,7 +92,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TidePopover',
+  title: 'Components/TidePopover',
 };
 
 export const Demo = {};

package/src/stories/TideSeoLinks.stories.ts

@@ -60,7 +60,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideSeoLinks',
+  title: 'Components/TideSeoLinks',
 };
 
 export const Demo = {};

package/src/stories/TideSwitch.stories.ts

@@ -64,7 +64,7 @@ export default {
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Basic Components/TideSwitch',
+  title: 'Components/TideSwitch',
 };
 
 export const Demo = {};