trepur_components 2.3.7 → 2.3.9

package/archive/FyreCard/index.tsx

@@ -1,52 +0,0 @@
-import React from 'react';
-
-import Button, { type Props as buttonProps } from '@components/Button';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  image?: string;
-  imageClass?: string;
-  altText?: string;
-  bordered?: string;
-  buttonProps?: buttonProps;
-}
-
-const FyreCard = ({
-  id,
-  className,
-  image,
-  imageClass,
-  altText,
-  bordered,
-  buttonProps,
-}: Props): JSX.Element => {
-  const classList = classNames(
-    {
-      [style.bordered]: bordered,
-    },
-    className,
-    style.classList,
-  );
-  const imageClassList = classNames(imageClass, style.imageClassList);
-
-  return (
-    <div key={id} id={id} className={classList}>
-      <div
-        className={classNames(style.cardContent, 'card-content theme-local')}
-      >
-        <div>
-          <img className={imageClassList} src={image} alt={altText} />
-        </div>
-        <div className={style.buttonWrapper}>
-          <Button {...buttonProps}>{buttonProps?.children}</Button>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export default FyreCard;

package/archive/FyreCard/style.module.css

@@ -1,19 +0,0 @@
-.classList {
-  @apply flex flex-col;
-}
-
-.cardContent {
-  @apply flex flex-1 flex-col;
-}
-
-.buttonWrapper {
-  @apply flex justify-end;
-}
-
-.bordered {
-  @apply border border-grey border-opacity-100;
-}
-
-.imageClassList {
-  @apply w-full;
-}

package/archive/Greeting/Greeting.stories.tsx

@@ -1,41 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Greeting from '.';
-
-const meta = {
-  title: 'Components/Greeting',
-  component: Greeting,
-  argTypes: {
-    ...idAndClassName,
-    morningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the morning message for the greeting component',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    afternoonMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the afternoon message for the greeting component',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    eveningMessage: {
-      type: { name: 'string', required: false },
-      description: 'Defines the evening message for the greeting component',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-  },
-  args: {
-    morningMessage: 'What a beautiful morning it is today',
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Greeting/index.tsx

@@ -1,32 +0,0 @@
-export interface Props {
-  id?: string;
-  className?: string;
-  morningMessage?: string;
-  afternoonMessage?: string;
-  eveningMessage?: string;
-}
-
-const Greeting = ({
-  morningMessage = 'Good morning',
-  afternoonMessage = 'Good afternoon',
-  eveningMessage = 'Good evening',
-}: Props): string => {
-  const today = new Date();
-  const hours = `0${today.getHours().toString()}`.slice(-2);
-  const minutes = `0${today.getMinutes().toString()}`.slice(-2);
-  const seconds = `0${today.getSeconds().toString()}`.slice(-2);
-  const time = parseInt(`${hours}${minutes}${seconds}`);
-
-  let message = '';
-  if (time < 120000) {
-    message = morningMessage;
-  } else if (time > 115959 && time < 170000) {
-    message = afternoonMessage;
-  } else if (time > 165959) {
-    message = eveningMessage;
-  }
-
-  return message;
-};
-
-export default Greeting;

package/archive/HamburgerIcon/HamburgerIcon.stories.tsx

@@ -1,32 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import HamburgerIcon from '.';
-
-const meta = {
-  title: 'Components/Hamburger Icon',
-  component: HamburgerIcon,
-  parameters: {
-    docs: {
-      description: {
-        component: 'An icon component',
-      },
-    },
-    layout: 'padded',
-  },
-  argTypes: {
-    ...idAndClassName,
-
-    onClick: {
-      type: { name: 'function', required: false },
-      description: 'Function to be called when the button is clicked',
-      table: { type: { summary: 'function' } },
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/HamburgerIcon/index.tsx

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

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

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

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

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

@@ -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 = {};