Add button and button group components

src/App.vue

@@ -1,6 +1,7 @@
 <script setup>
 import HelloWorld from './components/HelloWorld.vue'
 import TheWelcome from './components/TheWelcome.vue'
+import ButtonItem from './components/Atoms/ButtonItem/ButtonItem.vue'
 import RuleIconTag from './components/Mollecules/RuleIconTag/RuleIconTag.vue'
 </script>
 
@@ -11,6 +12,7 @@ import RuleIconTag from './components/Mollecules/RuleIconTag/RuleIconTag.vue'
     <div class="wrapper">
       <HelloWorld msg="You did it!" />
       <rule-icon-tag label="network" />
+      <button-item type="primary">mon bouton</button-item>
     </div>
   </header>
 

src/components/Atoms/ButtonItem/ButtonItem.spec.js

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

src/components/Atoms/ButtonItem/ButtonItem.stories.js

@@ -0,0 +1,22 @@
+import ButtonItem from './ButtonItem.vue'
+
+export default {
+  title: 'Atoms/Button',
+  component: ButtonItem,
+  tags: ['autodocs'],
+  argTypes: {
+    default: { control: 'text', default: 'click me' },
+    type: {
+      control: { type: 'inline-radio' },
+      options: ['standard', 'primary'],
+      default: 'standard'
+    }
+  }
+}
+
+export const StandardButton = {
+  args: { default: 'click me', type: 'standard' }
+}
+export const PrimaryButton = {
+  args: { default: 'click me', type: 'primary' }
+}

src/components/Atoms/ButtonItem/ButtonItem.vue

@@ -0,0 +1,39 @@
+<script setup>
+defineEmits(['click'])
+
+defineProps({
+  type: {
+    type: String,
+    dafault: 'standard',
+    validator(value) {
+      return ['standard', 'primary'].includes(value)
+    }
+  }
+})
+</script>
+
+<template>
+  <button @click="onClick" :class="`${type === 'primary' ? 'btn-app-blue' : 'btn-app'}`">
+    <slot />
+  </button>
+</template>
+
+<style scoped>
+.btn-app {
+  color: #444;
+  background-color: white;
+  border: 2px solid #444;
+  padding: 8px 18px;
+  border-radius: 100px;
+  cursor: pointer;
+}
+
+.btn-app-blue {
+  color: white;
+  background-color: #4aa9d5;
+  border: 2px solid #4aa9d5;
+  padding: 8px 18px;
+  border-radius: 100px;
+  cursor: pointer;
+}
+</style>

src/components/Mollecules/BoutonGroup/ButtonGroup.stories.js

@@ -0,0 +1,22 @@
+import ButtonGroup from './ButtonGroup.vue'
+
+export default {
+  title: 'Mollecules/Button Group',
+  component: ButtonGroup,
+  tags: ['autodocs'],
+  argTypes: {
+    buttons: {
+      control: { type: 'object' }
+    }
+  }
+}
+
+export const StandardButtonGroup = {
+  args: {
+    buttons: [
+      { label: 'submit', type: 'primary' },
+      { label: 'reset' },
+      { label: 'cancel', type: 'standard' }
+    ]
+  }
+}

src/components/Mollecules/BoutonGroup/ButtonGroup.vue

@@ -0,0 +1,34 @@
+<script setup>
+import ButtonItem from '../../Atoms/ButtonItem/ButtonItem.vue'
+
+defineProps({
+  buttons: {
+    type: Array,
+    required: true,
+    validator(value) {
+      return value.lenght && value.every((item) => Object.hasOwn(item, 'label'))
+    }
+  }
+})
+</script>
+
+<template>
+  <fieldset class="btn-group">
+    <template v-for="button in buttons" :key="button.label">
+      <button-item :type="`${button.type ?? 'standard'}`">{{ button.label }}</button-item>
+    </template>
+  </fieldset>
+</template>
+
+<style scoped>
+.btn-group {
+  margin-top: 24px;
+  font-weight: 500;
+}
+.btn-group .btn-app-blue {
+  margin-left: 24px;
+}
+.btn-group .btn-app-blue:first-child {
+  margin-left: 0;
+}
+</style>