@designcrowd/fe-shared-lib 1.0.0-test-publish

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

@@ -0,0 +1,562 @@
+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',
+};