Merge pull request #21 from green-code-initiative/18-add-rule-tag-ico…

…ns-rule-tags-and-impact-tag

feat: add Rule Tag Icons, Rule Tags, and Impact Tag

src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
+import RuleIconTag from './components/Mollecules/RuleIconTag/RuleIconTag.vue'
 </script>
 
 <template>
@@ -9,6 +10,7 @@ import TheWelcome from './components/TheWelcome.vue'
 
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
+      <rule-icon-tag label="network" />
     </div>
   </header>
 

src/components/Atoms/Icons/IconBug.stories.js

@@ -0,0 +1,12 @@
+import IconBug from './IconBug.vue'
+
+export default {
+  title: 'Atoms/Icons/Bug',
+  component: IconBug,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'number' }, default: 48 }
+  }
+}
+
+export const IconBugDefaultSize = {}

src/components/Atoms/Icons/IconBug.vue

@@ -0,0 +1,34 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 48,
+  }
+})
+</script>
+<template>
+  <svg
+    class="little-spacer-right"
+    :height="`${size}px`"
+    :width="`${size}px`"
+    version="1.1"
+    viewBox="0 0 16 16"
+    xmlns:xlink="http://www.w3.org/1999/xlink"
+    xml:space="preserve"
+    style="
+      fill-rule: evenodd;
+      clip-rule: evenodd;
+      stroke-linejoin: round;
+      stroke-miterlimit: 1.41421;
+    "
+  >
+    <path
+      d="M10.09,1.88A2.86,2.86,0,0,0,8,1a2.87,2.87,0,0,0-2.11.87A2.93,2.93,0,0,0,5,4h6A2.93,2.93,0,0,0,10.09,1.88Z"
+      style="fill: rgb(68, 68, 68)"
+    ></path>
+    <path
+      d="M14.54,9H13V5.6L14.3,4.42a.5.5,0,0,0,0-.71.49.49,0,0,0-.7,0L12.17,5H3.82L2.34,3.66a.5.5,0,0,0-.67.74L2.94,5.55V9H1.46a.5.5,0,0,0,0,1H3a5.2,5.2,0,0,0,1.05,2.32l-2,1.81a.5.5,0,1,0,.67.74l2-1.82A4.62,4.62,0,0,0,7,14.1V8A1,1,0,0,1,8,7a.94.94,0,0,1,1,.9v6.17A4.55,4.55,0,0,0,11.18,13l2,1.83a.51.51,0,0,0,.33.13.48.48,0,0,0,.37-.17.49.49,0,0,0,0-.7l-2-1.8a5.34,5.34,0,0,0,1-2.29h1.64a.5.5,0,0,0,0-1Z"
+      style="fill: currentcolor"
+    ></path>
+  </svg>
+</template>

src/components/Atoms/Icons/IconCpu.stories.js

@@ -0,0 +1,12 @@
+import IconCpu from './IconCpu.vue'
+
+export default {
+  title: 'Atoms/Icons/CPU',
+  component: IconCpu,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'number' }, default: 48 }
+  }
+}
+
+export const IconCpuDefaultSize = {}

src/components/Atoms/Icons/IconCpu.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 48,
+  }
+})
+</script>
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#444444"
+    :width="`${size}px`"
+    :height="`${size}px`"
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M15 9H9v6h6V9zm-2 4h-2v-2h2v2zm8-2V9h-2V7c0-1.1-.9-2-2-2h-2V3h-2v2h-2V3H9v2H7c-1.1 0-2 .9-2 2v2H3v2h2v2H3v2h2v2c0 1.1.9 2 2 2h2v2h2v-2h2v2h2v-2h2c1.1 0 2-.9 2-2v-2h2v-2h-2v-2h2zm-4 6H7V7h10v10z"
+    />
+  </svg>
+</template>

src/components/Atoms/Icons/IconDisk.stories.js

@@ -0,0 +1,12 @@
+import IconDisk from './IconDisk.vue'
+
+export default {
+  title: 'Atoms/Icons/Disk',
+  component: IconDisk,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'number' }, default: 48 }
+  }
+}
+
+export const IconDiskDefaultSize = {}

