trepur_components 2.3.7 → 2.3.9

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/ImageInfo.stories.tsx

@@ -1,39 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import ImageInfo from '.';
-
-const meta = {
-  title: 'Components/Image Info',
-  component: ImageInfo,
-  argTypes: {
-    ...idAndClassName,
-
-    bgColour: {
-      type: { name: 'string', required: false },
-      options: ['primary', 'secondary', 'white', 'black', 'gold'],
-      description: 'The background colour of the component',
-      table: {
-        type: { summary: 'string' },
-      },
-      defaultValue: 'primary',
-      control: 'select',
-    },
-  },
-  args: {
-    // title: 'This is a title',
-    // description: 'what do you recon to this?',
-    contentTitle: 'This is a title',
-    text: 'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Esse quia ducimus dolores exercitationem officia repudiandae maiores voluptatum iusto cum. Quae tenetur veniam quam nihil cupiditate fugiat, ratione minima illo! Cum.',
-    image: 'https://picsum.photos/400/200',
-    swapDesktop: true,
-    swapMobile: true,
-    bgColour: '#31A3DD',
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/ImageInfo/index.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-
-import Container from '@components/Container';
-import { type Colours } from '@utils/controls';
-import MatchMedia from '@utils/matchMedia';
-import { Screens } from '@utils/screens';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id: string;
-  className?: string;
-  bgColour?: Colours;
-  textColour?: string;
-  contentTitle?: string;
-  text?: string;
-  image: string;
-  swapDesktop?: boolean;
-  swapMobile?: boolean;
-}
-
-const ImageInfo: React.FC<Props> = ({
-  id,
-  className,
-  bgColour,
-  textColour = 'white',
-  contentTitle,
-  text,
-  image,
-  swapDesktop = false,
-  swapMobile = false,
-}: Props): JSX.Element => {
-  const classList = className;
-  const mediumScreen: string = Screens.md;
-  const lgScreenSize: string = `(min-width: ${mediumScreen})`;
-  const smScreenSize: string = `(max-width: ${mediumScreen})`;
-  const isLg: boolean = MatchMedia(lgScreenSize);
-  const isSm: boolean = MatchMedia(smScreenSize);
-
-  const wrapperClassList = classNames(
-    {
-      [style.wrapper]: !swapDesktop,
-      [style.reverseWrapper]: swapDesktop,
-      [style.reverseMobileWrapper]: !isLg && swapMobile,
-    },
-    style.wrapperClasses,
-    'theme-local',
-  );
-
-  const imageWrapperClasses = classNames(
-    {
-      [style.smallImageWrapper]: isSm,
-    },
-    style.imageWrapper,
-  );
-
-  const imageClasses = classNames(
-    {
-      [style.smallImageHeight]: isSm,
-    },
-    style.image,
-  );
-
-  return (
-    <div
-      id={id}
-      style={{ backgroundColor: bgColour, color: textColour }}
-      className={classList}
-    >
-      <Container withPadding={isLg}>
-        <div className={wrapperClassList}>
-          <div className={imageWrapperClasses}>
-            <img
-              src={image}
-              className={imageClasses}
-              alt={contentTitle}
-              title={contentTitle}
-            />
-          </div>
-          <div className={style.contentWrapper}>
-            <div className={style.content}>
-              <div>
-                <p className={style.title}>{contentTitle}</p>
-                <p className={style.text}>{text}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Container>
-    </div>
-  );
-};
-
-export default ImageInfo;

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;
-}

package/archive/ImageLink/ImageLink.stories.tsx

