@papillonarts/components 0.5.0 → 0.7.0

package/build/primer/Button/misc.scss

@@ -0,0 +1,235 @@
+@import '@papillonbits/css/build/primer/support/variables/misc.scss';
+@import '@papillonbits/css/build/primer/support/variables/typography.scss';
+
+// stylelint-disable no-descending-specificity
+// stylelint-disable selector-max-type, function-no-unknown
+
+// Link-like buttons
+//
+// This class is for styling <button> and <input> elements to look like links
+.btn-link {
+  display: inline-block;
+  padding: 0;
+  font-size: inherit;
+  color: var(--color-accent-fg);
+  text-decoration: none;
+  white-space: nowrap;
+  cursor: pointer;
+  user-select: none;
+  background-color: transparent;
+  border: 0;
+  appearance: none; // Corrects inability to style clickable `input` types in iOS.
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  &:disabled,
+  &[aria-disabled='true'] {
+    &,
+    &:hover {
+      color: var(--color-primer-fg-disabled);
+      cursor: default;
+    }
+  }
+
+  &:not(.dropdown-item) {
+    &:focus,
+    &:focus-visible {
+      border-radius: $border-radius;
+      outline-offset: 0;
+    }
+  }
+}
+
+// Invisible button
+//
+// Typically used as a "cancel" button next to a .btn
+.btn-invisible {
+  color: var(--color-accent-fg);
+  background-color: transparent; // Reset default gradient backgrounds and colors
+  border: 0;
+  border-radius: $border-radius;
+  box-shadow: none;
+
+  &:hover,
+  &.zeroclipboard-is-hover {
+    color: var(--color-accent-fg);
+    background-color: var(--color-btn-hover-bg);
+    outline: none;
+    box-shadow: none;
+  }
+
+  &:active,
+  &.selected,
+  &[aria-selected='true'],
+  &.zeroclipboard-is-active {
+    color: var(--color-accent-fg);
+    background: none;
+    border-color: var(--color-btn-active-border);
+
+    @include focusOutline;
+  }
+
+  &:active &.zeroclipboard-is-active {
+    background-color: var(--color-btn-selected-bg);
+  }
+
+  &:disabled,
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    background-color: transparent;
+  }
+}
+
+// Octicon button
+//
+// Icon-only buttons
+.btn-octicon {
+  display: inline-block;
+  // stylelint-disable-next-line primer/spacing
+  padding: 5px;
+  // stylelint-disable-next-line primer/spacing
+  margin-left: 5px;
+  line-height: $lh-condensed-ultra;
+  color: var(--color-fg-muted);
+  vertical-align: middle;
+
+  // For `<button>` elements
+  background: transparent;
+  border: 0;
+  box-shadow: none;
+
+  &:hover {
+    color: var(--color-accent-fg);
+  }
+
+  &:focus,
+  &:focus-visible {
+    border-radius: $border-radius;
+  }
+
+  &.disabled,
+  &[aria-disabled='true'] {
+    color: var(--color-primer-fg-disabled);
+    cursor: default;
+
+    &:hover {
+      color: var(--color-primer-fg-disabled);
+    }
+  }
+}
+
+.btn-octicon-danger:hover {
+  color: var(--color-danger-fg);
+}
+
+// Close button
+//
+// Typically used with an octicon-x
+.close-button {
+  padding: 0;
+  color: var(--color-fg-muted);
+  background: transparent;
+  border: 0;
+
+  &:hover {
+    color: var(--color-fg-default);
+  }
+
+  &:active {
+    @include focusOutline;
+  }
+}
+
+// Hidden text button
+//
+// Use `.hidden-text-expander` to indicate and expand hidden text.
+.hidden-text-expander {
+  display: block;
+
+  &.inline {
+    position: relative;
+    top: -1px;
+    display: inline-block;
+    // stylelint-disable-next-line primer/spacing
+    margin-left: 5px;
+    line-height: 0;
+  }
+}
+
+.hidden-text-expander a,
+.ellipsis-expander {
+  display: inline-block;
+  height: 12px;
+  // stylelint-disable-next-line primer/spacing
+  padding: 0 5px 5px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 6px;
+  color: var(--color-fg-default);
+  text-decoration: none;
+  vertical-align: middle;
+  background: var(--color-neutral-muted);
+  border: 0;
+  // stylelint-disable-next-line primer/borders
+  border-radius: 1px;
+
+  &:hover {
+    text-decoration: none;
+    background-color: var(--color-accent-muted);
+  }
+
+  &:active {
+    color: var(--color-fg-on-emphasis);
+    background-color: var(--color-accent-emphasis);
+  }
+}
+
+// Social button count
+// TODO: Deprecate? Use BtnGroup instead?
+
+.btn-with-count {
+  float: left;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+
+  &:focus {
+    z-index: 1;
+  }
+}
+
+// Social count bubble
+//
+// A container that is used for social bubbles counts.
+
+.social-count {
+  position: relative;
+  float: left;
+  // stylelint-disable-next-line primer/spacing
+  padding: 3px 12px;
+  font-size: $font-size-small;
+  font-weight: $font-weight-bold;
+  // stylelint-disable-next-line primer/typography
+  line-height: 20px;
+  color: var(--color-fg-default);
+  vertical-align: middle;
+  background-color: var(--color-canvas-default);
+  border: $border-width $border-style var(--color-btn-border);
+  border-left: 0;
+  border-top-right-radius: $border-radius;
+  border-bottom-right-radius: $border-radius;
+  box-shadow: var(--color-shadow-small), var(--color-primer-shadow-highlight);
+
+  &:hover,
+  &:active {
+    text-decoration: none;
+  }
+
+  &:hover {
+    color: var(--color-accent-fg);
+    cursor: pointer;
+  }
+}

