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

package/lib/components/Button/Button.js

@@ -0,0 +1,120 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnstyledButton = exports.Button = exports.BUTTON_TYPES = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = require("../../utils/classify");
+var _Icon = require("../Icon");
+var _ButtonModule = _interopRequireDefault(require("./Button.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 BUTTON_TYPES = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  ghost: 'ghost',
+  danger: 'danger'
+});
+exports.BUTTON_TYPES = BUTTON_TYPES;
+const ButtonTypeToIconColorMap = {
+  primary: 'inversePrimary',
+  secondary: 'primary',
+  tertiary: 'primary',
+  ghost: 'primary',
+  danger: 'inversePrimary'
+};
+const UnstyledButton = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+  let {
+    disabled,
+    onClick,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.js)("button", {
+    ...props,
+    className: className,
+    ref: ref,
+    role: "button",
+    disabled: disabled,
+    onClick: event => {
+      if (disabled) {
+        event.preventDefault();
+      } else if (onClick) {
+        onClick(event);
+      }
+    }
+  });
+});
+exports.UnstyledButton = UnstyledButton;
+const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+  let {
+    classNames,
+    children,
+    iconLeftName = '',
+    iconLeftType = 'regular',
+    iconRightName = '',
+    iconRightType = 'regular',
+    type = 'primary',
+    isFluid = false,
+    disabled = false,
+    size = 'medium',
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.js)(UnstyledButton, {
+    ...props,
+    className: (0, _classify.classify)(_ButtonModule.default.button, {
+      [_ButtonModule.default.primary]: type === 'primary',
+      [_ButtonModule.default.secondary]: type === 'secondary',
+      [_ButtonModule.default.tertiary]: type === 'tertiary',
+      [_ButtonModule.default.ghost]: type === 'ghost',
+      [_ButtonModule.default.danger]: type === 'danger',
+      [_ButtonModule.default.disabled]: disabled,
+      [_ButtonModule.default.small]: size === 'small',
+      [_ButtonModule.default.medium]: size === 'medium',
+      [_ButtonModule.default.isFluid]: isFluid === true,
+      [_ButtonModule.default.withIconLeft]: !!iconLeftName,
+      [_ButtonModule.default.withIconRight]: !!iconRightName,
+      [_ButtonModule.default.withBothIcon]: !!(iconLeftName && iconRightName),
+      [_ButtonModule.default.onlyIcon]: (iconLeftName || iconRightName) && !children
+    }, classNames?.wrapper),
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+      className: _ButtonModule.default.buttonRow,
+      children: !(iconLeftName || iconRightName) ? /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+        className: _ButtonModule.default.textContainerCenter,
+        children: children
+      }) :
+      // has icon, but no child
+      children == null ? /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+        name: iconLeftName || iconRightName,
+        color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
+        size: size === 'medium' ? 'medium' : 'small',
+        type: iconLeftType || iconRightType
+      }) :
+      // has icon _and_ child
+      (iconLeftName || iconRightName) && /*#__PURE__*/(0, _jsxRuntime.jss)(_jsxRuntime.Fragment, {
+        children: [iconLeftName && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+          name: iconLeftName,
+          color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
+          size: size === 'medium' ? 'medium' : 'small',
+          type: iconLeftType
+        }), /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+          className: _ButtonModule.default.textContainerLeft,
+          children: children
+        }), iconRightName && /*#__PURE__*/(0, _jsxRuntime.js)(_Icon.Icon, {
+          name: iconRightName,
+          color: disabled ? 'disabled' : ButtonTypeToIconColorMap[type],
+          size: size === 'medium' ? 'medium' : 'small',
+          type: iconRightType
+        })]
+      })
+    })
+  });
+});
+exports.Button = Button;
+Button.name = Button.displayName = 'Button';

package/lib/components/Button/Button.js.flow