src/components/Atoms/Icons/IconDisk.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 48
+  }
+})
+</script>
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#444"
+    :width="`${size}px`"
+    :height="`${size}px`"
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M2 20h20v-4H2v4zm2-3h2v2H4v-2zM2 4v4h20V4H2zm4 3H4V5h2v2zm-4 7h20v-4H2v4zm2-3h2v2H4v-2z"
+    />
+  </svg>
+</template>

src/components/Atoms/Icons/IconMaintenance.stories.js

@@ -0,0 +1,12 @@
+import IconMaintenance from './IconMaintenance.vue'
+
+export default {
+  title: 'Atoms/Icons/Maintenance',
+  component: IconMaintenance,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'number' }, default: 48 }
+  }
+}
+
+export const IconMaintenanceDefaultSize = {}

src/components/Atoms/Icons/IconMaintenance.vue

@@ -0,0 +1,27 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 48,
+  }
+})
+</script>
+<template>
+  <svg
+    :height="`${size}px`"
+    :width="`${size}px`"
+    aria-hidden="true"
+    focusable="false"
+    data-prefix="fas"
+    data-icon="tools"
+    class="svg-inline--fa fa-tools fa-w-16"
+    role="img"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="-100 -100 700 700"
+  >
+    <path
+      fill="#444444"
+      d="M501.1 395.7L384 278.6c-23.1-23.1-57.6-27.6-85.4-13.9L192 158.1V96L64 0 0 64l96 128h62.1l106.6 106.6c-13.6 27.8-9.2 62.3 13.9 85.4l117.1 117.1c14.6 14.6 38.2 14.6 52.7 0l52.7-52.7c14.5-14.6 14.5-38.2 0-52.7zM331.7 225c28.3 0 54.9 11 74.9 31l19.4 19.4c15.8-6.9 30.8-16.5 43.8-29.5 37.1-37.1 49.7-89.3 37.9-136.7-2.2-9-13.5-12.1-20.1-5.5l-74.4 74.4-67.9-11.3L334 98.9l74.4-74.4c6.6-6.6 3.4-17.9-5.7-20.2-47.4-11.7-99.6.9-136.6 37.9-28.5 28.5-41.9 66.1-41.2 103.6l82.1 82.1c8.1-1.9 16.5-2.9 24.7-2.9zm-103.9 82l-56.7-56.7L18.7 402.8c-25 25-25 65.5 0 90.5s65.5 25 90.5 0l123.6-123.6c-7.6-19.9-9.9-41.6-5-62.7zM64 472c-13.2 0-24-10.8-24-24 0-13.3 10.7-24 24-24s24 10.7 24 24c0 13.2-10.7 24-24 24z"
+    ></path>
+  </svg>
+</template>

src/components/Atoms/Icons/IconNetwork.stories.js

@@ -0,0 +1,12 @@
+import IconNetwork from './IconNetwork.vue'
+
+export default {
+  title: 'Atoms/Icons/Network',
+  component: IconNetwork,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'number' }, default: 48 }
+  }
+}
+
+export const IconNetworkDefaultSize = {}

src/components/Atoms/Icons/IconNetwork.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 48,
+  }
+})
+</script>
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#444"
+    :height="`${size}px`"
+    :width="`${size}px`"
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M1 9l2 2c4.97-4.97 13.03-4.97 18 0l2-2C16.93 2.93 7.08 2.93 1 9zm8 8l3 3 3-3c-1.65-1.66-4.34-1.66-6 0zm-4-4l2 2c2.76-2.76 7.24-2.76 10 0l2-2C15.14 9.14 8.87 9.14 5 13z"
+    />
+  </svg>
+</template>

src/components/Atoms/Icons/IconRam.stories.js

@@ -0,0 +1,12 @@
+import IconRam from './IconRam.vue'
+
+export default {
+  title: 'Atoms/Icons/RAM',
+  component: IconRam,
+  tags: ['autodocs'],
+  argTypes: {
+    size: { control: { type: 'number' }, default: 48 }
+  }
+}
+
+export const IconRamDefaultSize = {}

src/components/Atoms/Icons/IconRam.vue

