@rileybathurst/paddle 0.0.4 → 0.0.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rileybathurst/paddle",
   "private": false,
-  "version": "0.0.4",
+  "version": "0.0.6",
   "type": "module",
   "scripts": {
     "dev": "vite",

package/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

package/src/Button.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+interface ButtonTypes {
+  peek_base: string
+  strapiLocaleName: string
+}
+export const Button = ({ peek_base, strapiLocaleName }: ButtonTypes) =>
+  <a
+    href={peek_base}
+    rel="noopener noreferrer"
+    className="book-now"
+    title={`Book now with ${strapiLocaleName} kayak and paddleboard`}
+  >
+    BOOK NOW
+  </a>

package/src/index.tsx

@@ -1 +1,2 @@
-export * from "./Test";
+import * as React from "react";
+export * from "./Button";

package/src/stories/Button.stories.tsx

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

package/src/stories/Button.tsx

@@ -1,49 +1,29 @@
-// import React from 'react';
-
-import './button.css';
+// this is the Name.tsx file
+import React from 'react';
 
 interface ButtonProps {
-  /**
-   * Is this the principal call to action on the page?
-   */
   primary?: boolean;
-  /**
-   * What background color to use
-   */
-  backgroundColor?: string;
-  /**
-   * How large should the button be?
-   */
-  size?: 'small' | 'medium' | 'large';
-  /**
-   * Button contents
-   */
-  label: string;
-  /**
-   * Optional click handler
-   */
   onClick?: () => void;
 }
 
-/**
- * Primary UI component for user interaction
- */
 export const Button = ({
   primary = false,
-  size = 'medium',
-  backgroundColor,
-  label,
   ...props
 }: ButtonProps) => {
-  const mode = primary ? 'storybook-button--primary' : 'storybook-button--secondary';
+
   return (
-    <button
-      type="button"
-      className={['storybook-button', `storybook-button--${size}`, mode].join(' ')}
-      style={{ backgroundColor }}
+    <main
       {...props}
     >
-      {label}
-    </button>
+      {primary ? 'primary' : 'secondary'}
+      <button type='button'>Button</button>
+      <button className='button__hover' type='button'>Hover</button>
+      <button className='button__active' type='button'>Active</button>
+      <hr />
+      <button className='button__mullen' type='button'>Button Mullen</button>
+      <button className='button__mullen--hover' type='button'>Mullen Hover</button>
+      <button className='button__mullen--active' type='button'>Mullen Active</button>
+      <p>// TODO: I have some problems with this I dont like the pink</p>
+    </main>
   );
-};
+};

package/src/stories/Header.tsx

@@ -1,7 +1,8 @@
 // import React from 'react';
 
-import { Button } from './Button';
+// import { Button } from './Button';
 import './header.css';
+import { Button } from '@rileybathurst/puddle';
 
 type User = {
   name: string;
@@ -50,6 +51,9 @@ export const Header = ({ user, onLogin, onLogout, onCreateAccount }: HeaderProps
             <Button primary size="small" onClick={onCreateAccount} label="Sign up" />
           </>
         )}
+
+        <hr />
+        <Button />
       </div>
     </div>
   </header>

package/src/styles/app.css

@@ -2,5 +2,6 @@
 /* #PADDLE */
 /*------------------------------------*/
 
-/* @import "variables"; */
+@import "variables";
 @import "body";
+@import "buttons";

package/src/styles/body.css

