Merge pull request #83 from PrestaShopCorp/feat/button-group

build(components): creation of a puik-group-button component, wip

packages/components/button-group/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '@puik/utils'
+
+import ButtonGroup from './src/button-group.vue'
+
+export const PuikButtonGroup = withInstall(ButtonGroup)
+export default PuikButtonGroup
+
+export * from './src/button-group'

packages/components/button-group/src/button-group.ts

@@ -0,0 +1,26 @@
+import { buildProps } from '@puik/utils'
+import type { ExtractPropTypes, InjectionKey, Ref } from 'vue'
+import type ButtonGroup from './button-group.vue'
+import type { ButtonProps } from '@puik/components'
+
+export type ButtonGroupType = ButtonProps & {
+  label: string
+}
+
+export const buttonGroupProps = buildProps({
+  modelValue: {
+    type: [String, Number, Object, Array],
+    required: false,
+    default: undefined,
+  },
+} as const)
+
+export type ButtonGroupProps = ExtractPropTypes<typeof buttonGroupProps>
+
+export type ButtonGroupInstance = InstanceType<typeof ButtonGroup>
+
+export type ButtonGroupContext = {
+  selected: Ref<string | number | Record<string, any>>
+}
+export const ButtonGroupKey: InjectionKey<ButtonGroupContext> =
+  Symbol('ButtonGroup')

packages/components/button-group/src/button-group.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="puik-button-group">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { provide } from 'vue'
+import { useVModel } from '@vueuse/core'
+import { buttonGroupProps, ButtonGroupKey } from './button-group'
+
+defineOptions({
+  name: 'PuikButtonGroup',
+})
+
+const props = defineProps(buttonGroupProps)
+const selected = useVModel(props, 'modelValue')
+
+provide(ButtonGroupKey, { selected })
+</script>

packages/components/button-group/stories/button-group.stories.ts

@@ -0,0 +1,65 @@
+import { ref } from 'vue'
+import PuikButtonGroup from './../src/button-group.vue'
+import PuikButton from './../../button/src/button.vue'
+import type { Meta, Story, Args } from '@storybook/vue3'
+
+export default {
+  title: 'Components/ButtonGroup',
+  component: PuikButtonGroup,
+  argTypes: {
+    selected: {
+      description: 'Selected button',
+      control: 'text',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    default: {
+      control: 'none',
+      description: 'Use puik buttons in the puik button group',
+    },
+  },
+  args: {
+    selected: 'btn1',
+  },
+} as Meta
+
+const Template: Story = (args: Args) => ({
+  components: {
+    PuikButtonGroup,
+    PuikButton,
+  },
+  setup() {
+    const selectedValue = ref('btn1')
+
+    return {
+      selectedValue,
+      args,
+    }
+  },
+  template: `
+    <puik-button-group v-model="selectedValue">
+      <puik-button :variant="(selectedValue === 'btn1') ? 'primary' : 'tertiary'" value="btn1">Button 1</puik-button>
+      <puik-button :variant="(selectedValue === 'btn2') ? 'primary' : 'tertiary'" value="btn2">Button 2</puik-button>
+      <puik-button :variant="(selectedValue === 'btn3') ? 'primary' : 'tertiary'" value="btn3">Button 3</puik-button>
+    </puik-button-group>
+    
+    `,
+})
+
+export const Default = Template.bind({})
+Default.args = {}
+Default.parameters = {
+  docs: {
+    source: {
+      code: `
+      <!--VueJS Snippet-->
+      
+      <!--HTML/CSS Snippet-->
+      `,
+      language: 'html',
+    },
+  },
+}

packages/components/button-group/style/css.ts

@@ -0,0 +1,2 @@
+import '@puik/components/base/style/css'
+import '@puik/theme/puik-button-group.css'

packages/components/button-group/style/index.ts

@@ -0,0 +1,2 @@
+import '@puik/components/base/style'
+import '@puik/theme/src/button-group.scss'

packages/components/button-group/test/button-group.spec.ts

@@ -0,0 +1,24 @@
+import { mount } from '@vue/test-utils'
+import { describe, it, expect } from 'vitest'
+import PuikButtonGroup from '../src/button-group.vue'
+import type { MountingOptions, VueWrapper } from '@vue/test-utils'
+
+describe('ButtonGroup tests', () => {
+  let wrapper: VueWrapper<any>
+
+  const factory = (
+    propsData: Record<string, any> = {},
+    options: MountingOptions<any> = {}
+  ) => {
+    wrapper = mount(PuikButtonGroup, {
+      props: {
+        ...propsData,
+      },
+      ...options,
+    })
+  }
+  it('should be a vue instance', () => {
+    factory()
+    expect(wrapper).toBeTruthy()
+  })
+})

packages/components/button/src/button.ts

@@ -58,7 +58,12 @@ export const buttonProps = buildProps({
     required: false,
     default: undefined,
   },
-} as const)
+  value: {
+    type: [String, Number, Object, Array],
+    required: false,
+    default: undefined,
+  },
+})
 
 export type ButtonProps = ExtractPropTypes<typeof buttonProps>
 

