orcs-design-system 3.3.6 → 3.3.8

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

@@ -13,7 +13,7 @@ export default {
   component: Header,
   decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
     height: "350px",
-    bg: "greyLightest",
+    bg: "white",
     p: "r",
     children: storyFn()
   })]
@@ -61,6 +61,7 @@ const UserMenuContent = () => {
 export const defaultHeader = () => /*#__PURE__*/_jsx(Header, {
   appName: "Powercorp directory",
   logo: dummyLogo,
+  showLogoSeparator: true,
   userName: "Michael Jenkins (michael.jenkins@powercorp.com)",
   avatarSource: "https://api.dicebear.com/7.x/personas/svg?seed=mike",
   avatarAlt: "Avatar for Michael",

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

@@ -3,6 +3,7 @@ import { space, layout } from "styled-system";
 import css from "@styled-system/css";
 import { themeGet } from "@styled-system/theme-get";
 import Box from "../Box";
+import Flex from "../Flex";
 export const Bar = styled("header").attrs(props => ({
   "data-testid": props.dataTestId
 })).withConfig({
@@ -17,23 +18,20 @@ export const Bar = styled("header").attrs(props => ({
   top: "0",
   display: "flex",
   alignItems: "center",
-  bg: "transparent",
+  bg: "white",
   gap: "r",
-  p: "r"
+  px: "r"
 }), space);
 export const AppName = styled("div").withConfig({
   displayName: "Headerstyles__AppName",
   componentId: "sc-xs8ba0-1"
 })(props => css({
-  background: themeGet("colors.white")(props),
+  background: "transparent",
   width: "fit-content",
   display: "flex",
   alignItems: "center",
-  gap: ["0", "0", "0", "s"],
-  px: "s",
+  gap: ["0", "0", "0", "r"],
   height: themeGet("appScale.sideNavSize")(props),
-  borderRadius: themeGet("radii.2")(props),
-  border: `1px solid ${themeGet("colors.greyLight")(props)}`,
   fontSize: themeGet("fontSizes.1")(props),
   fontWeight: themeGet("fontWeights.2")(props),
   color: themeGet("colors.greyDarkest")(props),
@@ -53,9 +51,17 @@ export const AppName = styled("div").withConfig({
     color: themeGet("colors.greyDarkest")(props)
   }
 }), space);
+export const Separator = styled(Box).withConfig({
+  displayName: "Headerstyles__Separator",
+  componentId: "sc-xs8ba0-2"
+})(props => css({
+  width: "1px",
+  height: "75%",
+  bg: themeGet("colors.greyLight")(props)
+}), space);
 export const SearchContainer = styled("div").withConfig({
   displayName: "Headerstyles__SearchContainer",
-  componentId: "sc-xs8ba0-2"
+  componentId: "sc-xs8ba0-3"
 })(props => css({
   maxWidth: "550px",
   marginLeft: "auto",
@@ -65,12 +71,11 @@ export const SearchContainer = styled("div").withConfig({
 }), space, layout);
 export const UserMenuToggle = styled("button").withConfig({
   displayName: "Headerstyles__UserMenuToggle",
-  componentId: "sc-xs8ba0-3"
+  componentId: "sc-xs8ba0-4"
 })(props => css({
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  gap: "xs",
   padding: "0",
   cursor: "pointer",
   border: "none",
@@ -79,33 +84,36 @@ export const UserMenuToggle = styled("button").withConfig({
   color: themeGet("colors.greyDark")(props),
   fontSize: themeGet("fontSizes.1")(props),
   fontWeight: themeGet("fontWeights.2")(props),
-  "svg path": {
-    transition: "fill 300ms ease-in-out"
-  },
   "&:focus, &:hover": {
-    outline: "none",
-    "svg path": {
-      fill: themeGet("colors.primary")(props)
-    }
+    outline: "none"
   }
 }));
 export const AvatarBorder = styled(Box).withConfig({
   displayName: "Headerstyles__AvatarBorder",
-  componentId: "sc-xs8ba0-4"
+  componentId: "sc-xs8ba0-5"
 })(css({
-  background: "linear-gradient(0deg, rgba(155,81,224,1) 0%, rgba(0,145,234,1) 100%)"
+  background: "linear-gradient(135deg, rgba(0,145,234,1) 0%, rgba(155,81,224,1) 100%)"
 }));
 export const UserMenuContainer = styled(Box).withConfig({
   displayName: "Headerstyles__UserMenuContainer",
-  componentId: "sc-xs8ba0-5"
-})(props => css({
-  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)
+  componentId: "sc-xs8ba0-6"
+})(css({
+  position: "relative"
+}));
+export const IconContainer = styled(Flex).withConfig({
+  displayName: "Headerstyles__IconContainer",
+  componentId: "sc-xs8ba0-7"
+})(css({
+  position: "absolute",
+  bottom: "0",
+  right: "0",
+  height: "15px",
+  width: "15px",
+  background: "linear-gradient(135deg, rgba(0,145,234,1) 0%, rgba(155,81,224,1) 100%)"
 }));
 export const UserMenuContent = styled(Box).withConfig({
   displayName: "Headerstyles__UserMenuContent",
-  componentId: "sc-xs8ba0-6"
+  componentId: "sc-xs8ba0-8"
 })(props => css({
   position: "absolute",
   gap: "s",

package/es/components/Header/UserMenu.js

@@ -4,7 +4,7 @@ import Avatar from "../Avatar";
 import Icon from "../Icon";
 import Divider from "../Divider";
 import { Small } from "../Typography";
-import { UserMenuToggle, AvatarBorder, UserMenuContainer, UserMenuContent } from "./Header.styles";
+import { UserMenuToggle, AvatarBorder, UserMenuContainer, UserMenuContent, IconContainer } from "./Header.styles";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const UserMenu = _ref => {
   let {
@@ -32,13 +32,6 @@ const UserMenu = _ref => {
   };
   return /*#__PURE__*/_jsxs(UserMenuContainer, {
     ref: menuRef,
-    p: "2px",
-    pr: "s",
-    bg: "white",
-    width: "auto",
-    border: "solid 1px",
-    borderColor: "greyLight",
-    display: "flex",
     children: [/*#__PURE__*/_jsxs(UserMenuToggle, {
       onClick: toggleMenu,
       children: [/*#__PURE__*/_jsx(AvatarBorder, {
@@ -50,11 +43,18 @@ const UserMenu = _ref => {
           imageAlt: avatarAlt,
           initials: avatarInitials
         })
-      }), /*#__PURE__*/_jsx(Icon, {
-        icon: ["fas", "chevron-down"],
-        rotation: isOpen ? 180 : 0,
-        color: "greyDark",
-        ml: "s"
+      }), /*#__PURE__*/_jsx(IconContainer, {
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: "50%",
+        p: "2px",
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: ["fas", "chevron-down"],
+          rotation: isOpen ? 180 : 0,
+          color: "white",
+          size: "xs",
+          mt: isOpen ? "0" : "1px"
+        })
       })]
     }), /*#__PURE__*/_jsxs(UserMenuContent, {
       p: "s",

package/es/components/Header/index.js

@@ -2,7 +2,7 @@ import React from "react";
 import PropTypes from "prop-types";
 import Flex, { FlexItem } from "../Flex";
 import { Small } from "../Typography";
-import { Bar, AppName, SearchContainer } from "./Header.styles";
+import { Bar, AppName, SearchContainer, Separator } from "./Header.styles";
 import UserMenu from "./UserMenu";
 /**
  * Header component for top of app.
@@ -19,15 +19,14 @@ const Header = _ref => {
     dataTestId,
     currentWorkspace,
     logo,
-    userMenuContent
+    userMenuContent,
+    showLogoSeparator = false
   } = _ref;
   return /*#__PURE__*/_jsxs(Bar, {
     dataTestId: dataTestId,
     children: [/*#__PURE__*/_jsxs(AppName, {
-      children: [logo && /*#__PURE__*/_jsx(Flex, {
-        alignItems: "center",
-        justifyContent: "center",
-        children: logo
+      children: [logo, showLogoSeparator && /*#__PURE__*/_jsx(Separator, {
+        display: ["none", "none", "none", "block"]
       }), /*#__PURE__*/_jsxs(Flex, {
         flexDirection: "column",
         children: [appName && /*#__PURE__*/_jsx(FlexItem, {
@@ -77,7 +76,9 @@ Header.propTypes = {
   /** Allows for use of the `data-testid` attribute for testing. */
   dataTestId: PropTypes.string,
   /** Allows you to pass in child components to user dropdown menu */
-  userMenuContent: PropTypes.node
+  userMenuContent: PropTypes.node,
+  /** use this to apply separator if logo and appName or currentWorkspace exists */
+  showLogoSeparator: PropTypes.bool
 };
 
 /** @component */
@@ -86,6 +87,17 @@ Header.__docgenInfo = {
   "methods": [],
   "displayName": "Header",
   "props": {
+    "showLogoSeparator": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "use this to apply separator if logo and appName or currentWorkspace exists",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "logo": {
       "description": "Logo for app. Preferably an svg logo",
       "type": {

package/es/systemThemeCollapsed.js

@@ -215,9 +215,9 @@ export const mediaQueries = {
 
 export const appScale = {
   navBarSize: "50px",
-  newNavBarSize: "70px",
-  navBarLogoSize: "30px",
-  navBarAvatarSize: "32px",
+  newNavBarSize: "64px",
+  navBarLogoSize: "42px",
+  navBarAvatarSize: "38px",
   sideNavSize: "42px",
   sidebarMaxWidth: "360px",
   sidebarMaxWidthLarge: "450px",

package/es/systemtheme.js

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.6",
+  "version": "3.3.8",
   "engines": {
     "node": "20.12.2"
   },
@@ -99,7 +99,7 @@
     "@storybook/mdx1-csf": "^1.0.0",
     "@storybook/preset-create-react-app": "^8.3.3",
     "@storybook/react": "^8.1.7",
-    "@storybook/react-webpack5": "^8.2.9",
+    "@storybook/react-webpack5": "^8.3.7",
     "@storybook/storybook-deployer": "2.8.16",
     "@storybook/theming": "^8.1.7",
     "@testing-library/jest-dom": "^5.11.6",
@@ -131,6 +131,7 @@
     "nodemon": "^3.1.0",
     "npm-run-all": "^4.1.5",
     "playroom": "^0.32.1",
+    "postcss": "8.5.2",
     "prettier": "^2.2.1",
     "react": "^18.3.1",
     "react-docgen": "^7.0.3",
@@ -149,7 +150,7 @@
     "jest": "$jest",
     "nth-check": "2.1.0",
     "parse-url": "8.1.0",
-    "postcss": "^8.4.31",
+    "postcss": "8.5.2",
     "react-scripts": "5.0.1",
     "remark-parse": "10.0.2",
     "react": "^18.3.1",
@@ -158,7 +159,7 @@
     "webpack-dev-middleware": "6.1.2",
     "ws": "8.17.1",
     "express": {
-      "path-to-regexp": "0.1.10"
+      "path-to-regexp": "0.1.12"
     },
     "send": "0.19.0",
     "redux": "4.2.1",