contentoh-components-library 21.4.14 → 21.4.16

package/dist/components/atoms/SliderToolTip/styles.js

@@ -19,6 +19,6 @@ var Container = _styledComponents.default.div(_templateObject || (_templateObjec
 
 exports.Container = Container;
 
-var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  width: 310px;\n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  cursor: default;\n  z-index: 2;\n  width: 310px;\n  &.top-slide {\n    top: calc(100% - 370px);\n    left: calc(100% - 175px);\n  }\n  &.bottom-slide {\n    top: 100%;\n    right: calc(100% + -70px);\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n        img {\n          width: 90%;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n      span {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 500;\n        font-size: 15px;\n        line-height: 15px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        display: flex;\n        justify-content: center;\n        background-color: #281f33;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n    }\n    .end-div {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 110px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 90%;\n        cursor: pointer;\n      }\n    }\n  }\n  li:first-child {\n    opacity: 1;\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        cursor: pointer;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
+var Slider = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  font-family: sans-serif;\n  margin: auto;\n  background: #281f33;\n  border-radius: 6px;\n  width: 310px;\n  padding: 16px;\n  padding-top: 20px;\n  box-sizing: border-box;\n  position: absolute;\n  cursor: default;\n  z-index: 2;\n  width: 310px;\n  &.top-slide {\n    top: calc(100% - 370px);\n    left: calc(100% - 175px);\n  }\n  &.bottom-slide {\n    top: 100%;\n    right: calc(100% + -100px);\n  }\n  ul,\n  li {\n    padding: 0;\n    margin: 0;\n    list-style: none;\n  }\n  .slider {\n    position: relative;\n    max-width: 300px;\n    width: 100%;\n    height: 270px;\n    margin: 0;\n    li {\n      position: absolute;\n      left: 0px;\n      top: 0px;\n      opacity: 0;\n      width: inherit;\n      height: inherit;\n      transition: opacity 0.5s;\n      background: transparent;\n      img {\n        width: 100%;\n        height: 180px;\n        border-radius: 4px;\n        background-color: #fafafa;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n      p {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 10px;\n        line-height: 12px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        background-color: #281f33;\n      }\n      div {\n        background-color: #fafafa;\n        height: 180px;\n        border-radius: 4px;\n        display: flex;\n        justify-content: center;\n        flex-direction: column;\n        align-items: center;\n        img {\n          width: 90%;\n        }\n        & + * {\n          margin-top: 13px;\n        }\n      }\n      span {\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 500;\n        font-size: 15px;\n        line-height: 15px;\n        text-align: center;\n        letter-spacing: -0.015em;\n        color: #fafafa;\n        display: flex;\n        justify-content: center;\n        background-color: #281f33;\n        & + * {\n          margin-top: 10px;\n        }\n      }\n    }\n    .end-div {\n      div {\n        height: 130px;\n        width: 100%;\n        background-color: #fafafa;\n        display: flex;\n        align-items: center;\n        border-radius: 4px;\n        img {\n          width: 100%;\n          height: 115px;\n          object-fit: contain;\n        }\n      }\n      .lema-end {\n        justify-content: center;\n        justify-content: space-evenly;\n        height: 110px;\n        background-color: #281f33;\n        flex-direction: column;\n        justify-content: space-evenly;\n        border-radius: inherit;\n      }\n      button {\n        display: none;\n        justify-content: center;\n        align-items: center;\n        padding: 10px;\n        width: 160px;\n        height: 30px;\n        border: 1px solid #d4d1d7;\n        border-radius: 15px;\n        color: #fafafa;\n        background-color: #281f33;\n        font-family: \"Avenir Next\";\n        font-style: normal;\n        font-weight: 400;\n        font-size: 18px;\n        line-height: 25px;\n        letter-spacing: -0.015em;\n        position: absolute;\n        left: 22%;\n        top: 90%;\n        cursor: pointer;\n      }\n    }\n  }\n  li:first-child {\n    opacity: 1;\n  }\n  .menu {\n    margin: 0;\n    text-align: center;\n    li {\n      display: inline-block;\n      text-align: center;\n      & + * {\n        margin-left: 15px;\n      }\n      a {\n        display: inline-block;\n        text-decoration: none;\n        background-color: #c4c4c4;\n        width: 10px;\n        height: 10px;\n        border-radius: 100%;\n        cursor: pointer;\n      }\n      #slidea1 {\n        background-color: #e33aa9;\n      }\n    }\n  }\n"])));
 
 exports.Slider = Slider;

package/dist/components/organisms/PanelLayout/PanelLayout.stories.js

@@ -0,0 +1,87 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.PanelLayoutDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ButtonV = require("../../atoms/ButtonV2");
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _templateObject;
+
+var TwoColumns = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  width: 100%;\n  grid-auto-rows: 1fr;\n  grid-template-columns: 85% 15%;\n  grid-template-rows: 100%;\n  gap: 0px 10px;\n  grid-template-areas: \"first second\";\n  .first {\n    grid-area: first;\n    width: 100%;\n    margin-left: 50px;\n    display: flex;\n  }\n  .second {\n    grid-area: second;\n    width: 100%;\n  }\n"])));
+
+var _default = {
+  title: "Components/organisms/PanelLayout",
+  component: _index.PanelLayout
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.PanelLayout, (0, _objectSpread2.default)({}, args));
+};
+
+var PanelLayoutDefault = Template.bind({});
+exports.PanelLayoutDefault = PanelLayoutDefault;
+PanelLayoutDefault.args = {
+  header: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TwoColumns, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "first",
+      children: "Productos"
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "second",
+      children: "Precio"
+    })]
+  }),
+  body: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(TwoColumns, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "first",
+        children: "Nombre de producto 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "second",
+        children: "Precio de producto 1"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(TwoColumns, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "first",
+        children: "Nombre de producto 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: "second",
+        children: "Precio de producto 1"
+      })]
+    })]
+  }),
+  footer: /*#__PURE__*/(0, _jsxRuntime.jsxs)(TwoColumns, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      className: "first",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        id: "1",
+        label: "Seleccionar todos",
+        type: "pink"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        id: "2",
+        label: "Manual"
+      })]
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "second",
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ButtonV.ButtonV2, {
+        id: "3",
+        label: "Siguiente",
+        type: "pink"
+      })
+    })]
+  })
+};

