chore(docs): fixed banner sizing (#4145)

swisspost · Dec 4, 2024 · 43c0f13 · 43c0f13
1 parent c5a6491
commit 43c0f13
Show file tree

Hide file tree

Showing 12 changed files with 23 additions and 21 deletions.
diff --git a/.changeset/weak-falcons-study.md b/.changeset/weak-falcons-study.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added classes to fix banner sizing in controls.
diff --git a/...s/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts b/...s/documentation/src/stories/components/card-control/standard-html/card-control.stories.ts
@@ -96,7 +96,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the card control and controls the display of the corresponding return message.<span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs##card-control">validation guidelines here</a>.</span> ',
+        'Defines the validation state of the card control and controls the display of the corresponding return message.<span className="mt-8 banner banner-info banner-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs##card-control">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx b/packages/documentation/src/stories/components/checkbox/checkbox.docs.mdx
@@ -53,7 +53,7 @@ The indeterminate state can only be set via JavaScript and is styled using the `
 
 To show a checkbox group, just wrap your checkboxes in a `fieldset`.
 
-<div className="alert alert-info alert-md">
+<div className="banner banner-info banner-md">
   Don't forget to add also a `<legend>` element.
   You can visually hide the legend using the `.visually-hidden` class if necessary.
 
@@ -68,7 +68,7 @@ Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83
 To show the checkboxes inline, just add the `.form-check-inline` class to each of the checkboxes.
 
 <div className="banner banner-info banner-md">
-  Don't forget to wrap your checkbox group in a `&lt;fieldset&gt;` that includes a `&lt;legend&gt;` element.
+  Don't forget to wrap your checkbox group in a <code>&lt;fieldset&gt;</code> that includes a <code>&lt;legend&gt;</code> element.
   You can then visually hide the legend using the `.visually-hidden` class.
 
 Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).

diff --git a/packages/documentation/src/stories/components/checkbox/checkbox.stories.ts b/packages/documentation/src/stories/components/checkbox/checkbox.stories.ts
@@ -107,7 +107,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the checkbox and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#checkbox">validation guidelines here</a>.</span> ',
+        'Defines the validation state of the checkbox and controls the display of the corresponding return message. <span className="mt-8 banner banner-info banner-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#checkbox">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

diff --git a/packages/documentation/src/stories/components/input/input.stories.ts b/packages/documentation/src/stories/components/input/input.stories.ts
@@ -124,7 +124,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the input and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#input">validation guidelines here</a>.</span> ',
+        'Defines the validation state of the input and controls the display of the corresponding return message. <span className="mt-8 banner banner-info banner-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#input">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

diff --git a/packages/documentation/src/stories/components/radio/radio.docs.mdx b/packages/documentation/src/stories/components/radio/radio.docs.mdx
@@ -35,7 +35,7 @@ The following examples show the different characteristics of the component. Thes
 
 To show radio button group, just wrap your radios in a `fieldset`.
 
-<div className="alert alert-info alert-md">
+<div className="banner banner-info banner-md">
   Don't forget to add also a `<legend>` element.
   You can visually hide the legend using the `.visually-hidden` class if necessary.
 
@@ -50,14 +50,11 @@ Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83
 To render a radio inline, simply add the class `.form-check-inline` to the `.form-check` wrapper element.
 
 <div className="banner banner-info banner-md">
-  Remember to wrap your radio groups in a <code>&lt;fieldset&gt;</code> including a{' '}
-  <code>&lt;legend&gt;</code> tag. This provides a label for your radio group.
-  <br />
-  For more information, read our{' '}
-  <a href="/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs#grouping">
-    grouping accessibility guide
-  </a>
-  .
+  Remember to wrap your radio groups in a <code>&lt;fieldset&gt;</code> including a <code>&lt;legend&gt;</code> tag.
+  This provides a label for your radio group.
+
+  Read more about that topic in our [accessibility docs](/?path=/docs/46da78e8-e83b-4ca1-aaf6-bbc662efef14--docs).
+
 </div>
 
 To visually hide the `<legend>` element, use the `.visually-hidden` class.

diff --git a/packages/documentation/src/stories/components/radio/radio.stories.ts b/packages/documentation/src/stories/components/radio/radio.stories.ts
@@ -88,7 +88,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the radio button and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#radio-button">validation guidelines here</a>.</span> ',
+        'Defines the validation state of the radio button and controls the display of the corresponding return message. <span className="mt-8 banner banner-info banner-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#radio-button">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

diff --git a/packages/documentation/src/stories/components/select/select.stories.ts b/packages/documentation/src/stories/components/select/select.stories.ts
@@ -142,7 +142,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the select box and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#select">validation guidelines here</a>.</span> ',
+        'Defines the validation state of the select box and controls the display of the corresponding return message. <span className="mt-8 banner banner-info banner-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#select">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

diff --git a/packages/documentation/src/stories/components/slider/slider.stories.ts b/packages/documentation/src/stories/components/slider/slider.stories.ts
@@ -146,7 +146,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the slider and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#select">validation guidelines here</a>.</span> ',
+        'Defines the validation state of the slider and controls the display of the corresponding return message. <span className="mt-8 banner banner-info banner-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#select">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

diff --git a/packages/documentation/src/stories/components/switch/switch.stories.ts b/packages/documentation/src/stories/components/switch/switch.stories.ts
@@ -86,7 +86,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the switch and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#switch">validation guidelines here</a>.</span> ',
+        'Defines the validation state of the switch and controls the display of the corresponding return message. <span className="mt-8 banner banner-info banner-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#switch">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

diff --git a/packages/documentation/src/stories/components/textarea/textarea.stories.ts b/packages/documentation/src/stories/components/textarea/textarea.stories.ts
@@ -156,7 +156,7 @@ const meta: MetaComponent = {
     validation: {
       name: 'Validation',
       description:
-        'Defines the validation state of the textarea and controls the display of the corresponding return message. <span className="mt-8 alert alert-info alert-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#textarea">validation guidelines here</a>.</span> ',
+        'Defines the validation state of the textarea and controls the display of the corresponding return message. <span className="mt-8 banner banner-info banner-sm">Please read our <a href="/?path=/docs/1aa900d9-aa65-4ae0-b8cd-e6cca6cc3472--docs#textarea">validation guidelines here</a>.</span> ',
       control: {
         type: 'radio',
         labels: {

diff --git a/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts b/packages/documentation/src/stories/components/togglebutton/togglebutton.stories.ts
@@ -50,7 +50,7 @@ const meta: MetaComponent<PostTogglebuttonProps> = {
       ...buttonMeta.argTypes?.size,
       description:
         'Sets the size of the component.' +
-        '<span className="mt-8 alert alert-info alert-sm">' +
+        '<span className="mt-8 banner banner-info banner-sm">' +
         'For more options, please see the ' +
         '<a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs">button documentation</a>' +
         '.</span>',
@@ -59,7 +59,7 @@ const meta: MetaComponent<PostTogglebuttonProps> = {
       ...buttonMeta.argTypes?.variant,
       description:
         'Defines a style variant.' +
-        '<span className="mt-8 alert alert-info alert-sm">' +
+        '<span className="mt-8 banner banner-info banner-sm">' +
         'For more options, please see the ' +
         '<a href="/?path=/docs/eb78afcb-ce92-4990-94b6-6536d5ec6af4--docs">button documentation</a>' +
         '.</span>',