trepur_components 2.3.7 → 2.3.9

package/archive/Timeline/index.tsx

@@ -1,254 +0,0 @@
-import React from 'react';
-
-import Column from '@components/Column';
-import ComponentWrapper from '@components/ComponentWrapper';
-import Image from '@components/Image';
-import Row from '@components/Row';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  isHorizontal?: boolean;
-  items?: object[];
-  reverse?: boolean;
-  textCenter?: boolean;
-  useImages?: boolean;
-  horizontalComponentClasses?: string;
-  isSm?: boolean;
-}
-
-const Timeline = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  isHorizontal = false,
-  items,
-  reverse = false,
-  textCenter,
-  useImages = true,
-  horizontalComponentClasses,
-  isSm = false,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
-  const ulClasses = classNames(
-    {
-      [`${style.ulHorizontal} none-reverse`]: !reverse && isHorizontal,
-      [`${style.ul} none-reverse`]: !reverse && !isHorizontal,
-      [`${style.ulHorizontalReverse} reverse`]: reverse && isHorizontal,
-      [`${style.ulVerticalReverse} reverse`]: reverse && !isHorizontal,
-    },
-    className,
-    style.ulClassList,
-    'status-flow timeline',
-  );
-
-  const liClasses = classNames(
-    {
-      [style.textCenter]: textCenter,
-      [style.liHorizontal]: !reverse && isHorizontal,
-      [`${style.li} none-reverse`]: !reverse && !isHorizontal,
-      [style.liHorizontalReverse]: reverse && isHorizontal,
-      [style.liVerticalReverse]: reverse && !isHorizontal,
-    },
-    style.liClassList,
-    'status-flow-item',
-  );
-
-  const circle = classNames(
-    {
-      'horizontal collapse': isHorizontal && isSm,
-      horizontal: isHorizontal && !isSm,
-      vertical: !isHorizontal,
-    },
-    style.circle,
-  );
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      <div className={ulClasses}>
-        {items?.map((item: any, i: number) => {
-          let before;
-          if (i % 2 === 0) {
-            before = true;
-          } else {
-            before = false;
-          }
-
-          let circlePos;
-          if (items.length - 1 > 0) {
-            if (i === 0) circlePos = 'first-circle';
-            else if (i === items.length - 1) circlePos = 'last-circle';
-            else circlePos = 'circle';
-          }
-
-          let verticalCircleStylesBefore;
-          if (circlePos === 'circle' && isSm) {
-            verticalCircleStylesBefore = style.circleVerticalCollapseBefore;
-          } else if (circlePos === 'circle' && !isSm) {
-            verticalCircleStylesBefore = style.circleVerticalBefore;
-          } else if (circlePos === 'last-circle' && isSm) {
-            verticalCircleStylesBefore = style.lastCircleVerticalCollapseBefore;
-          } else if (circlePos === 'last-circle' && !isSm) {
-            verticalCircleStylesBefore = style.lastCircleVerticalBefore;
-          }
-
-          let verticalCircleStylesAfter;
-          if (circlePos === 'circle' && isSm) {
-            verticalCircleStylesAfter = style.circleVerticalCollapseAfter;
-          } else if (circlePos === 'circle' && !isSm) {
-            verticalCircleStylesAfter = style.circleVerticalAfter;
-          } else if (circlePos === 'first-circle' && isSm) {
-            verticalCircleStylesAfter = style.firstCircleVerticalCollapseAfter;
-          } else if (circlePos === 'first-circle' && !isSm) {
-            verticalCircleStylesAfter = style.firstCircleVerticalAfter;
-          }
-
-          let horizontalCircleStylesBefore;
-          if (circlePos === 'circle' && isSm) {
-            horizontalCircleStylesBefore = style.circleHorizontalCollapseBefore;
-          } else if (circlePos === 'circle' && !isSm) {
-            horizontalCircleStylesBefore = style.circleHorizontalBefore;
-          } else if (circlePos === 'last-circle' && isSm) {
-            horizontalCircleStylesBefore =
-              style.lastCircleHorizontalCollapseBefore;
-          } else if (circlePos === 'last-circle' && !isSm) {
-            horizontalCircleStylesBefore = style.lastCircleHorizontalBefore;
-          }
-
-          let horizontalCircleStylesAfter;
-          if (circlePos === 'circle' && isSm) {
-            horizontalCircleStylesAfter = style.circleHorizontalCollapseAfter;
-          } else if (circlePos === 'circle' && !isSm) {
-            horizontalCircleStylesAfter = style.circleHorizontalAfter;
-          } else if (circlePos === 'first-circle' && isSm) {
-            horizontalCircleStylesAfter =
-              style.firstCircleHorizontalCollapseAfter;
-          } else if (circlePos === 'first-circle' && !isSm) {
-            horizontalCircleStylesAfter = style.firstCircleHorizontalAfter;
-          }
-
-          const horizonalComponentClassList = classNames(
-            horizontalComponentClasses,
-            'pt-12',
-          );
-          if (isHorizontal) {
-            return (
-              <Column
-                key={`horizontal_col_${i + 0}`}
-                id="timeline-item"
-                className={`${liClasses} mb-8 py-4`}
-              >
-                <Row className={horizontalComponentClasses}>
-                  {before && item.component}
-                </Row>
-                <Row>
-                  {useImages ? (
-                    <div
-                      id={circlePos}
-                      className={
-                        isHorizontal ? 'horizontal my-0 py-0' : 'vertical'
-                      }
-                    >
-                      <span className={horizontalCircleStylesBefore} />
-                      <Image
-                        {...item.centerImageProps}
-                        className={style.imageProps}
-                      />
-                      <span className={horizontalCircleStylesAfter} />
-                    </div>
-                  ) : (
-                    <p id={circlePos} className={circle} />
-                  )}
-                </Row>
-                <Row className={horizonalComponentClassList}>
-                  {!before && item.component}
-                </Row>
-              </Column>
-            );
-          } else {
-            return (
-              <Row
-                key={`vertical_row_${i + 0}`}
-                id="timeline-item"
-                className={`${liClasses} py-4`}
-              >
-                {!isSm && (
-                  <Column
-                    sm={5}
-                    md={5}
-                    lg={5}
-                    xl={5}
-                    className="my-auto text-center"
-                  >
-                    {before && item.component}
-                  </Column>
-                )}
-                <Column
-                  sm={2}
-                  md={2}
-                  lg={2}
-                  xl={2}
-                  id="circle-wrapper"
-                  className="my-auto"
-                >
-                  {useImages ? (
-                    <div id={circlePos} className="vertical">
-                      <span className={verticalCircleStylesBefore} />
-                      <Image
-                        {...item.centerImageProps}
-                        className={style.imageProps}
-                      />
-                      <span className={verticalCircleStylesAfter} />
-                    </div>
-                  ) : (
-                    <p id={circlePos} className={circle} />
-                  )}
-                </Column>
-                {/* TODO: combine below - issue with sm div */}
-                {isSm && (
-                  <Column
-                    sm={10}
-                    md={10}
-                    lg={10}
-                    xl={10}
-                    className="my-auto text-center"
-                  >
-                    {item.component}
-                  </Column>
-                )}
-                {!isSm && (
-                  <Column
-                    sm={5}
-                    md={5}
-                    lg={5}
-                    xl={5}
-                    className="my-auto text-center"
-                  >
-                    {!before && item.component}
-                  </Column>
-                )}
-              </Row>
-            );
-          }
-        })}
-      </div>
-    </ComponentWrapper>
-  );
-};
-
-export default Timeline;

