oa-componentbook 0.0.0-sit1.1

package/build/components/oa-component-accordion/Accordion.js

@@ -0,0 +1,195 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+require("core-js/modules/es.object.assign.js");
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _KeyboardArrowUpRounded = _interopRequireDefault(require("@material-ui/icons/KeyboardArrowUpRounded"));
+var _styles = require("./styles");
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+var _MaterialIcon = _interopRequireDefault(require("../oa-component-icons/MaterialIcon"));
+var _CustomTag = _interopRequireDefault(require("../oa-component-tag/CustomTag"));
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _KeyValueWidget = _interopRequireDefault(require("../../widgets/oa-widget-key-value/KeyValueWidget"));
+var _CustomButton = _interopRequireDefault(require("../oa-component-button/CustomButton"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); } /* eslint-disable */
+function CollapseIcon(_ref) {
+  let {
+    isActive
+  } = _ref;
+  return /*#__PURE__*/_react.default.createElement(_MaterialIcon.default, {
+    icon: _KeyboardArrowUpRounded.default,
+    size: 20,
+    rotate: isActive ? 0 : 180
+  });
+}
+function renderCustomBody(customBody, onActionClick) {
+  if (!customBody || !customBody.items) return null;
+  return customBody.items.map((item, index) => {
+    var _item$dataConfig, _item$dataConfig2, _item$dataConfig3, _item$dataConfig4;
+    return /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: "custom-body-item"
+    }, item.heading && /*#__PURE__*/_react.default.createElement("div", {
+      className: "custom-body-heading"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: item.heading.type,
+      color: item.heading.color || "primary-content"
+    }, item.heading.label)), item.dataConfig && item.dataConfig.type === "keyvalue" && /*#__PURE__*/_react.default.createElement("div", {
+      className: "custom-body-content"
+    }, /*#__PURE__*/_react.default.createElement(_KeyValueWidget.default, {
+      fullWidth: item === null || item === void 0 || (_item$dataConfig = item.dataConfig) === null || _item$dataConfig === void 0 ? void 0 : _item$dataConfig.fullWidth,
+      columnLayout: item === null || item === void 0 || (_item$dataConfig2 = item.dataConfig) === null || _item$dataConfig2 === void 0 ? void 0 : _item$dataConfig2.columnLayout,
+      data: item === null || item === void 0 || (_item$dataConfig3 = item.dataConfig) === null || _item$dataConfig3 === void 0 ? void 0 : _item$dataConfig3.data,
+      customClassName: "gst-details-keyvalue"
+    })), item.dataConfig && item.dataConfig.type === "titleSubtitle" && /*#__PURE__*/_react.default.createElement("div", {
+      className: "custom-body-content-titleSubtitle"
+    }, (item === null || item === void 0 || (_item$dataConfig4 = item.dataConfig) === null || _item$dataConfig4 === void 0 || (_item$dataConfig4 = _item$dataConfig4.data) === null || _item$dataConfig4 === void 0 ? void 0 : _item$dataConfig4.length) > 0 && item.dataConfig.data.map((field, index) => /*#__PURE__*/_react.default.createElement("div", {
+      key: index,
+      className: "title-subtitle-item"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "user-details"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-t2-700",
+      color: "primary-content"
+    }, field.title), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: "type-b1-400",
+      color: "secondary-content"
+    }, field.subtitle))))), item.dataConfig && item.dataConfig.type === "button" && /*#__PURE__*/_react.default.createElement("div", {
+      className: "custom-body-content"
+    }, /*#__PURE__*/_react.default.createElement(_CustomButton.default, {
+      type: item.dataConfig.subType,
+      onClick: () => {
+        if (onActionClick && item.dataConfig.onClick) {
+          onActionClick(item.dataConfig.onClick, item.dataConfig);
+        }
+      },
+      label: item.dataConfig.label
+    })));
+  });
+}
+CollapseIcon.propTypes = {
+  isActive: _propTypes.default.bool.isRequired
+};
+function Accordion(_ref2) {
+  let {
+    body,
+    "data-test": dataTest,
+    disabled,
+    headerText,
+    smallText,
+    key,
+    defaultActiveKey,
+    hasContentPadding,
+    // New prop to determine whether to apply contentPadding
+    onChange,
+    activeKey,
+    componentConfig,
+    subtext,
+    customBody,
+    onActionClick
+  } = _ref2;
+  const themeConfig = {
+    components: {
+      Collapse: {
+        headerBg: _ColorVariablesMap.default["--color-secondary-background"],
+        contentPadding: hasContentPadding ? "20px 24px" : "0" // Adjust the value as needed
+      }
+    }
+  };
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: themeConfig
+  }, /*#__PURE__*/_react.default.createElement(_styles.CollapseStyle, null, /*#__PURE__*/_react.default.createElement(_antd.Collapse, {
+    expandIcon: CollapseIcon,
+    expandIconPosition: "end",
+    defaultActiveKey: disabled ? "-1" : defaultActiveKey,
+    onChange: onChange
+  }, /*#__PURE__*/_react.default.createElement(_antd.Collapse.Panel, {
+    "data-test": dataTest ? "".concat(dataTest, "--complete") : undefined,
+    collapsible: disabled ? "disabled" : undefined,
+    key: activeKey || key,
+    header: /*#__PURE__*/_react.default.createElement("div", {
+      "data-test": dataTest ? "".concat(dataTest, "--header") : undefined,
+      className: "type-button-500"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-content"
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-main"
+    }, componentConfig && (componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.type) === "tag" && /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-tag"
+    }, /*#__PURE__*/_react.default.createElement(_CustomTag.default, _extends({
+      type: componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.subType,
+      label: componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.label
+    }, componentConfig === null || componentConfig === void 0 ? void 0 : componentConfig.props))), /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-text"
+    }, headerText, smallText && /*#__PURE__*/_react.default.createElement(_styles.SmallText, null, smallText)), subtext && /*#__PURE__*/_react.default.createElement("div", {
+      className: "header-subtext"
+    }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
+      typography: subtext === null || subtext === void 0 ? void 0 : subtext.type,
+      color: "secondary-content"
+    }, subtext === null || subtext === void 0 ? void 0 : subtext.label)))))
+  }, body && /*#__PURE__*/_react.default.createElement("div", {
+    className: "gridContainer"
+  }, body), customBody && /*#__PURE__*/_react.default.createElement("div", {
+    className: "gridContainer"
+  }, renderCustomBody(customBody, onActionClick))))));
+}
+Accordion.propTypes = {
+  body: _propTypes.default.node,
+  "data-test": _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  headerText: _propTypes.default.string.isRequired,
+  smallText: _propTypes.default.string,
+  hasContentPadding: _propTypes.default.bool,
+  key: _propTypes.default.string,
+  defaultActiveKey: _propTypes.default.string,
+  onChange: _propTypes.default.func,
+  activeKey: _propTypes.default.string || _propTypes.default.number,
+  componentConfig: _propTypes.default.shape({
+    type: _propTypes.default.string.isRequired,
+    subType: _propTypes.default.string,
+    label: _propTypes.default.string.isRequired,
+    props: _propTypes.default.object
+  }),
+  subtext: _propTypes.default.shape({
+    type: _propTypes.default.string.isRequired,
+    label: _propTypes.default.string.isRequired
+  }),
+  customBody: _propTypes.default.shape({
+    items: _propTypes.default.arrayOf(_propTypes.default.shape({
+      heading: _propTypes.default.shape({
+        type: _propTypes.default.string.isRequired,
+        label: _propTypes.default.string.isRequired
+      }),
+      dataConfig: _propTypes.default.shape({
+        type: _propTypes.default.string.isRequired,
+        data: _propTypes.default.oneOfType([_propTypes.default.array, _propTypes.default.object]).isRequired,
+        subType: _propTypes.default.string,
+        label: _propTypes.default.string,
+        onClick: _propTypes.default.string
+      })
+    }))
+  }),
+  onActionClick: _propTypes.default.func
+};
+Accordion.defaultProps = {
+  body: "",
+  "data-test": null,
+  disabled: false,
+  smallText: "",
+  key: "1",
+  defaultActiveKey: "1",
+  hasContentPadding: true,
+  onChange: () => {},
+  activeKey: null,
+  componentConfig: null,
+  subtext: null,
+  customBody: null,
+  onActionClick: null
+};
+var _default = exports.default = Accordion;

