@rileybathurst/paddle 1.9.46 → 1.9.48

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.46",
+  "version": "1.9.48",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",

package/src/App.tsx

@@ -1,10 +1,11 @@
 // * this is the opening vite page to test functions with
+// TODO: faker
 
 import { useState } from 'react'
 import reactLogo from './assets/react.svg'
 import viteLogo from '/vite.svg'
 import { PaddlePricingChart } from './paddle-pricing-chart'
-import { PaddleCompare } from './paddle-compare'
+// import { PaddleCompare } from './paddle-compare'
 
 function App() {
   const [count, setCount] = useState(0)
@@ -96,7 +97,7 @@ function App() {
         }}
       />
 
-      <PaddleCompare
+      {/* <PaddleCompare
         peek_base="123"
         strapiBranchName="south-tahoe"
         tours={[
@@ -149,7 +150,7 @@ function App() {
             peek: "101112"
           }
         ]}
-      />
+      /> */}
     </>
   )
 }

package/src/index.tsx

@@ -20,6 +20,7 @@ export * from "./paddle-purchase";
 export * from "./paddle-pricing-chart";
 export * from "./paddle-texture-backgrounds";
 export * from "./paddle-compare";
+export * from "./paddle-card";
 
 // Organisms
 export * from "./paddle-location-deck";
@@ -44,4 +45,5 @@ export * from "./types/paddle-purchase-image-types";
 export * from "./types/paddle-brand-list-types";
 export * from "./types/paddle-book-now-types";
 export * from "./types/paddle-testimonial-types";
-export * from "./types/paddle-compare-types";
+export * from "./types/paddle-compare-types";
+export * from "./types/paddle-card-types";

package/src/paddle-card.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import { Link } from 'gatsby';
+import { PaddleBookNow } from "./paddle-book-now";
+import { GatsbyImage } from "gatsby-plugin-image";
+import type { PaddleCardTypes } from "./types/paddle-card-types";
+
+export const PaddleCard = ({ link, image, title, excerpt, paddleBookNow }: PaddleCardTypes) => {
+  return (
+    <article className='card'>
+      <Link to={link} >
+        <GatsbyImage
+          image={image.localFile.childImageSharp.gatsbyImageData}
+          alt={image.alternativeText || title}
+        />
+        <h4>{title}</h4>
+        <p>{excerpt}</p>
+      </Link>
+
+      {paddleBookNow && (
+        <PaddleBookNow
+          peek_base={paddleBookNow.peek_base}
+          strapiBranchName={paddleBookNow.strapiBranchName}
+          specificName={paddleBookNow.specificName}
+          specificLink={paddleBookNow.specificLink}
+        />
+      )}
+    </article>
+
+  );
+};

package/src/paddle-compare.tsx

@@ -60,6 +60,10 @@ const CompareDetails = ({
     timeframe: timeframe,
   });
 
