@knapsack/sandbox-components 4.67.3--canary.aa8dfe6.0 → 4.67.3

package/CHANGELOG.md

@@ -1,3 +1,19 @@
+# v4.67.3 (Wed Aug 07 2024)
+
+#### 🐛 Bug Fix
+
+- KSP-5370: Add menu to header sandbox component [#4456](https://github.com/knapsack-labs/app-monorepo/pull/4456) ([@brittanysmart](https://github.com/brittanysmart))
+- Merge branch 'latest' into feature/add-menu-component ([@brittanysmart](https://github.com/brittanysmart))
+- remove duplicate background-image in .logo class ([@brittanysmart](https://github.com/brittanysmart))
+- add back logo class to header.css ([@brittanysmart](https://github.com/brittanysmart))
+- update header styles and add menu functionality to header component ([@brittanysmart](https://github.com/brittanysmart))
+
+#### Authors: 1
+
+- Brittany Smart ([@brittanysmart](https://github.com/brittanysmart))
+
+---
+
 # v4.67.0 (Tue Aug 06 2024)
 
 #### 🐛 Bug Fix

package/dist/css/ks-sandbox-styles.css

@@ -1372,15 +1372,22 @@ body {
 .header {
   background-color: #7a34ed;
   background-color: var(--brand-color);
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-top: var(--spacing-small);
-  padding-bottom: var(--spacing-small);
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-left: var(--spacing-large);
-  padding-right: var(--spacing-large);
-  width: 100vw;
+  padding: 8px 16px;
+  padding: var(--spacing-small) var(--spacing-large);
+  width: 100%;
+  position: relative;
+  height: 60px;
+  z-index: 10;
+}
+
+.logo {
+  background-image: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
+  background-image: var(--brand-logo);
+  width: 100%;
+  height: 28px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
 }
 
 .header-content {
@@ -1388,21 +1395,53 @@ body {
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 100%;
+  z-index: 15;
+  position: relative;
+}
+
+.menu {
+  position: absolute;
+  top: 60px;
+  left: 0;
+  width: 100%;
+  max-height: 300px;
+  background-color: #7a34ed;
+  background-color: var(--brand-color);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: 12px 0;
+  padding: var(--spacing-medium) 0;
+  z-index: 5;
+  transform: translateY(-100%);
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
 }
 
-.menu-icon {
-  margin-right: 12px;
-  margin-right: var(--spacing-medium);
+.menu.open {
+  transform: translateY(0);
+  opacity: 1;
+  visibility: visible;
 }
 
-.logo {
-  background-image: url('https://knapsack.imgix.net/site/ks-sandbox/logo-arcadia-4id5a3sy3ysvg');
-  background-image: var(--brand-logo);
+.menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu li {
+  padding: 8px 16px;
+  padding: var(--spacing-small) var(--spacing-large);
+}
+
+.menu li a {
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  color: #FFFFFF;
+  display: block;
   width: 100%;
-  height: 28px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
+  font-weight: 600;
 }
 
 .hero {

package/dist/react/header.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/react/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAI1B,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAuBxC,CAAC"}
+{"version":3,"file":"header.d.ts","sourceRoot":"","sources":["../../src/react/header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmB,MAAM,OAAO,CAAC;AAIxC,MAAM,MAAM,WAAW,GAAG;IACxB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,eAAO,MAAM,MAAM,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAgDxC,CAAC"}

package/dist/react/header.js

@@ -1,7 +1,12 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
 import clsx from 'clsx';
 import { Button } from './button.js';
 export const Header = ({ className }) => {
-    return (_jsx("header", { className: clsx('header', className), children: _jsxs("div", { className: "header-content", children: [_jsx("svg", { width: "24", height: "19", viewBox: "0 0 24 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M24 9.5C24 9.76522 23.8946 10.0196 23.7071 10.2071C23.5196 10.3946 23.2652 10.5 23 10.5H1C0.734784 10.5 0.48043 10.3946 0.292893 10.2071C0.105357 10.0196 0 9.76522 0 9.5C0 9.23478 0.105357 8.98043 0.292893 8.79289C0.48043 8.60536 0.734784 8.5 1 8.5H23C23.2652 8.5 23.5196 8.60536 23.7071 8.79289C23.8946 8.98043 24 9.23478 24 9.5ZM1 2.5H23C23.2652 2.5 23.5196 2.39464 23.7071 2.20711C23.8946 2.01957 24 1.76522 24 1.5C24 1.23478 23.8946 0.98043 23.7071 0.792893C23.5196 0.605357 23.2652 0.5 23 0.5H1C0.734784 0.5 0.48043 0.605357 0.292893 0.792893C0.105357 0.98043 0 1.23478 0 1.5C0 1.76522 0.105357 2.01957 0.292893 2.20711C0.48043 2.39464 0.734784 2.5 1 2.5ZM23 16.5H1C0.734784 16.5 0.48043 16.6054 0.292893 16.7929C0.105357 16.9804 0 17.2348 0 17.5C0 17.7652 0.105357 18.0196 0.292893 18.2071C0.48043 18.3946 0.734784 18.5 1 18.5H23C23.2652 18.5 23.5196 18.3946 23.7071 18.2071C23.8946 18.0196 24 17.7652 24 17.5C24 17.2348 23.8946 16.9804 23.7071 16.7929C23.5196 16.6054 23.2652 16.5 23 16.5Z", fill: "white" }) }), _jsx("div", { className: "logo" }), _jsx(Button, { type: "outlined", size: "medium", label: "Login" })] }) }));
+    const [isMenuOpen, setIsMenuOpen] = useState(false);
+    const toggleMenu = () => {
+        setIsMenuOpen(!isMenuOpen);
+    };
+    return (_jsxs("header", { className: clsx('header', className, { 'menu-open': isMenuOpen }), children: [_jsxs("div", { className: "header-content", children: [_jsx("svg", { onClick: toggleMenu, width: "24", height: "19", viewBox: "0 0 24 19", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: { cursor: 'pointer' }, children: _jsx("path", { d: "M24 9.5C24 9.76522 23.8946 10.0196 23.7071 10.2071C23.5196 10.3946 23.2652 10.5 23 10.5H1C0.734784 10.5 0.48043 10.3946 0.292893 10.2071C0.105357 10.0196 0 9.76522 0 9.5C0 9.23478 0.105357 8.98043 0.292893 8.79289C0.48043 8.60536 0.734784 8.5 1 8.5H23C23.2652 8.5 23.5196 8.60536 23.7071 8.79289C23.8946 8.98043 24 9.23478 24 9.5ZM1 2.5H23C23.2652 2.5 23.5196 2.39464 23.7071 2.20711C23.8946 2.01957 24 1.76522 24 1.5C24 1.23478 23.8946 0.98043 23.7071 0.792893C23.5196 0.605357 23.2652 0.5 23 0.5H1C0.734784 0.5 0.48043 0.605357 0.292893 0.792893C0.105357 0.98043 0 1.23478 0 1.5C0 1.76522 0.105357 2.01957 0.292893 2.20711C0.48043 2.39464 0.734784 2.5 1 2.5ZM23 16.5H1C0.734784 16.5 0.48043 16.6054 0.292893 16.7929C0.105357 16.9804 0 17.2348 0 17.5C0 17.7652 0.105357 18.0196 0.292893 18.2071C0.48043 18.3946 0.734784 18.5 1 18.5H23C23.2652 18.5 23.5196 18.3946 23.7071 18.2071C23.8946 18.0196 24 17.7652 24 17.5C24 17.2348 23.8946 16.9804 23.7071 16.7929C23.5196 16.6054 23.2652 16.5 23 16.5Z", fill: "white" }) }), _jsx("div", { className: "logo" }), _jsx(Button, { type: "outlined", size: "medium", label: "Login" })] }), _jsx("div", { className: clsx('menu', { open: isMenuOpen }), children: _jsxs("ul", { children: [_jsx("li", { children: _jsx("a", { href: "#home", children: "Home" }) }), _jsx("li", { children: _jsx("a", { href: "#about", children: "About" }) }), _jsx("li", { children: _jsx("a", { href: "#services", children: "Services" }) }), _jsx("li", { children: _jsx("a", { href: "#contact", children: "Contact" }) })] }) })] }));
 };
 //# sourceMappingURL=header.js.map

package/dist/react/header.js.map

@@ -1 +1 @@
-{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/react/header.tsx"],"names":[],"mappings":";AACA,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMrC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC7D,OAAO,CACL,iBAAQ,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,CAAC,YAC1C,eAAK,SAAS,EAAC,gBAAgB,aAC7B,cACE,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,YAElC,eACE,CAAC,EAAC,s+BAAs+B,EACx+B,IAAI,EAAC,OAAO,GACZ,GACE,EAEN,cAAK,SAAS,EAAC,MAAM,GAAG,EAExB,KAAC,MAAM,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,GAAG,IAClD,GACC,CACV,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"header.js","sourceRoot":"","sources":["../../src/react/header.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAMrC,MAAM,CAAC,MAAM,MAAM,GAA0B,CAAC,EAAE,SAAS,EAAE,EAAE,EAAE;IAC7D,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,aAAa,CAAC,CAAC,UAAU,CAAC,CAAC;IAC7B,CAAC,CAAC;IAEF,OAAO,CACL,kBAAQ,SAAS,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAE,EAAE,WAAW,EAAE,UAAU,EAAE,CAAC,aACvE,eAAK,SAAS,EAAC,gBAAgB,aAC7B,cACE,OAAO,EAAE,UAAU,EACnB,KAAK,EAAC,IAAI,EACV,MAAM,EAAC,IAAI,EACX,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,4BAA4B,EAClC,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAE5B,eACE,CAAC,EAAC,s+BAAs+B,EACx+B,IAAI,EAAC,OAAO,GACZ,GACE,EAEN,cAAK,SAAS,EAAC,MAAM,GAAG,EAExB,KAAC,MAAM,IAAC,IAAI,EAAC,UAAU,EAAC,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,OAAO,GAAG,IAClD,EAEN,cAAK,SAAS,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,IAAI,EAAE,UAAU,EAAE,CAAC,YAChD,yBACE,uBACE,YAAG,IAAI,EAAC,OAAO,qBAAS,GACrB,EACL,uBACE,YAAG,IAAI,EAAC,QAAQ,sBAAU,GACvB,EACL,uBACE,YAAG,IAAI,EAAC,WAAW,yBAAa,GAC7B,EACL,uBACE,YAAG,IAAI,EAAC,UAAU,wBAAY,GAC3B,IACF,GACD,IACC,CACV,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@knapsack/sandbox-components",
   "description": "",
-  "version": "4.67.3--canary.aa8dfe6.0",
+  "version": "4.67.3",
   "type": "module",
   "exports": {
     "./css": "./dist/css/ks-sandbox-styles.css",
@@ -37,11 +37,11 @@
     "vue": "^3.4.27"
   },
   "devDependencies": {
-    "@knapsack/eslint-config-starter": "4.67.3--canary.aa8dfe6.0",
-    "@knapsack/postcss-config-starter": "4.67.3--canary.aa8dfe6.0",
-    "@knapsack/prettier-config": "4.67.3--canary.aa8dfe6.0",
-    "@knapsack/sandbox-tokens": "4.67.3--canary.aa8dfe6.0",
-    "@knapsack/typescript-config-starter": "4.67.3--canary.aa8dfe6.0",
+    "@knapsack/eslint-config-starter": "4.67.3",
+    "@knapsack/postcss-config-starter": "4.67.3",
+    "@knapsack/prettier-config": "4.67.3",
+    "@knapsack/sandbox-tokens": "4.67.3",
+    "@knapsack/typescript-config-starter": "4.67.3",
     "@types/node": "^20.12.12",
     "@types/react": "^18.3.3",
     "eslint": "^8.57.0",
@@ -59,5 +59,5 @@
     "directory": "apps/ui/libs/sandbox-components",
     "type": "git"
   },
-  "gitHead": "aa8dfe6e9632b06e63530f66f73b236f9fd9858c"
+  "gitHead": "78feeb1a9a2b72b3572e0f684604e6cda8402743"
 }

package/src/css/header.css

@@ -1,8 +1,19 @@
 .header {
   background-color: var(--brand-color);
-  padding-block: var(--spacing-small);
-  padding-inline: var(--spacing-large);
-  width: 100vw;
+  padding: var(--spacing-small) var(--spacing-large);
+  width: 100%;
+  position: relative;
+  height: 60px;
+  z-index: 10;
+}
+
+.logo {
+  background-image: var(--brand-logo);
+  width: 100%;
+  height: 28px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: contain;
 }
 
 .header-content {
@@ -10,18 +21,47 @@
   align-items: center;
   justify-content: space-between;
   width: 100%;
+  height: 100%;
+  z-index: 15;
+  position: relative;
 }
 
-.menu-icon {
-  margin-right: var(--spacing-medium);
+.menu {
+  position: absolute;
+  top: 60px;
+  left: 0;
+  width: 100%;
+  max-height: 300px;
+  background-color: var(--brand-color);
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  padding: var(--spacing-medium) 0;
+  z-index: 5;
+  transform: translateY(-100%);
+  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
+  opacity: 0;
+  visibility: hidden;
 }
 
-.logo {
-  background-image: var(--brand-logo);
-  background-image: var(--brand-logo);
+.menu.open {
+  transform: translateY(0);
+  opacity: 1;
+  visibility: visible;
+}
+
+.menu ul {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+
+.menu li {
+  padding: var(--spacing-small) var(--spacing-large);
+}
+
+.menu li a {
+  text-decoration: none;
+  color: #FFFFFF;
+  display: block;
   width: 100%;
-  height: 28px;
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: contain;
+  font-weight: 600;
 }

package/src/react/header.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import clsx from 'clsx';
 import { Button } from './button.js';
 
@@ -7,15 +7,23 @@ export type HeaderProps = {
 };
 
 export const Header: React.FC<HeaderProps> = ({ className }) => {
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+
+  const toggleMenu = () => {
+    setIsMenuOpen(!isMenuOpen);
+  };
+
   return (
-    <header className={clsx('header', className)}>
+    <header className={clsx('header', className, { 'menu-open': isMenuOpen })}>
       <div className="header-content">
         <svg
+          onClick={toggleMenu}
           width="24"
           height="19"
           viewBox="0 0 24 19"
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
+          style={{ cursor: 'pointer' }}
         >
           <path
             d="M24 9.5C24 9.76522 23.8946 10.0196 23.7071 10.2071C23.5196 10.3946 23.2652 10.5 23 10.5H1C0.734784 10.5 0.48043 10.3946 0.292893 10.2071C0.105357 10.0196 0 9.76522 0 9.5C0 9.23478 0.105357 8.98043 0.292893 8.79289C0.48043 8.60536 0.734784 8.5 1 8.5H23C23.2652 8.5 23.5196 8.60536 23.7071 8.79289C23.8946 8.98043 24 9.23478 24 9.5ZM1 2.5H23C23.2652 2.5 23.5196 2.39464 23.7071 2.20711C23.8946 2.01957 24 1.76522 24 1.5C24 1.23478 23.8946 0.98043 23.7071 0.792893C23.5196 0.605357 23.2652 0.5 23 0.5H1C0.734784 0.5 0.48043 0.605357 0.292893 0.792893C0.105357 0.98043 0 1.23478 0 1.5C0 1.76522 0.105357 2.01957 0.292893 2.20711C0.48043 2.39464 0.734784 2.5 1 2.5ZM23 16.5H1C0.734784 16.5 0.48043 16.6054 0.292893 16.7929C0.105357 16.9804 0 17.2348 0 17.5C0 17.7652 0.105357 18.0196 0.292893 18.2071C0.48043 18.3946 0.734784 18.5 1 18.5H23C23.2652 18.5 23.5196 18.3946 23.7071 18.2071C23.8946 18.0196 24 17.7652 24 17.5C24 17.2348 23.8946 16.9804 23.7071 16.7929C23.5196 16.6054 23.2652 16.5 23 16.5Z"
@@ -27,6 +35,23 @@ export const Header: React.FC<HeaderProps> = ({ className }) => {
 
         <Button type="outlined" size="medium" label="Login" />
       </div>
+
+      <div className={clsx('menu', { open: isMenuOpen })}>
+        <ul>
+          <li>
+            <a href="#home">Home</a>
+          </li>
+          <li>
+            <a href="#about">About</a>
+          </li>
+          <li>
+            <a href="#services">Services</a>
+          </li>
+          <li>
+            <a href="#contact">Contact</a>
+          </li>
+        </ul>
+      </div>
     </header>
   );
 };