package/build/components/oa-component-accordion/styles.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SmallText = exports.CollapseStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _templateObject, _templateObject2;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var _default = exports.default = {};
+const SmallText = exports.SmallText = _styledComponents.default.small(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  font-size: 18px;\n  color: #e21616;\n  margin: 0 0 0 4px;\n"])));
+const CollapseStyle = exports.CollapseStyle = _styledComponents.default.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  .ant-collapse .ant-collapse-item-disabled {\n    background: var(--color-disabled-button);\n  }\n  /* .ant-collapse-item-active .ant-collapse-expand-icon{\n    transform: rotate(180deg);\n  } */\n  /* .ant-collapse-expand-icon{\n    padding-inline-start: 0 !important;\n  } */\n  .ant-collapse-header-text {\n    color: var(--color-primary-content);\n  }\n  /* .ant-collapse-arrow{\n    color: var(--color-secondary-content) !important;\n  } */\n  .ant-collapse > .ant-collapse-item:last-child,\n  .ant-collapse > .ant-collapse-item:last-child > .ant-collapse-header,\n  .ant-collapse .ant-collapse-item:last-child > .ant-collapse-content {\n    border-radius: 0 0 4px 4px;\n  }\n  .ant-collapse > .ant-collapse-item {\n    border: none;\n  }\n  .ant-collapse {\n    border: 1px solid var(--color-divider);\n    border-radius: 4px;\n    overflow: hidden;\n  }\n\n  .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n    padding: 12px 24px;\n  }\n\n  /* New styles for header content layout */\n  .header-content {\n    display: flex;\n    align-items: flex-start;\n    justify-content: space-between;\n    width: 100%;\n  }\n\n  .header-main {\n    display: flex;\n    flex-direction: column;\n    align-items: flex-start;\n    flex: 1;\n    gap: 8px;\n  }\n\n  .header-tag {\n    margin-bottom: 4px;\n  }\n\n  .header-text {\n    display: flex;\n    align-items: center;\n    gap: 8px;\n  }\n\n  .header-subtext {\n    margin-top: 4px;\n    color: var(--color-secondary-content);\n  }\n\n  /* Custom body styles */\n  .custom-body-item {\n    margin-bottom: 24px;\n  }\n\n  .custom-body-item:last-child {\n    margin-bottom: 0;\n  }\n\n  .custom-body-heading {\n    margin-bottom: 16px;\n  }\n\n  .custom-body-content {\n    // margin-top: 8px;\n  }\n\n  .custom-body-button {\n    margin-top: 16px;\n    display: flex;\n    justify-content: flex-end;\n  }\n\n  .gst-details-keyvalue {\n    .key-value-item {\n      margin-bottom: 4px;\n    }\n\n    .key {\n      font-weight: 400;\n      color: var(--color-primary-content);\n    }\n\n    .value {\n      font-weight: 700;\n      color: var(--color-primary-content);\n    }\n  }\n\n  @media only screen and (max-width: 600px) {\n    .ant-collapse .ant-collapse-content > .ant-collapse-content-box {\n      padding: 16px;\n    }\n    .ant-collapse > .ant-collapse-item > .ant-collapse-header {\n      padding: 12px 16px;\n    }\n  }\n\n  .custom-body-content-titleSubtitle {\n    display: flex;\n    flex-direction: column;\n    gap: 16px; /* spacing between each item */\n  }\n\n  .title-subtitle-item {\n    display: flex;\n    justify-content: space-between;\n    align-items: flex-start;\n  }\n\n  .title-subtitle-item .user-details {\n    flex: 1;\n    display: flex; /* \uD83D\uDC48 add this */\n    flex-direction: column; /* stack name & email vertically */\n    gap: 2px; /* optional: tighten spacing between name & email */\n  }\n"])));

package/build/components/oa-component-auto-complete/CustomAutoComplete.js

@@ -0,0 +1,167 @@
+"use strict";
+
+require("core-js/modules/es.symbol.description.js");
+require("core-js/modules/es.object.assign.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = CustomAutoComplete;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _antd = require("antd");
+var _utils = require("../../utils");
+var _Typography = _interopRequireDefault(require("../oa-component-typography/Typography"));
+var _ColorVariablesMap = _interopRequireDefault(require("../../global-css/ColorVariablesMap"));
+require("antd/dist/reset.css");
+var _Elevation = require("../../global-css/Elevation");
+const _excluded = ["data-test", "options"],
+  _excluded2 = ["value", "disabled"];
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return typeof key === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (typeof input !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (typeof res !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+/**
+ * CustomAutoComplete is a wrapper around AntD's AutoComplete component.
+ * It applies styles (like colors and font sizes) to the component.
+ * It also takes an array of options and if the value of an option is a string or a number,
+ * it wraps the value in a Typography component with the correct color and font size.
+ *
+ * @param {{data-test: string, options: Array<Object>, [key: string]: any}} props - Props for the component.
+ * @param {string} [props.data-test] - data-test attribute for the component.
+ * @param {Array<Object>} [props.options] - Options for the AutoComplete component.
+ * Each object in the array should contain a property 'value' and can contain a property 'disabled'.
+ * If the value of an option is a string or a number, it will be wrapped in a Typography component.
+ * @param {Object} [props] - Any other props for the AutoComplete component.
+ * @return {React.ReactElement} - The rendered component.
+ */
+function CustomAutoComplete(_ref) {
+  let {
+      'data-test': dataTest,
+      options
+    } = _ref,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const actualOptions = options.map(option => {
+    const {
+        value,
+        disabled
+      } = option,
+      otherProperties = _objectWithoutProperties(option, _excluded2);
+    if ((0, _utils.isString)(value) || (0, _utils.isNumber)(value)) {
+      return _objectSpread({
+        label: /*#__PURE__*/_react.default.createElement(_Typography.default, {
+          color: disabled ? 'placeholder-text' : undefined,
+          typography: "type-b2-400",
+          "data-test": dataTest ? "".concat(dataTest, "-(").concat(value, ")") : undefined
+        }, value),
+        disabled,
+        value
+      }, otherProperties);
+    }
+    return option;
+  });
+  return /*#__PURE__*/_react.default.createElement(_antd.ConfigProvider, {
+    theme: {
+      components: {
+        AutoComplete: {
+          optionSelectedBg: _ColorVariablesMap.default['--color-primary-background'],
+          optionSelectedColor: _ColorVariablesMap.default['--color-primary']
+          // activeShadow: '0px 0px 4px 0px red', // Box shadow for active select box.
+        }
+      },
+      token: {
+        colorTextPlaceholder: _ColorVariablesMap.default['--color-placeholder-text'],
+        // Color of placeholder text
+        colorPrimary: _ColorVariablesMap.default['--color-primary'],
+        // for active color of select
+        colorPrimaryHover: _ColorVariablesMap.default['--color-primary'],
+        // for hover color of select
+        borderRadius: '4px',
+        // For border radius of select text field.
+        borderRadiusLG: '4px',
+        // For border radius of dropdown
+
+        /*
+        We change this prop for small component, because it indirectly controls optionPadding.
+        (
+          optionPadding: `${
+            (controlHeight - fontSize * lineHeight) / 2
+          }px ${controlPaddingHorizontal}px`,
+        )
+        */
+        controlHeight: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? 32 : 48,
+        // height of text field (tag height is half of this, i.e. 24px)
+        controlHeightSM: 32,
+        // We still need this to control height of small text field
+
+        // Used in calculation of optionPadding
+        fontSize: 16,
+        lineHeight: 1.25,
+        // 1 extra so that it shows 12px and 16px in browser console.
+        paddingSM: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? 13 : 17,
+        // paddingSM is what determines padding of input box.
+
+        /*
+        We change this prop for small component, because it indirectly controls optionPadding.
+        (
+          optionPadding: `${
+            (controlHeight - fontSize * lineHeight) / 2
+          }px ${controlPaddingHorizontal}px`,
+        )
+        */
+        controlPaddingHorizontal: (props === null || props === void 0 ? void 0 : props.size) === 'small' ? 12 : 16,
+        controlPaddingHorizontalSM: 12,
+        // We still need this to control padding of small field.
+
+        controlItemBgHover: _ColorVariablesMap.default['--color-background-info'],
+        // hover color of items
+        colorBgElevated: _ColorVariablesMap.default['--color-primary-background'],
+        // background color of dropdown
+        // multipleItemHeight: 100,
+        colorBgContainerDisabled: _ColorVariablesMap.default['--color-divider'],
+        // background color of disabled select
+        colorBorder: _ColorVariablesMap.default['--color-placeholder-text'],
+        colorFillSecondary: _ColorVariablesMap.default['--color-secondary-background'],
+        // background color for tags
+        colorText: _ColorVariablesMap.default['--color-primary-content'],
+        // Text color of unselected options in dropdown
+        colorTextDisabled: _ColorVariablesMap.default['--color-secondary-content'],
+        // Text color when disabled
+        colorIcon: _ColorVariablesMap.default['--color-primary-content'],
+        // Color of cross icon
+        colorError: _ColorVariablesMap.default['--color-negative'],
+        // Error color
+        colorErrorBorderHover: _ColorVariablesMap.default['--color-negative'],
+        // Hover error color should be same as error color
+        boxShadowSecondary: _Elevation.ElevationMap['elevation-white-1'] // Box shadow of dropdown.
+      }
+    }
+  }, /*#__PURE__*/_react.default.createElement(_antd.AutoComplete, _extends({
+    "data-test": dataTest,
+    options: (actualOptions === null || actualOptions === void 0 ? void 0 : actualOptions.length) > 0 ? actualOptions : undefined,
+    dropdownStyle: {
+      padding: '0px'
+    },
+    filterOption: true
+  }, props)));
+}
+CustomAutoComplete.Option = _antd.AutoComplete.Option;
+CustomAutoComplete.propTypes = {
+  'data-test': _propTypes.default.string,
+  size: _propTypes.default.oneOf(['small', 'middle']),
+  options: _propTypes.default.arrayOf(
+  // Checked from antd's github
+  _propTypes.default.shape({
+    label: _propTypes.default.node.isRequired,
+    value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]).isRequired
+  }))
+};
+CustomAutoComplete.defaultProps = {
+  'data-test': null,
+  options: [],
+  size: 'middle'
+};