trepur_components 2.3.7 → 2.3.9

package/archive/Icon/index.tsx

@@ -1,115 +0,0 @@
-import React from 'react';
-
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  type: string;
-  size?: number;
-  animation?: 'pulse' | 'none';
-  reverseSpin?: boolean;
-  hollow?: boolean;
-  colour?: Colours;
-  bgColour?: Colours;
-  hoverColour?: Colours;
-  hoverBgColour?: Colours;
-  rounded?: boolean;
-  brand?: boolean;
-
-  onClick?: (e?: any) => void;
-}
-
-const Icon = ({
-  id,
-  className,
-  type,
-  size = 1,
-  animation = 'none',
-  reverseSpin = false,
-  hollow = false,
-  colour = 'primary',
-  bgColour = 'transparent',
-  hoverColour = colour,
-  hoverBgColour = bgColour,
-  rounded = false,
-  brand = false,
-  onClick,
-}: Props): JSX.Element => {
-  const colourString: string = colour;
-  const hoverColourString: string = hoverColour;
-  const bgColourString: string = bgColour;
-  const hoverBgColourString: string = hoverBgColour;
-
-  const fontColourKey =
-    typeof colourString === 'string'
-      ? `text${colourString.charAt(0).toUpperCase()}${colourString.slice(1)}`
-      : 'textPrimary';
-  const backgroundColourKey =
-    typeof bgColourString === 'string'
-      ? `bg${bgColourString.charAt(0).toUpperCase()}${bgColourString.slice(1)}`
-      : 'bgTransparent';
-  const hoverFontColourKey =
-    typeof hoverColourString === 'string'
-      ? `hoverText${hoverColourString
-          .charAt(0)
-          .toUpperCase()}${hoverColourString.slice(1)}`
-      : 'hoverTextPrimary';
-  const hoverBackgroundColourKey =
-    typeof hoverBgColourString === 'string'
-      ? `hoverBg${hoverBgColourString
-          .charAt(0)
-          .toUpperCase()}${hoverBgColourString.slice(1)}`
-      : 'hoverBgTransparent';
-
-  const wrapperClassList = classNames(
-    {
-      [style.sizeOne]: size === 1,
-      [style.sizeTwo]: size === 2,
-      [style.sizeThree]: size === 3,
-      [style.sizeFour]: size === 4,
-      [style.sizeFive]: size === 5,
-      [style.sizeSix]: size === 6,
-      [style.sizeSeven]: size === 7,
-      [style.sizeEight]: size === 8,
-      [style.sizeNine]: size === 9,
-      [style.sizeTen]: size === 10,
-      [style.rounded]: rounded,
-    },
-    className,
-    style.wrapperClassList,
-    style[backgroundColourKey],
-    style[fontColourKey],
-    style[hoverBackgroundColourKey],
-    style[hoverFontColourKey],
-    'transition-backgroundColor duration-500 transform theme-local',
-  );
-
-  const classList = classNames(
-    {
-      'fa-brands': brand,
-      [`fa-${size}x`]: size,
-      [`fa-${animation}`]: animation,
-      'fa-spin-reverse': reverseSpin,
-      'fa-regular': hollow,
-      [style.rounded]: rounded,
-    },
-    `${style.classList} fa fa-${type}`,
-  );
-
-  return (
-    <div id={id} className={wrapperClassList} onClick={onClick}>
-      <span
-        className={classList}
-        role="img"
-        aria-hidden="true"
-        aria-label={type}
-      />
-    </div>
-  );
-};
-
-export default Icon;

package/archive/Icon/style.module.css

