trepur_components 0.4.7 → 1.0.0

package/dist/components/HamburgerIcon/index.tsx

@@ -0,0 +1,65 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+import Button from '@components/Button'
+
+interface Props extends Partial<Pick<HTMLElement, 'className' | 'id'>> {
+  opened?: boolean
+  onClick?: React.MouseEventHandler
+}
+
+const HamburgerIcon = ({
+  id,
+  className,
+  onClick
+}: Props): JSX.Element => {
+  const [opened, setOpened] = useState(false)
+  const lineOneClassList = classNames({
+    'origin-top-left rotate-45 translate-x-1 -translate-y-0.5': opened
+  }, 'origin-top-left transition-transform duration-200 ease-linear')
+
+  const lineTwoClassList = classNames({
+    'opacity-0': opened
+  }, 'opacity-100 transition-opacity duration-200 ease-linear')
+
+  const lineThreeClassList = classNames({
+    'origin-bottom-left -rotate-45 translate-x-1 translate-y-px': opened
+  }, 'origin-bottom-left transition-transform duration-200 ease-linear')
+
+  const toggleOpened = (e: any): void => {
+    setOpened(!opened)
+    onClick?.(e)
+  }
+
+  return (
+    <Button
+      id={id}
+      className={className}
+      onClick={(e) => toggleOpened(e)}
+      variant='primary'
+      type='icon'
+    >
+      <svg
+        className='mx-auto overflow-visible fill-white group-hover:fill-primary transition-backgroundColor duration-500 transform'
+        width='24'
+        height='24'
+        viewBox='0 0 24 15'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <path
+          className={lineOneClassList}
+          d='M0 1.5C0 0.947715 0.447715 0.5 1 0.5H21C21.5523 0.5 22 0.947715 22 1.5C22 2.05228 21.5523 2.5 21 2.5H1C0.447716 2.5 0 2.05228 0 1.5Z'
+        />
+        <path
+          className={lineTwoClassList}
+          d='M0 7.5C0 6.94772 0.447715 6.5 1 6.5H21C21.5523 6.5 22 6.94772 22 7.5C22 8.05228 21.5523 8.5 21 8.5H1C0.447716 8.5 0 8.05228 0 7.5Z'
+        />
+        <path
+          className={lineThreeClassList}
+          d='M0 13.5C0 12.9477 0.447715 12.5 1 12.5H21C21.5523 12.5 22 12.9477 22 13.5C22 14.0523 21.5523 14.5 21 14.5H1C0.447716 14.5 0 14.0523 0 13.5Z'
+        />
+      </svg>
+    </Button>
+  )
+}
+
+export default HamburgerIcon

package/dist/components/Icon/Icon.stories.tsx

@@ -0,0 +1,102 @@
+import React from 'react'
+import Icon from './index'
+import { idAndClassName } from '@utils/controls'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof Icon> = {
+  title: 'Trepur Components/Rupert Bennett/Atoms/Icon',
+  component: Icon,
+  argTypes: {
+    ...idAndClassName,
+    type: {
+      options: ['heart', 'arrow-up', 'arrow-down', 'multiply', 'burger', 'bars'],
+      type: { name: 'string', required: false },
+      description: 'The name of the icon to display in the component',
+      table: {
+        type: { summary: 'string' }
+      },
+      control: 'select'
+    },
+    size: {
+      type: { name: 'number', required: false },
+      description: 'The size of the icon to show in the component',
+      table: {
+        type: { summary: 'number' }
+      }
+    },
+    animation: {
+      type: { name: 'string', required: false },
+      options: ['none', 'pulse', 'spin', 'beat'],
+      description: 'Type of annimation to apply to the component',
+      table: {
+        type: { summary: 'string' }
+      },
+      control: 'select'
+    },
+    reverseSpin: {
+      type: { name: 'boolean', required: false },
+      description: 'To reverse the animation on the component',
+      table: {
+        type: { summary: 'boolean' }
+      },
+      defaultValue: 'false'
+    },
+    hollow: {
+      type: { name: 'boolean', required: false },
+      description: 'To render a hollow version of the icon in component',
+      table: {
+        type: { summary: 'boolean' }
+      },
+      defaultValue: 'false'
+    },
+    colour: {
+      type: { name: 'string', required: false },
+      options: ['primary', 'secondary', 'white', 'black', 'gold'],
+      description: 'The font colour of the component',
+      table: {
+        type: { summary: 'string' }
+      },
+      defaultValue: 'primary',
+      control: 'select'
+    },
+    bgColour: {
+      type: { name: 'string', required: false },
+      options: ['primary', 'secondary', 'white', 'black', 'gold'],
+      description: 'The background colour of the component',
+      table: {
+        type: { summary: 'string' }
+      },
+      defaultValue: 'secondary',
+      control: 'select'
+    },
+    rounded: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the component to a circle shape',
+      table: {
+        type: { summary: 'boolean' }
+      },
+      defaultValue: 'false'
+    },
+    brand: {
+      type: { name: 'boolean', required: false },
+      description: 'Set to true if the icon type to render is a brand image',
+      table: {
+        type: { summary: 'boolean' }
+      },
+      defaultValue: 'false'
+    }
+  },
+  args: {
+    type: 'heart',
+    size: 3,
+    animation: 'none',
+    hoverBgColour: 'primary',
+    hoverColour: 'secondary'
+  }
+}
+
+const Template: ComponentStory<typeof Icon> = (args) => <Icon {...args} />
+
+export const _Icon = Template.bind({})
+
+export default componentMeta

