@jotyping/jo-designsystem 0.1.19-alpha → 0.1.21-alpha

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

@@ -1,52 +0,0 @@
-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

@@ -1,48 +0,0 @@
-@use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/tokens.scss" as tokens;
-
-:host {
-  display: inline-block;
-}
-
-.heading-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 32px;
-}
-
-.title-wrapper {
-  color: tokens.$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: tokens.$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

@@ -1,49 +0,0 @@
-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;
-  }
-}

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

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/web-components-vite";
-import { html } from "lit-html";
-import "../jd-heading";
-
-const meta: Meta = {
-  title: "Components/Heading",
-  component: "jd-heading",
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["l", "m", "s", "auto"],
-      description: "Size of the heading",
-      defaultValue: "auto",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-const DefaultExample = ({ ...args }) => {
-  return html`<jd-heading size=${args.size}>
-    <div slot="title-line-one">Sweat &</div>
-    <div slot="title-line-two">coffee</div>
-    <div slot="subtitle-bottom">Latest work<br />and crafts</div></jd-heading
-  >`;
-};
-
-const DetailExample = ({ ...args }) => {
-  return html`<jd-heading size=${args.size}>
-    <div slot="title-line-one">Crash</div>
-    <div slot="title-line-two">Mate</div>
-    <div slot="subtitle-right">iOS App</div></jd-heading
-  >`;
-};
-
-export const DefaultStory: Story = {
-  name: "Default",
-  render: DefaultExample.bind({}),
-  args: { size: "auto" },
-};
-
-export const DetailStory: Story = {
-  name: "Detail",
-  render: DetailExample.bind({}),
-  args: { ...DefaultStory.args },
-};

package/src/components/icon/icon-data.ts

@@ -1,45 +0,0 @@
-const icons = {
-  fire: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
-    <path stroke-linecap="round" stroke-linejoin="round" d="M15.362 5.214A8.252 8.252 0 0 1 12 21 8.25 8.25 0 0 1 6.038 7.047 8.287 8.287 0 0 0 9 9.601a8.983 8.983 0 0 1 3.361-6.867 8.21 8.21 0 0 0 3 2.48Z" />
-    <path stroke-linecap="round" stroke-linejoin="round" d="M12 18a3.75 3.75 0 0 0 .495-7.468 5.99 5.99 0 0 0-1.925 3.547 5.975 5.975 0 0 1-2.133-1.001A3.75 3.75 0 0 0 12 18Z" />
-    </svg>`,
-  lightning: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z" />
-</svg>
-`,
-  chat: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M8.625 12a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H8.25m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0H12m4.125 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm0 0h-.375M21 12c0 4.556-4.03 8.25-9 8.25a9.764 9.764 0 0 1-2.555-.337A5.972 5.972 0 0 1 5.41 20.97a5.969 5.969 0 0 1-.474-.065 4.48 4.48 0 0 0 .978-2.025c.09-.457-.133-.901-.467-1.226C3.93 16.178 3 14.189 3 12c0-4.556 4.03-8.25 9-8.25s9 3.694 9 8.25Z" />
-</svg>
-`,
-  puzzle: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M14.25 6.087c0-.355.186-.676.401-.959.221-.29.349-.634.349-1.003 0-1.036-1.007-1.875-2.25-1.875s-2.25.84-2.25 1.875c0 .369.128.713.349 1.003.215.283.401.604.401.959v0a.64.64 0 0 1-.657.643 48.39 48.39 0 0 1-4.163-.3c.186 1.613.293 3.25.315 4.907a.656.656 0 0 1-.658.663v0c-.355 0-.676-.186-.959-.401a1.647 1.647 0 0 0-1.003-.349c-1.036 0-1.875 1.007-1.875 2.25s.84 2.25 1.875 2.25c.369 0 .713-.128 1.003-.349.283-.215.604-.401.959-.401v0c.31 0 .555.26.532.57a48.039 48.039 0 0 1-.642 5.056c1.518.19 3.058.309 4.616.354a.64.64 0 0 0 .657-.643v0c0-.355-.186-.676-.401-.959a1.647 1.647 0 0 1-.349-1.003c0-1.035 1.008-1.875 2.25-1.875 1.243 0 2.25.84 2.25 1.875 0 .369-.128.713-.349 1.003-.215.283-.4.604-.4.959v0c0 .333.277.599.61.58a48.1 48.1 0 0 0 5.427-.63 48.05 48.05 0 0 0 .582-4.717.532.532 0 0 0-.533-.57v0c-.355 0-.676.186-.959.401-.29.221-.634.349-1.003.349-1.035 0-1.875-1.007-1.875-2.25s.84-2.25 1.875-2.25c.37 0 .713.128 1.003.349.283.215.604.401.96.401v0a.656.656 0 0 0 .658-.663 48.422 48.422 0 0 0-.37-5.36c-1.886.342-3.81.574-5.766.689a.578.578 0 0 1-.61-.58v0Z" />
-</svg>
-`,
-  "arrow-circle-left": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="m11.25 9-3 3m0 0 3 3m-3-3h7.5M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Z" />
-</svg>
-`,
-  "arrow-right": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" />
-</svg>
-`,
-  "burger-menu": `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.6" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M6 8h12M6 16h12" />
-</svg>
-`,
-  x: `<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="size-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
-</svg>
-`,
-  circle: `<svg
-        width="8"
-        height="8"
-        viewBox="0 0 8 8"
-        xmlns="http://www.w3.org/2000/svg"
-      >
-        <circle cx="4" cy="4" r="4" fill="currentColor" />
-      </svg>
-`,
-};
-
-export { icons };

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

@@ -1,35 +0,0 @@
-@use "/src/styles/tokens.scss" as tokens;
-
-:host {
-  display: inline-block;
-}
-
-.icon-wrapper {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  &.blue {
-    color: tokens.$color-accent-blue;
-  }
-  &.red {
-    color: tokens.$color-accent-red;
-  }
-  &.purple {
-    color: tokens.$color-accent-purple;
-  }
-  &.black {
-    color: tokens.$color-black;
-  }
-  &.white {
-    color: tokens.$color-white;
-  }
-  &.neutral-200 {
-    color: tokens.$color-neutral-200;
-  }
-  &.neutral-400 {
-    color: tokens.$color-neutral-400;
-  }
-  &.neutral-600 {
-    color: tokens.$color-neutral-600;
-  }
-}

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

@@ -1,66 +0,0 @@
-import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import { icons } from "./icon-data.ts";
-import style from "./jd-icon.scss?inline";
-import { classMap } from "lit/directives/class-map.js";
-import { unsafeHTML } from "lit/directives/unsafe-html.js";
-import "../../components";
-
-export type IconName =
-  | "circle"
-  | "x"
-  | "fire"
-  | "puzzle"
-  | "lightning"
-  | "arrow-right"
-  | "arrow-circle-left"
-  | "burger-menu"
-  | "chat";
-
-@customElement("jd-icon")
-export class JdIcon extends LitElement {
-  static styles = unsafeCSS(style);
-
-  @property({ type: String }) iconName: IconName = "fire";
-
-  @property({ type: String }) size:
-    | "72px"
-    | "56px"
-    | "48px"
-    | "40px"
-    | "32px"
-    | "24px"
-    | "16px" = "48px";
-
-  @property({ type: String }) color:
-    | "red"
-    | "purple"
-    | "blue"
-    | "black"
-    | "white"
-    | "neutral-200"
-    | "neutral-400"
-    | "neutral-600" = "black";
-
-  render() {
-    const iconWrapperClasses = {
-      "icon-wrapper": true,
-      [this.color]: true,
-    };
-
-    return html`
-      <div
-        class=${classMap(iconWrapperClasses)}
-        style="height: ${this.size}; width: ${this.size};"
-      >
-        ${unsafeHTML(icons[this.iconName])}
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "jd-icon": JdIcon;
-  }
-}

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

@@ -1,62 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/web-components-vite";
-import { html } from "lit-html";
-import "../jd-icon";
-
-const meta: Meta = {
-  title: "Components/Icon",
-  component: "jd-icon",
-  argTypes: {
-    size: {
-      control: { type: "select" },
-      options: ["72px", "56px", "48px", "32px", "24px", "16px"],
-      description: "Size of icon",
-      defaultValue: "48px",
-    },
-    color: {
-      control: { type: "select" },
-      options: [
-        "red",
-        "purple",
-        "blue",
-        "black",
-        "white",
-        "neutral-200",
-        "neutral-400",
-        "neutral-600",
-      ],
-      description: "Color of the icon",
-      defaultValue: "red",
-    },
-    iconName: {
-      control: { type: "select" },
-      options: [
-        "fire",
-        "lightning",
-        "arrow-right",
-        "arrow-circle-left",
-        "burger-menu",
-        "puzzle",
-        "chat",
-      ],
-      description: "Icon name",
-      defaultValue: "puzzle",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj;
-
-const DefaultExample = ({ ...args }) => {
-  return html`<jd-icon
-    iconName=${args.iconName}
-    color=${args.color}
-    size=${args.size}
-  ></jd-icon>`;
-};
-
-export const DefaultStory: Story = {
-  name: "Default",
-  render: DefaultExample.bind({}),
-  args: { iconName: "puzzle", color: "blue", size: "48px" },
-};

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

@@ -1,36 +0,0 @@
-@use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/tokens.scss" as tokens;
-
-:host {
-  display: inline-block;
-  height: 48px;
-  width: 48px;
-}
-
-:host([active]) button {
-  &.borderless {
-    color: tokens.$color-black;
-  }
-}
-
-button {
-  cursor: pointer;
-  border: none;
-  padding: 0;
-  width: 48px;
-  height: 48px;
-  &.borderless {
-    color: tokens.$color-black;
-    background-color: tokens.$color-white;
-    &:hover {
-      color: tokens.$color-accent-red;
-    }
-  }
-  &.border {
-    color: #3a3a3a;
-    background-color: tokens.$color-white;
-    outline: 2px solid tokens.$color-black;
-    outline-offset: -2px;
-    border-radius: 24px;
-  }
-}

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

@@ -1,51 +0,0 @@
-import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import style from "./jd-icon-button.scss?inline";
-import { IconName } from "../icon/jd-icon.ts";
-import "../../components";
-
-@customElement("jd-icon-button")
-export class JdIconButton extends LitElement {
-  static styles = unsafeCSS(style);
-
-  /**
-   * Button type, can be "primary" or "secondary".
-   */
-  @property({ type: String }) type: "borderless" | "border" = "borderless";
-
-  /**
-   * Icon name.
-   */
-  @property({ type: String }) iconName: IconName = "puzzle";
-
-  /**
-   * Icon color.
-   */
-  @property({ type: String }) color:
-    | "red"
-    | "purple"
-    | "blue"
-    | "black"
-    | "white"
-    | "neutral-200"
-    | "neutral-400"
-    | "neutral-600" = "black";
-
-  render() {
-    return html`
-      <button class=${this.type}>
-        <jd-icon
-          iconName=${this.iconName}
-          color=${this.color}
-          size=${this.type === "borderless" ? "48px" : "32px"}
-        ></jd-icon>
-      </button>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "jd-icon-button": JdIconButton;
-  }
-}

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

@@ -1,93 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/web-components-vite";
-import { html } from "lit-html";
-import { IconName } from "../../icon/jd-icon.ts";
-import "../jd-icon-button.ts";
-
-type JdIconButtonArgs = {
-  type: "borderless" | "border";
-  iconName: IconName;
-  color:
-    | "red"
-    | "purple"
-    | "blue"
-    | "black"
-    | "white"
-    | "neutral-200"
-    | "neutral-400"
-    | "neutral-600";
-};
-
-const meta: Meta<JdIconButtonArgs> = {
-  title: "Components/IconButton",
-  component: "jd-icon-button",
-  argTypes: {
-    type: {
-      control: { type: "select" },
-      options: ["borderless", "border"],
-      description: "Type of the button",
-      defaultValue: "borderless",
-    },
-    iconName: {
-      control: { type: "select" },
-      options: [
-        "x",
-        "puzzle",
-        "home",
-        "settings",
-        "user",
-        "search",
-        "notification",
-        "message",
-        "help",
-        "logout",
-      ],
-      description: "Name of the icon",
-      defaultValue: "puzzle",
-    },
-    color: {
-      control: { type: "select" },
-      options: [
-        "red",
-        "purple",
-        "blue",
-        "black",
-        "white",
-        "neutral-200",
-        "neutral-400",
-        "neutral-600",
-      ],
-      description: "Color of the icon",
-      defaultValue: "black",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<JdIconButtonArgs>;
-
-const DefaultExample = (args: JdIconButtonArgs) => {
-  const onClick = () => {
-    console.log("Button clicked!");
-  };
-
-  return html`
-    <jd-icon-button
-      type=${args.type}
-      color=${args.color}
-      icon-name=${args.iconName}
-      @click=${onClick}
-    ></jd-icon-button>
-  `;
-};
-
-export const DefaultStory: Story = {
-  name: "Default",
-  render: DefaultExample.bind({}),
-  args: { type: "borderless", iconName: "puzzle", color: "black" },
-};
-
-export const SecondaryStory: Story = {
-  name: "Border",
-  render: DefaultExample.bind({}),
-  args: { ...DefaultStory.args, type: "border" },
-};

package/src/components/image-link/jd-image-link.scss

@@ -1,41 +0,0 @@
-@use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/tokens.scss" as tokens;
-
-:host {
-  display: inline-block;
-}
-
-.link-wrapper {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  width: auto;
-}
-
-a {
-  color: tokens.$color-black;
-  text-decoration: none;
-  background-color: transparent;
-  &:hover {
-    color: tokens.$color-black;
-  }
-}
-
-.title {
-  &.l {
-    @include mixins.font-01-copy-italic;
-  }
-  &.m,
-  &.s {
-    @include mixins.font-02-copy-italic;
-  }
-}
-
-.divider {
-  border-bottom: solid 2px tokens.$color-black;
-  height: 1px;
-}
-
-.description {
-  @include mixins.font-03-copy;
-}

package/src/components/image-link/jd-image-link.ts

@@ -1,36 +0,0 @@
-import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import style from "./jd-image-link.scss?inline";
-import { SignalWatcher } from "@lit-labs/signals";
-import { breakpoint } from "../../stores/breakpoint-store";
-import { classMap } from "lit/directives/class-map.js";
-import "../../components";
-
-@customElement("jd-image-link")
-export class JdImageLink extends SignalWatcher(LitElement) {
-  static styles = unsafeCSS(style);
-  @property({ type: String }) href = "";
-  @property({ type: String }) target: "_blank" | "_bla" = "_blank";
-  @property({ type: String }) description = "";
-
-  render() {
-    const titleClass = {
-      title: true,
-      [breakpoint.get()]: true,
-    };
-
-    return html`
-      <div>
-        <a href="${this.href}" target="${this.target}">
-          <div class="link-wrapper">
-            <div class=${classMap(titleClass)}>
-              <slot></slot>
-            </div>
-            <div class="divider"></div>
-            <div class="description">${this.description}</div>
-          </div>
-        </a>
-      </div>
-    `;
-  }
-}