trepur_components 2.3.6 → 2.3.8

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/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/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/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/style.module.css

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

@@ -1,32 +0,0 @@
-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 = {};

package/archive/InformationIconBlock/style.module.css

@@ -1,7 +0,0 @@
-.iconWrapper {
-  @apply grid grid-cols-2 gap-4 xl:grid-cols-4;
-}
-
-.iconClasses {
-  @apply pb-12;
-}

package/archive/Input/style.module.css

@@ -1,60 +0,0 @@
-.classList {
-  @apply mt-4 w-full bg-white;
-  @apply cursor-pointer;
-}
-
-/* .classList:active p {
-    @apply hidden;
-} 
-
-.classList:active .value {
-    @apply pt-3 pb-4;
-}  */
-
-.fullWidth {
-  @apply w-full;
-}
-
-.notFullWidth {
-  @apply sm:w-72;
-}
-
-.labelWrapper {
-  @apply absolute -mt-3 ml-3 px-1;
-  @apply flex rounded-2xl bg-white text-sm font-regular;
-}
-
-.required {
-  @apply font-semiBold text-error;
-}
-
-.value {
-  @apply w-full rounded-md bg-white py-2 pl-4 text-ink;
-  @apply cursor-pointer;
-  @apply border border-black;
-  @apply text-md;
-}
-
-/* .value:focus {
-    @apply pt-3 pb-4;
-}
-
-.value:focus ~ label {
-    @apply text-xl;
-} */
-
-.errors {
-  @apply text-sm font-regular text-error;
-}
-
-.errorState {
-  @apply border-2 border-error;
-}
-
-.labelError {
-  @apply text-error;
-}
-
-.errorText {
-  @apply mt-1 border-l-4 border-error pl-3;
-}

package/archive/Jumbotron/style.module.css

@@ -1,8 +0,0 @@
-.classes {
-  @apply h-96 overflow-hidden;
-  @apply w-full;
-}
-
-.imageClasses {
-  @apply h-full w-full object-cover;
-}

package/archive/MenuButton/index.tsx

@@ -1,82 +0,0 @@
-import React, { useState } from 'react';
-
-import DropdownMenu from '@components/DropdownMenu';
-import Image from '@components/Image';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  backgroundColour?: Colours;
-
-  menuItems: Array<{ name: string; href: string }>;
-  onClick?: React.MouseEventHandler;
-}
-
-const MenuButton = ({
-  id,
-  className,
-  backgroundColour = 'white',
-
-  menuItems,
-  onClick,
-}: Props): JSX.Element => {
-  const [showMenu, setShowMenu] = useState(false);
-  const classList = classNames(
-    className,
-    style.classList,
-    style[backgroundColour],
-    'theme-local',
-  );
-
-  if (!menuItems) return <></>;
-
-  return (
-    <div>
-      <div
-        id={id}
-        className={classList}
-        onClick={() => {
-          setShowMenu(!showMenu);
-        }}
-      >
-        <div className={style.menuClasses} onClick={(e) => onClick?.(e)}>
-          <svg
-            className={style.svg}
-            width="18"
-            height="24"
-            viewBox="0 0 24 15"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              className={style.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={style.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={style.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>
-        </div>
-        <Image
-          src="https://picsum.photos/300/300"
-          className={style.imageClasses}
-        />
-      </div>
-      {showMenu && (
-        <div>
-          <DropdownMenu menuItems={menuItems} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default MenuButton;

package/archive/MenuButton/style.module.css

@@ -1,45 +0,0 @@
-.classList {
-  width: 80px;
-  height: 45px;
-  @apply overflow-hidden rounded-full border-2 border-lightest-grey;
-  @apply my-auto flex cursor-pointer justify-between pl-2 text-center;
-  @apply hover:shadow-md;
-}
-
-.menuClasses {
-  @apply mx-auto my-auto;
-}
-
-.imageClasses {
-  width: 34px;
-  height: 34px;
-  @apply mx-auto my-auto rounded-full object-contain;
-}
-
-.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/Modal/style.module.css

@@ -1,35 +0,0 @@
-.overlay {
-  @apply block h-screen w-screen;
-  @apply fixed right-0 top-0 z-50;
-  background: rgba(0, 0, 0, 0.6);
-  @apply opacity-0;
-  @apply transition-opacity duration-300 ease-linear ease-out;
-}
-
-.children {
-  @apply mx-auto flex w-full md:w-auto;
-  @apply fixed left-1/2 top-1/2 z-50 block -translate-x-1/2 -translate-y-1/2 transform;
-  @apply opacity-0 transition-opacity duration-300 ease-linear ease-out;
-}
-
-.mobileGutter {
-  @apply px-4 md:px-0;
-}
-
-.visible {
-  @apply opacity-100;
-}
-
-.hide {
-  @apply hidden;
-}
-
-.children.slideBottom {
-  @apply transition-transform duration-300 ease-linear ease-out;
-  @apply opacity-100;
-  @apply translate-y-full;
-}
-
-.children.slideBottom.visible {
-  @apply -translate-y-1/2;
-}