trepur_components 2.3.7 → 2.3.8

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

@@ -12,7 +12,7 @@ export interface Props {
   href?: string;
 }
 
-const BreadcrumbsItem = ({
+export const BreadcrumbsItem = ({
   id,
   className,
   name,
@@ -20,10 +20,10 @@ const BreadcrumbsItem = ({
   href,
   type,
   firstItem,
-}: Props): JSX.Element => {
+}: Props) => {
   const [isHovering, setIsHovering] = useState(false);
 
-  const classList = classNames(className, 'item theme-local');
+  const classList = classNames(className, 'item');
 
   const itemClassList = classNames(
     {
@@ -31,7 +31,7 @@ const BreadcrumbsItem = ({
       'mb-0': isHovering,
     },
     'bc-item relative px-4 h-8',
-  );
+  )
 
   const frontArrow = (
     <span
@@ -41,7 +41,7 @@ const BreadcrumbsItem = ({
         borderLeft: '16px solid',
         right: '-16px',
       }}
-      className='absolute top-0 h-0 w-0 border-t'
+      className="absolute top-0 h-0 w-0 border-t"
     />
   );
 
@@ -56,7 +56,7 @@ const BreadcrumbsItem = ({
           // '-webkit-transform': 'scaleY(-1)',
           transform: 'scaleY(-1)',
         }}
-        className='absolute h-0 w-0 border-l-transparent bg-transparent bottom-0'
+        className="absolute bottom-0 h-0 w-0 border-l-transparent bg-transparent"
       />
       <span
         style={{
@@ -65,14 +65,14 @@ const BreadcrumbsItem = ({
           borderLeft: '17px solid transparent',
           left: '-17px',
         }}
-        className='top-0 absolute h-0 w-0 border-l-transparent bg-transparent'
+        className="absolute top-0 h-0 w-0 border-l-transparent bg-transparent"
       />
     </>
   );
 
   const renderWithFrontArrow = (
     <div className={itemClassList}>
-      <p className='pt-1 text-center'>
+      <p className="pt-1 text-center">
         {name}
         {frontArrow}
       </p>
@@ -81,7 +81,7 @@ const BreadcrumbsItem = ({
 
   const renderWithBackArrows = (
     <div className={itemClassList}>
-      <p className='pt-1 text-center'>
+      <p className="pt-1 text-center">
         {backArrows}
         {name}
         {frontArrow}
@@ -92,7 +92,7 @@ const BreadcrumbsItem = ({
   return (
     <div id={id} className={classList}>
       {type === 'link' ? (
-        firstItem !== null ? (
+            firstItem !== null ? (
           <a
             onMouseOver={() => {
               setIsHovering(true);
@@ -102,9 +102,9 @@ const BreadcrumbsItem = ({
             }}
             href={href}
           >
-            <li className='list-none'>{renderWithFrontArrow}</li>
+            <li className="list-none">{renderWithFrontArrow}</li>
           </a>
-        ) : (
+                ) : (
           <a
             onMouseOver={() => {
               setIsHovering(true);
@@ -114,12 +114,12 @@ const BreadcrumbsItem = ({
             }}
             href={href}
           >
-            <li className='list-none'>{renderWithBackArrows}</li>
+            <li className="list-none">{renderWithBackArrows}</li>
           </a>
-        )
-      ) : firstItem !== null ? (
+                )
+          ) : firstItem !== null ? (
         <li
-          className='list-none'
+          className="list-none"
           onMouseOver={() => {
             setIsHovering(true);
           }}
@@ -129,9 +129,9 @@ const BreadcrumbsItem = ({
         >
           {renderWithFrontArrow}
         </li>
-      ) : (
+            ) : (
         <li
-          className='list-none'
+          className="list-none"
           onMouseOver={() => {
             setIsHovering(true);
           }}
@@ -141,9 +141,7 @@ const BreadcrumbsItem = ({
         >
           {renderWithBackArrows}
         </li>
-      )}
+            )}
     </div>
   );
-};
-
-export default BreadcrumbsItem;
+}

package/{archive → src/components}/Button/Button.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 Button from '.';
+import { Button } from '.';
 
 const meta = {
   title: 'Components/Button',
@@ -12,8 +12,8 @@ const meta = {
       description: {
         component:
           'A Button 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' },
-      },
+      }
     },
     hoverText: {
       type: {
@@ -40,8 +40,8 @@ const meta = {
         },
         defaultValue: {
           summary: 'undefined',
-        },
-      },
+        }
+      }
     },
     variant: {
       type: {
@@ -56,12 +56,12 @@ const meta = {
         },
         defaultValue: {
           summary: 'primary',
-        },
+        }
       },
       defaultValue: 'primary',
       control: {
         type: 'radio',
-      },
+      }
     },
     type: {
       type: {
@@ -76,7 +76,7 @@ const meta = {
         },
         defaultValue: {
           summary: 'default',
-        },
+        }
       },
       defaultValue: 'default',
       control: { type: 'radio' },
@@ -90,8 +90,8 @@ const meta = {
         },
         defaultValue: {
           summary: 'undefined',
-        },
-      },
+        }
+      }
     },
     rounded: {
       type: {
@@ -116,7 +116,7 @@ const meta = {
       table: {
         defaultValue: {
           summary: 'false',
-        },
+        }
       },
       description: 'Toggles the loading state of the compnent',
     },
@@ -133,18 +133,18 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     children: 'This is a button',
     rounded: true,
     onClick: action('button clicked'),
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Button>;
 
 export const Default: Story = {};

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

@@ -1,10 +1,10 @@
 import React from 'react';
 
-import Icon from '@components/Icon';
+import { Icon } from '@components/Icon';
+import { faSpinner } from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import classNames from 'classnames';
 
-
-
 interface AnchorAttributes
   extends Partial<
     Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
@@ -27,7 +27,7 @@ export interface Props {
   children?: any;
 }
 
-const Button = ({
+export const Button = ({
   id,
   className,
   onClick,
@@ -41,48 +41,43 @@ const Button = ({
   isLoading = false,
   openInNewTab = false,
   children,
-}: Props): JSX.Element => {
+}: Props) => {
   const padding = classNames(
     {
-      [style.social]: type === 'social',
-      [style.icon]: type === 'icon',
-      [style.default]: type === 'default',
+      'px-1 py-1': type === 'social',
+      'px-3': type === 'icon',
+      'px-8': type === 'default',
     },
-    [style.padding],
-  );
+    'py-3',
+  )
 
   const loadingClasses = classNames(
     {
       invisible: !isLoading,
     },
-    style.loading,
-  );
+    'absolute left-2/4 top-1/4 -ml-2',
+  )
 
   const classList = classNames(
     {
-      [style.primary]: variant === 'primary',
-      [style.primaryNotDisabled]: !disabled && variant === 'primary',
-      [style.secondary]: variant === 'secondary',
-      [style.secondaryNotDisabled]: !disabled && variant === 'secondary',
-      [style.disabled]: disabled,
-      [style.rounded]: rounded,
-      [style.notRounded]: !rounded,
+      'border-secondary bg-primary text-secondary outline-primary':
+        variant === 'primary',
+      'hover:border-primary hover:bg-secondary hover:text-primary focus:border-primary focus:bg-secondary focus:text-primary':
+        !disabled && variant === 'primary',
+      'border-primary bg-secondary text-primary outline-secondary':
+        variant === 'secondary',
+      'hover:border-tertiary hover:bg-secondary hover:text-tertiary focus:border-tertiary focus:bg-secondary focus:text-tertiary':
+        !disabled && variant === 'secondary',
+      'opacity-50': disabled,
+      'rounded-lg': rounded,
+      'rounded-none': !rounded,
     },
-    style.classList,
+    'transform border-2 text-sm duration-500 inline-block text-center focus:outline',
     className,
     padding,
-    'theme-local',
-  );
+  )
 
-  const loadingIcon = (
-    <Icon
-      size={1}
-      type="spinner"
-      animation="pulse"
-      colour="white"
-      bgColour="primary"
-    />
-  );
+  const loadingIcon = <Icon icon={faSpinner as IconProp} />;
 
   let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'button'> = 'button';
   let attributes: AnchorAttributes = {};
@@ -106,6 +101,4 @@ const Button = ({
       {isLoading && <div className={loadingClasses}>{loadingIcon}</div>}
     </Tag>
   );
-};
-
-export default Button;
+}

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

@@ -1,11 +1,11 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Calendar from '.';
+import { CalendarComponent } from '.';
 
 const meta = {
   title: 'Components/Calendar',
-  component: Calendar,
+  component: CalendarComponent,
   argTypes: {
     ...idAndClassName,
 
@@ -56,12 +56,12 @@ const meta = {
         defaultValue: {
           summary: new Date(
             new Date().setFullYear(new Date().getFullYear() + 1),
-          ),
-        },
+          )
+        }
       },
       defaultValue: new Date(
         new Date().setFullYear(new Date().getFullYear() + 1),
-      ),
+      )
     },
     disabledDates: {
       type: { name: 'array', required: false },
@@ -70,13 +70,13 @@ const meta = {
         defaultValue: { summary: [] },
       },
       defaultValue: [],
-    },
+    }
   },
   args: {},
-};
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof CalendarComponent>;
 
 export const Default: Story = {};

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

@@ -9,7 +9,6 @@ export type Detail = 'month' | 'year' | 'decade' | 'century';
 export interface Props {
   id?: string;
   className?: string;
-
   onChange?: () => void;
   useRange?: boolean;
   minDetail?: Detail;
@@ -20,11 +19,10 @@ export interface Props {
   showDoubleView?: boolean;
 }
 
-const CalendarComponent: React.FC<Props> = ({
-  id = 'sdfghj',
+export const CalendarComponent = ({
+  id,
   className,
   onChange,
-
   useRange = false,
   minDetail = 'month',
   minDate = new Date(),
@@ -32,7 +30,7 @@ const CalendarComponent: React.FC<Props> = ({
   showNavigation = true,
   disabledDates = [],
   showDoubleView = true,
-}: Props): JSX.Element => {
+}: Props) => {
   const [today, setToday] = useState(new Date());
 
   const calculateDisabledDates = (date: any, disabledDates: any): boolean => {
@@ -43,10 +41,10 @@ const CalendarComponent: React.FC<Props> = ({
     }).format(date?.date);
 
     return disabledDates.includes(formattedDate);
-  };
+  }
 
   return (
-    <div id={id} className={classNames(className, 'theme-local')}>
+    <div id={id} className={className}>
       <Calendar
         onActiveStartDateChange={({ value, activeStartDate, action }) => {
           const toFormat = activeStartDate !== null ? activeStartDate : today;
@@ -71,6 +69,4 @@ const CalendarComponent: React.FC<Props> = ({
       />
     </div>
   );
-};
-
-export default CalendarComponent;
+}

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

@@ -1,7 +1,7 @@
-import { Meta, StoryObj } from '@storybook/react';
+import { type Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Card from '.';
+import { Card } from '.';
 
 const meta = {
   title: 'Components/Card',
@@ -47,7 +47,7 @@ const meta = {
     buttonProps: {
       description: '',
       table: {},
-    },
+    }
   },
   args: {
     imageProps: {
@@ -64,12 +64,12 @@ const meta = {
       hoverText: 'buttonHoverText',
       href: '/',
       rounded: true,
-    },
-  },
-};
+    }
+  }
+} satisfies Meta<typeof Card>;
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Card>;
 
 export const Default: Story = {};

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

@@ -1,11 +1,8 @@
 import React from 'react';
 
-import Button, { type Props as buttonProps } from '@components/Button';
+import { Button, type Props as buttonProps } from '@components/Button';
 import { type Props as imageProps } from '@components/Image';
-import Video, { type Props as videoProps } from '@components/Video';
-import classNames from 'classnames';
-
-
+import { Video, type Props as videoProps } from '@components/Video';
 
 interface AnchorAttributes
   extends Partial<
@@ -25,7 +22,7 @@ export interface Props {
   buttonProps?: buttonProps;
 }
 
-const Card: React.FC<Props> = ({
+export const Card = ({
   id,
   className,
   imageProps,
@@ -36,12 +33,7 @@ const Card: React.FC<Props> = ({
   href,
   target,
   buttonProps,
-}: Props): JSX.Element => {
-  const cardTitleClasses = classNames(style.title);
-  const cardSubTitleClassList = classNames(style.subtitle);
-  const cardDescriptionClassList = classNames(style.description);
-  const classList = classNames(className, style.classList, 'theme-local');
-  const imageClassList = classNames(style.imageClassList);
+}: Props) => {
   let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
   let attributes: AnchorAttributes = {};
 
@@ -56,7 +48,11 @@ const Card: React.FC<Props> = ({
     Tag === 'div';
 
   return (
-    <Tag id={id} className={classList} {...attributes}>
+    <Tag
+      id={id}
+      className={`${className} flex max-w-96 flex-col overflow-hidden rounded-lg shadow-xl`}
+      {...attributes}
+    >
       <div>
         {videoProps?.mp4File !== undefined ||
         videoProps?.webmFile !== undefined ||
@@ -65,7 +61,7 @@ const Card: React.FC<Props> = ({
         ) : (
           imageProps !== undefined && (
             <img
-              className={imageClassList}
+              className="w-full"
               title={`${title?.replace(/\s/g, '-') ?? 'a'}-logo`}
               alt={
                 title !== undefined
@@ -77,26 +73,24 @@ const Card: React.FC<Props> = ({
           )
         )}
       </div>
-      <div className={style.contentWrapper}>
-        <div className={style.movingContent}>
-          {title !== undefined && <h3 className={cardTitleClasses}>{title}</h3>}
+      <div className="p-2">
+        <div>
+          {title !== undefined && (
+            <h3 className="text-md font-regular">{title}</h3>
+          )}
           {subTitle !== undefined && (
-            <h4 className={cardSubTitleClassList}>{subTitle}</h4>
+            <h4 className="text-sm font-regular text-ink">{subTitle}</h4>
           )}
         </div>
-        <div className={style.staticContent}>
+        <div>
           {description !== undefined && (
-            <p className={cardDescriptionClassList}>{description}</p>
+            <p className="flex-1 pb-6 text-sm font-light">{description}</p>
           )}
           {shouldDisplayButton && (
-            <Button className={style.buttonClassList} {...buttonProps}>
-              {buttonProps?.children}
-            </Button>
+            <Button {...buttonProps}>{buttonProps?.children}</Button>
           )}
         </div>
       </div>
     </Tag>
   );
-};
-
-export default Card;
+}

package/{archive → src/components}/CardWithTopImage/CardWithTopImage.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 CardWithTopImage from '.';
+import { CardWithTopImage } from '.';
 
 const meta = {
   title: 'Components/Card With Top Image',
@@ -16,7 +16,7 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     imageProps: {
       type: { name: 'other', value: 'object' },
@@ -26,8 +26,8 @@ const meta = {
           summary: 'object',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     imageProps: {
@@ -39,12 +39,12 @@ const meta = {
     children: [
       <p key="1">This is a child</p>,
       <p key="2">This is another child</p>,
-    ],
-  },
+    ]
+  }
 };
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof CardWithTopImage>;
 
 export const Default: Story = {};

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

@@ -1,10 +1,6 @@
-import React from 'react';
-
-import Image, { type Props as imageProps } from '@components/Image';
+import { Image, type Props as imageProps } from '@components/Image';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -12,14 +8,14 @@ export interface Props {
   imageProps?: imageProps;
 }
 
-const CardWithTopImage = ({
+export const CardWithTopImage = ({
   id,
   className,
   children,
   imageProps,
-}: Props): JSX.Element => {
+}: Props) => {
   const src = imageProps?.src !== undefined ? imageProps.src : '';
-  const cardClassList = classNames(className, style.cardClasses, 'theme-local');
+  const cardClassList = classNames(className, 'max-w-[500px]');
   return (
     <div
       style={{
@@ -28,12 +24,12 @@ const CardWithTopImage = ({
       id={id}
       className={cardClassList}
     >
-      <div className={style.wrapperClassList}>
+      <div className="mx-auto max-w-max rounded-full bg-white p-4">
         <Image src={src} {...imageProps} />
       </div>
-      <div className={style.contentClassList}>{children}</div>
+      <div className="-mt-12 h-auto bg-white px-4 pb-16 pt-12 text-black">
+        {children}
+      </div>
     </div>
   );
-};
-
-export default CardWithTopImage;
+}