trepur_components 0.1.0

package/src/Components/Card/Card.stories.js

@@ -0,0 +1,190 @@
+import React from 'react'
+import Readme from './README.md'
+import Card from './Card'
+import '../../index.css';
+
+export default {
+    title: 'Components/Card',
+    argTypes: {
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Card = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='text-center font-bold'
+            subTitle='This is a subtitle' 
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+        ></Card>
+    )
+}
+
+export const CardTitleLeft = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='font-bold'
+            subTitle='This is a subtitle' 
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+        ></Card>
+    )
+}
+
+export const CardTitleRight = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='font-bold text-right'
+            subTitle='This is a subtitle' 
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+        ></Card>
+    )
+}
+
+export const CardWithImage = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='text-center font-bold'
+            subTitle='This is a subtitle' 
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+            image='https://picsum.photos/500/300'>
+        </Card>
+    )
+}
+
+export const CardWithExtraText = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='text-center font-bold'
+            subTitle='This is a subtitle' 
+            extraText='This is some extra text'
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+            image='https://picsum.photos/500/300'>
+        </Card>
+    )
+}
+
+export const CardWithButton = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='text-center font-bold'
+            subTitle='This is a subtitle' 
+            extraText='This is some extra text'
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+            image='https://picsum.photos/500/300'
+            hasCta
+            ctaText='This is a button'
+            >
+        </Card>
+    )
+}
+
+export const CardWithSlideButton = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='text-center font-bold'
+            subTitle='This is a subtitle' 
+            extraText='This is some extra text'
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+            image='https://picsum.photos/500/300'
+            hasCta
+            btnType='slide'
+            ctaText='This is a button'>
+        </Card>
+    )
+}
+
+export const CardWithImageBelowTitle = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='text-center font-bold'
+            subTitle='This is a subtitle' 
+            extraText='This is some extra text'
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+            image='https://picsum.photos/500/300'
+            hasCta
+            ctaText='This is a button'
+            imageBelowTitle>
+        </Card>
+    )
+}
+
+export const CardRounded = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='text-center font-bold'
+            subTitle='This is a subtitle' 
+            extraText='This is some extra text'
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+            image='https://picsum.photos/500/300'
+            hasCta
+            ctaText='This is a button'
+            rounded>
+        </Card>
+    )
+}
+
+export const CardRoundedWithImageBelowTitle = () => {
+    return (
+        <Card 
+            id='card' 
+            title='This is a title'
+            titleClass='text-center font-bold'
+            subTitle='This is a subtitle' 
+            extraText='This is some extra text'
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+            image='https://picsum.photos/500/300'
+            hasCta
+            ctaText='This is a button'
+            imageBelowTitle
+            rounded>
+        </Card>
+    )
+}
+
+export const lotsOfCards = () => {
+    let cards = []
+    for (let i = 0; i < 8 ; i++) {
+        cards.push(<Card 
+            id='card' 
+            title='This is a title'
+            titleClass='text-center font-bold'
+            subTitle='This is a subtitle' 
+            extraText='This is some extra text'
+            description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+            image='https://picsum.photos/500/300'
+            hasCta
+            ctaText='This is a button'
+            imageBelowTitle
+            rounded>
+        </Card>)
+    }
+    return (
+        <div className="grid grid-cols-4 grid-flow-row">
+            {cards}
+        </div>
+    )
+}
+

package/src/Components/Card/README.md

@@ -0,0 +1 @@
+hello this is a card

package/src/Components/CardImageLink/CardImageLink.js

@@ -0,0 +1,22 @@
+import React from "react";
+
+const CardImageLink = ({
+    image,
+    altText,
+    text,
+    ctaText,
+    ctaLink,
+    classes,
+}) => {
+    const classList = "cursor-pointer relative lg:mx-3 md:mx-1 mx-1 lg:mb-5 md:mb-2 mb-2 w-auto hover:opacity-50 overflow-hidden " + classes
+    return (
+            <div className={classList}>
+                <a href={ctaLink}>
+                    <img src={image} alt={altText} className="object-cover w-full h-full" />
+                    <div className="absolute w-full py-5 top-5 inset-x-0 bg-blue-400 text-black md:text-2xl text-xs text-center leading-4">{text}</div>
+                </a>
+            </div>
+    )
+}
+
+export default CardImageLink

package/src/Components/CardImageLink/CardImageLink.stories.js

