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

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

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

@@ -1,29 +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;
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 6px;
-  }
-}
-
-.title {
-  @include mixins.font-03-copy;
-}

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

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

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

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

@@ -1,91 +0,0 @@
-@use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/tokens.scss" as tokens;
-
-.content {
-  display: flex;
-  background-color: tokens.$color-white;
-  position: fixed;
-  &.s {
-    top: 0;
-    left: 0;
-    height: 100vh;
-    width: 100vw;
-  }
-  &.m {
-    top: 70px;
-    left: 70px;
-    height: calc(100vh - 140px);
-    width: calc(100vw - 140px);
-  }
-  &.l {
-    top: 150px;
-    left: 150px;
-    height: calc(100vh - 300px);
-    width: calc(100vw - 300px);
-  }
-
-  &.hidden {
-    display: none;
-  }
-  z-index: 1001;
-}
-
-.content-wrapper {
-  width: 100%;
-  height: inherit;
-  overflow: hidden;
-}
-
-.content-header {
-  @include mixins.font-button;
-  width: 100%;
-  display: flex;
-  flex-direction: row;
-  justify-content: center;
-  align-items: center;
-  height: 90px;
-}
-
-.content-body {
-  @include mixins.font-03-copy;
-  display: flex;
-  padding: 40px;
-  overflow-y: auto;
-  &.s {
-    height: calc(100vh - 90px - 80px);
-    width: calc(100vw - 80px);
-  }
-  &.m {
-    height: calc(100vh - 230px);
-    width: calc(100vw - 140px - 80px);
-  }
-  &.l {
-    height: calc(100vh - 390px);
-    width: calc(100vw - 300px - 80px);
-  }
-}
-
-.backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  background-color: rgba(0, 0, 0, 0.5);
-  z-index: 999;
-  display: block;
-  &.hidden {
-    display: none;
-  }
-}
-
-.btn-close-wrapper {
-  position: absolute;
-  z-index: 1000;
-  top: 20px;
-  right: 20px;
-  &.header.s {
-    top: 60px;
-    right: 32px;
-  }
-}

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

@@ -1,75 +0,0 @@
-import { LitElement, html, unsafeCSS } from "lit";
-import { customElement, property } from "lit/decorators.js";
-import style from "./jd-modal.scss?inline";
-import { SignalWatcher } from "@lit-labs/signals";
-import { classMap } from "lit/directives/class-map.js";
-import "../../components";
-import { breakpoint } from "../../stores/breakpoint-store";
-
-@customElement("jd-modal")
-export class JdModal extends SignalWatcher(LitElement) {
-  static styles = unsafeCSS(style);
-
-  @property({ type: Boolean }) show = false;
-  @property({ type: String, reflect: true })
-  type: "default" | "header" = "default";
-
-  render() {
-    const backdropClasses = {
-      backdrop: true,
-      hidden: !this.show || breakpoint.get() === "s",
-    };
-
-    const contentClasses = {
-      content: true,
-      [breakpoint.get()]: true,
-      hidden: !this.show,
-    };
-
-    const btnCloseClasses = {
-      "btn-close-wrapper": true,
-      [this.type]: true,
-      [breakpoint.get()]: true,
-    };
-
-    const contentBodyClasses = {
-      "content-body": true,
-      [breakpoint.get()]: true,
-    };
-
-    return html`<slot name="button" @click=${() => (this.show = true)}></slot>
-      <div
-        class=${classMap(backdropClasses)}
-        @click=${() => {
-          this.show = false;
-        }}
-      ></div>
-      <div class=${classMap(contentClasses)}>
-        <div class=${classMap(btnCloseClasses)}>
-          <jd-icon-button
-            iconName="x"
-            color="black"
-            type="borderless"
-            @click=${() => {
-              this.show = false;
-            }}
-          ></jd-icon-button>
-        </div>
-        <div class="content-wrapper">
-          <slot></slot>
-          <div class="content-header">
-            <slot name="header"></slot>
-          </div>
-          <div class=${classMap(contentBodyClasses)}>
-            <slot name="content"></slot>
-          </div>
-        </div>
-      </div>`;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "jd-modal": JdModal;
-  }
-}

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

