@bigbinary/neeto-molecules 3.15.15 → 3.15.16

package/README.md

@@ -17,6 +17,7 @@ https://neeto-molecules.neeto.com/
 - [BrowserSupport](./docs/components/BrowserSupport.md)
 - [Builder](./docs/components/Builder.md)
 - [CalendarView](./docs/components/CalendarView.md)
+- [CardLayout](./docs/components/CardLayout.md)
 - [Codeblock](./docs/components/Codeblock.md)
 - [Columns](./docs/components/Columns.md)
 - [ConfirmationModal](./docs/components/ConfirmationModal.md)

package/dist/CardLayout.js

@@ -0,0 +1,42 @@
+import classnames from 'classnames';
+import Typography from '@bigbinary/neetoui/Typography';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var CardLayout = function CardLayout(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$containerClassNa = _ref.containerClassName,
+    containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? null : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? null : _ref$description,
+    actionBlock = _ref.actionBlock,
+    children = _ref.children;
+  return /*#__PURE__*/jsx("div", {
+    "data-testid": "neeto-molecules-card-container",
+    className: classnames(["neeto-molecules-card__container mx-auto w-full max-w-3xl", containerClassName]),
+    children: /*#__PURE__*/jsxs("div", {
+      "data-testid": "neeto-molecules-card",
+      className: classnames(["neeto-molecules-card neeto-ui-border-gray-300 neeto-ui-rounded-lg my-6 w-full border", className]),
+      children: [/*#__PURE__*/jsxs("div", {
+        className: "neeto-molecules-card__content p-4",
+        children: [title && /*#__PURE__*/jsx(Typography, {
+          className: "mb-2",
+          style: "h2",
+          children: title
+        }), description && /*#__PURE__*/jsx(Typography, {
+          className: "mb-3",
+          style: "body1",
+          children: description
+        }), children]
+      }), actionBlock && /*#__PURE__*/jsx("div", {
+        className: classnames(["neeto-molecules-card__action-block neeto-ui-bg-gray-50 neeto-ui-rounded-lg sticky bottom-0 w-full rounded-t-none p-4", className]),
+        children: actionBlock
+      })]
+    })
+  });
+};
+
+export { CardLayout as default };
+//# sourceMappingURL=CardLayout.js.map

package/dist/CardLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardLayout.js","sources":["../src/components/CardLayout/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst CardLayout = ({\n  className = \"\",\n  containerClassName = \"\",\n  title = null,\n  description = null,\n  actionBlock,\n  children,\n}) => (\n  <div\n    data-testid=\"neeto-molecules-card-container\"\n    className={classnames([\n      \"neeto-molecules-card__container mx-auto w-full max-w-3xl\",\n      containerClassName,\n    ])}\n  >\n    <div\n      data-testid=\"neeto-molecules-card\"\n      className={classnames([\n        \"neeto-molecules-card neeto-ui-border-gray-300 neeto-ui-rounded-lg my-6 w-full border\",\n        className,\n      ])}\n    >\n      <div className=\"neeto-molecules-card__content p-4\">\n        {title && (\n          <Typography className=\"mb-2\" style=\"h2\">\n            {title}\n          </Typography>\n        )}\n        {description && (\n          <Typography className=\"mb-3\" style=\"body1\">\n            {description}\n          </Typography>\n        )}\n        {children}\n      </div>\n      {actionBlock && (\n        <div\n          className={classnames([\n            \"neeto-molecules-card__action-block neeto-ui-bg-gray-50 neeto-ui-rounded-lg sticky bottom-0 w-full rounded-t-none p-4\",\n            className,\n          ])}\n        >\n          {actionBlock}\n        </div>\n      )}\n    </div>\n  </div>\n);\n\nCardLayout.propTypes = {\n  /**\n   * To set the title of the card.\n   */\n  title: PropTypes.string,\n  /**\n   * To set the description of the card.\n   */\n  description: PropTypes.node,\n  /**\n   * To set custom class name to the card.\n   */\n  className: PropTypes.string,\n  /**\n   * To set custom class name to the card container.\n   */\n  containerClassName: PropTypes.string,\n  /**\n   * To specify the content to be rendered in the card footer.\n   */\n  actionBlock: PropTypes.node,\n  /**\n   * To specify the components to be rendered inside the card.\n   */\n  children: PropTypes.node,\n};\n\nexport default CardLayout;\n"],"names":["CardLayout","_ref","_ref$className","className","_ref$containerClassNa","containerClassName","_ref$title","title","_ref$description","description","actionBlock","children","_jsx","classnames","_jsxs","Typography","style"],"mappings":";;;;AAIA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CACdE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IAAAE,qBAAA,GAAAH,IAAA,CACdI,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,qBAAA;IAAAE,UAAA,GAAAL,IAAA,CACvBM,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,UAAA;IAAAE,gBAAA,GAAAP,IAAA,CACZQ,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,gBAAA;IAClBE,WAAW,GAAAT,IAAA,CAAXS,WAAW;IACXC,QAAQ,GAAAV,IAAA,CAARU,QAAQ,CAAA;AAAA,EAAA,oBAERC,GAAA,CAAA,KAAA,EAAA;AACE,IAAA,aAAA,EAAY,gCAAgC;IAC5CT,SAAS,EAAEU,UAAU,CAAC,CACpB,0DAA0D,EAC1DR,kBAAkB,CACnB,CAAE;AAAAM,IAAAA,QAAA,eAEHG,IAAA,CAAA,KAAA,EAAA;AACE,MAAA,aAAA,EAAY,sBAAsB;MAClCX,SAAS,EAAEU,UAAU,CAAC,CACpB,sFAAsF,EACtFV,SAAS,CACV,CAAE;AAAAQ,MAAAA,QAAA,gBAEHG,IAAA,CAAA,KAAA,EAAA;AAAKX,QAAAA,SAAS,EAAC,mCAAmC;AAAAQ,QAAAA,QAAA,EAC/CJ,CAAAA,KAAK,iBACJK,GAAA,CAACG,UAAU,EAAA;AAACZ,UAAAA,SAAS,EAAC,MAAM;AAACa,UAAAA,KAAK,EAAC,IAAI;AAAAL,UAAAA,QAAA,EACpCJ,KAAAA;AAAK,SACI,CACb,EACAE,WAAW,iBACVG,GAAA,CAACG,UAAU,EAAA;AAACZ,UAAAA,SAAS,EAAC,MAAM;AAACa,UAAAA,KAAK,EAAC,OAAO;AAAAL,UAAAA,QAAA,EACvCF,WAAAA;SACS,CACb,EACAE,QAAQ,CAAA;AAAA,OACN,CAAC,EACLD,WAAW,iBACVE,GAAA,CAAA,KAAA,EAAA;QACET,SAAS,EAAEU,UAAU,CAAC,CACpB,sHAAsH,EACtHV,SAAS,CACV,CAAE;AAAAQ,QAAAA,QAAA,EAEFD,WAAAA;AAAW,OACT,CACN,CAAA;KACE,CAAA;AAAC,GACH,CAAC,CAAA;AAAA;;;;"}

