trepur_components 2.3.8 → 2.3.9

package/src/components/Select/index.tsx

@@ -2,7 +2,6 @@ import { useState } from 'react';
 
 import { Icon } from '@components/Icon';
 import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import classNames from 'classnames';
 
 export interface SelectProps {
@@ -29,29 +28,29 @@ export const Select = ({
   const [showDropDown, setShowDropDown] = useState(false);
   const [activeValue, setActiveValue] = useState(
     value !== undefined ? value : options?.[0],
-  )
+  );
 
   const handleOptionClick = (e: any): void => {
     onClick(e.target.textContent);
     setActiveValue(e.target.textContent);
     setShowDropDown(false);
-  }
+  };
 
   const fullWidthClasses = classNames({
     'w-full': fullWidth,
     'sm:w-72': !fullWidth,
-  })
+  });
 
   const headerClassList = classNames(
     fullWidthClasses,
     className,
     'w-full rounded-xl bg-white shadow drop-shadow flex cursor-pointer flex-row justify-between px-4',
-  )
+  );
 
   const dropdownClassList = classNames(
     fullWidthClasses,
     'absolute w-full bg-white mt-2 rounded-2xl py-4 shadow-xl border border-lightest-grey h-64 overflow-scroll',
-  )
+  );
   const dropdownItemClassList =
     'bg-white text-ink hover:bg-lightest-grey hover:cursor-pointer px-4 py-2';
 
@@ -69,11 +68,11 @@ export const Select = ({
             <p>{label}</p>
             {required && <p className="font-semiBold text-error">&nbsp;*</p>}
           </div>
-          <p className="flex justify-between rounded-xl border-ink bg-white pb-1 pt-6 text-ink">
+          <p className="border-ink text-ink flex justify-between rounded-xl bg-white pb-1 pt-6">
             {activeValue}
           </p>
         </div>
-        <Icon colour="ink" icon={faChevronDown as IconProp} />
+        <Icon colour="ink" icon={faChevronDown} />
       </div>
       {showDropDown && (
         <div className={classNames('relative z-20', fullWidthClasses)}>
@@ -95,4 +94,4 @@ export const Select = ({
       )}
     </>
   );
-}
+};

package/src/components/Showcase/Showcase.stories.tsx

@@ -1,6 +1,6 @@
 import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
 import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 import { Showcase } from '.';
@@ -20,8 +20,8 @@ const meta = {
     iconProps: {
       icon: faChevronDown,
       onClick: action('Icon click'),
-    }
-  }
+    },
+  },
 };
 
 export default meta;

package/src/components/Showcase/index.tsx

@@ -1,8 +1,6 @@
 import { Avatar } from '@components/Avatar';
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { Container } from '@components/Container';
-import { Icon, type IconProps } from '@components/Icon';
-import { type Colours } from '@utils/controls';
+import { Icon, IconProps } from '@components/Icon';
+import { Colours } from '@utils/controls';
 import classNames from 'classnames';
 
 export interface Props {
@@ -36,34 +34,29 @@ export const Showcase = ({
       'min-h-[calc(100vh-176px)]': size === 'large',
     },
     'flex flex-wrap text-center md:flex-nowrap md:text-left',
-  )
+  );
 
   return (
-    <ComponentWrapper id={id} className={classList} bgColour={bgColour}>
-      <Container className={containerSize}>
+    <div>
+      <div className={containerSize}>
         <div className="m-auto w-full md:w-2/3 md:pl-16 md:pr-4 lg:pl-32 lg:pr-8 xl:pl-64">
-          <h2 className="text-lg font-bold leading-tight text-primary md:text-xxl">
+          <h2 className="md:text-xxl text-lg font-bold leading-tight text-primary">
             {title}
           </h2>
-          <h2 className="text-lg font-bold leading-tight text-black md:text-xxl">
+          <h2 className="md:text-xxl text-lg font-bold leading-tight text-black">
             {subTitle}
           </h2>
-          <p className="pt-4 text-sm text-black md:text-md">{description}</p>
+          <p className="md:text-md pt-4 text-sm text-black">{description}</p>
         </div>
         <div className="m-auto flex w-full justify-center md:w-1/3 md:pb-20">
           <Avatar />
         </div>
-      </Container>
+      </div>
       {iconProps?.icon && (
         <div className="flex justify-center">
-          <Icon
-            size="2x"
-            {...iconProps}
-            icon={iconProps.icon}
-            onClick={iconProps.onClick}
-          />
+          <Icon {...iconProps} size="2x" icon={iconProps.icon} />
         </div>
       )}
-    </ComponentWrapper>
+    </div>
   );
