trepur_components 2.3.2 → 2.3.4

package/archive/ImageInfo/ImageInfo.stories.tsx

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

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

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

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

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

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

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

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

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

package/archive/InformationIcon/InformationIcon.stories.tsx

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

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

package/archive/InformationIcon/style.module.css

@@ -0,0 +1,71 @@
+.classList {
+  @apply rounded-2xl text-center sm:flex sm:text-left;
+}
+
+.large {
+  @apply py-8;
+}
+
+.small {
+  @apply pb-4;
+}
+
+.icon {
+  @apply sm:h-full;
+}
+
+.large .icon {
+  @apply px-4 md:px-8;
+}
+
+.small .icon {
+  @apply pr-2 md:pr-4;
+}
+
+.text {
+  @apply mt-8 flex flex-col-reverse sm:mt-0 sm:block sm:pr-4 md:pr-8;
+}
+
+.title {
+  @apply font-light sm:font-semiBold;
+}
+
+.subtitle {
+  @apply text-xxl font-medium sm:text-xs sm:font-regular;
+}
+
+.primary {
+  @apply bg-primary text-white;
+}
+
+.secondary {
+  @apply bg-secondary text-white;
+}
+
+.white {
+  @apply bg-white text-black;
+}
+
+.grey {
+  @apply bg-lightest-grey text-black;
+}
+
+.black {
+  @apply bg-black text-white;
+}
+
+.success {
+  @apply bg-success text-white;
+}
+
+.error {
+  @apply bg-error text-white;
+}
+
+.facebook {
+  @apply bg-facebook text-white;
+}
+
+.gold {
+  @apply bg-gold text-white;
+}

package/archive/InformationIconBlock/InformationIconBlock.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { idAndClassName } from '@utils/controls';
+
+import InformationIconBlock from '.';
+
+const icons = [
+  { name: 'Current Age', value: '27', type: 'calendar' },
+  { name: 'Countries Visited', value: '20', type: 'globe' },
+  { name: 'Projects', value: '27', type: 'list' },
+  { name: 'Years in industry', value: '4', type: 'university' },
+];
+
+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 meta>;
+
+export const Default: Story = {};