Feat/bcc range component

design-library/src/components/BccRange/BccRange.css

@@ -0,0 +1,56 @@
+@layer components {
+    .bcc-range {
+        @apply flex flex-col gap-2 w-full;
+    }
+
+    .bcc-range__label {
+        @apply text-base text-center text-gray-900;
+    }
+
+    .bcc-range__container {
+        @apply flex flex-col items-center gap-2 w-full;
+    }
+
+    .bcc-range__slider-container {
+        @apply w-full;
+    }
+
+    .bcc-range__text {
+        @apply text-sm text-gray-700 whitespace-nowrap;
+    }
+
+    .bcc-range__input {
+        @apply w-full h-1 bg-gray-200 rounded appearance-none cursor-pointer;
+        @apply disabled:opacity-50 disabled:cursor-not-allowed;
+        -webkit-appearance: none;
+        appearance: none;
+    }
+
+    .bcc-range__labels {
+        @apply flex items-center gap-4 w-full justify-between;
+    }
+
+    .bcc-range__input:disabled {
+        @apply bg-gray-400 cursor-not-allowed;
+    }
+
+    .bcc-range__input::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        @apply w-4 h-4 mt-[-6px] rounded-full bg-white cursor-pointer bg-white;
+        box-shadow: 0 1px 2px 0px rgba(113, 113, 113, 0.5),
+            0 0 0 2px rgba(226, 232, 240, 1);
+    }
+
+    .bcc-range__input::-webkit-slider-runnable-track {
+        @apply h-1 rounded bg-gray-200 border-red-200;
+    }
+
+    .bcc-range__input::-moz-range-thumb {
+        @apply w-4 h-4 rounded-full bg-red-900 cursor-pointer border-0;
+    }
+
+    .bcc-range__input::-moz-range-track {
+        @apply h-1 rounded bg-gray-200;
+    }
+
+}

design-library/src/components/BccRange/BccRange.spec.ts

