@rileybathurst/paddle 0.0.12 → 0.0.15

package/src/stories/Pricing.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 { Pricing } from './Pricing';
+
+const meta = {
+  component: Pricing,
+  title: 'Molecules/Pricing',
+  args: { onClick: fn() },
+} satisfies Meta<typeof Pricing>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/stories/Pricing.tsx

@@ -0,0 +1,74 @@
+// this is the Name.tsx file
+import React from 'react';
+import { BookNow } from './BookNow';
+
+interface PricingProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Pricing = ({
+  primary = false,
+  ...props
+}: PricingProps) => {
+
+  return (
+    <>
+      <section className="charts">
+        <div className="pricing-chart">
+          <div className="column">
+            <h4>
+              Rental
+              <br />
+              Rates
+            </h4>
+            <p>1 Hour</p>
+            <p>3 Hours</p>
+            <p>Full Day</p>
+          </div>
+          <div className="column">
+            <h4>
+              Single
+              <br />
+              Kayak
+            </h4>
+            <p>$30</p>
+            <p>$60</p>
+            <p>$90</p>
+          </div>
+          <div className="column">
+            <h4>
+              Double
+              <br />
+              Kayak
+            </h4>
+            <p>$45</p>
+            <p>$90</p>
+            <p>$110</p>
+          </div>
+          <div className="column">
+            <h4>
+              Paddle
+              <br />
+              Board
+            </h4>
+            <p>$30</p>
+            <p>$60</p>
+            <p>$90</p>
+          </div>
+        </div>
+
+        <div className="pricing-chart">
+          <>
+            <p className="test">Pedal Drive</p>
+            <p className="test">+10</p>
+            <p className="test">+20</p>
+            <p className="">+10</p>
+          </>
+        </div>
+      </section>
+
+      <BookNow />
+    </>
+  );
+};

package/src/stories/Ticket.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 { Ticket } from './Ticket';
+
+const meta = {
+  component: Ticket,
+  title: 'Molecules/Ticket',
+  args: { onClick: fn() },
+} satisfies Meta<typeof Ticket>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/stories/Ticket.tsx

@@ -0,0 +1,55 @@
+// TODO: when I have an internet connection
+// this is the Name.tsx file
+import React from 'react';
+import { Link } from 'react-aria-components';
+import { faker } from '@faker-js/faker';
+import { PaddleTime } from '../PaddleTime';
+
+interface TicketProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Ticket = ({
+  primary = false,
+  ...props
+}: TicketProps) => {
+
+  const time = PaddleTime({
+    timeframe: faker.datatype.boolean() ? faker.helpers.arrayElement(['sunset', 'overnight']) : null,
+    // ? faker boolean covering both start and finish
+    start: faker.datatype.boolean() ? `${faker.number.int({ min: 1, max: 24 })}:${faker.number.int(60)}:00.000` : null,
+    finish: faker.datatype.boolean() ? `${faker.number.int({ min: 1, max: 24 })}:${faker.number.int(60)}:00.000` : null,
+    duration: faker.datatype.boolean() ? faker.number.int(200) : null
+  });
+
+  return (
+    <section className="ticket">
+      <Link href={`/tours/${faker.location.city()}`}>
+        <img src={faker.image.url()} alt={faker.lorem.words(2)} />
+      </Link>
+      <h4 className="card__title">
+        <Link href={`/tours/${faker.location.city()}`}>
+          {faker.location.city()}
+        </Link>
+      </h4>
+      <div className="card__specs">
+        <h4>{time.key}</h4>
+        {faker.datatype.boolean() ? <h4 className="capitalize">{faker.helpers.arrayElement(['easy', 'medium', 'hard'])} <span>Fitness</span></h4> : null}
+      </div>
+      <hr />
+      <p>{faker.lorem.sentences(2)}</p>
+      <hr />
+      <div className="card__details">
+        <h5>{faker.datatype.boolean() ? `$${faker.number.int(200)}` : null}</h5>
+        <a
+          href={faker.location.city()}
+          className="book-now"
+        >
+          BOOK NOW
+        </a>
+      </div>
+
+    </section>
+  );
+};

package/src/stories/TopBar.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 { TopBar } from './TopBar';
+
+const meta = {
+  component: TopBar,
+  title: 'Atoms/TopBar',
+  args: { onClick: fn() },
+} satisfies Meta<typeof TopBar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/stories/TopBar.tsx

