@spaced-out/ui-design-system 0.0.21 → 0.0.23-beta.0

package/lib/components/SubMenu/SubMenu.module.css

@@ -0,0 +1,119 @@
+@value ( size34, size60, sizeFluid, sizeFullViewportHeight) from '../../styles/variables/_size.css';
+
+@value (
+  colorNeutralDarkest,
+  colorTextInverseSecondary,
+  colorTextInversePrimary,
+  colorSubMenuBackgroundDefault
+   ) from '../../styles/variables/_color.css';
+@value ( spaceNone, spaceXSmall, spaceSmall, spaceMedium ) from '../../styles/variables/_space.css';
+
+@value ( borderRadiusSmall, borderWidthPrimary) from '../../styles/variables/_border.css';
+
+.subMenuWrapper {
+  background: colorSubMenuBackgroundDefault;
+  width: sizeFluid;
+  min-height: sizeFullViewportHeight;
+  cursor: default;
+  display: flex;
+  flex-direction: column;
+  user-select: none;
+}
+
+.subMenuHeader {
+  height: size60;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: spaceMedium;
+  border-bottom: borderWidthPrimary solid colorNeutralDarkest;
+}
+
+.menuChildWrap {
+  margin: spaceNone spaceSmall;
+  border-bottom: borderWidthPrimary solid colorNeutralDarkest;
+}
+
+.menuChildWrap:last-child {
+  border-bottom: none;
+}
+
+.subMenuGroupWrapper {
+  display: flex;
+  flex-direction: column;
+  padding: spaceMedium spaceNone;
+  flex: auto;
+}
+
+.subMenuGroupHeader {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  cursor: pointer;
+  padding: spaceNone spaceXSmall spaceNone spaceXSmall;
+}
+
+.groupTitle {
+  text-transform: uppercase;
+}
+
+.subMenuGroup {
+  display: flex;
+  flex-direction: column;
+  margin-top: spaceXSmall;
+}
+
+.subMenuGroup.collapsed {
+  display: none !important;
+}
+
+.menuItem {
+  display: flex;
+  flex-direction: row;
+  background: colorSubMenuBackgroundDefault;
+  color: colorTextInverseSecondary;
+  flex-direction: row;
+  gap: spaceXSmall;
+  justify-content: space-between;
+  align-items: center;
+  flex: auto;
+  height: size34;
+  min-height: size34;
+  border-radius: borderRadiusSmall;
+  width: sizeFluid;
+  cursor: pointer;
+  padding: spaceXSmall;
+}
+
+.menuItem:not(.selected):hover {
+  color: colorTextInversePrimary;
+}
+
+.menuIcon {
+  color: inherit;
+}
+
+.menuItem.selected {
+  background: colorNeutralDarkest;
+  color: colorTextInversePrimary;
+}
+
+.menuItem.disabled {
+  pointer-events: none;
+}
+
+.menuIconName {
+  display: flex;
+  flex-direction: row;
+  gap: spaceSmall;
+}
+
+.subMenuItemText {
+  color: inherit;
+  margin-right: spaceSmall;
+}
+
+.subMenuItemAction {
+  display: flex;
+  flex-direction: row;
+}

package/lib/components/SubMenu/index.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "SubMenu", {
+  enumerable: true,
+  get: function () {
+    return _SubMenu.SubMenu;
+  }
+});
+Object.defineProperty(exports, "SubMenuGroup", {
+  enumerable: true,
+  get: function () {
+    return _SubMenu.SubMenuGroup;
+  }
+});
+Object.defineProperty(exports, "SubMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _SubMenu.SubMenuItem;
+  }
+});
+Object.defineProperty(exports, "SubMenuItemAction", {
+  enumerable: true,
+  get: function () {
+    return _SubMenu.SubMenuItemAction;
+  }
+});
+Object.defineProperty(exports, "SubMenuItemIcon", {
+  enumerable: true,
+  get: function () {
+    return _SubMenu.SubMenuItemIcon;
+  }
+});
+Object.defineProperty(exports, "SubMenuItemText", {
+  enumerable: true,
+  get: function () {
+    return _SubMenu.SubMenuItemText;
+  }
+});
+var _SubMenu = require("./SubMenu");

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

@@ -0,0 +1,11 @@
+// @flow strict
+
+export type {SubMenuProps} from './SubMenu';
+export {
+  SubMenu,
+  SubMenuGroup,
+  SubMenuItem,
+  SubMenuItemAction,
+  SubMenuItemIcon,
+  SubMenuItemText,
+} from './SubMenu';

package/lib/components/Tabs/Tab/Tab.js