package/build/primer/Dropdown/Dropdown.js

@@ -0,0 +1,104 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Dropdown = Dropdown;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _uuid = require("uuid");
+var _details = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/details.scss"));
+var _visibilityDisplay = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/visibility-display.scss"));
+var _layout = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/layout.scss"));
+var _flexbox = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/flexbox.scss"));
+var _array = require("@papillonbits/library/array");
+var _hooks = require("@papillonbits/library/hooks");
+var _Button = _interopRequireDefault(require("../Button/Button.scss"));
+var _Dropdown = require("./Dropdown.prop");
+var _Dropdown2 = _interopRequireDefault(require("./Dropdown.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+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) { (0, _defineProperty2["default"])(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 Dropdown(_ref) {
+  var _ariaAttr$haspopup;
+  var _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Dropdown.defaultProps.className : _ref$className,
+    summary = _ref.summary,
+    _ref$ariaAttr = _ref.ariaAttr,
+    ariaAttr = _ref$ariaAttr === void 0 ? _Dropdown.defaultProps.ariaAttr : _ref$ariaAttr,
+    items = _ref.items,
+    _onClick = _ref.onClick,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _Dropdown.defaultProps.state : _ref$state;
+  var details = (0, _hooks.useRef)(null);
+  if (!items) {
+    return null;
+  }
+  var indexItems = (0, _array.getIndexItems)(items);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: className,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("details", {
+      ref: details,
+      className: (0, _classnames["default"])(_Dropdown2["default"].dropdown, _details["default"]['details-reset'], _details["default"]['details-overlay'], _visibilityDisplay["default"]['d-inline-block'], (0, _defineProperty2["default"])({}, _Dropdown2["default"]['dropdown-inactive'], state === _Dropdown.dropdownState.inactive)),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("summary", {
+        className: (0, _classnames["default"])(_Button["default"].btn),
+        "aria-haspopup": (_ariaAttr$haspopup = ariaAttr === null || ariaAttr === void 0 ? void 0 : ariaAttr.haspopup) !== null && _ariaAttr$haspopup !== void 0 ? _ariaAttr$haspopup : false,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+          className: (0, _classnames["default"])(_visibilityDisplay["default"]['d-flex'], _flexbox["default"]['flex-justify-between'], _flexbox["default"]['flex-items-center'], (0, _defineProperty2["default"])({}, _Dropdown2["default"]['dropdown-inactive'], state === _Dropdown.dropdownState.inactive)),
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            children: summary
+          }), " ", /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _Dropdown2["default"]['dropdown-caret']
+          })]
+        })
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("ul", {
+        className: (0, _classnames["default"])(_Dropdown2["default"]['dropdown-menu'], _Dropdown2["default"]['dropdown-menu-se'], _layout["default"]['width-full']),
+        children: indexItems.map(function (indexItem) {
+          var href = indexItem.href,
+            text = indexItem.text,
+            isSelected = indexItem.isSelected;
+          var itemOtherProps = isSelected ? _objectSpread({}, {
+            'aria-current': ariaAttr === null || ariaAttr === void 0 ? void 0 : ariaAttr.current
+          }) : null;
+          return /*#__PURE__*/(0, _jsxRuntime.jsx)("li", {
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("a", _objectSpread(_objectSpread({
+              onClick: function onClick(e) {
+                e.preventDefault();
+                var newIndexItems = (0, _array.getIndexItemsWithSelected)(indexItems, indexItem);
+                _onClick({
+                  summary: text,
+                  ariaAttr: ariaAttr,
+                  items: newIndexItems.map(function (newIndexItem) {
+                    return function (_ref2) {
+                      var newIndexItemId = _ref2.id,
+                        newIndexItemHref = _ref2.href,
+                        newIndexItemText = _ref2.text,
+                        dateModified = _ref2['date-modified'],
+                        dateCreated = _ref2['date-created'],
+                        newIndexItemIsSelected = _ref2.isSelected;
+                      return {
+                        id: newIndexItemId,
+                        href: newIndexItemHref,
+                        text: newIndexItemText,
+                        'date-modified': dateModified,
+                        'date-created': dateCreated,
+                        isSelected: newIndexItemIsSelected
+                      };
+                    }(newIndexItem);
+                  })
+                });
+                details.current.removeAttribute('open');
+              },
+              className: _Dropdown2["default"]['dropdown-item'],
+              href: href
+            }, itemOtherProps), {}, {
+              children: text
+            }))
+          }, (0, _uuid.v1)());
+        })
+      })]
+    })
+  });
+}
+Dropdown.propTypes = _Dropdown.propTypes;

