trepur_components 2.3.7 → 2.3.8

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

@@ -1,9 +1,7 @@
-import React, { useState } from 'react';
+import { useState } from 'react';
 
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -19,7 +17,7 @@ export interface Props {
   bordered?: boolean;
 }
 
-const Image = ({
+export const Image = ({
   id,
   className,
   src,
@@ -32,73 +30,72 @@ const Image = ({
   overlayText,
   centerAligned = false,
   bordered = false,
-}: Props): JSX.Element => {
+}: Props) => {
   const [isHovering, setIsHovering] = useState(false);
   const opacity = classNames({
-    [style.visible]: isHovering,
-    [style.invisible]: !isHovering,
-  });
+    'opacity-80': isHovering,
+    'opacity-0': !isHovering,
+  })
 
   const widthClassList = classNames({
-    [style.width1]: width === 1,
-    [style.width2]: width === 2,
-    [style.width3]: width === 3,
-    [style.width4]: width === 4,
-    [style.width5]: width === 5,
-    [style.width6]: width === 6,
-    [style.width7]: width === 7,
-    [style.width8]: width === 8,
-    [style.width9]: width === 9,
-    [style.width10]: width === 10,
-    [style.width11]: width === 11,
-    [style.width12]:
+    'w-6': width === 1,
+    'w-10': width === 2,
+    'w-14': width === 3,
+    'w-16': width === 4,
+    'w-20': width === 5,
+    'w-24': width === 6,
+    'w-28': width === 7,
+    'w-32': width === 8,
+    'w-36': width === 9,
+    'w-40': width === 10,
+    'w-44': width === 11,
+    'w-full':
       width === undefined ||
       ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(width),
-  });
+  })
 
   const heightClassList = classNames({
-    [style.height1]: height === 1,
-    [style.height2]: height === 2,
-    [style.height3]: height === 3,
-    [style.height4]: height === 4,
-    [style.height5]: height === 5,
-    [style.height6]: height === 6,
-    [style.height7]: height === 7,
-    [style.height8]: height === 8,
-    [style.height9]: height === 9,
-    [style.height10]: height === 10,
-    [style.height11]: height === 11,
-    [style.height12]:
+    'h-6': height === 1,
+    'h-10': height === 2,
+    'h-14': height === 3,
+    'h-16': height === 4,
+    'h-20': height === 5,
+    'h-24': height === 6,
+    'h-28': height === 7,
+    'h-32': height === 8,
+    'h-36': height === 9,
+    'h-40': height === 10,
+    'h-44': height === 11,
+    'h-full':
       height === undefined ||
       ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(height),
-  });
+  })
 
   const imageClassList = classNames(
     {
-      [style.rounded]: rounded,
-      [style.roundedFull]: roundedFull,
-      [style.centerAligned]: centerAligned,
-      [style.bordered]: bordered,
+      'rounded-2xl': rounded,
+      'rounded-full': roundedFull,
+      'mx-auto': centerAligned,
+      'border-4 border-primary': bordered,
     },
     className,
     widthClassList,
     heightClassList,
-    'theme-local',
-  );
+  )
 
   const overlayClassList = classNames(
     widthClassList,
     heightClassList,
     opacity,
-    style.overlayClassList,
-  );
+    'absolute z-10 bg-white transition-opacity duration-700',
+  )
 
   const overlayTextWrapperClassList = classNames(
     widthClassList,
     heightClassList,
     opacity,
-    style.overlayTextWrapperClassList,
-  );
+    'absolute z-20 flex transition-opacity duration-700',
+  )
 
   return (
     <div className={imageClassList}>
@@ -114,7 +111,7 @@ const Image = ({
               setIsHovering(false);
             }}
           >
-            <p className={style.overlayTextClassList}>{overlayText}</p>
+            <p className="m-auto text-center text-primary">{overlayText}</p>
           </div>
         </>
       )}
@@ -127,6 +124,4 @@ const Image = ({
       />
     </div>
   );
-};
-
-export default Image;
+}

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