@@ -2,8 +2,6 @@ body {
   margin: 0; /* reset */
   font-size: 16px;
   background-color: whitesmoke;
-  /* ! testing */
-  background-color: hotpink;
   color: var(--black-metal);
 
   /* @media (prefers-color-scheme: dark) { */

package/src/styles/buttons.css

@@ -0,0 +1,84 @@
+/*------------------------------------*/
+/* #BUTTONS */
+/*------------------------------------*/
+
+button,
+.button,
+.button__mullen,
+.book-now {
+  background: none;
+  border-radius: 0.25rem;
+  padding: 0.5rem 1rem;
+  font-size: 1rem;
+  cursor: pointer;
+  margin-block-end: var(--baseline);
+  transition: 0.5s ease;
+  display: block;
+  line-height: 1.5rem;
+  text-decoration: none;
+  width: max-content;
+
+  color: var(--mullen);
+  border: 1px solid var(--mullen);
+  box-shadow: var(--penumbra);
+}
+
+button:hover,
+.button:hover,
+/* below is for the storyboard showcase */
+.button__hover,
+.button__mullen:hover,
+.button__mullen--hover,
+/* this is a weird thing you maybe need */
+.button__mullen--hover:hover {
+  color: var(--mullen-200);
+  border-color: var(--mullen-200);
+  box-shadow: var(--antumbra);
+
+  /* TODO this doesnt do enough in dark to see the change */
+  @media (prefers-color-scheme: dark) {
+    color: var(--mullen);
+  }
+}
+
+.button__active,
+button:active,
+.button__mullen:active,
+.button__mullen--active {
+  border-color: var(--mullen-300);
+  color: var(--mullen-300);
+  box-shadow: var(--antumbra);
+  box-shadow: var(--umbra);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--mullen-300);
+    color: var(--black-metal);
+  }
+}
+
+.button__mullen {
+  background-color: var(--mullen);
+  color: var(--brilliance);
+}
+
+.button__mullen:hover,
+.button__mullen--hover,
+/* this is a weird thing you maybe need */
+.button__mullen--hover:hover {
+  background-color: var(--mullen-300);
+  color: var(--tin-soldier);
+}
+
+.button__mullen:active,
+.button__mullen--active {
+  background-color: var(----black-out);
+  color: var(--industrial-revolution);
+}
+
+/*------------------*/
+/* #MENU */
+/*------------------*/
+
+menu button {
+  margin: 0;
+}

package/src/styles/variables.css