@@ -0,0 +1,31 @@
+import { describe, it, expect } from "vitest";
+
+import { mount } from "@vue/test-utils";
+import BccRange from "./BccRange.vue";
+
+describe("BccRange", () => {
+  it("renders a range input", () => {
+    const wrapper = mount(BccRange, {
+      props: { modelValue: 0, min: -100, max: 10, step: 1 },
+    });
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("renders a label", () => {
+    const wrapper = mount(BccRange, {
+      props: { label: "Test label", modelValue: 0, min: -10, max: 10, step: 1 },
+    });
+    expect(wrapper.text()).toBe("Test label");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("handles a v-model", async () => {
+    const wrapper = mount(BccRange, {
+      props: { modelValue: 0, min: -10, max: 10, step: 1 },
+    });
+    await wrapper.find("input").trigger("input");
+
+    expect(wrapper.emitted("update:modelValue")?.length).toBe(1);
+    expect(wrapper.emitted("update:modelValue")![0]).toEqual([0]);
+  });
+});

design-library/src/components/BccRange/BccRange.stories.ts

@@ -0,0 +1,93 @@
+import BccRange from "./BccRange.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+  title: "Forms/BccRange",
+  component: BccRange,
+  argTypes: {
+    modelValue: {
+      description: "The current value of the range slider",
+    },
+    min: {
+      description: "The minimum value of the range slider",
+    },
+    max: {
+      description: "The maximum value of the range slider",
+    },
+    step: {
+      description: "The step value of the range slider",
+    },
+    label: {
+      description: "The main label of the range slider",
+    },
+    leftLabel: {
+      description: "The label of the left side of the range slider",
+    },
+    rightLabel: {
+      description: "The label of the right side of the range slider",
+    },
+    disabled: {
+      description: "Whether the range slider is disabled",
+    },
+  },
+} as Meta<typeof BccRange>;
+
+const Template: StoryFn<typeof BccRange> = (args) => ({
+  components: { BccRange },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BccRange label="Did you have the correct amount of people?" leftLabel="Less people" rightLabel="More people" />
+  `,
+});
+
+export const Example = Template.bind({});
+Example.args = {
+  modelValue: 0,
+  min: -10,
+  max: 10,
+  step: 1,
+  label: "Range Slider",
+  leftLabel: "Less people",
+  rightLabel: "More people",
+  disabled: false,
+};
+Example.parameters = {
+  docs: {
+    source: {
+      language: "html",
+      code: `
+  <BccRange label="Did you have the correct amount of people?" leftLabel="Less people" rightLabel="More people" />`,
+    },
+  },
+};
+
+export const Disabled: StoryFn<typeof BccRange> = () => ({
+  components: { BccRange },
+  template: `
+    <BccRange label="Did you have the correct amount of people?" leftLabel="Less people" rightLabel="More people" disabled />
+  `,
+});
+
+export const WithoutSideLabels: StoryFn<typeof BccRange> = () => ({
+  components: { BccRange },
+  template: `
+    <BccRange label="Did you have the correct amount of people?" />
+  `,
+});
+
+export const WithCustomRange: StoryFn<typeof BccRange> = () => ({
+  components: { BccRange },
+  template: `
+    <BccRange label="Did you have the correct amount of people?" leftLabel="Less people" rightLabel="More people" min=-100  max=100 step=5 />
+  `,
+});
+
+export const StartFromLeft: StoryFn<typeof BccRange> = () => ({
+  components: { BccRange },
+  template: `
+    <BccRange label="Did you have the correct amount of people?" leftLabel="Less people" rightLabel="More people" modelValue=0 min=0 max=10 />
+  `,
+});

design-library/src/components/BccRange/BccRange.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+type Props = {
+  modelValue: number;
+  min: number;
+  max: number;
+  step: number;
+  label?: string;
+  leftLabel?: string;
+  rightLabel?: string;
+  disabled?: boolean;
+};
+
+withDefaults(defineProps<Props>(), {
+  min: -10,
+  max: 10,
+  step: 1,
+  disabled: false,
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const handleInput = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit("update:modelValue", Number(target.value));
+};
+</script>
+
+<template>
+  <div class="bcc-range">
+    <label v-if="label" class="bcc-range__label">{{ label }}</label>
+    <div class="bcc-range__container">
+      <div class="bcc-range__slider-container">
+        <input
+          type="range"
+          class="bcc-range__input"
+          :min="min"
+          :max="max"
+          :step="step"
+          :value="modelValue"
+          :disabled="disabled"
+          @input="handleInput"
+        />
+      </div>
+      <div class="bcc-range__labels">
+        <span v-if="leftLabel" class="bcc-range__text bcc-range__text--left">{{ leftLabel }}</span>
+        <span v-if="rightLabel" class="bcc-range__text bcc-range__text--right">{{
+          rightLabel
+        }}</span>
+      </div>
+    </div>
+  </div>
+</template>

design-library/src/components/BccRange/__snapshots__/BccRange.spec.ts.snap

@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BccRange > renders a label 1`] = `
+"<div class="bcc-range"><label class="bcc-range__label">Test label</label>
+  <div class="bcc-range__container">
+    <div class="bcc-range__slider-container"><input type="range" class="bcc-range__input" min="-10" max="10" step="1"></div>
+    <div class="bcc-range__labels">
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+</div>"
+`;
+
+exports[`BccRange > renders a range input 1`] = `
+"<div class="bcc-range">
+  <!--v-if-->
+  <div class="bcc-range__container">
+    <div class="bcc-range__slider-container"><input type="range" class="bcc-range__input" min="-100" max="10" step="1"></div>
+    <div class="bcc-range__labels">
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+  </div>
+</div>"
+`;

design-library/src/css/index.css

@@ -36,3 +36,4 @@
 @import "../components/BccPagination/BccPagination.css";
 @import "../components/BccNpsScore/BccNpsScore.css";
 @import "../components/BccNpsResult/BccNpsResult.css";
+@import "../components/BccRange/BccRange.css";

design-library/src/index.ts

@@ -45,3 +45,4 @@ export { default as BccAccordion } from "./components/BccAccordion/BccAccordion.
 export { default as BccPagination } from "./components/BccPagination/BccPagination.vue";
 export { default as BccNpsScore } from "./components/BccNpsScore/BccNpsScore.vue";
 export { default as BccNpsResult } from "./components/BccNpsResult/BccNpsResult.vue";
+export { default as BccRange } from "./components/BccRange/BccRange.vue";