tide-design-system 2.2.3 → 2.2.5

package/src/docs/migration.md

@@ -0,0 +1,65 @@
+# TIDE Migration
+The first implementation of the TIDE Design System was developed directly within the `marketplace` repository in parallel with a comprehensive redesign/rebuild of the entire frontend of the 3-page core site (Homepage, Search Results Page, Vehicle Detail Page). When TIDE matured into TIDE 2.0 and was reinvisioned as an NPM package many months later, it was decided that development would continue on redesign/rebuild without a specific effort to replace the initial implementation to the modernized approach. As such, these migrations are being undertaken piecemeal as developer availability permits.
+
+## Goals
+1. All frontend structures within the `marketplace` repository that implement TIDE utilities, components, or supporting structures will, over time, be moved, adapted, or recreated in the TIDE repository.
+2. Structures to be migrated:
+   1. Vue 3 components
+   2. TypeScript types
+   3. JavaScript/TypeScript utilities
+   4. CSS utilities
+   5. Unit tests
+
+## Workflow
+As TIDE structures become available in the TIDE repository, the TIDE team will work to identify redundant structures within the `marketplace` repository, create tickets detailing the work to reimplement these structures, and work with the relevant product teams to determine priority and ownership of these tasks.
+
+1. Update imports:
+
+    ❌ TIDE 1.0
+    ```
+    import BasicSample from '@/components-core/BasicSample.vue';
+    import { SAMPLE } from '@/types/Sample';
+    import { getSample } from '@/utilities/sample';
+
+    import type { Sample } from '@/types/Sample';
+    ```
+
+    ✅ TIDE 2.0
+    ```
+    import {
+      BasicSample,
+      SAMPLE,
+      getSample,
+    } from 'tide-design-system';
+
+    import type { Sample } from 'tide-design-system';
+    ```
+2. Update all instances of component(s) under migration:
+
+    **Note**: TIDE 2.0 props, slots, emits, and other structures may not correspond 1:1 with their TIDE 1.0 counterparts. See [Storybook](https://tide-design-system.netlify.app/) for the proper implementation of a TIDE 2.0 utility or component.
+
+
+    ❌ TIDE 1.0
+    `<BasicSample />`
+
+    ✅ TIDE 2.0
+    `<TideSample />`
+3. Delete orphaned components:
+
+    `git rm frontend/src/components-core/BasicSample.vue`
+
+4.  Delete orphaned types:
+
+    `git rm frontend/src/types/Sample.ts`
+
+5.  Delete orphaned utilities:
+
+    `git rm frontend/src/utilities/sample.ts`
+
+6.  Delete orphaned unit tests:
+    - `git rm frontend/tests/components/BasicSample.spec.ts`
+    - `git rm frontend/tests/BasicSample.spec.ts`
+    - `git rm frontend/tests/utilities-sample.spec.ts`
+
+7.  Delete unused [JS constants](https://github.com/traderinteractive/marketplace/blob/qa/frontend/src/types/Styles.ts) (CSS_OLD)
+8.  Delete unused [CSS utilities](https://github.com/traderinteractive/marketplace/blob/qa/frontend/src/assets/css/utilities.css)

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

@@ -1,19 +1,8 @@
-import * as STYLES from '@/types/Storybook';
 import { CSS } from '@/types/Styles';
-import {
-  argTypeBoolean,
-  formatArgType,
-  getConstantsByValues,
-  lineBreak,
-  prependNoneAsEmpty,
-  tab,
-} from '@/utilities/storybook';
+import { argTypeBoolean, getConstantsByValues, lineBreak, tab } from '@/utilities/storybook';
 
 import type { StoryContext } from '@storybook/vue3';
 
-const GRID_END = prependNoneAsEmpty(STYLES.GRID_END);
-const GRID_START = prependNoneAsEmpty(STYLES.GRID_START);
-
 const formatArgs = (args: any) => {
   args.class = formatClassNames(args).join(' ');
 
@@ -25,8 +14,6 @@ const formatClassNames = (args: any) => {
 
   if (args.fluid) classNames.push(CSS.GRID.FLUID);
   if (args.item) classNames.push(CSS.GRID.ITEM);
-  if (args.start) classNames.push(args.start);
-  if (args.end) classNames.push(args.end);
 
   return classNames;
 };
@@ -89,12 +76,6 @@ const render = (args: any) => ({
 
 export default {
   argTypes: {
-    end: {
-      ...formatArgType({ GRID_END }),
-      description: `Ending column of grid item`,
-      if: { arg: 'fluid', neq: true },
-      name: 'End',
-    },
     fluid: {
       ...argTypeBoolean,
       description: `Determines whether grid item should extend to parent bounds`,
@@ -107,12 +88,6 @@ export default {
       if: { arg: 'fluid', neq: true },
       name: 'Item',
     },
-    start: {
-      ...formatArgType({ GRID_START }),
-      description: `Starting column of grid item`,
-      if: { arg: 'fluid', neq: true },
-      name: 'Start',
-    },
     xl: {
       ...argTypeBoolean,
       description: `Increases the maximum content width`,
@@ -120,16 +95,14 @@ export default {
     },
   },
   args: {
-    end: GRID_END.None,
     fluid: false,
     item: false,
-    start: GRID_START.None,
     xl: false,
   },
   parameters,
   render,
   tags: ['autodocs'],
-  title: 'Foundations/Grid',
+  title: 'Utilities/Grid',
 };
 
 export const Default = {};
@@ -151,159 +124,3 @@ export const XL = {
     xl: true,
   },
 };
-
-export const Start0 = {
-  args: {
-    start: GRID_START['Column 0'],
-  },
-};
-
-export const Start1 = {
-  args: {
-    start: GRID_START['Column 1'],
-  },
-};
-
-export const Start2 = {
-  args: {
-    start: GRID_START['Column 2'],
-  },
-};
-
-export const Start3 = {
-  args: {
-    start: GRID_START['Column 3'],
-  },
-};
-
-export const Start4 = {
-  args: {
-    start: GRID_START['Column 4'],
-  },
-};
-
-export const Start5 = {
-  args: {
-    start: GRID_START['Column 5'],
-  },
-};
-
-export const Start6 = {
-  args: {
-    start: GRID_START['Column 6'],
-  },
-};
-
-export const Start7 = {
-  args: {
-    start: GRID_START['Column 7'],
-  },
-};
-
-export const Start8 = {
-  args: {
-    start: GRID_START['Column 8'],
-  },
-};
-
-export const Start9 = {
-  args: {
-    start: GRID_START['Column 9'],
-  },
-};
-
-export const Start10 = {
-  args: {
-    start: GRID_START['Column 10'],
-  },
-};
-
-export const Start11 = {
-  args: {
-    start: GRID_START['Column 11'],
-  },
-};
-
-export const Start12 = {
-  args: {
-    start: GRID_START['Column 12'],
-  },
-};
-
-export const End1 = {
-  args: {
-    end: GRID_END['Column 1'],
-  },
-};
-
-export const End2 = {
-  args: {
-    end: GRID_END['Column 2'],
-  },
-};
-
-export const End3 = {
-  args: {
-    end: GRID_END['Column 3'],
-  },
-};
-
-export const End4 = {
-  args: {
-    end: GRID_END['Column 4'],
-  },
-};
-
-export const End5 = {
-  args: {
-    end: GRID_END['Column 5'],
-  },
-};
-
-export const End6 = {
-  args: {
-    end: GRID_END['Column 6'],
-  },
-};
-
-export const End7 = {
-  args: {
-    end: GRID_END['Column 7'],
-  },
-};
-
-export const End8 = {
-  args: {
-    end: GRID_END['Column 8'],
-  },
-};
-
-export const End9 = {
-  args: {
-    end: GRID_END['Column 9'],
-  },
-};
-
-export const End10 = {
-  args: {
-    end: GRID_END['Column 10'],
-  },
-};
-
-export const End11 = {
-  args: {
-    end: GRID_END['Column 11'],
-  },
-};
-
-export const End12 = {
-  args: {
-    end: GRID_END['Column 12'],
-  },
-};
-
-export const End13 = {
-  args: {
-    end: GRID_END['Column 13'],
-  },
-};

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 = {};