trepur_components 2.3.7 → 2.3.8

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

@@ -1,10 +1,6 @@
-import React from 'react';
-
-import Button, { type Props as buttonProps } from '@components/Button';
+import { Button, type Props as buttonProps } from '@components/Button';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -15,7 +11,7 @@ export interface Props {
   buttonProps?: buttonProps;
 }
 
-const FyreCard = ({
+export const FyreCard = ({
   id,
   className,
   image,
@@ -23,30 +19,26 @@ const FyreCard = ({
   altText,
   bordered,
   buttonProps,
-}: Props): JSX.Element => {
+}: Props) => {
   const classList = classNames(
     {
-      [style.bordered]: bordered,
+      'border border-grey border-opacity-100': bordered,
     },
     className,
-    style.classList,
-  );
-  const imageClassList = classNames(imageClass, style.imageClassList);
+    'flex flex-col',
+  )
+  const imageClassList = classNames(imageClass, 'w-full');
 
   return (
     <div key={id} id={id} className={classList}>
-      <div
-        className={classNames(style.cardContent, 'card-content theme-local')}
-      >
+      <div className={classNames('flex flex-1 flex-col', 'card-content')}>
         <div>
           <img className={imageClassList} src={image} alt={altText} />
         </div>
-        <div className={style.buttonWrapper}>
+        <div className="flex justify-end">
           <Button {...buttonProps}>{buttonProps?.children}</Button>
         </div>
       </div>
     </div>
   );
-};
-
-export default FyreCard;
+}

package/{archive → src/components}/Greeting/Greeting.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 Greeting from '.';
+import { Greeting } from '.';
 
 const meta = {
   title: 'Components/Greeting',
@@ -13,29 +13,29 @@ const meta = {
       description: 'Defines the morning message for the greeting component',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     afternoonMessage: {
       type: { name: 'string', required: false },
       description: 'Defines the afternoon message for the greeting component',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     eveningMessage: {
       type: { name: 'string', required: false },
       description: 'Defines the evening message for the greeting component',
       table: {
         type: { summary: 'string' },
-      },
-    },
+      }
+    }
   },
   args: {
     morningMessage: 'What a beautiful morning it is today',
-  },
-};
+  }
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Greeting>;
 
 export const Default: Story = {};

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

@@ -6,11 +6,11 @@ export interface Props {
   eveningMessage?: string;
 }
 
-const Greeting = ({
+export const Greeting = ({
   morningMessage = 'Good morning',
   afternoonMessage = 'Good afternoon',
   eveningMessage = 'Good evening',
-}: Props): string => {
+}: Props) => {
   const today = new Date();
   const hours = `0${today.getHours().toString()}`.slice(-2);
   const minutes = `0${today.getMinutes().toString()}`.slice(-2);
@@ -26,7 +26,5 @@ const Greeting = ({
     message = eveningMessage;
   }
 
-  return message;
-};
-
-export default Greeting;
+  return <p>{message}</p>;
+}

package/{archive → src/components}/HamburgerIcon/HamburgerIcon.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 HamburgerIcon from '.';
+import { HamburgerIcon } from '.';
 
 const meta = {
   title: 'Components/Hamburger Icon',
@@ -10,7 +10,7 @@ const meta = {
     docs: {
       description: {
         component: 'An icon component',
-      },
+      }
     },
     layout: 'padded',
   },
@@ -21,12 +21,12 @@ const meta = {
       type: { name: 'function', required: false },
       description: 'Function to be called when the button is clicked',
       table: { type: { summary: 'function' } },
-    },
-  },
+    }
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof HamburgerIcon>;
 
 export const Default: Story = {};

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

@@ -1,61 +1,58 @@
 import React, { useState } from 'react';
 
-import Button from '@components/Button';
+import { Button } from '@components/Button';
 import classNames from 'classnames';
 
-
-
 export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
   onClick?: React.MouseEventHandler;
   variant?: 'primary' | 'secondary' | 'tertiary';
 }
 
