Created BccSpinner

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

@@ -0,0 +1,5 @@
+@layer components {
+  .bcc-spinner {
+    @apply animate-spin;
+  }
+}

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

@@ -0,0 +1,16 @@
+import { describe, it, expect } from "vitest";
+
+import { mount } from "@vue/test-utils";
+import BccSpinner from "./BccSpinner.vue";
+
+describe("BccSpinner", () => {
+  it("Matches the snaphot", () => {
+    const wrapper = mount(BccSpinner, {});
+    expect(wrapper.html()).toMatchSnapshot();
+  });
+
+  it("contains SVG element", () => {
+    const wrapper = mount(BccSpinner);
+    expect(wrapper.html()).toContain("<svg");
+  });
+});

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

@@ -0,0 +1,22 @@
+import BccSpinner from "./BccSpinner.vue";
+
+import type { Meta, StoryFn } from "@storybook/vue3";
+
+export default {
+  title: "Components/BccSpinner",
+  component: BccSpinner,
+  argTypes: {},
+} as Meta<typeof BccSpinner>;
+
+const Template: StoryFn<typeof BccSpinner> = (args) => ({
+  components: { BccSpinner },
+  setup() {
+    return { args };
+  },
+  template: `
+    <BccSpinner v-bind="args" />
+  `,
+});
+
+export const Example = Template.bind({});
+Example.args = {};

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

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+type Props = {};
+
+withDefaults(defineProps<Props>(), {});
+</script>
+<template>
+  <svg
+    class="bcc-spinner"
+    xmlns="http://www.w3.org/2000/svg"
+    width="100"
+    height="100"
+    viewBox="0 0 100 100"
+    fill="none"
+  >
+    >
+    <path
+      d="M100 50C100 77.6142 77.6142 100 50 100C22.3858 100 0 77.6142 0 50C0 22.3858 22.3858 0 50 0C77.6142 0 100 22.3858 100 50ZM9.08144 50C9.08144 72.5987 27.4013 90.9186 50 90.9186C72.5987 90.9186 90.9186 72.5987 90.9186 50C90.9186 27.4013 72.5987 9.08144 50 9.08144C27.4013 9.08144 9.08144 27.4013 9.08144 50Z"
+      fill="#F6F9F9"
+    ></path>
+    <path
+      d="M93.9676 38.4501C96.393 37.813 97.8624 35.3208 97.0079 32.9631C95.2932 28.2319 92.871 23.7784 89.8167 19.7572C85.8452 14.5284 80.8826 10.133 75.2124 6.82206C69.5422 3.51112 63.2754 1.34943 56.7698 0.460415C51.7666 -0.223279 46.6976 -0.143977 41.7345 0.687907C39.2613 1.10246 37.813 3.60696 38.4501 6.03244C39.0873 8.45792 41.5694 9.8809 44.0505 9.51628C47.8511 8.95773 51.7191 8.93607 55.5402 9.45823C60.8642 10.1858 65.9928 11.9548 70.6331 14.6644C75.2735 17.374 79.3347 20.971 82.5849 25.2501C84.9175 28.3212 86.7997 31.7005 88.1811 35.285C89.083 37.625 91.5421 39.0873 93.9676 38.4501Z"
+      fill="#30715E"
+    />
+  </svg>
+</template>

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

@@ -0,0 +1,7 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BccSpinner > Matches the snaphot 1`] = `
+"<svg class=\\"bcc-spinner\\" xmlns=\\"http://www.w3.org/2000/svg\\" width=\\"100\\" height=\\"100\\" viewBox=\\"0 0 100 100\\" fill=\\"none\\"> &gt; <path d=\\"M100 50C100 77.6142 77.6142 100 50 100C22.3858 100 0 77.6142 0 50C0 22.3858 22.3858 0 50 0C77.6142 0 100 22.3858 100 50ZM9.08144 50C9.08144 72.5987 27.4013 90.9186 50 90.9186C72.5987 90.9186 90.9186 72.5987 90.9186 50C90.9186 27.4013 72.5987 9.08144 50 9.08144C27.4013 9.08144 9.08144 27.4013 9.08144 50Z\\" fill=\\"#F6F9F9\\"></path>
+  <path d=\\"M93.9676 38.4501C96.393 37.813 97.8624 35.3208 97.0079 32.9631C95.2932 28.2319 92.871 23.7784 89.8167 19.7572C85.8452 14.5284 80.8826 10.133 75.2124 6.82206C69.5422 3.51112 63.2754 1.34943 56.7698 0.460415C51.7666 -0.223279 46.6976 -0.143977 41.7345 0.687907C39.2613 1.10246 37.813 3.60696 38.4501 6.03244C39.0873 8.45792 41.5694 9.8809 44.0505 9.51628C47.8511 8.95773 51.7191 8.93607 55.5402 9.45823C60.8642 10.1858 65.9928 11.9548 70.6331 14.6644C75.2735 17.374 79.3347 20.971 82.5849 25.2501C84.9175 28.3212 86.7997 31.7005 88.1811 35.285C89.083 37.625 91.5421 39.0873 93.9676 38.4501Z\\" fill=\\"#30715E\\"></path>
+</svg>"
+`;

design-library/src/css/index.css

@@ -22,3 +22,4 @@
 @import "../components/BccTable/BccTable.css";
 @import "../components/BccTabs/BccTabs.css";
 @import "../components/BccBanner/BccBanner.css";
+@import "../components/BccSpinner/BccSpinner.css";

design-library/src/index.ts

@@ -29,3 +29,4 @@ export { default as BccTable } from "./components/BccTable/BccTable.vue";
 export { default as BccTabs } from "./components/BccTabs/BccTabs.vue";
 export { default as BccToggle } from "./components/BccToggle/BccToggle.vue";
 export { default as BccBanner } from "./components/BccBanner/BccBanner.vue";
+export { default as BccSpinner } from "./components/BccSpinner/BccSpinner.vue";