@rileybathurst/paddle 0.0.23 → 0.0.24

package/package.json

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

package/src/PaddleComposition.tsx

@@ -1,4 +1,5 @@
 import * as React from "react"
+// ! this isnt finished it wont have faker when its done
 import { faker } from '@faker-js/faker';
 // import { GatsbyImage } from "gatsby-plugin-image"
 
@@ -27,6 +28,7 @@ function TopThree({ className }: TopThreeTypes) {
 return null;
 } */
 
+
 interface CompositionTypes {
   sport?: string;
 }

package/src/PaddleSocials.tsx

@@ -0,0 +1,44 @@
+import * as React from "react"
+
+import FacebookIcon from "./assets/facebook-icon"
+import InstagramIcon from "./assets/instagram-icon"
+import TripAdvisorIcon from "./assets/tripadvisor-icon"
+
+interface SocialsTypes {
+  instagram: string
+  facebook: string
+  tripadvisor: string
+}
+export const PaddleSocials = ({ instagram, facebook, tripadvisor }: SocialsTypes) =>
+  <div className="social">
+    {facebook ?
+      <a
+        href={facebook}
+        target='_blank' rel='noopener noreferrer'
+        aria-label='facebook link'
+      >
+        <FacebookIcon />
+      </a>
+      : null
+    }
+    {instagram ?
+      <a href={instagram}
+        target='_blank'
+        rel='noopener noreferrer'
+        aria-label='instagram link'
+      >
+        <InstagramIcon />
+      </a>
+      : null
+    }
+    {tripadvisor ?
+      <a href={tripadvisor}
+        target='_blank'
+        rel='noopener noreferrer'
+        aria-label='tripadvisor link'
+      >
+        <TripAdvisorIcon />
+      </a>
+      : null
+    }
+  </div>

package/src/PaddleTime.tsx

@@ -1,7 +1,5 @@
 // import * as React from "react"
 
-import { en } from "@faker-js/faker";
-
 interface TimeTypes {
   start?: string | null;
   finish?: string | null;

package/src/assets/facebook-icon.tsx

@@ -0,0 +1,26 @@
+import * as React from "react";
+
+const FacebookIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 1024 1024"
+      className="facebook"
+    >
+      <title>facebook page</title>
+      <g>
+        <path
+          className="circle"
+          d="M1024,512C1024,229.2,794.8,0,512,0S0,229.2,0,512c0,255.6,187.2,467.4,432,505.8V660H302V512h130V399.2
+		C432,270.9,508.4,200,625.4,200c56,0,114.6,10,114.6,10v126h-64.6c-63.6,0-83.4,39.5-83.4,80v96h142l-22.7,148H592v357.8
+		C836.8,979.4,1024,767.6,1024,512z"/>
+        <path
+          className="f"
+          d="M711.3,660L734,512H592v-96c0-40.5,19.8-80,83.4-80H740V210c0,0-58.6-10-114.6-10
+		c-117,0-193.4,70.9-193.4,199.2V512H302v148h130v357.8c26.1,4.1,52.8,6.2,80,6.2s53.9-2.1,80-6.2V660H711.3z"/>
+      </g>
+    </svg>
+  );
+};
+
+export default FacebookIcon;