@@ -1,253 +0,0 @@
-.classList {
-  @apply mx-auto my-auto;
-}
-
-.sizeOne {
-  @apply h-6 w-6;
-}
-
-.sizeTwo {
-  @apply h-8 w-8;
-}
-
-.sizeThree {
-  @apply h-16 w-16;
-}
-
-.sizeFour {
-  @apply h-20 w-20;
-}
-
-.sizeFive {
-  @apply h-24 w-24;
-}
-
-.sizeSix {
-  @apply h-28 w-28;
-}
-
-.sizeSeven {
-  @apply h-32 w-32;
-}
-
-.sizeEight {
-  @apply h-36 w-36;
-}
-
-.sizeNine {
-  @apply h-40 w-40;
-}
-
-.sizeTen {
-  @apply h-44 w-44;
-}
-
-/* .sizeTen {
-    @apply w-48 h-48;
-} */
-
-.rounded {
-  @apply rounded-full;
-}
-
-.wrapperClassList {
-  @apply flex transform duration-500;
-}
-
-.textTransparent {
-  @apply text-transparent;
-}
-.textPrimary {
-  @apply text-primary;
-}
-.textSecondary {
-  @apply text-secondary;
-}
-.textWhite {
-  @apply text-white;
-}
-.textBlack {
-  @apply text-black;
-}
-.textGold {
-  @apply text-gold;
-}
-.textGrey {
-  @apply text-light-grey;
-}
-.textFacebook {
-  @apply text-facebook;
-}
-.textInteractive-facebook {
-  @apply text-interactive-facebook;
-}
-.textSuccess {
-  @apply text-success;
-}
-.textError {
-  @apply text-error;
-}
-
-.bgTransparent {
-  @apply bg-transparent;
-}
-.bgPrimary {
-  @apply bg-primary;
-}
-.bgSecondary {
-  @apply bg-secondary;
-}
-.bgWhite {
-  @apply bg-white;
-}
-.bglack {
-  @apply bg-black;
-}
-.bgGold {
-  @apply bg-gold;
-}
-.bgGrey {
-  @apply bg-light-grey;
-}
-.bgFacebook {
-  @apply bg-facebook;
-}
-.bgInteractive-facebook {
-  @apply bg-interactive-facebook;
-}
-.bgSuccess {
-  @apply bg-success;
-}
-.bgError {
-  @apply bg-error;
-}
-
-.hoverTextTransparent {
-  @apply hover:text-transparent;
-}
-.hoverTextPrimary {
-  @apply hover:text-primary;
-}
-.hoverTextSecondary {
-  @apply hover:text-secondary;
-}
-.hoverTextWhite {
-  @apply hover:text-white;
-}
-.hoverTextlack {
-  @apply hover:text-black;
-}
-.hoverTextGold {
-  @apply hover:text-gold;
-}
-.hoverTextGrey {
-  @apply hover:text-light-grey;
-}
-.hoverTextFacebook {
-  @apply hover:text-facebook;
-}
-.hoverTextInteractive-facebook {
-  @apply hover:text-interactive-facebook;
-}
-.hoverTextSuccess {
-  @apply hover:text-success;
-}
-.hoverTextError {
-  @apply hover:text-error;
-}
-
-.hoverBgTransparent {
-  @apply hover:bg-transparent;
-}
-.hoverBgPrimary {
-  @apply hover:bg-primary;
-}
-.hoverBgSecondary {
-  @apply hover:bg-secondary;
-}
-.hoverBgWhite {
-  @apply hover:bg-white;
-}
-.hoverBglack {
-  @apply hover:bg-black;
-}
-.hoverBgGold {
-  @apply hover:bg-gold;
-}
-.hoverBgGrey {
-  @apply hover:bg-light-grey;
-}
-.hoverBgFacebook {
-  @apply hover:bg-facebook;
-}
-.hoverBgInteractive-facebook {
-  @apply hover:bg-interactive-facebook;
-}
-.hoverBgSuccess {
-  @apply hover:bg-success;
-}
-.hoverBgError {
-  @apply hover:bg-error;
-}
-
-.focusTextPrimary {
-  @apply focus:text-primary;
-}
-.focusTextSecondary {
-  @apply focus:text-secondary;
-}
-.focusTextWhite {
-  @apply focus:text-white;
-}
-.focusTextlack {
-  @apply focus:text-black;
-}
-.focusTextGold {
-  @apply focus:text-gold;
-}
-.focusTextGrey {
-  @apply focus:text-light-grey;
-}
-.focusTextFacebook {
-  @apply focus:text-facebook;
-}
-.focusTextInteractive-facebook {
-  @apply focus:text-interactive-facebook;
-}
-.focusTextSuccess {
-  @apply focus:text-success;
-}
-.focusTextError {
-  @apply focus:text-error;
-}
-
-.focusBgPrimary {
-  @apply focus:bg-primary;
-}
-.focusBgSecondary {
-  @apply focus:bg-secondary;
-}
-.focusBgWhite {
-  @apply focus:bg-white;
-}
-.focusBglack {
-  @apply focus:bg-black;
-}
-.focusBgGold {
-  @apply focus:bg-gold;
-}
-.focusBgGrey {
-  @apply focus:bg-light-grey;
-}
-.focusBgFacebook {
-  @apply focus:bg-facebook;
-}
-.focusBgInteractive-facebook {
-  @apply focus:bg-interactive-facebook;
-}
-.focusBgSuccess {
-  @apply focus:bg-success;
-}
-.focusBgError {
-  @apply focus:bg-error;
-}

