@livestorm/ui-vue 1.1.3 → 2.0.0

package/src/components/BaseSwitch/BaseSwitch.stories.js

@@ -1,44 +0,0 @@
-import BaseSwitch from './BaseSwitch.vue'
-import { action } from '@storybook/addon-actions'
-import { withDesign } from 'storybook-addon-designs'
-
-const actions = {
-  onInput: action('input'),
-}
-
-export default {
-  title: 'common/vue/components/BaseSwitch',
-  component: BaseSwitch,
-  argTypes: {
-    colorClass: {
-      control: {
-        type: 'select',
-      },
-      options: ['base-switch-green', 'base-switch-blue'],
-    },
-  },
-  decorators: [withDesign],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/JY03TRyhauKw0jjoHFFtmMHV/0.-Design-system---Fondation?node-id=6695%3A0',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { BaseSwitch },
-  setup: () => ({ args, ...actions }),
-  data: () => ({ currentValue: true }),
-  template: '<BaseSwitch v-bind="args" v-model="currentValue" @update:model-value="onInput"/>',
-})
-
-export const Green = Template.bind({})
-Green.args = {
-  colorClass: 'base-switch-green',
-}
-
-export const Blue = Template.bind({})
-Blue.args = {
-  colorClass: 'base-switch-blue',
-}

package/src/components/BaseSwitch/BaseSwitch.vue

@@ -1,114 +0,0 @@
-<template>
-  <div
-    class="base-switch select-none"
-    :class="{
-      checked: valueModel,
-      'opacity-50': disabled,
-    }"
-  >
-    <div class="flex items-center relative">
-      <label
-        class="switch-box flex-none block rounded-full h-5 border"
-        :class="valueModel ? colorClass : 'bg-grey-300 border-grey-200'"
-      >
-        <input
-          v-model="valueModel"
-          type="checkbox"
-          :disabled="disabled"
-          class="opacity-0 absolute inset-0 w-full h-full z-10"
-          :class="[
-            disabled ? 'cursor-not-allowed' : 'cursor-pointer',
-          ]"
-        >
-
-        <div
-          class="dot w-4 h-4 bg-white rounded-full absolute border"
-          :class="!valueModel && 'border-grey-200'"
-        />
-      </label>
-      <span
-        v-if="defaultSlot"
-        class="ml-3"
-      >
-        <RenderSlot :vnodes="defaultSlot" />
-      </span>
-    </div>
-  </div>
-</template>
-
-<script>
-import { computed } from 'vue'
-import { useSlotsAsComponents } from '../../utils/slot'
-
-export default {
-
-  props: {
-    modelValue: {
-      type: Boolean,
-      required: true,
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-    colorClass: {
-      type: String,
-      default: 'base-switch-green',
-    },
-  },
-
-  emits: [
-    'update:modelValue',
-  ],
-
-  setup () {
-    const slots = useSlotsAsComponents()
-    const defaultSlot = computed(() => slots.default())
-
-    return {
-      defaultSlot,
-    }
-  },
-
-  computed: {
-    valueModel: {
-      get () { return this.modelValue },
-      set (value) { return this.$emit('update:modelValue', value) },
-    },
-  },
-}
-</script>
-
-<style lang="postcss" scoped>
-.switch-box {
-  @apply relative;
-  width: 36px;
-  transition: background .15s, border .15s;
-}
-
-.base-switch-green {
-  @apply bg-green-600 border-green-600;
-
-  .dot {
-    @apply border-green-600
-  }
-}
-
-.base-switch-blue {
-  @apply bg-livestorm-600 border-livestorm-600;
-
-  .dot {
-    @apply border-livestorm-600
-  }
-}
-
-.dot {
-  left: 0;
-  transition: left .15s, border .15s;
-  box-sizing: content-box;
-
-  .checked & {
-    left: 16px;
-  }
-}
-</style>

package/src/components/BaseTag/BaseTag.stories.js

@@ -1,123 +0,0 @@
-import BaseTag from './BaseTag.vue'
-import { icons } from '@/../../frontend/.storybook/icons'
-import { action } from '@storybook/addon-actions'
-import { withDesign } from 'storybook-addon-designs'
-import UserAvatar from '@/common/vue/components/UserAvatar/UserAvatar.vue'
-
-const actions = {
-  onDelete: action('deleted'),
-}
-
-export default {
-  title: 'common/vue/components/BaseTag',
-  component: BaseTag,
-  argTypes: {
-    theme: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'light-blue',
-        'light-green',
-        'light-orange',
-        'light-red',
-        'light-grey',
-        'dark-blue',
-        'dark-green',
-        'dark-orange',
-        'dark-red',
-        'dark-grey',
-      ],
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'xsmall',
-        'small',
-        'medium',
-      ],
-    },
-    leftIcon: {
-      control: {
-        type: 'select',
-      },
-      options: icons,
-    },
-  },
-  decorators: [withDesign],
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/JY03TRyhauKw0jjoHFFtmMHV/2.-Design-system---Components?node-id=12918%3A137704',
-    },
-  },
-}
-
-const Template = (args) => ({
-  components: { BaseTag },
-  setup: () => ({ args, ...actions }),
-  template: `
-    <BaseTag
-      v-bind="args"
-      @delete="onDelete"
-    >
-      Tagging
-    </BaseTag>
-  `,
-})
-
-const TemplateWithAvatar = (args) => ({
-  components: { BaseTag, UserAvatar },
-  setup: () => ({ args, ...actions }),
-  template: `
-    <BaseTag
-      v-bind="args"
-      @delete="onDelete"
-    >
-      <template #user-avatar>
-        <UserAvatar :data="{
-          avatar: {
-            url: 'https://livestorm.imgix.net/1127/1531838186-stan-massueras.jpeg',
-          },
-          first_name: 'John',
-          last_name: 'Doe',
-        }"/>
-      </template>
-      Tagging
-    </BaseTag>
-  `,
-})
-
-export const XSmall = Template.bind({})
-XSmall.args = {
-  theme: 'light-blue',
-  size: 'xsmall',
-}
-
-export const Small = Template.bind({})
-Small.args = {
-  theme: 'dark-orange',
-  size: 'small',
-}
-
-export const Medium = Template.bind({})
-Medium.args = {
-  theme: 'dark-green',
-  size: 'medium',
-}
-
-export const WithAvatar = TemplateWithAvatar.bind({})
-WithAvatar.args = {
-  theme: 'light-blue',
-  size: 'xsmall',
-}
-
-export const AllProps = TemplateWithAvatar.bind({})
-AllProps.args = {
-  theme: 'light-blue',
-  deletable: true,
-  leftIcon: 'i-ls-user',
-  tooltip: 'My tooltip',
-}