package/build/primer/Dropdown/Dropdown.prop.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.dropdownState = exports.defaultProps = void 0;
+var _propTypes = require("prop-types");
+var dropdownState = exports.dropdownState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var propTypes = exports.propTypes = {
+  className: _propTypes.string,
+  summary: _propTypes.string.isRequired,
+  ariaAttr: (0, _propTypes.shape)({
+    haspopup: _propTypes.bool,
+    current: _propTypes.string
+  }),
+  items: (0, _propTypes.arrayOf)((0, _propTypes.shape)({
+    href: _propTypes.string,
+    text: _propTypes.string,
+    isSelected: _propTypes.bool
+  })).isRequired,
+  onClick: _propTypes.func.isRequired,
+  state: (0, _propTypes.oneOf)(Object.keys(dropdownState))
+};
+var defaultProps = exports.defaultProps = {
+  className: null,
+  ariaAttr: {
+    haspopup: false,
+    current: 'page'
+  },
+  state: dropdownState.active
+};

package/build/primer/Dropdown/Dropdown.scss

@@ -0,0 +1 @@
+@import '@primer/view-components/app/components/primer/alpha/dropdown';

package/build/primer/Dropdown/index.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Dropdown", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown.Dropdown;
+  }
+});
+Object.defineProperty(exports, "dropdownState", {
+  enumerable: true,
+  get: function get() {
+    return _Dropdown2.dropdownState;
+  }
+});
+var _Dropdown = require("./Dropdown");
+var _Dropdown2 = require("./Dropdown.prop");

