trepur_components 2.3.2 → 2.3.4

package/archive/NavTwo/Sidebar.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  children: any;
+  visible?: boolean;
+}
+
+export const Sidebar = ({
+  id,
+  className,
+  children,
+  visible = false,
+}: Props): JSX.Element => {
+  const sideNavClasses = classNames(
+    {
+      [style.sideBarCollapsed]: !visible,
+      [style.sideBarExpanded]: visible,
+    },
+    style.sideNavClassList,
+    className,
+  );
+
+  return (
+    <div id={id} className={sideNavClasses}>
+      {children}
+    </div>
+  );
+};

package/archive/NavTwo/StickyNav.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  children: any;
+  visible?: boolean;
+}
+
+export const StickyNav = ({
+  id,
+  className,
+  children,
+  visible = false,
+}: Props): JSX.Element => {
+  const classList = classNames(
+    {
+      [style.showStickyNav]: visible,
+    },
+    className,
+    style.stickyNav,
+    'theme-local',
+  );
+
+  return (
+    <div id={`sticky_${id ?? 'nav'}`} className={classList}>
+      {children}
+    </div>
+  );
+};

package/archive/NavTwo/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { Dropdown } from './Dropdown';
+import { Sidebar } from './Sidebar';
+import { StickyNav } from './StickyNav';
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  children: any;
+  mobileNavExpanded?: boolean;
+}
+
+const Nav = ({
+  id,
+  className,
+  children,
+  mobileNavExpanded,
+}: Props): JSX.Element => {
+  const classList = classNames(className, style.nav, 'theme-local');
+
+  return (
+    <div>
+      <div
+        className={classNames(
+          style.defaultNavClasses,
+          [mobileNavExpanded] && style.navOpen,
+          [!mobileNavExpanded] && style.navClosed,
+        )}
+      />
+      <header id={id} className={classList}>
+        {children}
+      </header>
+    </div>
+  );
+};
+
+export default Nav;
+
+Nav.Dropdown = Dropdown;
+Nav.Sidebar = Sidebar;
+Nav.Sticky = StickyNav;

package/archive/NavTwo/style.module.css

@@ -0,0 +1,35 @@
+.defaultNavClasses {
+  @apply fixed bottom-0 left-0 right-0 top-0 z-50 h-full w-full bg-primary transition-opacity duration-700;
+}
+
+.navOpen {
+  @apply visible opacity-100;
+}
+
+.navClosed {
+  @apply invisible opacity-0;
+}
+
+.stickyNav {
+  @apply fixed top-0 z-40 w-full overflow-hidden opacity-0 transition-all duration-500;
+}
+
+.showStickyNav {
+  @apply opacity-100 transition-all duration-1000;
+}
+
+.dropDownCollapsed {
+  @apply hidden h-0;
+}
+
+.sideNavClassList {
+  @apply fixed z-50 h-full overflow-hidden duration-700 md:hidden;
+}
+
+.sideBarCollapsed {
+  @apply w-0;
+}
+
+.sideBarExpanded {
+  @apply h-screen w-full sm:w-1/3;
+}

package/archive/NewsCard/NewsCard.stories.tsx

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

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

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

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

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

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

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

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

@@ -0,0 +1,53 @@
+.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;
+}