@rileybathurst/paddle 0.0.13 → 0.0.16

package/src/stories/Header.stories.ts

@@ -1,16 +1,16 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
+import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 
-import { Header } from './Header';
+import { Header } from "./Header";
 
 const meta = {
-  title: 'Example/Header',
+  title: "Organisms/Header",
   component: Header,
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+  tags: ["autodocs"],
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
   args: {
     onLogin: fn(),
@@ -25,7 +25,7 @@ type Story = StoryObj<typeof meta>;
 export const LoggedIn: Story = {
   args: {
     user: {
-      name: 'Jane Doe',
+      name: "Jane Doe",
     },
   },
 };

package/src/stories/Header.tsx

@@ -1,59 +1,28 @@
-// import React from 'react';
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import { Link } from 'react-aria-components';
+import { TopBar } from './TopBar';
+import { Logo } from './Logo';
 
-// import { Button } from './Button';
-import './header.css';
-
-type User = {
-  name: string;
-};
-
-interface HeaderProps {
-  user?: User;
-  onLogin?: () => void;
-  onLogout?: () => void;
-  onCreateAccount?: () => void;
-}
-
-export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps) => (
+export const Header = () => (
   <header>
-    <div className="storybook-header">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fillRule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        {user ? (
-          <>
-            <span className="welcome">
-              Welcome, <b>{user.name}</b>!
-            </span>
-            <Button size="small" onClick={onLogout} label="Log out" />
-          </>
-        ) : (
-          <>
-            <Button size="small" onClick={onLogin} label="Log in" />
-            <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
-          </>
-        )}
-
-        <hr />
-        <Button />
-      </div>
+    <TopBar />
+    <div className="logo-container" >
+      <Link
+        href="/"
+        className="link__subtle"
+      >
+        <Logo />
+      </Link>
+      <h1 className='sr-only'>
+        <Link
+          href="/"
+          className="link__subtle"
+        >
+          {faker.location.city()} kayak &amp; Paddleboard
+        </Link>
+      </h1>
     </div>
+    {/* // TODO: <p>small nav is going to be a pain to build here I bet</p> */}
   </header>
 );

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

package/src/stories/Language.tsx

@@ -0,0 +1,22 @@
+// this is the Name.tsx file
+import React from 'react';
+
+interface LanguageProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Language = ({
+  primary = false,
+  ...props
+}: LanguageProps) => {
+
+  return (
+    <main
+      {...props}
+    >
+      "Paddleboard is supposed to be one word" - Andy<br />
+      "Double Kayak" - always used instead of Tandem<br />
+    </main>
+  );
+};

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

package/src/stories/Links.tsx

@@ -0,0 +1,25 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import { Link } from 'react-aria-components';
+
+interface LinksProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Links = ({
+  primary = false,
+  ...props
+}: LinksProps) => {
+
+  return (
+    <main
+      {...props}
+    >
+      <Link href={faker.location.city()}>{faker.location.city()}</Link><br />
+      <Link href={faker.location.city()} className={`link__backed ${primary ?? 'hover'}`}>{faker.location.city()} Backed</Link>
+      {/* {primary ? 'primary' : 'secondary'} */}
+    </main>
+  );
+};

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

package/src/stories/Location.tsx

@@ -0,0 +1,54 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+interface LocationProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Location = ({
+  primary = false,
+  ...props
+}: LocationProps) => {
+
+  return (
+    <a
+      className={`location ${primary ?? 'backed'}`}
+      href="https://goo.gl/maps/atoK4oyJRbV3EKuK9"
+      rel="noopener noreferrer"
+    >
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        height="48"
+        width="48"
+        className=""
+      >
+        <title>{faker.location.city()}</title>
+        <path d="M4 46v-3h2q1.55 0 3.075-.525Q10.6 41.95 12 40.55q1.4 1.4 2.925 1.925Q16.45 43 18 43q1.5 0 3.075-.55 1.575-.55 2.925-1.9 1.45 1.4 2.95 1.925Q28.45 43 30 43q1.5 0 3.075-.55 1.575-.55 2.925-1.9 1.35 1.35 2.925 1.9Q40.5 43 42 43h2v3h-2q-1.45 0-2.975-.425Q37.5 45.15 36 44q-1.5 1.15-3.025 1.575Q31.45 46 30 46q-1.45 0-2.975-.425Q25.5 45.15 24 44q-1.5 1.15-3.025 1.575Q19.45 46 18 46q-1.45 0-2.975-.425Q13.5 45.15 12 44q-1.5 1.15-3.025 1.575Q7.45 46 6 46Zm20-27.7q-1.5 0-2.575-1.075-1.075-1.075-1.075-2.575 0-1.5 1.075-2.575Q22.5 11 24 11q1.5 0 2.575 1.075 1.075 1.075 1.075 2.575 0 1.5-1.075 2.575Q25.5 18.3 24 18.3Zm-6 19.9q-1.65 0-3.25-.9T12 34.95q-.65.7-1.55 1.375T8.7 37.55q-1.95-.4-4.225-1.075Q2.2 35.8 0 35q2.65-1.05 6.875-2.1t7.775-1.65l2.8-8.95q.4-1.4 1.7-1.95 1.3-.55 2.55.1l5.3 2.8 6.05-3.2 3.5-8.1-1-2.65 2.4-5.25L43.4 6.5l-2.35 5.25-2.65 1-7.8 18.15q4.55.55 9.55 1.75 5 1.2 7.85 2.35-2.2.8-4.475 1.475-2.275.675-4.225 1.075-.85-.55-1.75-1.225T36 34.95q-1.15 1.45-2.75 2.35-1.6.9-3.25.9t-3.25-.9q-1.6-.9-2.75-2.35-1.15 1.45-2.75 2.35-1.6.9-3.25.9Zm10.45-7.55 2.6-6.2-4.05 2.1-3.8-1.9-1.8 5.85H24q1.15 0 2.225.025 1.075.025 2.225.125Z" />
+      </svg>
+      <div>
+        <h3 className="vinson">On Water Rental</h3>
+        <p>
+          {faker.location.secondaryAddress()}
+          <br />
+          {faker.location.streetAddress()},
+          <br />
+          {faker.location.city()}, {faker.location.zipCode()}
+          <br />
+        </p>
+      </div>
+
+      <p>
+        May &ndash; October
+        <br />
+        Open Daily
+        <br />
+        9:30am &ndash; 5:30pm
+        <br />
+        Weather Permitting
+        <br />
+      </p>
+    </a>
+  );
+};

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

package/src/stories/LocationDeck.tsx

@@ -0,0 +1,42 @@
+// this is the Name.tsx file
+import React from 'react';
+import { Location } from './Location';
+import { faker } from '@faker-js/faker';
+
+function Deal() {
+
+  const roll = faker.number.int(10);
+
+  if (roll < 1) {
+    return (
+      <h1>double zero</h1>
+    );
+  }
+
+  const content = [];
+  for (let i = 0; i < roll; i++) {
+    content.push(
+      <Location key={i} />
+    );
+  }
+
+  return content;
+}
+
+
+interface LocationDeckProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const LocationDeck = ({
+  primary = false,
+  ...props
+}: LocationDeckProps) => {
+
+  return (
+    <div className='location-deck'>
+      <Deal />
+    </div>
+  );
+};

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

package/src/stories/Logo.tsx

@@ -0,0 +1,60 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+interface LogoProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Logo = ({
+  primary = false,
+  ...props
+}: LogoProps) => {
+
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1057.1 687.4"
+    >
+      <title>{faker.location.city()} kayak and paddleboard logo</title>
+      <g>
+        <path d="M92.5,234.3c-2.1.4-4.5.6-7.1.4-7.2-.4-14.5-2.9-20-5.8v16.4c5.8,2.5,14.6,4.5,23.7,4.5,18.8,0,29.7-8.6,29.7-23s-8.6-19.3-22.6-24.7c-10.8-4.1-15.2-7.3-15.2-12s5.3-8.3,13.5-8.3,14.8,2.1,19.5,4.9v-15.7c-5-2.2-12.8-4-20.8-4-17.2,0-28.9,9.1-28.9,23.2s8.2,19.7,22.1,24.8c11,4,15.7,6.8,15.7,12.1s-3.5,6.2-9.6,7.1Z" />
+        <path d="M171.4,249.9c24.1,0,41.7-18.1,41.7-41.4s-17.7-41.4-41.7-41.4-41.7,18.5-41.7,41.4,17.6,41.4,41.7,41.4ZM171.4,182.7c14.4,0,24.6,11.6,24.6,25.8s-10.2,25.8-24.6,25.8-24.6-11.5-24.6-25.8,10.2-25.8,24.6-25.8Z" />
+        <path d="M262.1,249.9c21,0,33.3-12,33.3-30.5v-50.7h-17v49c0,10.4-5.8,16.6-16.3,16.6s-16.3-6.2-16.3-16.6v-49h-17v50.7c0,18.6,12.4,30.5,33.3,30.5Z" />
+        <polygon points="330.7 248.3 347.8 248.3 347.8 182.9 370.1 182.9 370.1 168.6 308.5 168.6 308.5 182.9 330.7 182.9 330.7 248.3" />
+        <polygon points="401.3 215 434.2 215 434.2 248.3 451.3 248.3 451.3 168.6 434.2 168.6 434.2 200.8 401.3 200.8 401.3 168.6 384.3 168.6 384.3 248.3 401.3 248.3 401.3 215" />
+        <polygon points="552.7 248.3 569.7 248.3 569.7 182.9 592.1 182.9 592.1 168.6 530.4 168.6 530.4 182.9 552.7 182.9 552.7 248.3" />
+        <path d="M609.1,248.3l6.2-14.1h29.8l6.4,14.1h17.8l-38.7-80.9h-.7l-38.6,80.9h17.8ZM630.4,198.6c2.4,7,6,15.4,9.6,23.7h-19.5c3.3-7.5,7.5-18.1,9.9-23.7Z" />
+        <polygon points="698.9 215 731.8 215 731.8 248.3 748.8 248.3 748.8 168.6 731.8 168.6 731.8 200.8 698.9 200.8 698.9 168.6 681.9 168.6 681.9 248.3 698.9 248.3 698.9 215" />
+        <path d="M807.2,249.9c24.1,0,41.7-18.1,41.7-41.4s-17.7-41.4-41.7-41.4-41.7,18.5-41.7,41.4,17.6,41.4,41.7,41.4ZM807.2,182.7c14.4,0,24.6,11.6,24.6,25.8s-10.2,25.8-24.6,25.8-24.6-11.5-24.6-25.8,10.2-25.8,24.6-25.8Z" />
+        <polygon points="918.5 234 882.7 234 882.7 214.8 911.7 214.8 911.7 201.1 882.7 201.1 882.7 182.9 916.9 182.9 916.9 168.6 865.6 168.6 865.6 248.3 918.5 248.3 918.5 234" />
+      </g>
+      <g>
+        <path d="M118.2,528.6h-26v79.9h17.1v-27.3h8.9c18.4,0,30.7-9.1,30.7-26.3s-12.3-26.3-30.7-26.3ZM119,566.8h-9.8v-23.8h9.3c7.7,0,13,4,13,12s-5.1,11.9-12.5,11.9Z" />
+        <path d="M185.8,527.4l-38.7,81.1h17.9l6.2-14.1h29.8l6.4,14.1h17.9l-38.8-81.1h-.7ZM176.4,582.4c3.3-7.5,7.5-18.2,9.9-23.7,2.4,7,6,15.4,9.6,23.7h-19.5Z" />
+        <path d="M263.3,528.6h-25.5v79.9h25.7c27.1,0,44.2-16.5,44.2-39.9s-17.2-39.9-44.4-39.9ZM263.3,594.2h-8.4v-51.2h8.2c17.3,0,27.4,11.2,27.4,25.6s-10.1,25.6-27.2,25.6Z" />
+        <path d="M351,528.6h-25.5v79.9h25.7c27.1,0,44.2-16.5,44.2-39.9s-17.2-39.9-44.4-39.9ZM351,594.2h-8.4v-51.2h8.2c17.3,0,27.4,11.2,27.4,25.6s-10.1,25.6-27.2,25.6Z" />
+        <polygon points="428.3 528.6 411.2 528.6 411.2 608.5 459 608.5 459 594.2 428.3 594.2 428.3 528.6" />
+        <polygon points="491.2 574.9 520.2 574.9 520.2 561.1 491.2 561.1 491.2 543 525.4 543 525.4 528.6 474.1 528.6 474.1 608.5 527.1 608.5 527.1 594.2 491.2 594.2 491.2 574.9" />
+        <path d="M595.6,566.6c5.7-2.4,10.2-8,10.2-15.5,0-15-12.8-22.4-29.7-22.4h-25.8v79.9h28.2c18,0,30.4-8,30.4-23.3s-6.1-16.3-13.2-18.6ZM566.5,542.3h10.6c6.8,0,11.3,3.5,11.3,10.2s-2.1,7.5-5.3,8.8c-2,.6-4.1.7-6.4.7h-10.2v-19.6ZM579.2,594.9h-12.6v-21.4h13.8c6.1,0,11,3.7,11,10.6s-5.3,10.8-12.1,10.8Z" />
+        <path d="M744.7,527.4l-38.7,81.1h17.9l6.2-14.1h29.8l6.4,14.1h17.9l-38.8-81.1h-.7ZM735.2,582.4c3.3-7.5,7.5-18.2,9.9-23.7,2.4,7,6,15.4,9.6,23.7h-19.5Z" />
+        <path d="M851.8,554.9c0-17.1-12.3-26.3-30.8-26.3h-28.1v79.9h16.7v-28h11.5l14.1,28h18.1l-16.7-30.8c8.7-3.4,15.2-11.1,15.2-22.7ZM821.9,566.8h-12.2v-23.8h11.8c7.8,0,13.2,4,13.2,12s-5.2,11.9-12.8,11.9Z" />
+        <path d="M895.3,528.6h-25.5v79.9h25.7c27.1,0,44.2-16.5,44.2-39.9s-17.2-39.9-44.4-39.9ZM895.3,594.2h-8.4v-51.2h8.2c17.3,0,27.4,11.2,27.4,25.6s-10.1,25.6-27.2,25.6Z" />
+      </g>
+      <g>
+        <path d="M942.7,490v-36.7c-5.6,1.1-10.6,1.4-15.6.6-13.9-1.4-20-13.6-29.7-32.2l-26.1-50.6,70-82.5h-50.6l-77.8,94.5v-94.5h-42.8v200h42.8v-56.4l28.3-32.5,25.8,48.1c16.7,32.5,30.8,44.7,55.8,44.7s15-1.1,19.7-2.5Z" />
+        <path d="M40.1,288.6v200h42.8v-56.4l28.3-32.5,25.8,48.1c16.7,32.5,30.8,44.7,55.8,44.7s15-1.1,19.7-2.5v-36.7c-5.6,1.1-10.6,1.4-15.6.6-13.9-1.4-20-13.6-29.7-32.2l-26.1-50.6,70-82.5h-50.6l-77.8,94.5v-94.5h-42.8Z" />
+        <path d="M494.4,412.6v76h42.8v-75.6c6-9.3,12.6-20.8,19.1-34.1,11.9-24.4,23.3-54.9,29.2-90.3,0-.2,0-.4.1-.6h-48.9c-6.9,50.2-21,65.8-21,65.8,0,0-13.8-15.6-20.5-65.8h-48.8c0,.2,0,.4.1.6,6.1,36.4,17.9,67.7,30.2,92.4,6.1,12.2,12.2,22.9,17.8,31.6Z" />
+        <path d="M342.7,275.9l-101.5,212.7h46.8l16.3-37h78.3l16.9,37h46.8l-101.8-212.7h-1.7ZM318,420.3c8.7-19.8,19.8-47.7,25.9-62.3,6.4,18.3,15.7,40.4,25.3,62.3h-51.2Z" />
+      </g>
+      <path d="M1003.4,394.2c5-7.7,6.4-16.5,5.7-26h-14.2c.3,5-.3,10.1-2.2,14.6l-13.5-14c6.2-3,16-9.5,16-22.2s-10.2-19.7-22.5-19.7-22.6,9.7-22.6,20.3,3.3,13.8,8.3,19.2c-7.9,4.3-15.5,11-15.5,21.2s10,22.3,29.9,22.3,15.6-2.3,21.3-6.7l4.9,5.1h18.2l-13.6-14.2ZM972.5,340.1c4.7,0,8.3,3.5,8.3,8.1s-6,9.5-10.4,11.9c-3.9-4.2-6.3-7.2-6.3-11.9s3.8-8.1,8.4-8.1ZM972.8,396.9c-9,0-14.5-4.5-14.5-10.6s4.1-8.8,8.3-11.1l17.4,18c-3.1,2.4-7.1,3.8-11.2,3.8Z" />
+      <path d="M712,464c0-.7,0-1.4,0-2.1,0-.7,0-1.4,0-2.1h-.1c-.2-14.1-1.1-27.6-2.5-40.4,15.6.3,19.3,14.3,28.4,14.3h16.7c6.3,0,4.4-10.9,1.9-18.9s-2.6-14.4-10.7-14.4h-15.4c-6,0-8,11.7-14.8,11.7s-3,0-4.6,0h-2.4c-11-83.1-44.6-136.3-44.6-136.3,0,0-33.6,53.2-44.6,136.3h-2.7c-19.3,0-20-14-29.2-14h-16.7c-6.3,0-4.4,10.9-1.9,18.9,2.5,8,2.6,14.4,10.7,14.4h15.4c6,0,8-11.7,14.8-11.7s5.2,0,8.6-.1c-1.4,12.8-2.4,26.2-2.5,40.2h-.1c0,.7,0,1.4,0,2.1,0,.7,0,1.4,0,2.1h.1c1.2,110,48.1,183.9,48.1,183.9,0,0,46.9-73.9,48.1-183.9h.1ZM663.8,351c10.2,0,19.1,24.9,23.5,61.2h-47.1c4.4-36.3,13.3-61.2,23.5-61.2ZM663.8,577.1c-14.6,0-26.5-50.6-26.5-113.1s.8-31,2.2-44.8h48.7c1.4,13.7,2.2,28.8,2.2,44.8,0,62.4-11.9,113.1-26.5,113.1Z" />
+      <g>
+        <polygon points="683.4 62.3 381.6 128.3 912 128.3 912 112.3 683.4 62.3" />
+        <polygon points="255.6 84.2 70.8 122.4 70.8 128.4 209.9 128.4 241 115.5 296.5 92.7 255.6 84.2" />
+        <polygon points="378.7 115.7 551.6 77.8 460.2 40.1 246.3 128.4 320.7 128.4 378.7 115.7" />
+      </g>
+    </svg>
+  );
+};

package/src/stories/Page.stories.ts

@@ -1,14 +1,14 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { within, userEvent, expect } from '@storybook/test';
+import type { Meta, StoryObj } from "@storybook/react";
+import { within, userEvent, expect } from "@storybook/test";
 
-import { Page } from './Page';
+import { Page } from "./Page";
 
 const meta = {
-  title: 'Example/Page',
   component: Page,
+  title: "Templates/Page",
   parameters: {
     // More on how to position stories at: https://storybook.js.org/docs/configure/story-layout
-    layout: 'fullscreen',
+    layout: "fullscreen",
   },
 } satisfies Meta<typeof Page>;
 
@@ -19,14 +19,5 @@ export const LoggedOut: Story = {};
 
 // More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
 export const LoggedIn: Story = {
-  play: async ({ canvasElement }) => {
-    const canvas = within(canvasElement);
-    const loginButton = canvas.getByRole('button', { name: /Log in/i });
-    await expect(loginButton).toBeInTheDocument();
-    await userEvent.click(loginButton);
-    await expect(loginButton).not.toBeInTheDocument();
-
-    const logoutButton = canvas.getByRole('button', { name: /Log out/i });
-    await expect(logoutButton).toBeInTheDocument();
-  },
+  play: async () => {},
 };

package/src/stories/Page.tsx

@@ -1,73 +1,124 @@
 import React from 'react';
-
+import { faker } from '@faker-js/faker';
+import { Link } from 'react-aria-components';
 import { Header } from './Header';
-import './page.css';
-
-type User = {
-  name: string;
-};
+import { Footer } from './Footer';
+import { LocationDeck } from './LocationDeck';
+import { Pricing } from './Pricing';
 
-export const Page: React.FC = () => {
-  const [user, setUser] = React.useState<User>();
+export const Page = () => {
 
   return (
-    <article>
-      <Header
-        user={user}
-        onLogin={() => setUser({ name: 'Jane Doe' })}
-        onLogout={() => setUser(undefined)}
-        onCreateAccount={() => setUser({ name: 'Jane Doe' })}
-      />
+    <>
+      <Header />
+      <main className="pelican wrap">
+        <section>
+          <h2 className="page-title">
+            {faker.company.catchPhrase()}
+          </h2>
+          <div className="margin-block-end-aconcagua">
+            <p>{faker.lorem.sentences(5)}</p>
+          </div>
+
+          <LocationDeck
+            background={false}
+          />
+
+          <div className="button__double">
+            <a
+              href={faker.commerce.isbn()}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="book-now"
+              title={`book rental kayaks and paddleboards with ${faker.location.city()}`}
+            >
+              RENTALS<br />
+              BOOK NOW
+            </a>
+
+            <a
+              href={faker.commerce.isbn()}
+              target="_blank"
+              rel="noopener noreferrer"
+              className="book-now"
+              title={`book rental kayaks and paddleboards with ${faker.location.city()}`}
+            >
+              TOURS<br />
+              BOOK NOW
+            </a>
+          </div>
+
+        </section>
+
+        <div>
+          {/* <div className="home__photo-grid"> */}
+          {/* <GatsbyImage
+              image={data.southlakefriends.image.localFile.childImageSharp.gatsbyImageData}
+              alt={data.southlakefriends.title}
+              className='img__wrapped hero'
+            /> */}
+          {/* // ? this seems like every time it would have that classname */}
+          {/* <WaterTexture className="texture" /> */}
+          {/* <GatsbyImage
+              image={data.goldshed.image.localFile.childImageSharp.gatsbyImageData}
+              alt={data.southlakefriends.title}
+              className='img__wrapped inset'
+            /> */}
+          {/* </div> */}
+
+          <Pricing book={true} />
+        </div>
+      </main>
+
+      <section id="tours" className="pelican water">
+        <div>
+          {/* // TODO: only one h and then p */}
+          <hgroup className="crest">
+            <h3 className="brow"><Link href="/tours">Tours</Link></h3>
+            {/* think about capitalization here */}
+            <h4 className="supra">Enjoy The Majesty Of Lake Tahoe</h4>
+          </hgroup>
+
+          <p>{faker.lorem.sentences(2)}</p>
+
+          <h4>
+            <Link href="/tours/compare">Compare Tours</Link>
+          </h4>
+        </div>
+        <div>{/* stay gold */}</div>
+      </section>
+
+      {/* <div className="deck">
+        {data.allStrapiTour.nodes.map((tour) => (
+          <div key={tour.id}>
+            <Ticket tour={tour} />
+          </div>
+        ))}
+      </div> */}
+
+      <section id="retail" className="pelican water">
+        <article>
+          {/* // TODO: only one h and then p */}
+          <hgroup className="crest">
+            <h3 className="brow">
+              <a
+                href={faker.internet.domainName()}
+                target="_blank"
+                rel='noopener noreferrer'
+              >
+                Retail Store
+              </a>
+            </h3>
+            <h4 className="supra">Kayaks and Paddleboards</h4>
+          </hgroup>
 
-      <section className="storybook-page">
-        <h2>Pages in Storybook</h2>
-        <p>
-          We recommend building UIs with a{' '}
-          <a href="https://componentdriven.org" target="_blank" rel="noopener noreferrer">
-            <strong>component-driven</strong>
-          </a>{' '}
-          process starting with atomic components and ending with pages.
-        </p>
-        <p>
-          Render pages with mock data. This makes it easy to build and review page states without
-          needing to navigate to them in your app. Here are some handy patterns for managing page
-          data in Storybook:
-        </p>
-        <ul>
-          <li>
-            Use a higher-level connected component. Storybook helps you compose such data from the
-            "args" of child component stories
-          </li>
-          <li>
-            Assemble data in the page component from your services. You can mock these services out
-            using Storybook.
-          </li>
-        </ul>
-        <p>
-          Get a guided tutorial on component-driven development at{' '}
-          <a href="https://storybook.js.org/tutorials/" target="_blank" rel="noopener noreferrer">
-            Storybook tutorials
-          </a>
-          . Read more in the{' '}
-          <a href="https://storybook.js.org/docs" target="_blank" rel="noopener noreferrer">
-            docs
-          </a>
-          .
-        </p>
-        <div className="tip-wrapper">
-          <span className="tip">Tip</span> Adjust the width of the canvas with the{' '}
-          <svg width="10" height="10" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
-            <g fill="none" fillRule="evenodd">
-              <path
-                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
-                id="a"
-                fill="#999"
-              />
-            </g>
-          </svg>
-          Viewports addon in the toolbar
+          <p>{faker.lorem.sentences(2)}</p>
+        </article>
+        <div>
+          {/* stay gold */}
         </div>
       </section>
-    </article>
+      <Footer />
+    </>
   );
 };