@repobit/dex-system-design 0.23.8 → 0.23.10

package/src/components/carousel/carousel.stories.js

@@ -16,7 +16,7 @@ export default {
 ### Usage
 \`\`\`html
 <bd-carousel-section title="Security Features">
-  <bd-carousel-item title="VPN" icon="/assets/vpn.svg" modalText="Our VPN protects your connection.">
+  <bd-carousel-item title="VPN" icon="/assets/analysis.svg" modalText="Our VPN protects your connection.">
     <p>Unlimited VPN included</p>
   </bd-carousel-item>
 </bd-carousel-section>
@@ -61,12 +61,12 @@ export default {
 };
 
 const sampleItems = [
-  { title: 'VPN Protection',       icon: '/assets/vpn.svg',       modalText: 'Our VPN encrypts your internet traffic and hides your IP address.',       content: 'Unlimited encrypted VPN traffic' },
-  { title: 'Antivirus',            icon: '/assets/antivirus.svg', modalText: 'Real-time antivirus protection against all known and emerging threats.',    content: 'Award-winning threat detection' },
-  { title: 'Password Manager',     icon: '/assets/password.svg',  modalText: 'Store and autofill all your passwords securely across all devices.',        content: 'Secure password vault' },
-  { title: 'Parental Controls',    icon: '/assets/parental.svg',  modalText: 'Monitor and control your children\'s online activity and screen time.',     content: 'Advanced content filtering' },
-  { title: 'Anti-Phishing',        icon: '/assets/phishing.svg',  modalText: 'Detects and blocks phishing websites before they can steal your data.',     content: 'Real-time phishing protection' },
-  { title: 'Webcam Protection',    icon: '/assets/webcam.svg',    modalText: 'Prevents unauthorized apps from accessing your webcam.',                    content: 'Webcam & mic access control' }
+  { title: 'VPN Protection',       icon: '/assets/analysis.svg',       modalText: 'Our VPN encrypts your internet traffic and hides your IP address.',       content: 'Unlimited encrypted VPN traffic' },
+  { title: 'Antivirus',            icon: '/assets/analysis.svg', modalText: 'Real-time antivirus protection against all known and emerging threats.',    content: 'Award-winning threat detection' },
+  { title: 'Password Manager',     icon: '/assets/analysis.svg',  modalText: 'Store and autofill all your passwords securely across all devices.',        content: 'Secure password vault' },
+  { title: 'Parental Controls',    icon: '/assets/analysis.svg',  modalText: 'Monitor and control your children\'s online activity and screen time.',     content: 'Advanced content filtering' },
+  { title: 'Anti-Phishing',        icon: '/assets/analysis.svg',  modalText: 'Detects and blocks phishing websites before they can steal your data.',     content: 'Real-time phishing protection' },
+  { title: 'Webcam Protection',    icon: '/assets/analysis.svg',    modalText: 'Prevents unauthorized apps from accessing your webcam.',                    content: 'Webcam & mic access control' }
 ];
 
 const renderItem = (item) => html`
@@ -135,18 +135,18 @@ export const RichSlottedContent = {
   name  : 'Rich Slotted Content',
   render: () => html`
     <bd-carousel-section title="Features">
-      <bd-carousel-item title="VPN" icon="/assets/vpn.svg" modalText="Full VPN details here.">
+      <bd-carousel-item title="VPN" icon="/assets/analysis.svg" modalText="Full VPN details here.">
         <ul>
           <li>Unlimited bandwidth</li>
           <li>200+ server locations</li>
           <li>No-log policy</li>
         </ul>
       </bd-carousel-item>
-      <bd-carousel-item title="Antivirus" icon="/assets/antivirus.svg" modalText="Antivirus details here.">
+      <bd-carousel-item title="Antivirus" icon="/assets/analysis.svg" modalText="Antivirus details here.">
         <p>Real-time protection</p>
         <a href="#">Learn more</a>
       </bd-carousel-item>
-      <bd-carousel-item title="Parental Controls" icon="/assets/parental.svg" modalText="Parental control details.">
+      <bd-carousel-item title="Parental Controls" icon="/assets/analysis.svg" modalText="Parental control details.">
         <p>Safe browsing for kids</p>
         <p>Screen time management</p>
       </bd-carousel-item>
@@ -184,7 +184,7 @@ export const Playground = {
   args: {
     title    : 'Security Features',
     itemTitle: 'VPN Protection',
-    itemIcon : '/assets/vpn.svg',
+    itemIcon : '/assets/analysis.svg',
     modalText: 'Our VPN encrypts your connection and protects your privacy.'
   },
   render: (args) => html`
@@ -192,10 +192,10 @@ export const Playground = {
       <bd-carousel-item title="${args.itemTitle}" icon="${args.itemIcon}" modalText="${args.modalText}">
         <p>Slotted content for this item.</p>
       </bd-carousel-item>
-      <bd-carousel-item title="Antivirus" icon="/assets/antivirus.svg" modalText="Real-time antivirus protection.">
+      <bd-carousel-item title="Antivirus" icon="/assets/analysis.svg" modalText="Real-time antivirus protection.">
         <p>Award-winning threat detection</p>
       </bd-carousel-item>
-      <bd-carousel-item title="Parental Controls" icon="/assets/parental.svg" modalText="Monitor your children's activity.">
+      <bd-carousel-item title="Parental Controls" icon="/assets/analysis.svg" modalText="Monitor your children's activity.">
         <p>Advanced content filtering</p>
       </bd-carousel-item>
     </bd-carousel-section>

package/src/components/dropdown/dropdown.stories.js

@@ -0,0 +1,221 @@
+import { html } from 'lit';
+import './dropdown.js';
+
+export default {
+  title     : 'Components/Dropdown',
+  tags      : ['autodocs'],
+  parameters: {
+    docs: {
+      description: {
+        component: `
+**CustomDropdown** is a Lit form select component with label, validation states, tooltip, and size variants.
+
+### Usage
+\`\`\`html
+<bd-custom-dropdown
+  label="Select country"
+  .options="${['Romania', 'Germany', 'France']}"
+  kind="md"
+  required
+></bd-custom-dropdown>
+\`\`\`
+
+### States
+| State | Prop | CSS Class |
+|---|---|---|
+| Default | — | — |
+| Invalid | \`invalid\` | \`form-input--error\` |
+| Valid | \`validated\` | \`form-input--success\` |
+| Disabled | \`disabled\` | \`form-input--disabled\` |
+
+### Size Variants
+| Kind | Input Class | Label Class |
+|---|---|---|
+| \`sm\` | \`input-sm\` | \`label-sm\` |
+| \`md\` | \`input-md\` | \`label-md\` |
+| \`lg\` | \`input-lg\` | \`label-lg\` |
+
+### Notes
+- Options can be passed as an Array or a JSON string
+- First option is auto-selected by default
+- Tooltip/help text is only rendered when \`tooltip\` prop is non-empty
+        `
+      }
+    }
+  },
+  argTypes: {
+    label: {
+      control    : 'text',
+      description: 'Label text shown above the select',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: 'Select an option' }, category: 'Content' }
+    },
+    options: {
+      control    : 'object',
+      description: 'Array of option strings. Can also be passed as a JSON string.',
+      table      : { type: { summary: 'string[]' }, defaultValue: { summary: '[]' }, category: 'Content' }
+    },
+    kind: {
+      control    : { type: 'select' },
+      options    : ['sm', 'md', 'lg'],
+      description: 'Size variant controlling input and label CSS classes',
+      table      : { type: { summary: "'sm'|'md'|'lg'" }, defaultValue: { summary: 'md' }, category: 'Appearance' }
+    },
+    required: {
+      control    : 'boolean',
+      description: 'Adds a required asterisk to the label and `required` attribute to the select',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Validation' }
+    },
+    invalid: {
+      control    : 'boolean',
+      description: 'Applies error styling and `form-help-text--error` to the tooltip',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Validation' }
+    },
+    validated: {
+      control    : 'boolean',
+      description: 'Applies success styling and `form-help-text--success` to the tooltip',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'Validation' }
+    },
+    disabled: {
+      control    : 'boolean',
+      description: 'Disables the select element',
+      table      : { type: { summary: 'boolean' }, defaultValue: { summary: 'false' }, category: 'State' }
+    },
+    tooltip: {
+      control    : 'text',
+      description: 'Help text shown below the select. Empty string hides it.',
+      table      : { type: { summary: 'string' }, defaultValue: { summary: '' }, category: 'Content' }
+    }
+  }
+};
+
+const defaultOptions = ['Select a plan', 'Antivirus Plus', 'Total Security', 'Premium Security'];
+
+const render = (args) => html`
+  <bd-custom-dropdown
+    label="${args.label}"
+    .options="${args.options}"
+    kind="${args.kind}"
+    tooltip="${args.tooltip}"
+    ?required="${args.required}"
+    ?invalid="${args.invalid}"
+    ?validated="${args.validated}"
+    ?disabled="${args.disabled}"
+  ></bd-custom-dropdown>
+`;
+
+const defaultArgs = {
+  label    : 'Select a plan', options  : defaultOptions,
+  kind     : 'md', tooltip  : '', required : false,
+  invalid  : false, validated: false, disabled : false
+};
+
+// ─── Stories ───────────────────────────────────────────────────────────────
+
+export const Default = {
+  name  : 'Default',
+  render: () => html`
+    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md"></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Default dropdown with no validation state and no tooltip.' } } }
+};
+
+export const AllSizes = {
+  name  : 'All Sizes',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:20px; max-width:400px;">
+      <bd-custom-dropdown label="Small"  .options="${defaultOptions}" kind="sm"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Medium" .options="${defaultOptions}" kind="md"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Large"  .options="${defaultOptions}" kind="lg"></bd-custom-dropdown>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All three size variants stacked for comparison.' } } }
+};
+
+export const Required = {
+  name  : 'Required',
+  render: () => html`
+    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md" required></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Required field — shows a `*` after the label.' } } }
+};
+
+export const WithTooltip = {
+  name  : 'With Tooltip / Help Text',
+  render: () => html`
+    <bd-custom-dropdown
+      label="Select a plan"
+      .options="${defaultOptions}"
+      kind="md"
+      tooltip="Choose the plan that best fits your needs."
+    ></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Help text rendered below the select via the `tooltip` prop.' } } }
+};
+
+export const Invalid = {
+  name  : 'Invalid State',
+  render: () => html`
+    <bd-custom-dropdown
+      label="Select a plan"
+      .options="${defaultOptions}"
+      kind="md"
+      invalid
+      tooltip="Please select a valid option."
+    ></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Error state — applies `form-input--error` and `form-help-text--error` classes.' } } }
+};
+
+export const Validated = {
+  name  : 'Validated State',
+  render: () => html`
+    <bd-custom-dropdown
+      label="Select a plan"
+      .options="${defaultOptions}"
+      kind="md"
+      validated
+      tooltip="Great choice!"
+    ></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Success state — applies `form-input--success` and `form-help-text--success` classes.' } } }
+};
+
+export const Disabled = {
+  name  : 'Disabled',
+  render: () => html`
+    <bd-custom-dropdown label="Select a plan" .options="${defaultOptions}" kind="md" disabled></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Disabled select — applies `form-input--disabled` class.' } } }
+};
+
+export const AllStates = {
+  name  : 'All Validation States',
+  render: () => html`
+    <div style="display:flex; flex-direction:column; gap:20px; max-width:400px;">
+      <bd-custom-dropdown label="Default"   .options="${defaultOptions}" kind="md" tooltip="Default help text."></bd-custom-dropdown>
+      <bd-custom-dropdown label="Invalid"   .options="${defaultOptions}" kind="md" invalid    tooltip="This field has an error."></bd-custom-dropdown>
+      <bd-custom-dropdown label="Validated" .options="${defaultOptions}" kind="md" validated  tooltip="Looks good!"></bd-custom-dropdown>
+      <bd-custom-dropdown label="Disabled"  .options="${defaultOptions}" kind="md" disabled></bd-custom-dropdown>
+    </div>
+  `,
+  parameters: { docs: { description: { story: 'All four states stacked: default, invalid, validated, disabled.' } } }
+};
+
+export const ManyOptions = {
+  name  : 'Many Options',
+  render: () => html`
+    <bd-custom-dropdown
+      label="Select your country"
+      .options="${['Select country', 'Romania', 'Germany', 'France', 'Spain', 'Italy', 'Netherlands', 'Belgium', 'Poland', 'Sweden']}"
+      kind="md"
+    ></bd-custom-dropdown>
+  `,
+  parameters: { docs: { description: { story: 'Dropdown with 10 options. Tests scroll behavior of the native select.' } } }
+};
+
+export const Playground = {
+  name      : '🛝 Playground',
+  args      : { ...defaultArgs },
+  render,
+  parameters: { docs: { description: { story: 'Fully interactive playground. Adjust all props via Controls.' } } }
+};

