trepur_components 2.3.7 → 2.3.9

package/archive/NewsCard/NewsCard.stories.tsx

@@ -1,72 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import NewsCard from '.';
-
-const meta = {
-  title: 'Components/News Card',
-  component: NewsCard,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    content: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image to display on the component',
-      table: {
-        type: {
-          summary: 'object',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    buttonProps: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    rounded: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-  },
-  args: {
-    title: 'This is a title',
-    content:
-      'This is some content that will only be displayed if the collapsible item is expanded and will dissappear when the collapsible item is collapsed.',
-    rounded: true,
-    imageProps: {
-      src: 'https://picsum.photos/400/200',
-      rounded: true,
-    },
-    buttonProps: {
-      children: 'Button',
-      className: 'w-full',
-      href: '/',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/NewsCard/index.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-
-import Button, { type Props as buttonProps } from '@components/Button';
-import Image, { type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  content?: string;
-  imageProps?: imageProps;
-  buttonProps?: buttonProps;
-  rounded?: boolean;
-}
-
-const NewsCard = ({
-  id,
-  className,
-  title,
-  content,
-  imageProps,
-  buttonProps,
-  rounded,
-}: Props): JSX.Element => {
-  const classList = classNames(
-    {
-      [style.rounded]: rounded,
-    },
-    className,
-    style.classList,
-    'theme-local',
-  );
-
-  const src = imageProps?.src !== undefined ? imageProps.src : '';
-
-  return (
-    <div id={id} className={classList}>
-      <div>
-        <Image src={src} {...imageProps} />
-      </div>
-      <div className={classNames(style.contentWrapper, 'expandable')}>
-        <p>{title}</p>
-        <p>{content}</p>
-        {buttonProps !== undefined && (
-          <div className={style.buttonWrapper}>
-            <Button {...buttonProps}>{buttonProps.children}</Button>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default NewsCard;

package/archive/NewsCard/style.module.css

@@ -1,15 +0,0 @@
-.rounded {
-  @apply rounded-lg;
-}
-
-.classList {
-  @apply flex border p-2;
-}
-
-.contentWrapper {
-  @apply flex w-auto flex-col justify-between text-center;
-}
-
-.buttonWrapper {
-  @apply px-8;
-}

package/archive/Pill/Pill.stories.tsx

@@ -1,44 +0,0 @@
-import { action } from '@storybook/addon-actions';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Pill from '.';
-
-const meta = {
-  title: 'Components/Pill',
-  component: Pill,
-  argTypes: {
-    ...idAndClassName,
-    text: {
-      type: { name: 'string', required: false },
-      description: 'The text to display in the component',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    onClick: {
-      type: { name: 'function', required: false },
-      description:
-        'An on click handle to execute when clicking on the component',
-      table: {
-        type: { summary: 'function' },
-      },
-    },
-    dismissOnClick: {
-      type: { name: 'boolean', required: false },
-      description: 'To toggle the disappearance of the component on click',
-      table: {
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-  args: {
-    text: 'This is a pill',
-    onClick: action('pill clicked'),
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Pill/index.tsx

@@ -1,64 +0,0 @@
-import React, { useState } from 'react';
-
-import Icon from '@components/Icon';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  text: string;
-  onClick?: () => void;
-  dismissOnClick?: boolean;
-}
-
-const Pill = ({
-  id,
-  className,
-  text,
-  onClick,
-  dismissOnClick = false,
-}: Props): JSX.Element => {
-  const [shouldDisplay, setShouldDisplay] = useState(true);
-
-  const classList = classNames(
-    {
-      [style.hidden]: !shouldDisplay,
-      [style.wrapperPadding]: !dismissOnClick,
-      [style.wrapperPaddingDismiss]: dismissOnClick,
-    },
-    className,
-    [style.wrapperClasses],
-    'theme-local',
-  );
-
-  const handleOnClick = (): void => {
-    if (dismissOnClick) {
-      setShouldDisplay(false);
-    }
-    onClick?.();
-  };
-
-  return shouldDisplay ? (
-    <button id={id} className={classList} onClick={handleOnClick}>
-      <div className={style.classes}>
-        <p>{text}</p>
-        {dismissOnClick && (
-          <Icon
-            className={style.icon}
-            type="multiply"
-            bgColour="white"
-            hoverBgColour="white"
-            colour="primary"
-            hoverColour="primary"
-          />
-        )}
-      </div>
-    </button>
-  ) : (
-    <></>
-  );
-};
-
-export default Pill;

package/archive/Pill/style.module.css

@@ -1,32 +0,0 @@
-.wrapperClasses {
-  @apply rounded-full border-2 py-1;
-  @apply inline-block border-primary text-primary;
-}
-
-.wrapperPadding {
-  @apply px-4;
-}
-
-.wrapperPaddingDismiss {
-  @apply pl-4 pr-1;
-}
-
-.classes {
-  @apply flex;
-}
-
-.icon {
-  @apply ml-2 rounded-full;
-}
-
-.visible {
-  @apply opacity-100;
-}
-
-.invisible {
-  @apply opacity-0;
-}
-
-.hidden {
-  @apply invisible;
-}

package/archive/ProductCard/ProductCard.stories.tsx

@@ -1,61 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import ProductCard from '.';
-
-const meta = {
-  title: 'Components/ProductCard',
-  component: ProductCard,
-  argTypes: {
-    ...idAndClassName,
-    imageProps: {
-      description: '',
-      table: {},
-    },
-    videoProps: {
-      description: '',
-      table: {},
-    },
-    title: {
-      description: 'The title to display on the component',
-      table: {},
-    },
-    subTitle: {
-      description: 'The subtitle to display on the component',
-      table: {},
-    },
-    description: {
-      description: 'The description to display on the component',
-      table: {},
-    },
-    href: {
-      description:
-        'The link to send the user to when clicking on the component',
-      table: {},
-    },
-    target: {
-      description: '',
-      table: {},
-    },
-    buttonProps: {
-      description: '',
-      table: {},
-    },
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-    },
-    title: 'This is a title',
-    textLineOne: 'Text line 1',
-    textLineTwo: 'Text Line 2',
-    textLineThree: 'Text line 3',
-    ctaText: 'Add to bag',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/ProductCard/index.tsx

@@ -1,111 +0,0 @@
-import React, { useState } from 'react';
-
-import Button from '@components/Button';
-import Icon from '@components/Icon';
-import { type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-import Counter from '../Counter';
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  imageProps?: imageProps;
-  textLineOne?: string;
-  textLineTwo?: string;
-  textLineThree?: string;
-  count?: number;
-  ctaText: string;
-  isEditable?: boolean;
-  ctaOnClick?: () => void;
-  onEditClick?: () => void;
-  onCounterClick?: (count: number) => void;
-}
-
-const ProductCard: React.FC<Props> = ({
-  id,
-  className,
-  imageProps,
-  title,
-  textLineOne,
-  textLineTwo,
-  textLineThree,
-  count,
-  ctaText,
-  isEditable = false,
-  ctaOnClick,
-  onEditClick,
-  onCounterClick,
-}: Props): JSX.Element => {
-  const [isHovering, setIsHovering] = useState(false);
-  const ProductCardTitleClasses = classNames(style.title);
-  const ProductCardSubTitleClassList = classNames(style.subtitle);
-  const classList = classNames(
-    className,
-    style.classList,
-    'absolute theme-local',
-  );
-  const imageClassList = classNames(style.imageClassList);
-
-  return (
-    <div
-      id={id}
-      className={classList}
-      onMouseOver={() => {
-        setIsHovering(true);
-      }}
-      onMouseOut={() => {
-        setIsHovering(false);
-      }}
-    >
-      <div className="relative">
-        <img className={imageClassList} {...imageProps} />
-        {isEditable && (
-          <div className={style.editButton}>
-            <Button type="icon" variant="secondary" onClick={onEditClick}>
-              <Icon type="pencil" />
-            </Button>
-          </div>
-        )}
-      </div>
-
-      <div className={style.content}>
-        {!isHovering && (
-          <div className={style.contentWrapper}>
-            {title !== undefined && (
-              <h3 className={ProductCardTitleClasses}>{title}</h3>
-            )}
-            {textLineOne !== undefined && (
-              <h4 className={ProductCardSubTitleClassList}>{textLineOne}</h4>
-            )}
-            {textLineTwo !== undefined && (
-              <h4 className={ProductCardSubTitleClassList}>{textLineTwo}</h4>
-            )}
-            {textLineThree !== undefined && (
-              <h4 className={ProductCardSubTitleClassList}>{textLineThree}</h4>
-            )}
-          </div>
-        )}
-        {isHovering && (
-          <div className={style.hoverContentWrapper}>
-            <div className={style.buttonWrapper}>
-              <Button onClick={ctaOnClick}>{ctaText}</Button>
-              {count !== undefined && (
-                <Counter
-                  count={count}
-                  onClick={(newCount: number) => {
-                    onCounterClick?.(newCount);
-                  }}
-                />
-              )}
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ProductCard;

package/archive/ProductCard/style.module.css

@@ -1,53 +0,0 @@
-.classList {
-  @apply flex flex-col;
-  @apply rounded-lg;
-  @apply shadow-xl;
-  max-width: 380px;
-}
-
-.imageClassList {
-  @apply h-full w-full object-cover;
-  @apply h-96 overflow-hidden;
-  @apply rounded-t-lg;
-}
-
-.content {
-  height: 150px;
-  @apply overflow-hidden;
-}
-
-.contentWrapper {
-  @apply h-full;
-  @apply bg-white;
-  @apply mt-0 p-6;
-  @apply rounded-b-lg;
-  @apply transition-all duration-300;
-}
-
-.title {
-  @apply text-md font-medium;
-}
-
-.subtitle {
-  @apply text-sm font-regular;
-}
-
-.description {
-  @apply pb-6 text-sm font-light;
-}
-
-.hoverContentWrapper {
-  @apply flex h-full text-center;
-  @apply bg-white;
-  @apply mt-0 p-6;
-  @apply rounded-b-lg;
-  @apply transition-all duration-300;
-}
-
-.buttonWrapper {
-  @apply mx-auto my-auto;
-}
-
-.editButton {
-  @apply absolute right-2 top-2;
-}

package/archive/ProductCardV2/ProductCardV2.stories.tsx

@@ -1,50 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import ProductCardV2 from '.';
-
-const meta = {
-  title: 'Components/ProductCardV2',
-  component: ProductCardV2,
-  parameters: {
-    layout: 'padded',
-  },
-  argTypes: {
-    ...idAndClassName,
-    imageProps: {
-      description: '',
-    },
-    title: {
-      description: 'The title to display on the component',
-    },
-    subTitle: {
-      description: 'The subtitle to display on the component',
-    },
-    description: {
-      description: 'The description to display on the component',
-    },
-    href: {
-      description:
-        'The link to send the user to when clicking on the component',
-    },
-  },
-  args: {
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-    },
-    title: 'Osprey Exos Pro 55',
-    textLineOne: 'Weight: 600 grams',
-    topRightIcon: 'circle-check',
-    bottomRightIcon: {
-      colour: 'black',
-      type: 'edit',
-      size: 2,
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/ProductCardV2/index.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-
-import Counter from '@components/Counter';
-import Icon, { type Props as iconProps } from '@components/Icon';
-import { type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  imageProps?: imageProps;
-  topRightIcon?: iconProps;
-  bottomRightIcon?: iconProps;
-  topLeftIcon?: iconProps;
-  bottomLeftIcon?: iconProps;
-  textLineOne?: string;
-  textLineTwo?: string;
-  textLineThree?: string;
-  onClick?: () => void;
-  onCounterClick?: (count: number) => void;
-  count?: number;
-  isSelected?: boolean;
-}
-
-const ProductCardV2: React.FC<Props> = ({
-  id,
-  className,
-  imageProps,
-  title,
-  textLineOne,
-  textLineTwo,
-  textLineThree,
-  topRightIcon,
-  bottomRightIcon,
-  topLeftIcon,
-  bottomLeftIcon,
-  onClick,
-  onCounterClick,
-  count,
-  isSelected = false,
-}: Props): JSX.Element => {
-  return (
-    <div
-      id={id}
-      className={classNames(
-        {
-          [style.cardSelected]: isSelected,
-        },
-        style.card,
-        className,
-        'theme-local',
-      )}
-      onClick={onClick}
-    >
-      <div className={style.imageContainer}>
-        <img className={style.image} {...imageProps} />
-        {topRightIcon && (
-          <Icon
-            {...topRightIcon}
-            className={classNames(topRightIcon.className, style.topRightIcon)}
-          />
-        )}
-        {bottomRightIcon && (
-          <Icon
-            {...bottomRightIcon}
-            colour="success"
-            className={classNames(
-              bottomRightIcon.className,
-              style.bottomRightIcon,
-            )}
-          />
-        )}
-        {topLeftIcon && (
-          <Icon
-            {...topLeftIcon}
-            className={classNames(topLeftIcon.className, style.topLeftIcon)}
-          />
-        )}
-        {bottomLeftIcon && (
-          <Icon
-            {...bottomLeftIcon}
-            colour="success"
-            className={classNames(
-              bottomLeftIcon.className,
-              style.bottomLeftIcon,
-            )}
-          />
-        )}
-        {count && (
-          <div className={classNames(style.counter)}>
-            <Counter
-              count={count}
-              onClick={(newCount: number) => {
-                onCounterClick?.(newCount);
-              }}
-            />
-          </div>
-        )}
-      </div>
-      <div className={style.contentWrapper}>
-        {title !== undefined && <h3 className={style.title}>{title}</h3>}
-        {textLineOne !== undefined && (
-          <h4 className={style.subtitle}>{textLineOne}</h4>
-        )}
-        {textLineTwo !== undefined && (
-          <h4 className={style.subtitle}>{textLineTwo}</h4>
-        )}
-        {textLineThree !== undefined && (
-          <h4 className={style.subtitle}>{textLineThree}</h4>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default ProductCardV2;