trepur_components 2.3.7 → 2.3.9

package/archive/Checkbox/Checkbox.stories.tsx

@@ -1,34 +0,0 @@
-import { type StoryObj, type Meta } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Checkbox from '.';
-
-const meta = {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  argTypes: {
-    ...idAndClassName,
-    label: {
-      description: '',
-      table: {},
-    },
-  },
-  args: {
-    label: '{{ label }}',
-  },
-};
-
-export default meta;
-type Story = StoryObj<typeof Checkbox>;
-
-export const Checked: Story = {
-  args: {
-    checked: true,
-  },
-};
-
-export const Unchecked: Story = {
-  args: {
-    checked: false,
-  },
-};

package/archive/Checkbox/index.tsx

@@ -1,51 +0,0 @@
-import React, { useState } from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  label: string;
-  onClick?: (label: string, isChecked: boolean) => void;
-
-  checked?: boolean;
-}
-
-const Checkbox: React.FC<Props> = ({
-  id,
-  label,
-  onClick,
-  checked = false,
-}: Props): JSX.Element => {
-  const [isChecked, setIsChecked] = useState(checked);
-
-  const classList = classNames('checkbox-wrapper theme-local');
-  const checkBoxClassList = classNames(
-    {
-      [style.checked]: isChecked,
-    },
-    style.checkbox,
-  );
-
-  return (
-    <div id={id} className={classList}>
-      <label className={style.label}>
-        <input
-          className={checkBoxClassList}
-          onChange={() => {
-            setIsChecked(!isChecked);
-          }}
-          onClick={() => {
-            onClick?.(label, !isChecked);
-          }}
-          type="checkbox"
-          checked={isChecked}
-        />
-        <span className={style.span}>{label}</span>
-      </label>
-    </div>
-  );
-};
-
-export default Checkbox;

package/archive/Checkbox/style.module.css

@@ -1,15 +0,0 @@
-.label {
-  @apply flex  hover:cursor-pointer;
-}
-
-.span {
-  @apply my-auto px-2;
-}
-
-.checkbox {
-  @apply h-6 w-6 appearance-none rounded border-2 hover:cursor-pointer;
-}
-
-.checked {
-  @apply bg-facebook;
-}

package/archive/Collapsible/Collapsible.stories.tsx

