trepur_components 1.0.2 → 1.0.3

package/dist/components/Card/index.tsx

@@ -1,162 +0,0 @@
-import React, { useState } from 'react'
-import classNames from 'classnames'
-import Button, { Props as buttonProps } from '@components/Button'
-import Video, { Props as videoProps } from '@components/Video'
-
-export interface Props {
-  id?: string
-  className?: string
-  title?: string
-  image?: string
-  subTitle?: string
-  description?: string
-  extraText?: string
-  hasCta?: boolean
-  imageBelowTitle?: boolean
-  titleLeft?: boolean
-  titleRight?: boolean
-  titleBold?: boolean
-  imageClass?: string
-  subTitleClass?: string
-  extraTextClass?: string
-  descriptionClass?: string
-  altText?: string
-  rounded?: boolean
-  bordered?: boolean
-  videoProps?: videoProps
-  onHover?: boolean
-  iconButtonProps?: buttonProps
-  cardButtonProps?: buttonProps
-  button2Props?: buttonProps
-}
-
-const Card: React.FC<Props> = ({
-  id,
-  className,
-  title,
-  image,
-  subTitle,
-  description,
-  extraText,
-  hasCta,
-  imageBelowTitle,
-  titleLeft = false,
-  titleRight = false,
-  titleBold = false,
-  imageClass,
-  subTitleClass,
-  extraTextClass,
-  descriptionClass,
-  altText,
-  rounded,
-  bordered,
-  videoProps,
-  onHover = false,
-  iconButtonProps,
-  cardButtonProps,
-  button2Props
-}: Props): JSX.Element => {
-  const [showHoverButtons, setShowHoverButtons] = useState(false)
-
-  const orderClass = classNames({ 'order-first': imageBelowTitle })
-  const btnClass = 'w-full p-3'
-  const border = classNames({ 'border border-grey border-opacity-100:': bordered })
-  const cardTitleFont = classNames({ 'font-bold': titleBold })
-  const cardTitlePosition = classNames({
-    'text-left': titleLeft,
-    'text-right': titleRight,
-    'text-center': !titleLeft && !titleRight
-  })
-  const roundedImage = classNames({ 'rounded-t-lg': rounded })
-  const roundedCard = classNames({ 'rounded-lg': rounded })
-  const contentWrapperClass = 'px-3 order-3'
-  const titleWrapperClass = classNames(orderClass, 'pt-3')
-
-  const cardTitleClasses = classNames({
-    [cardTitlePosition]: true
-  }, cardTitleFont, 'font-medium text-md text-grey')
-
-  const cardSubTitleClassList = classNames(subTitleClass, 'font-light text-sm text-grey')
-  const cardDescriptionClassList = classNames(descriptionClass, 'font-extraLight text-xs text-light-grey')
-  const classList = classNames(className, border, roundedCard, 'flex flex-col')
-
-  const imageClassList = classNames(roundedImage, imageClass, 'w-full object-cover h-full')
-
-  const cardExtraTextClassList = classNames({
-    'pb-4': hasCta === false
-  }, extraTextClass, 'w-full object-cover h-full font-extraLight text-xs text-light-grey')
-
-  const imageWrapperClassList = classNames({
-    'order-2': imageBelowTitle === true,
-    [roundedImage]: imageBelowTitle === false,
-    'order-1': imageBelowTitle === false
-  }, 'h-64 overflow-hidden object-cover')
-
-  const toggleHover = (isHovering: boolean): void => {
-    onHover && setShowHoverButtons(!!isHovering)
-  }
-
-  return (
-    <div
-      id={id}
-      className={classList}
-      onMouseEnter={() => toggleHover(true)}
-      onMouseLeave={() => toggleHover(false)}
-    >
-      <div className='card-content flex flex-1 flex-col'>
-        {videoProps?.mp4File !== undefined || videoProps?.webmFile !== undefined || videoProps?.ogvFile !== undefined
-          ? (
-            <div className={imageWrapperClassList}>
-              <Video {...videoProps} />
-            </div>
-            )
-          : (image !== undefined &&
-            <div className={imageWrapperClassList}>
-              <img className={imageClassList} src={image} alt={altText} />
-            </div>)}
-        {!showHoverButtons
-          ? (
-            <>
-              <div className={imageBelowTitle !== undefined ? 'order-1' : 'order-3'}>
-                {title !== undefined &&
-                  <div className={titleWrapperClass}>
-                    <h3 className={cardTitleClasses}>{title}</h3>
-                  </div>}
-              </div>
-              <div className={contentWrapperClass}>
-                {subTitle !== undefined &&
-                  <h4 className={cardSubTitleClassList}>
-                    {subTitle}
-                  </h4>}
-                {description !== undefined &&
-                  <p className={cardDescriptionClassList}>
-                    {description}
-                  </p>}
-                {extraText !== undefined &&
-                  <p className={cardExtraTextClassList}>
-                    {extraText}
-                  </p>}
-              </div>
-            </>
-            )
-          : (
-            <div className='flex p-2 order-last h-24'>
-              <Button {...iconButtonProps}>
-                {iconButtonProps?.children}
-              </Button>
-              <Button {...button2Props}>
-                {button2Props?.children}
-              </Button>
-            </div>)}
-      </div>
-      {(cardButtonProps != null) &&
-        <div className={btnClass}>
-          <Button {...cardButtonProps}>
-            {cardButtonProps.children}
-          </Button>
-        </div>}
-    </div>
-  )
-}
-
-export default Card

