@unbabel/samora-vue3-components 0.0.3

package/src/components/Molecules/SamTabs/__tests__/SamTabs.spec.ts

@@ -0,0 +1,131 @@
+import { VueWrapper, shallowMount } from '@vue/test-utils';
+import SamTabs from '@/components/Molecules/SamTabs/SamTabs.vue';
+import { ComponentPublicInstance, nextTick } from 'vue';
+
+describe('Components ::: SamTabs', () => {
+  let wrapper: VueWrapper<ComponentPublicInstance<{}, Record<string, typeof SamTabs>>>;
+
+  interface TabsMethods {
+    setTab: (id: number | string) => void
+  }
+
+  afterEach(() => {
+    wrapper.unmount();
+  });
+
+  it('shows no tabs when empty array passed', () => {
+    wrapper = shallowMount(SamTabs, { props: { tabs: [] } });
+
+    const tabs = wrapper.findAll('.sam-tabs__nav-item').length;
+
+    expect(tabs).toBe(0);
+  });
+
+  it('shows x tabs when x len array passed', () => {
+    wrapper = shallowMount(SamTabs, { props: { tabs: ['Tab 1'] } });
+
+    const tabs = wrapper.findAll('.sam-tabs__nav-item').length;
+
+    expect(tabs).toBe(1);
+  });
+
+  it('shows loading tabs', () => {
+    wrapper = shallowMount(SamTabs, {
+      props: {
+        tabs: ['Tab 1'],
+        loading: true,
+      },
+    });
+
+    const tabs = wrapper.findAll('.is-loading--bar').length;
+
+    expect(tabs).toBe(2);
+  });
+
+  it('selects new tab when setTab is called', async () => {
+    wrapper = shallowMount(SamTabs, { props: { tabs: ['Tab 1', 'Tab 2'] } });
+   
+    (wrapper.vm as unknown as TabsMethods).setTab(1);
+    await nextTick();
+
+    const selectedTab = wrapper.find('.sam-tabs__nav-item.is-selected span').element;
+
+    expect(wrapper.vm.selectedTabIndex).toBe(1);
+    expect(selectedTab.innerHTML).toBe('Tab 2');
+  });
+
+  it('selected previous and next tabs using left and right keyboard arrows', async () => {
+    wrapper = shallowMount(SamTabs, {
+      attachTo: document.body,
+      props: { tabs: ['Tab 1', 'Tab 2', 'Tab 3'] },
+    });
+
+    // checking that by default first tab is selected
+    let selectedTab = wrapper.find('.sam-tabs__nav-item.is-selected');
+
+    expect(wrapper.vm.selectedTabIndex).toBe(0);
+    expect(selectedTab.find('span').element.innerHTML).toBe('Tab 1');
+    expect(document.activeElement).toBe(selectedTab.element);
+
+    // check that last tab is selected when moving left
+    await selectedTab.trigger('keydown.left');
+    selectedTab = wrapper.find('.sam-tabs__nav-item.is-selected');
+
+    expect(wrapper.vm.selectedTabIndex).toBe(2);
+    expect(selectedTab.find('span').element.innerHTML).toBe('Tab 3');
+    expect(document.activeElement).toBe(selectedTab.element);
+
+    // check that first tab is selected when moving right
+    await selectedTab.trigger('keydown.right');
+    selectedTab = wrapper.find('.sam-tabs__nav-item.is-selected');
+
+    expect(wrapper.vm.selectedTabIndex).toBe(0);
+    expect(selectedTab.find('span').element.innerHTML).toBe('Tab 1');
+    expect(document.activeElement).toBe(selectedTab.element);
+  });
+
+  it('navigates tabs using public setTab method', async () => {
+    wrapper = shallowMount(SamTabs, {
+      attachTo: document.body,
+      props: { tabs: ['Tab 1', 'Tab 2', 'Tab 3'] },
+    });
+
+    (wrapper.vm as unknown as TabsMethods).setTab('tab-2');
+    await nextTick();
+
+    const selectedTab = wrapper.find('.sam-tabs__nav-item.is-selected');
+
+    expect(wrapper.vm.selectedTabIndex).toBe(2);
+    expect(selectedTab.find('span').element.innerHTML).toBe('Tab 3');
+    expect(document.activeElement).toBe(selectedTab.element);
+  });
+
+  it('loses focus when esc key is entered', async () => {
+    wrapper = shallowMount(SamTabs, {
+      attachTo: document.body,
+      props: { tabs: ['Tab 1'] },
+    });
+
+    const selectedTab = wrapper.find('.sam-tabs__nav-item[aria-selected]');
+
+    await selectedTab.trigger('keydown.esc');
+
+    expect(document.activeElement).not.toBe(selectedTab);
+  });
+
+  it('does not change tab when selecting disabled tab', async () => {
+    wrapper = shallowMount(SamTabs, {
+      attachTo: document.body,
+      props: { tabs: ['Tab 1', { label: 'Tab 2', disabled: true }, 'Tab 3'] },
+    });
+
+    (wrapper.vm as unknown as TabsMethods).setTab('tab-1');
+    await nextTick();
+
+    const selectedTab = wrapper.find('.sam-tabs__nav-item.is-selected');
+
+    expect(wrapper.vm.selectedTabIndex).toBe(0);
+    expect(selectedTab.find('span').element.innerHTML).toBe('Tab 1');
+    expect(document.activeElement).toBe(selectedTab.element);
+  });
+});