@@ -76,7 +76,7 @@ const Tab = _ref => {
     className: (0, _classify.classify)(_TabModule.default.icon, {
       [_TabModule.default.disabled]: disabled === true
     })
-  }) : null, size === TAB_SIZE.medium ? /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
+  }) : null, label && /*#__PURE__*/React.createElement(React.Fragment, null, size === TAB_SIZE.medium ? /*#__PURE__*/React.createElement(_Text.ButtonTextMedium, {
     color: _typography.TEXT_COLORS.secondary,
     className: (0, _classify.classify)(_TabModule.default.tabContainer, {
       [_TabModule.default.disabled]: disabled === true
@@ -87,7 +87,7 @@ const Tab = _ref => {
       [_TabModule.default.selected]: selected === true,
       [_TabModule.default.disabled]: disabled === true
     })
-  }, label)));
+  }, label))));
 };
 exports.Tab = Tab;
 Tab.displayName = 'Tab';

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

@@ -100,25 +100,30 @@ export const Tab = ({
             })}
           />
         ) : 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>
+
+        {label && (
+          <>
+            {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>

package/lib/components/Tabs/Tab/Tab.module.css

@@ -25,7 +25,7 @@
   border: borderWidthTertiary solid colorFocusPrimary;
 }
 
-.button:focus .tabContainer {
+.button:focus .iconTextWrap {
   color: colorTextPrimary;
 }
 
@@ -55,6 +55,10 @@
   border-bottom: borderWidthTertiary solid colorFillNone;
 }
 
+.iconTextWrap:hover {
+  color: colorTextPrimary;
+}
+
 .icon {
   color: inherit;
 }

package/lib/styles/variables/_color.css

@@ -86,6 +86,8 @@
 
 @value colorSideMenuIconActive: #ffffff;
 
+@value colorSubMenuBackgroundDefault: #1F1F36;
+
 @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.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;
+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.colorSubMenuBackgroundDefault = 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;
@@ -93,6 +93,8 @@ const colorSideMenuIconDefault = '#9F9FBC';
 exports.colorSideMenuIconDefault = colorSideMenuIconDefault;
 const colorSideMenuIconActive = '#ffffff';
 exports.colorSideMenuIconActive = colorSideMenuIconActive;
+const colorSubMenuBackgroundDefault = '#1F1F36';
+exports.colorSubMenuBackgroundDefault = colorSubMenuBackgroundDefault;
 const colorGrayLightest = '#EBEBEB';
 exports.colorGrayLightest = colorGrayLightest;
 const colorNeutral = '#706F9B';

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

@@ -88,6 +88,8 @@ export const colorSideMenuIconDefault = '#9F9FBC';
 
 export const colorSideMenuIconActive = '#ffffff';
 
+export const colorSubMenuBackgroundDefault = '#1F1F36';
+
 export const colorGrayLightest = '#EBEBEB';
 
 export const colorNeutral = '#706F9B';

package/lib/styles/variables/_size.css

@@ -44,6 +44,8 @@
 
 @value size240: 240px;
 
+@value size260: 260px;
+
 @value size276: 276px;
 
 @value size300: 300px;
@@ -63,3 +65,5 @@
 @value size960: 960px;
 
 @value sizeFluid: 100%;
+
+@value sizeFullViewportHeight: 100vh;

package/lib/styles/variables/_size.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
+exports.sizeFullViewportHeight = exports.sizeFluid = exports.size960 = exports.size8 = exports.size720 = exports.size60 = exports.size580 = exports.size500 = exports.size5 = exports.size480 = exports.size42 = exports.size400 = exports.size40 = exports.size4 = exports.size380 = exports.size38 = exports.size36 = exports.size34 = exports.size300 = exports.size30 = exports.size276 = exports.size260 = exports.size240 = exports.size24 = exports.size228 = exports.size22 = exports.size20 = exports.size2 = exports.size18 = exports.size160 = exports.size140 = exports.size12 = exports.size110 = exports.size100 = exports.size10 = void 0;
 
 const size2 = '2px';
 exports.size2 = size2;
@@ -51,6 +51,8 @@ const size228 = '228px';
 exports.size228 = size228;
 const size240 = '240px';
 exports.size240 = size240;
+const size260 = '260px';
+exports.size260 = size260;
 const size276 = '276px';
 exports.size276 = size276;
 const size300 = '300px';
@@ -70,4 +72,6 @@ exports.size720 = size720;
 const size960 = '960px';
 exports.size960 = size960;
 const sizeFluid = '100%';
-exports.sizeFluid = sizeFluid;
+exports.sizeFluid = sizeFluid;
+const sizeFullViewportHeight = '100vh';
+exports.sizeFullViewportHeight = sizeFullViewportHeight;

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

@@ -46,6 +46,8 @@ export const size228 = '228px';
 
 export const size240 = '240px';
 
+export const size260 = '260px';
+
 export const size276 = '276px';
 
 export const size300 = '300px';
@@ -65,3 +67,5 @@ export const size720 = '720px';
 export const size960 = '960px';
 
 export const sizeFluid = '100%';
+
+export const sizeFullViewportHeight = '100vh';

package/package.json

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