chore(documentation): add palette scss file import documentation

.changeset/four-beers-leave.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added scss file import documentation to palette.

.changeset/hip-gifts-give.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Updated documentation to display the currently selected theme and channel SCSS file.

packages/documentation/.storybook/addons/styles-switcher/StylesSwitcher.tsx

@@ -48,6 +48,7 @@ function StylesSwitcher() {
 
   const [preview, setPreview] = useState<Document>();
   const [stories, setStories] = useState<NodeListOf<Element>>();
+  const [stylesCodeBlocks, setStylesCodeBlocks] = useState<NodeListOf<Element>>();
 
   /**
    * Retrieves the preview document after the first rendering
@@ -71,6 +72,7 @@ function StylesSwitcher() {
     observer = new MutationObserver(
       debounce(() => {
         setStories(preview.querySelectorAll('.sbdocs-preview, .sb-main-padded'));
+        setStylesCodeBlocks(preview.querySelectorAll('.docblock-source'));
       }, 200),
     );
 
@@ -94,6 +96,49 @@ function StylesSwitcher() {
     );
   }, [preview, currentTheme, currentChannel]);
 
+  /**
+   * Sets the design system styles import SCSS file to the correct theme and channel file
+   */
+  useEffect(() => {
+    if (!stylesCodeBlocks) return;
+
+    const t = currentTheme.toLowerCase();
+    const c = currentChannel.toLowerCase();
+    const domain = "'@swisspost/design-system-styles/";
+
+    stylesCodeBlocks.forEach(stylesCodeBlock => {
+      let sourceArray = stylesCodeBlock.querySelectorAll('.token.string');
+      if (sourceArray.length) {
+        sourceArray.forEach((s, i) => {
+          let source = s.innerHTML;
+          // Remove the domain from the source to make sure we don't override it
+          source = source.replace(domain, '');
+
+          // Check if one of the themes or channels are in the scss path
+          let theme = THEMES.find(t => source.indexOf(t.toLowerCase()) > -1);
+          let channel = CHANNELS.find(c => source.indexOf(c.toLowerCase()) > -1);
+
+          const updateTheme = theme && theme.toLowerCase() !== t;
+          const updateChannel = channel && channel.toLowerCase() !== c;
+
+          // Only change the source if theme or channel needs to be changed
+          if (source && (updateTheme || updateChannel)) {
+            if (updateTheme) {
+              source = source.replace((theme as string).toLowerCase(), t);
+            }
+
+            if (updateChannel) {
+              source = source.replace((channel as string).toLowerCase(), c);
+            }
+
+            const newSource = domain + source;
+            sourceArray[i].innerHTML = newSource;
+          }
+        });
+      }
+    });
+  }, [stylesCodeBlocks, currentTheme, currentChannel]);
+
   /**
    * Sets the expected 'data-color-scheme' attribute on all story containers when the scheme changes
    */
@@ -176,7 +221,7 @@ function StylesSwitcher() {
         }
       >
         <IconButton className="addon-label" size="medium">
-          Chanel: {currentChannel}
+          Channel: {currentChannel}
         </IconButton>
       </WithTooltip>
 

packages/documentation/src/shared/styles-package-import.mdx

@@ -4,16 +4,14 @@ import { getComponentStyleImports } from './styles-package-import-individual.sam
 ## Style Imports
 
 <p>
-  <small>
-    *Make sure the `@swisspost/design-system-styles` package is already present in your project or
-    follow the [installation
-    guidelines](http://localhost:9000/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs).*
-  </small>
+  <small>*Make sure the `@swisspost/design-system-styles` package is already present in your project or follow the [installation guidelines](http://localhost:9000/?path=/docs/e53e2de8-0bbf-4f70-babc-074c5466f700--docs).*</small>
 </p>
 
 To import all Design System styles:
 
-<Source code={`@use '@swisspost/design-system-styles/index.scss';`} language="scss" />
+<div className="docblock-source-all-design">
+  <Source code={`@use '@swisspost/design-system-styles/post-internal.scss';`} language="scss" />
+</div>
 
 To import only the styles required for this component:
 

packages/documentation/src/stories/components/app-store-badge/app-store-badge.mdx

@@ -13,7 +13,8 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
 </div>
 
 <div className="lead">
-  The app store badge leads the user to the respective product page in the Apple Store or Google Play, so the user can download the app.
+  The app store badge leads the user to the respective product page in the Apple Store or Google
+  Play, so the user can download the app.
 </div>
 
 <Canvas sourceState="shown" of={AppStoreBadgeStories.Default} />
@@ -22,12 +23,19 @@ import StylesPackageImport from '@/shared/styles-package-import.mdx';
   <Controls of={AppStoreBadgeStories.Default} />
 </div>
 
+<StylesPackageImport components={['app-store-badge']} />
+
 ## Ressources
 
 You can download the official badge assets from the following links:
 
 <ul>
-  <li><a href="https://developer.apple.com/app-store/marketing/guidelines/">Apple App Store</a></li>
-  <li><a href="https://partnermarketinghub.withgoogle.com/brands/google-play/visual-identity/badge-guidelines/?folder=65628">Google Play</a></li>
+  <li>
+    <a href="https://developer.apple.com/app-store/marketing/guidelines/">Apple App Store</a>
+  </li>
+  <li>
+    <a href="https://partnermarketinghub.withgoogle.com/brands/google-play/visual-identity/badge-guidelines/?folder=65628">
+      Google Play
+    </a>
+  </li>
 </ul>
-

packages/documentation/src/stories/foundations/palettes/palettes.docs.mdx

@@ -1,5 +1,6 @@
 import { Canvas, Controls, Meta } from '@storybook/blocks';
 import * as paletteStories from './palettes.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
 
 <Meta of={paletteStories} />
 
@@ -25,3 +26,5 @@ You can apply this text color to any element by using the `.palette-text` class.
 <div className="hide-col-default">
   <Controls of={paletteStories.Default} />
 </div>
+
+<StylesPackageImport components={['post-palettes']} />

packages/styles/src/components/_index.scss

@@ -1,7 +1,7 @@
 @forward './../variables/options';
 
 @use 'accordion';
-@use 'appstore-badge';
+@use 'app-store-badge';
 @use 'avatar';
 @use 'badge';
 @use 'banner';