trepur_components 2.3.3 → 2.3.4

package/archive/Checkbox/Checkbox.mdx

@@ -0,0 +1,33 @@
+{/* Checkbox.mdx */}
+
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+
+import * as CheckboxStories from './Checkbox.stories';
+
+<Meta of={CheckboxStories} />
+
+# Checkbox
+
+A checkbox is an interactive component with and optional label.
+
+It is able to display two states to the end user.
+
+The state of the checkbox can toggled by clicking on the component.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Variants
+
+A checkbox can exist in two different states:
+
+### Checked
+
+<Story of={CheckboxStories.Checked} />
+
+### Unchecked
+
+<Story of={CheckboxStories.Unchecked} />

package/archive/Checkbox/Checkbox.stories.tsx

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

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

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

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

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

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

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

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