package/src/assets/instagram-icon.tsx

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+// I got this from the instagram website rather than the brand book as that one was a mess
+const InstagramIcon = () => {
+  return (
+    <svg
+      viewBox="0 0 80 81"
+      fill="url(#jsc_s_2)"
+      className="instagram"
+    >
+      <title>instagram logo</title>
+      <defs>
+        <linearGradient x1="69.27%" x2="128.20%" y1="129.46%" y2="29.46%" id="jsc_s_2">
+          <stop offset="0" stopColor="#FDD074" />
+          <stop offset="25%" stopColor="#F77F34" />
+          <stop offset="50%" stopColor="#DD326E" />
+          <stop offset="75%" stopColor="#D82B7E" />
+          <stop offset="100%" stopColor="#A432B1" />
+        </linearGradient>
+      </defs>
+      <path d="m43.655 0 5.21.025 3.4.055 2.74.095L56.49.24c4.26.195 7.165.87 9.71 1.86 2.63 1.025 4.86 2.39 7.085 4.615 2.225 2.225 3.595 4.46 4.615 7.09.88 2.26 1.51 4.81 1.775 8.34l.19 3.775.09 3.59.045 6.855-.03 12.835-.075 4.015-.135 3.3c-.195 4.26-.87 7.17-1.86 9.715-1.02 2.63-2.39 4.865-4.615 7.09-2.225 2.225-4.455 3.59-7.085 4.615-2.26.88-4.81 1.51-8.335 1.775l-4.3.205-3.78.085-6.13.035-12.835-.03-4.01-.075-3.3-.135c-4.26-.195-7.165-.87-9.71-1.86-2.63-1.025-4.865-2.39-7.085-4.615C4.49 71.095 3.12 68.86 2.1 66.23 1.22 63.97.59 61.42.325 57.89l-.15-2.86-.095-2.745-.055-3.395L0 42.545l.025-11.4.055-3.395.095-2.745.065-1.485c.195-4.26.87-7.17 1.86-9.715 1.02-2.63 2.39-4.865 4.615-7.09C8.935 4.49 11.17 3.125 13.8 2.1c2.26-.88 4.81-1.51 8.34-1.775l2.855-.15 2.74-.095 3.4-.055L36.345 0h7.31zm5.09 7.235h-17.49l-3.03.045-4.39.165a32.326 32.326 0 0 0-3.294.307l-.599.097a20.85 20.85 0 0 0-1.316.273l-.46.117c-.148.04-.29.08-.426.121l-.93.31-.4.15c-1.87.73-3.2 1.595-4.6 2.995-1.4 1.4-2.265 2.735-2.99 4.6l-.31.845-.136.432c-.362 1.201-.705 2.817-.874 5.133l-.09 1.7-.13 3.57-.065 6.18.015 14.255.08 4.41.13 3.25a31.47 31.47 0 0 0 .344 3.534l.098.57c.017.092.034.182.052.27l.108.511.113.474c.019.076.038.151.058.224l.117.424.12.393.06.185.31.845c.725 1.865 1.59 3.2 2.99 4.6 1.4 1.4 2.73 2.27 4.6 2.995l.845.305.378.121.2.06.423.118c.073.02.148.04.224.058l.473.113.51.108.55.102c1.044.18 2.296.32 3.822.39l4.875.175 6.515.055 14.115-.025 3.58-.07 3.245-.135c1.526-.07 2.778-.21 3.822-.39l.55-.102.51-.108.473-.113.224-.058.423-.118.393-.12.185-.061.845-.305c1.87-.725 3.2-1.595 4.6-2.995 1.4-1.4 2.265-2.735 2.995-4.6l.305-.845c.41-1.24.82-2.96 1.01-5.565l.19-4.245.08-4.285.02-6.18-.02-11.145-.08-4.285-.13-3.225a33.046 33.046 0 0 0-.262-2.977l-.093-.622c-.049-.3-.1-.582-.155-.85l-.112-.516a18.598 18.598 0 0 0-.116-.479l-.12-.442-.062-.209-.38-1.135-.075-.2c-.73-1.865-1.595-3.2-2.995-4.6-1.4-1.4-2.73-2.265-4.6-2.995l-.4-.15-.93-.31-.229-.066-.488-.13c-1.102-.279-2.505-.525-4.358-.659L54.21 7.36l-2.435-.08-3.03-.045z" />
+      <path d="M40 19.47c11.345 0 20.54 9.2 20.54 20.545 0 11.35-9.195 20.55-20.54 20.55-11.345 0-20.54-9.2-20.54-20.55C19.46 28.67 28.655 19.47 40 19.47zm0 7.21c-7.365 0-13.335 5.97-13.335 13.335 0 7.37 5.97 13.34 13.335 13.34 7.365 0 13.335-5.97 13.335-13.34 0-7.365-5.97-13.335-13.335-13.335zM66.15 18.65a4.801 4.801 0 1 1-9.598-.002 4.801 4.801 0 0 1 9.598.002z" />
+    </svg>
+  );
+};
+
+export default InstagramIcon;

