trepur_components 2.3.8 → 2.3.9

package/src/components/IconCard/index.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-
-import { Icon, type IconProps } from '@components/Icon';
-import classNames from 'classnames';
-
-interface AnchorAttributes
-  extends Partial<
-    Pick<JSX.IntrinsicElements['a'], 'href' | 'title' | 'target'>
-  > {}
-
-export interface IconCardProps {
-  id?: string;
-  className?: string;
-  title: string;
-  description: string;
-  iconProps: IconProps;
-  href?: string;
-  target?: string;
-  onClick?: () => void;
-}
-
-export const IconCard = ({
-  id,
-  className,
-  title,
-  description,
-  iconProps,
-  href,
-  target,
-  onClick,
-}: IconCardProps) => {
-  const classList = classNames(
-    className,
-    'flex flex-col bg-white hover:bg-lightest-grey cursor-pointer shadow-xl drop-shadow mx-auto my-auto w-full rounded-2xl p-4',
-  )
-
-  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="py-2">
-        <Icon {...iconProps} size="2x" />
-      </div>
-      <p className="pt-6 text-md font-semiBold text-ink">{title}</p>
-      <p className="text-light-grey">{description}</p>
-    </Tag>
-  );
-}

package/src/components/ImageInfo/ImageInfo.stories.tsx

@@ -1,38 +0,0 @@
-import { Meta, type 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 ImageInfo>;
-
-export const Default: Story = {};

package/src/components/ImageInfo/index.tsx

@@ -1,84 +0,0 @@
-import { type Colours } from '@utils/controls';
-import MatchMedia from '@utils/matchMedia';
-import { Screens } from '@utils/screens';
-import classNames from 'classnames';
-
-import { Container } from '..';
-
-export interface Props {
-  id: string;
-  className?: string;
-  bgColour?: Colours;
-  textColour?: string;
-  contentTitle?: string;
-  text?: string;
-  image: string;
-  swapDesktop?: boolean;
-  swapMobile?: boolean;
-}
-
-export const ImageInfo = ({
-  id,
-  className,
-  bgColour,
-  textColour = 'white',
-  contentTitle,
-  text,
-  image,
-  swapDesktop = false,
-  swapMobile = false,
-}: Props) => {
-  const classList = `${className} w-full max-h-[800px]`;
-  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(
-    {
-      'md:flex-row': !swapDesktop,
-      'md:flex-row-reverse': swapDesktop,
-      'flex flex-col-reverse': !isLg && swapMobile,
-    },
-    'md:flex',
-  )
-
-  const imageWrapperClasses = classNames('max-h-96');
-
-  const imageClasses = classNames(
-    {
-      'h-[100vw]': isSm,
-    },
-    'h-full w-full object-cover',
-  )
-
-  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="md:w-1/2">
-            <div className="flex h-full items-center justify-center p-8 text-center">
-              <div>
-                <p className="text-lg font-regular">{contentTitle}</p>
-                <p className="text-md font-light">{text}</p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </Container>
-    </div>
-  );
-}

package/src/components/ImageLink/ImageLink.stories.tsx

@@ -1,36 +0,0 @@
-import { Meta, type 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 ImageLink>;
-
-export const Default: Story = {};

package/src/components/ImageLink/index.tsx

@@ -1,58 +0,0 @@
-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;
-}
-export const ImageLink = ({
-  id,
-  className,
-  image,
-  altText,
-  title,
-  link,
-  rounded,
-  openInNewTab,
-  buttonProps,
-}: Props) => {
-  const classList = classNames(
-    className,
-    '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 max-w-96',
-  )
-
-  const roundedClass = classNames({
-    'rounded-full': rounded,
-  })
-
-  return (
-    <a id={id} href={link} {...(openInNewTab && { target: 'blank' })}>
-      <div
-        className={classNames(
-          roundedClass,
-          classList,
-          'relative overflow-hidden',
-        )}
-      >
-        <img src={image} alt={altText} className="h-full w-full object-cover" />
-        {title !== undefined && (
-          <h1 className="absolute inset-x-0 top-0 mt-4 bg-black py-2 text-center text-white">
-            {title}
-          </h1>
-        )}
-        {buttonProps?.children !== undefined && (
-          <Button className="absolute inset-x-0 bottom-0 mx-8 mb-4 text-center">
-            {buttonProps.children}
-          </Button>
-        )}
-      </div>
-    </a>
-  );
-}

package/src/components/ImageLinkList/ImageLinkList.stories.tsx

@@ -1,34 +0,0 @@
-import { Meta, type 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 ImageLinkList>;
-
-export const Default: Story = {};

package/src/components/ImageLinkList/index.tsx

@@ -1,28 +0,0 @@
-import classNames from 'classnames';
-
-import { ImageLink, type Props as imageLinkProps } from '../ImageLink';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  items?: imageLinkProps[];
-}
-
-export const ImageLinkList = ({ id, className, items }: Props) => {
-  const classList = classNames(className, 'grid sm:grid-cols-2 md:grid-cols-4');
-
-  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>
-  );
-}

package/src/components/InformationIcon/InformationIcon.stories.tsx

