trepur_components 1.0.2 → 1.0.3

package/dist/components/BreadcrumbsBordered/index.tsx

@@ -1,44 +0,0 @@
-import React from 'react'
-import BreadcrumbsItem, { Props as breadcrumbsItemProps } from '@components/BreadcrumbsItem/index'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  links?: breadcrumbsItemProps[]
-}
-
-const Breadcrumbs: React.FC<Props> = ({
-  id,
-  className,
-  links
-}) => {
-  const linksLength = links?.length !== undefined ? links.length : 0
-  const classList = classNames(className, 'flex')
-
-  return (
-    <ul id={id} className={classList}>
-      {links?.map((link: breadcrumbsItemProps, i: number) => {
-        const margin = i === 0 ? ' mr-3' : ' mx-3'
-        const first = i === 0
-
-        let bType = 'standard'
-        if (linksLength >= 1 && i + 1 < linksLength) {
-          bType = 'link'
-        }
-        return (
-          <BreadcrumbsItem
-            key={`breadcrumb_item_${i + 0}`}
-            className={margin}
-            name={link.name}
-            link={link.link}
-            type={bType}
-            firstItem={first}
-          />
-        )
-      })}
-    </ul>
-  )
-}
-
-export default Breadcrumbs

package/dist/components/BreadcrumbsItem/BreadcrumbsItem.stories.tsx

@@ -1,54 +0,0 @@
-import React from 'react'
-import BreadcrumbsItem from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof BreadcrumbsItem> = {
-  title: 'Trepur Components/Other/Atoms/Breadcrumbs Item',
-  component: BreadcrumbsItem,
-  parameters: {},
-  argTypes: {
-    id: {
-      description: 'Defines the id of the component',
-      table: {
-        category: '',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    className: {
-      description: 'Defines any additional classes for the components',
-      table: {
-        category: '',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    name: {
-      description: 'Specifies the name for the key attribute',
-      table: {
-        category: '',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    },
-    type: {
-      description: 'Specifies the type of breadcrumbs to display ie link',
-      table: {
-        category: '',
-        type: { summary: 'string' },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    name: 'Link 1',
-    href: '/',
-    firstItem: false
-  }
-}
-
-const Template: ComponentStory<typeof BreadcrumbsItem> = (args) => <BreadcrumbsItem {...args} />
-
-export const _BreadcrumbsItem = Template.bind({})
-
-export default componentMeta

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