@spaced-out/ui-design-system 0.1.15 → 0.1.17

package/lib/components/Tabs/TabList/TabList.js.flow

@@ -22,123 +22,133 @@ export type TabListProps = {
   menuWidth?: string,
 };
 
-export const TabList = ({
-  classNames,
-  children,
-  size,
-  onSelect,
-  selectedTab,
-  menuWidth,
-}: TabListProps): React.Node => {
-  const ref = React.useRef(null);
-
-  const [containerWidth, setContainerWidth] = React.useState(0);
-
-  const childrenWithProps = () => {
-    const childrenArray = React.Children.toArray(children);
-    const totalChildCount = childrenArray.length;
-    let tabListWidth = 0;
-    const menuOptions = [];
-
-    let nodes: React.Node[] = [];
-    const tabListNodes: React.Node[] = [];
-    for (let i = 0; i < totalChildCount; i++) {
-      const child = childrenArray[i];
-      const {
-        width = size100,
-        tabId,
-        label,
-        disabled,
-        iconName,
-        iconType,
-      } = child.props;
-      const widthInt = parseInt(width);
-      tabListWidth = tabListWidth + widthInt;
-
-      if (tabListWidth < containerWidth || i === 0) {
-        const childOnSelect = (params) => {
-          onSelect && onSelect(params); // call the tab level onSelect
+export const TabList: React$AbstractComponent<TabListProps, HTMLDivElement> =
+  React.forwardRef<TabListProps, HTMLDivElement>(
+    (
+      {
+        classNames,
+        children,
+        size,
+        onSelect,
+        selectedTab,
+        menuWidth,
+      }: TabListProps,
+      forwardRef,
+    ): React.Node => {
+      const ref = React.useRef(null);
+      React.useImperativeHandle(forwardRef, () => ref.current);
+
+      const [containerWidth, setContainerWidth] = React.useState(0);
+
+      const childrenWithProps = () => {
+        const childrenArray = React.Children.toArray(children);
+        const totalChildCount = childrenArray.length;
+        let tabListWidth = 0;
+        const menuOptions = [];
+
+        let nodes: React.Node[] = [];
+        const tabListNodes: React.Node[] = [];
+        for (let i = 0; i < totalChildCount; i++) {
+          const child = childrenArray[i];
+          const {
+            width = size100,
+            tabId,
+            label,
+            disabled,
+            iconName,
+            iconType,
+          } = child.props;
+          const widthInt = parseInt(width);
+          tabListWidth = tabListWidth + widthInt;
+
+          if (tabListWidth < containerWidth || i === 0) {
+            const childOnSelect = (params) => {
+              onSelect && onSelect(params); // call the tab level onSelect
+            };
+            tabListNodes.push(
+              React.cloneElement(child, {
+                size,
+                onSelect: childOnSelect,
+                selectedTab,
+              }),
+            );
+          } else {
+            menuOptions.push({
+              key: tabId,
+              label,
+              disabled,
+              iconLeft: iconName,
+              iconLeftType: iconType,
+            });
+          }
+        }
+
+        const menuOnSelect = ({key, label}) => {
+          onSelect && onSelect({tabId: key, label});
         };
-        tabListNodes.push(
-          React.cloneElement(child, {
-            size,
-            onSelect: childOnSelect,
-            selectedTab,
-          }),
-        );
-      } else {
-        menuOptions.push({
-          key: tabId,
-          label,
-          disabled,
-          iconLeft: iconName,
-          iconLeftType: iconType,
-        });
-      }
-    }
-
-    const menuOnSelect = ({key, label}) => {
-      onSelect && onSelect({tabId: key, label});
-    };
-    const selectedKeys = [selectedTab?.tabId || ''];
-
-    const isMenuOptionSelected = (() => {
-      for (let i = 0; i < menuOptions.length; i++) {
-        if (menuOptions[i].key === selectedTab?.tabId) {
-          return true;
+        const selectedKeys = [selectedTab?.tabId || ''];
+
+        const isMenuOptionSelected = (() => {
+          for (let i = 0; i < menuOptions.length; i++) {
+            if (menuOptions[i].key === selectedTab?.tabId) {
+              return true;
+            }
+          }
+          return false;
+        })();
+
+        const tabDropDownNode = menuOptions.length ? (
+          <TabDropdown
+            key={'tabDropdown' + menuOptions.length}
+            size={size}
+            onOptionSelect={menuOnSelect}
+            props={{
+              tab: {
+                iconName: 'ellipsis',
+                tabId: 'tab-dropdown',
+                selectedTab: {
+                  tabId: isMenuOptionSelected ? 'tab-dropdown' : '',
+                },
+              },
+              menu: {
+                isFluid: false,
+                menuDisabled: false,
+                options: menuOptions,
+                selectedKeys,
+                width: menuWidth,
+              },
+            }}
+          />
+        ) : null;
+
+        nodes = [...tabListNodes, tabDropDownNode];
+        return nodes;
+      };
+
+      React.useLayoutEffect(() => {
+        if (ref.current && ref.current.offsetWidth) {
+          const availableContainerWidth =
+            ref.current.offsetWidth -
+            (parseInt(size36) + parseInt(spaceMedium));
+          setContainerWidth(availableContainerWidth);
         }
-      }
-      return false;
-    })();
-
-    const tabDropDownNode = menuOptions.length ? (
-      <TabDropdown
-        key={'tabDropdown' + menuOptions.length}
-        size={size}
-        onOptionSelect={menuOnSelect}
-        props={{
-          tab: {
-            iconName: 'ellipsis',
-            tabId: 'tab-dropdown',
-            selectedTab: {tabId: isMenuOptionSelected ? 'tab-dropdown' : ''},
-          },
-          menu: {
-            isFluid: false,
-            menuDisabled: false,
-            options: menuOptions,
-            selectedKeys,
-            width: menuWidth,
-          },
-        }}
-      />
-    ) : null;
-
-    nodes = [...tabListNodes, tabDropDownNode];
-    return nodes;
-  };
-
-  React.useLayoutEffect(() => {
-    if (ref.current && ref.current.offsetWidth) {
-      const availableContainerWidth =
-        ref.current.offsetWidth - (parseInt(size36) + parseInt(spaceMedium));
-      setContainerWidth(availableContainerWidth);
-    }
-  }, [ref.current]);
-
-  return (
-    <div
-      ref={ref}
-      data-testid="Tabs"
-      className={classify(
-        css.tabsContainer,
-        {
-          [css.mediumSize]: size === 'medium',
-          [css.smallSize]: size === 'small',
-        },
-        classNames?.wrapper,
-      )}
-    >
-      {containerWidth ? childrenWithProps() : null}
-    </div>
+      }, [ref.current]);
+
+      return (
+        <div
+          ref={ref}
+          data-testid="Tabs"
+          className={classify(
+            css.tabsContainer,
+            {
+              [css.mediumSize]: size === 'medium',
+              [css.smallSize]: size === 'small',
+            },
+            classNames?.wrapper,
+          )}
+        >
+          {containerWidth ? childrenWithProps() : null}
+        </div>
+      );
+    },
   );
-};

package/lib/components/Toast/Toast.js

@@ -9,6 +9,7 @@ var _reactDomInteractions = require("@floating-ui/react-dom-interactions");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
 var _Text = require("../Text");
+var _typographyModule = _interopRequireDefault(require("../../styles/typography.module.css"));
 var _ToastModule = _interopRequireDefault(require("./Toast.module.css"));
 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); }
@@ -22,13 +23,6 @@ const TOAST_SEMANTIC = Object.freeze({
   primary: 'primary'
 });
 exports.TOAST_SEMANTIC = TOAST_SEMANTIC;
-const TOAST_TITLE_COLOR = {
-  success: _Text.TEXT_COLORS.success,
-  information: _Text.TEXT_COLORS.information,
-  warning: _Text.TEXT_COLORS.warning,
-  danger: _Text.TEXT_COLORS.danger,
-  primary: _Text.TEXT_COLORS.primary
-};
 const ToastIcon = _ref => {
   let {
     semantic
@@ -75,10 +69,11 @@ const ToastTitle = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
   let {
     children,
     semantic = '',
+    className,
     ...props
   } = _ref2;
-  return /*#__PURE__*/React.createElement(_Text.SubTitleSmall, _extends({
-    color: TOAST_TITLE_COLOR[semantic]
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: (0, _classify.default)(_ToastModule.default.toastTitle, _typographyModule.default[semantic], className)
   }, props, {
     ref: ref
   }), children);
@@ -88,9 +83,12 @@ ToastTitle.displayName = 'ToastTitle';
 const ToastBody = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
   let {
     children,
+    className,
     ...props
   } = _ref3;
-  return /*#__PURE__*/React.createElement(_Text.BodyMedium, _extends({}, props, {
+  return /*#__PURE__*/React.createElement("div", _extends({
+    className: (0, _classify.default)(_ToastModule.default.toastBody, className)
+  }, props, {
     ref: ref
   }), children);
 });

package/lib/components/Toast/Toast.js.flow

@@ -8,16 +8,11 @@ import {
   useFloating,
 } from '@floating-ui/react-dom-interactions';
 
-import type {ColorTypes} from '../../types/typography';
 import classify from '../../utils/classify';
 import {CloseIcon, Icon} from '../Icon';
-import {
-  BodyMedium,
-  SubTitleExtraSmall,
-  SubTitleSmall,
-  TEXT_COLORS,
-} from '../Text';
+import {SubTitleExtraSmall, TEXT_COLORS} from '../Text';
 
+import typography from '../../styles/typography.module.css';
 import css from './Toast.module.css';
 
 
@@ -31,14 +26,6 @@ export const TOAST_SEMANTIC = Object.freeze({
   primary: 'primary',
 });
 
-const TOAST_TITLE_COLOR = {
-  success: TEXT_COLORS.success,
-  information: TEXT_COLORS.information,
-  warning: TEXT_COLORS.warning,
-  danger: TEXT_COLORS.danger,
-  primary: TEXT_COLORS.primary,
-};
-
 export type ToastSemanticType = $Values<typeof TOAST_SEMANTIC>;
 
 export type ToastProps = {
@@ -109,17 +96,23 @@ export type ToastTitleProps = {
   children?: React.Node,
   className?: string,
   semantic?: ToastSemanticType,
-  color?: ColorTypes,
 };
 
 export const ToastTitle: React$AbstractComponent<
   ToastTitleProps,
-  HTMLHeadingElement,
-> = React.forwardRef<ToastTitleProps, HTMLHeadingElement>(
-  ({children, semantic = '', ...props}: ToastTitleProps, ref): React.Node => (
-    <SubTitleSmall color={TOAST_TITLE_COLOR[semantic]} {...props} ref={ref}>
+  HTMLDivElement,
+> = React.forwardRef<ToastTitleProps, HTMLDivElement>(
+  (
+    {children, semantic = '', className, ...props}: ToastTitleProps,
+    ref,
+  ): React.Node => (
+    <div
+      className={classify(css.toastTitle, typography[semantic], className)}
+      {...props}
+      ref={ref}
+    >
       {children}
-    </SubTitleSmall>
+    </div>
   ),
 );
 
@@ -128,17 +121,16 @@ ToastTitle.displayName = 'ToastTitle';
 export type ToastBodyProps = {
   children?: React.Node,
   className?: string,
-  color?: ColorTypes,
 };
 
 export const ToastBody: React$AbstractComponent<
   ToastBodyProps,
-  HTMLParagraphElement,
-> = React.forwardRef<ToastBodyProps, HTMLParagraphElement>(
-  ({children, ...props}: ToastBodyProps, ref): React.Node => (
-    <BodyMedium {...props} ref={ref}>
+  HTMLDivElement,
+> = React.forwardRef<ToastBodyProps, HTMLDivElement>(
+  ({children, className, ...props}: ToastBodyProps, ref): React.Node => (
+    <div className={classify(css.toastBody, className)} {...props} ref={ref}>
       {children}
-    </BodyMedium>
+    </div>
   ),
 );
 

package/lib/components/Toast/Toast.module.css

@@ -44,6 +44,10 @@
   gap: spaceXXSmall;
 }
 
+.toastBody {
+  composes: bodyMedium from '../../styles/typography.module.css';
+}
+
 .toastFooterActions {
   display: flex;
   flex-direction: row;
@@ -54,3 +58,7 @@
 .closeIcon {
   margin-left: auto;
 }
+
+.toastTitle {
+  composes: subTitleSmall from '../../styles/typography.module.css';
+}

package/lib/components/Toggle/Toggle.js

@@ -6,13 +6,12 @@ Object.defineProperty(exports, "__esModule", {
 exports.Toggle = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
-var _Text = require("../Text/Text");
 var _ToggleModule = _interopRequireDefault(require("./Toggle.module.css"));
 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; }
 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 Toggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Toggle = /*#__PURE__*/React.forwardRef((_ref, forwardRef) => {
   let {
     name = 'toggle',
     value = '',
@@ -22,9 +21,11 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     checked,
     focused,
     onChange,
+    ariaLabel,
     ...props
   } = _ref;
   const toggleInput = /*#__PURE__*/React.createRef();
+  React.useImperativeHandle(forwardRef, () => toggleInput.current);
   const handleOnChange = () => {
     if (!disabled) {
       onChange && onChange({
@@ -33,16 +34,19 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       });
     }
   };
+  const onWrapClickHandler = () => {
+    toggleInput.current?.click();
+  };
   React.useEffect(() => {
     if (toggleInput.current && focused) {
       toggleInput.current.focus();
     }
   }, [focused]);
-  return /*#__PURE__*/React.createElement("label", {
+  return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToggleModule.default.container, {
       [_ToggleModule.default.disabled]: disabled
     }, classNames?.wrapper),
-    ref: ref
+    onClick: onWrapClickHandler
   }, /*#__PURE__*/React.createElement("span", {
     className: _ToggleModule.default.toggleWrap
   }, /*#__PURE__*/React.createElement("input", _extends({
@@ -52,13 +56,13 @@ const Toggle = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     checked: checked,
     onChange: handleOnChange,
     ref: toggleInput,
-    disabled: disabled
+    disabled: disabled,
+    "aria-label": ariaLabel || children
   }, props)), /*#__PURE__*/React.createElement("span", {
     className: (0, _classify.default)(_ToggleModule.default.toggle, {
       [_ToggleModule.default.disabledButton]: disabled
     })
-  })), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement(_Text.FormLabelMedium, {
-    color: "secondary",
+  })), React.Children.count(children) > 0 && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_ToggleModule.default.toggleLabel, classNames?.label)
   }, children));
 });

package/lib/components/Toggle/Toggle.js.flow

@@ -3,7 +3,6 @@
 import * as React from 'react';
 
 import classify from '../../utils/classify';
-import {FormLabelMedium} from '../Text/Text';
 
 import css from './Toggle.module.css';
 
@@ -25,10 +24,11 @@ export type ToggleProps = {
   disabled?: boolean,
   focused?: boolean,
   value?: string,
+  ariaLabel?: string,
 };
 
-export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
-  React.forwardRef<ToggleProps, HTMLLabelElement>(
+export const Toggle: React$AbstractComponent<ToggleProps, HTMLInputElement> =
+  React.forwardRef<ToggleProps, HTMLInputElement>(
     (
       {
         name = 'toggle',
@@ -39,11 +39,13 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
         checked,
         focused,
         onChange,
+        ariaLabel,
         ...props
       }: ToggleProps,
-      ref,
+      forwardRef,
     ): React.Node => {
       const toggleInput = React.createRef<HTMLInputElement>();
+      React.useImperativeHandle(forwardRef, () => toggleInput.current);
       const handleOnChange = () => {
         if (!disabled) {
           onChange &&
@@ -54,13 +56,17 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
         }
       };
 
+      const onWrapClickHandler = () => {
+        toggleInput.current?.click();
+      };
+
       React.useEffect(() => {
         if (toggleInput.current && focused) {
           toggleInput.current.focus();
         }
       }, [focused]);
       return (
-        <label
+        <div
           className={classify(
             css.container,
             {
@@ -68,7 +74,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
             },
             classNames?.wrapper,
           )}
-          ref={ref}
+          onClick={onWrapClickHandler}
         >
           <span className={css.toggleWrap}>
             <input
@@ -79,6 +85,7 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
               onChange={handleOnChange}
               ref={toggleInput}
               disabled={disabled}
+              aria-label={ariaLabel || children}
               {...props}
             />
             <span
@@ -88,14 +95,11 @@ export const Toggle: React$AbstractComponent<ToggleProps, HTMLLabelElement> =
             />
           </span>
           {React.Children.count(children) > 0 && (
-            <FormLabelMedium
-              color="secondary"
-              className={classify(css.toggleLabel, classNames?.label)}
-            >
+            <div className={classify(css.toggleLabel, classNames?.label)}>
               {children}
-            </FormLabelMedium>
+            </div>
           )}
-        </label>
+        </div>
       );
     },
   );

package/lib/components/Toggle/Toggle.module.css

@@ -138,5 +138,7 @@
 }
 
 .toggleLabel {
+  composes: formLabelMedium from '../../styles/typography.module.css';
+  composes: secondary from '../../styles/typography.module.css';
   margin-left: spaceNone;
 }

package/lib/components/Toggle/index.js

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

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

@@ -1,2 +1,2 @@
 //@flow strict
-export {Toggle} from './Toggle';
+export * from './Toggle';

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

@@ -36,7 +36,7 @@ import {Truncate} from '../Truncate';
 
 import css from './Tooltip.module.css';
 
-
+/* eslint-disable flowtype/no-weak-types */
 type ClassNames = $ReadOnly<{tooltip?: string, title?: string, body?: string}>;
 
 export const DELAY_MOTION_DURATION_TYPES = Object.freeze({
@@ -70,7 +70,7 @@ export type TooltipProps = {
   bodyMaxLines?: number,
   titleMaxLines?: number,
   delayMotionDuration?: DelayMotionDurationType,
-  // TODO(Nishant): Decide on a type to use
+  // TODO(Nishant): Decide on a type to use here
   // $FlowFixMe
   children: any,
   elevation?: string,