-}
+};

package/src/components/SideNav/SideNav.stories.tsx

@@ -1,4 +1,4 @@
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 import { SideNav } from '.';
@@ -13,8 +13,8 @@ const meta = {
         {
           name: 'grey',
           value: '#f3f3f3',
-        }
-      ]
+        },
+      ],
     },
   },
   argTypes: {
@@ -24,7 +24,7 @@ const meta = {
       description: 'An array of nav links to display in the component',
       table: {
         type: { summary: 'array' },
-      }
+      },
     },
     bgColour: {
       type: { name: 'string', required: false },
@@ -35,13 +35,13 @@ const meta = {
       },
       defaultValue: 'primary',
       control: 'select',
-    }
+    },
   },
   args: {
     children: <p>dfghj</p>,
     showNav: true,
-  }
-}
+  },
+};
 
 export default meta;
 

package/src/components/SideNav/index.tsx

@@ -29,11 +29,11 @@ export const SideNav = ({
 
     className,
     'absolute z-50 h-full overflow-hidden duration-700',
-  )
+  );
 
   return (
     <div id={id} className={sideNavClasses}>
       {children}
     </div>
   );
-}
+};

package/src/components/SocialButton/SocialButton.stories.tsx

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, type StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
 import { SocialButton } from '.';
@@ -12,8 +12,8 @@ const meta = {
       description: {
         component:
           'A SocialButton which can either be internal, external or social as well as a standard design or a slide design.',
-      }
-    }
+      },
+    },
   },
   argTypes: {
     ...idAndClassName,
@@ -26,7 +26,7 @@ const meta = {
           summary: 'function',
         },
         defaultValue: { summary: 'undefined' },
-      }
+      },
     },
     type: {
       type: {
@@ -41,7 +41,7 @@ const meta = {
         },
         defaultValue: {
           summary: 'default',
-        }
+        },
       },
       defaultValue: 'default',
       control: { type: 'radio' },
@@ -55,8 +55,8 @@ const meta = {
         },
         defaultValue: {
           summary: 'undefined',
-        }
-      }
+        },
+      },
     },
     openInNewTab: {
       type: { name: 'boolean', required: false },
@@ -71,15 +71,15 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      }
-    }
+      },
+    },
   },
   args: {
     type: 'facebook',
     href: '/',
     onClick: action('SocialButton clicked'),
-  }
-}
+  },
+};
 
 export default meta;
 

package/src/components/SocialButton/index.tsx

@@ -2,7 +2,6 @@ import React from 'react';
 
 import { Icon } from '@components/Icon';
 import { faStar } from '@fortawesome/fontawesome-free-solid';
-import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import { type Colours, type SocialTypes } from '@utils/controls';
 import classNames from 'classnames';
 
@@ -27,7 +26,7 @@ export const SocialButton = ({
     const typeString: string = type;
     const colour: string = `interactive-${typeString}`;
     return colour as Colours;
-  }
+  };
 
   const classList = classNames(
     'flex h-16 w-16 transform rounded-full duration-500',
@@ -37,15 +36,15 @@ export const SocialButton = ({
       'bg-github hover:bg-interactive-github': type === 'github',
       '': type === 'instagram',
       'bg-linkedin hover:bg-interactive-linkedin': type === 'linkedin',
-    }
-  )
+    },
+  );
 
   const iconType = {
     facebook: 'facebook-f',
     instagram: 'instagram',
     github: 'github',
     linkedin: 'linkedin-in',
-  }
+  };
 
   const typeString: string = type.toString();
   return (
@@ -57,8 +56,8 @@ export const SocialButton = ({
       {...(openInNewTab && { target: '_blank' })}
     >
       <div id={id} className={classList}>
-        <Icon icon={faStar as IconProp} size="2x" colour="white" />
+        <Icon icon={faStar} size="2x" colour="white" />
       </div>
     </a>
   );
-}
+};

