trepur_components 1.0.1 → 1.0.2

package/dist/components/Timeline/index.css

@@ -0,0 +1,133 @@
+/* Vertical */
+/* #circle.vertical:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 49.9%;
+  z-index: -1;
+}
+
+#circle.vertical:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 49.9%;
+  z-index: -1;
+}
+
+#first-circle.vertical:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 49.9%;
+  z-index: -1;
+}
+
+#last-circle.vertical:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 49.9%;
+  z-index: -1;
+} */
+
+/* V - collapse*/
+/* #circle.vertical.collapse:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
+
+#circle.vertical.collapse:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
+
+#first-circle.vertical.collapse:after {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  bottom: 0%;
+  left: 8.2%;
+  z-index: -1;
+}
+
+#last-circle.vertical.collapse:before {
+  position: absolute;
+  display: block;
+  border-left: 1px solid #31a3dd;
+  content: "";
+  height: 50%;
+  top: 0%;
+  left: 8.2%;
+  z-index: -1;
+} */
+/* Horizontal */
+/* #circle.horizontal:before {
+  position: absolute;
+  display: block;
+  border-top: 1px solid #31a3dd;
+  content: "";
+  width: 70%;
+  top: 50%;
+  left: -8%;
+  z-index: -1;
+}
+
+#circle.horizontal:after {
+  position: absolute;
+  display: block;
+  border-top: 1px solid #31a3dd;
+  content: "";
+  width: 70%;
+  top: 50%;
+  right: -12%;
+  z-index: -1;
+}
+
+#first-circle.horizontal:after {
+  position: absolute;
+  display: block;
+  border-top: 1px solid #31a3dd;
+  content: "";
+  width: 60%;
+  top: 50%;
+  right: -12%;
+  z-index: -1;
+}
+
+#last-circle.horizontal:before {
+  position: absolute;
+  display: block;
+  border-top: 1px solid #31a3dd;
+  content: "";
+  width: 55%;
+  top: 50%;
+  left: -8%;
+  z-index: -1;
+} */

package/dist/components/Timeline/index.tsx

