@livestorm/ui-vue 1.1.0 → 1.1.2

package/src/components/BaseBanner/BaseBanner.vue

@@ -0,0 +1,229 @@
+<template>
+  <div
+    v-if="!isClosed"
+    class="base-banner flex justify-between text-grey-700 text-14-regular px-6 py-4"
+    :class="[
+      {
+        'rounded-8': borderRounded && !bannerMode,
+        'items-center': !isDisplayBlock,
+        'fixed z-[10000] w-full left-0': bannerMode,
+        'bottom-0 md:bottom-auto md:top-0': bannerMode && bannerBottomOnSmallScreen,
+        'top-0': bannerMode && !bannerBottomOnSmallScreen,
+      },
+      `type-${type}`,
+      bgColor,
+    ]"
+    data-testid="base-banner"
+    :data-type="type"
+  >
+    <div
+      class="flex w-full"
+      :class="isDisplayBlock ? 'flex-col items-center' : 'justify-between items-center'"
+    >
+      <div
+        class="flex items-center"
+        :class="{
+          'flex-col': isDisplayBlock
+        }"
+      >
+        <div
+          class="shrink-0 w-6 h-6 flex justify-center items-center"
+          :class="icon"
+        />
+        <div
+          :class="{
+            'text-center mt-4': isDisplayBlock,
+            'mr-3': !isDisplayBlock && (buttonLabel || buttonsSlot),
+            'ml-3': !isDisplayBlock,
+          }"
+        >
+          <div
+            v-if="defaultSlot"
+            :class="{ 'text-14-semibold': descriptionSlot }"
+          >
+            <RenderSlot :vnodes="defaultSlot" />
+          </div>
+          <RenderSlot :vnodes="descriptionSlot" />
+        </div>
+      </div>
+      <div
+        v-if="buttonsSlot"
+        :class="{ 'mt-4': isDisplayBlock }"
+      >
+        <RenderSlot :vnodes="buttonsSlot" />
+      </div>
+      <template v-if="!buttonsSlot">
+        <BaseButton
+          v-if="buttonLabel"
+          type="button"
+          :class="[
+            { 'mt-4': isDisplayBlock },
+            buttonClass,
+          ]"
+          :icon="buttonIcon"
+          :href="buttonHref"
+          :disabled="disabledButton"
+          :target="buttonHref ? '_blank' : null"
+          data-testid="warning-message-button"
+          @click="$emit('handleClick')"
+        >
+          {{ buttonLabel }}
+        </BaseButton>
+      </template>
+    </div>
+    <div
+      v-if="closable"
+      class="i-ls-x shrink-0 w-5 h-5 text-grey-600 cursor-pointer hover:text-livestorm-800"
+      :class="{ 'ml-2': !isDisplayBlock }"
+      @click="close"
+    />
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue'
+import { useSlotsAsComponents } from '../../utils/slot'
+import BaseButton from '../BaseButton/BaseButton.vue'
+
+export default {
+  components: {
+    BaseButton,
+  },
+
+  props: {
+    type: {
+      type: String,
+      default: 'alert',
+      validator (value) {
+        return ['info', 'success', 'warning', 'alert'].includes(value)
+      },
+    },
+    display: {
+      type: String,
+      default: 'inline',
+      validator (value) {
+        return ['inline', 'block'].includes(value)
+      },
+    },
+    buttonLabel: {
+      type: String,
+      default: '',
+    },
+    buttonHref: {
+      type: String,
+      default: null,
+    },
+    buttonIcon: {
+      type: String,
+      default: null,
+    },
+    closable: {
+      type: Boolean,
+      default: false,
+    },
+    bannerMode: {
+      type: Boolean,
+      default: false,
+    },
+    borderRounded: {
+      type: Boolean,
+      default: true,
+    },
+    bannerBottomOnSmallScreen: {
+      type: Boolean,
+      default: true,
+    },
+    forceInlineDisplayOnSmallScreen: {
+      type: Boolean,
+      default: true,
+    },
+    disabledButton: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  emits: ['handleClick', 'close'],
+
+  setup () {
+    const slots = useSlotsAsComponents()
+    const defaultSlot = computed(() => slots.default())
+    const descriptionSlot = computed(() => slots.description())
+    const buttonsSlot = computed(() => slots.buttons())
+
+    return {
+      descriptionSlot,
+      buttonsSlot,
+      defaultSlot,
+    }
+  },
+
+  data () {
+    return {
+      isClosed: false,
+    }
+  },
+
+  computed: {
+    icon () {
+      switch (this.type) {
+        case 'alert':
+          return 'i-ls-alert-circle text-red-600'
+        case 'warning':
+          return 'i-ls-alert-triangle text-orange-600'
+        case 'info':
+          return 'i-ls-info text-livestorm-600'
+        case 'success':
+          return 'i-ls-check-circle text-green-600'
+        default:
+          return 'i-ls-alert-circle text-livestorm-600'
+      }
+    },
+
+    bgColor () {
+      switch (this.type) {
+        case 'alert':
+          return 'bg-red-100'
+        case 'warning':
+          return 'bg-orange-100'
+        case 'success':
+          return 'bg-green-100'
+        case 'info':
+        default:
+          return 'bg-livestorm-100'
+      }
+    },
+
+    buttonClass () {
+      switch (this.type) {
+        case 'alert':
+          return 'base-button-red-secondary'
+        case 'warning':
+          return 'base-button-orange-secondary'
+        case 'success':
+          return 'base-button-green-secondary'
+        case 'info':
+        default:
+          return 'base-button-secondary'
+      }
+    },
+
+    isDisplayBlock () {
+      return this.display === 'block' || (this.display === 'inline' && this.$responsive.mobile && this.forceInlineDisplayOnSmallScreen)
+    },
+  },
+
+  methods: {
+    close () {
+      this.isClosed = true
+      this.$emit('close')
+    },
+  },
+}
+</script>
+
+<style lang="postcss" scoped>
+.base-banner :deep(a:not(.base-button)) {
+  @apply text-grey-700 hover:text-grey-900 underline;
+}
+</style>

package/src/components/BaseButton/BaseButton.spec.js

@@ -0,0 +1,98 @@
+import { mount } from '@vue/test-utils'
+import BaseButton from './BaseButton.vue'
+
+describe('BaseButton', () => {
+  test('snapshot: button', () => {
+    const wrapper = mount(BaseButton, {
+      props: {
+        type: 'submit',
+      },
+      slots: {
+        default: '<span>Hello</span>',
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('snapshot: router-link', () => {
+    const wrapper = mount(BaseButton, {
+      props: {
+        to: { name: 'foo' },
+      },
+      slots: {
+        default: '<span>My Page</span>',
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('snapshot: a', () => {
+    const wrapper = mount(BaseButton, {
+      props: {
+        href: 'https://google.com/',
+      },
+      slots: {
+        default: '<span>Google</span>',
+      },
+    })
+    expect(wrapper.html()).toMatchSnapshot()
+  })
+
+  test('event: click', async () => {
+    const wrapper = mount(BaseButton)
+    await wrapper.trigger('click')
+    expect(wrapper.emitted().click).toBeTruthy()
+  })
+
+  test('icon left', () => {
+    const wrapper = mount(BaseButton, {
+      props: {
+        icon: 'foo',
+      },
+      slots: {
+        default: '<span>My Page</span>',
+      },
+    })
+    const selector = '.left-icon'
+    expect(wrapper.get(selector))
+    const icon = wrapper.find(selector)
+    expect(icon.classes()).toContain('foo')
+  })
+
+  test('icon right', () => {
+    const wrapper = mount(BaseButton, {
+      props: {
+        iconRight: 'foo',
+      },
+      slots: {
+        default: '<span>My Page</span>',
+      },
+    })
+    const selector = '.right-icon'
+    expect(wrapper.get(selector))
+    const icon = wrapper.find(selector)
+    expect(icon.classes()).toContain('foo')
+  })
+
+  test('loading state', () => {
+    const wrapper = mount(BaseButton, {
+      props: {
+        loading: true,
+      },
+      slots: {
+        default: '<span class="foo">Send message</span>',
+      },
+    })
+    expect(wrapper.get('.loader'))
+    expect(wrapper.get('.foo'))
+  })
+
+  test('disabled', () => {
+    const wrapper = mount(BaseButton, {
+      props: {
+        disabled: true,
+      },
+    })
+    expect(wrapper.attributes().disabled).toBe('')
+  })
+})

package/src/components/BaseButton/BaseButton.stories.js

@@ -0,0 +1,291 @@
+import BaseButton from './BaseButton.vue'
+import { icons } from '@/../../frontend/.storybook/icons'
+import { action } from '@storybook/addon-actions'
+import { withDesign } from 'storybook-addon-designs'
+
+const actions = {
+  onClick: action('clicked'),
+  onClose: action('closed'),
+}
+
+export default {
+  title: 'common/vue/components/BaseButton',
+  component: BaseButton,
+  argTypes: {
+    icon: {
+      control: {
+        type: 'select',
+      },
+      options: icons,
+    },
+    class: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'base-button-extra-small',
+        'base-button-small',
+        'base-button-medium',
+        'base-button-large',
+        'base-button-extra-large',
+      ],
+    },
+  },
+  args: {
+    class: 'base-button-medium',
+  },
+  decorators: [withDesign],
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/file/JY03TRyhauKw0jjoHFFtmMHV/0.-Design-system---Fondation?node-id=7760%3A2',
+    },
+  },
+}
+
+/** Colors */
+
+const PrimaryTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary" @click="onClick">Primary</BaseButton>',
+})
+
+const SecondaryTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-secondary" @click="onClick">Secondary</BaseButton>',
+})
+
+const RedPrimaryTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-red-primary" @click="onClick">Red Primary</BaseButton>',
+  }
+}
+
+const RedSecondaryTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-red-secondary" @click="onClick">Red Secondary</BaseButton>',
+  }
+}
+
+const GreenPrimaryTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-green-primary" @click="onClick">Green Primary</BaseButton>',
+  }
+}
+
+const GreenSecondaryTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-green-secondary" @click="onClick">Green Secondary</BaseButton>',
+  }
+}
+
+const OrangePrimaryTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-orange-primary" @click="onClick">Orange Primary</BaseButton>',
+  }
+}
+
+const OrangeSecondaryTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-orange-secondary" @click="onClick">Orange Secondary</BaseButton>',
+  }
+}
+
+const AntiPrimaryTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-anti-primary" @click="onClick">Anti Primary</BaseButton>',
+  }
+}
+
+const TertiaryTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-tertiary" @click="onClick">Tertiary</BaseButton>',
+  }
+}
+
+const QuaternaryTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-quaternary" @click="onClick">Quaternary</BaseButton>',
+  }
+}
+
+const QuaternaryBgTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-quaternary-bg" @click="onClick"></BaseButton>',
+  }
+}
+
+const AlphaWhiteTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-alpha-white" @click="onClick">Alpha White</BaseButton>',
+  }
+}
+
+const AlphaWhiteBgTemplate = (args) => {
+  return {
+    setup: () => ({ args, ...actions }),
+    methods: actions,
+    template: '<BaseButton v-bind="args" class="base-button-alpha-white-bg" @click="onClick">Alpha White Bg</BaseButton>',
+  }
+}
+
+/** Size */
+
+const ExtraSmallTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary" @click="onClick">Extra small</BaseButton>',
+})
+
+const SmallTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary" @click="onClick">Small</BaseButton>',
+})
+
+const MediumTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary" @click="onClick">Medium</BaseButton>',
+})
+
+const LargeTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary" @click="onClick">Large</BaseButton>',
+})
+
+const ExtraLargeTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary" @click="onClick">Extra large</BaseButton>',
+})
+
+/** Layout */
+
+const IconOnlyTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary base-button-square" @click="onClick"/>',
+})
+
+const AlignCenterTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary" @click="onClick" style="width: 200px">Align content</BaseButton>',
+})
+
+const ClosableTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary" @click="onClick" @close="onClose">Closable</BaseButton>',
+})
+
+const FullWidthTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary w-full" @click="onClick">Full Width</BaseButton>',
+})
+
+const ClosableFullWidthTemplate = (args) => ({
+  setup: () => ({ args, ...actions }),
+  template: '<BaseButton v-bind="args" class="base-button-primary w-full" @click="onClick" @close="onClose">Closable</BaseButton>',
+})
+
+/** Colors */
+export const Primary = PrimaryTemplate.bind({})
+export const Secondary = SecondaryTemplate.bind({})
+export const RedPrimary = RedPrimaryTemplate.bind({})
+export const RedSecondary = RedSecondaryTemplate.bind({})
+export const GreenPrimary = GreenPrimaryTemplate.bind({})
+export const GreenSecondary = GreenSecondaryTemplate.bind({})
+export const OrangePrimary = OrangePrimaryTemplate.bind({})
+export const OrangeSecondary = OrangeSecondaryTemplate.bind({})
+export const AntiPrimary = AntiPrimaryTemplate.bind({})
+export const Tertiary = TertiaryTemplate.bind({})
+export const Quaternary = QuaternaryTemplate.bind({})
+export const QuaternaryBg = QuaternaryBgTemplate.bind({})
+export const AlphaWhite = AlphaWhiteTemplate.bind({})
+export const AlphaWhiteBg = AlphaWhiteBgTemplate.bind({})
+
+/** Size */
+export const ExtraSmall = ExtraSmallTemplate.bind({})
+export const Small = SmallTemplate.bind({})
+export const Medium = MediumTemplate.bind({})
+export const Large = LargeTemplate.bind({})
+export const ExtraLarge = ExtraLargeTemplate.bind({})
+
+/** Layout */
+export const IconOnly = IconOnlyTemplate.bind({})
+export const AlignCenter = AlignCenterTemplate.bind({})
+export const Closable = ClosableTemplate.bind({})
+export const FullWidth = FullWidthTemplate.bind({})
+export const ClosableFullWidth = ClosableFullWidthTemplate.bind({})
+
+QuaternaryBg.args = {
+  icon: 'i-ls-chevron-left',
+}
+
+AlphaWhite.args = {
+  icon: 'i-ls-download-cloud',
+}
+
+AlphaWhite.parameters = {
+  backgrounds: {
+    default: 'grey-dark',
+  },
+}
+
+AlphaWhiteBg.parameters = {
+  backgrounds: { default: 'grey-dark' },
+}
+
+ExtraSmall.args = {
+  class: 'base-button-extra-small',
+}
+
+Small.args = {
+  class: 'base-button-small',
+}
+
+Medium.args = {
+  class: 'base-button-medium',
+}
+
+Large.args = {
+  class: 'base-button-large',
+}
+
+ExtraLarge.args = {
+  class: 'base-button-extra-large',
+}
+
+IconOnly.args = {
+  icon: 'i-ls-mail',
+}
+
+AlignCenter.args = {
+  icon: 'i-ls-zap',
+  alignCenter: true,
+}
+
+Closable.args = {
+  closable: true,
+}
+
+ClosableFullWidth.args = {
+  closable: true,
+}