@@ -0,0 +1,19 @@
+// this is the Name.tsx file
+import React from 'react';
+
+interface TopBarProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const TopBar = ({
+  primary = false,
+  ...props
+}: TopBarProps) => {
+
+  return (
+    <div className="top-bar" >
+      <p>We&apos;re Open for the 2024 Summer</p>
+    </div>
+  );
+};

package/src/stories/Typography.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 { Typography } from './Typography';
+
+const meta = {
+  component: Typography,
+  title: 'Atoms/Typography',
+  args: { onClick: fn() },
+} satisfies Meta<typeof Typography>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/stories/Typography.tsx

@@ -0,0 +1,39 @@
+// this is the Name.tsx file
+import React from 'react';
+import { Eyebrow } from './Eyebrow';
+
+interface TypographyProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Typography = ({
+  primary = false,
+  ...props
+}: TypographyProps) => {
+
+  return (
+    <>
+      <h1>everest</h1>
+      <h2>aconcagua</h2>
+      <h3>denali</h3>
+      <h4>kilimanjaro</h4>
+      <h5>elbrus</h5>
+      <h6>vinson</h6>
+      <p>kosciuszko</p>
+
+      <hr />
+
+      {/* // TODO: fix this naming */}
+      <p className="typography__secondary">typography__secondary</p>
+
+      <hr />
+
+      <Eyebrow />
+      <p>
+        These can be any version of h to be a well styled html doc as long as
+        they have the hgroup wrapper with a class of crest
+      </p>
+    </ >
+  );
+};

package/src/stories/Widths.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 { Widths } from './Widths';
+
+const meta = {
+  component: Widths,
+  title: 'Atoms/Widths',
+  args: { onClick: fn() },
+} satisfies Meta<typeof Widths>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Primary: Story = {
+  args: {
+    primary: true,
+  },
+};

package/src/stories/Widths.tsx

@@ -0,0 +1,67 @@
+// this is the Name.tsx file
+import React from 'react';
+
+function WidthCard({ widths }) {
+  return (
+    <>
+      {widths.map((width) => (
+        <div
+          style={{
+            height: '100px',
+            width: `var(--${width})`,
+            backgroundColor: 'var(--mullen-300)',
+            marginInline: 'auto',
+            marginBlockEnd: '1rem',
+            color: 'white',
+          }}
+        >
+          {width}
+        </div>
+      ))}
+    </>
+  );
+}
+
+interface WidthsProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Widths = ({
+  primary = false,
+  ...props
+}: WidthsProps) => {
+
+  return (
+    <>
+      <h1>Widths</h1>
+      <WidthCard widths={['swan', 'vulture', 'stork', 'condor', 'pelican', 'albatross']} />
+      <hr />
+      <h2>split</h2>
+      <p>pelican hydra</p>
+      <div
+        className='pelican hydra'
+        style={{
+          height: '100px',
+          marginBlockEnd: '1rem',
+          color: 'white',
+        }}
+      >
+        <div
+          style={{
+            backgroundColor: 'var(--mullen-300)',
+          }}
+        >
+          hydra?
+        </div>
+        <div
+          style={{
+            backgroundColor: 'var(--mullen-300)',
+          }}
+        >
+          hydra?
+        </div>
+      </div>
+    </>
+  );
+};

package/src/styles/a11y.css

@@ -0,0 +1,10 @@
+/*------------------*/
+/* #A11y */
+/*------------------*/
+
+.sr-only {
+  width: 0;
+  height: 0;
+  overflow: hidden;
+  display: block;
+}

package/src/styles/app.css

@@ -4,4 +4,10 @@
 
 @import "variables";
 @import "body";
+@import "layout";
+@import "media";
+/* @import "color"; */
+@import "typography";
+@import "links";
 @import "buttons";
+@import "a11y";

package/src/styles/color.css

@@ -0,0 +1,18 @@
+/*------------------------------------*/
+/* #COLOR */
+/*------------------------------------*/
+
+/*------------------------------------*/
+/* #TOP-BAR */
+/*------------------------------------*/
+
+.top-bar {
+  background: var(--brilliance);
+  box-shadow: 0 0 0 100vmax var(--brilliance);
+  clip-path: inset(0 -100vmax);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--navy-600);
+    box-shadow: 0 0 0 100vmax var(--navy-600);
+  }
+}

package/src/styles/layout.css

