@repobit/dex-system-design 0.10.0 → 0.12.0

package/src/components/header/header.css.js

@@ -10,13 +10,33 @@ export default css`
   }
 
   a:focus-visible {
-    outline: var(--size-2) solid var(--bd-accesibility-focus);
-    outline-offset: var(--size-2);
+    outline: var(--spacing-2) solid var(--bd-accesibility-focus);
+    outline-offset: var(--spacing-2);
     border-radius: var(--space-2xs);
   }
   a {
-    color: #000000;
+    color: #000000 !important;
+  }
+  ::slotted(a),
+  ::slotted(*) a {
+    color: #000000 !important;
+  }
+
+  ::slotted([slot="disclaimer-bottom"]) a {
+    color: #000000 !important;
+  }
+
+  ::slotted([slot="header-image"]) {
+    width: 100%;
+    height: auto;
+    object-fit: cover;
+    transform: scale(1.35) translateY(-7%);
+    display: block;
+    z-index: 1;
+    position: relative;
+    border-radius: var(--spacing-20);
   }
+
   .bd-container {
     display: grid;
     grid-template-columns: 1fr 1fr;
@@ -29,8 +49,8 @@ export default css`
 
   bd-button {
     font-size: var(--heading-xxsmall) !important;
-    font-family: var(--font-family-sans) !important;
-    font-weight: var(--font-weight-sans-semibold) !important;
+    font-family: var(--typography-fontFamily-sans) !important;
+    font-weight: var(--typography-fontWeight-semibold) !important;
   }
   .bd-header-left,
   .bd-header-right {
@@ -50,82 +70,82 @@ export default css`
     height: auto;
     object-fit: cover;
     display: block;
-    border-radius: var(--size-20);
+    border-radius: var(--spacing-20);
     position: relative;
     z-index: 1;
   }
   .bd-product-name {
     color: var(--color-blue-500);
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-semibold);
-    font-size: var(--heading-large);
-    letter-spacing: var(--size-0);
-    margin-top: var(--size-16) !important;
-    margin-bottom: var(--size-8) !important;
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
+    font-size: var(--typography-fontSize-3xl);
+    letter-spacing: var(--spacing-0);
+    margin-top: var(--spacing-16) !important;
+    margin-bottom: var(--spacing-8) !important;
   }
 
   .bd-value-prop {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-bold);
-    font-size: var(--heading-xlarge);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-bold);
+    font-size: var(--heading-xxlarge);
     color: #000000;
-    letter-spacing: var(--size-0);
-    margin: var(--size-0) var(--size-0) !important;
+    letter-spacing: var(--spacing-0);
+    margin: var(--spacing-0) var(--spacing-0) !important;
   }
 
   .bd-description {
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-regular);
-    font-size: var(--size-18);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-body-large-fontWeight);
+    font-size: var(--spacing-18);
     color: #000000;
-    margin-top: var(--size-8) !important;
-    margin-bottom: var(--size-0) !important;
+    margin-top: var(--spacing-8) !important;
+    margin-bottom: var(--spacing-0) !important;
   }
 
   .bd-price-zone-top {
     display: flex;
-    gap: var(--size-8);
+    gap: var(--spacing-8);
     align-items: center;
-    margin-top: var(--size-32);
+    margin-top: var(--spacing-32);
   }
 
   .bd-full-price {
     text-decoration: line-through;
     color: #000000;
-    font-size: var(--size-18);
-    font-family: var(--font-family-sans);
+    font-size: var(--spacing-18);
+    font-family: var(--typography-fontFamily-sans);
   }
 
   .bd-discount {
     background: #c3f4d4;
     color: #0b6a26;
-    padding: var(--size-4) var(--size-14);
-    border-radius: var(--size-14);
-    font-size: var(--size-16);
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-semibold);
+    padding: var(--spacing-4) var(--spacing-14);
+    border-radius: var(--spacing-14);
+    font-size: var(--spacing-16);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
   }
 
   .bd-price-zone-final {
     display: block;
     font-size: var(--display-large-mobile);
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-bold);
-    margin-bottom: var(--size-16);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-bold);
+    margin-bottom: var(--spacing-16);
   }
 
   .bd-cta {
     display: flex;
-    gap: var(--size-16);
+    gap: var(--spacing-16);
   }
 
   .bd-disclaimer-top {
     display: block;
-    margin-top: var(--size-16);
-    margin-bottom: var(--size-8);
-    font-size: var(--body-medium);
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-regular);
+    margin-top: var(--spacing-16);
+    margin-bottom: var(--spacing-8);
+    font-size: var(--typography-body-small-fontSize);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-body-large-fontWeight);
     color: #000000;
   }
   .bd-header-image-wrapper {
@@ -148,11 +168,11 @@ export default css`
 
   .bd-header-watermark {
     position: absolute;
-    bottom: var(--size-16);
-    right: var(--size-16);
+    bottom: var(--spacing-16);
+    right: var(--spacing-16);
     z-index: 2;
     color: #ffffff;
-    font-size: var(--heading-large);
+    font-size: var(--typography-fontSize-3xl);
     font-weight: 700;
     opacity: 1;
     -webkit-backdrop-filter: blur(2px);
@@ -160,23 +180,27 @@ export default css`
 
   .bd-header-watermark span {
     color: #fff;
-    padding: var(--size-4) var(--size-8);
+    padding: var(--spacing-4) var(--spacing-8);
     backdrop-filter: blur(2px);
     -webkit-backdrop-filter: blur(2px);
-    border-radius: var(--size-4);
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-bold);
+    border-radius: var(--spacing-4);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-bold);
   }
   .bd-disclaimer-bottom {
     display: block;
-    font-size: var(--body-medium);
-    font-family: var(--font-family-sans);
-    font-weight: var(--font-weight-sans-regular);
+    font-size: var(--typography-body-small-fontSize);
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-body-large-fontWeight);
     color: #000000;
-    margin-bottom: var(--size-16);
+    margin-bottom: var(--spacing-16);
+  }
+
+  bd-header a {
+    color: #000000 !important;
   }
   ::slotted([slot="right"]) {
-    border-radius: var(--size-20);
+    border-radius: var(--spacing-20);
     overflow: hidden;
     max-width: 100%;
     height: auto;
@@ -245,4 +269,9 @@ export default css`
       max-height: 200px;
     }
   }
