@tenancy.nz/ui 1.0.0 → 1.0.2

package/dist/cjs/components/Checkbox.styled.cjs

@@ -0,0 +1,25 @@
+"use strict";
+'use strict';
+
+var react = require('@emotion/react');
+var styles = require('@mui/material/styles');
+var Checkbox = require('@mui/material/Checkbox');
+var object = require('../utils/helpers/object.cjs');
+
+const StyledCheckbox = styles.styled(Checkbox)`
+  ${({ checked, disabled, theme }) => react.css`
+    padding: 0;
+    border-radius: 0;
+
+    ${!checked && react.css`
+      color: ${object.getObjectProp(theme, "vars.palette.grey.600")};
+    `}
+    ${disabled && react.css`
+      && {
+        color: ${object.getObjectProp(theme, "vars.palette.grey.400")};
+      }
+    `}
+  `}
+`;
+
+exports.StyledCheckbox = StyledCheckbox;

package/dist/cjs/components/CircularProgress.cjs

@@ -0,0 +1,14 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var CircularProgress$1 = require('@mui/material/CircularProgress');
+
+function CircularProgress({ ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(CircularProgress$1, { ...rest });
+}
+
+exports.default = CircularProgress;

package/dist/cjs/components/CollapsedText.cjs

@@ -0,0 +1,88 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var PropTypes = require('prop-types');
+var Grid = require('@mui/material/Grid');
+var CollapsedText_styled = require('./CollapsedText.styled.cjs');
+var Button = require('./Button.cjs');
+
+function CollapsedText({
+  children,
+  collapsedLines = 0,
+  lineHeight = 0,
+  buttonLabel = null,
+  backgroundColor = "#ffffff",
+  buttonJustify = "flex-start"
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [collapsedSize, setCollapsedSize] = React.useState(100);
+  React.useEffect(() => {
+    if (collapsedLines > 0 && lineHeight > 0) {
+      setCollapsedSize(collapsedLines * lineHeight);
+    }
+  }, [collapsedLines, lineHeight]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      CollapsedText_styled.StyledCollapse,
+      {
+        backgroundColor,
+        collapsedSize,
+        in: open,
+        lineHeight,
+        children
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(Grid, { container: true, justify: buttonJustify, children: /* @__PURE__ */ jsxRuntime.jsx(Grid, { item: true, children: /* @__PURE__ */ jsxRuntime.jsx(CollapsedText_styled.StyledButtonWrapper, { children: /* @__PURE__ */ jsxRuntime.jsx(
+      Button.default,
+      {
+        color: "primaryAlt",
+        variant: "outlined",
+        size: "small",
+        onClick: () => setOpen(!open),
+        endIcon: buttonJustify === "flex-end" ? /* @__PURE__ */ jsxRuntime.jsx(CollapsedText_styled.StyledArrowDownIcon, { open }) : null,
+        startIcon: buttonJustify !== "flex-end" ? /* @__PURE__ */ jsxRuntime.jsx(CollapsedText_styled.StyledArrowDownIcon, { open }) : null,
+        children: (() => {
+          if (buttonLabel && buttonLabel.open && buttonLabel.closed) {
+            return open ? buttonLabel.open : buttonLabel.closed;
+          }
+          return open ? "Less" : "More";
+        })()
+      }
+    ) }) }) })
+  ] });
+}
+CollapsedText.propTypes = {
+  /**
+   * @ignore
+   */
+  children: PropTypes.any.isRequired,
+  /**
+   * Number of lines to show
+   */
+  collapsedLines: PropTypes.number,
+  /**
+   *  The height of a line (used to create a gradient mask over the last line of text)
+   */
+  lineHeight: PropTypes.number,
+  /**
+   * Labels to show on the button when open and closed
+   */
+  buttonLabel: PropTypes.shape({
+    open: PropTypes.string,
+    closed: PropTypes.string
+  }),
+  /**
+   * Used to create gradient masks to show the user that there is hidden text (6 character hex value)
+   */
+  backgroundColor: PropTypes.string,
+  /**
+   * Position for the button
+   */
+  buttonJustify: PropTypes.oneOf(["flex-start", "center", "flex-end"])
+};
+
+exports.default = CollapsedText;

package/dist/cjs/components/CollapsedText.styled.cjs

@@ -0,0 +1,52 @@
+"use strict";
+'use strict';
+
+var styles = require('@mui/material/styles');
+var Collapse = require('@mui/material/Collapse');
+var KeyboardArrowDownIcon = require('@mui/icons-material/KeyboardArrowDown');
+var colors = require('../utils/colors.cjs');
+
+const StyledCollapse = styles.styled(Collapse)(
+  ({ backgroundColor, lineHeight, in: open }) => ({
+    position: "relative",
+    "&:after, &:before": {
+      content: "' '",
+      display: "block",
+      position: "absolute",
+      bottom: 0,
+      left: 0,
+      right: 0,
+      width: "100%",
+      opacity: open ? 0 : 1,
+      transiton: 0.5
+    },
+    "&:after": {
+      height: open ? 0 : "66%",
+      background: `linear-gradient(0deg, ${colors.hexToRgba(
+        backgroundColor,
+        1
+      )} 0%, ${colors.hexToRgba(backgroundColor, 0)} 100%)`
+    },
+    "&:before": {
+      height: lineHeight || 0,
+      background: `linear-gradient(90deg, ${colors.hexToRgba(
+        backgroundColor,
+        0
+      )} 0%, ${colors.hexToRgba(backgroundColor, 1)} 100%)`
+    }
+  })
+);
+const StyledArrowDownIcon = styles.styled(KeyboardArrowDownIcon)({
+  transform: ({ open }) => open ? "rotate(180deg)" : null
+});
+const StyledButtonWrapper = styles.styled("div")(({ open, lineHeight }) => ({
+  "& .MuiButton-root": {
+    textTransform: "none",
+    top: !open && lineHeight > 0 ? 0 - lineHeight / 2 : 0,
+    backgroundColor: "#fff"
+  }
+}));
+
+exports.StyledArrowDownIcon = StyledArrowDownIcon;
+exports.StyledButtonWrapper = StyledButtonWrapper;
+exports.StyledCollapse = StyledCollapse;

package/dist/cjs/components/Confirmation.cjs

@@ -0,0 +1,60 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var Button = require('./Button.cjs');
+var Heading = require('./Heading.cjs');
+var Modal = require('./Modal.cjs');
+var Text = require('./Text.cjs');
+
+function Confirmation({
+  cancelling = false,
+  cancelBtnText = "Cancel",
+  confirming = false,
+  confirmBtnText = "Ok",
+  message = void 0,
+  open = false,
+  onCancel,
+  onConfirm,
+  severity = "default",
+  title = "Are you sure?"
+}) {
+  const actions = /* @__PURE__ */ jsxRuntime.jsxs(React.Fragment, { children: [
+    onCancel && cancelBtnText && /* @__PURE__ */ jsxRuntime.jsx(
+      Button.default,
+      {
+        onClick: onCancel,
+        color: "primaryAlt",
+        variant: "outlined",
+        size: "small",
+        loading: cancelling,
+        children: cancelBtnText
+      }
+    ),
+    onConfirm && confirmBtnText && /* @__PURE__ */ jsxRuntime.jsx(
+      Button.default,
+      {
+        onClick: onConfirm,
+        color: severity === "default" ? "primary" : severity,
+        size: "small",
+        loading: confirming,
+        children: confirmBtnText
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Modal.default,
+    {
+      maxWidth: "xs",
+      open,
+      heading: /* @__PURE__ */ jsxRuntime.jsx(Heading.default, { as: "h5", gutterBottom: false, children: title }),
+      actions,
+      content: /* @__PURE__ */ jsxRuntime.jsx(Text.default, { as: "div", variant: "body2", children: message })
+    }
+  );
+}
+
+exports.default = Confirmation;

package/dist/cjs/components/Container.cjs

@@ -0,0 +1,21 @@
+"use strict";
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var jsxRuntime = require('react/jsx-runtime');
+require('react');
+var PropTypes = require('prop-types');
+var MuiContainer = require('@mui/material/Container');
+
+function Container({ children, ...rest }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(MuiContainer, { ...rest, children });
+}
+Container.propTypes = {
+  /**
+   * React component, HTML node, string etc..
+   */
+  children: PropTypes.node.isRequired
+};
+
+exports.default = Container;