@spaced-out/ui-design-system 0.0.58 → 0.0.60

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.60](https://github.com/spaced-out/ui-design-system/compare/v0.0.59...v0.0.60) (2023-03-27)
+
+
+### Features
+
+* 🎡 menu now supports groupTitleOptions 🎡 ([ad43075](https://github.com/spaced-out/ui-design-system/commit/ad430758ca9751064ef9da165591a9d1eac460cb))
+
+### [0.0.59](https://github.com/spaced-out/ui-design-system/compare/v0.0.58...v0.0.59) (2023-03-27)
+
+
+### Features
+
+* changed secondary button colors ([3a3c3e0](https://github.com/spaced-out/ui-design-system/commit/3a3c3e0cf1c15d3149403ceb2f187d5e0a113ad1))
+
 ### [0.0.58](https://github.com/spaced-out/ui-design-system/compare/v0.0.57...v0.0.58) (2023-03-25)
 
 

package/lib/components/Button/Button.js

@@ -29,7 +29,7 @@ const BUTTON_ACTION_TYPE = Object.freeze({
 exports.BUTTON_ACTION_TYPE = BUTTON_ACTION_TYPE;
 const ButtonTypeToIconColorMap = {
   primary: 'inversePrimary',
-  secondary: 'primary',
+  secondary: 'clickable',
   tertiary: 'primary',
   ghost: 'primary',
   danger: 'inversePrimary'

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

@@ -58,7 +58,7 @@ export type ButtonProps = {
 
 const ButtonTypeToIconColorMap = {
   primary: 'inversePrimary',
-  secondary: 'primary',
+  secondary: 'clickable',
   tertiary: 'primary',
   ghost: 'primary',
   danger: 'inversePrimary',

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

@@ -26,6 +26,7 @@
 
   colorTextPrimary,
   colorTextInversePrimary,
+  colorTextClickable,
   colorTextDisabled,
 
   colorBorderSecondary
@@ -145,8 +146,7 @@ button {
 }
 
 .secondary {
-  color: colorTextPrimary;
-  border: borderWidthPrimary solid colorButtonFillPrimaryEnabled;
+  color: colorTextClickable;
   background-color: colorButtonFillSecondaryEnabled;
 }
 

package/lib/components/Dropdown/Dropdown.js

@@ -22,6 +22,7 @@ const Dropdown = _ref => {
   let {
     options,
     composeOptions,
+    groupTitleOptions,
     size,
     classNames,
     placeholder = 'Select...',
@@ -81,7 +82,7 @@ const Dropdown = _ref => {
         e.stopPropagation();
         onOpen();
       }
-    })), isOpen && (options || composeOptions) && /*#__PURE__*/React.createElement("div", {
+    })), isOpen && (options || composeOptions || groupTitleOptions) && /*#__PURE__*/React.createElement("div", {
       onClickCapture: cancelNext,
       ref: floating,
       style: {
@@ -95,6 +96,7 @@ const Dropdown = _ref => {
       isFluid: true,
       options: options,
       composeOptions: composeOptions,
+      groupTitleOptions: groupTitleOptions,
       onSelect: option => {
         handleSelect(option);
         clickAway();

package/lib/components/Dropdown/Dropdown.js.flow

@@ -18,7 +18,7 @@ import {spaceNone, spaceXXSmall} from '../../styles/variables/_space';
 import {classify} from '../../utils/classify';
 import {ClickAway} from '../../utils/click-away';
 import {Input} from '../Input';
-import type {MenuOption} from '../Menu';
+import type {MenuGroupTitleOption, MenuOption} from '../Menu';
 import {Menu} from '../Menu';
 
 import css from './Dropdown.module.css';
@@ -43,6 +43,7 @@ export type DropdownProps = {
   required?: boolean,
   options?: Array<MenuOption>,
   composeOptions?: Array<Array<MenuOption>>,
+  groupTitleOptions?: Array<MenuGroupTitleOption>,
   selectedOption?: MenuOption,
   menuSize?: 'medium' | 'small',
 };
@@ -50,6 +51,7 @@ export type DropdownProps = {
 export const Dropdown = ({
   options,
   composeOptions,
+  groupTitleOptions,
   size,
   classNames,
   placeholder = 'Select...',
@@ -105,7 +107,7 @@ export const Dropdown = ({
             }}
           />
 
-          {isOpen && (options || composeOptions) && (
+          {isOpen && (options || composeOptions || groupTitleOptions) && (
             <div
               onClickCapture={cancelNext}
               ref={floating}
@@ -121,6 +123,7 @@ export const Dropdown = ({
                 isFluid
                 options={options}
                 composeOptions={composeOptions}
+                groupTitleOptions={groupTitleOptions}
                 onSelect={(option) => {
                   handleSelect(option);
                   clickAway();

package/lib/components/Menu/Menu.js

@@ -16,6 +16,7 @@ const RenderOption = _ref => {
   let {
     options,
     composeOptions,
+    groupTitleOptions,
     ...restProps
   } = _ref;
   if (options && Array.isArray(options) && options.length) {
@@ -38,6 +39,20 @@ const RenderOption = _ref => {
       option: option
     }, restProps)))))));
   }
+  if (groupTitleOptions && Array.isArray(groupTitleOptions) && groupTitleOptions.length) {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, groupTitleOptions.map((optionsGroup, index) =>
+    /*#__PURE__*/
+    // eslint-disable-next-line react/no-array-index-key
+    React.createElement(React.Fragment, {
+      key: index
+    }, !!optionsGroup.groupTitle && /*#__PURE__*/React.createElement("div", {
+      className: _MenuModule.default.groupTitleWrapper
+    }, optionsGroup.groupTitle), optionsGroup.options?.map(option => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: option.key
+    }, /*#__PURE__*/React.createElement(_MenuOptionButton.MenuOptionButton, _extends({
+      option: option
+    }, restProps)))))));
+  }
   return /*#__PURE__*/React.createElement(React.Fragment, null);
 };
 const Menu = props => {

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

@@ -39,14 +39,21 @@ export type MenuProps = {
 
 export type MenuSizeTypes = 'medium' | 'small';
 
+export type MenuGroupTitleOption = {
+  groupTitle?: React.Node,
+  options?: Array<MenuOption>,
+};
+
 export type MenuOptionTypes = {
   options?: Array<MenuOption>,
   composeOptions?: Array<Array<MenuOption>>,
+  groupTitleOptions?: Array<MenuGroupTitleOption>,
 };
 
 const RenderOption = ({
   options,
   composeOptions,
+  groupTitleOptions,
   ...restProps
 }: MenuProps): React.Node => {
   if (options && Array.isArray(options) && options.length) {
@@ -80,6 +87,32 @@ const RenderOption = ({
       </>
     );
   }
+  if (
+    groupTitleOptions &&
+    Array.isArray(groupTitleOptions) &&
+    groupTitleOptions.length
+  ) {
+    return (
+      <>
+        {groupTitleOptions.map((optionsGroup, index) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <React.Fragment key={index}>
+            {!!optionsGroup.groupTitle && (
+              <div className={css.groupTitleWrapper}>
+                {optionsGroup.groupTitle}
+              </div>
+            )}
+
+            {optionsGroup.options?.map((option) => (
+              <React.Fragment key={option.key}>
+                <MenuOptionButton option={option} {...restProps} />
+              </React.Fragment>
+            ))}
+          </React.Fragment>
+        ))}
+      </>
+    );
+  }
   return <></>;
 };
 

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

@@ -34,6 +34,7 @@
   spaceSmall,
   spaceXSmall,
   spaceXXSmall,
+  spaceMedium,
   spaceNone
 ) from '../../styles/variables/_space.css';
 
@@ -185,3 +186,13 @@
 .menuDivider:last-child {
   padding-bottom: spaceNone;
 }
+
+.groupTitleWrapper {
+  composes: formLabelSmall from '../../styles/typography.module.css';
+  display: flex;
+  margin-bottom: spaceXSmall;
+  padding-left: spaceSmall;
+  padding-right: calc(spaceXSmall / 2);
+  color: colorTextTertiary;
+  margin-top: spaceSmall;
+}

package/lib/components/Menu/index.js

@@ -3,17 +3,25 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "Menu", {
-  enumerable: true,
-  get: function () {
-    return _Menu.Menu;
-  }
-});
-Object.defineProperty(exports, "MenuOptionButton", {
-  enumerable: true,
-  get: function () {
-    return _MenuOptionButton.MenuOptionButton;
-  }
-});
 var _Menu = require("./Menu");
-var _MenuOptionButton = require("./MenuOptionButton");
+Object.keys(_Menu).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _Menu[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _Menu[key];
+    }
+  });
+});
+var _MenuOptionButton = require("./MenuOptionButton");
+Object.keys(_MenuOptionButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _MenuOptionButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _MenuOptionButton[key];
+    }
+  });
+});

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

@@ -1,5 +1,4 @@
 // @flow strict
 
-export type {MenuOption, MenuProps} from './Menu';
-export {Menu} from './Menu';
-export {MenuOptionButton} from './MenuOptionButton';
+export * from './Menu';
+export * from './MenuOptionButton';

package/package.json

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