@repobit/dex-system-design 0.20.0 → 0.21.1

package/src/components/link/link.stories.js

@@ -0,0 +1,177 @@
+import { html } from 'lit';
+import '../heading/heading.js';
+import '../paragraph/paragraph.js';
+import './link.js';
+
+export default {
+  title    : 'Atoms/Link',
+  component: 'bd-link',
+  argTypes : {
+    href: {
+      control    : 'text',
+      description: 'URL destination'
+    },
+    target: {
+      control    : { type: 'select' },
+      options    : ['_self', '_blank', '_parent', '_top'],
+      description: 'Link target attribute'
+    },
+    kind: {
+      control    : { type: 'select' },
+      options    : ['primary', 'secondary', 'danger', 'subtle', 'bold'],
+      description: 'Link style variant'
+    },
+    underline: {
+      control    : 'boolean',
+      description: 'Always show underline'
+    },
+    disabled: {
+      control    : 'boolean',
+      description: 'Disabled state'
+    },
+    content: {
+      control    : 'text',
+      description: 'Link text content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A customizable link component with multiple style variants and accessibility features.'
+      }
+    }
+  }
+};
+
+const Template = ({ href, target, kind, underline, disabled, content }) => html`
+  <bd-link 
+    href="${href}"
+    target="${target}"
+    kind="${kind}"
+    ?underline="${underline}"
+    ?disabled="${disabled}"
+  >
+    ${content}
+  </bd-link>
+`;
+
+export const AllVariants = () => html`
+  <div style="display: flex; flex-direction: column; gap: 1rem; max-width: 600px;">
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="primary">primary link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="secondary">secondary link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="danger">danger link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="subtle">subtle link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="bold">bold link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="primary" underline>underlined link</bd-link> inside the text.</bd-p>
+    </div>
+    
+    <div>
+      <bd-p kind="regular">This is a paragraph with a <bd-link href="#" kind="primary" disabled>disabled link</bd-link> inside the text.</bd-p>
+    </div>
+  </div>
+`;
+
+export const Primary = Template.bind({});
+Primary.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'primary',
+  underline: false,
+  disabled : false,
+  content  : 'Primary Link'
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'secondary',
+  underline: false,
+  disabled : false,
+  content  : 'Secondary Link'
+};
+
+export const Danger = Template.bind({});
+Danger.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'danger',
+  underline: false,
+  disabled : false,
+  content  : 'Danger Link'
+};
+
+export const WithUnderline = Template.bind({});
+WithUnderline.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'primary',
+  underline: true,
+  disabled : false,
+  content  : 'Underlined Link'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  href     : '#',
+  target   : '_self',
+  kind     : 'primary',
+  underline: false,
+  disabled : true,
+  content  : 'Disabled Link'
+};
+
+export const ExternalLinks = () => html`
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <bd-link href="https://example.com" target="_blank" kind="primary">
+      External Primary Link
+    </bd-link>
+    
+    <bd-link href="https://example.com" target="_blank" kind="secondary" underline>
+      External Underlined Link
+    </bd-link>
+    
+    <bd-p kind="regular">
+      This is a paragraph with an <bd-link href="https://example.com" target="_blank" kind="primary">external link</bd-link> that opens in a new tab.
+    </bd-p>
+  </div>
+`;
+
+export const InContext = () => html`
+  <div style="max-width: 600px;">
+    <bd-h as="h2">Cybersecurity Features</bd-h>
+    
+    <bd-p kind="lead">
+      Protect your digital life with our comprehensive security solutions. 
+      Learn more about <bd-link href="#" kind="primary">threat protection</bd-link> 
+      and <bd-link href="#" kind="bold">advanced features</bd-link>.
+    </bd-p>
+    
+    <bd-p kind="regular">
+      Our <bd-link href="#" kind="danger">emergency response</bd-link> team is available 24/7 
+      to handle security incidents. For less urgent matters, check our 
+      <bd-link href="#" kind="subtle">knowledge base</bd-link>.
+    </bd-p>
+    
+    <bd-p kind="small">
+      <bd-link href="#" kind="secondary" underline>Terms of service</bd-link> • 
+      <bd-link href="#" kind="secondary" underline>Privacy policy</bd-link>
+    </bd-p>
+  </div>
+`;

package/src/components/list/list-item/list-item.css.js

