@rileybathurst/paddle 0.0.18 → 0.0.19

package/package.json

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

package/src/PaddleTestimonials.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+
+interface TestimonialsTypes {
+  testimonials: TestimonialTypes[];
+}
+
+interface TestimonialTypes {
+  id: React.Key;
+  testimonial: string;
+  sign: string;
+  customer: string;
+  location: string;
+}
+
+export const PaddleTestimonials = ({ testimonials }: TestimonialsTypes) =>
+  <ul className='testimonials vulture'>
+    {testimonials.map((testimonial: TestimonialTypes) => (
+      <li key={testimonial.id}>
+        <p className='elbrus'><span className='denali font-serif'>&ldquo;</span>{testimonial.testimonial}<span className='denali font-serif'>&rdquo;</span></p>
+        <p>{testimonial.sign} {testimonial.customer}</p>
+        <p className='kosciuszko'>{testimonial.location}</p>
+      </li>
+    ))}
+  </ul>

package/src/index.tsx

@@ -1,4 +1,11 @@
 // eslint-disable-next-line react-refresh/only-export-components
+
+// Atoms
 export * from "./PaddleBookNow";
+export * from "./PaddleTime";
+
+// Molecules
 export * from "./PaddleComposition";
-export * from "./PaddleTime";
+
+// Organisms
+export * from "./PaddleTestimonials";

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

package/src/stories/Testimonial.tsx

@@ -0,0 +1,24 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+
+interface TestimonialProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Testimonial = ({
+  primary = false,
+  ...props
+}: TestimonialProps) => {
+
+  return (
+    <li
+      key={faker.string.alphanumeric()}
+    >
+      <p className='elbrus'><span className='denali font-serif'>&ldquo;</span>{faker.lorem.sentence()}<span className='denali font-serif'>&rdquo;</span></p>
+      <p>{faker.helpers.arrayElement(['Thank You,', 'Sincerely,', null])} {faker.person.firstName()}</p>
+      <p className='kosciuszko'>{faker.location.city()}</p>
+    </li>
+  );
+};

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

package/src/stories/Testimonials.tsx

@@ -0,0 +1,42 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import { Testimonial } from './Testimonial';
+
+function Deal() {
+
+  const hand = faker.number.int(10);
+  console.log(hand);
+
+  if (hand < 1) {
+    return (
+      <h1>There are no cards available</h1>
+    );
+  }
+
+  const content = [];
+  for (let i = 0; i < hand; i++) {
+    content.push(
+      <Testimonial />
+    );
+  }
+
+  return (<>{content}</>);
+}
+
+interface TestimonialsProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Testimonials = ({
+  primary = false,
+  ...props
+}: TestimonialsProps) => {
+
+  return (
+    <ul className='testimonials vulture'>
+      <Deal />
+    </ul>
+  );
+};

package/src/styles/app.css

@@ -10,4 +10,5 @@
 @import "typography";
 @import "links";
 @import "buttons";
+@import "lists";
 @import "a11y";

package/src/styles/body.css

@@ -1,11 +1,4 @@
 body {
   margin: 0; /* reset */
   font-size: 16px;
-  background-color: whitesmoke;
-  color: var(--black-metal);
-
-  /* @media (prefers-color-scheme: dark) { */
-  /* background-color: var(--ink-300); */
-  /* color: var(--kingly-cloud); */
-  /* } */
 }

package/src/styles/buttons.css

@@ -4,7 +4,6 @@
 
 button,
 .button,
-.button__mullen,
 .book-now {
   background: none;
   border-radius: 0.25rem;
@@ -17,62 +16,20 @@ button,
   line-height: 1.5rem;
   text-decoration: none;
   width: max-content;
-
-  color: var(--mullen);
-  border: 1px solid var(--mullen);
+  border: 1px solid;
   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);
+.button__hover {
   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);
+button:active {
   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);
 }
 
 /*------------------*/

package/src/styles/color.css

@@ -7,12 +7,5 @@
 /*------------------------------------*/
 
 .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/links.css

@@ -2,17 +2,8 @@
 /* #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;
 }
 
@@ -23,11 +14,3 @@ a.hover {
 .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/lists.css

@@ -0,0 +1,17 @@
+/*------------------*/
+/* #TESTIMONIALS */
+/*------------------*/
+
+.testimonials {
+  list-style: none;
+  padding-inline-start: 0; /* reset */
+
+  li:not(:last-child) {
+    border-block-end: 1px solid;
+    margin-block-end: var(--vinson);
+  }
+
+  .content::before {
+    content: "“";
+  }
+}

