trepur_components 2.3.7 → 2.3.8

package/archive/Icon/Icon.stories.tsx

@@ -1,164 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Icon from '.';
-
-const meta = {
-  title: 'Components/Icon',
-  component: Icon,
-  argTypes: {
-    ...idAndClassName,
-    type: {
-      options: [
-        'heart',
-        'arrow-up',
-        'arrow-down',
-        'multiply',
-        'burger',
-        'bars',
-        'facebook',
-        'instagram',
-      ],
-      type: { name: 'string', required: false },
-      description: 'The name of the icon to display in the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      control: 'select',
-    },
-    size: {
-      type: { name: 'number', required: false },
-      description: 'The size of the icon to show in the component',
-      table: {
-        type: { summary: 'number' },
-      },
-    },
-    animation: {
-      type: { name: 'string', required: false },
-      options: ['none', 'pulse', 'spin', 'beat'],
-      description: 'Type of annimation to apply to the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      control: 'select',
-    },
-    reverseSpin: {
-      type: { name: 'boolean', required: false },
-      description: 'To reverse the animation on the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'false',
-    },
-    hollow: {
-      type: { name: 'boolean', required: false },
-      description: 'To render a hollow version of the icon in component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'false',
-    },
-    colour: {
-      type: { name: 'string', required: false },
-      options: [
-        'primary',
-        'secondary',
-        'white',
-        'black',
-        'gold',
-        'facebook',
-        'interactive-facebook',
-      ],
-      description: 'The font colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'select',
-    },
-    bgColour: {
-      type: { name: 'string', required: false },
-      options: [
-        'primary',
-        'secondary',
-        'white',
-        'black',
-        'gold',
-        'facebook',
-        'interactive-facebook',
-      ],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'secondary',
-      control: 'select',
-    },
-    hoverColour: {
-      type: { name: 'string', required: false },
-      options: [
-        'primary',
-        'secondary',
-        'white',
-        'black',
-        'gold',
-        'facebook',
-        'interactive-facebook',
-      ],
-      description: 'The font colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'select',
-    },
-    hoverBgColour: {
-      type: { name: 'string', required: false },
-      options: [
-        'primary',
-        'secondary',
-        'white',
-        'black',
-        'gold',
-        'facebook',
-        'interactive-facebook',
-      ],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'secondary',
-      control: 'select',
-    },
-    rounded: {
-      type: { name: 'boolean', required: false },
-      description: 'Sets the component to a circle shape',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'false',
-    },
-    brand: {
-      type: { name: 'boolean', required: false },
-      description: 'Set to true if the icon type to render is a brand image',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'false',
-    },
-  },
-  args: {
-    type: 'heart',
-    size: 1,
-    colour: 'primary',
-    bgColour: 'white',
-    hoverColour: 'primary',
-    hoverBgColour: 'white',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

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/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/style.module.css

@@ -1,109 +0,0 @@
-.overlayTextClassList {
-  @apply m-auto text-center text-primary;
-}
-
-.overlayTextWrapperClassList {
-  @apply absolute z-20 flex transition-opacity duration-700;
-}
-
-.overlayClassList {
-  @apply absolute z-10 bg-white transition-opacity duration-700;
-}
-
-.rounded {
-  @apply rounded-2xl;
-}
-
-.roundedFull {
-  @apply rounded-full;
-}
-
-.bordered {
-  @apply border-4 border-primary;
-}
-
-.centerAligned {
-  @apply mx-auto;
-}
-
-.visible {
-  @apply opacity-80;
-}
-
-.invisible {
-  @apply opacity-0;
-}
-
-.width1 {
-  @apply w-6;
-}
-.width2 {
-  @apply w-10;
-}
-.width3 {
-  @apply w-14;
-}
-.width4 {
-  @apply w-16;
-}
-.width5 {
-  @apply w-20;
-}
-.width6 {
-  @apply w-24;
-}
-.width7 {
-  @apply w-28;
-}
-.width8 {
-  @apply w-32;
-}
-.width9 {
-  @apply w-36;
-}
-.width10 {
-  @apply w-40;
-}
-.width11 {
-  @apply w-44;
-}
-.width12 {
-  @apply w-full;
-}
-
-.height1 {
-  @apply h-6;
-}
-.height2 {
-  @apply h-10;
-}
-.height3 {
-  @apply h-14;
-}
-.height4 {
-  @apply h-16;
-}
-.height5 {
-  @apply h-20;
-}
-.height6 {
-  @apply h-24;
-}
-.height7 {
-  @apply h-28;
-}
-.height8 {
-  @apply h-32;
-}
-.height9 {
-  @apply h-36;
-}
-.height10 {
-  @apply h-40;
-}
-.height11 {
-  @apply h-44;
-}
-.height12 {
-  @apply h-full;
-}

package/archive/ImageInfo/style.module.css

@@ -1,47 +0,0 @@
-.wrapperClasses {
-  @apply md:flex;
-}
-
-.wrapper {
-  @apply md:flex-row;
-}
-
-.reverseWrapper {
-  @apply md:flex-row-reverse;
-}
-
-.reverseMobileWrapper {
-  @apply flex flex-col-reverse;
-}
-
-.imageWrapper {
-  @apply md:w-1/2;
-}
-
-.smallImageWrapper {
-  height: 100vw;
-}
-
-.smallImageHeight {
-  height: 100vw;
-}
-
-.image {
-  @apply h-full w-full object-cover;
-}
-
-.contentWrapper {
-  @apply md:w-1/2;
-}
-
-.content {
-  @apply flex h-full items-center justify-center p-8 text-center;
-}
-
-.title {
-  @apply text-lg font-regular;
-}
-
-.text {
-  @apply text-md font-light;
-}