trepur_components 2.3.3 → 2.3.4

package/archive/HamburgerIcon/index.tsx

@@ -0,0 +1,103 @@
+import React, { useState } from 'react';
+
+import Button from '@components/Button';
+import classNames from 'classnames';
+
+
+
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+  onClick?: React.MouseEventHandler;
+  variant?: 'primary' | 'secondary' | 'tertiary';
+}
+
+const HamburgerIcon = ({
+  id,
+  className,
+  onClick,
+  variant = 'primary',
+}: Props): JSX.Element => {
+  const [opened, setOpened] = useState(false);
+  const classList = classNames(
+    {
+      [style.hamburgerIconSecondary]: variant === 'secondary',
+      [style.hamburgerIconPrimary]: variant === 'primary',
+      [style.hamburgerIconTertiary]: variant === 'tertiary',
+    },
+    className,
+    'theme-local',
+  );
+
+  const lineOneClassList = classNames(
+    {
+      [style.lineOneOpened]: opened,
+    },
+    style.lineOne,
+    'transition-transform',
+  );
+
+  const lineTwoClassList = classNames(
+    {
+      [style.lineTwoOpened]: opened,
+      [style.lineTwoClosed]: !opened,
+    },
+    style.lineTwo,
+    'transition-opacity',
+  );
+
+  const lineThreeClassList = classNames(
+    {
+      [style.lineThreeOpened]: opened,
+    },
+    style.lineThree,
+    'transition-transform',
+  );
+
+  const toggleOpened = (e: any): void => {
+    setOpened(!opened);
+    onClick?.(e);
+  };
+
+  return (
+    <Button
+      id={id}
+      className={classList}
+      onClick={(e) => {
+        toggleOpened(e);
+      }}
+      variant={variant}
+      type="icon"
+      label="Mobile menu toggle"
+    >
+      <svg
+        className={classNames(
+          {
+            [style.svgPrimary]: variant === 'primary',
+            [style.svgSecondary]: variant === 'secondary',
+            [style.svgTertiary]: variant === 'tertiary',
+          },
+          style.svg,
+          'transition-backgroundColor',
+        )}
+        width="24"
+        height="24"
+        viewBox="0 0 24 15"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          className={lineOneClassList}
+          d="M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z"
+        />
+        <path
+          className={lineTwoClassList}
+          d="M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z"
+        />
+        <path
+          className={lineThreeClassList}
+          d="M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z"
+        />
+      </svg>
+    </Button>
+  );
+};
+
+export default HamburgerIcon;

package/archive/HamburgerIcon/style.module.css

@@ -0,0 +1,85 @@
+.hamburgerIconPrimary path {
+  @apply transition-all duration-500;
+  @apply outline-none;
+  @apply fill-secondary;
+}
+
+.hamburgerIconPrimary:hover path {
+  @apply fill-primary;
+}
+
+.hamburgerIconPrimary:focus:active path {
+  @apply fill-primary;
+}
+
+.hamburgerIconSecondary path {
+  @apply transition-all duration-500;
+  @apply outline-none;
+  @apply fill-primary;
+}
+
+.hamburgerIconSecondary:hover path {
+  @apply fill-secondary;
+}
+
+.hamburgerIconSecondary:focus:active path {
+  @apply fill-secondary;
+}
+
+.hamburgerIconTertiary path {
+  @apply transition-all duration-500;
+  @apply outline-none;
+  @apply fill-secondary;
+}
+
+.hamburgerIconTertiary:hover path {
+  @apply fill-tertiary;
+}
+
+.hamburgerIconTertiary:focus:active path {
+  @apply fill-tertiary;
+}
+
+.lineOneOpened {
+  @apply origin-top-left -translate-y-0.5 translate-x-1 rotate-45;
+}
+
+.lineTwoOpened {
+  @apply opacity-0;
+}
+
+.lineTwoClosed {
+  @apply opacity-100;
+}
+
+.lineThreeOpened {
+  @apply origin-bottom-left translate-x-1 translate-y-px -rotate-45;
+}
+
+.lineOne {
+  @apply origin-top-left duration-200 ease-linear;
+}
+
+.lineTwo {
+  @apply duration-200 ease-linear;
+}
+
+.lineThree {
+  @apply origin-bottom-left duration-200 ease-linear;
+}
+
+.svg {
+  @apply mx-auto transform overflow-visible duration-500;
+}
+
+.svgPrimary {
+  @apply fill-secondary;
+}
+
+.svgSecondary {
+  @apply fill-secondary;
+}
+
+.svgTertiary {
+  @apply fill-tertiary;
+}

package/archive/HorizontalLine/HorizontalLine.stories.tsx

@@ -0,0 +1,54 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import HorizontalLine from '.';
+
+const meta = {
+  title: 'Components/HorizontalLine',
+  component: HorizontalLine,
+  argTypes: {
+    ...idAndClassName,
+
+    colour: {
+      description: 'The colour of the component',
+      control: 'select',
+      table: {
+        type: { summary: 'select' },
+        defaultValue: { summary: 'primary' },
+      },
+      defaultValue: 'primary',
+    },
+    topLine: {
+      description: 'Adds margin underneath the component',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: 'false',
+    },
+    bottomLine: {
+      description: 'Adds margin above the component',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: 'false',
+    },
+    middleLine: {
+      description: 'Adds margin above and below the component',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'false' },
+      },
+      defaultValue: 'false',
+    },
+  },
+};
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

package/archive/HorizontalLine/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+
+import { type Colours } from '@utils/controls';
+import classNames from 'classnames';
+
+
+
+export interface Props {
+  id?: string;
+  className?: string;
+  colour?: Colours;
+  topLine?: boolean;
+  bottomLine?: boolean;
+  middleLine?: boolean;
+}
+
+const HorizontalLine = ({
+  id,
+  className,
+  colour = 'primary',
+  topLine = false,
+  bottomLine = false,
+  middleLine = false,
+}: Props): JSX.Element => {
+  const classList = classNames(
+    {
+      [style.topLine]: topLine,
+      [style.bottomLine]: bottomLine,
+      [style.middleLine]: middleLine,
+    },
+    className,
+    style[colour],
+    style.classList,
+    'theme-local',
+  );
+
+  return <hr id={id} className={classList} />;
+};
+
+export default HorizontalLine;

package/archive/HorizontalLine/style.module.css

@@ -0,0 +1,55 @@
+.classList {
+  @apply my-0 h-0.5 border-none py-0;
+}
+
+.topLine {
+  @apply mb-6;
+}
+
+.bottomLine {
+  @apply mt-6;
+}
+
+.middleLine {
+  @apply my-6;
+}
+
+.primary {
+  @apply bg-primary;
+}
+
+.secondary {
+  @apply bg-secondary;
+}
+
+.ink {
+  @apply bg-ink;
+}
+
+.white {
+  @apply bg-white;
+}
+
+.grey {
+  @apply bg-lightest-grey;
+}
+
+.gold {
+  @apply bg-gold;
+}
+
+.success {
+  @apply bg-success;
+}
+
+.warning {
+  @apply bg-warning;
+}
+
+.info {
+  @apply bg-info-light;
+}
+
+.error {
+  @apply bg-error;
+}

package/archive/Icon/Icon.stories.tsx

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

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