@repobit/dex-system-design 0.5.0 → 0.7.0

package/src/components/radio/radio.stories.js

@@ -0,0 +1,103 @@
+import { html } from 'lit';
+import './radio.js';
+
+export default {
+  title: 'Atoms/Radio',
+  component: 'bd-radio',
+  tags: ['autodocs'], // 👉 Asta activează Docs
+  argTypes: {
+    name: { control: 'text' },
+    value: { control: 'text' },
+    label: { control: 'text' },
+    checked: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+  },
+};
+
+// 👇 Template de bază
+const Template = ({ name, value, label, checked, disabled }) => html`
+  <bd-radio
+    .name=${name}
+    .value=${value}
+    .label=${label}
+    .checked=${checked}
+    .disabled=${disabled}
+  ></bd-radio>
+`;
+
+// 👉 Exemples BdRadio
+export const Default = Template.bind({});
+Default.args = {
+  name: 'group1',
+  value: 'default',
+  label: 'Radio normal',
+  checked: false,
+  disabled: false,
+};
+
+export const Checked = Template.bind({});
+Checked.args = {
+  name: 'group1',
+  value: 'checked',
+  label: 'Radio checked',
+  checked: true,
+  disabled: false,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  name: 'group1',
+  value: 'disabled',
+  label: 'Radio disabled',
+  checked: false,
+  disabled: true,
+};
+
+export const DisabledChecked = Template.bind({});
+DisabledChecked.args = {
+  name: 'group1',
+  value: 'disabled-checked',
+  label: 'Radio disabled & checked',
+  checked: true,
+  disabled: true,
+};
+
+// ------------------------------
+// BdToggleRadio
+// ------------------------------
+export const ToggleRadio = ({ name, value, label, checked, disabled }) => html`
+  <bd-toggle-radio
+    .name=${name}
+    .value=${value}
+    .label=${label}
+    .checked=${checked}
+    .disabled=${disabled}
+  ></bd-toggle-radio>
+`;
+
+ToggleRadio.args = {
+  name: 'toggle-group',
+  value: 'toggle1',
+  label: 'Toggle radio',
+  checked: false,
+  disabled: false,
+};
+
+export const ToggleChecked = ToggleRadio.bind({});
+ToggleChecked.args = {
+  ...ToggleRadio.args,
+  checked: true,
+};
+
+export const ToggleDisabled = ToggleRadio.bind({});
+ToggleDisabled.args = {
+  ...ToggleRadio.args,
+  disabled: true,
+};
+
+export const ToggleDisabledChecked = ToggleRadio.bind({});
+ToggleDisabledChecked.args = {
+  ...ToggleRadio.args,
+  checked: true,
+  disabled: true,
+};

package/src/components/tabs/tabs.css.js

@@ -5,7 +5,9 @@ export default css`
     --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);
+    --badge-background: var(--color-blue-700);
+    --bd-accesibility-focus: var(--color-blue-500);
+
     --text-color-white: var(--color-neutral-0);
     font-size: 100%;
     display: block;
@@ -16,7 +18,12 @@ export default css`
     margin-top: 1em;
     margin-bottom: 1em;
   }
-
+  .bd-tab-button:focus-visible,
+  .bd-find-out-more:focus-visible {
+    outline: var(--size-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--size-2);
+    border-radius: var(--space-2xs);
+  }
   .bd-tabs-component .bd-left img {
     max-width: 90%;
   }
@@ -53,7 +60,6 @@ export default css`
   }
 
   .bd-tabs-container button {
-    background-color: white;
     color: #006eff;
     border: 0;
     padding: 9px;
@@ -94,7 +100,7 @@ export default css`
     border: none;
     padding: 10px;
     cursor: pointer;
-    font-weight: bold;
+   <!-- font-weight: bold; -->
   }
 
   .bd-tab-button img {
@@ -184,7 +190,7 @@ export default css`
     }
 
     .bd-tabs-component .bd-left img {
-      max-width: 80%;
+      max-width: 50%;
     }
 
     .bd-tabs-component .bd-right {
@@ -206,6 +212,17 @@ export default css`
       padding: 20px;
     }
 
+    .bd-section-title {
+      text-align: center;
+      font-size: 1.6em;
+      margin-bottom: 30px;
+      padding: 10px;
+    }
+
+    .bd-right h3 {
+      text-align: center;
+    }
+
     .bd-tabs-component {
       margin-top: 24px;
     }
