@repobit/dex-system-design 0.25.11 → 0.26.0

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

@@ -22,32 +22,24 @@ export default {
     }
   },
   argTypes: {
-    maxColumnsPerRow: {
-      control    : { type: 'number', min: 1, max: 4 },
-      description: 'Maximum number of columns for link organization',
-      table      : {
-        type        : { summary: 'number' },
-        defaultValue: { summary: '3' }
-      }
-    }
   }
 };
 
 export const Default = () => html`
-  <bd-footer-lp maxColumnsPerRow="3">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       <a href="/legal/">Legal Information</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></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>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/sitemap/">Site Map</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/company/">Company</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="https://www.bitdefender.com/consumer/support/">Contact Us</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="#">Privacy Settings</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="#" class="impressum-link">Impressum</a>
     </bd-footer-nav>
   </bd-footer-lp>
@@ -61,12 +53,12 @@ Default.parameters = {
 };
 
 export const MinimalLinks = () => html`
-  <bd-footer-lp maxColumnsPerRow="2">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       <a href="/legal/">Legal</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/privacy/">Privacy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/contact/">Contact</a>
     </bd-footer-nav>
   </bd-footer-lp>
@@ -82,16 +74,16 @@ MinimalLinks.parameters = {
 export const WithHorizontalDividers = () => html`
   <div>
     <bd-divider-horizontal width="95%"></bd-divider-horizontal>
-    <bd-footer-lp maxColumnsPerRow="3">
+    <bd-footer-lp>
       <bd-footer-nav slot="secondary-nav">
         <a href="/legal/">Legal Information</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
         <a href="/privacy/">Privacy Policy</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
         <a href="/sitemap/">Site Map</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
         <a href="/company/">Company</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
         <a href="/contact/">Contact Us</a>
       </bd-footer-nav>
     </bd-footer-lp>
@@ -106,16 +98,16 @@ WithHorizontalDividers.parameters = {
 };
 
 export const SingleColumnLayout = () => html`
-  <bd-footer-lp maxColumnsPerRow="1">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       <a href="/legal/">Legal Information</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/privacy/">Privacy Policy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/sitemap/">Site Map</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/company/">Company</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/contact/">Contact Us</a>
     </bd-footer-nav>
   </bd-footer-lp>
@@ -129,20 +121,20 @@ SingleColumnLayout.parameters = {
 };
 
 export const InternationalCompliance = () => html`
-  <bd-footer-lp maxColumnsPerRow="4">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       <a href="/legal/">Legal Information</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/privacy/">Privacy Policy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/cookies/">Cookie Policy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/terms/">Terms of Service</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/gdpr/">GDPR</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/ccpa/">CCPA</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="#" class="impressum-link">Impressum</a>
     </bd-footer-nav>
   </bd-footer-lp>
@@ -156,20 +148,20 @@ InternationalCompliance.parameters = {
 };
 
 export const GermanLegal = () => html`
-  <bd-footer-lp maxColumnsPerRow="3">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       <a href="/legal/">Rechtliche Informationen</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/privacy/">Datenschutzrichtlinie</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/sitemap/">Sitemap</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/company/">Unternehmen</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/contact/">Kontakt</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="#">Datenschutzeinstellungen</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="#" class="impressum-link">Impressum</a>
     </bd-footer-nav>
   </bd-footer-lp>
@@ -183,20 +175,20 @@ GermanLegal.parameters = {
 };
 
 export const FrenchLegal = () => html`
-  <bd-footer-lp maxColumnsPerRow="3">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       <a href="/legal/">Informations légales</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/privacy/">Politique de confidentialité</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/sitemap/">Plan du site</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/company/">Entreprise</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/contact/">Contactez-nous</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="#">Paramètres de confidentialité</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/cookies/">Gestion des cookies</a>
     </bd-footer-nav>
   </bd-footer-lp>
@@ -210,14 +202,14 @@ FrenchLegal.parameters = {
 };
 
 export const WithCopyright = () => html`
-  <bd-footer-lp maxColumnsPerRow="3">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       <a href="/legal/">Legal Information</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/privacy/">Privacy Policy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/sitemap/">Site Map</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/company/">Company</a>
     </bd-footer-nav>
     <div slot="copyright" style="text-align: center; padding-top: 1rem; color: white; font-size: 0.875rem;">
@@ -234,12 +226,12 @@ WithCopyright.parameters = {
 };
 
 export const CompactMobile = () => html`
-  <bd-footer-lp maxColumnsPerRow="1">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       <a href="/legal/">Legal</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/privacy/">Privacy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/contact/">Contact</a>
     </bd-footer-nav>
     <div slot="copyright" style="text-align: center; padding-top: 0.5rem; color: white; font-size: 0.75rem;">
@@ -256,12 +248,12 @@ CompactMobile.parameters = {
 };
 
 export const CustomizableFooterLP = (args) => html`
-  <bd-footer-lp maxColumnsPerRow="${args.maxColumnsPerRow}">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       ${args.showLegal
         ? html`
         <a href="/legal/">Legal Information</a>
-        <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+        <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       `
         : ''}
       ${args.showPrivacy
@@ -269,7 +261,7 @@ export const CustomizableFooterLP = (args) => html`
         <a href="/privacy/">Privacy Policy</a>
         ${args.showSitemap || args.showCompany || args.showContact
           ? html`
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
         `
           : ''}
       `
@@ -279,7 +271,7 @@ export const CustomizableFooterLP = (args) => html`
         <a href="/sitemap/">Site Map</a>
         ${args.showCompany || args.showContact
           ? html`
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
         `
           : ''}
       `
@@ -289,7 +281,7 @@ export const CustomizableFooterLP = (args) => html`
         <a href="/company/">Company</a>
         ${args.showContact
           ? html`
-          <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+          <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
         `
           : ''}
       `
@@ -310,18 +302,14 @@ export const CustomizableFooterLP = (args) => html`
   </bd-footer-lp>
 `;
 CustomizableFooterLP.args = {
-  maxColumnsPerRow: 3,
-  showLegal       : true,
-  showPrivacy     : true,
-  showSitemap     : true,
-  showCompany     : true,
-  showContact     : true,
-  showCopyright   : false
+  showLegal    : true,
+  showPrivacy  : true,
+  showSitemap  : true,
+  showCompany  : true,
+  showContact  : true,
+  showCopyright: false
 };
 CustomizableFooterLP.argTypes = {
-  maxColumnsPerRow: {
-    control: { type: 'number', min: 1, max: 4 }
-  },
   showLegal: {
     control    : 'boolean',
     description: 'Show Legal Information link'
@@ -356,14 +344,14 @@ CustomizableFooterLP.parameters = {
 };
 
 export const PrivacyFocused = () => html`
-  <bd-footer-lp maxColumnsPerRow="2">
+  <bd-footer-lp>
     <bd-footer-nav slot="secondary-nav">
       <a href="/privacy/">Privacy Policy</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/cookies/">Cookie Preferences</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="/legal/">Legal</a>
-      <bd-divider-vertical color="white" height="18px"></bd-divider-vertical>
+      <bd-divider-vertical color="inverse" height="18"></bd-divider-vertical>
       <a href="#" onclick="window.__tcfapi('showUi', null); return false;">Privacy Settings</a>
     </bd-footer-nav>
   </bd-footer-lp>

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

@@ -1,4 +1,5 @@
-import { css } from 'lit';
+import { css, unsafeCSS } from 'lit';
+import { below } from '../shared/token-scales.js';
 
 export default css`
   .footer-nav-main {
@@ -8,7 +9,7 @@ export default css`
     gap: var(--spacing-16);
     flex-wrap: wrap;
     font-size: var(--typography-body-regular-fontSize);
-    font-family: var(--typography-fontFamily-sans, 'IBM Plex Sans');
+    font-family: var(--typography-fontFamily-sans);
     font-weight: var(--typography-label-default-fontWeight);
   }
 
@@ -17,11 +18,31 @@ export default css`
   }
 
   ::slotted(a) {
-    color: white !important;
+    color: var(--color-text-inverse) !important;
     text-decoration: none;
   }
 
-@media (max-width: 767px) {
+  /* The one focus ring, on the elements that actually take focus.
+
+     These links are the consumer's own anchors, slotted in -- measured 57 raw
+     <a> and 0 bd-link across the eleven bd-footer-nav instances in the built
+     stories -- so they bring no ring of their own. bd-footer and bd-footer-lp
+     both declared one for them, as .footer-nav-main a:focus; neither could
+     reach it, because .footer-nav-main is in THIS shadow root and the anchors
+     are in the page's. What rendered instead was the browser's own outline:
+     measured "1px auto rgb(0, 95, 204)" with box-shadow none, a blue hairline
+     on the blue-600 masthead these links sit on. The two-colour ring exists for
+     exactly that surface -- its inner band is white.
+
+     Spelled ::slotted, which is the only selector that crosses this boundary,
+     and :focus-visible so a mouse click does not draw it. */
+  ::slotted(a:focus-visible) {
+    outline: none;
+    box-shadow: var(--focus-outline-primary);
+    border-radius: var(--focus-outline-radius);
+  }
+
+@media ${unsafeCSS(below('md'))} {
   .footer-nav-main {
     flex-direction: column;
     align-items: flex-start;
@@ -32,4 +53,5 @@ export default css`
     display: none !important;
   }
 }
+
 `;

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

@@ -1,5 +1,6 @@
 import { LitElement, html } from 'lit';
-import { tokens } from '../../tokens/tokens.js';
+// Installs the design tokens into document scope; see src/tokens/tokens.js
+import "../../tokens/tokens.js";
 import '../divider/divider-vertical.js';
 import navCSS from './footer-nav-menu.css.js';
 
@@ -30,7 +31,7 @@ export class BdFooterNav extends LitElement {
     `;
   }
 
-  static styles = [tokens, navCSS];
+  static styles = [navCSS];
 }
 
 customElements.define('bd-footer-nav', BdFooterNav);