@lideralia/alife-uikit 1.2.74 → 1.2.76

package/dist/atoms/Card/Card.js

@@ -23,11 +23,11 @@ const _excluded = ["children"];
 const CardWrapper = (0, _styledComponents.default)(_Layout.Box).withConfig({
   displayName: "Card__CardWrapper",
   componentId: "sc-1jjbkrl-0"
-})((0, _css.default)({
+})(["position:relative;overflow:hidden;", " ", " ", " ", " ", " &::before{content:'';position:absolute;top:0;left:0;width:100%;height:100%;background-image:", ";filter:grayscale(100%);background-size:cover;background-repeat:no-repeat;background-position:center;}"], _styledSystem.layout, _styledSystem.color, _styledSystem.shadow, _styledSystem.space, (0, _css.default)({
   borderRadius: 5,
   background: 'white',
   boxShadow: 'bottom'
-}), _styledSystem.layout, _styledSystem.color, _styledSystem.shadow);
+}), props => props.backgroundImage ? "url(".concat(props.backgroundImage, ")") : 'none');
 
 const CardBox = props => {
   const {

package/dist/molecules/CarouselScroll/CarouselScrollFlowers.js

@@ -104,7 +104,8 @@ const CarouselScrollFlowers = _ref => {
     as: "label",
     sizeText: "display14"
   }, props, {
-    marginTop: "10px"
+    marginTop: "10px",
+    textAlign: "center"
   }), element.name), _react.default.createElement(_Typography.Text, {
     color: "green",
     as: "span",

package/dist/organisms/Cards/CardUsersResultOfFlowers.js

@@ -0,0 +1,193 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardUsersResultOfFlowers = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Avatar = require("../../atoms/Avatar");
+
+var _Card = require("../../atoms/Card");
+
+var _Icon = require("../../atoms/Icon");
+
+var _Icons = require("../../atoms/Icons");
+
+var _Layout = require("../../atoms/Layout");
+
+var _Typography = require("../../atoms/Typography");
+
+const _excluded = ["urlImage"],
+      _excluded2 = ["lines", "messageNoResults", "isLoading", "messageLoading"];
+
+const CardUsersResultOfFlowers = _ref => {
+  let {
+    urlImage
+  } = _ref,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return _react.default.createElement(_Card.Card, (0, _extends2.default)({
+    position: "relative",
+    width: "100%",
+    padding: 3,
+    paddingBottom: "92px",
+    backgroundImage: urlImage
+  }, props), _react.default.createElement(CardUsersResultOfFlowers.Header, props), _react.default.createElement(CardUsersResultOfFlowers.Body, props));
+};
+
+exports.CardUsersResultOfFlowers = CardUsersResultOfFlowers;
+
+CardUsersResultOfFlowers.Header = _ref2 => {
+  let {
+    description
+  } = _ref2;
+  return _react.default.createElement(_Layout.Flex, {
+    backgroundColor: "#F2B4401F",
+    borderRadius: 4,
+    padding: 3
+  }, _react.default.createElement(_Icon.Icon, {
+    color: "yellow",
+    sizeIcon: "display24"
+  }, _react.default.createElement(_Icons.IconInfoCircle, null)), _react.default.createElement(_Typography.Text, {
+    sizeText: "display14",
+    textAlign: "center",
+    color: "black84"
+  }, description));
+};
+
+CardUsersResultOfFlowers.Body = _ref3 => {
+  let {
+    lines,
+    messageNoResults,
+    isLoading,
+    messageLoading
+  } = _ref3,
+      props = (0, _objectWithoutProperties2.default)(_ref3, _excluded2);
+
+  const renderContent = () => {
+    if (isLoading) {
+      return _react.default.createElement(_Typography.Text, {
+        sizeText: "display14",
+        textAlign: "center",
+        color: "black84"
+      }, messageLoading);
+    }
+
+    if (lines.length === 0) {
+      return _react.default.createElement(_Typography.Text, {
+        sizeText: "display14",
+        textAlign: "center",
+        color: "black84"
+      }, messageNoResults);
+    }
+
+    return lines.map(line => _react.default.createElement(CardUsersResultOfFlowers.User, (0, _extends2.default)({
+      key: line.lineId,
+      line: line
+    }, props)));
+  };
+
+  return _react.default.createElement(_Layout.Flex, {
+    width: "100%",
+    minWidth: "100%",
+    flexDirection: "column",
+    paddingTop: 2
+  }, _react.default.createElement(_Layout.Box, {
+    overflowY: "scroll",
+    maxHeight: "315px"
+  }, renderContent()));
+};
+
+CardUsersResultOfFlowers.User = _ref4 => {
+  let {
+    line,
+    actionLinkUser
+  } = _ref4;
+  const {
+    pictures,
+    name,
+    lineId,
+    nameUrl
+  } = line;
+  return _react.default.createElement(_Card.Card, {
+    marginY: "6px",
+    style: {
+      boxShadow: 'none',
+      borderRadius: '12px',
+      cursor: 'pointer',
+      backgroundColor: '#F2F2F3'
+    },
+    onClick: () => actionLinkUser(lineId, nameUrl)
+  }, _react.default.createElement(_Layout.Flex, {
+    padding: "6px",
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "flex-start"
+  }, _react.default.createElement(_Layout.GridItem, {
+    gridArea: "avatar",
+    marginRight: 1
+  }, _react.default.createElement(_Avatar.Avatar, {
+    width: "36px",
+    height: "36px",
+    src: pictures === null || pictures === void 0 ? void 0 : pictures.m,
+    alt: name,
+    styleImg: {
+      objectFit: 'cover'
+    }
+  })), _react.default.createElement(_Typography.Text, {
+    sizeText: "display13",
+    color: "black",
+    fontWeight: "normal",
+    style: {
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis'
+    },
+    overflow: "hidden",
+    width: "100%"
+  }, name), _react.default.createElement(_Icon.Icon, {
+    sizeIcon: "display24",
+    color: "black60",
+    paddingRight: 2
+  }, _react.default.createElement(_Icons.IconArrowRight, null))));
+};
+
+CardUsersResultOfFlowers.Header.propTypes = {
+  description: _propTypes.default.string.isRequired
+};
+CardUsersResultOfFlowers.Body.propTypes = {
+  messageNoResults: _propTypes.default.string.isRequired,
+  isLoading: _propTypes.default.bool.isRequired,
+  messageLoading: _propTypes.default.string.isRequired,
+  lines: _propTypes.default.arrayOf(_propTypes.default.shape({
+    lineId: _propTypes.default.number,
+    pictures: _propTypes.default.shape({
+      m: _propTypes.default.string
+    }),
+    name: _propTypes.default.string,
+    actionLinkUser: _propTypes.default.func,
+    nameUrl: _propTypes.default.string
+  })).isRequired,
+  actionLinkUser: _propTypes.default.func.isRequired
+};
+CardUsersResultOfFlowers.User.propTypes = {
+  line: _propTypes.default.shape({
+    lineId: _propTypes.default.number,
+    pictures: _propTypes.default.shape({
+      m: _propTypes.default.string
+    }),
+    name: _propTypes.default.string,
+    actionLinkUser: _propTypes.default.func,
+    nameUrl: _propTypes.default.string
+  }).isRequired,
+  actionLinkUser: _propTypes.default.func.isRequired
+};
+CardUsersResultOfFlowers.Body.defaultProps = {};

package/dist/organisms/Cards/CardUsersResultOfFlowers.stories.js

@@ -0,0 +1,82 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.UsersResultOfFlowers = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("../../atoms/Layout");
+
+var _CardUsersResultOfFlowers = require("./CardUsersResultOfFlowers");
+
+var _default = {
+  title: 'Organisms/Cards/UsersResultOfFlowers',
+  component: _CardUsersResultOfFlowers.CardUsersResultOfFlowers
+};
+exports.default = _default;
+
+const Template = args => _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
+  justifyContent: "center",
+  alignItems: "center"
+}, _react.default.createElement(_Layout.Col, {
+  width: [1, 1, 1 / 2]
+}, _react.default.createElement(_CardUsersResultOfFlowers.CardUsersResultOfFlowers, (0, _extends2.default)({
+  maxWidth: "339px",
+  minWidth: "290px"
+}, args)))));
+
+const UsersResultOfFlowers = Template.bind({});
+exports.UsersResultOfFlowers = UsersResultOfFlowers;
+UsersResultOfFlowers.args = {
+  description: 'Sólo se muestran servicios en los que sea posible el envío de flores',
+  messageNoResults: 'No hay resultados',
+  isLoading: false,
+  urlImage: '/images/flowers.png',
+  messageLoading: 'Cargando...',
+  lines: [{
+    lineId: 1,
+    pictures: {
+      m: 'https://picsum.photos/id/237/96/96'
+    },
+    name: 'Gerardo García Parada',
+    nameUrl: 'gerardo-garcia-parada'
+  }, {
+    lineId: 2,
+    name: 'Josefa Manola',
+    pictures: {
+      m: 'https://picsum.photos/id/237/96/96'
+    },
+    nameUrl: 'josefa-manola'
+  }, {
+    lineId: 3,
+    name: 'Antonia Maria',
+    pictures: null,
+    nameUrl: 'antonia-maria'
+  }, {
+    lineId: 4,
+    name: 'Pedro Perez',
+    pictures: null,
+    nameUrl: 'pedro-perez'
+  }, {
+    lineId: 5,
+    name: 'Juanito Perez',
+    pictures: {
+      m: 'https://picsum.photos/id/237/96/96'
+    },
+    nameUrl: 'juanito-perez'
+  }, {
+    lineId: 6,
+    name: 'Ivan Ivanovich',
+    pictures: {
+      m: 'https://picsum.photos/id/237/96/96'
+    },
+    nameUrl: 'ivan-ivanovich'
+  }],
+  actionLinkUser: (lineId, nameUrl) => void 0
+};

