trepur_components 0.1.0

package/dist/Components/Card/Card.stories.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lotsOfCards = exports.default = exports._Card = exports.CardWithSlideButton = exports.CardWithImageBelowTitle = exports.CardWithImage = exports.CardWithExtraText = exports.CardWithButton = exports.CardTitleRight = exports.CardTitleLeft = exports.CardRoundedWithImageBelowTitle = exports.CardRounded = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _Card2 = _interopRequireDefault(require("./Card"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Card',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Card = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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"
+  });
+};
+
+exports._Card = _Card;
+
+const CardTitleLeft = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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"
+  });
+};
+
+exports.CardTitleLeft = CardTitleLeft;
+
+const CardTitleRight = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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"
+  });
+};
+
+exports.CardTitleRight = CardTitleRight;
+
+const CardWithImage = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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"
+  });
+};
+
+exports.CardWithImage = CardWithImage;
+
+const CardWithExtraText = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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"
+  });
+};
+
+exports.CardWithExtraText = CardWithExtraText;
+
+const CardWithButton = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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: true,
+    ctaText: "This is a button"
+  });
+};
+
+exports.CardWithButton = CardWithButton;
+
+const CardWithSlideButton = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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: true,
+    btnType: "slide",
+    ctaText: "This is a button"
+  });
+};
+
+exports.CardWithSlideButton = CardWithSlideButton;
+
+const CardWithImageBelowTitle = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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: true,
+    ctaText: "This is a button",
+    imageBelowTitle: true
+  });
+};
+
+exports.CardWithImageBelowTitle = CardWithImageBelowTitle;
+
+const CardRounded = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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: true,
+    ctaText: "This is a button",
+    rounded: true
+  });
+};
+
+exports.CardRounded = CardRounded;
+
+const CardRoundedWithImageBelowTitle = () => {
+  return /*#__PURE__*/_react.default.createElement(_Card2.default, {
+    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: true,
+    ctaText: "This is a button",
+    imageBelowTitle: true,
+    rounded: true
+  });
+};
+
+exports.CardRoundedWithImageBelowTitle = CardRoundedWithImageBelowTitle;
+
+const lotsOfCards = () => {
+  let cards = [];
+
+  for (let i = 0; i < 8; i++) {
+    cards.push( /*#__PURE__*/_react.default.createElement(_Card2.default, {
+      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: true,
+      ctaText: "This is a button",
+      imageBelowTitle: true,
+      rounded: true
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "grid grid-cols-4 grid-flow-row"
+  }, cards);
+};
+
+exports.lotsOfCards = lotsOfCards;

package/dist/Components/Card/README.md

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

package/dist/Components/CardImageLink/CardImageLink.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CardImageLink = _ref => {
+  let {
+    image,
+    altText,
+    text,
+    ctaText,
+    ctaLink,
+    classes
+  } = _ref;
+  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 /*#__PURE__*/_react.default.createElement("div", {
+    className: classList
+  }, /*#__PURE__*/_react.default.createElement("a", {
+    href: ctaLink
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: image,
+    alt: altText,
+    className: "object-cover w-full h-full"
+  }), /*#__PURE__*/_react.default.createElement("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)));
+};
+
+var _default = CardImageLink;
+exports.default = _default;

package/dist/Components/CardImageLink/CardImageLink.stories.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lotsOfCardImageLinks = exports.default = exports._CardImageLink = exports.JumbotronWithTwoBtns = exports.JumbotronWithOneBtn = exports.JumbotronWithCenterText = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _CardImageLink2 = _interopRequireDefault(require("./CardImageLink"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/CardImageLink',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _CardImageLink = args => {
+  return /*#__PURE__*/_react.default.createElement(_CardImageLink2.default, {
+    altText: "image",
+    image: "https://picsum.photos/400/400"
+  });
+};
+
+exports._CardImageLink = _CardImageLink;
+
+const JumbotronWithOneBtn = args => {
+  return /*#__PURE__*/_react.default.createElement(_CardImageLink2.default, {
+    altText: "image",
+    image: "https://picsum.photos/400/400",
+    ctaText: "This is a button"
+  });
+};
+
+exports.JumbotronWithOneBtn = JumbotronWithOneBtn;
+
+const JumbotronWithTwoBtns = args => {
+  return /*#__PURE__*/_react.default.createElement(_CardImageLink2.default, {
+    altText: "image",
+    image: "https://picsum.photos/400/400",
+    ctaText: "This is a button",
+    ctaText2: "This is another button"
+  });
+};
+
+exports.JumbotronWithTwoBtns = JumbotronWithTwoBtns;
+
+const JumbotronWithCenterText = args => {
+  return /*#__PURE__*/_react.default.createElement(_CardImageLink2.default, {
+    altText: "image",
+    image: "https://picsum.photos/400/400",
+    text: "Some text here"
+  });
+};
+
+exports.JumbotronWithCenterText = JumbotronWithCenterText;
+
+const lotsOfCardImageLinks = args => {
+  let cards = [];
+
+  for (let i = 0; i < 6; i++) {
+    cards.push( /*#__PURE__*/_react.default.createElement(_CardImageLink2.default, {
+      altText: "image",
+      image: "https://picsum.photos/400/400",
+      text: "Some text here",
+      ctaText: "This is a button"
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "grid grid-cols-3 grid-flow-row"
+  }, cards);
+};
+
+exports.lotsOfCardImageLinks = lotsOfCardImageLinks;

package/dist/Components/CardImageLinkList/CardImageLinkList.js

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.regexp.exec.js");
+
+require("core-js/modules/es.string.replace.js");
+
+var _CardImageLink = _interopRequireDefault(require("../CardImageLink/CardImageLink"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CardImageLinkList = _ref => {
+  let {
+    list
+  } = _ref;
+  return /*#__PURE__*/React.createElement("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 /*#__PURE__*/React.createElement(_CardImageLink.default, {
+      altText: "image",
+      image: '/' + item.Name.replace(/\s+/g, '') + '.jpeg' || 'https://picsum.photos/400/400',
+      text: item.Name,
+      ctaLink: link,
+      key: item.HeightRank
+    });
+  }));
+};
+
+var _default = CardImageLinkList;
+exports.default = _default;

package/dist/Components/CardImageLinkList/CardImageLinkList.stories.js

@@ -0,0 +1,63 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._CardImageLinkList = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _CardImageLinkList2 = _interopRequireDefault(require("./CardImageLinkList"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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"
+}];
+var _default = {
+  title: 'Components/CardImageLinkList',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _CardImageLinkList = args => {
+  return /*#__PURE__*/_react.default.createElement(_CardImageLinkList2.default, {
+    list: list
+  });
+};
+
+exports._CardImageLinkList = _CardImageLinkList;

package/dist/Components/CardList/CardList.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Card = _interopRequireDefault(require("../Card/Card"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const CardList = _ref => {
+  let {
+    list
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "flex"
+  }, list && list.map(item => {
+    return /*#__PURE__*/React.createElement(_Card.default, {
+      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: true,
+      ctaText: "View",
+      imageBelowTitle: true,
+      rounded: true
+    });
+  }));
+};
+
+var _default = CardList;
+exports.default = _default;

package/dist/Components/CardList/CardList.stories.js

@@ -0,0 +1,204 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Cardlist = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _CardList = _interopRequireDefault(require("./CardList"));
+
+var _Card = _interopRequireDefault(require("../Card/Card"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const list = [/*#__PURE__*/_react.default.createElement(_Card.default, {
+  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"
+}), /*#__PURE__*/_react.default.createElement(_Card.default, {
+  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"
+})];
+var _default = {
+  title: 'Components/CardList',
+  argTypes: {},
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Cardlist = () => {
+  return /*#__PURE__*/_react.default.createElement(_CardList.default, {
+    list: list
+  });
+}; // 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>
+//     )
+// }
+
+
+exports._Cardlist = _Cardlist;

package/dist/Components/CardList/README.md

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