@@ -0,0 +1,106 @@
+import { css } from "lit";
+
+export default css`
+@layer bd-components {
+  .bd-list-item {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    display: flex;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+    color: var(--color-neutral-700);
+    line-height: var(--typography-lineHeight-normal);
+  }
+
+  /* === SIZE VARIANTS === */
+  
+  .bd-list-item.sm {
+    font-size: var(--typography-fontSize-sm);
+    margin-bottom: var(--spacing-4);
+  }
+
+  .bd-list-item.md {
+    font-size: var(--typography-fontSize-base);
+    margin-bottom: var(--spacing-6);
+  }
+
+  .bd-list-item.lg {
+    font-size: var(--typography-fontSize-lg);
+    margin-bottom: var(--spacing-8);
+  }
+
+  /* === MARKER STYLES === */
+  
+  .bd-list-item-marker {
+    flex-shrink: 0;
+    margin-top: var(--spacing-6);
+  }
+
+  /* Bullet List */
+  .bd-list-item.bullet .bd-list-item-marker {
+    width: var(--spacing-6);
+    height: var(--spacing-6);
+    background-color: var(--color-neutral-1000);
+    border-radius: 50%;
+  }
+
+  /* Number List */
+  .bd-list-item.number {
+    counter-increment: bd-list-counter;
+  }
+
+  .bd-list-item.number .bd-list-item-marker::before {
+    content: counter(bd-list-counter) ".";
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-1000);
+  }
+
+  /* Check List */
+  .bd-list-item.check .bd-list-item-marker {
+    width: var(--spacing-16);
+    height: var(--spacing-16);
+    background-color: var(--color-green-500);
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .bd-list-item.check .bd-list-item-marker::after {
+    content: "✓";
+    color: white;
+    font-size: var(--typography-fontSize-sm);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  /* Custom Icon */
+  .bd-list-item-custom-icon {
+    width: var(--spacing-16);
+    height: var(--spacing-16);
+    flex-shrink: 0;
+    margin-top: var(--spacing-4);
+  }
+
+  /* No Marker */
+  .bd-list-item.none {
+    gap: 0;
+  }
+
+  .bd-list-item.none .bd-list-item-marker {
+    display: none;
+  }
+
+  /* === CONTENT STYLING === */
+  
+  .bd-list-item-content {
+    flex: 1;
+  }
+
+  /* Last Item */
+  .bd-list-item:last-child {
+    margin-bottom: 0;
+  }
+}
+`;

package/src/components/list/list-item/list-item.js

@@ -0,0 +1,43 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../../tokens/tokens.js";
+import listItemCSS from "./list-item.css.js";
+
+export class BdListItem extends LitElement {
+  static properties = {
+    kind: { type: String }, // bullet, number, check, none
+    size: { type: String }, // sm, md, lg
+    icon: { type: String }  // custom icon URL
+  };
+
+  constructor() {
+    super();
+    this.kind = "bullet";
+    this.size = "md";
+    this.icon = "";
+  }
+
+  render() {
+    return html`
+      <li class="bd-list-item ${this.kind} ${this.size}">
+        ${this._renderMarker()}
+        <span class="bd-list-item-content">
+          <slot></slot>
+        </span>
+      </li>
+    `;
+  }
+
+  _renderMarker() {
+    if (this.kind === "none") return '';
+
+    if (this.icon) {
+      return html`<img src="${this.icon}" alt="" class="bd-list-item-custom-icon" />`;
+    }
+
+    return html`<span class="bd-list-item-marker"></span>`;
+  }
+
+  static styles = [tokens, listItemCSS];
+}
+
+customElements.define("bd-li", BdListItem);

package/src/components/list/list-item/list-item.stories.js

