@gitlab/ui 32.29.1 → 32.29.2

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+## [32.29.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.29.1...v32.29.2) (2021-11-01)
+
+
+### Bug Fixes
+
+* **Avatar:** Parse emoji for avatar name ([d23c341](https://gitlab.com/gitlab-org/gitlab-ui/commit/d23c341bb8cef5683bf2d49556dabe4008be76cf))
+
 ## [32.29.1](https://gitlab.com/gitlab-org/gitlab-ui/compare/v32.29.0...v32.29.1) (2021-10-29)
 
 

package/dist/components/base/avatar/avatar.js

@@ -1,4 +1,5 @@
 import { avatarSizeOptions, avatarShapeOptions } from '../../../utils/constants';
+import { getAvatarChar } from '../../../utils/string_utils';
 import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
 
 const IDENTICON_BG_COUNT = 7;
@@ -64,7 +65,7 @@ var script = {
     },
 
     identiconText() {
-      return this.entityName ? this.entityName.charAt(0).toUpperCase() : '';
+      return getAvatarChar(this.entityName);
     }
 
   }

package/dist/utils/string_utils.js

@@ -60,5 +60,20 @@ const splitAfterSymbols = (symbols, string) => {
 
   return textParts;
 };
+const getAvatarChar = name => {
+  if (name) {
+    // Check if first character is an emjoi
+    const match = name.match(/^\p{Emoji}/u);
 
-export { splitAfterSymbols };
+    if (match) {
+      // Return the first match
+      return match[0];
+    }
+
+    return name.charAt(0).toUpperCase();
+  }
+
+  return '';
+};
+
+export { getAvatarChar, splitAfterSymbols };

package/package.json

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

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

@@ -43,6 +43,26 @@ function generateProjectFallbackProps() {
   return props;
 }
 
+function generateEmojiProjectProps() {
+  const defaultSize = avatarSizeOptions[1];
+  const props = {
+    entityId: {
+      type: Number,
+      default: number('entityId', 123),
+    },
+    entityName: {
+      type: String,
+      default: text('entityName', '🦊Tanuki'),
+    },
+    size: {
+      type: Number,
+      default: select('size', avatarSizeOptions, defaultSize),
+    },
+  };
+
+  return props;
+}
+
 function generateTooltipProps() {
   const props = {
     tooltipText: {
@@ -80,6 +100,16 @@ documentedStoriesOf('base/avatar', readme)
         shape="rect" />
     `,
   }))
+  .add('emoji-project-name', () => ({
+    props: generateEmojiProjectProps(),
+    template: `
+      <gl-avatar
+        :entity-name="entityName"
+        :entity-id="entityId"
+        :size="size"
+        shape="rect" />
+    `,
+  }))
   .add('with-tooltip', () => ({
     props: {
       ...generateImageProps(),

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

@@ -1,5 +1,6 @@
 <script>
 import { avatarShapeOptions, avatarSizeOptions } from '../../../utils/constants';
+import { getAvatarChar } from '../../../utils/string_utils';
 
 const IDENTICON_BG_COUNT = 7;
 
@@ -62,7 +63,7 @@ export default {
       return `gl-avatar-identicon-bg${type}`;
     },
     identiconText() {
-      return this.entityName ? this.entityName.charAt(0).toUpperCase() : '';
+      return getAvatarChar(this.entityName);
     },
   },
 };

package/src/utils/string_utils.js

@@ -59,3 +59,17 @@ export const splitAfterSymbols = (symbols, string) => {
 
   return textParts;
 };
+
+export const getAvatarChar = (name) => {
+  if (name) {
+    // Check if first character is an emjoi
+    const match = name.match(/^\p{Emoji}/u);
+    if (match) {
+      // Return the first match
+      return match[0];
+    }
+    return name.charAt(0).toUpperCase();
+  }
+
+  return '';
+};

package/src/utils/string_utils.spec.js

@@ -1,4 +1,4 @@
-import { splitAfterSymbols } from './string_utils';
+import { splitAfterSymbols, getAvatarChar } from './string_utils';
 
 describe('string utils', () => {
   describe('splitAfterSymbols', () => {
@@ -27,4 +27,22 @@ describe('string utils', () => {
       expect(actual.join('')).toEqual(string);
     });
   });
+
+  describe('Avatar name parsing', () => {
+    it('Returns first character of name', () => {
+      expect(getAvatarChar('Some Project')).toBe('S');
+    });
+
+    it('Returns empty if name is empty', () => {
+      expect(getAvatarChar('')).toBe('');
+    });
+
+    it('Returns emoji if it is first character in name', () => {
+      expect(getAvatarChar('🦊Tanuki')).toBe('🦊');
+    });
+
+    it('Returns first character if emoji is not first in name', () => {
+      expect(getAvatarChar('tanuki🦊')).toBe('T');
+    });
+  });
 });