@@ -0,0 +1,140 @@
+:root {
+  /*------------------*/
+  /* #PADDLE STYLES */
+  /*------------------*/
+
+  /*------------------------------------*/
+  /* #COLOR */
+  /*------------------------------------*/
+
+  /* TAHOE CITY KAYAK */
+
+  --mullen: hsl(0, 50%, 50%); /* #bf4040 */
+  --mullen-100: hsl(0, 50%, 50%); /* base */
+  --mullen-200: hsl(0, 50%, 37.5%);
+  --mullen-300: hsl(0, 50%, 25%);
+
+  --sand: hsl(25, 37%, 95%);
+  --sand-100: hsl(25, 37%, 95%); /* base */
+  --sand-150: hsl(25, 37%, 92.5%);
+  --sand-200: hsl(25, 37%, 87.5%);
+  --sand-300: hsl(25, 37%, 75%);
+
+  /* TODO */
+  --ink: hsl(210, 50%, 12.5%); /* base */
+  --ink-100: hsl(210, 50%, 12.5%);
+  --ink-200: hsl(210, 50%, 7.5%);
+  --ink-300: hsl(210, 50%, 5%);
+
+  /*------------------------------------*/
+  /* #SOUTH TAHOE KAYAK */
+  /*------------------------------------*/
+  /* needed for storybook */
+
+  --navy-200: oklch(75% 0.12 230);
+  --navy-300: oklch(62.5% 0.14 230);
+  --navy-400: oklch(50% 0.14 230); /* base */
+  --navy: oklch(50% 0.14 230);
+  --navy-500: oklch(37.5% 0.14 230);
+  --navy-600: oklch(25% 0.12 230);
+
+  --sunshine-100: oklch(97.5% 0.025 95);
+  --sunshine-200: oklch(95% 0.05 95);
+  --sunshine-300: oklch(92.5% 0.1 95);
+  --sunshine-400: oklch(90% 0.15 95);
+  --sunshine-500: oklch(87.5% 0.2 95); /* base */
+  --sunshine: oklch(87.5% 0.2 95);
+
+  /*------------------------------------*/
+
+  --card-radius: 0.25rem;
+
+  /*------------------*/
+  /* #NEUTRALS */
+  /*------------------*/
+
+  /* louie variables */
+  --pitch: 2.5%;
+  --dark: 12.5%;
+  --dull: 25%;
+  --dim: 37.5%;
+  --mid: 50%;
+  --glow: 62.5%;
+  --light: 75%;
+  --bright: 87.5%;
+  --brilliant: 97.5%;
+
+  /* louie neutrals */
+  --black-metal: hsl(210, 25%, 2.5%);
+  --black-out: hsl(210, 25%, 12.5%);
+  --raven-black: hsl(210, 12.5%, 25%);
+  --industrial-revolution: hsl(210, 7.5%, 37.5%);
+  --grey: hsl(210, 7.5%, 50%);
+  --cold-grey: hsl(210, 7.5%, 62.5%);
+  --tin-soldier: hsl(210, 12.5%, 75%);
+  --kingly-cloud: hsl(210, 18.75%, 87.5%);
+  --brilliance: hsl(210, 25%, 97.5%);
+
+  /*------------------*/
+  /* #TYPOGRAPHY */
+  /*------------------*/
+
+  --body_font: "Barlow", Arial, sans-serif;
+  --heading_font: "Barlow Condensed", Arial, sans-serif;
+
+  --baseline: 1.25rem; /* 20px */
+
+  /* 🏔 7 Summits */
+  --everest: 3rem; /* 29,035ft Asia */
+  --aconcagua: 2.5rem; /* 22,840ft South America */
+  --denali: 2rem; /* 20,320ft North America */
+  --kilimanjaro: 1.5rem; /* 19,340ft Africa */
+  --elbrus: 1.25rem; /* 18,510ft Europe / Russia */ /* * baseline */
+  --vinson: 1rem; /* 16,050ft Antartica */
+  --kosciuszko: 0.75rem; /* 7,310ft Australia */
+
+  /*------------------*/
+  /* #SHADOWS */
+  /*------------------*/
+
+  /* Umbra is direct light - dark - for active down clicks */
+  /* Antumbra is eclipsed - medium - for hover */
+  /* Penumbra is obscured - light - for layering but waiting */
+
+  --penumbra: 0 3px 6px hsla(0, 0%, 0%, 0.12), 0 2px 4px hsla(0, 0%, 0%, 0.1);
+  --antumbra: 0 14px 24px hsla(0, 0%, 0%, 0.16),
+    0 4px 12px hsla(0, 0%, 0%, 0.12);
+  --umbra: 0 5px 12px hsla(0, 0%, 0%, 0.4) /* Ambient light shadow */,
+    0 18px 32px hsla(0, 0%, 0%, 0.16) /* Direct light shadow */;
+
+  /* shadows on dark backgrounds */
+  --penumbra--dark: 0 3px 6px hsla(0, 0%, 100%, 0.12),
+    0 2px 4px hsla(0, 0%, 100%, 0.1);
+
+  /*------------------*/
+  /* #WIDTHS */
+  /* https://en.wikipedia.org/wiki/Largest_living_flying_birds_by_wingspan */
+  /*------------------*/
+  --swan: 20rem;
+  --vulture: 30rem;
+  --stork: 40rem;
+  --condor: 50rem;
+  --pelican: 60rem;
+  --albatross: 80rem;
+
+  /*------------------*/
+  /* #Z INDEX */
+  /* https://en.wikipedia.org/wiki/Forest */
+  /*------------------*/
+
+  --floor: 1;
+  --understory: 2;
+  --canopy: 3;
+  --emergent: 4;
+
+  /*------------------*/
+  /* #TRANSITIONS */
+  /*------------------*/
+  --easing: cubic-bezier(0.5, 0, 0.5, 1);
+  --fade: 0.2s var(--easing);
+}

package/src/stories/Button.stories.ts

@@ -1,52 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { fn } from '@storybook/test';
-import { Button } from './Button';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
-  title: 'Example/Button',
-  component: Button,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
-  },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-  // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-  args: { onClick: fn() },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Primary: Story = {
-  args: {
-    primary: true,
-    label: 'Button',
-  },
-};
-
-export const Secondary: Story = {
-  args: {
-    label: 'Button',
-  },
-};
-
-export const Large: Story = {
-  args: {
-    size: 'large',
-    label: 'Button',
-  },
-};
-
-export const Small: Story = {
-  args: {
-    size: 'small',
-    label: 'Button',
-  },
-};

package/src/stories/button.css

@@ -1,30 +0,0 @@
-.storybook-button {
-  font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
-  font-weight: 700;
-  border: 0;
-  border-radius: 3em;
-  cursor: pointer;
-  display: inline-block;
-  line-height: 1;
-}
-.storybook-button--primary {
-  color: white;
-  background-color: #1ea7fd;
-}
-.storybook-button--secondary {
-  color: #333;
-  background-color: transparent;
-  box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
-}
-.storybook-button--small {
-  font-size: 12px;
-  padding: 10px 16px;
-}
-.storybook-button--medium {
-  font-size: 14px;
-  padding: 11px 20px;
-}
-.storybook-button--large {
-  font-size: 16px;
-  padding: 12px 24px;
-}