package/src/styles/media.css

@@ -7,8 +7,6 @@
   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;
@@ -19,15 +17,6 @@
     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;
@@ -47,7 +36,5 @@
   svg {
     width: 100%;
     max-height: 10rem;
-    /* the logo isnt symetrical */
-    padding-inline-start: 2rem; /* guess and check number */
   }
 }

package/src/styles/typography.css

@@ -8,12 +8,6 @@ body {
   line-height: 1.25rem; /* 20px */
 }
 
-p {
-  margin-block-start: 0;
-  margin-block-end: var(--baseline);
-  font-family: var(--body_font);
-}
-
 h1,
 h2,
 h3 {
@@ -29,6 +23,13 @@ h6 {
   margin-block-start: 0; /* reset */
 }
 
+h3,
+h4,
+h5,
+h6 {
+  font-weight: 400;
+}
+
 h1 {
   margin-top: 0; /* browser reset */
   font-size: 3rem; /* 48px */
@@ -54,8 +55,7 @@ h2,
 }
 
 h3,
-/* TODO: this should be the font mountains */
-.h3 {
+.denali {
   font-size: 2rem; /* 32px */
   line-height: 2.5rem; /* 40px */
   margin-bottom: 1.875rem; /* 30px */
@@ -66,9 +66,9 @@ h3,
 
 h4,
 .kilimanjaro,
-.h4,
 .brow,
 .page-title,
+/* .spec h2 put this inline */
 .spec h2 {
   font-size: 1.5rem; /* 24px */
   line-height: 2rem; /* 32px */
@@ -78,7 +78,8 @@ h4,
   /* multi lines + 32px🚨 each */
 }
 
-h5 {
+h5,
+.elbrus {
   font-size: 1.25rem; /* 20px */
   line-height: 1.875rem; /* 30px */
   margin-bottom: 0.625rem; /* 10px */
@@ -100,6 +101,7 @@ h6,
 
 /* start the multi line problem here as itll be worst */
 small,
+.kosciuszko,
 .two-small-lines,
 .multiple-small-lines {
   font-size: 0.75rem; /* 12px */
@@ -119,6 +121,18 @@ address {
   font-style: normal;
 }
 
+p {
+  margin-block-start: 0;
+  margin-block-end: var(--baseline);
+  font-family: var(--body_font);
+}
+
+/*------------------*/
+
+.font-serif {
+  font-family: var(--font-serif);
+}
+
 .two-small-lines {
   margin-bottom: 0.5rem; /* 8px */
   /* two lines 40px */
@@ -131,26 +145,10 @@ address {
 /* default use on whitesmoke background */
 hr {
   border: none; /* reset */
-  border-bottom: 1px solid var(--tin-soldier);
-
-  /* default useage on hsl(var(--ink__h), 50%, 5%); */
-  @media (prefers-color-scheme: dark) {
-    border-bottom: 1px solid var(--black-out);
-  }
-}
-
-/* for use on a sand background */
-/* name is hard */
-/* its only on sand on light */
-/* its darker on light only */
-/* maybe step 2 */
-/* rename it if I get a better idea */
-/* only use the class when needed try put it on the class with the background */
-.hr-step2 {
-  border-color: var(--tin-soldier);
+  border-bottom: 1px solid;
 
   @media (prefers-color-scheme: dark) {
-    border-color: var(--raven-black);
+    border-bottom: 1px solid;
   }
 }
 
@@ -175,10 +173,6 @@ hr.no {
   font-family: var(--heading_font);
 }
 
-.mullen {
-  color: var(--navy);
-}
-
 /*------------------*/
 /* #HEADINGS */
 /*------------------*/
@@ -190,17 +184,6 @@ hgroup {
   align-items: baseline;
 }
 
-/*------------------*/
-/* #DEL */
-/*------------------*/
-
-del {
-  color: hsl(var(--sand__base), var(--dim));
-  @media (prefers-color-scheme: dark) {
-    color: hsl(var(--sand__base), var(--dark));
-  }
-}
-
 /*------------------*/
 /* #CREST */
 /*------------------*/

package/src/styles/variables.css

@@ -20,7 +20,6 @@
   --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%);
@@ -81,6 +80,7 @@
 
   --body_font: "Barlow", Arial, sans-serif;
   --heading_font: "Barlow Condensed", Arial, sans-serif;
+  --font-serif: Georgia, serif; /* TODO: add serif font that matches nicely */
 
   --baseline: 1.25rem; /* 20px */