package/archive/IconCard/IconCard.stories.tsx

@@ -1,46 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import IconCard from '.';
-
-const meta = {
-  title: 'Components/IconCard',
-  component: IconCard,
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      description: '',
-      table: {},
-    },
-    description: {
-      description: '',
-      table: {},
-    },
-    href: {
-      description: '',
-      table: {},
-    },
-    target: {
-      description: '',
-      table: {},
-    },
-    iconProps: {
-      description: '',
-      table: {},
-    },
-  },
-  args: {
-    title: 'This is a title',
-    description:
-      'Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fuga excepturi itaque in. Debitis et velit explicabo id quo repellendus architecto hic quis repellat corporis cumque dolorem officiis animi, dicta praesentium.',
-    iconProps: {
-      size: 2,
-      type: 'unlock-keyhole',
-    },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/IconCard/index.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-
-import Icon, { type Props as IconProps } from '@components/Icon';
-import classNames from 'classnames';
-
-
-
-interface AnchorAttributes
-  extends Partial<
-    Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
-  > {}
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title: string;
-  description: string;
-  iconProps: IconProps;
-
-  href?: string;
-  target?: string;
-  onClick?: () => void;
-}
-
-const IconCard: React.FC<Props> = ({
-  id,
-  className,
-  title,
-  description,
-  iconProps,
-
-  href,
-  target,
-  onClick,
-}: Props): JSX.Element => {
-  const classList = classNames(style.wrapper, className, 'theme-local');
-
-  let Tag: keyof Pick<JSX.IntrinsicElements, 'a' | 'div'> = 'div';
-  let attributes: AnchorAttributes = {};
-
-  if (Boolean(href) || Boolean(target)) {
-    Tag = 'a';
-    attributes = { href, title, target };
-  }
-
-  return (
-    <Tag id={id} className={classList} onClick={onClick} {...attributes}>
-      <div className={style.iconWrapper}>
-        <Icon {...iconProps} size={2} />
-      </div>
-      <p className={style.title}>{title}</p>
-      <p className={style.description}>{description}</p>
-    </Tag>
-  );
-};
-
-export default IconCard;

package/archive/IconCard/style.module.css

@@ -1,18 +0,0 @@
-.wrapper {
-  @apply flex flex-col;
-  @apply bg-white hover:bg-lightest-grey;
-  @apply cursor-pointer shadow-xl drop-shadow;
-  @apply mx-auto my-auto w-full rounded-2xl p-4;
-}
-
-.iconWrapper {
-  @apply py-2;
-}
-
-.title {
-  @apply pt-6 text-md font-semiBold text-ink;
-}
-
-.description {
-  @apply text-light-grey;
-}

package/archive/Image/Image.stories.tsx

