@repobit/dex-system-design 0.11.0 → 0.12.0

package/src/components/footer/footer-lp.js

@@ -0,0 +1,368 @@
+import { LitElement, html } from 'lit';
+import '../../components/divider/divider-horizontal.js';
+import '../../components/divider/divider-vertical.js';
+import '../../components/footer/footer-links-group.js';
+import '../../components/footer/footer-nav-menu.js';
+import '../../components/grid/grid.js';
+import { tokens } from "../../tokens/tokens.js";
+import footerCSS from './footer.css.js';
+import { localeMap } from './localeMap.js';
+
+export class BdFooterLP extends LitElement {
+  static properties = {
+    _countriesOpen     : { state: true },
+    selectedCountry    : { state: true },
+    currentLocale      : { type: String },
+    maxColumnsPerRow   : { type: Number },
+    _isMobile          : { state: true },
+    _countriesContainer: { state: true } // Referință la containerul cu țări
+  };
+
+  constructor() {
+    super();
+    this._countriesOpen = false;
+    this.maxColumnsPerRow = 2;
+    this.currentLocale = 'en';
+    this.selectedCountry = 'Choose your country';
+    this._isMobile = window.innerWidth <= 768;
+    this._countriesContainer = null;
+    console.log('Constructor - isMobile:', this._isMobile, 'Window width:', window.innerWidth);
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this._initLocaleFromUrl();
+    window.addEventListener('resize', this._handleResize.bind(this));
+    console.log('Connected - isMobile:', this._isMobile);
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    window.removeEventListener('resize', this._handleResize.bind(this));
+  }
+
+  firstUpdated() {
+    super.firstUpdated();
+    this._updateNavLinks();
+    // Obține referința la containerul cu țări
+    // this._countriesContainer = this.shadowRoot.querySelector('.footer-countries-container');
+  }
+
+  updated(changedProps) {
+    if (changedProps.has('currentLocale')) {
+      this._updateNavLinks();
+    }
+
+    // Dacă s-a deschis lista de țări, fac scroll smooth către ea
+    if (changedProps.has('_countriesOpen') && this._countriesOpen) {
+    // Obține referința la containerul cu țări doar când este deschis
+      this._countriesContainer = this.shadowRoot.querySelector('.footer-countries-container');
+      this._scrollToCountries();
+    }
+  }
+
+  _scrollToCountries() {
+  // Obține referința la container doar atunci când este necesar
+    const container = this.shadowRoot.querySelector('.footer-countries-container');
+    if (container) {
+    // Așteaptă ca render-ul să se finalizeze
+      setTimeout(() => {
+        container.scrollIntoView({
+          behavior: 'smooth',
+          block   : 'start'
+        });
+      }, 100);
+    }
+  }
+
+  _scrollToTop() {
+    // Scroll smooth către începutul footer-ului
+    this.scrollIntoView({
+      behavior: 'smooth',
+      block   : 'start'
+    });
+  }
+
+  _handleResize() {
+    this._isMobile = window.innerWidth <= 768;
+    const newIsMobile = window.innerWidth <= 768;
+    console.log('Resize - Old isMobile:', this._isMobile, 'New isMobile:', newIsMobile, 'Window width:', window.innerWidth);
+
+    if (this._isMobile !== newIsMobile) {
+      this._isMobile = newIsMobile;
+      console.log('isMobile changed to:', this._isMobile);
+    }
+  }
+
+  _initLocaleFromUrl() {
+    const urlLocale = window.location.pathname.split('/')[1]?.toLowerCase();
+
+    if (!urlLocale) {
+      this._updateNavLinks();
+      return;
+    }
+
+    // Creează o versiune normalized a localeMap cu cheile lowercase
+    const normalizedLocaleMap = {};
+    Object.entries(localeMap).forEach(([key, value]) => {
+      normalizedLocaleMap[key.toLowerCase()] = value;
+    });
+
+    // Încearcă mai întâi potrivire exactă
+    let country = normalizedLocaleMap[urlLocale];
+
+    // Dacă nu găsești potrivire exactă, încearcă să găsești cea mai bună potrivire
+    if (!country && urlLocale) {
+      const localeParts = urlLocale.split('-');
+      const language = localeParts[0];
+      const region = localeParts[1];
+
+      // Caută o potrivire care să înceapă cu același limbaj
+      const possibleMatches = Object.entries(normalizedLocaleMap)
+        .filter(([key]) => key.startsWith(language));
+
+      if (possibleMatches.length > 0) {
+        // Preferă potrivirea cu aceeași regiune dacă există
+        const exactRegionMatch = possibleMatches.find(([key]) => {
+          const keyParts = key.split('-');
+          const keyRegion = keyParts[1];
+          const regionMatch = region && keyRegion === region;
+          const languageOnlyMatch = !region && keyParts.length === 1;
+
+          return regionMatch || languageOnlyMatch;
+        });
+
+        if (exactRegionMatch) {
+          country = exactRegionMatch[1];
+          // Recuperează cheia originală din localeMap
+          const originalKey = Object.keys(localeMap).find(k =>
+            k.toLowerCase() === exactRegionMatch[0]
+          );
+          this.currentLocale = originalKey || exactRegionMatch[0];
+        } else {
+          // Altfel, ia prima potrivire
+          country = possibleMatches[0][1];
+          const originalKey = Object.keys(localeMap).find(k =>
+            k.toLowerCase() === possibleMatches[0][0]
+          );
+          this.currentLocale = originalKey || possibleMatches[0][0];
+        }
+      }
+    }
+
+    // Setează valorile pentru țară și locale
+    if (country) {
+      this.selectedCountry = country;
+    }
+
+    if (this.currentLocale !== urlLocale) {
+      const originalKey = Object.keys(localeMap).find(k =>
+        k.toLowerCase() === urlLocale
+      );
+      this.currentLocale = originalKey || urlLocale;
+    }
+
+    // Actualizează linkurile de navigație
+    this._updateNavLinks();
+  }
+
+  _toggleCountries() {
+    this._countriesOpen = !this._countriesOpen;
+
+    // Dacă se închide dropdown-ul, fac scroll înapoi sus
+    if (!this._countriesOpen) {
+      this._scrollToTop();
+    }
+  }
+
+  _closeCountries() {
+    this._countriesOpen = false;
+
+    // Doar pentru desktop, facem scroll înapoi sus
+    if (!this._isMobile) {
+      this._scrollToTop();
+    }
+  }
+
+  _handleCountryClick(e, countryLabel, locale) {
+    e.preventDefault();
+    this._selectCountry(countryLabel);
+
+    // Redirect către pagina cu noul locale
+    const newPath = `/${locale.toLowerCase()}/`;
+    window.location.href = newPath;
+  }
+
+  _selectCountry(countryLabel) {
+    this.selectedCountry = countryLabel;
+    this._countriesOpen = false;
+
+    // Găsește locale-ul corespunzător pentru țara selectată
+    const localeEntry = Object.entries(localeMap).find(
+      ([, country]) => country === countryLabel
+    );
+
+    if (localeEntry) {
+      this.currentLocale = localeEntry[0];
+    }
+
+    this._updateNavLinks();
+    this._scrollToTop();
+  }
+
+  getCountriesList() {
+    return Object.entries(localeMap).map(([locale, country]) => ({
+      locale,
+      label: country
+    }));
+  }
+
+  renderQuickLinksSection(slotName) {
+    const assignedElements = this.shadowRoot?.querySelector(`slot[name="${slotName}"]`)?.assignedElements({ flatten: true }) || [];
+    if (assignedElements.length === 0) return null;
+
+    const maxCols = this.maxColumnsPerRow || 3;
+    const rows = Math.ceil(assignedElements.length / maxCols);
+
+    const groupedRows = Array.from({ length: rows }, (_, rowIndex) => {
+      const start = rowIndex * maxCols;
+      return assignedElements.slice(start, start + maxCols);
+    });
+
+    return html`
+      <div class="quick-links-section" style="display: flex; flex-direction: column; gap: 1rem;">
+        ${groupedRows.map(row => html`
+          <div style="display: grid; grid-template-columns: repeat(${row.length}, 1fr); gap: 1rem;">
+            ${row.map(el => html`${el}`)}
+          </div>
+        `)}
+      </div>
+    `;
+  }
+
+  get locale() {
+    const val = (this.currentLocale || 'en').toLowerCase();
+    return val;
+  }
+
+  _updateSlotStyles() {
+    const isMobile = window.innerWidth <= 768;
+    const slot = this.shadowRoot.querySelector('slot[name="nav"]');
+    const assignedElements = slot.assignedElements();
+
+    assignedElements.forEach(element => {
+      if (isMobile) {
+        element.style.color = '#151719';
+        element.style.setProperty('color', '#151719', 'important');
+      } else {
+        element.style.color = '';
+        element.style.removeProperty('color');
+      }
+    });
+  }
+
+  _updateNavLinks() {
+    // Actualizează linkurile care sunt acum în shadow DOM
+    const links = this.shadowRoot.querySelectorAll('.footer-nav-main a');
+    const linkPaths = ['consumer', 'small-business', 'business', 'partners'];
+    const currentLocale = this.locale;
+
+    links.forEach((link, index) => {
+      if (index < linkPaths.length) {
+        link.href = `/${currentLocale}/${linkPaths[index]}/`;
+      }
+    });
+  }
+
+  render() {
+    const year = new Date().getFullYear();
+    const showAnpc = this.locale.startsWith('ro');
+    const showImpressum = this.locale === 'de-de' || this.locale === 'de';
+
+    const masterbrandUrl = this._isMobile
+      ? '/assets/Bitdefender-Masterbrand_mobile.png'
+      : '/assets/Bitdefender-Masterbrand.png';
+
+    const anpcUrl = this._isMobile
+      ? '/assets/anpc_mobile.png'
+      : '/assets/anpc.png';
+
+    const logoUrl = '/assets/BD_logo.png';
+
+
+
+    return html`
+    <div class="footer-top-bleed">
+      <div class="container">
+        <div class="footer-top">
+          <div class="footer-logo">
+            <slot name="logo">
+              <span><img src="${logoUrl}" alt="Bitdefender Logo"></span>
+            </slot>
+          </div>
+          <div class="footer-top-right">
+            <slot name="top-right">
+              <div slot="top-right">
+                <span slot="logo">
+                  <img src="${masterbrandUrl}" alt="Bitdefender Masterbrand">
+                </span>
+              </div>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <footer class="container">
+
+      <div class="footer-middle-line-lp">
+         <bd-footer-nav>
+        <div class="footer-nav-main">
+          <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>
+          ${showImpressum
+            ? html`
+            <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+            <a href="#" class="impressum-link">Impressum</a>
+          `
+            : ''}
+        </div>
+      </bd-footer-nav>
+            <bd-divider-horizontal width="100%" color="white" opacity="0.25"></bd-divider-horizontal>
+
+      </div>
+
+
+      <div class="footer-extra">
+        <div class="footer-copy">Copyright © 1997 - ${year} Bitdefender</div>
+        ${showAnpc
+          ? html`
+          <div class="footer-anpc-lp">
+            <slot name="anpc">
+              <div slot="anpc">
+                <img src="${anpcUrl}" alt="Certificat" />
+              </div>
+            </slot>
+          </div>
+        `
+          : null}
+       
+      </div>
+
+ 
+    </footer>
+  `;
+  }
+  static styles = [tokens, footerCSS];
+}
+
+customElements.define('bd-footer-lp', BdFooterLP);

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