package/archive/Timeline/style.module.css

@@ -1,134 +0,0 @@
-.classList {
-  @apply w-full list-none pb-4;
-}
-
-.circle {
-  @apply mx-auto my-16 h-4 w-4 rounded-full border bg-black text-center;
-}
-
-.liClassList {
-  @apply relative flex flex-auto flex-row leading-tight;
-}
-
-.liVerticalReverse {
-  @apply flex-row-reverse;
-}
-
-.liHorizontalReverse {
-  @apply flex-col-reverse items-center;
-}
-
-.li {
-  @apply flex-row;
-}
-
-.liHorizontal {
-  @apply flex-col items-center justify-between;
-}
-
-.textCenter {
-  @apply text-center;
-}
-
-.ulClassList {
-  @apply relative flex list-none pl-0;
-}
-
-.ulVerticalReverse {
-  @apply flex-col;
-}
-
-.ulHorizontalReverse {
-  @apply flex-row justify-between;
-}
-
-.ul {
-  @apply flex-col;
-}
-
-.ulHorizontal {
-  @apply flex-row justify-between;
-}
-
-/* Vertical */
-.circleVerticalBefore {
-  @apply absolute top-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 49.9%;
-}
-
-.circleVerticalAfter {
-  @apply absolute bottom-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 49.9%;
-}
-
-.firstCircleVerticalAfter {
-  @apply absolute bottom-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 49.9%;
-}
-
-.lastCircleVerticalBefore {
-  @apply absolute top-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 49.9%;
-}
-
-/* V - collapse*/
-.circleVerticalCollapseBefore {
-  @apply absolute top-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 8.2%;
-}
-
-.circleVerticalCollapseAfter {
-  @apply absolute bottom-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 8.2%;
-}
-
-.firstCircleVerticalCollapseAfter {
-  @apply absolute bottom-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 8.2%;
-}
-
-.lastCircleVerticalCollapseBefore {
-  @apply absolute top-0 block h-1/2 border-2 border-solid border-primary;
-  content: '';
-  left: 8.2%;
-}
-
-/* Horizontal */
-.circleHorizontalBefore {
-  @apply absolute top-1/2 block border-2 border-solid border-primary;
-  content: '';
-  width: 70%;
-  left: -8%;
-}
-
-.circleHorizontalAfter {
-  @apply absolute top-1/2 block border-2 border-solid border-primary;
-  content: '';
-  width: 70%;
-  right: -12%;
-}
-
-.firstCircleHorizontalAfter {
-  @apply absolute top-1/2 block border-2 border-solid border-primary;
-  content: '';
-  width: 60%;
-  right: -12%;
-}
-
-.lastCircleHorizontalBefore {
-  @apply absolute top-1/2 block border-2 border-solid border-primary;
-  content: '';
-  width: 55%;
-  left: -8%;
-}
-
-.imageProps {
-  @apply relative z-10;
-}