package/dist/components/organisms/PanelLayout/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelLayout = void 0;
+
+var _styles = require("./styles");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var PanelLayout = function PanelLayout(_ref) {
+  var header = _ref.header,
+      body = _ref.body,
+      footer = _ref.footer;
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_styles.Container, {
+    children: [header ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Header, {
+      children: header
+    }) : null, body ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Body, {
+      children: body
+    }) : null, footer ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Footer, {
+      children: footer
+    }) : null]
+  });
+};
+
+exports.PanelLayout = PanelLayout;

package/dist/components/organisms/PanelLayout/styles.js

@@ -0,0 +1,32 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Header = exports.Footer = exports.Container = exports.Body = void 0;
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _variables = require("../../../global-files/variables");
+
+var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: grid;\n  grid-auto-rows: 1fr;\n  grid-template-columns: 1fr;\n  grid-template-rows: 34px 1fr 300px;\n  gap: 0px 0px;\n  grid-template-areas:\n    \"header\"\n    \"body\"\n    \"footer\";\n  font-family: ", ", sans-serif;\n  font-size: 12px;\n"])), _variables.FontFamily.RobotoMedium);
+
+exports.Container = Container;
+
+var Header = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: header;\n  background: #8a6caa;\n  color: #ffffff;\n  border-radius: 5px 5px 0px 0px;\n  display: flex;\n  align-items: center;\n"])));
+
+exports.Header = Header;
+
+var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: body;\n"])));
+
+exports.Body = Body;
+
+var Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  grid-area: footer;\n"])));
+
+exports.Footer = Footer;

package/dist/index.js

@@ -1174,6 +1174,19 @@ Object.keys(_index87).forEach(function (key) {
   });
 });
 
+var _PanelLayout = require("./components/organisms/PanelLayout");
+
+Object.keys(_PanelLayout).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PanelLayout[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _PanelLayout[key];
+    }
+  });
+});
+
 var _ChangePasswordLogin = require("./components/pages/ChangePasswordLogin");
 
 Object.keys(_ChangePasswordLogin).forEach(function (key) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.4.14",
+  "version": "21.4.16",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

package/src/components/atoms/SliderToolTip/styles.js

@@ -46,7 +46,7 @@ export const Slider = styled.div`
   }
   &.bottom-slide {
     top: 100%;
-    right: calc(100% + -70px);
+    right: calc(100% + -100px);
   }
   ul,
   li {

package/src/components/organisms/PanelLayout/PanelLayout.stories.js

@@ -0,0 +1,63 @@
+import styled from "styled-components";
+import { ButtonV2 } from "../../atoms/ButtonV2";
+import { PanelLayout } from "./index";
+
+const TwoColumns = styled.div`
+  display: grid;
+  width: 100%;
+  grid-auto-rows: 1fr;
+  grid-template-columns: 85% 15%;
+  grid-template-rows: 100%;
+  gap: 0px 10px;
+  grid-template-areas: "first second";
+  .first {
+    grid-area: first;
+    width: 100%;
+    margin-left: 50px;
+    display: flex;
+  }
+  .second {
+    grid-area: second;
+    width: 100%;
+  }
+`;
+
+export default {
+  title: "Components/organisms/PanelLayout",
+  component: PanelLayout,
+};
+
+const Template = (args) => <PanelLayout {...args} />;
+
+export const PanelLayoutDefault = Template.bind({});
+PanelLayoutDefault.args = {
+  header: (
+    <TwoColumns>
+      <div className="first">Productos</div>
+      <div className="second">Precio</div>
+    </TwoColumns>
+  ),
+  body: (
+    <>
+      <TwoColumns>
+        <div className="first">Nombre de producto 1</div>
+        <div className="second">Precio de producto 1</div>
+      </TwoColumns>
+      <TwoColumns>
+        <div className="first">Nombre de producto 1</div>
+        <div className="second">Precio de producto 1</div>
+      </TwoColumns>
+    </>
+  ),
+  footer: (
+    <TwoColumns>
+      <div className="first">
+        <ButtonV2 id="1" label="Seleccionar todos" type="pink" />
+        <ButtonV2 id="2" label="Manual" />
+      </div>
+      <div className="second">
+        <ButtonV2 id="3" label="Siguiente" type="pink" />
+      </div>
+    </TwoColumns>
+  ),
+};

package/src/components/organisms/PanelLayout/index.js

@@ -0,0 +1,11 @@
+import { Container, Header, Body, Footer } from "./styles";
+
+export const PanelLayout = ({ header, body, footer }) => {
+  return (
+    <Container>
+      {header ? <Header>{header}</Header> : null}
+      {body ? <Body>{body}</Body> : null}
+      {footer ? <Footer>{footer}</Footer> : null}
+    </Container>
+  );
+};

package/src/components/organisms/PanelLayout/styles.js

@@ -0,0 +1,33 @@
+import styled from "styled-components";
+import { FontFamily } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: grid;
+  grid-auto-rows: 1fr;
+  grid-template-columns: 1fr;
+  grid-template-rows: 34px 1fr 300px;
+  gap: 0px 0px;
+  grid-template-areas:
+    "header"
+    "body"
+    "footer";
+  font-family: ${FontFamily.RobotoMedium}, sans-serif;
+  font-size: 12px;
+`;
+
+export const Header = styled.div`
+  grid-area: header;
+  background: #8a6caa;
+  color: #ffffff;
+  border-radius: 5px 5px 0px 0px;
+  display: flex;
+  align-items: center;
+`;
+
+export const Body = styled.div`
+  grid-area: body;
+`;
+
+export const Footer = styled.div`
+  grid-area: footer;
+`;

package/src/index.js

@@ -94,6 +94,7 @@ export * from "./components/organisms/RangeCalendar";
 export * from "./components/organisms/TableResizable";
 export * from "./components/organisms/SideModal/index";
 export * from "./components/organisms/GridProducts/index";
+export * from "./components/organisms/PanelLayout";
 
 //pages
 export * from "./components/pages/ChangePasswordLogin";