Move the minicart to a dedicated page

packages/docs/.storybook/addon-drop-in-css/Tool.tsx

@@ -1,7 +1,7 @@
 import { useGlobals, useStorybookApi } from '@storybook/api'
 import { IconButton, Icons } from '@storybook/components'
 import React, { useCallback, useEffect } from 'react'
-import { ADDON_ID, ADDON_NAME, FILENAME, PARAM_KEY, TOOL_ID } from './constants'
+import { ADDON_ID, ADDON_TITLE, FILENAME, PARAM_KEY, TOOL_ID } from './constants'
 
 export const Tool = () => {
   const [globals, updateGlobals] = useGlobals()
@@ -30,7 +30,7 @@ export const Tool = () => {
     <IconButton
       key={TOOL_ID}
       active={active}
-      title={ADDON_NAME}
+      title={ADDON_TITLE}
       onClick={toggle}
     >
       <Icons icon="markup" />

packages/docs/.storybook/addon-drop-in-css/constants.ts

@@ -1,6 +1,7 @@
+export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `drop-in.css` into your website.'
 export const ADDON_ID = 'addon-drop-in-css' as const
 export const FILENAME = 'drop-in.css' as const
-export const ADDON_NAME = `Enable \`${FILENAME}\`` as const
+// export const ADDON_TITLE = `Enable \`${FILENAME}\`` as const
+export const ADDON_TITLE = DESCRIPTION
 export const TOOL_ID = `${ADDON_ID}/tool` as const
 export const PARAM_KEY = ADDON_ID
-export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `drop-in.css` into your website.'

packages/docs/.storybook/addon-drop-in-css/manager.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { addons, types } from '@storybook/addons'
-import { ADDON_ID, ADDON_NAME } from './constants'
+import { ADDON_ID, ADDON_TITLE } from './constants'
 import { Tool } from './Tool'
 
 addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
-    title: ADDON_NAME,
+    title: ADDON_TITLE,
     type: types.TOOL,
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: () => <Tool />,

packages/docs/.storybook/addon-minicart-css/Tool.tsx

@@ -1,7 +1,7 @@
 import { useGlobals, useStorybookApi } from '@storybook/api'
 import { IconButton, Icons } from '@storybook/components'
 import React, { useCallback, useEffect } from 'react'
-import { ADDON_ID, ADDON_NAME, FILENAME, PARAM_KEY, TOOL_ID } from './constants'
+import { ADDON_ID, ADDON_TITLE, FILENAME, PARAM_KEY, TOOL_ID } from './constants'
 
 export const Tool = () => {
   const [globals, updateGlobals] = useGlobals()
@@ -30,7 +30,7 @@ export const Tool = () => {
     <IconButton
       key={TOOL_ID}
       active={active}
-      title={ADDON_NAME}
+      title={ADDON_TITLE}
       onClick={toggle}
     >
       <Icons icon="markup" />

packages/docs/.storybook/addon-minicart-css/constants.ts

@@ -1,6 +1,7 @@
+export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `minicart.css` into your website.'
 export const ADDON_ID = 'addon-minicart-css' as const
 export const FILENAME = 'minicart.css' as const
-export const ADDON_NAME = `Enable \`${FILENAME}\`` as const
+// export const ADDON_TITLE = `Enable \`${FILENAME}\`` as const
+export const ADDON_TITLE = DESCRIPTION
 export const TOOL_ID = `${ADDON_ID}/tool` as const
 export const PARAM_KEY = ADDON_ID
-export const DESCRIPTION = 'Toggle this switch to *simulate* in this page how the components would look when importing the `minicart.css` into your website.'

packages/docs/.storybook/addon-minicart-css/manager.tsx

@@ -1,11 +1,11 @@
 import React from 'react'
 import { addons, types } from '@storybook/addons'
-import { ADDON_ID, ADDON_NAME } from './constants'
+import { ADDON_ID, ADDON_TITLE } from './constants'
 import { Tool } from './Tool'
 
 addons.register(ADDON_ID, () => {
   addons.add(ADDON_ID, {
-    title: ADDON_NAME,
+    title: ADDON_TITLE,
     type: types.TOOL,
     match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
     render: () => <Tool />,

packages/docs/.storybook/preview.ts

@@ -39,6 +39,7 @@ const preview: Preview = {
             'Cart', [
               'cl-cart',
               'cl-cart-link',
+              'cl-cart (minicart)',
               'cl-cart-count',
             ],
             'Checkout', [

packages/docs/package.json

@@ -20,21 +20,21 @@
     "@babel/preset-env": "^7.21.5",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.21.5",
-    "@storybook/addon-actions": "^7.0.15",
-    "@storybook/addon-essentials": "^7.0.15",
-    "@storybook/addon-interactions": "^7.0.15",
-    "@storybook/addon-links": "^7.0.15",
-    "@storybook/addon-mdx-gfm": "^7.0.15",
-    "@storybook/addons": "^7.0.15",
-    "@storybook/api": "^7.0.15",
-    "@storybook/blocks": "^7.0.15",
-    "@storybook/components": "^7.0.15",
-    "@storybook/core-common": "^7.0.15",
-    "@storybook/html": "^7.0.15",
-    "@storybook/html-webpack5": "^7.0.15",
+    "@storybook/addon-actions": "^7.0.17",
+    "@storybook/addon-essentials": "^7.0.17",
+    "@storybook/addon-interactions": "^7.0.17",
+    "@storybook/addon-links": "^7.0.17",
+    "@storybook/addon-mdx-gfm": "^7.0.17",
+    "@storybook/addons": "^7.0.17",
+    "@storybook/api": "^7.0.17",
+    "@storybook/blocks": "^7.0.17",
+    "@storybook/components": "^7.0.17",
+    "@storybook/core-common": "^7.0.17",
+    "@storybook/html": "^7.0.17",
+    "@storybook/html-webpack5": "^7.0.17",
     "@storybook/testing-library": "^0.1.0",
-    "@storybook/theming": "^7.0.15",
-    "@storybook/types": "^7.0.15",
+    "@storybook/theming": "^7.0.17",
+    "@storybook/types": "^7.0.17",
     "@types/common-tags": "^1.8.1",
     "@types/react": "^18",
     "babel-loader": "^9.1.2",
@@ -44,7 +44,7 @@
     "react": "^18",
     "react-dom": "^18",
     "sass": "^1.62.1",
-    "storybook": "^7.0.15",
+    "storybook": "^7.0.17",
     "typescript": "^5.0.4",
     "webpack": "^5.83.1"
   },

packages/docs/stories/cart/cl-cart--minicart.mdx

@@ -0,0 +1,17 @@
+import { Canvas, Meta, Story, ArgsTable } from '@storybook/blocks'
+import * as Stories from './cl-cart--minicart.stories.ts';
+import { codes } from '../assets/constants.ts'
+
+<Meta of={Stories} />
+
+# Minicart
+
+The [**cl-cart**](?path=/docs/components-cart-cl-cart--docs) component acts as a minicart when rendered inside a [**cl-cart-link**](?path=/docs/components-cart-cl-cart-link--docs) one. With this feature, you can offer your customers a familiar UI experience where the cart slides in on click (or as soon as you add an item) and overlays the page, giving them an overview of the cart summary and the possibility to checkout, as shown in the code snippet below.
+
+Please note that the minicart is unstyled and hidden by default. You have to write some CSS from scratch in order to make it work as you need. Otherwise, you can import the [**minicart.css**](?path=/docs/getting-started--docs#minicartcss) file into your website, using it as is or as a reference to tweak at your leisure.
+
+<Canvas of={Stories.Basic} />
+
+<ArgsTable story="Basic" />
+
+Want to see the `open-on-add` feature in action? Set the related attribute to `true` and click on <cl-add-to-cart class="mx-1 px-2 py-1" code={codes.available}>add to cart</cl-add-to-cart> once again. 😉

packages/docs/stories/cart/cl-cart--minicart.stories.ts

@@ -0,0 +1,67 @@
+import { type Props } from '@commercelayer/drop-in.js/dist/types/components/cl-cart/cl-cart'
+import { type Meta, type StoryFn } from '@storybook/html'
+import { html, nothing } from 'lit-html'
+import { create } from '../../utils'
+
+type Args = Props
+
+const meta: Meta<Args> = {
+  title: 'Components/Cart/cl-cart (minicart)',
+  argTypes: {
+    'open-on-add': {
+      description:
+        'Toggle this switch to make the minicart automatically open as soon as an item is added to the shopping cart (available <i>only</i> when the `cl-cart` component is used inside the `cl-cart-link` one).',
+      type: { name: 'boolean', required: false },
+      table: {
+        category: 'attributes',
+        defaultValue: {
+          summary: 'false'
+        }
+      }
+    }
+  }
+}
+
+export default meta
+
+export const Basic: StoryFn<Args> = (args) => {
+  return create(
+    html`
+      <cl-cart-link>
+        <svg
+          width="32"
+          height="32"
+          viewBox="0 0 32 32"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z"
+            stroke="black"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+          <path
+            d="M4 10H28"
+            stroke="black"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+          <path
+            d="M21 14C21 15.3261 20.4732 16.5979 19.5355 17.5355C18.5979 18.4732 17.3261 19 16 19C14.6739 19 13.4021 18.4732 12.4645 17.5355C11.5268 16.5979 11 15.3261 11 14"
+            stroke="black"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+        </svg>
+
+        <cl-cart-count></cl-cart-count>
+        <cl-cart open-on-add=${args['open-on-add'] ?? nothing}></cl-cart>
+      </cl-cart-link>
+    `
+  )
+}
+Basic.args = {}

packages/docs/stories/cart/cl-cart-link.mdx

@@ -19,3 +19,7 @@ Instead of a simple text link, you can use any custom icon, as shown in the exam
 
 <Canvas of={Stories.WithIcon} />
 
+### Minicart
+
+You can use the `cl-cart-link` to wrap a [**cl-cart**](?path=/docs/components-cart-cl-cart--docs) one and make it act as a [**minicart**](?path=/docs/components-cart-cl-cart-minicart--docs).
+

packages/docs/stories/cart/cl-cart.mdx

@@ -18,12 +18,4 @@ Just in case you were wondering — yes, the in-line button was *dropped in* the
 
 ### Minicart
 
-The `cl-cart` component acts as a minicart when rendered inside a [**cl-cart-link**](?path=/docs/components-cart-cl-cart-link--docs) one. With this feature, you can offer your customers a familiar UI experience where the cart slides in on click (or as soon as you add an item) and overlays the page, giving them an overview of the cart summary and the possibility to checkout, as shown in the code snippet below.
-
-Please note that the minicart provided by the `cl-cart` component is unstyled and hidden by default. You have to write some CSS from scratch in order to make it work as you need. Otherwise, you can import the [**minicart.css**](?path=/docs/getting-started--docs#minicartcss) file into your website, using it as is or as a reference to tweak at your leisure.
-
-<Canvas of={Stories.Minicart} />
-
-<ArgsTable story="Minicart" />
-
-Want to see the `open-on-add` feature in action? Set the related attribute to `true` and click on <cl-add-to-cart class="mx-1 px-2 py-1" code={codes.available}>add to cart</cl-add-to-cart> once again. 😉
+You can use the `cl-cart` component inside a [**cl-cart-link**](?path=/docs/components-cart-cl-cart-link--docs) one to make it act as a [**minicart**](?path=/docs/components-cart-cl-cart-minicart--docs).

packages/docs/stories/cart/cl-cart.stories.ts

@@ -1,25 +1,12 @@
 import { type Props } from '@commercelayer/drop-in.js/dist/types/components/cl-cart/cl-cart'
 import { type Meta, type StoryFn } from '@storybook/html'
-import { html, nothing } from 'lit-html'
+import { html } from 'lit-html'
 import { create } from '../../utils'
 
 type Args = Props
 
 const meta: Meta<Args> = {
-  title: 'Components/Cart/cl-cart',
-  argTypes: {
-    'open-on-add': {
-      description:
-        'Toggle this switch to make the minicart automatically open as soon as an item is added to the shopping cart (available <i>only</i> when the `cl-cart` component is used inside the `cl-cart-link` one).',
-      type: { name: 'boolean', required: false },
-      table: {
-        category: 'attributes',
-        defaultValue: {
-          summary: 'false'
-        }
-      }
-    }
-  }
+  title: 'Components/Cart/cl-cart'
 }
 
 export default meta
@@ -31,45 +18,3 @@ export const Basic: StoryFn<Args> = () => {
     `
   )
 }
-
-export const Minicart: StoryFn<Args> = (args) => {
-  return create(
-    html`
-      <cl-cart-link>
-        <svg
-          width="32"
-          height="32"
-          viewBox="0 0 32 32"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <path
-            d="M27 6H5C4.44772 6 4 6.44772 4 7V25C4 25.5523 4.44772 26 5 26H27C27.5523 26 28 25.5523 28 25V7C28 6.44772 27.5523 6 27 6Z"
-            stroke="black"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          ></path>
-          <path
-            d="M4 10H28"
-            stroke="black"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          ></path>
-          <path
-            d="M21 14C21 15.3261 20.4732 16.5979 19.5355 17.5355C18.5979 18.4732 17.3261 19 16 19C14.6739 19 13.4021 18.4732 12.4645 17.5355C11.5268 16.5979 11 15.3261 11 14"
-            stroke="black"
-            stroke-width="2"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          ></path>
-        </svg>
-
-        <cl-cart-count></cl-cart-count>
-        <cl-cart open-on-add=${args['open-on-add'] ?? nothing}></cl-cart>
-      </cl-cart-link>
-    `
-  )
-}
-Minicart.args = {}

packages/docs/stories/getting-started.mdx

@@ -39,6 +39,8 @@ Assuming you already have a Commerce Layer account ([sign up](https://dashboard.
 
 ## Styling
 
+To simulate in the following interactive documentation pages how the components would look when importing the CSS files below into your website you can use the toggle switches in the header.
+
 ### `drop-in.css`
 
 The drop-in library is shipped unstyled, so that you can apply your own styles. We provide some simple styling. If you're happy with that or you just want to speed up the set up process just add an additional `link` tag to your HTML code as follows:
@@ -49,13 +51,12 @@ The drop-in library is shipped unstyled, so that you can apply your own styles.
 
 ### `minicart.css`
 
-The [**minicart**](?path=/docs/components-cart-cl-cart--minicart) version of the cart is unstyled and hidden by default. Since its behavior is achieved mostly via CSS, you have to write your own to style it. You can start from scratch, or import a minimal set of styles and take it from there. To do that, just add an additional `link` tag to your HTML code as follows:
+The [**minicart**](?path=/docs/components-cart-cl-cart-minicart--docs) version of the cart is unstyled and hidden by default. Since its behavior is achieved mostly via CSS, you have to write your own to style it. You can start from scratch, or import a minimal set of styles and take it from there. To do that, just add an additional `link` tag to your HTML code as follows:
 
 <Source language='html' dark code={`
 <link href="https://cdn.jsdelivr.net/npm/@commercelayer/drop-in.js@1.3.2/dist/drop-in/minicart.css" rel="stylesheet" />
 `} />
 
-
 ## Need help?
 
 - Join [Commerce Layer's Slack community](https://slack.commercelayer.app).