trepur_components 1.0.0 → 1.0.1

package/dist/components/BreadcrumbsItem/index.tsx

@@ -1,151 +0,0 @@
-import React, { useState } from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  name: string
-  link: string
-  type?: string
-  firstItem?: boolean
-  href?: string
-}
-
-const BreadcrumbsItem = ({
-  id,
-  className,
-  name,
-  link,
-  href,
-  type,
-  firstItem
-}: Props): JSX.Element => {
-  const [isHovering, setIsHovering] = useState(false)
-  const topArrowClasses = 'top-0'
-  const bottomArrowClasses = 'bottom-0'
-  const textClassList = 'text-center pt-1'
-  const liClassList = 'list-none'
-
-  const classList = classNames(className, 'item')
-
-  const itemClassList = classNames({
-    'hover:underline': type === 'link',
-    'mb-0': isHovering
-  }, 'bc-item relative px-4 h-8')
-
-  const backArrowsClasses = 'absolute w-0 h-0 bg-transparent border-l-transparent'
-  const frontArrowClasses = 'absolute top-0 w-0 h-0 border-t'
-
-  const frontArrow = (
-    <span
-      style={{
-        borderTop: '17px solid transparent',
-        borderBottom: '15px solid transparent',
-        borderLeft: '16px solid',
-        right: '-16px'
-      }}
-      className={frontArrowClasses}
-    />
-  )
-
-  const backArrows = (
-    <>
-      <span
-        style={{
-          borderTop: '17px solid',
-          borderBottom: '18px solid transparent',
-          borderLeft: '17px solid transparent',
-          left: '-17px',
-          // '-webkit-transform': 'scaleY(-1)',
-          transform: 'scaleY(-1)'
-        }}
-        className={`${backArrowsClasses} ${bottomArrowClasses}`}
-      />
-      <span
-        style={{
-          borderTop: '18px solid',
-          borderBottom: '17px solid transparent',
-          borderLeft: '17px solid transparent',
-          left: '-17px'
-        }}
-        className={`${backArrowsClasses} ${topArrowClasses}`}
-      />
-    </>
-  )
-
-  const renderWithFrontArrow = (
-    <div className={itemClassList}>
-      <p className={textClassList}>
-        {name}
-        {frontArrow}
-      </p>
-    </div>
-  )
-
-  const renderWithBackArrows = (
-    <div className={itemClassList}>
-      <p className={textClassList}>
-        {backArrows}
-        {name}
-        {frontArrow}
-      </p>
-    </div>
-  )
-
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      {type === 'link'
-        ? (
-            firstItem === true
-              ? (
-                <a
-                  onMouseOver={() => setIsHovering(true)}
-                  onMouseOut={() => setIsHovering(false)}
-                  href={href}
-                >
-                  <li className={liClassList}>
-                    {renderWithFrontArrow}
-                  </li>
-                </a>
-                )
-              : (
-                <a
-                  onMouseOver={() => setIsHovering(true)}
-                  onMouseOut={() => setIsHovering(false)}
-                  href={href}
-                >
-                  <li className={liClassList}>
-                    {renderWithBackArrows}
-                  </li>
-                </a>
-                )
-          )
-        : (
-            firstItem === true
-              ? (
-                <li
-                  className={liClassList}
-                  onMouseOver={() => setIsHovering(true)}
-                  onMouseOut={() => setIsHovering(false)}
-                >
-                  {renderWithFrontArrow}
-                </li>
-                )
-              : (
-                <li
-                  className={liClassList}
-                  onMouseOver={() => setIsHovering(true)}
-                  onMouseOut={() => setIsHovering(false)}
-                >
-                  {renderWithBackArrows}
-                </li>
-                )
-          )}
-    </div>
-  )
-}
-
-export default BreadcrumbsItem

package/dist/components/Button/button.stories.tsx

@@ -1,148 +0,0 @@
-import React from 'react'
-import Button from './index'
-import { action } from '@storybook/addon-actions'
-import { idAndClassName } from '@utils/controls'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Button> = {
-  title: 'Trepur Components/Rupert Bennett/Atoms/Button',
-  component: Button,
-  parameters: {
-    docs: {
-      description: {
-        component: 'A Button which can either be internal, external or social as well as a standard design or a slide design.'
-      }
-    }
-  },
-  argTypes: {
-    ...idAndClassName,
-    onClick: {
-      type: { name: 'function', required: false },
-      description: 'The action to perform when clicking on the component',
-      action: 'onClick',
-      table: {
-        type: {
-          summary: 'function'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    hoverText: {
-      type: {
-        name: 'string',
-        required: false
-      },
-      description: 'The text to display when hovering on the component',
-      table: {
-        type: {
-          summary: 'string'
-        },
-        defaultValue: {
-          summary: 'undefined'
-        }
-      }
-    },
-    variant: {
-      type: {
-        name: 'string', required: false
-      },
-      options: ['primary', 'secondary'],
-      description: 'The variant of button to render',
-      table: {
-        type: {
-          summary: 'primary'
-        },
-        defaultValue: {
-          summary: 'primary'
-        }
-      },
-      defaultValue: 'primary',
-      control: {
-        type: 'radio'
-      }
-    },
-    type: {
-      type: {
-        name: 'string',
-        required: false
-      },
-      options: ['default', 'social', 'icon'],
-      description: 'The type of button to render',
-      table: {
-        type: {
-          summary: 'default'
-        },
-        defaultValue: {
-          summary: 'default'
-        }
-      },
-      defaultValue: 'default',
-      control: { type: 'radio' }
-    },
-    href: {
-      type: { name: 'string', required: false },
-      description: 'The link attached to the component',
-      table: {
-        type: {
-          summary: 'default'
-        },
-        defaultValue: {
-          summary: 'undefined'
-        }
-      }
-    },
-    rounded: {
-      type: {
-        name: 'boolean',
-        required: false
-      },
-      description: 'rounds the borders when true',
-      defaultValue: 'true'
-    },
-    disabled: {
-      type: {
-        name: 'boolean',
-        required: false
-      },
-      description: 'Can the carousel be dragged or not'
-    },
-    isLoading: {
-      type: {
-        name: 'boolean',
-        required: false
-      },
-      table: {
-        defaultValue: {
-          summary: 'false'
-        }
-      },
-      description: 'Toggles the loading state of the compnent'
-    },
-    openInNewTab: {
-      type: { name: 'boolean', required: false },
-      description: 'Opens the link in a new tab when set to true',
-      defaultValue: 'false'
-    },
-    children: {
-      type: { name: 'other', value: 'string | React.ReactNode' },
-      description: 'The child elements to show in the component',
-      table: {
-        type: {
-          summary: 'Array'
-        },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    children: 'This is a button',
-    rounded: true,
-    onClick: action('button clicked')
-  }
-}
-
-const Template: ComponentStory<typeof Button> = (args) => <Button {...args} />
-
-export const _Button = Template.bind({})
-
-export default componentMeta

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