packages/components/button/src/button.vue

@@ -10,6 +10,7 @@
       { 'puik-button--fluid': fluid },
     ]"
     :disabled="disabled"
+    @click="setSelected"
   >
     <puik-icon
       v-if="leftIcon"
@@ -28,14 +29,16 @@
 </template>
 
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, inject } from 'vue'
 import { PuikIcon } from '@puik/components/icon'
+import { ButtonGroupKey } from '../../button-group'
 import { buttonProps } from './button'
 defineOptions({
   name: 'PuikButton',
 })
 
 const props = defineProps(buttonProps)
+const buttonGroup = inject(ButtonGroupKey)
 
 const componentType = computed(() => {
   if (props.to) {
@@ -49,4 +52,10 @@ const componentType = computed(() => {
 const pathProp = computed(() =>
   props.to ? { to: props.to } : { href: props.href }
 )
+
+const setSelected = () => {
+  if (buttonGroup && props.value) {
+    buttonGroup.selected.value = props.value
+  }
+}
 </script>

packages/components/index.ts

@@ -12,3 +12,4 @@ export * from './card'
 export * from './select'
 export * from './icon'
 export * from './progress-bar'
+export * from './button-group'

packages/puik/component.ts

@@ -1,3 +1,4 @@
+import { PuikButtonGroup } from '@puik/components/button-group'
 import { PuikProgressBar } from '@puik/components/progress-bar'
 import { PuikIcon } from '@puik/components/icon'
 import { PuikLink } from '@puik/components/link'
@@ -16,6 +17,7 @@ import type { Plugin } from 'vue'
 
 // prettier-ignore
 export default [
+  PuikButtonGroup,
   PuikProgressBar,
   PuikIcon,
   PuikLink,

packages/theme/src/button-group.scss

@@ -0,0 +1,22 @@
+.puik-button-group {
+  .puik-button {
+    &--primary {
+      @apply border border-primary-purple-500;
+    }
+    &--tertiary {
+      @apply border border-light-blue-default-border;
+    }
+    .puik-button__left-icon {
+      @apply mr-0;
+    }
+    &:first-of-type {
+      @apply rounded-l;
+    }
+    &:last-of-type {
+      @apply rounded-r;
+    }
+    & {
+      @apply rounded-none;
+    }
+  }
+}

packages/theme/src/index.scss

@@ -13,3 +13,4 @@
 @use 'icon';
 @use 'option';
 @use 'progress-bar';
+@use 'button-group';

typings/global.d.ts

@@ -1,6 +1,7 @@
 // GlobalComponents for Volar
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
+    PuikButtonGroup: typeof import('@prestashopcorp/puik')['PuikButtonGroup']
     PuikProgressBar: typeof import('@prestashopcorp/puik')['PuikProgressBar']
     PuikIcon: typeof import('@prestashopcorp/puik')['PuikIcon']
     PuikOption: typeof import('@prestashopcorp/puik')['PuikOption']