@jotyping/jo-designsystem 0.1.1-alpha

package/src/components/button/jd-button.scss

@@ -0,0 +1,56 @@
+@use "/src/styles/mixins.scss" as mixins;
+@use "/src/styles/colors.scss" as colors;
+
+:host {
+  display: inline-block;
+}
+
+:host([active]) button {
+  &.primary {
+    color: colors.$color-black;
+    background-color: colors.$color-white;
+  }
+  &.secondary {
+    color: #3a3a3a;
+    background-color: colors.$color-white;
+    outline: 3px solid colors.$color-black;
+    outline-offset: -3px;
+    &:hover {
+      outline: 4px solid colors.$color-black;
+      outline-offset: -4px;
+    }
+  }
+}
+
+button {
+  @include mixins.font-button;
+  padding: 0 20px;
+  border-radius: 28px;
+  cursor: pointer;
+  transition: background-color 0.3s;
+  height: 56px;
+  border: none;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  &.primary {
+    color: colors.$color-black;
+    background-color: colors.$color-white;
+    outline: 3px solid colors.$color-black;
+    outline-offset: -3px;
+    &:hover {
+      outline: 4px solid colors.$color-black;
+      outline-offset: -4px;
+    }
+  }
+  &.secondary {
+    color: #3a3a3a;
+    background-color: colors.$color-white;
+    outline: 1px solid colors.$color-neutral-200;
+    outline-offset: -1px;
+    &:hover {
+      outline: 3px solid colors.$color-neutral-200;
+      outline-offset: -3px;
+    }
+  }
+}

package/src/components/button/jd-button.ts

@@ -0,0 +1,28 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import "../../components";
+import style from "./jd-button.scss?inline";
+
+@customElement("jd-button")
+export class JdButton extends LitElement {
+  static styles = unsafeCSS(style);
+
+  /**
+   * Button type, can be "primary" or "secondary".
+   */
+  @property({ type: String }) type: "primary" | "secondary" = "primary";
+
+  render() {
+    return html`
+      <button class=${this.type}>
+        <slot></slot>
+      </button>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "jd-button": JdButton;
+  }
+}

package/src/components/button/stories/jd-button.stories.ts

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import { html } from "lit-html";
+import "../jd-button.ts";
+
+type JdButtonArgs = {
+  type: "primary" | "secondary";
+};
+
+const meta: Meta<JdButtonArgs> = {
+  title: "Components/Button",
+  component: "jd-button",
+  argTypes: {
+    type: {
+      control: { type: "select" },
+      options: ["primary", "secondary"],
+      description: "Type of the button",
+      defaultValue: "primary",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<JdButtonArgs>;
+
+const DefaultExample = (args: JdButtonArgs) => {
+  const onClick = () => {
+    console.log("Button clicked!");
+  };
+  return html`<jd-button type=${args.type} @click=${onClick}>
+    Click me
+  </jd-button>`;
+};
+
+export const DefaultStory: Story = {
+  name: "Default",
+  render: DefaultExample.bind({}),
+  args: { type: "primary" },
+};
+
+export const SecondaryStory: Story = {
+  name: "Secondary",
+  render: DefaultExample.bind({}),
+  args: { type: "secondary" },
+};

package/src/components/flash/jd-flash.scss

@@ -0,0 +1,47 @@
+@use "/src/styles/mixins.scss" as mixins;
+@use "/src/styles/colors.scss" as colors;
+
+:host {
+  display: inline-block;
+}
+
+.flash-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+  &.upside-down {
+    flex-direction: column-reverse;
+  }
+}
+
+.title-wrapper {
+  &.m,
+  &.l {
+    @include mixins.font-02-subheadline;
+  }
+  &.s {
+    @include mixins.font-03-subheadline;
+  }
+  &.red {
+    color: colors.$color-accent-red;
+  }
+  &.purple {
+    color: colors.$color-accent-purple;
+  }
+  &.blue {
+    color: colors.$color-accent-blue;
+  }
+}
+
+.icon-wrapper {
+  color: colors.$color-black;
+  &.m,
+  &.l {
+    width: 72px;
+    height: 72px;
+  }
+  &.s {
+    width: 52px;
+    height: 52px;
+  }
+}

package/src/components/flash/jd-flash.ts

@@ -0,0 +1,65 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import style from "./jd-flash.scss?inline";
+import { classMap } from "lit/directives/class-map.js";
+import "../../components";
+import { SignalWatcher } from "@lit-labs/signals";
+import { breakpoint } from "../../stores/breakpoint-store";
+
+@customElement("jd-flash")
+export class JdFlash extends SignalWatcher(LitElement) {
+  static styles = unsafeCSS(style);
+
+  @property({ type: String }) size: "s" | "m" | "l" | "auto" = "auto";
+  @property({ type: String }) color: "red" | "purple" | "blue" = "red";
+  @property({ type: String }) iconPosition: "top" | "bottom" = "bottom";
+  @property({ type: String }) iconName:
+    | "fire"
+    | "puzzle"
+    | "lightning"
+    | "arrow-right"
+    | "arrow-circle-left"
+    | "burger-menu"
+    | "chat" = "fire";
+
+  render() {
+    const flashWrapperClasses = {
+      "flash-wrapper": true,
+      "upside-down": this.iconPosition === "top",
+    };
+
+    const titleWrapperClasses = {
+      "title-wrapper": true,
+      [this.size === "auto" ? breakpoint.get() : this.size]: true,
+      [this.color]: true,
+    };
+
+    const iconWrapperClasses = {
+      "icon-wrapper": true,
+      [this.size === "auto" ? breakpoint.get() : this.size]: true,
+    };
+
+    return html`
+      <div class=${classMap(flashWrapperClasses)}>
+        <div class=${classMap(titleWrapperClasses)}>
+          <slot name="title"></slot>
+        </div>
+        <div class=${classMap(iconWrapperClasses)}>
+          <jd-icon
+            iconName=${this.iconName}
+            color=${this.color}
+            size=${this.size === "s" || breakpoint.get() === "s"
+              ? "48px"
+              : "72px"}
+          ></jd-icon>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "jd-flash": JdFlash;
+  }
+}

