@rileybathurst/paddle 1.9.7 → 1.9.10

package/package.json

@@ -1,16 +1,15 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "1.9.7",
+  "version": "1.9.10",
   "type": "module",
   "scripts": {
     "dev": "tsc --noEmit && stay-gold && vite",
     "dirty": "vite",
-    "build": "tsc && vite build",
+    "build": "tsc --noEmit &&  vite build",
     "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",
+    "storybook": "tsc --noEmit && stay-gold && storybook dev -p 6006",
     "build-storybook": "storybook build",
     "release": "npm version patch && npm login && npm publish"
   },
@@ -28,13 +27,13 @@
   },
   "devDependencies": {
     "@biomejs/biome": "2.0.2",
-    "@chromatic-com/storybook": "^4.0.1",
+    "@chromatic-com/storybook": "^5.0.1",
     "@faker-js/faker": "^9.8.0",
-    "@storybook/addon-a11y": "^9.1.0",
-    "@storybook/addon-docs": "^9.1.0",
-    "@storybook/addon-links": "^9.1.0",
-    "@storybook/addon-themes": "^9.1.0",
-    "@storybook/react-vite": "^9.1.0",
+    "@storybook/addon-a11y": "^10.2.16",
+    "@storybook/addon-docs": "^10.2.16",
+    "@storybook/addon-links": "^10.2.16",
+    "@storybook/addon-themes": "^10.2.16",
+    "@storybook/react-vite": "^10.2.16",
     "@types/react": "^19.1.6",
     "@types/react-dom": "^19.1.6",
     "@typescript-eslint/eslint-plugin": "^8.33.1",
@@ -43,8 +42,8 @@
     "eslint": "^9.28.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
-    "eslint-plugin-storybook": "^9.1.0",
-    "storybook": "^9.1.0",
+    "eslint-plugin-storybook": "^10.2.16",
+    "storybook": "^10.2.16",
     "typescript": "^5.8.3",
     "vite": "^6.3.5"
   },

package/src/index.tsx

@@ -8,7 +8,7 @@ export * from "./paddle-featured-sort";
 // Molecules
 export * from "./paddle-composition";
 export * from "./paddle-socials";
-export * from "./paddle-location-card";
+export * from "./paddle-location";
 export * from "./paddle-testimonials";
 export * from "./paddle-ticket";
 export * from "./paddle-sunset-tour-times";
@@ -34,8 +34,10 @@ export * from "./paddle-seo";
 
 // Types
 export * from "./types/paddle-ticket-types";
-export * from "./types/paddle-location-card-types";
+export * from "./types/paddle-location-types";
 export * from "./types/paddle-location-deck-types";
 export * from "./types/paddle-gatsby-image-type";
 export * from "./types/paddle-purchase-types";
-export * from "./types/paddle-brand-types";
+export * from "./types/paddle-brand-types";
+export * from "./types/paddle-book-now-types";
+export * from "./types/paddle-testimonial-types";