package/src/components/SplitCard/SplitCard.stories.tsx

@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { SplitCard } from '.';
+import { Image } from '..';
+
+const meta = {
+  title: 'V2Components/Split Card',
+  component: SplitCard,
+  args: {
+    className: 'bg-info-light',
+    swapDesktop: true,
+    swapMobile: true,
+    children: [
+      <SplitCard.LeftContent>
+        <Image src="https://picsum.photos/200/200" />
+      </SplitCard.LeftContent>,
+      <SplitCard.RightContent className="flex flex-col justify-center p-8">
+        <SplitCard.Title>This is a title</SplitCard.Title>
+        <SplitCard.Text>
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus
+          non reprehenderit quaerat unde eius quisquam enim distinctio tempora
+          animi, rerum exercitationem asperiores, consequuntur fuga ex
+          cupiditate? Cumque laudantium laborum numquam!
+        </SplitCard.Text>
+      </SplitCard.RightContent>,
+    ],
+  },
+} satisfies Meta<typeof SplitCard>;
+
+export default meta;
+
+type Story = StoryObj<typeof SplitCard>;
+
+export const Default: Story = {};

package/src/components/SplitCard/index.tsx

@@ -0,0 +1,132 @@
+import {
+  createContext,
+  forwardRef,
+  HTMLAttributes,
+  useContext,
+  useMemo,
+} from 'react';
+
+import MatchMedia from '@utils/matchMedia';
+import { Screens } from '@utils/screens';
+import clsx from 'clsx';
+
+export interface SplitCardContextProps {
+  swapDesktop?: boolean;
+  swapMobile?: boolean;
+  isMd?: boolean;
+}
+
+const SplitCardContext = createContext<SplitCardContextProps | null>(null);
+
+const SplitCardComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & SplitCardContextProps
+>(({ id, className, children, swapDesktop, swapMobile, ...props }, ref) => {
+  const mediumScreen: string = Screens.md;
+  const mdScreenSize: string = `(min-width: ${mediumScreen})`;
+  const isMd: boolean = MatchMedia(mdScreenSize);
+
+  const state = useMemo(
+    () => ({
+      swapDesktop,
+      swapMobile,
+      isMd,
+    }),
+    [swapDesktop, swapMobile, isMd],
+  );
+
+  return (
+    <SplitCardContext.Provider value={state}>
+      <div
+        ref={ref}
+        {...props}
+        className={clsx('grid grid-cols-1 md:grid-cols-2', className)}
+      >
+        {children}
+      </div>
+    </SplitCardContext.Provider>
+  );
+});
+
+const SplitCardLeftContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  const { swapDesktop, swapMobile, isMd } = useContext(SplitCardContext) || {};
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={clsx(
+        'flex h-full items-center text-center',
+        {
+          'md:order-last': swapDesktop,
+          'order-last': !isMd && swapMobile,
+        },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+const SplitCardRightContent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => {
+  const { swapDesktop, swapMobile, isMd } = useContext(SplitCardContext) || {};
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      className={clsx(
+        'flex h-full items-center text-center',
+        {
+          'md:order-first': swapDesktop,
+          'order-first': !isMd && swapMobile,
+        },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+});
+
+const SplitCardTitle = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ id, children, ...props }, ref) => {
+  return (
+    <p ref={ref} className="items-center" {...props}>
+      {children}
+    </p>
+  );
+});
+
+const SplitCardText = forwardRef<
+  HTMLParagraphElement,
+  HTMLAttributes<HTMLParagraphElement>
+>(({ id, children, ...props }, ref) => {
+  return (
+    <p ref={ref} className="" {...props}>
+      {children}
+    </p>
+  );
+});
+
+SplitCardComponent.displayName = 'SplitCard';
+SplitCardLeftContent.displayName = 'SplitCard.LeftContent';
+SplitCardRightContent.displayName = 'SplitCard.RightContent';
+
+const SplitCard = Object.assign(SplitCardComponent, {
+  LeftContent: SplitCardLeftContent,
+  RightContent: SplitCardRightContent,
+  Title: SplitCardTitle,
+  Text: SplitCardText,
+});
+
+export { SplitCard };

package/src/components/Stars/Star.stories.tsx

