Merge branch 'main' into 2562-icon-search-fix-keywords

swisspost · Feb 5, 2024 · 5617c3c · 5617c3c
2 parents 36af8bb + acd17dd
commit 5617c3c
Show file tree

Hide file tree

Showing 13 changed files with 289 additions and 195 deletions.
diff --git a/...o/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts b/...o/src/app/post-sample/components/spinner/spinner-demo-page/spinner-demo-page.component.ts
@@ -2,19 +2,17 @@ import { Component } from '@angular/core';
 
 const codeTemplate =
   require('!!raw-loader!../spinner-mini-demo/spinner-mini-demo.component.html').default;
-const spinner = `<div class="position-relative">
-    <div class="spinner-bg">
-        <div class="loading-modal">
-            <div class="loader m-auto"></div>
-        </div>
+const spinner = `<!-- my-parent-element class="position-relative" -->
+<div class="spinner-bg">
+    <div class="loading-modal">
+        <div class="loader m-auto"></div>
     </div>
 </div>`;
-const spinnerSmall = `<div class="position-relative">
-  <div class="spinner-bg">
-      <div class="loading-modal">
-          <div class="loader loader-sm m-auto"></div>
-      </div>
-  </div>
+const spinnerSmall = `<!-- my-parent-element class="position-relative" -->
+<div class="spinner-bg">
+    <div class="loading-modal">
+        <div class="loader loader-sm m-auto"></div>
+    </div>
 </div>`;
 
 @Component({

diff --git a/packages/documentation/public/favicon.svg b/packages/documentation/public/favicon.svg
diff --git a/packages/documentation/src/stories/components/button-group/button-group.stories.ts b/packages/documentation/src/stories/components/button-group/button-group.stories.ts
@@ -23,13 +23,13 @@ const meta: Meta = {
       control: {
         type: 'select',
         labels: {
-          ' btn-sm': 'Small',
-          ' btn-rg': 'Regular',
-          ' btn-md': 'Medium',
-          ' btn-lg': 'Large',
+          'btn-sm': 'Small',
+          'btn-rg': 'Regular',
+          'btn-md': 'Medium',
+          'btn-lg': 'Large',
         },
       },
-      options: [' btn-sm', ' btn-rg', ' btn-md', ' btn-lg'],
+      options: ['btn-sm', 'btn-rg', 'btn-md', 'btn-lg'],
       table: {
         category: 'General',
       },
@@ -173,7 +173,7 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
             updateArgs({ selected: isChecked });
           }}"
         />
-        <label class="${`btn ${args.size} btn-secondary`}" for="${id}">${label}</label>
+        <label class="btn ${args.size} btn-secondary" for="${id}">${label}</label>
       `;
     }
     case 'radio': {
@@ -191,18 +191,14 @@ function createButtonTemplate(args: Args, context: StoryContext, index: number)
             updateArgs({ checked: position });
           }}"
         />
-        <label class="${`btn ${args.size} btn-secondary`}" for="${id}">${label}</label>
+        <label class="btn ${args.size} btn-secondary" for="${id}">${label}</label>
       `;
     }
     case 'link':
-      return html`
-        <a href="#" class="${`btn ${args.size} btn-secondary`}">${label}</a>
-      `;
+      return html` <a href="#" class="btn ${args.size} btn-secondary">${label}</a> `;
     case 'button':
     default:
-      return html`
-        <button type="button" class="${`btn ${args.size} btn-secondary`}">${label}</button>
-      `;
+      return html` <button type="button" class="btn ${args.size} btn-secondary">${label}</button> `;
   }
 }
 
@@ -230,7 +226,7 @@ export const Sizing: Story = {
     },
   },
   args: {
-    size: ' btn-sm',
+    size: 'btn-sm',
   },
 };
 

