@jotyping/jo-designsystem 0.1.1-alpha

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

@@ -0,0 +1,91 @@
+@use "/src/styles/mixins.scss" as mixins;
+@use "/src/styles/colors.scss" as colors;
+
+.content {
+  display: flex;
+  background-color: colors.$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

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

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

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

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

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

@@ -0,0 +1,19 @@
+@use "/src/styles/mixins.scss" as mixins;
+@use "/src/styles/colors.scss" as colors;
+
+: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: colors.$color-black;
+  background-color: colors.$color-neutral-200;
+}

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

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

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

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

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

package/src/stores/breakpoint-store.ts

@@ -0,0 +1,16 @@
+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/_colors.scss

@@ -0,0 +1,10 @@
+$color-black: #3a3a3a;
+$color-white: #ffffff;
+
+$color-neutral-200: #f3f3f3;
+$color-neutral-400: #d5d5d5;
+$color-neutral-600: #898989;
+
+$color-accent-blue: #2a91ff;
+$color-accent-purple: #bf2aff;
+$color-accent-red: #ff4d2a;

package/src/styles/_fonts.scss

@@ -0,0 +1,72 @@
+@font-face {
+  font-family: "Satoshi_Bold";
+  src:
+    local("Satoshi_Bold"),
+    url(/fonts/satoshi-bold.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Satoshi_Black";
+  src:
+    local("Satoshi_Black"),
+    url(/fonts/satoshi-black.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Satoshi_Medium";
+  src:
+    local("Satoshi_Medium"),
+    url(/fonts/satoshi-medium.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Satoshi_Regular";
+  src:
+    local("Satoshi_Regular"),
+    url(/fonts/satoshi-regular.ttf) format("truetype");
+}
+
+@font-face {
+  font-family: "Satoshi_Italic";
+  src:
+    local("Satoshi_Italic"),
+    url(/fonts/satoshi-italic.ttf) format("truetype");
+}
+
+/* --- FONT FAMILIES --- */
+$font-regular: "Satoshi_Regular", sans-serif;
+$font-bold: "Satoshi_Bold", sans-serif;
+$font-black: "Satoshi_Black", sans-serif;
+$font-medium: "Satoshi_Medium", sans-serif;
+$font-italic: "Satoshi_Italic", sans-serif;
+
+/* --- FONT SIZES & LINE HEIGHTS --- */
+$font-size-01-copy: 34px;
+$line-height-01-copy: 52px;
+
+$font-size-02-copy: 28px;
+$line-height-02-copy: 42px;
+
+$font-size-03-copy: 22px;
+$line-height-03-copy: 32px;
+
+$font-size-button: 24px;
+$line-height-button: 42px;
+
+$font-size-01-headline: 130px;
+$line-height-01-headline: 112px;
+
+$font-size-02-headline: 100px;
+$line-height-02-headline: 90px;
+
+$font-size-03-headline: 80px;
+$line-height-03-headline: 72px;
+
+$font-size-01-subheadline: 60px;
+$line-height-01-subheadline: 64px;
+
+$font-size-02-subheadline: 46px;
+$line-height-02-subheadline: 50px;
+
+$font-size-03-subheadline: 34px;
+$line-height-03-subheadline: 36px;

package/src/styles/_mixins.scss

@@ -0,0 +1,112 @@
+@use "fonts" as font;
+
+/* Regular fonts */
+@mixin font-01-copy {
+  font-family: #{font.$font-regular};
+  font-size: #{font.$font-size-01-copy}; /* 34x */
+  line-height: #{font.$line-height-01-copy}; /* 52px */
+}
+
+@mixin font-02-copy {
+  font-family: #{font.$font-regular};
+  font-size: #{font.$font-size-02-copy}; /* 28x */
+  line-height: #{font.$line-height-02-copy}; /* 42px */
+}
+
+@mixin font-03-copy {
+  font-family: #{font.$font-regular};
+  font-size: #{font.$font-size-03-copy}; /* 22x */
+  line-height: #{font.$line-height-03-copy}; /* 32px */
+}
+
+/* Italic fonts */
+@mixin font-01-copy-italic {
+  font-family: #{font.$font-italic};
+  font-size: #{font.$font-size-01-copy}; /* 34x */
+  line-height: #{font.$line-height-01-copy}; /* 52px */
+}
+
+@mixin font-02-copy-italic {
+  font-family: #{font.$font-italic};
+  font-size: #{font.$font-size-02-copy}; /* 28x */
+  line-height: #{font.$line-height-02-copy}; /* 42px */
+}
+
+@mixin font-03-copy-italic {
+  font-family: #{font.$font-italic};
+  font-size: #{font.$font-size-03-copy}; /* 22x */
+  line-height: #{font.$line-height-03-copy}; /* 32px */
+}
+
+/* Button fonts */
+@mixin font-button {
+  font-family: #{font.$font-bold};
+  font-size: #{font.$font-size-button}; /* 24x */
+  line-height: #{font.$line-height-button}; /* 42px */
+}
+
+/* Headline fonts */
+@mixin font-01-headline {
+  font-family: #{font.$font-black};
+  font-size: #{font.$font-size-01-headline}; /* 130px */
+  line-height: #{font.$line-height-01-headline}; /* 112px */
+}
+
+@mixin font-02-headline {
+  font-family: #{font.$font-black};
+  font-size: #{font.$font-size-02-headline}; /* 100x */
+  line-height: #{font.$line-height-02-headline}; /* 90px */
+}
+
+@mixin font-03-headline {
+  font-family: #{font.$font-black};
+  font-size: #{font.$font-size-03-headline}; /* 80x */
+  line-height: #{font.$line-height-03-headline}; /* 72px */
+}
+
+/* Subheadline fonts */
+@mixin font-01-subheadline {
+  font-family: #{font.$font-italic};
+  font-size: #{font.$font-size-01-subheadline}; /* 130x */
+  line-height: #{font.$line-height-01-subheadline}; /* 112px */
+}
+
+@mixin font-02-subheadline {
+  font-family: #{font.$font-italic};
+  font-size: #{font.$font-size-02-subheadline}; /* 100x */
+  line-height: #{font.$line-height-02-subheadline}; /* 90px */
+}
+
+@mixin font-03-subheadline {
+  font-family: #{font.$font-italic};
+  font-size: #{font.$font-size-03-subheadline}; /* 80x */
+  line-height: #{font.$line-height-03-subheadline}; /* 72px */
+}
+
+/* Logo font */
+@mixin font-logo {
+  font-family: #{font.$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;
+}

package/src/styles/_reset.scss

@@ -0,0 +1,62 @@
+/*
+ * File is defined as partial, which means it won't be compiled into CSS directly
+ * It's intended to be used as a building block for the component styles.
+ */
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/*
+ * Make form elements inherit fonts for consistent styling.
+ */
+button,
+input,
+select,
+textarea {
+  font: inherit;
+}
+
+/*
+ * Make images and other media easier to work with.
+ */
+img,
+picture,
+video,
+canvas,
+svg {
+  display: block;
+  max-width: 100%;
+}
+
+/*
+ * Remove default list styles.
+ */
+ol,
+ul {
+  list-style: none;
+}
+
+/*
+ * Remove default anchor styles.
+ */
+a {
+  text-decoration: none;
+  color: inherit;
+}
+
+/*
+ * Remove default heading styles.
+ */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  font-weight: normal;
+}