@@ -0,0 +1,79 @@
+import { html } from 'lit';
+import './list-item.js';
+
+export default {
+  title    : 'Components/List/List Item',
+  component: 'bd-li',
+  argTypes : {
+    kind: {
+      control    : { type: 'select' },
+      options    : ['bullet', 'number', 'check', 'none'],
+      description: 'List item marker type'
+    },
+    size: {
+      control    : { type: 'select' },
+      options    : ['sm', 'md', 'lg'],
+      description: 'List item size'
+    },
+    content: {
+      control    : 'text',
+      description: 'List item content'
+    }
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: 'A list item component with customizable markers and styling.'
+      }
+    }
+  }
+};
+
+const Template = (args) => html`
+  <bd-li kind="${args.kind}" size="${args.size}">${args.content}</bd-li>
+`;
+
+export const Default = Template.bind({});
+Default.args = {
+  kind   : 'bullet',
+  size   : 'md',
+  content: 'Default list item with bullet marker'
+};
+
+export const Bullet = Template.bind({});
+Bullet.args = {
+  kind   : 'bullet',
+  content: 'Item with bullet marker'
+};
+
+export const Number = Template.bind({});
+Number.args = {
+  kind   : 'number',
+  content: 'Item with number marker'
+};
+
+export const Check = Template.bind({});
+Check.args = {
+  kind   : 'check',
+  content: 'Item with checkmark'
+};
+
+export const None = Template.bind({});
+None.args = {
+  kind   : 'none',
+  content: 'Item without marker'
+};
+
+export const SizeVariants = () => html`
+  <div style="display: flex; flex-direction: column; gap: 1rem;">
+    <bd-li kind="bullet" size="sm">Small list item</bd-li>
+    <bd-li kind="bullet" size="md">Medium list item</bd-li>
+    <bd-li kind="bullet" size="lg">Large list item</bd-li>
+  </div>
+`;
+
+export const WithRichContent = () => html`
+  <bd-li kind="bullet" size="lg">
+    <strong>Featured item</strong> with additional description text that wraps to multiple lines while maintaining proper alignment with the marker.
+  </bd-li>
+`;

package/src/components/list/list.css.js

@@ -0,0 +1,175 @@
+import { css } from "lit";
+
+export default css`
+@layer bd-components {
+  .bd-list {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  /* === COUNTER RESET FOR ORDERED LISTS === */
+  .bd-list[type="ordered"] {
+    counter-reset: bd-ordered-counter;
+  }
+
+  /* === ORIENTATION STYLES === */
+  
+  /* Vertical (default) */
+  .bd-list.vertical {
+    display: block;
+  }
+
+  .bd-list.vertical ::slotted(li) {
+    display: list-item;
+    margin-bottom: var(--spacing-8);
+  }
+
+  /* Ordered list markers for vertical */
+  .bd-list[type="ordered"].vertical ::slotted(li) {
+    counter-increment: bd-ordered-counter;
+  }
+
+  .bd-list[type="ordered"].vertical ::slotted(li)::before {
+    content: counter(bd-ordered-counter) ". ";
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-600);
+    margin-right: var(--spacing-8);
+  }
+
+  /* Unordered list markers for vertical */
+  .bd-list[type="unordered"].vertical ::slotted(li)::before {
+    content: "•";
+    font-weight: var(--typography-fontWeight-semibold);
+    color: var(--color-neutral-600);
+    margin-right: var(--spacing-8);
+  }
+
+  /* Horizontal */
+  .bd-list.horizontal {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--spacing-16);
+  }
+
+  .bd-list.horizontal ::slotted(li) {
+    display: flex;
+    align-items: center;
+    margin: 0;
+  }
+
+  /* Remove markers for horizontal lists */
+  .bd-list.horizontal ::slotted(li)::before {
+    display: none;
+  }
+
+  /* Reset counter for horizontal ordered lists */
+  .bd-list[type="ordered"].horizontal {
+    counter-reset: none;
+  }
+
+  .bd-list[type="ordered"].horizontal ::slotted(li) {
+    counter-increment: unset;
+  }
+
+  /* === SPACING VARIANTS === */
+  
+  .bd-list.sm {
+    margin: var(--spacing-8) 0;
+  }
+
+  .bd-list.md {
+    margin: var(--spacing-16) 0;
+  }
+
+  .bd-list.lg {
+    margin: var(--spacing-24) 0;
+  }
+
+  /* Horizontal spacing adjustments */
+  .bd-list.horizontal.sm {
+    gap: var(--spacing-8);
+  }
+
+  .bd-list.horizontal.md {
+    gap: var(--spacing-16);
+  }
+
+  .bd-list.horizontal.lg {
+    gap: var(--spacing-24);
+  }
+
+  /* === VARIANT STYLES === */
+  
+  .bd-list.compact {
+    margin: var(--spacing-4) 0;
+  }
+
+  .bd-list.compact ::slotted(li) {
+    margin-bottom: var(--spacing-4);
+  }
+
+  .bd-list.spacious {
+    margin: var(--spacing-32) 0;
+  }
+
+  .bd-list.spacious ::slotted(li) {
+    margin-bottom: var(--spacing-12);
+  }
+
+  /* Horizontal variants */
+  .bd-list.horizontal.compact {
+    gap: var(--spacing-4);
+  }
+
+  .bd-list.horizontal.spacious {
+    gap: var(--spacing-32);
+  }
+
+  /* === NESTED LISTS === */
+  
+  .bd-list .bd-list {
+    margin-left: var(--spacing-16);
+    margin-top: var(--spacing-8);
+  }
+
+  /* Nested ordered list counter reset */
+  .bd-list[type="ordered"] .bd-list[type="ordered"] {
+    counter-reset: bd-ordered-nested;
+  }
+
+  /* Reset first/last child margins */
+  .bd-list:first-child {
+    margin-top: 0;
+  }
+
+  .bd-list:last-child {
+    margin-bottom: 0;
+  }
+
+  /* === CUSTOM MARKER STYLES (optional enhancements) === */
+  
+  /* Different marker styles for unordered lists */
+  .bd-list[type="unordered"].circle ::slotted(li)::before {
+    content: "○";
+  }
+
+  .bd-list[type="unordered"].square ::slotted(li)::before {
+    content: "■";
+  }
+
+  .bd-list[type="unordered"].dash ::slotted(li)::before {
+    content: "–";
+  }
+
+  /* Different numbering styles for ordered lists */
+  .bd-list[type="ordered"].lower-alpha ::slotted(li)::before {
+    content: counter(bd-ordered-counter, lower-alpha) ". ";
+  }
+
+  .bd-list[type="ordered"].upper-roman ::slotted(li)::before {
+    content: counter(bd-ordered-counter, upper-roman) ". ";
+  }
+}
+`;