@@ -0,0 +1,166 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {classify} from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+
+import css from './Button.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type UnstyledButtonProps = {
+  children?: React.Node,
+  disabled?: mixed,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
+  ...
+};
+
+export const BUTTON_TYPES = Object.freeze({
+  primary: 'primary',
+  secondary: 'secondary',
+  tertiary: 'tertiary',
+  ghost: 'ghost',
+  danger: 'danger',
+});
+
+export type ButtonType = $Values<typeof BUTTON_TYPES>;
+
+export type ButtonProps = {
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  classNames?: ClassNames,
+  iconLeftName?: string,
+  iconLeftType?: IconType,
+  iconRightName?: string,
+  iconRightType?: IconType,
+  children?: React.Node,
+  type?: ButtonType,
+  isFluid?: boolean,
+  disabled?: boolean,
+  size?: 'medium' | 'small',
+  ...
+};
+
+const ButtonTypeToIconColorMap = {
+  primary: 'inversePrimary',
+  secondary: 'primary',
+  tertiary: 'primary',
+  ghost: 'primary',
+  danger: 'inversePrimary',
+};
+
+export const UnstyledButton: React$AbstractComponent<
+  UnstyledButtonProps,
+  HTMLButtonElement,
+> = React.forwardRef<UnstyledButtonProps, HTMLButtonElement>(
+  (
+    {disabled, onClick, className, ...props}: UnstyledButtonProps,
+    ref: React.Ref<'button'>,
+  ) => (
+    <button
+      {...props}
+      className={className}
+      ref={ref}
+      role="button"
+      disabled={disabled}
+      onClick={(event) => {
+        if (disabled) {
+          event.preventDefault();
+        } else if (onClick) {
+          onClick(event);
+        }
+      }}
+    />
+  ),
+);
+
+export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
+  React.forwardRef<ButtonProps, HTMLButtonElement>(
+    (
+      {
+        classNames,
+        children,
+        iconLeftName = '',
+        iconLeftType = 'regular',
+        iconRightName = '',
+        iconRightType = 'regular',
+        type = 'primary',
+        isFluid = false,
+        disabled = false,
+        size = 'medium',
+        ...props
+      }: ButtonProps,
+      ref,
+    ) => (
+      <UnstyledButton
+        {...props}
+        className={classify(
+          css.button,
+          {
+            [css.primary]: type === 'primary',
+            [css.secondary]: type === 'secondary',
+            [css.tertiary]: type === 'tertiary',
+            [css.ghost]: type === 'ghost',
+            [css.danger]: type === 'danger',
+            [css.disabled]: disabled,
+            [css.small]: size === 'small',
+            [css.medium]: size === 'medium',
+            [css.isFluid]: isFluid === true,
+            [css.withIconLeft]: !!iconLeftName,
+            [css.withIconRight]: !!iconRightName,
+            [css.withBothIcon]: !!(iconLeftName && iconRightName),
+            [css.onlyIcon]: (iconLeftName || iconRightName) && !children,
+          },
+          classNames?.wrapper,
+        )}
+        ref={ref}
+      >
+        <div className={css.buttonRow}>
+          {/* Has no icon, only child */}
+          {!(iconLeftName || iconRightName) ? (
+            <div className={css.textContainerCenter}>{children}</div>
+          ) : // has icon, but no child
+            children == null ? (
+              <Icon
+                name={iconLeftName || iconRightName}
+                color={disabled ? 'disabled' : ButtonTypeToIconColorMap[type]}
+                size={size === 'medium' ? 'medium' : 'small'}
+                type={iconLeftType || iconRightType}
+              />
+            ) : (
+            // has icon _and_ child
+              (iconLeftName || iconRightName) && (
+                <>
+                  {iconLeftName && (
+                    <Icon
+                      name={iconLeftName}
+                      color={
+                        disabled ? 'disabled' : ButtonTypeToIconColorMap[type]
+                      }
+                      size={size === 'medium' ? 'medium' : 'small'}
+                      type={iconLeftType}
+                    />
+                  )}
+                  <div className={css.textContainerLeft}>{children}</div>
+                  {iconRightName && (
+                    <Icon
+                      name={iconRightName}
+                      color={
+                        disabled ? 'disabled' : ButtonTypeToIconColorMap[type]
+                      }
+                      size={size === 'medium' ? 'medium' : 'small'}
+                      type={iconRightType}
+                    />
+                  )}
+                </>
+              )
+            )}
+        </div>
+      </UnstyledButton>
+    ),
+  );
+
+Button.name = Button.displayName = 'Button';

package/lib/components/Button/Button.module.css

