trepur_components 2.3.7 → 2.3.9

package/archive/ComponentWrapper/ComponentWrapper.stories.tsx

@@ -1,40 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import ComponentWrapper from '.';
-
-const meta = {
-  title: 'Components/ComponentWrapper',
-  component: ComponentWrapper,
-  argTypes: {
-    ...idAndClassName,
-    maxWidth: {
-      type: { name: 'number', required: false },
-      description: 'The number of pixles for the component to span',
-      control: { type: 'number', min: 1, step: 1 },
-      defaultValue: '1200',
-    },
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          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>;
-
-export const Default: Story = {};

package/archive/ComponentWrapper/index.tsx

@@ -1,55 +0,0 @@
-import React, { type CSSProperties } from 'react';
-
-import Container from '@components/Container';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  children?: any;
-  styles?: CSSProperties;
-  withContainerPadding?: boolean;
-}
-
-const ComponentWrapper = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour = 'grey',
-  children,
-  styles,
-  withContainerPadding = true,
-}: Props): JSX.Element => {
-  const classList = classNames(
-    className,
-    style.classList,
-    style[bgColour],
-    'theme-local',
-  );
-  const containerClasses = classNames({
-    [style.containerPadding]: 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>}
-          {description !== undefined && (
-            <p className={style.description}>{description}</p>
-          )}
-        </div>
-        {children}
-      </Container>
-    </div>
-  );
-};
-
-export default ComponentWrapper;

package/archive/ComponentWrapper/style.module.css

@@ -1,40 +0,0 @@
-.classList {
-  @apply mx-auto w-full;
-  scroll-margin-top: 80px;
-}
-
-.containerPadding {
-  @apply py-8;
-}
-
-.heading {
-  @apply pt-0;
-}
-
-.title {
-  @apply pb-2 text-lg font-regular;
-}
-
-.description {
-  @apply pb-8 text-md font-light;
-}
-
-.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;
-}

package/archive/Container/Container.stories.tsx

@@ -1,40 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Container from '.';
-
-const meta = {
-  title: 'Components/Container',
-  component: Container,
-  argTypes: {
-    ...idAndClassName,
-    maxWidth: {
-      type: { name: 'number', required: false },
-      description: 'The number of pixles for the component to span',
-      control: { type: 'number', min: 1, step: 1 },
-      defaultValue: '1200',
-    },
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-  },
-  args: {
-    children: (
-      <div className="w-full border">
-        <p className="my-20 text-center">This is a container</p>
-      </div>
-    ),
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Container/index.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  withPadding?: boolean;
-  children?: any;
-}
-
-const Container = ({ id, className, children }: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </div>
-  );
-};
-
-export default Container;

package/archive/Container/style.module.css

@@ -1,4 +0,0 @@
-.classList {
-  @apply px-6 md:px-10 lg:px-20;
-  max-width: 2520px;
-}

package/archive/Counter/Counter.stories.tsx

