✨ #4 - feat: add navbar component

.storybook/preview.ts → .storybook/preview.tsx

@@ -1,6 +1,16 @@
 import type { Preview } from "@storybook/react";
+import * as React from "react";
+
+import { Page } from "../src";
 
 const preview: Preview = {
+  decorators: [
+    (Story) => (
+      <Page>
+        <Story />
+      </Page>
+    ),
+  ],
   parameters: {
     actions: { argTypesRegex: "^on[A-Z].*" },
     controls: {
@@ -9,6 +19,7 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    layout: "fullscreen",
   },
 };
 

src/components/button/button.scss

@@ -6,6 +6,7 @@
   --mykn-button-color-text: var(--theme-shade-0);
   --mykn-button-offset: 0px;
 
+  align-items: center;
   appearance: none;
   margin: 0;
   padding: var(--spacing-v-s) var(--spacing-h-s);
@@ -16,9 +17,12 @@
   box-sizing: border-box;
   color: var(--mykn-button-color-text);
   cursor: pointer;
-  display: inline-block;
+  display: inline-flex;
+  flex-wrap: wrap;
+  gap: 0.5em;
   font-family: Inter, sans-serif;
   font-size: var(--typography-font-size-body-s);
+  justify-content: center;
   line-height: var(--typography-line-height-body-s);
   text-align: center;
   text-decoration: none;
@@ -33,6 +37,7 @@
       --mykn-button-offset: -2px;
     }
 
+    &[aria-expanded=true],
     &:active {
       --mykn-button-color-background: var(--theme-color-primary-800);
       --mykn-button-offset: 0px;
@@ -50,7 +55,9 @@
       --mykn-button-offset: -2px;
     }
 
+    &[aria-expanded=true],
     &:active {
+      --mykn-button-color-background: var(--typography-color-background);
       --mykn-button-offset: 0px;
     }
   }

src/components/button/button.tsx

@@ -1,73 +1,56 @@
 import clsx from "clsx";
-import React from "react";
+import React, { LegacyRef } from "react";
 
 import "./button.scss";
 
-export type ButtonProps = React.PropsWithChildren<{
+type BaseButtonProps = {
   variant?: "primary" | "transparent";
-}>;
-
-/**
- * Higher-order component (HOC) applying button logic to WrappedComponent
- * @param WrappedComponent
- * @private
- */
-const withButtonBehavior = <P extends ButtonProps>(
-  WrappedComponent: React.ComponentType<P>,
-) => {
-  // Define the enhanced component
-  const EnhancedButton: React.FC<P> = ({
-    children,
-    variant = "primary",
-    ...props
-  }) => {
-    return (
-      <WrappedComponent
-        className={clsx("mykn-button", `mykn-button--variant-${variant}`)}
-        {...(props as P)}
-      >
-        {children}
-      </WrappedComponent>
-    );
-  };
-
-  return EnhancedButton;
 };
 
-/**
- * Base template for Button component
- * @private
- */
-const BaseButton: React.FC<
-  ButtonProps & React.ButtonHTMLAttributes<HTMLButtonElement>
-> = (props) => {
-  return <button {...props}>{props.children}</button>;
-};
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> &
+  BaseButtonProps;
 
-/**
- * Base template for ButtonLink component
- * @private
- */
-const BaseButtonLink: React.FC<
-  ButtonProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
-> = (props) => {
-  return <a {...props}>{props.children}</a>;
-};
+export type ButtonLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> &
+  BaseButtonProps;
 
 /**
  * Button component
- * @param children
- * @param type
+ * @param variant
  * @param props
  * @constructor
  */
-export const Button = withButtonBehavior(BaseButton);
+export const Button = React.forwardRef<HTMLAnchorElement, ButtonProps>(
+  ({ variant = "primary", ...props }, ref) => {
+    return (
+      <button
+        ref={ref as LegacyRef<HTMLButtonElement>}
+        className={clsx("mykn-button", `mykn-button--variant-${variant}`)}
+        {...props}
+      >
+        {props.children}
+      </button>
+    );
+  },
+);
+Button.displayName = "Button";
 
 /**
- * Anchor (<a>) version of button component
- * @param children
- * @param type
+ * Button component
+ * @param variant
  * @param props
  * @constructor
  */
-export const ButtonLink = withButtonBehavior(BaseButtonLink);
+export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  ({ variant, ...props }, ref) => {
+    return (
+      <a
+        ref={ref as LegacyRef<HTMLAnchorElement>}
+        className={clsx("mykn-button", `mykn-button--variant-${variant}`)}
+        {...props}
+      >
+        {props.children}
+      </a>
+    );
+  },
+);
+ButtonLink.displayName = "ButtonLink";

src/components/dropdown/dropdown.scss

@@ -0,0 +1,45 @@
+@use '../../settings/style';
+
+.mykn-dropdown {
+  display: inline-flex;
+  position: relative;
+  justify-content: center;
+
+  &--open > .mykn-button {
+    outline: 1px solid var(--theme-color-primary-800)
+  }
+
+
+  .mykn-a,
+  .mykn-button,
+  .mykn-dropdown {
+    width: 100%;
+  }
+
+  &__dropdown {
+    width: fit-content;
+    border: 1px solid var(--theme-color-primary-800);
+    border-radius: 4px;
+    box-sizing: border-box;
+    padding: 2px;
+  }
+
+  @media screen and (max-width: style.$breakpoint-desktop - 1px) {
+    &__dropdown {
+      width: 100%;  // Fallback.
+      width: min(100%, max(calc(100vw - 2 * var(--spacing-h-xl)), 100cqw));
+    }
+  }
+
+  @media screen and (min-width: style.$breakpoint-desktop) {
+    &__dropdown .mykn-toolbar--direction-horizontal {
+      width: min-content;
+    }
+  }
+
+  @media screen and (min-width: style.$breakpoint-desktop) {
+    &__dropdown .mykn-toolbar--direction-vertical {
+      width: max-content;
+    }
+  }
+}