Merge pull request #459 from storyblok/develop

Release 66
storyblok · Oct 26, 2023 · 909421b · 909421b
2 parents 64987b0 + 00926ac
commit 909421b
Show file tree

Hide file tree

Showing 27 changed files with 14,650 additions and 10,341 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,6 +6,16 @@ node_modules
 .env.local
 .env.*.local
 
+# Yarn
+.pnp.*
+.yarn/*
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+
 # Log files
 npm-debug.log*
 yarn-debug.log*

diff --git a/src/assets/styles/mixins.scss b/src/assets/styles/mixins.scss
@@ -29,7 +29,7 @@
 @mixin popoverComponent {
   overflow: hidden;
   border: 1px solid $light;
-  border-radius: $s-1;
+  border-radius: $base-border-radius;
   box-shadow: $box-shadow-default;
 }
 

diff --git a/src/components/Avatar/SbAvatar.vue b/src/components/Avatar/SbAvatar.vue
@@ -2,7 +2,7 @@
   <div v-tooltip="avatarTooltipAttrs" :class="avatarClass" v-bind="$attrs">
     <template v-if="showImage">
       <slot>
-        <div class="sb-avatar__image" :style="avatarStyle">
+        <div class="sb-avatar__image" :style="avatarStyle" :data-testid="`${dataTestid}-image`">
           <img
             v-show="isImageLoaded"
             :src="src"
@@ -17,23 +17,23 @@
             :color="fallbackAvatarColor"
           />
         </div>
-        <SbBadge v-if="!!status" v-bind="badgeAttrs" />
+        <SbBadge v-if="!!status" v-bind="badgeAttrs" :data-testid="`${dataTestid}-badge`"/>
       </slot>
     </template>
     <template v-else-if="name || friendlyName">
-      <div :class="avatarInitialsClass">
+      <div :class="avatarInitialsClass" :data-testid="`${dataTestid}-initials`">
         <span>{{ initials }}</span>
         <SbBadge v-if="!!status" v-bind="badgeAttrs" />
       </div>
     </template>
     <div v-if="showTextContainer" class="sb-avatar__text-container">
-      <span v-if="isDescriptionTop" :class="descriptionClass">
+      <span v-if="isDescriptionTop" :class="descriptionClass" :data-testid="`${dataTestid}-top-description`">
         {{ description }}
       </span>
-      <span class="sb-avatar__text">
+      <span class="sb-avatar__text" :data-testid="`${dataTestid}-text`">
         {{ friendlyName || name }}
       </span>
-      <span v-if="isDescriptionBottom" :class="descriptionClass">
+      <span v-if="isDescriptionBottom" :class="descriptionClass" :data-testid="`${dataTestid}-bottom-description`">
         {{ description }}
       </span>
     </div>
@@ -132,6 +132,10 @@ export default {
   },
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-avatar'
+    },
+
     avatarClass() {
       const avatarSizeClass =
         this.size && this.size !== 'normal' && `sb-avatar--${this.size}`

diff --git a/src/components/Badge/SbBadge.vue b/src/components/Badge/SbBadge.vue
@@ -1,9 +1,17 @@
 <template>
   <div :class="activeClasses">
-    <SbIcon v-if="isRenderIcon" :name="iconName" />
-    <span v-if="hasLabelToRender" class="sb-badge__label"
-      ><slot>{{ activeLabel }}</slot></span
+    <SbIcon
+      v-if="isRenderIcon"
+      :name="iconName"
+      :data-testid="`${dataTestid}-icon`"
+    />
+    <span
+      v-if="hasLabelToRender"
+      class="sb-badge__label"
+      :data-testid="`${dataTestid}-active-label`"
     >
+      <slot>{{ activeLabel }}</slot>
+    </span>
     <slot v-else></slot>
   </div>
 </template>
@@ -50,7 +58,7 @@ export default {
     },
   },
 
-  setup(props, { slots }) {
+  setup(props, { slots, attrs }) {
     const isRenderIcon = !props.contract && !isValidNumber(props.number)
     const activeLabel = isValidNumber(props.number) ? props.number : props.label
     const isLabelAllowed = !props.contract && !props.onlyIcon
@@ -67,13 +75,15 @@ export default {
       },
     ])
     const iconName = computed(() => mapIconByTypes[props.type])
+    const dataTestid = computed(() => attrs['data-testid'] || 'sb-badge')
 
     return {
       isRenderIcon,
       hasLabelToRender,
       activeClasses,
       activeLabel,
       iconName,
+      dataTestid,
     }
   },
 }

diff --git a/src/components/DataTable/components/SbDataTableBody.vue b/src/components/DataTable/components/SbDataTableBody.vue
@@ -1,9 +1,10 @@
 <template>
-  <tbody>
+  <tbody :data-testid="dataTestid">
     <SbDataTableBodyRow
       v-for="(row, i) in items"
       v-bind="{ allowSelection, headers, row, selectedRows }"
       :key="i"
+      :data-testid="`${dataTestid}-row__${i}`"
     />
   </tbody>
 </template>
@@ -23,5 +24,10 @@ export default {
     items: sharedProps.items,
     selectedRows: sharedProps.selectedItems,
   },
+  computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-data-table-body'
+    },
+  },
 }
 </script>
diff --git a/src/components/DataTable/components/SbDataTableColumn.vue b/src/components/DataTable/components/SbDataTableColumn.vue
@@ -4,9 +4,9 @@
     :class="computedClasses"
     :width="width"
     :is-sort-icon-always-visible="isSortIconAlwaysVisible"
+    :data-testid="$attrs['data-testid']"
   >
-    <span
-v-if="showLabel" class="sb-data-table__body-cell-label"
+    <span v-if="showLabel" class="sb-data-table__body-cell-label"
       >{{ label }}:</span
     >
     <slot :row="row" />

diff --git a/src/components/DataTable/components/SbDataTableHeader.vue b/src/components/DataTable/components/SbDataTableHeader.vue
@@ -1,14 +1,23 @@
 <template>
-  <thead>
+  <thead :data-testid="dataTestid">
     <tr>
-      <th v-if="allowSelection && isMultiple" class="sb-data-table__head-cell">
-        <SbCheckbox v-model="isActive" :indeterminate="isIndeterminate" />
+      <th
+        v-if="allowSelection && isMultiple"
+        class="sb-data-table__head -cell"
+        :data-testid="`${dataTestid}-checkbox-cell`"
+      >
+        <SbCheckbox
+          v-model="isActive"
+          :indeterminate="isIndeterminate"
+          :data-testid="`${dataTestid}-checkbox`"
+        />
       </th>
       <SbDataTableHeaderCell
         v-for="(elem, index) in headers"
         :key="index"
         :column="elem"
         :sorted-key="sortedKey"
+        :data-testid="`${dataTestid}-cell__${index}`"
         :is-sort-icon-always-visible="isSortIconAlwaysVisible"
       />
     </tr>
@@ -51,6 +60,10 @@ export default {
   },
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-data-table-header'
+    },
+
     context() {
       return this.dataTableContext()
     },

diff --git a/src/components/DataTable/index.js b/src/components/DataTable/index.js
@@ -31,9 +31,13 @@ const SbDataTable = {
   },
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-data-table'
+    },
+
     allRowsSelected() {
       const selectableItems = this.items.filter(
-        (item) => item.selectable !== false
+        (item) => item.selectable !== false,
       )
 
       if (this.selectionMode === 'single' || !this.selectedRows.length)
@@ -61,8 +65,8 @@ const SbDataTable = {
     hasSelectedRowsInList() {
       return this.items.filter((item) =>
         this.selectedRows.some(
-          (row) => JSON.stringify(item) === JSON.stringify(row)
-        )
+          (row) => JSON.stringify(item) === JSON.stringify(row),
+        ),
       )
     },
 
@@ -85,7 +89,9 @@ const SbDataTable = {
       const items = [...this.sortedData]
       const pageChunkIndex = this.pagination.currentPage - 1
       while (items.length > 0) {
-        const pageParam = Object.keys(this.pagination).includes('pageSize') ? 'pageSize' : 'perPage'
+        const pageParam = Object.keys(this.pagination).includes('pageSize')
+          ? 'pageSize'
+          : 'perPage'
         const pageChunk = items.splice(0, this.pagination[pageParam])
         paginatedItems = [...paginatedItems, pageChunk]
       }
@@ -231,14 +237,15 @@ const SbDataTable = {
         })
 
         bodyData = items.map((tableRow, index) => {
-          const columns = children.map((tableData) => {
+          const columns = children.map((tableData, index) => {
             return h(
               SbDataTableColumn,
               {
                 ...tableData.props,
                 row: tableRow,
+                'data-testid': `${this.dataTestid}-column__${index}`,
               },
-              tableData.children
+              tableData.children,
             )
           })
 
@@ -250,8 +257,9 @@ const SbDataTable = {
               row: tableRow,
               selectedRows: this.hasSelectedRowsInList,
               rowId: `${this.rowIdPrefix}-${index}`,
+              'data-testid': `${this.dataTestid}-body-row__${index}`,
             },
-            () => [columns]
+            () => [columns],
           )
         })
       }
@@ -260,6 +268,7 @@ const SbDataTable = {
         'table',
         {
           class: 'sb-data-table__container',
+          'data-testid': this.dataTestid + '-table',
         },
         [
           this.showHeader
@@ -271,6 +280,7 @@ const SbDataTable = {
                 selectionMode: this.selectionMode,
                 sortedKey: this.sortKey,
                 isSortIconAlwaysVisible: this.isSortIconAlwaysVisible,
+                'data-testid': `${this.dataTestid}-header`,
               })
             : null,
           this.sortedData.length && !this.$slots.default
@@ -279,6 +289,7 @@ const SbDataTable = {
                 headers: this.headers,
                 items: this.sortedData,
                 selectedRows: this.hasSelectedRowsInList,
+                'data-testid': `${this.dataTestid}-body`,
               })
             : null,
           this.$slots.default
@@ -292,12 +303,13 @@ const SbDataTable = {
                       selectionMode: this.selectionMode,
                       sortedKey: this.sortKey,
                       isSortIconAlwaysVisible: this.isSortIconAlwaysVisible,
+                      'data-testid': `${this.dataTestid}-header`,
                     })
                   : null,
                 h('tbody', bodyData),
               ]
             : null,
-        ]
+        ],
       )
     }
 
@@ -316,7 +328,7 @@ const SbDataTable = {
         this.hasSelectedRowsInList.length > 0 && renderActions(),
         renderTable(),
         this.isLoading,
-      ]
+      ],
     )
   },
 }

diff --git a/src/components/Icon/Icon.stories.js b/src/components/Icon/Icon.stories.js
@@ -117,7 +117,7 @@ export const StoryblokIcons = (args) => ({
     return { args }
   },
   data: () => ({
-    icons: [...internalIcons],
+    icons: [...Object.keys(internalIcons)],
   }),
   template: `
   <div>

diff --git a/src/components/Minibrowser/Minibrowser.vue b/src/components/Minibrowser/Minibrowser.vue
@@ -9,10 +9,11 @@
   >
     <SbMinibrowserSearch
       v-if="!hideSearch"
+      :data-testid="`${dataTestid}-search`"
       :clear-search-label="clearSearchLabel"
       :model-value="searchInput"
       :placeholder="placeholder"
-      @update:modelValue="handleSearchInput"
+      @update:model-value="handleSearchInput"
       @keydown="handleSearchKeydown"
     />
 
@@ -21,6 +22,7 @@
       <SbMinibrowserBreadcrumbs
         v-if="hasBreadcrumbs"
         :items="internalBreadcrumbs"
+        :data-testid="`${dataTestid}-breadcrumbs`"
       />
 
       <template v-if="hasGroupedItems">
@@ -29,20 +31,29 @@
             v-if="!$slots.list"
             :key="index"
             v-bind="groupItem"
+            :data-testid="`${dataTestid}-list`"
           />
 
           <slot name="list" v-bind="groupItem" />
         </template>
       </template>
 
       <template v-if="hasOtherItems">
-        <SbMinibrowserList v-if="!$slots.list" :items="otherItems" />
+        <SbMinibrowserList
+          v-if="!$slots.list"
+          :items="otherItems"
+          :data-testid="`${dataTestid}-additional-list`"
+        />
 
         <slot name="list" :items="otherItems" />
       </template>
     </div>
 
-    <p v-if="hasNotFilteredElements" class="sb-minibrowser__not-found">
+    <p
+      v-if="hasNotFilteredElements"
+      class="sb-minibrowser__not-found"
+      :data-testid="`${dataTestid}-not-found-text`"
+    >
       {{ notFoundText }}
     </p>
   </div>
@@ -134,6 +145,10 @@ export default {
   }),
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-mini-browser'
+    },
+
     browserContext() {
       return {
         // browser states

diff --git a/src/components/Minibrowser/components/MinibrowserBreadcrumbs.vue b/src/components/Minibrowser/components/MinibrowserBreadcrumbs.vue
@@ -16,6 +16,7 @@
           :is-active="index === lastIndex"
           v-bind="item"
           @click="navigateTo($event, index)"
+          :data-testid="`${dataTestid}-item-${index}`"
         />
 
         <SbBreadcrumbSeparator
@@ -52,6 +53,10 @@ export default {
   },
 
   computed: {
+    dataTestid() {
+      return this.$attrs['data-testid'] || 'sb-mini-browser-breadcrumbs'
+    },
+
     context() {
       return this.browserContext()
     },