@gitlab/ui 59.5.0 → 60.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "59.5.0",
+  "version": "60.0.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",

package/src/components/base/breadcrumb/breadcrumb.md

@@ -1,22 +1,23 @@
 ## Usage
 
-This component provides a `<slot #avatar>` so an avatar can appear before the first breadcrumb.
+This component also allows for optional avatars on each item.
+
+`avatarPath` should passed along with `text` and `href` in `items`.
+Here is an example of how an item with an avatar should look:
 
 **note:** the component supports passing the property `to` in the list items to enable navigation
 through `vue-router`
 
 ### Example
 
-```html
-<gl-breadcrumb :items="items">
-  <template #avatar>
-    <img 
-      alt=""
-      class="gl-breadcrumb-avatar-tile"
-      src="/path/to/image.png"
-      width="16"
-      height="16"
-    />
-  </template>
-</gl-breadcrumb>
+```js
+items = [
+  {
+    text: 'First item',
+    href: '#',
+    avatarPath: '/avatar.png',
+  },
+];
+
+<gl-breadcrumb :items="items" />
 ```

package/src/components/base/breadcrumb/breadcrumb.scss

@@ -16,14 +16,6 @@ $breadcrumb-max-width: $grid-size * 16;
   }
 }
 
-.gl-breadcrumb-avatar-tile {
-  @include gl-mr-2;
-  @include gl-border-1;
-  @include gl-border-solid;
-  @include gl-border-gray-a-08;
-  @include gl-rounded-base;
-}
-
 // bootstrap overrides
 .gl-breadcrumb-item {
   @include gl-font-sm;

package/src/components/base/breadcrumb/breadcrumb.spec.js

@@ -1,5 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import { nextTick } from 'vue';
+import avatarPath1 from '../../../../static/img/avatar.png';
+import avatarPath3 from '../../../../static/img/avatar_1.png';
 import Breadcrumb, { COLLAPSE_AT_SIZE } from './breadcrumb.vue';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
@@ -7,23 +9,27 @@ describe('Breadcrumb component', () => {
   let wrapper;
 
   const items = [
-    { text: 'first_breadcrumb', href: 'http://gitlab.com' },
+    { text: 'first_breadcrumb', href: 'https://gitlab.com', avatarPath: avatarPath1 },
     {
       text: 'second_breadcrumb',
       to: 'to_value',
     },
-    { text: 'third_breadcrumb', href: 'http://about.gitlab.com' },
+    {
+      text: 'third_breadcrumb',
+      href: 'https://about.gitlab.com',
+      avatarPath: avatarPath3,
+    },
   ];
 
   const extraItems = [
-    { text: 'fourth_breadcrumb', href: 'http://gitlab.com' },
+    { text: 'fourth_breadcrumb', href: 'https://gitlab.com' },
     {
       text: 'fifth_breadcrumb',
       to: 'to_value',
     },
   ];
 
-  const findAvatarSlot = () => wrapper.find('[data-testid="avatar-slot"]');
+  const findAllAvatars = () => wrapper.findAll('[data-testid="avatar"]');
   const findBreadcrumbItems = () => wrapper.findAllComponents(GlBreadcrumbItem);
   const findCollapsedListExpander = () => wrapper.find('[data-testid="collapsed-expander"]');
 
@@ -35,9 +41,6 @@ describe('Breadcrumb component', () => {
   const createComponent = (propsData = { items }) => {
     wrapper = shallowMount(Breadcrumb, {
       propsData,
-      slots: {
-        avatar: '<div data-testid="avatar-slot"></div>',
-      },
       stubs: {
         GlBreadcrumbItem,
       },
@@ -50,19 +53,19 @@ describe('Breadcrumb component', () => {
     ];
   };
 
-  describe('slots', () => {
-    it('has an avatar slot', () => {
+  describe('items', () => {
+    it('has one breadcrumb-item for each item in the items props', () => {
       createComponent();
 
-      expect(findAvatarSlot().exists()).toBe(true);
+      expect(findBreadcrumbItems()).toHaveLength(items.length);
     });
   });
 
-  describe('items', () => {
-    it('has one breadcrumb-item for each item in the items props', () => {
+  describe('avatars', () => {
+    it('renders 2 avatars when 2 avatarPaths are passed', () => {
       createComponent();
 
-      expect(findBreadcrumbItems()).toHaveLength(items.length);
+      expect(findAllAvatars()).toHaveLength(2);
     });
   });
 

package/src/components/base/breadcrumb/breadcrumb.stories.js

@@ -1,24 +1,19 @@
-import avatarPath from '../../../../static/img/avatar.png';
+import avatarPath1 from '../../../../static/img/avatar_1.png';
+import avatarPath2 from '../../../../static/img/avatar_2.png';
 import GlBreadcrumb from './breadcrumb.vue';
 import readme from './breadcrumb.md';
 
 const template = `
     <gl-breadcrumb
         :items="items"
