@spaced-out/ui-design-system 0.0.1-alpha.0

package/lib/components/ButtonDropdown/ButtonDropdown.js.flow

@@ -0,0 +1,119 @@
+// @flow strict
+
+import * as React from 'react';
+import {
+  // $FlowFixMe[untyped-import]
+  autoUpdate,
+  // $FlowFixMe[untyped-import]
+  flip,
+  // $FlowFixMe[untyped-import]
+  offset,
+  // $FlowFixMe[untyped-import]
+  shift,
+  // $FlowFixMe[untyped-import]
+  useFloating,
+} from '@floating-ui/react-dom';
+
+import {sizeFluid} from '../../styles/variables/_size';
+import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
+import {classify} from '../../utils/classify';
+import {ClickAway} from '../../utils/click-away';
+import type {ButtonProps} from '../Button';
+import {Button} from '../Button';
+import type {MenuOption, MenuProps} from '../Menu';
+import {Menu} from '../Menu';
+
+import css from './ButtonDropdown.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type ButtonDropdownProps = {
+  anchorPosition?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end',
+  size?: 'medium' | 'small',
+  props?: {
+    button: ButtonProps,
+    menu: MenuProps,
+  },
+  onOptionSelect?: (option: MenuOption) => mixed,
+  classNames?: ClassNames,
+  disabled?: boolean,
+};
+
+export const ButtonDropdown = ({
+  anchorPosition = 'bottom-start',
+  size,
+  onOptionSelect,
+  props,
+  classNames,
+  disabled,
+}: ButtonDropdownProps): React.Node => {
+  const menuBtnRef = React.useRef();
+  const {x, y, reference, floating, strategy} = useFloating({
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: autoUpdate,
+    middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
+  });
+
+  return (
+    <ClickAway>
+      {({isOpen, onOpen, cancelNext, clickAway}) => (
+        <div
+          data-testid="ButtonDropdown"
+          className={classify(css.buttonDropdownContainer, classNames?.wrapper)}
+          ref={menuBtnRef}
+        >
+          <Button
+            {...props?.button}
+            iconRightName={
+              props?.button.children
+                ? isOpen
+                  ? 'caret-up'
+                  : 'caret-down'
+                : props?.button.iconRightName
+            }
+            iconRightType={
+              props?.button.children ? 'solid' : props?.button.iconRightType
+            }
+            disabled={disabled}
+            size={size}
+            ref={reference}
+            onClick={(e) => {
+              e.stopPropagation();
+              onOpen();
+            }}
+          />
+          {isOpen && props?.menu && (
+            <div
+              onClickCapture={cancelNext}
+              ref={floating}
+              style={{
+                display: 'flex',
+                position: strategy,
+                top: y ?? spaceNone,
+                left: x ?? spaceNone,
+                width: sizeFluid,
+              }}
+            >
+              <Menu
+                {...props.menu}
+                onSelect={(option) => {
+                  onOptionSelect && onOptionSelect(option);
+                  clickAway();
+                }}
+                size={size}
+              />
+            </div>
+          )}
+        </div>
+      )}
+    </ClickAway>
+  );
+};

package/lib/components/ButtonDropdown/ButtonDropdown.module.css

@@ -0,0 +1,4 @@
+.buttonDropdownContainer {
+  display: flex;
+  position: relative;
+}

package/lib/components/ButtonDropdown/index.js

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

package/lib/components/ButtonDropdown/index.js.flow

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {ButtonDropdownProps} from './ButtonDropdown';
+export {ButtonDropdown} from './ButtonDropdown';

package/lib/components/Checkbox/Checkbox.js

