@pega/cosmos-react-build - npm Package Compare versions

Comparing version 2.0.0-dev.15.0 to 2.0.0-dev.16.0

lib/components/AppHeader/AppHeader.d.ts

@@ -1,2 +0,2 @@
-import { FunctionComponent, Ref, MouseEventHandler, MouseEvent } from 'react';
+import { FunctionComponent, Ref, MouseEvent } from 'react';
 import { AvatarProps, BaseProps, ForwardProps, SearchInputProps, MenuItemProps, Tab, NoChildrenProp } from '@pega/cosmos-react-core';
@@ -15,6 +15,6 @@ export interface AppHeaderProps extends BaseProps, NoChildrenProp {
     /** Click handler for the header. */
-    onClick?: MouseEventHandler<MouseEvent>;
+    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
 interface LinkProps extends Tab {
-    onClick?: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
+    onClick?: (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;
 }
@@ -26,2 +26,3 @@ interface UtilsProps {
     actions?: MenuItemProps['items'];
+    onPreviewClick?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
@@ -28,0 +29,0 @@ declare const AppHeader: FunctionComponent<AppHeaderProps & ForwardProps>;

lib/components/AppHeader/AppHeader.js

 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { forwardRef, useCallback, useEffect, useState } from 'react';
-import { Flex, Icon, Text, useI18n, useBreakpoint, MenuButton, SearchInput } from '@pega/cosmos-react-core';
+import { Flex, Icon, MenuButton, Text, useI18n, useBreakpoint, SearchInput } from '@pega/cosmos-react-core';
 import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
-import { StyledAppHeader, StyledTabs, StyledAppAvator, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
+import { StyledAppHeader, StyledTabs, StyledAppAvatar, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledPreviewButton, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
 const BrandContainer = ({ name, onClick, href }) => {
@@ -14,6 +14,6 @@ return (_jsxs(StyledBrandContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' }, onClick: onClick, href: href, forwardedAs: onClick || href ? StyledBrandButton : 'div' }, { children: [_jsx(StyledIconContainer, Object.assign({ container: { alignItems: 'center', justify: 'center' } }, { children: _jsx(Icon, { name: 'pegasus' }, void 0) }), void 0), _jsx(StyledTitle, { children: name }, void 0)] }), void 0));
     }, [links]);
-    const handleTabClick = useCallback((id, event) => {
+    const handleTabClick = useCallback((id, e) => {
         const newActiveTab = links.find(item => item.id === id);
         if (newActiveTab) {
-            newActiveTab.onClick?.(id, event);
+            newActiveTab.onClick?.(id, e);
             setCurrentTabId(newActiveTab.id);
@@ -24,6 +24,6 @@ }
 };
-const Utils = ({ avatar, search, branchName, actions }) => {
+const Utils = ({ avatar, search, branchName, actions, onPreviewClick }) => {
     const t = useI18n();
     const isMediumOrAbove = useBreakpoint('md');
-    return (_jsxs(StyledUtilsContainer, Object.assign({ isMediumOrAbove: isMediumOrAbove, container: { alignItems: 'center', justify: 'end' } }, { children: [search && (_jsx(StyledAppHeaderSearchForm, Object.assign({ role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove }, { children: _jsx(SearchInput, Object.assign({}, search), void 0) }), void 0)), branchName && (_jsxs(StyledBranchContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' } }, { children: [_jsx(Icon, { name: 'nodes-right' }, void 0), _jsx(Text, Object.assign({ "aria-label": branchName }, { children: branchName }), void 0)] }), void 0)), actions && actions.length > 0 && (_jsx(MenuButton, { variant: 'link', menu: { items: actions }, text: t('actions') }, void 0)), _jsx(StyledAppAvator, Object.assign({}, avatar), void 0)] }), void 0));
+    return (_jsxs(StyledUtilsContainer, Object.assign({ isMediumOrAbove: isMediumOrAbove, container: { alignItems: 'center', justify: 'end' } }, { children: [search && (_jsx(StyledAppHeaderSearchForm, Object.assign({ role: 'search', "aria-label": search.searchInputAriaLabel, onSubmit: e => e.preventDefault(), isMediumOrAbove: isMediumOrAbove }, { children: _jsx(SearchInput, Object.assign({}, search), void 0) }), void 0)), branchName && (_jsxs(StyledBranchContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' } }, { children: [_jsx(Icon, { name: 'nodes-right' }, void 0), _jsx(Text, Object.assign({ "aria-label": branchName }, { children: branchName }), void 0)] }), void 0)), actions && actions.length > 0 && (_jsx(MenuButton, { variant: 'link', menu: { items: actions, scrollAt: 20 }, text: t('actions') }, void 0)), onPreviewClick && (_jsx(StyledPreviewButton, Object.assign({ variant: 'primary', onClick: onPreviewClick }, { children: t('preview') }), void 0)), _jsx(StyledAppAvatar, Object.assign({}, avatar), void 0)] }), void 0));
 };
@@ -30,0 +30,0 @@ const AppHeader = forwardRef(({ brand, utils, links }, ref) => {

lib/components/AppHeader/AppHeader.styles.d.ts

@@ -1,2 +0,2 @@
-import { Avatar, Flex, Text, Tabs } from '@pega/cosmos-react-core';
+import { Avatar, Flex, Text, Tabs, Button } from '@pega/cosmos-react-core';
 export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
@@ -10,3 +10,4 @@ export declare const StyledTitle: typeof Text;
 export declare const StyledBranchContainer: typeof Flex;
-export declare const StyledAppAvator: typeof Avatar;
+export declare const StyledPreviewButton: typeof Button;
+export declare const StyledAppAvatar: typeof Avatar;
 //# sourceMappingURL=AppHeader.styles.d.ts.map

lib/components/AppHeader/AppHeader.styles.js

 import styled, { css } from 'styled-components';
-import { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs } from '@pega/cosmos-react-core';
+import { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs, Button } from '@pega/cosmos-react-core';
 import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
@@ -89,3 +89,2 @@ export const StyledAppHeader = styled.header(({ theme }) => {
         margin-inline-start: ${theme.base.spacing};
-        margin-inline-end: ${theme.base.spacing};
       }
@@ -106,3 +105,3 @@ & > div:last-child {
       font-weight: ${theme.base['font-weight']['semi-bold']};
-      margin-inline-start: calc(0.75 * ${theme.base.spacing});
+      margin-inline-start: calc(0.5 * ${theme.base.spacing});
       margin-inline-end: calc(0.75 * ${theme.base.spacing});
@@ -113,6 +112,15 @@ }
 StyledBranchContainer.defaultProps = defaultThemeProp;
-export const StyledAppAvator = styled(Avatar) `
-  width: 1.5rem;
-  height: 1.5rem;
+export const StyledPreviewButton = styled(Button) `
+  flex-shrink: 0;
 `;
+export const StyledAppAvatar = styled(Avatar)(({ theme }) => {
+    return css `
+    width: 1.5rem;
+    height: 1.5rem;
+    && {
+      margin-inline-start: calc(2 * ${theme.base.spacing});
+    }
+  `;
+});
+StyledAppAvatar.defaultProps = defaultThemeProp;
 //# sourceMappingURL=AppHeader.styles.js.map

package.json

 {
   "name": "@pega/cosmos-react-build",
-  "version": "2.0.0-dev.15.0",
+  "version": "2.0.0-dev.16.0",
   "author": "Pegasystems",
@@ -23,4 +23,4 @@ "license": "SEE LICENSE IN LICENSE",
   "dependencies": {
-    "@pega/cosmos-react-core": "2.0.0-dev.15.0",
-    "@pega/cosmos-react-dnd": "2.0.0-dev.15.0",
+    "@pega/cosmos-react-core": "2.0.0-dev.16.0",
+    "@pega/cosmos-react-dnd": "2.0.0-dev.16.0",
     "polished": "^4.1.0",
@@ -40,2 +40,3 @@ "react": "^16.14.0 || ^17.0.0",
     "@storybook/react": "^6.3.8",
+    "@storybook/testing-react": "0.0.18",
     "@storybook/theming": "^6.3.8",
@@ -42,0 +43,0 @@ "enzyme": "^3.11.0",

No alert changes

Improved metrics

Total package byte prevSize

245381

increased by0.64%

Lines of code

1967

increased by0.51%

Worsened metrics

Dev dependency count

13

increased by8.33%

Dependency changes

• + Added@pega/cosmos-react-core@2.0.0-dev.16.0(transitive)

• + Added@pega/cosmos-react-dnd@2.0.0-dev.16.0(transitive)

• + Addedbrowserslist@4.23.0(transitive)

• + Addedcaniuse-lite@1.0.30001629(transitive)

• + Addedelectron-to-chromium@1.4.790(transitive)

• + Addedescalade@3.1.2(transitive)

• + Addednode-releases@2.0.14(transitive)

• + Addedupdate-browserslist-db@1.0.16(transitive)

• - Removed@pega/cosmos-react-core@2.0.0-dev.15.0(transitive)

• - Removed@pega/cosmos-react-dnd@2.0.0-dev.15.0(transitive)

• Updated@pega/cosmos-react-core@2.0.0-dev.16.0

• Updated@pega/cosmos-react-dnd@2.0.0-dev.16.0