@@ -0,0 +1,226 @@
+@value (
+  colorButtonFillPrimaryEnabled,
+  colorButtonFillPrimaryHovered,
+  colorButtonFillPrimaryPressed,
+
+  colorButtonFillSecondaryEnabled,
+  colorButtonFillSecondaryHovered,
+  colorButtonFillSecondaryPressed,
+
+  colorButtonFillTertiaryEnabled,
+  colorButtonFillTertiaryHovered,
+  colorButtonFillTertiaryPressed,
+
+  colorButtonFillGhostEnabled,
+  colorButtonFillGhostHovered,
+  colorButtonFillGhostPressed,
+
+  colorButtonFillDangerEnabled,
+  colorButtonFillDangerHovered,
+  colorButtonFillDangerPressed,
+
+  colorFocusPrimary,
+  colorFocusDanger,
+
+  colorFillDisabled,
+
+  colorTextPrimary,
+  colorTextInversePrimary,
+  colorTextDisabled,
+
+  colorBorderSecondary
+
+) from '../../styles/variables/_color.css';
+
+@value (
+  size2,
+  size42,
+  size34,
+  size110,
+  sizeFluid
+) from '../../styles/variables/_size.css';
+
+@value (
+  spaceNone,
+  spaceSmall,
+  spaceMedium,
+  spaceXSmall
+) from '../../styles/variables/_space.css';
+
+@value (
+  borderWidthPrimary,
+  borderRadiusMedium,
+  borderRadiusSmall,
+  borderWidthNone,
+  borderWidthTertiary
+) from '../../styles/variables/_border.css';
+
+button {
+  background: none;
+  border: none;
+}
+
+.button {
+  composes: motionEaseInEaseOut from '../../styles/animation.module.css';
+  display: flex;
+  flex-direction: row;
+  padding: spaceNone spaceMedium;
+  height: size42;
+  text-align: center;
+  justify-content: center;
+  border-radius: borderRadiusMedium;
+  align-items: center;
+  outline: none;
+  cursor: pointer;
+  min-width: size110;
+}
+
+.buttonRow {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  column-gap: spaceXSmall;
+}
+
+.withIconLeft {
+  padding: spaceNone spaceMedium spaceNone spaceSmall;
+}
+
+.withIconRight {
+  padding: spaceNone spaceSmall spaceNone spaceMedium;
+}
+
+.onlyIcon {
+  padding: spaceNone;
+}
+
+.withBothIcon {
+  padding: spaceNone spaceSmall;
+}
+
+.onlyIcon > .buttonRow {
+  column-gap: initial;
+}
+
+.medium {
+  composes: buttonTextMedium from '../../styles/typography.module.css';
+  height: size42;
+}
+
+.medium.onlyIcon {
+  min-width: size42;
+}
+
+.small {
+  composes: buttonTextSmall from '../../styles/typography.module.css';
+  height: size34;
+  border-radius: borderRadiusSmall;
+}
+
+.small.onlyIcon {
+  min-width: size34;
+}
+
+.isFluid {
+  width: sizeFluid;
+}
+
+.button:focus {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusPrimary;
+}
+
+.primary {
+  color: colorTextInversePrimary;
+  background-color: colorButtonFillPrimaryEnabled;
+}
+
+.primary:hover {
+  background-color: colorButtonFillPrimaryHovered;
+}
+
+.primary:active {
+  background-color: colorButtonFillPrimaryPressed;
+}
+
+.secondary {
+  color: colorTextPrimary;
+  background-color: colorButtonFillSecondaryEnabled;
+}
+
+.secondary:hover {
+  background-color: colorButtonFillSecondaryHovered;
+}
+
+.secondary:active {
+  background-color: colorButtonFillSecondaryPressed;
+}
+
+.tertiary {
+  color: colorTextPrimary;
+  border: borderWidthPrimary solid colorBorderSecondary;
+  background-color: colorButtonFillTertiaryEnabled;
+}
+
+.tertiary:hover {
+  background-color: colorButtonFillTertiaryHovered;
+}
+
+.tertiary:active {
+  background-color: colorButtonFillTertiaryPressed;
+}
+
+.ghost {
+  color: colorTextPrimary;
+  background-color: colorButtonFillGhostEnabled;
+  padding: spaceNone spaceSmall;
+}
+
+.ghost.withIconLeft {
+  padding: spaceNone spaceSmall spaceNone spaceXSmall;
+}
+
+.ghost.withIconRight {
+  padding: spaceNone spaceXSmall spaceNone spaceSmall;
+}
+
+.ghost.onlyIcon {
+  padding: spaceNone;
+}
+
+.ghost.withBothIcon {
+  padding: spaceNone spaceXSmall;
+}
+
+.ghost:hover {
+  background-color: colorButtonFillGhostHovered;
+}
+
+.ghost:active {
+  background-color: colorButtonFillGhostPressed;
+}
+
+.danger {
+  color: colorTextInversePrimary;
+  background-color: colorButtonFillDangerEnabled;
+}
+
+.danger:hover {
+  background-color: colorButtonFillDangerHovered;
+}
+
+.danger:active {
+  background-color: colorButtonFillDangerPressed;
+}
+
+.danger:focus {
+  box-shadow: borderWidthNone borderWidthNone borderWidthNone
+    borderWidthTertiary colorFocusDanger;
+}
+
+.button.disabled {
+  pointer-events: none;
+  color: colorTextDisabled;
+  background-color: colorFillDisabled;
+}