@@ -1,54 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/web-components-vite";
-import { html } from "lit-html";
-import "../jd-modal.ts";
-
-type JdModalArgs = {
-  show: boolean;
-  type: "default" | "header";
-};
-
-const meta: Meta<JdModalArgs> = {
-  title: "Components/Modal",
-  component: "jd-modal",
-  argTypes: {
-    show: {
-      control: "boolean",
-      options: ["true", "false"],
-      description: "Show or hide the modal",
-      defaultValue: "false",
-    },
-    type: {
-      control: { type: "select" },
-      options: ["default", "header"],
-      description: "Modal type",
-      defaultValue: "default",
-    },
-  },
-};
-
-export default meta;
-type Story = StoryObj<JdModalArgs>;
-
-const DefaultExample = (args: JdModalArgs) => {
-  return html`
-    <jd-modal .show=${args.show} .type=${args.type} id="modal">
-      <div slot="button">
-        <jd-button>Open Modal</jd-button>
-      </div>
-      <div slot="header">This is the Headline</div>
-      <div slot="content">
-        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo
-        ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
-        dis parturient montes, nascetur ridiculus mus. Donec quam felis,
-        ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat
-        massa.
-      </div></jd-modal
-    >
-  `;
-};
-
-export const DefaultStory: Story = {
-  name: "Default",
-  render: DefaultExample.bind({}),
-  args: { show: false, type: "default" },
-};

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

@@ -1,17 +0,0 @@
-:host {
-  display: inline-block;
-}
-
-.navi-wrapper {
-  display: flex;
-  flex-direction: row;
-  gap: 12px;
-  flex-wrap: wrap;
-  &.s {
-    flex-direction: column;
-    gap: 16px;
-    width: 100%;
-    align-items: center;
-    margin-top: 100px;
-  }
-}

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