@@ -1,67 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Collapsible from '.';
-
-const meta = {
-  title: 'Components/Collapsible',
-  component: Collapsible,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    preText: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    title: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    subtitle: {
-      description: '',
-      control: 'text',
-      table: {
-        category: '',
-      },
-    },
-    children: {
-      description: '',
-      control: 'array',
-      table: {
-        category: '',
-      },
-    },
-  },
-  args: {
-    preText: 'this is some text',
-    title: 'Sheffield Hallam University',
-    subtitle: 'This is a subtitle',
-    imageProps: {
-      src: 'https://picsum.photos/500/300',
-    },
-    children: (
-      <p>
-        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Error, unde
-        perferendis quibusdam eos repellendus vero rerum sunt reiciendis velit
-        autem odio, fuga molestiae perspiciatis dolor voluptatum mollitia quos
-        ipsa! Doloribus? Lorem ipsum, dolor sit amet consectetur adipisicing
-        elit. Reiciendis ducimus, dolorum tempore unde earum aspernatur placeat
-        magnam, alias neque, blanditiis esse tenetur dignissimos in optio nihil
-        libero cum cupiditate debitis?
-      </p>
-    ),
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Collapsible/index.tsx

@@ -1,116 +0,0 @@
-import React, { useState, useEffect } from 'react';
-
-import HorizontalLine from '@components/HorizontalLine';
-import Icon from '@components/Icon';
-import Image, { type Props as imageProps } from '@components/Image';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  preText?: string;
-  title?: string;
-  subtitle?: string;
-  imageProps?: imageProps;
-  children?: string | JSX.Element;
-}
-
-const Collapsible = ({
-  id,
-  className,
-  preText,
-  title,
-  subtitle,
-  imageProps,
-  children,
-}: Props): JSX.Element => {
-  const [expanded, setExpanded] = useState(false);
-
-  useEffect(() => {
-    const coll = document.getElementsByClassName('collapsible');
-    let i: number;
-
-    for (i = 0; i < coll.length; i++) {
-      coll[i].addEventListener('click', function (this: any, err: any) {
-        const content = this.nextElementSibling;
-
-        const scrollHeight: string = content.scrollHeight.toString();
-        if (content.style.maxHeight === '0px') {
-          content.style.maxHeight = `${scrollHeight}px`;
-        } else {
-          content.style.maxHeight = '0px';
-        }
-      });
-    }
-  });
-
-  const classList = classNames(
-    className,
-    style.classList,
-    'transition-opactiy theme-local',
-  );
-
-  const contentWrapperClassList = classNames(
-    {
-      [style.expanded]: expanded,
-      [style.collapsed]: !expanded,
-    },
-    style.contentWrapperClassList,
-  );
-
-  const expandItem = (e: any): void => {
-    const content = e.currentTarget.nextElementSibling;
-    const scrollHeight: string = content.scrollHeight.toString();
-    if (!expanded) {
-      content.style.maxHeight = `${scrollHeight}px`;
-    } else {
-      content.style.maxHeight = '0px';
-    }
-    setExpanded(!expanded);
-  };
-
-  return (
-    <div id={id} className={classList}>
-      <div
-        onClick={(e) => {
-          expandItem(e);
-        }}
-        className={style.heading}
-      >
-        {imageProps !== undefined && (
-          <Image {...imageProps} width={3} height={3} className={style.image} />
-        )}
-        <div className={style.textWrapper}>
-          {preText !== undefined && (
-            <h4 className={style.preText}>{preText}</h4>
-          )}
-          {title !== undefined && <h4 className={style.title}>{title}</h4>}
-          {subtitle !== undefined && (
-            <h5 className={style.subtitle}>{subtitle}</h5>
-          )}
-        </div>
-        {children !== undefined && (
-          <div className={style.iconWrapper}>
-            <Icon
-              className={style.icon}
-              type={expanded ? 'chevron-up' : 'chevron-down'}
-            />
-          </div>
-        )}
-      </div>
-      {children !== undefined && (
-        <div
-          className={contentWrapperClassList}
-          style={{ transition: 'max-height 0.2s ease-out' }}
-        >
-          <HorizontalLine colour="grey" />
-          <div className={style.children}>{children}</div>
-        </div>
-      )}
-    </div>
-  );
-};
-
-export default Collapsible;

package/archive/Collapsible/style.module.css

@@ -1,47 +0,0 @@
-.classList {
-  @apply w-full border-b border-lightest-grey duration-300 hover:cursor-pointer;
-}
-
-.heading {
-  @apply flex h-24 px-4 sm:pr-8;
-}
-
-.image {
-  @apply my-auto flex-none rounded-2xl;
-}
-
-.textWrapper {
-  @apply mx-4 my-auto grid w-full;
-}
-
-.preText {
-  @apply truncate text-xxs text-light-grey md:text-xs;
-}
-
-.title {
-  @apply truncate text-sm md:text-md;
-}
-
-.subtitle {
-  @apply truncate text-xs md:text-sm;
-}
-
-.contentWrapperClassList {
-  @apply w-auto overflow-hidden px-4;
-}
-
-.expanded {
-  @apply mb-4 mt-2 max-h-max;
-}
-
-.collapsed {
-  @apply max-h-0;
-}
-
-.children {
-  @apply pb-2 pt-4;
-}
-
-.iconWrapper {
-  @apply my-auto flex-none;
-}

package/archive/Column/Column.stories.tsx