@@ -0,0 +1,22 @@
+<script setup>
+defineProps({
+  size: {
+    type: Number,
+    default: 48,
+  }
+})
+</script>
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="#444"
+    :height="`${size}px`"
+    :width="`${size}px`"
+  >
+    <path d="M0 0h24v24H0z" fill="none" />
+    <path
+      d="M20 13H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-6c0-.55-.45-1-1-1zM7 19c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zM20 3H4c-.55 0-1 .45-1 1v6c0 .55.45 1 1 1h16c.55 0 1-.45 1-1V4c0-.55-.45-1-1-1zM7 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z"
+    />
+  </svg>
+</template>

src/components/Atoms/ImpactTag/ImpactTag.spec.js

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+
+import { mount } from '@vue/test-utils'
+import HelloWorld from '../HelloWorld.vue'
+
+describe('HelloWorld', () => {
+  it('renders properly', () => {
+    const wrapper = mount(HelloWorld, { props: { msg: 'Hello Vitest' } })
+    expect(wrapper.text()).toContain('Hello Vitest')
+  })
+})

src/components/Atoms/ImpactTag/ImpactTag.stories.js

@@ -0,0 +1,36 @@
+import ImpactTag from './ImpactTag.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+export default {
+  title: 'Atoms/Impact Tag',
+  component: ImpactTag,
+  tags: ['autodocs'],
+  argTypes: {
+    impact: { control: { type: 'select' }, options: ['Optimized', 'Info', 'Low', 'Medium', 'High', 'Blocker'] }
+  }
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const OptimizedImpact = {
+  args: { impact: 'Optimized' }
+}
+
+export const InfoImpact = {
+  args: { impact: 'Info' }
+}
+
+export const LowImpact = {
+  args: { impact: 'Low' }
+}
+
+export const MediumImpact = {
+  args: { impact: 'Medium' }
+}
+
+export const HighImpact = {
+  args: { impact: 'High' }
+}
+
+export const BlockerImpact = {
+  args: { impact: 'Blocker' }
+}

src/components/Atoms/ImpactTag/ImpactTag.vue

@@ -0,0 +1,54 @@
+<script setup>
+defineProps({
+  impact: {
+    type: String,
+    required: true,
+    validator(value) {
+      return ['Optimized', 'Info', 'Low', 'Medium', 'High', 'Blocker'].includes(value)
+    }
+  }
+})
+</script>
+
+<template>
+  <div class="tag">
+    <div :class="['impact', impact.toLowerCase()]" />
+    <p>{{ impact }} impact</p>
+  </div>
+</template>
+
+<style scoped>
+.tag {
+  display: flex;
+  align-items: center;
+  padding-top: 15px;
+}
+.tag p {
+  padding: 0 15px 0 5px;
+  margin: 0;
+}
+.impact {
+  height: 17px;
+  width: 17px;
+  border-radius: 50%;
+  background-color: var(--bg-color);
+}
+.impact.optimized {
+  --bg-color: #85bb2f;
+}
+.impact.low {
+  --bg-color: #fecb02;
+}
+.impact.medium {
+  --bg-color: #ff8e12;
+}
+.impact.high {
+  --bg-color: #e30021;
+}
+.impact.blocker {
+  --bg-color: #e30021;
+}
+.impact.info {
+  --bg-color: #4aa9d5;
+}
+</style>

src/components/Mollecules/MostImpactingIssue/MostImpactingIssue.story.js

@@ -0,0 +1,42 @@
+import MostImpactingIssue from './MostImpactingIssue.vue'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+export default {
+  title: 'Mollecules/Most Impacting Issue',
+  component: MostImpactingIssue,
+  tags: ['autodocs'],
+  argTypes: {
+    value: { control: { type: 'select' }, options: ['A', 'B', 'C', 'D', 'E'] }
+  }
+}
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const A = {
+  args: {
+    value: 'A'
+  }
+}
+
+export const B = {
+  args: {
+    value: 'B'
+  }
+}
+
+export const C = {
+  args: {
+    value: 'C'
+  }
+}
+
+export const D = {
+  args: {
+    value: 'D'
+  }
+}
+
+export const E = {
+  args: {
+    value: 'E '
+  }
+}