@moda/om 16.0.0 → 16.1.0

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file. See
 [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [16.1.0](https://github.com/ModaOperandi/om/compare/v16.0.0...v16.1.0) (2022-05-24)
+
+
+### Features
+
+* **checkbox:** swaps the mark from defaulting a bullet to a check mark icon ([#2650](https://github.com/ModaOperandi/om/issues/2650)) ([d8e42c3](https://github.com/ModaOperandi/om/commit/d8e42c31eff9095acd6d2ef5a01939d74835de35))
+
 # [16.0.0](https://github.com/ModaOperandi/om/compare/v15.11.4...v16.0.0) (2022-05-12)
 
 

package/dist/components/Checkbox/Checkbox.d.ts

@@ -1,6 +1,8 @@
 import React from 'react';
 import './Checkbox.scss';
+export declare type ShowCheckedUsing = 'checkmark' | 'circle';
 export declare type CheckboxProps = React.InputHTMLAttributes<HTMLInputElement> & {
     children?: JSX.Element | string;
+    showCheckedUsing?: ShowCheckedUsing;
 };
 export declare const Checkbox: React.FC<CheckboxProps>;

package/dist/index.cjs.js

@@ -963,8 +963,8 @@ function hexDouble(num) {
   return str.length < 2 ? '0' + str : str;
 }
 
-var __assign$9 = commonjsGlobal && commonjsGlobal.__assign || function () {
-  __assign$9 = Object.assign || function (t) {
+var __assign$b = commonjsGlobal && commonjsGlobal.__assign || function () {
+  __assign$b = Object.assign || function (t) {
     for (var s, i = 1, n = arguments.length; i < n; i++) {
       s = arguments[i];
 
@@ -976,7 +976,7 @@ var __assign$9 = commonjsGlobal && commonjsGlobal.__assign || function () {
     return t;
   };
 
-  return __assign$9.apply(this, arguments);
+  return __assign$b.apply(this, arguments);
 };
 
 var __spreadArray$1 = commonjsGlobal && commonjsGlobal.__spreadArray || function (to, from, pack) {
@@ -1004,7 +1004,7 @@ var text = function text(name, font) {
   }
 
   var treatment = typography_1.typography["text-treatments"][name];
-  return __assign$9(__assign$9({}, treatment), {
+  return __assign$b(__assign$b({}, treatment), {
     "font-family": typography_1.typography.fonts[font].join(","),
     "line-height": "" + treatment["line-height"]
   });
@@ -1290,7 +1290,7 @@ var _assign = function __assign() {
 
   return _assign.apply(this, arguments);
 };
-function __rest$8(s, e) {
+function __rest$a(s, e) {
   var t = {};
 
   for (var p in s) {
@@ -1541,7 +1541,7 @@ function createSidecarMedium(options) {
 
 var SideCar$1 = function SideCar(_a) {
   var sideCar = _a.sideCar,
-      rest = __rest$8(_a, ["sideCar"]);
+      rest = __rest$a(_a, ["sideCar"]);
 
   if (!sideCar) {
     throw new Error('Sidecar: please provide `sideCar` property to import the right car');
@@ -1595,7 +1595,7 @@ var RemoveScroll = /*#__PURE__*/React__namespace.forwardRef(function (props, par
       allowPinchZoom = props.allowPinchZoom,
       _b = props.as,
       Container = _b === void 0 ? 'div' : _b,
-      rest = __rest$8(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
+      rest = __rest$a(props, ["forwardProps", "children", "className", "removeScrollBar", "enabled", "shards", "sideCar", "noIsolation", "inert", "allowPinchZoom", "as"]);
 
   var SideCar = sideCar;
   var containerRef = useMergeRefs([ref, parentRef]);
@@ -3289,13 +3289,13 @@ var FocusOn$1 = /*#__PURE__*/React__namespace.forwardRef(function (props, parent
       shouldIgnore = props.shouldIgnore,
       style = props.style,
       as = props.as,
-      rest = __rest$8(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "style", "as"]);
+      rest = __rest$a(props, ["children", "autoFocus", "shards", "enabled", "scrollLock", "focusLock", "returnFocus", "inert", "allowPinchZoom", "sideCar", "className", "shouldIgnore", "style", "as"]);
 
   var SideCar = sideCar;
 
   var onActivation = lockProps.onActivation,
       onDeactivation = lockProps.onDeactivation,
-      restProps = __rest$8(lockProps, ["onActivation", "onDeactivation"]);
+      restProps = __rest$a(lockProps, ["onActivation", "onDeactivation"]);
 
   var appliedLockProps = _assign(_assign({}, restProps), {
     sideCar: sideCar,
@@ -5600,7 +5600,149 @@ var Button = function Button(_ref) {
   }, rest));
 };
 
-var _excluded$w = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled"];
+var __assign$a = undefined && undefined.__assign || function () {
+  __assign$a = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign$a.apply(this, arguments);
+};
+
+var __rest$9 = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var Checkmark16 = function Checkmark16(_a) {
+  var _b = _a.color,
+      color = _b === void 0 ? 'currentcolor' : _b,
+      _c = _a.height,
+      height = _c === void 0 ? '16px' : _c,
+      _d = _a.width,
+      width = _d === void 0 ? '16px' : _d,
+      rest = __rest$9(_a, ["color", "height", "width"]);
+
+  var svgStyle = __assign$a({
+    "position": "absolute",
+    "top": "0",
+    "right": "0",
+    "bottom": "0",
+    "left": "0",
+    "width": "100%",
+    "height": "100%"
+  }, {
+    fill: color
+  });
+
+  return /*#__PURE__*/React__namespace.createElement("div", __assign$a({
+    style: __assign$a({
+      "position": "relative"
+    }, {
+      height: height,
+      width: width
+    })
+  }, rest), /*#__PURE__*/React__namespace.createElement("svg", {
+    viewBox: "0 0 16 16",
+    style: svgStyle
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    d: "M2.732 9.458l-.464.59 4.44 3.494 7.101-10.33-.618-.424-6.648 9.67z"
+  })));
+};
+
+Checkmark16.displayName = 'Checkmark16';
+
+var __assign$9 = undefined && undefined.__assign || function () {
+  __assign$9 = Object.assign || function (t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+
+      for (var p in s) {
+        if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+      }
+    }
+
+    return t;
+  };
+
+  return __assign$9.apply(this, arguments);
+};
+
+var __rest$8 = undefined && undefined.__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) {
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
+  }
+
+  if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+    if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+var Circle12 = function Circle12(_a) {
+  var _b = _a.color,
+      color = _b === void 0 ? 'currentcolor' : _b,
+      _c = _a.height,
+      height = _c === void 0 ? '12px' : _c,
+      _d = _a.width,
+      width = _d === void 0 ? '12px' : _d,
+      rest = __rest$8(_a, ["color", "height", "width"]);
+
+  var svgStyle = __assign$9({
+    "position": "absolute",
+    "top": "0",
+    "right": "0",
+    "bottom": "0",
+    "left": "0",
+    "width": "100%",
+    "height": "100%"
+  }, {
+    fill: color
+  });
+
+  return /*#__PURE__*/React__namespace.createElement("div", __assign$9({
+    style: __assign$9({
+      "position": "relative"
+    }, {
+      height: height,
+      width: width
+    })
+  }, rest), /*#__PURE__*/React__namespace.createElement("svg", {
+    viewBox: "0 0 12 12",
+    fill: "none",
+    style: svgStyle
+  }, /*#__PURE__*/React__namespace.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z"
+  })));
+};
+
+Circle12.displayName = 'Circle12';
+
+var _excluded$w = ["className", "defaultChecked", "checked", "children", "value", "onChange", "disabled", "showCheckedUsing"];
+var CHECKED_ITEM_PROPS = {
+  className: 'Checkbox__check-mark',
+  height: '85%',
+  width: '85%'
+};
 var Checkbox = function Checkbox(_ref) {
   var _ref2;
 
@@ -5611,6 +5753,8 @@ var Checkbox = function Checkbox(_ref) {
       value = _ref.value,
       onChange = _ref.onChange,
       disabled = _ref.disabled,
+      _ref$showCheckedUsing = _ref.showCheckedUsing,
+      showCheckedUsing = _ref$showCheckedUsing === void 0 ? 'checkmark' : _ref$showCheckedUsing,
       rest = _objectWithoutProperties(_ref, _excluded$w);
 
   var _useState = React.useState((_ref2 = checked !== null && checked !== void 0 ? checked : defaultChecked) !== null && _ref2 !== void 0 ? _ref2 : false),
@@ -5629,17 +5773,14 @@ var Checkbox = function Checkbox(_ref) {
     role: "button",
     tabIndex: 0,
     className: classNames('Checkbox', className, {
-      'Checkbox--checked': isChecked,
       'Checkbox--disabled': disabled
     })
   }, /*#__PURE__*/React__default["default"].createElement("span", {
     tabIndex: -1,
     className: classNames('Checkbox__indicator', {
-      'Checkbox__indicator--checked': isChecked,
-      'Checkbox__indicator--unchecked': !isChecked,
       'Checkbox__indicator--disabled': disabled
     })
-  }), /*#__PURE__*/React__default["default"].createElement("input", _extends$1({
+  }, isChecked && /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, showCheckedUsing === 'checkmark' && /*#__PURE__*/React__default["default"].createElement(Checkmark16, CHECKED_ITEM_PROPS), showCheckedUsing === 'circle' && /*#__PURE__*/React__default["default"].createElement(Circle12, CHECKED_ITEM_PROPS))), /*#__PURE__*/React__default["default"].createElement("input", _extends$1({
     tabIndex: -1,
     className: "Checkbox__input",
     type: "checkbox",