diff --git a/src/App.vue b/src/App.vue
index 5a68697310d385af208674d73f4439498b04313f..5838a25512df06c7ee27db0df1a554e7fdd2ef17 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -281,18 +281,51 @@ const options: ISBOption[] = [
const visible = ref(false);
const onClose = () => console.log('close!');
const value = ref();
+const active = ref(false);
+const sliderValue = ref(1);
</script>
<template>
- {{ value }}
<Modal v-model:visible="visible" theme="red" @onClose="onClose"
><template #header>huuuuuuuuuuui</template>Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Eaque explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo
nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam
- repellat saepe temporibus?</Modal
+ repellat saepe temporibus? Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque
+ explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo nesciunt nihil
+ officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas quisquam repellat saepe
+ temporibus?</Modal
>
- <MenuDial :items="[{ label: 'First' }]" />
+ <MenuDial
+ v-model:active="active"
+ theme="sky"
+ direction="right"
+ :items="[
+ {
+ label: 'font-family',
+ theme: 'green',
+ link: 'https://developer.mozilla.org/en-US/docs/Web/CSS/font-family',
+ linkBlank: true,
+ textStyle: 'bold',
+ },
+ {
+ label: 'Second',
+ theme: 'red',
+ textStyle: 'italic',
+ },
+ ]"
+ >
+ <template #1IconBefore>
+ <AnchorLinkIcon size="20" color="white" />
+ </template>
+ <template #2IconBefore>
+ <CrossIcon color="white" />
+ </template>
+ <template #2IconAfter>
+ <CrossIcon color="white" />
+ </template>
+ </MenuDial>
<Slider
+ v-model:value="sliderValue"
:options="sliderOptions"
orientation="vertical"
width="400"
@@ -330,7 +363,10 @@ const value = ref();
recusandae voluptatibus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque
blanditiis consectetur cum delectus ducimus eius est hic incidunt iusto molestiae odio optio
reiciendis reprehenderit saepe tempora vel, veniam veritatis voluptates. Lorem ipsum dolor sit
- amet, consectetur adipisicing elit.
+ amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+ Eaque explicabo, facere fuga hic id impedit magnam maiores minima necessitatibus, nemo
+ nesciunt nihil officia, pariatu nemo nesciunt nihil officia, pariatur praesentium quas
+ quisquam repellat saepe temporibus?
</p>
<template #footer>
pizdwertyukilokl,kmjhgfw ewesrdtyukilo,kmjng eartyukikdhgfgjhklj.,kga</template
diff --git a/src/assets/components.css b/src/assets/components.css
index f3d23e73a5ba075dccb854ed483b1a197ad809cb..6ad19a0c418960dc3616edb589a34d071fcea464 100644
--- a/src/assets/components.css
+++ b/src/assets/components.css
@@ -11,3 +11,7 @@
width: 8px;
height: 8px;
}
+::-webkit-scrollbar-thumb {
+ border-radius: 5px;
+ background-color: #888;
+}
diff --git a/src/common/interfaces/common.ts b/src/common/interfaces/common.ts
index 47caefd210f40e0359d42ede5912035d9666c609..7ff7e70be1d1b1a5f75dae47b36135593e55b09c 100644
--- a/src/common/interfaces/common.ts
+++ b/src/common/interfaces/common.ts
@@ -23,6 +23,8 @@ export type TSize = 'small' | 'medium' | 'large' | 'huge';
export type TTextStyle = 'bold' | 'italic';
+export type TDirection = 'up' | 'right' | 'down' | 'left';
+
export type TPosition = 'top' | 'right' | 'bottom' | 'left';
export type TExpandedPosition = TPosition | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 9b5e58b8fb5946a7b0b95d829f7b857d1ab52dde..8d663ab5a251804b593200f44f06cc24c09cd124 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -1,5 +1,6 @@
import type {
TBorder,
+ TDirection,
TExpandedPosition,
TIcons,
TPosition,
@@ -32,11 +33,14 @@ export interface IMDProps {
label: string;
theme?: string;
textStyle?: TTextStyle;
+ link?: string;
+ linkBlank?: boolean;
onClick?: () => void;
}[];
size?: TSize;
theme?: string;
- direction?: TPosition;
+ direction?: TDirection;
+ // direction?: TDirection | 'circle';
}
export interface ISliderProps {
diff --git a/src/stories/components/Button/Button.stories.ts b/src/stories/components/Button/Button.stories.ts
index 694b585956c357e78dd9355805b405d43519fe59..bdbacf43e8e2de1c35b2a953afda4b6278444e16 100644
--- a/src/stories/components/Button/Button.stories.ts
+++ b/src/stories/components/Button/Button.stories.ts
@@ -80,10 +80,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof Button>;
export default meta;
diff --git a/src/stories/components/Divider/Divider.stories.ts b/src/stories/components/Divider/Divider.stories.ts
index 86b93fd29052f20f91fb443f91b7a230f64df24c..b7a635072f60e90f550c45dec65c27d0e215c77e 100644
--- a/src/stories/components/Divider/Divider.stories.ts
+++ b/src/stories/components/Divider/Divider.stories.ts
@@ -37,11 +37,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- // onClick: fn(),
- },
+ args: {},
} satisfies Meta<typeof Divider>;
export default meta;
diff --git a/src/stories/components/Drawer/Drawer.stories.ts b/src/stories/components/Drawer/Drawer.stories.ts
index f29ee2cd4225bf1a76d84bd71ca40a2ed6b86b2a..cd0c0de42a74321505e837c0b8647ea3ddfb567c 100644
--- a/src/stories/components/Drawer/Drawer.stories.ts
+++ b/src/stories/components/Drawer/Drawer.stories.ts
@@ -2,7 +2,6 @@ import type { Meta, StoryObj } from '@storybook/vue3';
import Drawer from './Drawer.vue';
import { iconsSet } from '@/common/constants/icons';
-import { fn } from '@storybook/test';
const meta: Meta = {
title: 'Components/Drawer',
@@ -48,11 +47,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- onClose: fn(),
- },
+ args: {},
} satisfies Meta<typeof Drawer>;
export default meta;
diff --git a/src/stories/components/Drawer/Drawer.vue b/src/stories/components/Drawer/Drawer.vue
index 0208cdd39a7bab493e9ffed99c523a2be381a429..913796fe566dac8f8657b5fd6dfebc04f98ec446 100644
--- a/src/stories/components/Drawer/Drawer.vue
+++ b/src/stories/components/Drawer/Drawer.vue
@@ -46,7 +46,7 @@ const drawerWidth = computed(() => {
drawerBackgroundOpened: visible,
},
]"
- @click.prevent="dismissible ? (visible = false) : false"
+ @click.prevent="dismissible ? (visible = false) : ''"
></section>
<section
:style="`color: ${textColor}; background-color: ${themeColor}`"
@@ -150,6 +150,7 @@ const drawerWidth = computed(() => {
flex: 1 1 auto;
overflow: auto;
margin: 10px;
+ padding-right: 10px;
}
.drawerFooter {
padding: 10px 10px 0 10px;
diff --git a/src/stories/components/Modal/Modal.stories.ts b/src/stories/components/Modal/Modal.stories.ts
index 4f574932fea065a83d90dcb02db7c411f9400b96..b23779a6d548c112db0372571eb43b2e7a0ba5c3 100644
--- a/src/stories/components/Modal/Modal.stories.ts
+++ b/src/stories/components/Modal/Modal.stories.ts
@@ -57,10 +57,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof Modal>;
export default meta;
diff --git a/src/stories/components/Modal/Modal.vue b/src/stories/components/Modal/Modal.vue
index fec46a3b8ce121c2efa31cf5454b003c9c3c8df7..1ebe15a779132e088c5cd524a2edfab02dd9d1ed 100644
--- a/src/stories/components/Modal/Modal.vue
+++ b/src/stories/components/Modal/Modal.vue
@@ -85,8 +85,8 @@ document.addEventListener('keydown', onKeydown);
position: fixed;
top: -100%;
left: -100%;
- width: 250vw;
- height: 250vh;
+ width: 200vw;
+ height: 200vh;
background-color: rgba(0, 0, 0, 0.5);
z-index: -50;
opacity: 0;
diff --git a/src/stories/components/SelectButton/SelectButton.stories.ts b/src/stories/components/SelectButton/SelectButton.stories.ts
index 9157794f0e6aaffc6393bacdb94f0f6ea4f96d68..0e7f8c88b58e34fb32461fe14996c6aa1e4046c4 100644
--- a/src/stories/components/SelectButton/SelectButton.stories.ts
+++ b/src/stories/components/SelectButton/SelectButton.stories.ts
@@ -1,7 +1,6 @@
import type { Meta, StoryObj } from '@storybook/vue3';
import SelectButton from './SelectButton.vue';
-import { fn } from '@storybook/test';
const meta: Meta = {
title: 'Components/SelectButton',
@@ -16,7 +15,7 @@ const meta: Meta = {
},
argTypes: {
options: {
- control: 'array',
+ control: 'object',
},
size: { control: 'select', options: ['small', 'medium', 'large', 'huge'] },
rounded: { control: 'boolean' },
@@ -62,11 +61,7 @@ const meta: Meta = {
},
disabled: { control: 'boolean' },
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- onClick: fn(),
- },
+ args: {},
} satisfies Meta<typeof SelectButton>;
export default meta;
diff --git a/src/stories/components/Slider/Slider.stories.ts b/src/stories/components/Slider/Slider.stories.ts
index 78f3ed093127b2696f7a69453a7373ac41ac6f91..d465efa91f311e07eb90f277f984c23d426e6824 100644
--- a/src/stories/components/Slider/Slider.stories.ts
+++ b/src/stories/components/Slider/Slider.stories.ts
@@ -63,10 +63,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof Slider>;
export default meta;
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
index 4083f33a32b19178615341aa8f94126a860b23c3..c003e865f3bf2d5596f363b3e9cc938ca8fe645c 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.stories.ts
@@ -59,10 +59,7 @@ const meta: Meta = {
darkNegative: { control: 'boolean' },
disabled: { control: 'boolean' },
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof ToggleSwitch>;
export default meta;
diff --git a/src/stories/components/ToggleSwitch/ToggleSwitch.vue b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
index c61184ac4c60e0ebaee5463ca237669bd9ee8b3b..503feb5e515694159db475cda77619426bfc28df 100644
--- a/src/stories/components/ToggleSwitch/ToggleSwitch.vue
+++ b/src/stories/components/ToggleSwitch/ToggleSwitch.vue
@@ -77,7 +77,7 @@ const sizes = computed(() => {
<span
:style="`background-color: ${disabled ? '#e1e7f1 !important' : themeColor}; border-radius: ${sizes.borderRadius}px;`"
:class="[
- 'activeBackground',
+ 'background',
{
inactiveBackground: !active && !disabled,
},
@@ -94,20 +94,20 @@ const sizes = computed(() => {
.switcher {
position: relative;
}
-.activeBackground {
+.background {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
- transition: background-color 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
}
.inactiveBackground {
background-color: v-bind(inactiveColor) !important;
- transition: background-color 0.2s ease-in-out;
+ transition: all 0.2s ease-in-out;
}
-.switcher:hover .inactiveBackground {
+.switcher:hover .background {
filter: brightness(90%);
}
.switcherCircle {
diff --git a/src/stories/components/TreeList/TreeItems.vue b/src/stories/components/TreeList/TreeItems.vue
index f3cad67f5308c3601d400c16710bf9af9ed35b10..2dd704c4cfb2560631e267385cfc108865434864 100644
--- a/src/stories/components/TreeList/TreeItems.vue
+++ b/src/stories/components/TreeList/TreeItems.vue
@@ -48,13 +48,6 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
"
size="17"
/>
- <component
- :is="iconsSet[item.iconBefore]"
- v-if="item.iconBefore"
- :color="convert500ThemeToColor(item.iconColor)"
- style="min-width: 17px"
- size="17"
- />
<a
:href="item.link"
:target="item.linkBlank ? '_blank' : '_self'"
@@ -76,15 +69,20 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
emit('onClick', item.link);
}
"
- >{{ item.label }}</a
- >
- <component
- :is="iconsSet[item.iconAfter]"
- v-if="item.iconAfter"
- :color="convert500ThemeToColor(item.iconColor)"
- style="min-width: 17px"
- size="17"
- />
+ ><component
+ :is="iconsSet[item.iconBefore]"
+ v-if="item.iconBefore"
+ :color="convert500ThemeToColor(item.iconColor)"
+ style="min-width: 17px"
+ size="17" />
+ <span>{{ item.label }}</span
+ ><component
+ :is="iconsSet[item.iconAfter]"
+ v-if="item.iconAfter"
+ :color="convert500ThemeToColor(item.iconColor)"
+ style="min-width: 17px"
+ size="17"
+ /></a>
</section>
<section class="children">
<TreeItems
@@ -107,7 +105,8 @@ const emit = defineEmits(['toggleIsOpen', 'onClick']);
background-color: v-bind(themeColor);
}
.label {
- display: inline-block;
+ display: flex;
+ gap: 5px;
position: relative;
padding: 4px 5px;
background-color: v-bind(themeColor);
diff --git a/src/stories/components/TreeList/TreeList.stories.ts b/src/stories/components/TreeList/TreeList.stories.ts
index 51b0fda2d63f5d8b282b6aa4ad6ac63cd4a57280..9be416a753c45db4cd877b3094f1b0cce4ea8165 100644
--- a/src/stories/components/TreeList/TreeList.stories.ts
+++ b/src/stories/components/TreeList/TreeList.stories.ts
@@ -39,10 +39,7 @@ const meta: Meta = {
],
},
},
- args: {
- // primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- },
+ args: {},
} satisfies Meta<typeof TreeList>;
export default meta;
diff --git a/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.stories.ts b/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.stories.ts
deleted file mode 100644
index 26aad4a3f4543620d0a2d6e59ad4daff7777d01b..0000000000000000000000000000000000000000
--- a/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.stories.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import { fn } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import Button from './ButtonStorybook.vue';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta: Meta = {
- title: 'Examples/Button',
- component: Button,
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
- argTypes: {
- size: { control: 'select', options: ['small', 'medium', 'large'] },
- backgroundColor: { control: 'color' },
- },
- args: {
- primary: false,
- // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
- onClick: fn(),
- },
-} satisfies Meta<typeof Button>;
-
-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 Primary: Story = {
- args: {
- primary: true,
- label: 'Button',
- },
-};
-
-export const Secondary: Story = {
- args: {
- primary: false,
- label: 'Button',
- },
-};
-
-export const Large: Story = {
- args: {
- label: 'Button',
- size: 'large',
- },
-};
-
-export const Small: Story = {
- args: {
- label: 'Button',
- size: 'small',
- },
-};
-
-export const DefaultButton: Story = {
- args: {
- primary: false,
- label: 'Button',
- },
-};
diff --git a/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue b/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue
deleted file mode 100644
index 0a7be639a4e21139953f46ea4b21d0c1cbf8564a..0000000000000000000000000000000000000000
--- a/src/stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue
+++ /dev/null
@@ -1,49 +0,0 @@
-<template>
- <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-</template>
-
-<script lang="ts" setup>
-import './buttonStorybook.css';
-import { computed } from 'vue';
-
-const props = withDefaults(
- defineProps<{
- /**
- * The label of the button
- */
- label: string;
- /**
- * primary or secondary button
- */
- primary?: boolean;
- /**
- * size of the button
- */
- size?: 'small' | 'medium' | 'large';
- /**
- * background color of the button
- */
- backgroundColor?: string;
- }>(),
- { primary: false },
-);
-
-const emit = defineEmits<{
- (e: 'click', id: number): void;
-}>();
-
-const classes = computed(() => ({
- 'storybook-button': true,
- 'storybook-button--primary': props.primary,
- 'storybook-button--secondary': !props.primary,
- [`storybook-button--${props.size || 'medium'}`]: true,
-}));
-
-const style = computed(() => ({
- backgroundColor: props.backgroundColor,
-}));
-
-const onClick = () => {
- emit('click', 1);
-};
-</script>
diff --git a/src/stories/components/examples/ExampleStorybookButton/buttonStorybook.css b/src/stories/components/examples/ExampleStorybookButton/buttonStorybook.css
deleted file mode 100644
index 94d674b7614d9ccd5d005df17fdb2a7c2bc287f4..0000000000000000000000000000000000000000
--- a/src/stories/components/examples/ExampleStorybookButton/buttonStorybook.css
+++ /dev/null
@@ -1,30 +0,0 @@
-.storybook-button {
- display: inline-block;
- cursor: pointer;
- border: 0;
- border-radius: 3em;
- font-weight: 700;
- line-height: 1;
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-.storybook-button--primary {
- background-color: #1ea7fd;
- color: white;
-}
-.storybook-button--secondary {
- box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
- background-color: transparent;
- color: #333;
-}
-.storybook-button--small {
- padding: 10px 16px;
- font-size: 12px;
-}
-.storybook-button--medium {
- padding: 11px 20px;
- font-size: 14px;
-}
-.storybook-button--large {
- padding: 12px 24px;
- font-size: 16px;
-}
diff --git a/src/stories/components/examples/ExampleStorybookHeader/Header.stories.ts b/src/stories/components/examples/ExampleStorybookHeader/Header.stories.ts
deleted file mode 100644
index 6f29a1a63bfbfcaf18eabcf2ff90bc82c9b8323c..0000000000000000000000000000000000000000
--- a/src/stories/components/examples/ExampleStorybookHeader/Header.stories.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { fn } from '@storybook/test';
-import type { Meta, StoryObj } from '@storybook/vue3';
-
-import MyHeader from './Header.vue';
-
-const meta: Meta = {
- /* 👇 The title prop is optional.
- * See https://storybook.js.org/docs/configure/#configure-story-loading
- * to learn how to generate automatic titles
- */
- title: 'Examples/Header',
- component: MyHeader,
- render: (args: unknown) => ({
- components: { MyHeader },
- setup() {
- return { args };
- },
- template: '<my-header :user="args.user" />',
- }),
- parameters: {
- // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
- layout: 'fullscreen',
- },
- args: {
- onLogin: fn(),
- onLogout: fn(),
- onCreateAccount: fn(),
- },
- // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
-} satisfies Meta<typeof MyHeader>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const LoggedIn: Story = {
- args: {
- user: {
- name: 'Jane Doe',
- },
- },
-};
-
-export const LoggedOut: Story = {
- args: {
- user: null,
- },
-};
diff --git a/src/stories/components/examples/ExampleStorybookHeader/Header.vue b/src/stories/components/examples/ExampleStorybookHeader/Header.vue
deleted file mode 100644
index 342b8b6f63b8e3a1fa5dadd3ccc812aeaca5fe01..0000000000000000000000000000000000000000
--- a/src/stories/components/examples/ExampleStorybookHeader/Header.vue
+++ /dev/null
@@ -1,53 +0,0 @@
-<template>
- <header>
- <div class="storybook-header">
- <div>
- <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
- <g fill="none" fill-rule="evenodd">
- <path
- d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
- fill="#FFF"
- />
- <path
- d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
- fill="#555AB9"
- />
- <path
- d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
- fill="#91BAF8"
- />
- </g>
- </svg>
- <h1>Acme</h1>
- </div>
- <div>
- <span class="welcome" v-if="user"
- >Welcome, <b>{{ user.name }}</b
- >!</span
- >
- <my-button size="small" @click="$emit('logout')" label="Log out" v-if="user" />
- <my-button size="small" @click="$emit('login')" label="Log in" v-if="!user" />
- <my-button
- primary
- size="small"
- @click="$emit('createAccount')"
- label="Sign up"
- v-if="!user"
- />
- </div>
- </div>
- </header>
-</template>
-
-<script lang="ts" setup>
-import './header.css';
-import MyButton from '@stories/components/examples/ExampleStorybookButton/ButtonStorybook.vue';
-
-defineProps<{ user: { name: string } | null }>();
-
-defineEmits<{
- (event: 'createAccount'): void;
- (event: 'login'): void;
- (event: 'logout'): void;
-}>();
-</script>
diff --git a/src/stories/components/examples/ExampleStorybookHeader/header.css b/src/stories/components/examples/ExampleStorybookHeader/header.css
deleted file mode 100644
index 5efd46c26a03cca7ba29f1b9bfab680eb1e08238..0000000000000000000000000000000000000000
--- a/src/stories/components/examples/ExampleStorybookHeader/header.css
+++ /dev/null
@@ -1,32 +0,0 @@
-.storybook-header {
- display: flex;
- justify-content: space-between;
- align-items: center;
- border-bottom: 1px solid rgba(0, 0, 0, 0.1);
- padding: 15px 20px;
- font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-}
-
-.storybook-header svg {
- display: inline-block;
- vertical-align: top;
-}
-
-.storybook-header h1 {
- display: inline-block;
- vertical-align: top;
- margin: 6px 0 6px 10px;
- font-weight: 700;
- font-size: 20px;
- line-height: 1;
-}
-
-.storybook-header button + button {
- margin-left: 10px;
-}
-
-.storybook-header .welcome {
- margin-right: 10px;
- color: #333;
- font-size: 14px;
-}