@spaced-out/ui-design-system 0.0.15 → 0.0.16-beta.1

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 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.16-beta.1](https://github.com/spaced-out/ui-design-system/compare/v0.0.16-beta.0...v0.0.16-beta.1) (2023-01-23)
+
+
+### Features
+
+* **side-menu:** [GDS-117] side menu anatomy and tabs QA issues fix ([#50](https://github.com/spaced-out/ui-design-system/issues/50)) ([da0c237](https://github.com/spaced-out/ui-design-system/commit/da0c237ad48888f75ab83c33cf6d98624c85a3a1))
+
+### [0.0.16-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.15...v0.0.16-beta.0) (2023-01-18)
+
+
+### Features
+
+* changed to displayName from name ([#49](https://github.com/spaced-out/ui-design-system/issues/49)) ([b91af6e](https://github.com/spaced-out/ui-design-system/commit/b91af6ecea5a93af6a857dab68dfb75e3c8d81b5))
+
+
+### Bug Fixes
+
+* secondary label story fix ([64a33c4](https://github.com/spaced-out/ui-design-system/commit/64a33c48778a725389ce7aacba305619e2a84e39))
+
 ### [0.0.15](https://github.com/spaced-out/ui-design-system/compare/v0.0.14...v0.0.15) (2023-01-17)
 
 

package/design-tokens/color/app-color.json

@@ -82,6 +82,11 @@
       },
       "disabled": {
         "value": "{baseColor.gray.50.value}"
+      },
+      "inverse": {
+        "primary": {
+          "value": "{baseColor.indigo.940.value}"
+        }
       }
     },
     "tooltip-fill": {
@@ -147,6 +152,16 @@
         }
       }
     },
+    "side-menu": {
+      "icon": {
+        "default": {
+          "value": "{baseColor.indigo.300.value}"
+        },
+        "active": {
+          "value": "{baseColor.white.100.value}"
+        }
+      }
+    },
     "gray.lightest": {
       "value": "{baseColor.gray.75.value}"
     },

package/lib/components/PageTitle/PageTitle.js

@@ -123,6 +123,7 @@ const TabSlot = _ref => {
   }), children);
 };
 exports.TabSlot = TabSlot;