@@ -0,0 +1,69 @@
+// BdFooterLP.stories.js
+import { html } from 'lit';
+import './footer-lp.js';
+
+export default {
+  title    : 'Components/Footer/BdFooterLP',
+  component: 'bd-footer-lp',
+  argTypes : {
+    currentLocale: {
+      control    : 'text',
+      description: 'Codul de locale curent (ex: en, ro, de-de)',
+      table      : { defaultValue: { summary: 'en' } }
+    },
+    maxColumnsPerRow: {
+      control    : { type: 'number', min: 1, max: 4 },
+      description: 'Numărul maxim de coloane pentru quick links',
+      table      : { defaultValue: { summary: 2 } }
+    },
+    selectedCountry: {
+      control    : 'text',
+      description: 'Țara selectată în footer',
+      table      : { defaultValue: { summary: 'Choose your country' } }
+    },
+    _isMobile: {
+      control    : 'boolean',
+      description: 'Forțează modul mobile pentru testare',
+      table      : { defaultValue: { summary: false } }
+    },
+    _countriesOpen: {
+      control    : 'boolean',
+      description: 'Controlează dacă dropdown-ul cu țări este deschis',
+      table      : { defaultValue: { summary: false } }
+    }
+  }
+};
+
+const Template = (args) => {
+  return html`
+    <bd-footer-lp
+      .currentLocale=${args.currentLocale}
+      .maxColumnsPerRow=${args.maxColumnsPerRow}
+      .selectedCountry=${args.selectedCountry}
+      ._isMobile=${args._isMobile}
+      ._countriesOpen=${args._countriesOpen}
+    >
+      <span slot="logo">
+        <img src="/assets/BD_logo.png" alt="Bitdefender Logo" style="height: 40px;" />
+      </span>
+
+      <div slot="top-right">
+        <img src="/assets/Bitdefender-Masterbrand.png" alt="Masterbrand" style="height: 40px;" />
+      </div>
+
+      <div slot="anpc">
+        <img src="/assets/anpc.png" alt="Certificat ANPC" style="height: 30px;" />
+      </div>
+    </bd-footer-lp>
+  `;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  currentLocale   : 'en',
+  maxColumnsPerRow: 2,
+  selectedCountry : 'Choose your country',
+  _isMobile       : false,
+  _countriesOpen  : false
+};
+