package/src/components/Molecules/SamTextList/SamTextList.stories.ts

@@ -0,0 +1,165 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import { ref } from 'vue';
+import SamTextList from '@/components/Molecules/SamTextList/SamTextList.vue';
+
+const meta: Meta<typeof SamTextList> = {
+  component: SamTextList,
+  tags:['autodocs']
+};
+
+const items = [
+    {
+      label: 'Option label 1',
+      description: 'dummy description',
+      tooltip: 'This will be shown on hover',
+    },
+    {
+      label: 'Option label 2',
+      badge: '5+',
+      hasNotification: true,
+    },
+    {
+      label: 'Option label 3',
+      badge: '12',
+      description: 'A huge amount of words that together can generate a humongous description',
+    },
+    {
+      label: 'Option label 4',
+      hasNotification: true,
+    },
+]
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const TextList: Story = {
+    name: "Text List",
+    render: (args) => ({
+      components: { SamTextList },
+      setup() {    
+        const itemSelected = ref('')
+
+        function clickCallback(item: {label: string}) {
+            itemSelected.value = item.label;
+        }
+
+        return { args, items, itemSelected, clickCallback };
+      },
+      template: `
+        <div style="width: 276px;background-color: white;">
+            <SamTextList
+                v-bind="args"
+                @item-click="clickCallback"
+            />
+        </div>
+        <br/>
+        <p>Item clicked: {{ itemSelected }}</p>
+    `
+    }),
+    args: {
+        items: items
+    } 
+};
+
+export const TextListDivider: Story = {
+    name: "Text List With Divider",
+    render: (args) => ({
+      components: { SamTextList },
+      setup() {    
+        const items = [
+            { label: 'Item 1' },
+            { id: 'divider' },
+            { label: 'Item 2' },
+            { label: 'Item 3' },
+            { id: 'divider' },
+            { label: 'Item 4' },
+        ]
+        
+        return { args, items };
+      },
+      template: `
+        <div style="width: 276px;background-color: white;">
+            <SamTextList
+                :items="items"
+            />
+        </div>
+    `
+    })
+};
+
+export const TextListFeedback: Story = {
+    name: "Text List With Feedback",
+    render: (args) => ({
+      components: { SamTextList },
+      setup() {    
+        const items = [
+            { label: 'Non dangerous action' },
+            { label: 'Non dangerous action', icon: 'alarm' },
+            { id: 'divider' },
+            { label: 'Dangerous action', samStyle: 'danger' },
+            { label: 'Dangerous action', samStyle: 'danger', icon: 'bin' },
+            { label: 'Disabled dangerous action', samStyle: 'danger', icon: 'bin', disabled: true },
+        ]
+
+        return { args, items };
+      },
+      template: `
+        <div style="width: 276px;background-color: white;">
+            <SamTextList
+                :items="items"
+            />
+        </div>
+    `
+    })
+};
+
+export const TextListSlot: Story = {
+    name: "Text List With Slot",
+    render: (args) => ({
+      components: { SamTextList },
+      setup() {    
+        const items = [
+            {
+              label: 'Option label 1',
+              children: [{ label: 'child' }],
+            },
+            {
+              label: 'Option label 2',
+              badge: '5+',
+              hasNotification: true,
+            },
+            {
+              label: 'Option label 3',
+              badge: '25+',
+              hasNotification: true,
+              children: [{ label: 'child' }],
+            },
+            {
+              label: 'Option label 4',
+              badge: '12',
+            },
+            {
+              label: 'Option label 5',
+              hasNotification: true,
+            },
+        ]
+        
+        return { args, items };
+      },
+      template: `
+        <div style="width: 276px;background-color: white;">
+            <SamTextList
+                :items="items"
+            >
+                <template #default="{ item, index }">
+                <div class="p-3 text--body-2">
+                    Item {{ item.label }}
+                    <br />
+                    <span v-if="items[index].children?.length"> has children</span>
+                </div>
+                </template>
+            </SamTextList>
+        </div>
+    `
+    })
+};