@@ -0,0 +1,315 @@
+import React, { CSSProperties } from 'react'
+import classNames from 'classnames'
+import Image from '@components/Image'
+import Column from '@components/Column'
+import Row from '@components/Row'
+
+export interface Props {
+  id?: string
+  className?: string
+  isHorizontal?: boolean
+  items?: object[]
+  reverse?: boolean
+  textCenter?: boolean
+  useImages?: boolean
+  horizontalComponentClasses?: string
+  isSm?: boolean
+}
+
+const Timeline = ({
+  id,
+  className,
+  isHorizontal = false,
+  items,
+  reverse = false,
+  textCenter,
+  useImages = true,
+  horizontalComponentClasses,
+  isSm = false
+}: Props): JSX.Element => {
+  const classList = classNames(className, 'w-full list-none overflow-x-auto pb-4')
+  const ulClasses = classNames({
+    'flex-row none-reverse justify-between': !reverse && isHorizontal,
+    'flex-col none-reverse': !reverse && !isHorizontal,
+    'flex-row reverse justify-between': reverse && isHorizontal,
+    'flex-col reverse': reverse && !isHorizontal
+  }, className, 'timeline status-flow relative list-none pl-0 flex')
+
+  const liClasses = classNames({
+    'text-center': textCenter,
+    'items-center flex-col justify-between': !reverse && isHorizontal,
+    'flex-row none-reverse': !reverse && !isHorizontal,
+    'items-center flex-col-reverse': reverse && isHorizontal,
+    'flex-row-reverse': reverse && !isHorizontal
+  }, 'status-flow-item relative flex flex-auto flex-row leading-tight')
+
+  const circle = classNames({
+    'horizontal collapse': isHorizontal && isSm,
+    horizontal: isHorizontal && !isSm,
+    vertical: !isHorizontal
+  }, 'w-4 h-4 my-16 text-center mx-auto rounded-full border bg-black')
+
+  const circleVerticalBefore: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    top: '0%',
+    left: '49.9%',
+    zIndex: '-1'
+  }
+
+  const circleVerticalCollapseBefore: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    top: '0%',
+    left: '8.2%',
+    zIndex: '-1'
+  }
+
+  const lastCircleVerticalBefore: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    top: '0%',
+    left: '49.9%',
+    zIndex: '-1'
+  }
+
+  const lastCircleVerticalCollapseBefore: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    top: '0%',
+    left: '8.2%',
+    zIndex: '-1'
+  }
+
+  const circleVerticalAfter: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    bottom: '0%',
+    left: '49.9%',
+    zIndex: '-1'
+  }
+
+  const firstCircleVerticalAfter: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    bottom: '0%',
+    left: '49.9%',
+    zIndex: '-1'
+  }
+
+  const circleVerticalCollapseAfter: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    bottom: '0%',
+    left: '8.2%',
+    zIndex: '-1'
+  }
+
+  const firstCircleVerticalCollapseAfter: CSSProperties = {
+    position: 'absolute',
+    display: 'block',
+    borderLeft: '1px solid',
+    borderColor: 'text-primary',
+    content: '""',
+    height: '50%',
+    bottom: '0%',
+    left: '8.2%',
+    zIndex: '-1'
+  }
+
+  return (
+    <Column
+      sm={12}
+      md={12}
+      lg={12}
+      xl={12}
+      id={id}
+      className={classList}
+    >
+      <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 = circleVerticalCollapseBefore
+          } else if (circlePos === 'circle' && !isSm) {
+            verticalCircleStylesBefore = circleVerticalBefore
+          } else if (circlePos === 'last-circle' && isSm) {
+            verticalCircleStylesBefore = lastCircleVerticalCollapseBefore
+          } else if (circlePos === 'last-circle' && !isSm) {
+            verticalCircleStylesBefore = lastCircleVerticalBefore
+          }
+
+          let verticalCircleStylesAfter
+          if (circlePos === 'circle' && isSm) {
+            verticalCircleStylesAfter = circleVerticalCollapseAfter
+          } else if (circlePos === 'circle' && !isSm) {
+            verticalCircleStylesAfter = circleVerticalAfter
+          } else if (circlePos === 'first-circle' && isSm) {
+            verticalCircleStylesAfter = firstCircleVerticalCollapseAfter
+          } else if (circlePos === 'first-circle' && !isSm) {
+            verticalCircleStylesAfter = firstCircleVerticalAfter
+          }
+
+          let horizontalCircleStylesBefore
+          // if (circlePos === 'circle' && isSm){
+          //     horizontalCircleStylesBefore = circleHorizontalCollapseBefore
+          // } else if (circlePos === 'circle' && !isSm){
+          //     horizontalCircleStylesBefore = circleHorizontalBefore
+          // } else if (circlePos === 'first-circle' && isSm){
+          //     horizontalCircleStylesBefore = firstCircleHorizontalCollapseBefore
+          // } else if (circlePos === 'first-circle' && !isSm){
+          //     horizontalCircleStylesBefore = firstCircleHorizontalBefore
+          // }
+
+          let horizontalCircleStylesAfter
+          // if (circlePos === 'circle' && isSm){
+          //     horizontalCircleStylesAfter = circleHorizontalCollapseAfter
+          // } else if (circlePos === 'circle' && !isSm){
+          //     horizontalCircleStylesAfter = circleHorizontalAfter
+          // } else if (circlePos === 'first-circle' && isSm){
+          //     horizontalCircleStylesAfter = firstCircleHorizontalCollapseAfter
+          // } else if (circlePos === 'first-circle' && !isSm){
+          //     horizontalCircleStylesAfter = firstCircleHorizontalAfter
+          // }
+
+          const horizonalComponentClassList = classNames(horizontalComponentClasses, 'pt-12')
+          if (isHorizontal) {
+            return (
+              <Column
+                key={`horizontal_col_${i + 0}`}
+                id='timeline-item'
+                className={`${liClasses} py-4 mb-8`}
+              >
+                <Row className={horizontalComponentClasses}>
+                  {before && item.component}
+                </Row>
+                <Row>
+                  {useImages
+                    ? (
+                      <div
+                        id={circlePos}
+                        className={isHorizontal ? 'horizontal py-0 my-0' : 'vertical'}
+                      >
+                        <span style={horizontalCircleStylesBefore} />
+                        <Image {...item.centerImageProps} />
+                        <span style={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='text-center my-auto'
+                  >
+                    {before && item.component}
+                  </Column>}
+                <Column
+                  sm={2}
+                  md={2}
+                  lg={2}
+                  xl={2}
+                  id='circle-wrapper'
+                  className='my-auto'
+                >
+                  {useImages
+                    ? (
+                      <div
+                        id={circlePos}
+                        className={isSm ? 'vertical' : 'vertical'}
+                      >
+                        <span style={verticalCircleStylesBefore} />
+                        <Image {...item.centerImageProps} />
+                        <span style={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='text-center my-auto'
+                  >
+                    {item.component}
+                  </Column>}
+                {!isSm &&
+                  <Column
+                    sm={5}
+                    md={5}
+                    lg={5}
+                    xl={5}
+                    className='text-center my-auto'
+                  >
+                    {!before && item.component}
+                  </Column>}
+              </Row>
+            )
+          }
+        })}
+      </div>
+    </Column>
+  )
+}
+
+export default Timeline

package/dist/components/Tubestops/Tubestops.stories.tsx