@@ -1,19 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Counter from '.';
-
-const meta = {
-  title: 'Components/Counter',
-  component: Counter,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {},
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Counter/index.tsx

@@ -1,66 +0,0 @@
-import React, { useState } from 'react';
-
-import Icon from '@components/Icon';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  count?: number;
-
-  onClick?: (count: number) => void;
-}
-
-const Counter: React.FC<Props> = ({
-  id,
-  count = 0,
-  onClick,
-}: Props): JSX.Element => {
-  const [currentCount, setCurrentCount] = useState(
-    count !== undefined ? count : 0,
-  );
-
-  const handleMinusClick = (e: any): void => {
-    e.stopPropagation();
-    const newCount = currentCount - 1;
-    if (currentCount === 0) {
-      return;
-    }
-    setCurrentCount(newCount);
-    onClick?.(newCount);
-  };
-
-  const handlePlusClick = (e: any): void => {
-    e.stopPropagation();
-    const newCount = currentCount + 1;
-    setCurrentCount(newCount);
-    onClick?.(newCount);
-  };
-
-  return (
-    <div id={id} className={classNames(style.container, 'theme-local')}>
-      <div className={style.innerContainer}>
-        <div className={style.minusIconWrapper}>
-          <Icon
-            type="chevron-left"
-            onClick={(e: any) => {
-              handleMinusClick(e);
-            }}
-          />
-        </div>
-        <div className={style.count}>{currentCount}</div>
-        <div className={style.plusIconWrapper}>
-          <Icon
-            type="chevron-right"
-            onClick={(e: any) => {
-              handlePlusClick(e);
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default Counter;

package/archive/Counter/style.module.css

@@ -1,19 +0,0 @@
-.container {
-  @apply z-10 inline-block rounded-lg border bg-white p-1;
-}
-
-.innerContainer {
-  @apply flex;
-}
-
-.count {
-  @apply w-auto overflow-hidden text-center;
-}
-
-.minusIconWrapper {
-  @apply my-auto cursor-pointer;
-}
-
-.plusIconWrapper {
-  @apply my-auto cursor-pointer;
-}

package/archive/DetailUpdater/DetailUpdater.stories.tsx

@@ -1,96 +0,0 @@
-import Input from '@components/Input';
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import DetailUpdater from '.';
-
-const meta = {
-  title: 'Components/Detail Updater',
-  component: DetailUpdater,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    title: {
-      description: '',
-      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',
-    description: 'This is a description to let you know what to do',
-    expandText: 'Edit',
-    collapseText: 'Cancel',
-    ctaText: 'Save',
-    onClick: (fieldValues) => {
-      action('Submitted')(fieldValues);
-    },
-    onChange: (value) => {
-      action('Updated')(value);
-    },
-    children: (
-      <Input
-        withValidation
-        bgColour="white"
-        label="Title"
-        placeholder="Insert title here"
-        className="mb-4"
-        fullWidth={true}
-        required={true}
-        // onChange={(e) => setTitle(e.target.value)}
-      />
-    ),
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/DetailUpdater/style.module.css

@@ -1,31 +0,0 @@
-.class {
-  @apply mx-4 py-6;
-}
-
-.wrapper {
-  @apply flex justify-between;
-}
-
-.title {
-  @apply font-semiBold text-ink;
-}
-
-.value {
-  @apply text-ink;
-}
-
-.description {
-  @apply text-light-grey;
-}
-
-.expandText {
-  @apply cursor-pointer font-semiBold text-ink underline;
-}
-
-.inputWrapper {
-  @apply grid w-full grid-cols-1 gap-0 py-4 md:grid-cols-2 md:gap-4 lg:w-2/3;
-}
-
-.hr {
-  @apply text-lightest-grey shadow;
-}

package/archive/Dialog/Dialog.stories.tsx

@@ -1,131 +0,0 @@
-import React, { useState } from 'react';
-
-import { action } from '@storybook/addon-actions';
-import { type Meta } from '@storybook/react';
-
-import Dialog from '.';
-import Button from '../Button';
-import Modal from '../Modal';
-
-const meta = {
-  title: 'Trepur Components/molecules/Dialog',
-  component: Dialog,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A dialog component',
-      },
-    },
-    layout: 'padded',
-  },
-  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' } },
-    },
-    onDismissClick: {
-      type: { name: 'function', required: false },
-      description:
-        'Used to determine the onClick action when the dismiss cta is pressed',
-      action: 'onClick',
-      table: {
-        type: { summary: 'function' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    title: {
-      type: { name: 'string', required: false },
-      description: 'Used to specify the title to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    paragraph: {
-      type: { name: 'string', required: false },
-      description:
-        'Used to the specify paragraph text to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    dismissText: {
-      type: { name: 'string', required: false },
-      description: 'Used to specify dismiss text to display on the component',
-      table: {
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    primaryCta: {
-      type: { name: 'other', value: 'ButtonProps', required: false },
-      description: 'A collection of props to pass to the button component',
-      table: { type: { summary: 'ButtonProps' } },
-    },
-    secondaryCta: {
-      type: { name: 'other', value: 'ButtonProps', required: false },
-      description:
-        'A collection of props to pass to the second button component',
-      table: { type: { summary: 'ButtonProps' } },
-    },
-  },
-  args: {
-    title: 'This is a title',
-    paragraph:
-      'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sapiente itaque repellendus, ab rerum explicabo ducimus culpa incidunt consequatur, corporis, sequi dolor in praesentium ea maxime perferendis autem aliquam impedit. Debitis.',
-    dismissText: 'Close',
-    imageUrl: 'https://picsum.photos/500/300',
-    onDismissClick: action('dismissed'),
-    primaryCta: {
-      children: 'Add bank details',
-      palette: 'secondary',
-    },
-    secondaryCta: {
-      children: 'Add bank details',
-      variant: 'secondary',
-      palette: 'secondary',
-    },
-  },
-};
-
-const Template = (args): React.ReactElement => {
-  const [visible, setVisible] = useState<boolean>(false);
-
-  return (
-    <div style={{ height: '350vh' }}>
-      <Button
-        onClick={() => {
-          setVisible(true);
-        }}
-      >
-        Click Me!
-      </Button>
-      <Modal
-        visible={visible}
-        mobileGutter
-        onOverlayClick={() => {
-          setVisible(false);
-        }}
-      >
-        <Dialog
-          {...args}
-          onDismissClick={() => {
-            action('dismiss click');
-            setVisible(!visible);
-          }}
-        />
-      </Modal>
-    </div>
-  );
-};
-
-export const _Dialog = Template.bind({});
-
-export default meta;

package/archive/Dialog/index.tsx

@@ -1,91 +0,0 @@
-import React from 'react';
-
-import Button, { type Props as ButtonProps } from '@components/Button';
-import Image from '@components/Image';
-import classNames from 'classnames';
-
-
-
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  title: string;
-  paragraph: string;
-  dismissText: string;
-  onDismissClick?: () => void;
-  primaryCta?: ButtonProps;
-  secondaryCta?: ButtonProps;
-
-  imageUrl?: string;
-}
-
-const Dialog = ({
-  id,
-  className,
-  title,
-  paragraph,
-  dismissText,
-  onDismissClick,
-  primaryCta,
-  secondaryCta,
-  imageUrl,
-}: Props): JSX.Element => {
-  const hasCta = Boolean(primaryCta?.children);
-  const hasCta2 = Boolean(secondaryCta?.children);
-
-  const ctaButton = hasCta && (
-    <Button
-      {...primaryCta}
-      className={classNames(
-        {
-          [style.fullWidth]: hasCta2,
-        },
-        primaryCta?.className,
-        style.ctaBtn,
-      )}
-    />
-  );
-
-  const ctaButton2 = hasCta2 && (
-    <Button
-      {...secondaryCta}
-      className={classNames(
-        {
-          [style.fullWidth]: hasCta,
-        },
-        secondaryCta?.className,
-        style.cta2Btn,
-      )}
-    />
-  );
-
-  const buttonWrapperClassList = classNames(
-    {
-      [style.fullWidth]: ctaButton2,
-    },
-    style.buttonWrapper,
-  );
-
-  const titleClassList = classNames({}, style.title);
-
-  return (
-    <div id={id} className={classNames(style.dialog, className, 'theme-local')}>
-      <div className={style.headingWrapper}>
-        {imageUrl !== undefined && (
-          <Image src={imageUrl} height={3} width={3} />
-        )}
-        <p className={style.dismissText} onClick={onDismissClick}>
-          {dismissText}
-        </p>
-      </div>
-      <p className={titleClassList}>{title}</p>
-      <p className={style.paragraph}>{paragraph}</p>
-      {(hasCta || hasCta2) && (
-        <div className={buttonWrapperClassList}>
-          {ctaButton}
-          {ctaButton2}
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Dialog;