trepur_components 2.3.3 → 2.3.5

package/archive/Dialog/Dialog.stories.tsx

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

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

package/archive/Dialog/style.module.css

@@ -0,0 +1,44 @@
+.dialog {
+  @apply rounded-xl bg-white text-ink;
+  @apply mx-auto w-full p-6;
+  max-width: 608px;
+}
+
+@screen md {
+  .dialog {
+    width: 608px;
+  }
+}
+
+.headingWrapper {
+  @apply relative pb-2;
+}
+
+.dismissText {
+  @apply absolute right-0 top-0 cursor-pointer;
+  @apply text-sm font-regular;
+}
+
+.title {
+  @apply text-md font-regular;
+}
+
+.titlePadding {
+  @apply pr-64 md:pr-80;
+}
+
+.paragraph {
+  @apply pt-1 font-light;
+}
+
+.buttonWrapper {
+  @apply flex flex-wrap pt-6 md:flex-nowrap;
+}
+
+.fullWidth {
+  @apply w-full;
+}
+
+.cta2Btn {
+  @apply mt-2 w-full md:ml-6 md:mt-0;
+}

package/archive/DropdownMenu/DropdownMenu.stories.tsx

@@ -0,0 +1,59 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import DropdownMenu from '.';
+
+const meta = {
+  title: 'Components/Dropdown Menu',
+  component: DropdownMenu,
+  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: 'Messages',
+        href: '#',
+      },
+      {
+        name: 'Notifications',
+        href: '#',
+      },
+      {
+        name: 'Trips',
+        href: '#',
+      },
+      {
+        name: 'Wishlists',
+        href: '#',
+      },
+    ],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/DropdownMenu/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+
+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 DropdownMenu = ({
+  id,
+  className,
+  backgroundColour = 'white',
+  menuItems = [],
+  onClick,
+}: Props): JSX.Element => {
+  const classList = classNames(
+    className,
+    style.classList,
+    style[backgroundColour],
+    'theme-local',
+  );
+
+  if (!menuItems) return <></>;
+
+  return (
+    <div id={id} className={classList}>
+      {menuItems?.map((item, i) => {
+        return (
+          <a
+            key={i}
+            href={item.href}
+            onClick={(e) => onClick?.(e)}
+            className={style.menuItem}
+          >
+            {item.name}
+          </a>
+        );
+      })}
+    </div>
+  );
+};
+
+export default DropdownMenu;

package/archive/DropdownMenu/style.module.css

@@ -0,0 +1,38 @@
+.classList {
+  width: 250px;
+  @apply flex flex-col;
+  @apply mt-2 rounded-2xl py-4 drop-shadow-lg;
+  @apply absolute right-10;
+}
+
+.menuItem {
+  @apply px-4 py-2 text-ink hover:bg-lightest-grey;
+}
+
+.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/DynamicTextSection/DynamicTextSection.stories.tsx

@@ -0,0 +1,74 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import DynamicTextSection from '.';
+import Icon from '../Icon';
+
+const meta = {
+  title: 'Components/DynamicTextSection',
+  component: DynamicTextSection,
+  argTypes: {
+    ...idAndClassName,
+    children: {
+      description: 'The colour of the component',
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    topLine: {
+      description: 'Shows a top line',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: 'false',
+    },
+    bottomLine: {
+      description: 'Shows a bottom line',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: 'false',
+    },
+    middleLine: {
+      description: `Shows a middle line, middle lines exist only at the bottom
+        of each component and should be used only when creating a list of 
+        dynamic text section components`,
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: 'false',
+    },
+  },
+  args: {
+    topLine: true,
+    bottomLine: true,
+    middleLine: false,
+    children: [
+      <div key="1" className="flex">
+        <Icon type="heart" hollow bgColour="white" />
+        <p>First Child</p>
+      </div>,
+      <div key="2" className="flex">
+        <Icon type="star" hollow bgColour="white" />
+        <p>Second Child</p>
+      </div>,
+      <div key="3" className="flex">
+        <Icon type="moon" hollow bgColour="white" />
+        <p>Third Child</p>
+      </div>,
+    ],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/DynamicTextSection/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+
+import HorizontalLine from '@components/HorizontalLine';
+import classNames from 'classnames';
+
+export interface Props {
+  id?: string;
+  className?: string;
+
+  children: React.ReactNode;
+  topLine?: boolean;
+  bottomLine?: boolean;
+  middleLine?: boolean;
+}
+
+const DynamicTextSection = ({
+  id,
+  className,
+  children,
+  topLine = false,
+  bottomLine = false,
+  middleLine = false,
+}: Props): JSX.Element => {
+  const classList = classNames(className, 'theme-local');
+
+  return (
+    <div id={id} className={classList}>
+      {topLine && <HorizontalLine colour="grey" topLine />}
+      {children}
+      {bottomLine && <HorizontalLine colour="grey" bottomLine />}
+      {middleLine && <HorizontalLine colour="grey" middleLine />}
+    </div>
+  );
+};
+
+export default DynamicTextSection;

package/archive/FileUploader/FilePreview.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+
+
+interface Props {
+  id?: string;
+  className?: string;
+  fileData?: any;
+  onDismiss?: (e: any) => void;
+}
+
+const FileUploader: React.FC<Props> = ({
+  id,
+  className,
+  fileData,
+  onDismiss,
+}) => {
+  const handleDismiss = (fileName: string): void => {
+    onDismiss?.(fileName);
+  };
+
+  return (
+    <ul
+      id={id}
+      className={classNames(className, style.fileList, 'theme-local')}
+    >
+      {fileData?.map((file: any) => {
+        return (
+          <li key={file.lastModified} className={classNames(style.file)}>
+            <div
+              className={style.nameWrapper}
+              onClick={() => {
+                handleDismiss(file.name);
+              }}
+            >
+              <p className={style.name}>{file.name}</p>
+              <p className={style.dismiss}>x</p>
+            </div>
+          </li>
+        );
+      })}
+    </ul>
+  );
+};
+
+export default FileUploader;

package/archive/FileUploader/FileUploader.stories.tsx

@@ -0,0 +1,28 @@
+import { action } from '@storybook/addon-actions';
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import FileUploader from '.';
+
+const meta = {
+  title: 'Components/FileUploader',
+  component: FileUploader,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+  },
+  args: {
+    ctaText: 'You can select multiple Files',
+    text: 'or drag & drop your files here',
+    imageUrl: 'https://picsum.photos/500/300',
+    onDrop: (files) => {
+      action('files:')(files[0].name);
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};