@livestorm/ui-vue 1.1.2 → 1.1.3

package/src/components/BaseCheckbox/BaseCheckbox.vue

@@ -1,3 +1,94 @@
+<script setup lang="ts">
+import { useSlotsAsComponents } from '../../utils/slot'
+import { computed, inject } from 'vue'
+
+interface BaseFormInputInjectionType {
+  childConfig: { value: any } | undefined,
+  setInputModel: (value: any) => void,
+}
+
+const BaseFormInputInjection = inject<BaseFormInputInjectionType | undefined>('BaseFormInputInjection', undefined)
+
+const props = withDefaults(defineProps<{
+  modelValue?: any,
+  value?: any,
+  label?: string,
+  labelClass?: string,
+  description?: string,
+  inputClass?: string,
+  forId: string,
+  tooltip?: string,
+  required?: boolean,
+  disabled?: boolean,
+  disableChange?: boolean,
+  isConsent?: boolean,
+  icon?: string,
+  orientation?: 'horizontal' | 'vertical',
+}>(), {
+  value: false,
+  label: undefined,
+  labelClass: undefined,
+  description: undefined,
+  inputClass: undefined,
+  forId: undefined,
+  tooltip: undefined,
+  required: false,
+  disabled: false,
+  disableChange: false,
+  isConsent: false,
+  icon: 'i-ls-check',
+  orientation: 'horizontal',
+})
+
+const emit = defineEmits<{
+  (e: 'change', a: any): void,
+  (e: 'update:modelValue', a: any): void,
+  (e: 'tooltip-clicked'): void,
+}>()
+
+const slots = useSlotsAsComponents()
+const iconSlot = computed(() => slots.icon ? slots.icon() : null)
+
+const baseFormInputValue = computed(() => BaseFormInputInjection?.childConfig?.value)
+
+function isValueChecked (modelValue: any) {
+  if (Array.isArray(modelValue)) {
+    return modelValue.includes(props.value)
+  }
+  return modelValue === props.value
+}
+
+const checked = computed(() => {
+  if (props.modelValue !== undefined) {
+    return isValueChecked(props.modelValue)
+  } else if (BaseFormInputInjection && !!baseFormInputValue.value) {
+    return isValueChecked(baseFormInputValue.value) && props.value
+  }
+  return props.value
+})
+
+function onChange (event: Event) {
+  const target = event.target as HTMLInputElement
+  let newValue: any = target.checked
+
+  if (props.modelValue !== undefined) {
+    newValue = [...props.modelValue]
+    if (target.checked) {
+      newValue.push(props.value)
+    } else {
+      newValue.splice(newValue.indexOf(props.value), 1)
+    }
+  }
+
+  emit('update:modelValue', newValue)
+  emit('change', newValue)
+
+  if (BaseFormInputInjection) {
+    BaseFormInputInjection.setInputModel(newValue)
+  }
+}
+</script>
+
 <template>
   <div
     class="base-checkbox"
@@ -5,6 +96,7 @@
       'base-checkbox-disabled': disabled,
       'pointer-events-none': disableChange,
       'base-checkbox-consent' : isConsent,
+      'with-description': description,
     }"
   >
     <input
@@ -15,8 +107,25 @@
       type="checkbox"
       @change="onChange"
     >
-    <label :for="forId">
+    <label
+      :for="forId"
+      :class="{
+        'flex flex-col vertical-padding-large': orientation === 'vertical',
+        'vertical-padding': description && orientation === 'horizontal',
+      }"
+    >
+      <div
+        v-if="iconSlot"
+        class="w-4 h-4 icon flex items-center justify-center"
+        :class="[orientation === 'vertical' ? 'mb-2' : 'mr-2']"
+      >
+        <RenderSlot
+          :vnodes="iconSlot"
+        />
+      </div>
+
       <span
+        v-if="orientation === 'horizontal'"
         class="input-custom !mt-[1px]"
         :class="inputClass"
       >
