@teammodlr/ui-kit 1.0.4 → 1.0.5

package/src/components/button/Button.css

@@ -0,0 +1,378 @@
+.m-button {
+    --button-height: 36px;
+    --button-padding: 0 15px;
+    --button-font-size: 15px;
+    --button-border-radius: 4px;
+    --button-font-weight: 500;
+    --button-border-color: var(--gray-200);
+    margin: 0;
+    white-space: nowrap;
+    outline: none;
+    border: 1px solid var(--button-border-color);
+    background-color: transparent;
+    z-index: auto;
+    padding: var(--button-padding);
+    font-size: var(--button-font-size);
+    font-weight: var(--button-font-weight);
+    font-family: inherit;
+    color: var(--gray-600);
+    position: relative;
+    display: inline-flex;
+    flex-shrink: 0;
+    align-items: center;
+    justify-content: center;
+    text-align: center;
+    cursor: pointer;
+    height: var(--button-height);
+    line-height: 1;
+    border-radius: var(--button-border-radius);
+    text-decoration: none;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-button__content {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    min-width: 0px;
+}
+
+
+.m-button.m-button--strong {
+    font-weight: 500;
+}
+
+.m-button--block {
+    display: flex;
+}
+
+.m-button.m-button--icon-left .m-button__content {
+    padding-left: 8px;
+}
+
+.m-button.m-button--icon-right .m-button__content {
+    padding-right: 8px;
+}
+
+.m-button:not(.m-button--disabled):hover {
+    color: var(--blue);
+    --button-border-color: var(--blue);
+}
+
+.m-button:not(.m-button--disabled):focus,
+.m-button:not(.m-button--disabled):active {
+    color: var(--blue-dark);
+    --button-border-color: var(--blue-dark);
+}
+
+.m-button.m-button--secondary {
+    color: var(--gray-500);
+    --button-border-color: var(--white);
+    background-color: var(--white);
+}
+
+.m-button:not(.m-button--disabled).m-button--secondary:hover {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-150);
+    background-color: var(--gray-150);
+}
+
+.m-button:not(.m-button--disabled).m-button--secondary:active,
+.m-button:not(.m-button--disabled).m-button--secondary:focus {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-200);
+    background-color: var(--gray-200);
+}
+
+.m-button.m-button--gray.m-button--secondary {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-100);
+    background-color: var(--gray-100);
+}
+
+.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:hover {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-150);
+    background-color: var(--gray-150);
+}
+
+.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:active,
+.m-button.m-button--gray:not(.m-button--disabled).m-button--secondary:focus {
+    color: var(--gray-600);
+    --button-border-color: var(--gray-200);
+    background-color: var(--gray-200);
+}
+
+/**
+   * Info Button
+  */
+.m-button--blue {
+    color: var(--white);
+    --button-border-color: var(--blue);
+    background-color: var(--blue);
+}
+
+.m-button--blue:not(.m-button--disabled):hover {
+    color: var(--white);
+    --button-border-color: var(--blue-hover);
+    background-color: var(--blue-hover);
+}
+
+.m-button--blue:not(.m-button--disabled):active,
+.m-button--blue:not(.m-button--disabled):focus {
+    color: var(--white);
+    --button-border-color: var(--blue-focus);
+    background-color: var(--blue-focus);
+}
+
+.m-button--blue.m-button--secondary {
+    color: var(--blue-dark);
+    --button-border-color: var(--blue-secondary);
+    background-color: var(--blue-secondary);
+}
+
+.m-button--blue.m-button--secondary:not(.m-button--disabled):hover {
+    color: var(--blue-darker);
+    --button-border-color: var(--blue-secondary-hover);
+    background-color: var(--blue-secondary-hover);
+}
+
+.m-button--blue.m-button--secondary:not(.m-button--disabled):active,
+.m-button--blue.m-button--secondary:not(.m-button--disabled):focus {
+    color: var(--blue-darker);
+    --button-border-color: var(--blue-secondary-focus);
+    background-color: var(--blue-secondary-focus);
+}
+
+/**
+   * Success Button
+  */
+.m-button--green {
+    color: var(--white);
+    --button-border-color: var(--green);
+    background-color: var(--green);
+}
+
+.m-button--green:not(.m-button--disabled):hover {
+    color: var(--white);
+    --button-border-color: var(--green-hover);
+    background-color: var(--green-hover);
+}
+
+.m-button--green:not(.m-button--disabled):focus,
+.m-button--green:not(.m-button--disabled):active {
+    color: var(--white);
+    --button-border-color: var(--green-focus);
+    background-color: var(--green-focus);
+}
+
+.m-button--green.m-button--secondary {
+    color: var(--green-dark);
+    --button-border-color: var(--green-secondary);
+    background-color: var(--green-secondary);
+}
+
+.m-button--green.m-button--secondary:not(.m-button--disabled):hover {
+    color: var(--green-darker);
+    --button-border-color: var(--green-secondary-hover);
+    background-color: var(--green-secondary-hover);
+}
+
+.m-button--green.m-button--secondary:not(.m-button--disabled):focus,
+.m-button--green.m-button--secondary:not(.m-button--disabled):active {
+    color: var(--green-darker);
+    --button-border-color: var(--green-secondary-focus);
+    background-color: var(--green-secondary-focus);
+}
+
+/**
+   * Danger Button
+  */
+.m-button--red {
+    color: var(--white);
+    --button-border-color: var(--red);
+    background-color: var(--red);
+}
+
+.m-button--red:not(.m-button--disabled):hover {
+    color: var(--white);
+    --button-border-color: var(--red-hover);
+    background-color: var(--red-hover);
+}
+
+.m-button--red:not(.m-button--disabled):focus,
+.m-button--red:not(.m-button--disabled):active {
+    color: var(--white);
+    --button-border-color: var(--red-focus);
+    background-color: var(--red-focus);
+}
+
+.m-button--red.m-button--secondary {
+    color: var(--red-dark);
+    --button-border-color: var(--red-secondary);
+    background-color: var(--red-secondary);
+}
+
+.m-button--red.m-button--secondary:not(.m-button--disabled):hover {
+    color: var(--red-darker);
+    --button-border-color: var(--red-secondary-hover);
+    background-color: var(--red-secondary-hover);
+}
+
+.m-button--red.m-button--secondary:not(.m-button--disabled):active,
+.m-button--red.m-button--secondary:not(.m-button--disabled):focus {
+    color: var(--red-darker);
+    --button-border-color: var(--red-secondary-focus);
+    background-color: var(--red-secondary-focus);
+}
+
+/**
+   * Yellow Button
+  */
+.m-button--yellow {
+    color: var(--white);
+    --button-border-color: var(--yellow);
+    background-color: var(--yellow);
+}
+
+.m-button--yellow:not(.m-button--disabled):hover {
+    color: var(--white);
+    --button-border-color: var(--yellow-hover);
+    background-color: var(--yellow-hover);
+}
+
+.m-button--yellow:not(.m-button--disabled):focus,
+.m-button--yellow:not(.m-button--disabled):active {
+    color: var(--white);
+    --button-border-color: var(--yellow-focus);
+    background-color: var(--yellow-focus);
+}
+
+.m-button--yellow.m-button--secondary {
+    color: var(--yellow-dark);
+    --button-border-color: var(--yellow-secondary);
+    background-color: var(--yellow-secondary);
+}
+
+.m-button--yellow.m-button--secondary:not(.m-button--disabled):hover {
+    color: var(--yellow-darker);
+    --button-border-color: var(--yellow-secondary-hover);
+    background-color: var(--yellow-secondary-hover);
+}
+
+.m-button--yellow.m-button--secondary:not(.m-button--disabled):active,
+.m-button--yellow.m-button--secondary:not(.m-button--disabled):focus {
+    color: var(--yellow-darker);
+    --button-border-color: var(--yellow-secondary-focus);
+    background-color: var(--yellow-secondary-focus);
+}
+
+.m-button--xs {
+    --button-height: 22px;
+    --button-padding: 0 6px;
+    --button-font-size: 14px;
+}
+
+.m-button--sm {
+    --button-height: 28px;
+    --button-padding: 0 10px;
+    --button-font-size: 14px;
+}
+
+.m-button--lg {
+    --button-height: 40px;
+    --button-padding: 0 18px;
+    --button-font-size: 18px;
+}
+
+.m-button--xl {
+    --button-height: 44px;
+    --button-padding: 0 22px;
+    --button-font-size: 20px;
+}
+
+.m-button--rounded {
+    border-radius: 34px;
+}
+
+.m-button--rounded.m-button--xs {
+    padding: 0 10px;
+}
+
+.m-button--rounded.m-button--sm {
+    padding: 0 14px;
+}
+
+.m-button--rounded.m-button--md {
+    padding: 0 18px;
+}
+
+.m-button--rounded.m-button--lg {
+    padding: 0 22px;
+}
+
+.m-button--rounded.m-button--xl {
+    padding: 0 26px;
+}
+
+.m-button--disabled {
+    opacity: 0.8;
+    cursor: not-allowed;
+    user-select: none;
+}
+
+.m-button-group {
+    display: inline-flex;
+    vertical-align: middle;
+    position: relative;
+}
+
+/**
+   * Only round the first and last button 
+  */
+
+.m-button-group .m-button:first-child {
+    border-top-left-radius: var(--button-border-radius);
+    border-bottom-left-radius: var(--button-border-radius);
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.m-button-group .m-button:last-child {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    border-top-right-radius: var(--button-border-radius);
+    border-bottom-right-radius: var(--button-border-radius);
+}
+
+.m-button-group .m-button {
+    border-radius: 0;
+}
+
+.m-button-group .m-button:not(:first-child) {
+    border-left: none;
+}
+
+
+.m-button-group .m-button:not(:first-child)::after {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 1px;
+    background-color: transparent;
+    transition: color .3s cubic-bezier(0.4, 0, 0.2, 1), background-color .3s cubic-bezier(0.4, 0, 0.2, 1), border-color .2s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.m-button-group .m-button:hover:not(:first-child)::after {
+    background-color: var(--button-border-color);
+}
+
+.m-button-group--block > .m-button {
+    flex-basis: 100%;
+}
+
+.m-button-group--block {
+    display: flex;
+}

package/src/components/button/Button.vue

@@ -0,0 +1,108 @@
+<template>
+    <component :is="computedTag" :to="to" :href="href" :type="type" :class="computedClasses" :disabled="disabled">
+        <div v-if="hasIconLeft" class="m-button__icon">
+            <slot name="icon-left" />
+        </div>
+        <span class="m-button__content">
+            <slot />
+        </span>
+        <div v-if="hasIconRight" class="m-button__icon">
+            <slot name="icon-right" />
+        </div>
+    </component>
+</template>
+  
+<script lang="ts">
+import { computed, defineComponent, inject } from "vue";
+import type { PropType } from 'vue';
+import type { Color, Size } from "@/types/props";
+
+export default defineComponent({
+    name: "MButton",
+    props: {
+        type: {
+            type: String,
+            default: 'button',
+        },
+        color: {
+            type: String as PropType<Color>,
+            default: ''
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        },
+        rounded: {
+            type: Boolean,
+            default: false
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        },
+        block: {
+            type: Boolean,
+            default: false
+        },
+        secondary: {
+            type: Boolean,
+            default: false
+        },
+        to: {
+            type: [String, Object],
+            default: ''
+        },
+        href: {
+            type: String,
+            default: '',
+        },
+        icon: {
+            type: Boolean,
+            default: false
+        },
+        strong: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, { slots }) {
+        const group = inject('buttonGroup', {
+            groupProps: {},
+            isGroup: false
+        });
+        
+        const hasIconLeft = computed(() => !!(slots['icon-left']));
+        const hasIconRight = computed(() => !!(slots['icon-right']));
+
+        const computedClasses = computed(() => {
+            // @ts-ignore
+            const size = group.groupProps.size || props.size;
+            return [
+                'm-button',
+                `m-button--${size}`,
+                {
+                    [`m-button--${props.color}`]: props.color,
+                    'm-button--rounded': props.rounded,
+                    'm-button--block': props.block,
+                    'm-button--icon': props.icon,
+                    'm-button--secondary': props.secondary,
+                    'm-button--disabled': props.disabled,
+                    'm-button--strong': props.strong,
+                    'm-button--icon-left': hasIconLeft.value,
+                    'm-button--icon-right': hasIconRight.value,
+                }
+            ]
+        });
+
+        const computedTag = computed(() => (props.to ? 'router-link' : props.href ? 'a' : 'button'));
+
+        return {
+            computedClasses,
+            computedTag,
+            hasIconLeft,
+            hasIconRight
+        }
+    }
+})
+</script>
+  

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

@@ -0,0 +1,3 @@
+<template>
+    <MButton>Hello World</MButton>
+</template>

package/src/components/button/examples/colors-secondary.vue

@@ -0,0 +1,8 @@
+<template>
+    <MButton secondary>Default</MButton><br/><br/>
+    <MButton color="gray" secondary>Gray</MButton><br/><br/>
+    <MButton color="blue" secondary>Blue</MButton><br/><br/>
+    <MButton color="green" secondary>Green</MButton><br/><br/>
+    <MButton color="red" secondary>Red</MButton><br/><br/>
+    <MButton color="yellow" secondary>Yellow</MButton><br/><br/>
+</template>

package/src/components/button/examples/colors.vue

@@ -0,0 +1,8 @@
+<template>
+    <MButton>Default</MButton><br/><br/>
+    <MButton color="gray">Gray</MButton><br/><br/>
+    <MButton color="blue">Blue</MButton><br/><br/>
+    <MButton color="green">Green</MButton><br/><br/>
+    <MButton color="red">Red</MButton><br/><br/>
+    <MButton color="yellow">Yellow</MButton><br/><br/>
+</template>

package/src/components/button/examples/disabled.vue

@@ -0,0 +1,3 @@
+<template>
+    <MButton disabled>You can't click me</MButton>
+</template>

package/src/components/button/examples/icon.vue

@@ -0,0 +1,10 @@
+<template>
+    <MButton>
+        <template #icon-left>
+            <svg style="width: 20px; height: 20px;" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M10.5 6h9.75M10.5 6a1.5 1.5 0 11-3 0m3 0a1.5 1.5 0 10-3 0M3.75 6H7.5m3 12h9.75m-9.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-3.75 0H7.5m9-6h3.75m-3.75 0a1.5 1.5 0 01-3 0m3 0a1.5 1.5 0 00-3 0m-9.75 0h9.75" />
+            </svg>
+        </template>
+        Hello World
+    </MButton>
+</template>

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

@@ -0,0 +1,33 @@
+import MButton from "../Button.vue";
+import {
+    MButtonBasic,
+    MButtonSize,
+    MButtonRounded,
+    MButtonColor,
+    MButtonColorSecondary,
+    MButtonDisabled,
+    MButtonIcon
+} from "./index";
+
+import {
+    colorArgType,
+    createStory,
+    sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MButton,
+    title: 'Components/Buttons/Button',
+    argTypes: {
+        ...colorArgType(),
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MButtonBasic);
+export const Size = createStory(MButtonSize);
+export const Rounded = createStory(MButtonRounded);
+export const Colors = createStory(MButtonColor);
+export const ColorsSecondary = createStory(MButtonColorSecondary);
+export const Disabled = createStory(MButtonDisabled);
+export const Icon = createStory(MButtonIcon);

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

@@ -0,0 +1,7 @@
+export { default as MButtonBasic } from './basic.vue';
+export { default as MButtonSize } from './size.vue';
+export { default as MButtonRounded } from './rounded.vue';
+export { default as MButtonColor } from './colors.vue';
+export { default as MButtonColorSecondary } from './colors-secondary.vue';
+export { default as MButtonDisabled } from './disabled.vue';
+export { default as MButtonIcon } from './icon.vue';

package/src/components/button/examples/rounded.vue

@@ -0,0 +1,7 @@
+<template>
+    <MButton size="xs" rounded>Extra Small</MButton><br/><br/>
+    <MButton size="sm" rounded>Small</MButton><br/><br/>
+    <MButton size="md" rounded>Default</MButton><br/><br/>
+    <MButton size="lg" rounded>Large</MButton><br/><br/>
+    <MButton size="xl" rounded>Extra Large</MButton><br/><br/>
+</template>

package/src/components/button/examples/size.vue

@@ -0,0 +1,7 @@
+<template>
+    <MButton size="xs">Extra Small</MButton><br/><br/>
+    <MButton size="sm">Small</MButton><br/><br/>
+    <MButton size="md">Default</MButton><br/><br/>
+    <MButton size="lg">Large</MButton><br/><br/>
+    <MButton size="xl">Extra Large</MButton><br/><br/>
+</template>

package/src/components/buttongroup/ButtonGroup.vue

@@ -0,0 +1,47 @@
+<template>
+    <component
+        :is="tag"
+        :class="computedClasses"
+    >
+        <slot />
+    </component>
+</template>
+
+<script lang="ts">
+import type { Size } from '@/types/props';
+import { defineComponent, provide, type PropType, computed } from 'vue';
+
+export default defineComponent({
+    name: "MButtonGroup",
+    props: {
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        size: {
+            type: String as PropType<Size>,
+            default: 'md'
+        }
+    },
+    setup(props) {
+
+        provide('buttonGroup', {
+            groupProps: props,
+            isGroup: true
+        });
+
+        const computedClasses = computed(() => {
+            return [
+                'm-button-group',
+                {
+                    [`m-button-group--${props.size}`]: props.size
+                }
+            ]
+        });
+
+        return {
+            computedClasses
+        }
+    }
+})
+</script>

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

@@ -0,0 +1,9 @@
+<template>
+    <MButtonGroup>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton>Hello</MButton>
+        <MButton color="red" secondary>Hello</MButton>
+        <MButton color="green">Hello</MButton>
+    </MButtonGroup>
+</template>

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

@@ -0,0 +1,21 @@
+import MButtonGroup from "../ButtonGroup.vue";
+import MButton from "../../button/Button.vue";
+import {
+    MButtonGroupBasic
+} from "./index";
+
+import {
+    createStory,
+    sizeArgType
+} from "@/__storybook__";
+
+export default {
+    component: MButtonGroup,
+    subcomponents: { MButton },
+    title: 'Components/Buttons/Group',
+    argTypes: {
+        ...sizeArgType()
+    }
+}
+
+export const Basic = createStory(MButtonGroupBasic);

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

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