package/dist/components/CardWithTopImage/CardWithTopImage.stories.tsx

@@ -1,48 +0,0 @@
-import React from 'react'
-import CardWithTopImage from './index'
-import logo from '@assets/images/primary-logo.png'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import { idAndClassName } from '@utils/controls'
-
-const componentMeta: ComponentMeta<typeof CardWithTopImage> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Card With Top Image',
-  component: CardWithTopImage,
-  argTypes: {
-    ...idAndClassName,
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    imageProps: {
-      type: { name: 'other', value: 'object' },
-      description: 'The props to pass to the image on the component',
-      table: {
-        type: {
-          summary: 'object'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    imageProps: {
-      image: logo,
-      roundedFull: true,
-      width: 4,
-      height: 4
-    },
-    children: [<p key='1'>This is a child</p>, <p key='2'>This is another child</p>]
-  }
-}
-
-const Template: ComponentStory<typeof CardWithTopImage> = (args) => <CardWithTopImage {...args} />
-
-export const _CardWithTopImage = Template.bind({})
-
-export default componentMeta

package/dist/components/CardWithTopImage/index.tsx

@@ -1,40 +0,0 @@
-import React from 'react'
-import Image, { Props as imageProps } from '@components/Image'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  children?: any
-  imageProps?: imageProps
-}
-
-const CardWithTopImage = ({
-  id,
-  className,
-  children,
-  imageProps
-}: Props): JSX.Element => {
-  const wrapperClassList = classNames('rounded-full mx-auto max-w-max bg-white p-4')
-
-  const contentClassList = 'pt-12 px-4 h-auto pb-16 -mt-12 bg-white'
-
-  return (
-    <div
-      style={{
-        filter: 'drop-shadow(0 4px 8px rgb(154, 154, 154))'
-      }}
-      id={id}
-      className={className}
-    >
-      <div className={wrapperClassList}>
-        <Image {...imageProps} />
-      </div>
-      <div className={contentClassList}>
-        {children}
-      </div>
-    </div>
-  )
-}
-
-export default CardWithTopImage

package/dist/components/Carousel/Carousel.stories.tsx

@@ -1,369 +0,0 @@
-import React from 'react'
-import Carousel from './index'
-import { idAndClassName } from '@utils/controls'
-import Card from '@components/Card'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-import logo from '@assets/images/primary-logo.png'
-
-const slides = [
-  <Card
-    key='card_1'
-    className='keen-slider__slide'
-    image={logo}
-    subTitle='This is a subtitle'
-    description='This is a description paragraph'
-    extraText='This is another paragraph'
-    rounded
-    bordered
-  />,
-  <Card
-    key='card_2'
-    className='keen-slider__slide'
-    image={logo}
-    subTitle='This is a subtitle'
-    description='This is a description paragraph'
-    extraText='This is another paragraph'
-    rounded
-    bordered
-  />,
-  <Card
-    key='card_3'
-    className='keen-slider__slide'
-    image={logo}
-    subTitle='This is a subtitle'
-    description='This is a description paragraph'
-    extraText='This is another paragraph'
-    rounded
-    bordered
-  />,
-  <Card
-    key='card_4'
-    className='keen-slider__slide'
-    image={logo}
-    subTitle='This is a subtitle'
-    description='This is a description paragraph'
-    extraText='This is another paragraph'
-    rounded
-    bordered
-  />
-]
-
-const componentMeta: ComponentMeta<typeof Carousel> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Carousel',
-  component: Carousel,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    breakpoints: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    defaultAnimation: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    drag: {
-      type: { name: 'boolean', required: false },
-      description: 'Can the carousel be dragged or not',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragSpeed: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    initial: {
-      type: { name: 'number', required: false },
-      description: 'The slide to begin on',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    loop: {
-      type: { name: 'boolean', required: false },
-      description: 'loop the end back to the start',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    mode: {
-      type: { name: 'string', required: false },
-      description: 'snap, free or snap-free',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    range: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    renderMode: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    rtl: {
-      type: { name: 'boolean', required: false },
-      description: 'to display right to left',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    rubberband: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    slides: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    vertical: {
-      type: { name: 'boolean', required: false },
-      description: 'displays the slider vertically',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    animationStarted: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    animationStopped: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    animationEnded: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    destroyed: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    detailsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragStarted: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragChecked: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    dragEnded: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    beforeOptionsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    optionsChanged: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    updated: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    perView: {
-      type: { name: 'number', required: false },
-      description: 'The number of slides to show at a time',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    spacing: {
-      type: { name: 'number', required: false },
-      description: 'The spacing left and right of each slide',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    number: {
-      type: { name: 'number', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'number' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    origin: {
-      type: { name: 'boolean', required: false },
-      description: '',
-      table: {
-        category: '',
-        subcategory: '',
-        type: { summary: 'boolean' },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    loop: true,
-    drag: true,
-    slides,
-    spacing: 16,
-    perView: 4,
-    arrows: {
-      visible: true
-    },
-    dots: {
-      visible: true,
-      colours: 'bg-primary',
-      activeColours: 'bg-secondary'
-    }
-  }
-}
-
-const Template: ComponentStory<typeof Carousel> = (args) => <Carousel {...args} />
-
-export const _Carousel = Template.bind({})
-
-export default componentMeta