@@ -1,14 +1,13 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import ImageInfo from '.';
+import { ImageInfo } from '.';
 
 const meta = {
   title: 'Components/Image Info',
   component: ImageInfo,
   argTypes: {
     ...idAndClassName,
-
     bgColour: {
       type: { name: 'string', required: false },
       options: ['primary', 'secondary', 'white', 'black', 'gold'],
@@ -18,22 +17,22 @@ const meta = {
       },
       defaultValue: 'primary',
       control: 'select',
-    },
+    }
   },
   args: {
-    // title: 'This is a title',
-    // description: 'what do you recon to this?',
+    title: 'This is a title',
+    description: 'what do you recon to this?',
     contentTitle: 'This is a title',
     text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse quia ducimus dolores exercitationem officia repudiandae maiores voluptatum iusto cum. Quae tenetur veniam quam nihil cupiditate fugiat, ratione minima illo! Cum.',
     image: 'https://picsum.photos/400/200',
     swapDesktop: true,
     swapMobile: true,
     bgColour: '#31A3DD',
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ImageInfo>;
 
 export const Default: Story = {};

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

@@ -1,12 +1,9 @@
-import React from 'react';
-
-import Container from '@components/Container';
 import { type Colours } from '@utils/controls';
 import MatchMedia from '@utils/matchMedia';
 import { Screens } from '@utils/screens';
 import classNames from 'classnames';
 
-
+import { Container } from '..';
 
 export interface Props {
   id: string;
@@ -20,7 +17,7 @@ export interface Props {
   swapMobile?: boolean;
 }
 
-const ImageInfo: React.FC<Props> = ({
+export const ImageInfo = ({
   id,
   className,
   bgColour,
@@ -30,8 +27,8 @@ const ImageInfo: React.FC<Props> = ({
   image,
   swapDesktop = false,
   swapMobile = false,
-}: Props): JSX.Element => {
-  const classList = className;
+}: Props) => {
+  const classList = `${className} w-full max-h-[800px]`;
   const mediumScreen: string = Screens.md;
   const lgScreenSize: string = `(min-width: ${mediumScreen})`;
   const smScreenSize: string = `(max-width: ${mediumScreen})`;
@@ -40,27 +37,21 @@ const ImageInfo: React.FC<Props> = ({
 
   const wrapperClassList = classNames(
     {
-      [style.wrapper]: !swapDesktop,
-      [style.reverseWrapper]: swapDesktop,
-      [style.reverseMobileWrapper]: !isLg && swapMobile,
+      'md:flex-row': !swapDesktop,
+      'md:flex-row-reverse': swapDesktop,
+      'flex flex-col-reverse': !isLg && swapMobile,
     },
-    style.wrapperClasses,
-    'theme-local',
-  );
+    'md:flex',
+  )
 
-  const imageWrapperClasses = classNames(
-    {
-      [style.smallImageWrapper]: isSm,
-    },
-    style.imageWrapper,
-  );
+  const imageWrapperClasses = classNames('max-h-96');
 
   const imageClasses = classNames(
     {
-      [style.smallImageHeight]: isSm,
+      'h-[100vw]': isSm,
     },
-    style.image,
-  );
+    'h-full w-full object-cover',
+  )
 
   return (
     <div
@@ -78,11 +69,11 @@ const ImageInfo: React.FC<Props> = ({
               title={contentTitle}
             />
           </div>
-          <div className={style.contentWrapper}>
-            <div className={style.content}>
+          <div className="md:w-1/2">
+            <div className="flex h-full items-center justify-center p-8 text-center">
               <div>
-                <p className={style.title}>{contentTitle}</p>
-                <p className={style.text}>{text}</p>
+                <p className="text-lg font-regular">{contentTitle}</p>
+                <p className="text-md font-light">{text}</p>
               </div>
             </div>
           </div>
@@ -90,6 +81,4 @@ const ImageInfo: React.FC<Props> = ({
       </Container>
     </div>
   );
-};
-
-export default ImageInfo;
+}

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

@@ -1,8 +1,7 @@
-import Column from '@components/Column';
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import ImageLink from '.';
+import { ImageLink } from '.';
 
 const meta = {
   title: 'Components/Image Link',
@@ -15,23 +14,23 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     image: {
       description: '',
       control: 'text',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     image: 'https://picsum.photos/400/400',
     link: '/',
-  },
-};
+  }
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ImageLink>;
 
 export const Default: Story = {};

package/src/components/ImageLink/index.tsx

@@ -0,0 +1,58 @@
+import { Button, type Props as buttonProps } from '@components/Button';
+import classNames from 'classnames';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  image?: string;
+  altText?: string;
+  title?: string;
+  link?: string;
+  rounded?: boolean;
+  openInNewTab?: boolean;
+  buttonProps?: buttonProps;
+}
+export const ImageLink = ({
+  id,
+  className,
+  image,
+  altText,
+  title,
+  link,
+  rounded,
+  openInNewTab,
+  buttonProps,
+}: Props) => {
+  const classList = classNames(
+    className,
+    'mx-1 mb-2 cursor-pointer overflow-hidden text-center hover:opacity-50 md:mx-1 md:mb-2 lg:mx-3 lg:mb-5 max-w-96',
+  )
+
+  const roundedClass = classNames({
+    'rounded-full': rounded,
+  })
+
+  return (
+    <a id={id} href={link} {...(openInNewTab && { target: 'blank' })}>
+      <div
+        className={classNames(
+          roundedClass,
+          classList,
+          'relative overflow-hidden',
+        )}
+      >
+        <img src={image} alt={altText} className="h-full w-full object-cover" />
+        {title !== undefined && (
+          <h1 className="absolute inset-x-0 top-0 mt-4 bg-black py-2 text-center text-white">
+            {title}
+          </h1>
+        )}
+        {buttonProps?.children !== undefined && (
+          <Button className="absolute inset-x-0 bottom-0 mx-8 mb-4 text-center">
+            {buttonProps.children}
+          </Button>
+        )}
+      </div>
+    </a>
+  );
+}

package/{archive → src/components}/ImageLinkList/ImageLinkList.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 ImageLinkList from '.';
+import { ImageLinkList } from '.';
 
 const getLinks = (): any => {
   return new Array(16).fill(null).map(() => {
@@ -10,9 +10,9 @@ const getLinks = (): any => {
       title: 'Hi',
       buttonProps: {
         children: <p>button</p>,
-      },
-    };
-  });
+      }
+    }
+  })
 };
 
 const meta = {
@@ -24,11 +24,11 @@ const meta = {
   },
   args: {
     items: getLinks(),
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ImageLinkList>;
 
 export const Default: Story = {};

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

@@ -1,9 +1,6 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
-import ImageLink, { type Props as imageLinkProps } from '../ImageLink';
-
+import { ImageLink, type Props as imageLinkProps } from '../ImageLink';
 
 export interface Props {
   id?: string;
@@ -11,8 +8,8 @@ export interface Props {
   items?: imageLinkProps[];
 }
 
-const ImageLinkList = ({ id, className, items }: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
+export const ImageLinkList = ({ id, className, items }: Props) => {
+  const classList = classNames(className, 'grid sm:grid-cols-2 md:grid-cols-4');
 
   return (
     <div id={id} className={classList}>
@@ -28,6 +25,4 @@ const ImageLinkList = ({ id, className, items }: Props): JSX.Element => {
       })}
     </div>
   );
-};
-
-export default ImageLinkList;
+}

package/src/components/InformationIcon/InformationIcon.stories.tsx

@@ -0,0 +1,29 @@
+import { faHeart } from '@fortawesome/fontawesome-free-solid';
+import { Meta, type StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import { InformationIcon } from '.';
+
+const meta = {
+  title: 'Components/Information Icon',
+  component: InformationIcon,
+  argTypes: {
+    ...idAndClassName,
+  },
+  args: {
+    title: 'Self check-in',
+    subtitle: 'Check yourself in with the smartlock.',
+    withAnimation: true,
+    backgroundColour: 'white',
+    iconProps: {
+      icon: faHeart,
+      hollow: true,
+    }
+  }
+};
+
+export default meta;
+
+type Story = StoryObj<typeof InformationIcon>;
+
+export const Default: Story = {};

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

@@ -1,64 +1,48 @@
-import React, { useEffect, useRef } from 'react';
+import { useEffect, useRef } from 'react';
 
-import Icon, { type Props as iconProps } from '@components/Icon';
-import { type Colours } from '@utils/controls';
+import { Icon, type IconProps } from '@components/Icon';
 import MatchMedia from '@utils/matchMedia';
 import classNames from 'classnames';
 
-
-
-export interface Props {
+export interface InformationIconProps {
   id: string;
   className?: string;
   title: string;
   subtitle?: string | number;
   withAnimation?: boolean;
-  withHoverEffect?: boolean;
-  iconProps: iconProps;
-  backgroundColour?: Colours;
-
+  iconProps: IconProps;
   large?: boolean;
 }
 
-const InformationIcon = ({
+export const InformationIcon = ({
   id,
   className,
   title,
   subtitle,
   withAnimation = false,
-  withHoverEffect = true,
   iconProps,
-  backgroundColour = 'white',
-
   large = true,
-}: Props): JSX.Element => {
+}: InformationIconProps) => {
   const loaded = useRef(false);
   const smScreenSize = 'max-width: 768px';
   const isSm: boolean = MatchMedia(smScreenSize);
   const classList = classNames(
     {
-      [style.hoverable]: withHoverEffect,
-      [style.large]: large,
-      [style.small]: !large,
+      'py-8': large,
+      'pb-4': !large,
       'pt-4': !large,
     },
     className,
-    style.classList,
-    style[backgroundColour],
-    'theme-local',
-  );
+    'rounded-2xl text-center sm:flex sm:text-left grid gap-6',
+  )
 
   const titleClassList = classNames({
-    [style.centerText]: subtitle === undefined,
-    [style.title]: subtitle !== undefined,
-  });
+    'font-light sm:font-semiBold': subtitle !== undefined,
+  })
 
   const subtitleClassList = classNames(
-    {
-      [style.centerText]: title === undefined,
-    },
-    style.subtitle,
-  );
+    'text-xxl font-medium sm:text-xs sm:font-regular',
+  )
 
   useEffect(() => {
     if (typeof subtitle === 'number') {
@@ -73,12 +57,12 @@ const InformationIcon = ({
                 0,
                 subtitle,
                 3000,
-              );
+              )
             }
           });
         },
         { threshold: 1 },
-      );
+      )
       element != null && withAnimation && observer.observe(element);
     }
   }, []);
