trepur_components 2.3.3 → 2.3.5

package/archive/Timeline/index.tsx

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

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

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

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

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

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

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