package/src/components/pricing-cards/new-pricing-card.stories.js

@@ -1,4 +1,8 @@
 import { html } from 'lit';
+import "../heading/heading.js";
+import "../image/image.js";
+import "../link/link.js";
+import "../paragraph/paragraph.js";
 import './new-pricing-card.js';
 import './pricing-card-actions.js';
 import './pricing-card-container.js';

package/src/components/pricing-cards/pricing-card-pricing.js

@@ -78,7 +78,9 @@ class PricingCardPricing extends LitElement {
 
               <bd-p kind="small" class="terms">
                 First year price. Plus applicable sales tax. See
-                <a href="#">terms of use</a> below.
+          <bd-link href="#" target="_blank" font-size="14px" color="var(--color-neutral-900)" underline>
+            terms of use
+          </bd-link>
               </bd-p>
             </div>
             

package/src/tokens/tokens.css

@@ -28,6 +28,14 @@
   --typography-fontWeight-medium: 500;
   --typography-fontWeight-semibold: 600;
   --typography-fontWeight-bold: 700;
+/* Awards section — Orbit Frame 14 (node 1882:9342) */
+  --layout-awards-section-background: var(--color-blue-50);
+  --layout-awards-banner-max-width: 37.5rem; /* legacy narrow cap; prefer cluster */
+  --layout-awards-cluster-max-width: 49.5625rem; /* 793px — trust banner column */
+  --layout-awards-intro-max-width: 39.4375rem; /* 631px — headline stack */
+  /* Legacy: narrow lower block from Orbit; prefer --layout-ensemble-content-max for compare-aligned grids */
+  --layout-awards-content-max-width: 53.0625rem; /* 849px */
+  --layout-ensemble-inline-padding: var(--spacing-24);
 
   --typography-lineHeight-none: 1;
   --typography-lineHeight-tight: 1.25;

package/src/tokens/tokens.js

@@ -1038,5 +1038,14 @@ export const tokens = css`
 
         --font-style-sans-normal: normal;
         --font-style-sans-italic: italic;
+        /* Awards section — Orbit Frame 14 (node 1882:9342) */
+        --layout-awards-section-background: var(--color-blue-50);
+        --layout-awards-banner-max-width: 37.5rem; /* legacy narrow cap; prefer cluster */
+        --layout-awards-cluster-max-width: 49.5625rem; /* 793px — trust banner column */
+        --layout-awards-intro-max-width: 39.4375rem; /* 631px — headline stack */
+        /* Legacy: narrow lower block from Orbit; prefer --layout-ensemble-content-max for compare-aligned grids */
+        --layout-awards-content-max-width: 53.0625rem; /* 849px */
+        --layout-ensemble-inline-padding: var(--spacing-24);
+
     }
 `;