package/src/paddle-location-deck.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
-import { PaddleLocationCard } from "./paddle-location-card";
-import type { PaddleLocationCardTypes } from "./types/paddle-location-card-types";
+import { PaddleLocation } from "./paddle-location";
+import type { PaddleLocationTypes } from "./types/paddle-location-types";
 import type { PaddleLocationDeckTypes } from "./types/paddle-location-deck-types";
 
 export const PaddleLocationDeck = ({
@@ -11,8 +11,8 @@ export const PaddleLocationDeck = ({
 }: PaddleLocationDeckTypes) => {
   return (
     <section className="location-deck">
-      {nodes.map((location: PaddleLocationCardTypes) => (
-        <PaddleLocationCard
+      {nodes.map((location: PaddleLocationTypes) => (
+        <PaddleLocation
           key={location.id}
           season_start={season_start}
           season_end={season_end}

package/src/paddle-location.tsx

@@ -0,0 +1,224 @@
+import React from "react"
+import { Link } from "gatsby";
+import Markdown from "react-markdown";
+
+import HourMin from "./hour-min";
+import Phone from "./phone";
+import type { PaddleLocationTypes } from "./types/paddle-location-types";
+import SVG from 'react-inlinesvg';
+
+type SeasonTypes = {
+  season_start?: string;
+  season_end?: string;
+
+  opening_time: string;
+  closing_time: string;
+  name: string;
+  offSeasonDetails?: string;
+  weatherPermitting?: boolean;
+}
+const Season = ({
+  name,
+  season_start,
+  season_end,
+  opening_time,
+  closing_time,
+  offSeasonDetails,
+  weatherPermitting
+}: SeasonTypes) => {
+  // TODO: these need a query but thats not the most important first step
+  if (
+    name === "Free Parking Lot" ||
+    name === "Parking" ||
+    name === "Delivery"
+  ) {
+    return null;
+  }
+
+  if (season_start && season_end) {
+    const currentDay = new Date();
+    const seasonStartDate = new Date(season_start);
+    const seasonEndDate = new Date(season_end);
+
+    if (currentDay >= seasonStartDate && currentDay <= seasonEndDate) {
+      return (
+        <p>
+          {opening_time ? "Open Daily: " : null}
+          {opening_time && closing_time ? (
+            <><HourMin time={opening_time} /> - <HourMin time={closing_time} />&nbsp;</>
+          ) : null}
+          {weatherPermitting ? "Weather Permitting" : null}
+        </p>
+      );
+    }
+
+    return (
+      <div>
+        <p>We&apos;re closed for the season</p>
+
+        {currentDay < seasonStartDate ? (
+          <p>We will reopen {season_start}, Weather Permitting</p>
+        ) : null}
+
+        {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}
+      </div>
+    );
+  }
+
+  console.warn(`No season start or end date provided for ${name}. Defaulting to off season.`);
+  return (
+    <div>
+      <p>We&apos;re closed for the season</p>
+      {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}
+    </div>
+  );
+};
+
+type ContentTypes = {
+  link?: string;
+  svg: string;
+  name: string;
+
+  description: {
+    data: {
+      description: string;
+    };
+  };
+  opening_time: string;
+  closing_time: string;
+
+  season_start?: string;
+  season_end?: string;
+
+  offSeasonDetails?: string;
+  phone?: number;
+  weatherPermitting?: boolean;
+
+  streetAddress?: string;
+  addressLocality?: string;
+  addressRegion?: string;
+  postalCode?: string;
+  commonName?: string;
+}
+
+const Content = ({
+  svg,
+  name,
+  description,
+  opening_time,
+  closing_time,
+  streetAddress,
+  addressLocality,
+  addressRegion,
+  postalCode,
+  commonName,
+  weatherPermitting,
+  season_start,
+  season_end,
+  offSeasonDetails,
+  phone,
+}: ContentTypes) => {
+  return (
+    <>
+      <div className="svg">
+        <SVG src={svg} />
+      </div>
+
+      <div className="location_details">
+        <h3>{name}</h3>
+
+        {streetAddress ||
+          addressLocality ||
+          addressRegion ||
+          postalCode ||
+          commonName ? (
+          <address>
+            {commonName ? (<>{commonName},<br /></>) : null}
+            {streetAddress ? (<>{streetAddress},<br /></>) : null}
+            {addressLocality ? (<>{addressLocality},<br /></>) : null}
+            {addressRegion ? (<>{addressRegion},&nbsp;</>) : null}
+            {postalCode ? (<>{postalCode}</>) : null}
+          </address>
+        ) : null}
+
+        {opening_time && closing_time ? (
+          <Season
+            season_start={season_start}
+            season_end={season_end}
+            opening_time={opening_time}
+            closing_time={closing_time}
+            name={name}
+            offSeasonDetails={offSeasonDetails}
+            weatherPermitting={weatherPermitting}
+          />
+        ) : (
+          <div className="react-markdown">
+            <Markdown>{description.data.description}</Markdown>
+          </div>
+        )}
+
+        {phone && (
+          <Phone phone={phone} />
+        )}
+      </div>
+    </>
+  );
+};
+
+export const PaddleLocation = ({
+  svg,
+  name,
+  link,
+  description,
+  opening_time,
+  closing_time,
+  streetAddress,
+  addressLocality,
+  addressRegion,
+  postalCode,
+  commonName,
+  season_start,
+  season_end,
+  phone,
+  offSeasonDetails,
+  weatherPermitting
+}: PaddleLocationTypes) => {
+
+  const phoneDidgits = Number(phone);
+
+  const content = (
+    <Content
+      svg={svg}
+      name={name}
+      description={description}
+      opening_time={opening_time}
+      closing_time={closing_time}
+      streetAddress={streetAddress}
+      addressLocality={addressLocality}
+      addressRegion={addressRegion}
+      postalCode={postalCode}
+      commonName={commonName}
+      season_start={season_start}
+      season_end={season_end}
+      offSeasonDetails={offSeasonDetails}
+      weatherPermitting={weatherPermitting}
+      phone={phoneDidgits}
+    />
+  );
+
+  return link.includes("http") ? (
+    <a
+      href={link}
+      className="location"
+      target="_blank"
+      rel="noopener noreferrer"
+      title={name}
+    >
+      {content}
+    </a>
+  ) : (
+    <Link to={link} className="location">
+      {content}
+    </Link>
+  );
+};

package/src/paddle-purchase.tsx

@@ -4,6 +4,7 @@ import { GatsbyImage } from "gatsby-plugin-image";
 import type { PaddleGatsbyImageType } from "./types/paddle-gatsby-image-type";
 import { PaddleInchesRemainder } from "./paddle-inches-remainder";
 import { PaddleTextureBackgrounds } from "./paddle-texture-backgrounds";
+import { PaddlePurchaseTypes } from "./types/paddle-purchase-types";
 
 // TODO: I'm not sure if this is needed or I can loop it easier
 interface NameTypes {
@@ -45,18 +46,7 @@ const Badges = ({ inflatable, demo, discount }: BadgeTypes) => {
   return null;
 }
 
-type purchaseTypes = {
-  id: React.Key;
-  title: string;
-  slug: string;
-  excerpt: string;
-  length: number;
-  width: number;
-  inflatable: boolean;
-  capacity: number;
-  demo: boolean;
-  discount?: number;
-  cutout: PaddleGatsbyImageType;
+interface PurchaseTypes extends PaddlePurchaseTypes {
   sportSlug: string;
   brandSlug: string;
   baseOne: { image: PaddleGatsbyImageType };
@@ -66,7 +56,26 @@ type purchaseTypes = {
   topTwo: { image: PaddleGatsbyImageType };
   topThree: { image: PaddleGatsbyImageType };
 };
-export const PaddlePurchase = ({ id, title, slug, excerpt, length, width, inflatable, capacity, demo, discount, cutout, sportSlug, brandSlug, baseOne, baseTwo, baseThree, topOne, topTwo, topThree }: purchaseTypes) => {
+export const PaddlePurchase = ({
+  id,
+  title,
+  slug,
+  excerpt,
+  length,
+  width,
+  inflatable,
+  capacity,
+  demo,
+  discount,
+  cutout,
+  sportSlug,
+  brandSlug,
+  baseOne,
+  baseTwo,
+  baseThree,
+  topOne,
+  topTwo,
+  topThree }: PurchaseTypes) => {
 
   return (
     <article key={id} className="purchase">

package/src/styles/buttons.css

@@ -57,8 +57,6 @@ button:active {
 
 .book-now {
   text-transform: uppercase;
-  /* ? why is this different than a regular button */
-  margin-block-start: var(--kosciuszko);
   background-color: var(--neutral-800);
   border-color: var(--neutral-700);
   color: var(--neutral-300);
@@ -102,58 +100,32 @@ button:active {
 
 .tahoe-city {
   button,
-  .button {
-    /* * reverts to clean dark scheme */
-    @media (prefers-color-scheme: light) {
-      background-color: var(--sand-200);
-      border-color: var(--sand-100);
-      color: var(--tanager-100);
-    }
+  .button, .book-now {
+    background-color: var(--tanager-200);
+    border-color: var(--tanager-100);
+    color: white;
   }
 
   button:hover,
   .button:hover,
+  .book-now:hover,
   .button__hover {
     @media (prefers-color-scheme: light) {
-      background-color: var(--sand-300);
-      border-color: var(--sand-200);
-      color: var(--tanager-200);
+          background-color: var(--tanager-300);
+    border-color: var(--tanager-200);
+    color: var(--neutral-200);
     }
   }
 
   button:active,
   .button:active,
+  .book-now:active,
   .button__active {
     @media (prefers-color-scheme: light) {
-      background-color: var(--sand-400);
-      border-color: var(--sand-300);
-      color: var(--tanager-300);
-    }
-  }
-
-  /* BOOK NOW */
-  .book-now {
-    background-color: var(--tanager-200);
-    border-color: var(--tanager-100);
-    color: var(--neutral-100);
-  }
-
-  /* @media (prefers-color-scheme: dark) {
-  } */
-
-  .book-now:hover,
-  .book-now__hover {
-    background-color: var(--tanager-300);
-    border-color: var(--tanager-200);
-    color: var(--neutral-200);
-  }
-
-  .book-now:active,
-  .book-now__active,
-  button:active {
-    background-color: var(--tanager-400);
+      background-color: var(--tanager-400);
     border-color: var(--tanager-300);
     color: var(--neutral-300);
+    }
   }
 }
 

package/src/styles/cards.css

@@ -234,10 +234,12 @@
 }
 
 .ticket {
-  width: 100%;
-  height: 100%;
-  background-color: var(--neutral-200);
+  width: calc(100% - 2 * var(--kosciuszko));
+  height: calc(100% - 2 * var(--kosciuszko));
+  background-color: white;
   border: 1px solid var(--neutral-300);
+  border-radius:  var(--card-radius);
+  padding: var(--kosciuszko);
 
   @media (prefers-color-scheme: dark) {
     background-color: var(--neutral-700);
@@ -269,6 +271,14 @@
   }
 }
 
+.tahoe-city .ticket {
+  border-color: var(--sand-400);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--neutral-700);
+  }
+}
+
 .south-tahoe .ticket {
   background-color: var(--lake-200);
   border: 1px solid var(--lake-300);

package/src/styles/color.css

@@ -11,13 +11,23 @@ body {
   }
 }
 
+.tahoe-city body {
+  background-color: var(--sand-100);
+  color: var(--neutral-800);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--lake-800);
+    color: var(--neutral-100);
+  }
+}
+
 body:has(#storybook-root) {
   #storybook-root {
     min-height: 100vh;
   }
 
   #storybook-root:has(.tahoe-city) {
-    background-color: var(--neutral-100);
+    background-color: var(--sand-100);
 
     @media (prefers-color-scheme: dark) {
       background-color: var(--lake-300);
@@ -51,6 +61,35 @@ hr {
   }
 }
 
+.tahoe-city hr {
+  border-color: var(--sand-400);
+
+  @media (prefers-color-scheme: dark) {
+    border-color: var(--lake-500);
+  }
+}
+
+/*------------------------------------*/
+/* #PANEL */
+/*------------------------------------*/
+
+.panel {
+  background-color: var(--neutral-200);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--neutral-700);
+  }
+}
+
+.tahoe-city .panel {
+  background-color: var(--sand-200);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--lake-700);
+  }
+}
+
+
 /*------------------------------------*/
 /* #TOP-BAR */
 /*------------------------------------*/
@@ -69,9 +108,10 @@ hr {
 
 @media (prefers-color-scheme: light) {
   .tahoe-city .top-bar {
-    background-color: var(--sand-100);
-    box-shadow: 0 0 0 100vmax var(--sand-100);
-    /* color: var(--sand-400); */
+    /* background-color: var(--neutral-100); */
+    /* box-shadow: 0 0 0 100vmax var(--neutral-100); */
+    background-color: white;
+    box-shadow: 0 0 0 100vmax white;
   }
 
   /* * dark back to clean theme */
@@ -95,9 +135,12 @@ hr {
 /* #LOCATION */
 /*------------------------------------*/
 
-.south-tahoe .location {
+
+.location {
+  background-color: white;
+  
   @media (prefers-color-scheme: dark) {
-    color: var(--neutral-200);
+    background-color: var(--neutral-800);
   }
 }
 

package/src/styles/layout.css

@@ -412,7 +412,6 @@ header {
 }
 
 .location:not(:last-child) {
-  border-block-end: 1px solid var(--neutral-400);
   margin-block-end: var(--kosciuszko);
 }
 
@@ -422,6 +421,7 @@ header {
   align-items: center;
   gap: clamp(var(--kosciuszko), 1.67vw, var(--elbrus));
   border-radius: var(--card-radius);
+  padding: var(--vinson);
 
   > svg,
   .svg {

package/src/styles/links.css

@@ -45,6 +45,10 @@ a svg {
 /* #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;

package/src/styles/typography.css

@@ -80,6 +80,7 @@ small,
 
 address {
   font-style: normal;
+  margin-bottom: 0.625rem;
 }
 
 p {

package/src/styles/variables.css

@@ -39,13 +39,13 @@
 
   /* Sand */
 
-  --sand-100: oklch(0.97 0.01 50);
-  --sand-200: oklch(0.95 0.02 50);
-  --sand-300: oklch(0.92 0.03 50);
-  --sand-400: oklch(0.88 0.04 50);
+  --sand-100: oklch(0.97 0.025 75);
+  --sand-200: oklch(0.95 0.035 75);
+  --sand-300: oklch(0.92 0.05 75);
+  --sand-400: oklch(0.88 0.075 75);
   /* this finishes where 500 normally would go dark */
 
-  @supports not (color: oklch(0.97 0.01 50)) {
+  @supports not (color: oklch(0.97 0.02 75)) {
     --sand-100: #fbf3ef;
     --sand-200: #faebe3;
     --sand-300: #f6dfd3;

package/src/types/paddle-location-deck-types.ts

@@ -1,9 +1,9 @@
-import type { PaddleLocationCardTypes } from "./paddle-location-card-types";
+import type { PaddleLocationTypes } from "./paddle-location-types";
 
 export type PaddleLocationDeckTypes = {
   background?: string;
   season_start?: string; // ? should this be optional? it created a problem with tours
   season_end?: string;
   phone?: string;
-  nodes: PaddleLocationCardTypes[];
+  nodes: PaddleLocationTypes[];
 };

package/src/types/{paddle-location-card-types.ts → paddle-location-types.ts}

@@ -1,4 +1,4 @@
-export interface PaddleLocationCardTypes {
+export interface PaddleLocationTypes {
   id: React.Key;
   svg: string;
   name: string;

package/src/paddle-location-card.tsx

@@ -1,399 +0,0 @@
-import React from "react"
-import { Link } from "gatsby";
-import Markdown from "react-markdown";
-
-import HourMin from "./hour-min";
-import Phone from "./phone";
-import type { PaddleLocationCardTypes } from "./types/paddle-location-card-types";
-import SVG from 'react-inlinesvg';
-
-// merged types are possible to dry this up but its also a lot
-// type UpdatedUser = Merge<User, Updates>;
-type PlaceTypes = {
-  commonName?: string;
-  streetAddress?: string;
-  addressLocality?: string;
-  addressRegion?: string;
-  postalCode?: string;
-};
-const Place = ({ commonName, streetAddress, addressLocality, addressRegion, postalCode }: PlaceTypes) => {
-  return (
-    <address>
-      {commonName ? (<>{commonName},&nbsp;</>) : null}
-      {streetAddress ? (<>{streetAddress},&nbsp;</>) : null}
-      {addressLocality ? (<>{addressLocality},&nbsp;</>) : null}
-      {addressRegion ? (<>{addressRegion},&nbsp;</>) : null}
-      {postalCode ? (<>{postalCode},&nbsp;</>) : null}
-    </address>
-  )
-}
-
-interface SeasonTypes {
-  season_start?: string;
-  season_end?: string;
-
-  opening_time: string;
-  closing_time: string;
-  name: string;
-  offSeasonDetails?: string;
-  weatherPermitting?: boolean;
-}
-const Season = ({
-  name,
-  season_start,
-  season_end,
-  opening_time,
-  closing_time,
-  offSeasonDetails,
-  weatherPermitting
-}: SeasonTypes) => {
-  // TODO: these need a query but thats not the most important first step
-  if (
-    name === "Free Parking Lot" ||
-    name === "Parking" ||
-    name === "Delivery"
-  ) {
-    return null;
-  }
-
-  if (season_start && season_end) {
-    const currentDay = new Date();
-    const seasonStartDate = new Date(season_start);
-    const seasonEndDate = new Date(season_end);
-
-    if (currentDay >= seasonStartDate && currentDay <= seasonEndDate) {
-      return (
-        <p>
-          {opening_time ? "Open Daily: " : null}
-          {opening_time && closing_time ? (
-            <><HourMin time={opening_time} /> - <HourMin time={closing_time} />&nbsp;</>
-          ) : null}
-          {weatherPermitting ? "Weather Permitting" : null}
-        </p>
-      );
-    }
-
-    // * outside of season
-    return (
-      <div>
-        <p>We&apos;re closed for the season</p>
-
-        {currentDay < seasonStartDate ? (
-          <p>We will reopen {season_start}, Weather Permitting</p>
-        ) : null}
-
-        {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}
-      </div>
-    );
-  }
-
-  // * no season defaults to off season
-  // TODO: v1.3 add some enum error messages here for if this is allowed to not have a season
-  return (
-    <div>
-      <p>We&apos;re closed for the season</p>
-      {offSeasonDetails ? <p>{offSeasonDetails}</p> : null}
-    </div>
-  );
-};
-
-interface ContentTypes {
-  link?: string;
-  svg: string;
-  name: string;
-
-  description: {
-    data: {
-      description: string;
-    };
-  };
-  opening_time: string;
-  closing_time: string;
-
-  season_start?: string;
-  season_end?: string;
-
-  offSeasonDetails?: string;
-  phoneNumber?: number;
-  weatherPermitting?: boolean;
-
-  streetAddress?: string;
-  addressLocality?: string;
-  addressRegion?: string;
-  postalCode?: string;
-  commonName?: string;
-}
-const PhoneContent = ({
-  link,
-  svg,
-  name,
-  description,
-  opening_time,
-  closing_time,
-  streetAddress,
-  addressLocality,
-  addressRegion,
-  postalCode,
-  commonName,
-  season_start,
-  season_end,
-  offSeasonDetails,
-  phoneNumber,
-  weatherPermitting
-}: ContentTypes) => {
-  return (
-    <>
-      {link?.includes("http") ? (
-        <a
-          href={link}
-          className="svg"
-          target="_blank"
-          rel="noopener noreferrer"
-          title={name}
-        >
-          <SVG src={svg} />
-        </a>
-      ) : (
-        link && (
-          <Link to={link} className="svg">
-            <SVG src={svg} />
-          </Link>
-        )
-      )}
-
-      <div className="location_details">
-        <div className="multi_button">
-          {link?.includes("http") ? (
-            <a
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={name}
-            >
-              <h3>{name}</h3>
-            </a>
-          ) : (
-            link && (
-              <Link to={link} title={name}>
-                <h3>{name}</h3>
-              </Link>
-            )
-          )}
-          {phoneNumber && (
-            <Phone phone={phoneNumber} />
-          )}
-        </div>
-
-        {streetAddress ||
-          addressLocality ||
-          addressRegion ||
-          postalCode ||
-          commonName ? (
-
-          link?.includes("http") ? (
-            <a
-              href={link}
-              target="_blank"
-              rel="noopener noreferrer"
-              title={name}
-            >
-              <Place
-                commonName={commonName}
-                streetAddress={streetAddress}
-                addressLocality={addressLocality}
-                addressRegion={addressRegion}
-                postalCode={postalCode}
-              />
-            </a>
-          ) : (
-            link && (
-              <Link to={link} title={name}>
-                <Place
-                  commonName={commonName}
-                  streetAddress={streetAddress}
-                  addressLocality={addressLocality}
-                  addressRegion={addressRegion}
-                  postalCode={postalCode}
-                />
-              </Link>
-            )
-          )
-        ) : null}
-
-        {opening_time && closing_time ? (
-          <Season
-            season_start={season_start}
-            season_end={season_end}
-            opening_time={opening_time}
-            closing_time={closing_time}
-            name={name}
-            offSeasonDetails={offSeasonDetails}
-            weatherPermitting={weatherPermitting}
-          />
-        ) : (
-          <div className="react-markdown">
-            <Markdown>{description.data.description}</Markdown>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-const Content = ({
-  svg,
-  name,
-  description,
-  opening_time,
-  closing_time,
-  streetAddress,
-  addressLocality,
-  addressRegion,
-  postalCode,
-  commonName,
-  weatherPermitting,
-  season_start,
-  season_end,
-  offSeasonDetails,
-}: ContentTypes) => {
-  return (
-    <>
-      <div className="svg">
-        <SVG src={svg} />
-      </div>
-
-      <div className="location_details">
-        <div className="multi_button">
-          <h3>{name}</h3>
-        </div>
-
-        {streetAddress ||
-          addressLocality ||
-          addressRegion ||
-          postalCode ||
-          commonName ? (
-          <Place
-            commonName={commonName}
-            streetAddress={streetAddress}
-            addressLocality={addressLocality}
-            addressRegion={addressRegion}
-            postalCode={postalCode}
-          />
-        ) : null}
-
-        {opening_time && closing_time ? (
-          <Season
-            season_start={season_start}
-            season_end={season_end}
-            opening_time={opening_time}
-            closing_time={closing_time}
-            name={name}
-            offSeasonDetails={offSeasonDetails}
-            weatherPermitting={weatherPermitting}
-          />
-        ) : (
-          <div className="react-markdown">
-            <Markdown>{description.data.description}</Markdown>
-          </div>
-        )}
-      </div>
-    </>
-  );
-};
-
-export const PaddleLocationCard = ({
-  svg,
-  name,
-  link,
-  description,
-  opening_time,
-  closing_time,
-  streetAddress,
-  addressLocality,
-  addressRegion,
-  postalCode,
-  commonName,
-  season_start,
-  season_end,
-  phone,
-  phoneNumber,
-  offSeasonDetails,
-  weatherPermitting
-}: PaddleLocationCardTypes) => {
-
-  const phoneDidgits = Number(phoneNumber);
-
-  if (phone) {
-    return (
-      <div className="location">
-        <PhoneContent
-          link={link}
-          svg={svg}
-          name={name}
-          description={description}
-          opening_time={opening_time}
-          closing_time={closing_time}
-          streetAddress={streetAddress}
-          addressLocality={addressLocality}
-          addressRegion={addressRegion}
-          postalCode={postalCode}
-          commonName={commonName}
-          season_start={season_start}
-          season_end={season_end}
-          offSeasonDetails={offSeasonDetails}
-          phoneNumber={phoneDidgits}
-          weatherPermitting={weatherPermitting}
-        />
-      </div>
-    );
-  }
-
-  if (link.includes("http")) {
-    return (
-      <a
-        href={link}
-        className="location"
-        target="_blank"
-        rel="noopener noreferrer"
-        title={name}
-      >
-        <Content
-          svg={svg}
-          name={name}
-          description={description}
-          opening_time={opening_time}
-          closing_time={closing_time}
-          streetAddress={streetAddress}
-          addressLocality={addressLocality}
-          addressRegion={addressRegion}
-          postalCode={postalCode}
-          commonName={commonName}
-          season_start={season_start}
-          season_end={season_end}
-          offSeasonDetails={offSeasonDetails}
-          weatherPermitting={weatherPermitting}
-        />
-      </a>
-    );
-  }
-  return (
-    <Link to={link} className="location">
-      <Content
-        svg={svg}
-        name={name}
-        description={description}
-        opening_time={opening_time}
-        closing_time={closing_time}
-        streetAddress={streetAddress}
-        addressLocality={addressLocality}
-        addressRegion={addressRegion}
-        postalCode={postalCode}
-        commonName={commonName}
-        season_start={season_start}
-        season_end={season_end}
-        offSeasonDetails={offSeasonDetails}
-        weatherPermitting={weatherPermitting}
-      />
-    </Link>
-  );
-};