@rileybathurst/paddle 0.0.42 → 0.0.44

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "0.0.42",
+  "version": "0.0.44",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -9,10 +9,11 @@
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview",
     "start": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "color-cards": "^1.0.14",
+    "color-cards": "^1.0.15",
     "gatsby": "^5.13.6",
     "gatsby-plugin-image": "^3.13.1",
     "react": "^18.2.0",

package/src/stories/Location.stories.tsx

@@ -14,6 +14,6 @@ type Story = StoryObj<typeof meta>;
 
 export const Primary: Story = {
   args: {
-    primary: true,
+    backed: true,
   },
 };

package/src/stories/Location.tsx

@@ -4,18 +4,18 @@ import React from 'react';
 import { faker } from '@faker-js/faker';
 
 interface LocationProps {
-  primary?: boolean;
+  backed?: boolean;
   onClick?: () => void;
 }
 
 export const Location = ({
-  primary = false,
+  backed = true,
   ...props
 }: LocationProps) => {
 
   return (
     <a
-      className={`location ${primary ?? 'backed'}`}
+      className={`location ${backed ?? 'backed'}`}
       href="https://goo.gl/maps/atoK4oyJRbV3EKuK9"
       rel="noopener noreferrer"
     >

package/src/stories/Neutrals.stories.tsx

@@ -0,0 +1,19 @@
+// this is the Name.stories.tsx file
+import type { Meta, StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { Neutrals } from './Neutrals';
+
+const meta = {
+  component: Neutrals,
+  title: 'Atoms/Neutrals',
+  args: { onClick: fn() },
+} satisfies Meta<typeof Neutrals>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/stories/Neutrals.tsx

@@ -0,0 +1,31 @@
+// * working on the first implementation of the color cards component
+
+// this is the Name.tsx file
+import React from 'react';
+import { ColorCards } from 'color-cards';
+
+interface NeutralsProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Neutrals = ({
+  primary = false,
+  ...props
+}: NeutralsProps) => {
+
+  return (
+    <main>
+      <h1>Neutrals</h1>
+      <ColorCards
+        color='mullen'
+        variables={['100', '200']}
+      />
+      <ColorCards
+        color='sand'
+        variables={['100', '200']}
+      />
+
+    </main>
+  );
+};

package/src/stories/Terms.md

@@ -0,0 +1,4 @@
+# Terms
+
+From Andy"
+Paddleboard is supposed to be one word….but all the programs I type in seem to autocorrect it to two words."

package/src/styles/app.css

@@ -12,4 +12,6 @@
 @import "links";
 @import "buttons";
 @import "lists";
+@import "tables";
+@import "visibility";
 @import "a11y";

package/src/styles/buttons.css

@@ -2,18 +2,19 @@
 /* #BUTTONS */
 /*------------------------------------*/
 
+/* TODO: variables */
 button,
 .button,
 .book-now {
   background: none;
-  border-radius: 0.25rem;
-  padding: 0.5rem 1rem;
-  font-size: 1rem;
+  border-radius: var(--card-radius);
+  padding: var(--kosciuszko) var(--vinson);
+  font-size: var(--vinson);
   cursor: pointer;
   margin-block-end: var(--elbrus);
-  transition: 0.5s ease;
+  transition: var(--slow);
   display: block;
-  line-height: 1.5rem;
+  line-height: var(--kilimanjaro);
   text-decoration: none;
   width: max-content;
   border: 1px solid;
@@ -32,6 +33,12 @@ button:active {
   box-shadow: var(--umbra);
 }
 
+.book-now {
+  margin-block-start: var(--kosciuszko);
+  text-align: center;
+  display: inline-block; /* same as a button */
+}
+
 /*------------------*/
 /* #MENU */
 /*------------------*/
@@ -39,3 +46,25 @@ button:active {
 menu button {
   margin: 0;
 }
+
+/*------------------------------------*/
+
+.button__double {
+  display: flex;
+  align-items: center;
+  gap: var(--denali);
+}
+
+.buttonGroup {
+  display: flex;
+  flex-flow: row wrap;
+  gap: var(--vinson);
+  margin-block-end: var(--baseline);
+}
+
+/*------------------------------------*/
+
+footer .book-now {
+  margin-block-start: 0;
+  margin-block-end: var(--baseline);
+}

package/src/styles/cards.css

@@ -1,6 +1,11 @@
 /*------------------*/
 /* #CARDS */
 /*------------------*/
+
+.deck {
+  margin-block-end: var(--aconcagua);
+}
+
 /* TODO: needs sub-grid */
 .card,
 .ticket {
@@ -36,7 +41,6 @@
   }
 
   .card__image:where(:hover, :focus) {
-    /* opacity: 0.8; */
     filter: brightness(80%);
   }
 
@@ -141,13 +145,6 @@
   }
 }
 
-.card--split {
-  flex-direction: row !important; /* TODO can I increase the specificity */
-  > * {
-    flex: 1 1 50%;
-  }
-}
-
 /*------------------*/
 /* #RETAIL LOGO */
 /*------------------*/
@@ -169,48 +166,7 @@
   }
 
   svg {
-    width: 10rem; /* guess and check */
+    width: var(--vulture); /* guess and check */
     margin-block-end: var(--kosciuszko);
   }
 }
-
-.brand__header {
-  clip-path: inset(0 -100vmax);
-
-  hr {
-    margin-block-end: var(--elbrus);
-  }
-}
-
-/*------------------*/
-/* #LOCATION DECK AND CARDS */
-/*------------------*/
-
-.home__here, /* TODO rename this to .location__multiple everywhere */
-.location__deck {
-  max-width: var(--pelican);
-  margin-inline: auto;
-  display: flex;
-  flex-flow: row wrap;
-
-  > * {
-    /* TODO: variable */
-    flex: 1 1 20rem;
-  }
-}
-
-.here__location, /* TODO rename this to .location everywhere */
-.location_card {
-  display: flex;
-  flex-flow: column;
-  gap: var(--vinson);
-  justify-content: space-between;
-  margin-block-end: var(--kilimanjaro);
-  padding-block-end: var(--kilimanjaro);
-  border-block-end: 1px solid;
-  padding: var(--kosciuszko);
-  border-radius: var(--kosciuszko);
-  font-weight: 600;
-}
-
-/* can location cards be laid out horizontally but I think they never have a background if they are so maybe they are a seperate thing thing thats not a card? */

package/src/styles/color.css

@@ -19,3 +19,11 @@ body {
 .top-bar {
   clip-path: inset(0 -100vmax);
 }
+
+/*------------------------------------*/
+/* #LOCATION */
+/*------------------------------------*/
+
+.location.true {
+  background-color: antiquewhite;
+}

package/src/styles/layout.css

@@ -14,7 +14,8 @@ body {
 .location,
 header,
 main,
-footer {
+footer,
+.deck {
   margin-inline: auto;
   padding-inline: var(--kosciuszko);
   width: calc(100% - var(--kosciuszko) * 2);
@@ -35,7 +36,7 @@ footer {
 
 .condor,
 .location {
-  max-width: var(--condor);
+  max-width: var(--condor), calc(100vw - var(--denali));
   flex-basis: var(--condor);
 }
 
@@ -44,14 +45,16 @@ footer {
   flex-basis: var(--pelican);
 }
 
-.albatross {
+.albatross,
+.deck {
   max-width: var(--albatross);
   flex-basis: var(--albatross);
 }
 
 /*------------------------------------*/
 
-.wrap {
+.wrap,
+.deck {
   display: flex;
   flex-flow: row wrap;
   gap: clamp(var(--kosciuszko), 1.667vw, var(--denali));
@@ -65,7 +68,8 @@ footer {
 }
 
 .pelican.wrap > *,
-.albatross.wrap > * {
+.albatross.wrap > *,
+.deck > * {
   max-width: none;
   margin-inline: 0;
   padding-inline: 0;
@@ -75,7 +79,8 @@ footer {
   flex: 1 1 calc(var(--pelican) / 2 - 1rem);
 }
 
-.albatross.wrap > * {
+.albatross.wrap > *,
+.deck > * {
   flex: 1 1 calc(var(--albatross) / 2 - 1rem);
 }
 
@@ -84,7 +89,8 @@ footer {
 /*------------------------------------*/
 
 /* this isnt a direct nested its always down another layer */
-.albatross .pelican {
+.albatross .pelican,
+.deck * {
   /* ? margin-inline: 0; ? should this be centered */
   width: 100%; /* resets the padding */
   padding-inline: 0;
@@ -125,7 +131,11 @@ header {
 /* #TOP BAR */
 /*------------------*/
 
+/* this flashes in on every load which is bad but its currently out of use */
 .top-bar {
+  transition: var(--slow);
+  height: 0;
+  opacity: 0;
   display: flex;
   justify-content: center;
   padding-block-start: 0.25rem;
@@ -156,20 +166,28 @@ header {
 }
 
 .location {
+  max-width: var(--condor);
   display: flex;
-  flex-flow: row;
+  flex-flow: row wrap;
   align-items: center;
-  gap: var(--elbrus);
-  padding: var(--elbrus);
+  gap: clamp(var(--kosciuszko), 1.67vw, var(--elbrus));
+  padding: clamp(var(--kosciuszko), 1.67vw, var(--elbrus));
   border-radius: var(--card-radius);
 
   > * {
-    flex: 7.5 1; /* guess and check to get the parking on one row in the footer */
+    /* guess and check to get the parking on one row in the footer */
+    flex: 7.5 1 var(--vulture);
   }
 
   > svg,
   .svg {
     flex: 1 1 max-content;
+    min-width: var(--everest);
+    min-height: var(--everest);
+  }
+
+  p {
+    margin-block-end: 0; /* reset to the gap */
   }
 }
 

package/src/styles/links.css

@@ -21,3 +21,20 @@ a:where(:hover, :focus) {
 a svg {
   transition: var(--fade);
 }
+
+/*------------------------------------*/
+
+/* TODO: a lot of this is smaller than the variables test it all */
+.link__backed {
+  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;
+  }
+}

package/src/styles/lists.css

@@ -1,3 +1,28 @@
+/*------------------*/
+/* #LISTS */
+/*------------------*/
+
+/*------------------*/
+/* #DEFAULTS */
+/*------------------*/
+
+ul {
+  padding-inline-start: 0.75rem;
+  margin: 0; /* reset */
+
+  li {
+    display: block;
+    margin-block-end: var(--baseline);
+  }
+}
+
+ol {
+  li {
+    display: inline flow-root list-item;
+    margin-block-end: var(--baseline);
+  }
+}
+
 /*------------------*/
 /* #TESTIMONIALS */
 /*------------------*/
@@ -15,3 +40,193 @@
     content: "“";
   }
 }
+
+/*------------------*/
+/* #BREADCRUMBS */
+/*------------------*/
+
+/* https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/examples/breadcrumb/ */
+.breadcrumbs {
+  max-width: var(--stork);
+  margin-inline: auto; /* overwrite nav */
+  padding-inline: var(--kosciuszko); /* overwrite nav */
+
+  ol {
+    list-style: none;
+    display: flex;
+    flex-flow: row wrap;
+    /* gap: 1rem; */
+    max-width: var(--pelican);
+    margin-inline: auto;
+    padding-block-start: 1.5rem;
+    margin-block-end: 0;
+    /* padding-block-end: 1.5rem; */
+    /* padding-inline: calc(var(--baseline) / 2); deprecated but still checking */
+    padding-inline: 0;
+    text-transform: capitalize;
+
+    a {
+      display: inline;
+    }
+  }
+}
+
+.react-aria-Breadcrumbs {
+  max-width: var(--pelican);
+  margin-inline: auto; /* overwrite nav */
+  padding-inline: 0.75rem; /* overwrite nav */
+  list-style: none;
+  display: flex;
+  flex-flow: row wrap;
+  margin-inline: auto;
+  padding-block-start: 1.5rem;
+  margin-block-end: 0;
+  text-transform: capitalize;
+
+  li {
+    display: inline;
+
+    li:not(:last-child)::after {
+      margin-inline: var(--vinson);
+      content: ">";
+    }
+  }
+}
+
+.tour__minimum {
+  display: flex;
+  flex-flow: row wrap;
+  gap: 1rem;
+  align-items: center;
+}
+
+/*------------------*/
+/* #FEATURES */
+/*------------------*/
+
+.features {
+  text-transform: uppercase;
+  font-size: 1rem;
+
+  ul {
+    list-style: none;
+    padding-inline-start: 0;
+
+    li {
+      height: 2lh;
+      margin-block-end: 1lh;
+
+      @supports not (margin: 1lh) {
+        height: 2.5rem;
+        margin-block-end: 1.25rem;
+      }
+    }
+
+    li:last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+/*------------------------------------*/
+/* #FAQ */
+/*------------------------------------*/
+/* TODO: a lot of this is repeated with other typography */
+
+.faq {
+  padding-inline-start: 0; /* reset */
+
+  li {
+    list-style: none;
+    border-bottom: 1px solid var(--tin-soldier);
+    margin-block-end: 1.5rem;
+  }
+
+  li:last-child {
+    border-bottom: none;
+  }
+
+  /* question */
+  h2 {
+    font-size: 1.25rem;
+    line-height: 1.875rem;
+    margin-block-end: 0.625rem;
+  }
+
+  /* answer */
+  h3 {
+    font-size: 1rem;
+    line-height: 1.25;
+    font-weight: normal;
+    margin-block-end: 0.625rem;
+  }
+}
+
+/*------------------*/
+/* #BRANDS */
+/*------------------*/
+
+.brand_list {
+  list-style: none;
+  padding: 0;
+  padding-inline: 0.75rem;
+  display: grid;
+
+  /* grid-template-columns: 1fr 1fr; */
+  /* this doesnt work on the home page as its wider so it can fill its won space */
+  /* grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); guess and check */
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(8rem, 1fr)
+  ); /* guess and check */
+  gap: 1rem;
+
+  @media (min-width: 30rem) {
+    /* grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); */
+    grid-template-columns: repeat(
+      auto-fill,
+      minmax(12rem, 1fr)
+    ); /* guess and check this seems best on front page */
+  }
+
+  > li {
+    flex: 1 1 10rem;
+    border-radius: 0.25rem;
+    margin-block-end: 0;
+
+    > a {
+      display: flex;
+      flex-direction: column;
+      place-items: stretch;
+      transition: var(--fade);
+      text-align: center;
+      width: 100%;
+      height: 100%; /* this goes waaaay to big .. but it needs something */
+      align-self: end;
+      text-decoration: none;
+      text-transform: uppercase;
+      font-family: var(--heading_font);
+      font-weight: 400;
+      display: grid;
+
+      /* I know it breaks the inception rule its very short */
+      > p {
+        align-self: end;
+      }
+    }
+
+    svg {
+      transition: var(--fade);
+      margin: var(--baseline);
+      min-width: 3rem; /* guess and check */
+
+      @media (min-width: 20rem) {
+        min-width: 4rem; /* guess and check */
+      }
+
+      @media (min-width: 30rem) {
+        min-width: 8rem; /* guess and check */
+      }
+    }
+  }
+}

package/src/styles/media.css

@@ -5,6 +5,7 @@
 svg {
   width: 100%;
   height: 100%;
+  min-width: 2rem; /* safari needs default mins */
   max-width: clamp(var(--kilimanjaro), 5vw, 5rem);
   max-height: clamp(var(--kilimanjaro), 5vw, 5rem);
 }
@@ -16,7 +17,7 @@ svg {
 .logo-container {
   margin: 0 auto;
   display: flex;
-  /* gap: 1rem; // dont run a gap as the sr-only h1 uses it */
+  /* gap: dont run a gap as the sr-only h1 uses it */
   justify-content: center;
   clip-path: inset(0 -100vmax);
   z-index: var(--understory);
@@ -137,3 +138,25 @@ svg {
     fill: #34e0a1;
   }
 }
+
+/*------------------*/
+/* #IMAGE */
+/*------------------*/
+
+.img__wrapped {
+  border-radius: 0.25rem;
+  box-shadow: var(--penumbra);
+}
+
+.crop {
+  clip-path: polygon(0 0, 100% 0, 0 100%);
+}
+
+/*------------------*/
+/* #MAP */
+/*------------------*/
+
+.map-svg {
+  max-width: 100%;
+  max-height: 100%;
+}

package/src/styles/tables.css

@@ -0,0 +1,124 @@
+/*------------------*/
+/* #PRICING CHART */
+/*------------------*/
+
+.pricing-chart {
+  display: flex;
+  text-align: center;
+
+  /* columns */
+  > * {
+    display: flex;
+    flex: 1 1 10rem;
+    flex-direction: column;
+
+    /* rows */
+    > * {
+      > * {
+        margin: 0;
+      }
+    }
+
+    /* first row */
+    > *:first-child {
+      margin: 0;
+      border-top: none;
+    }
+  }
+
+  h2,
+  h4,
+  p {
+    font-size: clamp(0.75rem, 1.25vw, 1.5rem);
+    line-height: clamp(1rem, 1.5vw, 2rem);
+    padding: clamp(0.5rem, 1vw, 1rem);
+  }
+
+  h4 {
+    margin: 0.25px;
+  }
+
+  p {
+    font-size: 0.75rem;
+    margin: 0.25px;
+  }
+
+  h4 span {
+    display: flex;
+    flex-direction: column;
+    white-space: nowrap;
+  }
+
+  p span {
+    white-space: nowrap;
+  }
+
+  *:last-child > * {
+    border-right: none;
+  }
+}
+
+.charts {
+  .pricing-chart:not(:last-child) {
+    margin-block-end: 0;
+  }
+
+  .pricing-chart:last-child {
+    margin-block-end: 1.5rem;
+
+    p {
+      border-block-end: none;
+    }
+
+    p:last-child {
+      border-inline-end: none;
+    }
+  }
+}
+
+/*------------------*/
+/* #RENTAL CHART */
+/*------------------*/
+
+.rental-chart {
+  display: grid;
+  text-align: center;
+  margin-block-end: 1.5rem;
+
+  .row {
+    display: grid;
+    gap: 0;
+    margin: 0;
+    grid-template-columns: repeat(auto-fit, minmax(4rem, 1fr));
+
+    /* box */
+    > * {
+      padding: clamp(0.5rem, 1vw, 1rem);
+    }
+
+    > *:last-child {
+      border-inline-end: none;
+    }
+  }
+
+  .row:last-child {
+    > * {
+      border-block-end: none;
+    }
+  }
+
+  .row-header {
+    font-weight: bold;
+  }
+
+  h4 {
+    margin: 0.25px;
+    font-size: clamp(0.75rem, 1.25vw, 1.5rem);
+    line-height: clamp(1rem, 1.5vw, 2rem);
+  }
+
+  p {
+    font-size: 0.75rem;
+    margin: 0.25px;
+  }
+}

package/src/styles/typography.css

@@ -1,5 +1,6 @@
 /*------------------------------------*\
-  #Typography
+  #TYPOGRAPHY
+  /* TODO: Im not happy with this */
 /*------------------------------------*/
 
 body {
@@ -30,7 +31,8 @@ h6 {
   font-weight: 400;
 }
 
-h1 {
+h1,
+.everest {
   margin-top: 0; /* browser reset */
   font-size: 3rem; /* 48px */
   line-height: 3.75rem; /* 60px */
@@ -134,8 +136,7 @@ p {
 }
 
 .two-small-lines {
-  margin-bottom: 0.5rem; /* 8px */
-  /* two lines 40px */
+  margin-bottom: 0.5rem; /* TODO: */
 }
 
 /*------------------*/
@@ -188,7 +189,7 @@ hr.no {
 hgroup {
   display: flex;
   flex-flow: row wrap;
-  column-gap: 1ch;
+  column-gap: 1ch; /* TODO: */
   align-items: baseline;
 }
 
@@ -205,7 +206,7 @@ hgroup {
 
 .brow {
   order: 1;
-  margin-block-end: 1rem;
+  margin-block-end: var(--vinson);
 }
 
 .supra {
@@ -222,8 +223,25 @@ hgroup {
 }
 
 select {
-  font-size: 1rem;
+  font-size: var(--vinson);
   font-family: var(--body_font);
   margin-block-end: var(--elbrus);
   margin-block-end: 0;
+  /* A reset of styles, including removing the default dropdown arrow */
+  appearance: none;
+  /* Additional resets for further consistency */
+  background-color: transparent;
+  border: none;
+  padding: 0 var(--vinson) 0 0;
+  margin: 0;
+  width: 100%;
+  cursor: inherit;
+  line-height: inherit;
+}
+
+/*------------------*/
+
+/* fixes a bug with new lines */
+.react-markdown {
+  white-space: pre-wrap;
 }

package/src/styles/visibility.css

@@ -0,0 +1,44 @@
+/*------------------*/
+/* #VISIBILITY */
+/*------------------*/
+
+.pricing-chart__false {
+  display: none;
+}
+
+.menu__large {
+  padding-inline: var(--baseline);
+
+  @media (max-width: 40rem) {
+    display: none;
+  }
+}
+
+@media (min-width: 40rem) {
+  .menu__small {
+    display: none;
+  }
+}
+
+.possibly-empty:empty {
+  display: none;
+}
+
+/* used in the compare tables */
+.show-below__vulture {
+  @media (min-width: 30rem) {
+    display: none;
+  }
+}
+
+.no-below-vulture {
+  @media (max-width: 30rem) {
+    display: none;
+  }
+}
+
+.only-below-vulture {
+  @media (min-width: 30rem) {
+    display: none;
+  }
+}