@designcrowd/fe-shared-lib 1.1.7 → 1.1.8

package/src/atoms/components/ButtonGroup/ButtonGroup.stories.js

@@ -1,562 +1,574 @@
-import ButtonGroup from './ButtonGroup.vue';
-import Icon from '../Icon/Icon.vue';
-
-export default {
-  title: 'Components/ButtonGroup',
-  component: ButtonGroup,
-};
-
-export const Sample = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          label: 'Small',
-          value: 'small',
-          isSelected: true,
-        },
-        {
-          label: 'Medium',
-          value: 'medium',
-        },
-        {
-          label: 'Large',
-          value: 'large',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3">
-        <ButtonGroup :options="options" @on-select="onButtonOptionSelected" />
-      </div>
-    `,
-  };
-};
-
-Sample.story = {
-  name: 'Sample (3 buttons)',
-};
-
-export const SampleTwoButtons = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          label: 'Option 1',
-          value: 'option1',
-          isSelected: true,
-        },
-        {
-          label: 'Option 2',
-          value: 'option2',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3">
-        <ButtonGroup :options="options" @on-select="onButtonOptionSelected" />
-      </div>
-    `,
-  };
-};
-
-SampleTwoButtons.story = {
-  name: 'Sample (2 buttons)',
-};
-
-export const SampleIconsAlignment = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          value: 'left',
-          iconName: 'maker-align-left',
-          isSelected: true,
-        },
-        {
-          value: 'center',
-          iconName: 'maker-align-center',
-        },
-        {
-          value: 'right',
-          iconName: 'maker-align-right',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3">
-        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
-      </div>
-    `,
-  };
-};
-
-SampleIconsAlignment.story = {
-  name: 'Sample (icons - alignment)',
-};
-
-export const SampleIconsTextStyle = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          value: 'bold',
-          iconName: 'maker-bold',
-          isSelected: true,
-        },
-        {
-          value: 'italic',
-          iconName: 'maker-italic',
-        },
-        {
-          value: 'underline',
-          iconName: 'maker-underline',
-        },
-        {
-          value: 'strikethrough',
-          iconName: 'maker-strikethrough',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3">
-        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
-      </div>
-    `,
-  };
-};
-
-SampleIconsTextStyle.story = {
-  name: 'Sample (icons - text style)',
-};
-
-export const SampleIconsCarouselStyle = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          value: 'grid',
-          iconName: 'image-gallery-grid',
-          isSelected: true,
-          title: 'Grid',
-          iconViewBox: '0 0 94 24',
-        },
-        {
-          value: 'carousel',
-          iconName: 'image-gallery-carousel',
-          title: 'Carousel',
-          iconViewBox: '0 0 94 24',
-        },
-        {
-          value: 'masonry',
-          iconName: 'image-gallery-masonry',
-          title: 'Masonry',
-          iconViewBox: '0 0 94 24',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
-        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
-      </div>
-    `,
-  };
-};
-
-SampleIconsCarouselStyle.story = {
-  name: 'Sample (icons - carousel style)',
-};
-
-export const SampleIconsDisplayStyle = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          value: 'none',
-          iconName: 'icon-style-no-bg',
-          isSelected: true,
-          title: 'None',
-          iconViewBox: '0 0 94 24',
-        },
-        {
-          value: 'square',
-          iconName: 'icon-style-square-bg',
-          title: 'Square',
-          iconViewBox: '0 0 94 24',
-        },
-        {
-          value: 'circle',
-          iconName: 'icon-style-circle-bg',
-          title: 'Circle',
-          iconViewBox: '0 0 94 24',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
-        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
-      </div>
-    `,
-  };
-};
-
-SampleIconsDisplayStyle.story = {
-  name: 'Sample (icons - display style)',
-};
-
-export const SampleIconsBanner = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          value: 'centered',
-          iconName: 'banner-centered',
-          title: 'Centered',
-          iconViewBox: '0 0 94 24',
-          dataAttribute: 'data-test-centered',
-        },
-        {
-          value: 'left',
-          iconName: 'banner-left',
-          title: 'Left aligned',
-          iconViewBox: '0 0 94 24',
-          dataAttribute: 'data-test-left',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
-        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
-      </div>
-    `,
-  };
-};
-
-SampleIconsBanner.story = {
-  name: 'Sample (banner)',
-};
-
-export const SampleIconsTextImage = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          value: 'left',
-          iconName: 'text-image-left',
-          isSelected: true,
-          title: 'Left aligned',
-          iconViewBox: '0 0 94 24',
-        },
-        {
-          value: 'right',
-          iconName: 'text-image-right',
-          title: 'Right aligned',
-          iconViewBox: '0 0 94 24',
-        },
-        {
-          value: 'centered',
-          iconName: 'text-image-center',
-          title: 'Centered',
-          iconViewBox: '0 0 94 24',
-        },
-        {
-          value: 'image-only',
-          iconName: 'text-image-only',
-          title: 'Image Only',
-          iconViewBox: '0 0 94 24',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
-        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" :columns="2" />
-      </div>
-    `,
-  };
-};
-
-SampleIconsTextImage.story = {
-  name: 'Sample (text image)',
-};
-
-export const SampleHeaderAlign = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          value: 'left-aligned',
-          iconName: 'header-left',
-          title: 'Left Aligned',
-          iconViewBox: '0 0 94 24',
-        },
-        {
-          value: 'centered',
-          iconName: 'header-centered',
-          title: 'Centered',
-          iconViewBox: '0 0 94 24',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
-        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
-      </div>
-    `,
-  };
-};
-
-SampleHeaderAlign.story = {
-  name: 'Sample (header align)',
-};
-
-export const SampleImages = () => {
-  return {
-    components: {
-      ButtonGroup,
-    },
-    data: () => ({
-      options: [
-        {
-          src: 'https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a-a1.svg',
-          alt: 'qrcode style a-a1',
-          value: 'line_a_a1',
-          title: 'a-a1',
-          isSelected: true,
-        },
-        {
-          src: 'https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a-b1.svg',
-          alt: 'qrcode style a-b1',
-          value: 'dot_a_b1',
-          title: 'a-b1',
-        },
-        {
-          src: 'https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a2.svg',
-          alt: 'qrcode style a2',
-          value: 'dot_a2',
-          title: 'a2',
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3">
-        <ButtonGroup variant="image" :options="options" @on-select="onButtonOptionSelected" :columns="3"/>
-      </div>
-    `,
-  };
-};
-
-SampleImages.story = {
-  name: 'Sample (3 images)',
-};
-
-export const SampleCustom = () => {
-  return {
-    components: {
-      ButtonGroup,
-      Icon,
-    },
-    data: () => ({
-      options: [
-        {
-          value: 'url',
-          iconName: 'globe',
-          label: 'URL',
-          iconSize: 'md',
-          isSelected: true,
-        },
-        {
-          value: 'email',
-          iconName: 'maker-email',
-          label: 'Email',
-          iconSize: 'md',
-          isSelected: false,
-        },
-        {
-          value: 'phone',
-          iconName: 'phone',
-          label: 'Phone',
-          iconSize: 'md',
-          isSelected: false,
-        },
-        {
-          value: 'sms',
-          iconName: 'sms',
-          label: 'SMS',
-          iconSize: 'md',
-          isSelected: false,
-        },
-        {
-          value: 'vCard',
-          iconName: 'business-card-filled',
-          label: 'VCard',
-          iconSize: 'md',
-          isSelected: false,
-        },
-        {
-          value: 'calendar',
-          iconName: 'calendar',
-          label: 'Event',
-          iconSize: 'md',
-          isSelected: false,
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
-        <ButtonGroup variant="custom" :options="options" @on-select="onButtonOptionSelected" :columns="3">
-          <template #content="{ option }">
-          <div class="tw-text-secondary-500">
-            <Icon :name="option.iconName" :size="option.iconSize" />
-            <p
-              v-if="option.label"
-              class="tw-w-full tw-text-center tw-font-bold tw-font-sans tw-text-sm tw-mb-0 tw-mt-1"
-            >
-              {{ option.label }}
-            </p>
-          </div>
-        </template>
-        </ButtonGroup>
-      </div>
-    `,
-  };
-};
-
-SampleCustom.story = {
-  name: 'Sample Custom',
-};
-export const SampleColumn = () => {
-  return {
-    components: {
-      ButtonGroup,
-      Icon,
-    },
-    data: () => ({
-      options: [
-        {
-          value: 'url',
-          iconName: 'column-1',
-          label: '1',
-          iconSize: 'md',
-          isSelected: true,
-        },
-        {
-          value: 'email',
-          iconName: 'column-2',
-          label: '2',
-          iconSize: 'md',
-          isSelected: false,
-        },
-        {
-          value: 'phone',
-          iconName: 'column-3',
-          label: '3',
-          iconSize: 'md',
-          isSelected: false,
-        },
-        {
-          value: 'sms',
-          iconName: 'column-4',
-          label: '4',
-          iconSize: 'md',
-          isSelected: false,
-        },
-      ],
-    }),
-    methods: {
-      onButtonOptionSelected(option) {
-        console.log('Button Option Selected', option);
-      },
-    },
-    template: `
-    <div class="tw-w-full">
-      <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
-    </div>
-    `,
-  };
-};
-
-SampleColumn.story = {
-  name: 'Sample Column',
-};
+import ButtonGroup from './ButtonGroup.vue';
+import Icon from '../Icon/Icon.vue';
+
+export default {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+};
+
+export const Sample = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          label: 'Small',
+          value: 'small',
+          isSelected: true,
+        },
+        {
+          label: 'Medium',
+          value: 'medium',
+        },
+        {
+          label: 'Large',
+          value: 'large',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3">
+        <ButtonGroup :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `,
+  };
+};
+
+Sample.story = {
+  name: 'Sample (3 buttons)',
+};
+
+export const SampleTwoButtons = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          label: 'Option 1',
+          value: 'option1',
+          isSelected: true,
+        },
+        {
+          label: 'Option 2',
+          value: 'option2',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3">
+        <ButtonGroup :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `,
+  };
+};
+
+SampleTwoButtons.story = {
+  name: 'Sample (2 buttons)',
+};
+
+export const SampleIconsAlignment = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          value: 'left',
+          iconName: 'maker-align-left',
+          isSelected: true,
+        },
+        {
+          value: 'center',
+          iconName: 'maker-align-center',
+        },
+        {
+          value: 'right',
+          iconName: 'maker-align-right',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `,
+  };
+};
+
+SampleIconsAlignment.story = {
+  name: 'Sample (icons - alignment)',
+};
+
+export const SampleIconsTextStyle = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          value: 'bold',
+          iconName: 'maker-bold',
+          isSelected: true,
+        },
+        {
+          value: 'italic',
+          iconName: 'maker-italic',
+        },
+        {
+          value: 'underline',
+          iconName: 'maker-underline',
+        },
+        {
+          value: 'strikethrough',
+          iconName: 'maker-strikethrough',
+        },
+        {
+          value: 'spacing',
+          iconName: 'maker-spacing',
+        },
+        {
+          value: 'text color',
+          iconName: 'maker-text-color',
+        },
+        {
+          value: 'text background color',
+          iconName: 'maker-text-background-color',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `,
+  };
+};
+
+SampleIconsTextStyle.story = {
+  name: 'Sample (icons - text style)',
+};
+
+export const SampleIconsCarouselStyle = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          value: 'grid',
+          iconName: 'image-gallery-grid',
+          isSelected: true,
+          title: 'Grid',
+          iconViewBox: '0 0 94 24',
+        },
+        {
+          value: 'carousel',
+          iconName: 'image-gallery-carousel',
+          title: 'Carousel',
+          iconViewBox: '0 0 94 24',
+        },
+        {
+          value: 'masonry',
+          iconName: 'image-gallery-masonry',
+          title: 'Masonry',
+          iconViewBox: '0 0 94 24',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `,
+  };
+};
+
+SampleIconsCarouselStyle.story = {
+  name: 'Sample (icons - carousel style)',
+};
+
+export const SampleIconsDisplayStyle = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          value: 'none',
+          iconName: 'icon-style-no-bg',
+          isSelected: true,
+          title: 'None',
+          iconViewBox: '0 0 94 24',
+        },
+        {
+          value: 'square',
+          iconName: 'icon-style-square-bg',
+          title: 'Square',
+          iconViewBox: '0 0 94 24',
+        },
+        {
+          value: 'circle',
+          iconName: 'icon-style-circle-bg',
+          title: 'Circle',
+          iconViewBox: '0 0 94 24',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `,
+  };
+};
+
+SampleIconsDisplayStyle.story = {
+  name: 'Sample (icons - display style)',
+};
+
+export const SampleIconsBanner = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          value: 'centered',
+          iconName: 'banner-centered',
+          title: 'Centered',
+          iconViewBox: '0 0 94 24',
+          dataAttribute: 'data-test-centered',
+        },
+        {
+          value: 'left',
+          iconName: 'banner-left',
+          title: 'Left aligned',
+          iconViewBox: '0 0 94 24',
+          dataAttribute: 'data-test-left',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `,
+  };
+};
+
+SampleIconsBanner.story = {
+  name: 'Sample (banner)',
+};
+
+export const SampleIconsTextImage = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          value: 'left',
+          iconName: 'text-image-left',
+          isSelected: true,
+          title: 'Left aligned',
+          iconViewBox: '0 0 94 24',
+        },
+        {
+          value: 'right',
+          iconName: 'text-image-right',
+          title: 'Right aligned',
+          iconViewBox: '0 0 94 24',
+        },
+        {
+          value: 'centered',
+          iconName: 'text-image-center',
+          title: 'Centered',
+          iconViewBox: '0 0 94 24',
+        },
+        {
+          value: 'image-only',
+          iconName: 'text-image-only',
+          title: 'Image Only',
+          iconViewBox: '0 0 94 24',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" :columns="2" />
+      </div>
+    `,
+  };
+};
+
+SampleIconsTextImage.story = {
+  name: 'Sample (text image)',
+};
+
+export const SampleHeaderAlign = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          value: 'left-aligned',
+          iconName: 'header-left',
+          title: 'Left Aligned',
+          iconViewBox: '0 0 94 24',
+        },
+        {
+          value: 'centered',
+          iconName: 'header-centered',
+          title: 'Centered',
+          iconViewBox: '0 0 94 24',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+      </div>
+    `,
+  };
+};
+
+SampleHeaderAlign.story = {
+  name: 'Sample (header align)',
+};
+
+export const SampleImages = () => {
+  return {
+    components: {
+      ButtonGroup,
+    },
+    data: () => ({
+      options: [
+        {
+          src: 'https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a-a1.svg',
+          alt: 'qrcode style a-a1',
+          value: 'line_a_a1',
+          title: 'a-a1',
+          isSelected: true,
+        },
+        {
+          src: 'https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a-b1.svg',
+          alt: 'qrcode style a-b1',
+          value: 'dot_a_b1',
+          title: 'a-b1',
+        },
+        {
+          src: 'https://bcassetcdn.com/assets/images/icons/qr-code/qrcode-style-a2.svg',
+          alt: 'qrcode style a2',
+          value: 'dot_a2',
+          title: 'a2',
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3">
+        <ButtonGroup variant="image" :options="options" @on-select="onButtonOptionSelected" :columns="3"/>
+      </div>
+    `,
+  };
+};
+
+SampleImages.story = {
+  name: 'Sample (3 images)',
+};
+
+export const SampleCustom = () => {
+  return {
+    components: {
+      ButtonGroup,
+      Icon,
+    },
+    data: () => ({
+      options: [
+        {
+          value: 'url',
+          iconName: 'globe',
+          label: 'URL',
+          iconSize: 'md',
+          isSelected: true,
+        },
+        {
+          value: 'email',
+          iconName: 'maker-email',
+          label: 'Email',
+          iconSize: 'md',
+          isSelected: false,
+        },
+        {
+          value: 'phone',
+          iconName: 'phone',
+          label: 'Phone',
+          iconSize: 'md',
+          isSelected: false,
+        },
+        {
+          value: 'sms',
+          iconName: 'sms',
+          label: 'SMS',
+          iconSize: 'md',
+          isSelected: false,
+        },
+        {
+          value: 'vCard',
+          iconName: 'business-card-filled',
+          label: 'VCard',
+          iconSize: 'md',
+          isSelected: false,
+        },
+        {
+          value: 'calendar',
+          iconName: 'calendar',
+          label: 'Event',
+          iconSize: 'md',
+          isSelected: false,
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+      <div class="tw-w-1/3 tw-bg-grayscale-400 tw-p-8">
+        <ButtonGroup variant="custom" :options="options" @on-select="onButtonOptionSelected" :columns="3">
+          <template #content="{ option }">
+          <div class="tw-text-secondary-500">
+            <Icon :name="option.iconName" :size="option.iconSize" />
+            <p
+              v-if="option.label"
+              class="tw-w-full tw-text-center tw-font-bold tw-font-sans tw-text-sm tw-mb-0 tw-mt-1"
+            >
+              {{ option.label }}
+            </p>
+          </div>
+        </template>
+        </ButtonGroup>
+      </div>
+    `,
+  };
+};
+
+SampleCustom.story = {
+  name: 'Sample Custom',
+};
+export const SampleColumn = () => {
+  return {
+    components: {
+      ButtonGroup,
+      Icon,
+    },
+    data: () => ({
+      options: [
+        {
+          value: 'url',
+          iconName: 'column-1',
+          label: '1',
+          iconSize: 'md',
+          isSelected: true,
+        },
+        {
+          value: 'email',
+          iconName: 'column-2',
+          label: '2',
+          iconSize: 'md',
+          isSelected: false,
+        },
+        {
+          value: 'phone',
+          iconName: 'column-3',
+          label: '3',
+          iconSize: 'md',
+          isSelected: false,
+        },
+        {
+          value: 'sms',
+          iconName: 'column-4',
+          label: '4',
+          iconSize: 'md',
+          isSelected: false,
+        },
+      ],
+    }),
+    methods: {
+      onButtonOptionSelected(option) {
+        console.log('Button Option Selected', option);
+      },
+    },
+    template: `
+    <div class="tw-w-full">
+      <ButtonGroup variant="icon" :options="options" @on-select="onButtonOptionSelected" />
+    </div>
+    `,
+  };
+};
+
+SampleColumn.story = {
+  name: 'Sample Column',
+};