From 772fcb1dfb3b18e7a507cadccd3c865f5cdc0fd1 Mon Sep 17 00:00:00 2001
From: Laurens Groeneveld <laurens.groeneveld@bcc.no>
Date: Mon, 6 Mar 2023 17:07:28 +0100
Subject: [PATCH] Add capacity indicator component (#19)

+ Don't automatically open browser for Storybook
+ Update icons package
---
 docs/contributing/README.md                   |  5 +-
 package-lock.json                             | 16 ++--
 package.json                                  |  6 +-
 scripts/templates/create-vue-file.sh          |  2 +-
 .../CapacityIndicator.spec.ts                 | 17 +++++
 .../CapacityIndicator.stories.ts              | 41 ++++++++++
 .../CapacityIndicator/CapacityIndicator.vue   | 74 +++++++++++++++++++
 src/index.ts                                  |  1 +
 8 files changed, 149 insertions(+), 13 deletions(-)
 create mode 100644 src/components/CapacityIndicator/CapacityIndicator.spec.ts
 create mode 100644 src/components/CapacityIndicator/CapacityIndicator.stories.ts
 create mode 100644 src/components/CapacityIndicator/CapacityIndicator.vue

diff --git a/docs/contributing/README.md b/docs/contributing/README.md
index e30fcccc..294e5e0a 100644
--- a/docs/contributing/README.md
+++ b/docs/contributing/README.md
@@ -23,6 +23,9 @@ Figma designs are generally based on [Flowbite](https://flowbite.com/docs/gettin
 ### Follow Figma naming for props
 Props should be (if possible) be named like they are named in Figma. Usually designers will create a component in Figma that has properties as well. By keeping these as close as possible it's easier to compare different variants between design and code.
 
+### Don't abbreviate props
+Props should have a clear name that indicates what it is for, without the need to look up documentation. Abbreviations make this harder, especially for non-native speakers. Instead of trying to save on keystrokes (and modern editors will probably autocomplete props anyways), we'll save on potential user frustration.
+
 ### Don't include all attributes as props
 When building a wrapper around a native HTML element such as `input`, don't include all the attributes of this element as props on the component. Vue will automatically [pass them through](https://vuejs.org/guide/components/attrs.html). If the element is not the top level element in your component (for example because it is wrapped in a `span`), bind the Vue `$attrs` property to the appropriate element.
 
@@ -47,4 +50,4 @@ From the [Vue documentation](https://vuejs.org/guide/components/attrs.html#disab
 ### Don't use `<style>` in an SFC
 Commonly, a Vue Single File Component (SFC) includes a `script`, `template`, and `style` tag. The use of a `style` tag should be avoided, for two reasons:
 1. Adding classes this way will generate a CSS file in the output. We don't want consumers of this Vue component library having to include a separate CSS file
-2. Since we're using Tailwind, it's not needed to write any CSS. By ruling out the possiblity of using custom classes, even when they're `scoped`, it's clear where CSS styling comes from: Tailwind
+2. Since we're using Tailwind, it's not needed to write any CSS. By ruling out the possibility of using custom classes, even when they're `scoped`, it's clear where CSS styling comes from: Tailwind
diff --git a/package-lock.json b/package-lock.json
index a90a97a6..c7860fdf 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,8 @@
       "license": "Apache-2.0",
       "devDependencies": {
         "@babel/core": "^7.20.12",
-        "@bcc-code/design-system-tokens": "dev",
-        "@bcc-code/icons-vue": "^0.1.1",
+        "@bcc-code/design-system-tokens": "^0.0.0-dev.5ffe680",
+        "@bcc-code/icons-vue": "^0.2.0",
         "@rushstack/eslint-patch": "^1.1.4",
         "@storybook/addon-actions": "^6.5.16",
         "@storybook/addon-essentials": "^6.5.16",
@@ -2101,18 +2101,18 @@
       }
     },
     "node_modules/@bcc-code/design-system-tokens": {
-      "version": "0.0.0-dev.d7a4274",
-      "resolved": "https://registry.npmjs.org/@bcc-code/design-system-tokens/-/design-system-tokens-0.0.0-dev.d7a4274.tgz",
-      "integrity": "sha512-DapbgJv3HPspSgzZZu/7crqXegFqP105oQEdn5V6W3ladfmx6c5yNhZ+p8vCFmLbiA9cW2x+KDWWWOs1sn2oCQ==",
+      "version": "0.0.0-dev.5ffe680",
+      "resolved": "https://registry.npmjs.org/@bcc-code/design-system-tokens/-/design-system-tokens-0.0.0-dev.5ffe680.tgz",
+      "integrity": "sha512-o0nFLxaRfA34IGretK1MgPX+rc8A1JlslWniYsnYBaZ2DtLbBqGHkTH3VhiXy6NZEcWskMP7ekp285ZtmPO8AQ==",
       "dev": true,
       "peerDependencies": {
         "tailwindcss": "^3.2.4"
       }
     },
     "node_modules/@bcc-code/icons-vue": {
-      "version": "0.1.1",
-      "resolved": "https://registry.npmjs.org/@bcc-code/icons-vue/-/icons-vue-0.1.1.tgz",
-      "integrity": "sha512-18ULJtvtsAEGoYKsT48Qjz3cuO9+lZHCVrBTBQc+j9iY7mLn6p/5F9Eq19YNtxr2g8eaT6yKr86TebSmPOiK1A==",
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@bcc-code/icons-vue/-/icons-vue-0.2.0.tgz",
+      "integrity": "sha512-nDMMcT1nwxX9NAVeeYDdMtvl3kgUOsQyD3fr+67tsf1/ZzMZxGbhDezSVORCkRMErv+YdKZUB6JwY2gZPo7PfQ==",
       "dev": true,
       "peerDependencies": {
         "vue": ">= 3"
diff --git a/package.json b/package.json
index 5f2bf357..8d1d88c4 100644
--- a/package.json
+++ b/package.json
@@ -25,7 +25,7 @@
     "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
     "build-types": "vue-tsc --declaration --emitDeclarationOnly -p tsconfig.compile.json",
     "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 --no-open",
     "build-storybook": "build-storybook",
     "create-component": "./scripts/create-component.sh"
   },
@@ -35,8 +35,8 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@bcc-code/design-system-tokens": "dev",
-    "@bcc-code/icons-vue": "^0.1.1",
+    "@bcc-code/design-system-tokens": "^0.0.0-dev.5ffe680",
+    "@bcc-code/icons-vue": "^0.2.0",
     "@rushstack/eslint-patch": "^1.1.4",
     "@storybook/addon-actions": "^6.5.16",
     "@storybook/addon-essentials": "^6.5.16",
diff --git a/scripts/templates/create-vue-file.sh b/scripts/templates/create-vue-file.sh
index 25d9679c..86ce5f53 100644
--- a/scripts/templates/create-vue-file.sh
+++ b/scripts/templates/create-vue-file.sh
@@ -1,4 +1,4 @@
-echo "<script setup lang="ts">
+echo "<script setup lang=\"ts\">
 type Props = {
 
 };
diff --git a/src/components/CapacityIndicator/CapacityIndicator.spec.ts b/src/components/CapacityIndicator/CapacityIndicator.spec.ts
new file mode 100644
index 00000000..591ef770
--- /dev/null
+++ b/src/components/CapacityIndicator/CapacityIndicator.spec.ts
@@ -0,0 +1,17 @@
+import { describe, it, expect } from "vitest";
+import { AllInclusiveIcon } from "@bcc-code/icons-vue";
+
+import { mount } from "@vue/test-utils";
+import CapacityIndicator from "./CapacityIndicator.vue";
+
+describe("CapacityIndicator", () => {
+  it("shows the remaining capacity", () => {
+    const wrapper = mount(CapacityIndicator, { props: { capacity: 20, used: 14 } });
+    expect(wrapper.text()).toBe("6");
+  });
+
+  it("shows an icon if the capacity is infinite", () => {
+    const wrapper = mount(CapacityIndicator, { props: { capacity: Infinity, used: 14 } });
+    expect(wrapper.findComponent(AllInclusiveIcon).isVisible()).toBe(true);
+  });
+});
diff --git a/src/components/CapacityIndicator/CapacityIndicator.stories.ts b/src/components/CapacityIndicator/CapacityIndicator.stories.ts
new file mode 100644
index 00000000..7ea5bde3
--- /dev/null
+++ b/src/components/CapacityIndicator/CapacityIndicator.stories.ts
@@ -0,0 +1,41 @@
+import CapacityIndicator from "./CapacityIndicator.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+  title: "Components/CapacityIndicator",
+  component: CapacityIndicator,
+  argTypes: {},
+} as Meta<typeof CapacityIndicator>;
+
+const Template: StoryFn<typeof CapacityIndicator> = (args) => ({
+  components: { CapacityIndicator },
+  setup() {
+    return { args };
+  },
+  template: `
+    <CapacityIndicator v-bind="args" />
+  `,
+});
+
+export const Example = Template.bind({});
+Example.parameters = {
+  viewMode: "docs",
+};
+Example.args = {
+  capacity: 20,
+  used: 14,
+};
+
+export const State: StoryFn<typeof CapacityIndicator> = () => ({
+  components: { CapacityIndicator },
+  template: `
+    <div class="flex items-center space-x-4">
+      <CapacityIndicator :capacity="200" :used="1" />
+      <CapacityIndicator :capacity="20" :used="6" />
+      <CapacityIndicator :capacity="20" :used="18" />
+      <CapacityIndicator :capacity="20" :used="20" />
+      <CapacityIndicator :capacity="Infinity" />
+    </div>
+  `,
+});
diff --git a/src/components/CapacityIndicator/CapacityIndicator.vue b/src/components/CapacityIndicator/CapacityIndicator.vue
new file mode 100644
index 00000000..9d5b7841
--- /dev/null
+++ b/src/components/CapacityIndicator/CapacityIndicator.vue
@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { AllInclusiveIcon } from "@bcc-code/icons-vue";
+import { ref } from "vue";
+
+type Props = {
+  capacity?: number;
+  used?: number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  capacity: Infinity,
+  used: 0,
+});
+
+const size = 40;
+const progress = ref(props.capacity === Infinity ? 100 : (props.used / props.capacity) * 100);
+const trackWidth = 2;
+
+const center = size / 2;
+const radius = center - trackWidth;
+const dashArray = 2 * Math.PI * radius;
+const dashOffset = dashArray * ((100 - progress.value) / 100);
+</script>
+
+<template>
+  <div class="relative inline-block">
+    <div class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">
+      <span v-if="capacity === Infinity">
+        <AllInclusiveIcon class="h-4 w-4 text-neutral-900" />
+      </span>
+      <span
+        v-else
+        class="text-sm font-bold"
+        :class="{
+          'text-neutral-900': progress < 50,
+          'text-muddy-waters-600': progress >= 50 && progress < 100,
+          'text-red-900': progress >= 100,
+        }"
+      >
+        {{ capacity - used }}
+      </span>
+    </div>
+
+    <svg class="-rotate-90" :style="{ width: size, height: size }">
+      <circle
+        :cx="center"
+        :cy="center"
+        :r="radius"
+        :stroke-width="trackWidth"
+        fill="transparent"
+        :class="{
+          'stroke-neutral-200': capacity === Infinity,
+          'stroke-neutral-300': capacity !== Infinity && progress < 50,
+          'stroke-muddy-waters-100': capacity !== Infinity && progress >= 50,
+        }"
+      />
+      <circle
+        v-if="capacity !== Infinity"
+        :cx="center"
+        :cy="center"
+        :r="radius"
+        :stroke-width="trackWidth"
+        :stroke-dasharray="dashArray"
+        :stroke-dashoffset="dashOffset"
+        fill="transparent"
+        :class="{
+          'stroke-neutral-500': progress < 50,
+          'stroke-muddy-waters-500': progress >= 50 && progress < 100,
+          'stroke-red-900': progress >= 100,
+        }"
+      />
+    </svg>
+  </div>
+</template>
diff --git a/src/index.ts b/src/index.ts
index e26901d4..b40b5608 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,3 +1,4 @@
 export { default as BccButton } from "./components/BccButton/BccButton.vue";
 export { default as BccInput } from "./components/BccInput/BccInput.vue";
 export { default as Badge } from "./components/Badge/Badge.vue";
+export { default as CapacityIndicator } from "./components/CapacityIndicator/CapacityIndicator.vue";