@@ -1,32 +0,0 @@
-import { LitElement, html, unsafeCSS } from "lit";
-import { customElement } from "lit/decorators.js";
-import style from "./jd-navigation.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-navigation")
-export class JdNavigation extends SignalWatcher(LitElement) {
-  static styles = unsafeCSS(style);
-
-  render() {
-    const naviWrapperClass = {
-      "navi-wrapper": true,
-      [breakpoint.get()]: true,
-    };
-
-    return html`
-      <div class=${classMap(naviWrapperClass)}>
-        <slot></slot>
-        <div class="border-slider"></div>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "jd-navigation": JdNavigation;
-  }
-}

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

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/web-components-vite";
-import { html } from "lit-html";
-import "../jd-navigation.ts";
-import "../../button/jd-button.ts";
-
-const meta: Meta = {
-  title: "Components/Navigation",
-  component: "jd-navigation",
-};
-
-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-navigation>
-    ${buttons.map(
-      (label, index) => html`
-        <jd-button type="secondary" ?active=${index === activeIndex}>
-          ${label}
-        </jd-button>
-      `,
-    )}
-  </jd-navigation>`;
-};
-
-export const DefaultStory: Story = {
-  name: "Default",
-  render: DefaultExample.bind({}),
-};

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

@@ -1,19 +0,0 @@
-@use "/src/styles/mixins.scss" as mixins;
-@use "/src/styles/tokens.scss" as tokens;
-
-:host {
-  display: inline-block;
-}
-
-.tag-wrapper {
-  @include mixins.font-button;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 20px;
-  border-radius: 32px;
-  height: 64px;
-  border: none;
-  color: tokens.$color-black;
-  background-color: tokens.$color-neutral-200;
-}

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

@@ -1,23 +0,0 @@
-import { LitElement, html, unsafeCSS } from "lit";
-import { customElement } from "lit/decorators.js";
-import style from "./jd-tag.scss?inline";
-import "../../components";
-
-@customElement("jd-tag")
-export class JdTag extends LitElement {
-  static styles = unsafeCSS(style);
-
-  render() {
-    return html`
-      <div class="tag-wrapper">
-        <slot></slot>
-      </div>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    "jd-tag": JdTag;
-  }
-}

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

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

package/src/components.ts

@@ -1,12 +0,0 @@
-import "./components/button/jd-button";
-import "./components/flash/jd-flash";
-import "./components/footer/jd-footer";
-import "./components/header/jd-header";
-import "./components/heading/jd-heading";
-import "./components/icon/jd-icon";
-import "./components/icon-button/jd-icon-button";
-import "./components/image-link/jd-image-link";
-import "./components/link/jd-link";
-import "./components/modal/jd-modal";
-import "./components/navigation/jd-navigation";
-import "./components/tag/jd-tag";

package/src/index.ts

@@ -1,20 +0,0 @@
-import "./styles/variables.scss";
-import "./styles/fonts.css";
-import "./assets/satoshi-regular.ttf";
-import "./assets/satoshi-bold.ttf";
-import "./assets/satoshi-black.ttf";
-import "./assets/satoshi-italic.ttf";
-
-export * from "./components/button/jd-button.js";
-export * from "./components/flash/jd-flash.js";
-export * from "./components/footer/jd-footer.js";
-export * from "./components/header/jd-header.js";
-export * from "./components/heading/jd-heading.js";
-export * from "./components/icon/jd-icon.js";
-export * from "./components/icon-button/jd-icon-button.js";
-export * from "./components/image-link/jd-image-link.js";
-export * from "./components/link/jd-link.js";
-export * from "./components/modal/jd-modal.js";
-export * from "./components/navigation/jd-navigation.js";
-export * from "./components/tag/jd-tag.js";
-export * from "./components";

package/src/stores/breakpoint-store.ts

@@ -1,16 +0,0 @@
-import { signal } from "@lit-labs/signals";
-
-export const breakpoint = signal<string>(getBreakpoint(window.innerWidth));
-
-function getBreakpoint(width: number): string {
-  if (width < 600) return "s";
-  if (width < 1024) return "m";
-  return "l";
-}
-
-window.addEventListener("resize", () => {
-  const newBp = getBreakpoint(window.innerWidth);
-  if (newBp !== breakpoint.get()) {
-    breakpoint.set(newBp);
-  }
-});

package/src/styles/_mixins.scss

@@ -1,112 +0,0 @@
-@use "tokens" as token;
-
-/* Regular tokens */
-@mixin font-01-copy {
-  font-family: #{token.$font-regular};
-  font-size: #{token.$font-size-01-copy}; /* 34x */
-  line-height: #{token.$line-height-01-copy}; /* 52px */
-}
-
-@mixin font-02-copy {
-  font-family: #{token.$font-regular};
-  font-size: #{token.$font-size-02-copy}; /* 28x */
-  line-height: #{token.$line-height-02-copy}; /* 42px */
-}
-
-@mixin font-03-copy {
-  font-family: #{token.$font-regular};
-  font-size: #{token.$font-size-03-copy}; /* 22x */
-  line-height: #{token.$line-height-03-copy}; /* 32px */
-}
-
-/* Italic fonts */
-@mixin font-01-copy-italic {
-  font-family: #{token.$font-italic};
-  font-size: #{token.$font-size-01-copy}; /* 34x */
-  line-height: #{token.$line-height-01-copy}; /* 52px */
-}
-
-@mixin font-02-copy-italic {
-  font-family: #{token.$font-italic};
-  font-size: #{token.$font-size-02-copy}; /* 28x */
-  line-height: #{token.$line-height-02-copy}; /* 42px */
-}
-
-@mixin font-03-copy-italic {
-  font-family: #{token.$font-italic};
-  font-size: #{token.$font-size-03-copy}; /* 22x */
-  line-height: #{token.$line-height-03-copy}; /* 32px */
-}
-
-/* Button fonts */
-@mixin font-button {
-  font-family: #{token.$font-bold};
-  font-size: #{token.$font-size-button}; /* 24x */
-  line-height: #{token.$line-height-button}; /* 42px */
-}
-
-/* Headline fonts */
-@mixin font-01-headline {
-  font-family: #{token.$font-black};
-  font-size: #{token.$font-size-01-headline}; /* 130px */
-  line-height: #{token.$line-height-01-headline}; /* 112px */
-}
-
-@mixin font-02-headline {
-  font-family: #{token.$font-black};
-  font-size: #{token.$font-size-02-headline}; /* 100x */
-  line-height: #{token.$line-height-02-headline}; /* 90px */
-}
-
-@mixin font-03-headline {
-  font-family: #{token.$font-black};
-  font-size: #{token.$font-size-03-headline}; /* 80x */
-  line-height: #{token.$line-height-03-headline}; /* 72px */
-}
-
-/* Subheadline fonts */
-@mixin font-01-subheadline {
-  font-family: #{token.$font-italic};
-  font-size: #{token.$font-size-01-subheadline}; /* 130x */
-  line-height: #{token.$line-height-01-subheadline}; /* 112px */
-}
-
-@mixin font-02-subheadline {
-  font-family: #{token.$font-italic};
-  font-size: #{token.$font-size-02-subheadline}; /* 100x */
-  line-height: #{token.$line-height-02-subheadline}; /* 90px */
-}
-
-@mixin font-03-subheadline {
-  font-family: #{token.$font-italic};
-  font-size: #{token.$font-size-03-subheadline}; /* 80x */
-  line-height: #{token.$line-height-03-subheadline}; /* 72px */
-}
-
-/* Logo font */
-@mixin font-logo {
-  font-family: #{token.$font-black};
-  font-size: 30px;
-  line-height: 168px;
-}
-
-/* Reset all browser default styles */
-@mixin reset {
-  all: unset;
-  margin: 0;
-  padding: 0;
-  min-width: 0;
-  box-sizing: border-box;
-  font-size: 100%;
-  font-family: inherit;
-  line-height: 1.5;
-  color: inherit;
-  list-style: none;
-  quotes: none;
-  border-collapse: collapse;
-  border-spacing: 0;
-  border-radius: 0;
-  text-decoration: none;
-  background-color: transparent;
-  vertical-align: baseline;
-}