package/dist/cjs/CardLayout.js

@@ -0,0 +1,44 @@
+'use strict';
+
+var classnames = require('classnames');
+var Typography = require('@bigbinary/neetoui/Typography');
+var jsxRuntime = require('react/jsx-runtime');
+
+var CardLayout = function CardLayout(_ref) {
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$containerClassNa = _ref.containerClassName,
+    containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa,
+    _ref$title = _ref.title,
+    title = _ref$title === void 0 ? null : _ref$title,
+    _ref$description = _ref.description,
+    description = _ref$description === void 0 ? null : _ref$description,
+    actionBlock = _ref.actionBlock,
+    children = _ref.children;
+  return /*#__PURE__*/jsxRuntime.jsx("div", {
+    "data-testid": "neeto-molecules-card-container",
+    className: classnames(["neeto-molecules-card__container mx-auto w-full max-w-3xl", containerClassName]),
+    children: /*#__PURE__*/jsxRuntime.jsxs("div", {
+      "data-testid": "neeto-molecules-card",
+      className: classnames(["neeto-molecules-card neeto-ui-border-gray-300 neeto-ui-rounded-lg my-6 w-full border", className]),
+      children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: "neeto-molecules-card__content p-4",
+        children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          className: "mb-2",
+          style: "h2",
+          children: title
+        }), description && /*#__PURE__*/jsxRuntime.jsx(Typography, {
+          className: "mb-3",
+          style: "body1",
+          children: description
+        }), children]
+      }), actionBlock && /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: classnames(["neeto-molecules-card__action-block neeto-ui-bg-gray-50 neeto-ui-rounded-lg sticky bottom-0 w-full rounded-t-none p-4", className]),
+        children: actionBlock
+      })]
+    })
+  });
+};
+
+module.exports = CardLayout;
+//# sourceMappingURL=CardLayout.js.map

