@gitlab/ui 132.0.1 → 132.0.3

package/dist/tokens/common_story_options.js

@@ -0,0 +1,29 @@
+import TokensStory from './tokens_story';
+
+const createDesignTokenStory = function () {
+  let {
+    tokens = {},
+    containerClass = ''
+  } = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  const Story = (args, _ref) => {
+    let {
+      argTypes
+    } = _ref;
+    return {
+      props: Object.keys(argTypes),
+      components: {
+        TokensStory
+      },
+      provide: {
+        containerClass
+      },
+      template: `<tokens-story v-bind="$props" />`
+    };
+  };
+  Story.args = {
+    tokens
+  };
+  return Story;
+};
+
+export { createDesignTokenStory };

package/dist/tokens/tokens_story.js

@@ -0,0 +1,76 @@
+import { colorFromBackground } from '../utils/utils';
+import { GlTooltipDirective } from '../directives/tooltip/tooltip';
+import GlBadge from '../components/base/badge/badge';
+import __vue_normalize__ from 'vue-runtime-helpers/dist/normalize-component.js';
+
+var script = {
+  name: 'TokensStory',
+  components: {
+    GlBadge
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective
+  },
+  inject: ['containerClass'],
+  props: {
+    tokens: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  methods: {
+    isHex(value) {
+      return value.startsWith('#');
+    },
+    getTokenName(token) {
+      return token.path.filter(Boolean).join('.');
+    },
+    getClasses(value) {
+      if (!this.isHex(value)) return '';
+      const textColorVariant = colorFromBackground(value, 4.5);
+      return {
+        'gl-text-neutral-950': textColorVariant === 'dark',
+        'gl-text-neutral-0': textColorVariant === 'light'
+      };
+    }
+  }
+};
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{class:_vm.containerClass},[_c('ul',{staticClass:"gl-m-0 gl-list-none gl-p-0"},_vm._l((_vm.tokens),function(token){return _c('li',{key:token.name,staticClass:"gl-flex gl-flex-wrap gl-items-center gl-justify-between gl-gap-3 gl-p-3",class:_vm.getClasses(token.$value),style:({ backgroundColor: token.$value })},[_c('code',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],staticClass:"gl-text-inherit",attrs:{"title":token.comment}},[_vm._v("\n        "+_vm._s(_vm.getTokenName(token))+"\n      ")]),_vm._v(" "),_c('div',{staticClass:"gl-flex gl-items-center gl-gap-3"},[(token.$deprecated)?_c('gl-badge',{directives:[{name:"gl-tooltip",rawName:"v-gl-tooltip"}],attrs:{"title":token.comment,"variant":"danger"}},[_vm._v("\n          Deprecated\n        ")]):_vm._e(),_vm._v(" "),_c('code',{staticClass:"gl-text-inherit"},[_vm._v(_vm._s(token.$value))])],1)])}),0)])};
+var __vue_staticRenderFns__ = [];
+
+  /* style */
+  const __vue_inject_styles__ = undefined;
+  /* scoped */
+  const __vue_scope_id__ = undefined;
+  /* module identifier */
+  const __vue_module_identifier__ = undefined;
+  /* functional template */
+  const __vue_is_functional_template__ = false;
+  /* style inject */
+  
+  /* style inject SSR */
+  
+  /* style inject shadow dom */
+  
+
+  
+  const __vue_component__ = /*#__PURE__*/__vue_normalize__(
+    { render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ },
+    __vue_inject_styles__,
+    __vue_script__,
+    __vue_scope_id__,
+    __vue_is_functional_template__,
+    __vue_module_identifier__,
+    false,
+    undefined,
+    undefined,
+    undefined
+  );
+
+export { __vue_component__ as default };

package/dist/utils/breakpoints.js

@@ -0,0 +1,20 @@
+const breakpoints = {
+  xl: 1200,
+  lg: 992,
+  md: 768,
+  sm: 576,
+  xs: 0
+};
+const GlBreakpointInstance = {
+  windowWidth: () => window.innerWidth,
+  getBreakpointSize() {
+    const windowWidth = this.windowWidth();
+    const breakpoint = Object.keys(breakpoints).find(key => windowWidth > breakpoints[key]);
+    return breakpoint;
+  },
+  isDesktop() {
+    return ['xl', 'lg'].includes(this.getBreakpointSize());
+  }
+};
+
+export { GlBreakpointInstance, breakpoints };