package/lib/components/Button/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "BUTTON_TYPES", {
+  enumerable: true,
+  get: function () {
+    return _Button.BUTTON_TYPES;
+  }
+});
+Object.defineProperty(exports, "Button", {
+  enumerable: true,
+  get: function () {
+    return _Button.Button;
+  }
+});
+Object.defineProperty(exports, "UnstyledButton", {
+  enumerable: true,
+  get: function () {
+    return _Button.UnstyledButton;
+  }
+});
+var _Button = require("./Button");

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

@@ -0,0 +1,4 @@
+// @flow strict
+
+export type {ButtonProps, ButtonType} from './Button';
+export {Button, BUTTON_TYPES, UnstyledButton} from './Button';

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -0,0 +1,89 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ButtonDropdown = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _reactDom = require("@floating-ui/react-dom");
+var _size = require("../../styles/variables/_size");
+var _space = require("../../styles/variables/_space");
+var _classify = require("../../utils/classify");
+var _clickAway = require("../../utils/click-away");
+var _Button = require("../Button");
+var _Menu = require("../Menu");
+var _ButtonDropdownModule = _interopRequireDefault(require("./ButtonDropdown.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 ButtonDropdown = _ref => {
+  let {
+    anchorPosition = 'bottom-start',
+    size,
+    onOptionSelect,
+    props,
+    classNames,
+    disabled
+  } = _ref;
+  const menuBtnRef = React.useRef();
+  const {
+    x,
+    y,
+    reference,
+    floating,
+    strategy
+  } = (0, _reactDom.useFloating)({
+    strategy: 'absolute',
+    placement: anchorPosition,
+    whileElementsMounted: _reactDom.autoUpdate,
+    middleware: [(0, _reactDom.shift)(), (0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.js)(_clickAway.ClickAway, {
+    children: _ref2 => {
+      let {
+        isOpen,
+        onOpen,
+        cancelNext,
+        clickAway
+      } = _ref2;
+      return /*#__PURE__*/(0, _jsxRuntime.jss)("div", {
+        "data-testid": "ButtonDropdown",
+        className: (0, _classify.classify)(_ButtonDropdownModule.default.buttonDropdownContainer, classNames?.wrapper),
+        ref: menuBtnRef,
+        children: [/*#__PURE__*/(0, _jsxRuntime.js)(_Button.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 && /*#__PURE__*/(0, _jsxRuntime.js)("div", {
+          onClickCapture: cancelNext,
+          ref: floating,
+          style: {
+            display: 'flex',
+            position: strategy,
+            top: y ?? _space.spaceNone,
+            left: x ?? _space.spaceNone,
+            width: _size.sizeFluid
+          },
+          children: /*#__PURE__*/(0, _jsxRuntime.js)(_Menu.Menu, {
+            ...props.menu,
+            onSelect: option => {
+              onOptionSelect && onOptionSelect(option);
+              clickAway();
+            },
+            size: size
+          })
+        })]
+      });
+    }
+  });
+};
+exports.ButtonDropdown = ButtonDropdown;