package/dist/cjs/CardLayout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CardLayout.js","sources":["../../src/components/CardLayout/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst CardLayout = ({\n  className = \"\",\n  containerClassName = \"\",\n  title = null,\n  description = null,\n  actionBlock,\n  children,\n}) => (\n  <div\n    data-testid=\"neeto-molecules-card-container\"\n    className={classnames([\n      \"neeto-molecules-card__container mx-auto w-full max-w-3xl\",\n      containerClassName,\n    ])}\n  >\n    <div\n      data-testid=\"neeto-molecules-card\"\n      className={classnames([\n        \"neeto-molecules-card neeto-ui-border-gray-300 neeto-ui-rounded-lg my-6 w-full border\",\n        className,\n      ])}\n    >\n      <div className=\"neeto-molecules-card__content p-4\">\n        {title && (\n          <Typography className=\"mb-2\" style=\"h2\">\n            {title}\n          </Typography>\n        )}\n        {description && (\n          <Typography className=\"mb-3\" style=\"body1\">\n            {description}\n          </Typography>\n        )}\n        {children}\n      </div>\n      {actionBlock && (\n        <div\n          className={classnames([\n            \"neeto-molecules-card__action-block neeto-ui-bg-gray-50 neeto-ui-rounded-lg sticky bottom-0 w-full rounded-t-none p-4\",\n            className,\n          ])}\n        >\n          {actionBlock}\n        </div>\n      )}\n    </div>\n  </div>\n);\n\nCardLayout.propTypes = {\n  /**\n   * To set the title of the card.\n   */\n  title: PropTypes.string,\n  /**\n   * To set the description of the card.\n   */\n  description: PropTypes.node,\n  /**\n   * To set custom class name to the card.\n   */\n  className: PropTypes.string,\n  /**\n   * To set custom class name to the card container.\n   */\n  containerClassName: PropTypes.string,\n  /**\n   * To specify the content to be rendered in the card footer.\n   */\n  actionBlock: PropTypes.node,\n  /**\n   * To specify the components to be rendered inside the card.\n   */\n  children: PropTypes.node,\n};\n\nexport default CardLayout;\n"],"names":["CardLayout","_ref","_ref$className","className","_ref$containerClassNa","containerClassName","_ref$title","title","_ref$description","description","actionBlock","children","_jsx","classnames","_jsxs","Typography","style"],"mappings":";;;;;;AAIA,IAAMA,UAAU,GAAG,SAAbA,UAAUA,CAAAC,IAAA,EAAA;AAAA,EAAA,IAAAC,cAAA,GAAAD,IAAA,CACdE,SAAS;AAATA,IAAAA,SAAS,GAAAD,cAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,cAAA;IAAAE,qBAAA,GAAAH,IAAA,CACdI,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,qBAAA;IAAAE,UAAA,GAAAL,IAAA,CACvBM,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,UAAA;IAAAE,gBAAA,GAAAP,IAAA,CACZQ,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,gBAAA;IAClBE,WAAW,GAAAT,IAAA,CAAXS,WAAW;IACXC,QAAQ,GAAAV,IAAA,CAARU,QAAQ,CAAA;AAAA,EAAA,oBAERC,cAAA,CAAA,KAAA,EAAA;AACE,IAAA,aAAA,EAAY,gCAAgC;IAC5CT,SAAS,EAAEU,UAAU,CAAC,CACpB,0DAA0D,EAC1DR,kBAAkB,CACnB,CAAE;AAAAM,IAAAA,QAAA,eAEHG,eAAA,CAAA,KAAA,EAAA;AACE,MAAA,aAAA,EAAY,sBAAsB;MAClCX,SAAS,EAAEU,UAAU,CAAC,CACpB,sFAAsF,EACtFV,SAAS,CACV,CAAE;AAAAQ,MAAAA,QAAA,gBAEHG,eAAA,CAAA,KAAA,EAAA;AAAKX,QAAAA,SAAS,EAAC,mCAAmC;AAAAQ,QAAAA,QAAA,EAC/CJ,CAAAA,KAAK,iBACJK,cAAA,CAACG,UAAU,EAAA;AAACZ,UAAAA,SAAS,EAAC,MAAM;AAACa,UAAAA,KAAK,EAAC,IAAI;AAAAL,UAAAA,QAAA,EACpCJ,KAAAA;AAAK,SACI,CACb,EACAE,WAAW,iBACVG,cAAA,CAACG,UAAU,EAAA;AAACZ,UAAAA,SAAS,EAAC,MAAM;AAACa,UAAAA,KAAK,EAAC,OAAO;AAAAL,UAAAA,QAAA,EACvCF,WAAAA;SACS,CACb,EACAE,QAAQ,CAAA;AAAA,OACN,CAAC,EACLD,WAAW,iBACVE,cAAA,CAAA,KAAA,EAAA;QACET,SAAS,EAAEU,UAAU,CAAC,CACpB,sHAAsH,EACtHV,SAAS,CACV,CAAE;AAAAQ,QAAAA,QAAA,EAEFD,WAAAA;AAAW,OACT,CACN,CAAA;KACE,CAAA;AAAC,GACH,CAAC,CAAA;AAAA;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-molecules",
-  "version": "3.15.15",
+  "version": "3.15.16",
   "description": "A package of reusable molecular components for neeto products.",
   "repository": "git@github.com:bigbinary/neeto-molecules.git",
   "author": "Amaljith K <amaljith.k@bigbinary.com>",

package/types/CardLayout.d.ts

@@ -0,0 +1,33 @@
+import React from 'react';
+
+/**
+ *
+ * The CardLayout component is used to render the content wrapped in the card
+ *
+ * layout.
+ *
+ * @example 
+ *
+ * import CardLayout from "@bigbinary/neeto-molecules/CardLayout";
+ * 
+ * const Component = () => (
+ *   <CardLayout
+ *     title="Set start day of the week"
+ *     description="Choose your preferred start day of the week. This setting will be applied to all calendars."
+ *     actionBlock={<Button label="Primary action" />}
+ *   >
+ *     {children}
+ *   </CardLayout>
+ * );
+ * @endexample
+*/
+declare const CardLayout: React.FC<{
+  title?: string;
+  description?: React.ReactNode;
+  className?: string;
+  containerClassName?: string;
+  children?: React.ReactNode;
+  actionBlock?: React.ReactNode;
+}>;
+
+export { CardLayout as default };