+  if (sport === "sup") {
+    sport = "Paddleboard";
+  }
+
   return (
     <section>
       <select
@@ -84,7 +88,7 @@ const CompareDetails = ({
         <GatsbyImage
           image={ogimage.localFile.childImageSharp.gatsbyImageData}
           alt={ogimage.alternativeText || name}
-          className="comparesheet_image"
+          className="comparesheet_image img__wrapped"
         />
       ) : <div>&nbsp;</div>}
 
@@ -176,7 +180,7 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
     setMinimum1(selectedTour.minimum || 0);
     setPrice1(selectedTour.price || 0);
     setPeeks1(selectedTour.peek || "not set");
-    setFitness1(selectedTour.fitness || "fitness");
+    setFitness1(selectedTour.fitness || "not set");
   };
 
   const updateTour2 = (selectedName: string) => {
@@ -196,7 +200,7 @@ export const PaddleCompare = ({ tours, breadcrumb, strapiBranchName, peek_base }
     setMinimum2(selectedTour.minimum || 0);
     setPrice2(selectedTour.price || 0);
     setPeeks2(selectedTour.peek || "not set");
-    setFitness2(selectedTour.fitness || "fitness");
+    setFitness2(selectedTour.fitness || "not set");
   };
 
   return (

package/src/styles/cards.css

@@ -1,13 +1,42 @@
+/*------------------------------------*/
+/* #DECK */
+/*------------------------------------*/
+
+.card,
+.bag,
+.flight {
+  margin-block-end: var(--aconcagua);
+
+  display: grid;
+
+  /* * iPhone size breaks without this */
+  grid-template-columns: 1fr;
+
+  /* * guess and check */
+  @media (min-width: 29rem) {
+    grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
+  }
+}
+
+.card:empty,
+.bag:empty,
+.flight:empty {
+  display: none;
+}
+
 /*------------------*/
 /* #CARDS */
 /*------------------*/
 
+.card,
 .purchase,
 .ticket {
   background-color: white;
   border: 1px solid var(--neutral-200);
   border-radius:  var(--card-radius);
   padding: var(--kosciuszko);
+  width: calc(100% - 2 * var(--kosciuszko));
+  height: calc(100% - 2 * var(--kosciuszko));
 
   @media (prefers-color-scheme: light) {
     box-shadow: var(--penumbra);
@@ -19,7 +48,7 @@
   }
 }
 
-
+.card:hover,
 .purchase:hover,
 .ticket:hover {
   p {
@@ -31,6 +60,12 @@
   }
 }
 
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--kosciuszko);
+}
+
 /*------------------*/
 /* #RETAIL LOGO */
 /*------------------*/

package/src/styles/lists.css

@@ -84,22 +84,10 @@ ol {
   ul {
     list-style: none;
     padding-inline-start: 0;
-    display: flex;
-    flex-flow: row wrap;
-    gap: var(--vinson);
 
     li {
-      height: 2lh;
-      margin-block-end: 1lh;
-
-      @supports not (margin: 1lh) {
-        height: var(--aconcagua);
-        margin-block-end: var(--elbrus);
-      }
-    }
-
-    li:last-child {
-      border-bottom: none;
+      line-height: 1.5lh;
+      margin-block-end: 0; /* reset */
     }
   }
 }

package/src/styles/media.css

@@ -164,6 +164,12 @@ svg {
 .img__wrapped {
   border-radius: 0.25rem;
   box-shadow: var(--penumbra);
+
+  border: 1px solid white;
+
+  @media (prefers-color-scheme: dark) {
+    border: 1px solid black;
+  }
 }
 
 .crop {

package/src/styles/purchase.css

@@ -2,16 +2,6 @@
 /* #PURCHASE */
 /*------------------------------------*/
 
-.bag {
-  margin-block-end: var(--aconcagua);
-
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
-
-  /* TODO: clamp */
-  gap: var(--kosciuszko);
-}
-
 /* * specific type of a card */
 .purchase {
   padding: 0;
@@ -22,7 +12,6 @@
   /* needed to control nested elements */
   text-decoration: none;
   box-shadow: var(--penumbra);
-  max-width: calc(100vw - 2rem);
 
   .purchase-collage {
     display: grid;

package/src/styles/ticket.css

@@ -2,27 +2,7 @@
 /* #TICKET */
 /*------------------------------------*/
 
-.flight {
-  margin-block-end: var(--aconcagua);
-
-  display: grid;
-
-  /* * iPhone size breaks without this */
-  grid-template-columns: 1fr;
-
-  /* * guess and check */
-  @media (min-width: 29rem) {
-    grid-template-columns: repeat(auto-fill, minmax(var(--condor), 1fr));
-  }
-}
-
-.flight:empty {
-  display: none;
-}
-
 .ticket {
-  width: calc(100% - 2 * var(--kosciuszko));
-  height: calc(100% - 2 * var(--kosciuszko));
 
   img {
     width: 100%;

package/src/types/paddle-card-types.ts

@@ -0,0 +1,10 @@
+import type { PaddleGatsbyImageType } from "./paddle-gatsby-image-type";
+import type { PaddleBookNowTypes } from "./paddle-book-now-types";
+
+export type PaddleCardTypes = {
+  link: string;
+  image: PaddleGatsbyImageType;
+  title: string;
+  excerpt: string;
+  paddleBookNow?: PaddleBookNowTypes;
+}