trepur_components 2.3.2 → 2.3.4

package/archive/InformationIconBlock/index.tsx

@@ -0,0 +1,63 @@
+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 { type Colours } from '@utils/controls';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  title?: string;
+  description?: string;
+  bgColour?: Colours;
+  icons?: iconProps[];
+}
+
+const InformationIconBlock = ({
+  id,
+  className,
+  title,
+  description,
+  bgColour,
+  icons,
+}: Props): JSX.Element => {
+  const classList = classNames(className, 'theme-local');
+  return (
+    <ComponentWrapper
+      id={id}
+      className={classList}
+      title={title}
+      description={description}
+      bgColour={bgColour}
+    >
+      <Container className={style.iconWrapper} withPadding={false}>
+        {icons?.map((icon: any, i: number) => {
+          return (
+            <InformationIcon
+              key={i}
+              iconProps={{
+                size: 2,
+                type: icon.type,
+                colour: 'primary',
+                bgColour: 'white',
+                hoverColour: 'primary',
+                hoverBgColour: 'white',
+              }}
+              id={icon.name.replace(/\s+/g, '')}
+              title={icon.name}
+              subtitle={icon.value}
+              withAnimation
+            />
+          );
+        })}
+      </Container>
+    </ComponentWrapper>
+  );
+};
+
+export default InformationIconBlock;

package/archive/InformationIconBlock/style.module.css

@@ -0,0 +1,7 @@
+.iconWrapper {
+  @apply grid grid-cols-2 gap-4 xl:grid-cols-4;
+}
+
+.iconClasses {
+  @apply pb-12;
+}

package/archive/Input/Input.stories.tsx

@@ -0,0 +1,84 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Input from '.';
+
+const meta = {
+  title: 'Components/Input',
+  component: Input,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+
+    label: {
+      description: '',
+      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 },
+      options: ['primary', 'secondary', 'white', 'black', 'gold'],
+      description: 'The background colour of the component',
+      table: {
+        type: { summary: 'string' },
+      },
+      defaultValue: 'primary',
+      control: 'select',
+    },
+  },
+  args: {
+    label: 'This is a label',
+    placeholder: 'This is a placeholder',
+    errors: [],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Input/index.tsx

@@ -0,0 +1,131 @@
+import React, { useRef } from 'react';
+
+import { type Colours } from '@utils/controls';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  autoComplete?: string;
+  disabled?: boolean;
+  formId?: string;
+  height?: string;
+  maxLength?: number;
+  minLength?: number;
+  pattern?: string;
+  required?: boolean;
+  readOnly?: boolean;
+  label?: string;
+  type?: string;
+  name?: string;
+  placeholder?: string;
+  withValidation?: boolean;
+  onChange?: (e: any) => void;
+  onBlur?: () => void;
+  onFocus?: () => void;
+  onClick?: () => void;
+  errors?: string[];
+  errorState?: boolean;
+  value?: string;
+  bgColour?: Colours;
+}
+
+const Input = ({
+  id,
+  className,
+  autoComplete,
+  disabled,
+  formId,
+  height,
+  maxLength,
+  minLength,
+  pattern,
+  required = false,
+  readOnly,
+  label,
+  type,
+  name,
+  placeholder,
+  onChange,
+  onBlur,
+  onFocus,
+  onClick,
+  withValidation,
+  errors,
+  errorState = false,
+  value,
+}: Props): JSX.Element => {
+  const newId = id !== undefined ? `-${id}` : '';
+
+  const valueClassList = classNames(
+    {
+      [style.errorState]: errors != null || errorState,
+    },
+    style.value,
+  );
+
+  const labelClassList = classNames(
+    {
+      [style.labelError]: errors != null || errorState,
+    },
+    style.label,
+  );
+
+  const headerClassList = classNames(style.classList, className, 'theme-local');
+
+  const btnRef = useRef<any>(null);
+
+  const handleClick = (): void => {
+    btnRef.current?.focus();
+  };
+
+  return (
+    <>
+      <div id={id} className={headerClassList} onClick={handleClick}>
+        <div className={style.labelWrapper}>
+          <p className={labelClassList}>{label}</p>
+          {required && <p className={style.required}>&nbsp;*</p>}
+        </div>
+        <input
+          ref={btnRef}
+          id={`input${newId}`}
+          className={valueClassList}
+          autoComplete={autoComplete}
+          disabled={disabled}
+          form={formId}
+          height={height}
+          maxLength={maxLength}
+          minLength={minLength}
+          pattern={pattern}
+          required={required}
+          readOnly={readOnly}
+          type={type}
+          name={name}
+          value={value}
+          placeholder={placeholder}
+          onChange={(e) => {
+            onChange?.(e);
+          }}
+          onBlur={onBlur}
+          onFocus={onFocus}
+          onClick={onClick}
+        />
+      </div>
+      {withValidation && (
+        <div id={`errors${newId}`} className={classNames(style.errors)}>
+          {errors?.map((error, i) => {
+            return (
+              <p key={`error-msg-${i + 0}`} className={style.errorText}>
+                {error}
+              </p>
+            );
+          })}
+        </div>
+      )}
+    </>
+  );
+};
+
+export default Input;