@@ -1,89 +0,0 @@
-import CardWithTopImage from '@components/CardWithTopImage';
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Column from '.';
-
-const cardChild = (
-  <CardWithTopImage
-    id="cardwithtopimage"
-    imageProps={{
-      src: 'https://picsum.photos/200/200',
-      roundedFull: true,
-    }}
-  >
-    <p>This is some text</p>
-    <p>This is some more text</p>
-    <p>This is a bit more text</p>
-    <p>
-      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolorem odit ad
-      sed, quam recusandae voluptatem provident eveniet beatae omnis vero minus
-      unde facilis. Quia commodi quas odit iusto ut enim!
-    </p>
-  </CardWithTopImage>
-);
-
-const meta = {
-  title: 'Components/Column',
-  component: Column,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    sm: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on sm screens',
-      table: {
-        type: { summary: 'number' },
-      },
-    },
-    md: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on md screens',
-      table: {
-        type: { summary: 'number' },
-      },
-    },
-    lg: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on lg screens',
-      table: {
-        type: { summary: 'number' },
-      },
-    },
-    xl: {
-      type: { name: 'number', required: false },
-      description:
-        'The number of sections out of 12 that the component should span on xl screens',
-      table: {
-        type: { summary: 'number' },
-      },
-    },
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array',
-        },
-        defaultValue: { summary: 'undefined' },
-      },
-    },
-  },
-  args: {
-    sm: 12,
-    md: 8,
-    lg: 4,
-    xl: 2,
-    className: 'bg-facebook md:bg-twitter lg-whatsapp xl:bg-linkedin border',
-    children: cardChild,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Column/index.tsx

@@ -1,119 +0,0 @@
-import React from 'react';
-
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  sm?: number;
-  md?: number;
-  lg?: number;
-  xl?: number;
-  children?: any;
-}
-const Column: React.FC<Props> = ({
-  id,
-  className,
-  sm = 1,
-  md = 1,
-  lg = 1,
-  xl = 1,
-  children,
-}: Props): JSX.Element => {
-  const widthOptions = [
-    { 1: [style.size1] },
-    { 2: [style.size2] },
-    { 3: [style.size3] },
-    { 4: [style.size4] },
-    { 5: [style.size5] },
-    { 6: [style.size6] },
-    { 7: [style.size7] },
-    { 8: [style.size8] },
-    { 9: [style.size9] },
-    { 10: [style.size10] },
-    { 11: [style.size11] },
-    { 12: [style.size12] },
-  ];
-
-  const mdWidthOptions = [
-    { 1: [style.mdSize1] },
-    { 2: [style.mdSize2] },
-    { 3: [style.mdSize3] },
-    { 4: [style.mdSize4] },
-    { 5: [style.mdSize5] },
-    { 6: [style.mdSize6] },
-    { 7: [style.mdSize7] },
-    { 8: [style.mdSize8] },
-    { 9: [style.mdSize9] },
-    { 10: [style.mdSize10] },
-    { 11: [style.mdSize11] },
-    { 12: [style.mdSize12] },
-  ];
-
-  const lgWidthOptions = [
-    { 1: [style.lgSize1] },
-    { 2: [style.lgSize2] },
-    { 3: [style.lgSize3] },
-    { 4: [style.lgSize4] },
-    { 5: [style.lgSize5] },
-    { 6: [style.lgSize6] },
-    { 7: [style.lgSize7] },
-    { 8: [style.lgSize8] },
-    { 9: [style.lgSize9] },
-    { 10: [style.lgSize10] },
-    { 11: [style.lgSize11] },
-    { 12: [style.lgSize12] },
-  ];
-
-  const xlWidthOptions = [
-    { 1: [style.xlSize1] },
-    { 2: [style.xlSize2] },
-    { 3: [style.xlSize3] },
-    { 4: [style.xlSize4] },
-    { 5: [style.xlSize5] },
-    { 6: [style.xlSize6] },
-    { 7: [style.xlSize7] },
-    { 8: [style.xlSize8] },
-    { 9: [style.xlSize9] },
-    { 10: [style.xlSize10] },
-    { 11: [style.xlSize11] },
-    { 12: [style.xlSize12] },
-  ];
-
-  const calculateWidth = (screen: any, size: number): string => {
-    switch (screen) {
-      case 'sm':
-        return Object.values(widthOptions[size - 1]).toString();
-      case 'md':
-        return Object.values(mdWidthOptions[size - 1]).toString();
-      case 'lg':
-        return Object.values(lgWidthOptions[size - 1]).toString();
-      case 'xl':
-        return Object.values(xlWidthOptions[size - 1]).toString();
-      default:
-        return Object.values(widthOptions[size - 1]).toString();
-    }
-  };
-
-  const classList = classNames(
-    {
-      [calculateWidth('sm', sm)]: sm,
-      [calculateWidth('md', md)]: md,
-      [calculateWidth('lg', lg)]: lg,
-      [calculateWidth('xl', xl)]: xl,
-    },
-    className,
-    style.classList,
-    'theme-local',
-  );
-
-  return (
-    <div id={id} className={classList}>
-      {children}
-    </div>
-  );
-};
-
-export default Column;

