mediacube-ui 0.1.7

package/src/tokens/font-sizes.scss

@@ -0,0 +1,23 @@
+/**
+  * @tokens Font Sizes
+  * @presenter FontSize
+  */
+
+$font-size-100: 10px;
+$font-size-200: 13px;
+$font-size-300: 16px;
+$font-size-400: 20px;
+$font-size-500: 28px;
+$font-size-600: 32px;
+$font-size-700: 48px;
+
+$token-font-sizes: (
+  "100": $font-size-100,
+  "200": $font-size-200,
+  "300": $font-size-300,
+  "400": $font-size-400,
+  "500": $font-size-500,
+  "600": $font-size-600,
+  "700": $font-size-700,
+);
+

package/src/tokens/font-weights.scss

@@ -0,0 +1,9 @@
+/**
+ * @tokens Font Weights
+ * @presenter FontWeight
+ */
+
+$font-weight-normal: 400;
+$font-weight-medium: 500;
+$font-weight-semi-bold: 600;
+$font-weight-bold: 700;

package/src/tokens/gradients.scss

@@ -0,0 +1,15 @@
+@import "colors";
+/**
+  * @tokens Gradients
+  * @presenter Gradient
+  */
+$gradient-pink: linear-gradient(180deg, #F5576C 0%, #F093FB 100%); /* Фирменный цвет личного кабинета */
+$gradient-violet: linear-gradient(180deg, #E41AFE 0%, #8035F8 100%); /* Столбики в графике 5 порядка */
+$gradient-blue: linear-gradient(180deg, #1ADBFE 0%, #3580F8 100%); /* Нотификации и столбики в графике 4 порядка */
+$gradient-yellow: linear-gradient(180deg, #FEE41A 0%, #F89B35 100%); /* Столбики в графике 3 порядка */
+$gradient-green: linear-gradient(180deg, #C9DD4C 0%, #63BE7E 100%); /* Столбики в графике 2 порядка */
+$gradient-red: linear-gradient(180deg, #F26567 0%, #F79440 100%); /* Столбики в графике 1 порядка */
+$gradient-purple: linear-gradient(270deg, #a246ff 0%, $color-purple 100%); /* Основной градиент для MCPay */
+
+$gradient-primary-radial: radial-gradient(rgb(179, 211, 255), rgb(62, 132, 244)); /* Radial gradient example */
+

package/src/tokens/letter-spacings.scss

@@ -0,0 +1,6 @@
+/**
+  * @tokens Letter Spacing
+  * @presenter Spacing
+  */
+$letter-spacing-m: 0.4px;
+$letter-spacing-l: 1px;

package/src/tokens/line-heights.scss

@@ -0,0 +1,22 @@
+/**
+ * @tokens Line Heights
+ * @presenter LineHeight
+ */
+
+$line-height-150: 12px; /* Additional token */
+$line-height-200: 16px;
+$line-height-250: 20px; /* Additional token */
+$line-height-300: 24px;
+$line-height-400: 32px;
+$line-height-500: 40px;
+$line-height-600: 48px;
+
+$token-line-heights: (
+  150: $line-height-150,
+  200: $line-height-200,
+  250: $line-height-250,
+  300: $line-height-300,
+  400: $line-height-400,
+  500: $line-height-500,
+  600: $line-height-600,
+);

package/src/tokens/media-queries.scss

@@ -0,0 +1,32 @@
+/**
+ * @tokens Media Queries
+ * @presenter Spacing
+ */
+
+$media-query-xs: "(min-width: 375px)";
+$media-query-s: "(min-width: 480px)";
+$media-query-m: "(min-width: 768px)";
+$media-query-l: "(min-width: 1024px)";
+$media-query-xl: "(min-width: 1440px)";
+
+$media-query-xs-down: "(max-width: 374px)";
+$media-query-s-down: "(max-width: 479px)";
+$media-query-m-down: "(max-width: 767px)";
+$media-query-l-down: "(max-width: 1023px)";
+$media-query-xl-down: "(max-width: 1439px)";
+
+$media-desktop: "(hover: hover) and (pointer: fine)";
+$media-mobile: "(hover: none) and (pointer: coarse)";
+
+$token-media-queries: (
+  "xs": $media-query-xs,
+  "s": $media-query-s,
+  "m": $media-query-m,
+  "l": $media-query-l,
+  "xl": $media-query-xl,
+  "xs-down": $media-query-xs-down,
+  "s-down": $media-query-s-down,
+  "m-down": $media-query-m-down,
+  "l-down": $media-query-l-down,
+  "xl-down": $media-query-xl-down,
+);

package/src/tokens/opacities.scss

@@ -0,0 +1,8 @@
+/**
+  * @tokens Opacities
+  * @presenter Opacity
+  */
+$opacity-disabled: 0.6;
+$opacity-active: 0.7;
+$opacity-hover: 0.8;
+

package/src/tokens/sizes.scss

@@ -0,0 +1,44 @@
+/**
+* @tokens Sizes
+* @presenter Spacing
+*/
+
+$size-50: 4px; /* Additional token */
+$size-100: 8px;
+$size-150: 12px; /* Additional token */
+$size-200: 16px;
+$size-250: 20px; /* Additional token */
+$size-300: 24px;
+$size-400: 32px;
+$size-500: 40px;
+$size-550: 44px; /* Additional token */
+$size-600: 48px;
+$size-700: 56px;
+$size-800: 64px;
+$size-900: 72px;
+$size-1000: 80px;
+
+$token-avatar-sizes: (
+  300: $size-300,
+  400: $size-400,
+  500: $size-500,
+  600: $size-600,
+  700: $size-700,
+  800: $size-800,
+  900: $size-900,
+  1000: $size-1000,
+);
+
+$token-icon-sizes: (
+  200: $size-200,
+  250: $size-250,
+  300: $size-300,
+  400: $size-400,
+  500: $size-500,
+  600: $size-600,
+  700: $size-700,
+  800: $size-800,
+  900: $size-900,
+  1000: $size-1000,
+);
+

package/src/tokens/spacings.scss

@@ -0,0 +1,36 @@
+/**
+ * @tokens Spacings
+ * @presenter Spacing
+ */
+
+$space-zero: 0;
+$space-50: 4px; /* Additional token */
+$space-100: 8px;
+$space-150: 12px; /* Additional token */
+$space-200: 16px;
+$space-250: 20px; /* Additional token */
+$space-300: 24px;
+$space-350: 28px; /* Additional token */
+$space-400: 32px;
+$space-500: 40px;
+$space-600: 48px;
+$space-700: 56px;
+$space-800: 64px;
+$space-900: 72px;
+$space-1000: 80px;
+
+$token-spaces: (
+  50: $space-50, /* Additional token */
+  100: $space-100,
+  150: $space-150, /* Additional token */
+  200: $space-200,
+  250: $space-250, /* Additional token */
+  300: $space-300,
+  400: $space-400,
+  500: $space-500,
+  600: $space-600,
+  700: $space-700,
+  800: $space-800,
+  900: $space-900,
+  1000: $space-1000,
+);

package/src/tokens/z-indexes.scss

@@ -0,0 +1,12 @@
+/**
+ * @tokens Z-Index
+ */
+
+$z-index-dropdown: 100;
+$z-index-sticky: 100;
+$z-index-modal: 9999;
+$z-index-top-line: 9999;
+$z-index-header: 10000;
+$z-index-notification: 10001;
+$z-index-overlay: 10002;
+$z-index-toasted: 10003;

package/src/utils/filters.js

@@ -0,0 +1,11 @@
+import numeral from "numeral"
+
+export const number = (value, decimals = 2) => {
+  if (value == null) return null
+
+  let deciamlsString = "".padStart(decimals, "0")
+
+  return numeral(value)
+    .format("0,0." + deciamlsString)
+    .replace(/,/g, " ")
+}

package/src/utils/getTokens.js

@@ -0,0 +1,41 @@
+import tokens from '../assets/tokens/tokens.json'
+
+const getTokenValue = name => {
+    const tokenData = tokens.variables.find(v => v.name === name)
+    return tokenData.value
+}
+
+const getTokensByType = type => {
+    const filteredTokens = tokens.variables.filter(v => {
+        const regExp = new RegExp(`^\\$${type}-`)
+        return regExp.test(v.name)
+    })
+    const tokenList = {}
+    filteredTokens.forEach(t => {
+        const key = t.name.replace(`$${type}-`, '')
+        tokenList[key] = key
+    })
+    return tokenList
+}
+
+const getTokenGroup = name => {
+    const dataTokens = tokens.variables.find(v => v.name === `$token-${name}`)
+    let tokenList = {}
+    if (!dataTokens) return tokenList
+
+    if ('mapValue' in dataTokens) {
+        dataTokens.mapValue.forEach(t => (tokenList[t.name] = t.name))
+        return tokenList
+    }
+
+    const valueArr = dataTokens.value.replace(/\/\*.+\*\/\s/, '').split(' ')
+    valueArr.forEach(i => {
+        if (i.match(/.+:$/)) {
+            const key = i.slice(0, i.length - 1)
+            tokenList[key] = key
+        }
+    })
+    return tokenList
+}
+
+export { getTokensByType, getTokenGroup, getTokenValue }

package/src/utils/load-icons.js

@@ -0,0 +1,3 @@
+const svgIconsReq = require.context('!!raw-loader!../assets/icons', true, /.\.svg$/)
+const svgIcons = svgIconsReq.keys().map(name => ({ name, content: svgIconsReq(name).default }))
+export default svgIcons

package/src/utils/treeSearch.js

@@ -0,0 +1,30 @@
+export const findParentComponent = ($component, name) => {
+  let $parent = null
+  do {
+    if (!$component) {
+      return null
+    }
+    let $componentParent = $component.$parent
+    if ($componentParent && $componentParent.$options.name === name) {
+      $parent = $componentParent
+    } else {
+      $component = $componentParent
+    }
+  } while ($parent == null)
+  return $parent
+}
+
+export const findChildrenComponents = ($component, name) => {
+  if ($component.$children == null || $component.$children.length === 0) return []
+
+  let $collapses = []
+  $component.$children.forEach($child => {
+    if ($child.$options.name === name) {
+      $collapses = [...$collapses, $child]
+    } else {
+      $collapses = [...$collapses, ...findChildrenComponents($child, name)]
+    }
+  })
+
+  return $collapses
+}

package/src/utils/webFontLoader.js

@@ -0,0 +1,12 @@
+/**
+ * Web Font Loader takes care of Vue Design System’s font loading.
+ * For full documentation, see: https://github.com/typekit/webfontloader
+ */
+import WebFont from 'webfontloader'
+
+WebFont.load({
+    custom: {
+        families: ['Font Awesome 5 Icons:400,900', 'Font Awesome 5 Brands:400'],
+        urls: ['https://maxst.icons8.com/vue-static/landings/line-awesome/line-awesome/1.3.0/css/line-awesome.min.css'],
+    },
+})

package/tests/unit/TaskList.spec.js

@@ -0,0 +1,14 @@
+import Vue from 'vue';
+import TaskList from '../../src/examples/patterns/TaskList/TaskList.vue';
+import { withPinnedTasksData } from '../../src/examples/patterns/TaskList/TaskList.stories';
+
+it('renders pinned tasks at the start of the list', () => {
+  const Constructor = Vue.extend(TaskList)
+  const vm = new Constructor({
+    propsData: { tasks: withPinnedTasksData },
+  }).$mount();
+  const firstTaskPinned = vm.$el.querySelector('.list-item:nth-child(1).TASK_PINNED');
+
+  // We expect the pinned task to be rendered first, not at the end
+  expect(firstTaskPinned).not.toBe(null)
+});