@@ -29,9 +138,15 @@
       <span
         v-if="label"
         class="label-custom"
+        :class="{
+          'mb-2 !ml-0 text-center': orientation === 'vertical'
+        }"
       >
         <span
-          :class="labelClass"
+          class="text-grey-700 label"
+          :class="[
+            labelClass,
+          ]"
           v-html="required ? `${label} *` : label"
         />
         <span
@@ -40,122 +155,26 @@
           data-testid="open-tooltip"
           @click.stop.prevent="$emit('tooltip-clicked')"
         />
+        <span
+          v-if="description"
+          class="text-14-medium text-grey-600 description block"
+          :class="{
+            'text-center': orientation === 'vertical'
+          }"
+          v-html="description"
+        />
+      </span>
+
+      <span
+        v-if="orientation === 'vertical'"
+        class="input-custom"
+      >
+        <div
+          v-if="!disabled || checked"
+          :class="icon"
+          class="check-checkbox"
+        />
       </span>
     </label>
   </div>
 </template>
-
-<script>
-export default {
-  inject: {
-    BaseFormInputInjection: { default: null },
-  },
-
-  props: {
-    // eslint-disable-next-line
-    modelValue: {},
-
-    // eslint-disable-next-line
-    value: {
-      default: false,
-    },
-
-    label: {
-      type: String,
-      default: null,
-    },
-
-    labelClass: {
-      type: String,
-      default: null,
-    },
-
-    inputClass: {
-      type: String,
-      default: null,
-    },
-
-    forId: {
-      type: String,
-      required: true,
-    },
-
-    tooltip: {
-      type: String,
-      default: null,
-    },
-
-    required: {
-      type: Boolean,
-      default: false,
-    },
-
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-
-    disableChange: {
-      type: Boolean,
-      default: false,
-    },
-
-    isConsent: {
-      type: Boolean,
-      default: false,
-    },
-
-    icon: {
-      type: String,
-      default: 'i-ls-check',
-    },
-  },
-
-  emits: [
-    'change',
-    'update:modelValue',
-    'tooltip-clicked',
-  ],
-
-  computed: {
-    baseFormInputValue () {
-      return this.BaseFormInputInjection && this.BaseFormInputInjection.childConfig.value
-    },
-
-    checked () {
-      if (this.modelValue !== undefined) {
-        return Array.isArray(this.modelValue)
-          ? this.modelValue.includes(this.value)
-          : this.modelValue === this.value
-      } else if (this.BaseFormInputInjection && !!this.baseFormInputValue) {
-        return Array.isArray(this.baseFormInputValue)
-          ? this.baseFormInputValue.includes(this.value)
-          : this.baseFormInputValue === this.value && this.value
-      }
-      return this.value
-    },
-  },
-
-  methods: {
-    onChange (event) {
-      let newValue = event.target.checked
-
-      if (this.modelValue !== undefined) {
-        newValue = [...this.modelValue]
-        if (event.target.checked) {
-          newValue.push(this.value)
-        } else {
-          newValue.splice(newValue.indexOf(this.value), 1)
-        }
-      }
-
-      this.$emit('update:modelValue', newValue)
-      this.$emit('change', newValue)
-
-      if (this.BaseFormInputInjection) {
-        this.BaseFormInputInjection.setInputModel(newValue)
-      }
-    },
-  },
-}
-</script>

package/src/components/BaseModal/BaseModal.stories.js

@@ -1,4 +1,5 @@
 import BaseModal from './BaseModal.vue'
+import { icons } from '@/../../frontend/.storybook/icons'
 import { action } from '@storybook/addon-actions'
 import { withDesign } from 'storybook-addon-designs'
 
@@ -22,6 +23,12 @@ export default {
       },
       options: ['info', 'success', 'warning', 'alert'],
     },