@@ -1,37 +0,0 @@
-import Column from '@components/Column';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import ImageLink from '.';
-
-const meta = {
-  title: 'Components/Image Link',
-  component: ImageLink,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    image: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-  },
-  args: {
-    image: 'https://picsum.photos/400/400',
-    link: '/',
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/ImageLink/index.tsx

@@ -1,49 +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;
-  altText?: string;
-  title?: string;
-  link?: string;
-  rounded?: boolean;
-  openInNewTab?: boolean;
-  buttonProps?: buttonProps;
-}
-const ImageLink = ({
-  id,
-  className,
-  image,
-  altText,
-  title,
-  link,
-  rounded,
-  openInNewTab,
-  buttonProps,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
-
-  const roundedClass = classNames({
-    [style.rounded]: rounded,
-  });
-
-  return (
-    <a id={id} href={link} {...(openInNewTab && { target: 'blank' })}>
-      <div className={classNames(roundedClass, classList, style.wrapper)}>
-        <img src={image} alt={altText} className={style.image} />
-        {title !== undefined && <h1 className={style.title}>{title}</h1>}
-        {buttonProps?.children !== undefined && (
-          <Button className={style.button}>{buttonProps.children}</Button>
-        )}
-      </div>
-    </a>
-  );
-};
-
-export default ImageLink;

package/archive/ImageLink/style.module.css

@@ -1,23 +0,0 @@
-.classList {
-  @apply mx-1 mb-2 cursor-pointer overflow-hidden text-center hover:opacity-50 md:mx-1 md:mb-2 lg:mx-3 lg:mb-5;
-}
-
-.rounded {
-  @apply rounded-full;
-}
-
-.title {
-  @apply absolute inset-x-0 top-0 mt-4 bg-black py-2 text-center text-white;
-}
-
-.button {
-  @apply absolute inset-x-0 bottom-0 mx-8 mb-4 text-center;
-}
-
-.image {
-  @apply h-full w-full object-cover;
-}
-
-.wrapper {
-  @apply relative overflow-hidden;
-}

package/archive/ImageLinkList/ImageLinkList.stories.tsx

@@ -1,34 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import ImageLinkList from '.';
-
-const getLinks = (): any => {
-  return new Array(16).fill(null).map(() => {
-    return {
-      image: 'https://picsum.photos/400/400',
-      title: 'Hi',
-      buttonProps: {
-        children: <p>button</p>,
-      },
-    };
-  });
-};
-
-const meta = {
-  title: 'Components/Image Link List',
-  component: ImageLinkList,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    items: getLinks(),
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/ImageLinkList/index.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-import ImageLink, { type Props as imageLinkProps } from '../ImageLink';
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  items?: imageLinkProps[];
-}
-
-const ImageLinkList = ({ id, className, items }: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
-
-  return (
-    <div id={id} className={classList}>
-      {items?.map((item, i: number) => {
-        return (
-          <ImageLink
-            key={`image_link_${i + 0}`}
-            altText={item.altText}
-            image={item.image}
-            title={item.title}
-          />
-        );
-      })}
-    </div>
-  );
-};
-
-export default ImageLinkList;

package/archive/ImageLinkList/style.module.css

@@ -1,3 +0,0 @@
-.classList {
-  @apply grid sm:grid-cols-2 md:grid-cols-4;
-}

package/archive/InformationIcon/InformationIcon.stories.tsx

@@ -1,83 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import InformationIcon from '.';
-
-const meta = {
-  title: 'Components/Information Icon',
-  component: InformationIcon,
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      type: { name: 'string', required: true },
-      description: 'The title to display on the component',
-      table: {
-        type: { summary: 'string' },
-      },
-    },
-    subtitle: {
-      type: { name: 'string', value: 'string | number' },
-      description: 'The subtitle to display on the component',
-      table: {
-        type: {
-          summary: 'string',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-    withAnimation: {
-      type: { name: 'boolean', required: false },
-      description: 'Enabled the counter animation on the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'false',
-    },
-    withHoverEffect: {
-      type: { name: 'boolean', required: false },
-      description: 'Enabled the hover effect on the component',
-      table: {
-        type: { summary: 'boolean' },
-      },
-      defaultValue: 'true',
-    },
-    iconProps: {
-      type: { name: 'iconProps', required: false },
-      description: 'The props to pass to the icon to display on the component',
-      table: {
-        type: { summary: 'iconProps' },
-      },
-    },
-
-    large: {
-      description: 'Defines the top and bottom padding size',
-      control: 'boolean',
-      table: {
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'true' },
-      },
-      defaultValue: 'true',
-    },
-  },
-  args: {
-    title: 'Self check-in',
-    subtitle: 'Check yourself in with the smartlock.',
-    withAnimation: true,
-    backgroundColour: 'white',
-    iconProps: {
-      type: 'heart',
-      size: 2,
-      colour: 'black',
-      hollow: true,
-      bgColour: 'secondary',
-      hoverColour: 'black',
-      hoverBgColour: 'white',
-    },
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/InformationIcon/index.tsx

@@ -1,128 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-
-import Icon, { type Props as iconProps } from '@components/Icon';
-import { type Colours } from '@utils/controls';
-import MatchMedia from '@utils/matchMedia';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id: string;
-  className?: string;
-  title: string;
-  subtitle?: string | number;
-  withAnimation?: boolean;
-  withHoverEffect?: boolean;
-  iconProps: iconProps;
-  backgroundColour?: Colours;
-
-  large?: boolean;
-}
-
-const InformationIcon = ({
-  id,
-  className,
-  title,
-  subtitle,
-  withAnimation = false,
-  withHoverEffect = true,
-  iconProps,
-  backgroundColour = 'white',
-
-  large = true,
-}: Props): JSX.Element => {
-  const loaded = useRef(false);
-  const smScreenSize = 'max-width: 768px';
-  const isSm: boolean = MatchMedia(smScreenSize);
-  const classList = classNames(
-    {
-      [style.hoverable]: withHoverEffect,
-      [style.large]: large,
-      [style.small]: !large,
-      'pt-4': !large,
-    },
-    className,
-    style.classList,
-    style[backgroundColour],
-    'theme-local',
-  );
-
-  const titleClassList = classNames({
-    [style.centerText]: subtitle === undefined,
-    [style.title]: subtitle !== undefined,
-  });
-
-  const subtitleClassList = classNames(
-    {
-      [style.centerText]: title === undefined,
-    },
-    style.subtitle,
-  );
-
-  useEffect(() => {
-    if (typeof subtitle === 'number') {
-      const element = document.getElementById(`${id}_number`);
-      const observer = new IntersectionObserver(
-        (entries, observer) => {
-          entries.forEach((entry) => {
-            if (entry.intersectionRatio >= 0.1 && !loaded.current) {
-              loaded.current = true;
-              counterAnimation(
-                document.getElementById(`${id}_number`),
-                0,
-                subtitle,
-                3000,
-              );
-            }
-          });
-        },
-        { threshold: 1 },
-      );
-      element != null && withAnimation && observer.observe(element);
-    }
-  }, []);
-
-  const counterAnimation = (
-    obj: any,
-    start: number,
-    end: number,
-    duration: number,
-  ): void => {
-    let startTimestamp: number;
-    const step = (timestamp: number): void => {
-      startTimestamp = timestamp;
-      const progress = Math.min((timestamp - startTimestamp) / duration, 1);
-      obj.innerHTML = Math.floor(progress * (end - start) + start);
-      if (progress < 1) {
-        window.requestAnimationFrame(step);
-      }
-    };
-    window.requestAnimationFrame(step);
-  };
-
-  return (
-    <div id={id} className={classList}>
-      <div className={style.icon}>
-        {iconProps !== undefined && (
-          <Icon
-            {...iconProps}
-            className="mx-auto"
-            size={isSm ? 3 : 2}
-            bgColour={backgroundColour}
-          />
-        )}
-      </div>
-      <div className={style.text}>
-        {title !== undefined && title !== '' && (
-          <p className={titleClassList}>{title}</p>
-        )}
-        {subtitle !== undefined && subtitle !== '' && (
-          <p className={subtitleClassList}>{subtitle}</p>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default InformationIcon;