@simplybusiness/mobius 9.2.0 → 9.3.1

package/dist/cjs/components/Progress/index.js

@@ -0,0 +1,184 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/components/Progress/index.tsx
+var Progress_exports = {};
+__export(Progress_exports, {
+  Progress: () => Progress
+});
+module.exports = __toCommonJS(Progress_exports);
+
+// src/components/Progress/Progress.tsx
+var import_dedupe2 = __toESM(require("classnames/dedupe"));
+var import_react = require("react");
+
+// src/components/Label/Label.tsx
+var import_dedupe = __toESM(require("classnames/dedupe"));
+var import_Label = require("@simplybusiness/mobius/src/components/Label/Label.css");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Label = ({ ref, ...props }) => {
+  const { elementType: Element = "label", children, ...otherProps } = props;
+  const classes = (0, import_dedupe.default)("mobius", "mobius-label", props.className);
+  otherProps.className = classes;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Element, { ref, ...otherProps, className: classes, children });
+};
+Label.displayName = "Label";
+
+// src/components/VisuallyHidden/VisuallyHidden.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function VisuallyHidden(props) {
+  const {
+    className,
+    children,
+    elementType: Component = "div",
+    ...otherProps
+  } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    Component,
+    {
+      className,
+      style: {
+        border: 0,
+        clip: "rect(0 0 0 0)",
+        clipPath: "inset(50%)",
+        height: "1px",
+        margin: "-1px",
+        overflow: "hidden",
+        padding: 0,
+        position: "absolute",
+        width: "1px",
+        whiteSpace: "nowrap"
+      },
+      ...otherProps,
+      children
+    }
+  );
+}
+
+// src/components/Progress/Progress.tsx
+var import_Progress = require("@simplybusiness/mobius/src/components/Progress/Progress.css");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function warnAboutInvalidValues(value, minValue, maxValue) {
+  if (minValue > maxValue) {
+    console.warn("minValue is greater than maxValue");
+  }
+  if (value < minValue) {
+    console.warn("Progress value is less than minValue");
+  }
+  if (value > maxValue) {
+    console.warn("Progress value is greater than maxValue");
+  }
+}
+var sanitizedValue = (value, defaultValue) => {
+  if (value === void 0 || Number.isNaN(value)) {
+    return defaultValue;
+  }
+  return value;
+};
+var getLabelComponent = (label, progressLabelId, showLabel) => {
+  if (showLabel) {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      Label,
+      {
+        id: progressLabelId,
+        className: "mobius-progress__label",
+        elementType: "span",
+        children: label
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+    Label,
+    {
+      id: progressLabelId,
+      className: "mobius-progress__label",
+      elementType: "span",
+      children: label
+    }
+  ) });
+};
+var DEFAULT_VALUE = 0;
+var DEFAULT_MIN_VALUE = 0;
+var DEFAULT_MAX_VALUE = 100;
+var Progress = ({ ref, ...props }) => {
+  const progressId = (0, import_react.useId)();
+  const progressLabelId = (0, import_react.useId)();
+  const {
+    id,
+    label,
+    showLabel = true,
+    showValueLabel = !!label,
+    valueFormatter,
+    variant = "primary",
+    className
+  } = props;
+  let { value, minValue, maxValue } = props;
+  value = sanitizedValue(value, DEFAULT_VALUE);
+  minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);
+  maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);
+  if (value === void 0 || minValue === void 0 || maxValue === void 0) {
+    return null;
+  }
+  warnAboutInvalidValues(value, minValue, maxValue);
+  const clamp = (num, min, max) => Math.min(Math.max(num, min), max);
+  const percentage = clamp(
+    Math.round((value - minValue) / (maxValue - minValue) * 100),
+    0,
+    100
+  );
+  const barWidth = `${percentage}%`;
+  const classes = (0, import_dedupe2.default)("mobius", "mobius-progress", className, {
+    "--is-primary": variant === "primary",
+    "--is-secondary": variant === "secondary"
+  });
+  const progressBarProps = {};
+  progressBarProps["aria-valuemin"] = minValue.toString();
+  progressBarProps["aria-valuemax"] = maxValue.toString();
+  progressBarProps["aria-valuenow"] = value.toString();
+  progressBarProps["aria-valuetext"] = valueFormatter instanceof Function ? valueFormatter(value, minValue, maxValue) : barWidth;
+  const labelComponent = getLabelComponent(label, progressLabelId, showLabel);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+    "div",
+    {
+      id: id || progressId,
+      ...progressBarProps,
+      ref,
+      className: classes,
+      role: "progressbar",
+      "aria-labelledby": progressLabelId,
+      children: [
+        labelComponent,
+        /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mobius-progress__track", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "mobius-progress__bar", style: { width: barWidth } }) }),
+        showValueLabel && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Label, { "data-testid": "value-label", elementType: "span", children: progressBarProps["aria-valuetext"] })
+      ]
+    }
+  );
+};
+Progress.displayName = "Progress";
+//# sourceMappingURL=index.js.map