@@ -0,0 +1,99 @@
+/*------------------*/
+/* #LAYOUT */
+/*------------------*/
+
+.vulture {
+  max-width: var(--vulture);
+  flex-basis: var(--vulture);
+  margin-inline: auto;
+  padding-inline: var(--kosciuszko);
+  width: calc(100% - var(--kosciuszko) * 2);
+}
+
+.stork {
+  max-width: var(--stork);
+  flex-basis: var(--stork);
+  margin-inline: auto;
+  padding-inline: var(--kosciuszko);
+  width: calc(100% - var(--kosciuszko) * 2);
+}
+
+.condor {
+  max-width: var(--condor);
+  flex-basis: var(--condor);
+  margin-inline: auto;
+  padding-inline: var(--kosciuszko);
+  width: calc(100% - var(--kosciuszko) * 2);
+}
+
+.pelican {
+  max-width: var(--pelican);
+  flex-basis: var(--pelican);
+  margin-inline: auto;
+  padding-inline: var(--kosciuszko);
+  width: calc(100% - var(--kosciuszko) * 2);
+}
+
+.albatross {
+  max-width: var(--albatross);
+  flex-basis: var(--albatross);
+  margin-inline: auto;
+  width: calc(100% - var(--kosciuszko) * 2);
+}
+
+/*------------------------------------*/
+
+.wrap {
+  display: flex;
+  flex-flow: row wrap;
+  gap: clamp(var(--kosciuszko), 1.667vw, var(--denali));
+
+  > * {
+    flex: 1 1;
+    width: 100%;
+  }
+}
+
+.pelican.wrap > * {
+  flex: 1 1 calc(var(--pelican) / 2 - 1rem);
+  max-width: none;
+  margin-inline: 0;
+  padding-inline: 0;
+}
+
+.albatross.wrap > * {
+  flex: 1 1 calc(var(--albatross) / 2 - 1rem);
+  max-width: none;
+  margin-inline: 0;
+  padding-inline: 0;
+}
+
+/*------------------*/
+/* #MAIN */
+/*------------------*/
+
+header,
+main,
+footer {
+  max-width: var(--stork);
+  margin-inline: auto;
+  /* TODO: clamp this */
+  padding-inline: var(--kosciuszko);
+  margin-block-end: var(--everest);
+}
+
+/*------------------*/
+/* #TOP BAR */
+/*------------------*/
+
+.top-bar {
+  display: flex;
+  justify-content: center;
+  padding-block-start: 0.25rem;
+  z-index: var(--emergent); /* over the small menu when it slides up */
+  position: relative;
+
+  p {
+    margin-block-end: 0.25rem;
+  }
+}

package/src/styles/links.css

@@ -0,0 +1,33 @@
+/*------------------------------------*/
+/* #LINKS */
+/*------------------------------------*/
+
+a {
+  color: var(--navy);
+
+  @media (prefers-color-scheme: dark) {
+    color: var(--navy-200);
+  }
+}
+
+a:where(:hover, :focus),
+a.hover {
+  color: var(--navy-300);
+  text-decoration: none;
+}
+
+.link__subtle {
+  text-decoration: none;
+}
+
+.link__subtle:where(:hover, :focus) {
+  text-decoration: underline;
+}
+
+.link__subtle-svg svg {
+  fill: var(--black-out);
+}
+
+.link__subtle-svg svg:where(:hover, :focus) {
+  fill: var(--navy);
+}

package/src/styles/media.css

@@ -0,0 +1,53 @@
+/*------------------*/
+/* #LOGO */
+/*------------------*/
+
+.logo-container {
+  margin: 0 auto;
+  display: flex;
+  /* gap: 1rem; // dont run a gap as the sr-only h1 uses it */
+  justify-content: center;
+  background-color: whitesmoke;
+  box-shadow: 0 0 0 100vmax whitesmoke;
+  clip-path: inset(0 -100vmax);
+  z-index: var(--understory);
+  position: relative;
+  max-width: calc(100% - 2rem); /* guess and check */
+  padding-block: var(--baseline);
+
+  @supports not (margin-inline: auto) {
+    margin-inline: auto;
+  }
+
+  /* @media (min-width: 30rem) {
+    max-width: 32rem; // guess and check
+  } */
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--ink);
+    box-shadow: 0 0 0 100vmax var(--ink);
+  }
+
+  a {
+    width: max-content;
+    display: flex;
+    justify-content: center;
+    transition: var(--fade);
+  }
+
+  .gatsby-image-wrapper,
+  svg {
+    transition: var(--fade);
+  }
+
+  .gatsby-image-wrapper:where(:hover, :focus) {
+    filter: brightness(0.5);
+  }
+
+  svg {
+    width: 100%;
+    max-height: 10rem;
+    /* the logo isnt symetrical */
+    padding-inline-start: 2rem; /* guess and check number */
+  }
+}