trepur_components 2.3.7 → 2.3.8

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

@@ -1,12 +1,10 @@
 import React, { useState } from 'react';
 
 import { type Props as buttonProps } from '@components/Button';
-import ComponentWrapper from '@components/ComponentWrapper';
+import { ComponentWrapper } from '@components/ComponentWrapper';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id: string;
   className?: string;
@@ -29,7 +27,7 @@ export interface Props {
   children?: any;
 }
 
-const TextAndTitle: React.FC<Props> = ({
+export const TextAndTitle = ({
   id,
   className,
   title,
@@ -46,47 +44,47 @@ const TextAndTitle: React.FC<Props> = ({
   withLiveUpdates = false,
   isHorizontal = true,
   children,
-}: Props): JSX.Element => {
+}: Props) => {
   const [isInEditingMode, setIsInEditingMode] = useState(false);
-  const borderClasses = style.bordered;
-  const classList = classNames(className, 'theme-local');
+  const borderClasses = 'border-4 border-transparent';
+  const classList = classNames(className);
 
   const titleClassList = classNames(
     {
-      [style.fontBold]: titleBold,
-      [style.textCenter]: titleCenter,
+      'font-bold': titleBold,
+      'text-center': titleCenter,
       [borderClasses]: withLiveUpdates && !isInEditingMode && isHorizontal,
     },
     titleClasses,
-    style.titleClassList,
-  );
+    'break-words text-lg font-light',
+  )
 
   const textClassList = classNames(
     {
-      [style.textCenter]: textCenter,
+      'text-center': textCenter,
       [borderClasses]: withLiveUpdates && !isInEditingMode && isHorizontal,
     },
     textClasses,
-    style.textClassList,
-  );
+    'mt-2 pt-2 text-md font-light',
+  )
 
   const toggleEditState = (): void => {
     withLiveUpdates && setIsInEditingMode(!isInEditingMode);
-  };
+  }
 
   const wrapperClassList = classNames({
-    [style.horizontalWrapperClassList]: isHorizontal,
-    [style.liveUpdatesWrapperClassList]: withLiveUpdates && !isInEditingMode,
-    [style.wrapperClassList]: isHorizontal,
-  });
+    'flex flex-wrap justify-center md:items-center': isHorizontal,
+    'hover:border-4 hover:border-dashed': withLiveUpdates && !isInEditingMode,
+    'border-4 border-transparent': isHorizontal,
+  })
 
   const titleWrapperClassList = classNames({
-    [style.horizontalTitleWrapperClassList]: isHorizontal,
-  });
+    'md:w-1/2 md:text-center': isHorizontal,
+  })
 
   const textWrapperClassList = classNames({
-    [style.horizontalTextWrapperClassList]: isHorizontal,
-  });
+    'md:w-1/2 md:text-center': isHorizontal,
+  })
 
   return (
     <ComponentWrapper
@@ -99,10 +97,10 @@ const TextAndTitle: React.FC<Props> = ({
       <div className={wrapperClassList} onClick={toggleEditState}>
         <div className={titleWrapperClassList}>
           {children !== undefined && children !== null ? (
-            children
-          ) : (
+                children
+              ) : (
             <h1 className={titleClassList}>{title}</h1>
-          )}
+              )}
         </div>
         <div className={textWrapperClassList}>
           <div id="textLineOne" className={textClassList}>
@@ -118,6 +116,4 @@ const TextAndTitle: React.FC<Props> = ({
       </div>
     </ComponentWrapper>
   );
-};
-
-export default TextAndTitle;
+}

