trepur_components 1.0.2 → 1.0.4

package/dist/components/AlertBar/index.tsx

@@ -1,127 +0,0 @@
-import React, { useState } from 'react'
-import Icon, { Props as iconProps } from '@components/Icon'
-import classNames from 'classnames'
-import { getTheme } from '@utils/theme'
-
-export interface Props {
-  id?: string
-  className?: string
-  type?: 'success' | 'warning' | 'error' | 'info'
-  text?: string
-  leftIconProps?: iconProps
-  rightIconProps?: iconProps
-  textCenter?: boolean
-  isDismissable?: boolean
-  theme?: 'light' | 'dark'
-  onDismissClick?: React.MouseEventHandler
-}
-
-const AlertBar = ({
-  id,
-  className,
-  type = 'warning',
-  text,
-  theme = 'light',
-  leftIconProps,
-  rightIconProps,
-  textCenter = false,
-  isDismissable = false,
-  onDismissClick
-}: Props): JSX.Element => {
-  const themeToUse: string = getTheme()
-  const [alertBarStatus, setAlertBarStatus] = useState({
-    state: 'open',
-    display: true
-  })
-
-  const bgColor = classNames({
-    'bg-rupertbennett-success': type === 'success' && themeToUse === 'rupertbennett',
-    'bg-rupertbennett-warning': type === 'warning' && themeToUse === 'rupertbennett',
-    'bg-rupertbennett-error': type === 'error' && themeToUse === 'rupertbennett',
-    'bg-rupertbennett-info-light': type === 'info' && themeToUse === 'rupertbennett',
-    'bg-bootson-success': type === 'success' && themeToUse === 'bootson',
-    'bg-bootson-warning': type === 'warning' && themeToUse === 'bootson',
-    'bg-bootson-error': type === 'error' && themeToUse === 'bootson',
-    'bg-bootson-info-light': type === 'info' && themeToUse === 'bootson'
-  })
-
-  const alertBarState = classNames({
-    'opacity-100': alertBarStatus.state === 'open',
-    'opacity-0': alertBarStatus.state === 'closed',
-    hidden: !alertBarStatus.display
-  })
-
-  const classList = classNames(
-    className,
-    bgColor,
-    alertBarState,
-    'text-white w-parent flex py-2 transition-opactiy duration-700'
-  )
-
-  const textClassList = classNames({
-    'text-center': textCenter,
-    'pl-4': !textCenter
-  }, 'w-full py-3')
-
-  const rightIconClasses = classNames({
-    'hover:cursor-pointer': isDismissable
-  }, 'px-8 pt-3')
-
-  const leftIconClasses = 'pt-3 pl-8'
-
-  const closeAlertBar = (e: any): void => {
-    setAlertBarStatus({
-      state: 'closed',
-      display: alertBarStatus.display
-    })
-    setTimeout(() => setAlertBarStatus({
-      state: 'closed',
-      display: false
-    }), 700)
-    if (onDismissClick != null) {
-      onDismissClick(e)
-    }
-  }
-
-  const dismissIcon = (
-    <Icon
-      type='multiply'
-      colour='white'
-    />
-  )
-
-  const iconLeft = (leftIconProps != null) &&
-    <Icon
-      {...leftIconProps}
-    />
-
-  const iconRight = (rightIconProps != null) &&
-    <Icon
-      {...rightIconProps}
-    />
-
-  return (
-    <div
-      id={id}
-      className={classList}
-    >
-      {(leftIconProps != null) &&
-        <span className={leftIconClasses}>
-          {iconLeft}
-        </span>}
-      <h3 className={textClassList}>{text}</h3>
-      {isDismissable &&
-        <a className={rightIconClasses} onClick={(e) => closeAlertBar(e)}>
-          <span>
-            {dismissIcon}
-          </span>
-        </a>}
-      {(iconRight != null) && !isDismissable &&
-        <span className={rightIconClasses}>
-          {iconRight}
-        </span>}
-    </div>
-  )
-}
-
-export default AlertBar

