fix: removing descriptions from screenshot tests

.changeset/some-memes-own.md

@@ -0,0 +1,5 @@
+---
+'@solid-design-system/docs': patch
+---
+
+Removed all descriptions from the screenshot tests.

packages/docs/src/stories/components/accordion-group.test.stories.ts

@@ -22,21 +22,13 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * Vertical stack of sd-accordions.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
     return generateTemplate({ args });
   }
 };
 
-/**
- * Set 'close-others' to only have one accordion open.
- */
-
 export const CloseOthers = {
   name: 'One accordion open at a time',
   render: (args: any) => {
@@ -50,10 +42,6 @@ export const CloseOthers = {
   }
 };
 
-/**
- * Part of sd-accordion-group
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -76,10 +64,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-accordions inside a group are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
@@ -94,10 +78,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * Accordion group can be used with background options of white, neutral-100 and primary-100.
- */
-
 export const Samples = {
   name: 'Samples',
   render: () => {

packages/docs/src/stories/components/accordion.test.stories.ts

@@ -37,9 +37,6 @@ export const Default = {
   }
 };
 
-/**
- * An accordion item can either be collapsed or open.
- */
 export const States = {
   name: 'States',
   render: (args: any) => {
@@ -53,9 +50,6 @@ export const States = {
   }
 };
 
-/**
- * The summary can have multiple lines.
- */
 export const SummaryLength = {
   name: 'Summary Length',
   render: (args: any) => {
@@ -80,17 +74,6 @@ export const SummaryLength = {
   }
 };
 
-/**
- * Use the expand-icon and collapse-icon slots to change the expand and collapse icons, respectively.
- * To disable the animation, override the rotate property on the summary-icon part as shown below:
- *
- * ```
- * sd-accordion.custom-icons::part(summary-icon) {
- *   rotate: none;
- * }
- * ```
- */
-
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -156,10 +139,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-accordions are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {

packages/docs/src/stories/components/badge.test.stories.ts

@@ -29,21 +29,13 @@ export default {
   argTypes
 };
 
-/**
- * This shows the badge in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
     return generateTemplate({ args });
   }
 };
 
-/**
- * The badge in all possible combinations of `variant` and `size`.
- */
-
 export const VariantAndSize = {
   name: 'Variant × Size',
   render: (args: any) => {
@@ -57,10 +49,6 @@ export const VariantAndSize = {
   }
 };
 
-/**
- * The badge in all possible combinations of `variant` and `inverted`.
- */
-
 export const VariantAndInverted = {
   name: 'Variant × Inverted',
   render: (args: any) => {
@@ -80,11 +68,6 @@ export const VariantAndInverted = {
   }
 };
 
-/**
- * Use the `default` slot to add content to the badge.
- *
- * If you add icons to the slot, please make sure to account for accessibility by providing an alt-text.
- */
 export const Slots = {
   name: 'Slots',
   render: (args: any) => {
@@ -108,10 +91,6 @@ export const Slots = {
   }
 };
 
-/**
- * Use the `base` and `content` part selectors to customize the badge.
- */
-
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {

packages/docs/src/stories/components/brandshape.test.stories.ts

@@ -75,19 +75,13 @@ const increaseColumnWidth = (): ConstantDefinition => {
   };
 };
 
-/**
- * Default: This shows sd-brandshape in its default state.
- */
 export const Default = {
   name: 'Default',
   render: (args: any) => {
     return generateTemplate({ args });
   }
 };
 
-/**
- *  The different shapes of the brandshape.
- */
 export const Shapes = {
   name: 'Shapes',
   render: (args: any) => {
@@ -105,9 +99,6 @@ export const Shapes = {
   }
 };
 
-/**
- *  The different variants of the brandshape.
- */
 export const Variants = {
   name: 'Variants',
   render: (args: any) => {
@@ -153,9 +144,6 @@ export const Variants = {
   }
 };
 
-/**
- * The different breakpoints of the brandshape.
- */
 export const Breakpoints = {
   name: 'Breakpoints',
   render: (args: any) => {
@@ -185,9 +173,6 @@ export const Breakpoints = {
   }
 };
 
-/**
- * Use the `base`, `content`, `shape-top`, `shape-middle` or `shape-bottom` part selectors to customize the brandshape.
- */
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -210,9 +195,6 @@ export const Parts = {
   }
 };
 
-/**
- * When using the 'image' variant, use the transform property to adjust the image position. In this example, the image is moved up and skewed to fit the brandshape.
- */
 export const Sample = {
   name: 'Sample: Positioning Image Variant',
   render: () => {

packages/docs/src/stories/components/carousel-item.test.stories.ts

@@ -19,10 +19,6 @@ export default {
   parameters: { ...parameters, controls: { disable: true } }
 };
 
-/**
- * This shows sd-carousel-item in its default state.
- */
-
 export const Default = {
   render: (args: any) => {
     return generateTemplate({

packages/docs/src/stories/components/carousel.test.stories.ts

@@ -43,11 +43,6 @@ export default {
     `
   ]
 };
-
-/**
- * This shows sd-carousel in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
@@ -57,10 +52,6 @@ export const Default = {
   }
 };
 
-/**
- * Use the `variant` attribute to select the pagination format.
- */
-
 export const Variant = {
   name: 'Variant',
   render: (args: any) => {
@@ -73,10 +64,6 @@ export const Variant = {
   }
 };
 
-/**
- * Use the `inverted` attribute when displayed on primary background.
- */
-
 export const Inverted = {
   name: 'Inverted',
   render: (args: any) => {
@@ -107,10 +94,6 @@ export const Inverted = {
   }
 };
 
-/**
- * Use the `loop` attribute to enable/disable the looping of your slides.
- */
-
 export const Loop = {
   name: 'Loop',
   render: (args: any) => {
@@ -123,10 +106,6 @@ export const Loop = {
   }
 };
 
-/**
- * Use the `slides-per-page` attribute to set the number of slides that would be shown at a given time.
- */
-
 export const SlidesPerPage = {
   name: 'Slides Per Page',
   render: (args: any) => {
@@ -140,13 +119,6 @@ export const SlidesPerPage = {
   }
 };
 
-/**
- * Use `slides-per-move` to set how many slides the carousel advances when scrolling. This is useful when specifying a `slides-per-page` greater than one. By setting `slides-per-move` to the same value as `slides-per-page`, the carousel will advance by one page at a time.<br>
- * <b>Note:</b><br>
- * <li> The number of slides should be divisible by the number of `slides-per-page` to maintain consistent scroll behavior.</li>
- * <li>Variations between `slides-per-move` and `slides-per-page` can lead to unexpected scrolling behavior. Keep your intended UX in mind when adjusting these values.</li>
- */
-
 export const SlidesPerMove = {
   name: 'Slides Per Move',
   render: (args: any) => {
@@ -210,10 +182,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-carousel are fully accessibile via keyboard.
- */
-
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {
@@ -228,10 +196,6 @@ export const Mouseless = {
   }
 };
 
-/**
- * Use the `autoplay` attribute to toggle autoplay.
- */
-
 export const Autoplay = {
   name: 'Autoplay',
   render: (args: any) => {
@@ -248,10 +212,6 @@ export const Autoplay = {
   }
 };
 
-/**
- * Use the `fade` attribute to toggle fade effect.
- */
-
 export const Fade = {
   name: 'Fade',
   render: (args: any) => {

packages/docs/src/stories/components/checkbox-group.test.stories.ts

@@ -39,21 +39,13 @@ export default {
   }
 };
 
-/**
- * Default: This shows sd-checkbox-group in its default state.
- */
-
 export const Default = {
   name: 'Default',
   render: (args: any) => {
     return generateTemplate({ args });
   }
 };
 
-/**
- * The sd-checkbox in all possible combinations of `orientation` and `size`.
- */
-
 export const Orientation = {
   name: 'Orientation',
   render: (args: any) => {
@@ -67,10 +59,6 @@ export const Orientation = {
   }
 };
 
-/**
- * Use the disabled attribute to disable an input checkbox. Clicks will be suppressed until the disabled state is removed
- */
-
 export const Disabled = {
   name: 'Disabled x Size',
   render: (args: any) => {
@@ -102,9 +90,6 @@ export const Disabled = {
   }
 };
 
-/**
- * Use the `form-control`, `form-control-label` and `form-control-input` part selectors to customize the checkbox-group.
- */
 export const Parts = {
   name: 'Parts',
   render: (args: any) => {
@@ -127,9 +112,6 @@ export const Parts = {
   }
 };
 
-/**
- * sd-checkbox-group is fully accessibile via keyboard.
- */
 export const Mouseless = {
   name: 'Mouseless',
   render: (args: any) => {