trepur_components 2.3.7 → 2.3.8

package/{archive → src/components}/NavTwo/StickyNav.tsx

@@ -1,9 +1,5 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -16,19 +12,18 @@ export const StickyNav = ({
   className,
   children,
   visible = false,
-}: Props): JSX.Element => {
+}: Props) => {
   const classList = classNames(
     {
-      [style.showStickyNav]: visible,
+      'opacity-100 transition-all duration-1000': visible,
     },
     className,
-    style.stickyNav,
-    'theme-local',
-  );
+    'fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500',
+  )
 
   return (
     <div id={`sticky_${id ?? 'nav'}`} className={classList}>
       {children}
     </div>
   );
-};
+}

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

@@ -1,12 +1,9 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
 import { Dropdown } from './Dropdown';
 import { Sidebar } from './Sidebar';
 import { StickyNav } from './StickyNav';
 
-
 export interface Props {
   id?: string;
   className?: string;
@@ -14,21 +11,16 @@ export interface Props {
   mobileNavExpanded?: boolean;
 }
 
-const Nav = ({
-  id,
-  className,
-  children,
-  mobileNavExpanded,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.nav, 'theme-local');
+export const Nav = ({ id, className, children, mobileNavExpanded }: Props) => {
+  const classList = classNames(className);
 
   return (
     <div>
       <div
         className={classNames(
-          style.defaultNavClasses,
-          [mobileNavExpanded] && style.navOpen,
-          [!mobileNavExpanded] && style.navClosed,
+          'fixed bottom-0 left-0 right-0 top-0 z-50 h-full w-full bg-primary transition-opacity duration-700',
+          [mobileNavExpanded] && 'visible opacity-100',
+          [!mobileNavExpanded] && 'invisible opacity-0',
         )}
       />
       <header id={id} className={classList}>
@@ -36,7 +28,7 @@ const Nav = ({
       </header>
     </div>
   );
-};
+}
 
 export default Nav;
 

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import NewsCard from '.';
+import { NewsCard } from '.';
 
 const meta = {
   title: 'Components/News Card',
@@ -14,14 +14,14 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     content: {
       description: '',
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     imageProps: {
       type: { name: 'other', value: 'object' },
@@ -31,22 +31,22 @@ const meta = {
           summary: 'object',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     buttonProps: {
       description: '',
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     rounded: {
       description: '',
       control: 'text',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     title: 'This is a title',
@@ -61,12 +61,12 @@ const meta = {
       children: 'Button',
       className: 'w-full',
       href: '/',
-    },
-  },
+    }
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof NewsCard>;
 
 export const Default: Story = {};

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

@@ -1,11 +1,7 @@
-import React from 'react';
-
-import Button, { type Props as buttonProps } from '@components/Button';
-import Image, { type Props as imageProps } from '@components/Image';
+import { Button, type Props as buttonProps } from '@components/Button';
+import { Image, type Props as imageProps } from '@components/Image';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -16,7 +12,7 @@ export interface Props {
   rounded?: boolean;
 }
 
-const NewsCard = ({
+export const NewsCard = ({
   id,
   className,
   title,
@@ -24,15 +20,8 @@ const NewsCard = ({
   imageProps,
   buttonProps,
   rounded,
-}: Props): JSX.Element => {
-  const classList = classNames(
-    {
-      [style.rounded]: rounded,
-    },
-    className,
-    style.classList,
-    'theme-local',
-  );
+}: Props) => {
+  const classList = classNames(className, 'flex border p-2');
 
   const src = imageProps?.src !== undefined ? imageProps.src : '';
 
@@ -41,17 +30,15 @@ const NewsCard = ({
       <div>
         <Image src={src} {...imageProps} />
       </div>
-      <div className={classNames(style.contentWrapper, 'expandable')}>
+      <div className="expandable flex w-auto flex-col justify-between text-center">
         <p>{title}</p>
         <p>{content}</p>
         {buttonProps !== undefined && (
-          <div className={style.buttonWrapper}>
+          <div className="px-8">
             <Button {...buttonProps}>{buttonProps.children}</Button>
           </div>
         )}
       </div>
     </div>
   );
-};
-
-export default NewsCard;
+}

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

@@ -1,8 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Pill from '.';
+import { Pill } from '.';
 
 const meta = {
   title: 'Components/Pill',
@@ -14,7 +14,7 @@ const meta = {
       description: 'The text to display in the component',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     onClick: {
       type: { name: 'function', required: false },
@@ -22,23 +22,23 @@ const meta = {
         'An on click handle to execute when clicking on the component',
       table: {
         type: { summary: 'function' },
-      },
+      }
     },
     dismissOnClick: {
       type: { name: 'boolean', required: false },
       description: 'To toggle the disappearance of the component on click',
       table: {
         type: { summary: 'boolean' },
-      },
-    },
+      }
+    }
   },
   args: {
     text: 'This is a pill',
     onClick: action('pill clicked'),
-  },
-};
+  }
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Pill>;
 
 export const Default: Story = {};

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

@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import Icon from '@components/Icon';
+import { faCrosshairs } from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import classNames from 'classnames';
-
-
+import { Icon } from '..';
 
 export interface Props {
   id?: string;
@@ -13,52 +13,42 @@ export interface Props {
   dismissOnClick?: boolean;
 }
 
-const Pill = ({
+export const Pill = ({
   id,
   className,
   text,
   onClick,
   dismissOnClick = false,
-}: Props): JSX.Element => {
+}: Props) => {
   const [shouldDisplay, setShouldDisplay] = useState(true);
 
   const classList = classNames(
     {
-      [style.hidden]: !shouldDisplay,
-      [style.wrapperPadding]: !dismissOnClick,
-      [style.wrapperPaddingDismiss]: dismissOnClick,
+      invisible: !shouldDisplay,
+      'px-4': !dismissOnClick,
+      'pl-4 pr-1': dismissOnClick,
     },
     className,
-    [style.wrapperClasses],
-    'theme-local',
-  );
+    'rounded-full border-2 py-1 inline-block border-primary text-primary',
+  )
 
   const handleOnClick = (): void => {
     if (dismissOnClick) {
       setShouldDisplay(false);
     }
     onClick?.();
-  };
+  }
 
   return shouldDisplay ? (
     <button id={id} className={classList} onClick={handleOnClick}>
-      <div className={style.classes}>
+      <div className="flex">
         <p>{text}</p>
         {dismissOnClick && (
-          <Icon
-            className={style.icon}
-            type="multiply"
-            bgColour="white"
-            hoverBgColour="white"
-            colour="primary"
-            hoverColour="primary"
-          />
+          <Icon icon={faCrosshairs as IconProp} colour="primary" />
         )}
       </div>
     </button>
-  ) : (
+      ) : (
     <></>
-  );
-};
-
-export default Pill;
+      );
+}

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import ProductCard from '.';
+import { ProductCard } from '.';
 
 const meta = {
   title: 'Components/ProductCard',
@@ -40,7 +40,7 @@ const meta = {
     buttonProps: {
       description: '',
       table: {},
-    },
+    }
   },
   args: {
     imageProps: {
@@ -51,11 +51,11 @@ const meta = {
     textLineTwo: 'Text Line 2',
     textLineThree: 'Text line 3',
     ctaText: 'Add to bag',
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ProductCard>;
 
 export const Default: Story = {};

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

@@ -1,12 +1,13 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
-import Button from '@components/Button';
-import Icon from '@components/Icon';
+import { Button } from '@components/Button';
+import { Icon } from '@components/Icon';
 import { type Props as imageProps } from '@components/Image';
+import { faPercent } from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import classNames from 'classnames';
 
-import Counter from '../Counter';
-
+import { Counter } from '../Counter';
 
 export interface Props {
   id?: string;
@@ -24,7 +25,7 @@ export interface Props {
   onCounterClick?: (count: number) => void;
 }
 
-const ProductCard: React.FC<Props> = ({
+export const ProductCard = ({
   id,
   className,
   imageProps,
@@ -38,16 +39,16 @@ const ProductCard: React.FC<Props> = ({
   ctaOnClick,
   onEditClick,
   onCounterClick,
-}: Props): JSX.Element => {
+}: Props) => {
   const [isHovering, setIsHovering] = useState(false);
-  const ProductCardTitleClasses = classNames(style.title);
-  const ProductCardSubTitleClassList = classNames(style.subtitle);
+  const ProductCardTitleClasses = 'text-md font-medium';
+  const ProductCardSubTitleClassList = 'text-sm font-regular';
   const classList = classNames(
     className,
-    style.classList,
-    'absolute theme-local',
-  );
-  const imageClassList = classNames(style.imageClassList);
+    'absolute flex flex-col rounded-lg shadow-xl max-w-[380px]',
+  )
+  const imageClassList =
+    'w-full object-cover h-96 overflow-hidden rounded-t-lg';
 
   return (
     <div
@@ -63,17 +64,17 @@ const ProductCard: React.FC<Props> = ({
       <div className="relative">
         <img className={imageClassList} {...imageProps} />
         {isEditable && (
-          <div className={style.editButton}>
+          <div className="absolute right-2 top-2">
             <Button type="icon" variant="secondary" onClick={onEditClick}>
-              <Icon type="pencil" />
+              <Icon icon={faPercent as IconProp} />
             </Button>
           </div>
         )}
       </div>
 
-      <div className={style.content}>
+      <div className="h-150px overflow-hidden">
         {!isHovering && (
-          <div className={style.contentWrapper}>
+          <div className="mt-0 h-full rounded-b-lg bg-white p-6 transition-all duration-300">
             {title !== undefined && (
               <h3 className={ProductCardTitleClasses}>{title}</h3>
             )}
@@ -89,8 +90,8 @@ const ProductCard: React.FC<Props> = ({
           </div>
         )}
         {isHovering && (
-          <div className={style.hoverContentWrapper}>
-            <div className={style.buttonWrapper}>
+          <div className="mt-0 flex h-full rounded-b-lg bg-white p-6 text-center transition-all duration-300">
+            <div className="mx-auto my-auto">
               <Button onClick={ctaOnClick}>{ctaText}</Button>
               {count !== undefined && (
                 <Counter
@@ -106,6 +107,4 @@ const ProductCard: React.FC<Props> = ({
       </div>
     </div>
   );
-};
-
-export default ProductCard;
+}

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import ProductCardV2 from '.';
+import { ProductCardV2 } from '.';
 
 const meta = {
   title: 'Components/ProductCardV2',
@@ -26,7 +26,7 @@ const meta = {
     href: {
       description:
         'The link to send the user to when clicking on the component',
-    },
+    }
   },
   args: {
     imageProps: {
@@ -39,12 +39,12 @@ const meta = {
       colour: 'black',
       type: 'edit',
       size: 2,
-    },
-  },
+    }
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ProductCardV2>;
 
 export const Default: Story = {};

package/src/components/ProductCardV2/index.tsx

@@ -0,0 +1,98 @@
+import React from 'react';
+
+import { Counter } from '@components/Counter';
+import { Icon, type IconProps } from '@components/Icon';
+import { type Props as imageProps } from '@components/Image';
+import classNames from 'classnames';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  title?: string;
+  imageProps?: imageProps;
+  topRightIcon?: IconProps;
+  bottomRightIcon?: IconProps;
+  topLeftIcon?: IconProps;
+  bottomLeftIcon?: IconProps;
+  textLineOne?: string;
+  textLineTwo?: string;
+  textLineThree?: string;
+  onClick?: () => void;
+  onCounterClick?: (count: number) => void;
+  count?: number;
+  isSelected?: boolean;
+}
+
+export const ProductCardV2 = ({
+  id,
+  className,
+  imageProps,
+  title,
+  textLineOne,
+  textLineTwo,
+  textLineThree,
+  topRightIcon,
+  bottomRightIcon,
+  topLeftIcon,
+  bottomLeftIcon,
+  onClick,
+  onCounterClick,
+  count,
+  isSelected = false,
+}: Props) => {
+  return (
+    <div
+      id={id}
+      className={classNames(
+        {
+          'rounded-lg border-2 border-border-light p-2': isSelected,
+        },
+
+        className,
+        'max-w-[600px] scale-100 transform cursor-pointer duration-300',
+      )}
+      onClick={onClick}
+    >
+      <div className="relative">
+        <img
+          className="aspect-square w-full rounded-xl bg-white object-cover"
+          {...imageProps}
+        />
+        {topRightIcon && <Icon {...topRightIcon} />}
+        {bottomRightIcon && <Icon {...bottomRightIcon} colour="success" />}
+        {topLeftIcon && <Icon {...topLeftIcon} />}
+        {bottomLeftIcon && <Icon {...bottomLeftIcon} colour="success" />}
+        {count && (
+          <div className="absolute bottom-4 left-4 cursor-pointer">
+            <Counter
+              count={count}
+              onClick={(newCount: number) => {
+                onCounterClick?.(newCount);
+              }}
+            />
+          </div>
+        )}
+      </div>
+      <div className="mt-4">
+        {title !== undefined && (
+          <h3 className="text-md font-light text-ink">{title}</h3>
+        )}
+        {textLineOne !== undefined && (
+          <h4 className="text-sm font-extraLight text-border-dark">
+            {textLineOne}
+          </h4>
+        )}
+        {textLineTwo !== undefined && (
+          <h4 className="text-sm font-extraLight text-border-dark">
+            {textLineTwo}
+          </h4>
+        )}
+        {textLineThree !== undefined && (
+          <h4 className="text-sm font-extraLight text-border-dark">
+            {textLineThree}
+          </h4>
+        )}
+      </div>
+    </div>
+  );
+}

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Proficiencies from '.';
+import { Proficiencies } from '.';
 
 const meta = {
   title: 'Components/Proficiencies',
@@ -39,12 +39,12 @@ const meta = {
       { src: 'https://picsum.photos/201/205', overlayText: 'Logo' },
       { src: 'https://picsum.photos/201/206', overlayText: 'Logo' },
       { src: 'https://picsum.photos/201/207', overlayText: 'Logo' },
-    ],
-  },
+    ]
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Proficiencies>;
 
 export const Default: Story = {};