Merge pull request #974 from CleverCloud/storybook/fix-build-path-for…

…-prod

Storybook: fix build path & docs URLs

docs/adr/adr-0018-how-to-give-feedback-after-a-user-action.md

@@ -211,7 +211,7 @@ export function notify(node, message, intent) {
 ## Accessibility
 
 We understood that the `toast` pattern comes, by design, with a lot of accessibility challenges.
-If you want to read more about that, you can refer to the dedicated ADR: [ADR 0019: How to make toaster accessible?](/?path=/story/📌-docs-architecture-decision-records-adr-0019-how-to-make-toaster-accessible)
+If you want to read more about that, you can refer to the dedicated ADR: [ADR 0019: How to make toaster accessible?](https://www.clever-cloud.com/doc/clever-components/?path=/docs/📌-architecture-decision-records-adr-0019-how-to-make-toaster-accessible--docs)
 
 ## Sum up
 

docs/adr/adr-0019-how-to-make-toaster-accessible.md

@@ -6,7 +6,7 @@ kind: '📌 Architecture Decision Records'
 
 🗓️ 2022-08-26 · ✍️ Pierre de Soyres
 
-This ADR tries to explain what challenges we faced when we implemented the `toast` pattern. (see [ADR 0018: How to give feedback after a user action?](/?path=/story/📌-docs-architecture-decision-records-adr-0018-how-to-give-feedback-after-a-user-action)).
+This ADR tries to explain what challenges we faced when we implemented the `toast` pattern. (see [ADR 0018: How to give feedback after a user action?](https://www.clever-cloud.com/doc/clever-components/?path=/docs/📌-architecture-decision-records-adr-0018-how-to-give-feedback-after-a-user-action--docs)).
 
 ## Context?
 

docs/adr/adr-0020-making-the-component-theme-customisable.md

@@ -110,7 +110,7 @@ Rollup npm config:
 
 To use the components inside a project, one needs to import this CSS file from `node_modules`.
 The procedure to do so depends on the project stack.
-We tried to give a few examples in [how to use the components theme](/?path=/story/🏡-getting-started-install-via-npm--page).
+We tried to give a few examples in [how to use the components theme](https://www.clever-cloud.com/doc/clever-components/?path=/docs/🏡-getting-started-install-via-npm--docs).
 
 ##### CDN
 

docs/adr/adr-0023-adding-stylelint.md

@@ -9,7 +9,7 @@ kind: '📌 Architecture Decision Records'
 ## The context
 
 Since the beginning of this component library, we've never had a dedicated tool to format our CSS and enforce some rules. 
-We only had a custom ESLint plugin to sort our CSS declarations but that was pretty much it as referenced in [ADR 11](https://www.clever-cloud.com/doc/clever-components/?path=%2Fstory%2F%F0%9F%93%8C-docs-architecture-decision-records-adr-0011-sorting-css-declarations--page). 
+We only had a custom ESLint plugin to sort our CSS declarations but that was pretty much it as referenced in [ADR 11](https://www.clever-cloud.com/doc/clever-components/?path=/docs/📌-architecture-decision-records-adr-0011-sorting-css-declarations--docs). 
 
 However, in 2020 we found out that Stylelint was able to handle CSS in template literals. 
 

docs/adr/adr-0025-moving-away-from-fieldset-legend.md

@@ -7,7 +7,7 @@ kind: '📌 Architecture Decision Records'
 
 ## The context
 
-Our [`cc-toggle` component](https://www.clever-cloud.com/doc/clever-components/?path=/story/%F0%9F%A7%AC-atoms-cc-toggle--default-story) is a group of radio buttons or checkboxes.
+Our [`cc-toggle` component](https://www.clever-cloud.com/doc/clever-components/?path=/docs/🧬-atoms-cc-toggle--docs) is a group of radio buttons or checkboxes.
 
 The group is wrapped inside a `<fieldset>` element and the subject of the group is provided through a `<legend>` element.
 

docs/getting-started/accessibility.md

@@ -146,4 +146,4 @@ A good example is the `cc-toaster` & `cc-toast` components. Even though they are
 
 We did our best to provide a good user experience (the timeout is paused on `hover` / on `focus`) and we want to add a way to view past notifications and interact with them.
 
-We have documented all of this in the [ADR 19 - How to make toaster accessible?](https://www.clever-cloud.com/doc/clever-components/?path=/story/%F0%9F%93%8C-docs-architecture-decision-records-adr-0019-how-to-make-toaster-accessible--page).
+We have documented all of this in the [ADR 19 - How to make toaster accessible?](https://www.clever-cloud.com/doc/clever-components/?path=/docs/📌-architecture-decision-records-adr-0019-how-to-make-toaster-accessible--docs).

docs/getting-started/breaking-change-policy.md

@@ -19,7 +19,7 @@ When relevant, this section also includes information to help you migrate from y
 
 ## Breaking changes for components
 
-Regarding how [our components](https://www.clever-cloud.com/doc/clever-components/?path=/story/%F0%9F%93%8C-docs-web-components-guidelines-at-clever-cloud--page) are made, the elements exposed to a breaking change are (but not limited to):
+Regarding how [our components](https://www.clever-cloud.com/doc/clever-components/?path=/docs/👋-contributing-web-components-guidelines--docs) are made, the elements exposed to a breaking change are (but not limited to):
 
 * attributes,
 * properties,

docs/getting-started/design-tokens.md

@@ -21,7 +21,7 @@ They centralize our design decisions and allow us (among other things) to tackle
 - Consistency & Maintainability
 - Theming & Customisation
 
-More on that in our [ADR "Finding accessible colors and creating Design Tokens"](https://www.clever-cloud.com/doc/clever-components/?path=/story/📌-architecture-decision-records-adr-0017-finding-accessible-colors-and-creating-design-tokens--page).
+More on that in our [ADR "Finding accessible colors and creating Design Tokens"](https://www.clever-cloud.com/doc/clever-components/?path=/docs/📌-architecture-decision-records-adr-0017-finding-accessible-colors-and-creating-design-tokens--docs).
 
 ## All design tokens list
 
@@ -117,4 +117,4 @@ As our design tokens only exist (for now) as CSS values, keys will be listed as
 
 | Key                          | Default value |
 |:-----------------------------|:--------------|
-| `--cc-opacity-when-disabled` | `0.65em`      |
+| `--cc-opacity-when-disabled` | `0.65em`      |

docs/getting-started/notification-system.md

@@ -112,7 +112,7 @@ Note that you'll still be able to override those defaults when you want to.
 
 At some point, smart components need to trigger some notifications when something goes wrong while contacting our API (or when everything went right too). This chapter will explain how we did that in a fully decoupled manner.
 
-For details on smart components, you can check [this introduction to smart components](/?path=/story/🏡-getting-started-7-smart-components--page).
+For details on smart components, you can check [this introduction to smart components](https://www.clever-cloud.com/doc/clever-components/?path=/docs/🏡-getting-started-smart-components--docs).
 
 We based our integration on DOM events:
 The smart components dispatch `cc:notify` [custom events](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent) like this:
@@ -135,4 +135,4 @@ document.addEventListener('cc:notify', (event) => {
 });
 ```
 
-Notice how we use the `detail` property of the `CustomEvent` instance to pass the notification to be displayed by the `cc-toaster`.
+Notice how we use the `detail` property of the `CustomEvent` instance to pass the notification to be displayed by the `cc-toaster`.

package.json

@@ -46,7 +46,7 @@
     "cdn-preview:delete": "node tasks/cdn-cli.js delete preview",
     "cdn-preview:ui": "node tasks/cdn-cli.js ui preview",
     "start": "static -H '{\"cache-control\": \"no-cache, no-store, must-revalidate\", \"Pragma\": \"no-cache\", \"Expires\": \"0\"}' -a 0.0.0.0 -p 8080 storybook-static",
-    "storybook:build": "storybook build -o storybook-static",
+    "storybook:build": "storybook build -o storybook-static${STORYBOOK_PATH}",
     "storybook:dev": "storybook dev -p 6006 --no-open",
     "stylelint": "stylelint src/components/*/*.js",
     "stylelint:ci": "stylelint src/components/*/*.js --formatter github",

src/components/cc-email-list/cc-email-list.smart.md

@@ -7,7 +7,7 @@ title: '💡 Smart'
 ## ℹ️ Details
 
 <table>
-  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/🛠-emails-cc-email-list--default-story"><code>&lt;cc-email-list&gt;</code></a>
+  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/🛠-profile-cc-email-list--default-story"><code>&lt;cc-email-list&gt;</code></a>
   <tr><td><strong>Selector     </strong> <td><code>cc-email-list</code>
   <tr><td><strong>Requires auth</strong> <td>Yes
 </table>

src/components/cc-env-var-form/cc-env-var-form.smart-config-provider.md

@@ -7,7 +7,7 @@ title: '💡 Smart (config-provider)'
 ## ℹ️ Details
 
 <table>
-  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/%F0%9F%9B%A0-environment-variables-cc-env-var-form--default-story"><code>&lt;cc-env-var-form&gt;</code></a>
+  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/🛠-environment-variables-cc-env-var-form--data-loaded-with-context-config-provider"><code>&lt;cc-env-var-form&gt;</code></a>
   <tr><td><strong>Selector     </strong> <td><code>cc-env-var-form[context="config-provider"]</code>
   <tr><td><strong>Requires auth</strong> <td>Yes
 </table>

src/components/cc-env-var-form/cc-env-var-form.smart-env-var-addon.md

@@ -7,7 +7,7 @@ title: '💡 Smart (env-var-addon)'
 ## ℹ️ Details
 
 <table>
-  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/%F0%9F%9B%A0-environment-variables-cc-env-var-form--default-story"><code>&lt;cc-env-var-form&gt;</code></a>
+  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/🛠-environment-variables-cc-env-var-form--data-loaded-with-context-env-var-addon"><code>&lt;cc-env-var-form&gt;</code></a>
   <tr><td><strong>Selector     </strong> <td><code>cc-env-var-form[context="env-var-addon"]</code>
   <tr><td><strong>Requires auth</strong> <td>Yes
 </table>

src/components/cc-env-var-form/cc-env-var-form.smart-exposed-config.md

@@ -7,7 +7,7 @@ title: '💡 Smart (exposed-config)'
 ## ℹ️ Details
 
 <table>
-  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/%F0%9F%9B%A0-environment-variables-cc-env-var-form--default-story"><code>&lt;cc-env-var-form&gt;</code></a>
+  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/🛠-environment-variables-cc-env-var-form--data-loaded-with-context-exposed-config"><code>&lt;cc-env-var-form&gt;</code></a>
   <tr><td><strong>Selector     </strong> <td><code>cc-env-var-form[context="exposed-config"]</code>
   <tr><td><strong>Requires auth</strong> <td>Yes
 </table>

src/components/cc-grafana-info/cc-grafana-info.smart.md

@@ -7,7 +7,7 @@ title: '💡 Smart'
 ## ℹ️ Details
 
 <table>
-  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/%F0%9F%9B%A0-saas-cc-grafana-info--default-story"><code>&lt;cc-grafana-info&gt;</code></a>
+  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/🛠-saas-cc-grafana-info--default-story"><code>&lt;cc-grafana-info&gt;</code></a>
   <tr><td><strong>Selector     </strong> <td><code>cc-grafana-info</code>
   <tr><td><strong>Requires auth</strong> <td>Yes
 </table>

src/components/cc-invoice-list/cc-invoice-list.smart.md

@@ -7,7 +7,7 @@ title: '💡 Smart'
 ## ℹ️ Details
 
 <table>
-  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/%F0%9F%9B%A0-invoices-cc-invoice-list--default-story"><code>&lt;cc-invoice-list&gt;</code></a>
+  <tr><td><strong>Component    </strong> <td><a href="https://www.clever-cloud.com/doc/clever-components/?path=/story/🛠-invoices-cc-invoice-list--default-story"><code>&lt;cc-invoice-list&gt;</code></a>
   <tr><td><strong>Selector     </strong> <td><code>cc-invoice-list</code>
   <tr><td><strong>Requires auth</strong> <td>Yes
 </table>