package/dist/components/Icon/index.tsx

@@ -0,0 +1,112 @@
+import React from 'react'
+import classNames from 'classnames'
+import { Colours } from '@utils/controls'
+
+export interface Props {
+  id?: string
+  className?: string
+  type: string
+  size?: number
+  animation?: 'pulse' | 'none'
+  reverseSpin?: boolean
+  hollow?: boolean
+  colour?: Colours
+  bgColour?: Colours
+  hoverColour?: Colours
+  hoverBgColour?: Colours
+  rounded?: boolean
+  brand?: boolean
+}
+
+const Icon = ({
+  id,
+  className,
+  type,
+  size = 1,
+  animation = 'none',
+  reverseSpin = false,
+  hollow = false,
+  colour = 'primary',
+  bgColour = 'secondary',
+  hoverColour = 'primary',
+  hoverBgColour = 'secondary',
+  rounded = false,
+  brand = false
+}: Props): JSX.Element => {
+  const fontColour: { [key in Colours]: string } = {
+    primary: 'text-primary',
+    secondary: 'text-secondary',
+    white: 'text-white',
+    black: 'text-black',
+    gold: 'text-gold'
+  }
+
+  const backgroundColour: { [key in Colours]: string } = {
+    primary: 'bg-primary',
+    secondary: 'bg-secondary',
+    white: 'bg-white',
+    black: 'bg-black',
+    gold: 'bg-gold'
+  }
+
+  const hoverFontColour: { [key in Colours]: string } = {
+    primary: 'group-hover:text-primary',
+    secondary: 'group-hover:text-secondary',
+    white: 'group-hover:text-white',
+    black: 'group-hover:text-black',
+    gold: 'group-hover:text-gold'
+  }
+
+  const hoverBackgroundColour: { [key in Colours]: string } = {
+    primary: 'group-hover:bg-primary',
+    secondary: 'group-hover:bg-secondary',
+    white: 'group-hover:bg-white',
+    black: 'group-hover:bg-black',
+    gold: 'group-hover:bg-gold'
+  }
+
+  const wrapperClassList = classNames({
+    'w-6 h-6': size === 1,
+    'w-10 h-10': size === 2,
+    'w-14 h-14': size === 3,
+    'w-20 h-20': size === 4,
+    'w-24 h-24': size === 5,
+    'w-28 h-28': size === 6,
+    'w-32 h-32': size === 7,
+    'w-36 h-36': size === 8,
+    'w-40 h-40': size === 9,
+    'w-44 h-44': size === 10,
+    'rounded-full': rounded
+  },
+  className,
+  backgroundColour[bgColour],
+  fontColour[colour],
+  hoverBackgroundColour[hoverBgColour],
+  hoverFontColour[hoverColour],
+  'flex transition-backgroundColor duration-500 transform'
+  )
+
+  const classList = classNames({
+    'fa-brands': brand,
+    [`fa-${size}x`]: size,
+    [`fa-${animation}`]: animation,
+    'fa-spin-reverse': reverseSpin,
+    'fa-regular': hollow
+  }, `fa fa-${type} mx-auto my-auto`)
+
+  return (
+    <div
+      id={id}
+      className={wrapperClassList}
+    >
+      <span
+        className={classList}
+        role='img'
+        aria-hidden='true'
+        aria-label={type}
+      />
+    </div>
+  )
+}
+
+export default Icon

package/dist/components/Image/Image.stories.tsx

