@rileybathurst/paddle 1.9.26 → 1.9.27

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.26",
+  "version": "1.9.27",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",
@@ -11,7 +11,8 @@
     "preview": "vite preview",
     "storybook": "tsc --noEmit && stay-gold && storybook dev -p 6006",
     "build-storybook": "storybook build",
-    "release": "npm version patch && npm login && npm publish"
+    "release": "npm version patch && npm login && npm publish",
+    "stay-gold": "stay-gold"
   },
   "dependencies": {
     "color-cards": "^1.0.18",

package/src/index.tsx

@@ -4,6 +4,7 @@ export * from "./paddle-time";
 export * from "./paddle-remainder";
 export * from "./paddle-format-phone-number";
 export * from "./paddle-featured-sort";
+export * from "./paddle-menu";
 
 // Molecules
 export * from "./paddle-composition";

package/src/paddle-menu.tsx

@@ -0,0 +1,80 @@
+import React, { useEffect, useId, useRef, useState } from "react";
+import { Link } from "gatsby"
+import { PaddleBookNow } from "./paddle-book-now";
+import type { PaddleBookNowTypes } from "./types/paddle-book-now-types";
+
+// ? Can this be kept here or does it need to be seperate from the component?
+type PaddleMenuTypes = PaddleBookNowTypes & {
+  menu_items: {
+    href: string;
+    label: string;
+  }[];
+};
+export const PaddleMenu = ({ menu_items, peek_base, strapiBranchName }: PaddleMenuTypes) => {
+
+  const [isMenuOpen, setIsMenuOpen] = useState(false);
+  const menuId = useId();
+  const menuButtonRef = useRef<HTMLButtonElement>(null);
+
+  useEffect(() => {
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        setIsMenuOpen(false);
+        menuButtonRef.current?.focus();
+      }
+    };
+
+    window.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+    };
+  }, []);
+
+  const closeMenu = () => {
+    setIsMenuOpen(false);
+  };
+
+  return (
+    <nav className="nav" aria-label="Main navigation">
+      <button
+        ref={menuButtonRef}
+        className="menu-toggle"
+        type="button"
+        aria-expanded={isMenuOpen}
+        aria-controls={menuId}
+        aria-label={isMenuOpen ? "Close main menu" : "Open main menu"}
+        onClick={() => {
+          setIsMenuOpen((currentlyOpen) => !currentlyOpen);
+        }}
+      >
+        Menu
+      </button>
+
+      <ul
+        id={menuId}
+        className={`menu-list ${isMenuOpen ? "is-open" : ""}`}
+        onClick={(event) => {
+          if (event.target instanceof HTMLAnchorElement) {
+            closeMenu();
+          }
+        }}
+      >
+        {menu_items.map((item) => (
+          <li key={item.href}>
+            {/* // * using aria components for storybook */}
+            <Link to={item.href}>
+              {item.label}
+            </Link>
+          </li>
+        ))}
+        <li>
+          <PaddleBookNow
+            peek_base={peek_base}
+            strapiBranchName={strapiBranchName}
+          />
+        </li>
+      </ul>
+    </nav>
+  );
+};

package/src/styles/app.css

@@ -10,7 +10,6 @@
 @import "cards";
 @import "media";
 @import "color";
-@import "panels";
 @import "links";
 @import "buttons";
 @import "lists";

package/src/styles/buttons.css

