@pega/cosmos-react-build 2.0.0-dev.14.0 → 2.0.0-dev.14.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/components/AppHeader/AppHeader.d.ts.map +1 -1
- package/lib/components/AppHeader/AppHeader.js +4 -4
- package/lib/components/AppHeader/AppHeader.js.map +1 -1
- package/lib/components/AppHeader/AppHeader.styles.d.ts +2 -2
- package/lib/components/AppHeader/AppHeader.styles.d.ts.map +1 -1
- package/lib/components/AppHeader/AppHeader.styles.js +20 -12
- package/lib/components/AppHeader/AppHeader.styles.js.map +1 -1
- package/lib/components/AppShell/AppShell.styles.d.ts.map +1 -1
- package/lib/components/AppShell/AppShell.styles.js +2 -1
- package/lib/components/AppShell/AppShell.styles.js.map +1 -1
- package/package.json +3 -3
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EACH,iBAAiB,EACjB,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EACX,SAAS,EAET,YAAY,EAKZ,gBAAgB,EAChB,aAAa,EAEb,GAAG,EAEH,cAAc,EACf,MAAM,yBAAyB,CAAC;AAejC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AACD,UAAU,UAAU;IAClB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CACzC;AAED,UAAU,SAAU,SAAQ,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC3F;AAED,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAClC;
|
|
1
|
+
{"version":3,"file":"AppHeader.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,GAAG,EACH,iBAAiB,EACjB,UAAU,EAMX,MAAM,OAAO,CAAC;AAEf,OAAO,EACL,WAAW,EACX,SAAS,EAET,YAAY,EAKZ,gBAAgB,EAChB,aAAa,EAEb,GAAG,EAEH,cAAc,EACf,MAAM,yBAAyB,CAAC;AAejC,MAAM,WAAW,cAAe,SAAQ,SAAS,EAAE,cAAc;IAC/D,KAAK,EAAE,UAAU,CAAC;IAClB,KAAK,CAAC,EAAE,SAAS,EAAE,CAAC;IACpB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,GAAG,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAC;CAC3B;AACD,UAAU,UAAU;IAClB,gDAAgD;IAChD,IAAI,EAAE,MAAM,CAAC;IACb,oCAAoC;IACpC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,oCAAoC;IACpC,OAAO,CAAC,EAAE,iBAAiB,CAAC,UAAU,CAAC,CAAC;CACzC;AAED,UAAU,SAAU,SAAQ,GAAG;IAC7B,OAAO,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,UAAU,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,KAAK,IAAI,CAAC;CAC3F;AAED,UAAU,UAAU;IAClB,MAAM,EAAE,WAAW,CAAC;IACpB,MAAM,CAAC,EAAE,gBAAgB,CAAC;IAC1B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;CAClC;AAwED,QAAA,MAAM,SAAS,EAAE,iBAAiB,CAAC,cAAc,GAAG,YAAY,CAU/D,CAAC;AAEF,eAAe,SAAS,CAAC"}
|
|
@@ -2,9 +2,9 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef, useCallback, useEffect, useState } from 'react';
|
|
3
3
|
import { Flex, Icon, Text, useI18n, useBreakpoint, MenuButton, SearchInput } from '@pega/cosmos-react-core';
|
|
4
4
|
import { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';
|
|
5
|
-
import { StyledAppHeader, StyledTabs, StyledAppAvator, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer,
|
|
6
|
-
const BrandContainer = ({ name }) => {
|
|
7
|
-
return (_jsxs(StyledBrandContainer, Object.assign({ container: { alignItems: 'center', justify: 'between' } }, { children: [_jsx(StyledIconContainer, { children: _jsx(
|
|
5
|
+
import { StyledAppHeader, StyledTabs, StyledAppAvator, StyledUtilsContainer, StyledBrandContainer, StyledBranchContainer, StyledTitle, StyledBrandButton, StyledIconContainer } from './AppHeader.styles';
|
|
6
|
+
const BrandContainer = ({ name, onClick, href }) => {
|
|
7
|
+
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));
|
|
8
8
|
};
|
|
9
9
|
const Links = ({ links = [] }) => {
|
|
10
10
|
const [currentTabId, setCurrentTabId] = useState(links[0].id || '');
|
|
@@ -18,7 +18,7 @@ const Links = ({ links = [] }) => {
|
|
|
18
18
|
setCurrentTabId(newActiveTab.id);
|
|
19
19
|
}
|
|
20
20
|
}, [links]);
|
|
21
|
-
return
|
|
21
|
+
return _jsx(StyledTabs, { tabs: links, currentTabId: currentTabId, onTabClick: handleTabClick }, void 0);
|
|
22
22
|
};
|
|
23
23
|
const Utils = ({ avatar, search, branchName, actions }) => {
|
|
24
24
|
const t = useI18n();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAOV,WAAW,EACX,SAAS,EACT,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,IAAI,EAEJ,IAAI,EACJ,IAAI,EACJ,OAAO,EACP,aAAa,EAGb,UAAU,EAEV,WAAW,EAEZ,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,yBAAyB,EAAE,MAAM,iEAAiE,CAAC;AAE5G,OAAO,EACL,eAAe,EACf,UAAU,EACV,eAAe,EACf,oBAAoB,EACpB,oBAAoB,EACpB,qBAAqB,EACrB,
|
|
1
|
+
{"version":3,"file":"AppHeader.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n Ref,\n MouseEventHandler,\n MouseEvent,\n FC,\n PropsWithoutRef,\n useCallback,\n useEffect,\n useState\n} from 'react';\n\nimport {\n AvatarProps,\n BaseProps,\n Flex,\n ForwardProps,\n Icon,\n Text,\n useI18n,\n useBreakpoint,\n SearchInputProps,\n MenuItemProps,\n MenuButton,\n Tab,\n SearchInput,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledAppHeaderSearchForm } from '@pega/cosmos-react-core/lib/components/AppShell/AppShell.styles';\n\nimport {\n StyledAppHeader,\n StyledTabs,\n StyledAppAvator,\n StyledUtilsContainer,\n StyledBrandContainer,\n StyledBranchContainer,\n StyledTitle,\n StyledBrandButton,\n StyledIconContainer\n} from './AppHeader.styles';\n\nexport interface AppHeaderProps extends BaseProps, NoChildrenProp {\n brand: BrandProps;\n links?: LinkProps[];\n utils?: UtilsProps;\n ref?: Ref<HTMLDivElement>;\n}\ninterface BrandProps {\n /** The primary text to render in the header. */\n name: string;\n /** URL or DOM id to navigate to. */\n href?: string;\n /** Click handler for the header. */\n onClick?: MouseEventHandler<MouseEvent>;\n}\n\ninterface LinkProps extends Tab {\n onClick?: (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => void;\n}\n\ninterface UtilsProps {\n avatar: AvatarProps;\n search?: SearchInputProps;\n branchName?: string;\n actions?: MenuItemProps['items'];\n}\n\nconst BrandContainer: FC<BrandProps> = ({ name, onClick, href }) => {\n return (\n <StyledBrandContainer\n container={{ alignItems: 'center', justify: 'between' }}\n onClick={onClick}\n href={href}\n forwardedAs={onClick || href ? StyledBrandButton : 'div'}\n >\n <StyledIconContainer container={{ alignItems: 'center', justify: 'center' }}>\n <Icon name='pegasus' />\n </StyledIconContainer>\n <StyledTitle>{name}</StyledTitle>\n </StyledBrandContainer>\n );\n};\n\nconst Links: FC<{ links: AppHeaderProps['links'] }> = ({ links = [] }) => {\n const [currentTabId, setCurrentTabId] = useState(links[0].id || '');\n\n useEffect(() => {\n setCurrentTabId(links[0].id || '');\n }, [links]);\n\n const handleTabClick = useCallback(\n (id: string, event?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n const newActiveTab = links.find(item => item.id === id);\n if (newActiveTab) {\n newActiveTab.onClick?.(id, event);\n setCurrentTabId(newActiveTab.id);\n }\n },\n [links]\n );\n\n return <StyledTabs tabs={links} currentTabId={currentTabId} onTabClick={handleTabClick} />;\n};\n\nconst Utils: FC<UtilsProps> = ({ avatar, search, branchName, actions }: UtilsProps) => {\n const t = useI18n();\n const isMediumOrAbove = useBreakpoint('md');\n\n return (\n <StyledUtilsContainer\n isMediumOrAbove={isMediumOrAbove}\n container={{ alignItems: 'center', justify: 'end' }}\n >\n {search && (\n <StyledAppHeaderSearchForm\n role='search'\n aria-label={search.searchInputAriaLabel}\n onSubmit={e => e.preventDefault()}\n isMediumOrAbove={isMediumOrAbove}\n >\n <SearchInput {...search} />\n </StyledAppHeaderSearchForm>\n )}\n {branchName && (\n <StyledBranchContainer container={{ alignItems: 'center', justify: 'between' }}>\n <Icon name='nodes-right' />\n <Text aria-label={branchName}>{branchName}</Text>\n </StyledBranchContainer>\n )}\n {actions && actions.length > 0 && (\n <MenuButton variant='link' menu={{ items: actions }} text={t('actions')} />\n )}\n <StyledAppAvator {...avatar} />\n </StyledUtilsContainer>\n );\n};\n\nconst AppHeader: FunctionComponent<AppHeaderProps & ForwardProps> = forwardRef(\n ({ brand, utils, links }: PropsWithoutRef<AppHeaderProps>, ref: AppHeaderProps['ref']) => {\n return (\n <Flex as={StyledAppHeader} container={{ justify: 'between' }} ref={ref}>\n <BrandContainer {...brand} />\n {links && links.length > 0 && <Links links={links} />}\n {utils && <Utils {...utils} />}\n </Flex>\n );\n }\n);\n\nexport default AppHeader;\n"]}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
import { Avatar, Flex,
|
|
1
|
+
import { Avatar, Flex, Text, Tabs } from '@pega/cosmos-react-core';
|
|
2
2
|
export declare const StyledAppHeader: import("styled-components").StyledComponent<"header", import("styled-components").DefaultTheme, {}, never>;
|
|
3
3
|
export declare const StyledTitle: typeof Text;
|
|
4
4
|
export declare const StyledBrandContainer: typeof Flex;
|
|
5
5
|
export declare const StyledIconContainer: typeof Flex;
|
|
6
|
-
export declare const
|
|
6
|
+
export declare const StyledBrandButton: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core/lib/components/Button/BareButton").BareButtonProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
7
7
|
export declare const StyledTabs: typeof Tabs;
|
|
8
8
|
export declare const StyledUtilsContainer: typeof Flex;
|
|
9
9
|
export declare const StyledBranchContainer: typeof Flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAoB,IAAI,
|
|
1
|
+
{"version":3,"file":"AppHeader.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAoB,IAAI,EAAc,IAAI,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAGjG,eAAO,MAAM,eAAe,4GAQ1B,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAU/B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAKxC,CAAC;AAIH,eAAO,MAAM,mBAAmB,EAAE,OAAO,IAcvC,CAAC;AAIH,eAAO,MAAM,iBAAiB,0QAM5B,CAAC;AAIH,eAAO,MAAM,UAAU,EAAE,OAAO,IAqB9B,CAAC;AAIH,eAAO,MAAM,oBAAoB,EAAE,OAAO,IAiBzC,CAAC;AAIF,eAAO,MAAM,qBAAqB,EAAE,OAAO,IAYzC,CAAC;AAIH,eAAO,MAAM,eAAe,EAAE,OAAO,MAGpC,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import styled, { css } from 'styled-components';
|
|
2
|
-
import { Avatar, defaultThemeProp, Flex,
|
|
2
|
+
import { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs } from '@pega/cosmos-react-core';
|
|
3
|
+
import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
3
4
|
export const StyledAppHeader = styled.header(({ theme }) => {
|
|
4
5
|
return css `
|
|
5
6
|
height: 3rem;
|
|
@@ -25,6 +26,7 @@ StyledTitle.defaultProps = defaultThemeProp;
|
|
|
25
26
|
export const StyledBrandContainer = styled(Flex)(({ theme }) => {
|
|
26
27
|
return css `
|
|
27
28
|
padding-block: ${theme.base.spacing};
|
|
29
|
+
text-decoration: none;
|
|
28
30
|
`;
|
|
29
31
|
});
|
|
30
32
|
StyledBrandContainer.defaultProps = defaultThemeProp;
|
|
@@ -35,29 +37,31 @@ export const StyledIconContainer = styled(Flex)(({ theme }) => {
|
|
|
35
37
|
height: 2rem;
|
|
36
38
|
position: relative;
|
|
37
39
|
border-radius: calc(0.5 * ${theme.base['border-radius']});
|
|
40
|
+
|
|
41
|
+
${StyledIcon} {
|
|
42
|
+
width: 1.25rem;
|
|
43
|
+
height: 1.25rem;
|
|
44
|
+
color: ${theme.base.palette.light};
|
|
45
|
+
}
|
|
38
46
|
`;
|
|
39
47
|
});
|
|
40
48
|
StyledIconContainer.defaultProps = defaultThemeProp;
|
|
41
|
-
export const
|
|
49
|
+
export const StyledBrandButton = styled(BareButton)(({ theme }) => {
|
|
42
50
|
return css `
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
transform: translate(-50%, -50%);
|
|
47
|
-
width: 1.25rem;
|
|
48
|
-
height: 1.25rem;
|
|
49
|
-
color: ${theme.base.palette.light};
|
|
51
|
+
&:not([disabled]):focus {
|
|
52
|
+
box-shadow: ${theme.base.shadow.focus};
|
|
53
|
+
}
|
|
50
54
|
`;
|
|
51
55
|
});
|
|
52
|
-
|
|
56
|
+
StyledBrandButton.defaultProps = defaultThemeProp;
|
|
53
57
|
export const StyledTabs = styled(Tabs)(({ theme }) => {
|
|
54
58
|
return css `
|
|
55
59
|
margin-inline-start: calc(2 * ${theme.base.spacing});
|
|
56
60
|
margin-inline-end: calc(2 * ${theme.base.spacing});
|
|
57
|
-
height: 100%;
|
|
58
61
|
border: none;
|
|
62
|
+
min-height: 3rem;
|
|
59
63
|
button {
|
|
60
|
-
height:
|
|
64
|
+
height: auto;
|
|
61
65
|
span:first-of-type {
|
|
62
66
|
text-transform: none;
|
|
63
67
|
}
|
|
@@ -75,6 +79,7 @@ export const StyledTabs = styled(Tabs)(({ theme }) => {
|
|
|
75
79
|
StyledTabs.defaultProps = defaultThemeProp;
|
|
76
80
|
export const StyledUtilsContainer = styled(Flex)(({ theme, isMediumOrAbove }) => {
|
|
77
81
|
return css `
|
|
82
|
+
margin-inline-start: auto;
|
|
78
83
|
padding-block: ${theme.base.spacing};
|
|
79
84
|
width: auto;
|
|
80
85
|
min-width: ${isMediumOrAbove ? '32%' : 'auto'};
|
|
@@ -83,6 +88,9 @@ export const StyledUtilsContainer = styled(Flex)(({ theme, isMediumOrAbove }) =>
|
|
|
83
88
|
margin-inline-start: ${theme.base.spacing};
|
|
84
89
|
margin-inline-end: ${theme.base.spacing};
|
|
85
90
|
}
|
|
91
|
+
& > div:last-child {
|
|
92
|
+
margin-inline-end: 0;
|
|
93
|
+
}
|
|
86
94
|
`;
|
|
87
95
|
});
|
|
88
96
|
StyledUtilsContainer.defaultProps = defaultThemeProp;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,MAAM,EAAE,gBAAgB,EAAE,IAAI,EAAE,
|
|
1
|
+
{"version":3,"file":"AppHeader.styles.js","sourceRoot":"","sources":["../../../src/components/AppHeader/AppHeader.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { Avatar, defaultThemeProp, Flex, StyledIcon, Text, Tabs } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nexport const StyledAppHeader = styled.header(({ theme }) => {\n return css`\n height: 3rem;\n padding: 0 calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.colors.gray.light};\n box-shadow: ${theme.base.shadow.low};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledAppHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: 25ch;\n text-overflow: ellipsis;\n overflow: hidden;\n white-space: nowrap;\n color: ${theme.base.palette['foreground-color']};\n font-weight: ${theme.base['font-weight'].bold};\n margin-inline-start: calc(0.75 * ${theme.base.spacing});\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBrandContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n padding-block: ${theme.base.spacing};\n text-decoration: none;\n `;\n});\n\nStyledBrandContainer.defaultProps = defaultThemeProp;\n\nexport const StyledIconContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['brand-primary']};\n width: 2rem;\n height: 2rem;\n position: relative;\n border-radius: calc(0.5 * ${theme.base['border-radius']});\n\n ${StyledIcon} {\n width: 1.25rem;\n height: 1.25rem;\n color: ${theme.base.palette.light};\n }\n `;\n});\n\nStyledIconContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBrandButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBrandButton.defaultProps = defaultThemeProp;\n\nexport const StyledTabs: typeof Tabs = styled(Tabs)(({ theme }) => {\n return css`\n margin-inline-start: calc(2 * ${theme.base.spacing});\n margin-inline-end: calc(2 * ${theme.base.spacing});\n border: none;\n min-height: 3rem;\n button {\n height: auto;\n span:first-of-type {\n text-transform: none;\n }\n }\n button[aria-selected='false'] > span {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n button:hover,\n button:focus,\n button:active {\n box-shadow: none;\n }\n `;\n});\n\nStyledTabs.defaultProps = defaultThemeProp;\n\nexport const StyledUtilsContainer: typeof Flex = styled(Flex)<{ isMediumOrAbove: boolean }>(\n ({ theme, isMediumOrAbove }) => {\n return css`\n margin-inline-start: auto;\n padding-block: ${theme.base.spacing};\n width: auto;\n min-width: ${isMediumOrAbove ? '32%' : 'auto'};\n & > div,\n & > span {\n margin-inline-start: ${theme.base.spacing};\n margin-inline-end: ${theme.base.spacing};\n }\n & > div:last-child {\n margin-inline-end: 0;\n }\n `;\n }\n);\n\nStyledUtilsContainer.defaultProps = defaultThemeProp;\n\nexport const StyledBranchContainer: typeof Flex = styled(Flex)(({ theme }) => {\n return css`\n span {\n white-space: nowrap;\n max-width: 25ch;\n overflow: hidden;\n text-overflow: ellipsis;\n font-weight: ${theme.base['font-weight']['semi-bold']};\n margin-inline-start: calc(0.75 * ${theme.base.spacing});\n margin-inline-end: calc(0.75 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledBranchContainer.defaultProps = defaultThemeProp;\n\nexport const StyledAppAvator: typeof Avatar = styled(Avatar)`\n width: 1.5rem;\n height: 1.5rem;\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qOA+B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,
|
|
1
|
+
{"version":3,"file":"AppShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AA2BA,eAAO,MAAM,eAAe,qOA+B1B,CAAC;AAIH,eAAO,MAAM,YAAY,yGAUvB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAI7B,CAAC;AAIH,eAAO,MAAM,mBAAmB,mOAI9B,CAAC;AAIH,eAAO,MAAM,cAAc,mOAOzB,CAAC;AAIH,eAAO,MAAM,WAAW;iBAA6B,OAAO;SA8B1D,CAAC;AAIH,eAAO,MAAM,cAAc,wGAsBzB,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAO3B,CAAC;AAIH,eAAO,MAAM,gBAAgB,yGAmB3B,CAAC;AAIH,eAAO,MAAM,UAAU,0GAQrB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAO9B,CAAC;AAIH,eAAO,MAAM,qBAAqB;aAAyB,MAAM;SAY/D,CAAC;AAIH,eAAO,MAAM,uBAAuB,qOAYlC,CAAC;AAIH,eAAO,MAAM,cAAc,yGAUzB,CAAC;AAIH,eAAO,MAAM,SAAS,yGAkHpB,CAAC"}
|
|
@@ -62,7 +62,6 @@ export const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {
|
|
|
62
62
|
StyledNavHeaderIcon.defaultProps = defaultThemeProp;
|
|
63
63
|
export const StyledNavTitle = styled(Text)(({ theme }) => {
|
|
64
64
|
return css `
|
|
65
|
-
margin-inline-start: ${theme.base.spacing};
|
|
66
65
|
color: ${theme.base.colors.white};
|
|
67
66
|
text-overflow: ellipsis;
|
|
68
67
|
white-space: nowrap;
|
|
@@ -175,6 +174,7 @@ export const StyledNavHeaderVisual = styled.div(({ theme, bgColor }) => {
|
|
|
175
174
|
min-height: 2rem;
|
|
176
175
|
border-radius: 0.4rem;
|
|
177
176
|
background-color: ${bgColor};
|
|
177
|
+
margin-inline-end: ${theme.base.spacing};
|
|
178
178
|
color: ${theme.base.colors.white};
|
|
179
179
|
& svg {
|
|
180
180
|
color: ${theme.base.colors.white};
|
|
@@ -184,6 +184,7 @@ export const StyledNavHeaderVisual = styled.div(({ theme, bgColor }) => {
|
|
|
184
184
|
StyledNavHeaderVisual.defaultProps = defaultThemeProp;
|
|
185
185
|
export const StyledDrawerCloseButton = styled(Button)(({ theme }) => {
|
|
186
186
|
return css `
|
|
187
|
+
margin-inline-end: ${theme.base.spacing};
|
|
187
188
|
min-width: 1.5rem;
|
|
188
189
|
min-height: 1.5rem;
|
|
189
190
|
color: ${theme.base.colors.white};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,YAAY,EACZ,UAAU,EACV,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,iEAAiE,CAAC;AAEzE,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAO,GAAG,oBAAoB,CAAC;AAErC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;kCAGsB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;aAKvC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;kBACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;;4BAEX,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;MAE1C,UAAU;;;;;uBAKO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QACrC,UAAU;;;;;UAKR,aAAa;sBACD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,GAAG,CAAA;;;qCAGyB,WAAW;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;4BACgB,KAAK,CAAC,IAAI,CAAC,OAAO;GAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;GACjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;2BACe,KAAK,CAAC,IAAI,CAAC,OAAO;aAChC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;GAIjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAA2B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IACzF,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,GAAG,CAAA;2BACe,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;kCACpC,WAAW;MACvC,YAAY;;4BAEU,OAAO;;;QAG3B,WAAW;kCACe,KAAK,CAAC,IAAI,CAAC,OAAO;4BACxB,KAAK,CAAC,IAAI,CAAC,OAAO;;iBAE7B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;uBACtB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;;;wCAIb,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;GAOvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;;;eAQrB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;;MAGrC,gBAAgB;qBACD,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;eAC5C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;iBAIrB,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC9C,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEnD,OAAO,GAAG,CAAA;cACE,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM;;GAEpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE9D,OAAO,GAAG,CAAA;;;;0BAIc,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;MAElF,QAAQ,KAAK,WAAW;QAC1B,GAAG,CAAA;;KAEF;;MAEC,WAAW;QACb,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;;wBAGY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;yBAEnC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;GACpF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACjD,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEnD,OAAO,GAAG,CAAA;;cAEE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;GACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAsB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1F,OAAO,GAAG,CAAA;;;;wBAIY,OAAO;aAClB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;eAErB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAEnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,OAAO,GAAG,CAAA;;;aAGC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;MAE9B,UAAU;;;;GAIb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,OAAO,GAAG,CAAA;;MAEN,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,KAAK,WAAW,CAAC;QACzD,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEpD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;;kBAEzB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;;MAGjE,cAAc;eACL,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;0BACf,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;MAGlF,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;QAChC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;wCA0BiC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB9D;;;QAGG,eAAe;UACb,YAAY;;;;;;;;;;;;;;wBAcE,KAAK,CAAC,IAAI,CAAC,OAAO;;;;MAIpC,kBAAkB;eACT,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;QAE9B,cAAc;uBACC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;QAGrD,qBAAqB;;;8BAGC,OAAO;;;;YAIzB,cAAc;YACd,cAAc;qBACL,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;;;;;;UAOvC,UAAU;6BACS,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;GAE1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Icon,\n Text,\n tryCatch,\n defaultThemeProp,\n Button,\n useDirection,\n StyledIcon,\n StyledTooltip\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n StyledNodeIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block-start: calc(2 * ${theme.base.spacing});\n inset-inline-end: 0;\n min-width: 1.5rem;\n min-height: 1.5rem;\n border: none;\n color: ${theme.base.palette['foreground-color']};\n box-shadow: ${theme.base.shadow.low};\n transition-property: background-color;\n transform: translateX(${ltr ? '50%' : '-50%'});\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n ${StyledIcon} {\n transform: rotateY(180deg);\n }\n }\n\n & + ${StyledTooltip} {\n z-index: calc(${theme.base['z-index'].drawer} + 1);\n }\n `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n width: 100%;\n min-height: 4rem;\n border-bottom: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n return css`\n margin-inline-start: ${theme.base.spacing};\n color: ${theme.base.colors.white};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n border-top: 0.0625rem solid ${borderColor};\n ${StyledSwitch} {\n &:hover {\n background-color: ${hoverBg};\n }\n\n ${SwitchLabel} {\n height: calc(2rem + 4 * ${theme.base.spacing});\n padding: calc(2 * ${theme.base.spacing});\n text-transform: capitalize;\n color: ${theme.base.colors.gray.light};\n font-weight: ${theme.base['font-weight'].bold};\n\n &::before,\n &::after {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n }\n }\n & > ul {\n list-style: none;\n }\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n &:focus,\n &:focus-within {\n color: ${theme.base.colors.blue.light};\n }\n\n ${StyledBareButton} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${theme.base.colors.white};\n width: 100%;\n height: 100%;\n text-align: start;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n const { navExpanded, navState } = useContext(AppShellContext);\n\n return css`\n width: 14rem;\n height: 100%;\n opacity: 0;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n ${navState === 'collapsed' &&\n css`\n display: none;\n `}\n\n ${navExpanded &&\n css`\n opacity: 1;\n `}\n `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n return css`\n position: relative;\n height: calc(100vh - 3rem);\n background-color: ${theme.base.palette['app-background']};\n overflow-y: auto;\n transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n position: relative;\n height: ${drawerOpen ? '100%' : 'auto'};\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n return css`\n min-width: 2rem;\n min-height: 2rem;\n border-radius: 0.4rem;\n background-color: ${bgColor};\n color: ${theme.base.colors.white};\n & svg {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n return css`\n min-width: 1.5rem;\n min-height: 1.5rem;\n color: ${theme.base.colors.white};\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n height: 100%;\n ${(navState === 'collapsing' || navState === 'expanding') &&\n css`\n overflow: hidden;\n `}\n `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n const { navExpanded } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].drawer};\n height: calc(100vh - 3rem);\n background: ${theme.components['app-shell'].nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navExpanded ? '14' : '1.5'}rem;\n transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n ${theme.base['custom-scrollbar'] &&\n css`\n * {\n scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list */\n\n *::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n *::-webkit-scrollbar-corner {\n background-color: rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: inherit;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 * ${theme.base['border-radius']});\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n }\n\n *::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n }\n\n *::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n *::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n *::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n\n /* stylelint-enable unit-allowed-list */\n }\n `}\n\n &:not(:hover) {\n ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n ${hideVisually}\n }\n }\n\n /*\n * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n */\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n width: calc(2 * ${theme.base.spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${theme.base.colors.white};\n\n ${StyledNodeText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${theme.base.colors.blue.light};\n }\n }\n }\n }\n\n /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n & + ${StyledMain} {\n margin-inline-start: ${navExpanded ? '14rem' : '1.5rem'};\n }\n `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
|
|
1
|
+
{"version":3,"file":"AppShell.styles.js","sourceRoot":"","sources":["../../../src/components/AppShell/AppShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EACL,IAAI,EACJ,IAAI,EACJ,QAAQ,EACR,gBAAgB,EAChB,MAAM,EACN,YAAY,EACZ,UAAU,EACV,aAAa,EACd,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,WAAW,EAAE,MAAM,sDAAsD,CAAC;AACjG,OAAO,EAAE,gBAAgB,EAAE,MAAM,0DAA0D,CAAC;AAC5F,OAAO,EACL,cAAc,EACd,cAAc,EACd,qBAAqB,EACrB,kBAAkB,EACnB,MAAM,iEAAiE,CAAC;AAEzE,OAAO,eAAe,MAAM,mBAAmB,CAAC;AAEhD,MAAM,OAAO,GAAG,oBAAoB,CAAC;AAErC,MAAM,CAAC,MAAM,eAAe,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC1D,MAAM,EAAE,GAAG,EAAE,GAAG,YAAY,EAAE,CAAC;IAE/B,OAAO,GAAG,CAAA;;;kCAGsB,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;aAKvC,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,kBAAkB,CAAC;kBACjC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,GAAG;;4BAEX,GAAG,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM;;MAE1C,UAAU;;;;;uBAKO,GAAG,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;QACrC,UAAU;;;;;UAKR,aAAa;sBACD,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;;GAE/C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,eAAe,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEhD,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,GAAG,CAAA;;;qCAGyB,WAAW;GAC7C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE7C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnE,OAAO,GAAG,CAAA;4BACgB,KAAK,CAAC,IAAI,CAAC,OAAO;GAC3C,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC5D,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;GACjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;GAIjC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAA2B,CAAC,EAAE,KAAK,EAAE,WAAW,EAAE,EAAE,EAAE;IACzF,MAAM,WAAW,GAAG,QAAQ,CAAC,GAAG,EAAE,CAChC,OAAO,CAAC,GAAG,EAAE,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC,CAAC,CACpE,CAAC;IAEF,OAAO,GAAG,CAAA;2BACe,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,KAAK,CAAC,IAAI,CAAC,OAAO;kCACpC,WAAW;MACvC,YAAY;;4BAEU,OAAO;;;QAG3B,WAAW;kCACe,KAAK,CAAC,IAAI,CAAC,OAAO;4BACxB,KAAK,CAAC,IAAI,CAAC,OAAO;;iBAE7B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;uBACtB,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI;;;;wCAIb,KAAK,CAAC,IAAI,CAAC,OAAO;;;;;;;GAOvD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,WAAW,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE5C,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACpD,OAAO,GAAG,CAAA;aACC,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;;;;;eAQrB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;;MAGrC,gBAAgB;qBACD,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;eAC5C,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;;;iBAIrB,KAAK,CAAC,IAAI,CAAC,OAAO,aAAa,KAAK,CAAC,IAAI,CAAC,OAAO;;GAE/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC9C,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEnD,OAAO,GAAG,CAAA;cACE,UAAU,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,MAAM;;GAEpD,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACvD,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAE9D,OAAO,GAAG,CAAA;;;;0BAIc,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;MAElF,QAAQ,KAAK,WAAW;QAC1B,GAAG,CAAA;;KAEF;;MAEC,WAAW;QACb,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClD,OAAO,GAAG,CAAA;;;wBAGY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,gBAAgB,CAAC;;yBAEnC,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;GACpF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,UAAU,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE3C,MAAM,CAAC,MAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IACjD,MAAM,EAAE,UAAU,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEnD,OAAO,GAAG,CAAA;;cAEE,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;GACvC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,mBAAmB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEpD,MAAM,CAAC,MAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,CAAsB,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,EAAE,EAAE;IAC1F,OAAO,GAAG,CAAA;;;;wBAIY,OAAO;yBACN,KAAK,CAAC,IAAI,CAAC,OAAO;aAC9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;eAErB,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;GAEnC,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,qBAAqB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEtD,MAAM,CAAC,MAAM,uBAAuB,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAClE,OAAO,GAAG,CAAA;yBACa,KAAK,CAAC,IAAI,CAAC,OAAO;;;aAG9B,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;MAE9B,UAAU;;;;GAIb,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,uBAAuB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAExD,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAC,GAAG,EAAE;IAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEjD,OAAO,GAAG,CAAA;;MAEN,CAAC,QAAQ,KAAK,YAAY,IAAI,QAAQ,KAAK,WAAW,CAAC;QACzD,GAAG,CAAA;;KAEF;GACF,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAChD,MAAM,EAAE,WAAW,EAAE,GAAG,UAAU,CAAC,eAAe,CAAC,CAAC;IAEpD,OAAO,GAAG,CAAA;;eAEG,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC,MAAM;;kBAEzB,KAAK,CAAC,UAAU,CAAC,WAAW,CAAC,CAAC,GAAG,CAAC,kBAAkB,CAAC;;;MAGjE,cAAc;eACL,WAAW,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK;0BACf,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,KAAK,IAAI,KAAK,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI;;;MAGlF,KAAK,CAAC,IAAI,CAAC,kBAAkB,CAAC;QAChC,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;wCA0BiC,KAAK,CAAC,IAAI,CAAC,eAAe,CAAC;;;;;;;;;;;;;;;;;;;;;;;KAuB9D;;;QAGG,eAAe;UACb,YAAY;;;;;;;;;;;;;;wBAcE,KAAK,CAAC,IAAI,CAAC,OAAO;;;;MAIpC,kBAAkB;eACT,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK;;QAE9B,cAAc;uBACC,KAAK,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,WAAW,CAAC;;;QAGrD,qBAAqB;;;8BAGC,OAAO;;;;YAIzB,cAAc;YACd,cAAc;qBACL,KAAK,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,KAAK;;;;;;;UAOvC,UAAU;6BACS,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ;;GAE1D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,SAAS,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\nimport { lighten, hideVisually } from 'polished';\nimport { useContext } from 'react';\n\nimport {\n Icon,\n Text,\n tryCatch,\n defaultThemeProp,\n Button,\n useDirection,\n StyledIcon,\n StyledTooltip\n} from '@pega/cosmos-react-core';\nimport { StyledSwitch, SwitchLabel } from '@pega/cosmos-react-core/lib/components/Switch/Switch';\nimport { StyledBareButton } from '@pega/cosmos-react-core/lib/components/Button/BareButton';\nimport {\n StyledNodeIcon,\n StyledNodeText,\n StyledNodeInteraction,\n StyledStandardTree\n} from '@pega/cosmos-react-core/lib/components/Tree/StandardTree.styles';\n\nimport AppShellContext from './AppShellContext';\n\nconst hoverBg = 'rgba(0, 0, 0, 0.4)';\n\nexport const StyledNavToggle = styled(Button)(({ theme }) => {\n const { ltr } = useDirection();\n\n return css`\n position: absolute;\n z-index: 1;\n inset-block-start: calc(2 * ${theme.base.spacing});\n inset-inline-end: 0;\n min-width: 1.5rem;\n min-height: 1.5rem;\n border: none;\n color: ${theme.base.palette['foreground-color']};\n box-shadow: ${theme.base.shadow.low};\n transition-property: background-color;\n transform: translateX(${ltr ? '50%' : '-50%'});\n\n ${StyledIcon} {\n width: 1.5rem;\n height: 1.5rem;\n }\n\n &[aria-expanded='${ltr ? 'true' : 'false'}'] {\n ${StyledIcon} {\n transform: rotateY(180deg);\n }\n }\n\n & + ${StyledTooltip} {\n z-index: calc(${theme.base['z-index'].drawer} + 1);\n }\n `;\n});\n\nStyledNavToggle.defaultProps = defaultThemeProp;\n\nexport const StyledHeader = styled.div(({ theme }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n width: 100%;\n min-height: 4rem;\n border-bottom: 0.0625rem solid ${borderColor};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerHeader = styled(StyledHeader)(({ theme }) => {\n return css`\n padding-inline-start: ${theme.base.spacing};\n `;\n});\n\nStyledDrawerHeader.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderIcon = styled(Icon)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n `;\n});\n\nStyledNavHeaderIcon.defaultProps = defaultThemeProp;\n\nexport const StyledNavTitle = styled(Text)(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n text-overflow: ellipsis;\n white-space: nowrap;\n overflow-x: hidden;\n `;\n});\n\nStyledNavTitle.defaultProps = defaultThemeProp;\n\nexport const StyledUtils = styled.div<{ showDevMode: boolean }>(({ theme, showDevMode }) => {\n const borderColor = tryCatch(() =>\n lighten(0.1, theme.components['app-shell'].nav['background-color'])\n );\n\n return css`\n padding-bottom: calc(${showDevMode ? 2 : 0} * ${theme.base.spacing});\n border-top: 0.0625rem solid ${borderColor};\n ${StyledSwitch} {\n &:hover {\n background-color: ${hoverBg};\n }\n\n ${SwitchLabel} {\n height: calc(2rem + 4 * ${theme.base.spacing});\n padding: calc(2 * ${theme.base.spacing});\n text-transform: capitalize;\n color: ${theme.base.colors.gray.light};\n font-weight: ${theme.base['font-weight'].bold};\n\n &::before,\n &::after {\n margin-inline-end: calc(2 * ${theme.base.spacing});\n }\n }\n }\n & > ul {\n list-style: none;\n }\n `;\n});\n\nStyledUtils.defaultProps = defaultThemeProp;\n\nexport const StyledUtilItem = styled.li(({ theme }) => {\n return css`\n color: ${theme.base.colors.white};\n\n &:hover {\n background-color: rgba(0, 0, 0, 0.4);\n }\n\n &:focus,\n &:focus-within {\n color: ${theme.base.colors.blue.light};\n }\n\n ${StyledBareButton} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n color: ${theme.base.colors.white};\n width: 100%;\n height: 100%;\n text-align: start;\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n }\n `;\n});\n\nStyledUtilItem.defaultProps = defaultThemeProp;\n\nexport const StyledScrollWrap = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n height: ${drawerOpen ? 'calc(100% - 4rem)' : '100%'};\n overflow-y: auto;\n `;\n});\n\nStyledScrollWrap.defaultProps = defaultThemeProp;\n\nexport const StyledNavContent = styled.div(({ theme }) => {\n const { navExpanded, navState } = useContext(AppShellContext);\n\n return css`\n width: 14rem;\n height: 100%;\n opacity: 0;\n transition: opacity ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n\n ${navState === 'collapsed' &&\n css`\n display: none;\n `}\n\n ${navExpanded &&\n css`\n opacity: 1;\n `}\n `;\n});\n\nStyledNavContent.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main(({ theme }) => {\n return css`\n position: relative;\n height: calc(100vh - 3rem);\n background-color: ${theme.base.palette['app-background']};\n overflow-y: auto;\n transition: margin ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n `;\n});\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerWrapper = styled.div(() => {\n const { drawerOpen } = useContext(AppShellContext);\n\n return css`\n position: relative;\n height: ${drawerOpen ? '100%' : 'auto'};\n `;\n});\n\nStyledDrawerWrapper.defaultProps = defaultThemeProp;\n\nexport const StyledNavHeaderVisual = styled.div<{ bgColor: string }>(({ theme, bgColor }) => {\n return css`\n min-width: 2rem;\n min-height: 2rem;\n border-radius: 0.4rem;\n background-color: ${bgColor};\n margin-inline-end: ${theme.base.spacing};\n color: ${theme.base.colors.white};\n & svg {\n color: ${theme.base.colors.white};\n }\n `;\n});\n\nStyledNavHeaderVisual.defaultProps = defaultThemeProp;\n\nexport const StyledDrawerCloseButton = styled(Button)(({ theme }) => {\n return css`\n margin-inline-end: ${theme.base.spacing};\n min-width: 1.5rem;\n min-height: 1.5rem;\n color: ${theme.base.colors.white};\n\n ${StyledIcon} {\n width: 1em;\n height: 1em;\n }\n `;\n});\n\nStyledDrawerCloseButton.defaultProps = defaultThemeProp;\n\nexport const StyledInnerNav = styled.div(() => {\n const { navState } = useContext(AppShellContext);\n\n return css`\n height: 100%;\n ${(navState === 'collapsing' || navState === 'expanding') &&\n css`\n overflow: hidden;\n `}\n `;\n});\n\nStyledInnerNav.defaultProps = defaultThemeProp;\n\nexport const StyledNav = styled.nav(({ theme }) => {\n const { navExpanded } = useContext(AppShellContext);\n\n return css`\n position: fixed;\n z-index: ${theme.base['z-index'].drawer};\n height: calc(100vh - 3rem);\n background: ${theme.components['app-shell'].nav['background-color']};\n\n &,\n ${StyledInnerNav} {\n width: ${navExpanded ? '14' : '1.5'}rem;\n transition: width ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n }\n\n ${theme.base['custom-scrollbar'] &&\n css`\n * {\n scrollbar-color: rgba(255, 255, 255, 0.6) rgba(0, 0, 0, 0.2);\n scrollbar-width: thin;\n }\n\n @supports not ((scrollbar-width: thin) or (scrollbar-color: black white)) {\n /* stylelint-disable unit-allowed-list */\n\n *::-webkit-scrollbar {\n width: 12px;\n height: 12px;\n }\n\n *::-webkit-scrollbar-track {\n background-color: rgba(0, 0, 0, 0.2);\n }\n\n *::-webkit-scrollbar-corner {\n background-color: rgba(0, 0, 0, 0.2);\n border-bottom-right-radius: inherit;\n }\n\n *::-webkit-scrollbar-thumb {\n background-color: transparent;\n border: 3px solid transparent;\n border-radius: calc(1.125 * ${theme.base['border-radius']});\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.6);\n }\n\n *::-webkit-scrollbar-thumb:hover {\n box-shadow: inset 0 0 2px 4px rgba(255, 255, 255, 0.7);\n }\n\n *::-webkit-scrollbar-track:horizontal {\n border-bottom-left-radius: inherit;\n }\n\n *::-webkit-scrollbar-track:vertical {\n border-top-right-radius: inherit;\n }\n\n /* stylelint-disable-next-line selector-pseudo-class-no-unknown */\n *::-webkit-scrollbar-track:not(:corner-present) {\n border-bottom-right-radius: inherit;\n }\n\n /* stylelint-enable unit-allowed-list */\n }\n `}\n\n &:not(:hover) {\n ${StyledNavToggle}[aria-expanded='true']:not(:focus) {\n ${hideVisually}\n }\n }\n\n /*\n * A hoverable area just outside the nav for easier mouse interaction with the collapse button.\n * As the collpase button straddles the nav boundary, so maybe too should the hoverable area.\n */\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n width: calc(2 * ${theme.base.spacing});\n height: 100%;\n }\n\n ${StyledStandardTree} {\n color: ${theme.base.colors.white};\n\n ${StyledNodeText} {\n font-weight: ${theme.base['font-weight']['semi-bold']};\n }\n\n ${StyledNodeInteraction} {\n &:hover,\n &[aria-current='true'] {\n background-color: ${hoverBg};\n }\n\n &[aria-current='true'] {\n ${StyledNodeIcon},\n ${StyledNodeText} {\n color: ${theme.base.colors.blue.light};\n }\n }\n }\n }\n\n /* Style for main is here since nav(the \"&\") may be conditionally rendered. */\n & + ${StyledMain} {\n margin-inline-start: ${navExpanded ? '14rem' : '1.5rem'};\n }\n `;\n});\n\nStyledNav.defaultProps = defaultThemeProp;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-build",
|
|
3
|
-
"version": "2.0.0-dev.14.
|
|
3
|
+
"version": "2.0.0-dev.14.1",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "2.0.0-dev.14.
|
|
24
|
-
"@pega/cosmos-react-dnd": "2.0.0-dev.14.
|
|
23
|
+
"@pega/cosmos-react-core": "2.0.0-dev.14.1",
|
|
24
|
+
"@pega/cosmos-react-dnd": "2.0.0-dev.14.1",
|
|
25
25
|
"polished": "^4.1.0",
|
|
26
26
|
"react": "^16.14.0 || ^17.0.0",
|
|
27
27
|
"react-dom": "^16.14.0 || ^17.0.0",
|