mediacube-ui-v2 0.0.2 → 0.0.4

package/src/assets/tokens/json/font-weights.json

@@ -0,0 +1,12 @@
+{
+  "$font-weight-normal": "400",
+  "$font-weight-medium": "500",
+  "$font-weight-semi-bold": "600",
+  "$font-weight-bold": "700",
+  "$token-font-weights": {
+    "normal": "400",
+    "medium": "500",
+    "semi-bold": "600",
+    "bold": "700"
+  }
+}

package/src/assets/tokens/json/gradients.json

@@ -0,0 +1,13 @@
+{
+  "$gradient-pink": "linear-gradient(180deg, #F5576C 0%, #F093FB 100%)",
+  "$gradient-violet": "linear-gradient(180deg, #E41AFE 0%, #8035F8 100%)",
+  "$gradient-blue": "linear-gradient(180deg, #1ADBFE 0%, #3580F8 100%)",
+  "$gradient-yellow": "linear-gradient(180deg, #FEE41A 0%, #F89B35 100%)",
+  "$gradient-green": "linear-gradient(180deg, #C9DD4C 0%, #63BE7E 100%)",
+  "$gradient-red": "linear-gradient(180deg, #F26567 0%, #F79440 100%)",
+  "$gradient-purple": "linear-gradient(270deg, #9a47ed 0%, #8446ff 100%)",
+  "$gradient-purple-pink": "linear-gradient(90deg, #722eff 2%, #fe6ffc 100%)",
+  "$gradient-blue-purple": "linear-gradient(90deg, #18bfe3 20%, #8756ff 70%)",
+  "$gradient-dark-blue": "linear-gradient(90deg, #5550EF 0%, #7F4EFF 100%)",
+  "$gradient-primary-radial": "radial-gradient(rgb(179, 211, 255), rgb(62, 132, 244))"
+}

package/src/assets/tokens/json/index.ts

@@ -0,0 +1,37 @@
+import animations from './animations.json'
+import borderRadius from './border-radius.json'
+import boxShadows from './box-shadows.json'
+import colors from './colors.json'
+import durations from './durations.json'
+import easings from './easings.json'
+import fontFamilies from './font-families.json'
+import fontSizes from './font-sizes.json'
+import fontWeights from './font-weights.json'
+import gradients from './gradients.json'
+import letterSpacings from './letter-spacings.json'
+import lineHeights from './line-heights.json'
+import mediaQueries from './media-queries.json'
+import opacities from './opacities.json'
+import sizes from './sizes.json'
+import spacings from './spacings.json'
+import zIndexes from './z-indexes.json'
+
+export {
+  animations,
+  borderRadius,
+  boxShadows,
+  colors,
+  durations,
+  easings,
+  fontFamilies,
+  fontSizes,
+  fontWeights,
+  gradients,
+  letterSpacings,
+  lineHeights,
+  mediaQueries,
+  opacities,
+  sizes,
+  spacings,
+  zIndexes,
+}

package/src/assets/tokens/json/letter-spacings.json

@@ -0,0 +1,4 @@
+{
+  "$letter-spacing-m": "0.4px",
+  "$letter-spacing-l": "1px"
+}

package/src/assets/tokens/json/line-heights.json

@@ -0,0 +1,18 @@
+{
+  "$line-height-150": "12px",
+  "$line-height-200": "16px",
+  "$line-height-250": "20px",
+  "$line-height-300": "24px",
+  "$line-height-400": "32px",
+  "$line-height-500": "40px",
+  "$line-height-600": "48px",
+  "$token-line-heights": {
+    "150": "12px",
+    "200": "16px",
+    "250": "20px",
+    "300": "24px",
+    "400": "32px",
+    "500": "40px",
+    "600": "48px"
+  }
+}

package/src/assets/tokens/json/media-queries.json

@@ -0,0 +1,26 @@
+{
+  "$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": "\"(min-width: 375px)\"",
+    "s": "\"(min-width: 480px)\"",
+    "m": "\"(min-width: 768px)\"",
+    "l": "\"(min-width: 1024px)\"",
+    "xl": "\"(min-width: 1440px)\"",
+    "xs-down": "\"(max-width: 374px)\"",
+    "s-down": "\"(max-width: 479px)\"",
+    "m-down": "\"(max-width: 767px)\"",
+    "l-down": "\"(max-width: 1023px)\"",
+    "xl-down": "\"(max-width: 1439px)\""
+  }
+}

package/src/assets/tokens/json/opacities.json

@@ -0,0 +1,5 @@
+{
+  "$opacity-disabled": "0.6",
+  "$opacity-active": "0.7",
+  "$opacity-hover": "0.8"
+}

package/src/assets/tokens/json/sizes.json

@@ -0,0 +1,42 @@
+{
+  "$size-50": "4px",
+  "$size-100": "8px",
+  "$size-150": "12px",
+  "$size-200": "16px",
+  "$size-250": "20px",
+  "$size-300": "24px",
+  "$size-400": "32px",
+  "$size-500": "40px",
+  "$size-550": "44px",
+  "$size-600": "48px",
+  "$size-700": "56px",
+  "$size-800": "64px",
+  "$size-900": "72px",
+  "$size-1000": "80px",
+  "$token-avatar-sizes": {
+    "300": "24px",
+    "400": "32px",
+    "500": "40px",
+    "600": "48px",
+    "700": "56px",
+    "800": "64px",
+    "900": "72px",
+    "1000": "80px"
+  },
+  "$token-icon-sizes": {
+    "50": "4px",
+    "100": "8px",
+    "150": "12px",
+    "200": "16px",
+    "250": "20px",
+    "300": "24px",
+    "400": "32px",
+    "500": "40px",
+    "550": "44px",
+    "600": "48px",
+    "700": "56px",
+    "800": "64px",
+    "900": "72px",
+    "1000": "80px"
+  }
+}

