feat(logo): shadow parts and css variables (#1071)

telekom · May 24, 2022 · cf037b3 · cf037b3
1 parent 7f20cef
commit cf037b3
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 21 deletions.
diff --git a/packages/components/src/components/telekom/app-footer/app-footer.css b/packages/components/src/components/telekom/app-footer/app-footer.css
@@ -29,7 +29,6 @@
   --background-mask: var(--telekom-color-background-canvas);
   --radius-mask: 0 0 var(--telekom-radius-large) var(--telekom-radius-large);
 
-  --height-logo: var(--telekom-spacing-unit-x6);
   --font-size-copyright: var(--telekom-typography-font-size-caption);
   --color-link-standard: var(--telekom-color-text-and-icon-white-standard);
   --color-link-minimal: var(--telekom-color-text-and-icon-additional);
@@ -276,3 +275,7 @@
     max-width: var(--max-width);
   }
 }
+
+scale-logo:focus-visible {
+  outline: none;
+}
diff --git a/packages/components/src/components/telekom/app-header/app-header.css b/packages/components/src/components/telekom/app-header/app-header.css
@@ -354,9 +354,6 @@ scale-app-header {
     align-items: center;
     justify-content: flex-end;
   }
-  .header .header__brand app-logo {
-    margin-right: var(--telekom-spacing-unit-x4);
-  }
 }
 
 @media (min-width: 1552px) {

diff --git a/packages/components/src/components/telekom/logo/__snapshots__/logo.spec.ts.snap b/packages/components/src/components/telekom/logo/__snapshots__/logo.spec.ts.snap
@@ -6,8 +6,8 @@ exports[`component prop snapshots all props are not set 1`] = `
     <style>
       :host { --logo-size: 36px; }
     </style>
-    <a class="logo logo--variant-magenta" href="javascript:void(0);" tabindex="0" title="Telekom Logo">
-      <scale-logo-svg color="magenta" language="en" role="link"></scale-logo-svg>
+    <a href="javascript:void(0);" part="logo variant-magenta" tabindex="0" title="Telekom Logo">
+      <scale-logo-svg color="magenta" language="en" part="icon" role="link"></scale-logo-svg>
     </a>
   </mock:shadow-root>
 </scale-logo>
@@ -19,8 +19,8 @@ exports[`component prop snapshots all props are set 1`] = `
     <style>
       :host { --logo-size: 100px; }
     </style>
-    <a class="logo logo--transparent logo--variant-white" href="https://www.telekom.de/start" tabindex="0" title="Telekom Logo">
-      <scale-logo-svg color="white" language="hr" role="link"></scale-logo-svg>
+    <a href="https://www.telekom.de/start" part="logo variant-white transparent" tabindex="0" title="Telekom Logo">
+      <scale-logo-svg color="white" language="hr" part="icon" role="link"></scale-logo-svg>
     </a>
   </mock:shadow-root>
 </scale-logo>
@@ -32,8 +32,8 @@ exports[`component prop snapshots all props should handle no link 1`] = `
     <style>
       :host { --logo-size: 36px; }
     </style>
-    <a class="logo logo--variant-magenta" href="" tabindex="0" title="Telekom Logo">
-      <scale-logo-svg color="magenta" language="en" role="link"></scale-logo-svg>
+    <a href="" part="logo variant-magenta" tabindex="0" title="Telekom Logo">
+      <scale-logo-svg color="magenta" language="en" part="icon" role="link"></scale-logo-svg>
     </a>
   </mock:shadow-root>
 </scale-logo>

diff --git a/packages/components/src/components/telekom/logo/logo.css b/packages/components/src/components/telekom/logo/logo.css
@@ -8,25 +8,44 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
  */
-
-.logo {
+:host {
+  --box-shadow-focus: 0 0 0 var(--telekom-line-weight-highlight)
+    var(--telekom-color-functional-focus);
+  --background-magenta: var(--telekom-color-background-canvas);
+  --background-white: var(--telekom-color-primary-standard);
+}
+[part~='logo'] {
   display: inline-flex;
   height: var(--logo-size);
   position: relative;
 }
 
-.logo--variant-magenta {
-  background-color: var(--telekom-color-background-canvas);
+[part~='logo']:focus,
+[part~='logo']:focus-visible {
+  box-shadow: var(--box-shadow-focus);
+  outline: none;
+}
+
+[part~='variant-magenta'] {
+  background-color: var(--background-magenta);
 }
 
-.logo--variant-white {
-  background-color: var(--telekom-color-primary-standard);
+[part~='variant-white'] {
+  background-color: var(--background-white);
 }
 
-.logo--transparent {
+[part~='transparent'] {
   background-color: transparent;
 }
 
-.logo svg {
+[part~='icon'] svg {
   height: var(--logo-size);
 }
+
+[part~='icon']:focus-visible {
+  outline: none;
+}
+
+[part~='icon'] svg:focus {
+  outline: none;
+}
diff --git a/packages/components/src/components/telekom/logo/logo.tsx b/packages/components/src/components/telekom/logo/logo.tsx
@@ -58,7 +58,7 @@ export class Logo {
         </style>
         <a
           href={this.href}
-          class={this.getCssClassMap()}
+          part={this.getCssClassMap()}
           tabIndex={this.focusable === false ? -1 : 0}
           onFocus={() => {
             if (this.scrollIntoViewOnFocus === true) {
@@ -69,6 +69,7 @@ export class Logo {
           aria-describedby={this.logoAriaDescribedBy}
         >
           <scale-logo-svg
+            part="icon"
             language={this.language}
             color={this.variant}
             accessibilityTitle={this.accessibilityTitle}
@@ -82,8 +83,8 @@ export class Logo {
   getCssClassMap() {
     return classNames(
       `logo`,
-      this.variant && `logo--variant-${this.variant}`,
-      this.transparent && `logo--transparent`
+      this.variant && `variant-${this.variant}`,
+      this.transparent && `transparent`
     );
   }
 }