feat: cv-slider foundations, cv-slider-skeleton component & story ready

main.js

@@ -64,6 +64,8 @@ import CvNumberInputSkeleton from './src/components/CvNumberInput/CvNumberInputS
 import CvToggle from './src/components/CvToggle/CvToggle.vue';
 import CvRadioButton from './src/components/CvRadioButton/CvRadioButton.vue';
 import CvRadioGroup from './src/components/CvRadioButton/CvRadioGroup.vue';
+import CvSlider from './src/components/CvSlider/CvSlider.vue';
+import CvSliderSkeleton from './src/components/CvSlider/CvSliderSkeleton.vue';
 
 const all = {
   CvAspectRatio,
@@ -132,6 +134,8 @@ const all = {
   CvToggle,
   CvRadioButton,
   CvRadioGroup,
+  CvSlider,
+  CvSliderSkeleton,
 };
 export default {
   install(app, options) {

src/components/CvSlider/CvSlider.stories.js

@@ -0,0 +1,30 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { sbSliderPrefix } from './sbSliderPrefix';
+import { CvSlider } from '.';
+
+export default {
+  title: `${sbCompPrefix}/${sbSliderPrefix}/CvSlider`,
+  component: CvSlider,
+  argTypes: {
+    // TODO
+  },
+};
+
+const template = `<cv-slider v-bind="args" />`;
+const Template = args => {
+  return {
+    components: { CvSlider },
+    setup: () => ({ args }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

src/components/CvSlider/CvSlider.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="">CvSlider</div>
+</template>
+
+<script setup>
+// TODO
+</script>

src/components/CvSlider/CvSliderSkeleton.stories.js

@@ -0,0 +1,26 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import { sbSliderPrefix } from './sbSliderPrefix';
+import { CvSliderSkeleton } from '.';
+
+export default {
+  title: `${sbCompPrefix}/${sbSliderPrefix}/CvSliderSkeleton`,
+  component: CvSliderSkeleton,
+};
+
+const template = `<cv-slider-skeleton />`;
+const Template = () => {
+  return {
+    components: { CvSliderSkeleton },
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

src/components/CvSlider/CvSliderSkeleton.vue

@@ -0,0 +1,18 @@
+<template>
+  <div :class="`cv-slider ${carbonPrefix}--form-item`">
+    <label :class="`${carbonPrefix}--label ${carbonPrefix}--skeleton`"></label>
+    <div :class="`${carbonPrefix}--slider-container ${carbonPrefix}--skeleton`">
+      <span :class="`${carbonPrefix}--slider__range-label`"></span>
+      <div :class="`${carbonPrefix}--slider`">
+        <div :class="`${carbonPrefix}--slider__track`"></div>
+        <div :class="`${carbonPrefix}--slider__filled-track`"></div>
+        <div :class="`${carbonPrefix}--slider__thumb`"></div>
+      </div>
+      <span :class="`${carbonPrefix}--slider__range-label`"></span>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

src/components/CvSlider/__tests__/CvSlider.spec.js

@@ -0,0 +1 @@
+// TODO

src/components/CvSlider/index.js

@@ -0,0 +1,5 @@
+import { default as CvSlider } from './CvSlider.vue';
+import { default as CvSliderSkeleton } from './CvSliderSkeleton.vue';
+
+export { CvSlider, CvSliderSkeleton };
+export default CvSlider;

src/components/CvSlider/sbSliderPrefix.js

@@ -0,0 +1,2 @@
+/* istanbul ignore next */
+export const sbSliderPrefix = 'CvSlider';