@@ -218,18 +235,19 @@ export default css`
     }
 
     .bd-tabs-container button {
-      font-size: 1em;
+      font-size: 1.2em;
       padding: 6px;
     }
 
     .bd-tabs-component .bd-left img {
-      max-width: 70%;
+      max-width: 100%;
       height: auto;
     }
 
     .bd-tabs-component .bd-right {
       text-align: center;
       padding: 10px;
+      text-align: left;
     }
 
     .bd-find-out-more {

package/src/components/tabs/tabs.js

@@ -23,23 +23,23 @@ class TabsComponent extends LitElement {
     const tabs = [
       {
         title: "Privacy Protection",
-        imageBase: "src/assets/icons/tabs-img1.png",
-        icon: "src/assets/icons/pic1.png",
+        imageBase: "images/tabs-img1.png",
+        icon: "icons/pic1.png",
       },
       {
         title: "Identity Protection",
-        imageBase: "src/assets/icons/tabs-img2.png",
-        icon: "src/assets/icons/pic2.png",
+        imageBase: "images/tabs-img2.png",
+        icon: "icons/pic2.png",
       },
       {
         title: "Device Protection",
-        imageBase: "src/assets/icons/tabs-img3.png",
-        icon: "src/assets/icons/pic3.png",
+        imageBase: "images/tabs-img3.png",
+        icon: "icons/pic3.png",
       },
       {
         title: "Financial Insurance",
-        imageBase: "src/assets/icons/tabs-img3.png",
-        icon: "src/assets/icons/pic3.png",
+        imageBase: "images/tabs-img3.png",
+        icon: "icons/pic3.png",
       },
     ];
 
@@ -113,12 +113,16 @@ class TabsComponent extends LitElement {
           ${tabs.map(
             (tab, index) => html`
               <button
+                role="tab" 
+                aria-selected="${this.selectedTab === index ? 'true' : 'false'}" 
                 class=${this.selectedTab === index
                   ? "bd-selected bd-tab-button"
                   : "bd-tab-button"}
                 @click=${() => this.selectTab(index)}
+                aria-controls="tab-content-${index}"
+                id="tab-${index}"
               >
-                <img src="${tab.icon}" />
+                <img src="${tab.icon}" alt="${tab.title} Icon" />
                 <p><strong>${tab.title}</strong></p>
               </button>
             `
@@ -142,17 +146,20 @@ class TabsComponent extends LitElement {
               )}
               <img
                 loading="lazy"
-                alt="${selectedTabData.title}"
+                alt="${selectedTabData.title} Image"
                 src="${selectedTabData.imageBase}?width=750&format=png&optimize=medium"
               />
             </picture>
           </div>
           <div class="bd-right">
-            <h3>${content[this.selectedTab].heading}</h3>
-            ${content[this.selectedTab].description()}
+            <h3 id="tab-content-heading-${this.selectedTab}">${content[this.selectedTab].heading}</h3>
+            <div id="tab-content-${this.selectedTab}" aria-labelledby="tab-content-heading-${this.selectedTab}">
+              ${content[this.selectedTab].description()}
+            </div>
             <a
               href="${content[this.selectedTab].href}"
               class="bd-find-out-more"
+              aria-label="Find out more about ${content[this.selectedTab].heading}"
             >
               Find out more
               <span class="bd-arrow">

package/src/components/termsOfUse/terms.css.js

@@ -10,8 +10,14 @@ export default css`
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     display: block;
+    --bd-accesibility-focus: var(--color-blue-500);
   }
 
