@gitlab/ui 40.2.2 → 40.5.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [40.5.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.4.0...v40.5.0) (2022-05-18)
+
+
+### Features
+
+* **add billing plan colors:** Add utility classes used in billing page ([61de498](https://gitlab.com/gitlab-org/gitlab-ui/commit/61de4980842a1045215f91a7e100cd66e2074fcc))
+
+# [40.4.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.3.0...v40.4.0) (2022-05-17)
+
+
+### Features
+
+* **GlAvatar:** add responsive size support ([bded2c9](https://gitlab.com/gitlab-org/gitlab-ui/commit/bded2c962b40e942a1b0edb2a085d47a3fa91b4e))
+
+# [40.3.0](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.2.2...v40.3.0) (2022-05-17)
+
+
+### Features
+
+* **css:** Implement Markdown table styles ([e2750a6](https://gitlab.com/gitlab-org/gitlab-ui/commit/e2750a6fa61854acdca79838954d7aa305be6f78))
+
 ## [40.2.2](https://gitlab.com/gitlab-org/gitlab-ui/compare/v40.2.1...v40.2.2) (2022-05-16)
 
 

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

@@ -1,8 +1,8 @@
+import _isNumber from 'lodash/isNumber';
 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;
 var script = {
   props: {
@@ -27,18 +27,22 @@ var script = {
       default: 'avatar'
     },
     size: {
-      type: Number,
+      type: [Number, Object],
       required: false,
       default: avatarSizeOptions[1],
       validator: value => {
-        const isValidSize = avatarSizeOptions.includes(value);
+        const sizes = _isNumber(value) ? [value] : Object.values(value);
+        const areValidSizes = sizes.every(size => {
+          const isValidSize = avatarSizeOptions.includes(size);
 
-        if (!isValidSize) {
-          /* eslint-disable-next-line no-console */
-          console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${value}`);
-        }
+          if (!isValidSize) {
+            /* eslint-disable-next-line no-console */
+            console.error(`Avatar size should be one of [${avatarSizeOptions}], received: ${size}`);
+          }
 
-        return isValidSize;
+          return isValidSize;
+        });
+        return areValidSizes;
       }
     },
     shape: {
@@ -48,8 +52,19 @@ var script = {
     }
   },
   computed: {
-    sizeClass() {
-      return `gl-avatar-s${this.size}`;
+    sizeClasses() {
+      if (_isNumber(this.size)) {
+        return `gl-avatar-s${this.size}`;
+      }
+
+      const {
+        default: defaultSize,
+        ...nonDefaultSizes
+      } = this.size;
+      return [`gl-avatar-s${defaultSize || avatarSizeOptions[1]}`, ...Object.entries(nonDefaultSizes).map(_ref => {
+        let [breakpoint, size] = _ref;
+        return `gl-${breakpoint}-avatar-s${size}`;
+      })];
     },
 
     isCircle() {
@@ -76,10 +91,10 @@ var script = {
 const __vue_script__ = script;
 
 /* template */
-var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.src)?_c('img',{class:['gl-avatar', { 'gl-avatar-circle': _vm.isCircle }, _vm.sizeClass],attrs:{"src":_vm.src,"alt":_vm.alt}}):_c('div',{class:[
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return (_vm.src)?_c('img',{class:['gl-avatar', { 'gl-avatar-circle': _vm.isCircle }, _vm.sizeClasses],attrs:{"src":_vm.src,"alt":_vm.alt}}):_c('div',{class:[
     'gl-avatar gl-avatar-identicon',
     { 'gl-avatar-circle': _vm.isCircle },
-    _vm.sizeClass,
+    _vm.sizeClasses,
     _vm.identiconBackgroundClass ]},[_vm._v("\n  "+_vm._s(_vm.identiconText)+"\n")])};
 var __vue_staticRenderFns__ = [];