@@ -0,0 +1,18 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Stars } from '.';
+
+const meta = {
+  title: 'V2Components/Stars',
+  component: Stars,
+  args: {
+    stars: 3,
+    size: '2x',
+  },
+} satisfies Meta<typeof Stars>;
+
+export default meta;
+
+type Story = StoryObj<typeof Stars>;
+
+export const Default: Story = {};

package/src/components/Stars/index.tsx

@@ -0,0 +1,38 @@
+import { forwardRef, HTMLAttributes } from 'react';
+
+import { Icon } from '@components/Icon';
+import { faStar } from '@fortawesome/fontawesome-free-solid';
+import { SizeProp } from '@fortawesome/fontawesome-svg-core';
+import clsx from 'clsx';
+
+export interface StarProps {
+  stars?: 1 | 2 | 3 | 4 | 5;
+  size?: SizeProp;
+}
+
+const StarComponent = forwardRef<
+  HTMLDivElement,
+  HTMLAttributes<HTMLDivElement> & StarProps
+>(({ className, stars = 0, size }, ref) => {
+  const getStarsChecked = () =>
+    [...Array(5)].map((_, i) => (
+      <Icon
+        className={i < stars ? 'text-star' : ''}
+        key={`checked_star_${i}`}
+        icon={faStar}
+        size="2x"
+      />
+    ));
+
+  return (
+    <div ref={ref} className={clsx('flex', className)}>
+      {getStarsChecked()}
+    </div>
+  );
+});
+
+StarComponent.displayName = 'Stars';
+
+const Stars = Object.assign(StarComponent);
+
+export { Stars };

package/src/components/Testimonial/Testimonial.stories.tsx

@@ -1,106 +1,34 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
+import { Meta, StoryObj } from '@storybook/react';
 
 import { Testimonial } from '.';
 
 const meta = {
-  title: 'Components/Testimonial',
+  title: 'V2Components/Testimonial',
   component: Testimonial,
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      description: 'The description to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    companyName: {
-      description: 'The company name to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    positionStartDate: {
-      description: 'The start date to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    positionEndDate: {
-      description: 'The end date to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    position: {
-      description: 'The position to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    date: {
-      description: 'The date of the testimonial to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    authorsName: {
-      description: 'The authors name to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    authorsPosition: {
-      description: 'The authors position to display on the component',
-      control: 'text',
-      table: {
-        type: { summary: 'default' },
-      },
-      defaultValue: { summary: 'undefined' },
-    },
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image to display on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      }
-    }
-  },
   args: {
-    imageProps: {
-      src: 'https://picsum.photos/100/100',
-      height: 8,
-      width: 8,
-      roundedFull: true,
-      centerAligned: true,
-    },
-    authorsName: 'Authors Name',
-    authorsPosition: 'Authors Position',
-    position: 'Position',
-    positionEndDate: 'End Date',
-    positionStartDate: 'Start Date',
-    date: 'Date',
-    companyName: 'Company Name',
-    text: 'This is some text',
-  }
-}
+    children: [
+      <Testimonial.Image src="https://picsum.photos/100/100" />,
+      <Testimonial.Title>This is a title</Testimonial.Title>,
+      <Testimonial.Section>
+        <Testimonial.Position>Position</Testimonial.Position>
+        <Testimonial.Date>This is a date</Testimonial.Date>
+      </Testimonial.Section>,
+      <Testimonial.Text>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Facere delectus
+        soluta voluptas, minus sequi fuga facilis rem animi reprehenderit iusto
+        recusandae. Accusantium porro possimus id quas quis a soluta cum. Lorem,
+        ipsum dolor sit amet consectetur adipisicing elit. Facere odit rem quam
+        ullam! Ipsam dolorem libero exercitationem odio atque itaque
+        repudiandae? Amet est exercitationem quas iusto magni quod, molestiae
+        eaque. Lorem ipsum dolor sit amet consectetur adipisicing elit. Beatae
+        fuga quibusdam minima assumenda. Culpa ab ea sit molestias aspernatur
+        enim ducimus quis consequatur? Ab officiis, sequi reiciendis eos quaerat
+        quisquam?
+      </Testimonial.Text>,
+      <Testimonial.AuthorDetails>Authors Name</Testimonial.AuthorDetails>,
+    ],
+  },
+} satisfies Meta<typeof Testimonial>;
 
 export default meta;