package/archive/Column/style.module.css

@@ -1,151 +0,0 @@
-.classList {
-  @apply h-full;
-}
-
-.size1 {
-  @apply w-1/12;
-}
-.size2 {
-  @apply w-2/12;
-}
-.size3 {
-  @apply w-3/12;
-}
-.size4 {
-  @apply w-4/12;
-}
-.size5 {
-  @apply w-5/12;
-}
-.size6 {
-  @apply w-6/12;
-}
-.size7 {
-  @apply w-7/12;
-}
-.size8 {
-  @apply w-8/12;
-}
-.size9 {
-  @apply w-9/12;
-}
-.size10 {
-  @apply w-10/12;
-}
-.size11 {
-  @apply w-11/12;
-}
-.size12 {
-  @apply w-full;
-}
-
-.mdSize1 {
-  @apply md:w-1/12;
-}
-.mdSize2 {
-  @apply md:w-2/12;
-}
-.mdSize3 {
-  @apply md:w-3/12;
-}
-.mdSize4 {
-  @apply md:w-4/12;
-}
-.mdSize5 {
-  @apply md:w-5/12;
-}
-.mdSize6 {
-  @apply md:w-6/12;
-}
-.mdSize7 {
-  @apply md:w-7/12;
-}
-.mdSize8 {
-  @apply md:w-8/12;
-}
-.mdSize9 {
-  @apply md:w-9/12;
-}
-.mdSize10 {
-  @apply md:w-10/12;
-}
-.mdSize11 {
-  @apply md:w-11/12;
-}
-.mdSize12 {
-  @apply md:w-full;
-}
-
-.lgSize1 {
-  @apply lg:w-1/12;
-}
-.lgSize2 {
-  @apply lg:w-2/12;
-}
-.lgSize3 {
-  @apply lg:w-3/12;
-}
-.lgSize4 {
-  @apply lg:w-4/12;
-}
-.lgSize5 {
-  @apply lg:w-5/12;
-}
-.lgSize6 {
-  @apply lg:w-6/12;
-}
-.lgSize7 {
-  @apply lg:w-7/12;
-}
-.lgSize8 {
-  @apply lg:w-8/12;
-}
-.lgSize9 {
-  @apply lg:w-9/12;
-}
-.lgSize10 {
-  @apply lg:w-10/12;
-}
-.lgSize11 {
-  @apply lg:w-11/12;
-}
-.lgSize12 {
-  @apply lg:w-full;
-}
-
-.xlSize1 {
-  @apply xl:w-1/12;
-}
-.xlSize2 {
-  @apply xl:w-2/12;
-}
-.xlSize3 {
-  @apply xl:w-3/12;
-}
-.xlSize4 {
-  @apply xl:w-4/12;
-}
-.xlSize5 {
-  @apply xl:w-5/12;
-}
-.xlSize6 {
-  @apply xl:w-6/12;
-}
-.xlSize7 {
-  @apply xl:w-7/12;
-}
-.xlSize8 {
-  @apply xl:w-8/12;
-}
-.xlSize9 {
-  @apply xl:w-9/12;
-}
-.xlSize10 {
-  @apply xl:w-10/12;
-}
-.xlSize11 {
-  @apply xl:w-11/12;
-}
-.xlSize12 {
-  @apply xl:w-full;
-}