-const HamburgerIcon = ({
+export const HamburgerIcon = ({
   id,
   className,
   onClick,
   variant = 'primary',
-}: Props): JSX.Element => {
+}: Props) => {
   const [opened, setOpened] = useState(false);
   const classList = classNames(
     {
-      [style.hamburgerIconSecondary]: variant === 'secondary',
-      [style.hamburgerIconPrimary]: variant === 'primary',
-      [style.hamburgerIconTertiary]: variant === 'tertiary',
+      'transition-all duration-500 outline-none fill-primary':
+        variant === 'secondary',
+      'transition-all duration-500 outline-none fill-secondary':
+        variant === 'primary',
+      'transition-all duration-500 outline-none fill-tertiary':
+        variant === 'tertiary',
     },
     className,
-    'theme-local',
-  );
+  )
 
   const lineOneClassList = classNames(
     {
-      [style.lineOneOpened]: opened,
+      'origin-top-left -translate-y-0.5 translate-x-1 rotate-45': opened,
     },
-    style.lineOne,
-    'transition-transform',
-  );
+    'origin-top-left duration-200 ease-linear transition-transform',
+  )
 
   const lineTwoClassList = classNames(
     {
-      [style.lineTwoOpened]: opened,
-      [style.lineTwoClosed]: !opened,
+      'opacity-0': opened,
+      'opacity-100': !opened,
     },
-    style.lineTwo,
-    'transition-opacity',
-  );
+    'duration-200 ease-linear transition-opacity',
+  )
 
   const lineThreeClassList = classNames(
     {
-      [style.lineThreeOpened]: opened,
+      'origin-bottom-left translate-x-1 translate-y-px -rotate-45': opened,
     },
-    style.lineThree,
-    'transition-transform',
-  );
+    'origin-bottom-left duration-200 ease-linear transition-transform',
+  )
 
   const toggleOpened = (e: any): void => {
     setOpened(!opened);
     onClick?.(e);
-  };
+  }
 
   return (
     <Button
@@ -71,12 +68,11 @@ const HamburgerIcon = ({
       <svg
         className={classNames(
           {
-            [style.svgPrimary]: variant === 'primary',
-            [style.svgSecondary]: variant === 'secondary',
-            [style.svgTertiary]: variant === 'tertiary',
+            'fill-primary': variant === 'primary',
+            'fill-secondary': variant === 'secondary',
+            'fill-tertiary': variant === 'tertiary',
           },
-          style.svg,
-          'transition-backgroundColor',
+          'transition-backgroundColor mx-auto transform overflow-visible duration-500',
         )}
         width="24"
         height="24"
@@ -98,6 +94,4 @@ const HamburgerIcon = ({
       </svg>
     </Button>
   );
-};
-
-export default HamburgerIcon;
+}

package/{archive → src/components}/HorizontalLine/HorizontalLine.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 HorizontalLine from '.';
+import { HorizontalLine } from '.';
 
 const meta = {
   title: 'Components/HorizontalLine',
@@ -44,11 +44,11 @@ const meta = {
         defaultValue: { summary: 'false' },
       },
       defaultValue: 'false',
-    },
-  },
+    }
+  }
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof HorizontalLine>;
 
 export const Default: Story = {};

package/{archive → src/components}/HorizontalLine/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;
@@ -14,27 +10,23 @@ export interface Props {
   middleLine?: boolean;
 }
 
-const HorizontalLine = ({
+export const HorizontalLine = ({
   id,
   className,
   colour = 'primary',
   topLine = false,
   bottomLine = false,
   middleLine = false,
-}: Props): JSX.Element => {
+}: Props) => {
   const classList = classNames(
     {
-      [style.topLine]: topLine,
-      [style.bottomLine]: bottomLine,
-      [style.middleLine]: middleLine,
+      'mb-6': topLine,
+      'mt-6': bottomLine,
+      'my-6': middleLine,
     },
     className,
-    style[colour],
-    style.classList,
-    'theme-local',
-  );
+    'my-0 h-0.5 border-none py-0',
+  )
 
   return <hr id={id} className={classList} />;
-};
-
-export default HorizontalLine;
+}

package/src/components/Icon/Icon.stories.tsx

@@ -0,0 +1,22 @@
+import { faHeart } from '@fortawesome/fontawesome-free-solid';
+import { Meta, type StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import { Icon } from '.';
+
+const meta = {
+  title: 'Components/Icon',
+  component: Icon,
+  argTypes: {
+    ...idAndClassName,
+  },
+  args: {
+    icon: faHeart,
+  }
+}
+
+export default meta;
+
+type Story = StoryObj<typeof Icon>;
+
+export const Default: Story = {};

package/src/components/Icon/index.tsx

@@ -0,0 +1,25 @@
+import {
+  type IconProp,
+  type SizeProp,
+} from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+
+export interface IconProps {
+  id?: string;
+  icon: IconProp;
+  colour?: string;
+  size?: SizeProp;
+  onClick?: () => void;
+}
+
+export const Icon = ({ id, icon, colour, size = '1x', onClick }: IconProps) => {
+  return (
+    <FontAwesomeIcon
+      onClick={onClick}
+      id={id}
+      icon={icon}
+      size={size}
+      color={colour}
+    />
+  );
+}

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

@@ -1,46 +1,26 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { faHeading } from '@fortawesome/fontawesome-free-solid';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import IconCard from '.';
+import { IconCard } from '.';
 
 const meta = {
   title: 'Components/IconCard',
   component: IconCard,
   argTypes: {
     ...idAndClassName,
-    title: {
-      description: '',
-      table: {},
-    },
-    description: {
-      description: '',
-      table: {},
-    },
-    href: {
-      description: '',
-      table: {},
-    },
-    target: {
-      description: '',
-      table: {},
-    },
-    iconProps: {
-      description: '',
-      table: {},
-    },
   },
   args: {
     title: 'This is a title',
     description:
       'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium.',
     iconProps: {
-      size: 2,
-      type: 'unlock-keyhole',
-    },
-  },
+      icon: faHeading,
+    }
+  }
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof IconCard>;
 
 export const Default: Story = {};

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

