@teammodlr/ui-kit 1.0.7 → 2.0.0

package/src/components/avatar/style/Avatar.css.ts

@@ -0,0 +1,92 @@
+import { createVar, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+const sizes = {
+    xs: '16px',
+    sm: '24px',
+    md: '32px',
+    lg: '40px',
+    xl: '96px',
+};
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+export const vars = {
+    size: createVar(),
+    radius: createVar(),
+};
+
+export const base = style({
+    width: vars.size,
+    height: vars.size,
+    borderRadius: vars.radius,
+    backgroundColor: themeVars.color.gray[300],
+    boxSizing: 'content-box',
+    cursor: 'inherit',
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    outline: 'none',
+    overflow: 'hidden',
+    position: 'static',
+    border: 0,
+    padding: themeVars.space[0],
+    margin: themeVars.space[1],
+    color: themeVars.color.gray[500],
+    fontSize: themeVars.fontSize.small,
+    alignItems: 'center'
+});
+
+export const size = styleVariants({
+    xs: {
+        vars: {
+            [vars.size]: sizes.xs,
+            [vars.radius]: borderRadiuses.xs,
+        }
+    },
+    sm: {
+        vars: {
+            [vars.size]: sizes.sm,
+            [vars.radius]: borderRadiuses.sm,
+        },
+    },
+    md: {
+        vars: {
+            [vars.size]: sizes.md,
+            [vars.radius]: borderRadiuses.md,
+        },
+    },
+    lg: {
+        vars: {
+            [vars.size]: sizes.lg,
+            [vars.radius]: borderRadiuses.lg,
+        },
+    },
+    xl: {
+        vars: {
+            [vars.size]: sizes.xl,
+            [vars.radius]: borderRadiuses.xl,
+        },
+    },
+});
+
+export const image = style({
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    flex: '1 1 100%'
+})
+
+export const rounded = style({
+    borderRadius: '9999px',
+});
+
+export const outline = style({
+    boxShadow: '0 0 0 2px #FFF'
+});

package/src/components/avatar/style/index.ts

@@ -0,0 +1 @@
+export * from './Avatar.css';

package/src/components/avatargroup/AvatarGroup.vue

@@ -1,32 +1,71 @@
-<template>
-    <div class="m-avatar-group">
-        <slot />
-    </div>
-</template>
-
-<script lang="ts">
-import { defineComponent, provide } from 'vue';
-
-
-export default defineComponent({
-    name: "MAvatarGroup",
-    props: {
-        max: {
-            type: Number,
-            default: 5
-        },
-        size: {
-            type: [Number, String],
-            default: 'md'
-        }
-    },
-    setup(props) {
-
-        provide('avatarGroup', props);
-
-        return {
-            props
-        }
-    }
-})
-</script>
+<template>
+    <ul :class="style.base">
+        <li v-for="(option, index) in avatars" :key="index" :class="style.item">
+            <div style="display: inline-block; position: relative; outline: 0;" :style="{ zIndex: (avatars.length - index)}">
+                <MAvatar :src="option.src" :srcSet="option.srcSet" :alt="option.alt" />
+            </div>
+        </li>
+        <li v-if="options && options.length > max">
+            <MAvatar>
+                +{{ remaining }}
+            </MAvatar>
+        </li>
+    </ul>
+</template>
+
+<script lang="ts">
+import {computed, defineComponent, type PropType, provide, reactive, toRef} from 'vue';
+import * as style from './style';
+import type {AvatarGroupState, Options} from './symbol';
+import type {Size} from "../../types/props";
+import {AVATAR_GROUP_STATE} from "./symbol";
+
+export default defineComponent({
+    name: "MAvatarGroup",
+    components: {
+        MAvatar: () => import('../avatar/Avatar.vue')
+    },
+    props: {
+        options: {
+            type: Array as PropType<Options[]>,
+            default: () => []
+        },
+        max: {
+            type: Number,
+            default: 5
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props) {
+        const state: AvatarGroupState = reactive({
+            size: toRef(props, 'size'),
+            rounded: toRef(props, 'rounded'),
+            max: toRef(props, 'max')
+        })
+        provide(AVATAR_GROUP_STATE, state);
+
+        const avatars = computed(() => {
+            return props.options.slice(0, props.max);
+        });
+
+        const remaining = computed(() => {
+            return props.options.length - props.max;
+        });
+
+        return {
+            style,
+            avatars,
+            remaining
+        }
+    }
+});
+
+
+</script>

package/src/components/avatargroup/examples/basic.vue

@@ -1,11 +1,37 @@
 
 
 <template>
-    <MAvatarGroup>
-        <MAvatar src="https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp" variant="circle" />
-        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/2.jpg" variant="circle" />
-        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/3.jpg" variant="circle" />
-        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/4.jpg" variant="circle" />
-        <MAvatar src="https://cdn.vuetifyjs.com/images/lists/5.jpg" variant="circle" />
-    </MAvatarGroup>
+    <MAvatarGroup size="lg" :options="options" rounded />
 </template>
+
+<script setup lang="ts">
+
+const options = [
+    {
+        src: "https://cdn.discordapp.com/avatars/314170125915783180/9f71af5f78d3188a0c92800c94112496.webp",
+        srcSet: "",
+        alt: "Avatar"
+    },
+    {
+        src: "https://cdn.vuetifyjs.com/images/lists/2.jpg",
+        srcSet: "",
+        alt: "Avatar"
+    },
+    {
+        src: "https://cdn.vuetifyjs.com/images/lists/3.jpg",
+        srcSet: "",
+        alt: "Avatar"
+    },
+    {
+        src: "https://cdn.vuetifyjs.com/images/lists/4.jpg",
+        srcSet: "",
+        alt: "Avatar"
+    },
+    {
+        src: "https://cdn.vuetifyjs.com/images/lists/5.jpg",
+        srcSet: "",
+        alt: "Avatar"
+    }
+]
+
+</script>

package/src/components/avatargroup/examples/index.stories.ts

@@ -6,8 +6,9 @@ import {
 } from "./index";
 
 import {
-    createStory
-} from "@/__storybook__";
+    createStory,
+    sizeArgType
+} from "../../../__storybook__";
 
 export default {
     component: MAvatarGroup,
@@ -16,12 +17,7 @@ export default {
     },
     title: 'Components/Avatar Group',
     argTypes: {
-        size: {
-            control: {
-                type: 'select',
-                options: ['xs', 'sm', 'md', 'lg', 'xl']
-            }
-        },
+        ...sizeArgType()
     }
 }
 

package/src/components/avatargroup/style/AvatarGroup.css.ts

@@ -0,0 +1,21 @@
+import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+
+const sizes = {
+    xs: '16px',
+    sm: '24px',
+    md: '32px',
+    lg: '40px',
+    xl: '96px',
+};
+
+export const base = style({
+    display: 'flex',
+    lineHeight: 1,
+    listStyle: 'none',
+    padding: 0
+});
+
+export const item = style({
+    marginRight: '-10px',
+});

package/src/components/avatargroup/style/index.ts

@@ -0,0 +1 @@
+export * from './AvatarGroup.css';

package/src/components/avatargroup/symbol.ts

@@ -0,0 +1,17 @@
+import type {InjectionKey} from "vue";
+import type {Size} from "../../types/props";
+
+export type Options = {
+    src: string;
+    srcSet: string;
+    alt: string;
+}
+
+
+export interface AvatarGroupState {
+    max: number;
+    size: Size;
+    rounded: boolean;
+}
+
+export const AVATAR_GROUP_STATE: InjectionKey<AvatarGroupState> = Symbol('AVATAR_GROUP_STATE');

package/src/components/badge/Badge.css

@@ -0,0 +1,128 @@
+.m-badge__wrapper {
+    position: relative;
+}
+
+.m-badge {
+    --badge-border-color: var(--white);
+    --badge-background-color: var(--red);
+    --badge-color: var(--white);
+    --badge-line-height: 15px;
+    --badge-font-size: 10px;
+    --badge-padding: 0px 6px;
+    --badge-border-radius: 8px;
+    --badge-translate-x: 45%;
+    --badge-translate-y: -50%;
+    
+    position: absolute;
+    display: inline-block;
+    border: 1px solid var(--badge-border-color);
+    background-color: var(--badge-background-color);
+    color: var(--badge-color);
+    line-height: var(--badge-line-height);
+    font-size: var(--badge-font-size);
+    padding: var(--badge-padding);
+    border-radius: var(--badge-border-radius);
+}
+
+.m-badge__top-right {
+    --badge-translate-x: 45%;
+    --badge-translate-y: -50%;
+    top: 0;
+    right: 0;
+    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
+}
+
+.m-badge__top-left {
+    --badge-translate-x: -45%;
+    --badge-translate-y: -50%;
+    top: 0;
+    left: 0;
+    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
+}
+
+.m-badge__bottom-right {
+    --badge-translate-x: 50%;
+    --badge-translate-y: 45%;
+    bottom: 0;
+    right: 0;
+    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
+}
+
+.m-badge__bottom-left {
+    --badge-translate-x: -50%;
+    --badge-translate-y: 45%;
+    bottom: 0;
+    left: 0;
+    transform: translate(var(--badge-translate-x), var(--badge-translate-y));
+}
+
+.m-badge--blue {
+    --badge-border-color: var(--blue);
+    --badge-background-color: var(--blue);
+    --badge-color: var(--white);
+}
+
+.m-badge--red {
+    --badge-border-color: var(--red);
+    --badge-background-color: var(--red);
+    --badge-color: var(--white);
+}
+
+.m-badge--green {
+    --badge-border-color: var(--green);
+    --badge-background-color: var(--green);
+    --badge-color: var(--white);
+}
+
+.m-badge--yellow {
+    --badge-border-color: var(--yellow);
+    --badge-background-color: var(--yellow);
+    --badge-color: var(--gray-900);
+}
+
+.m-badge--black {
+    --badge-border-color: var(--gray-900);
+    --badge-background-color: var(--gray-900);
+    --badge-color: var(--white);
+}
+
+.m-badge--white {
+    --badge-border-color: var(--gray-300);
+    --badge-background-color: var(--white);
+    --badge-color: var(--gray-900);
+}
+
+.m-badge--xs {
+    --badge-line-height: 10px;
+    --badge-font-size: 8px;
+    --badge-padding: 0px 4px;
+    --badge-border-radius: 5px;
+}
+
+.m-badge--sm {
+    --badge-line-height: 12px;
+    --badge-font-size: 9px;
+    --badge-padding: 0px 5px;
+    --badge-border-radius: 6px;
+}
+
+.m-badge--md {
+    --badge-line-height: 15px;
+    --badge-font-size: 10px;
+    --badge-padding: 0px 6px;
+    --badge-border-radius: 8px;
+}
+
+.m-badge--lg {
+    --badge-line-height: 18px;
+    --badge-font-size: 12px;
+    --badge-padding: 0px 8px;
+    --badge-border-radius: 10px;
+}
+
+.m-badge--xl {
+    --badge-line-height: 20px;
+    --badge-font-size: 14px;
+    --badge-padding: 0px 10px;
+    --badge-border-radius: 12px;
+}

package/src/components/badge/Badge.vue

@@ -0,0 +1,43 @@
+<template>
+    <span :class="baseClass" >
+        <span :class="textClass" secondary>
+            <slot />
+        </span>
+    </span>
+</template>
+
+<script lang="ts">
+import type { Variant } from '../../types/props';
+import { computed, defineComponent, type PropType } from 'vue';
+import * as style from "./style";
+
+export default defineComponent({
+    name: "MBadge",
+    props: {
+        variant: {
+            type: String as PropType<Variant>,
+            default: 'default'
+        },
+        secondary: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props) {
+        const baseClass = computed(() => {
+            return [
+                style.base,
+                style.variant[props.variant],
+                {
+                    [style.secondary[props.variant]]: props.secondary
+                }
+            ]
+        });
+
+        return {
+            textClass: style.text,
+            baseClass
+        }
+    }
+})
+</script>

package/src/components/badge/examples/basic.vue

@@ -0,0 +1,10 @@
+<template>
+    <MBadge secondary>default</MBadge>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const badgeValue = ref(0);
+
+</script>

package/src/components/badge/examples/index.stories.ts

@@ -0,0 +1,21 @@
+import MBadge from "../Badge.vue";
+
+import {
+    MBadgeBasic,
+} from "./index";
+
+import {
+    variantArgType,
+    createStory,
+    sizeArgType
+} from "../../../__storybook__";
+
+export default {
+    component: MBadge,
+    title: 'Components/Badge',
+    argTypes: {
+        ...variantArgType()
+    }
+}
+
+export const Basic = createStory(MBadgeBasic);

package/src/components/badge/examples/index.ts

@@ -0,0 +1 @@
+export { default as MBadgeBasic } from './basic.vue';

package/src/components/badge/style/Badge.css.ts

@@ -0,0 +1,124 @@
+import { createVar, globalStyle, style, styleVariants } from "@vanilla-extract/css";
+import { themeVars } from "../../../styles/theme.css";
+import { fonts } from "../../../styles/typography.css";
+
+const borderRadiuses = {
+    xs: '2px',
+    sm: '3px',
+    md: '4px',
+    lg: '6px',
+    xl: '8px',
+};
+
+const vars = {
+    color: createVar(),
+    backgroundColor: createVar(),
+    radius: createVar(),
+};
+
+export const base = style({
+    vars: {
+        [vars.radius]: borderRadiuses.md,
+    },
+    boxSizing: "border-box",
+    appearance: "none",
+    border: 0,
+    display: "inline-flex",
+    position: "static",
+    borderRadius: vars.radius,
+    backgroundColor: vars.backgroundColor,
+    overflow: "hidden",
+    padding: `${themeVars.space['0.5']} ${themeVars.space[1]}`,
+})
+
+export const text = style({
+    color: vars.color,
+    margin: 0,
+    padding: 0,
+    fontSize: themeVars.fontSize.xsmall,
+    fontVariationSettings: `"wght" ${fonts.INTER.wghts[500]}`,
+    letterSpacing: '0.5px',
+    textTransform: 'uppercase',
+    lineHeight: themeVars.fontSize.base,
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+})
+
+export const variant = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.blue[500],
+            [vars.color]: '#FFFFFF',
+        }
+    },
+    default: {
+        vars: {
+            [vars.color]: 'white',
+            [vars.backgroundColor]: themeVars.color.gray[500],
+        }              
+    },
+    tertiary: {
+        vars: {
+            [vars.color]: themeVars.color.gray[100],
+            [vars.backgroundColor]: themeVars.color.gray[400],
+        }   
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.green[500],
+            [vars.color]: '#FFFFFF',
+        }
+    },
+    warning: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.amber[400],
+            [vars.color]: themeVars.color.gray[800],
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.red[500],
+            [vars.color]: '#FFFFFF',
+        }
+    },
+});
+
+export const secondary = styleVariants({
+    primary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.blue[100],
+            [vars.color]: themeVars.color.blue[600],
+        }
+    },
+    default: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[100],
+            [vars.color]: themeVars.color.gray[600],
+        }              
+    },
+    tertiary: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.gray[100],
+            [vars.color]: themeVars.color.gray[400],
+        }   
+    },
+    success: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.green[100],
+            [vars.color]: themeVars.color.green[600],
+        }
+    },
+    warning: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.amber[100],
+            [vars.color]: themeVars.color.amber[600],
+        }
+    },
+    error: {
+        vars: {
+            [vars.backgroundColor]: themeVars.color.red[100],
+            [vars.color]: themeVars.color.red[600],
+        }
+    },
+});

package/src/components/badge/style/index.ts

@@ -0,0 +1 @@
+export * from './Badge.css';