@spaced-out/ui-design-system 0.0.12 → 0.0.14

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.14](https://github.com/spaced-out/ui-design-system/compare/v0.0.13...v0.0.14) (2023-01-17)
+
+
+### Features
+
+* **OptionButton:** options button component ([#46](https://github.com/spaced-out/ui-design-system/issues/46)) ([7800004](https://github.com/spaced-out/ui-design-system/commit/7800004ffb4ac5e6876a91daff82a5fcd958c3d6))
+* **page-title:** [GDS-117] page title wrapper with page icon, tab slot ([#44](https://github.com/spaced-out/ui-design-system/issues/44)) ([e788f77](https://github.com/spaced-out/ui-design-system/commit/e788f77a2285222961e3d55818939fefe1423831))
+
+
+### Bug Fixes
+
+* secondary label in menu ([#47](https://github.com/spaced-out/ui-design-system/issues/47)) ([2634b3f](https://github.com/spaced-out/ui-design-system/commit/2634b3fa39b86280dae226f705f2fc62282b36d0))
+
+### [0.0.13](https://github.com/spaced-out/ui-design-system/compare/v0.0.12...v0.0.13) (2023-01-04)
+
+
+### Bug Fixes
+
+* button dropdown carat standalone fix ([507e1e4](https://github.com/spaced-out/ui-design-system/commit/507e1e4dbd834dfff36e96a569211aea4d84eeb2))
+* button dropdown props change ([542d6e1](https://github.com/spaced-out/ui-design-system/commit/542d6e1bb299d95c29a793e32bd384037572ae00))
+* emit more events from button dropdown ([faa9bf1](https://github.com/spaced-out/ui-design-system/commit/faa9bf15ce9f7fa5a7be4e2b1c24784f4654cb9e))
+
 ### [0.0.12](https://github.com/spaced-out/ui-design-system/compare/v0.0.11...v0.0.12) (2022-12-28)
 
 

package/lib/components/Button/Button.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.UnstyledButton = exports.Button = exports.BUTTON_TYPES = void 0;
+exports.UnstyledButton = exports.Button = exports.BUTTON_TYPES = exports.BUTTON_ACTION_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
@@ -20,6 +20,12 @@ const BUTTON_TYPES = Object.freeze({
   danger: 'danger'
 });
 exports.BUTTON_TYPES = BUTTON_TYPES;
+const BUTTON_ACTION_TYPE = Object.freeze({
+  button: 'button',
+  submit: 'submit',
+  reset: 'reset'
+});
+exports.BUTTON_ACTION_TYPE = BUTTON_ACTION_TYPE;
 const ButtonTypeToIconColorMap = {
   primary: 'inversePrimary',
   secondary: 'primary',
@@ -63,10 +69,12 @@ const Button = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
     type = 'primary',
     isFluid = false,
     disabled = false,
+    actionType = 'submit',
     size = 'medium',
     ...props
   } = _ref2;
   return /*#__PURE__*/React.createElement(UnstyledButton, _extends({}, props, {
+    type: actionType,
     className: (0, _classify.classify)(_ButtonModule.default.button, {
       [_ButtonModule.default.primary]: type === 'primary',
       [_ButtonModule.default.secondary]: type === 'secondary',

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

@@ -11,15 +11,6 @@ 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,
-  ariaLabel?: string,
-  ...
-};
-
 export const BUTTON_TYPES = Object.freeze({
   primary: 'primary',
   secondary: 'secondary',
@@ -28,7 +19,24 @@ export const BUTTON_TYPES = Object.freeze({
   danger: 'danger',
 });
 
+export const BUTTON_ACTION_TYPE = Object.freeze({
+  button: 'button',
+  submit: 'submit',
+  reset: 'reset',
+});
+
 export type ButtonType = $Values<typeof BUTTON_TYPES>;
+export type ButtonActionType = $Values<typeof BUTTON_ACTION_TYPE>;
+
+export type UnstyledButtonProps = {
+  children?: React.Node,
+  disabled?: mixed,
+  type?: ButtonActionType,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  className?: string,
+  ariaLabel?: string,
+  ...
+};
 
 export type ButtonProps = {
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
@@ -39,6 +47,7 @@ export type ButtonProps = {
   iconRightType?: IconType,
   children?: React.Node,
   type?: ButtonType,
+  actionType?: ButtonActionType,
   isFluid?: boolean,
   disabled?: boolean,
   size?: 'medium' | 'small',
@@ -93,6 +102,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
         type = 'primary',
         isFluid = false,
         disabled = false,
+        actionType = 'submit',
         size = 'medium',
         ...props
       }: ButtonProps,
@@ -100,6 +110,7 @@ export const Button: React$AbstractComponent<ButtonProps, HTMLButtonElement> =
     ) => (
       <UnstyledButton
         {...props}
+        type={actionType}
         className={classify(
           css.button,
           {

package/lib/components/Button/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "BUTTON_ACTION_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _Button.BUTTON_ACTION_TYPE;
+  }
+});
 Object.defineProperty(exports, "BUTTON_TYPES", {
   enumerable: true,
   get: function () {

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

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

package/lib/components/ButtonDropdown/ButtonDropdown.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonDropdown = void 0;
+exports.ButtonDropdown = exports.ANCHOR_POSITION_TYPE = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _reactDom = require("@floating-ui/react-dom");
 var _size = require("../../styles/variables/_size");
@@ -17,14 +17,29 @@ 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 ANCHOR_POSITION_TYPE = Object.freeze({
+  top: 'top',
+  topStart: 'top-start',
+  topEnd: 'top-end',
+  bottom: 'bottom',
+  bottomStart: 'bottom-start',
+  bottomEnd: 'bottom-end'
+});
+exports.ANCHOR_POSITION_TYPE = ANCHOR_POSITION_TYPE;
 const ButtonDropdown = _ref => {
   let {
     anchorPosition = 'bottom-start',
     size,
     onOptionSelect,
-    props,
+    menu,
     classNames,
-    disabled
+    disabled,
+    onMenuOpen,
+    onMenuClose,
+    children,
+    iconRightName,
+    iconRightType,
+    ...restButtonProps
   } = _ref;
   const menuBtnRef = React.useRef();
   const {
@@ -39,7 +54,12 @@ const ButtonDropdown = _ref => {
     whileElementsMounted: _reactDom.autoUpdate,
     middleware: [(0, _reactDom.shift)(), (0, _reactDom.flip)(), (0, _reactDom.offset)(parseInt(_space.spaceXXSmall))]
   });
-  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, null, _ref2 => {
+  const onMenuToggle = isOpen => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
+  return /*#__PURE__*/React.createElement(_clickAway.ClickAway, {
+    onChange: onMenuToggle
+  }, _ref2 => {
     let {
       isOpen,
       onOpen,
@@ -48,19 +68,22 @@ const ButtonDropdown = _ref => {
     } = _ref2;
     return /*#__PURE__*/React.createElement("div", {
       "data-testid": "ButtonDropdown",
-      className: (0, _classify.classify)(_ButtonDropdownModule.default.buttonDropdownContainer, classNames?.wrapper),
+      className: (0, _classify.classify)(_ButtonDropdownModule.default.buttonDropdownContainer, classNames?.dropdownContainer),
       ref: menuBtnRef
-    }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, props?.button, {
-      iconRightName: props?.button.children ? isOpen ? 'caret-up' : 'caret-down' : props?.button.iconRightName,
-      iconRightType: props?.button.children ? 'solid' : props?.button.iconRightType,
+    }, /*#__PURE__*/React.createElement(_Button.Button, _extends({}, restButtonProps, {
+      iconRightName: children ? isOpen ? 'caret-up' : 'caret-down' : iconRightName ? iconRightName : isOpen ? 'caret-up' : 'caret-down',
+      iconRightType: children ? 'solid' : iconRightType,
       disabled: disabled,
       size: size,
       ref: reference,
       onClick: e => {
         e.stopPropagation();
         onOpen();
+      },
+      classNames: {
+        wrapper: classNames?.buttonWrapper
       }
-    })), isOpen && props?.menu && /*#__PURE__*/React.createElement("div", {
+    }), children), isOpen && menu && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
       style: {
@@ -70,7 +93,7 @@ const ButtonDropdown = _ref => {
         left: x ?? _space.spaceNone,
         width: _size.sizeFluid
       }
-    }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, props.menu, {
+    }, /*#__PURE__*/React.createElement(_Menu.Menu, _extends({}, menu, {
       onSelect: option => {
         onOptionSelect && onOptionSelect(option);
         clickAway();

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

@@ -26,33 +26,45 @@ import {Menu} from '../Menu';
 import css from './ButtonDropdown.module.css';
 
 
-type ClassNames = $ReadOnly<{wrapper?: string}>;
+export const ANCHOR_POSITION_TYPE = Object.freeze({
+  top: 'top',
+  topStart: 'top-start',
+  topEnd: 'top-end',
+  bottom: 'bottom',
+  bottomStart: 'bottom-start',
+  bottomEnd: 'bottom-end',
+});
+
+export type AnchorType = $Values<typeof ANCHOR_POSITION_TYPE>;
+type ClassNames = $ReadOnly<{
+  buttonWrapper?: string,
+  dropdownContainer?: 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,
+  ...ButtonProps,
   classNames?: ClassNames,
-  disabled?: boolean,
+  menu: MenuProps,
+  anchorPosition?: AnchorType,
+  onOptionSelect?: (option: MenuOption) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  ...
 };
 
 export const ButtonDropdown = ({
   anchorPosition = 'bottom-start',
   size,
   onOptionSelect,
-  props,
+  menu,
   classNames,
   disabled,
+  onMenuOpen,
+  onMenuClose,
+  children,
+  iconRightName,
+  iconRightType,
+  ...restButtonProps
 }: ButtonDropdownProps): React.Node => {
   const menuBtnRef = React.useRef();
   const {x, y, reference, floating, strategy} = useFloating({
@@ -62,26 +74,35 @@ export const ButtonDropdown = ({
     middleware: [shift(), flip(), offset(parseInt(spaceXXSmall))],
   });
 
+  const onMenuToggle = (isOpen: boolean) => {
+    isOpen ? onMenuOpen && onMenuOpen() : onMenuClose && onMenuClose();
+  };
+
   return (
-    <ClickAway>
+    <ClickAway onChange={onMenuToggle}>
       {({isOpen, onOpen, cancelNext, clickAway}) => (
         <div
           data-testid="ButtonDropdown"
-          className={classify(css.buttonDropdownContainer, classNames?.wrapper)}
+          className={classify(
+            css.buttonDropdownContainer,
+            classNames?.dropdownContainer,
+          )}
           ref={menuBtnRef}
         >
           <Button
-            {...props?.button}
+            {...restButtonProps}
             iconRightName={
-              props?.button.children
+              children
                 ? isOpen
                   ? 'caret-up'
                   : 'caret-down'
-                : props?.button.iconRightName
-            }
-            iconRightType={
-              props?.button.children ? 'solid' : props?.button.iconRightType
+                : iconRightName
+                  ? iconRightName
+                  : isOpen
+                    ? 'caret-up'
+                    : 'caret-down'
             }
+            iconRightType={children ? 'solid' : iconRightType}
             disabled={disabled}
             size={size}
             ref={reference}
@@ -89,8 +110,11 @@ export const ButtonDropdown = ({
               e.stopPropagation();
               onOpen();
             }}
-          />
-          {isOpen && props?.menu && (
+            classNames={{wrapper: classNames?.buttonWrapper}}
+          >
+            {children}
+          </Button>
+          {isOpen && menu && (
             <div
               onClickCapture={cancelNext}
               ref={floating}
@@ -103,7 +127,7 @@ export const ButtonDropdown = ({
               }}
             >
               <Menu
-                {...props.menu}
+                {...menu}
                 onSelect={(option) => {
                   onOptionSelect && onOptionSelect(option);
                   clickAway();

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

@@ -1,4 +1,8 @@
+@value ( sizeFluid) from '../../styles/variables/_size.css';
+
 .buttonDropdownContainer {
   display: flex;
   position: relative;
+  height: sizeFluid;
+  width: sizeFluid;
 }

package/lib/components/ButtonDropdown/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "ANCHOR_POSITION_TYPE", {
+  enumerable: true,
+  get: function () {
+    return _ButtonDropdown.ANCHOR_POSITION_TYPE;
+  }
+});
 Object.defineProperty(exports, "ButtonDropdown", {
   enumerable: true,
   get: function () {

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

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

package/lib/components/Icon/Icon.js

@@ -27,13 +27,16 @@ const Icon = _ref => {
     size = 'medium',
     color = _typography.TEXT_COLORS.primary,
     className,
-    onClick
+    onClick,
+    swapOpacity
   } = _ref;
   return /*#__PURE__*/React.createElement(React.Fragment, null, !!name && /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_typographyModule.default.centerAlignFlex, _typographyModule.default[`${size}Icon`], _typographyModule.default[color], className),
     onClick: onClick
   }, /*#__PURE__*/React.createElement("i", {
-    className: (0, _classify.default)(`fa-${type} fa-${name}`)
+    className: (0, _classify.default)(`fa-${type} fa-${name} `, {
+      ['fa-swap-opacity']: swapOpacity
+    })
   })));
 };
 exports.Icon = Icon;

package/lib/components/Icon/Icon.js.flow

@@ -12,7 +12,7 @@ import classify from '../../utils/classify';
 import typographyStyle from '../../styles/typography.module.css';
 
 
-export type IconType = 'regular' | 'solid';
+export type IconType = 'regular' | 'solid' | 'duotone';
 
 export const ICON_SIZE = Object.freeze({
   small: 'small',
@@ -29,6 +29,7 @@ export type IconProps = {
   className?: string,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
   ariaLabel?: string,
+  swapOpacity?: boolean,
 };
 
 export const Icon = ({
@@ -38,6 +39,7 @@ export const Icon = ({
   color = TEXT_COLORS.primary,
   className,
   onClick,
+  swapOpacity,
 }: IconProps): React.Node => (
   <>
     {!!name && (
@@ -50,7 +52,11 @@ export const Icon = ({
         )}
         onClick={onClick}
       >
-        <i className={classify(`fa-${type} fa-${name}`)} />
+        <i
+          className={classify(`fa-${type} fa-${name} `, {
+            ['fa-swap-opacity']: swapOpacity,
+          })}
+        />
       </div>
     )}
   </>

package/lib/components/Menu/Menu.js

@@ -8,6 +8,7 @@ var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Button = require("../Button");
 var _Icon = require("../Icon");
+var _Truncate = require("../Truncate");
 var _MenuModule = _interopRequireDefault(require("./Menu.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); }
@@ -37,6 +38,7 @@ const Menu = props => {
     let {
       key,
       label,
+      secondaryLabel,
       iconLeft,
       iconLeftType,
       iconRight,
@@ -64,9 +66,13 @@ const Menu = props => {
       type: iconLeftType,
       size: "small",
       className: _MenuModule.default.icon
-    }), /*#__PURE__*/React.createElement("span", {
-      className: _MenuModule.default.optionText
-    }, label), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
+    }), /*#__PURE__*/React.createElement("div", {
+      className: _MenuModule.default.optionTextContainer
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _MenuModule.default.optionTextLabel
+    }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, label)), !!secondaryLabel && /*#__PURE__*/React.createElement("div", {
+      className: _MenuModule.default.optionTextSecondaryLabel
+    }, /*#__PURE__*/React.createElement(_Truncate.Truncate, null, secondaryLabel))), !!iconRight && /*#__PURE__*/React.createElement(_Icon.Icon, {
       name: iconRight,
       type: iconRightType,
       size: "small",

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

@@ -5,6 +5,7 @@ import {classify} from '../../utils/classify';
 import {UnstyledButton} from '../Button';
 import {Icon} from '../Icon';
 import type {IconType} from '../Icon/Icon.js';
+import {Truncate} from '../Truncate';
 
 import css from './Menu.module.css';
 
@@ -14,6 +15,7 @@ type ClassNames = $ReadOnly<{wrapper?: string}>;
 export type MenuOption = {
   key?: string,
   label: string,
+  secondaryLabel?: string,
   iconLeft?: string,
   iconLeftType?: IconType,
   iconRight?: string,
@@ -57,6 +59,7 @@ export const Menu = (props: MenuProps): React.Node => {
         ({
           key,
           label,
+          secondaryLabel,
           iconLeft,
           iconLeftType,
           iconRight,
@@ -85,8 +88,17 @@ export const Menu = (props: MenuProps): React.Node => {
                 className={css.icon}
               />
             )}
+            <div className={css.optionTextContainer}>
+              <div className={css.optionTextLabel}>
+                <Truncate>{label}</Truncate>
+              </div>
 
-            <span className={css.optionText}>{label}</span>
+              {!!secondaryLabel && (
+                <div className={css.optionTextSecondaryLabel}>
+                  <Truncate>{secondaryLabel}</Truncate>
+                </div>
+              )}
+            </div>
 
             {!!iconRight && (
               <Icon

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

@@ -10,6 +10,7 @@
   colorTextDisabled,
   colorTextPrimary,
   colorTextSecondary,
+  colorTextTertiary,
   colorBackgroundTertiary
 ) from '../../styles/variables/_color.css';
 
@@ -31,7 +32,8 @@
 @value (
   spaceNone,
   spaceSmall,
-  spaceXSmall
+  spaceXSmall,
+  spaceXXSmall
 ) from '../../styles/variables/_space.css';
 
 .menuCard {
@@ -69,15 +71,24 @@
   width: sizeFluid;
   display: flex;
   border-radius: borderRadiusSmall;
-  padding: spaceNone spaceSmall;
   align-items: center;
   cursor: pointer;
   column-gap: spaceSmall;
   color: colorTextSecondary;
 }
 
-.optionText {
-  composes: truncate from '../../styles/typography.module.css';
+.optionTextContainer {
+  display: flex;
+  flex-flow: column;
+  gap: spaceXXSmall;
+}
+
+.optionTextLabel,
+.optionTextSecondaryLabel {
+  display: flex;
+  flex-flow: column;
+  align-items: flex-start;
+  text-align: left;
 }
 
 .withIconLeft {
@@ -98,12 +109,17 @@
 
 .optionSmall {
   composes: buttonTextSmall from '../../styles/typography.module.css';
-  height: size34;
+  padding: spaceXSmall spaceSmall;
 }
 
 .optionMedium {
   composes: buttonTextMedium from '../../styles/typography.module.css';
-  height: size42;
+  padding: spaceSmall spaceSmall;
+}
+
+.optionTextSecondaryLabel {
+  composes: bodySmall from '../../styles/typography.module.css';
+  color: colorTextTertiary;
 }
 
 .option:hover,
@@ -112,13 +128,29 @@
   color: colorTextPrimary;
 }
 
+.option:hover .optionTextSecondaryLabel {
+  color: colorTextSecondary;
+}
+
+.option:active .optionTextSecondaryLabel {
+  color: colorTextSecondary;
+}
+
 .option:focus {
   background: colorFillSecondary;
   outline: none;
   color: colorTextPrimary;
 }
 
+.option:focus .optionTextSecondaryLabel {
+  color: colorTextSecondary;
+}
+
 .disabled {
   color: colorTextDisabled;
   pointer-events: none;
 }
+
+.disabled .optionTextSecondaryLabel {
+  color: colorTextDisabled;
+}

package/lib/components/OptionButton/OptionButton.js

@@ -0,0 +1,70 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.OptionButton = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Button = require("../Button");
+var _ButtonDropdown = require("../ButtonDropdown");
+var _OptionButtonModule = _interopRequireDefault(require("./OptionButton.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 OptionButton = _ref => {
+  let {
+    children,
+    iconLeftName,
+    iconLeftType,
+    type,
+    isFluid,
+    disabled,
+    size,
+    menu,
+    anchorPosition,
+    onOptionSelect,
+    onButtonClick,
+    onMenuOpen,
+    onMenuClose,
+    ariaLabel
+  } = _ref;
+  const [iconName, setIconName] = React.useState('chevron-down');
+  return /*#__PURE__*/React.createElement("div", {
+    className: _OptionButtonModule.default.container
+  }, /*#__PURE__*/React.createElement(_Button.Button, {
+    iconLeftName: iconLeftName,
+    iconLeftType: iconLeftType,
+    onClick: onButtonClick,
+    size: size,
+    type: type,
+    classNames: {
+      wrapper: _OptionButtonModule.default.leftButton
+    },
+    disabled: disabled,
+    isFluid: isFluid,
+    ariaLabel: ariaLabel
+  }, children), /*#__PURE__*/React.createElement(_ButtonDropdown.ButtonDropdown, {
+    anchorPosition: anchorPosition,
+    ariaLabel: ariaLabel,
+    iconRightName: iconName,
+    classNames: {
+      buttonWrapper: _OptionButtonModule.default.rightButton,
+      dropdownContainer: _OptionButtonModule.default.dropDownContainer
+    },
+    type: type,
+    disabled: disabled,
+    menu: menu,
+    onMenuClose: () => {
+      setIconName('chevron-down');
+      onMenuOpen && onMenuOpen();
+    },
+    onMenuOpen: () => {
+      setIconName('chevron-up');
+      onMenuClose && onMenuClose();
+    },
+    onOptionSelect: onOptionSelect,
+    size: size
+  }));
+};
+exports.OptionButton = OptionButton;

package/lib/components/OptionButton/OptionButton.js.flow

@@ -0,0 +1,82 @@
+// @flow strict
+
+import * as React from 'react';
+
+import type {ButtonProps} from '../Button';
+import {Button} from '../Button';
+import type {AnchorType} from '../ButtonDropdown';
+import {ButtonDropdown} from '../ButtonDropdown';
+import type {MenuOption, MenuProps} from '../Menu';
+
+import css from './OptionButton.module.css';
+
+
+export type OptionButtonProps = {
+  ...ButtonProps,
+  menu: MenuProps,
+  anchorPosition?: AnchorType,
+  onOptionSelect?: (option: MenuOption) => mixed,
+  onButtonClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
+  onMenuOpen?: () => mixed,
+  onMenuClose?: () => mixed,
+  ...
+};
+
+export const OptionButton = ({
+  children,
+  iconLeftName,
+  iconLeftType,
+  type,
+  isFluid,
+  disabled,
+  size,
+  menu,
+  anchorPosition,
+  onOptionSelect,
+  onButtonClick,
+  onMenuOpen,
+  onMenuClose,
+  ariaLabel,
+}: OptionButtonProps): React.Node => {
+  const [iconName, setIconName] = React.useState('chevron-down');
+
+  return (
+    <div className={css.container}>
+      <Button
+        iconLeftName={iconLeftName}
+        iconLeftType={iconLeftType}
+        onClick={onButtonClick}
+        size={size}
+        type={type}
+        classNames={{wrapper: css.leftButton}}
+        disabled={disabled}
+        isFluid={isFluid}
+        ariaLabel={ariaLabel}
+      >
+        {children}
+      </Button>
+      <ButtonDropdown
+        anchorPosition={anchorPosition}
+        ariaLabel={ariaLabel}
+        iconRightName={iconName}
+        classNames={{
+          buttonWrapper: css.rightButton,
+          dropdownContainer: css.dropDownContainer,
+        }}
+        type={type}
+        disabled={disabled}
+        menu={menu}
+        onMenuClose={() => {
+          setIconName('chevron-down');
+          onMenuOpen && onMenuOpen();
+        }}
+        onMenuOpen={() => {
+          setIconName('chevron-up');
+          onMenuClose && onMenuClose();
+        }}
+        onOptionSelect={onOptionSelect}
+        size={size}
+      />
+    </div>
+  );
+};

package/lib/components/OptionButton/OptionButton.module.css

@@ -0,0 +1,29 @@
+@value (
+  borderRadiusNone
+) from '../../styles/variables/_border.css';
+
+@value (spaceXXSmall) from '../../styles/variables/_space.css';
+
+@value ( sizeFluid, size60) from '../../styles/variables/_size.css';
+
+.container {
+  display: flex;
+  height: sizeFluid;
+  width: sizeFluid;
+}
+
+.leftButton {
+  border-top-right-radius: borderRadiusNone;
+  border-bottom-right-radius: borderRadiusNone;
+  min-width: initial;
+}
+
+.rightButton {
+  border-top-left-radius: borderRadiusNone;
+  border-bottom-left-radius: borderRadiusNone;
+  margin-left: calc(spaceXXSmall / 4);
+}
+
+.dropDownContainer {
+  width: max-content;
+}

package/lib/components/OptionButton/index.js

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

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

@@ -0,0 +1,3 @@
+//@flow strict
+export type {OptionButtonProps} from './OptionButton';
+export {OptionButton} from './OptionButton';

package/lib/components/PageTitle/PageTitle.js

@@ -0,0 +1,178 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabSlot = exports.RightSlot = exports.PageTitle = exports.PageName = exports.PAGE_NAME_LIST = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+var _Text = require("../Text");
+var _PageTitleModule = _interopRequireDefault(require("./PageTitle.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 PAGE_NAME_LIST = Object.freeze({
+  dashboard: {
+    title: 'Dashboard',
+    iconName: 'house',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  engage: {
+    title: 'Engage',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+    iconSwapOpacity: true
+  },
+  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.PAGE_NAME_LIST = PAGE_NAME_LIST;
+const TabSlot = _ref => {
+  let {
+    children,
+    className,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.default)(_PageTitleModule.default.tabSlot, className)
+  }), children);
+};
+exports.TabSlot = TabSlot;
+const RightSlot = _ref2 => {
+  let {
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", props, children);
+};
+exports.RightSlot = RightSlot;
+const PageName = _ref3 => {
+  let {
+    children,
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: _PageTitleModule.default.pageTitle
+  }), children);
+};
+exports.PageName = PageName;
+const PageTitle = _ref4 => {
+  let {
+    classNames,
+    children,
+    pageNameKey
+  } = _ref4;
+  const getNamedComp = comp => {
+    const childrenArray = React.Children.toArray(children);
+    if (childrenArray.length) {
+      const nodes = [];
+      for (const child of childrenArray) {
+        if (child?.type?.name === comp) {
+          nodes.push(child);
+        }
+      }
+      return nodes.length > 1 ? nodes : nodes[0];
+    }
+    return null;
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    "data-testid": "PageTitle",
+    className: (0, _classify.default)(_PageTitleModule.default.pageTitleWrapper, classNames?.wrapper)
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_PageTitleModule.default.leftSlot, classNames?.leftSlot)
+  }, pageNameKey && PAGE_NAME_LIST[pageNameKey] ? /*#__PURE__*/React.createElement(PageName, null, /*#__PURE__*/React.createElement(_Text.TitleMedium, null, PAGE_NAME_LIST[pageNameKey].title, " "), /*#__PURE__*/React.createElement(_Icon.Icon, {
+    type: PAGE_NAME_LIST[pageNameKey].iconType,
+    name: PAGE_NAME_LIST[pageNameKey].iconName,
+    size: "medium",
+    color: _Text.TEXT_COLORS.primary,
+    swapOpacity: PAGE_NAME_LIST[pageNameKey].iconSwapOpacity
+  })) : getNamedComp('PageName'), getNamedComp('TabSlot')), /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_PageTitleModule.default.rightSlot, classNames?.rightSlot)
+  }, getNamedComp('RightSlot')));
+};
+exports.PageTitle = PageTitle;

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

@@ -0,0 +1,205 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+import {Icon} from '../Icon';
+import {TEXT_COLORS, TitleMedium} from '../Text';
+
+import css from './PageTitle.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  leftSlot?: string,
+  rightSlot?: string,
+}>;
+
+export type PageTitleProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  pageNameKey?: string,
+};
+
+export const PAGE_NAME_LIST = Object.freeze({
+  dashboard: {
+    title: 'Dashboard',
+    iconName: 'house',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  engage: {
+    title: 'Engage',
+    iconName: 'bullseye-pointer',
+    iconType: 'duotone',
+    iconSwapOpacity: true,
+  },
+  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,
+  },
+});
+
+export type TabSlotProps = {
+  children?: React.Node,
+  className: string,
+  ...
+};
+
+export const TabSlot = ({
+  children,
+  className,
+  ...props
+}: TabSlotProps): React.Node => (
+  <div {...props} className={classify(css.tabSlot, className)}>
+    {children}
+  </div>
+);
+
+export type RightSlotProps = {
+  children?: React.Node,
+  ...
+};
+
+export const RightSlot = ({children, ...props}: RightSlotProps): React.Node => (
+  <div {...props}>{children}</div>
+);
+
+export type PageNameProps = {
+  children?: React.Node,
+  ...
+};
+
+export const PageName = ({children, ...props}: PageNameProps): React.Node => (
+  <div {...props} className={css.pageTitle}>
+    {children}
+  </div>
+);
+
+export const PageTitle = ({
+  classNames,
+  children,
+  pageNameKey,
+}: PageTitleProps): React.Node => {
+  const getNamedComp = (comp: string) => {
+    const childrenArray = React.Children.toArray(children);
+    if (childrenArray.length) {
+      const nodes: React.Node[] = [];
+      for (const child of childrenArray) {
+        if (child?.type?.name === comp) {
+          nodes.push(child);
+        }
+      }
+      return nodes.length > 1 ? nodes : nodes[0];
+    }
+    return null;
+  };
+
+  return (
+    <div
+      data-testid="PageTitle"
+      className={classify(css.pageTitleWrapper, classNames?.wrapper)}
+    >
+      <div className={classify(css.leftSlot, classNames?.leftSlot)}>
+        {pageNameKey && PAGE_NAME_LIST[pageNameKey] ? (
+          <PageName>
+            <TitleMedium>{PAGE_NAME_LIST[pageNameKey].title} </TitleMedium>
+            <Icon
+              type={PAGE_NAME_LIST[pageNameKey].iconType}
+              name={PAGE_NAME_LIST[pageNameKey].iconName}
+              size="medium"
+              color={TEXT_COLORS.primary}
+              swapOpacity={PAGE_NAME_LIST[pageNameKey].iconSwapOpacity}
+            />
+          </PageName>
+        ) : (
+          getNamedComp('PageName')
+        )}
+        {getNamedComp('TabSlot')}
+      </div>
+      <div className={classify(css.rightSlot, classNames?.rightSlot)}>
+        {getNamedComp('RightSlot')}
+      </div>
+    </div>
+  );
+};

package/lib/components/PageTitle/PageTitle.module.css

@@ -0,0 +1,40 @@
+@value (colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (spaceNone, spaceXXSmall, spaceXSmall, spaceSmall, spaceMedium, spaceLarge) from '../../styles/variables/_space.css';
+
+@value (sizeFluid, size60) from '../../styles/variables/_size.css';
+
+.pageTitleWrapper {
+  composes: borderBottomPrimary from '../../styles/border.module.css';
+  background: colorBackgroundTertiary;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: spaceSmall spaceLarge spaceNone spaceLarge;
+  width: sizeFluid;
+  min-height: size60;
+  gap: spaceMedium;
+  height: fit-content;
+}
+
+.leftSlot {
+  display: flex;
+  flex-direction: column;
+  gap: spaceXSmall;
+  margin-bottom: calc(spaceXXSmall * -0.75);
+}
+
+.pageTitle {
+  display: flex;
+  flex-direction: row;
+  gap: spaceXSmall;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.rightSlot {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  margin: spaceNone spaceNone spaceSmall spaceNone;
+}

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

@@ -17,6 +17,7 @@ import {
 import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {ClickAway} from '../../utils/click-away';
+import type {AnchorType} from '../ButtonDropdown';
 import type {MenuOption, MenuProps} from '../Menu';
 import {Menu} from '../Menu';
 import type {TabProps} from '../Tab';
@@ -28,13 +29,7 @@ import css from './TabDropdown.module.css';
 type ClassNames = $ReadOnly<{wrapper?: string}>;
 
 export type TabDropdownProps = {
-  anchorPosition?:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end',
+  anchorPosition?: AnchorType,
   size?: 'medium' | 'small',
   props?: {
     tab: TabProps,

package/lib/components/Tabs/index.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _exportNames = {
+  Tab: true,
+  tabSizeOptions: true
+};
+Object.defineProperty(exports, "Tab", {
+  enumerable: true,
+  get: function () {
+    return _Tab.Tab;
+  }
+});
+Object.defineProperty(exports, "tabSizeOptions", {
+  enumerable: true,
+  get: function () {
+    return _Tab.tabSizeOptions;
+  }
+});
+var _Tab = require("../Tab");
+var _TabList = require("../TabList");
+Object.keys(_TabList).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _TabList[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _TabList[key];
+    }
+  });
+});

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

@@ -0,0 +1,6 @@
+// @flow strict
+
+export type {TabProps} from '../Tab';
+export {Tab, tabSizeOptions} from '../Tab';
+export type {TabsProps} from '../TabList';
+export * from '../TabList';

package/package.json

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