package/dist/organisms/Cards/SearchSendFlowers.js

@@ -0,0 +1,106 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CardSearchSendFlowers = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Button = require("../../atoms/Button");
+
+var _Card = require("../../atoms/Card");
+
+var _Input = require("../../atoms/Input");
+
+var _Layout = require("../../atoms/Layout");
+
+var _Typography = require("../../atoms/Typography");
+
+const _excluded = ["urlImage"];
+
+const CardSearchSendFlowers = _ref => {
+  let {
+    urlImage
+  } = _ref,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return _react.default.createElement(_Card.Card, (0, _extends2.default)({
+    position: "relative",
+    width: "100%",
+    padding: 3,
+    paddingBottom: "92px",
+    backgroundImage: urlImage
+  }, props), _react.default.createElement(CardSearchSendFlowers.Header, props), _react.default.createElement(CardSearchSendFlowers.Body, props));
+};
+
+exports.CardSearchSendFlowers = CardSearchSendFlowers;
+
+CardSearchSendFlowers.Header = _ref2 => {
+  let {
+    title,
+    description
+  } = _ref2;
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_Typography.Text, {
+    sizeText: "display16",
+    fontWeight: "bold",
+    textAlign: "center"
+  }, title), _react.default.createElement(_Typography.Text, {
+    sizeText: "display14",
+    textAlign: "center"
+  }, description));
+};
+
+CardSearchSendFlowers.Body = _ref3 => {
+  let {
+    customColor,
+    customTextColor,
+    handleSubmit,
+    titleSearch,
+    placeholderMessage,
+    isDisabled,
+    onChange
+  } = _ref3;
+  return _react.default.createElement(_Layout.Flex, {
+    marginTop: 2,
+    flexDirection: "column"
+  }, _react.default.createElement(_Input.Input, {
+    onChange: onChange,
+    id: "name",
+    name: "name",
+    sizeInput: "big",
+    placeholderMessage: placeholderMessage
+  }), _react.default.createElement(_Button.Button, {
+    marginTop: 2,
+    backgroundColor: customColor,
+    color: customTextColor,
+    colorType: customColor || 'orange',
+    action: () => handleSubmit(),
+    disabled: isDisabled
+  }, titleSearch));
+};
+
+CardSearchSendFlowers.Header.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  description: _propTypes.default.string.isRequired
+};
+CardSearchSendFlowers.Body.propTypes = {
+  customColor: _propTypes.default.string,
+  customTextColor: _propTypes.default.string,
+  handleSubmit: _propTypes.default.func.isRequired,
+  titleSearch: _propTypes.default.string.isRequired,
+  placeholderMessage: _propTypes.default.string.isRequired,
+  onChange: _propTypes.default.func.isRequired,
+  isDisabled: _propTypes.default.bool.isRequired
+};
+CardSearchSendFlowers.Body.defaultProps = {
+  customColor: '',
+  customTextColor: ''
+};

