@gitlab/ui 62.3.0 → 62.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gitlab/ui",
-  "version": "62.3.0",
+  "version": "62.5.0",
   "description": "GitLab UI Components",
   "license": "MIT",
   "main": "dist/index.js",
@@ -90,7 +90,7 @@
     "@gitlab/eslint-plugin": "18.3.2",
     "@gitlab/fonts": "^1.2.0",
     "@gitlab/stylelint-config": "4.1.0",
-    "@gitlab/svgs": "3.38.0",
+    "@gitlab/svgs": "3.40.0",
     "@rollup/plugin-commonjs": "^11.1.0",
     "@rollup/plugin-node-resolve": "^7.1.3",
     "@rollup/plugin-replace": "^2.3.2",
@@ -117,7 +117,7 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "babel-preset-vue": "^2.0.2",
     "bootstrap": "4.6.2",
-    "cypress": "^11.2.0",
+    "cypress": "12.10.0",
     "emoji-regex": "^10.0.0",
     "eslint": "8.38.0",
     "eslint-import-resolver-jest": "3.0.2",

package/src/components/base/avatar/avatar.vue

@@ -130,6 +130,7 @@ export default {
     :alt="alt"
     :class="['gl-avatar', { 'gl-avatar-circle': isCircle }, sizeClasses]"
     @error="handleLoadError"
+    v-on="$listeners"
   />
   <div
     v-else
@@ -139,6 +140,7 @@ export default {
       sizeClasses,
       identiconBackgroundClass,
     ]"
+    v-on="$listeners"
   >
     {{ identiconText }}
   </div>

package/src/components/base/avatar_labeled/avatar_labeled.scss

@@ -14,6 +14,7 @@
   &-label {
     @include gl-font-weight-bold;
     @include gl-p-1;
+    @include gl-text-gray-900;
   }
 
   &-sublabel {

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

@@ -63,13 +63,26 @@ describe('avatar labeled', () => {
       buildWrapper({ label, subLabel, labelLink: 'http://label', subLabelLink: 'http://subLabel' });
     });
 
-    it('displays the avatar label link', () => {
-      const labelLink = wrapper.findAllComponents(GlLink).at(0);
-      expect(labelLink.text()).toBe(label);
-      expect(labelLink.attributes('href')).toBe('http://label');
+    describe('with label link', () => {
+      const findLabelLink = () => wrapper.findAllComponents(GlLink).at(0);
+
+      it('displays the label link', () => {
+        const labelLink = findLabelLink();
+        expect(labelLink.text()).toBe(label);
+        expect(labelLink.attributes('href')).toBe('http://label');
+      });
+
+      it('navigates to label link when avatar is clicked', () => {
+        const labelLink = findLabelLink();
+        const labelLinkClickSpy = jest.spyOn(labelLink.element, 'click');
+
+        wrapper.findComponent(Avatar).vm.$emit('click');
+
+        expect(labelLinkClickSpy).toHaveBeenCalled();
+      });
     });
 
-    it('displays the avatar sub-label link', () => {
+    it('displays the sub-label link', () => {
       const subLabelLink = wrapper.findAllComponents(GlLink).at(1);
       expect(subLabelLink.text()).toBe(subLabel);
       expect(subLabelLink.attributes('href')).toBe('http://subLabel');

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

@@ -1,6 +1,7 @@
 import Vue from 'vue';
 import GlBadge from '../badge/badge.vue';
 import GlButton from '../button/button.vue';
+import GlIcon from '../icon/icon.vue';
 import { GlTooltipDirective } from '../../../directives/tooltip';
 import { avatarSizeOptions, avatarShapeOptions, tooltipPlacements } from '../../../utils/constants';
 import avatarPath from '../../../../static/img/avatar.png';
@@ -17,12 +18,14 @@ const generateProps = ({
   size = 32,
   shape = 'circle',
   src = avatarPath,
+  labelLink,
 } = {}) => ({
   label,
   subLabel,
   size,
   shape,
   src,
+  labelLink,
 });
 
 const generateTooltipProps = ({ tooltipText = 'Avatar tooltip', placement = 'top' } = {}) => ({
@@ -111,6 +114,38 @@ export const WithDefaultSlot = (args, { argTypes }) => ({
 });
 WithDefaultSlot.args = generateProps({ size: 64 });
 
+export const WithLinks = (args, { argTypes }) => ({
+  components: { GlAvatarLabeled, GlBadge, GlIcon },
+  props: Object.keys(argTypes),
+  template: `
+      <gl-avatar-labeled
+        :shape="shape"
+        :size="size"
+        :label-link="labelLink"
+        :src="src"
+        :label="label"
+      >
+        <template #meta>
+          <gl-icon
+            v-gl-tooltip="'Public - The project can be accessed without any authentication.'"
+            name="earth"
+            class="gl-text-secondary gl-ml-2"
+          />
+        </template>
+        <div class="gl-max-w-75">
+          <p class="gl-mb-0 gl-mt-2 gl-font-sm">GitLab is an open source end-to-end software development platform with built-in version control, issue tracking, code review, CI/CD, and more. Self-host GitLab on your own servers, in a container, or on a cloud provider.</p>
+        </div>
+      </gl-avatar-labeled>
+    `,
+});
+WithLinks.args = generateProps({
+  size: 48,
+  shape: 'rect',
+  label: 'GitLab.org / GitLab',
+  subLabel: '',
+  labelLink: 'https://gitlab.com/gitlab-org/gitlab',
+});
+
 export default {
   title: 'base/avatar/labeled',
   component: GlAvatarLabeled,

package/src/components/base/avatar_labeled/avatar_labeled.vue

@@ -36,17 +36,37 @@ export default {
     hasSubLabelLink() {
       return Boolean(this.subLabelLink);
     },
+    avatarListeners() {
+      if (this.hasLabelLink) {
+        return {
+          ...this.$listeners,
+          click: this.onAvatarClick,
+        };
+      }
+
+      return this.$listeners;
+    },
+    avatarCssClasses() {
+      return {
+        'gl-cursor-pointer': this.hasLabelLink,
+      };
+    },
+  },
+  methods: {
+    onAvatarClick() {
+      this.$refs.labelLink.$el.click();
+    },
   },
 };
 </script>
 <template>
   <div class="gl-avatar-labeled">
-    <gl-avatar v-bind="$attrs" alt v-on="$listeners" />
+    <gl-avatar v-bind="$attrs" :class="avatarCssClasses" alt v-on="avatarListeners" />
     <div class="gl-avatar-labeled-labels gl-text-left!">
       <div
         class="gl-display-flex gl-flex-wrap gl-align-items-center gl-text-left! gl-mx-n1 gl-my-n1"
       >
-        <gl-link v-if="hasLabelLink" :href="labelLink" class="gl-avatar-link">
+        <gl-link v-if="hasLabelLink" ref="labelLink" :href="labelLink" class="gl-avatar-link">
           <span class="gl-avatar-labeled-label">{{ label }}</span>
         </gl-link>
         <span v-else class="gl-avatar-labeled-label">{{ label }}</span>

package/src/scss/utilities.scss

@@ -5228,6 +5228,14 @@
   min-height: $gl-spacing-scale-8 !important;
 }
 
+.gl-min-h-100vh {
+  min-height: 100vh;
+}
+
+.gl-min-h-100vh\! {
+  min-height: 100vh !important;
+}
+
 .gl-max-w-0 {
   max-width: 0;
 }

package/src/scss/utility-mixins/sizing.scss

@@ -392,6 +392,10 @@
   min-height: $gl-spacing-scale-8;
 }
 
+@mixin gl-min-h-100vh {
+  min-height: 100vh;
+}
+
 @mixin gl-max-w-0 {
   max-width: 0;
 }