@@ -99,8 +99,10 @@ button:active {
 /*------------------------------------*/
 
 .tahoe-city {
+
   button,
-  .button, .book-now {
+  .button,
+  .book-now {
     background-color: var(--tanager-200);
     border-color: var(--tanager-100);
     color: white;
@@ -111,9 +113,9 @@ button:active {
   .book-now:hover,
   .button__hover {
     @media (prefers-color-scheme: light) {
-          background-color: var(--tanager-300);
-    border-color: var(--tanager-200);
-    color: var(--neutral-200);
+      background-color: var(--tanager-300);
+      border-color: var(--tanager-200);
+      color: var(--neutral-200);
     }
   }
 
@@ -123,8 +125,8 @@ button:active {
   .button__active {
     @media (prefers-color-scheme: light) {
       background-color: var(--tanager-400);
-    border-color: var(--tanager-300);
-    color: var(--neutral-300);
+      border-color: var(--tanager-300);
+      color: var(--neutral-300);
     }
   }
 }
@@ -134,12 +136,12 @@ button:active {
 /*------------------------------------*/
 
 .south-tahoe {
+
   button,
   .button,
   select {
     background-color: var(--lake-200);
-    border-color: var(--lake-100);
-    color: var(--cloud-color);
+    border-color: var(--lake-300);
   }
 
   @media (prefers-color-scheme: dark) {
@@ -153,20 +155,19 @@ button:active {
   }
 
   button:hover,
-  .button__hover,
   .button:hover,
+  .button__hover,
   select:hover {
-    background-color: var(--lake-400);
+    background-color: var(--lake-300);
     border-color: var(--lake-400);
-    color: var(--lake-700);
   }
 
-  .button__active select:active {
+  button:active,
+  .button:active,
+  select:active,
+  .button__active {
     background-color: var(--lake-400);
     border-color: var(--lake-500);
-    /* this goes passed the 400 / 500 dark light split Im not sure if I want to change it */
-    /* maybe it needs a very occasional 450 */
-    color: var(--lake-800);
   }
 
   .book-now {
@@ -227,4 +228,4 @@ menu button {
 footer .book-now {
   margin-block-start: 0;
   margin-block-end: var(--baseline);
-}
+}

package/src/styles/color.css

@@ -75,17 +75,23 @@ hr {
 
 .panel {
   background-color: var(--neutral-200);
+  box-shadow: 0 0 0 100vmax var(--neutral-200);
+  clip-path: inset(0 -100vmax);
+
 
   @media (prefers-color-scheme: dark) {
     background-color: var(--neutral-700);
+    box-shadow: 0 0 0 100vmax var(--neutral-700);
   }
 }
 
 .tahoe-city .panel {
-  background-color: var(--sand-200);
+  background-color: var(--sand-300);
+  box-shadow: 0 0 0 100vmax var(--sand-300);
 
   @media (prefers-color-scheme: dark) {
     background-color: var(--lake-700);
+    box-shadow: 0 0 0 100vmax var(--lake-700);
   }
 }
 

package/src/styles/links.css

@@ -40,49 +40,3 @@ a:where(:hover, :focus) {
 a svg {
   transition: var(--fade);
 }
-
-/*------------------*/
-/* #MENU LIST */
-/*------------------*/
-
-.menu-list {
-  padding: 0;
-}
-
-/* TODO: v1.2 a lot of this is smaller than the variables test it all */
-.menu-list a:not(.button) {
-  padding: 0.25rem;
-  border-radius: 0.25rem;
-  display: inline-block;
-  border: 1px solid transparent;
-  transition: var(--slow);
-  text-decoration: none;
-
-  @media (min-width: 40rem) {
-    padding: 0.5rem;
-    border-radius: 0.5rem;
-  }
-}
-
-.south-tahoe {
-  /* ? is *:not expensive? */
-  /* ? I guess this is brands and logo seems I could do this a smarter way */
-  *:not(.social) > a {
-    svg {
-      fill: var(--lake-600);
-      transition: 0.2s ease;
-
-      @media (prefers-color-scheme: dark) {
-        fill: var(--lake-400);
-      }
-    }
-
-    a svg:where(:hover, :focus) {
-      fill: var(--lake-300);
-    }
-
-    a.hover svg {
-      fill: var(--lake-300);
-    }
-  }
-}

package/src/styles/lists.css

@@ -64,7 +64,7 @@ ol {
   }
 }
 
-.tour__minimum {
+.flex-row-wrap {
   display: flex;
   flex-flow: row wrap;
   gap: var(--vinson);

package/src/styles/nav.css

@@ -2,128 +2,95 @@
 /* #NAV */
 /*------------------------------------*/
 
-/* TODO: variables */
-
 header {
   z-index: var(--floor);
   position: relative;
 }
 
-.menu__small-button {
-  margin-block-end: 0;
-  transform: translate3D(0, 0, 0); /* I need this to hide things */
-  line-height: 1.5;
-  height: var(--denali);
-  overflow: hidden;
-  z-index: var(--floor);
-  position: relative;
-  /* width: calc(100% - 1rem); */
-  width: 100%;
+.nav {
   margin-inline: auto;
-  box-shadow: var(--penumbra);
-  border: none;
-  /* Book now colors */
-  background-color: var(--neutral-800);
-  color: var(--neutral-300);
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--neutral-300);
-    color: var(--neutral-800);
-  }
+  max-width: calc(100% - var(--denali));
+  padding-block-end: var(--elbrus);
+  
 }
 
-.spinning-button {
-  position: fixed; /* I never like these things but it's needed here */
-  height: var(--vinson);
-  line-height: 2;
-  transition: 2s ease;
-  margin-block-start: -1rem; /* I dont know why I have to add this something about defaults probably */
+.menu-toggle {
+  width: 100%;
+  margin: 0;
+  border: 1px solid var(--neutral-600);
+  border-radius: var(--kosciuszko);
+  background-color: var(--neutral-700);
+  color: var(--neutral-100);
+  padding: 0.75rem 1rem;
+  line-height: 1.2;
 }
 
-nav {
-  margin: var(--kilimanjaro);
-  margin-block-start: 0; /* testing slide menu */
-  transition: 2s ease;
-  padding-inline-start: var(--kilimanjaro);
-
-  @media (min-width: 40rem) {
-    max-width: var(--pelican);
-    margin: 0 auto;
-  }
-
-  ul {
-    display: flex;
-    flex-flow: row wrap;
-    justify-content: space-between;
-    margin-block: 0; /* testing slide menu */
-    padding-block-start: calc(var(--elbrus) / 2); /* 1.25/2= 0.625 */
-    /* TODO: check if this can be kosciuszko */
-    list-style: none;
-    padding-inline-start: 0;
-    align-items: baseline;
-
-    li {
-      margin-block-end: 0;
-    }
-  }
+.menu-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kilimanjaro);
+  align-items: stretch;
+  max-height: 0;
+  margin-block: 0;
+  overflow: hidden;
+  opacity: 0;
+  transform: translateY(-0.75rem);
+  visibility: hidden;
+  pointer-events: none;
+  transition: var(--fade), visibility 0s linear 320ms;
+  padding: 0;
+  list-style: none;
 }
 
-.menu__small {
+.menu-list.is-open {
+  max-height: max-content;
+  margin-block-start: var(--kosciuszko);
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+  pointer-events: auto;
   transition: var(--fade);
+}
+
+/* TODO: header only has panel color at small size */
+
+/*------------------------------------*/
+/* #MIN WIDTH */
+/*------------------------------------*/
 
-  button {
+@media (min-width: 40rem) {
+  .nav {
     display: flex;
-    align-items: center;
+    align-items: baseline;
     justify-content: center;
-    border-radius: 0;
+    padding-block-end: 0;
   }
 
-  nav {
-    padding-inline-start: 0;
+  .menu-toggle {
+    display: none;
   }
 
-  ul {
-    flex-direction: column;
-    gap: var(--vinson);
-    z-index: var(--floor);
-    position: relative;
-    /* v1.2 keep this untill i know why I used a custom */
-    /* background-color: hsl(25, 37%, 87.5%); ? why is this custom */
-    /* box-shadow: 0 0 0 100vmax hsl(25, 37%, 87.5%); ? why is this custom */
-    background-color: var(--neutral-300);
-    box-shadow: 0 0 0 100vmax var(--neutral-300);
-    clip-path: inset(0 -100vmax);
-
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--neutral-700);
-      box-shadow: 0 0 0 100vmax var(--neutral-700);
-    }
-
-    li a {
-      padding-inline: calc(var(--elbrus) / 2);
-      padding-block: calc(var(--elbrus) / 4);
-      text-decoration: underline;
-    }
-
-    li:first-child {
-      margin-block-start: 0;
-    }
-
-    li:last-child {
-      margin-block-end: var(--kilimanjaro);
-    }
-
-    .book-now {
-      margin: 0;
-    }
+  .menu-list {
+    display: flex;
+    flex-flow: row wrap;
+    align-items: stretch;
+    justify-content: flex-start;
+    gap: var(--kilimanjaro);
+    max-height: none;
+    overflow: visible;
+    opacity: 1;
+    transform: none;
+    visibility: visible;
+    pointer-events: auto;
+    transition: none;
+    margin-block: 0;
   }
 }
 
-.tahoe-city .menu__small ul {
-  /* * reverts to clean dark scheme */
-  @media (prefers-color-scheme: light) {
-    background-color: var(--sand-100);
-    box-shadow: 0 0 0 100vmax var(--sand-100);
-    clip-path: inset(0 -100vmax);
+@media (prefers-color-scheme: dark) {
+  .menu-toggle {
+    background-color: var(--neutral-200);
+    color: var(--neutral-800);
+    border-color: var(--neutral-300);
   }
-}
+}

package/src/styles/variables.css

@@ -154,46 +154,8 @@
   /*------------------*/
   /* #TRANSITIONS */
   /*------------------*/
-  --easing: cubic-bezier(0.5, 0, 0.5, 1);
-  --fade: 0.2s var(--easing);
-  --slow: 0.5s var(--easing);
-}
-
-/* * this is specifically outside of :root */
-/*------------------------------------*/
-/* #PANELS */
-/*------------------------------------*/
-
-/* .panel-horizon
-.panel-surface
-.panel-breeze
-.panel-cloud
-.panel-storm
-.panel-summit
-.panel-aurora
-.panel-cosmos */
-
-.south-tahoe {
-  /* Panels are used to group content and provide visual separation */
-  /* * I'm not sure this is quite right but working on ideas */
-  /* .horizon { base level } */
-  /* Panels are used to group content and provide visual separation */
-  /* * I'm not sure this is quite right but working on ideas */
-  /* .horizon { base level } */
-
-  /* .cloud { floating, elevated content } */
-  --cloud-background-color: var(--lake-100);
-  --cloud-color: var(--lake-600);
-  --cloud-border-color: var(--lake-300);
-
-  --cloud-dark-background-color: var(--lake-800);
-  --cloud-dark-color: var(--lake-200);
-
-  /* .aurora { special, highlighted areas } */
-  /* --aurora-background-color: var(--neutral-100); */
-  --aurora-background-color: white;
-  --aurora-color: var(--neutral-600);
-
-  --aurora-dark-background-color: black;
-  --aurora-dark-color: var(--neutral-200);
-}
+  --fade: max-height 320ms ease, opacity 220ms ease,
+    transform 320ms ease, margin-block-start 320ms ease;
+    
+  --slow: 0.5s ease;
+}

package/src/styles/visibility.css

@@ -2,20 +2,6 @@
 /* #VISIBILITY */
 /*------------------*/
 
-.menu__large {
-  padding-inline: var(--elbrus);
-
-  @media (max-width: 40rem) {
-    display: none;
-  }
-}
-
-@media (min-width: 40rem) {
-  .menu__small {
-    display: none;
-  }
-}
-
 .possibly-empty:empty {
   display: none;
 }

package/src/styles/panels.css

@@ -1,103 +0,0 @@
-/*------------------------------------*/
-/* #PANELS */
-/*------------------------------------*/
-
-/* Panels are used to group content and provide visual separation */
-/* .horizon { base level } */
-/* .cloud { floating, elevated content } */
-/* .aurora { special, highlighted areas } */
-
-.cloud {
-  background-color: var(--neutral-200);
-  box-shadow: 0 0 0 100vmax var(--neutral-200);
-  clip-path: inset(0 -100vmax);
-
-  @media (prefers-color-scheme: dark) {
-    background-color: var(--neutral-700);
-    box-shadow: 0 0 0 100vmax var(--neutral-700);
-    color: var(--neutral-200);
-  }
-
-  /* * additional safety step */
-  @media (prefers-color-scheme: light) {
-    button,
-    .button {
-      background-color: var(--neutral-100);
-      border-color: white;
-    }
-  }
-
-  /* * fixes color bleed check the tours page */
-  > *:last-child {
-    margin-block-end: 0;
-  }
-
-  .ticket {
-    background-color: var(--neutral-100);
-
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--neutral-800);
-    }
-  }
-}
-
-.aurora,
-.react-aria-Breadcrumbs {
-  background-color: white;
-  box-shadow: 0 0 0 100vmax white;
-  clip-path: inset(0 -100vmax);
-
-  @media (prefers-color-scheme: dark) {
-    background-color: black;
-    box-shadow: 0 0 0 100vmax black;
-  }
-}
-
-.tahoe-city {
-  .cloud {
-    background-color: var(--sand-100);
-  }
-}
-
-.south-tahoe {
-  .cloud {
-    background-color: var(--cloud-background-color);
-    box-shadow: 0 0 0 100vmax var(--cloud-background-color);
-    clip-path: inset(0 -100vmax);
-    color: var(--cloud-color);
-
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--cloud-dark-background-color);
-      box-shadow: 0 0 0 100vmax var(--cloud-dark-background-color);
-      color: var(--cloud-dark-color);
-    }
-
-    a:not(button):not(.button):not(.book-now) {
-      @media (prefers-color-scheme: dark) {
-        color: var(--lake-400);
-      }
-    }
-
-    button,
-    .button {
-      background-color: var(--aurora-background-color);
-
-      @media (prefers-color-scheme: dark) {
-        background-color: var(--aurora-dark-background-color);
-      }
-    }
-  }
-
-  .aurora {
-    background-color: var(--aurora-background-color);
-    box-shadow: 0 0 0 100vmax var(--aurora-background-color);
-    clip-path: inset(0 -100vmax);
-    color: var(--aurora-color);
-
-    @media (prefers-color-scheme: dark) {
-      background-color: var(--aurora-dark-background-color);
-      box-shadow: 0 0 0 100vmax var(--aurora-dark-background-color);
-      color: var(--aurora-dark-color);
-    }
-  }
-}