package/dist/organisms/Cards/SearchSendFlowers.stories.js

@@ -0,0 +1,47 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SearchSendFlowers = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Layout = require("../../atoms/Layout");
+
+var _SearchSendFlowers = require("./SearchSendFlowers");
+
+var _default = {
+  title: 'Organisms/Cards/SearchSendFlowers',
+  component: _SearchSendFlowers.CardSearchSendFlowers
+};
+exports.default = _default;
+
+const Template = args => _react.default.createElement(_Layout.Container, null, _react.default.createElement(_Layout.Row, {
+  justifyContent: "center",
+  alignItems: "center"
+}, _react.default.createElement(_Layout.Col, {
+  width: [1, 1, 1 / 2]
+}, _react.default.createElement(_SearchSendFlowers.CardSearchSendFlowers, (0, _extends2.default)({
+  maxWidth: "339px",
+  minWidth: "290px"
+}, args)))));
+
+const SearchSendFlowers = Template.bind({});
+exports.SearchSendFlowers = SearchSendFlowers;
+SearchSendFlowers.args = {
+  title: '¿A quién quieres enviar las flores?',
+  description: 'Para elegir las flores, escribe el nombre o apellido del difunto y selecciónalo para ver los arreglos florales de tu preferencia.',
+  customColor: '',
+  customTextColor: '',
+  handleSubmit: () => void 0,
+  titleSearch: 'Buscar',
+  placeholderMessage: 'Nombre y/o apellidos',
+  onChange: (id, value) => void 0,
+  urlImage: '/images/flowers.png',
+  isDisabled: false
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lideralia/alife-uikit",
-  "version": "1.2.74",
+  "version": "1.2.76",
   "description": "Librería y documentación de componentes, basada en el Design System de Alife.",
   "homepage": "https://github.com/lideralia/alife-frontend-components#readme",
   "bugs": {