@spaced-out/ui-design-system 0.0.29 → 0.0.31

package/.github/workflows/pages.yml

@@ -30,6 +30,9 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: 16
       - name: Install and Build 🔧
         # Install npm packages and build the Storybook files
         run: |

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.0.31](https://github.com/spaced-out/ui-design-system/compare/v0.0.30...v0.0.31) (2023-02-22)
+
+
+### Bug Fixes
+
+* padding overrides for card ([263df80](https://github.com/spaced-out/ui-design-system/commit/263df80accb51477941978a758b707fd677b28e9))
+
+### [0.0.30](https://github.com/spaced-out/ui-design-system/compare/v0.0.29...v0.0.30) (2023-02-21)
+
+
+### Bug Fixes
+
+* compose menu fixes ([09b116b](https://github.com/spaced-out/ui-design-system/commit/09b116bbb9426f4678c0ccd8db4bfffb107c11fb))
+* pages action node 16 ([#69](https://github.com/spaced-out/ui-design-system/issues/69)) ([2cbe669](https://github.com/spaced-out/ui-design-system/commit/2cbe6699cae1606471f7e1bed240eace8d907af2))
+* tooltip motion duration ([#67](https://github.com/spaced-out/ui-design-system/issues/67)) ([653dc72](https://github.com/spaced-out/ui-design-system/commit/653dc72d68a4098b577620c2ba8538f2943d08e3))
+
 ### [0.0.29](https://github.com/spaced-out/ui-design-system/compare/v0.0.28...v0.0.29) (2023-02-21)
 
 

package/lib/components/Card/Card.js

@@ -34,14 +34,14 @@ const Card = _ref => {
     ...props
   } = _ref;
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
-    "data-testid": "Card",
-    className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper),
     style: {
-      paddingTop: getPaddingValue(paddingTop),
-      paddingRight: getPaddingValue(paddingRight),
-      paddingBottom: getPaddingValue(paddingBottom),
-      paddingLeft: getPaddingValue(paddingLeft)
-    }
+      '--card-padding-top': getPaddingValue(paddingTop),
+      '--card-padding-right': getPaddingValue(paddingRight),
+      '--card-padding-bottom': getPaddingValue(paddingBottom),
+      '--card-padding-left': getPaddingValue(paddingLeft)
+    },
+    "data-testid": "Card",
+    className: (0, _classify.default)(_CardModule.default.cardWrapper, classNames?.wrapper)
   }), children);
 };
 exports.Card = Card;

package/lib/components/Card/Card.js.flow

@@ -51,14 +51,14 @@ export const Card = ({
 }: CardProps): React.Node => (
   <div
     {...props}
-    data-testid="Card"
-    className={classify(css.cardWrapper, classNames?.wrapper)}
     style={{
-      paddingTop: getPaddingValue(paddingTop),
-      paddingRight: getPaddingValue(paddingRight),
-      paddingBottom: getPaddingValue(paddingBottom),
-      paddingLeft: getPaddingValue(paddingLeft),
+      '--card-padding-top': getPaddingValue(paddingTop),
+      '--card-padding-right': getPaddingValue(paddingRight),
+      '--card-padding-bottom': getPaddingValue(paddingBottom),
+      '--card-padding-left': getPaddingValue(paddingLeft),
     }}
+    data-testid="Card"
+    className={classify(css.cardWrapper, classNames?.wrapper)}
   >
     {children}
   </div>

package/lib/components/Card/Card.module.css

@@ -1,11 +1,20 @@
 @value (colorBackgroundTertiary, colorFillPrimary, colorBorderSecondary, colorFocusPrimary) from '../../styles/variables/_color.css';
 @value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';
+@value (spaceSmall, spaceMedium, spaceLarge) from '../../styles/variables/_space.css';
 
 .cardWrapper {
+  --card-padding-top: spaceMedium;
+  --card-padding-right: spaceMedium;
+  --card-padding-bottom: spaceMedium;
+  --card-padding-left: spaceMedium;
   display: flex;
   composes: borderPrimary from '../../styles/border.module.css';
   background-color: colorBackgroundTertiary;
   border-radius: borderRadiusMedium;
+  padding-top: var(--card-padding-top);
+  padding-right: var(--card-padding-right);
+  padding-bottom: var(--card-padding-bottom);
+  padding-left: var(--card-padding-left);
 }
 
 .clickableCard {

package/lib/components/Menu/Menu.js

@@ -47,11 +47,11 @@ const Menu = props => {
     isFluid = true
   } = props;
   return /*#__PURE__*/React.createElement("div", {
-    className: (0, _classify.classify)(_MenuModule.default.menuCard, classNames?.wrapper, {
+    className: (0, _classify.classify)(_MenuModule.default.menuCard, {
       [_MenuModule.default.fluid]: isFluid,
       [_MenuModule.default.medium]: size === 'medium',
       [_MenuModule.default.small]: size === 'small'
-    }),
+    }, classNames?.wrapper),
     style: {
       width
     }

package/lib/components/Menu/Menu.js.flow

@@ -20,6 +20,7 @@ export type MenuOption = {
   iconRight?: string,
   iconRightType?: IconType,
   disabled?: boolean,
+  optionSize?: MenuSizeTypes,
 };
 
 // Render first available option set
@@ -28,13 +29,15 @@ export type MenuProps = {
   onSelect?: (option: MenuOption) => mixed,
   selectedOption?: MenuOption,
   classNames?: ClassNames,
-  size?: 'medium' | 'small',
+  size?: MenuSizeTypes,
   width?: string,
   menuDisabled?: boolean,
   isFluid?: boolean,
   ...MenuOptionTypes,
 };
 
+export type MenuSizeTypes = 'medium' | 'small';
+
 export type MenuOptionTypes = {
   options?: Array<MenuOption>,
   composeOptions?: Array<Array<MenuOption>>,
@@ -83,11 +86,15 @@ export const Menu = (props: MenuProps): React.Node => {
 
   return (
     <div
-      className={classify(css.menuCard, classNames?.wrapper, {
-        [css.fluid]: isFluid,
-        [css.medium]: size === 'medium',
-        [css.small]: size === 'small',
-      })}
+      className={classify(
+        css.menuCard,
+        {
+          [css.fluid]: isFluid,
+          [css.medium]: size === 'medium',
+          [css.small]: size === 'small',
+        },
+        classNames?.wrapper,
+      )}
       style={{width}}
     >
       <RenderOption {...props} />

package/lib/components/Menu/Menu.module.css

@@ -33,7 +33,8 @@
   spaceNone,
   spaceSmall,
   spaceXSmall,
-  spaceXXSmall
+  spaceXXSmall,
+  spaceNone
 ) from '../../styles/variables/_space.css';
 
 @value (
@@ -161,11 +162,21 @@
   color: colorTextDisabled;
 }
 
+.menuDivider {
+  padding-top: spaceXSmall;
+  padding-bottom: spaceXSmall;
+}
+
 .menuDivider:not(:first-of-type) {
   border-top: borderWidthPrimary solid colorBorderPrimary;
-  padding: spaceXSmall;
+  padding-top: spaceXSmall;
+  padding-bottom: spaceXSmall;
 }
 
-.menuDivider {
-  padding: spaceXSmall;
+.menuDivider:first-child {
+  padding-top: spaceNone;
+}
+
+.menuDivider:last-child {
+  padding-bottom: spaceNone;
 }

package/lib/components/Menu/MenuOptionButton.js

@@ -30,13 +30,18 @@ const MenuOptionButton = props => {
     iconLeftType,
     iconRight,
     iconRightType,
-    disabled
+    disabled,
+    optionSize
   } = option;
+  const [buttonSize, setButtonSize] = React.useState(optionSize || size);
+  React.useEffect(() => {
+    setButtonSize(optionSize || size);
+  }, [optionSize, size]);
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, {
     className: (0, _classify.classify)(_MenuModule.default.option, {
       [_MenuModule.default.selected]: key === selectedOption?.key,
-      [_MenuModule.default.optionSmall]: size === 'small',
-      [_MenuModule.default.optionMedium]: size === 'medium',
+      [_MenuModule.default.optionSmall]: buttonSize === 'small',
+      [_MenuModule.default.optionMedium]: buttonSize === 'medium',
       [_MenuModule.default.disabled]: menuDisabled || disabled,
       [_MenuModule.default.withIconLeft]: !!iconLeft,
       [_MenuModule.default.withIconRight]: !!iconRight

package/lib/components/Menu/MenuOptionButton.js.flow

@@ -35,13 +35,20 @@ export const MenuOptionButton = (props: MenuOptionProps): React.Node => {
     iconRight,
     iconRightType,
     disabled,
+    optionSize,
   } = option;
+  const [buttonSize, setButtonSize] = React.useState(optionSize || size);
+
+  React.useEffect(() => {
+    setButtonSize(optionSize || size);
+  }, [optionSize, size]);
+
   return (
     <UnstyledButton
       className={classify(css.option, {
         [css.selected]: key === selectedOption?.key,
-        [css.optionSmall]: size === 'small',
-        [css.optionMedium]: size === 'medium',
+        [css.optionSmall]: buttonSize === 'small',
+        [css.optionMedium]: buttonSize === 'medium',
         [css.disabled]: menuDisabled || disabled,
         [css.withIconLeft]: !!iconLeft,
         [css.withIconRight]: !!iconRight,

package/lib/components/Tooltip/Tooltip.js

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Tooltip = void 0;
+exports.Tooltip = exports.DELAY_MOTION_DURATION_TYPES = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
+var MOTION = _interopRequireWildcard(require("../../styles/variables/_motion"));
 var _space = require("../../styles/variables/_space");
 var _classify = require("../../utils/classify");
 var _mergeRefs = require("../../utils/merge-refs");
+var _string = require("../../utils/string");
 var _Text = require("../Text");
 var _Truncate = require("../Truncate");
 var _TooltipModule = _interopRequireDefault(require("./Tooltip.module.css"));
@@ -16,6 +18,15 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const DELAY_MOTION_DURATION_TYPES = Object.freeze({
+  none: 'none',
+  fast: 'fast',
+  normal: 'normal',
+  slow: 'slow',
+  slower: 'slower',
+  slowest: 'slowest'
+});
+exports.DELAY_MOTION_DURATION_TYPES = DELAY_MOTION_DURATION_TYPES;
 const Tooltip = _ref => {
   let {
     classNames,
@@ -24,7 +35,8 @@ const Tooltip = _ref => {
     body,
     placement = 'top',
     bodyMaxLines = 2,
-    titleMaxLines = 1
+    titleMaxLines = 1,
+    delayMotionDuration = 'none'
   } = _ref;
   const [open, setOpen] = React.useState(false);
   const {
@@ -41,10 +53,17 @@ const Tooltip = _ref => {
     middleware: [(0, _reactDomInteractions.offset)(parseInt(_space.spaceXXSmall)), (0, _reactDomInteractions.flip)(), (0, _reactDomInteractions.shift)()],
     whileElementsMounted: _reactDomInteractions.autoUpdate
   });
+  const motionDurationToken = 'motionDuration' + (0, _string.capitalize)(delayMotionDuration);
+  const hoverDelay = parseInt(MOTION[motionDurationToken]) === NaN ? 0 : parseInt(MOTION[motionDurationToken]);
   const {
     getReferenceProps,
     getFloatingProps
-  } = (0, _reactDomInteractions.useInteractions)([(0, _reactDomInteractions.useHover)(context), (0, _reactDomInteractions.useFocus)(context), (0, _reactDomInteractions.useRole)(context, {
+  } = (0, _reactDomInteractions.useInteractions)([(0, _reactDomInteractions.useHover)(context, {
+    delay: {
+      open: hoverDelay,
+      close: 0
+    }
+  }), (0, _reactDomInteractions.useFocus)(context), (0, _reactDomInteractions.useRole)(context, {
     role: 'tooltip'
   }), (0, _reactDomInteractions.useDismiss)(context)]);
 

package/lib/components/Tooltip/Tooltip.js.flow

@@ -24,9 +24,11 @@ import {
   useRole,
 } from '@floating-ui/react-dom-interactions';
 
+import * as MOTION from '../../styles/variables/_motion';
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {mergeRefs} from '../../utils/merge-refs';
+import {capitalize} from '../../utils/string';
 import {BodyMedium, SubTitleExtraSmall} from '../Text';
 import {Truncate} from '../Truncate';
 
@@ -35,6 +37,19 @@ import css from './Tooltip.module.css';
 
 type ClassNames = $ReadOnly<{tooltip?: string}>;
 
+export const DELAY_MOTION_DURATION_TYPES = Object.freeze({
+  none: 'none',
+  fast: 'fast',
+  normal: 'normal',
+  slow: 'slow',
+  slower: 'slower',
+  slowest: 'slowest',
+});
+
+export type DelayMotionDurationType = $Values<
+  typeof DELAY_MOTION_DURATION_TYPES,
+>;
+
 export type PlacementType =
   | 'top'
   | 'top-start'
@@ -52,6 +67,7 @@ export type TooltipProps = {
   placement?: PlacementType,
   bodyMaxLines?: number,
   titleMaxLines?: number,
+  delayMotionDuration?: DelayMotionDurationType,
   // TODO(Nishant): Decide on a type to use
   // $FlowFixMe
   children: any,
@@ -65,9 +81,9 @@ export const Tooltip = ({
   placement = 'top',
   bodyMaxLines = 2,
   titleMaxLines = 1,
+  delayMotionDuration = 'none',
 }: TooltipProps): React.Node => {
   const [open, setOpen] = React.useState(false);
-
   const {x, y, reference, floating, strategy, context} = useFloating({
     placement,
     open,
@@ -76,8 +92,20 @@ export const Tooltip = ({
     whileElementsMounted: autoUpdate,
   });
 
+  const motionDurationToken =
+    'motionDuration' + capitalize(delayMotionDuration);
+  const hoverDelay =
+    parseInt(MOTION[motionDurationToken]) === NaN
+      ? 0
+      : parseInt(MOTION[motionDurationToken]);
+
   const {getReferenceProps, getFloatingProps} = useInteractions([
-    useHover(context),
+    useHover(context, {
+      delay: {
+        open: hoverDelay,
+        close: 0,
+      },
+    }),
     useFocus(context),
     useRole(context, {role: 'tooltip'}),
     useDismiss(context),

package/lib/components/Tooltip/index.js

@@ -3,10 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Tooltip", {
-  enumerable: true,
-  get: function () {
-    return _Tooltip.Tooltip;
-  }
-});
-var _Tooltip = require("./Tooltip");
+var _Tooltip = require("./Tooltip");
+Object.keys(_Tooltip).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Tooltip[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Tooltip[key];
+    }
+  });
+});

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

@@ -1,4 +1,3 @@
 // @flow strict
 
-export type {PlacementType, TooltipProps} from './Tooltip';
-export {Tooltip} from './Tooltip';
+export * from './Tooltip';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {