trepur_components 0.1.0

package/dist/Components/Button/Button.stories.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Button = exports.WithOnClickMethod = exports.WithIconRight = exports.WithIconLeft = exports.WithBothIcons = exports.SecondaryButton = exports.ButtonAsSemanticHtmlSubmitButton = exports.ButtonAsSemanticHtmlButton = exports.ButtonAsInternalLink = exports.ButtonAsExternalLink = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _Button2 = _interopRequireDefault(require("./Button"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/Button',
+  argTypes: {
+    label: {
+      name: 'Text',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Shop Now'
+    },
+    type: {
+      name: 'Type',
+      defaultValue: 'primary',
+      options: ['primary', 'secondary', 'ghost'],
+      control: {
+        type: 'select'
+      }
+    },
+    iconPlacement: {
+      name: 'Icon',
+      defaultValue: 'none',
+      options: ['left', 'right', 'both', 'none'],
+      control: {
+        type: 'select'
+      }
+    },
+    padded: {
+      name: 'Padded',
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    social: {
+      name: 'Social',
+      defaultValue: 'None',
+      options: ['Facebook', 'Twitter', 'Whatsapp', 'None'],
+      control: {
+        type: 'select'
+      }
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Button = args => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    ctaText: "I am a button"
+  });
+};
+
+exports._Button = _Button;
+
+const SecondaryButton = () => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    ctaText: "I am a button"
+  });
+};
+
+exports.SecondaryButton = SecondaryButton;
+
+const WithIconRight = () => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    rightIcon: "thumbs-up",
+    ctaText: "I am a button"
+  });
+};
+
+exports.WithIconRight = WithIconRight;
+WithIconRight.story = {
+  name: 'With Icon (right)'
+};
+
+const WithIconLeft = () => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    leftIcon: "sign-in",
+    ctaText: "I am a button"
+  });
+};
+
+exports.WithIconLeft = WithIconLeft;
+WithIconLeft.story = {
+  name: 'With Icon (left)'
+};
+
+const WithBothIcons = () => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    leftIcon: "star",
+    rightIcon: "star",
+    ctaText: "I am a button"
+  });
+};
+
+exports.WithBothIcons = WithBothIcons;
+
+const ButtonAsExternalLink = () => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    as: "a-external",
+    ctaText: "I am a button"
+  });
+};
+
+exports.ButtonAsExternalLink = ButtonAsExternalLink;
+ButtonAsExternalLink.story = {
+  name: 'Button as external link'
+};
+
+const ButtonAsSemanticHtmlButton = () => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    as: "button",
+    htmlType: "button",
+    ctaText: "I am a button",
+    url: "/"
+  });
+};
+
+exports.ButtonAsSemanticHtmlButton = ButtonAsSemanticHtmlButton;
+ButtonAsSemanticHtmlButton.story = {
+  name: 'Button as semantic html button'
+};
+
+const ButtonAsSemanticHtmlSubmitButton = () => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    as: "button",
+    htmlType: "submit",
+    ctaText: "I am a button"
+  });
+};
+
+exports.ButtonAsSemanticHtmlSubmitButton = ButtonAsSemanticHtmlSubmitButton;
+ButtonAsSemanticHtmlSubmitButton.story = {
+  name: 'Button as semantic html submit button'
+};
+
+const ButtonAsInternalLink = () => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    as: "Link",
+    ctaText: "I am a button",
+    url: "/"
+  });
+};
+
+exports.ButtonAsInternalLink = ButtonAsInternalLink;
+ButtonAsInternalLink.story = {
+  name: 'Button as internal link'
+};
+
+const WithOnClickMethod = () => {
+  return /*#__PURE__*/_react.default.createElement(_Button2.default, {
+    ctaText: "I am a button",
+    onClick: (0, _addonActions.action)('button-click')
+  });
+};
+
+exports.WithOnClickMethod = WithOnClickMethod;
+WithOnClickMethod.story = {
+  name: 'With onClick method'
+};

package/dist/Components/Button/README.md

@@ -0,0 +1 @@
+hello this is an icon

package/dist/Components/ButtonSlide/ButtonSlide.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+
+require("./Styles.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const ButtonSlide = _ref => {
+  let {
+    ctaText,
+    ctaLink,
+    className,
+    onClick,
+    leftIcon,
+    rightIcon
+  } = _ref;
+  let classes = className + ' btn py-2 px-8 text-white border-2 bg-black hover:bg-white hover:text-black';
+  let iconLeft = /*#__PURE__*/React.createElement(_Icon.default, {
+    type: leftIcon
+  });
+  let iconRight = /*#__PURE__*/React.createElement(_Icon.default, {
+    type: rightIcon
+  });
+  return /*#__PURE__*/React.createElement("button", {
+    className: classes,
+    onClick: onClick
+  }, leftIcon && iconLeft, ctaText, rightIcon && iconRight);
+};
+
+var _default = ButtonSlide;
+exports.default = _default;

package/dist/Components/ButtonSlide/ButtonSlide.stories.js

@@ -0,0 +1,185 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports._Button = exports.WithOnClickMethod = exports.WithIconRight = exports.WithIconLeft = exports.WithBothIcons = exports.SecondaryButton = exports.ButtonAsSemanticHtmlSubmitButton = exports.ButtonAsSemanticHtmlButton = exports.ButtonAsInternalLink = exports.ButtonAsExternalLink = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _addonActions = require("@storybook/addon-actions");
+
+var _README = _interopRequireDefault(require("./README.md"));
+
+var _ButtonSlide = _interopRequireDefault(require("./ButtonSlide"));
+
+require("../../index.css");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _default = {
+  title: 'Components/ButtonSlide',
+  argTypes: {
+    label: {
+      name: 'Text',
+      control: {
+        type: 'text'
+      },
+      defaultValue: 'Shop Now'
+    },
+    type: {
+      name: 'Type',
+      defaultValue: 'primary',
+      options: ['primary', 'secondary', 'ghost'],
+      control: {
+        type: 'select'
+      }
+    },
+    iconPlacement: {
+      name: 'Icon',
+      defaultValue: 'none',
+      options: ['left', 'right', 'both', 'none'],
+      control: {
+        type: 'select'
+      }
+    },
+    padded: {
+      name: 'Padded',
+      control: {
+        type: 'boolean'
+      },
+      defaultValue: false
+    },
+    social: {
+      name: 'Social',
+      defaultValue: 'None',
+      options: ['Facebook', 'Twitter', 'Whatsapp', 'None'],
+      control: {
+        type: 'select'
+      }
+    }
+  },
+  decorators: [story => /*#__PURE__*/_react.default.createElement("div", {
+    className: "p-4"
+  }, story())],
+  parameters: {
+    readme: {
+      sidebar: _README.default
+    }
+  }
+};
+exports.default = _default;
+
+const _Button = args => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    ctaText: "READ MORE"
+  });
+};
+
+exports._Button = _Button;
+
+const SecondaryButton = () => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    ctaText: "I am a button"
+  });
+};
+
+exports.SecondaryButton = SecondaryButton;
+
+const WithIconRight = () => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    rightIcon: "thumbs-up",
+    ctaText: "I am a button"
+  });
+};
+
+exports.WithIconRight = WithIconRight;
+WithIconRight.story = {
+  name: 'With Icon (right)'
+};
+
+const WithIconLeft = () => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    leftIcon: "sign-in",
+    ctaText: "I am a button"
+  });
+};
+
+exports.WithIconLeft = WithIconLeft;
+WithIconLeft.story = {
+  name: 'With Icon (left)'
+};
+
+const WithBothIcons = () => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    leftIcon: "star",
+    rightIcon: "star",
+    ctaText: "I am a button"
+  });
+};
+
+exports.WithBothIcons = WithBothIcons;
+
+const ButtonAsExternalLink = () => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    as: "a-external",
+    ctaText: "I am a button"
+  });
+};
+
+exports.ButtonAsExternalLink = ButtonAsExternalLink;
+ButtonAsExternalLink.story = {
+  name: 'Button as external link'
+};
+
+const ButtonAsSemanticHtmlButton = () => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    as: "button",
+    htmlType: "button",
+    ctaText: "I am a button",
+    url: "/"
+  });
+};
+
+exports.ButtonAsSemanticHtmlButton = ButtonAsSemanticHtmlButton;
+ButtonAsSemanticHtmlButton.story = {
+  name: 'Button as semantic html button'
+};
+
+const ButtonAsSemanticHtmlSubmitButton = () => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    as: "button",
+    htmlType: "submit",
+    ctaText: "I am a button"
+  });
+};
+
+exports.ButtonAsSemanticHtmlSubmitButton = ButtonAsSemanticHtmlSubmitButton;
+ButtonAsSemanticHtmlSubmitButton.story = {
+  name: 'Button as semantic html submit button'
+};
+
+const ButtonAsInternalLink = () => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    as: "Link",
+    ctaText: "I am a button",
+    url: "/"
+  });
+};
+
+exports.ButtonAsInternalLink = ButtonAsInternalLink;
+ButtonAsInternalLink.story = {
+  name: 'Button as internal link'
+};
+
+const WithOnClickMethod = () => {
+  return /*#__PURE__*/_react.default.createElement(_ButtonSlide.default, {
+    ctaText: "I am a button",
+    onClick: (0, _addonActions.action)('button-click')
+  });
+};
+
+exports.WithOnClickMethod = WithOnClickMethod;
+WithOnClickMethod.story = {
+  name: 'With onClick method'
+};