@@ -0,0 +1,88 @@
+import React from 'react'
+import Image from '.'
+import { idAndClassName } from '@utils/controls'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import logo from '@assets/images/primary-logo.png'
+
+const componentMeta: ComponentMeta<typeof Image> = {
+  title: 'Trepur Components/Rupert Bennett/Atoms/Image',
+  component: Image,
+  argTypes: {
+    ...idAndClassName,
+    image: {
+      type: { name: 'string', required: false },
+      description: 'The image to display on the component',
+      table: {
+        type: { summary: 'default' }
+      }
+    },
+    altText: {
+      type: { name: 'string', required: false },
+      description: 'The accessibility alt text for the image on the component',
+      table: {
+        type: { summary: 'default' }
+      }
+    },
+    title: {
+      type: { name: 'string', required: false },
+      description: 'The accessibility title for the image on the component',
+      table: {
+        type: { summary: 'default' }
+      }
+    },
+    rounded: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the corners of the component to rounded',
+      table: {
+        type: { summary: 'boolean' }
+      }
+    },
+    roundedFull: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the component to a circle shape',
+      table: {
+        type: { summary: 'boolean' }
+      }
+    },
+    height: {
+      type: { name: 'number', required: false },
+      description: 'Defines the height of the component',
+      table: {
+        type: { summary: 'number' }
+      }
+    },
+    width: {
+      type: { name: 'number', required: false },
+      description: 'Defines the width of the component',
+      table: {
+        type: { summary: 'number' }
+      }
+    },
+    overlayText: {
+      type: { name: 'string', required: false },
+      description: 'The text to show when hovering over the component',
+      table: {
+        type: { summary: 'default' }
+      }
+    },
+    centerAligned: {
+      type: { name: 'boolean', required: false },
+      description: 'Sets the component to the center',
+      table: {
+        type: { summary: 'boolean' }
+      }
+    }
+  },
+  args: {
+    image: logo,
+    height: 8,
+    width: 8,
+    overlayText: 'logo'
+  }
+}
+
+const Template: ComponentStory<typeof Image> = (args) => <Image {...args} />
+
+export const _Image = Template.bind({})
+
+export default componentMeta

package/dist/components/Image/index.tsx

@@ -0,0 +1,113 @@
+import React, { useState } from 'react'
+import classNames from 'classnames'
+
+export interface Props {
+  id?: string
+  className?: string
+  image?: string
+  altText?: string
+  title?: string
+  rounded?: boolean
+  roundedFull?: boolean
+  height?: number
+  width?: number
+  overlayText?: string
+  centerAligned?: boolean
+}
+
+const Image = ({
+  id,
+  className,
+  image,
+  altText,
+  title,
+  rounded = false,
+  roundedFull = false,
+  height = 8,
+  width = 8,
+  overlayText,
+  centerAligned = false
+}: Props): JSX.Element => {
+  const [isHovering, setIsHovering] = useState(false)
+  const opacity = classNames({
+    'opacity-80': isHovering,
+    'opacity-0': !isHovering
+  })
+
+  const widthClassList = classNames({
+    'w-6': width === 1,
+    'w-10': width === 2,
+    'w-14': width === 3,
+    'w-16': width === 4,
+    'w-20': width === 5,
+    'w-24': width === 6,
+    'w-28': width === 7,
+    'w-32': width === 8,
+    'w-36': width === 9,
+    'w-40': width === 10,
+    'w-44': width === 11,
+    'w-full': (width === undefined) || (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(width))
+  })
+
+  const heightClassList = classNames({
+    'h-6': height === 1,
+    'h-10': height === 2,
+    'h-14': height === 3,
+    'h-16': height === 4,
+    'h-20': height === 5,
+    'h-24': height === 6,
+    'h-28': height === 7,
+    'h-32': height === 8,
+    'h-36': height === 9,
+    'h-40': height === 10,
+    'h-44': height === 11,
+    'h-full': (height === undefined) || (![1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].includes(height))
+  })
+
+  const imageClassList = classNames({
+    'rounded-2xl': rounded,
+    'rounded-full': roundedFull,
+    'mx-auto': centerAligned
+  }, className, widthClassList, heightClassList)
+
+  const overlayClassList = classNames(
+    widthClassList,
+    heightClassList,
+    opacity,
+    'absolute z-10 transition-opacity duration-700 bg-white'
+  )
+
+  const overlayTextWrapperClassList = classNames(
+    widthClassList,
+    heightClassList,
+    opacity,
+    'flex absolute z-20 transition-opacity duration-700'
+  )
+
+  const overlayTextClassList = 'm-auto text-center text-primary'
+
+  return (
+    <>
+      {overlayText !== undefined &&
+        <>
+          <div className={overlayClassList} />
+          <div
+            className={overlayTextWrapperClassList}
+            onMouseEnter={() => setIsHovering(true)}
+            onMouseLeave={() => setIsHovering(false)}
+          >
+            <p className={overlayTextClassList}>{overlayText}</p>
+          </div>
+        </>}
+      <img
+        id={id}
+        className={imageClassList}
+        src={image}
+        {...(altText !== undefined && { alt: altText })}
+        {...(title !== undefined && { title })}
+      />
+    </>
+  )
+}
+
+export default Image

