@livestorm/ui-vue 1.1.3 → 2.0.0

package/src/components/BaseBanner/BaseBanner.vue

@@ -1,229 +0,0 @@
-<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

@@ -1,98 +0,0 @@
-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

@@ -1,300 +0,0 @@
-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 AlphaBlackTemplate = (args) => {
-  return {
-    setup: () => ({ args, ...actions }),
-    methods: actions,
-    template: '<BaseButton v-bind="args" class="base-button-alpha-black" @click="onClick">Alpha Black</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({})
-export const AlphaDark = AlphaBlackTemplate.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,
-}