package/build/primer/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,59 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorBoundary = void 0;
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _react = require("react");
+var _ErrorBoundary = require("./ErrorBoundary.prop");
+var _jsxRuntime = require("react/jsx-runtime");
+function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2["default"])(o), (0, _possibleConstructorReturn2["default"])(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2["default"])(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /* eslint-disable no-unused-vars, no-console */
+var ErrorBoundary = exports.ErrorBoundary = /*#__PURE__*/function (_Component) {
+  function ErrorBoundary(props) {
+    var _this;
+    (0, _classCallCheck2["default"])(this, ErrorBoundary);
+    _this = _callSuper(this, ErrorBoundary, [props]);
+    _this.state = {
+      hasError: false
+    };
+    return _this;
+  }
+  (0, _inherits2["default"])(ErrorBoundary, _Component);
+  return (0, _createClass2["default"])(ErrorBoundary, [{
+    key: "componentDidCatch",
+    value: function componentDidCatch(error, errorInfo) {
+      // You can also log the error to an error reporting service
+      console.log('~error~', error);
+      console.log('~errorInfo~', errorInfo);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var hasError = this.state.hasError;
+      var children = this.props.children;
+      if (hasError) {
+        // You can render any custom fallback UI
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
+          children: "Something went wrong."
+        });
+      }
+      return children;
+    }
+  }], [{
+    key: "getDerivedStateFromError",
+    value: function getDerivedStateFromError(error) {
+      // Update state so the next render will show the fallback UI.
+      return {
+        hasError: true
+      };
+    }
+  }]);
+}(_react.Component);
+ErrorBoundary.propTypes = _ErrorBoundary.propTypes;

package/build/primer/ErrorBoundary/ErrorBoundary.prop.js

@@ -0,0 +1,11 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.defaultProps = void 0;
+var _propTypes = require("prop-types");
+var propTypes = exports.propTypes = {
+  children: _propTypes.node.isRequired
+};
+var defaultProps = exports.defaultProps = {};

package/build/primer/ErrorBoundary/index.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ErrorBoundary", {
+  enumerable: true,
+  get: function get() {
+    return _ErrorBoundary.ErrorBoundary;
+  }
+});
+var _ErrorBoundary = require("./ErrorBoundary");

package/build/primer/Form/Checkbox/Checkbox.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = Checkbox;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _margin = _interopRequireDefault(require("@papillonbits/css/build/primer/utilities/margin.scss"));
+var _Checkbox = require("./Checkbox.prop");
+var _Checkbox2 = _interopRequireDefault(require("./Checkbox.scss"));
+var _index = _interopRequireDefault(require("../index.scss"));
+var _jsxRuntime = require("react/jsx-runtime");
+function Checkbox(_ref) {
+  var _ref$dataTest = _ref.dataTest,
+    dataTest = _ref$dataTest === void 0 ? _Checkbox.defaultProps.dataTest : _ref$dataTest,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? _Checkbox.defaultProps.className : _ref$className,
+    _ref$htmlFor = _ref.htmlFor,
+    htmlFor = _ref$htmlFor === void 0 ? _Checkbox.defaultProps.htmlFor : _ref$htmlFor,
+    ariaAttr = _ref.ariaAttr,
+    _ref$inputType = _ref.inputType,
+    inputType = _ref$inputType === void 0 ? _Checkbox.defaultProps.inputType : _ref$inputType,
+    _ref$isChecked = _ref.isChecked,
+    isChecked = _ref$isChecked === void 0 ? _Checkbox.defaultProps.isChecked : _ref$isChecked,
+    _ref$text = _ref.text,
+    text = _ref$text === void 0 ? _Checkbox.defaultProps.text : _ref$text,
+    _onChange = _ref.onChange,
+    _ref$state = _ref.state,
+    state = _ref$state === void 0 ? _Checkbox.defaultProps.state : _ref$state;
+  var describedBy = ariaAttr.describedBy;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    "data-test": dataTest,
+    className: (0, _classnames["default"])(className, _margin["default"]['m-0'], _index["default"]['form-checkbox'], (0, _defineProperty2["default"])({}, _Checkbox2["default"]['checkbox-inactive'], state === _Checkbox.checkboxState.inactive)),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("label", {
+      htmlFor: htmlFor,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("input", {
+        type: inputType,
+        "aria-describedby": describedBy,
+        onChange: function onChange(event) {
+          _onChange(event);
+        },
+        checked: isChecked
+      }), text]
+    })
+  });
+}
+Checkbox.propTypes = _Checkbox.propTypes;

