@repobit/dex-system-design 0.2.0

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log
+
+All notable changes to this project will be documented in this file.
+See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+
+## 0.2.0 (2025-06-24)
+
+
+### Features
+
+* **DEX-23636:** add initial commit for design system package ([504de7e](https://github.com/bitdefender/dex-core/commit/504de7ee97af52ea8b7a0c14d91a58e5060b0df5))

package/README.md

@@ -0,0 +1,15 @@
+# `@repobit/dex-design-system`
+
+# Target Integration SDK Documentation
+
+Dex design system shenanigans
+
+---
+
+## Overview
+
+The Target Integration SDK is designed to simplify the integration process with Adobe Target and the Adobe Data Layer. It provides a centralized solution for managing visitor identity operations, sending events, appending visitor IDs to URLs, retrieving mbox offers, and fetching Customer Data Platform (CDP) data. The SDK encapsulates these operations within a single abstract class, ensuring that targeting functionalities are cleanly organized and maintainable in your application.
+
+---
+
+## Key Features

package/package.json

@@ -0,0 +1,57 @@
+{
+  "name": "@repobit/dex-system-design",
+  "version": "0.2.0",
+  "description": "Client for pricing API",
+  "author": "Iordache Matei Cezar <miordache@bitdefender.com>",
+  "homepage": "https://github.com/bitdefender/dex-core#readme",
+  "license": "ISC",
+  "type": "module",
+  "directories": {
+    "src": "src"
+  },
+  "files": [
+    "src",
+    "README.md",
+    "CHANGELOG.md",
+    "LICENSE"
+  ],
+  "exports": {
+    "./button": "./src/components/Button/Button.js"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/bitdefender/dex-core.git"
+  },
+  "scripts": {
+    "build": "",
+    "start": "vite",
+    "dev": "vite",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "bugs": {
+    "url": "https://github.com/bitdefender/dex-core/issues"
+  },
+  "dependencies": {
+    "lit": "^3.2.1",
+    "lit-query": "^0.0.1"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^3.2.5",
+    "@storybook/addon-essentials": "^8.6.4",
+    "@storybook/blocks": "^8.6.4",
+    "@storybook/experimental-addon-test": "^8.6.4",
+    "@storybook/test": "^8.6.4",
+    "@storybook/web-components": "^8.6.4",
+    "@storybook/web-components-vite": "^8.6.4",
+    "storybook": "^8.6.4",
+    "vite": "^5.4.11"
+  },
+  "volta": {
+    "node": "22.14.0"
+  },
+  "gitHead": "be350153db8faacf8c12aec58fdbc87cb7439d01"
+}

package/src/components/Button/Button.js

@@ -0,0 +1,120 @@
+import { LitElement, html, css } from "lit";
+import "./icons.js";
+import buttonsCSS from "../button/button.css.js";
+
+class Button extends LitElement {
+  static properties = {
+    label: { type: String },
+    href: { type: String },
+    size: { type: String },
+    customClass: { type: String },
+    kind: { type: String },
+    fullWidth: { type: Boolean },
+    strong: { type: Boolean },
+  };
+
+  /** @private -> for private properties we are using "_text" */
+
+  constructor() {
+    super();
+    this.label = "Buy now";
+    this.href = "";
+    this.size = "md";
+  }
+
+  get sizeClass() {
+    switch (this.size) {
+      case "lg":
+        return "button--large";
+      case "md":
+        return "button--medium";
+      case "sm":
+        return "button--small";
+      default:
+        return "";
+    }
+  }
+
+  get kindClass() {
+    switch (this.kind) {
+      case "primary-outline":
+        return "button--primary--outline";
+      case "outline":
+        return "button--outline";
+      case "secondary":
+        return "button--secondary";
+      case "primary":
+        return "button--primary";
+      case "danger":
+        return "button--danger";
+      default:
+        return "";
+    }
+  }
+  get fullWidthClass() {
+    return this.fullWidth ? "max--width" : "";
+  }
+
+  get strongClass() {
+    return this.strong ? "button--bold" : "";
+  }
+
+  render() {
+    return html`
+      <a class="href-button" href="${this.href}" aria-label="${this.label}">
+        <button
+          @click=${this._handleClick}
+          class="button ${this.kindClass} ${this.sizeClass} ${this
+            .fullWidthClass} ${this.strongClass}"
+          aria-label="${this.label}"
+        >
+          <slot></slot>
+        </button>
+      </a>
+    `;
+  }
+
+  _handleClick() {
+    console.log("Button clicked!");
+    this.dispatchEvent(new Event("custom-click"));
+  }
+}
+
+class ContactButton extends LitElement {
+  static properties = {
+    label: { type: String },
+    href: { type: String },
+  };
+
+  constructor() {
+    super();
+    this.label = "Contact us";
+    this.href = "https://www.google.com";
+  }
+
+  render() {
+    return html`
+      <a class="href-button" href="${this.href}" aria-label="${this.label}">
+        <button
+          class="bd-contact-btn"
+          @click=${this._handleClick}
+          aria-label="${this.label}"
+        >
+          ${this.label}
+          <arrow-icon></arrow-icon>
+        </button>
+      </a>
+    `;
+  }
+
+  _handleClick() {
+    console.log("Contact button clicked!");
+    this.dispatchEvent(new Event("custom-click"));
+  }
+}
+
+Button.styles = [buttonsCSS];
+ContactButton.styles = [buttonsCSS];
+
+customElements.define("bd-button", Button);
+customElements.define("bd-contact-button", ContactButton);

package/src/components/Button/button.css.js

@@ -0,0 +1,137 @@
+import { css } from 'lit';
+
+export default css`
+  :host {
+    --button-background-primary: var(--color-blue-500);
+    --button-background-primary-hover: var(--color-blue-600);
+    --button-background-primary-focus: var(--color-blue-700);
+
+    --button-background-secondary: var(--color-neutral-950);
+    --button-background-secondary-hover: var(--color-neutral-900);
+    --button-background-secondary-focus: var(--color-neutral-800);
+
+    --button-background-danger: var(--color-red-600);
+    --button-background-danger-hover: var(--color-red-700);
+    --button-background-danger-focus: var(--color-red-800);
+
+    --color-button-background-outline: var(--color-neutral-950);
+    --border-button-background-outline: var(--color-neutral-950);
+    --button-background-outline-hover: var(--color-neutral-50);
+    --border-button-background-outline-hover: var(--color-neutral-950);
+    --button-background-outline-focus: var(--color-neutral-800);
+
+    --color-button-background-primary-outline: var(--color-blue-500);
+    --border-button-background-primary-outline: var(--color-blue-500);
+    --button-background-primary-outline-hover: var(--color-blue-50);
+    --border-button-background-primary-outline-hover: var(--color-blue-500);
+    --button-background-primary-outline-focus: var(--color-blue-500);
+  }
+
+  .href-button {
+    text-decoration: none;
+  }
+  .button {
+    color: white;
+    border: none;
+    cursor: pointer;
+    transition: background-color 0.3s ease, transform 0.2s ease,
+      box-shadow 0.2s ease;
+    gap: 10px;
+  }
+
+  .button--primary {
+    background-color: var(--button-background-primary);
+    color: white;
+  }
+
+  .button--primary:hover {
+    background-color: var(--button-background-primary-hover);
+  }
+
+  .button--primary:focus {
+    background-color: var(--button-background-primary-focus);
+  }
+
+  .button--secondary {
+    background-color: var(--button-background-secondary);
+    color: white;
+  }
+
+  .button--secondary:hover {
+    background-color: var(--button-background-secondary-hover);
+  }
+
+  .button--secondary:focus {
+    background-color: var(--button-background-secondary-focus);
+  }
+
+  .button--danger {
+    background-color: var(--button-background-danger);
+    color: white;
+  }
+
+  .button--danger:hover {
+    background-color: var(--button-background-danger-hover);
+  }
+
+  .button--danger:focus {
+    background-color: var(--button-background-danger-focus);
+  }
+
+  .button--outline {
+    background-color: transparent;
+    border: 2px solid var(--border-button-background-outline);
+    color: var(--color-button-background-outline);
+  }
+  .button--outline:hover {
+    background-color: var(--button-background-outline-hover);
+    border: 2px solid var(--border-button-background-outline-hover);
+  }
+  .button--outline:focus {
+    background-color: var(--button-background-outline-focus);
+    color: white;
+  }
+  .button--primary--outline {
+    background-color: transparent;
+    border: 2px solid var(--border-button-background-primary-outline);
+    color: var(--color-button-background-primary-outline);
+  }
+  .button--primary--outline:hover {
+    background-color: var(--button-background-primary-outline-hover);
+    border: 2px solid var(--border-button-background-primary-outline-hover);
+  }
+  .button--primary--outline:focus {
+    background-color: var(--button-background-primary-outline-focus);
+    color: white;
+  }
+
+  .button--small {
+    padding: var(--size-8) var(--size-16);
+    font-size: var(--size-14);
+    font-weight: 400;
+    font-family: var(--font-family-sans);
+    border-radius: 6px;
+  }
+
+  .button--medium {
+    padding: var(--size-12) var(--size-20);
+    font-size: var(--size-16);
+    font-weight: 400;
+    font-family: var(--font-family-sans);
+    border-radius: 8px;
+  }
+
+  .button--large {
+    padding: var(--size-16) var(--size-24);
+    font-size: var(--size-18);
+    font-weight: 400;
+    font-family: var(--font-family-sans);
+    border-radius: 8px;
+  }
+  .button--bold {
+    font-weight: 600;
+  }
+  .max--width {
+    width: 100%;
+  }
+`;

package/src/components/Button/button.stories.js

@@ -0,0 +1,56 @@
+import "./Button.js";
+import { html } from "lit";
+
+export default {
+  title: "Components/Button",
+  component: "bd-button",
+  tags: ["autodocs"],
+  argTypes: {
+    label: { control: "text" },
+    href: { control: "text" },
+    size: {
+      control: { type: "select" },
+      options: ["sm", "md", "lg"],
+    },
+    kind: {
+      control: { type: "select" },
+      options: ["primary", "secondary", "outline", "primary-outline", "danger"],
+    },
+    fullWidth: { control: "boolean" },
+    strong: { control: "boolean" },
+  },
+};
+
+const Template = (args) => {
+  const { label, href, size, kind, fullWidth, strong } = args;
+  return `
+    <bd-button 
+      label="${label}" 
+      href="${href}" 
+      size="${size}" 
+      kind="${kind}" 
+      ${fullWidth ? "fullWidth" : ""} 
+      ${strong ? "strong" : ""}>Buy Now
+    </bd-button>
+  `;
+};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  label: "Buy Now",
+  href: "#",
+  size: "md",
+  kind: "primary",
+  fullWidth: false,
+  strong: false,
+};
+
+export const FullWidthPrimary = Template.bind({});
+FullWidthPrimary.args = {
+  label: "Get Started",
+  href: "#",
+  size: "lg",
+  kind: "primary",
+  fullWidth: true,
+  strong: true,
+};

package/src/components/Button/icons.css

@@ -0,0 +1,5 @@
+.arrow-icon {
+  width: 24px;
+  height: 24px;
+  fill: #000;
+}

package/src/components/Button/icons.js

@@ -0,0 +1,24 @@
+import { LitElement, html, css } from "lit";
+
+
+class ArrowIconComponent extends LitElement {
+ 
+    static styles = css`
+    .arrow-icon {
+      height: 10px;
+      font-weight: 600;
+    }
+  `;
+    render() {
+      return html`
+        <svg class="arrow-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 404.39">
+          <path
+            fill-rule="nonzero"
+            d="M438.95 219.45 0 219.99v-34.98l443.3-.55L269.8 25.79 293.39 0 512 199.92 288.88 404.39l-23.59-25.8z"
+          />
+        </svg>
+      `;
+    }
+  }
+  
+  customElements.define('arrow-icon', ArrowIconComponent);

package/src/components/FAQ/faq.css.js

@@ -0,0 +1,107 @@
+import { css } from "../../../node_modules/lit-element/lit-element";
+
+export default css`
+  :host {
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+    --border-card-green: var(--color-green-700);
+    --badge-background: var(--color-blue-500);
+    --text-color-white: var(--color-neutral-0);
+
+    display: block;
+  }
+
+  .bd-faq-item {
+    margin-bottom: var(--size-10);
+    border-radius: var(--size-8);
+    background-color: var(--color-blue-50);
+    overflow: hidden;
+    transition: box-shadow 0.3s ease;
+  }
+
+  .bd-faq-item:hover {
+    .bd-question-text {
+      text-decoration-line: underline;
+      text-decoration-style: solid;
+    }
+  }
+
+  .bd-question {
+    cursor: pointer;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--size-10);
+    padding: 15px;
+    font-weight: bold;
+    background-color: #f2f6fc;
+    color: #333;
+    transition: background-color 0.3s ease, color 0.3s ease;
+  }
+
+  .bd-header-section-faq {
+    margin-bottom: 50px;
+    margin-top: 50px;
+  }
+
+  .bd-question:hover {
+    color: #0073e6;
+  }
+
+  .bd-faq-item:focus {
+    .bd-question-text {
+      font-weight: 600;
+      text-decoration-line: underline;
+      text-decoration-style: solid;
+      color: var(--color-blue-600);
+      text-decoration-thickness: var(--size-2);
+    }
+  }
+
+  .bd-question-text {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-semibold);
+  }
+
+  .bd-section-title {
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-semibold);
+  }
+
+  .bd-icon {
+    transition: transform 0.3s ease;
+    width: var(--size-14);
+    height: var(--size-14);
+    color: var(--color-blue-500);
+    text-align: center;
+  }
+
+  .bd-answer {
+    display: grid;
+    grid-template-rows: 0fr;
+    transition: grid-template-rows 0.4s ease, padding 0.4s ease;
+    overflow: hidden;
+    padding: var(--size-0) 15px;
+    background-color: var(--color-blue-50);
+    font-family: var(--font-family-sans);
+    font-weight: var(--font-weight-sans-medium);
+  }
+
+  .bd-answer > div {
+    overflow: hidden;
+  }
+
+  .bd-faq-item.open .bd-answer {
+    grid-template-rows: 1fr;
+    padding: var(--size-0) var(--size-40);
+  }
+
+  .bd-faq-container {
+    width: 90%;
+    margin: auto;
+  }
+
+  .bd-link-noline {
+    text-decoration: none;
+  }
+`;