@@ -0,0 +1,73 @@
+import React from 'react'
+import Readme from './README.md'
+import CardImageLink from './CardImageLink'
+import '../../index.css';
+
+export default {
+    title: 'Components/CardImageLink',
+    argTypes: {
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _CardImageLink = (args) => {
+    return (
+        <CardImageLink 
+            altText='image'
+            image='https://picsum.photos/400/400'
+        ></CardImageLink>
+    )
+}
+
+export const JumbotronWithOneBtn = (args) => {
+    return (
+        <CardImageLink 
+            altText='image'
+            image='https://picsum.photos/400/400'
+            ctaText='This is a button'
+        ></CardImageLink>
+    )
+}
+
+export const JumbotronWithTwoBtns = (args) => {
+    return (
+        <CardImageLink 
+            altText='image'
+            image='https://picsum.photos/400/400'
+            ctaText='This is a button'
+            ctaText2='This is another button'
+        ></CardImageLink>
+    )
+}
+
+export const JumbotronWithCenterText = (args) => {
+    return (
+        <CardImageLink 
+            altText='image'
+            image='https://picsum.photos/400/400'
+            text='Some text here'
+        ></CardImageLink>
+    )
+}
+
+export const lotsOfCardImageLinks = (args) => {
+    let cards = []
+    for (let i = 0; i < 6 ; i++) {
+        cards.push(<CardImageLink 
+            altText='image'
+            image='https://picsum.photos/400/400'
+            text='Some text here'
+            ctaText='This is a button'
+        ></CardImageLink>)
+    }
+    return (
+        <div className="grid grid-cols-3 grid-flow-row">
+            {cards}
+        </div>
+    )
+}

package/src/Components/CardImageLinkList/CardImageLinkList.js

@@ -0,0 +1,24 @@
+import CardImageLink from "../CardImageLink/CardImageLink"
+
+const CardImageLinkList = ({
+    list
+}) => {
+    return (
+        <div className="grid md:grid-cols-4 sm:grid-cols-2">
+          {list && list.map((item, i) => {
+            const link = '/wainwright/' + item.Name.replace(/\s+/g, '')
+            return (
+              <CardImageLink altText='image'
+                image={'/' + item.Name.replace(/\s+/g, '') + '.jpeg' || 'https://picsum.photos/400/400'}
+                text={item.Name}
+                ctaLink={link}
+                key={item.HeightRank}>
+              </CardImageLink>
+            )
+          })}
+        </div>
+    )
+
+}
+
+export default CardImageLinkList

package/src/Components/CardImageLinkList/CardImageLinkList.stories.js

@@ -0,0 +1,50 @@
+import React from 'react'
+import Readme from './README.md'
+import CardImageLinkList from './CardImageLinkList'
+import '../../index.css';
+
+const list = [
+    {
+        "HeightRank": 1,
+        "Name": "Scafell Pike",
+        "Section": "34B: LD C&W",
+        "Birkett": "Birkett",
+        "HeightInMeters": 978,
+        "PromInMeters": "912",
+        "HeightInFeet": "3,209",
+        "PromInFeet": "2,992",
+        "TopoMap": "89 90",
+        "OSGridReference": "NY215072",
+        "Classification\n(§ DoBIH codes)": "Ma,F,Sim,Hew,N,W,B,Sy,Fel,CoH,CoU,CoA"
+      },
+      {
+        "HeightRank": 2,
+        "Name": "Scafell",
+        "Section": "34B: LD C&W",
+        "Birkett": "Birkett",
+        "HeightInMeters": 964,
+        "PromInMeters": "132",
+        "HeightInFeet": "3,162",
+        "PromInFeet": "434",
+        "TopoMap": "89 90",
+        "OSGridReference": "NY206064",
+        "Classification\n(§ DoBIH codes)": "Hu,F,Sim,Hew,N,W,B,Sy,Fel"
+      },
+]
+export default {
+    title: 'Components/CardImageLinkList',
+    argTypes: {
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _CardImageLinkList = (args) => {
+    return (
+        <CardImageLinkList list={list}></CardImageLinkList>
+    )
+}

package/src/Components/CardList/CardList.js

@@ -0,0 +1,29 @@
+import Card from "../Card/Card"
+
+const CardList = ({
+    list
+}) => {
+    return (
+        <div className="flex">
+          {list && list.map((item) => {
+            return (
+              <Card 
+                id='card' 
+                title={item.name}
+                titleClass='text-center font-bold'
+                subTitle='This is a subtitle' 
+                extraText='This is some extra text'
+                description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+                image='https://picsum.photos/500/300'
+                hasCta
+                ctaText='View'
+                imageBelowTitle
+                rounded>
+              </Card>
+            )
+          })}
+        </div>
+    )
+}
+
+export default CardList

package/src/Components/CardList/CardList.stories.js

@@ -0,0 +1,201 @@
+import React from 'react'
+import Readme from './README.md'
+import CardList from './CardList'
+import Card from '../Card/Card'
+import '../../index.css';
+
+const list = [
+    <Card 
+        id='card' 
+        title='This is a title'
+        titleClass='font-bold'
+        subTitle='This is a subtitle' 
+        description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+    ></Card>,
+    <Card 
+    id='card' 
+    title='This is a title'
+    titleClass='font-bold'
+    subTitle='This is a subtitle' 
+    description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+></Card>
+]
+export default {
+    title: 'Components/CardList',
+    argTypes: {
+    },
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Cardlist = () => {
+    return (
+        <CardList list={list}></CardList>
+    )
+}
+
+// export const CardTitleLeft = () => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='font-bold'
+//             subTitle='This is a subtitle' 
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//         ></Card>
+//     )
+// }
+
+// export const CardTitleRight = () => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='font-bold text-right'
+//             subTitle='This is a subtitle' 
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//         ></Card>
+//     )
+// }
+
+// export const CardWithImage = () => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='text-center font-bold'
+//             subTitle='This is a subtitle' 
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//             image='https://picsum.photos/500/300'>
+//         </Card>
+//     )
+// }
+
+// export const CardWithExtraText = () => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='text-center font-bold'
+//             subTitle='This is a subtitle' 
+//             extraText='This is some extra text'
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//             image='https://picsum.photos/500/300'>
+//         </Card>
+//     )
+// }
+
+// export const CardWithButton = () => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='text-center font-bold'
+//             subTitle='This is a subtitle' 
+//             extraText='This is some extra text'
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//             image='https://picsum.photos/500/300'
+//             hasCta
+//             ctaText='This is a button'
+//             >
+//         </Card>
+//     )
+// }
+
+// export const CardWithSlideButton = () => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='text-center font-bold'
+//             subTitle='This is a subtitle' 
+//             extraText='This is some extra text'
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//             image='https://picsum.photos/500/300'
+//             hasCta
+//             btnType='slide'
+//             ctaText='This is a button'>
+//         </Card>
+//     )
+// }
+
+// export const CardWithImageBelowTitle = () => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='text-center font-bold'
+//             subTitle='This is a subtitle' 
+//             extraText='This is some extra text'
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//             image='https://picsum.photos/500/300'
+//             hasCta
+//             ctaText='This is a button'
+//             imageBelowTitle>
+//         </Card>
+//     )
+// }
+
+// export const CardRounded = () => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='text-center font-bold'
+//             subTitle='This is a subtitle' 
+//             extraText='This is some extra text'
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//             image='https://picsum.photos/500/300'
+//             hasCta
+//             ctaText='This is a button'
+//             rounded>
+//         </Card>
+//     )
+// }
+
+// export const CardRoundedWithImageBelowTitle = () => {
+//     return (
+//         <Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='text-center font-bold'
+//             subTitle='This is a subtitle' 
+//             extraText='This is some extra text'
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//             image='https://picsum.photos/500/300'
+//             hasCta
+//             ctaText='This is a button'
+//             imageBelowTitle
+//             rounded>
+//         </Card>
+//     )
+// }
+
+// export const lotsOfCards = () => {
+//     let cards = []
+//     for (let i = 0; i < 8 ; i++) {
+//         cards.push(<Card 
+//             id='card' 
+//             title='This is a title'
+//             titleClass='text-center font-bold'
+//             subTitle='This is a subtitle' 
+//             extraText='This is some extra text'
+//             description='This is a description, it can be really long if you want it to be. The text will wrap onto a new line if it exceeds the width of the card'
+//             image='https://picsum.photos/500/300'
+//             hasCta
+//             ctaText='This is a button'
+//             imageBelowTitle
+//             rounded>
+//         </Card>)
+//     }
+//     return (
+//         <div className="grid grid-cols-4 grid-flow-row">
+//             {cards}
+//         </div>
+//     )
+// }
+

package/src/Components/CardList/README.md

@@ -0,0 +1 @@
+hello this is a card

package/src/Components/Icon/Icon.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Icon = ({ type, size, className, onClick }) => {
+    if (!type) return <></>
+
+    let classList = `fa fa-${type} fa-x `
+    classList += size? `fa-${size}x ` : ``
+    classList += className ? ` ${className}` : ``
+
+    return (
+        <span
+            className={classList}
+            role='img'
+            aria-hidden='true'
+            aria-label={type}
+            {...(onClick && { onClick: onClick })}
+        ></span>
+    )
+}
+
+Icon.propTypes = {
+    type: PropTypes.string,
+    className: PropTypes.string,
+    onClick: PropTypes.func,
+}
+
+export default Icon

package/src/Components/Icon/Icon.stories.js

@@ -0,0 +1,49 @@
+import React from 'react'
+import Readme from './README.md'
+import Icon from './Icon'
+import '../../index.css';
+
+export default {
+    title: 'Components/Icon',
+    decorators: [(story) => <div className={`p-4`}>{story()}</div>],
+    parameters: {
+        readme: {
+            sidebar: Readme,
+        },
+    },
+}
+
+export const _Icon = (args) => {
+    return (
+        <Icon type='thumbs-up'>
+        </Icon>
+    )
+}
+
+export const withSizeTwo = (args) => {
+    return (
+        <Icon type='thumbs-up' size='2'>
+        </Icon>
+    )
+}
+
+export const withSizeThree = (args) => {
+    return (
+        <Icon type='thumbs-up' size='3'>
+        </Icon>
+    )
+}
+
+export const withSizeFour = (args) => {
+    return (
+        <Icon type='thumbs-up' size='4'>
+        </Icon>
+    )
+}
+
+export const withSizeFive = (args) => {
+    return (
+        <Icon type='thumbs-up' size='5'>
+        </Icon>
+    )
+}

package/src/Components/Icon/README.md

@@ -0,0 +1 @@
+hello this is a button