+  .bd-terms-text-a:focus-visible{
+    outline: var(--size-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--size-2);
+    border-radius: var(--space-2xs);
+  }
   .bd-terms-container {
     background: #f2f2f2;
     padding: var(--size-44) 0;

package/src/tokens/fonts.stories.js

@@ -0,0 +1,73 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Design Tokens/Fonts',
+};
+
+export const FontFace = () => html`
+  <style>
+    section {
+      margin-bottom: 24px;
+    }
+    h3 {
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-weight: 600;
+      font-size: 1.2rem;
+      margin-bottom: 12px;
+    }
+    .sample {
+      margin-bottom: 12px;
+      font-size: 1.1rem;
+    }
+    .sans-normal {
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-weight: 400;
+      font-style: normal;
+    }
+    .sans-semibold {
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-weight: 600;
+      font-style: normal;
+    }
+    .sans-bold {
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-weight: 700;
+      font-style: normal;
+    }
+    .sans-italic {
+      font-family: var(--font-family-sans, 'IBM Plex Sans', Arial, sans-serif);
+      font-weight: 400;
+      font-style: italic;
+    }
+    .mono-regular {
+      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+      font-weight: 400;
+      font-style: normal;
+    }
+    .mono-bold {
+      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+      font-weight: 700;
+      font-style: normal;
+    }
+    .mono-italic {
+      font-family: var(--font-family-mono, 'IBM Plex Mono', monospace);
+      font-weight: 400;
+      font-style: italic;
+    }
+  </style>
+
+  <section>
+    <h3>IBM Plex Sans - Weights & Styles</h3>
+    <div class="sample sans-normal">Regular 400 - The quick brown fox jumps over the lazy dog.</div>
+    <div class="sample sans-semibold">SemiBold 600 - The quick brown fox jumps over the lazy dog.</div>
+    <div class="sample sans-bold">Bold 700 - The quick brown fox jumps over the lazy dog.</div>
+    <div class="sample sans-italic">Italic 400 - The quick brown fox jumps over the lazy dog.</div>
+  </section>
+
+  <section>
+    <h3>IBM Plex Mono - Weights & Styles</h3>
+    <div class="sample mono-regular">Regular 400 - The quick brown fox jumps over the lazy dog.</div>
+    <div class="sample mono-bold">Bold 700 - The quick brown fox jumps over the lazy dog.</div>
+    <div class="sample mono-italic">Italic 400 - The quick brown fox jumps over the lazy dog.</div>
+  </section>
+`;

package/src/tokens/spacing.stories.js

@@ -0,0 +1,56 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Design Tokens/Spacing',
+  args: {
+    spaceNone: 'var(--space-none, 0)',
+    space4xs: 'var(--space-4xs, 0.125rem)',
+    space3xs: 'var(--space-3xs, 0.25rem)',
+    space2xs: 'var(--space-2xs, 0.5rem)',
+    spaceXs: 'var(--space-xs, 0.75rem)',
+    spaceSm: 'var(--space-sm, 1rem)',
+    spaceMd: 'var(--space-md, 1.5rem)',
+    spaceLg: 'var(--space-lg, 2rem)',
+    spaceXl: 'var(--space-xl, 2.5rem)',
+    space2xl: 'var(--space-2xl, 3rem)',
+    space3xl: 'var(--space-3xl, 4rem)',
+    space4xl: 'var(--space-4xl, 6rem)',
+    space5xl: 'var(--space-5xl, 8rem)',
+  },
+  argTypes: {
+    spaceNone: { control: 'text', name: '--space-none' },
+    space4xs: { control: 'text', name: '--space-4xs' },
+    space3xs: { control: 'text', name: '--space-3xs' },
+    space2xs: { control: 'text', name: '--space-2xs' },
+    spaceXs: { control: 'text', name: '--space-xs' },
+    spaceSm: { control: 'text', name: '--space-sm' },
+    spaceMd: { control: 'text', name: '--space-md' },
+    spaceLg: { control: 'text', name: '--space-lg' },
+    spaceXl: { control: 'text', name: '--space-xl' },
+    space2xl: { control: 'text', name: '--space-2xl' },
+    space3xl: { control: 'text', name: '--space-3xl' },
+    space4xl: { control: 'text', name: '--space-4xl' },
+    space5xl: { control: 'text', name: '--space-5xl' },
+  },
+};
+
+export const AllSpacings = (args) => html`
+  <style>
+    .spacing-box {
+      background-color: var(--color-neutral-200, #eee);
+      margin-bottom: 16px;
+      border-radius: 4px;
+      font-family: var(--font-family-sans, sans-serif);
+      font-weight: 600;
+      border: 1px dashed #ccc;
+    }
+  </style>
+
+  <section>
+    ${Object.entries(args).map(([key, value]) => html`
+      <div class="spacing-box" style="padding: ${value}">
+        Token <strong>${key.replace('space', '--space-').toLowerCase()}</strong>: ${value}
+      </div>
+    `)}
+  </section>
+`;