diff --git a/packages/documentation/src/stories/components/forms/radio/radio.stories.ts b/packages/documentation/src/stories/components/forms/radio/radio.stories.ts
@@ -123,22 +123,12 @@ function render(args: Args, context: StoryContext) {
 
   const useAriaLabel = args.hiddenLabel;
   const label: TemplateResult | null = !useAriaLabel
-    ? html`
-        <label for="${id}" class="form-check-label">${args.label}</label>
-      `
+    ? html` <label for="${id}" class="form-check-label">${args.label}</label> `
     : null;
 
   const contextual: (TemplateResult | null)[] = [
-    args.validation === 'is-valid'
-      ? html`
-          <p class="valid-feedback">Ggranda sukceso!</p>
-        `
-      : null,
-    args.validation === 'is-invalid'
-      ? html`
-          <p class="invalid-feedback">Eraro okazis!</p>
-        `
-      : null,
+    args.validation === 'is-valid' ? html` <p class="valid-feedback">Ggranda sukceso!</p> ` : null,
+    args.validation === 'is-invalid' ? html` <p class="invalid-feedback">Eraro okazis!</p> ` : null,
   ];
 
   const control = html`
@@ -168,7 +158,7 @@ export const Default: Story = {};
 
 export function renderInline(args: Args, context: Partial<StoryContext>) {
   const [_, updateArgs] = useArgs();
-  const baseId = `${context.viewMode}_${context.name.replace(/\s/g, '-')}_ExampleRadio`;
+  const baseId = `${context.viewMode}_${context.name?.replace(/\s/g, '-')}_ExampleRadio`;
   const id1 = baseId + '1';
   const id2 = baseId + '2';
   const id3 = baseId + '3';

diff --git a/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/forms/textarea/textarea.stories.ts
@@ -160,34 +160,16 @@ function renderTextarea(args: Args, context: StoryContext) {
   });
   const useAriaLabel = !args.floatingLabel && args.hiddenLabel;
   const label = !useAriaLabel
-    ? html`
-        <label for=${id} class="form-label">
-          ${html`
-            ${args.label}
-          `}
-        </label>
-      `
+    ? html` <label for=${id} class="form-label">${args.label}</label> `
     : null;
-  const contextuals = [
+  const contextual = [
     args.validation === 'is-valid'
-      ? html`
-          <div class="valid-feedback">Ggranda sukceso!</div>
-        `
+      ? html` <div class="valid-feedback">Ggranda sukceso!</div> `
       : null,
     args.validation === 'is-invalid'
-      ? html`
-          <div class="invalid-feedback">Eraro okazis!</div>
-        `
-      : null,
-    args.hint !== ''
-      ? html`
-          <div class="form-text">
-            ${html`
-              ${args.hint}
-            `}
-          </div>
-        `
+      ? html` <div class="invalid-feedback">Eraro okazis!</div> `
       : null,
+    args.hint !== '' ? html` <div class="form-text">${args.hint}</div> ` : null,
   ];
   const control = html`
     <textarea
@@ -206,12 +188,9 @@ ${args.textInside ?? nothing}</textarea
   `;
   if (args.floatingLabel) {
     return html`
-      <div class="form-floating">${[control, label, ...contextuals].filter(el => el !== null)}</div>
-    `;
-  } else
-    return html`
-      ${[label, control, ...contextuals].filter(el => el !== null)}
+      <div class="form-floating">${[control, label, ...contextual].filter(el => el !== null)}</div>
     `;
+  } else return html` ${[label, control, ...contextual].filter(el => el !== null)} `;
 }
 
 export const Default: Story = {};

diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx b/packages/documentation/src/stories/foundation/layout/grid/grid.blocks.tsx
@@ -34,7 +34,9 @@ export const GridTable = () => (
     <tr>
       <th>Custom gutters</th>
       <td colSpan={SCSS_VARIABLES['breakpoint-count']}>
-        <a href="/?path=/docs/foundations-layout-gutters--docs">yes</a>
+        <a href="#gutters" target="_self">
+          yes
+        </a>
       </td>
     </tr>
     <tr>

diff --git a/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx b/packages/documentation/src/stories/foundation/layout/grid/grid.docs.mdx
@@ -1,4 +1,4 @@
-import { Meta, Canvas, Source } from '@storybook/blocks';
+import { Canvas, Meta, Source } from '@storybook/blocks';
 import { formatAsMap } from '../../../../utils/sass-export';
 import { GridTable, SCSS_VARIABLES } from './grid.blocks';
 import * as GridStories from './grid.stories';
@@ -41,7 +41,7 @@ Breaking it down, here’s how the grid system comes together:
   <Source language="html" dark code={SampleContainer}></Source>
 - **Rows are wrappers for columns.** Each column has horizontal `padding` (called a gutter) for controlling the space between them. This `padding` is then counteracted on the rows with negative margins to ensure the content in your columns is visually aligned down the left side. Rows also support modifier classes to uniformly apply column sizing and gutter classes to change the spacing of your content.
 - **Columns are incredibly flexible.** There are 12 template columns available per row, allowing you to create different combinations of elements that span any number of columns. Column classes indicate the number of template columns to span (e.g., `.col-4` spans four). Widths are set in percentages so you always have the same relative sizing.
-- **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-\*` classes. `.g-0` is also available to remove gutters.
+- **Gutters are also responsive and customizable.** Gutter classes are available across all breakpoints, with all the same sizes as our `margin` and `padding` spacing. Change horizontal gutters with `.gx-*` classes, vertical gutters with `.gy-*`, or all gutters with `.g-*` classes. `.g-0` is also available to remove gutters.
 - **Sass variables, maps, and mixins power the grid.** If you don’t want to use the predefined grid classes, you can use the grid’s source Sass to create your own with more semantic markup. We also include some CSS custom properties to consume these Sass variables for even greater flexibility for you.
 
 ## Grid options
@@ -103,10 +103,18 @@ Use these row columns classes to quickly create basic grid layouts or to control
 
 <Canvas of={GridStories.RowColumns} />
 
+## Gutters
+
+To control the space between your columns, add either `.g-*` (horizontal and vertical) `.gx-*` (horizontal) or `.gy-*` (vertical) classes on the element containing the `.row` class.
+
+<Canvas of={GridStories.Gutters} />
+
 ## Nesting
 
 To nest your content with the default grid, add a new `.row` and set of `.col-*` columns within an existing `.col-*` column. Nested rows should include a set of columns that add up to 12 or fewer.
 
+Note: the style in this example is applied to the column to visually better understand nesting. However, it's recommended to apply the style on a child element of the column.
+
 <Canvas of={GridStories.Nested} />
 
 ## CSS