package/src/components/flash/stories/jd-flash.stories.ts

@@ -0,0 +1,62 @@
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import { html } from "lit-html";
+import "../jd-flash";
+
+const meta: Meta = {
+  title: "Components/Flash",
+  component: "jd-flash",
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["s", "m", "l", "auto"],
+      description: "Size of the flash",
+      defaultValue: "auto",
+    },
+    color: {
+      control: { type: "select" },
+      options: ["red", "purple", "blue"],
+      description: "Color of the flash",
+      defaultValue: "red",
+    },
+    iconPosition: {
+      control: { type: "select" },
+      options: ["top", "bottom"],
+      description: "Icon position",
+      defaultValue: "top",
+    },
+    iconName: {
+      control: { type: "select" },
+      options: [
+        "fire",
+        "puzzle",
+        "lightning",
+        "arrow-right",
+        "arrow-circle-left",
+        "burger-menu",
+        "chat",
+      ],
+      description: "Icon name",
+      defaultValue: "top",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+const DefaultExample = ({ ...args }) => {
+  return html`<jd-flash
+    size=${args.size}
+    color=${args.color}
+    iconPosition=${args.iconPosition}
+    iconName=${args.iconName}
+  >
+    <div slot="title">Flash<br />Title</div>
+  </jd-flash>`;
+};
+
+export const DefaultStory: Story = {
+  name: "Default",
+  render: DefaultExample.bind({}),
+  args: { size: "auto", color: "red", iconPosition: "top", iconName: "fire" },
+};

package/src/components/footer/jd-footer.scss

@@ -0,0 +1,42 @@
+@use "/src/styles/mixins.scss" as mixins;
+@use "/src/styles/colors.scss" as colors;
+
+:host {
+  display: block;
+}
+.footer-wrapper {
+  display: flex;
+  justify-content: start;
+  border-top: 2px solid colors.$color-black;
+  @include mixins.font-03-copy;
+  &.s {
+    flex-direction: column;
+    justify-content: center;
+    width: calc(100% - 64px);
+    margin: 0 32px;
+    height: 140px;
+  }
+  &.m {
+    flex-direction: row;
+    align-items: center;
+    width: calc(100% - 80px);
+    margin: 0 40px;
+    height: 78px;
+  }
+  &.l {
+    flex-direction: row;
+    align-items: center;
+    width: calc(100% - 192px);
+    margin: 0 96px;
+    height: 94px;
+  }
+}
+
+.dot {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  color: colors.$color-black;
+}

package/src/components/footer/jd-footer.ts

@@ -0,0 +1,42 @@
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement } from "lit/decorators.js";
+import style from "./jd-footer.scss?inline";
+import "../../components";
+import { SignalWatcher } from "@lit-labs/signals";
+import { breakpoint } from "../../stores/breakpoint-store";
+import { classMap } from "lit/directives/class-map.js";
+
+@customElement("jd-footer")
+export class JdFooter extends SignalWatcher(LitElement) {
+  static styles = unsafeCSS(style);
+
+  render() {
+    const footerWrapperClass = {
+      "footer-wrapper": true,
+      [breakpoint.get()]: true,
+    };
+
+    return html`
+      <div class=${classMap(footerWrapperClass)}>
+        <jd-modal>
+          <jd-link slot="button">Impressum</jd-link>
+          <div>Impressum content</div>
+        </jd-modal>
+        ${breakpoint.get() !== "s"
+          ? html`<jd-icon iconName="circle"></jd-icon>`
+          : nothing}
+        <jd-link href="#" target="_blank">Github</jd-link>
+        ${breakpoint.get() !== "s"
+          ? html`<jd-icon iconName="circle"></jd-icon>`
+          : nothing}
+        <jd-link href="#" target="_blank">Contact</jd-link>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "jd-footer": JdFooter;
+  }
+}

package/src/components/footer/stories/jd-footer.stories.ts

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import { html } from "lit-html";
+import "../jd-footer.ts";
+
+const meta: Meta = {
+  title: "Components/Footer",
+  component: "jd-footer",
+};
+
+export default meta;
+type Story = StoryObj;
+
+const DefaultExample = () => {
+  return html`<jd-footer></jd-footer>`;
+};
+
+export const DefaultStory: Story = {
+  name: "Default",
+  render: DefaultExample.bind({}),
+};

package/src/components/header/jd-header.scss

@@ -0,0 +1,48 @@
+@use "/src/styles/mixins.scss" as mixins;
+@use "/src/styles/colors.scss" as colors;
+
+:host {
+  display: block;
+}
+
+.header-wrapper {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  &.s {
+    width: calc(100% - 64px);
+    margin: 0 32px;
+  }
+  &.m {
+    width: calc(100% - 80px);
+    margin: 0 40px;
+  }
+  &.l {
+    width: calc(100% - 192px);
+    margin: 0 96px;
+  }
+}
+
+.burger-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-wrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  padding-bottom: 100px;
+}
+
+.empty-div-desktop {
+  width: 88px;
+}
+
+.logo {
+  @include mixins.font-logo;
+  color: colors.$color-black;
+  cursor: pointer;
+}

package/src/components/header/jd-header.ts

@@ -0,0 +1,58 @@
+import { LitElement, html, unsafeCSS, nothing } from "lit";
+import { customElement, state } from "lit/decorators.js";
+import style from "./jd-header.scss?inline";
+import "../../components";
+import { SignalWatcher } from "@lit-labs/signals";
+import { breakpoint } from "../../stores/breakpoint-store";
+import { classMap } from "lit/directives/class-map.js";
+
+@customElement("jd-header")
+export class JdHeader extends SignalWatcher(LitElement) {
+  static styles = unsafeCSS(style);
+
+  @state() private showModal = false;
+
+  render() {
+    const headerWrapperClass = {
+      "header-wrapper": true,
+      [breakpoint.get()]: true,
+    };
+
+    return html`
+      <div class=${classMap(headerWrapperClass)}>
+        <div class="logo">joflow</div>
+        ${breakpoint.get() !== "s"
+          ? html`<div>
+              <slot></slot>
+            </div>`
+          : html`<div class="burger-wrapper">
+              <jd-icon-button
+                iconName="burger-menu"
+                @click=${() => {
+                  this.showModal = !this.showModal;
+                  console.log("Modal state:", this.showModal);
+                }}
+              ></jd-icon-button>
+            </div>`}
+        ${breakpoint.get() === "l"
+          ? html`<div class="empty-div-desktop"></div>`
+          : nothing}
+      </div>
+      <jd-modal
+        type="header"
+        .show=${this.showModal && breakpoint.get() === "s"}
+        id="modal"
+      >
+        <div class="nav-wrapper">
+          <slot></slot>
+        </div>
+      </jd-modal>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "jd-header": JdHeader;
+  }
+}