package/{archive → src/components}/TextArea/TextArea.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 TextArea from '.';
+import { TextArea } from '.';
 
 const meta = {
   title: 'Components/Text Area',
@@ -15,21 +15,21 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     placeholder: {
       description: '',
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     bold: {
       description: '',
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     bgColour: {
       type: { name: 'string', required: false },
@@ -40,16 +40,16 @@ const meta = {
       },
       defaultValue: 'primary',
       control: 'select',
-    },
+    }
   },
   args: {
     label: 'This is a label',
     placeholder: 'This is a text area placeholder',
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof TextArea>;
 
 export const Default: Story = {};

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

@@ -1,10 +1,8 @@
-import React, { useRef } from 'react';
+import { useRef } from 'react';
 
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -29,7 +27,7 @@ export interface Props {
   bgColour?: Colours;
 }
 
-const TextArea = ({
+export const TextArea = ({
   id,
   className,
   autoComplete,
@@ -50,37 +48,40 @@ const TextArea = ({
   errors,
   errorState = false,
   value,
-}: Props): JSX.Element => {
+}: Props) => {
   const newId = id !== undefined ? `-${id}` : '';
 
   const valueClassList = classNames(
     {
-      [style.errorState]: errors != null || errorState,
+      'border-2 border-error': errors != null || errorState,
     },
-    style.value,
-  );
+    'w-full rounded-md bg-white py-2 pl-4 text-ink cursor-pointer border border-black text-md',
+  )
 
   const labelClassList = classNames(
     {
-      [style.labelError]: errors != null || errorState,
+      'text-error': errors != null || errorState,
     },
-    style.label,
-  );
+    'text-error',
+  )
 
-  const headerClassList = classNames(style.classList, className, 'theme-local');
+  const headerClassList = classNames(
+    className,
+    'mt-4 w-full bg-white cursor-pointer',
+  )
 
   const btnRef = useRef<any>(null);
 
   const handleClick = (): void => {
     btnRef.current?.focus();
-  };
+  }
 
   return (
     <>
       <div id={id} className={headerClassList} onClick={handleClick}>
-        <div className={style.labelWrapper}>
+        <div className="absolute -mt-3 ml-3 rounded-2xl bg-white px-1 text-sm font-regular">
           <p className={labelClassList}>{label}</p>
-          {required && <p className={style.required}>&nbsp;*</p>}
+          {required && <p className="font-semiBold text-error">&nbsp;*</p>}
         </div>
         <textarea
           ref={btnRef}
@@ -105,13 +106,13 @@ const TextArea = ({
         />
       </div>
       {withValidation && (
-        <div
-          id={`errors${newId}`}
-          className={classNames(style.errors, 'theme-local')}
-        >
+        <div id={`errors${newId}`} className="text-sm font-regular text-error">
           {errors?.map((error, i) => {
             return (
-              <p key={`error-msg-${i + 0}`} className={style.errorText}>
+              <p
+                key={`error-msg-${i + 0}`}
+                className="mt-1 border-l-4 border-error pl-3"
+              >
                 {error}
               </p>
             );
@@ -120,6 +121,4 @@ const TextArea = ({
       )}
     </>
   );
-};
-
-export default TextArea;
+}

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

@@ -1,12 +1,12 @@
-import CardWithTopImage from '@components/CardWithTopImage';
-import { Meta, StoryObj } from '@storybook/react';
+import { CardWithTopImage } from '@components/CardWithTopImage';
+import { Meta, type StoryObj } from '@storybook/react';
 import { idAndClassName } from '@utils/controls';
 
-import Timeline from '.';
+import { Timeline } from '.';
 import { type Props as imageProps } from '../Image';
 
 const timelineItems = (): Array<{
-  component: JSX.Element;
+  component: any;
   centerImageProps: imageProps;
 }> => {
   return new Array(8).fill(null).map((_, i) => {
@@ -38,9 +38,9 @@ const timelineItems = (): Array<{
         height: 4,
         centerAligned: true,
         roundedFull: true,
-      },
-    };
-  });
+      }
+    }
+  })
 };
 
 const meta = {
@@ -55,22 +55,22 @@ const meta = {
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     useImages: {
       description: '',
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     items: {
       description: '',
       control: 'array',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     title: 'This is a timeline',
@@ -82,11 +82,11 @@ const meta = {
     useImages: true,
     horizontalComponentClasses: 'w-96 h-96',
     isSm: true,
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Timeline>;
 
 export const Default: Story = {};

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

@@ -1,14 +1,10 @@
-import React from 'react';
-
-import Column from '@components/Column';
-import ComponentWrapper from '@components/ComponentWrapper';
-import Image from '@components/Image';
-import Row from '@components/Row';
+import { Column } from '@components/Column';
+import { ComponentWrapper } from '@components/ComponentWrapper';
+import { Image } from '@components/Image';
+import { Row } from '@components/Row';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -24,7 +20,7 @@ export interface Props {
   isSm?: boolean;
 }
 
-const Timeline = ({
+export const Timeline = ({
   id,
   className,
   title,
@@ -37,31 +33,29 @@ const Timeline = ({
   useImages = true,
   horizontalComponentClasses,
   isSm = false,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
+}: Props) => {
+  const classList = classNames(className, 'w-full list-none pb-4');
   const ulClasses = classNames(
     {
-      [`${style.ulHorizontal} none-reverse`]: !reverse && isHorizontal,
-      [`${style.ul} none-reverse`]: !reverse && !isHorizontal,
-      [`${style.ulHorizontalReverse} reverse`]: reverse && isHorizontal,
-      [`${style.ulVerticalReverse} reverse`]: reverse && !isHorizontal,
+      'flex-row justify-between none-reverse': !reverse && isHorizontal,
+      'flex-col none-reverse': !reverse && !isHorizontal,
+      'flex-row justify-between reverse': reverse && isHorizontal,
+      'flex-col reverse': reverse && !isHorizontal,
     },
     className,
-    style.ulClassList,
-    'status-flow timeline',
-  );
+    'relative flex list-none pl-0 status-flow timeline',
+  )
 
   const liClasses = classNames(
     {
-      [style.textCenter]: textCenter,
-      [style.liHorizontal]: !reverse && isHorizontal,
-      [`${style.li} none-reverse`]: !reverse && !isHorizontal,
-      [style.liHorizontalReverse]: reverse && isHorizontal,
-      [style.liVerticalReverse]: reverse && !isHorizontal,
+      'text-center': textCenter,
+      'flex-col items-center justify-between': !reverse && isHorizontal,
+      'flex-row none-reverse': !reverse && !isHorizontal,
+      'flex-col-reverse items-center': reverse && isHorizontal,
+      'flex-row-reverse': reverse && !isHorizontal,
     },
-    style.liClassList,
-    'status-flow-item',
-  );
+    'relative flex flex-auto flex-row leading-tight status-flow-item',
+  )
 
   const circle = classNames(
     {
@@ -69,8 +63,8 @@ const Timeline = ({
       horizontal: isHorizontal && !isSm,
       vertical: !isHorizontal,
     },
-    style.circle,
-  );
+    'mx-auto my-16 h-4 w-4 rounded-full border bg-black text-center',
+  )
 
   return (
     <ComponentWrapper
@@ -98,54 +92,64 @@ const Timeline = ({
 
           let verticalCircleStylesBefore;
           if (circlePos === 'circle' && isSm) {
-            verticalCircleStylesBefore = style.circleVerticalCollapseBefore;
+            verticalCircleStylesBefore =
+              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
           } else if (circlePos === 'circle' && !isSm) {
-            verticalCircleStylesBefore = style.circleVerticalBefore;
+            verticalCircleStylesBefore =
+              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
           } else if (circlePos === 'last-circle' && isSm) {
-            verticalCircleStylesBefore = style.lastCircleVerticalCollapseBefore;
+            verticalCircleStylesBefore =
+              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
           } else if (circlePos === 'last-circle' && !isSm) {
-            verticalCircleStylesBefore = style.lastCircleVerticalBefore;
+            verticalCircleStylesBefore =
+              'absolute top-0 block h-1/2 border-2 border-solid border-primary';
           }
 
           let verticalCircleStylesAfter;
           if (circlePos === 'circle' && isSm) {
-            verticalCircleStylesAfter = style.circleVerticalCollapseAfter;
+            verticalCircleStylesAfter =
+              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
           } else if (circlePos === 'circle' && !isSm) {
-            verticalCircleStylesAfter = style.circleVerticalAfter;
+            verticalCircleStylesAfter =
+              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
           } else if (circlePos === 'first-circle' && isSm) {
-            verticalCircleStylesAfter = style.firstCircleVerticalCollapseAfter;
+            verticalCircleStylesAfter =
+              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
           } else if (circlePos === 'first-circle' && !isSm) {
-            verticalCircleStylesAfter = style.firstCircleVerticalAfter;
+            verticalCircleStylesAfter =
+              'absolute bottom-0 block h-1/2 border-2 border-solid border-primary';
           }
 
           let horizontalCircleStylesBefore;
           if (circlePos === 'circle' && isSm) {
-            horizontalCircleStylesBefore = style.circleHorizontalCollapseBefore;
+            horizontalCircleStylesBefore = '';
           } else if (circlePos === 'circle' && !isSm) {
-            horizontalCircleStylesBefore = style.circleHorizontalBefore;
-          } else if (circlePos === 'last-circle' && isSm) {
             horizontalCircleStylesBefore =
-              style.lastCircleHorizontalCollapseBefore;
+              'absolute top-1/2 block border-2 border-solid border-primary';
+          } else if (circlePos === 'last-circle' && isSm) {
+            horizontalCircleStylesBefore = '';
           } else if (circlePos === 'last-circle' && !isSm) {
-            horizontalCircleStylesBefore = style.lastCircleHorizontalBefore;
+            horizontalCircleStylesBefore =
+              'absolute top-1/2 block border-2 border-solid border-primary';
           }
 
           let horizontalCircleStylesAfter;
           if (circlePos === 'circle' && isSm) {
-            horizontalCircleStylesAfter = style.circleHorizontalCollapseAfter;
+            horizontalCircleStylesAfter = '';
           } else if (circlePos === 'circle' && !isSm) {
-            horizontalCircleStylesAfter = style.circleHorizontalAfter;
-          } else if (circlePos === 'first-circle' && isSm) {
             horizontalCircleStylesAfter =
-              style.firstCircleHorizontalCollapseAfter;
+              'absolute top-1/2 block border-2 border-solid border-primary';
+          } else if (circlePos === 'first-circle' && isSm) {
+            horizontalCircleStylesAfter = '';
           } else if (circlePos === 'first-circle' && !isSm) {
-            horizontalCircleStylesAfter = style.firstCircleHorizontalAfter;
+            horizontalCircleStylesAfter =
+              'absolute top-1/2 block border-2 border-solid border-primary';
           }
 
           const horizonalComponentClassList = classNames(
             horizontalComponentClasses,
             'pt-12',
-          );
+          )
           if (isHorizontal) {
             return (
               <Column
@@ -167,13 +171,13 @@ const Timeline = ({
                       <span className={horizontalCircleStylesBefore} />
                       <Image
                         {...item.centerImageProps}
-                        className={style.imageProps}
+                        className="relative z-10"
                       />
                       <span className={horizontalCircleStylesAfter} />
                     </div>
-                  ) : (
+                      ) : (
                     <p id={circlePos} className={circle} />
-                  )}
+                      )}
                 </Row>
                 <Row className={horizonalComponentClassList}>
                   {!before && item.component}
@@ -211,13 +215,13 @@ const Timeline = ({
                       <span className={verticalCircleStylesBefore} />
                       <Image
                         {...item.centerImageProps}
-                        className={style.imageProps}
+                        className="relative z-10"
                       />
                       <span className={verticalCircleStylesAfter} />
                     </div>
-                  ) : (
+                      ) : (
                     <p id={circlePos} className={circle} />
-                  )}
+                      )}
                 </Column>
                 {/* TODO: combine below - issue with sm div */}
                 {isSm && (
@@ -249,6 +253,4 @@ const Timeline = ({
       </div>
     </ComponentWrapper>
   );
-};
-
-export default Timeline;
+}

package/{archive → src/components}/TimelineV2/TimelineV2.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 TimelineV2 from '.';
+import { TimelineV2 } from '.';
 
 const meta = {
   title: 'Components/TimelineV2',
@@ -15,22 +15,22 @@ const meta = {
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     useImages: {
       description: '',
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     items: {
       description: '',
       control: 'array',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     title: 'This is a timeline',
@@ -84,12 +84,12 @@ const meta = {
         },
         children:
           'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-    ],
+      }
+    ]
   },
-};
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof TimelineV2>;
 
 export const Default: Story = {};

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

@@ -1,11 +1,9 @@
-import Collapsible from '@components/Collapsible';
-import ComponentWrapper from '@components/ComponentWrapper';
+import { Collapsible } from '@components/Collapsible';
+import { ComponentWrapper } from '@components/ComponentWrapper';
 import { type Props as ImageProps } from '@components/Image';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 interface Item {
   preText?: string;
   title?: string;
@@ -23,15 +21,15 @@ export interface Props {
   items?: Item[];
 }
 
-const TimelineV2 = ({
+export const TimelineV2 = ({
   id,
   className,
   title,
   description,
   bgColour,
   items,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
+}: Props) => {
+  const classList = classNames(className, 'w-full list-none pb-4');
 
   return (
     <ComponentWrapper
@@ -43,14 +41,18 @@ const TimelineV2 = ({
     >
       {items?.map((item, i: number) => {
         return (
-          <div className={style.item} key={`timeline_${i}`}>
-            <div className={style.lineWrapper}>
-              <p className={style.circle} />
+          <div className="flex" key={`timeline_${i}`}>
+            <div className="hidden sm:block">
+              <p className="z-10 m-auto mt-12 h-4 w-4 rounded-full bg-light-grey" />
               <div
-                className={i !== items.length - 1 ? style.line : style.blank}
+                className={
+                  i !== items.length - 1
+                    ? 'm-auto h-full w-1 bg-light-grey'
+                    : 'border-r-2 border-transparent'
+                }
               />
             </div>
-            <div className={style.collapsible}>
+            <div className="my-2 w-full rounded-2xl bg-white sm:ml-8">
               <Collapsible
                 preText={item.preText}
                 title={item.title}
@@ -65,6 +67,4 @@ const TimelineV2 = ({
       })}
     </ComponentWrapper>
   );
-};
-
-export default TimelineV2;
+}