package/src/assets/tripadvisor-icon.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+const TripadvisorIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 696.6 696.6"
+      className="tripadvisor"
+    >
+      <title>tripadvisor logo</title>
+      <circle cx="348.3" cy="348.3" r="348.3" />
+      <path d="M563.4,280.3l42-45.8h-93.2c-98.8-67.3-228.8-67.3-327.6,0h-93.4l42,45.8c-52.2,48-55.7,129.3-7.6,181.6,48,52.2,129.3,55.7,181.6,7.6l41.2,44.8,41.2-44.8c52.1,48.2,133.4,44.9,181.6-7.2,48.2-52.1,44.9-133.4-7.2-181.6-.2-.1-.3-.3-.5-.4ZM219.8,462.2c-48,0-87-39-87-87s39-87,87-87,87,39,87,87h0c0,48-39,87-87,87ZM348.3,372.8c0-57.2-41.6-106.3-96.5-127.3,61.8-25.7,131.2-25.7,193,0-54.8,21-96.5,70.1-96.5,127.3h0ZM476.8,462.2c-48,0-87-39-87-87s39-87,87-87,87,39,87,87h0c0,48-39,87-87,87ZM476.8,329.7c-25.2,0-45.6,20.4-45.6,45.6s20.4,45.6,45.6,45.6,45.6-20.4,45.6-45.6h0c0-25.2-20.4-45.6-45.6-45.6h0ZM265.4,375.2c0,25.2-20.4,45.6-45.5,45.6-25.2,0-45.6-20.4-45.6-45.5,0-25.2,20.4-45.6,45.5-45.6s45.6,20.4,45.6,45.5h0Z" />
+    </svg>
+  );
+};
+
+export default TripadvisorIcon;

package/src/index.tsx

@@ -9,6 +9,7 @@ export * from "./PaddleTime";
 
 // Molecules
 export * from "./PaddleComposition";
+export * from "./PaddleSocials";
 
 // Organisms
 export * from "./PaddleTestimonials";

package/src/stories/Footer.tsx

@@ -5,6 +5,7 @@ import { faker } from '@faker-js/faker';
 
 import { Pricing } from './Pricing';
 import { LocationDeck } from './LocationDeck';