package/src/components/footer/footer-nav-menu.css.js

@@ -0,0 +1,24 @@
+import { css } from 'lit';
+
+export default css`
+
+ .footer-nav-main {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: 1rem;
+  flex-wrap: wrap;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
+  font-size: var(--typography-body-regular-fontSize);
+  font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
+  font-weight: var(--typography-label-default-fontWeight)
+}
+
+.footer-nav-main.footer-nav-bold {
+  font-weight: var(--typography-heading-h3-fontWeight);
+}
+  a{
+  color: white;
+  text-decoration: none}
+`;

package/src/components/footer/footer-nav-menu.js

@@ -0,0 +1,36 @@
+import { LitElement, html } from 'lit';
+import { tokens } from '../../tokens/tokens.js';
+import '../divider/divider-vertical.js';
+import navCSS from './footer-nav-menu.css.js';
+
+export class BdFooterNav extends LitElement {
+  static properties = {
+    bold: { type: Boolean }
+  };
+
+  constructor() {
+    super();
+    this.bold = false;
+  }
+
+  render() {
+    const classes = {
+      'footer-nav-main': true,
+      'footer-nav-bold': this.bold
+    };
+    const classString = Object.entries(classes)
+      .filter(([, value]) => value)
+      .map(([key]) => key)
+      .join(' ');
+
+    return html`
+      <nav class=${classString}>
+        <slot></slot>
+      </nav>
+    `;
+  }
+
+  static styles = [tokens, navCSS];
+}
+
+customElements.define('bd-footer-nav', BdFooterNav);