package/dist/components/ImageLink/ImageLink.stories.tsx

@@ -0,0 +1,60 @@
+import React from 'react'
+import { idAndClassName } from '@utils/controls'
+import Column from '@components/Column'
+import ImageLink from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const componentMeta: ComponentMeta<typeof ImageLink> = {
+  title: 'Trepur Components/Other/Organisms/Image Link',
+  component: ImageLink,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+    title: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    },
+    image: {
+      description: '',
+      control: 'text',
+      table: {
+        category: ''
+      }
+    }
+  },
+  args: {
+    image: 'https://picsum.photos/400/400',
+    link: '/'
+  }
+}
+
+const Template: ComponentStory<typeof ImageLink> = (args) => <Column sm={3} md={3}><ImageLink {...args} /></Column>
+
+export const _ImageLink = Template.bind({})
+_ImageLink.args = {}
+
+export const _ImageLinkWithTitle = Template.bind({})
+_ImageLinkWithTitle.args = {
+  title: 'Title'
+}
+
+export const _ImageLinkWithButton = Template.bind({})
+_ImageLinkWithButton.args = {
+  buttonProps: {
+    children: 'Button 1'
+  }
+}
+
+export const _ImageLinkRounded = Template.bind({})
+_ImageLinkRounded.args = {
+  title: 'Title',
+  buttonProps: {
+    children: 'Button 1'
+  },
+  rounded: true
+}
+
+export default componentMeta

package/dist/components/ImageLink/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react'
+import Button, { Props as buttonProps } from '@components/Button'
+import classNames from 'classnames'
+
+export interface Props {
+  id?: string
+  className?: string
+  image?: string
+  altText?: string
+  title?: string
+  link?: string
+  rounded?: boolean
+  openInNewTab?: boolean
+  buttonProps?: buttonProps
+}
+const ImageLink = ({
+  id,
+  className,
+  image,
+  altText,
+  title,
+  link,
+  rounded,
+  openInNewTab,
+  buttonProps
+}: Props): JSX.Element => {
+  const classList = classNames(className, 'cursor-pointer lg:mx-3 md:mx-1 mx-1 lg:mb-5 md:mb-2 mb-2 hover:opacity-50 overflow-hidden text-center')
+
+  const roundedClass = classNames({
+    'rounded-full': rounded
+  })
+
+  return (
+    <a
+      id={id}
+      href={link}
+      {...(openInNewTab !== false && { target: 'blank' })}
+    >
+      <div className={roundedClass + ' ' + classList + ' relative overflow-hidden'}>
+        <img
+          src={image}
+          alt={altText}
+          className='object-cover w-full h-full'
+        />
+        {title !== undefined &&
+          <h1
+            className='absolute bg-black text-white py-2 mt-4 top-0 inset-x-0 text-center'
+          >
+            {title}
+          </h1>}
+        {buttonProps?.children !== undefined &&
+          <Button
+            className='absolute mx-8 mb-4 bottom-0 inset-x-0 text-center'
+          >
+            {buttonProps.children}
+          </Button>}
+      </div>
+    </a>
+  )
+}
+
+export default ImageLink

package/dist/components/ImageLinkList/ImageLinkList.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react'
+import { idAndClassName } from '@utils/controls'
+import ImageLinkList from './index'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+
+const getLinks = (): object => {
+  return new Array(16).fill(null).map(() => {
+    return {
+      image: 'https://picsum.photos/400/400',
+      title: 'Hi',
+      ctaText: 'button'
+    }
+  })
+}
+
+const componentMeta: ComponentMeta<typeof ImageLinkList> = {
+  title: 'Trepur Components/Other/Organisms/Image Link List',
+  component: ImageLinkList,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName
+  },
+  args: {
+    items: getLinks()
+  }
+}
+
+const Template: ComponentStory<typeof ImageLinkList> = (args) => <ImageLinkList {...args} />
+
+export const _ImageLinkList = Template.bind({})
+
+export default componentMeta

package/dist/components/ImageLinkList/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import ImageLink, { Props as imageLinkProps } from '../ImageLink/index'
+import classNames from 'classnames'
+
+export interface Props {
+  id?: string
+  className?: string
+  items?: imageLinkProps[]
+}
+const ImageLinkList = ({
+  id,
+  className,
+  items
+}: Props): JSX.Element => {
+  const classList = classNames(className, 'grid md:grid-cols-4 sm:grid-cols-2')
+
+  return (
+    <div id={id} className={classList}>
+      {items?.map((item, i: number) => {
+        return (
+          <ImageLink
+            key={`image_link_${i + 0}`}
+            altText='image'
+            image={item.image}
+            title={item.title}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default ImageLinkList