package/archive/TimelineV2/TimelineV2.stories.tsx

@@ -1,95 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import TimelineV2 from '.';
-
-const meta = {
-  title: 'Components/TimelineV2',
-  component: TimelineV2,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-
-    isHorizontal: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      },
-    },
-    useImages: {
-      description: '',
-      control: 'boolean',
-      table: {
-        category: '',
-      },
-    },
-    items: {
-      description: '',
-      control: 'array',
-      table: {
-        category: '',
-      },
-    },
-  },
-  args: {
-    title: 'This is a timeline',
-    description: 'What do you think to it?',
-    items: [
-      {
-        preText:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laudantium ratione optio ipsa repellat voluptatum in reiciendis corrupti officiis similique aliquid ex voluptas placeat autem blanditiis doloribus nisi, accusantium hic.',
-        title:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laudantium ratione optio ipsa repellat voluptatum in reiciendis corrupti officiis similique aliquid ex voluptas placeat autem blanditiis doloribus nisi, accusantium hic.',
-        subtitle:
-          'Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam laudantium ratione optio ipsa repellat voluptatum in reiciendis corrupti officiis similique aliquid ex voluptas placeat autem blanditiis doloribus nisi, accusantium hic.',
-        imageProps: {
-          src: 'https://picsum.photos/101/100',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 2',
-        subtitle: 'Subtitle 2',
-        imageProps: {
-          src: 'https://picsum.photos/100/101',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 3',
-        subtitle: 'Subtitle 3',
-        imageProps: {
-          src: 'https://picsum.photos/102/100',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 4',
-        subtitle: 'Subtitle 4',
-        imageProps: {
-          src: 'https://picsum.photos/100/102',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-      {
-        title: 'Title 5',
-        subtitle: 'Subtitle 5',
-        imageProps: {
-          src: 'https://picsum.photos/102/101',
-        },
-        children:
-          'Lorem ipsum dolor sit amet consectetur, adipisicing elit. Laboriosam culpa dolores animi voluptatum dolore ducimus illum ad magni iste adipisci, officiis, pariatur architecto tenetur cupiditate rem minima itaque nostrum voluptate.',
-      },
-    ],
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/TimelineV2/index.tsx

@@ -1,70 +0,0 @@
-import Collapsible from '@components/Collapsible';
-import ComponentWrapper from '@components/ComponentWrapper';
-import { type Props as ImageProps } from '@components/Image';
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-interface Item {
-  preText?: string;
-  title?: string;
-  subtitle?: string;
-  children: any;
-  imageProps: ImageProps;
-}
-
-export interface Props {
-  id?: string;
-  className?: string;
-  title?: string;
-  description?: string;
-  bgColour?: Colours;
-  items?: Item[];
-}
-
-const TimelineV2 = ({
-  id,
-  className,
-  title,
-  description,
-  bgColour,
-  items,
-}: Props): JSX.Element => {
-  const classList = classNames(className, style.classList, 'theme-local');
-
-  return (
-    <ComponentWrapper
-      id={id}
-      className={classList}
-      title={title}
-      description={description}
-      bgColour={bgColour}
-    >
-      {items?.map((item, i: number) => {
-        return (
-          <div className={style.item} key={`timeline_${i}`}>
-            <div className={style.lineWrapper}>
-              <p className={style.circle} />
-              <div
-                className={i !== items.length - 1 ? style.line : style.blank}
-              />
-            </div>
-            <div className={style.collapsible}>
-              <Collapsible
-                preText={item.preText}
-                title={item.title}
-                subtitle={item.subtitle}
-                imageProps={item.imageProps}
-              >
-                {item.children}
-              </Collapsible>
-            </div>
-          </div>
-        );
-      })}
-    </ComponentWrapper>
-  );
-};
-
-export default TimelineV2;

package/archive/TimelineV2/style.module.css

@@ -1,28 +0,0 @@
-.classList {
-  @apply w-full list-none pb-4;
-}
-
-.item {
-  @apply flex;
-}
-
-.lineWrapper {
-  @apply hidden sm:block;
-}
-
-.circle {
-  @apply z-10 m-auto mt-12 h-4 w-4 rounded-full bg-light-grey;
-}
-
-.line {
-  @apply m-auto h-full w-1 bg-light-grey;
-}
-
-.blank {
-  @apply border-r-2 border-transparent;
-  content: '';
-}
-
-.collapsible {
-  @apply my-2 w-full rounded-2xl bg-white sm:ml-8;
-}

package/archive/Tubestops/Tubestops.stories.tsx

@@ -1,42 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-import { idAndClassName } from '@utils/controls';
-
-import Tubestops from '.';
-
-const meta = {
-  title: 'Components/Tubestops',
-  component: Tubestops,
-  argTypes: {
-    ...idAndClassName,
-    items: {
-      description:
-        'An array of strings, one per stop. To add a stop without text, use and empty string',
-    },
-    activeStop: {
-      description: 'The stop number which is currently active',
-    },
-  },
-  args: {
-    items: [
-      'Step 1',
-      'Step 2',
-      'Step 3',
-      'Step 4',
-      'Step 5',
-      'Step 6',
-      'Step 7',
-      'Step 8',
-      'Step 9',
-      'Step 10',
-      'Step 11',
-      'Step 12',
-    ],
-    activeStop: 1,
-  },
-};
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

package/archive/Tubestops/index.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-
-import { type Colours } from '@utils/controls';
-import classNames from 'classnames';
-
-
-
-export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
-  items?: string[];
-
-  bgColour?: Colours;
-  activeStop?: number;
-}
-
-const Tubestops: React.FC<Props> = ({ id, items, activeStop = 1 }) => {
-  return (
-    <div id={id} className={classNames(style.wrapper, 'theme-local')}>
-      {items?.map((item, i: number) => {
-        return (
-          <div className={classNames(style.item)} key={`tubestop-stop-${i}`}>
-            <div
-              className={classNames({
-                [style.line]: i >= activeStop - 1 && i < items.length - 1,
-                [style.completedLine]:
-                  i < activeStop - 1 && i < items.length - 1,
-              })}
-            />
-            <p
-              className={classNames(
-                {
-                  [style.completedCircle]: i + 1 < activeStop,
-                  [style.activeCircle]: activeStop === i + 1,
-                  [style.inactiveCircle]: i + 1 > activeStop,
-                  [style.circleLast]: i === items.length - 1,
-                },
-                style.circle,
-              )}
-            />
-            <p
-              className={classNames(
-                {
-                  [style.completedStop]: i + 1 < activeStop,
-                  [style.activeStop]: activeStop === i + 1,
-                  [style.inactiveStop]: i + 1 > activeStop,
-                },
-                style.text,
-              )}
-            >
-              {item}
-            </p>
-          </div>
-        );
-      })}
-    </div>
-  );
-};
-
-export default Tubestops;