From 34d3213dbc005eef9c504336224657d905fc0536 Mon Sep 17 00:00:00 2001
From: Steffan <steffanhalv@gmail.com>
Date: Sat, 16 Sep 2023 17:37:07 +0200
Subject: [PATCH 1/9] Implemented BccProgress component

---
 .../components/BccProgress/BccProgress.css    |  20 +++
 .../BccProgress/BccProgress.spec.ts           |  69 ++++++++++
 .../BccProgress/BccProgress.stories.ts        | 129 ++++++++++++++++++
 .../components/BccProgress/BccProgress.vue    |  72 ++++++++++
 .../__snapshots__/BccProgress.spec.ts.snap    |  59 ++++++++
 design-library/src/css/index.css              |   1 +
 6 files changed, 350 insertions(+)
 create mode 100644 design-library/src/components/BccProgress/BccProgress.css
 create mode 100644 design-library/src/components/BccProgress/BccProgress.spec.ts
 create mode 100644 design-library/src/components/BccProgress/BccProgress.stories.ts
 create mode 100644 design-library/src/components/BccProgress/BccProgress.vue
 create mode 100644 design-library/src/components/BccProgress/__snapshots__/BccProgress.spec.ts.snap

diff --git a/design-library/src/components/BccProgress/BccProgress.css b/design-library/src/components/BccProgress/BccProgress.css
new file mode 100644
index 00000000..afa81089
--- /dev/null
+++ b/design-library/src/components/BccProgress/BccProgress.css
@@ -0,0 +1,20 @@
+@layer components {
+    /* Base */
+    .bcc-progress-container {
+        @apply inline-flex flex-col space-y-2;
+    }
+
+    .bcc-progress {
+        @apply rounded w-full bg-neutral-200;
+    }
+
+    /* Color */
+    .bcc-progress-line {
+        @apply rounded bg-silver-tree-600;
+    }
+
+    /* Size */
+    .bcc-progress-container .bcc-form-label-lg .bcc-form-label-optional {
+        @apply text-label-base;
+    }
+}
diff --git a/design-library/src/components/BccProgress/BccProgress.spec.ts b/design-library/src/components/BccProgress/BccProgress.spec.ts
new file mode 100644
index 00000000..4010458f
--- /dev/null
+++ b/design-library/src/components/BccProgress/BccProgress.spec.ts
@@ -0,0 +1,69 @@
+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 exceed 100%", () => {
+    const wrapper = mount(BccProgress, {
+      props: { value: 110, max: 100 },
+    });
+
+    expect(wrapper.text()).toContain("110%");
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("should not exceed 110%", () => {
+    const wrapper = mount(BccProgress, {
+      props: { value: 110, max: 100, exceed: 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();
+  });
+
+});
diff --git a/design-library/src/components/BccProgress/BccProgress.stories.ts b/design-library/src/components/BccProgress/BccProgress.stories.ts
new file mode 100644
index 00000000..a9bf025a
--- /dev/null
+++ b/design-library/src/components/BccProgress/BccProgress.stories.ts
@@ -0,0 +1,129 @@
+import BccProgress from "./BccProgress.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+/**
+ * A `progress` element supporting current and max values
+ */
+export default {
+  title: "Forms/BccProgress",
+  component: BccProgress,
+  argTypes: {
+    value: {
+      description: "Current Value",
+      control: { type: "number" },
+    },
+    size: {
+      options: ["sm", "base", "lg"],
+      control: { type: "radio" },
+    },
+    max: {
+      description: "Max Value",
+      control: { type: "number" },
+    },
+    exceed: {
+      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 exceed to false if it should not exceed 100%.
+ */
+export const Example = Template.bind({});
+Example.args = {
+  value: 30145.50,
+  max: 200000,
+  size: "base",
+  exceed: true,
+  showValues: true,
+  showPercentage: true,
+};
+Example.parameters = {
+  docs: {
+    source: {
+      language: "html",
+      code: `
+<BccProgress
+  value="30145.50"
+  max="200000"
+  size="base"
+  showValues="true"
+  showPercentage="true"
+  exceed="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" size="sm" :value="30"/>
+      <BccProgress class="w-1/4" size="base" :value="75"/>
+      <BccProgress class="w-1/4" 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 `exceed` 100%
+ */
+export const exceed: 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" :exceed="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>
+  `,
+});
diff --git a/design-library/src/components/BccProgress/BccProgress.vue b/design-library/src/components/BccProgress/BccProgress.vue
new file mode 100644
index 00000000..4e1a603a
--- /dev/null
+++ b/design-library/src/components/BccProgress/BccProgress.vue
@@ -0,0 +1,72 @@
+<script lang="ts">
+export default {
+  inheritAttrs: false,
+};
+</script>
+
+<script setup lang="ts">
+import { computed, type StyleValue } from "vue";
+import BccFormLabel from "@/components/BccFormLabel/BccFormLabel.vue";
+
+type Props = {
+  value?: number;
+  max?: number;
+  size?: "sm" | "base" | "lg";
+  showValues?: boolean;
+  showPercentage?: boolean;
+  exceed?: boolean;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  value: 0,
+  max: 100,
+  size: "base",
+  showValues: true,
+  showPercentage: true,
+  exceed: true
+});
+
+const percentage = computed(() => {
+  if (props.value > props.max && !props.exceed) return 100
+  return (props.value / props.max) * 100
+});
+
+const percentageSafe = computed(() => {
+  if (props.value > props.max) return 100
+  return percentage.value
+});
+
+const height = computed(() => {
+  return {
+    'h-1': props.size === 'sm',
+    'h-1.5': props.size === 'base',
+    'h-2': props.size === 'lg',
+  }
+});
+
+</script>
+
+<template>
+  <div class="bcc-progress-container" :class="$attrs['class']" :style="$attrs['style'] as StyleValue">
+    <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" :class="{ ...height }">
+      <div
+        class="bcc-progress-line"
+        :class="{ ...height }"
+        :style="{ width: percentageSafe + '%' }"
+      />
+    </div>
+
+  </div>
+</template>
diff --git a/design-library/src/components/BccProgress/__snapshots__/BccProgress.spec.ts.snap b/design-library/src/components/BccProgress/__snapshots__/BccProgress.spec.ts.snap
new file mode 100644
index 00000000..6d0eaeca
--- /dev/null
+++ b/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 h-1.5\\">
+    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 0%;\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`BccProgress > should exceed 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 h-1.5\\">
+    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 100%;\\"></div>
+  </div>
+</div>"
+`;
+
+exports[`BccProgress > should not exceed 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 h-1.5\\">
+    <div class=\\"bcc-progress-line h-1.5\\" 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 h-1.5\\">
+    <div class=\\"bcc-progress-line h-1.5\\" 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 h-1.5\\">
+    <div class=\\"bcc-progress-line h-1.5\\" 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 h-1.5\\">
+    <div class=\\"bcc-progress-line h-1.5\\" 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 h-1.5\\">
+    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 100%;\\"></div>
+  </div>
+</div>"
+`;
diff --git a/design-library/src/css/index.css b/design-library/src/css/index.css
index 824ddd72..a5d3a098 100644
--- a/design-library/src/css/index.css
+++ b/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";

From bbfee56548296662e589983cbce324c4ffe75deb Mon Sep 17 00:00:00 2001
From: Steffan <steffanhalv@gmail.com>
Date: Mon, 18 Sep 2023 09:02:39 +0200
Subject: [PATCH 2/9] Fix linting

---
 .../BccProgress/BccProgress.spec.ts           |  2 --
 .../BccProgress/BccProgress.stories.ts        |  6 ++---
 .../components/BccProgress/BccProgress.vue    | 26 ++++++++++---------
 3 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/design-library/src/components/BccProgress/BccProgress.spec.ts b/design-library/src/components/BccProgress/BccProgress.spec.ts
index 4010458f..cb389ecb 100644
--- a/design-library/src/components/BccProgress/BccProgress.spec.ts
+++ b/design-library/src/components/BccProgress/BccProgress.spec.ts
@@ -4,7 +4,6 @@ import { mount } from "@vue/test-utils";
 import BccProgress from "./BccProgress.vue";
 
 describe("BccProgress", () => {
-
   it("renders without any properties", () => {
     const wrapper = mount(BccProgress);
 
@@ -65,5 +64,4 @@ describe("BccProgress", () => {
     expect(wrapper.text()).not.toContain("100 / 100");
     expect(wrapper.html()).toMatchSnapshot();
   });
-
 });
diff --git a/design-library/src/components/BccProgress/BccProgress.stories.ts b/design-library/src/components/BccProgress/BccProgress.stories.ts
index a9bf025a..f4531d85 100644
--- a/design-library/src/components/BccProgress/BccProgress.stories.ts
+++ b/design-library/src/components/BccProgress/BccProgress.stories.ts
@@ -48,7 +48,7 @@ const Template: StoryFn<typeof BccProgress> = (args) => ({
  */
 export const Example = Template.bind({});
 Example.args = {
-  value: 30145.50,
+  value: 30145.5,
   max: 200000,
   size: "base",
   exceed: true,
@@ -103,7 +103,7 @@ export const Max: StoryFn<typeof BccProgress> = () => ({
 /**
  * Do or do not let percentage `exceed` 100%
  */
-export const exceed: StoryFn<typeof BccProgress> = () => ({
+export const Exceed: StoryFn<typeof BccProgress> = () => ({
   components: { BccProgress },
   template: `
     <div class="flex flex-col space-y-4">
@@ -116,7 +116,7 @@ export const exceed: StoryFn<typeof BccProgress> = () => ({
 /**
  * Set `showValues` and / or `showPercentage` to false
  */
-export const showValuesAndOrPercentage: StoryFn<typeof BccProgress> = () => ({
+export const ShowValuesAndOrPercentage: StoryFn<typeof BccProgress> = () => ({
   components: { BccProgress },
   template: `
     <div class="flex flex-col space-y-4">
diff --git a/design-library/src/components/BccProgress/BccProgress.vue b/design-library/src/components/BccProgress/BccProgress.vue
index 4e1a603a..4daf8160 100644
--- a/design-library/src/components/BccProgress/BccProgress.vue
+++ b/design-library/src/components/BccProgress/BccProgress.vue
@@ -23,31 +23,34 @@ const props = withDefaults(defineProps<Props>(), {
   size: "base",
   showValues: true,
   showPercentage: true,
-  exceed: true
+  exceed: true,
 });
 
 const percentage = computed(() => {
-  if (props.value > props.max && !props.exceed) return 100
-  return (props.value / props.max) * 100
+  if (props.value > props.max && !props.exceed) return 100;
+  return (props.value / props.max) * 100;
 });
 
 const percentageSafe = computed(() => {
-  if (props.value > props.max) return 100
-  return percentage.value
+  if (props.value > props.max) return 100;
+  return percentage.value;
 });
 
 const height = computed(() => {
   return {
-    'h-1': props.size === 'sm',
-    'h-1.5': props.size === 'base',
-    'h-2': props.size === 'lg',
-  }
+    "h-1": props.size === "sm",
+    "h-1.5": props.size === "base",
+    "h-2": props.size === "lg",
+  };
 });
-
 </script>
 
 <template>
-  <div class="bcc-progress-container" :class="$attrs['class']" :style="$attrs['style'] as StyleValue">
+  <div
+    class="bcc-progress-container"
+    :class="$attrs['class']"
+    :style="$attrs['style'] as StyleValue"
+  >
     <BccFormLabel
       v-if="showPercentage || showValues"
       :size="size"
@@ -67,6 +70,5 @@ const height = computed(() => {
         :style="{ width: percentageSafe + '%' }"
       />
     </div>
-
   </div>
 </template>

From 0753d5a6948975cafeff0e87f978050213308634 Mon Sep 17 00:00:00 2001
From: Steffan <steffanhalv@gmail.com>
Date: Mon, 18 Sep 2023 09:16:12 +0200
Subject: [PATCH 3/9] Fix typecheck

---
 design-library/src/components/BccProgress/BccProgress.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/design-library/src/components/BccProgress/BccProgress.vue b/design-library/src/components/BccProgress/BccProgress.vue
index 4daf8160..bd912ab4 100644
--- a/design-library/src/components/BccProgress/BccProgress.vue
+++ b/design-library/src/components/BccProgress/BccProgress.vue
@@ -53,7 +53,7 @@ const height = computed(() => {
   >
     <BccFormLabel
       v-if="showPercentage || showValues"
-      :size="size"
+      :size="size !== 'sm' ? size : 'base'"
       :showOptionalLabel="showPercentage"
       :optionalLabel="Math.round(percentage) + '%'"
     >

From 5fc32028002efab8e5834ff661e4abece9506bd5 Mon Sep 17 00:00:00 2001
From: Steffan <steffanhalv@gmail.com>
Date: Tue, 19 Sep 2023 13:01:02 +0200
Subject: [PATCH 4/9] Add full customization

---
 .../components/BccProgress/BccProgress.css    |  2 +-
 .../BccProgress/BccProgress.stories.ts        | 55 ++++++++++++++++++-
 .../components/BccProgress/BccProgress.vue    | 44 +++++++++------
 3 files changed, 82 insertions(+), 19 deletions(-)

diff --git a/design-library/src/components/BccProgress/BccProgress.css b/design-library/src/components/BccProgress/BccProgress.css
index afa81089..32cf1bba 100644
--- a/design-library/src/components/BccProgress/BccProgress.css
+++ b/design-library/src/components/BccProgress/BccProgress.css
@@ -9,7 +9,7 @@
     }
 
     /* Color */
-    .bcc-progress-line {
+    .bcc-progress-bar {
         @apply rounded bg-silver-tree-600;
     }
 
diff --git a/design-library/src/components/BccProgress/BccProgress.stories.ts b/design-library/src/components/BccProgress/BccProgress.stories.ts
index f4531d85..bdf22cef 100644
--- a/design-library/src/components/BccProgress/BccProgress.stories.ts
+++ b/design-library/src/components/BccProgress/BccProgress.stories.ts
@@ -6,7 +6,7 @@ import type { Meta, StoryFn } from "@storybook/vue3";
  * A `progress` element supporting current and max values
  */
 export default {
-  title: "Forms/BccProgress",
+  title: "Components/BccProgress",
   component: BccProgress,
   argTypes: {
     value: {
@@ -30,6 +30,18 @@ export default {
     showPercentage: {
       description: "Display percentage",
     },
+    progressClass: {
+      description: "Override height, background color and other classes.",
+      control: false,
+    },
+    barClass: {
+      description: "Override background color and other classes.",
+      control: false,
+    },
+    labelClass: {
+      description: "Override label classes.",
+      control: false,
+    },
   },
 } as Meta<typeof BccProgress>;
 
@@ -48,12 +60,15 @@ const Template: StoryFn<typeof BccProgress> = (args) => ({
  */
 export const Example = Template.bind({});
 Example.args = {
-  value: 30145.5,
+  value: 300145.5,
   max: 200000,
   size: "base",
   exceed: true,
   showValues: true,
   showPercentage: true,
+  progressClass: "",
+  barClass: "",
+  labelClass: "",
 };
 Example.parameters = {
   docs: {
@@ -67,6 +82,9 @@ Example.parameters = {
   showValues="true"
   showPercentage="true"
   exceed="true"
+  progressClass=""
+  barClass=""
+  labelClass=""
 />
 `,
     },
@@ -127,3 +145,36 @@ export const ShowValuesAndOrPercentage: StoryFn<typeof BccProgress> = () => ({
     </div>
   `,
 });
+
+/**
+ * Set `progressClass`, `barClass` and `labelClass` to fully customize the progress bar
+ */
+export const FullCustomization: StoryFn<typeof BccProgress> = () => ({
+  components: { BccProgress },
+  template: `
+    <div class="flex flex-col space-y-4">
+      <BccProgress
+        size="lg"
+        :value="8"
+        :max="10"
+        class="w-full bg-slate-800 rounded p-2"
+        labelClass="text-white"
+        progressClass="h-4 bg-teal-400 rounded-2xl"
+        barClass="bg-purple-500 rounded-2xl"
+      />
+      <BccProgress
+        class="w-full"
+        :value="8"
+        :max="10"
+        :progressClass="{ 'h-0.5': true, 'bg-slate-300': true }"
+        :barClass="'bg-slate-500'"
+      />
+      <BccProgress
+        class="w-full"
+        :value="8"
+        :max="10"
+        progressClass="h-5"
+      />
+    </div>
+  `,
+});
diff --git a/design-library/src/components/BccProgress/BccProgress.vue b/design-library/src/components/BccProgress/BccProgress.vue
index bd912ab4..1c1fbce8 100644
--- a/design-library/src/components/BccProgress/BccProgress.vue
+++ b/design-library/src/components/BccProgress/BccProgress.vue
@@ -1,17 +1,14 @@
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-};
-</script>
-
 <script setup lang="ts">
-import { computed, type StyleValue } from "vue";
+import { computed } from "vue";
 import BccFormLabel from "@/components/BccFormLabel/BccFormLabel.vue";
 
 type Props = {
   value?: number;
   max?: number;
   size?: "sm" | "base" | "lg";
+  progressClass?: string | object;
+  barClass?: string | object;
+  labelClass?: string | object;
   showValues?: boolean;
   showPercentage?: boolean;
   exceed?: boolean;
@@ -36,26 +33,41 @@ const percentageSafe = computed(() => {
   return percentage.value;
 });
 
-const height = computed(() => {
+const progressClass = computed(() => {
+  if (props.progressClass) return props.progressClass;
   return {
+    "bcc-progress": true,
     "h-1": props.size === "sm",
     "h-1.5": props.size === "base",
     "h-2": props.size === "lg",
   };
 });
+
+const barClass = computed(() => {
+  if (props.barClass) return props.barClass;
+  if (
+    typeof progressClass.value === "object" &&
+    Object.keys(progressClass.value).includes("bcc-progress")
+  ) {
+    const clone: any = { ...progressClass.value };
+    delete clone["bcc-progress"];
+    return {
+      ...clone,
+      "bcc-progress-bar": true,
+    };
+  }
+  return progressClass.value;
+});
 </script>
 
 <template>
-  <div
-    class="bcc-progress-container"
-    :class="$attrs['class']"
-    :style="$attrs['style'] as StyleValue"
-  >
+  <div class="bcc-progress-container">
     <BccFormLabel
       v-if="showPercentage || showValues"
       :size="size !== 'sm' ? size : 'base'"
       :showOptionalLabel="showPercentage"
       :optionalLabel="Math.round(percentage) + '%'"
+      :class="labelClass"
     >
       <span v-if="showValues">
         {{ props.value.toLocaleString() }} /
@@ -63,10 +75,10 @@ const height = computed(() => {
       </span>
     </BccFormLabel>
 
-    <div class="bcc-progress" :class="{ ...height }">
+    <div class="bcc-progress" :class="progressClass">
       <div
-        class="bcc-progress-line"
-        :class="{ ...height }"
+        class="bcc-progress-bar h-full"
+        :class="barClass"
         :style="{ width: percentageSafe + '%' }"
       />
     </div>

From bd134b5914a3dd0492d465da4d85c14b1eb760ac Mon Sep 17 00:00:00 2001
From: Steffan <steffanhalv@gmail.com>
Date: Tue, 19 Sep 2023 13:43:25 +0200
Subject: [PATCH 5/9] Simplify progress bar

---
 .../components/BccProgress/BccProgress.css    | 38 ++++++++-
 .../BccProgress/BccProgress.spec.ts           |  6 +-
 .../BccProgress/BccProgress.stories.ts        | 80 ++++---------------
 .../components/BccProgress/BccProgress.vue    | 48 ++---------
 .../__snapshots__/BccProgress.spec.ts.snap    | 42 +++++-----
 5 files changed, 84 insertions(+), 130 deletions(-)

diff --git a/design-library/src/components/BccProgress/BccProgress.css b/design-library/src/components/BccProgress/BccProgress.css
index 32cf1bba..372d6e74 100644
--- a/design-library/src/components/BccProgress/BccProgress.css
+++ b/design-library/src/components/BccProgress/BccProgress.css
@@ -10,11 +10,47 @@
 
     /* Color */
     .bcc-progress-bar {
-        @apply rounded bg-silver-tree-600;
+        @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 {
+        @apply h-1.5;
+    }
+
+    .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;
+    }
+
 }
diff --git a/design-library/src/components/BccProgress/BccProgress.spec.ts b/design-library/src/components/BccProgress/BccProgress.spec.ts
index cb389ecb..76b2ade3 100644
--- a/design-library/src/components/BccProgress/BccProgress.spec.ts
+++ b/design-library/src/components/BccProgress/BccProgress.spec.ts
@@ -11,7 +11,7 @@ describe("BccProgress", () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it("should exceed 100%", () => {
+  it("should overflow 100%", () => {
     const wrapper = mount(BccProgress, {
       props: { value: 110, max: 100 },
     });
@@ -20,9 +20,9 @@ describe("BccProgress", () => {
     expect(wrapper.html()).toMatchSnapshot();
   });
 
-  it("should not exceed 110%", () => {
+  it("should not overflow 110%", () => {
     const wrapper = mount(BccProgress, {
-      props: { value: 110, max: 100, exceed: false },
+      props: { value: 110, max: 100, overflow: false },
     });
 
     expect(wrapper.text()).toContain("100%");
diff --git a/design-library/src/components/BccProgress/BccProgress.stories.ts b/design-library/src/components/BccProgress/BccProgress.stories.ts
index bdf22cef..ac1392fa 100644
--- a/design-library/src/components/BccProgress/BccProgress.stories.ts
+++ b/design-library/src/components/BccProgress/BccProgress.stories.ts
@@ -14,14 +14,14 @@ export default {
       control: { type: "number" },
     },
     size: {
-      options: ["sm", "base", "lg"],
+      options: ["base", "lg"],
       control: { type: "radio" },
     },
     max: {
       description: "Max Value",
       control: { type: "number" },
     },
-    exceed: {
+    overflow: {
       description: "Let or let not percentage exceed 100%",
     },
     showValues: {
@@ -30,18 +30,6 @@ export default {
     showPercentage: {
       description: "Display percentage",
     },
-    progressClass: {
-      description: "Override height, background color and other classes.",
-      control: false,
-    },
-    barClass: {
-      description: "Override background color and other classes.",
-      control: false,
-    },
-    labelClass: {
-      description: "Override label classes.",
-      control: false,
-    },
   },
 } as Meta<typeof BccProgress>;
 
@@ -56,19 +44,16 @@ const Template: StoryFn<typeof BccProgress> = (args) => ({
 });
 
 /**
- * Use `value` to control the progress of the progress bar. Pass max value to declare when it reaches 100% and set exceed to false if it should not exceed 100%.
+ * 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: 300145.5,
+  value: 30145.5,
   max: 200000,
   size: "base",
-  exceed: true,
+  overflow: true,
   showValues: true,
   showPercentage: true,
-  progressClass: "",
-  barClass: "",
-  labelClass: "",
 };
 Example.parameters = {
   docs: {
@@ -78,13 +63,9 @@ Example.parameters = {
 <BccProgress
   value="30145.50"
   max="200000"
-  size="base"
   showValues="true"
   showPercentage="true"
-  exceed="true"
-  progressClass=""
-  barClass=""
-  labelClass=""
+  overflow="true"
 />
 `,
     },
@@ -98,9 +79,13 @@ export const Size: StoryFn<typeof BccProgress> = () => ({
   components: { BccProgress },
   template: `
     <div class="flex flex-col space-y-4">
-      <BccProgress class="w-1/4" size="sm" :value="30"/>
-      <BccProgress class="w-1/4" size="base" :value="75"/>
-      <BccProgress class="w-1/4" size="lg" :value="22"/>      
+      <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>
   `,
 });
@@ -119,14 +104,14 @@ export const Max: StoryFn<typeof BccProgress> = () => ({
 });
 
 /**
- * Do or do not let percentage `exceed` 100%
+ * Do or do not let percentage `overflow` 100%
  */
-export const Exceed: StoryFn<typeof BccProgress> = () => ({
+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" :exceed="false"/>
+      <BccProgress class="w-1/4" :value="1050" :max="100" :overflow="false"/>
     </div>
   `,
 });
@@ -145,36 +130,3 @@ export const ShowValuesAndOrPercentage: StoryFn<typeof BccProgress> = () => ({
     </div>
   `,
 });
-
-/**
- * Set `progressClass`, `barClass` and `labelClass` to fully customize the progress bar
- */
-export const FullCustomization: StoryFn<typeof BccProgress> = () => ({
-  components: { BccProgress },
-  template: `
-    <div class="flex flex-col space-y-4">
-      <BccProgress
-        size="lg"
-        :value="8"
-        :max="10"
-        class="w-full bg-slate-800 rounded p-2"
-        labelClass="text-white"
-        progressClass="h-4 bg-teal-400 rounded-2xl"
-        barClass="bg-purple-500 rounded-2xl"
-      />
-      <BccProgress
-        class="w-full"
-        :value="8"
-        :max="10"
-        :progressClass="{ 'h-0.5': true, 'bg-slate-300': true }"
-        :barClass="'bg-slate-500'"
-      />
-      <BccProgress
-        class="w-full"
-        :value="8"
-        :max="10"
-        progressClass="h-5"
-      />
-    </div>
-  `,
-});
diff --git a/design-library/src/components/BccProgress/BccProgress.vue b/design-library/src/components/BccProgress/BccProgress.vue
index 1c1fbce8..1ca4672d 100644
--- a/design-library/src/components/BccProgress/BccProgress.vue
+++ b/design-library/src/components/BccProgress/BccProgress.vue
@@ -5,13 +5,10 @@ import BccFormLabel from "@/components/BccFormLabel/BccFormLabel.vue";
 type Props = {
   value?: number;
   max?: number;
-  size?: "sm" | "base" | "lg";
-  progressClass?: string | object;
-  barClass?: string | object;
-  labelClass?: string | object;
+  size?: "base" | "lg";
   showValues?: boolean;
   showPercentage?: boolean;
-  exceed?: boolean;
+  overflow?: boolean;
 };
 
 const props = withDefaults(defineProps<Props>(), {
@@ -20,11 +17,11 @@ const props = withDefaults(defineProps<Props>(), {
   size: "base",
   showValues: true,
   showPercentage: true,
-  exceed: true,
+  overflow: true,
 });
 
 const percentage = computed(() => {
-  if (props.value > props.max && !props.exceed) return 100;
+  if (props.value > props.max && !props.overflow) return 100;
   return (props.value / props.max) * 100;
 });
 
@@ -32,42 +29,15 @@ const percentageSafe = computed(() => {
   if (props.value > props.max) return 100;
   return percentage.value;
 });
-
-const progressClass = computed(() => {
-  if (props.progressClass) return props.progressClass;
-  return {
-    "bcc-progress": true,
-    "h-1": props.size === "sm",
-    "h-1.5": props.size === "base",
-    "h-2": props.size === "lg",
-  };
-});
-
-const barClass = computed(() => {
-  if (props.barClass) return props.barClass;
-  if (
-    typeof progressClass.value === "object" &&
-    Object.keys(progressClass.value).includes("bcc-progress")
-  ) {
-    const clone: any = { ...progressClass.value };
-    delete clone["bcc-progress"];
-    return {
-      ...clone,
-      "bcc-progress-bar": true,
-    };
-  }
-  return progressClass.value;
-});
 </script>
 
 <template>
   <div class="bcc-progress-container">
     <BccFormLabel
       v-if="showPercentage || showValues"
-      :size="size !== 'sm' ? size : 'base'"
+      :size="size"
       :showOptionalLabel="showPercentage"
       :optionalLabel="Math.round(percentage) + '%'"
-      :class="labelClass"
     >
       <span v-if="showValues">
         {{ props.value.toLocaleString() }} /
@@ -75,12 +45,8 @@ const barClass = computed(() => {
       </span>
     </BccFormLabel>
 
-    <div class="bcc-progress" :class="progressClass">
-      <div
-        class="bcc-progress-bar h-full"
-        :class="barClass"
-        :style="{ width: percentageSafe + '%' }"
-      />
+    <div class="bcc-progress">
+      <div class="bcc-progress-bar" :style="{ width: percentageSafe + '%' }" />
     </div>
   </div>
 </template>
diff --git a/design-library/src/components/BccProgress/__snapshots__/BccProgress.spec.ts.snap b/design-library/src/components/BccProgress/__snapshots__/BccProgress.spec.ts.snap
index 6d0eaeca..83a67f41 100644
--- a/design-library/src/components/BccProgress/__snapshots__/BccProgress.spec.ts.snap
+++ b/design-library/src/components/BccProgress/__snapshots__/BccProgress.spec.ts.snap
@@ -2,24 +2,16 @@
 
 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 h-1.5\\">
-    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 0%;\\"></div>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 0%;\\"></div>
   </div>
 </div>"
 `;
 
-exports[`BccProgress > should exceed 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 h-1.5\\">
-    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 100%;\\"></div>
-  </div>
-</div>"
-`;
-
-exports[`BccProgress > should not exceed 110% 1`] = `
+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 h-1.5\\">
-    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 100%;\\"></div>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 100%;\\"></div>
   </div>
 </div>"
 `;
@@ -28,32 +20,40 @@ 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 h-1.5\\">
-    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 100%;\\"></div>
+  <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 h-1.5\\">
-    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 100%;\\"></div>
+  <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 h-1.5\\">
-    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 100%;\\"></div>
+  <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 h-1.5\\">
-    <div class=\\"bcc-progress-line h-1.5\\" style=\\"width: 100%;\\"></div>
+  <div class=\\"bcc-progress\\">
+    <div class=\\"bcc-progress-bar\\" style=\\"width: 100%;\\"></div>
   </div>
 </div>"
 `;

From 61de06221cb5d37b8f4fdb7d977e448954b8831e Mon Sep 17 00:00:00 2001
From: Steffan <steffanhalv@gmail.com>
Date: Tue, 19 Sep 2023 13:45:36 +0200
Subject: [PATCH 6/9] Simplified css

---
 design-library/src/components/BccProgress/BccProgress.css | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/design-library/src/components/BccProgress/BccProgress.css b/design-library/src/components/BccProgress/BccProgress.css
index 372d6e74..4b5cf58b 100644
--- a/design-library/src/components/BccProgress/BccProgress.css
+++ b/design-library/src/components/BccProgress/BccProgress.css
@@ -5,7 +5,7 @@
     }
 
     .bcc-progress {
-        @apply rounded w-full bg-neutral-200;
+        @apply rounded w-full bg-neutral-200 h-1.5;
     }
 
     /* Color */
@@ -21,10 +21,6 @@
         @apply text-label-base;
     }
 
-    .bcc-progress {
-        @apply h-1.5;
-    }
-
     .bcc-progress-sm .bcc-progress {
         @apply h-0.5;
     }

From 98e3c63cb7963df5bd5fa6fac0c7bc4c6e13a513 Mon Sep 17 00:00:00 2001
From: Steffan <steffanhalv@gmail.com>
Date: Tue, 19 Sep 2023 13:46:00 +0200
Subject: [PATCH 7/9] Removed whitespace

---
 design-library/src/components/BccProgress/BccProgress.css | 3 ---
 1 file changed, 3 deletions(-)

diff --git a/design-library/src/components/BccProgress/BccProgress.css b/design-library/src/components/BccProgress/BccProgress.css
index 4b5cf58b..ccd64d1d 100644
--- a/design-library/src/components/BccProgress/BccProgress.css
+++ b/design-library/src/components/BccProgress/BccProgress.css
@@ -13,10 +13,7 @@
         @apply rounded bg-silver-tree-600 h-full;
     }
 
-   
-
     /* Size */
-    
     .bcc-progress-container .bcc-form-label-lg .bcc-form-label-optional {
         @apply text-label-base;
     }

From 7a175bab52db37d9346cc919b29566489e6f7e12 Mon Sep 17 00:00:00 2001
From: Steffan <steffanhalv@gmail.com>
Date: Tue, 19 Sep 2023 13:46:32 +0200
Subject: [PATCH 8/9] Removed comment header

---
 design-library/src/components/BccProgress/BccProgress.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/design-library/src/components/BccProgress/BccProgress.css b/design-library/src/components/BccProgress/BccProgress.css
index ccd64d1d..73ebdaab 100644
--- a/design-library/src/components/BccProgress/BccProgress.css
+++ b/design-library/src/components/BccProgress/BccProgress.css
@@ -8,7 +8,6 @@
         @apply rounded w-full bg-neutral-200 h-1.5;
     }
 
-    /* Color */
     .bcc-progress-bar {
         @apply rounded bg-silver-tree-600 h-full;
     }

From 08a6ec7fcb5259e9c0701559449a3e12d3849079 Mon Sep 17 00:00:00 2001
From: Steffan <steffanhalv@gmail.com>
Date: Mon, 9 Oct 2023 21:28:37 +0200
Subject: [PATCH 9/9] Correct sizes

---
 design-library/src/components/BccProgress/BccProgress.css | 8 ++++++--
 .../src/components/BccProgress/BccProgress.stories.ts     | 5 +++--
 2 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/design-library/src/components/BccProgress/BccProgress.css b/design-library/src/components/BccProgress/BccProgress.css
index 73ebdaab..e364f97c 100644
--- a/design-library/src/components/BccProgress/BccProgress.css
+++ b/design-library/src/components/BccProgress/BccProgress.css
@@ -17,14 +17,18 @@
         @apply text-label-base;
     }
 
-    .bcc-progress-sm .bcc-progress {
+    .bcc-progress-xs .bcc-progress {
         @apply h-0.5;
     }
 
-    .bcc-progress-md .bcc-progress {
+    .bcc-progress-sm .bcc-progress {
         @apply h-1;
     }
 
+    .bcc-progress-base .bcc-progress {
+        @apply h-1.5;
+    }
+
     .bcc-progress-lg .bcc-progress {
         @apply h-2;
     }
diff --git a/design-library/src/components/BccProgress/BccProgress.stories.ts b/design-library/src/components/BccProgress/BccProgress.stories.ts
index ac1392fa..d6d5aec6 100644
--- a/design-library/src/components/BccProgress/BccProgress.stories.ts
+++ b/design-library/src/components/BccProgress/BccProgress.stories.ts
@@ -79,9 +79,10 @@ 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 bcc-progress-xs" :value="30"/>
+      <BccProgress class="w-1/4 bcc-progress-sm" :value="22"/>
       <BccProgress class="w-1/4" :value="75"/>
+      <BccProgress class="w-1/4" bcc-progress-base :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"/>