package/dist/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -1,60 +0,0 @@
-import React from 'react'
-import Breadcrumbs from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof Breadcrumbs> = {
-  title: 'Trepur Components/Other/Atoms/Breadcrumbs',
-  component: Breadcrumbs,
-  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' }
-      }
-    },
-    links: {
-      description: 'An array of items to be displayed in the component',
-      table: {
-        category: '',
-        type: { summary: 'array' },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    links: [
-      {
-        href: '/',
-        name: 'link 1'
-      },
-      {
-        href: '/',
-        name: 'link 2'
-      },
-      {
-        href: '/',
-        name: 'link 3'
-      },
-      {
-        href: '/',
-        name: 'link 4'
-      }
-    ]
-  }
-}
-
-const Template: ComponentStory<typeof Breadcrumbs> = (args) => <Breadcrumbs {...args} />
-
-export const _Breadcrumbs = Template.bind({})
-
-export default componentMeta

package/dist/components/Breadcrumbs/index.tsx

@@ -1,55 +0,0 @@
-import React from 'react'
-import classNames from 'classnames'
-
-export interface Props {
-  id?: string
-  className?: string
-  links?: Array<{ name: string, href: string }>
-}
-
-const Breadcrumbs = ({
-  id,
-  className,
-  links
-}: Props): JSX.Element => {
-  const linksLength = (links != null)
-    ? Object.keys(links).length
-    : 0
-
-  const classList = classNames(className, 'flex py-2 px-8')
-
-  return (
-    <ul id={id} className={classList}>
-      {links?.map((link, i) => {
-        return (
-          <div key={`breadcrumb_${i + 1}`} className='flex'>
-            <li className='h-8'>
-              {i + 1 >= linksLength
-                ? (
-                  <p className='px-1 py-1'>
-                    {link.name}
-                  </p>
-                  )
-                : (
-                  <p className='px-1 py-1'>
-                    <a
-                      className='text-facebook hover:underline'
-                      href={link.href}
-                    >
-                      {link.name}
-                    </a>
-                  </p>
-                  )}
-            </li>
-            {i + 1 < linksLength &&
-              <li className='h-8'>
-                <p className='py-1'>&nbsp; &#62; &nbsp;</p>
-              </li>}
-          </div>
-        )
-      })}
-    </ul>
-  )
-}
-
-export default Breadcrumbs

package/dist/components/BreadcrumbsBordered/BreadcrumbsBordered.stories.tsx

@@ -1,52 +0,0 @@
-import React from 'react'
-import { idAndClassName } from '@utils/controls'
-import BreadcrumbsBordered from './index'
-import { ComponentStory, ComponentMeta } from '@storybook/react'
-
-const componentMeta: ComponentMeta<typeof BreadcrumbsBordered> = {
-  title: 'Trepur Components/Other/Organisms/Breadcrumbs',
-  component: BreadcrumbsBordered,
-  parameters: {},
-  argTypes: {
-    ...idAndClassName,
-    links: {
-      description: 'An array of objects to be displayed in the component',
-      control: { type: 'array', default: undefined },
-      table: {
-        category: '',
-        type: { summary: 'array' },
-        defaultValue: { summary: 'undefined' }
-      }
-    }
-  },
-  args: {
-    links: [
-      {
-        link: '/',
-        name: 'link 1'
-      },
-      {
-        link: '/',
-        name: 'link 2'
-      },
-      {
-        link: '/',
-        name: 'link 3'
-      },
-      {
-        link: '/',
-        name: 'link 4'
-      },
-      {
-        link: '/',
-        name: 'link 5'
-      }
-    ]
-  }
-}
-
-const Template: ComponentStory<typeof BreadcrumbsBordered> = (args) => <BreadcrumbsBordered {...args} />
-
-export const _BreadcrumbsBordered = Template.bind({})
-
-export default componentMeta

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