Add BccProgress component (#242)

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

@@ -0,0 +1,48 @@
+@layer components {
+    /* Base */
+    .bcc-progress-container {
+        @apply inline-flex flex-col space-y-2;
+    }
+
+    .bcc-progress {
+        @apply rounded w-full bg-neutral-200 h-1.5;
+    }
+
+    .bcc-progress-bar {
+        @apply rounded bg-silver-tree-600 h-full;
+    }
+
+    /* Size */
+    .bcc-progress-container .bcc-form-label-lg .bcc-form-label-optional {
+        @apply text-label-base;
+    }
+
+    .bcc-progress-sm .bcc-progress {
+        @apply h-0.5;
+    }
+
+    .bcc-progress-md .bcc-progress {
+        @apply h-1;
+    }
+
+    .bcc-progress-lg .bcc-progress {
+        @apply h-2;
+    }
+
+    .bcc-progress-xl .bcc-progress {
+        @apply h-4;
+    }
+
+    .bcc-progress-2xl .bcc-progress {
+        @apply h-6;
+    }
+
+    .bcc-progress-2xl .bcc-progress {
+        @apply h-8;
+    }
+
+    .bcc-progress-3xl .bcc-progress {
+        @apply h-12;
+    }
+
+}

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

@@ -0,0 +1,67 @@
+import { describe, it, expect } from "vitest";
+
+import { mount } from "@vue/test-utils";
+import BccProgress from "./BccProgress.vue";
+
+describe("BccProgress", () => {
+  it("renders without any properties", () => {
+    const wrapper = mount(BccProgress);
+
+    expect(wrapper.text()).toContain("0%");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should overflow 100%", () => {
+    const wrapper = mount(BccProgress, {
+      props: { value: 110, max: 100 },
+    });
+
+    expect(wrapper.text()).toContain("110%");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should not overflow 110%", () => {
+    const wrapper = mount(BccProgress, {
+      props: { value: 110, max: 100, overflow: false },
+    });
+
+    expect(wrapper.text()).toContain("100%");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should render percentage", () => {
+    const wrapper = mount(BccProgress, {
+      props: { value: 100, max: 100, showPercentage: true },
+    });
+
+    expect(wrapper.text()).toContain("100%");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should not render percentage", () => {
+    const wrapper = mount(BccProgress, {
+      props: { value: 100, max: 100, showPercentage: false },
+    });
+
+    expect(wrapper.text()).not.toContain("100%");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should render values", () => {
+    const wrapper = mount(BccProgress, {
+      props: { value: 100, max: 100, showValues: true },
+    });
+
+    expect(wrapper.text()).toContain("100 / 100");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should not render values", () => {
+    const wrapper = mount(BccProgress, {
+      props: { value: 100, max: 100, showValues: false },
+    });
+
+    expect(wrapper.text()).not.toContain("100 / 100");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,132 @@
+import BccProgress from "./BccProgress.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+/**
+ * A `progress` element supporting current and max values
+ */
+export default {
+  title: "Components/BccProgress",
+  component: BccProgress,
+  argTypes: {
+    value: {
+      description: "Current Value",
+      control: { type: "number" },
+    },
+    size: {
+      options: ["base", "lg"],
+      control: { type: "radio" },
+    },
+    max: {
+      description: "Max Value",
+      control: { type: "number" },
+    },
+    overflow: {
+      description: "Let or let not percentage exceed 100%",
+    },
+    showValues: {
+      description: "Display current and max value",
+    },
+    showPercentage: {
+      description: "Display percentage",
+    },
+  },
+} as Meta<typeof BccProgress>;
+
+const Template: StoryFn<typeof BccProgress> = (args) => ({
+  components: { BccProgress },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BccProgress v-bind="args" class="w-1/4"/>
+  `,
+});
+
+/**
+ * Use `value` to control the progress of the progress bar. Pass max value to declare when it reaches 100% and set overflow to false if it should not exceed 100%.
+ */
+export const Example = Template.bind({});
+Example.args = {
+  value: 30145.5,
+  max: 200000,
+  size: "base",
+  overflow: true,
+  showValues: true,
+  showPercentage: true,
+};
+Example.parameters = {
+  docs: {
+    source: {
+      language: "html",
+      code: `
+<BccProgress
+  value="30145.50"
+  max="200000"
+  showValues="true"
+  showPercentage="true"
+  overflow="true"
+/>
+`,
+    },
+  },
+};
+
+/**
+ * Set the `size` prop to control the size
+ */
+export const Size: StoryFn<typeof BccProgress> = () => ({
+  components: { BccProgress },
+  template: `
+    <div class="flex flex-col space-y-4">
+      <BccProgress class="w-1/4 bcc-progress-sm" :value="30"/>
+      <BccProgress class="w-1/4 bcc-progress-md" :value="22"/>
+      <BccProgress class="w-1/4" :value="75"/>
+      <BccProgress class="w-1/4 bcc-progress-lg" size="lg" :value="22"/>
+      <BccProgress class="w-1/4 bcc-progress-xl" size="lg" :value="22"/>
+      <BccProgress class="w-1/4 bcc-progress-2xl" size="lg" :value="22"/>
+      <BccProgress class="w-1/4 bcc-progress-3xl" size="lg" :value="22"/>
+    </div>
+  `,
+});
+
+/**
+ * Set the `max` value, it supports both decimals and integers
+ */
+export const Max: StoryFn<typeof BccProgress> = () => ({
+  components: { BccProgress },
+  template: `
+    <div class="flex flex-col space-y-4">
+      <BccProgress class="w-1/4" :value="0.435" :max="0.9"/>
+      <BccProgress class="w-1/4" :value="8" :max="10"/>   
+    </div>
+  `,
+});
+
+/**
+ * Do or do not let percentage `overflow` 100%
+ */
+export const Overflow: StoryFn<typeof BccProgress> = () => ({
+  components: { BccProgress },
+  template: `
+    <div class="flex flex-col space-y-4">
+      <BccProgress class="w-1/4" :value="1050" :max="100"/>
+      <BccProgress class="w-1/4" :value="1050" :max="100" :overflow="false"/>
+    </div>
+  `,
+});
+
+/**
+ * Set `showValues` and / or `showPercentage` to false
+ */
+export const ShowValuesAndOrPercentage: StoryFn<typeof BccProgress> = () => ({
+  components: { BccProgress },
+  template: `
+    <div class="flex flex-col space-y-4">
+      <BccProgress class="w-1/4" :value="8" :max="10"/>
+      <BccProgress class="w-1/4" :value="8" :max="10" :showValues="false"/>   
+      <BccProgress class="w-1/4" :value="8" :max="10" :showPercentage="false"/>   
+      <BccProgress class="w-1/4" :value="8" :max="10" :showValues="false" :showPercentage="false"/>   
+    </div>
+  `,
+});

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

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { computed } from "vue";
+import BccFormLabel from "@/components/BccFormLabel/BccFormLabel.vue";
+
+type Props = {
+  value?: number;
+  max?: number;
+  size?: "base" | "lg";
+  showValues?: boolean;
+  showPercentage?: boolean;
+  overflow?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  max: 100,
+  size: "base",
+  showValues: true,
+  showPercentage: true,
+  overflow: true,
+});
+
+const percentage = computed(() => {
+  if (props.value > props.max && !props.overflow) return 100;
+  return (props.value / props.max) * 100;
+});
+
+const percentageSafe = computed(() => {
+  if (props.value > props.max) return 100;
+  return percentage.value;
+});
+</script>
+
+<template>
+  <div class="bcc-progress-container">
+    <BccFormLabel
+      v-if="showPercentage || showValues"
+      :size="size"
+      :showOptionalLabel="showPercentage"
+      :optionalLabel="Math.round(percentage) + '%'"
+    >
+      <span v-if="showValues">
+        {{ props.value.toLocaleString() }} /
+        {{ props.max.toLocaleString() }}
+      </span>
+    </BccFormLabel>
+
+    <div class="bcc-progress">
+      <div class="bcc-progress-bar" :style="{ width: percentageSafe + '%' }" />
+    </div>
+  </div>
+</template>

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

@@ -0,0 +1,59 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BccProgress > renders without any properties 1`] = `
+"<div class=\\"bcc-progress-container\\"><label class=\\"bcc-form-label\\"><span><span>0 / 100</span></span><span class=\\"bcc-form-label-optional\\">0%</span></label>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 0%;\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`BccProgress > should not overflow 110% 1`] = `
+"<div class=\\"bcc-progress-container\\"><label class=\\"bcc-form-label\\"><span><span>110 / 100</span></span><span class=\\"bcc-form-label-optional\\">100%</span></label>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 100%;\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`BccProgress > should not render percentage 1`] = `
+"<div class=\\"bcc-progress-container\\"><label class=\\"bcc-form-label\\"><span><span>100 / 100</span></span>
+    <!--v-if-->
+  </label>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 100%;\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`BccProgress > should not render values 1`] = `
+"<div class=\\"bcc-progress-container\\"><label class=\\"bcc-form-label\\"><span></span><span class=\\"bcc-form-label-optional\\">100%</span></label>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 100%;\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`BccProgress > should overflow 100% 1`] = `
+"<div class=\\"bcc-progress-container\\"><label class=\\"bcc-form-label\\"><span><span>110 / 100</span></span><span class=\\"bcc-form-label-optional\\">110%</span></label>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 100%;\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`BccProgress > should render percentage 1`] = `
+"<div class=\\"bcc-progress-container\\"><label class=\\"bcc-form-label\\"><span><span>100 / 100</span></span><span class=\\"bcc-form-label-optional\\">100%</span></label>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 100%;\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`BccProgress > should render values 1`] = `
+"<div class=\\"bcc-progress-container\\"><label class=\\"bcc-form-label\\"><span><span>100 / 100</span></span><span class=\\"bcc-form-label-optional\\">100%</span></label>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 100%;\\"></div>
+  </div>
+</div>"
+`;

design-library/src/css/index.css

@@ -17,6 +17,7 @@
 @import "../components/BccRadio/BccRadio.css";
 @import "../components/BccAlert/BccAlert.css";
 @import "../components/BccSelect/BccSelect.css";
+@import "../components/BccProgress/BccProgress.css";
 @import "../components/BccFormLabel/BccFormLabel.css";
 @import "../components/BccFormMessage/BccFormMessage.css";
 @import "../components/BccTable/BccTable.css";