@@ -0,0 +1,66 @@
+import React from 'react'
+import Tubestops from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof Tubestops> = {
+  title: 'Trepur Components/Other/Atoms/Tubestops',
+  component: Tubestops,
+  parameters: {},
+  argTypes: {
+    id: {
+      description: 'Defines the id of the component',
+      table: {
+        category: '',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    className: {
+      description: 'Defines any additional classes for the components',
+      table: {
+        category: '',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    isHorizontal: {
+      description: '',
+      table: {
+        category: ''
+      }
+    },
+    items: {
+      description: '',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    isHorizontal: false,
+    reverse: false,
+    items: [
+      {
+        title: 'This is a title',
+        subtitle: 'This is a subtitle'
+      },
+      {
+        title: 'This is a title',
+        subtitle: 'This is a subtitle'
+      },
+      {
+        title: 'This is a title',
+        subtitle: 'This is a subtitle'
+      }
+    ],
+    textCenter: true,
+    id: '',
+    className: ''
+  }
+}
+
+const Template: ComponentStory<typeof Tubestops> = (args) => <Tubestops {...args} />
+
+export const _Tubestops = Template.bind({})
+
+export default componentMeta

package/dist/components/Tubestops/index.css

@@ -0,0 +1,92 @@
+/* Vertical */
+.tubestop.flex-col.none-reverse .status-flow-item:not(:first-child):before {
+  @apply absolute;
+  @apply block;
+  
+  content: "";
+  width: 1px;
+  height: 100%;
+  left: 7px;
+  top: -100%;
+}
+
+.tubestop.flex-col.none-reverse .status-flow-item:not(:last-child):after {
+  @apply absolute;
+  @apply block;
+ 
+  content: "";
+  width: 1px;
+  height: 100%;
+  left: 7px;
+  top: 40%;
+}
+
+/* reverse */
+.tubestop.flex-col.reverse .status-flow-item:not(:first-child):before {
+  @apply absolute;
+  @apply block;
+
+  content: "";
+  width: 1px;
+  height: 100%;
+  right: 7px;
+  top: -100%;
+}
+
+.tubestop.flex-col.reverse .status-flow-item:not(:last-child):after {
+  @apply absolute;
+  @apply block;
+
+  content: "";
+  width: 1px;
+  height: 100%;
+  right: 7px;
+  top: 40%;
+}
+
+/* Horizontal */
+.tubestop.flex-row.none-reverse .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
+
+  content: "";
+  width: 100%;
+  height: 1px;
+  left: -50%;
+  bottom: 7px;
+}
+
+.tubestop.flex-row-reverse.none-reverse
+  .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
+
+  content: "";
+  width: 100%;
+  height: 1px;
+  right: -50%;
+  top: 7px;
+}
+
+/*reverse*/
+.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
+
+  content: "";
+  width: 100%;
+  height: 1px;
+  left: -50%;
+  bottom: 7px;
+}
+
+.tubestop.flex-row.reverse .status-flow-item:not(:first-child):after {
+  @apply absolute;
+  @apply block;
+
+  content: "";
+  width: 100%;
+  height: 1px;
+  right: -50%;
+  top: 7px;
+}

package/dist/components/Tubestops/index.tsx

@@ -0,0 +1,77 @@
+import React from 'react'
+import classNames from 'classnames'
+import './index.css'
+
+export interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+  isHorizontal?: boolean
+  items?: Array<{ title: string, subtitle: string }>
+  reverse?: boolean
+  textCenter?: boolean
+}
+
+const Tubestops: React.FC<Props> = ({
+  id,
+  className,
+  isHorizontal = false,
+  items = [],
+  reverse = false,
+  textCenter = false
+}) => {
+  const circle = 'w-4 h-4 rounded-full bg-black z-10'
+  const classList = classNames(className, 'w-full list-none')
+
+  const liClasses = classNames({
+    'text-center': textCenter,
+    'items-center flex-col-reverse justify-between': !reverse && isHorizontal,
+    'flex-row none-reverse': !reverse && !isHorizontal,
+    'items-center flex-col': reverse && isHorizontal,
+    'flex-row-reverse': reverse && !isHorizontal
+  }, 'mb-0 status-flow-item relative flex flex-auto flex-row leading-tight')
+
+  const ulClasses = classNames({
+    'flex-row none-reverse justify-between': !reverse && isHorizontal,
+    'flex-col none-reverse': !reverse && !isHorizontal,
+    'flex-row reverse justify-between': reverse && isHorizontal,
+    'flex-col reverse': reverse && !isHorizontal
+  }, 'tubestop status-flow relative list-none pl-0 flex')
+
+  const padding = classNames({
+    'pb-2': !reverse && isHorizontal,
+    'pl-4': !reverse && !isHorizontal,
+    'pt-2': reverse && isHorizontal,
+    'pr-4': reverse && !isHorizontal
+  })
+
+  return (
+    <div
+      id={id}
+      className={classList}
+    >
+      <ul className={ulClasses}>
+        {items?.map((item: { title: string, subtitle: string }, i: number) => {
+          const a = isHorizontal
+            ? i === 0
+              ? ''
+              : ''
+            : i === 0
+              ? ''
+              : 'my-12'
+          return (
+            <li
+              key={`tubestop_${i + 0}`}
+              className={`${liClasses} ${a}`}
+            >
+              <span className={circle} />
+              <div className={padding}>
+                <p>{`${item?.title}${i.toString()}`}</p>
+                <p><small>{item?.subtitle}</small></p>
+              </div>
+            </li>
+          )
+        })}
+      </ul>
+    </div>
+  )
+}
+
+export default Tubestops