package/src/components/list/list.js

@@ -0,0 +1,44 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import listCSS from "./list.css.js";
+
+export class BdList extends LitElement {
+  static properties = {
+    type       : { type: String, reflect: true }, // 'ordered', 'unordered'
+    spacing    : { type: String, reflect: true }, // sm, md, lg
+    variant    : { type: String, reflect: true }, // default, compact, spacious
+    start      : { type: Number, reflect: true }, // start number for ordered list
+    orientation: { type: String, reflect: true } // horizontal, vertical
+  };
+
+  constructor() {
+    super();
+    this.type = "unordered"; // 'ordered' | 'unordered'
+    this.spacing = "md";
+    this.variant = "default";
+    this.start = 1;
+    this.orientation = "vertical";
+  }
+
+  render() {
+    const classes = `bd-list ${this.spacing} ${this.variant} ${this.orientation}`;
+
+    if (this.type === "ordered") {
+      return html`
+        <ol class="${classes}" start="${this.start}">
+          <slot></slot>
+        </ol>
+      `;
+    }
+
+    return html`
+      <ul class="${classes}">
+        <slot></slot>
+      </ul>
+    `;
+  }
+
+  static styles = [tokens, listCSS];
+}
+
+customElements.define("bd-list", BdList);

package/src/components/modal/modal.js

@@ -1,6 +1,8 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
+import "../heading/heading.js";
 import modalCSS from "../modal/modal.css";
+import "../paragraph/paragraph.js";
 
 export class BdModal extends LitElement {
   static properties = {
@@ -10,8 +12,6 @@ export class BdModal extends LitElement {
     modalText: { type: String }
   };
 
-
-
   _onClose() {
     this.dispatchEvent(new CustomEvent("close-modal", { bubbles: true, composed: true }));
   }
@@ -28,14 +28,15 @@ export class BdModal extends LitElement {
           ${this.icon
             ? html`<img src="${this.icon}" alt="icon" class="bd-carousel-modal-icon" />`
             : ""}
-          <h2 id="modal-title">${this.title}</h2>
-<p id="modal-description">${this.modalText}</p>
+          <bd-h as="h2" id="modal-title">${this.title}</bd-h>
+          <bd-p kind="regular" id="modal-description">${this.modalText}</bd-p>
           <button @click="${this._onClose}" aria-label="Close modal">Close</button>
         </div>
       </div>
     `;
   }
 }
+
 BdModal.styles = [tokens, modalCSS];
 
-customElements.define("bd-modal", BdModal);
+customElements.define("bd-modal", BdModal);