@repobit/dex-system-design 0.19.2 → 0.21.0

package/src/components/footer/footer.stories.js

@@ -1,60 +1,177 @@
-// BdFooter.stories.js
 import { html } from 'lit';
 import './footer.js';
 
 export default {
-  title    : 'Components/Footer',
-  component: 'bd-footer',
-  argTypes : {
-    currentLocale   : { control: 'text' },
-    selectedCountry : { control: 'text' },
-    maxColumnsPerRow: { control: { type: 'number', min: 1, max: 4 } },
-    quickLinks1     : { control: 'object' },
-    quickLinks2     : { control: 'object' },
-    address         : { control: 'text' }
+  title     : 'Components/Footer/BdFooter',
+  component : 'bd-footer',
+  parameters: {
+    layout: 'fullscreen'
   }
 };
 
-const Template = ({ currentLocale, selectedCountry, maxColumnsPerRow, quickLinks1, quickLinks2, address }) => {
-  return html`
-    <bd-footer
-      .currentLocale=${currentLocale}
-      .selectedCountry=${selectedCountry}
-      .maxColumnsPerRow=${maxColumnsPerRow}
-    >
-      <span slot="logo"><img src="/assets/BD_logo.png" alt="Bitdefender Logo"></span>
-
-      <bd-footer-links-group slot="quick-links" title="Quick Links 1">
-        ${quickLinks1.map(
-          link => html`<a href="${link.href}" target="_blank">${link.label}</a>`
-        )}
-      </bd-footer-links-group>
+export const Default = () => html`
+  <bd-footer maxColumnsPerRow="3">
+    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+      <a href="/en/consumer/">For Consumer</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/small-business/">For Small Business</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/business/">For Enterprise</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/en/partners/">For Partners</a>
+    </bd-footer-nav>
+    <bd-footer-links-group slot="quick-links" title="Quick links">
+      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+      <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
+      <a href="https://www.bitdefender.com/en-us/cyberpedia/">Bitdefender Cyberpedia</a>
+      <a href="https://pan.bitdefender.com/partners/save/">Partner Advantage Network Portal</a>
+      <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/">Brand Portal</a>
+    </bd-footer-links-group>
+
+    <bd-footer-links-group slot="quick-links">
+      <a href="https://www.bitdefender.com/consumer/support/">Support for Home Products</a>
+      <a href="https://www.bitdefender.com/business/support/">Support for Business Products</a>
+      <a href="/company/">Investors</a>
+      <a href="/company/job-opportunities/">Careers</a>
+      <a href="/business/infozone/">InfoZone</a>
+    </bd-footer-links-group>
+
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Legal Information</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Privacy Policy</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Site Map</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Company</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="https://www.bitdefender.com/consumer/support/">Contact Us</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#">Privacy Settings</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#" class="impressum-link">Impressum</a>
+    </bd-footer-nav>
+  </bd-footer>
+`;
+
+export const Romanian = () => html`
+  <bd-footer maxColumnsPerRow="3">
+    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+      <a href="/ro-ro/consumer/">Pentru Consumatori</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/ro-ro/small-business/">Pentru Afaceri Mici</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/ro-ro/business/">Pentru Întreprinderi</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/ro-ro/partners/">Pentru Parteneri</a>
+    </bd-footer-nav>
+    
+    <bd-footer-links-group slot="quick-links" title="Linkuri rapide">
+      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+      <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
+      <a href="https://www.bitdefender.com/ro-ro/cyberpedia/">Bitdefender Cyberpedia</a>
+      <a href="https://pan.bitdefender.com/partners/save/">Partner Advantage Network Portal</a>
+      <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/">Brand Portal</a>
+    </bd-footer-links-group>
+
+    <bd-footer-links-group slot="quick-links">
+      <a href="https://www.bitdefender.com/consumer/support/">Suport pentru Produse Casnice</a>
+      <a href="https://www.bitdefender.com/business/support/">Suport pentru Produse Business</a>
+      <a href="/company/">Investitori</a>
+      <a href="/company/job-opportunities/">Cariere</a>
+      <a href="/business/infozone/">InfoZone</a>
+    </bd-footer-links-group>
+
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Informații Legale</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Politica de Confidențialitate</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Harta Site</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Companie</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="https://www.bitdefender.com/consumer/support/">Contactați-ne</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#">Setări Confidențialitate</a>
+    </bd-footer-nav>
+  </bd-footer>
+`;
 
-      <bd-footer-links-group slot="quick-links" title="Quick Links 2">
-        ${quickLinks2.map(
-          link => html`<a href="${link.href}" target="_blank">${link.label}</a>`
-        )}
+export const German = () => html`
+  <bd-footer maxColumnsPerRow="3">
+    <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+      <a href="/de-de/consumer/">Für Verbraucher</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/de-de/small-business/">Für Kleinunternehmen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/de-de/business/">Für Unternehmen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/de-de/partners/">Für Partner</a>
+    </bd-footer-nav>
+    
+    <bd-footer-links-group slot="quick-links" title="Schnelllinks">
+      <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+      <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
+      <a href="https://www.bitdefender.com/de-de/cyberpedia/">Bitdefender Cyberpedia</a>
+      <a href="https://pan.bitdefender.com/partners/save/">Partner Advantage Network Portal</a>
+      <a href="https://brand.bitdefender.com/point/en/bitdefenderhub/component/default/">Brand Portal</a>
+    </bd-footer-links-group>
+
+    <bd-footer-links-group slot="quick-links">
+      <a href="https://www.bitdefender.com/consumer/support/">Support für Home-Produkte</a>
+      <a href="https://www.bitdefender.com/business/support/">Support für Business-Produkte</a>
+      <a href="/company/">Investoren</a>
+      <a href="/company/job-opportunities/">Karriere</a>
+      <a href="/business/infozone/">InfoZone</a>
+    </bd-footer-links-group>
+
+    <bd-footer-nav slot="secondary-nav">
+      <a href="/legal/">Rechtliche Informationen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/site/view/legal-privacy-policy-for-bitdefender-websites/">Datenschutzrichtlinie</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/sitemap/">Sitemap</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="/company/">Unternehmen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="https://www.bitdefender.com/consumer/support/">Kontakt</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#">Datenschutzeinstellungen</a>
+      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <a href="#" class="impressum-link">Impressum</a>
+    </bd-footer-nav>
+  </bd-footer>
+`;
+
+export const WithDividers = () => html`
+  <div>
+    <bd-footer maxColumnsPerRow="3">
+      <bd-footer-nav slot="nav" class="footer-nav-main" bold>
+        <a href="/en/consumer/">For Consumer</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/en/small-business/">For Small Business</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/en/business/">For Enterprise</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/en/partners/">For Partners</a>
+      </bd-footer-nav>
+      
+      <bd-footer-links-group slot="quick-links" title="Quick links">
+        <a href="https://central.bitdefender.com/">Bitdefender Central</a>
+        <a href="https://gravityzone.bitdefender.com/">GravityZone Cloud Control Center</a>
       </bd-footer-links-group>
 
-      <div slot="address">${address}</div>
+      <bd-footer-nav slot="secondary-nav">
+        <a href="/legal/">Legal Information</a>
+        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <a href="/privacy/">Privacy Policy</a>
+      </bd-footer-nav>
     </bd-footer>
-  `;
-};
 
-export const Default = Template.bind({});
-Default.args = {
-  currentLocale   : 'en',
-  selectedCountry : 'Choose your country',
-  maxColumnsPerRow: 2,
-  quickLinks1     : [
-    { label: 'Bitdefender Central', href: 'https://central.bitdefender.com/' },
-    { label: 'GravityZone Cloud Control Center', href: 'https://gravityzone.bitdefender.com/' },
-    { label: 'Bitdefender Cyberpedia', href: 'https://www.bitdefender.com/en-us/cyberpedia/' }
-  ],
-  quickLinks2: [
-    { label: 'Support for Home Products', href: 'https://www.bitdefender.com/consumer/support/' },
-    { label: 'Support for Business Products', href: 'https://www.bitdefender.com/business/support/' },
-    { label: 'Careers', href: '/en/company/job-opportunities/' }
-  ],
-  address: '111 W. Houston Street, Suite 2105, Frost Tower Building<br/>San Antonio, Texas 78205'
-};
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+    <bd-divider-horizontal width="95%"></bd-divider-horizontal>
+  </div>
+`;

package/src/components/header/header.js

@@ -1,6 +1,8 @@
 import { LitElement, html } from "lit";
 import { tokens } from "../../tokens/tokens.js";
 import headerCSS from "../header/header.css.js";
+import "../heading/heading.js";
+import "../paragraph/paragraph.js";
 
 class Header extends LitElement {
   static properties = {
@@ -20,15 +22,13 @@ class Header extends LitElement {
     super.attributeChangedCallback(name, oldVal, newVal);
   }
 
-
-
   render() {
     return html`
       <div class="bd-container">
         <div class="bd-header-left">
-          <h2 class="bd-product-name">${this.productName}</h2>
-          <h3 class="bd-value-prop">${this.valueProp}</h3>
-          <p class="bd-description">${this.description}</p>
+          <bd-h as="h2" class="bd-product-name">${this.productName}</bd-h>
+          <bd-h as="h4" class="bd-value-prop">${this.valueProp}</bd-h>
+          <bd-p kind="regular" class="bd-description">${this.description}</bd-p>
 
           <div class="bd-price-zone-top">
             <span class="bd-full-price">${this.fullPrice}</span>
@@ -58,23 +58,23 @@ class Header extends LitElement {
             </bd-button>
           </div>
 
-          <small class="bd-disclaimer-top">
+          <bd-p kind="small" class="bd-disclaimer-top">
             <slot name="disclaimer-top">
               Protection for 1 account & 5 PCs, Macs, tablets, or smartphones.
               Windows® | macOS® | Android™ | iOS®
             </slot>
-          </small>
+          </bd-p>
 
-          <small class="bd-disclaimer-bottom">
+          <bd-p kind="small" class="bd-disclaimer-bottom">
             <slot name="disclaimer-bottom-text-start"></slot>
             <slot name="disclaimer-bottom-link"></slot>
             <slot name="disclaimer-bottom-text-end"></slot>
-          </small>
+          </bd-p>
         </div>
 
         <div class="bd-header-right">
           <div class="bd-header-image-wrapper">
-            <slot name="header-image"></slot>
+            <slot name="header-picture"></slot>
             <div class="bd-header-watermark"><span>Trusted. Always.</span></div>
           </div>
         </div>
@@ -85,4 +85,4 @@ class Header extends LitElement {
 
 Header.styles = [tokens, headerCSS];
 
-customElements.define("bd-header", Header);
+customElements.define("bd-header", Header);

package/src/components/header/header.stories.js

@@ -1,4 +1,5 @@
 import { html } from 'lit';
+import '../picture/picture.js';
 import './header.js';
 
 export default {
@@ -29,7 +30,32 @@ const Template = (args) => html`
     .finalPrice=${args.finalPrice}
   >
     ${args.headerImage
-      ? html`<img slot="header-image" src="${args.headerImage}" alt="Header Image">`
+      ? html`
+          <bd-picture 
+            slot="header-picture"
+            .sources=${[
+              {
+                type  : 'image/webp',
+                srcset: args.headerImage,
+                media : '(min-width: 1200px)'
+              },
+              {
+                type  : 'image/webp',
+                srcset: args.headerImage,
+                media : '(min-width: 768px)'
+              },
+              {
+                type  : 'image/webp',
+                srcset: args.headerImage
+              }
+            ]}
+            alt="Security illustration"
+            fallback-src="${args.headerImage}"
+            loading="eager"
+            width="750"
+            height="500"
+          ></bd-picture>
+        `
       : ''}
 
     ${args.disclaimerTop
@@ -54,7 +80,7 @@ Default.args = {
   fullPrice            : '$139.99',
   discount             : 'Save 44%',
   finalPrice           : '$79.99*',
-  headerImage          : '/assets/bd-header-us.jpg',
+  headerImage          : 'https://picsum.photos/750/500',
   disclaimerTop        : 'Protection for 1 account & 5 PCs, Macs, tablets, or smartphones. Windows® | macOS® | Android™ | iOS®',
   disclaimerBottomStart: 'Learn more about',
   disclaimerBottomLink : 'Terms & Conditions',
@@ -64,7 +90,7 @@ Default.args = {
 export const WithCustomImage = Template.bind({});
 WithCustomImage.args = {
   ...Default.args,
-  headerImage: '/assets/bd-header-us.jpg'
+  headerImage: 'https://picsum.photos/750/500?random=1'
 };
 
 export const WithDiscountedPrice = Template.bind({});
@@ -75,9 +101,15 @@ WithDiscountedPrice.args = {
   fullPrice            : '$199.99',
   discount             : 'Save 35%',
   finalPrice           : '$129.99*',
-  headerImage          : '/assets/bd-header-us.jpg',
+  headerImage          : 'https://picsum.photos/750/500?random=2',
   disclaimerTop        : 'Protection for 1 account & 5 devices.',
   disclaimerBottomStart: 'See',
   disclaimerBottomLink : 'Details',
   disclaimerBottomEnd  : 'for more info.'
 };
+
+export const WithLocalImage = Template.bind({});
+WithLocalImage.args = {
+  ...Default.args,
+  headerImage: '/assets/bd-header-us.jpg'
+};

package/src/components/heading/heading.css.js

@@ -0,0 +1,79 @@
+import { css } from "lit";
+
+export default css`
+  @layer bd-components {
+    .bd-heading {
+      margin: 0;
+      padding: 0;
+      color: var(--color-neutral-900);
+    }
+
+    /* h1 */
+    .bd-heading.h1 {
+      font-size: var(--typography-heading-h1-fontSize);
+      font-weight: var(--typography-heading-h1-fontWeight);
+      line-height: var(--typography-heading-h1-lineHeight);
+      letter-spacing: var(--typography-heading-h1-letterSpacing);
+      font-family: var(--typography-heading-h1-fontFamily);
+      // margin-bottom: var(--spacing-24);
+      // margin-top: var(--spacing-32);
+    }
+
+    /* h2 */
+    .bd-heading.h2 {
+      font-size: var(--typography-heading-h2-fontSize);
+      font-weight: var(--typography-heading-h2-fontWeight);
+      line-height: var(--typography-heading-h2-lineHeight);
+      letter-spacing: var(--typography-heading-h2-letterSpacing);
+      font-family: var(--typography-heading-h2-fontFamily);
+      // margin-bottom: var(--spacing-20);
+      // margin-top: var(--spacing-28);
+    }
+
+    /* h3 */
+    .bd-heading.h3 {
+      font-size: var(--typography-heading-h3-fontSize);
+      font-weight: var(--typography-heading-h3-fontWeight);
+      line-height: var(--typography-heading-h3-lineHeight);
+      letter-spacing: var(--typography-heading-h3-letterSpacing);
+      font-family: var(--typography-heading-h3-fontFamily);
+      // margin-bottom: var(--spacing-16);
+      // margin-top: var(--spacing-24);
+    }
+
+    /* h4 */
+    .bd-heading.h4 {
+      font-size: var(--typography-heading-h4-fontSize);
+      font-weight: var(--typography-heading-h4-fontWeight);
+      line-height: var(--typography-heading-h4-lineHeight);
+      letter-spacing: var(--typography-heading-h4-letterSpacing);
+      font-family: var(--typography-heading-h4-fontFamily);
+      // margin-bottom: var(--spacing-12);
+      // margin-top: var(--spacing-20);
+    }
+
+    /* h5 */
+    .bd-heading.h5 {
+      font-size: var(--typography-heading-h5-fontSize);
+      font-weight: var(--typography-heading-h5-fontWeight);
+      line-height: var(--typography-heading-h5-lineHeight);
+      letter-spacing: var(--typography-heading-h5-letterSpacing);
+      font-family: var(--typography-heading-h5-fontFamily);
+      // margin-bottom: var(--spacing-8);
+      // margin-top: var(--spacing-16);
+    }
+
+    /* h6 */
+    .bd-heading.h6 {
+      font-size: var(--typography-heading-h6-fontSize);
+      font-weight: var(--typography-heading-h6-fontWeight);
+      line-height: var(--typography-heading-h6-lineHeight);
+      letter-spacing: var(--typography-heading-h6-letterSpacing);
+      font-family: var(--typography-heading-h6-fontFamily);
+      // margin-bottom: var(--spacing-6);
+      // margin-top: var(--spacing-12);
+    }
+
+   
+
+`;

package/src/components/heading/heading.js

@@ -0,0 +1,79 @@
+import { LitElement, html } from "lit";
+import { tokens } from "../../tokens/tokens.js";
+import headingCSS from "./heading.css.js";
+
+export class BdH extends LitElement {
+  static properties = {
+    as        : { type: String, reflect: true },
+    ariaLevel : { type: Number, attribute: "aria-level" },
+    padding   : { type: String },
+    fontWeight: { type: String },
+    color     : { type: String }
+  };
+
+  constructor() {
+    super();
+    this.as = "h1";
+    this.ariaLevel = null;
+    this.padding = "";
+    this.fontWeight = "";
+    this.color = "";
+  }
+
+  _isValidHeadingTag(tag) {
+    return ["h1", "h2", "h3", "h4", "h5", "h6"].includes(tag);
+  }
+
+  _getValidFontWeight(weight) {
+    const validWeights = [
+      "100", "200", "300", "400", "500", "600", "700", "800", "900",
+      "normal", "bold", "lighter", "bolder"
+    ];
+    return validWeights.includes(weight) ? weight : "";
+  }
+
+  _getValidColor(color) {
+    if (!color) return "";
+    if (
+      color.startsWith("var(") ||
+      color.startsWith("#") ||
+      color.startsWith("rgb") ||
+      color.startsWith("hsl")
+    ) {
+      return color;
+    }
+    return "";
+  }
+
+  _computeStyles() {
+    const styles = [];
+
+    const validFontWeight = this._getValidFontWeight(this.fontWeight);
+    const validColor = this._getValidColor(this.color);
+
+    if (this.padding) styles.push(`padding: ${this.padding};`);
+    if (validFontWeight) styles.push(`font-weight: ${validFontWeight};`);
+    if (validColor) styles.push(`color: ${validColor};`);
+
+    return styles.join(" ");
+  }
+
+
+  render() {
+    const tag = this._isValidHeadingTag(this.as) ? this.as : "h1";
+    const element = document.createElement(tag);
+    element.className = `bd-heading ${tag}`;
+    if (this.ariaLevel) element.setAttribute("aria-level", this.ariaLevel);
+
+    const styles = this._computeStyles();
+    if (styles) element.setAttribute("style", styles);
+
+    element.innerHTML = `<slot></slot>`;
+    return html`${element}`;
+  }
+
+
+  static styles = [tokens, headingCSS];
+}
+
+customElements.define("bd-h", BdH);