trepur_components 1.0.1 → 1.0.2

package/dist/components/CardWithTopImage/CardWithTopImage.stories.tsx

@@ -0,0 +1,48 @@
+import React from 'react'
+import CardWithTopImage from './index'
+import logo from '@assets/images/primary-logo.png'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import { idAndClassName } from '@utils/controls'
+
+const componentMeta: ComponentMeta<typeof CardWithTopImage> = {
+  title: 'Trepur Components/Rupert Bennett/Organisms/Card With Top Image',
+  component: CardWithTopImage,
+  argTypes: {
+    ...idAndClassName,
+    children: {
+      type: { name: 'other', value: 'string | React.ReactNode' },
+      description: 'The child elements to show in the component',
+      table: {
+        type: {
+          summary: 'Array'
+        },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    imageProps: {
+      type: { name: 'other', value: 'object' },
+      description: 'The props to pass to the image on the component',
+      table: {
+        type: {
+          summary: 'object'
+        },
+        defaultValue: { summary: 'undefined' }
+      }
+    }
+  },
+  args: {
+    imageProps: {
+      image: logo,
+      roundedFull: true,
+      width: 4,
+      height: 4
+    },
+    children: [<p key='1'>This is a child</p>, <p key='2'>This is another child</p>]
+  }
+}
+
+const Template: ComponentStory<typeof CardWithTopImage> = (args) => <CardWithTopImage {...args} />
+
+export const _CardWithTopImage = Template.bind({})
+
+export default componentMeta

package/dist/components/CardWithTopImage/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import Image, { Props as imageProps } from '@components/Image'
+import classNames from 'classnames'
+
+export interface Props {
+  id?: string
+  className?: string
+  children?: any
+  imageProps?: imageProps
+}
+
+const CardWithTopImage = ({
+  id,
+  className,
+  children,
+  imageProps
+}: Props): JSX.Element => {
+  const wrapperClassList = classNames('rounded-full mx-auto max-w-max bg-white p-4')
+
+  const contentClassList = 'pt-12 px-4 h-auto pb-16 -mt-12 bg-white'
+
+  return (
+    <div
+      style={{
+        filter: 'drop-shadow(0 4px 8px rgb(154, 154, 154))'
+      }}
+      id={id}
+      className={className}
+    >
+      <div className={wrapperClassList}>
+        <Image {...imageProps} />
+      </div>
+      <div className={contentClassList}>
+        {children}
+      </div>
+    </div>
+  )
+}
+
+export default CardWithTopImage

package/dist/components/Carousel/Carousel.stories.tsx

@@ -0,0 +1,369 @@
+import React from 'react'
+import Carousel from './index'
+import { idAndClassName } from '@utils/controls'
+import Card from '@components/Card'
+import { ComponentStory, ComponentMeta } from '@storybook/react'
+import logo from '@assets/images/primary-logo.png'
+
+const slides = [
+  <Card
+    key='card_1'
+    className='keen-slider__slide'
+    image={logo}
+    subTitle='This is a subtitle'
+    description='This is a description paragraph'
+    extraText='This is another paragraph'
+    rounded
+    bordered
+  />,
+  <Card
+    key='card_2'
+    className='keen-slider__slide'
+    image={logo}
+    subTitle='This is a subtitle'
+    description='This is a description paragraph'
+    extraText='This is another paragraph'
+    rounded
+    bordered
+  />,
+  <Card
+    key='card_3'
+    className='keen-slider__slide'
+    image={logo}
+    subTitle='This is a subtitle'
+    description='This is a description paragraph'
+    extraText='This is another paragraph'
+    rounded
+    bordered
+  />,
+  <Card
+    key='card_4'
+    className='keen-slider__slide'
+    image={logo}
+    subTitle='This is a subtitle'
+    description='This is a description paragraph'
+    extraText='This is another paragraph'
+    rounded
+    bordered
+  />
+]
+
+const componentMeta: ComponentMeta<typeof Carousel> = {
+  title: 'Trepur Components/Rupert Bennett/Organisms/Carousel',
+  component: Carousel,
+  parameters: {},
+  argTypes: {
+    ...idAndClassName,
+    breakpoints: {
+      type: { name: 'number', required: false },
+      description: 'The slide to begin on',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    defaultAnimation: {
+      type: { name: 'number', required: false },
+      description: 'The slide to begin on',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    drag: {
+      type: { name: 'boolean', required: false },
+      description: 'Can the carousel be dragged or not',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    dragSpeed: {
+      type: { name: 'number', required: false },
+      description: 'The slide to begin on',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    initial: {
+      type: { name: 'number', required: false },
+      description: 'The slide to begin on',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    loop: {
+      type: { name: 'boolean', required: false },
+      description: 'loop the end back to the start',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    mode: {
+      type: { name: 'string', required: false },
+      description: 'snap, free or snap-free',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    range: {
+      type: { name: 'number', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    renderMode: {
+      type: { name: 'number', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    rtl: {
+      type: { name: 'boolean', required: false },
+      description: 'to display right to left',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    rubberband: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    slides: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    vertical: {
+      type: { name: 'boolean', required: false },
+      description: 'displays the slider vertically',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    animationStarted: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    animationStopped: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    animationEnded: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    destroyed: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    detailsChanged: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    dragged: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    dragStarted: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    dragChecked: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    dragEnded: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    beforeOptionsChanged: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    optionsChanged: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    updated: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    perView: {
+      type: { name: 'number', required: false },
+      description: 'The number of slides to show at a time',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    spacing: {
+      type: { name: 'number', required: false },
+      description: 'The spacing left and right of each slide',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    number: {
+      type: { name: 'number', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'number' },
+        defaultValue: { summary: 'undefined' }
+      }
+    },
+    origin: {
+      type: { name: 'boolean', required: false },
+      description: '',
+      table: {
+        category: '',
+        subcategory: '',
+        type: { summary: 'boolean' },
+        defaultValue: { summary: 'undefined' }
+      }
+    }
+  },
+  args: {
+    loop: true,
+    drag: true,
+    slides,
+    spacing: 16,
+    perView: 4,
+    arrows: {
+      visible: true
+    },
+    dots: {
+      visible: true,
+      colours: 'bg-primary',
+      activeColours: 'bg-secondary'
+    }
+  }
+}
+
+const Template: ComponentStory<typeof Carousel> = (args) => <Carousel {...args} />
+
+export const _Carousel = Template.bind({})
+
+export default componentMeta