package/src/tokens/tokens-grid.stories.js

@@ -0,0 +1,83 @@
+import { html } from 'lit';
+
+export default {
+  title: 'Design Tokens/Grid',
+  parameters: {
+    layout: 'fullscreen',
+  },
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    padding: { control: 'text' },
+    gutter: { control: 'text' },
+    colBg1: { control: 'color' },
+    colBg2: { control: 'color' },
+  },
+};
+
+export const GridContainer = ({ backgroundColor, padding }) => html`
+  <div class="grid-container" style="background: ${backgroundColor}; padding: ${padding};">
+    <p style="margin: 0;">.grid-container (folosește max-width & padding din tokens)</p>
+  </div>
+`;
+GridContainer.args = {
+  backgroundColor: '#f4f4f4',
+  padding: '1rem',
+};
+GridContainer.storyName = 'Container';
+
+export const GridRowCol = ({ colBg1, colBg2, padding }) => html`
+  <div class="grid-container" style="margin-top: 2rem;">
+    <div class="grid-row" style="background: #ddd;">
+      <div class="grid-col" style="background: ${colBg1}; text-align: center; padding: ${padding};">
+        .grid-col 1
+      </div>
+      <div class="grid-col" style="background: ${colBg2}; text-align: center; padding: ${padding};">
+        .grid-col 2
+      </div>
+    </div>
+  </div>
+`;
+GridRowCol.args = {
+  colBg1: '#bbb',
+  colBg2: '#999',
+  padding: '1rem',
+};
+GridRowCol.storyName = 'Row + Col (auto)';
+
+export const FixedColumns = ({ colBg1, colBg2, padding }) => html`
+  <div class="grid-container" style="margin-top: 2rem;">
+    <div class="grid-row">
+      <div class="col-6" style="background: ${colBg1}; padding: ${padding}; text-align: center;">
+        .col-6 (50%)
+      </div>
+      <div class="col-6" style="background: ${colBg2}; padding: ${padding}; text-align: center;">
+        .col-6 (50%)
+      </div>
+    </div>
+  </div>
+`;
+FixedColumns.args = {
+  colBg1: '#ccc',
+  colBg2: '#aaa',
+  padding: '1rem',
+};
+FixedColumns.storyName = 'Coloane fixe (.col-6)';
+
+export const GutterExample = ({ gutter, colBg1, colBg2 }) => html`
+  <div class="grid-container" style="margin-top: 2rem;">
+    <div class="grid-row" style="gap: ${gutter};">
+      <div class="grid-col" style="background: ${colBg1}; padding: 1rem; border: 1px dashed red;">
+        .grid-col cu gutter (verifică spacing)
+      </div>
+      <div class="grid-col" style="background: ${colBg2}; padding: 1rem; border: 1px dashed red;">
+        .grid-col cu gutter
+      </div>
+    </div>
+  </div>
+`;
+GutterExample.args = {
+  gutter: '1rem',
+  colBg1: '#e0e0e0',
+  colBg2: '#d0d0d0',
+};
+GutterExample.storyName = 'Spațiere între coloane (gutter)';

package/src/tokens/tokens.css

@@ -107,6 +107,25 @@
 --caption-large: 12px; /* 15.996px = 1rem */
 
     
+
+
+/* Display Default */
+--display-xlarge-line-height: 1.1;      /* For 60px */
+--display-medium-line-height: 1.15;     /* For 52px */
+
+/* Display Mobile */
+--display-xlarge-mobile-line-height: 1.15;  /* For 44px */
+--display-medium-mobile-line-height: 1.2;   /* For 38px */
+
+/* Heading */
+--heading-xlarge-line-height: 1.2;      /* For 36px */
+--heading-small-line-height: 1.3;       /* For 24px */
+
+/* Body */
+--body-large-line-height: 1.5;          /* For 16px */
+
+/* Caption */
+--caption-large-line-height: 1.35;      /* For 12px */
   /* =====================
       PADDING SIZES
   ====================== */
@@ -124,6 +143,7 @@
   --size-16: 16px;
   --size-18: 18px;
   --size-20: 20px;
+  --size-22: 22px;
   --size-24: 24px;
   --size-32: 32px;
   --size-36: 36px;