package/src/components/Molecules/SamTextList/SamTextList.types.ts

@@ -0,0 +1,7 @@
+import SAMORA_STYLES from '@/utils/constants/samora-styles.enum';
+
+export const TEXT_LIST_ITEM_STYLES = {
+    DANGER: SAMORA_STYLES.DANGER,
+    SUCCESS: SAMORA_STYLES.SUCCESS,
+    DEFAULT: SAMORA_STYLES.DEFAULT,
+};

package/src/components/Molecules/SamTextList/SamTextList.vue

@@ -0,0 +1,96 @@
+<template>
+  <ul class="sam-text-list">
+    <li
+      v-for="(item, index) in parsedItems"
+      :key="`item-${index}`"
+      class="sam-text-list__list-item"
+    >
+      <template v-if="hasDefaultSlot">
+        <slot
+          :item="item"
+          :index="index"
+        />
+      </template>
+      <template v-else>
+        <hr
+          v-if="item.id === 'divider'"
+          class="sam-text-list__divider"
+        />
+        <SamTextListItem
+          v-else
+          :item="item"
+          @click="onClick($event, item)"
+        />
+      </template>
+    </li>
+  </ul>
+</template>
+
+<script>
+import SamTextListItem from '@/components/Molecules/SamTextList/SamTextListItem.vue';
+import { TEXT_LIST_ITEM_STYLES } from '@/components/Molecules/SamTextList/SamTextList.types';
+
+export default {
+  name: 'SamTextList',
+  components: { SamTextListItem },
+  emits: ['item-click'],
+  props: {
+    /**
+     * The items to be shown on the list. They must follow a specific structure.
+     * @type TextListItem[]
+     */
+    items: {
+      required: true,
+      type: Array,
+      default: () => [],
+    },
+  },
+  computed: {
+    parsedItems() {
+      return this.items.map(this.parseItem);
+    },
+    hasDefaultSlot() {
+      return !!this.$slots.default;
+    },
+  },
+  methods: {
+    parseItem(item = {}) {
+      return {
+        id: item.id,
+        label: item.label,
+        badge: item.badge,
+        value: item.value,
+        hasNotification: !!item.hasNotification,
+        disabled: !!item.disabled,
+        icon: item.icon,
+        tooltip: item.tooltip,
+        samStyle: this.validateStyle(item.samStyle),
+        description: item.description,
+      };
+    },
+    validateStyle(style) {
+      if (!Object.values(TEXT_LIST_ITEM_STYLES).includes(style)) {
+        return TEXT_LIST_ITEM_STYLES.DEFAULT;
+      }
+      return style;
+    },
+    onClick($event, item) {
+      $event.stopPropagation();
+      this.$emit('item-click', item);
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.sam-text-list__list-item {
+  position: relative;
+}
+
+.sam-text-list__divider {
+  @extend .m-0;
+  border: none;
+  height: $size--0--fourth;
+  background-color: $neutral--30;
+}
+</style>

package/src/components/Molecules/SamTextList/SamTextListItem.vue

@@ -0,0 +1,243 @@
+<template>
+  <div
+    :id="componentId"
+    :class="['sam-text-list-item', { 'is-disabled': item.disabled }, samStyleClass]"
+    tabindex="-1"
+    v-on="item.disabled ? {} : $attrs"
+  >
+    <SamLabel
+      v-if="loading"
+      loading
+    />
+    <template v-else>
+      <slot name="prepend" />
+      <div v-if="showCustomContent" class="sam-text-list-item__content-wrapper">
+        <div class="sam-text-list-item__content">
+          <SamIcon
+            v-if="item.icon"
+            :icon="item.icon"
+          />
+          <span class="item__label">
+            {{ item.label }}
+          </span>
+          <div
+            v-if="item.hasNotification"
+            class="item__notification-wrapper"
+            :style="injectedStyles"
+          >
+            <span class="item__notification"></span>
+          </div>
+          <SamBadge
+            v-if="item.badge != null"
+            :value="item.badge"
+            type="is-primary"
+            class="item__badge"
+          />
+        </div>
+        <div
+          v-if="item.description"
+          class="item__description__wrapper"
+        >
+          <span class="item__description">{{ item.description }}</span>
+        </div>
+      </div>
+      <slot name="append"></slot>
+    </template>
+    <SamTooltip
+      v-if="item.tooltip"
+      :anchor-name="componentId"
+      :message="item.tooltip"
+      position="top"
+    />
+  </div>
+</template>
+
+<script>
+import SamLabel from '@/components/Atoms/SamLabel/SamLabel.vue';
+import SamBadge from '@/components/Atoms/SamBadge/SamBadge.vue';
+import SamIcon from '@/components/Atoms/SamIcon/SamIcon.vue';
+import SamTooltip from '@/components/Atoms/SamTooltip/SamTooltip.vue';
+import { uuidv4 } from '@/utils/generators';
+import { TEXT_LIST_ITEM_STYLES } from './SamTextList.types';
+
+/**
+ * The SamTextListItem object structure.
+ * @typedef {Object} SamSelectListItem
+ * @property {string} label - The item label.
+ * @property {string} [id] - The item id.
+ * @property {string} [badge] - The badge value.
+ * @property {boolean} [hasNotification] - Adds notification badge.
+ * @property {boolean} [disabled] - Adds disabled state to item.
+ * @property {any} value - The item value.
+ * @property {string} [icon] - The item icon to display.
+ * @property {string} [samStyle] - The item samora style to apply.
+ * @property {string} tooltip - The tooltip shown on item hover.
+ */
+
+export default {
+  name: 'SamTextListItem',
+  components: { SamBadge, SamIcon, SamLabel, SamTooltip },
+  props: {
+    /**
+     * The item to be shown. It must follow a specific structure.
+     * @type SamSelectListItem
+     */
+    item: {
+      type: Object,
+      required: false,
+      default: () => ({
+        label: '',
+        badge: null,
+        hasNotification: false,
+        disabled: false,
+        value: null,
+        icon: null,
+        samStyle: TEXT_LIST_ITEM_STYLES.DEFAULT,
+        id: null,
+        description: null,
+        tooltip: null,
+      }),
+    },
+    /**
+     * Whether to set the list in a loading state
+     * @values true, false
+     */
+    loading: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    /**
+     * Shows custom content
+     * @values true, false
+     */
+     showCustomContent: {
+      type: Boolean,
+      required: false,
+      default: true,
+    }
+  },
+  data() {
+    return {
+      componentId: `item--${this.item.id ?? uuidv4()}`
+    }
+  },
+  computed: {
+    samStyleClass() {
+      if (this.item.samStyle) {
+        return `is-${this.item.samStyle}`;
+      }
+      return '';
+    },
+    injectedStyles() {
+      return {
+        '--notification-margin-left': this.item.badge || this.$slots.append ? '8px' : 'auto',
+      };
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss">
+.sam-text-list-item {
+  @extend .p-4, .text--body-2, .d-inline-flex, .items-center;
+  width: 100%;
+  cursor: pointer;
+  white-space: nowrap;
+  position: relative;
+  column-gap: $size--2;
+  color: $pure--black;
+
+  &:hover {
+    background-color: $informative--surface;
+  }
+
+  &:not(.is-disabled):focus {
+    &:after {
+      @extend .elevation--2, .d-block;
+      content: '';
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      border-radius: $size--1;
+      outline: $size--1 solid $informative--border;
+    }
+
+    background-color: $informative--surface;
+  }
+
+  .item__notification-wrapper {
+    position: relative;
+    align-self: flex-start;
+    width: $size--2;
+    margin-left: var(--notification-margin-left);
+
+    &:not(:last-child) {
+      @extend .mr-2;
+    }
+
+    .item__notification {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: $size--2;
+      height: $size--2;
+      border-radius: $size--2;
+      background-color: $informative--main;
+    }
+  }
+
+  .item__badge {
+    margin-left: auto;
+
+    &:not(:last-child) {
+      @extend .mr-2;
+    }
+  }
+
+  .sam-text-list-item__content-wrapper {
+    @extend .d-flex, .flex-column;
+    row-gap: $size--1;
+    width: 100%;
+
+    .sam-text-list-item__content {
+      @extend .d-inline-flex, .items-center;
+      position: relative;
+      column-gap: $size--2;
+      width: 100%;
+    }
+  }
+
+  .item__description__wrapper {
+    width: 100%;
+    .item__description {
+      @extend .text--caption, .d-block;
+      color: $neutral--80;
+      width: 100%;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
+  &.is-success {
+    background-color: $informative--surface;
+    color: $accent--unbabel-blue;
+  }
+
+  &.is-danger {
+    color: $error--main;
+  }
+
+  &.is-disabled {
+    cursor: not-allowed;
+    background-color: $neutral--20;
+    color: $neutral--60;
+  }
+
+  ::v-deep  .sam-checkbox__input:checked + .sam-checkbox__label {
+    color: $informative--main;
+  }
+}
+</style>