@jotyping/jo-designsystem 0.1.19-alpha → 0.1.21-alpha
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +7 -2
- package/.prettierignore +0 -3
- package/.prettierrc +0 -1
- package/.storybook/main.ts +0 -18
- package/.storybook/preview.ts +0 -15
- package/eslint.config.js +0 -12
- package/index.html +0 -19
- package/public/assets/satoshi-black.ttf +0 -0
- package/public/assets/satoshi-bold.ttf +0 -0
- package/public/assets/satoshi-italic.ttf +0 -0
- package/public/assets/satoshi-regular.ttf +0 -0
- package/public/vite.svg +0 -1
- package/src/assets/lit.svg +0 -1
- package/src/assets/satoshi-black.ttf +0 -0
- package/src/assets/satoshi-bold.ttf +0 -0
- package/src/assets/satoshi-italic.ttf +0 -0
- package/src/assets/satoshi-regular.ttf +0 -0
- package/src/components/button/jd-button.scss +0 -56
- package/src/components/button/jd-button.ts +0 -28
- package/src/components/button/stories/jd-button.stories.ts +0 -44
- package/src/components/flash/jd-flash.scss +0 -47
- package/src/components/flash/jd-flash.ts +0 -65
- package/src/components/flash/stories/jd-flash.stories.ts +0 -62
- package/src/components/footer/jd-footer.scss +0 -42
- package/src/components/footer/jd-footer.ts +0 -42
- package/src/components/footer/stories/jd-footer.stories.ts +0 -20
- package/src/components/header/jd-header.scss +0 -48
- package/src/components/header/jd-header.ts +0 -58
- package/src/components/header/stories/jd-header.stories.ts +0 -52
- package/src/components/heading/jd-heading.scss +0 -48
- package/src/components/heading/jd-heading.ts +0 -49
- package/src/components/heading/stories/jd-heading.stories.ts +0 -47
- package/src/components/icon/icon-data.ts +0 -45
- package/src/components/icon/jd-icon.scss +0 -35
- package/src/components/icon/jd-icon.ts +0 -66
- package/src/components/icon/stories/jd-icon.stories.ts +0 -62
- package/src/components/icon-button/jd-icon-button.scss +0 -36
- package/src/components/icon-button/jd-icon-button.ts +0 -51
- package/src/components/icon-button/stories/jd-icon-button.stories.ts +0 -93
- package/src/components/image-link/jd-image-link.scss +0 -41
- package/src/components/image-link/jd-image-link.ts +0 -36
- package/src/components/image-link/stories/jd-image-link.stories.ts +0 -46
- package/src/components/link/jd-link.scss +0 -29
- package/src/components/link/jd-link.ts +0 -25
- package/src/components/link/stories/jd-link.stories.ts +0 -42
- package/src/components/modal/jd-modal.scss +0 -91
- package/src/components/modal/jd-modal.ts +0 -75
- package/src/components/modal/stories/jd-modal.stories.ts +0 -54
- package/src/components/navigation/jd-navigation.scss +0 -17
- package/src/components/navigation/jd-navigation.ts +0 -32
- package/src/components/navigation/stories/jd-navigation.stories.ts +0 -47
- package/src/components/tag/jd-tag.scss +0 -19
- package/src/components/tag/jd-tag.ts +0 -23
- package/src/components/tag/stories/jd-tag.stories.ts +0 -20
- package/src/components.ts +0 -12
- package/src/index.ts +0 -20
- package/src/stores/breakpoint-store.ts +0 -16
- package/src/styles/_mixins.scss +0 -112
- package/src/styles/_reset.scss +0 -62
- package/src/styles/_tokens.scss +0 -50
- package/src/styles/fonts.css +0 -31
- package/src/styles/variables.scss +0 -12
- package/src/vite-env.d.ts +0 -1
- package/tsconfig.build.json +0 -12
- package/tsconfig.json +0 -47
- package/vite.config.ts +0 -34
- /package/{license.md → LICENCE.md} +0 -0
package/package.json
CHANGED
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
"access": "public"
|
|
5
5
|
},
|
|
6
6
|
"description": "Jo Design System",
|
|
7
|
-
"version": "0.1.
|
|
7
|
+
"version": "0.1.21-alpha",
|
|
8
8
|
"type": "module",
|
|
9
9
|
"main": "dist/index.js",
|
|
10
10
|
"module": "dist/index.js",
|
|
@@ -42,5 +42,10 @@
|
|
|
42
42
|
"extends": [
|
|
43
43
|
"plugin:storybook/recommended"
|
|
44
44
|
]
|
|
45
|
-
}
|
|
45
|
+
},
|
|
46
|
+
"files": [
|
|
47
|
+
"dist",
|
|
48
|
+
"README.md",
|
|
49
|
+
"LICENSE.md"
|
|
50
|
+
]
|
|
46
51
|
}
|
package/.prettierignore
DELETED
package/.prettierrc
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{}
|
package/.storybook/main.ts
DELETED
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { mergeConfig } from "vite";
|
|
2
|
-
import type { StorybookConfig } from "@storybook/web-components-vite";
|
|
3
|
-
|
|
4
|
-
const config: StorybookConfig = {
|
|
5
|
-
framework: {
|
|
6
|
-
name: "@storybook/web-components-vite",
|
|
7
|
-
options: {},
|
|
8
|
-
},
|
|
9
|
-
stories: ["../src/**/*.stories.@(ts|js)"],
|
|
10
|
-
addons: ["@storybook/addon-docs"],
|
|
11
|
-
viteFinal: async (config) => {
|
|
12
|
-
return mergeConfig(config, {
|
|
13
|
-
base: "",
|
|
14
|
-
});
|
|
15
|
-
},
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
export default config;
|
package/.storybook/preview.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { Preview } from "@storybook/web-components-vite";
|
|
2
|
-
import "../src/styles/variables.scss";
|
|
3
|
-
|
|
4
|
-
const preview: Preview = {
|
|
5
|
-
parameters: {
|
|
6
|
-
controls: {
|
|
7
|
-
matchers: {
|
|
8
|
-
color: /(background|color)$/i,
|
|
9
|
-
date: /Date$/i,
|
|
10
|
-
},
|
|
11
|
-
},
|
|
12
|
-
},
|
|
13
|
-
};
|
|
14
|
-
|
|
15
|
-
export default preview;
|
package/eslint.config.js
DELETED
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import globals from "globals";
|
|
2
|
-
import pluginJs from "@eslint/js";
|
|
3
|
-
import tseslint from "typescript-eslint";
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
/** @type {import('eslint').Linter.Config[]} */
|
|
7
|
-
export default [
|
|
8
|
-
{files: ["**/*.{js,mjs,cjs,ts}"]},
|
|
9
|
-
{languageOptions: { globals: globals.browser }},
|
|
10
|
-
pluginJs.configs.recommended,
|
|
11
|
-
...tseslint.configs.recommended,
|
|
12
|
-
];
|
package/index.html
DELETED
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
-
<link rel="stylesheet" href="/src/styles/variables.scss" />
|
|
7
|
-
<link rel="stylesheet" href="/src/styles/fonts.css" />
|
|
8
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
9
|
-
<title>Jo's Designsystem</title>
|
|
10
|
-
</head>
|
|
11
|
-
<body>
|
|
12
|
-
<div
|
|
13
|
-
style="padding: 20px; display: flex; gap: 10px; flex-direction: column"
|
|
14
|
-
>
|
|
15
|
-
Welcome to Jo's Designsystem! Start storybook by "npm run storybook"
|
|
16
|
-
</div>
|
|
17
|
-
<script type="module" src="/src/index.ts"></script>
|
|
18
|
-
</body>
|
|
19
|
-
</html>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
package/public/vite.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
|
package/src/assets/lit.svg
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="25.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 320"><path fill="#00E8FF" d="m64 192l25.926-44.727l38.233-19.114l63.974 63.974l10.833 61.754L192 320l-64-64l-38.074-25.615z"></path><path fill="#283198" d="M128 256V128l64-64v128l-64 64ZM0 256l64 64l9.202-60.602L64 192l-37.542 23.71L0 256Z"></path><path fill="#324FFF" d="M64 192V64l64-64v128l-64 64Zm128 128V192l64-64v128l-64 64ZM0 256V128l64 64l-64 64Z"></path><path fill="#0FF" d="M64 320V192l64 64z"></path></svg>
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
Binary file
|
|
@@ -1,56 +0,0 @@
|
|
|
1
|
-
@use "/src/styles/mixins.scss" as mixins;
|
|
2
|
-
@use "/src/styles/tokens.scss" as tokens;
|
|
3
|
-
|
|
4
|
-
:host {
|
|
5
|
-
display: inline-block;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
:host([active]) button {
|
|
9
|
-
&.primary {
|
|
10
|
-
color: tokens.$color-black;
|
|
11
|
-
background-color: tokens.$color-white;
|
|
12
|
-
}
|
|
13
|
-
&.secondary {
|
|
14
|
-
color: #3a3a3a;
|
|
15
|
-
background-color: tokens.$color-white;
|
|
16
|
-
outline: 3px solid tokens.$color-black;
|
|
17
|
-
outline-offset: -3px;
|
|
18
|
-
&:hover {
|
|
19
|
-
outline: 4px solid tokens.$color-black;
|
|
20
|
-
outline-offset: -4px;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
button {
|
|
26
|
-
@include mixins.font-button;
|
|
27
|
-
padding: 0 20px;
|
|
28
|
-
border-radius: 28px;
|
|
29
|
-
cursor: pointer;
|
|
30
|
-
transition: background-color 0.3s;
|
|
31
|
-
height: 56px;
|
|
32
|
-
border: none;
|
|
33
|
-
white-space: nowrap;
|
|
34
|
-
overflow: hidden;
|
|
35
|
-
text-overflow: ellipsis;
|
|
36
|
-
&.primary {
|
|
37
|
-
color: tokens.$color-black;
|
|
38
|
-
background-color: tokens.$color-white;
|
|
39
|
-
outline: 3px solid tokens.$color-black;
|
|
40
|
-
outline-offset: -3px;
|
|
41
|
-
&:hover {
|
|
42
|
-
outline: 4px solid tokens.$color-black;
|
|
43
|
-
outline-offset: -4px;
|
|
44
|
-
}
|
|
45
|
-
}
|
|
46
|
-
&.secondary {
|
|
47
|
-
color: #3a3a3a;
|
|
48
|
-
background-color: tokens.$color-white;
|
|
49
|
-
outline: 1px solid tokens.$color-neutral-200;
|
|
50
|
-
outline-offset: -1px;
|
|
51
|
-
&:hover {
|
|
52
|
-
outline: 3px solid tokens.$color-neutral-200;
|
|
53
|
-
outline-offset: -3px;
|
|
54
|
-
}
|
|
55
|
-
}
|
|
56
|
-
}
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import { LitElement, html, unsafeCSS } from "lit";
|
|
2
|
-
import { customElement, property } from "lit/decorators.js";
|
|
3
|
-
import "../../components";
|
|
4
|
-
import style from "./jd-button.scss?inline";
|
|
5
|
-
|
|
6
|
-
@customElement("jd-button")
|
|
7
|
-
export class JdButton extends LitElement {
|
|
8
|
-
static styles = unsafeCSS(style);
|
|
9
|
-
|
|
10
|
-
/**
|
|
11
|
-
* Button type, can be "primary" or "secondary".
|
|
12
|
-
*/
|
|
13
|
-
@property({ type: String }) type: "primary" | "secondary" = "primary";
|
|
14
|
-
|
|
15
|
-
render() {
|
|
16
|
-
return html`
|
|
17
|
-
<button class=${this.type}>
|
|
18
|
-
<slot></slot>
|
|
19
|
-
</button>
|
|
20
|
-
`;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
declare global {
|
|
25
|
-
interface HTMLElementTagNameMap {
|
|
26
|
-
"jd-button": JdButton;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/web-components-vite";
|
|
2
|
-
import { html } from "lit-html";
|
|
3
|
-
import "../jd-button.ts";
|
|
4
|
-
|
|
5
|
-
type JdButtonArgs = {
|
|
6
|
-
type: "primary" | "secondary";
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
const meta: Meta<JdButtonArgs> = {
|
|
10
|
-
title: "Components/Button",
|
|
11
|
-
component: "jd-button",
|
|
12
|
-
argTypes: {
|
|
13
|
-
type: {
|
|
14
|
-
control: { type: "select" },
|
|
15
|
-
options: ["primary", "secondary"],
|
|
16
|
-
description: "Type of the button",
|
|
17
|
-
defaultValue: "primary",
|
|
18
|
-
},
|
|
19
|
-
},
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export default meta;
|
|
23
|
-
type Story = StoryObj<JdButtonArgs>;
|
|
24
|
-
|
|
25
|
-
const DefaultExample = (args: JdButtonArgs) => {
|
|
26
|
-
const onClick = () => {
|
|
27
|
-
console.log("Button clicked!");
|
|
28
|
-
};
|
|
29
|
-
return html`<jd-button type=${args.type} @click=${onClick}>
|
|
30
|
-
Click me
|
|
31
|
-
</jd-button>`;
|
|
32
|
-
};
|
|
33
|
-
|
|
34
|
-
export const DefaultStory: Story = {
|
|
35
|
-
name: "Default",
|
|
36
|
-
render: DefaultExample.bind({}),
|
|
37
|
-
args: { type: "primary" },
|
|
38
|
-
};
|
|
39
|
-
|
|
40
|
-
export const SecondaryStory: Story = {
|
|
41
|
-
name: "Secondary",
|
|
42
|
-
render: DefaultExample.bind({}),
|
|
43
|
-
args: { type: "secondary" },
|
|
44
|
-
};
|
|
@@ -1,47 +0,0 @@
|
|
|
1
|
-
@use "/src/styles/mixins.scss" as mixins;
|
|
2
|
-
@use "/src/styles/tokens.scss" as tokens;
|
|
3
|
-
|
|
4
|
-
:host {
|
|
5
|
-
display: inline-block;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.flash-wrapper {
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: column;
|
|
11
|
-
gap: 15px;
|
|
12
|
-
&.upside-down {
|
|
13
|
-
flex-direction: column-reverse;
|
|
14
|
-
}
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.title-wrapper {
|
|
18
|
-
&.m,
|
|
19
|
-
&.l {
|
|
20
|
-
@include mixins.font-02-subheadline;
|
|
21
|
-
}
|
|
22
|
-
&.s {
|
|
23
|
-
@include mixins.font-03-subheadline;
|
|
24
|
-
}
|
|
25
|
-
&.red {
|
|
26
|
-
color: tokens.$color-accent-red;
|
|
27
|
-
}
|
|
28
|
-
&.purple {
|
|
29
|
-
color: tokens.$color-accent-purple;
|
|
30
|
-
}
|
|
31
|
-
&.blue {
|
|
32
|
-
color: tokens.$color-accent-blue;
|
|
33
|
-
}
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
.icon-wrapper {
|
|
37
|
-
color: tokens.$color-black;
|
|
38
|
-
&.m,
|
|
39
|
-
&.l {
|
|
40
|
-
width: 72px;
|
|
41
|
-
height: 72px;
|
|
42
|
-
}
|
|
43
|
-
&.s {
|
|
44
|
-
width: 52px;
|
|
45
|
-
height: 52px;
|
|
46
|
-
}
|
|
47
|
-
}
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { LitElement, html, unsafeCSS } from "lit";
|
|
2
|
-
import { customElement, property } from "lit/decorators.js";
|
|
3
|
-
import style from "./jd-flash.scss?inline";
|
|
4
|
-
import { classMap } from "lit/directives/class-map.js";
|
|
5
|
-
import "../../components";
|
|
6
|
-
import { SignalWatcher } from "@lit-labs/signals";
|
|
7
|
-
import { breakpoint } from "../../stores/breakpoint-store";
|
|
8
|
-
|
|
9
|
-
@customElement("jd-flash")
|
|
10
|
-
export class JdFlash extends SignalWatcher(LitElement) {
|
|
11
|
-
static styles = unsafeCSS(style);
|
|
12
|
-
|
|
13
|
-
@property({ type: String }) size: "s" | "m" | "l" | "auto" = "auto";
|
|
14
|
-
@property({ type: String }) color: "red" | "purple" | "blue" = "red";
|
|
15
|
-
@property({ type: String }) iconPosition: "top" | "bottom" = "bottom";
|
|
16
|
-
@property({ type: String }) iconName:
|
|
17
|
-
| "fire"
|
|
18
|
-
| "puzzle"
|
|
19
|
-
| "lightning"
|
|
20
|
-
| "arrow-right"
|
|
21
|
-
| "arrow-circle-left"
|
|
22
|
-
| "burger-menu"
|
|
23
|
-
| "chat" = "fire";
|
|
24
|
-
|
|
25
|
-
render() {
|
|
26
|
-
const flashWrapperClasses = {
|
|
27
|
-
"flash-wrapper": true,
|
|
28
|
-
"upside-down": this.iconPosition === "top",
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
const titleWrapperClasses = {
|
|
32
|
-
"title-wrapper": true,
|
|
33
|
-
[this.size === "auto" ? breakpoint.get() : this.size]: true,
|
|
34
|
-
[this.color]: true,
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const iconWrapperClasses = {
|
|
38
|
-
"icon-wrapper": true,
|
|
39
|
-
[this.size === "auto" ? breakpoint.get() : this.size]: true,
|
|
40
|
-
};
|
|
41
|
-
|
|
42
|
-
return html`
|
|
43
|
-
<div class=${classMap(flashWrapperClasses)}>
|
|
44
|
-
<div class=${classMap(titleWrapperClasses)}>
|
|
45
|
-
<slot name="title"></slot>
|
|
46
|
-
</div>
|
|
47
|
-
<div class=${classMap(iconWrapperClasses)}>
|
|
48
|
-
<jd-icon
|
|
49
|
-
iconName=${this.iconName}
|
|
50
|
-
color=${this.color}
|
|
51
|
-
size=${this.size === "s" || breakpoint.get() === "s"
|
|
52
|
-
? "48px"
|
|
53
|
-
: "72px"}
|
|
54
|
-
></jd-icon>
|
|
55
|
-
</div>
|
|
56
|
-
</div>
|
|
57
|
-
`;
|
|
58
|
-
}
|
|
59
|
-
}
|
|
60
|
-
|
|
61
|
-
declare global {
|
|
62
|
-
interface HTMLElementTagNameMap {
|
|
63
|
-
"jd-flash": JdFlash;
|
|
64
|
-
}
|
|
65
|
-
}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/web-components-vite";
|
|
2
|
-
import { html } from "lit-html";
|
|
3
|
-
import "../jd-flash";
|
|
4
|
-
|
|
5
|
-
const meta: Meta = {
|
|
6
|
-
title: "Components/Flash",
|
|
7
|
-
component: "jd-flash",
|
|
8
|
-
argTypes: {
|
|
9
|
-
size: {
|
|
10
|
-
control: { type: "select" },
|
|
11
|
-
options: ["s", "m", "l", "auto"],
|
|
12
|
-
description: "Size of the flash",
|
|
13
|
-
defaultValue: "auto",
|
|
14
|
-
},
|
|
15
|
-
color: {
|
|
16
|
-
control: { type: "select" },
|
|
17
|
-
options: ["red", "purple", "blue"],
|
|
18
|
-
description: "Color of the flash",
|
|
19
|
-
defaultValue: "red",
|
|
20
|
-
},
|
|
21
|
-
iconPosition: {
|
|
22
|
-
control: { type: "select" },
|
|
23
|
-
options: ["top", "bottom"],
|
|
24
|
-
description: "Icon position",
|
|
25
|
-
defaultValue: "top",
|
|
26
|
-
},
|
|
27
|
-
iconName: {
|
|
28
|
-
control: { type: "select" },
|
|
29
|
-
options: [
|
|
30
|
-
"fire",
|
|
31
|
-
"puzzle",
|
|
32
|
-
"lightning",
|
|
33
|
-
"arrow-right",
|
|
34
|
-
"arrow-circle-left",
|
|
35
|
-
"burger-menu",
|
|
36
|
-
"chat",
|
|
37
|
-
],
|
|
38
|
-
description: "Icon name",
|
|
39
|
-
defaultValue: "top",
|
|
40
|
-
},
|
|
41
|
-
},
|
|
42
|
-
};
|
|
43
|
-
|
|
44
|
-
export default meta;
|
|
45
|
-
type Story = StoryObj;
|
|
46
|
-
|
|
47
|
-
const DefaultExample = ({ ...args }) => {
|
|
48
|
-
return html`<jd-flash
|
|
49
|
-
size=${args.size}
|
|
50
|
-
color=${args.color}
|
|
51
|
-
iconPosition=${args.iconPosition}
|
|
52
|
-
iconName=${args.iconName}
|
|
53
|
-
>
|
|
54
|
-
<div slot="title">Flash<br />Title</div>
|
|
55
|
-
</jd-flash>`;
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
export const DefaultStory: Story = {
|
|
59
|
-
name: "Default",
|
|
60
|
-
render: DefaultExample.bind({}),
|
|
61
|
-
args: { size: "auto", color: "red", iconPosition: "top", iconName: "fire" },
|
|
62
|
-
};
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
@use "/src/styles/mixins.scss" as mixins;
|
|
2
|
-
@use "/src/styles/tokens.scss" as tokens;
|
|
3
|
-
|
|
4
|
-
:host {
|
|
5
|
-
display: block;
|
|
6
|
-
}
|
|
7
|
-
.footer-wrapper {
|
|
8
|
-
display: flex;
|
|
9
|
-
justify-content: start;
|
|
10
|
-
border-top: 2px solid tokens.$color-black;
|
|
11
|
-
@include mixins.font-03-copy;
|
|
12
|
-
&.s {
|
|
13
|
-
flex-direction: column;
|
|
14
|
-
justify-content: center;
|
|
15
|
-
width: calc(100% - 64px);
|
|
16
|
-
margin: 0 32px;
|
|
17
|
-
height: 140px;
|
|
18
|
-
}
|
|
19
|
-
&.m {
|
|
20
|
-
flex-direction: row;
|
|
21
|
-
align-items: center;
|
|
22
|
-
width: calc(100% - 80px);
|
|
23
|
-
margin: 0 40px;
|
|
24
|
-
height: 78px;
|
|
25
|
-
}
|
|
26
|
-
&.l {
|
|
27
|
-
flex-direction: row;
|
|
28
|
-
align-items: center;
|
|
29
|
-
width: calc(100% - 192px);
|
|
30
|
-
margin: 0 96px;
|
|
31
|
-
height: 94px;
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.dot {
|
|
36
|
-
display: flex;
|
|
37
|
-
align-items: center;
|
|
38
|
-
justify-content: center;
|
|
39
|
-
width: 28px;
|
|
40
|
-
height: 28px;
|
|
41
|
-
color: tokens.$color-black;
|
|
42
|
-
}
|
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
import { LitElement, html, nothing, unsafeCSS } from "lit";
|
|
2
|
-
import { customElement } from "lit/decorators.js";
|
|
3
|
-
import style from "./jd-footer.scss?inline";
|
|
4
|
-
import "../../components";
|
|
5
|
-
import { SignalWatcher } from "@lit-labs/signals";
|
|
6
|
-
import { breakpoint } from "../../stores/breakpoint-store";
|
|
7
|
-
import { classMap } from "lit/directives/class-map.js";
|
|
8
|
-
|
|
9
|
-
@customElement("jd-footer")
|
|
10
|
-
export class JdFooter extends SignalWatcher(LitElement) {
|
|
11
|
-
static styles = unsafeCSS(style);
|
|
12
|
-
|
|
13
|
-
render() {
|
|
14
|
-
const footerWrapperClass = {
|
|
15
|
-
"footer-wrapper": true,
|
|
16
|
-
[breakpoint.get()]: true,
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
return html`
|
|
20
|
-
<div class=${classMap(footerWrapperClass)}>
|
|
21
|
-
<jd-modal>
|
|
22
|
-
<jd-link slot="button">Impressum</jd-link>
|
|
23
|
-
<div>Impressum content</div>
|
|
24
|
-
</jd-modal>
|
|
25
|
-
${breakpoint.get() !== "s"
|
|
26
|
-
? html`<jd-icon iconName="circle"></jd-icon>`
|
|
27
|
-
: nothing}
|
|
28
|
-
<jd-link href="#" target="_blank">Github</jd-link>
|
|
29
|
-
${breakpoint.get() !== "s"
|
|
30
|
-
? html`<jd-icon iconName="circle"></jd-icon>`
|
|
31
|
-
: nothing}
|
|
32
|
-
<jd-link href="#" target="_blank">Contact</jd-link>
|
|
33
|
-
</div>
|
|
34
|
-
`;
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
declare global {
|
|
39
|
-
interface HTMLElementTagNameMap {
|
|
40
|
-
"jd-footer": JdFooter;
|
|
41
|
-
}
|
|
42
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from "@storybook/web-components-vite";
|
|
2
|
-
import { html } from "lit-html";
|
|
3
|
-
import "../jd-footer.ts";
|
|
4
|
-
|
|
5
|
-
const meta: Meta = {
|
|
6
|
-
title: "Components/Footer",
|
|
7
|
-
component: "jd-footer",
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export default meta;
|
|
11
|
-
type Story = StoryObj;
|
|
12
|
-
|
|
13
|
-
const DefaultExample = () => {
|
|
14
|
-
return html`<jd-footer></jd-footer>`;
|
|
15
|
-
};
|
|
16
|
-
|
|
17
|
-
export const DefaultStory: Story = {
|
|
18
|
-
name: "Default",
|
|
19
|
-
render: DefaultExample.bind({}),
|
|
20
|
-
};
|
|
@@ -1,48 +0,0 @@
|
|
|
1
|
-
@use "/src/styles/mixins.scss" as mixins;
|
|
2
|
-
@use "/src/styles/tokens.scss" as tokens;
|
|
3
|
-
|
|
4
|
-
:host {
|
|
5
|
-
display: block;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.header-wrapper {
|
|
9
|
-
display: flex;
|
|
10
|
-
flex-direction: row;
|
|
11
|
-
justify-content: space-between;
|
|
12
|
-
align-items: center;
|
|
13
|
-
&.s {
|
|
14
|
-
width: calc(100% - 64px);
|
|
15
|
-
margin: 0 32px;
|
|
16
|
-
}
|
|
17
|
-
&.m {
|
|
18
|
-
width: calc(100% - 80px);
|
|
19
|
-
margin: 0 40px;
|
|
20
|
-
}
|
|
21
|
-
&.l {
|
|
22
|
-
width: calc(100% - 192px);
|
|
23
|
-
margin: 0 96px;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
|
|
27
|
-
.burger-wrapper {
|
|
28
|
-
display: flex;
|
|
29
|
-
align-items: center;
|
|
30
|
-
justify-content: center;
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
.nav-wrapper {
|
|
34
|
-
width: 100%;
|
|
35
|
-
display: flex;
|
|
36
|
-
justify-content: center;
|
|
37
|
-
padding-bottom: 100px;
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
.empty-div-desktop {
|
|
41
|
-
width: 88px;
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
.logo {
|
|
45
|
-
@include mixins.font-logo;
|
|
46
|
-
color: tokens.$color-black;
|
|
47
|
-
cursor: pointer;
|
|
48
|
-
}
|
|
@@ -1,58 +0,0 @@
|
|
|
1
|
-
import { LitElement, html, unsafeCSS, nothing } from "lit";
|
|
2
|
-
import { customElement, state } from "lit/decorators.js";
|
|
3
|
-
import style from "./jd-header.scss?inline";
|
|
4
|
-
import "../../components";
|
|
5
|
-
import { SignalWatcher } from "@lit-labs/signals";
|
|
6
|
-
import { breakpoint } from "../../stores/breakpoint-store";
|
|
7
|
-
import { classMap } from "lit/directives/class-map.js";
|
|
8
|
-
|
|
9
|
-
@customElement("jd-header")
|
|
10
|
-
export class JdHeader extends SignalWatcher(LitElement) {
|
|
11
|
-
static styles = unsafeCSS(style);
|
|
12
|
-
|
|
13
|
-
@state() private showModal = false;
|
|
14
|
-
|
|
15
|
-
render() {
|
|
16
|
-
const headerWrapperClass = {
|
|
17
|
-
"header-wrapper": true,
|
|
18
|
-
[breakpoint.get()]: true,
|
|
19
|
-
};
|
|
20
|
-
|
|
21
|
-
return html`
|
|
22
|
-
<div class=${classMap(headerWrapperClass)}>
|
|
23
|
-
<div class="logo">joflow</div>
|
|
24
|
-
${breakpoint.get() !== "s"
|
|
25
|
-
? html`<div>
|
|
26
|
-
<slot></slot>
|
|
27
|
-
</div>`
|
|
28
|
-
: html`<div class="burger-wrapper">
|
|
29
|
-
<jd-icon-button
|
|
30
|
-
iconName="burger-menu"
|
|
31
|
-
@click=${() => {
|
|
32
|
-
this.showModal = !this.showModal;
|
|
33
|
-
console.log("Modal state:", this.showModal);
|
|
34
|
-
}}
|
|
35
|
-
></jd-icon-button>
|
|
36
|
-
</div>`}
|
|
37
|
-
${breakpoint.get() === "l"
|
|
38
|
-
? html`<div class="empty-div-desktop"></div>`
|
|
39
|
-
: nothing}
|
|
40
|
-
</div>
|
|
41
|
-
<jd-modal
|
|
42
|
-
type="header"
|
|
43
|
-
.show=${this.showModal && breakpoint.get() === "s"}
|
|
44
|
-
id="modal"
|
|
45
|
-
>
|
|
46
|
-
<div class="nav-wrapper">
|
|
47
|
-
<slot></slot>
|
|
48
|
-
</div>
|
|
49
|
-
</jd-modal>
|
|
50
|
-
`;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
|
|
54
|
-
declare global {
|
|
55
|
-
interface HTMLElementTagNameMap {
|
|
56
|
-
"jd-header": JdHeader;
|
|
57
|
-
}
|
|
58
|
-
}
|