+    customIcon: {
+      control: {
+        type: 'select',
+      },
+      options: icons,
+    },
   },
   decorators: [withDesign],
   parameters: {
@@ -127,6 +134,11 @@ Locked.args = {
   locked: true,
 }
 
+export const CustomIcon = TitleContentActions.bind({})
+CustomIcon.args = {
+  customIcon: 'i-ls-mail',
+}
+
 export const ConfirmLoading = TitleContentActions.bind({})
 ConfirmLoading.args = {
   confirmLoading: true,

package/src/components/BaseModal/BaseModalContent.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, defineEmits, defineProps, inject, watch } from 'vue'
+import { computed, inject, watch } from 'vue'
 import BaseButton from '../BaseButton/BaseButton.vue'
 import { useSlotsAsComponents } from '../../utils/slot'
 import { InjectClose, InjectOnClose, InjectPropsFromContent } from './BaseModal.vue'
@@ -13,6 +13,7 @@ interface ModalProps {
   confirmLoading?: boolean
   confirmColor?: string
   confirmHref?: string
+  customIcon?: string;
   type?: 'alert'|'warning'|'info'|'success'
 }
 
@@ -60,9 +61,9 @@ const emit = defineEmits([
   'close',
 ])
 
-// Types
+const modalIcon = computed(() => {
+  if (props.customIcon) return props.customIcon
 
-const typeIcon = computed(() => {
   switch (props.type) {
     case 'alert':
       return 'i-ls-alert-circle text-red-600'
@@ -73,9 +74,10 @@ const typeIcon = computed(() => {
     case 'success':
       return 'i-ls-check-circle text-green-600'
     default:
-      return 'i-ls-alert-circle text-livestorm-600'
+      return undefined
   }
 })
+
 </script>
 
 <template>
@@ -91,9 +93,9 @@ const typeIcon = computed(() => {
           class="flex items-center px-6 pt-6"
         >
           <div
-            v-if="props.type"
+            v-if="modalIcon"
             class="w-6 h-6 mr-2 sm:mr-3 shrink-0"
-            :class="typeIcon"
+            :class="modalIcon"
           />
           <span
             data-testid="modal-title"

package/src/components/BaseRadio/BaseRadio.stories.js

@@ -0,0 +1,164 @@
+import BaseRadio from './BaseRadio.vue'
+import { action } from '@storybook/addon-actions'
+
+export default {
+  title: 'common/vue/components/BaseRadio',
+  component: BaseRadio,
+}
+
+const actions = {
+  onChange: action('change'),
+  onClick: action('click'),
+}
+
+const Template = (args) => ({
+  components: { BaseRadio },
+  setup: () => ({ args, ...actions }),
+  template: '<BaseRadio v-bind="args" @tooltip-clicked="onClick" @change="onChange" />',
+})
+
+const TemplateWithBackground = (args) => ({
+  components: { BaseRadio },
+  setup: () => ({ args, ...actions }),
+  template: '<BaseRadio class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange" />',
+})
+
+export const Selected = Template.bind({})
+Selected.args = {
+  value: true,
+  modelValue: true,
+  forId: 'my-radio',
+  label: 'This Radio button is selected',
+}
+
+export const SelectedWithBackground = TemplateWithBackground.bind({})
+SelectedWithBackground.args = Selected.args
+
+export const NotSelected = Template.bind({})
+NotSelected.args = {
+  value: false,
+  modelValue: true,
+  forId: 'my-radio',
+  label: 'This Radio button is not selected',
+}
+
+export const WithLabelClass = Template.bind({})
+WithLabelClass.args = {
+  value: false,
+  modelValue: true,
+  forId: 'my-radio',
+  label: 'This radio button has a label class',
+  labelClass: '!text-16-medium',
+}
+
+export const WithDescription = Template.bind({})
+WithDescription.args = {
+  value: false,
+  modelValue: true,
+  forId: 'my-radio',
+  label: 'This radio button has a description',
+  description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam diam leo, semper ut urna ut, tristique placerat dolor. Mauris hendrerit dolor tempus purus fringilla malesuada.',
+}
+
+export const Required = Template.bind({})
+Required.args = {
+  value: true,
+  modelValue: true,
+  forId: 'my-radio',
+  label: 'This Radio button is required',
+  required: true,
+}
+
+export const Disabled = Template.bind({})
+Disabled.args = {
+  value: true,
+  modelValue: true,
+  forId: 'my-radio',
+  label: 'This Radio button is disabled',
+  disabled: true,
+}
+
+export const WithTooltip = Template.bind({})
+WithTooltip.args = {
+  value: true,
+  modelValue: true,
+  forId: 'my-radio',
+  label: 'This Radio button has a tooltip',
+  tooltip: 'Base radio tooltip',
+}
+
+const WithBorderTemplate = (args) => ({
+  components: { BaseRadio },
+  setup: () => ({ args, ...actions }),
+  template: '<BaseRadio class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange" />',
+})
+
+export const WithBorder = WithBorderTemplate.bind({})
+WithBorder.args = {
+  value: true,
+  modelValue: true,
+  forId: 'my-radio',
+  label: 'This Radio has a border',
+}
+
+export const WithBorderDisabled = WithBorderTemplate.bind({})
+WithBorderDisabled.args = {
+  value: true,
+  modelValue: true,
+  disabled: true,
+  forId: 'my-radio',
+  label: 'This Radio has a border and is disabled',
+}
+
+export const SelectedWithBorder = WithBorderTemplate.bind({})
+SelectedWithBorder.args = Selected.args
+
+export const NotSelectedWithBorder = WithBorderTemplate.bind({})
+NotSelectedWithBorder.args = NotSelected.args
+
+export const WithDescriptionWithBorder = WithBorderTemplate.bind({})
+WithDescriptionWithBorder.args = WithDescription.args
+
+export const WithBorderVertical = WithBorderTemplate.bind({})
+WithBorderVertical.args = {
+  ...WithBorder.args,
+  orientation: 'vertical',
+}
+
+export const WithBorderWithDescriptionVertical = WithBorderTemplate.bind({})
+WithBorderWithDescriptionVertical.args = {
+  ...WithDescription.args,
+  orientation: 'vertical',
+}
+
+const WithBorderAndImageTemplate = (args) => ({
+  components: { BaseRadio },
+  setup: () => ({ args, ...actions }),
+  template: `<BaseRadio class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange">
+    <template #icon>
+      <div class="i-ls-twitter-fill" />
+    </template>
+  </BaseRadio>`,
+})
+
+export const WithBorderWithDescriptionWithIconVertical = WithBorderAndImageTemplate.bind({})
+WithBorderWithDescriptionWithIconVertical.args = {
+  ...WithDescription.args,
+  orientation: 'vertical',
+}
+
+const withBorderAndImageTemplate = (args) => ({
+  components: { BaseRadio },
+  setup: () => ({ args, ...actions }),
+  template: `<BaseRadio class="base-choice" v-bind="args" @tooltip-clicked="onClick" @change="onChange">
+    <template #icon>
+      <img src="/outlook.svg" />
+    </template>
+  </BaseRadio>`,
+})
+
+export const WithBorderWithDescriptionWithImageVertical = withBorderAndImageTemplate.bind({})
+WithBorderWithDescriptionWithImageVertical.args = {
+  ...WithDescription.args,
+  orientation: 'vertical',
+}

package/src/components/BaseRadio/BaseRadio.vue

@@ -0,0 +1,153 @@
+<script setup lang="ts">
+import { useSlotsAsComponents } from '../../utils/slot'
+import { computed, inject, ref } from 'vue'
+
+interface BaseFormInputInjectionType {
+  childConfig: { value: any } | undefined,
+  setInputModel: (value: any) => void,
+}
+
+const BaseFormInputInjection = inject<BaseFormInputInjectionType | undefined>('BaseFormInputInjection', undefined)
+
+const props = withDefaults(defineProps<{
+  modelValue?: any,
+  value: any,
+  label?: string,
+  labelContainerClass?: string,
+  labelClass?: string,
+  description?: string,
+  forId?: string,
+  required?: boolean,
+  disabled?: boolean,
+  tooltip?: string,
+  orientation?: 'horizontal' | 'vertical'
+}>(), {
+  modelValue: null,
+  label: undefined,
+  labelContainerClass: undefined,
+  labelClass: undefined,
+  description: undefined,
+  forId: undefined,
+  required: false,
+  disabled: false,
+  tooltip: undefined,
+  orientation: 'horizontal',
+})
+
+const emit = defineEmits<{
+  (e: 'change', a: any): void,
+  (e: 'update:modelValue', a: any): void,
+  (e: 'tooltip-clicked'): void,
+}>()
+
+const slots = useSlotsAsComponents()
+const iconSlot = computed(() => slots.icon ? slots.icon() : null)
+
+const finalCurrentValue = computed(() => BaseFormInputInjection?.childConfig?.value)
+const checked = computed(() => {
+  if (!BaseFormInputInjection) {
+    return props.modelValue === props.value
+  }
+  return finalCurrentValue.value === props.value
+})
+
+function onChange () {
+  if (!BaseFormInputInjection) {
+    emit('update:modelValue', props.value)
+    emit('change', props.value)
+    return false
+  }
+  BaseFormInputInjection.setInputModel(props.value)
+}
+
+const myUid = ref()
+
+myUid.value = `BaseRadio:${uid++}`
+</script>
+
+<template>
+  <div
+    class="base-radio"
+    :class="{
+      'base-radio-disabled': disabled,
+      'with-description': description,
+    }"
+  >
+    <input
+      :id="forId || myUid"
+      :checked="checked"
+      :disabled="disabled"
+      :value="value"
+      type="radio"
+      @change="onChange"
+    >
+    <label
+      :for="forId || myUid"
+      :class="{
+        'label-disabled': disabled,
+        'flex flex-col vertical-padding-large': orientation === 'vertical',
+        'vertical-padding': description && orientation === 'horizontal',
+      }"
+    >
+
+      <div
+        v-if="iconSlot"
+        class="w-4 h-4 icon flex items-center justify-center"
+        :class="[orientation === 'vertical' ? 'mb-2' : 'mr-2']"
+      >
+        <RenderSlot
+          :vnodes="iconSlot"
+        />
+      </div>
+
+      <span
+        v-if="orientation === 'horizontal'"
+        class="input-custom"
+      >
+        <span class="check-radio" />
+      </span>
+
+      <span
+        v-if="label"
+        class="label-custom"
+        :class="{
+          'mb-2 !ml-0 text-center': orientation === 'vertical'
+        }"
+      >
+        <span
+          class="text-grey-700 label"
+          :class="[
+            labelClass,
+          ]"
+          v-html="required ? `${label} *` : label"
+        />
+        <span
+          v-if="tooltip"
+          v-tooltip="tooltip"
+          @click.stop.prevent="$emit('tooltip-clicked')"
+        />
+        <span
+          v-if="description"
+          class="description text-grey-600 block"
+          :class="{
+            'text-center': orientation === 'vertical'
+          }"
+          v-html="description"
+        />
+      </span>
+
+      <span
+        v-if="orientation === 'vertical'"
+        class="input-custom"
+      >
+        <span class="check-radio" />
+      </span>
+
+      <slot name="incentive" />
+    </label>
+  </div>
+</template>
+
+<script lang="ts">
+let uid = 0
+</script>

package/src/css/button.postcss

@@ -342,6 +342,15 @@
     }
   }
 
+  &-alpha-black {
+    @apply text-white bg-alpha-black-800;
+    &:not(:disabled):not(.disabled) {
+      &:hover {
+        @apply bg-alpha-black-600;
+      }
+    }
+  }
+
   &-alpha-white-bg {
     @apply text-white bg-transparent;
     transition: background .5s ease-out;