-    >
-      <template #avatar>
-        <img alt=""
-            class="gl-breadcrumb-avatar-tile" src="${avatarPath}"
-            width="16"
-            height="16" />
-      </template>
-    </gl-breadcrumb>
+    />
   `;
 
 const defaultItems = [
   {
     text: 'First item',
     href: '#',
+    avatarPath: avatarPath1,
   },
   {
     text: 'Second item',
@@ -27,6 +22,7 @@ const defaultItems = [
   {
     text: 'Third item',
     href: '#',
+    avatarPath: avatarPath2,
   },
   {
     text: 'Fourth item',

package/src/components/base/breadcrumb/breadcrumb.vue

@@ -2,6 +2,7 @@
 <script>
 import { BBreadcrumb } from 'bootstrap-vue';
 import GlButton from '../button/button.vue';
+import GlAvatar from '../avatar/avatar.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import GlBreadcrumbItem from './breadcrumb_item.vue';
 
@@ -12,6 +13,7 @@ export default {
     BBreadcrumb,
     GlButton,
     GlBreadcrumbItem,
+    GlAvatar,
   },
   directives: {
     GlTooltip: GlTooltipDirective,
@@ -25,9 +27,9 @@ export default {
       type: Array,
       required: true,
       default: () => [{ text: '', href: '' }],
-      validator: (links) => {
-        return links.every((link) => {
-          const keys = Object.keys(link);
+      validator: (items) => {
+        return items.every((item) => {
+          const keys = Object.keys(item);
           return keys.includes('text') && (keys.includes('href') || keys.includes('to'));
         });
       },
@@ -82,8 +84,6 @@ export default {
 </script>
 <template>
   <nav class="gl-breadcrumbs" aria-label="Breadcrumb">
-    <!-- @slot The avatar to display. -->
-    <slot name="avatar"></slot>
     <b-breadcrumb class="gl-breadcrumb-list" v-bind="$attrs" v-on="$listeners">
       <template v-for="(item, index) in items">
         <!-- eslint-disable-next-line vue/valid-v-for (for @vue/compat) -->
@@ -94,8 +94,16 @@ export default {
           :href="item.href"
           :to="item.to"
           :aria-current="getAriaCurrentAttr(index)"
-          >{{ item.text }}</gl-breadcrumb-item
-        >
+          ><gl-avatar
+            v-if="item.avatarPath"
+            :src="item.avatarPath"
+            :size="16"
+            aria-hidden="true"
+            class="gl-breadcrumb-avatar-tile gl-border gl-mr-2 gl-rounded-base!"
+            shape="rect"
+            data-testid="avatar"
+          /><span>{{ item.text }}</span>
+        </gl-breadcrumb-item>
 
         <template v-if="showCollapsedBreadcrumbsExpander(index)">
           <!-- eslint-disable-next-line vue/require-v-for-key (for @vue/compat) -->