package/dist/Components/ButtonSlide/README.md

@@ -0,0 +1 @@
+hello this is an icon

package/dist/Components/ButtonSlide/Styles.css

@@ -0,0 +1,25 @@
+.btn {
+    border: 1px solid black;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    -webkit-transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    transition: all 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+    cursor: pointer;
+}
+.btn:after {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 0;
+    background: #FFF;
+    border: 1px white;
+    content: '';
+    z-index: -1;
+    -webkit-transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    transition: all 1s cubic-bezier(0.785, 0.135, 0.15, 0.86);
+    will-change: width;
+}
+.btn:hover:after {
+    width: 100%;
+}

package/dist/Components/Card/Card.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("core-js/modules/es.symbol.description.js");
+
+var _Button = _interopRequireDefault(require("../Button/Button"));
+
+var _ButtonSlide = _interopRequireDefault(require("../ButtonSlide/ButtonSlide"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const Card = _ref => {
+  let {
+    id,
+    title,
+    image,
+    subTitle,
+    description,
+    extraText,
+    hasCta,
+    ctaText,
+    imageBelowTitle,
+    titleClass,
+    imageClass,
+    subTitleClass,
+    extraTextClass,
+    descriptionClass,
+    classNames,
+    altText,
+    btnType,
+    rounded
+  } = _ref;
+  let imageWrapperClass;
+  let titleWrapperClass = 'p-3';
+  let contentWrapperClass = 'px-3';
+  let btnClass = 'w-full p-3';
+  let classList = 'flex flex-col border border-grey border-opacity-100 bg-white w-auto max-w-md ';
+  classList += classNames ? classNames : '';
+  imageWrapperClass = imageBelowTitle ? imageWrapperClass + ' order-2' : imageWrapperClass;
+  titleWrapperClass = imageBelowTitle ? titleWrapperClass + ' order-1' : titleWrapperClass;
+  contentWrapperClass = imageBelowTitle ? contentWrapperClass + ' order-3' : contentWrapperClass;
+  btnClass = imageBelowTitle ? btnClass + ' order-4' : btnClass;
+  imageWrapperClass = rounded ? imageWrapperClass + ' rounded-t-lg' : imageWrapperClass;
+  classList = rounded ? classList + ' rounded-lg' : classList;
+  imageClass += imageBelowTitle ? '' : rounded ? ' rounded-t-lg' : '';
+  return /*#__PURE__*/React.createElement("div", {
+    id: id,
+    className: classList
+  }, image && /*#__PURE__*/React.createElement("div", {
+    className: imageWrapperClass && imageWrapperClass
+  }, /*#__PURE__*/React.createElement("img", {
+    className: imageClass,
+    src: image,
+    alt: altText
+  })), /*#__PURE__*/React.createElement("div", {
+    className: titleWrapperClass
+  }, /*#__PURE__*/React.createElement("h1", {
+    className: titleClass
+  }, title)), /*#__PURE__*/React.createElement("div", {
+    className: contentWrapperClass
+  }, /*#__PURE__*/React.createElement("h2", {
+    className: subTitleClass && subTitleClass
+  }, subTitle), /*#__PURE__*/React.createElement("h2", {
+    className: extraTextClass && extraTextClass
+  }, extraText), /*#__PURE__*/React.createElement("h6", {
+    className: descriptionClass && descriptionClass
+  }, description)), hasCta && /*#__PURE__*/React.createElement("div", {
+    className: btnClass
+  }, btnType !== 'slide' ? /*#__PURE__*/React.createElement(_Button.default, {
+    className: "w-full",
+    ctaText: ctaText
+  }) : /*#__PURE__*/React.createElement(_ButtonSlide.default, {
+    className: "w-full",
+    ctaText: ctaText
+  })));
+};
+
+var _default = Card;
+exports.default = _default;