package/archive/Input/style.module.css

@@ -0,0 +1,60 @@
+.classList {
+  @apply mt-4 w-full bg-white;
+  @apply cursor-pointer;
+}
+
+/* .classList:active p {
+    @apply hidden;
+} 
+
+.classList:active .value {
+    @apply pt-3 pb-4;
+}  */
+
+.fullWidth {
+  @apply w-full;
+}
+
+.notFullWidth {
+  @apply sm:w-72;
+}
+
+.labelWrapper {
+  @apply absolute -mt-3 ml-3 px-1;
+  @apply flex rounded-2xl bg-white text-sm font-regular;
+}
+
+.required {
+  @apply font-semiBold text-error;
+}
+
+.value {
+  @apply w-full rounded-md bg-white py-2 pl-4 text-ink;
+  @apply cursor-pointer;
+  @apply border border-black;
+  @apply text-md;
+}
+
+/* .value:focus {
+    @apply pt-3 pb-4;
+}
+
+.value:focus ~ label {
+    @apply text-xl;
+} */
+
+.errors {
+  @apply text-sm font-regular text-error;
+}
+
+.errorState {
+  @apply border-2 border-error;
+}
+
+.labelError {
+  @apply text-error;
+}
+
+.errorText {
+  @apply mt-1 border-l-4 border-error pl-3;
+}

package/archive/Jumbotron/Jumbotron.stories.tsx

@@ -0,0 +1,21 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import Jumbotron from '.';
+
+const meta = {
+  title: 'Components/Jumbotron',
+  component: Jumbotron,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+  },
+  args: {
+    image: 'https://picsum.photos/1000/1000',
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/Jumbotron/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  image?: string;
+  altText?: string;
+  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);
+  return (
+    <div id={id} className={classList}>
+      <img className={imageClassList} src={image} alt={altText} title={title} />
+    </div>
+  );
+};
+
+export default Jumbotron;

package/archive/Jumbotron/style.module.css

@@ -0,0 +1,8 @@
+.classes {
+  @apply h-96 overflow-hidden;
+  @apply w-full;
+}
+
+.imageClasses {
+  @apply h-full w-full object-cover;
+}

package/archive/MenuButton/MenuButton.stories.tsx