@@ -133,7 +153,102 @@
   --size-64: 64px;
   --size-full: 99999999999999999999;
   
-    
+ 
+  /* Spacing Tokens
+  -----------------------------------------------*/
+  /* Base spacing tokens - Based on 4px grid */
+  --space-none: 0;
+  --space-4xs: 0.125rem;  /* 2px */
+  --space-3xs: 0.25rem;   /* 4px */
+  --space-2xs: 0.5rem;    /* 8px */
+  --space-xs: 0.75rem;    /* 12px */
+  --space-sm: 1rem;       /* 16px */
+  --space-md: 1.5rem;     /* 24px */
+  --space-lg: 2rem;       /* 32px */
+  --space-xl: 2.5rem;     /* 40px */
+  --space-2xl: 3rem;      /* 48px */
+  --space-3xl: 4rem;      /* 64px */
+  --space-4xl: 6rem;      /* 96px */
+  --space-5xl: 8rem;      /* 128px */
+  
+  /* Semantic Padding Tokens */
+  --padding-button: var(--space-xs) var(--space-md);
+  --padding-input: var(--space-xs);
+  --padding-card: var(--space-md);
+  --padding-card-sm: var(--space-sm);
+  --padding-card-lg: var(--space-lg);
+  
+  --padding-section: var(--space-3xl) 0;
+  --padding-section-sm: var(--space-2xl) 0;
+  --padding-section-lg: var(--space-4xl) 0;
+  
+  /* Container and Layout Tokens */
+  --container-padding: var(--space-md);
+  --container-padding-sm: var(--space-sm);
+  --container-padding-lg: var(--space-lg);
+  
+  /* Inset (Padding All Sides) Tokens */
+  --inset-xs: var(--space-xs);
+  --inset-sm: var(--space-sm);
+  --inset-md: var(--space-md);
+  --inset-lg: var(--space-lg);
+  
+  /* Stack (Vertical Spacing) Tokens */
+  --stack-xs: var(--space-xs);
+  --stack-sm: var(--space-sm);
+  --stack-md: var(--space-md);
+  --stack-lg: var(--space-lg);
+  --stack-xl: var(--space-xl);
+  
+  /* Inline (Horizontal Spacing) Tokens */
+  --inline-xs: var(--space-xs);
+  --inline-sm: var(--space-sm);
+  --inline-md: var(--space-md);
+  --inline-lg: var(--space-lg);
+  
+  /* Accessibility Spacing Tokens
+  -----------------------------------------------*/
+  /* Touch Target Sizes - WCAG 2.1 Success Criterion 2.5.5 (AAA) and 2.5.8 (AA) */
+  --touch-target-size: 44px; /* Minimum touch target size (44px × 44px) */
+  --touch-target-spacing: 8px; /* Minimum space between touch targets */
+  
+  /* Readable Line Lengths - For optimal readability */
+  --content-width-readable: 70ch; /* Approximately 70 characters per line */
+  --content-width-max: 1200px; /* Maximum overall content width */
+
+
+  /** GRID TOKENS
+  */
+ /* Grid container max widths */
+  --grid-container-max-xs: 100%;       /* mobile full width */
+  --grid-container-max-sm: 540px;
+  --grid-container-max-md: 720px;
+  --grid-container-max-lg: 960px;
+  --grid-container-max-xl: 1140px;
+  --grid-container-max-xxl: 1320px;
+
+  /* Column count (usually 12) */
+  --grid-columns: 12;
+
+  /* Gutter spacing between columns */
+  --grid-gutter-xs: 16px;
+  --grid-gutter-sm: 24px;
+  --grid-gutter-md: 32px;
+  --grid-gutter-lg: 40px;
+
+  /* Container padding (horizontal spacing) */
+  --grid-padding-xs: 16px;
+  --grid-padding-sm: 24px;
+  --grid-padding-md: 32px;
+  --grid-padding-lg: 40px;
+
+  /* Breakpoints */
+  --breakpoint-xs: 0px;
+  --breakpoint-sm: 576px;
+  --breakpoint-md: 768px;
+  --breakpoint-lg: 992px;
+  --breakpoint-xl: 1200px;
+  --breakpoint-xxl: 1400px;
       /* =====================
       FONT-FACE DEFINITIONS
   ====================== */