package/build/primer/Form/Checkbox/Checkbox.md

@@ -0,0 +1,32 @@
+# Checkbox
+
+> Style individual form checkbox controls and utilize common layouts.
+
+# Variants
+
+> - IsChecked, IsCheckedInactive
+> - IsNotChecked, IsNotCheckedInactive
+
+## IsChecked
+
+```jsx
+<Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} />
+```
+
+## IsCheckedInactive
+
+```jsx
+<Checkbox ariaAttr={ariaAttr} isChecked={true} onChange={action('onChange')} text={text.isChecked} state={checkboxState.inactive} />
+```
+
+## IsNotChecked
+
+```jsx
+<Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} />
+```
+
+## IsNotCheckedInactive
+
+```jsx
+<Checkbox ariaAttr={ariaAttr} isChecked={false} onChange={action('onChange')} text={text.isNotChecked} state={checkboxState.inactive} />
+```

package/build/primer/Form/Checkbox/Checkbox.prop.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.propTypes = exports.inputType = exports.defaultProps = exports.checkboxState = void 0;
+var _propTypes = require("prop-types");
+var checkboxState = exports.checkboxState = {
+  active: 'active',
+  inactive: 'inactive'
+};
+var inputType = exports.inputType = {
+  checkbox: 'checkbox'
+};
+var propTypes = exports.propTypes = {
+  dataTest: _propTypes.string,
+  className: _propTypes.string,
+  htmlFor: _propTypes.string,
+  ariaAttr: (0, _propTypes.shape)({
+    describedBy: _propTypes.string
+  }).isRequired,
+  inputType: (0, _propTypes.oneOf)(Object.keys(inputType)),
+  isChecked: _propTypes.bool,
+  text: _propTypes.string,
+  onChange: _propTypes.func.isRequired,
+  state: (0, _propTypes.oneOf)(Object.keys(checkboxState))
+};
+var defaultProps = exports.defaultProps = {
+  dataTest: null,
+  className: null,
+  htmlFor: 'checkbox',
+  inputType: inputType.checkbox,
+  isChecked: false,
+  text: null,
+  state: checkboxState.active
+};

package/build/primer/Form/Checkbox/Checkbox.scss

@@ -0,0 +1,6 @@
+// custom-style
+// .checkbox-inactive {
+//   @include inactive;
+
+//   color: var(--color-scale-gray-4) !important;
+// }

package/build/primer/Form/Checkbox/__tests__/__snapshots__/Checkbox.int.test.js.snap

@@ -0,0 +1,75 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`<Checkbox /> Render must match isChecked() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        aria-describedby="help-text-for-checkbox"
+        checked=""
+        type="checkbox"
+      />
+      is checked
+    </label>
+  </div>
+</div>
+`;
+
+exports[`<Checkbox /> Render must match isCheckedInactive() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox checkbox-inactive"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        aria-describedby="help-text-for-checkbox"
+        checked=""
+        type="checkbox"
+      />
+      is checked
+    </label>
+  </div>
+</div>
+`;
+
+exports[`<Checkbox /> Render must match isNotChecked() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        aria-describedby="help-text-for-checkbox"
+        type="checkbox"
+      />
+      is not checked
+    </label>
+  </div>
+</div>
+`;
+
+exports[`<Checkbox /> Render must match isNotCheckedInactive() 1`] = `
+<div>
+  <div
+    class="m-0 form-checkbox checkbox-inactive"
+  >
+    <label
+      for="checkbox"
+    >
+      <input
+        aria-describedby="help-text-for-checkbox"
+        type="checkbox"
+      />
+      is not checked
+    </label>
+  </div>
+</div>
+`;