@jotyping/jo-designsystem 0.1.1-alpha

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import { html } from "lit-html";
+import "../jd-image-link.ts";
+
+type JdImageLinkArgs = {
+  href: string;
+  target: "_blank" | "_bla";
+  description: string;
+};
+
+const meta: Meta<JdImageLinkArgs> = {
+  title: "Components/ImageLink",
+  component: "jd-image-link",
+  argTypes: {
+    href: {
+      control: { type: "text" },
+      description: "href of the link",
+      defaultValue: "",
+    },
+    target: {
+      control: { type: "select" },
+      options: ["_blank", "_bla"],
+      description: "href of the link",
+      defaultValue: "",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<JdImageLinkArgs>;
+
+const DefaultExample = (args: JdImageLinkArgs) => {
+  return html` <jd-image-link
+    href=${args.href}
+    target=${args.target}
+    description="This is a link"
+  >
+    Click me
+  </jd-image-link>`;
+};
+
+export const DefaultStory: Story = {
+  name: "Default",
+  render: DefaultExample.bind({}),
+  args: { href: "https://www.google.com", target: "_blank" },
+};

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

@@ -0,0 +1,29 @@
+@use "/src/styles/mixins.scss" as mixins;
+@use "/src/styles/colors.scss" as colors;
+
+:host {
+  display: inline-block;
+}
+
+.link-wrapper {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  width: auto;
+}
+
+a {
+  color: colors.$color-black;
+  text-decoration: none;
+  background-color: transparent;
+  &:hover {
+    color: colors.$color-black;
+    text-decoration: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 6px;
+  }
+}
+
+.title {
+  @include mixins.font-03-copy;
+}

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

@@ -0,0 +1,25 @@
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import style from "./jd-link.scss?inline";
+
+@customElement("jd-link")
+export class JdLink extends LitElement {
+  static styles = unsafeCSS(style);
+  @property({ type: String }) href = "";
+  @property({ type: String }) target: "_blank" | "_bla" = "_blank";
+  @property({ type: String }) description = "";
+
+  render() {
+    return html`
+      <div>
+        <a href="${this.href}" target="${this.target}">
+          <div class="link-wrapper">
+            <div class="title">
+              <slot></slot>
+            </div>
+          </div>
+        </a>
+      </div>
+    `;
+  }
+}

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import { html } from "lit-html";
+import "../jd-link.ts";
+
+type JdLinkArgs = {
+  href: string;
+  target: "_blank" | "_bla";
+  description: string;
+};
+
+const meta: Meta<JdLinkArgs> = {
+  title: "Components/Link",
+  component: "jd-link",
+  argTypes: {
+    href: {
+      control: { type: "text" },
+      description: "href of the link",
+      defaultValue: "",
+    },
+    target: {
+      control: { type: "select" },
+      options: ["_blank", "_bla"],
+      description: "href of the link",
+      defaultValue: "",
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<JdLinkArgs>;
+
+const DefaultExample = (args: JdLinkArgs) => {
+  return html` <jd-link href=${args.href} target=${args.target}>
+    Click me
+  </jd-link>`;
+};
+
+export const DefaultStory: Story = {
+  name: "Default",
+  render: DefaultExample.bind({}),
+  args: { href: "https://www.google.com", target: "_blank" },
+};