+
+  ::slotted([slot="disclaimer-bottom-link"]) {
+    color: black;
+    text-decoration: underline;
+  }
 `;

package/src/components/header/header.js

@@ -4,24 +4,24 @@ import headerCSS from "../header/header.css.js";
 
 class Header extends LitElement {
   static properties = {
-    productName: { type: String, attribute: "product-name" },
-    valueProp  : { type: String, attribute: "value-prop" },
+    productName: { type: String },
+    valueProp  : { type: String },
     description: { type: String },
-    fullPrice  : { type: String, attribute: "full-price" },
+    fullPrice  : { type: String },
     discount   : { type: String },
-    finalPrice : { type: String, attribute: "final-price" }
+    finalPrice : { type: String }
   };
 
   constructor() {
     super();
-    this.productName = "";
-    this.valueProp = "";
-    this.description = "";
-    this.fullPrice = "";
-    this.discount = "";
-    this.finalPrice = "";
   }
 
+  attributeChangedCallback(name, oldVal, newVal) {
+    super.attributeChangedCallback(name, oldVal, newVal);
+  }
+
+
+
   render() {
     return html`
       <div class="bd-container">
@@ -59,22 +59,22 @@ class Header extends LitElement {
           </div>
 
           <small class="bd-disclaimer-top">
-            Protection for 1 account & 5 PCs, Macs, tablets, or smartphones.
-            Windows® | macOS® | Android™ | iOS®
+            <slot name="disclaimer-top">
+              Protection for 1 account & 5 PCs, Macs, tablets, or smartphones.
+              Windows® | macOS® | Android™ | iOS®
+            </slot>
           </small>
+
           <small class="bd-disclaimer-bottom">
-            First year price. Sales tax included. See
-            <a href="#" tabindex="0">Terms of Use</a> below.
+            <slot name="disclaimer-bottom-text-start"></slot>
+            <slot name="disclaimer-bottom-link"></slot>
+            <slot name="disclaimer-bottom-text-end"></slot>
           </small>
         </div>
 
         <div class="bd-header-right">
           <div class="bd-header-image-wrapper">
-            <img
-              class="bd-header-image"
-              src="images/bd-header-us.jpg"
-              alt="Security illustration"
-            />
+            <slot name="header-image"></slot>
             <div class="bd-header-watermark"><span>Trusted. Always.</span></div>
           </div>
         </div>

package/src/components/highlight/highlight.css.js

@@ -1,15 +1,25 @@
 import { css } from "lit";
 
 export default css`
-  :host {
-    display: block;
-    font-family: 'IBM Plex Sans', sans-serif;
-    font-weight: 700;
-    font-size: 32px;
-    line-height: 1.3;
-    text-align: center;
-    color: #000;
-  }
+ :host {
+  display: block;
+  font-family: var(--typography-fontFamily-sans);
+  font-weight: var(--typography-heading-h1-fontWeight);
+  font-size: var(--typography-fontSize-3xl);
+  line-height: 1.3;
+  text-align: center;
+  color: #000;
+  max-width: 720px;
+  margin: 0 auto;
+  padding-top: var(--spacing-64)
+}
+.sub-title {
+  color: #006DFF;
+  font-family: var(--typography-fontFamily-sans);
+  font-weight: var(--typography-body-large-fontWeight);
+  font-size: 20px;
+  margin: 0 0 var(--spacing-24) 0;
+}
 
   .headline {
     margin: 0;
@@ -21,14 +31,14 @@ export default css`
     color: #000;
     z-index: -1;
     position: relative;
-margin-left: calc(var(--size-4) * -1);
-    margin-right: var(--size-2);
+margin-left: calc(var(--spacing-4) * -1);
+    margin-right: var(--spacing-2);
   }
 
 .highlight-text {
   position: relative; 
   z-index: 1;        
-  padding-left: var(--size-4);
+  padding-left: var(--spacing-4);
   padding-right: 0px;
   box-decoration-break: clone;
   -webkit-box-decoration-break: clone;
@@ -46,7 +56,7 @@ margin-left: calc(var(--size-4) * -1);
 
   .highlight-deco {
     position: absolute;
-    width: var(--size-8);
+    width: var(--spacing-8);
     height: 46px;
     display: flex;
     flex-direction: column;
@@ -68,7 +78,7 @@ margin-left: calc(var(--size-4) * -1);
   }
 
   .highlight-svg-rect {
-    width: var(--size-2);
+    width: var(--spacing-2);
     height: 38px;
     fill: #006DFF;
     margin: 0;
@@ -77,8 +87,8 @@ margin-left: calc(var(--size-4) * -1);
 
   .highlight-svg-ellipse-top,
   .highlight-svg-ellipse-bottom {
-    width: var(--size-8);
-    height: var(--size-8);
+    width: var(--spacing-8);
+    height: var(--spacing-8);
     fill: #006DFF;
     display: block;
   }
@@ -89,22 +99,22 @@ margin-left: calc(var(--size-4) * -1);
   }
 
   .highlight {
-    margin-right: var(--size-2);
+    margin-right: var(--spacing-2);
   }
 
   .highlight-deco {
-    height: var(--size-32);
-    width: var(--size-6);
+    height: var(--spacing-32);
+    width: var(--spacing-6);
   }
 
   .highlight-svg-rect {
-   var(--size-24);
+   var(--spacing-24);
   }
 
   .highlight-svg-ellipse-top,
   .highlight-svg-ellipse-bottom {
-    width: var(--size-6);
-    height: var(--size-6);
+    width: var(--spacing-6);
+    height: var(--spacing-6);
   }
       .highlight-deco.right {
     bottom: 0;

package/src/components/highlight/highlight.js

@@ -4,7 +4,8 @@ import highlightCSS from "./highlight.css.js";
 
 class BdHighlightSection extends LitElement {
   static properties = {
-    highlightText: { type: String, attribute: 'highlight-text' }
+    highlightText: { type: String, attribute: 'highlight-text' },
+    subTitle     : { type: String, attribute: 'sub-title' }
   };
 
   static styles = [tokens, highlightCSS];
@@ -12,14 +13,25 @@ class BdHighlightSection extends LitElement {
   render() {
     const fullText = this.textContent || "";
     const highlightText = this.highlightText || "";
+    const subTitle = this.subTitle || "";
+
+    const subtitleTemplate = subTitle
+      ? html`
+      <h6 class="sub-title">${subTitle}</h6>
+    `
+      : null;
 
     if (!highlightText || !fullText.includes(highlightText)) {
-      return html`<p class="headline"><slot></slot></p>`;
+      return html`
+        ${subtitleTemplate}
+        <p class="headline"><slot></slot></p>
+      `;
     }
 
     const [before, after] = fullText.split(highlightText);
 
     return html`
+      ${subtitleTemplate}
       <p class="headline">
         ${before}
         <span class="highlight">
@@ -33,7 +45,6 @@ class BdHighlightSection extends LitElement {
               <rect x="0" y="0" width="2" height="42" />
             </svg>
           </span>
-          <!-- deco-right moved to its own anchor -->
         </span>
         ${after}
       </p>
@@ -58,4 +69,4 @@ class BdHighlightSection extends LitElement {
   }
 }
 
-customElements.define("bd-highlight-section", BdHighlightSection);
+customElements.define("bd-highlight", BdHighlightSection);

package/src/components/highlight/highlight.stories.js

@@ -2,8 +2,8 @@ import "./highlight.js";
 import { html } from "lit";
 
 export default {
-  title: "Atoms/Highlight Section",
-  component: "bd-highlight-section",
+  title: "Atoms/Highlight [v2]",
+  component: "highlight",
   tags: ["autodocs"],
   argTypes: {
     highlightText: { control: "text" },
@@ -12,9 +12,9 @@ export default {
 };
 
 const Template = ({ highlightText, defaultSlot }) => html`
-  <bd-highlight-section highlight-text="${highlightText}">
+  <bd-highlight highlight-text="${highlightText}">
     ${defaultSlot}
-  </bd-highlight-section>
+  </bd-highlight>
 `;
 
 export const Default = Template.bind({});

package/src/components/light-carousel/light-carousel-simple.css.js

@@ -0,0 +1,183 @@
+import { css } from "lit";
+
+export default css`
+  :host {
+    display: block;
+    --background-card-grey: var(--color-neutral-25);
+    --border-card-grey: var(--color-neutral-50);
+    padding-top: var(--spacing-32);
+    padding-bottom: var(--spacing-32);
+  }
+
+  .bd-section-title-s {
+    font-family: var(--typography-fontFamily-sans);
+    font-weight: var(--typography-fontWeight-semibold);
+    font-size: 2em;
+  }
+
+  .bd-header-light-carousel-s {
+    margin-bottom: 50px;
+    margin-top: 50px;
+  }
+
+  .bd-light-carousel-s {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 100%;
+    margin: var(--spacing-0) auto;
+    overflow: hidden;
+    flex-direction: column;
+    padding-left: var(--spacing-14);
+    padding-right: var(--spacing-14);
+    max-width: 1400px;
+    margin: 0 auto;
+  }
+
+  .bd-light-carousel-title-s {
+    font-size: 28px;
+    font-weight: 700;
+    text-align: center;
+    color: #e4002b;
+    margin-bottom: 32px;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+  }
+
+  .bd-light-carousel-track-s {
+    scroll-behavior: smooth;
+    flex: 1;
+    position: relative;
+    padding: var(--spacing-0) var(--spacing-20);
+    overflow-x: auto;
+    overflow-y: hidden;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    z-index: 1;
+    scroll-snap-type: x mandatory;
+    display: grid;
+    gap: 1.5rem;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .bd-light-carousel-track-s::-webkit-scrollbar {
+    display: none;
+  }
+
+  .bd-light-box-s {
+    flex: var(--spacing-0) var(--spacing-0) auto;
+    background: var(--background-card-grey);
+    border-radius: 28px;
+    padding: var(--spacing-32);
+    flex-direction: column;
+    align-items: start;
+    justify-content: center;
+    text-align: start;
+    transition: transform 0.2s ease-in-out;
+    min-height: 135px;
+    position: relative;
+    z-index: 2;
+    scroll-snap-align: start;
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-light-box-s h3 {
+    font-size: var(--heading-xsmall);
+    margin: var(--spacing-0) var(--spacing-8) var(--spacing-8) var(--spacing-0);
+    font-weight: 600;
+    font-family: var(--typography-fontFamily-sans);
+    text-align: center;
+  }
+
+  .bd-light-box-s p {
+    font-size: var(--spacing-16);
+    margin: var(--spacing-0) var(--spacing-0) 1em var(--spacing-0);
+    font-family: var(--typography-fontFamily-sans);
+  }
+
+  .bd-light-icon-s {
+    position: relative;
+    bottom: var(--spacing-6);
+    max-width: 100%;
+    height: var(--spacing-44);
+    width: var(--spacing-44);
+  }
+
+  .bd-light-box-header-s {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: var(--spacing-8);
+  }
+
+  .bd-light-title-badge-wrapper-s {
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-4, 4px);
+  }
+
+  @media (max-width: 1024px) {
+    .bd-light-box-s {
+      width: 380px;
+      padding: 1.5em;
+    }
+    .bd-light-box-s h3 {
+      font-size: 1.1em;
+    }
+    .bd-light-box-s p {
+      font-size: 0.95em;
+    }
+
+    .bd-light-carousel-track-s {
+      grid-template-columns: repeat(2, 1fr);
+    }
+  }
+
+  @media (max-width: 768px) {
+    .bd-light-carousel-track-s {
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-20);
+      overflow-x: hidden;
+      overflow-y: hidden;
+      scroll-behavior: smooth;
+    }
+
+    .bd-light-box-s {
+      width: 100%;
+      max-width: 400px;
+      margin: var(--spacing-0) auto;
+    }
+
+    .bd-arrow-s {
+      display: none;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .bd-light-box-s {
+      width: 100%;
+      padding: 1em;
+      min-height: 300px;
+    }
+
+    .bd-light-box-s h3 {
+      font-size: 1em;
+    }
+
+    .bd-light-box-s p {
+      font-size: 0.9em;
+    }
+
+    .bd-light-icon-s {
+      bottom: var(--spacing-10);
+    }
+  }
+
+  @media (max-width: 600px) {
+    .bd-light-carousel-track-s {
+      grid-template-columns: 1fr;
+    }
+  }
+`;