💄 - style: improve presentation of Logo component

maykinmedia · Aug 15, 2024 · 052d81b · 052d81b
1 parent 2366141
commit 052d81b
Show file tree

Hide file tree

Showing 5 changed files with 52 additions and 41 deletions.
diff --git a/src/components/logo/logo.scss b/src/components/logo/logo.scss
@@ -1,21 +1,29 @@
 .mykn-logo {
   display: inline-block;
-
   font-size: 0;
+  height: 34px;
+  max-width: 100%;
 
-  &__image {
-    height: 100%;
-    max-width: 155px;
-    object-fit: contain;
-    overflow: visible;
-    width: 100%;
+  &--abbreviated {
+    height: auto;
+  }
+
+  &--variant-contrast {
+    --page-color-logo: var(--page-color-primary-contrast);
   }
 
   & &__handle {
     transition: transform var(--animation-duration-fast)
       var(--animation-timing-function);
   }
 
+  &__image {
+    height: 100%;
+    object-fit: contain;
+    overflow: visible;
+    width: 100%;
+  }
+
   &[href]:hover &__handle--left,
   &[href]:focus &__handle--left {
     transform: translateX(-2px);
@@ -34,11 +42,11 @@
     transform: translateX(-2px);
   }
 
-  &--variant-compact &__text--a,
-  &--variant-compact &__text--y,
-  &--variant-compact &__text--k,
-  &--variant-compact &__text--i,
-  &--variant-compact &__text--n {
-    display: none;
+  &--abbreviated &__text--a,
+  &--abbreviated &__text--y,
+  &--abbreviated &__text--k,
+  &--abbreviated &__text--i,
+  &--abbreviated &__text--n {
+    opacity: 0;
   }
 }
diff --git a/src/components/logo/logo.tsx b/src/components/logo/logo.tsx
@@ -6,6 +6,9 @@ import { useIntl } from "../../lib/i18n/useIntl";
 import "./logo.scss";
 
 export type LogoProps = {
+  /** Whether to show the logo with a single letter ("M") instead of the full brand name ("MAYKIN"). */
+  abbreviated?: boolean;
+
   /** If set, provide a link. */
   href?: string;
 
@@ -16,7 +19,7 @@ export type LogoProps = {
   hrefLabel?: string;
 
   /** Logo variant. */
-  variant?: "normal" | "compact";
+  variant?: "normal" | "contrast";
 
   /** Gets passed as props. */
   [index: string]: unknown;
@@ -29,13 +32,14 @@ export type LogoProps = {
  * @constructor
  */
 export const Logo: React.FC<LogoProps> = ({
+  abbreviated = false,
   label,
   href,
   hrefLabel,
   variant = "normal",
   ...props
 }) => {
-  const viewBoxWidth = variant === "normal" ? 122 : 47;
+  const viewBoxWidth = abbreviated ? 47 : 122;
   const context = {
     href: href || "",
   };
@@ -69,6 +73,7 @@ export const Logo: React.FC<LogoProps> = ({
     <Tag
       className={clsx("mykn-logo", {
         [`mykn-logo--variant-${variant}`]: variant,
+        "mykn-logo--abbreviated": abbreviated,
       })}
       href={href}
       aria-label={href && _hrefLabel}
@@ -85,12 +90,13 @@ export const Logo: React.FC<LogoProps> = ({
           fill="#00bfcb"
           d="M6.32,26.41a4.27,4.27,0,0,1-2.26-.53,3.82,3.82,0,0,1-1.33-1.35,4.91,4.91,0,0,1-.63-1.78,12.47,12.47,0,0,1-.16-1.89V17.8a6.7,6.7,0,0,0-.1-1.2,3.56,3.56,0,0,0-.3-1A1.87,1.87,0,0,0,1,14.92a1.15,1.15,0,0,0-.74-.26H0V11.8H.29A1.14,1.14,0,0,0,1,11.55a1.91,1.91,0,0,0,.51-.69,3.56,3.56,0,0,0,.3-1,6.62,6.62,0,0,0,.1-1.2V5.54A12.54,12.54,0,0,1,2.1,3.67a5,5,0,0,1,.63-1.8A3.79,3.79,0,0,1,4.06.53,4.27,4.27,0,0,1,6.32,0H7.8V2.51H6.57a1.74,1.74,0,0,0-1.05.3,2,2,0,0,0-.63.78,2.92,2.92,0,0,0-.3,1,9.39,9.39,0,0,0-.07,1.19V8.94a9.89,9.89,0,0,1-.28,2.38A3.58,3.58,0,0,1,3,13.23a3.71,3.71,0,0,1,1.27,1.95,9.62,9.62,0,0,1,.28,2.34v3.06a9.23,9.23,0,0,0,.07,1.18,3,3,0,0,0,.3,1.06,2.06,2.06,0,0,0,.63.77,1.68,1.68,0,0,0,1.05.3H7.8v2.52Z"
         />
-        <path
-          className="mykn-logo__handle mykn-logo__handle--right"
-          fill="#00bfcb"
-          d="M114,23.89h1.23a1.76,1.76,0,0,0,1.07-.3,1.89,1.89,0,0,0,.63-.77,3.44,3.44,0,0,0,.29-1.06,9.23,9.23,0,0,0,.07-1.18V17.52a10.16,10.16,0,0,1,.26-2.34,3.62,3.62,0,0,1,1.28-1.95,3.49,3.49,0,0,1-1.28-1.91,10.46,10.46,0,0,1-.26-2.38V5.83a9.39,9.39,0,0,0-.07-1.19,3.38,3.38,0,0,0-.29-1,1.85,1.85,0,0,0-.63-.78,1.83,1.83,0,0,0-1.07-.3H114V0h1.49a4.29,4.29,0,0,1,2.26.53,3.87,3.87,0,0,1,1.33,1.34,5.35,5.35,0,0,1,.63,1.8,12.47,12.47,0,0,1,.15,1.87V8.66a7.67,7.67,0,0,0,.1,1.2,4.37,4.37,0,0,0,.3,1,2.06,2.06,0,0,0,.52.69,1.12,1.12,0,0,0,.74.25h.29v2.86h-.29a1.13,1.13,0,0,0-.74.26,2,2,0,0,0-.52.68,4.37,4.37,0,0,0-.3,1,7.77,7.77,0,0,0-.1,1.2v3.06a12.43,12.43,0,0,1-.15,1.89,5.32,5.32,0,0,1-.63,1.78,3.9,3.9,0,0,1-1.33,1.35,4.29,4.29,0,0,1-2.26.53H114Z"
-          transform={variant === "compact" ? "translate(-75)" : undefined}
-        />
+        <g transform={abbreviated ? "translate(-75)" : undefined}>
+          <path
+            className="mykn-logo__handle mykn-logo__handle--right"
+            fill="#00bfcb"
+            d="M114,23.89h1.23a1.76,1.76,0,0,0,1.07-.3,1.89,1.89,0,0,0,.63-.77,3.44,3.44,0,0,0,.29-1.06,9.23,9.23,0,0,0,.07-1.18V17.52a10.16,10.16,0,0,1,.26-2.34,3.62,3.62,0,0,1,1.28-1.95,3.49,3.49,0,0,1-1.28-1.91,10.46,10.46,0,0,1-.26-2.38V5.83a9.39,9.39,0,0,0-.07-1.19,3.38,3.38,0,0,0-.29-1,1.85,1.85,0,0,0-.63-.78,1.83,1.83,0,0,0-1.07-.3H114V0h1.49a4.29,4.29,0,0,1,2.26.53,3.87,3.87,0,0,1,1.33,1.34,5.35,5.35,0,0,1,.63,1.8,12.47,12.47,0,0,1,.15,1.87V8.66a7.67,7.67,0,0,0,.1,1.2,4.37,4.37,0,0,0,.3,1,2.06,2.06,0,0,0,.52.69,1.12,1.12,0,0,0,.74.25h.29v2.86h-.29a1.13,1.13,0,0,0-.74.26,2,2,0,0,0-.52.68,4.37,4.37,0,0,0-.3,1,7.77,7.77,0,0,0-.1,1.2v3.06a12.43,12.43,0,0,1-.15,1.89,5.32,5.32,0,0,1-.63,1.78,3.9,3.9,0,0,1-1.33,1.35,4.29,4.29,0,0,1-2.26.53H114Z"
+          />
+        </g>
         <path
           className="mykn-logo__text mykn-logo__text--m"
           fill="var(--page-color-logo, #341a90)"

diff --git a/src/components/navbar/navbar.scss b/src/components/navbar/navbar.scss
@@ -1,8 +1,5 @@
 .mykn-navbar {
-  float: right; // Fallback.
-  float: inline-end;
-
-  .mykn-page > & {
-    align-self: flex-end;
+  .mykn-logo {
+    width: 32px;
   }
 }
diff --git a/src/components/navbar/navbar.tsx b/src/components/navbar/navbar.tsx
@@ -10,17 +10,19 @@ export type NavbarProps = ToolbarProps;
  */
 export const Navbar: React.FC<NavbarProps> = ({ children, ...props }) => {
   return (
-    <Toolbar
-      align="center"
-      direction="vertical"
-      justify="v"
-      pad
-      padSize="xs"
-      variant="primary"
-      sticky="top"
-      {...props}
-    >
-      {children}
-    </Toolbar>
+    <div className="mykn-navbar">
+      <Toolbar
+        align="center"
+        direction="vertical"
+        justify="v"
+        pad
+        padSize="xs"
+        variant="primary"
+        sticky="top"
+        {...props}
+      >
+        {children}
+      </Toolbar>
+    </div>
   );
 };
diff --git a/src/components/sidebar/sidebar.tsx b/src/components/sidebar/sidebar.tsx
@@ -95,9 +95,7 @@ export const Sidebar: React.FC<SidebarProps> = ({
 
   const _logo = slotLogo || CustomLogo || (
     <Logo
-      variant={
-        expandedState || transitionState || !expandable ? "normal" : "compact"
-      }
+      abbreviated={!(expandedState || transitionState || !expandable)}
       {...logoProps}
     />
   );