@@ -1,87 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Image from '.';
-
-const meta = {
-  title: 'Components/Image',
-  component: Image,
-  argTypes: {
-    ...idAndClassName,
-    image: {
-      type: { name: 'string', required: false },
-      description: 'The image to display on the component',
-      table: {
-        type: { summary: 'default' },
-      },
-    },
-    altText: {
-      type: { name: 'string', required: false },
-      description: 'The accessibility alt text for the image on the component',
-      table: {
-        type: { summary: 'default' },
-      },
-    },
-    title: {
-      type: { name: 'string', required: false },
-      description: 'The accessibility title for the image on the component',
-      table: {
-        type: { summary: 'default' },
-      },
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the corners of the component to rounded',
-      table: {
-        type: { summary: 'boolean' },
-      },
-    },
-    roundedFull: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to a circle shape',
-      table: {
-        type: { summary: 'boolean' },
-      },
-    },
-    height: {
-      type: { name: 'number', required: false },
-      description: 'Defines the height of the component',
-      table: {
-        type: { summary: 'number' },
-      },
-    },
-    width: {
-      type: { name: 'number', required: false },
-      description: 'Defines the width of the component',
-      table: {
-        type: { summary: 'number' },
-      },
-    },
-    overlayText: {
-      type: { name: 'string', required: false },
-      description: 'The text to show when hovering over the component',
-      table: {
-        type: { summary: 'default' },
-      },
-    },
-    centerAligned: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to the center',
-      table: {
-        type: { summary: 'boolean' },
-      },
-    },
-  },
-  args: {
-    src: 'https://picsum.photos/200/200',
-    height: 8,
-    width: 8,
-    overlayText: 'logo',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Image/index.tsx

@@ -1,132 +0,0 @@
-import React, { useState } from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  src: string;
-  altText?: string;
-  title?: string;
-  rounded?: boolean;
-  roundedFull?: boolean;
-  height?: number;
-  width?: number;
-  overlayText?: string;
-  centerAligned?: boolean;
-  bordered?: boolean;
-}
-
-const Image = ({
-  id,
-  className,
-  src,
-  altText,
-  title,
-  rounded = false,
-  roundedFull = false,
-  height = 8,
-  width = 8,
-  overlayText,
-  centerAligned = false,
-  bordered = false,
-}: Props): JSX.Element => {
-  const [isHovering, setIsHovering] = useState(false);
-  const opacity = classNames({
-    [style.visible]: isHovering,
-    [style.invisible]: !isHovering,
-  });
-
-  const widthClassList = classNames({
-    [style.width1]: width === 1,
-    [style.width2]: width === 2,
-    [style.width3]: width === 3,
-    [style.width4]: width === 4,
-    [style.width5]: width === 5,
-    [style.width6]: width === 6,
-    [style.width7]: width === 7,
-    [style.width8]: width === 8,
-    [style.width9]: width === 9,
-    [style.width10]: width === 10,
-    [style.width11]: width === 11,
-    [style.width12]:
-      width === undefined ||
-      ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(width),
-  });
-
-  const heightClassList = classNames({
-    [style.height1]: height === 1,
-    [style.height2]: height === 2,
-    [style.height3]: height === 3,
-    [style.height4]: height === 4,
-    [style.height5]: height === 5,
-    [style.height6]: height === 6,
-    [style.height7]: height === 7,
-    [style.height8]: height === 8,
-    [style.height9]: height === 9,
-    [style.height10]: height === 10,
-    [style.height11]: height === 11,
-    [style.height12]:
-      height === undefined ||
-      ![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(height),
-  });
-
-  const imageClassList = classNames(
-    {
-      [style.rounded]: rounded,
-      [style.roundedFull]: roundedFull,
-      [style.centerAligned]: centerAligned,
-      [style.bordered]: bordered,
-    },
-    className,
-    widthClassList,
-    heightClassList,
-    'theme-local',
-  );
-
-  const overlayClassList = classNames(
-    widthClassList,
-    heightClassList,
-    opacity,
-    style.overlayClassList,
-  );
-
-  const overlayTextWrapperClassList = classNames(
-    widthClassList,
-    heightClassList,
-    opacity,
-    style.overlayTextWrapperClassList,
-  );
-
-  return (
-    <div className={imageClassList}>
-      {overlayText !== undefined && (
-        <>
-          <div className={overlayClassList} />
-          <div
-            className={overlayTextWrapperClassList}
-            onMouseEnter={() => {
-              setIsHovering(true);
-            }}
-            onMouseLeave={() => {
-              setIsHovering(false);
-            }}
-          >
-            <p className={style.overlayTextClassList}>{overlayText}</p>
-          </div>
-        </>
-      )}
-      <img
-        id={id}
-        className={imageClassList}
-        src={src}
-        alt={altText ?? overlayText}
-        title={title ?? overlayText}
-      />
-    </div>
-  );
-};
-
-export default Image;