+import { Socials } from './Socials';
 
 function Deal() {
 
@@ -68,26 +69,7 @@ export const Footer = ({
           >
             {faker.internet.email()}
           </a>
-          <div className="social">
-            {/* {useSiteMetadata().social?.facebook ?? */}
-            <a
-              href={faker.location.city()}
-              target='_blank' rel='noopener noreferrer'
-              aria-label={`${faker.location.city()} facebook`}
-            >
-              {/* <FacebookIcon /> */}
-            </a>
-            {/* } */}
-            {/* {useSiteMetadata().social?.instagram ?? */}
-            <a href={faker.location.city()}
-              target='_blank'
-              rel='noopener noreferrer'
-              aria-label={`${faker.location.city()} instagram`}
-            >
-              {/* <InstagramIcon /> */}
-            </a>
-            {/* } */}
-          </div>
+          <Socials />
         </div>
         <hr />
         <div className="footer__locations">

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

package/src/stories/Socials.tsx

@@ -0,0 +1,50 @@
+// this is the Name.tsx file
+import React from 'react';
+import { faker } from '@faker-js/faker';
+import FacebookIcon from '../assets/facebook-icon';
+import InstagramIcon from '../assets/instagram-icon';
+import TripadvisorIcon from '../assets/tripadvisor-icon';
+
+interface SocialsProps {
+  primary?: boolean;
+  onClick?: () => void;
+}
+
+export const Socials = ({
+  primary = false,
+  ...props
+}: SocialsProps) => {
+
+  return (
+    <main className="social">
+      {/* // TODO: boolean check on socials */}
+      {/* {useSiteMetadata().social?.facebook ?? */}
+      <a
+        href={faker.location.city()}
+        target='_blank' rel='noopener noreferrer'
+        aria-label={`${faker.location.city()} facebook`}
+      >
+        <FacebookIcon />
+      </a>
+      {/* } */}
+      {/* {useSiteMetadata().social?.instagram ?? */}
+      <a href={faker.location.city()}
+        target='_blank'
+        rel='noopener noreferrer'
+        aria-label={`${faker.location.city()} instagram`}
+      >
+        <InstagramIcon />
+      </a>
+      {/* } */}
+      {/* {useSiteMetadata().social?.instagram ?? */}
+      <a href={faker.location.city()}
+        target='_blank'
+        rel='noopener noreferrer'
+        aria-label={`${faker.location.city()} tripadvisor`}
+      >
+        <TripadvisorIcon />
+      </a>
+      {/* } */}
+    </main>
+  );
+};

package/src/styles/app.css

@@ -6,7 +6,7 @@
 @import "body";
 @import "layout";
 @import "media";
-/* @import "color"; */
+@import "color";
 @import "typography";
 @import "links";
 @import "buttons";

package/src/styles/color.css

@@ -2,6 +2,16 @@
 /* #COLOR */
 /*------------------------------------*/
 
+body {
+  background-color: whitesmoke;
+  color: var(--black-metal);
+
+  @media (prefers-color-scheme: dark) {
+    background-color: var(--black-metal);
+    color: var(--kingly-cloud);
+  }
+}
+
 /*------------------------------------*/
 /* #TOP-BAR */
 /*------------------------------------*/

package/src/styles/layout.css

@@ -2,6 +2,10 @@
 /* #LAYOUT */
 /*------------------*/
 
+body {
+  margin: 0; /* reset */
+}
+
 .vulture {
   max-width: var(--vulture);
   flex-basis: var(--vulture);
@@ -97,3 +101,13 @@ footer {
     margin-block-end: 0.25rem;
   }
 }
+
+/*------------------------------------*/
+/* #SOCIAL */
+/*------------------------------------*/
+
+.social {
+  display: flex;
+  gap: var(--kilimanjaro);
+  margin-block-end: clamp(var(--kilimanjaro), 1.667vw, var(--aconcagua));
+}

package/src/styles/media.css

@@ -1,3 +1,14 @@
+/*------------------------------------*/
+/* #MEDIA */
+/*------------------------------------*/
+
+svg {
+  width: 100%;
+  height: 100%;
+  max-width: clamp(var(--kilimanjaro), 5vw, 5rem);
+  max-height: clamp(var(--kilimanjaro), 5vw, 5rem);
+}
+
 /*------------------*/
 /* #LOGO */
 /*------------------*/
@@ -38,3 +49,91 @@
     max-height: 10rem;
   }
 }
+
+/*------------------*/
+/* #SOCIAL */
+/*------------------*/
+.social svg {
+  transition: var(--slow);
+
+  * {
+    transition: var(--slow);
+  }
+}
+
+/*------------------------------------*/
+/* #FACEBOOK */
+/*------------------------------------*/
+/* https://about.meta.com/brand/resources/facebook/logo/ */
+
+.facebook {
+  .f {
+    fill: transparent;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    .circle {
+      fill: white;
+    }
+  }
+}
+
+.facebook:hover {
+  .circle {
+    fill: #1877f2;
+  }
+  .f {
+    fill: white;
+  }
+}
+
+/*------------------------------------*/
+/* #INSTAGRAM */
+/*------------------------------------*/
+/* https://about.meta.com/brand/resources/instagram/instagram-brand/ */
+
+.instagram {
+  filter: grayscale(100%);
+  mix-blend-mode: multiply;
+
+  @media (prefers-color-scheme: dark) {
+    filter: grayscale(100%) brightness(300%);
+    mix-blend-mode: screen;
+  }
+}
+
+.instagram:hover {
+  filter: grayscale(0%);
+  fill: revert-layer;
+  mix-blend-mode: normal;
+
+  @media (prefers-color-scheme: dark) {
+    filter: grayscale(0%) brightness(100%);
+  }
+}
+
+/*------------------------------------*/
+/* #TRIPADVISOR */
+/*------------------------------------*/
+/* https://www.tripadvisor.com/pdfs/cprc/BrandGuidelinesForPartners.pdf */
+/* TODO: sizing fix */
+/* I know this is smaller without the circle but for now adding a stroke to the circle wasnt right */
+/* looks better in dark for now */
+
+.tripadvisor {
+  circle {
+    fill: transparent;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    circle {
+      fill: white;
+    }
+  }
+}
+
+.tripadvisor:hover {
+  circle {
+    fill: #34e0a1;
+  }
+}

package/src/styles/variables.css

@@ -136,4 +136,5 @@
   /*------------------*/
   --easing: cubic-bezier(0.5, 0, 0.5, 1);
   --fade: 0.2s var(--easing);
+  --slow: 0.5s var(--easing);
 }