trepur_components 2.3.7 → 2.3.8

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

@@ -1,12 +1,15 @@
-import React, { useState, useEffect } from 'react';
+import { useState, useEffect } from 'react';
 
-import HorizontalLine from '@components/HorizontalLine';
-import Icon from '@components/Icon';
-import Image, { type Props as imageProps } from '@components/Image';
+import { HorizontalLine } from '@components/HorizontalLine';
+import { Icon } from '@components/Icon';
+import { Image, type Props as imageProps } from '@components/Image';
+import {
+  faChevronDown,
+  faChevronUp,
+} from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -17,7 +20,7 @@ export interface Props {
   children?: string | JSX.Element;
 }
 
-const Collapsible = ({
+export const Collapsible = ({
   id,
   className,
   preText,
@@ -25,7 +28,7 @@ const Collapsible = ({
   subtitle,
   imageProps,
   children,
-}: Props): JSX.Element => {
+}: Props) => {
   const [expanded, setExpanded] = useState(false);
 
   useEffect(() => {
@@ -33,7 +36,7 @@ const Collapsible = ({
     let i: number;
 
     for (i = 0; i < coll.length; i++) {
-      coll[i].addEventListener('click', function (this: any, err: any) {
+      coll[i]?.addEventListener('click', function (this: any, err: any) {
         const content = this.nextElementSibling;
 
         const scrollHeight: string = content.scrollHeight.toString();
@@ -48,17 +51,16 @@ const Collapsible = ({
 
   const classList = classNames(
     className,
-    style.classList,
-    'transition-opactiy theme-local',
-  );
+    'w-full border-b border-lightest-grey duration-300 hover:cursor-pointer transition-opactiy',
+  )
 
   const contentWrapperClassList = classNames(
     {
-      [style.expanded]: expanded,
-      [style.collapsed]: !expanded,
+      'mb-4 mt-2 max-h-max': expanded,
+      'max-h-0': !expanded,
     },
-    style.contentWrapperClassList,
-  );
+    'w-auto overflow-hidden px-4',
+  )
 
   const expandItem = (e: any): void => {
     const content = e.currentTarget.nextElementSibling;
@@ -69,7 +71,7 @@ const Collapsible = ({
       content.style.maxHeight = '0px';
     }
     setExpanded(!expanded);
-  };
+  }
 
   return (
     <div id={id} className={classList}>
@@ -77,25 +79,37 @@ const Collapsible = ({
         onClick={(e) => {
           expandItem(e);
         }}
-        className={style.heading}
+        className="flex h-24 px-4 sm:pr-8"
       >
         {imageProps !== undefined && (
-          <Image {...imageProps} width={3} height={3} className={style.image} />
+          <Image
+            {...imageProps}
+            width={3}
+            height={3}
+            className=" my-auto flex-none rounded-2xl"
+          />
         )}
-        <div className={style.textWrapper}>
+        <div className="mx-4 my-auto grid w-full">
           {preText !== undefined && (
-            <h4 className={style.preText}>{preText}</h4>
+            <h4 className="truncate text-xxs text-light-grey md:text-xs">
+              {preText}
+            </h4>
+          )}
+          {title !== undefined && (
+            <h4 className="truncate text-sm md:text-md">{title}</h4>
           )}
-          {title !== undefined && <h4 className={style.title}>{title}</h4>}
           {subtitle !== undefined && (
-            <h5 className={style.subtitle}>{subtitle}</h5>
+            <h5 className="truncate text-xs md:text-sm">{subtitle}</h5>
           )}
         </div>
         {children !== undefined && (
-          <div className={style.iconWrapper}>
+          <div className="my-auto flex-none">
             <Icon
-              className={style.icon}
-              type={expanded ? 'chevron-up' : 'chevron-down'}
+              icon={
+                expanded
+                  ? (faChevronUp as IconProp)
+                  : (faChevronDown as IconProp)
+              }
             />
           </div>
         )}
@@ -106,11 +120,9 @@ const Collapsible = ({
           style={{ transition: 'max-height 0.2s ease-out' }}
         >
           <HorizontalLine colour="grey" />
-          <div className={style.children}>{children}</div>
+          <div className="pb-2 pt-4">{children}</div>
         </div>
       )}
     </div>
   );
-};
-
-export default Collapsible;
+}

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

@@ -1,8 +1,8 @@
-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 Column from '.';
+import { Column } from '.';
 
 const cardChild = (
   <CardWithTopImage
@@ -35,7 +35,7 @@ const meta = {
         'The number of sections out of 12 that the component should span on sm screens',
       table: {
         type: { summary: 'number' },
-      },
+      }
     },
     md: {
       type: { name: 'number', required: false },
@@ -43,7 +43,7 @@ const meta = {
         'The number of sections out of 12 that the component should span on md screens',
       table: {
         type: { summary: 'number' },
-      },
+      }
     },
     lg: {
       type: { name: 'number', required: false },
@@ -51,7 +51,7 @@ const meta = {
         'The number of sections out of 12 that the component should span on lg screens',
       table: {
         type: { summary: 'number' },
-      },
+      }
     },
     xl: {
       type: { name: 'number', required: false },
@@ -59,7 +59,7 @@ const meta = {
         'The number of sections out of 12 that the component should span on xl screens',
       table: {
         type: { summary: 'number' },
-      },
+      }
     },
     children: {
       type: { name: 'other', value: 'string | React.ReactNode' },
@@ -69,8 +69,8 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     sm: 12,
@@ -79,11 +79,11 @@ const meta = {
     xl: 2,
     className: 'bg-facebook md:bg-twitter lg-whatsapp xl:bg-linkedin border',
     children: cardChild,
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Column>;
 
 export const Default: Story = {};

package/src/components/Column/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  sm?: number;
+  md?: number;
+  lg?: number;
+  xl?: number;
+  children?: any;
+}
+export const Column = ({
+  id,
+
+  children,
+}: Props) => {
+  return <div id={id}>{children}</div>;
+}

package/{archive → src/components}/ComponentWrapper/ComponentWrapper.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 ComponentWrapper from '.';
+import { ComponentWrapper } from '.';
 
 const meta = {
   title: 'Components/ComponentWrapper',
@@ -22,19 +22,19 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     title: 'This is a title',
     description:
       'Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis blanditiis cupiditate officiis aperiam culpa unde vitae quaerat, incidunt aliquam ut qui alias accusamus aspernatur in ad voluptatibus itaque, quibusdam distinctio.',
     children: <p>This is a centered ComponentWrapper with a max width</p>,
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof ComponentWrapper>;
 
 export const Default: Story = {};

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

@@ -1,11 +1,9 @@
-import React, { type CSSProperties } from 'react';
+import { type CSSProperties } from 'react';
 
-import Container from '@components/Container';
+import { Container } from '@components/Container';
 import { type Colours } from '@utils/controls';
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -17,7 +15,7 @@ export interface Props {
   withContainerPadding?: boolean;
 }
 
-const ComponentWrapper = ({
+export const ComponentWrapper = ({
   id,
   className,
   title,
@@ -26,30 +24,25 @@ const ComponentWrapper = ({
   children,
   styles,
   withContainerPadding = true,
-}: Props): JSX.Element => {
-  const classList = classNames(
-    className,
-    style.classList,
-    style[bgColour],
-    'theme-local',
-  );
+}: Props) => {
+  const classList = classNames(className, 'mx-auto w-full');
   const containerClasses = classNames({
-    [style.containerPadding]: withContainerPadding,
-  });
+    'py-8': withContainerPadding,
+  })
 
   return (
     <div id={id} className={classList} style={styles}>
       <Container withPadding className={containerClasses}>
-        <div className={style.heading}>
-          {title !== undefined && <h2 className={style.title}>{title}</h2>}
+        <div className="pt-0">
+          {title !== undefined && (
+            <h2 className="pb-2 text-lg font-regular">{title}</h2>
+          )}
           {description !== undefined && (
-            <p className={style.description}>{description}</p>
+            <p className="pb-8 text-md font-light">{description}</p>
           )}
         </div>
         {children}
       </Container>
     </div>
   );
-};
-
-export default ComponentWrapper;
+}

package/{archive → src/components}/Container/Container.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 Container from '.';
+import { Container } from '.';
 
 const meta = {
   title: 'Components/Container',
@@ -22,8 +22,8 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      },
-    },
+      }
+    }
   },
   args: {
     children: (
@@ -31,10 +31,10 @@ const meta = {
         <p className="my-20 text-center">This is a container</p>
       </div>
     ),
-  },
-};
+  }
+}
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Container>;
 
 export const Default: Story = {};

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

@@ -1,9 +1,5 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -11,14 +7,15 @@ export interface Props {
   children?: any;
 }
 
-const Container = ({ id, className, children }: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
+export const Container = ({ id, className, children }: Props) => {
+  const classList = classNames(
+    className,
+    'max-w-[2520px] px-6 md:px-10 lg:px-20',
+  )
 
   return (
     <div id={id} className={classList}>
       {children}
     </div>
   );
-};
-
-export default Container;
+}

package/{archive → src/components}/Counter/Counter.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 Counter from '.';
+import { Counter } from '.';
 
 const meta = {
   title: 'Components/Counter',
@@ -10,10 +10,10 @@ const meta = {
     ...idAndClassName,
   },
   args: {},
-};
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Counter>;
 
 export const Default: Story = {};

package/src/components/Counter/index.tsx

@@ -0,0 +1,42 @@
+import React, { useState } from 'react';
+
+import { Icon } from '@components/Icon';
+import {
+  faChevronCircleLeft,
+  faChevronCircleRight,
+} from '@fortawesome/fontawesome-free-solid';
+import { type IconProp } from '@fortawesome/fontawesome-svg-core';
+
+export interface Props {
+  id?: string;
+  count?: number;
+  onClick?: (count: number) => void;
+}
+
+export const Counter = ({ id, count = 0, onClick }: Props) => {
+  const [currentCount, setCurrentCount] = useState(count);
+
+  return (
+    <div id={id} className="z-10 inline-block rounded-lg">
+      <div className="flex gap-8">
+        <div className="my-auto cursor-pointer">
+          <Icon
+            icon={faChevronCircleLeft as IconProp}
+            onClick={() => {
+              setCurrentCount(currentCount - 1);
+            }}
+          />
+        </div>
+        <div className="overflow-hidden text-center">{currentCount}</div>
+        <div className="my-auto cursor-pointer">
+          <Icon
+            icon={faChevronCircleRight as IconProp}
+            onClick={() => {
+              setCurrentCount(currentCount + 1);
+            }}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -1,9 +1,9 @@
-import Input from '@components/Input';
+import { Input } from '@components/Input';
 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 DetailUpdater from '.';
+import { DetailUpdater } from '.';
 
 const meta = {
   title: 'Components/Detail Updater',
@@ -17,50 +17,50 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     description: {
       description: '',
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     expandText: {
       description: '',
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     collapseText: {
       description: '',
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     ctaText: {
       description: '',
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     onClick: {
       description: '',
       control: 'array',
       table: {
         category: '',
-      },
+      }
     },
     fields: {
       description: 'The default value of the input',
       control: 'text',
       table: {
         category: '',
-      },
-    },
+      }
+    }
   },
   args: {
     title: 'Legal Name',
@@ -68,10 +68,10 @@ const meta = {
     expandText: 'Edit',
     collapseText: 'Cancel',
     ctaText: 'Save',
-    onClick: (fieldValues) => {
+    onClick: (fieldValues: any) => {
       action('Submitted')(fieldValues);
     },
-    onChange: (value) => {
+    onChange: (value: any) => {
       action('Updated')(value);
     },
     children: (
@@ -81,16 +81,15 @@ const meta = {
         label="Title"
         placeholder="Insert title here"
         className="mb-4"
-        fullWidth={true}
-        required={true}
+        required
         // onChange={(e) => setTitle(e.target.value)}
       />
     ),
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof DetailUpdater>;
 
 export const Default: Story = {};

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

@@ -1,12 +1,9 @@
 import React, { useState } from 'react';
 
-import Button from '@components/Button';
-import classNames from 'classnames';
+import { Button } from '@components/Button';
 import 'keen-slider/keen-slider.min.css';
 
-
-
-export interface Props {
+export interface DetailUpdatesProps {
   id?: string;
   className?: string;
   title: string;
@@ -16,14 +13,13 @@ export interface Props {
   ctaText: string;
   onClick?: (fieldValues: any) => void;
   onChange?: (fieldValues: any) => void;
-
   children: React.ReactNode;
   onSubmit?: () => void;
   onCancel?: () => void;
   value?: string;
 }
 
-const DetailUpdater: React.FC<Props> = ({
+export const DetailUpdater = ({
   id,
   className,
   title,
@@ -37,14 +33,14 @@ const DetailUpdater: React.FC<Props> = ({
   onSubmit,
   onCancel,
   value,
-}) => {
+}: DetailUpdatesProps) => {
   const [expanded, setExpanded] = useState(false);
-  const classList = classNames(className, style.classList, 'theme-local');
+  const classList = className;
 
   const handleSubmit = (): void => {
     onSubmit?.();
     setExpanded(false);
-  };
+  }
   // const handleChange = (e: any): void => {
   //   const value = e.target.value
   //   const id = e.target.id
@@ -68,11 +64,11 @@ const DetailUpdater: React.FC<Props> = ({
   return (
     <div id={id} className={classList}>
       {!expanded && (
-        <div className={style.class}>
-          <div className={style.wrapper}>
-            <p className={style.title}>{title}</p>
+        <div className="mx-4 py-6">
+          <div className="flex justify-between">
+            <p className="font-semiBold text-ink">{title}</p>
             <p
-              className={style.expandText}
+              className="cursor-pointer font-semiBold text-ink underline"
               onClick={() => {
                 setExpanded(true);
               }}
@@ -80,15 +76,15 @@ const DetailUpdater: React.FC<Props> = ({
               {expandText}
             </p>
           </div>
-          <p className={style.value}>{value !== undefined ? value : '-'}</p>
+          <p className="text-ink">{value !== undefined ? value : '-'}</p>
         </div>
       )}
       {expanded && (
-        <div className={style.class}>
-          <div className={style.wrapper}>
-            <p className={style.title}>{title}</p>
+        <div className="mx-4 py-6">
+          <div className="flex justify-between">
+            <p className="font-semiBold text-ink">{title}</p>
             <p
-              className={style.expandText}
+              className="cursor-pointer font-semiBold text-ink underline"
               onClick={() => {
                 onCancel?.();
                 setExpanded(false);
@@ -97,16 +93,16 @@ const DetailUpdater: React.FC<Props> = ({
               {collapseText}
             </p>
           </div>
-          <p className={style.description}>{description}</p>
-          <div className={style.inputWrapper}>{children}</div>
+          <p className="text-light-grey">{description}</p>
+          <div className="grid w-full grid-cols-1 gap-0 py-4 md:grid-cols-2 md:gap-4 lg:w-2/3">
+            {children}
+          </div>
           <Button variant="secondary" onClick={handleSubmit}>
             {ctaText}
           </Button>
         </div>
       )}
-      <hr className={style.hr} />
+      <hr className="text-lightest-grey shadow" />
     </div>
   );
-};
-
-export default DetailUpdater;
+}