orcs-design-system 3.3.3 → 3.3.4

package/es/components/Avatar/index.js

@@ -63,8 +63,8 @@ const Image = styled("img").withConfig({
   displayName: "Avatar__Image",
   componentId: "sc-1wtet2j-2"
 })(props => css({
-  width: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
-  height: props.customSize ? props.customSize : themeGet("appScale.avatarDefault")(props),
+  width: themeGet(`appScale.${props.customSize || "avatarDefault"}`)(props) || props.customSize,
+  height: themeGet(`appScale.${props.customSize || "avatarDefault"}`)(props) || props.customSize,
   flex: "0 0 auto",
   backgroundColor: themeGet("colors.greyLighter")(props),
   border: "0",

package/es/components/Header/Header.stories.js

@@ -69,6 +69,7 @@ export const defaultHeader = () => /*#__PURE__*/_jsx(Header, {
   searchComponent: /*#__PURE__*/_jsx(TextInput, {
     fullWidth: true,
     id: "search",
+    height: "100%",
     type: "text",
     placeholder: "Search for...",
     iconRight: ["fas", "search"]

package/es/components/Header/Header.styles.js

@@ -31,19 +31,20 @@ export const AppName = styled("div").withConfig({
   alignItems: "center",
   gap: ["0", "0", "0", "s"],
   px: "s",
-  height: "38px",
+  height: themeGet("appScale.sideNavSize")(props),
   borderRadius: themeGet("radii.2")(props),
   border: `1px solid ${themeGet("colors.greyLight")(props)}`,
-  boxShadow: themeGet("shadows.boxDefault")(props),
   fontSize: themeGet("fontSizes.1")(props),
   fontWeight: themeGet("fontWeights.2")(props),
   color: themeGet("colors.greyDarkest")(props),
   img: {
-    height: "22px",
+    height: "100%",
+    maxHeight: themeGet("appScale.navBarLogoSize")(props),
     width: "auto"
   },
   svg: {
-    height: "22px",
+    height: "100%",
+    maxHeight: themeGet("appScale.navBarLogoSize")(props),
     width: "auto"
   },
   a: {
@@ -57,9 +58,9 @@ export const SearchContainer = styled("div").withConfig({
   componentId: "sc-xs8ba0-2"
 })(props => css({
   maxWidth: "550px",
+  height: themeGet("appScale.sideNavSize")(props),
   flex: "1 1 auto",
-  borderRadius: themeGet("radii.2")(props),
-  boxShadow: themeGet("shadows.boxDefault")(props)
+  borderRadius: themeGet("radii.2")(props)
 }), space, layout);
 export const UserMenuToggle = styled("button").withConfig({
   displayName: "Headerstyles__UserMenuToggle",
@@ -97,8 +98,9 @@ export const UserMenuContainer = styled(Box).withConfig({
   displayName: "Headerstyles__UserMenuContainer",
   componentId: "sc-xs8ba0-5"
 })(props => css({
-  borderRadius: `19px ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} 19px`,
-  position: "relative"
+  borderRadius: `calc(${themeGet("appScale.sideNavSize")(props)} / 2) ${themeGet("radii.2")(props)} ${themeGet("radii.2")(props)} calc(${themeGet("appScale.sideNavSize")(props)} / 2)`,
+  position: "relative",
+  height: themeGet("appScale.sideNavSize")(props)
 }));
 export const UserMenuContent = styled(Box).withConfig({
   displayName: "Headerstyles__UserMenuContent",

package/es/components/Header/UserMenu.js

@@ -37,10 +37,8 @@ const UserMenu = _ref => {
     ml: "auto",
     bg: "white",
     width: "auto",
-    height: "38px",
     border: "solid 1px",
     borderColor: "greyLight",
-    shadow: "default",
     display: "flex",
     children: [/*#__PURE__*/_jsxs(UserMenuToggle, {
       onClick: toggleMenu,
@@ -48,7 +46,7 @@ const UserMenu = _ref => {
         borderRadius: "50%",
         p: "2px",
         children: /*#__PURE__*/_jsx(Avatar, {
-          customSize: "28px",
+          customSize: "navBarAvatarSize",
           image: avatarSource,
           imageAlt: avatarAlt,
           initials: avatarInitials

package/es/components/Header/index.js

@@ -28,18 +28,21 @@ const Header = _ref => {
         alignItems: "center",
         justifyContent: "center",
         children: logo
-      }), /*#__PURE__*/_jsx(FlexItem, {
-        flex: "0 0 auto",
-        display: ["none", "none", "none", "block"],
-        children: appName
-      }), currentWorkspace && /*#__PURE__*/_jsx(FlexItem, {
-        flex: "0 0 auto",
-        children: /*#__PURE__*/_jsx(Small, {
-          color: "greyDark",
-          fontSize: "0",
+      }), /*#__PURE__*/_jsxs(Flex, {
+        flexDirection: "column",
+        children: [/*#__PURE__*/_jsx(FlexItem, {
+          flex: "0 0 auto",
           display: ["none", "none", "none", "block"],
-          children: currentWorkspace
-        })
+          children: appName
+        }), currentWorkspace && /*#__PURE__*/_jsx(FlexItem, {
+          flex: "0 0 auto",
+          children: /*#__PURE__*/_jsx(Small, {
+            color: "greyDark",
+            fontSize: "0",
+            display: ["none", "none", "none", "block"],
+            children: currentWorkspace
+          })
+        })]
       })]
     }), searchComponent && /*#__PURE__*/_jsx(SearchContainer, {
       children: searchComponent

package/es/components/SideNav/index.js

@@ -21,7 +21,6 @@ const SideNavWrapper = styled("div").withConfig({
   fontFamily: themeGet("fonts.main")(props),
   borderRadius: themeGet("radii.2")(props),
   border: `solid 1px ${themeGet("colors.greyLighter")(props)}`,
-  boxShadow: themeGet("shadows.boxDefault")(props),
   display: "flex",
   alignItems: "stretch",
   alignContent: "stretch",

package/es/components/TextInput/index.js

@@ -3,7 +3,6 @@ import { NumericFormat } from "react-number-format";
 import PropTypes from "prop-types";
 import styled, { css } from "styled-components";
 import { space, layout, compose } from "styled-system";
-import { css as sscss } from "@styled-system/css";
 import { createShouldForwardProp, props } from "@styled-system/should-forward-prop";
 import Icon from "../Icon";
 import { themeGet } from "@styled-system/theme-get";
@@ -15,26 +14,15 @@ const Group = styled("div").withConfig({
   shouldForwardProp,
   displayName: "TextInput__Group",
   componentId: "sc-shde0o-0"
-})(props => sscss({
+})(props => css({
   position: "relative",
-  width: props.fullWidth ? "100%" : "auto"
+  width: props.fullWidth ? "100%" : "auto",
+  minHeight: props => props.height ?? themeGet(props.floating ? "appScale.inputHeightLarge" : "appScale.inputHeightDefault")(props)
 }), InputStyles);
 const IconWrapper = styled.label.withConfig({
   displayName: "TextInput__IconWrapper",
   componentId: "sc-shde0o-1"
-})(["display:flex;align-items:center;position:relative;svg{opacity:0.4;position:absolute;}", ";"], props => props.iconLeft && !props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
-  let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return `calc(${inputHeight} / 3 - 1px)`;
-}) : props.iconLeft && props.floating ? css(["svg{bottom:", ";left:12px;}"], props => {
-  let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return `calc(${inputHeight} / 2 + 3px)`;
-}) : props.iconRight && !props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
-  let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return `calc(${inputHeight} / 3 - 1px)`;
-}) : props.iconRight && props.floating ? css(["svg{bottom:", ";right:12px;}"], props => {
-  let inputHeight = themeGet("appScale.inputHeightDefault")(props);
-  return `calc(${inputHeight} / 2 + 3px)`;
-}) : css([""]));
+})(["display:flex;align-items:center;min-height:inherit;position:absolute;width:fit-content;bottom:0;padding:0 10px;svg{opacity:0.4;}", ";"], props => props.iconLeft && !props.floating ? css(["left:0;"]) : props.iconLeft && props.floating ? css(["left:0;bottom:11px;"]) : props.iconRight && !props.floating ? css(["right:0;"]) : props.iconRight && props.floating ? css(["right:0;bottom:11px;"]) : css([""]));
 const InputStyle = css(["display:block;cursor:text;-moz-appearance:none;-webkit-appearance:none;appearance:none;font-family:\"Open Sans\",\"Helvetica Neue\",Helvetica,Arial,sans-serif;box-shadow:none;font-size:", ";z-index:1;border-radius:", ";transition:", ";background:", ";color:", ";width:", ";height:", ";padding:", ";border:1px solid ", ";", " &:hover{border:1px solid ", ";}&:focus{outline:0;box-shadow:", ";border:1px solid ", ";", ";}"], props => themeGet("fontSizes.2")(props), props => themeGet("radii.2")(props), props => themeGet("transition.transitionDefault")(props), props => props.disabled ? themeGet("colors.greyLightest")(props) : themeGet("colors.white")(props), props => props.disabled ? themeGet("colors.grey")(props) : themeGet("colors.greyDarkest")(props), props => props.fullWidth ? `100%` : `auto`, props => props.height ? props.height : props.floating ? themeGet("appScale.inputHeightLarge")(props) : themeGet("appScale.inputHeightDefault")(props), props => {
   let left = props.iconLeft ? 36 : 10;
   let right = props.iconRight ? 36 : 10;
@@ -97,6 +85,7 @@ const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
   }, [props.label, numberProps]);
   return /*#__PURE__*/_jsxs(Group, {
     fullWidth: fullWidth,
+    height: height,
     ...InputStyles,
     children: [label && !floating ? /*#__PURE__*/_jsx(Label, {
       inverted: inverted,
@@ -131,27 +120,23 @@ const TextInput = /*#__PURE__*/React.forwardRef((props, ref) => {
       iconRight: iconRight,
       iconLeft: iconLeft,
       children: label
-    }) : null, iconLeft ? /*#__PURE__*/_jsx("div", {
-      children: /*#__PURE__*/_jsx(IconWrapper, {
+    }) : null, iconLeft ? /*#__PURE__*/_jsx(IconWrapper, {
+      htmlFor: id,
+      iconLeft: iconLeft,
+      floating: floating,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: iconLeft,
         htmlFor: id,
-        iconLeft: iconLeft,
-        floating: floating,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: iconLeft,
-          htmlFor: id,
-          color: "black"
-        })
+        color: "black"
       })
-    }) : null, iconRight ? /*#__PURE__*/_jsx("div", {
-      children: /*#__PURE__*/_jsx(IconWrapper, {
+    }) : null, iconRight ? /*#__PURE__*/_jsx(IconWrapper, {
+      htmlFor: id,
+      iconRight: iconRight,
+      floating: floating,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: iconRight,
         htmlFor: id,
-        iconRight: iconRight,
-        floating: floating,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: iconRight,
-          htmlFor: id,
-          color: "#black"
-        })
+        color: "#black"
       })
     }) : null]
   });

package/es/systemThemeCollapsed.js

@@ -216,6 +216,8 @@ export const mediaQueries = {
 export const appScale = {
   navBarSize: "50px",
   newNavBarSize: "70px",
+  navBarLogoSize: "30px",
+  navBarAvatarSize: "32px",
   sideNavSize: "42px",
   sidebarMaxWidth: "360px",
   sidebarMaxWidthLarge: "450px",

package/es/systemtheme.js

@@ -215,6 +215,8 @@ export const mediaQueries = {
 export const appScale = {
   navBarSize: "54px",
   newNavBarSize: "70px",
+  navBarLogoSize: "35px",
+  navBarAvatarSize: "40px",
   sideNavSize: "50px",
   sidebarMaxWidth: "360px",
   sidebarMaxWidthLarge: "550px",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.3",
+  "version": "3.3.4",
   "engines": {
     "node": "20.12.2"
   },