docs: add stories to list slider

packages/core/src/components/list-slider/stories/list-slider.core.stories.tsx

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import './list-slider.css'
+
+import { ListSliderStoryArgs } from './list-slider.args'
+
+export default {
+  title: 'Components/List Slider',
+  ...ListSliderStoryArgs,
+} as Meta
+
+const createListSlider = () => {
+  return html`
+    <atom-list-slider>
+      <atom-list-slider-item class="slide">
+        <div>Example 1</div>
+      </atom-list-slider-item>
+      <atom-list-slider-item class="slide">
+        <div>Example 2</div>
+      </atom-list-slider-item>
+      <atom-list-slider-item class="slide">
+        <div>Example 3</div>
+      </atom-list-slider-item>
+      <atom-list-slider-item class="slide">
+        <div>Example 4</div>
+      </atom-list-slider-item>
+      <atom-list-slider-item class="slide">
+        <div>Example 5</div>
+      </atom-list-slider-item>
+    </atom-list-slider>
+  `
+}
+
+export const Default: StoryObj = {
+  render: () => createListSlider(),
+}

packages/core/src/components/list-slider/stories/list-slider.css

@@ -0,0 +1,29 @@
+.slide {
+  align-items: center;
+  background-color: var(--color-brand-primary-regular);
+  color: var(--color-neutral-white);
+  display: flex;
+  height: 300px;
+  justify-content: center;
+  min-width: 300px;
+}
+
+.slide:nth-child(1) {
+  background-color: var(--color-brand-primary-regular);
+}
+
+.slide:nth-child(2) {
+  background-color: var(--color-brand-secondary-regular);
+}
+
+.slide:nth-child(3) {
+  background-color: var(--color-contextual-success-regular);
+}
+
+.slide:nth-child(4) {
+  background-color: tomato;
+}
+
+.slide:nth-child(5) {
+  background-color: var(--color-contextual-warning-regular);
+}

packages/core/src/components/list-slider/stories/list-slider.react.stories.tsx

@@ -0,0 +1,40 @@
+import {
+  AtomListSlider,
+  AtomListSliderItem,
+} from '@juntossomosmais/atomium/react'
+import { Meta, StoryObj } from '@storybook/react'
+import React from 'react'
+
+import './list-slider.css'
+
+import { ListSliderStoryArgs } from './list-slider.args'
+
+export default {
+  title: 'Components/List Slider',
+  components: [AtomListSlider, AtomListSliderItem],
+  ...ListSliderStoryArgs,
+} as Meta
+
+const createListSlider = () => (
+  <AtomListSlider>
+    <AtomListSliderItem className='slide'>
+      <div>Example 1</div>
+    </AtomListSliderItem>
+    <AtomListSliderItem className='slide'>
+      <div>Example 2</div>
+    </AtomListSliderItem>
+    <AtomListSliderItem className='slide'>
+      <div>Example 3</div>
+    </AtomListSliderItem>
+    <AtomListSliderItem className='slide'>
+      <div>Example 4</div>
+    </AtomListSliderItem>
+    <AtomListSliderItem className='slide'>
+      <div>Example 5</div>
+    </AtomListSliderItem>
+  </AtomListSlider>
+)
+
+export const Default: StoryObj = {
+  render: () => createListSlider(),
+}

packages/core/src/components/list-slider/stories/list-slider.vue.stories.tsx

@@ -0,0 +1,54 @@
+import {
+  AtomListSlider,
+  AtomListSliderItem,
+} from '@juntossomosmais/atomium/vue'
+import { Meta, StoryObj } from '@storybook/vue3'
+
+import './list-slider.css'
+
+import { ListSliderStoryArgs } from './list-slider.args'
+
+export default {
+  title: 'Components/List Slider',
+  ...ListSliderStoryArgs,
+} as Meta
+
+const createListSlider = () => ({
+  components: { AtomListSlider, AtomListSliderItem },
+  setup() {
+    return {}
+  },
+  template: `
+    <AtomListSlider>
+      <AtomListSliderItem class="slide">
+        <div>
+          Example 1
+        </div>
+      </AtomListSliderItem>
+      <AtomListSliderItem class="slide">
+        <div>
+          Example 2
+        </div>
+      </AtomListSliderItem>
+      <AtomListSliderItem class="slide">
+        <div>
+          Example 3
+        </div>
+      </AtomListSliderItem>
+      <AtomListSliderItem class="slide">
+        <div>
+          Example 4
+        </div>
+      </AtomListSliderItem>
+      <AtomListSliderItem class="slide">
+        <div>
+          Example 5
+        </div>
+      </AtomListSliderItem>
+    </AtomListSlider>
+  `,
+})
+
+export const Default: StoryObj = {
+  render: () => createListSlider(),
+}