package/src/components/header/stories/jd-header.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import { html } from "lit-html";
+import "../jd-header.ts";
+
+const meta: Meta = {
+  title: "Components/Header",
+  component: "jd-header",
+  parameters: {
+    layout: "fullscreen",
+  },
+};
+
+export default meta;
+type Story = StoryObj;
+
+const DefaultExample = () => {
+  const buttons = ["Work", "About", "Hello"];
+  let activeIndex = 0;
+
+  function handleClick(index: number) {
+    activeIndex = index;
+    document.querySelectorAll("jd-button").forEach((btn, i) => {
+      btn.toggleAttribute("active", i === activeIndex);
+    });
+    console.log(`Button clicked: Index ${index}, Label ${buttons[index]}`);
+  }
+
+  setTimeout(() => {
+    document.querySelectorAll("jd-button").forEach((btn, i) => {
+      btn.toggleAttribute("active", i === activeIndex);
+      btn.addEventListener("click", () => handleClick(i));
+    });
+  });
+  return html`<jd-header
+    ><div style="width: 100%; display: flex; justify-content: center;">
+      <jd-navigation>
+        ${buttons.map(
+          (label, index) => html`
+            <jd-button type="secondary" ?active=${index === activeIndex}>
+              ${label}
+            </jd-button>
+          `,
+        )}
+      </jd-navigation>
+    </div></jd-header
+  >`;
+};
+
+export const DefaultStory: Story = {
+  name: "Default",
+  render: DefaultExample.bind({}),
+};

