trepur_components 2.3.7 → 2.3.9

package/{archive → src/components}/Select/index.tsx

@@ -1,11 +1,10 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import Icon from '@components/Icon';
+import { Icon } from '@components/Icon';
+import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
 import classNames from 'classnames';
 
-
-
-interface Props {
+export interface SelectProps {
   id?: string;
   className?: string;
   options: string[];
@@ -16,7 +15,7 @@ interface Props {
   required?: boolean;
 }
 
-const Select: React.FC<Props> = ({
+export const Select = ({
   id,
   className,
   options,
@@ -25,7 +24,7 @@ const Select: React.FC<Props> = ({
   onClick,
   required = false,
   fullWidth = false,
-}) => {
+}: SelectProps) => {
   const [showDropDown, setShowDropDown] = useState(false);
   const [activeValue, setActiveValue] = useState(
     value !== undefined ? value : options?.[0],
@@ -38,23 +37,22 @@ const Select: React.FC<Props> = ({
   };
 
   const fullWidthClasses = classNames({
-    [style.fullWidth]: fullWidth,
-    [style.notFullWidth]: !fullWidth,
+    'w-full': fullWidth,
+    'sm:w-72': !fullWidth,
   });
 
   const headerClassList = classNames(
     fullWidthClasses,
-    style.classList,
     className,
-    'theme-local',
+    'w-full rounded-xl bg-white shadow drop-shadow flex cursor-pointer flex-row justify-between px-4',
   );
 
   const dropdownClassList = classNames(
     fullWidthClasses,
-    style.optionList,
-    'theme-local',
+    'absolute w-full bg-white mt-2 rounded-2xl py-4 shadow-xl border border-lightest-grey h-64 overflow-scroll',
   );
-  const dropdownItemClassList = classNames(style.option, 'theme-local');
+  const dropdownItemClassList =
+    'bg-white text-ink hover:bg-lightest-grey hover:cursor-pointer px-4 py-2';
 
   return (
     <>
@@ -65,24 +63,19 @@ const Select: React.FC<Props> = ({
           setShowDropDown(!showDropDown);
         }}
       >
-        <div className={style.labelContainer}>
-          <div className={style.labelWrapper}>
-            <p className={style.label}>{label}</p>
-            {required && <p className={style.required}>&nbsp;*</p>}
+        <div className="flex flex-col">
+          <div className="absolute mt-2 flex bg-white text-xs font-thin">
+            <p>{label}</p>
+            {required && <p className="font-semiBold text-error">&nbsp;*</p>}
           </div>
-          <p className={style.value}>{activeValue}</p>
+          <p className="border-ink text-ink flex justify-between rounded-xl bg-white pb-1 pt-6">
+            {activeValue}
+          </p>
         </div>
-        <Icon
-          className={style.icon}
-          bgColour="white"
-          colour="ink"
-          hoverBgColour="white"
-          hoverColour="ink"
-          type="chevron-down"
-        />
+        <Icon colour="ink" icon={faChevronDown} />
       </div>
       {showDropDown && (
-        <div className={classNames(style.dropdownWrapper, fullWidthClasses)}>
+        <div className={classNames('relative z-20', fullWidthClasses)}>
           <ul className={dropdownClassList}>
             {options?.map((option: string, i) => (
               <li
@@ -102,5 +95,3 @@ const Select: React.FC<Props> = ({
     </>
   );
 };
-
-export default Select;

package/{archive → src/components}/Showcase/Showcase.stories.tsx

@@ -1,8 +1,9 @@
+import { faChevronDown } from '@fortawesome/fontawesome-free-solid';
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Showcase from '.';
+import { Showcase } from '.';
 
 const meta = {
   title: 'Components/Showcase',
@@ -17,7 +18,7 @@ const meta = {
     bgColour: 'white',
     size: 'large',
     iconProps: {
-      type: 'chevron-down',
+      icon: faChevronDown,
       onClick: action('Icon click'),
     },
   },
@@ -25,6 +26,6 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Showcase>;
 
 export const Default: Story = {};

package/src/components/Showcase/index.tsx

@@ -0,0 +1,62 @@
+import { Avatar } from '@components/Avatar';
+import { Icon, IconProps } from '@components/Icon';
+import { Colours } from '@utils/controls';
+import classNames from 'classnames';
+
+export interface Props {
+  id: string;
+  className?: string;
+  title: string;
+  subTitle: string;
+  description: string;
+  bgColour?: Colours;
+  image: string;
+  size?: 'small' | 'medium' | 'large';
+  iconProps?: IconProps;
+}
+
+export const Showcase = ({
+  id,
+  className,
+  title,
+  subTitle,
+  description,
+  bgColour,
+  size = 'large',
+  iconProps,
+}: Props) => {
+  const classList = className;
+
+  const containerSize = classNames(
+    {
+      'h-56': size === 'small',
+      'h-96': size === 'medium',
+      'min-h-[calc(100vh-176px)]': size === 'large',
+    },
+    'flex flex-wrap text-center md:flex-nowrap md:text-left',
+  );
+
+  return (
+    <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="md:text-xxl text-lg font-bold leading-tight text-primary">
+            {title}
+          </h2>
+          <h2 className="md:text-xxl text-lg font-bold leading-tight text-black">
+            {subTitle}
+          </h2>
+          <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>
+      </div>
+      {iconProps?.icon && (
+        <div className="flex justify-center">
+          <Icon {...iconProps} size="2x" icon={iconProps.icon} />
+        </div>
+      )}
+    </div>
+  );
+};

package/{archive → src/components}/SideNav/SideNav.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import SideNav from '.';
+import { SideNav } from '.';
 
 const meta = {
   title: 'Components/SideNav',
@@ -45,6 +45,6 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof SideNav>;
 
 export const Default: Story = {};

package/{archive → src/components}/SideNav/index.tsx

@@ -1,10 +1,6 @@
-import React from 'react';
-
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id: string;
   className: string;
@@ -15,25 +11,24 @@ export interface Props {
   leftExpand?: boolean;
 }
 
-const SideNav = ({
+export const SideNav = ({
   id,
   className,
   children,
   bgColour = 'primary',
   showNav = false,
   leftExpand = true,
-}: Props): JSX.Element => {
+}: Props) => {
   const sideNavClasses = classNames(
     {
-      [style.sideBarCollapsed]: !showNav,
-      [style.sideBarExpanded]: showNav,
-      [style.leftExpand]: leftExpand,
-      [style.rightExpand]: !leftExpand,
+      'w-0': !showNav,
+      'w-full sm:w-1/3': showNav,
+      'left-0': leftExpand,
+      'right-0': !leftExpand,
     },
-    style[bgColour],
-    style.sideNavClassList,
+
     className,
-    'theme-local',
+    'absolute z-50 h-full overflow-hidden duration-700',
   );
 
   return (
@@ -42,5 +37,3 @@ const SideNav = ({
     </div>
   );
 };
-
-export default SideNav;

package/{archive → src/components}/SocialButton/SocialButton.stories.tsx

@@ -2,7 +2,7 @@ import { action } from '@storybook/addon-actions';
 import { Meta, StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import SocialButton from '.';
+import { SocialButton } from '.';
 
 const meta = {
   title: 'Components/SocialButton',
@@ -83,6 +83,6 @@ const meta = {
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof SocialButton>;
 
 export const Default: Story = {};

package/{archive → src/components}/SocialButton/index.tsx

@@ -1,11 +1,10 @@
 import React from 'react';
 
-import Icon from '@components/Icon';
-import { Colours, SocialTypes } from '@utils/controls';
+import { Icon } from '@components/Icon';
+import { faStar } from '@fortawesome/fontawesome-free-solid';
+import { type Colours, type SocialTypes } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -15,14 +14,14 @@ export interface Props {
   openInNewTab?: boolean;
 }
 
-const SocialButton = ({
+export const SocialButton = ({
   id,
   className,
   onClick,
   type = 'facebook',
   href,
   openInNewTab = false,
-}: Props): JSX.Element => {
+}: Props) => {
   const getColours = (type: Colours): Colours => {
     const typeString: string = type;
     const colour: string = `interactive-${typeString}`;
@@ -30,10 +29,14 @@ const SocialButton = ({
   };
 
   const classList = classNames(
-    style.classList,
-    style[type],
+    'flex h-16 w-16 transform rounded-full duration-500',
     className,
-    'theme-local',
+    {
+      'bg-facebook hover:bg-interactive-facebook': type === 'facebook',
+      'bg-github hover:bg-interactive-github': type === 'github',
+      '': type === 'instagram',
+      'bg-linkedin hover:bg-interactive-linkedin': type === 'linkedin',
+    },
   );
 
   const iconType = {
@@ -46,26 +49,15 @@ const SocialButton = ({
   const typeString: string = type.toString();
   return (
     <a
-      className={style.anchor}
+      className="rounded-full"
       href={href}
       aria-label={`view me on ${typeString}`}
       onClick={onClick}
       {...(openInNewTab && { target: '_blank' })}
     >
       <div id={id} className={classList}>
-        <Icon
-          type={iconType[type]}
-          className="mx-auto my-auto"
-          size={2}
-          brand
-          rounded
-          bgColour={type}
-          colour="white"
-          hoverBgColour={getColours(type as Colours)}
-        />
+        <Icon icon={faStar} size="2x" colour="white" />
       </div>
     </a>
   );
 };
-
-export default SocialButton;

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

@@ -0,0 +1,37 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { Testimonial } from '.';
+
+const meta = {
+  title: 'V2Components/Testimonial',
+  component: Testimonial,
+  args: {
+    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;
+
+type Story = StoryObj<typeof Testimonial>;
+
+export const Default: Story = {};