package/src/components/BaseTag/BaseTag.vue

@@ -1,244 +0,0 @@
-<template>
-  <span
-    v-tooltip="tooltip"
-    :class="[
-      { 'uppercase': uppercase },
-      { 'xsmall text-11-semibold ': size === 'xsmall' },
-      { 'small text-12-semibold py-1': size === 'small' },
-      { 'medium text-16-semibold py-1': size === 'medium' },
-      { 'pointer-events-none': !deletable && !tooltip },
-      { 'cursor-help': !deletable && tooltip },
-      theme
-    ]"
-    data-testid="base-tag"
-    class="base-tag cursor-default no-info px-2 rounded-full inline-flex items-center whitespace-nowrap"
-  >
-    <template v-if="leftIcon">
-      <img
-        v-if="isLeftIconImageUrl"
-        :class="iconSizeClasses"
-        :src="leftIcon"
-      >
-      <div
-        v-else
-        class="icon-left block"
-        :class="[leftIcon, iconSizeClasses]"
-      />
-    </template>
-
-    <div
-      v-if="userAvatarSlot"
-      class="base-tag-avatar"
-      :class="[
-        { 'ml-1': leftIcon },
-        { 'h-3 w-3 xsmall': size === 'xsmall' },
-        { 'h-4 w-4 small': size === 'small' },
-        { 'h-6 w-6 medium': size === 'medium' }
-      ]"
-    >
-      <RenderSlot :vnodes="userAvatarSlot" />
-    </div>
-
-    <span
-      v-if="defaultSlot"
-      class="overflow-hidden max-w-sm text-ellipsis"
-      :class="{ 'ml-1': leftIcon || userAvatarSlot }"
-    >
-      <RenderSlot :vnodes="defaultSlot" />
-    </span>
-
-    <template v-if="deletable">
-      <div
-        class="i-ls-x icon-delete block ml-1 cursor-pointer"
-        :class="iconSizeClasses"
-        @click="$emit('delete')"
-      />
-    </template>
-  </span>
-</template>
-
-<script>
-import { computed } from 'vue'
-import { useSlotsAsComponents } from '../../utils/slot'
-
-export default {
-  props: {
-    size: {
-      type: String,
-      default: 'small',
-      validator (value) {
-        return ['xsmall', 'small', 'medium'].includes(value)
-      },
-    },
-
-    theme: {
-      type: String,
-      default: 'light-blue',
-      validator (value) {
-        return [
-          'light-blue',
-          'light-green',
-          'light-orange',
-          'light-red',
-          'light-grey',
-          'dark-blue',
-          'dark-green',
-          'dark-orange',
-          'dark-red',
-          'dark-grey',
-        ].includes(value)
-      },
-    },
-
-    leftIcon: {
-      type: String,
-      default: null,
-    },
-
-    tooltip: {
-      type: [String, Object],
-      default: null,
-    },
-
-    uppercase: {
-      type: Boolean,
-      default: false,
-    },
-
-    deletable: {
-      type: Boolean,
-      default: false,
-    },
-  },
-
-  emits: ['delete'],
-
-  setup () {
-    const slots = useSlotsAsComponents()
-    const defaultSlot = computed(() => slots.default())
-    const userAvatarSlot = computed(() => slots['user-avatar']())
-
-    return {
-      defaultSlot,
-      userAvatarSlot,
-    }
-  },
-
-  computed: {
-    isLeftIconImageUrl () {
-      return this.leftIcon?.includes('.svg')
-    },
-
-    iconSizeClasses () {
-      return {
-        'h-3 w-3': (this.size === 'xsmall' || this.size === 'small'),
-        'h-4 w-4': this.size === 'medium',
-      }
-    },
-  },
-}
-</script>
-
-<style lang="postcss" scoped>
-.light-blue {
-  @apply bg-livestorm-200 text-livestorm-800;
-  &:hover {
-    @apply text-livestorm-700;
-  }
-}
-
-.light-green {
-  @apply bg-green-200 text-green-800;
-  &:hover {
-    @apply text-green-700;
-  }
-}
-
-.light-orange {
-  @apply bg-orange-200 text-orange-800;
-  &:hover {
-    @apply text-orange-700;
-  }
-}
-
-.light-red {
-  @apply bg-red-200 text-red-800;
-  &:hover {
-    @apply text-red-700;
-  }
-}
-
-.light-grey {
-  @apply bg-grey-200 text-grey-900;
-  &:hover {
-    @apply text-grey-700;
-  }
-}
-
-.dark-blue {
-  @apply bg-livestorm-700 text-white;
-  &:hover {
-    @apply text-livestorm-200;
-  }
-}
-
-.dark-green {
-  @apply bg-green-700 text-white;
-  &:hover {
-    @apply text-green-200;
-  }
-}
-
-.dark-orange {
-  @apply bg-orange-700 text-white;
-  &:hover {
-    @apply text-orange-200;
-  }
-}
-
-.dark-red {
-  @apply bg-red-700 text-white;
-  &:hover {
-    @apply text-red-200;
-  }
-}
-
-.dark-grey {
-  @apply bg-grey-700 text-white;
-  &:hover {
-    @apply text-grey-200;
-  }
-}
-
-.base-tag-avatar {
-  :deep(.user-avatar) {
-    @apply w-full h-full;
-  }
-}
-
-.base-tag {
-  &.xsmall {
-    .base-tag-avatar {
-      :deep(.user-avatar) svg {
-        @apply w-2 h-2;
-      }
-    }
-  }
-
-  &.small {
-    .base-tag-avatar {
-      :deep(.user-avatar) svg {
-        @apply w-3 h-3;
-      }
-    }
-  }
-
-  &.medium {
-    .base-tag-avatar {
-      :deep(.user-avatar) svg {
-        @apply w-4 h-4;
-      }
-    }
-  }
-}
-</style>