+TabSlot.displayName = 'TabSlot';
 const RightSlot = _ref2 => {
   let {
     children,
@@ -131,6 +132,7 @@ const RightSlot = _ref2 => {
   return /*#__PURE__*/React.createElement("div", props, children);
 };
 exports.RightSlot = RightSlot;
+RightSlot.displayName = 'RightSlot';
 const PageName = _ref3 => {
   let {
     children,
@@ -141,6 +143,7 @@ const PageName = _ref3 => {
   }), children);
 };
 exports.PageName = PageName;
+PageName.displayName = 'PageName';
 const PageTitle = _ref4 => {
   let {
     classNames,
@@ -152,7 +155,7 @@ const PageTitle = _ref4 => {
     if (childrenArray.length) {
       const nodes = [];
       for (const child of childrenArray) {
-        if (child?.type?.name === comp) {
+        if (child?.type?.displayName === comp) {
           nodes.push(child);
         }
       }

package/lib/components/PageTitle/PageTitle.js.flow

@@ -136,6 +136,8 @@ export const TabSlot = ({
   </div>
 );
 
+TabSlot.displayName = 'TabSlot';
+
 export type RightSlotProps = {
   children?: React.Node,
   ...
@@ -145,6 +147,8 @@ export const RightSlot = ({children, ...props}: RightSlotProps): React.Node => (
   <div {...props}>{children}</div>
 );
 
+RightSlot.displayName = 'RightSlot';
+
 export type PageNameProps = {
   children?: React.Node,
   ...
@@ -155,6 +159,7 @@ export const PageName = ({children, ...props}: PageNameProps): React.Node => (
     {children}
   </div>
 );
+PageName.displayName = 'PageName';
 
 export const PageTitle = ({
   classNames,
@@ -166,7 +171,7 @@ export const PageTitle = ({
     if (childrenArray.length) {
       const nodes: React.Node[] = [];
       for (const child of childrenArray) {
-        if (child?.type?.name === comp) {
+        if (child?.type?.displayName === comp) {
           nodes.push(child);
         }
       }

package/lib/components/PageTitle/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _PageTitle = require("./PageTitle");
+Object.keys(_PageTitle).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _PageTitle[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _PageTitle[key];
+    }
+  });
+});

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './PageTitle';

package/lib/components/SideMenuLink/SideMenuLink.js

@@ -0,0 +1,146 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SideMenuLink = exports.MENU_NAME_LIST = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _SideMenuLinkModule = _interopRequireDefault(require("./SideMenuLink.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; }
+
+const MENU_NAME_LIST = Object.freeze({
+  dashboard: {
+    title: 'Dashboard',
+    iconName: 'house',
+    iconType: 'duotone',
+    iconSwapOpacity: false
+  },
+  engage: {
+    title: 'Engage',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+    iconSwapOpacity: false
+  },
+  trm: {
+    title: 'TRM',
+    iconName: 'screen-users',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  analytics: {
+    title: 'Analytics',
+    iconName: 'chart-column',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  messaging: {
+    title: 'Messaging',
+    iconName: 'messages',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  chatbot: {
+    title: 'Chatbot',
+    iconName: 'message-bot',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  referrals: {
+    title: 'Referrals',
+    iconName: 'user-check',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  records: {
+    title: 'Records',
+    iconName: 'folder-open',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  bulkCleanup: {
+    title: 'Bulk Cleanup',
+    iconName: 'retweet',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  support: {
+    title: 'Support',
+    iconName: 'headset',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  audit: {
+    title: 'Audit',
+    iconName: 'print-magnifying-glass',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  timeline: {
+    title: 'Timeline',
+    iconName: 'timeline',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  people: {
+    title: 'People',
+    iconName: 'people-group',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  contacts: {
+    title: 'Contacts',
+    iconName: 'address-card',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  contacts2: {
+    title: 'Contacts',
+    iconName: 'calendars',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  contacts3: {
+    title: 'Contacts',
+    iconName: 'browser',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  }
+});
+exports.MENU_NAME_LIST = MENU_NAME_LIST;
+const SideMenuLink = _ref => {
+  let {
+    classNames,
+    pageNameKey,
+    disabled,
+    opened,
+    selectedValue,
+    onChange
+  } = _ref;
+  const selected = selectedValue === pageNameKey;
+  const onChangeHandler = () => {
+    onChange && onChange(pageNameKey);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_SideMenuLinkModule.default.linkWrapper, {
+      [_SideMenuLinkModule.default.selected]: selected,
+      [_SideMenuLinkModule.default.disabled]: disabled,
+      [_SideMenuLinkModule.default.closed]: !opened
+    }, classNames?.wrapper),
+    onClick: onChangeHandler
+  }, pageNameKey && MENU_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+    type: MENU_NAME_LIST[pageNameKey].iconType,
+    name: MENU_NAME_LIST[pageNameKey].iconName,
+    size: "medium",
+    color: _Text.TEXT_COLORS.inverseSecondary,
+    className: _SideMenuLinkModule.default.menuIcon
+  }) : null, pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? /*#__PURE__*/React.createElement(_Text.SubTitleSmall, {
+    color: _Text.TEXT_COLORS.inverseSecondary,
+    className: _SideMenuLinkModule.default.menuText
+  }, MENU_NAME_LIST[pageNameKey].title) : null);
+};
+exports.SideMenuLink = SideMenuLink;

package/lib/components/SideMenuLink/SideMenuLink.js.flow

@@ -0,0 +1,168 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Icon} from '../Icon';
+import {SubTitleSmall, TEXT_COLORS} from '../Text';
+
+import css from './SideMenuLink.module.css';
+
+
+export const MENU_NAME_LIST = Object.freeze({
+  dashboard: {
+    title: 'Dashboard',
+    iconName: 'house',
+    iconType: 'duotone',
+    iconSwapOpacity: false,
+  },
+  engage: {
+    title: 'Engage',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+    iconSwapOpacity: false,
+  },
+  trm: {
+    title: 'TRM',
+    iconName: 'screen-users',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  analytics: {
+    title: 'Analytics',
+    iconName: 'chart-column',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  messaging: {
+    title: 'Messaging',
+    iconName: 'messages',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  chatbot: {
+    title: 'Chatbot',
+    iconName: 'message-bot',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  referrals: {
+    title: 'Referrals',
+    iconName: 'user-check',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  records: {
+    title: 'Records',
+    iconName: 'folder-open',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  bulkCleanup: {
+    title: 'Bulk Cleanup',
+    iconName: 'retweet',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  support: {
+    title: 'Support',
+    iconName: 'headset',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  audit: {
+    title: 'Audit',
+    iconName: 'print-magnifying-glass',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  timeline: {
+    title: 'Timeline',
+    iconName: 'timeline',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  people: {
+    title: 'People',
+    iconName: 'people-group',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  contacts: {
+    title: 'Contacts',
+    iconName: 'address-card',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  contacts2: {
+    title: 'Contacts',
+    iconName: 'calendars',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  contacts3: {
+    title: 'Contacts',
+    iconName: 'browser',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+});
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export type SideMenuLinkProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  pageNameKey: string,
+  disabled?: boolean,
+  hovered?: boolean,
+  selectedValue?: string,
+  opened?: boolean,
+  onChange?: (newValue: string) => mixed,
+};
+
+export const SideMenuLink = ({
+  classNames,
+  pageNameKey,
+  disabled,
+  opened,
+  selectedValue,
+  onChange,
+}: SideMenuLinkProps): React.Node => {
+  const selected = selectedValue === pageNameKey;
+  const onChangeHandler = () => {
+    onChange && onChange(pageNameKey);
+  };
+  return (
+    <div
+      className={classify(
+        css.linkWrapper,
+        {
+          [css.selected]: selected,
+          [css.disabled]: disabled,
+          [css.closed]: !opened,
+        },
+        classNames?.wrapper,
+      )}
+      onClick={onChangeHandler}
+    >
+      {pageNameKey && MENU_NAME_LIST[pageNameKey] ? (
+        <Icon
+          type={MENU_NAME_LIST[pageNameKey].iconType}
+          name={MENU_NAME_LIST[pageNameKey].iconName}
+          size="medium"
+          color={TEXT_COLORS.inverseSecondary}
+          className={css.menuIcon}
+        />
+      ) : null}
+      {pageNameKey && MENU_NAME_LIST[pageNameKey] && opened ? (
+        <SubTitleSmall
+          color={TEXT_COLORS.inverseSecondary}
+          className={css.menuText}
+        >
+          {MENU_NAME_LIST[pageNameKey].title}
+        </SubTitleSmall>
+      ) : null}
+    </div>
+  );
+};

package/lib/components/SideMenuLink/SideMenuLink.module.css

@@ -0,0 +1,62 @@
+@value ( colorFillPrimary,
+  colorFillInversePrimary,
+  colorNeutralDarkest,
+  colorTextInverseSecondary,
+  colorTextInversePrimary,
+  colorSideMenuIconDefault,
+  colorSideMenuIconActive ) from '../../styles/variables/_color.css';
+@value ( spaceXSmall ) from '../../styles/variables/_space.css';
+@value ( size42) from '../../styles/variables/_size.css';
+
+.fooBar {
+  color: colorFillPrimary;
+}
+
+.linkWrapper {
+  display: flex;
+  background: colorFillInversePrimary;
+  color: colorTextInverseSecondary;
+  display: flex;
+  flex-direction: row;
+  gap: spaceXSmall;
+  justify-content: flex-start;
+  align-items: center;
+  flex: auto;
+  height: 42px;
+  min-width: size42;
+  border-radius: 8px;
+  width: sizeFluid;
+  cursor: pointer;
+}
+
+.linkWrapper.closed {
+  width: size42;
+}
+
+.linkWrapper:not(.selected):hover {
+  background: colorNeutralDarkest;
+  color: colorTextInversePrimary;
+}
+
+.menuIcon {
+  height: size42;
+  width: size42;
+  color: colorSideMenuIconDefault;
+}
+
+.linkWrapper.selected {
+  background: colorFillPrimary;
+  color: colorTextInversePrimary;
+}
+
+.linkWrapper.selected .menuIcon {
+  color: colorSideMenuIconActive;
+}
+
+.linkWrapper:hover .menuIcon {
+  color: colorSideMenuIconActive;
+}
+
+.menuText {
+  color: inherit;
+}

package/lib/components/SideMenuLink/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _SideMenuLink = require("./SideMenuLink");
+Object.keys(_SideMenuLink).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _SideMenuLink[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _SideMenuLink[key];
+    }
+  });
+});

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

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './SideMenuLink';

package/lib/components/Tab/Tab.js

@@ -22,7 +22,7 @@ const TAB_SIZE = Object.freeze({
 exports.TAB_SIZE = TAB_SIZE;
 const tabSizeOptions = [...Object.keys(TAB_SIZE)];
 exports.tabSizeOptions = tabSizeOptions;
-const Tab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const Tab = _ref => {
   let {
     classNames,
     onSelect,
@@ -37,14 +37,17 @@ const Tab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     width,
     ...props
   } = _ref;
+  const ref = React.useRef(null);
   const selected = tabId && tabId === selectedTab?.tabId;
   const onClickHandler = e => {
     if (!disabled) {
+      e.preventDefault();
       onSelect && onSelect({
         tabId,
         label
       });
       onClick && onClick(e);
+      ref.current?.blur();
     }
   };
   return /*#__PURE__*/React.createElement(_Button.UnstyledButton, _extends({}, props, {
@@ -85,6 +88,6 @@ const Tab = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_TabModule.default.disabled]: disabled === true
     })
   }, label)));
-});
+};
 exports.Tab = Tab;
-Tab.name = Tab.displayName = 'Tab';
+Tab.displayName = 'Tab';

package/lib/components/Tab/Tab.js.flow

@@ -37,94 +37,92 @@ export type TabProps = {
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
 };
 
-export const Tab: React$AbstractComponent<TabProps, HTMLButtonElement> =
-  React.forwardRef<TabProps, HTMLButtonElement>(
-    (
-      {
-        classNames,
-        onSelect,
-        size = 'medium',
-        selectedTab,
-        disabled = false,
-        tabId,
-        label,
-        iconName,
-        iconType,
-        onClick,
-        width,
-        ...props
-      }: TabProps,
-      ref,
-    ) => {
-      const selected = tabId && tabId === selectedTab?.tabId;
-      const onClickHandler = (e) => {
-        if (!disabled) {
-          onSelect && onSelect({tabId, label});
-          onClick && onClick(e);
-        }
-      };
-      return (
-        <UnstyledButton
-          {...props}
-          disabled={disabled}
-          className={classify(
-            css.button,
-            {
+export const Tab = ({
+  classNames,
+  onSelect,
+  size = 'medium',
+  selectedTab,
+  disabled = false,
+  tabId,
+  label,
+  iconName,
+  iconType,
+  onClick,
+  width,
+  ...props
+}: TabProps): React.Node => {
+  const ref = React.useRef(null);
+  const selected = tabId && tabId === selectedTab?.tabId;
+  const onClickHandler = (e) => {
+    if (!disabled) {
+      e.preventDefault();
+      onSelect && onSelect({tabId, label});
+      onClick && onClick(e);
+      ref.current?.blur();
+    }
+  };
+  return (
+    <UnstyledButton
+      {...props}
+      disabled={disabled}
+      className={classify(
+        css.button,
+        {
+          [css.selected]: selected === true,
+          [css.disabled]: disabled === true,
+          [css.mediumSize]: size === 'medium',
+          [css.smallSize]: size === 'small',
+        },
+        classNames?.wrapper,
+      )}
+      onClick={onClickHandler}
+      style={{width}}
+      tabIndex={disabled ? '-1' : 0}
+      ref={ref}
+    >
+      <span
+        className={classify(
+          css.iconTextWrap,
+          {
+            [css.selected]: selected === true,
+            [css.disabled]: disabled === true,
+          },
+          classNames?.iconTextWrap,
+        )}
+      >
+        {iconName ? (
+          <Icon
+            name={iconName}
+            type={iconType}
+            size={'medium'}
+            className={classify(css.icon, {
+              [css.disabled]: disabled === true,
+            })}
+          />
+        ) : null}
+        {size === TAB_SIZE.medium ? (
+          <ButtonTextMedium
+            color={TEXT_COLORS.secondary}
+            className={classify(css.tabContainer, {
+              [css.disabled]: disabled === true,
+            })}
+          >
+            {label}
+          </ButtonTextMedium>
+        ) : (
+          <ButtonTextSmall
+            color={TEXT_COLORS.secondary}
+            className={classify(css.tabContainer, {
               [css.selected]: selected === true,
               [css.disabled]: disabled === true,
-              [css.mediumSize]: size === 'medium',
-              [css.smallSize]: size === 'small',
-            },
-            classNames?.wrapper,
-          )}
-          onClick={onClickHandler}
-          style={{width}}
-          tabIndex={disabled ? '-1' : 0}
-          ref={ref}
-        >
-          <span
-            className={classify(
-              css.iconTextWrap,
-              {
-                [css.selected]: selected === true,
-                [css.disabled]: disabled === true,
-              },
-              classNames?.iconTextWrap,
-            )}
+            })}
           >
-            {iconName ? (
-              <Icon
-                name={iconName}
-                type={iconType}
-                size={'medium'}
-                className={classify(css.icon, {
-                  [css.disabled]: disabled === true,
-                })}
-              />
-            ) : null}
-            {size === TAB_SIZE.medium ? (
-              <ButtonTextMedium
-                color={TEXT_COLORS.secondary}
-                className={classify(css.tabContainer, {
-                  [css.disabled]: disabled === true,
-                })}
-              >
-                {label}
-              </ButtonTextMedium>
-            ) : (
-              <ButtonTextSmall
-                color={TEXT_COLORS.secondary}
-                className={classify(css.tabContainer, {
-                  [css.selected]: selected === true,
-                  [css.disabled]: disabled === true,
-                })}
-              >
-                {label}
-              </ButtonTextSmall>
-            )}
-          </span>
-        </UnstyledButton>
-      );
-    },
+            {label}
+          </ButtonTextSmall>
+        )}
+      </span>
+    </UnstyledButton>
   );
-Tab.name = Tab.displayName = 'Tab';
+};
+
+Tab.displayName = 'Tab';

package/lib/components/Toast/Toast.js

@@ -76,6 +76,7 @@ const ToastTitle = _ref2 => {
   return children;
 };
 exports.ToastTitle = ToastTitle;
+ToastTitle.displayName = 'ToastTitle';
 const ToastBody = _ref3 => {
   let {
     children
@@ -83,6 +84,7 @@ const ToastBody = _ref3 => {
   return children;
 };
 exports.ToastBody = ToastBody;
+ToastBody.displayName = 'ToastBody';
 const ToastFooter = _ref4 => {
   let {
     children,
@@ -99,14 +101,14 @@ const ToastFooter = _ref4 => {
         onClose && onClose();
         onClick && onClick(e);
       };
-      if (child?.type?.name === 'Button' && isLast) {
+      if (child?.type?.displayName === 'Button' && isLast) {
         return /*#__PURE__*/React.cloneElement(child, {
           size: 'small',
           type: 'primary',
           ...child.props,
           onClick: buttonClickHandler
         });
-      } else if (child?.type?.name === 'Button') {
+      } else if (child?.type?.displayName === 'Button') {
         return /*#__PURE__*/React.cloneElement(child, {
           size: 'small',
           type: 'tertiary',
@@ -122,6 +124,7 @@ const ToastFooter = _ref4 => {
   }, footerActions) : null;
 };
 exports.ToastFooter = ToastFooter;
+ToastFooter.displayName = 'ToastFooter';
 const Toast = _ref5 => {
   let {
     classNames,
@@ -140,7 +143,7 @@ const Toast = _ref5 => {
     if (childrenArray.length) {
       const nodes = [];
       for (const child of childrenArray) {
-        if (child?.type?.name === comp) {
+        if (child?.type?.displayName === comp) {
           nodes.push(child);
         }
       }

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

@@ -107,12 +107,16 @@ export type ToastTitleProps = {
 
 export const ToastTitle = ({children}: ToastTitleProps): React.Node => children;
 
+ToastTitle.displayName = 'ToastTitle';
+
 export type ToastBodyProps = {
   children?: React.Node,
 };
 
 export const ToastBody = ({children}: ToastBodyProps): React.Node => children;
 
+ToastBody.displayName = 'ToastBody';
+
 export type ToastFooterProps = {
   children?: React.Node,
   onClose?: () => void,
@@ -133,14 +137,14 @@ export const ToastFooter = ({
         onClick && onClick(e);
       };
 
-      if (child?.type?.name === 'Button' && isLast) {
+      if (child?.type?.displayName === 'Button' && isLast) {
         return React.cloneElement(child, {
           size: 'small',
           type: 'primary',
           ...child.props,
           onClick: buttonClickHandler,
         });
-      } else if (child?.type?.name === 'Button') {
+      } else if (child?.type?.displayName === 'Button') {
         return React.cloneElement(child, {
           size: 'small',
           type: 'tertiary',
@@ -157,6 +161,8 @@ export const ToastFooter = ({
   ) : null;
 };
 
+ToastFooter.displayName = 'ToastFooter';
+
 export const Toast = ({
   classNames,
   children,
@@ -172,7 +178,7 @@ export const Toast = ({
     if (childrenArray.length) {
       const nodes: React.Node[] = [];
       for (const child of childrenArray) {
-        if (child?.type?.name === comp) {
+        if (child?.type?.displayName === comp) {
           nodes.push(child);
         }
       }

package/lib/styles/variables/_color.css

@@ -46,6 +46,8 @@
 
 @value colorFillDisabled: #f4f4f4;
 
+@value colorFillInversePrimary: #17172A;
+
 @value colorTooltipFill: rgba(23, 23, 42, 0.95);
 
 @value colorBackdropFill: rgba(23, 23, 42, 0.7);
@@ -80,6 +82,10 @@
 
 @value colorButtonFillDangerPressed: #cf1945;
 
+@value colorSideMenuIconDefault: #9F9FBC;
+
+@value colorSideMenuIconActive: #ffffff;
+
 @value colorGrayLightest: #EBEBEB;
 
 @value colorNeutral: #706F9B;

package/lib/styles/variables/_color.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
+exports.colorWarningLightest = exports.colorWarningLight = exports.colorWarningDarkest = exports.colorWarningDark = exports.colorWarning = exports.colorTooltipFill = exports.colorTextWarning = exports.colorTextTertiary = exports.colorTextSuccess = exports.colorTextSecondary = exports.colorTextPrimary = exports.colorTextNeutral = exports.colorTextInverseSecondary = exports.colorTextInversePrimary = exports.colorTextInformation = exports.colorTextDisabled = exports.colorTextDanger = exports.colorTextClickable = exports.colorSuccessLightest = exports.colorSuccessLight = exports.colorSuccessDarkest = exports.colorSuccessDark = exports.colorSuccess = exports.colorSideMenuIconDefault = exports.colorSideMenuIconActive = exports.colorNeutralLightest = exports.colorNeutralLight = exports.colorNeutralDarkest = exports.colorNeutralDark = exports.colorNeutral = exports.colorInformationLightest = exports.colorInformationLight = exports.colorInformationDarkest = exports.colorInformationDark = exports.colorInformation = exports.colorGrayLightest = exports.colorFocusPrimary = exports.colorFocusDanger = exports.colorFillSecondary = exports.colorFillPrimary = exports.colorFillNone = exports.colorFillInversePrimary = exports.colorFillDisabled = exports.colorDangerLightest = exports.colorDangerLight = exports.colorDangerDarkest = exports.colorDangerDark = exports.colorDanger = exports.colorButtonFillTertiaryPressed = exports.colorButtonFillTertiaryHovered = exports.colorButtonFillTertiaryEnabled = exports.colorButtonFillSecondaryPressed = exports.colorButtonFillSecondaryHovered = exports.colorButtonFillSecondaryEnabled = exports.colorButtonFillPrimaryPressed = exports.colorButtonFillPrimaryHovered = exports.colorButtonFillPrimaryEnabled = exports.colorButtonFillGhostPressed = exports.colorButtonFillGhostHovered = exports.colorButtonFillGhostEnabled = exports.colorButtonFillDangerPressed = exports.colorButtonFillDangerHovered = exports.colorButtonFillDangerEnabled = exports.colorBorderSecondary = exports.colorBorderPrimary = exports.colorBorderDanger = exports.colorBackgroundTertiary = exports.colorBackgroundSecondary = exports.colorBackgroundPrimary = exports.colorBackdropFill = void 0;
 
 const colorTextPrimary = '#17172A';
 exports.colorTextPrimary = colorTextPrimary;
@@ -53,6 +53,8 @@ const colorFillNone = 'rgba(255,255,255,0)';
 exports.colorFillNone = colorFillNone;
 const colorFillDisabled = '#f4f4f4';
 exports.colorFillDisabled = colorFillDisabled;
+const colorFillInversePrimary = '#17172A';
+exports.colorFillInversePrimary = colorFillInversePrimary;
 const colorTooltipFill = 'rgba(23, 23, 42, 0.95)';
 exports.colorTooltipFill = colorTooltipFill;
 const colorBackdropFill = 'rgba(23, 23, 42, 0.7)';
@@ -87,6 +89,10 @@ const colorButtonFillDangerHovered = '#cf1945';
 exports.colorButtonFillDangerHovered = colorButtonFillDangerHovered;
 const colorButtonFillDangerPressed = '#cf1945';
 exports.colorButtonFillDangerPressed = colorButtonFillDangerPressed;
+const colorSideMenuIconDefault = '#9F9FBC';
+exports.colorSideMenuIconDefault = colorSideMenuIconDefault;
+const colorSideMenuIconActive = '#ffffff';
+exports.colorSideMenuIconActive = colorSideMenuIconActive;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706F9B';

package/lib/styles/variables/_color.js.flow

@@ -48,6 +48,8 @@ export const colorFillNone = 'rgba(255,255,255,0)';
 
 export const colorFillDisabled = '#f4f4f4';
 
+export const colorFillInversePrimary = '#17172A';
+
 export const colorTooltipFill = 'rgba(23, 23, 42, 0.95)';
 
 export const colorBackdropFill = 'rgba(23, 23, 42, 0.7)';
@@ -82,6 +84,10 @@ export const colorButtonFillDangerHovered = '#cf1945';
 
 export const colorButtonFillDangerPressed = '#cf1945';
 
+export const colorSideMenuIconDefault = '#9F9FBC';
+
+export const colorSideMenuIconActive = '#ffffff';
+
 export const colorGrayLightest = '#EBEBEB';
 
 export const colorNeutral = '#706F9B';

package/package.json

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