package/dist/cjs/components/Progress/index.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../../src/components/Progress/index.tsx", "../../../../src/components/Progress/Progress.tsx", "../../../../src/components/Label/Label.tsx", "../../../../src/components/VisuallyHidden/VisuallyHidden.tsx"],
+  "sourcesContent": ["export * from \"./Progress\";\n", "\"use client\";\n\n/* eslint no-console: \"off\" */\nimport type { AriaProgressBarProps } from \"@react-types/progress\";\nimport classNames from \"classnames/dedupe\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport { useId } from \"react\";\nimport type { DOMProps } from \"../../types/dom\";\nimport { Label } from \"../Label\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport \"./Progress.css\";\n\nexport type ProgressElementType = HTMLDivElement;\n\nexport interface ProgressProps\n  extends\n    Omit<AriaProgressBarProps, \"label\">,\n    DOMProps,\n    RefAttributes<ProgressElementType> {\n  label: ReactNode;\n  children?: ReactNode;\n  /** Custom class name for setting specific CSS */\n  id?: string;\n  className?: string;\n  showLabel?: boolean;\n  showValueLabel?: boolean;\n  variant?: \"primary\" | \"secondary\" | \"success\" | \"danger\" | \"warning\" | \"info\";\n  value?: number;\n  minValue?: number;\n  maxValue?: number;\n  valueFormatter?: (\n    value: number,\n    minValue: number,\n    maxValue: number,\n  ) => string;\n}\n\nfunction warnAboutInvalidValues(\n  value: number,\n  minValue: number,\n  maxValue: number,\n) {\n  if (minValue > maxValue) {\n    console.warn(\"minValue is greater than maxValue\");\n  }\n  if (value < minValue) {\n    console.warn(\"Progress value is less than minValue\");\n  }\n  if (value > maxValue) {\n    console.warn(\"Progress value is greater than maxValue\");\n  }\n}\n\nconst sanitizedValue = (\n  value: number | undefined,\n  defaultValue: number,\n): number => {\n  if (value === undefined || Number.isNaN(value)) {\n    return defaultValue;\n  }\n  return value;\n};\n\nconst getLabelComponent = (\n  label: ReactNode,\n  progressLabelId: string,\n  showLabel: boolean,\n) => {\n  if (showLabel) {\n    return (\n      <Label\n        id={progressLabelId}\n        className=\"mobius-progress__label\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    );\n  }\n\n  return (\n    <VisuallyHidden>\n      <Label\n        id={progressLabelId}\n        className=\"mobius-progress__label\"\n        elementType=\"span\"\n      >\n        {label}\n      </Label>\n    </VisuallyHidden>\n  );\n};\n\nconst DEFAULT_VALUE = 0;\nconst DEFAULT_MIN_VALUE = 0;\nconst DEFAULT_MAX_VALUE = 100;\n\nconst Progress = ({ ref, ...props }: ProgressProps) => {\n  const progressId = useId();\n  const progressLabelId = useId();\n  const {\n    id,\n    label,\n    showLabel = true,\n    showValueLabel = !!label,\n    valueFormatter,\n    variant = \"primary\",\n    className,\n  } = props;\n\n  let { value, minValue, maxValue } = props;\n\n  value = sanitizedValue(value, DEFAULT_VALUE);\n  minValue = sanitizedValue(minValue, DEFAULT_MIN_VALUE);\n  maxValue = sanitizedValue(maxValue, DEFAULT_MAX_VALUE);\n\n  // Will never happen but lets appease the typescript gods\n  if (value === undefined || minValue === undefined || maxValue === undefined) {\n    return null;\n  }\n\n  warnAboutInvalidValues(value, minValue, maxValue);\n\n  // Calculate the width of the progress bar as a percentage\n  const clamp = (num: number, min: number, max: number): number =>\n    Math.min(Math.max(num, min), max);\n  const percentage = clamp(\n    Math.round(((value - minValue) / (maxValue - minValue)) * 100),\n    0,\n    100,\n  );\n  const barWidth = `${percentage}%`;\n\n  const classes = classNames(\"mobius\", \"mobius-progress\", className, {\n    \"--is-primary\": variant === \"primary\",\n    \"--is-secondary\": variant === \"secondary\",\n  });\n\n  // Set progress aria values\n  const progressBarProps: Record<string, string> = {};\n  progressBarProps[\"aria-valuemin\"] = minValue.toString();\n  progressBarProps[\"aria-valuemax\"] = maxValue.toString();\n  progressBarProps[\"aria-valuenow\"] = value.toString();\n  progressBarProps[\"aria-valuetext\"] =\n    valueFormatter instanceof Function\n      ? valueFormatter(value, minValue, maxValue)\n      : barWidth;\n  const labelComponent = getLabelComponent(label, progressLabelId, showLabel);\n\n  return (\n    <div\n      id={id || progressId}\n      {...progressBarProps}\n      ref={ref}\n      className={classes}\n      role=\"progressbar\"\n      aria-labelledby={progressLabelId}\n    >\n      {labelComponent}\n      <div className=\"mobius-progress__track\">\n        <div className=\"mobius-progress__bar\" style={{ width: barWidth }} />\n      </div>\n      {showValueLabel && (\n        <Label data-testid=\"value-label\" elementType=\"span\">\n          {progressBarProps[\"aria-valuetext\"]}\n        </Label>\n      )}\n    </div>\n  );\n};\n\nProgress.displayName = \"Progress\";\nexport { Progress };\n", "import type React from \"react\";\nimport type { ReactNode, RefAttributes } from \"react\";\nimport classNames from \"classnames/dedupe\";\nimport type { DOMProps } from \"../../types/dom\";\nimport \"./Label.css\";\n\nexport type LabelElementType = HTMLLabelElement;\nexport type IntrinsicLabel = Omit<\n  React.JSX.IntrinsicElements[\"label\"],\n  \"css\" | \"color\" | \"ref\"\n>;\n\nexport interface LabelProps\n  extends IntrinsicLabel, DOMProps, RefAttributes<LabelElementType> {\n  children?: ReactNode;\n  className?: string;\n  elementType?: \"label\" | \"span\";\n}\n\nconst Label = ({ ref, ...props }: LabelProps) => {\n  const { elementType: Element = \"label\", children, ...otherProps } = props;\n\n  const classes = classNames(\"mobius\", \"mobius-label\", props.className);\n  otherProps.className = classes;\n\n  return (\n    <Element ref={ref} {...otherProps} className={classes}>\n      {children}\n    </Element>\n  );\n};\n\nLabel.displayName = \"Label\";\nexport { Label };\n", "import type { AriaRole, JSXElementConstructor, ReactNode } from \"react\";\n\nexport interface VisuallyHiddenProps {\n  /** The content to visually hide. */\n  children?: ReactNode;\n  id?: string;\n  role?: AriaRole;\n\n  className?: string;\n\n  /**\n   * The element type for the container. Defaults to 'div'\n   */\n  elementType?: string | JSXElementConstructor<any>;\n}\n\nexport function VisuallyHidden(props: VisuallyHiddenProps) {\n  const {\n    className,\n    children,\n    elementType: Component = \"div\",\n    ...otherProps\n  } = props;\n\n  return (\n    <Component\n      className={className}\n      style={{\n        border: 0,\n        clip: \"rect(0 0 0 0)\",\n        clipPath: \"inset(50%)\",\n        height: \"1px\",\n        margin: \"-1px\",\n        overflow: \"hidden\",\n        padding: 0,\n        position: \"absolute\",\n        width: \"1px\",\n        whiteSpace: \"nowrap\",\n      }}\n      {...otherProps}\n    >\n      {children}\n    </Component>\n  );\n}\n"],
+  "mappings": "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",
+  "names": ["import_dedupe", "classNames", "import_jsx_runtime", "import_jsx_runtime", "classNames"]
+}