@@ -99,21 +83,16 @@ const InformationIcon = ({
       }
     };
     window.requestAnimationFrame(step);
-  };
+  }
 
   return (
     <div id={id} className={classList}>
-      <div className={style.icon}>
+      <div className="sm:h-full">
         {iconProps !== undefined && (
-          <Icon
-            {...iconProps}
-            className="mx-auto"
-            size={isSm ? 3 : 2}
-            bgColour={backgroundColour}
-          />
+          <Icon {...iconProps} size={isSm ? '3x' : '2x'} />
         )}
       </div>
-      <div className={style.text}>
+      <div className="mt-8 flex flex-col-reverse sm:mt-0 sm:block sm:pr-4 md:pr-8">
         {title !== undefined && title !== '' && (
           <p className={titleClassList}>{title}</p>
         )}
@@ -123,6 +102,4 @@ const InformationIcon = ({
       </div>
     </div>
   );
-};
-
-export default InformationIcon;
+}

package/src/components/InformationIconBlock/InformationIconBlock.stories.tsx

@@ -0,0 +1,38 @@
+import {
+  faCalendar,
+  faGlobe,
+  faList,
+  faUniversity,
+} from '@fortawesome/fontawesome-free-solid';
+import { Meta, type StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import { InformationIconBlock } from '.';
+
+const icons = [
+  { name: 'Current Age', value: '27', icon: faCalendar },
+  { name: 'Countries Visited', value: '20', icon: faGlobe },
+  { name: 'Projects', value: '27', icon: faList },
+  { name: 'Years in industry', value: '4', icon: faUniversity },
+]
+
+const meta = {
+  title: 'Components/Information Icon Block',
+  component: InformationIconBlock,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+  },
+  args: {
+    title: 'Information Icon Block',
+    description: 'What do you recon to this? Prob needs a refurb right?',
+    icons,
+    bgColour: 'primary',
+  }
+}
+
+export default meta;
+
+type Story = StoryObj<typeof InformationIconBlock>;
+
+export const Default: Story = {};