@@ -0,0 +1,99 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Checkbox = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _Text = require("../Text/Text");
+var _CheckboxModule = _interopRequireDefault(require("./Checkbox.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const Checkbox = _ref => {
+  let {
+    name = 'checkbox',
+    value = '',
+    children,
+    checked = false,
+    indeterminate = false,
+    focused = false,
+    disabled = false,
+    error = false,
+    onChange,
+    align,
+    classNames
+  } = _ref;
+  const checkboxInput = /*#__PURE__*/React.createRef();
+  const handleOnChange = () => {
+    if (!disabled) {
+      onChange && onChange({
+        value,
+        checked: !checked
+      });
+    }
+  };
+  React.useEffect(() => {
+    if (checkboxInput.current && focused) {
+      checkboxInput.current.focus();
+    }
+  }, [focused]);
+  React.useEffect(() => {
+    if (checkboxInput.current && indeterminate) {
+      checkboxInput.current.indeterminate = true;
+    }
+    if (checkboxInput.current && !indeterminate) {
+      checkboxInput.current.indeterminate = false;
+    }
+  }, [indeterminate]);
+  return /*#__PURE__*/(0, _jsxRuntime.jss)("label", {
+    "data-testid": "checkbox",
+    className: (0, _classify.default)(_CheckboxModule.default.checkboxContainer, {
+      [_CheckboxModule.default.disabled]: disabled,
+      [_CheckboxModule.default.horizontalCheckbox]: align === 'horizontal-fixed',
+      [_CheckboxModule.default.fluidCheckbox]: align === 'horizontal-fluid'
+    }, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.jss)("span", {
+      className: (0, _classify.default)(_CheckboxModule.default.checkboxSquare, {
+        [_CheckboxModule.default.disabled]: disabled
+      }),
+      children: [/*#__PURE__*/(0, _jsxRuntime.js)("input", {
+        type: "checkbox",
+        value: value,
+        checked: checked,
+        ref: checkboxInput,
+        onChange: handleOnChange,
+        tabIndex: disabled ? '-1' : 0,
+        className: (0, _classify.default)(_CheckboxModule.default.inputCheckbox),
+        disabled: disabled,
+        name: name
+      }), /*#__PURE__*/(0, _jsxRuntime.jss)("span", {
+        className: (0, _classify.default)(_CheckboxModule.default.checkboxSquareInner, {
+          [_CheckboxModule.default.enabled]: !disabled && !error,
+          [_CheckboxModule.default.disabled]: disabled,
+          [_CheckboxModule.default.error]: error && !disabled
+        }),
+        children: [indeterminate && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+          color: disabled ? 'disabled' : 'inversePrimary',
+          name: "hyphen",
+          size: "small",
+          type: "regular"
+        }), checked && !indeterminate && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+          color: disabled ? 'disabled' : 'inversePrimary',
+          name: "check",
+          size: "small",
+          type: "regular"
+        })]
+      })]
+    }), React.Children.count(children) > 0 && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.FormLabelMedium, {
+      color: "secondary",
+      className: (0, _classify.default)(_CheckboxModule.default.checkboxLabel, classNames?.label),
+      children: children
+    })]
+  });
+};
+exports.Checkbox = Checkbox;

package/lib/components/Checkbox/Checkbox.js.flow