@@ -1,29 +0,0 @@
-import { faHeart } from '@fortawesome/fontawesome-free-solid';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { InformationIcon } from '.';
-
-const meta = {
-  title: 'Components/Information Icon',
-  component: InformationIcon,
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'Self check-in',
-    subtitle: 'Check yourself in with the smartlock.',
-    withAnimation: true,
-    backgroundColour: 'white',
-    iconProps: {
-      icon: faHeart,
-      hollow: true,
-    }
-  }
-};
-
-export default meta;
-
-type Story = StoryObj<typeof InformationIcon>;
-
-export const Default: Story = {};

package/src/components/InformationIcon/index.tsx

@@ -1,105 +0,0 @@
-import { useEffect, useRef } from 'react';
-
-import { Icon, type IconProps } from '@components/Icon';
-import MatchMedia from '@utils/matchMedia';
-import classNames from 'classnames';
-
-export interface InformationIconProps {
-  id: string;
-  className?: string;
-  title: string;
-  subtitle?: string | number;
-  withAnimation?: boolean;
-  iconProps: IconProps;
-  large?: boolean;
-}
-
-export const InformationIcon = ({
-  id,
-  className,
-  title,
-  subtitle,
-  withAnimation = false,
-  iconProps,
-  large = true,
-}: InformationIconProps) => {
-  const loaded = useRef(false);
-  const smScreenSize = 'max-width: 768px';
-  const isSm: boolean = MatchMedia(smScreenSize);
-  const classList = classNames(
-    {
-      'py-8': large,
-      'pb-4': !large,
-      'pt-4': !large,
-    },
-    className,
-    'rounded-2xl text-center sm:flex sm:text-left grid gap-6',
-  )
-
-  const titleClassList = classNames({
-    'font-light sm:font-semiBold': subtitle !== undefined,
-  })
-
-  const subtitleClassList = classNames(
-    'text-xxl font-medium sm:text-xs sm:font-regular',
-  )
-
-  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="sm:h-full">
-        {iconProps !== undefined && (
-          <Icon {...iconProps} size={isSm ? '3x' : '2x'} />
-        )}
-      </div>
-      <div className="mt-8 flex flex-col-reverse sm:mt-0 sm:block sm:pr-4 md:pr-8">
-        {title !== undefined && title !== '' && (
-          <p className={titleClassList}>{title}</p>
-        )}
-        {subtitle !== undefined && subtitle !== '' && (
-          <p className={subtitleClassList}>{subtitle}</p>
-        )}
-      </div>
-    </div>
-  );
-}

package/src/components/InformationIconBlock/InformationIconBlock.stories.tsx

@@ -1,38 +0,0 @@
-import {
-  faCalendar,
-  faGlobe,
-  faList,
-  faUniversity,
-} from '@fortawesome/fontawesome-free-solid';
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { InformationIconBlock } from '.';
-
-const icons = [
-  { name: 'Current Age', value: '27', icon: faCalendar },
-  { name: 'Countries Visited', value: '20', icon: faGlobe },
-  { name: 'Projects', value: '27', icon: faList },
-  { name: 'Years in industry', value: '4', icon: faUniversity },
-]
-
-const meta = {
-  title: 'Components/Information Icon Block',
-  component: InformationIconBlock,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    title: 'Information Icon Block',
-    description: 'What do you recon to this? Prob needs a refurb right?',
-    icons,
-    bgColour: 'primary',
-  }
-}
-
-export default meta;
-
-type Story = StoryObj<typeof InformationIconBlock>;
-
-export const Default: Story = {};

package/src/components/InformationIconBlock/index.tsx

@@ -1,56 +0,0 @@
-import { ComponentWrapper } from '@components/ComponentWrapper';
-import { Container } from '@components/Container';
-import { type IconProps } from '@components/Icon';
-import { InformationIcon } from '@components/InformationIcon';
-import { type Colours } from '@utils/controls';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  icons?: IconProps[];
-}
-
-export const InformationIconBlock = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  icons,
-}: Props) => {
-  const classList = className;
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <Container
-        className="grid grid-cols-2 gap-4 xl:grid-cols-4"
-        withPadding={false}
-      >
-        {icons?.map((icon: any, i: number) => {
-          return (
-            <InformationIcon
-              key={i}
-              iconProps={{
-                size: '2x',
-                icon: icon.icon,
-                colour: 'primary',
-              }}
-              id={icon.name.replace(/\s+/g, '')}
-              title={icon.name}
-              subtitle={icon.value}
-              withAnimation
-            />
-          );
-        })}
-      </Container>
-    </ComponentWrapper>
-  );
-}

package/src/components/Jumbotron/Jumbotron.stories.tsx

@@ -1,21 +0,0 @@
-import { Meta, type StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import { Jumbotron } from '.';
-
-const meta = {
-  title: 'Components/Jumbotron',
-  component: Jumbotron,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-  },
-  args: {
-    image: 'https://picsum.photos/1000/1000',
-  }
-}
-export default meta;
-
-type Story = StoryObj<typeof Jumbotron>;
-
-export const Default: Story = {};

package/src/components/Jumbotron/index.tsx

@@ -1,19 +0,0 @@
-import classNames from 'classnames';
-
-export interface Props {
-  id?: string;
-  className?: string;
-  image?: string;
-  altText?: string;
-  title?: string;
-}
-
-export const Jumbotron = ({ id, className, image, altText, title }: Props) => {
-  const classList = classNames(className, 'h-96 overflow-hidden w-full');
-  const imageClassList = 'h-full w-full object-cover';
-  return (
-    <div id={id} className={classList}>
-      <img className={imageClassList} src={image} alt={altText} title={title} />
-    </div>
-  );
-}