@@ -1,39 +1,38 @@
 import React from 'react';
 
-import Icon, { type Props as IconProps } from '@components/Icon';
+import { Icon, type IconProps } from '@components/Icon';
 import classNames from 'classnames';
 
-
-
 interface AnchorAttributes
   extends Partial<
     Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
   > {}
 
-export interface Props {
+export interface IconCardProps {
   id?: string;
   className?: string;
   title: string;
   description: string;
   iconProps: IconProps;
-
   href?: string;
   target?: string;
   onClick?: () => void;
 }
 
-const IconCard: React.FC<Props> = ({
+export const IconCard = ({
   id,
   className,
   title,
   description,
   iconProps,
-
   href,
   target,
   onClick,
-}: Props): JSX.Element => {
-  const classList = classNames(style.wrapper, className, 'theme-local');
+}: IconCardProps) => {
+  const classList = classNames(
+    className,
+    'flex flex-col bg-white hover:bg-lightest-grey cursor-pointer shadow-xl drop-shadow mx-auto my-auto w-full rounded-2xl p-4',
+  )
 
   let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
   let attributes: AnchorAttributes = {};
@@ -45,13 +44,11 @@ const IconCard: React.FC<Props> = ({
 
   return (
     <Tag id={id} className={classList} onClick={onClick} {...attributes}>
-      <div className={style.iconWrapper}>
-        <Icon {...iconProps} size={2} />
+      <div className="py-2">
+        <Icon {...iconProps} size="2x" />
       </div>
-      <p className={style.title}>{title}</p>
-      <p className={style.description}>{description}</p>
+      <p className="pt-6 text-md font-semiBold text-ink">{title}</p>
+      <p className="text-light-grey">{description}</p>
     </Tag>
   );
-};
-
-export default IconCard;
+}

package/{archive → src/components}/Image/Image.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 Image from '.';
+import { Image } from '.';
 
 const meta = {
   title: 'Components/Image',
@@ -13,75 +13,75 @@ const meta = {
       description: 'The image to display on the component',
       table: {
         type: { summary: 'default' },
-      },
+      }
     },
     altText: {
       type: { name: 'string', required: false },
       description: 'The accessibility alt text for the image on the component',
       table: {
         type: { summary: 'default' },
-      },
+      }
     },
     title: {
       type: { name: 'string', required: false },
       description: 'The accessibility title for the image on the component',
       table: {
         type: { summary: 'default' },
-      },
+      }
     },
     rounded: {
       type: { name: 'boolean', required: false },
       description: 'Sets the corners of the component to rounded',
       table: {
         type: { summary: 'boolean' },
-      },
+      }
     },
     roundedFull: {
       type: { name: 'boolean', required: false },
       description: 'Sets the component to a circle shape',
       table: {
         type: { summary: 'boolean' },
-      },
+      }
     },
     height: {
       type: { name: 'number', required: false },
       description: 'Defines the height of the component',
       table: {
         type: { summary: 'number' },
-      },
+      }
     },
     width: {
       type: { name: 'number', required: false },
       description: 'Defines the width of the component',
       table: {
         type: { summary: 'number' },
-      },
+      }
     },
     overlayText: {
       type: { name: 'string', required: false },
       description: 'The text to show when hovering over the component',
       table: {
         type: { summary: 'default' },
-      },
+      }
     },
     centerAligned: {
       type: { name: 'boolean', required: false },
       description: 'Sets the component to the center',
       table: {
         type: { summary: 'boolean' },
-      },
-    },
+      }
+    }
   },
   args: {
     src: 'https://picsum.photos/200/200',
     height: 8,
     width: 8,
     overlayText: 'logo',
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Image>;
 
 export const Default: Story = {};