@bigbinary/neeto-molecules 3.15.18 → 3.15.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,12 +1,14 @@
1
1
  'use strict';
2
2
 
3
3
  var classnames = require('classnames');
4
+ var neetoCist = require('@bigbinary/neeto-cist');
4
5
  var Typography = require('@bigbinary/neetoui/Typography');
5
6
  var jsxRuntime = require('react/jsx-runtime');
6
7
 
7
8
  var CardLayout = function CardLayout(_ref) {
8
9
  var _ref$className = _ref.className,
9
10
  className = _ref$className === void 0 ? "" : _ref$className,
11
+ icon = _ref.icon,
10
12
  _ref$containerClassNa = _ref.containerClassName,
11
13
  containerClassName = _ref$containerClassNa === void 0 ? "" : _ref$containerClassNa,
12
14
  _ref$title = _ref.title,
@@ -23,9 +25,14 @@ var CardLayout = function CardLayout(_ref) {
23
25
  className: classnames(["neeto-molecules-card neeto-ui-border-gray-300 neeto-ui-rounded-lg my-6 w-full border", className]),
24
26
  children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
25
27
  className: "neeto-molecules-card__content p-4",
26
- children: [title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
27
- className: "mb-2",
28
+ children: [icon && /*#__PURE__*/jsxRuntime.jsx("div", {
29
+ className: "neeto-molecules-card__icon-wrapper mb-4 w-full text-left",
30
+ children: icon
31
+ }), title && /*#__PURE__*/jsxRuntime.jsx(Typography, {
28
32
  style: "h2",
33
+ className: classnames(["mb-2", {
34
+ "pb-2": neetoCist.isNotPresent(description)
35
+ }]),
29
36
  children: title
30
37
  }), description && /*#__PURE__*/jsxRuntime.jsx(Typography, {
31
38
  className: "mb-3",
@@ -1 +1 @@
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;;;;"}
1
+ {"version":3,"file":"CardLayout.js","sources":["../../src/components/CardLayout/index.jsx"],"sourcesContent":["import classnames from \"classnames\";\nimport { isNotPresent } from \"neetocist\";\nimport { Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\n\nconst CardLayout = ({\n className = \"\",\n icon,\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 {icon && (\n <div className=\"neeto-molecules-card__icon-wrapper mb-4 w-full text-left\">\n {icon}\n </div>\n )}\n {title && (\n <Typography\n style=\"h2\"\n className={classnames([\n \"mb-2\",\n { \"pb-2\": isNotPresent(description) },\n ])}\n >\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 * To set the icon of the card.\n */\n icon: PropTypes.node,\n};\n\nexport default CardLayout;\n"],"names":["CardLayout","_ref","_ref$className","className","icon","_ref$containerClassNa","containerClassName","_ref$title","title","_ref$description","description","actionBlock","children","_jsx","classnames","_jsxs","Typography","style","isNotPresent"],"mappings":";;;;;;;AAKA,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;IACdE,IAAI,GAAAH,IAAA,CAAJG,IAAI;IAAAC,qBAAA,GAAAJ,IAAA,CACJK,kBAAkB;AAAlBA,IAAAA,kBAAkB,GAAAD,qBAAA,KAAG,KAAA,CAAA,GAAA,EAAE,GAAAA,qBAAA;IAAAE,UAAA,GAAAN,IAAA,CACvBO,KAAK;AAALA,IAAAA,KAAK,GAAAD,UAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,UAAA;IAAAE,gBAAA,GAAAR,IAAA,CACZS,WAAW;AAAXA,IAAAA,WAAW,GAAAD,gBAAA,KAAG,KAAA,CAAA,GAAA,IAAI,GAAAA,gBAAA;IAClBE,WAAW,GAAAV,IAAA,CAAXU,WAAW;IACXC,QAAQ,GAAAX,IAAA,CAARW,QAAQ,CAAA;AAAA,EAAA,oBAERC,cAAA,CAAA,KAAA,EAAA;AACE,IAAA,aAAA,EAAY,gCAAgC;IAC5CV,SAAS,EAAEW,UAAU,CAAC,CACpB,0DAA0D,EAC1DR,kBAAkB,CACnB,CAAE;AAAAM,IAAAA,QAAA,eAEHG,eAAA,CAAA,KAAA,EAAA;AACE,MAAA,aAAA,EAAY,sBAAsB;MAClCZ,SAAS,EAAEW,UAAU,CAAC,CACpB,sFAAsF,EACtFX,SAAS,CACV,CAAE;AAAAS,MAAAA,QAAA,gBAEHG,eAAA,CAAA,KAAA,EAAA;AAAKZ,QAAAA,SAAS,EAAC,mCAAmC;QAAAS,QAAA,EAAA,CAC/CR,IAAI,iBACHS,cAAA,CAAA,KAAA,EAAA;AAAKV,UAAAA,SAAS,EAAC,0DAA0D;AAAAS,UAAAA,QAAA,EACtER,IAAAA;AAAI,SACF,CACN,EACAI,KAAK,iBACJK,cAAA,CAACG,UAAU,EAAA;AACTC,UAAAA,KAAK,EAAC,IAAI;AACVd,UAAAA,SAAS,EAAEW,UAAU,CAAC,CACpB,MAAM,EACN;YAAE,MAAM,EAAEI,sBAAY,CAACR,WAAW,CAAA;AAAE,WAAC,CACtC,CAAE;AAAAE,UAAAA,QAAA,EAEFJ,KAAAA;AAAK,SACI,CACb,EACAE,WAAW,iBACVG,cAAA,CAACG,UAAU,EAAA;AAACb,UAAAA,SAAS,EAAC,MAAM;AAACc,UAAAA,KAAK,EAAC,OAAO;AAAAL,UAAAA,QAAA,EACvCF,WAAAA;SACS,CACb,EACAE,QAAQ,CAAA;AAAA,OACN,CAAC,EACLD,WAAW,iBACVE,cAAA,CAAA,KAAA,EAAA;QACEV,SAAS,EAAEW,UAAU,CAAC,CACpB,sHAAsH,EACtHX,SAAS,CACV,CAAE;AAAAS,QAAAA,QAAA,EAEFD,WAAAA;AAAW,OACT,CACN,CAAA;KACE,CAAA;AAAC,GACH,CAAC,CAAA;AAAA;;;;"}
@@ -12,6 +12,7 @@ var Checkbox = require('@bigbinary/neetoui/formik/Checkbox');
12
12
  var Button$1 = require('@bigbinary/neetoui/formik/Button');
13
13
  var BlockNavigation = require('@bigbinary/neetoui/formik/BlockNavigation');
14
14
  var reactI18next = require('react-i18next');
15
+ var CardLayout = require('./CardLayout.js');
15
16
  var formik = require('formik');
16
17
  var withT = require('@bigbinary/neeto-commons-frontend/react-utils/withT');
17
18
  var Plus = require('@bigbinary/neeto-icons/Plus');
@@ -27,6 +28,8 @@ var reactQuery = require('@tanstack/react-query');
27
28
  var axios = require('axios');
28
29
  var _defineProperty = require('@babel/runtime/helpers/defineProperty');
29
30
  var useMutationWithInvalidation = require('@bigbinary/neeto-commons-frontend/react-utils/useMutationWithInvalidation');
31
+ require('classnames');
32
+ require('@bigbinary/neeto-cist');
30
33
 
31
34
  function _interopNamespaceDefault(e) {
32
35
  var n = Object.create(null);
@@ -3537,7 +3540,7 @@ var IpRestriction = function IpRestriction() {
3537
3540
  });
3538
3541
  };
3539
3542
  return /*#__PURE__*/jsxRuntime.jsx(Form, {
3540
- className: "mx-auto mb-4 w-full sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
3543
+ className: "w-full",
3541
3544
  formikProps: {
3542
3545
  initialValues: buildInitialValue(isIpRestrictionEnabled, allowedIpRanges),
3543
3546
  validationSchema: VALIDATION_SCHEMA,
@@ -3551,64 +3554,57 @@ var IpRestriction = function IpRestriction() {
3551
3554
  setFieldValue = _ref2.setFieldValue,
3552
3555
  resetForm = _ref2.resetForm,
3553
3556
  setSubmitting = _ref2.setSubmitting;
3554
- return /*#__PURE__*/jsxRuntime.jsxs(jsxRuntime.Fragment, {
3555
- children: [/*#__PURE__*/jsxRuntime.jsx(BlockNavigation, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
3556
- className: "neeto-ui-bg-white neeto-ui-border-gray-300 neeto-ui-rounded-lg mx-auto mb-4 w-full overflow-hidden border sm:max-w-screen-sm md:max-w-screen-md lg:max-w-3xl",
3557
- "data-cy": "ip-restrictions-card",
3558
- children: [/*#__PURE__*/jsxRuntime.jsxs("div", {
3559
- className: "space-y-2 p-6",
3560
- children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, {
3561
- checked: values.ipRestriction,
3562
- className: "flex-grow-0",
3563
- "data-cy": "enable-ip-restriction-checkbox",
3564
- disabled: isFetchingIpRestriction || isUpdating,
3565
- name: "ipRestriction",
3566
- label: /*#__PURE__*/jsxRuntime.jsx(Typography, {
3567
- style: "h3",
3568
- children: t("neetoMolecules.ipRestriction.switchLabel")
3569
- }),
3570
- onChange: function onChange() {
3571
- return setFieldValue("ipRestriction", !values.ipRestriction);
3572
- }
3573
- }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
3574
- "data-cy": "ip-restriction-description",
3575
- style: "body2",
3576
- children: t("neetoMolecules.ipRestriction.description")
3577
- })]
3578
- }), values.ipRestriction && /*#__PURE__*/jsxRuntime.jsxs("div", {
3579
- className: "neeto-ui-border-gray-300 w-full space-y-6 border-t p-6",
3580
- children: [/*#__PURE__*/jsxRuntime.jsx(CurrentIp$1, {}), /*#__PURE__*/jsxRuntime.jsx(AllowedIpRanges$1, {}), /*#__PURE__*/jsxRuntime.jsx(Callout, {
3581
- style: "warning",
3582
- children: /*#__PURE__*/jsxRuntime.jsx("div", {
3583
- className: "leading-2 block whitespace-pre-wrap py-1",
3584
- children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
3585
- i18nKey: "neetoMolecules.ipRestriction.warningMessage"
3586
- })
3587
- })
3588
- })]
3589
- })]
3590
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
3591
- className: "flex flex-wrap items-center justify-between gap-4",
3592
- children: [dirty && /*#__PURE__*/jsxRuntime.jsx(Typography, {
3557
+ return /*#__PURE__*/jsxRuntime.jsxs(CardLayout, {
3558
+ actionBlock: /*#__PURE__*/jsxRuntime.jsxs("div", {
3559
+ className: "flex flex-wrap items-center gap-2",
3560
+ children: [/*#__PURE__*/jsxRuntime.jsx(Button$1, {
3561
+ "data-cy": "ip-restriction-save-changes",
3562
+ "data-testid": "save-changes-button",
3563
+ loading: isUpdating,
3564
+ type: "submit",
3565
+ children: t("neetoMolecules.common.actions.saveChanges")
3566
+ }), /*#__PURE__*/jsxRuntime.jsx(Button, {
3567
+ disabled: !dirty,
3568
+ label: t("neetoMolecules.common.actions.reset"),
3569
+ style: "secondary",
3570
+ type: "reset",
3571
+ onClick: resetForm
3572
+ }), dirty && /*#__PURE__*/jsxRuntime.jsx(Typography, {
3593
3573
  className: "neeto-ui-text-error-500",
3594
3574
  style: "body2",
3595
3575
  children: t("neetoMolecules.ipRestriction.validations.unsavedChanges")
3596
- }), /*#__PURE__*/jsxRuntime.jsxs("div", {
3597
- className: "ml-auto flex justify-between",
3598
- children: [/*#__PURE__*/jsxRuntime.jsx(Button, {
3599
- className: "mr-2",
3600
- disabled: !dirty,
3601
- label: t("neetoMolecules.common.actions.reset"),
3602
- style: "secondary",
3603
- type: "reset",
3604
- onClick: resetForm
3605
- }), /*#__PURE__*/jsxRuntime.jsx(Button$1, {
3606
- "data-cy": "ip-restriction-save-changes",
3607
- "data-testid": "save-changes-button",
3608
- loading: isUpdating,
3609
- type: "submit",
3610
- children: t("neetoMolecules.common.actions.saveChanges")
3611
- })]
3576
+ })]
3577
+ }),
3578
+ children: [/*#__PURE__*/jsxRuntime.jsx(BlockNavigation, {}), /*#__PURE__*/jsxRuntime.jsxs("div", {
3579
+ className: "space-y-2",
3580
+ children: [/*#__PURE__*/jsxRuntime.jsx(Checkbox, {
3581
+ checked: values.ipRestriction,
3582
+ className: "flex-grow-0",
3583
+ "data-cy": "enable-ip-restriction-checkbox",
3584
+ disabled: isFetchingIpRestriction || isUpdating,
3585
+ name: "ipRestriction",
3586
+ label: /*#__PURE__*/jsxRuntime.jsx(Typography, {
3587
+ style: "h3",
3588
+ children: t("neetoMolecules.ipRestriction.switchLabel")
3589
+ }),
3590
+ onChange: function onChange() {
3591
+ return setFieldValue("ipRestriction", !values.ipRestriction);
3592
+ }
3593
+ }), /*#__PURE__*/jsxRuntime.jsx(Typography, {
3594
+ "data-cy": "ip-restriction-description",
3595
+ style: "body2",
3596
+ children: t("neetoMolecules.ipRestriction.description")
3597
+ })]
3598
+ }), values.ipRestriction && /*#__PURE__*/jsxRuntime.jsxs("div", {
3599
+ className: "neeto-ui-border-gray-300 mt-6 w-full space-y-6 border-t pt-6",
3600
+ children: [/*#__PURE__*/jsxRuntime.jsx(CurrentIp$1, {}), /*#__PURE__*/jsxRuntime.jsx(AllowedIpRanges$1, {}), /*#__PURE__*/jsxRuntime.jsx(Callout, {
3601
+ style: "warning",
3602
+ children: /*#__PURE__*/jsxRuntime.jsx("div", {
3603
+ className: "leading-2 block whitespace-pre-wrap py-1",
3604
+ children: /*#__PURE__*/jsxRuntime.jsx(reactI18next.Trans, {
3605
+ i18nKey: "neetoMolecules.ipRestriction.warningMessage"
3606
+ })
3607
+ })
3612
3608
  })]
3613
3609
  }), /*#__PURE__*/jsxRuntime.jsx(Alert, {
3614
3610
  isOpen: isAlertOpen,