@@ -0,0 +1,133 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {GroupAlign} from '../../types/common';
+import classify from '../../utils/classify';
+import {Icon} from '../Icon';
+import {FormLabelMedium} from '../Text/Text';
+
+import css from './Checkbox.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string, label?: string}>;
+
+export type CheckboxProps = {
+  name?: string,
+  value?: string,
+  children?: React.Node,
+  checked?: boolean,
+  indeterminate?: boolean,
+  focused?: boolean,
+  disabled?: boolean,
+  error?: boolean,
+  onChange?: ({value: string, checked: boolean}) => mixed,
+  align?: GroupAlign,
+  classNames?: ClassNames,
+};
+
+export const Checkbox = ({
+  name = 'checkbox',
+  value = '',
+  children,
+  checked = false,
+  indeterminate = false,
+  focused = false,
+  disabled = false,
+  error = false,
+  onChange,
+  align,
+  classNames,
+}: CheckboxProps): React.Node => {
+  const checkboxInput = React.createRef<HTMLInputElement>();
+
+  const handleOnChange = () => {
+    if (!disabled) {
+      onChange &&
+        onChange({
+          value,
+          checked: !checked,
+        });
+    }
+  };
+
+  React.useEffect(() => {
+    if (checkboxInput.current && focused) {
+      checkboxInput.current.focus();
+    }
+  }, [focused]);
+
+  React.useEffect(() => {
+    if (checkboxInput.current && indeterminate) {
+      checkboxInput.current.indeterminate = true;
+    }
+    if (checkboxInput.current && !indeterminate) {
+      checkboxInput.current.indeterminate = false;
+    }
+  }, [indeterminate]);
+
+  return (
+    <label
+      data-testid="checkbox"
+      className={classify(
+        css.checkboxContainer,
+        {
+          [css.disabled]: disabled,
+          [css.horizontalCheckbox]: align === 'horizontal-fixed',
+          [css.fluidCheckbox]: align === 'horizontal-fluid',
+        },
+        classNames?.wrapper,
+      )}
+    >
+      <span
+        className={classify(css.checkboxSquare, {
+          [css.disabled]: disabled,
+        })}
+      >
+        <input
+          type="checkbox"
+          value={value}
+          checked={checked}
+          ref={checkboxInput}
+          onChange={handleOnChange}
+          tabIndex={disabled ? '-1' : 0}
+          className={classify(css.inputCheckbox)}
+          disabled={disabled}
+          name={name}
+        />
+        <span
+          className={classify(css.checkboxSquareInner, {
+            [css.enabled]: !disabled && !error,
+            [css.disabled]: disabled,
+            [css.error]: error && !disabled,
+          })}
+        >
+          {indeterminate && (
+            <Icon
+              color={disabled ? 'disabled' : 'inversePrimary'}
+              name="hyphen"
+              size="small"
+              type="regular"
+            />
+          )}
+          {checked && !indeterminate && (
+            <Icon
+              color={disabled ? 'disabled' : 'inversePrimary'}
+              name="check"
+              size="small"
+              type="regular"
+            />
+          )}
+        </span>
+      </span>
+      {React.Children.count(children) > 0 && (
+        <FormLabelMedium
+          color="secondary"
+          className={classify(css.checkboxLabel, classNames?.label)}
+        >
+          {children}
+        </FormLabelMedium>
+      )}
+    </label>
+  );
+};

package/lib/components/Checkbox/Checkbox.module.css

