trepur_components 1.0.1 → 1.0.2

package/dist/components/BreadcrumbsItem/index.tsx

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

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

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

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

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