trepur_components 1.0.2 → 1.0.4

package/dist/components/Button/index.tsx

@@ -1,91 +0,0 @@
-import React from 'react'
-import Icon from '@components/Icon'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  onClick?: React.MouseEventHandler
-  hoverText?: string
-  variant?: 'primary' | 'secondary'
-  type?: 'social' | 'icon' | 'default'
-  href?: string
-  rounded?: boolean
-  disabled?: boolean
-  isLoading?: boolean
-  openInNewTab?: boolean
-  children?: any
-}
-
-const Button = ({
-  id,
-  className,
-  onClick,
-  hoverText,
-  variant = 'primary',
-  type = 'default',
-  href,
-  rounded = true,
-  disabled = false,
-  isLoading = false,
-  openInNewTab = false,
-  children
-}: Props): JSX.Element => {
-  const padding = classNames({
-    'px-1 py-1': type === 'social',
-    'px-3': type === 'icon',
-    'px-8': type !== 'social' && type !== 'icon'
-  }, 'py-2')
-
-  const loadingClasses = classNames({
-    invisible: !isLoading
-  }, 'absolute left-2/4 top-1/4 -ml-2')
-
-  const classList = classNames({
-    'bg-primary text-white border-white': variant === 'primary',
-    'hover:bg-white hover:text-primary hover:border-primary': !disabled && variant === 'primary',
-    'bg-white text-primary border-primary': variant === 'secondary',
-    'hover:bg-primary hover:text-white hover:border-primary': !disabled && variant === 'secondary',
-    'opacity-50': disabled,
-    'rounded-lg': rounded,
-    'rounded-none': !rounded
-  }, className, padding, 'group border-2 transition-backgroundColor duration-500 transform')
-
-  const loadingIcon = (
-    <Icon
-      size={1}
-      type='spinner'
-      animation='pulse'
-      colour='white'
-      bgColour='primary'
-    />
-  )
-
-  return (
-    <a
-      className='group'
-      {...(openInNewTab && { target: '_blank' })}
-      href={href}
-    >
-      <button
-        id={id}
-        className={classList}
-        aria-busy={isLoading}
-        {...((onClick != null) &&
-                    { onClick })}
-        {...(disabled &&
-                    { disabled })}
-      >
-        <div className={classNames({ invisible: isLoading })}>
-          {children}
-        </div>
-        {isLoading &&
-          <div className={loadingClasses}>
-            {loadingIcon}
-          </div>}
-      </button>
-    </a>
-  )
-}
-
-export default Button

package/dist/components/Card/Card.stories.tsx

@@ -1,150 +0,0 @@
-import React from 'react'
-import Card from './index'
-import { idAndClassName } from '@utils/controls'
-import Icon from '@components/Icon'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Card> = {
-  title: 'Trepur Components/Rupert Bennett/Organisms/Card',
-  component: Card,
-  argTypes: {
-    ...idAndClassName,
-    title: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    image: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    subTitle: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    description: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    extraText: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    imageBelowTitle: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    bordered: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    rounded: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    hasCta: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    titleLeft: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    titleRight: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    },
-    titleBold: {
-      description: '',
-      table: {
-        category: 'Card'
-      }
-    }
-  },
-  args: {
-    subTitle: 'This is a subtitle',
-    description: 'This is a description paragraph',
-    extraText: 'This is another paragraph',
-    rounded: true,
-    bordered: true,
-    hasCta: true,
-    iconButtonProps: {
-      type: 'icon',
-      href: '/',
-      className: 'mt-8',
-      children: <Icon
-        type='heart'
-        hollow={false}
-                />
-    },
-    cardButtonProps: {
-      children: (
-        <div className='flex'>
-          <Icon type='heart' />
-          <p>buttonText</p>
-          <Icon type='heart' />
-        </div>
-      ),
-      disabled: false,
-      hoverText: 'buttonHoverText',
-      href: 'buttonUrl',
-      rounded: true
-    },
-    button2Props: {
-      className: 'ml-2 w-full mt-8',
-      children: 'Add to basket',
-      rounded: false,
-      disabled: false
-    }
-  }
-}
-
-const Template: ComponentStory<typeof Card> = (args) => <Card {...args} />
-
-export const _ImageCard = Template.bind({})
-_ImageCard.args = {
-  title: 'This is a title',
-  image: 'https://picsum.photos/500/300'
-}
-
-export const _VideoCard = Template.bind({})
-_VideoCard.args = {
-  title: 'This is a title',
-  videoProps: {
-    mp4File: '/',
-    withControls: true,
-    autoPlay: true
-  }
-}
-
-export const _ProductCard = Template.bind({})
-_ProductCard.args = {
-  image: 'https://picsum.photos/500/300',
-  subTitle: 'Product name',
-  description: 'Product description',
-  extraText: '£123.45',
-  onHover: true
-}
-
-export default componentMeta

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