package/src/assets/tokens/json/spacings.json

@@ -0,0 +1,34 @@
+{
+  "$space-zero": "0",
+  "$space-50": "4px",
+  "$space-100": "8px",
+  "$space-150": "12px",
+  "$space-200": "16px",
+  "$space-250": "20px",
+  "$space-300": "24px",
+  "$space-350": "28px",
+  "$space-400": "32px",
+  "$space-450": "36px",
+  "$space-500": "40px",
+  "$space-600": "48px",
+  "$space-700": "56px",
+  "$space-800": "64px",
+  "$space-900": "72px",
+  "$space-1000": "80px",
+  "$token-spaces": {
+    "50": "4px",
+    "100": "8px",
+    "150": "12px",
+    "200": "16px",
+    "250": "20px",
+    "300": "24px",
+    "400": "32px",
+    "450": "36px",
+    "500": "40px",
+    "600": "48px",
+    "700": "56px",
+    "800": "64px",
+    "900": "72px",
+    "1000": "80px"
+  }
+}

package/src/assets/tokens/json/z-indexes.json

@@ -0,0 +1,12 @@
+{
+  "$z-index-sticky-tabs": "49",
+  "$z-index-dropdown": "100",
+  "$z-index-sticky": "100",
+  "$z-index-overlay-page": "7000",
+  "$z-index-modal": "8000",
+  "$z-index-top-line": "8000",
+  "$z-index-header": "10000",
+  "$z-index-notification": "10001",
+  "$z-index-overlay": "10002",
+  "$z-index-toasted": "10003"
+}

package/src/assets/tokens/letter-spacings.scss

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

package/src/assets/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/assets/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/assets/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/assets/tokens/sizes.scss

@@ -0,0 +1,47 @@
+/**
+* @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: (
+  50: $size-50,
+  100: $size-100,
+  150: $size-150,
+  200: $size-200,
+  250: $size-250,
+  300: $size-300,
+  400: $size-400,
+  500: $size-500,
+  550: $size-550,
+  600: $size-600,
+  700: $size-700,
+  800: $size-800,
+  900: $size-900,
+  1000: $size-1000,
+);

package/src/assets/tokens/spacings.scss

@@ -0,0 +1,38 @@
+/**
+ * @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-450: 36px; /* Additional token */
+$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,
+  450: $space-450, /* Additional token */
+  500: $space-500,
+  600: $space-600,
+  700: $space-700,
+  800: $space-800,
+  900: $space-900,
+  1000: $space-1000,
+);

package/src/assets/tokens/z-indexes.scss

@@ -0,0 +1,14 @@
+/**
+ * @tokens Z-Index
+ */
+
+$z-index-sticky-tabs: 49;
+$z-index-dropdown: 100;
+$z-index-sticky: 100;
+$z-index-overlay-page: 7000;
+$z-index-modal: 8000;
+$z-index-top-line: 8000;
+$z-index-header: 10000;
+$z-index-notification: 10001;
+$z-index-overlay: 10002;
+$z-index-toasted: 10003;

package/src/components/elements/McAvatar/McAvatar.stories.ts

@@ -0,0 +1,71 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+import McAvatar from './McAvatar.vue'
+import { AvatarSizes } from '@/types/styles/AvatarSizes'
+import { Colors } from '@/types/styles/Colors'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+    title: 'McAvatar',
+    component: McAvatar,
+    // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    argTypes: {
+        size: { control: 'select', options: Object.keys(AvatarSizes) },
+        src: { control: 'text' },
+        alt: { control: 'text' },
+        borderColor: { control: 'select', options: Object.keys(Colors) },
+        dotColor: { control: 'select', options: Object.keys(Colors) },
+        rounded: { control: 'boolean' },
+        shadow: { control: 'boolean' },
+        lazy: { control: 'boolean' },
+    },
+    args: {
+        src: 'https://avatars.githubusercontent.com/u/63395408?s=400&u=5f3ae555700cfcacf278425bf37c1433c3ed43c1&v=4',
+        alt: 'I am alternative',
+        size: '1000',
+        borderColor: '',
+        dotColor: '',
+        rounded: true,
+        shadow: false,
+        lazy: false,
+        draggable: false,
+    },
+    parameters: {
+        componentSubtitle: 'Status: Ready',
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/LXNkU1vlAYmydEiC0l0gDa/MC-Design-System?node-id=127%3A1390',
+        },
+    },
+} satisfies Meta<typeof McAvatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+/*
+ *👇 Render functions are a framework specific feature to allow you control on how the component renders.
+ * See https://storybook.js.org/docs/api/csf
+ * to learn how to use render functions.
+ */
+export const Shadow: Story = {
+    args: {
+        shadow: true,
+    },
+};
+export const Size: Story = {
+    args: {
+        size: '300',
+        dotColor: 'purple',
+    },
+};
+export const Draggable: Story = {
+    args: {
+        draggable: true,
+        borderColor: 'red',
+    },
+};
+export const Unrounded: Story = {
+    args: {
+        rounded: false,
+        dotColor: 'purple',
+    },
+};