@@ -0,0 +1,46 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import MenuButton from '.';
+
+const meta = {
+  title: 'Components/Menu Button',
+  component: MenuButton,
+  argTypes: {
+    ...idAndClassName,
+    backgroundColour: {
+      type: { name: 'string', required: false },
+      options: ['primary', 'secondary', 'white', 'black', 'gold'],
+      description: 'The background colour of the component',
+      table: {
+        type: { summary: 'string' },
+      },
+      defaultValue: 'primary',
+      control: 'select',
+    },
+
+    menuItems: {
+      description: 'The items to show in the menu',
+      control: 'array',
+      table: {
+        type: { summary: 'array' },
+      },
+    },
+  },
+  args: {
+    backgroundColour: 'white',
+    onClick: action('clicked'),
+    menuItems: [
+      { name: 'Menu Item 1', href: '#' },
+      { name: 'Menu Item 2', href: '#' },
+      { name: 'Menu Item 3', href: '#' },
+      { name: 'Menu Item 4', href: '#' },
+    ],
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/MenuButton/index.tsx

@@ -0,0 +1,82 @@
+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;
+}
+
+const MenuButton = ({
+  id,
+  className,
+  backgroundColour = 'white',
+
+  menuItems,
+  onClick,
+}: Props): JSX.Element => {
+  const [showMenu, setShowMenu] = useState(false);
+  const classList = classNames(
+    className,
+    style.classList,
+    style[backgroundColour],
+    'theme-local',
+  );
+
+  if (!menuItems) return <></>;
+
+  return (
+    <div>
+      <div
+        id={id}
+        className={classList}
+        onClick={() => {
+          setShowMenu(!showMenu);
+        }}
+      >
+        <div className={style.menuClasses} onClick={(e) => onClick?.(e)}>
+          <svg
+            className={style.svg}
+            width="18"
+            height="24"
+            viewBox="0 0 24 15"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              className={style.lineOneClassList}
+              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
+              className={style.lineTwoClassList}
+              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
+              className={style.lineThreeClassList}
+              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={style.imageClasses}
+        />
+      </div>
+      {showMenu && (
+        <div>
+          <DropdownMenu menuItems={menuItems} />
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MenuButton;

package/archive/MenuButton/style.module.css

@@ -0,0 +1,45 @@
+.classList {
+  width: 80px;
+  height: 45px;
+  @apply overflow-hidden rounded-full border-2 border-lightest-grey;
+  @apply my-auto flex cursor-pointer justify-between pl-2 text-center;
+  @apply hover:shadow-md;
+}
+
+.menuClasses {
+  @apply mx-auto my-auto;
+}
+
+.imageClasses {
+  width: 34px;
+  height: 34px;
+  @apply mx-auto my-auto rounded-full object-contain;
+}
+
+.primary {
+  @apply bg-primary text-white;
+}
+.secondary {
+  @apply bg-secondary text-white;
+}
+.white {
+  @apply bg-white text-black;
+}
+.grey {
+  @apply bg-lightest-grey text-black;
+}
+.black {
+  @apply bg-black text-white;
+}
+.success {
+  @apply bg-success text-white;
+}
+.error {
+  @apply bg-error text-white;
+}
+.facebook {
+  @apply bg-facebook text-white;
+}
+.gold {
+  @apply bg-gold text-white;
+}

package/archive/Modal/Modal.stories.tsx

@@ -0,0 +1,86 @@
+import React, { useState } from 'react';
+
+import { type Meta } from '@storybook/react';
+import classNames from 'classnames';
+
+import Modal from '.';
+
+const meta = {
+  title: 'Trepur Components/molecules/Modal',
+  component: Modal,
+  parameters: {
+    docs: {
+      description: {
+        component: 'A Modal component',
+      },
+    },
+  },
+  argTypes: {
+    id: {
+      type: { name: 'string', required: false },
+      description: 'HTML id attribute',
+      table: { type: { summary: 'string' } },
+    },
+    className: {
+      type: { name: 'string', required: false },
+      description: 'Additional classes to be appended to the component',
+      table: { type: { summary: 'string' } },
+    },
+    children: {
+      type: { name: 'other', value: 'string | React.ReactNode' },
+      description: 'The elements to show in the component',
+      table: {
+        type: {
+          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')}
+      >
+        <p className="py-4">
+          This is a child of the modal component, add any child to this
+          component to show in this location.
+        </p>
+        <p className="py-4">
+          Clicking outside of this child, will close the modal
+        </p>
+        <p className="py-4">
+          To bring me back up, just toggle the &apos;visible&apos; control in
+          storybook&apos;s controls
+        </p>
+      </div>
+    ),
+  },
+};
+
+const Template = (args): React.ReactElement => {
+  const [visible, setVisible] = useState<boolean>(false);
+
+  return (
+    <div style={{ height: '350vh' }}>
+      <Modal
+        visible={visible}
+        mobileGutter
+        onOverlayClick={() => {
+          setVisible(false);
+        }}
+        {...args}
+      />
+    </div>
+  );
+};
+
+export const _Modal = Template.bind({});
+
+export default meta;