trepur_components 2.3.7 → 2.3.8

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

@@ -1,13 +1,8 @@
-import React from 'react';
-
-import ComponentWrapper from '@components/ComponentWrapper';
-import Container from '@components/Container';
-import { type Props as iconProps } from '@components/Icon';
-import InformationIcon from '@components/InformationIcon';
+import { ComponentWrapper } from '@components/ComponentWrapper';
+import { Container } from '@components/Container';
+import { type IconProps } from '@components/Icon';
+import { InformationIcon } from '@components/InformationIcon';
 import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
 
 export interface Props {
   id?: string;
@@ -15,18 +10,18 @@ export interface Props {
   title?: string;
   description?: string;
   bgColour?: Colours;
-  icons?: iconProps[];
+  icons?: IconProps[];
 }
 
-const InformationIconBlock = ({
+export const InformationIconBlock = ({
   id,
   className,
   title,
   description,
   bgColour,
   icons,
-}: Props): JSX.Element => {
-  const classList = classNames(className, 'theme-local');
+}: Props) => {
+  const classList = className;
   return (
     <ComponentWrapper
       id={id}
@@ -35,18 +30,18 @@ const InformationIconBlock = ({
       description={description}
       bgColour={bgColour}
     >
-      <Container className={style.iconWrapper} withPadding={false}>
+      <Container
+        className="grid grid-cols-2 gap-4 xl:grid-cols-4"
+        withPadding={false}
+      >
         {icons?.map((icon: any, i: number) => {
           return (
             <InformationIcon
               key={i}
               iconProps={{
-                size: 2,
-                type: icon.type,
+                size: '2x',
+                icon: icon.icon,
                 colour: 'primary',
-                bgColour: 'white',
-                hoverColour: 'primary',
-                hoverBgColour: 'white',
               }}
               id={icon.name.replace(/\s+/g, '')}
               title={icon.name}
@@ -58,6 +53,4 @@ const InformationIconBlock = ({
       </Container>
     </ComponentWrapper>
   );
-};
-
-export default InformationIconBlock;
+}

package/{archive → src/components}/Input/Input.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 Input from '.';
+import { Input } from '.';
 
 const meta = {
   title: 'Components/Input',
@@ -15,49 +15,49 @@ const meta = {
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     placeholder: {
       description: '',
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     bold: {
       description: '',
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     required: {
       description: '',
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     withValidation: {
       description: '',
       control: 'boolean',
       table: {
         category: '',
-      },
+      }
     },
     errors: {
       description: 'An array of errors to display',
       control: 'array',
       table: {
         category: '',
-      },
+      }
     },
     value: {
       description: 'The default value of the input',
       control: 'text',
       table: {
         category: '',
-      },
+      }
     },
     bgColour: {
       type: { name: 'string', required: false },
@@ -68,17 +68,17 @@ const meta = {
       },
       defaultValue: 'primary',
       control: 'select',
-    },
+    }
   },
   args: {
     label: 'This is a label',
     placeholder: 'This is a placeholder',
     errors: [],
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof Input>;
 
 export const Default: Story = {};

package/{archive → src/components}/Input/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;
@@ -32,7 +30,7 @@ export interface Props {
   bgColour?: Colours;
 }
 
-const Input = ({
+export const Input = ({
   id,
   className,
   autoComplete,
@@ -56,37 +54,37 @@ const Input = ({
   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,
-    },
-    style.label,
-  );
+  const labelClassList = classNames({
+    'text-error': errors != null || errorState,
+  })
 
-  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 flex 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>
         <input
           ref={btnRef}
@@ -114,10 +112,13 @@ const Input = ({
         />
       </div>
       {withValidation && (
-        <div id={`errors${newId}`} className={classNames(style.errors)}>
+        <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>
             );
@@ -126,6 +127,4 @@ const Input = ({
       )}
     </>
   );
-};
-
-export default Input;
+}

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

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

@@ -1,9 +1,5 @@
-import React from 'react';
-
 import classNames from 'classnames';
 
-
-
 export interface Props {
   id?: string;
   className?: string;
@@ -12,20 +8,12 @@ export interface Props {
   title?: string;
 }
 
-const Jumbotron = ({
-  id,
-  className,
-  image,
-  altText,
-  title,
-}: Props): JSX.Element => {
-  const classList = classNames(style.classes, className, 'theme-local');
-  const imageClassList = classNames(style.imageClasses);
+export const Jumbotron = ({ id, className, image, altText, title }: Props) => {
+  const classList = classNames(className, 'h-96 overflow-hidden w-full');
+  const imageClassList = 'h-full w-full object-cover';
   return (
     <div id={id} className={classList}>
       <img className={imageClassList} src={image} alt={altText} title={title} />
     </div>
   );
-};
-
-export default Jumbotron;
+}

package/{archive → src/components}/MenuButton/MenuButton.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 MenuButton from '.';
+import { MenuButton } from '.';
 
 const meta = {
   title: 'Components/Menu Button',
@@ -25,8 +25,8 @@ const meta = {
       control: 'array',
       table: {
         type: { summary: 'array' },
-      },
-    },
+      }
+    }
   },
   args: {
     backgroundColour: 'white',
@@ -36,11 +36,11 @@ const meta = {
       { name: 'Menu Item 2', href: '#' },
       { name: 'Menu Item 3', href: '#' },
       { name: 'Menu Item 4', href: '#' },
-    ],
-  },
+    ]
+  }
 };
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof MenuButton>;
 
 export const Default: Story = {};

package/src/components/MenuButton/index.tsx

@@ -0,0 +1,66 @@
+import React, { useState } from 'react';
+
+import { DropdownMenu } from '@components/DropdownMenu';
+import { Image } from '@components/Image';
+import { type Colours } from '@utils/controls';
+import classNames from 'classnames';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  backgroundColour?: Colours;
+
+  menuItems: Array<{ name: string; href: string }>;
+  onClick?: React.MouseEventHandler;
+}
+
+export const MenuButton = ({
+  id,
+  className,
+  backgroundColour = 'white',
+
+  menuItems,
+  onClick,
+}: Props) => {
+  const [showMenu, setShowMenu] = useState(false);
+  const classList = classNames(
+    className,
+    'h-[45px] w-[80px] overflow-hidden rounded-full border-2 border-lightest-grey my-auto flex cursor-pointer justify-between pl-2 text-center hover:shadow-md',
+  )
+
+  if (!menuItems) return <></>;
+
+  return (
+    <div>
+      <div
+        id={id}
+        className={classList}
+        onClick={() => {
+          setShowMenu(!showMenu);
+        }}
+      >
+        <div className="mx-auto my-auto" onClick={(e) => onClick?.(e)}>
+          <svg
+            width="18"
+            height="24"
+            viewBox="0 0 24 15"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path d="M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z" />
+            <path d="M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z" />
+            <path d="M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z" />
+          </svg>
+        </div>
+        <Image
+          src="https://picsum.photos/300/300"
+          className="mx-auto my-auto h-8 w-8 rounded-full object-contain"
+        />
+      </div>
+      {showMenu && (
+        <div>
+          <DropdownMenu menuItems={menuItems} />
+        </div>
+      )}
+    </div>
+  );
+}

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

@@ -1,19 +1,18 @@
 import React, { useState } from 'react';
 
-import { type Meta } from '@storybook/react';
 import classNames from 'classnames';
 
-import Modal from '.';
+import { Modal } from '.';
 
 const meta = {
-  title: 'Trepur Components/molecules/Modal',
+  title: 'Components/Modal',
   component: Modal,
   parameters: {
     docs: {
       description: {
         component: 'A Modal component',
-      },
-    },
+      }
+    }
   },
   argTypes: {
     id: {
@@ -34,20 +33,17 @@ const meta = {
           summary: 'Array',
         },
         defaultValue: { summary: 'undefined' },
-      },
+      }
     },
     onOverlayClick: {
       type: { name: 'function', required: false },
       description: 'Specifies the action to take when the overlay is clicked',
-    },
+    }
   },
   args: {
     visible: true,
     children: (
-      <div
-        style={{ maxWidth: '609px' }}
-        className={classNames('theme-local rounded-2xl bg-white p-4')}
-      >
+      <div style={{ maxWidth: '609px' }} className="rounded-2xl bg-white p-4">
         <p className="py-4">
           This is a child of the modal component, add any child to this
           component to show in this location.
@@ -61,10 +57,10 @@ const meta = {
         </p>
       </div>
     ),
-  },
-};
+  }
+}
 
-const Template = (args): React.ReactElement => {
+const Template = (args: any): React.ReactElement => {
   const [visible, setVisible] = useState<boolean>(false);
 
   return (
@@ -79,7 +75,7 @@ const Template = (args): React.ReactElement => {
       />
     </div>
   );
-};
+}
 
 export const _Modal = Template.bind({});
 

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

@@ -2,8 +2,6 @@ import React, { useState, useEffect } from 'react';
 
 import classNames from 'classnames';
 
-
-
 export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
   children?: React.ReactNode;
   visible?: boolean;
@@ -12,7 +10,7 @@ export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
   animationStyle?: 'fade' | 'slideBottom';
 }
 
-const Modal = ({
+export const Modal = ({
   id,
   className,
   children,
@@ -20,7 +18,7 @@ const Modal = ({
   onOverlayClick,
   mobileGutter,
   animationStyle = 'fade',
-}: Props): JSX.Element => {
+}: Props) => {
   const [hidden, setHidden] = useState(!visible);
   const [showModal, setShowModal] = useState(visible);
 
@@ -41,25 +39,26 @@ const Modal = ({
 
     return () => {
       clearTimeout(timeoutId);
-    };
+    }
   }, [visible]);
 
   const classList = classNames(
     {
-      [style.visible]: !hidden && showModal,
+      'opacity-100': !hidden && showModal,
     },
-    style.overlay,
+    'block h-screen w-screen fixed right-0 top-0 z-50 opacity-0 transition-opacity duration-300 ease-linear ease-out',
     className,
-  );
+  )
 
   const childrenClassList = classNames(
     {
-      [style.visible]: showModal,
-      [style.mobileGutter]: mobileGutter,
-      [style.slideBottom]: animationStyle === 'slideBottom',
+      'opacity-100': showModal,
+      'px-4 md:px-0': mobileGutter,
+      'transition-transform duration-300 ease-linear ease-out opacity-100 translate-y-full':
+        animationStyle === 'slideBottom',
     },
-    style.children,
-  );
+    ' mx-auto flex w-full md:w-auto fixed left-1/2 top-1/2 z-50 block -translate-x-1/2 -translate-y-1/2 transform opacity-0 transition-opacity duration-300 ease-linear ease-out',
+  )
 
   if (hidden) return <></>;
 
@@ -69,6 +68,4 @@ const Modal = ({
       {children && <div className={childrenClassList}>{children}</div>}
     </>
   );
-};
-
-export default Modal;
+}

package/{archive → src/components}/NavItem/NavItem.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 NavItem from '.';
+import { NavItem } from '.';
 
 const meta = {
   title: 'Components/Nav Item',
@@ -15,14 +15,14 @@ const meta = {
       description: 'A title for the component',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     href: {
       type: { name: 'string', required: false },
       description: 'A href for the component',
       table: {
         type: { summary: 'string' },
-      },
+      }
     },
     onClick: {
       type: { name: 'function', required: false },
@@ -30,7 +30,7 @@ const meta = {
         'An on click handle to execute when clicking on the component',
       table: {
         type: { summary: 'function' },
-      },
+      }
     },
     bordered: {
       type: { name: 'boolean', required: false },
@@ -73,18 +73,18 @@ const meta = {
       },
       defaultValue: 'primary',
       control: 'radio',
-    },
+    }
   },
   args: {
     title: 'Home',
     href: '/',
     underlineOnHover: true,
     onClick: action('button-click'),
-  },
-};
+  }
+}
 
 export default meta;
 
-type Story = StoryObj<typeof meta>;
+type Story = StoryObj<typeof NavItem>;
 
 export const Default: Story = {};

package/src/components/NavItem/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+export interface Props {
+  id?: string;
+  className?: string;
+  title: string;
+  href?: string;
+  onClick?: React.MouseEventHandler;
+  bordered?: boolean;
+  rounded?: boolean;
+  underlineOnHover?: boolean;
+  isActive?: boolean;
+  variant?: 'primary' | 'secondary' | 'tertiary';
+  tabindex?: number;
+}
+
+export const NavItem = ({
+  id,
+  className,
+  title,
+  href = '/',
+  onClick,
+  tabindex,
+}: Props) => {
+  const classList = classNames(className, 'w-auto list-none');
+
+  const anchorClassList = 'rounded-xl border-2 border-transparent p-2';
+
+  return (
+    <div id={id} className={classList}>
+      <a
+        href={href}
+        onClick={onClick}
+        className={anchorClassList}
+        {...(tabindex !== undefined && { tabIndex: tabindex })}
+      >
+        <span className="whitespace-nowrap text-center">{title}</span>
+      </a>
+    </div>
+  );
+}