package/src/components/heading/jd-heading.scss

@@ -0,0 +1,48 @@
+@use "/src/styles/mixins.scss" as mixins;
+@use "/src/styles/colors.scss" as colors;
+
+:host {
+  display: inline-block;
+}
+
+.heading-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.title-wrapper {
+  color: colors.$color-black;
+  display: flex;
+  flex-direction: column;
+  gap: 0px;
+  &.l {
+    @include mixins.font-01-headline;
+  }
+  &.m {
+    @include mixins.font-02-headline;
+  }
+  &.s {
+    @include mixins.font-03-headline;
+  }
+}
+
+.subtitle-wrapper {
+  color: colors.$color-black;
+  &.l {
+    @include mixins.font-01-subheadline;
+  }
+  &.m {
+    @include mixins.font-02-subheadline;
+  }
+  &.s {
+    @include mixins.font-03-subheadline;
+  }
+}
+
+.title-line-two-wrapper {
+  display: flex;
+  flex-direction: row;
+  gap: 30px;
+  align-items: baseline;
+}

package/src/components/heading/jd-heading.ts

@@ -0,0 +1,49 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import style from "./jd-heading.scss?inline";
+import { classMap } from "lit/directives/class-map.js";
+import { SignalWatcher } from "@lit-labs/signals";
+import { breakpoint } from "../../stores/breakpoint-store";
+import "../../components";
+
+@customElement("jd-heading")
+export class JdHeading extends SignalWatcher(LitElement) {
+  static styles = unsafeCSS(style);
+
+  @property({ type: String }) size: "l" | "m" | "s" | "auto" = "auto";
+
+  render() {
+    const titleWrapperClasses = {
+      "title-wrapper": true,
+      [this.size === "auto" ? breakpoint.get() : this.size]: true,
+    };
+
+    const subTitleWrapperClasses = {
+      "subtitle-wrapper": true,
+      [this.size === "auto" ? breakpoint.get() : this.size]: true,
+    };
+
+    return html`
+      <div class="heading-wrapper">
+        <div class=${classMap(titleWrapperClasses)}>
+          <slot name="title-line-one"></slot>
+          <div class="title-line-two-wrapper">
+            <slot name="title-line-two"></slot>
+            <div class=${classMap(subTitleWrapperClasses)}>
+              <slot name="subtitle-right"></slot>
+            </div>
+          </div>
+        </div>
+        <div class=${classMap(subTitleWrapperClasses)}>
+          <slot name="subtitle-bottom"></slot>
+        </div>
+      </div>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "jd-heading": JdHeading;
+  }
+}