trepur_components 2.3.7 → 2.3.9

package/archive/InformationIcon/style.module.css

@@ -1,71 +0,0 @@
-.classList {
-  @apply rounded-2xl text-center sm:flex sm:text-left;
-}
-
-.large {
-  @apply py-8;
-}
-
-.small {
-  @apply pb-4;
-}
-
-.icon {
-  @apply sm:h-full;
-}
-
-.large .icon {
-  @apply px-4 md:px-8;
-}
-
-.small .icon {
-  @apply pr-2 md:pr-4;
-}
-
-.text {
-  @apply mt-8 flex flex-col-reverse sm:mt-0 sm:block sm:pr-4 md:pr-8;
-}
-
-.title {
-  @apply font-light sm:font-semiBold;
-}
-
-.subtitle {
-  @apply text-xxl font-medium sm:text-xs sm:font-regular;
-}
-
-.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/InformationIconBlock/InformationIconBlock.stories.tsx

@@ -1,32 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import InformationIconBlock from '.';
-
-const icons = [
-  { name: 'Current Age', value: '27', type: 'calendar' },
-  { name: 'Countries Visited', value: '20', type: 'globe' },
-  { name: 'Projects', value: '27', type: 'list' },
-  { name: 'Years in industry', value: '4', type: 'university' },
-];
-
-const meta = {
-  title: 'Components/Information Icon Block',
-  component: InformationIconBlock,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'Information Icon Block',
-    description: 'What do you recon to this? Prob needs a refurb right?',
-    icons,
-    bgColour: 'primary',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/InformationIconBlock/index.tsx

@@ -1,63 +0,0 @@
-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

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

package/archive/Input/Input.stories.tsx

@@ -1,84 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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

@@ -1,60 +0,0 @@
-.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

@@ -1,21 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

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

package/archive/MenuButton/index.tsx

@@ -1,82 +0,0 @@
-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

@@ -1,45 +0,0 @@
-.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/style.module.css

@@ -1,35 +0,0 @@
-.overlay {
-  @apply block h-screen w-screen;
-  @apply fixed right-0 top-0 z-50;
-  background: rgba(0, 0, 0, 0.6);
-  @apply opacity-0;
-  @apply transition-opacity duration-300 ease-linear ease-out;
-}
-
-.children {
-  @apply mx-auto flex w-full md:w-auto;
-  @apply fixed left-1/2 top-1/2 z-50 block -translate-x-1/2 -translate-y-1/2 transform;
-  @apply opacity-0 transition-opacity duration-300 ease-linear ease-out;
-}
-
-.mobileGutter {
-  @apply px-4 md:px-0;
-}
-
-.visible {
-  @apply opacity-100;
-}
-
-.hide {
-  @apply hidden;
-}
-
-.children.slideBottom {
-  @apply transition-transform duration-300 ease-linear ease-out;
-  @apply opacity-100;
-  @apply translate-y-full;
-}
-
-.children.slideBottom.visible {
-  @apply -translate-y-1/2;
-}