@@ -0,0 +1,160 @@
+@value (
+  borderWidthNone,
+  borderWidthTertiary,
+  borderRadiusXSmall
+) from '../../styles/variables/_border.css';
+
+@value (
+  colorBorderSecondary,
+  colorFillPrimary,
+  colorFillDisabled,
+  colorBorderDanger,
+  colorDanger,
+  colorFocusPrimary,
+  colorFocusDanger
+) from '../../styles/variables/_color.css';
+
+@value (
+  size18,
+  size20,
+  size24,
+  size110,
+  size160,
+  size240,
+  size500,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceNone,
+  spaceSmall,
+  spaceMedium,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+
+.checkboxContainer {
+  color: colorFillPrimary;
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: spaceSmall;
+  cursor: pointer;
+}
+
+.checkboxContainer .disabled {
+  cursor: not-allowed;
+}
+
+.horizontalCheckbox {
+  flex: 1 0 size160; /*  grow, don't shrink, start with size160 width */
+}
+
+.fluidCheckbox {
+  flex: 0 0 auto; /* don't grow, don't shrink, auto width */
+}
+
+.checkboxSquare {
+  width: size24;
+  height: size24;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+}
+
+.checkboxSquare .disabled {
+  cursor: not-allowed;
+}
+
+.inputCheckbox {
+  position: absolute;
+  width: size24;
+  height: size24;
+  cursor: pointer;
+  opacity: 0;
+}
+
+.checkboxSquareInner {
+  box-sizing: border-box;
+  height: size18;
+  width: size18;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: borderRadiusXSmall;
+}
+
+.enabled {
+  border: borderWidthTertiary solid colorBorderSecondary;
+  cursor: pointer;
+}
+
+input[type='checkbox']:focus + .enabled {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+input[type='checkbox']:checked + .enabled {
+  border: borderWidthNone;
+  background: colorFillPrimary;
+}
+
+input[type='checkbox']:checked:focus + .enabled {
+  border: borderWidthNone;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+input[type='checkbox']:indeterminate + .enabled {
+  border: borderWidthNone;
+  background: colorFillPrimary;
+}
+
+input[type='checkbox']:indeterminate:focus + .enabled {
+  border: borderWidthNone;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+input[type='checkbox']:disabled {
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+.disabled {
+  border: borderWidthTertiary solid colorFillDisabled;
+  pointer-events: none;
+  cursor: not-allowed;
+}
+
+input[type='checkbox']:checked + .disabled {
+  border: borderWidthNone;
+  background: colorFillDisabled;
+}
+
+input[type='checkbox']:indeterminate + .disabled {
+  border: borderWidthNone;
+  background: colorFillDisabled;
+}
+
+.error {
+  border: borderWidthTertiary solid colorBorderDanger;
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusDanger;
+}
+
+input[type='checkbox']:indeterminate + .error {
+  border: borderWidthNone;
+  background: colorDanger;
+}
+
+input[type='checkbox']:checked + .error {
+  border: borderWidthNone;
+  background: colorDanger;
+}
+
+.checkboxLabel {
+  composes: truncate from '../../styles/typography.module.css';
+}

package/lib/components/Checkbox/CheckboxGroup.js

@@ -0,0 +1,85 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CheckboxGroup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Text = require("../Text/Text.js");
+var _CheckboxGroupModule = _interopRequireDefault(require("./CheckboxGroup.module.css"));
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const CheckboxGroup = _ref => {
+  let {
+    align = 'vertical',
+    disabled = false,
+    name,
+    value: checkedList,
+    onChange,
+    classNames,
+    error = false,
+    errorText = '',
+    children
+  } = _ref;
+  const onChangeHandler = _ref2 => {
+    let {
+      value,
+      checked
+    } = _ref2;
+    const checkedListTemp = checkedList ? [...checkedList] : [];
+    if (checked && !checkedListTemp.includes(value)) {
+      checkedListTemp.push(value);
+    } else if (!checked && checkedListTemp.includes(value)) {
+      for (let i = 0; i < checkedListTemp.length; i++) {
+        if (checkedListTemp[i] === value) {
+          checkedListTemp.splice(i, 1);
+          break;
+        }
+      }
+    }
+    onChange && onChange(checkedListTemp);
+  };
+  const childrenWithProps = React.Children.map(children, child => {
+    if ( /*#__PURE__*/React.isValidElement(child)) {
+      const {
+        value,
+        disabled: disabledChild,
+        error: errorChild,
+        onChange
+      } = child.props;
+      const childOnChange = function () {
+        onChangeHandler(...arguments);
+        onChange && onChange(...arguments);
+      };
+      return /*#__PURE__*/React.cloneElement(child, {
+        name,
+        checked: !!checkedList?.includes(value),
+        onChange: childOnChange,
+        align,
+        error: errorChild || error,
+        disabled: disabledChild || disabled
+      });
+    }
+    return child;
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+    className: (0, _classify.default)(_CheckboxGroupModule.default.checkboxGroupContainer, classNames?.wrapper),
+    children: [/*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: (0, _classify.default)({
+        [_CheckboxGroupModule.default.vertical]: align === 'vertical',
+        [_CheckboxGroupModule.default.horizontal]: align === 'horizontal-fixed',
+        [_CheckboxGroupModule.default.horizontalFluid]: align === 'horizontal-fluid'
+      }, classNames?.checkboxGroup),
+      children: childrenWithProps
+    }), error && /*#__PURE__*/(0, _jsxRuntime.js)(_Text.BodySmall, {
+      className: (0, _classify.default)(classNames?.errorText),
+      color: "danger",
+      children: errorText
+    })]
+  });
+};
+exports.CheckboxGroup = CheckboxGroup;