@pega/cosmos-react-tools 4.0.0-dev.10.1 → 4.0.0-dev.11.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/DevTools/DevTools.d.ts.map +1 -1
- package/lib/components/DevTools/DevTools.js +2 -2
- package/lib/components/DevTools/DevTools.js.map +1 -1
- package/lib/components/DevTools/DevTools.styles.d.ts +1 -1
- package/lib/components/DevTools/DevTools.styles.d.ts.map +1 -1
- package/lib/components/DevTools/DevTools.styles.js +8 -12
- package/lib/components/DevTools/DevTools.styles.js.map +1 -1
- package/lib/components/DevTools/Header.d.ts.map +1 -1
- package/lib/components/DevTools/Header.js +1 -1
- package/lib/components/DevTools/Header.js.map +1 -1
- package/lib/components/PreviewShell/Footer.js +2 -2
- package/lib/components/PreviewShell/Footer.js.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.js +2 -2
- package/lib/components/PreviewShell/PreviewShell.js.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.styles.d.ts +1 -1
- package/lib/components/PreviewShell/PreviewShell.styles.d.ts.map +1 -1
- package/lib/components/PreviewShell/PreviewShell.styles.js +8 -19
- package/lib/components/PreviewShell/PreviewShell.styles.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,
|
|
1
|
+
{"version":3,"file":"DevTools.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAc,eAAe,EAAE,MAAM,OAAO,CAAC;AAExD,OAAO,EAAQ,YAAY,EAA0B,MAAM,yBAAyB,CAAC;AAIrF,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAKjD,QAAA,MAAM,QAAQ,EAAE,EAAE,CAAC,YAAY,GAAG,eAAe,CAAC,aAAa,CAAC,CAqB/D,CAAC;AAEF,eAAe,QAAQ,CAAC"}
|
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
|
-
import { registerIcon, TabPanel } from '@pega/cosmos-react-core';
|
|
3
|
+
import { Flex, registerIcon, TabPanel } from '@pega/cosmos-react-core';
|
|
4
4
|
import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';
|
|
5
5
|
import { StyledDevTools, StyledToolsContent } from './DevTools.styles';
|
|
6
6
|
import Header from './Header';
|
|
7
7
|
registerIcon(bugIcon);
|
|
8
8
|
const DevTools = forwardRef(({ tabs, currentTabId, onTabClick, onContinueDebug, utils }, ref) => {
|
|
9
|
-
return (_jsxs(StyledDevTools, { ref: ref, children: [_jsx(Header, { tabs: tabs, onTabClick: onTabClick, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(StyledToolsContent, { children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, children: tab.content }, tab.id))) })] }));
|
|
9
|
+
return (_jsxs(Flex, { as: StyledDevTools, container: { direction: 'column' }, ref: ref, children: [_jsx(Header, { tabs: tabs, onTabClick: onTabClick, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Flex, { as: StyledToolsContent, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, children: tab.content }, tab.id))) })] }));
|
|
10
10
|
});
|
|
11
11
|
export default DevTools;
|
|
12
12
|
//# sourceMappingURL=DevTools.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DevTools.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAgB,YAAY,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"DevTools.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAAmB,MAAM,OAAO,CAAC;AAExD,OAAO,EAAE,IAAI,EAAgB,YAAY,EAAE,QAAQ,EAAE,MAAM,yBAAyB,CAAC;AACrF,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,cAAc,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAEvE,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,YAAY,CAAC,OAAO,CAAC,CAAC;AAEtB,MAAM,QAAQ,GAAsD,UAAU,CAC5E,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,GAAyB,EAAE,EAAE;IACxF,OAAO,CACL,MAAC,IAAI,IAAC,EAAE,EAAE,cAAc,EAAE,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,EAAE,GAAG,EAAE,GAAG,aACpE,KAAC,MAAM,IACL,IAAI,EAAE,IAAI,EACV,UAAU,EAAE,UAAU,EACtB,eAAe,EAAE,eAAe,EAChC,YAAY,EAAE,YAAY,EAC1B,KAAK,EAAE,KAAK,GACZ,EACF,KAAC,IAAI,IAAC,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,YAC5C,IAAI,CAAC,GAAG,CAAC,GAAG,CAAC,EAAE,CAAC,CACf,KAAC,QAAQ,IAAC,KAAK,EAAE,GAAG,CAAC,EAAE,EAAE,YAAY,EAAE,YAAY,YAChD,GAAG,CAAC,OAAO,IAD4C,GAAG,CAAC,EAAE,CAErD,CACZ,CAAC,GACG,IACF,CACR,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import { FC, forwardRef, PropsWithoutRef } from 'react';\n\nimport { Flex, ForwardProps, registerIcon, TabPanel } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledDevTools, StyledToolsContent } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\nimport Header from './Header';\n\nregisterIcon(bugIcon);\n\nconst DevTools: FC<ForwardProps & PropsWithoutRef<DevToolsProps>> = forwardRef(\n ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }, ref: DevToolsProps['ref']) => {\n return (\n <Flex as={StyledDevTools} container={{ direction: 'column' }} ref={ref}>\n <Header\n tabs={tabs}\n onTabClick={onTabClick}\n onContinueDebug={onContinueDebug}\n currentTabId={currentTabId}\n utils={utils}\n />\n <Flex as={StyledToolsContent} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel tabId={tab.id} currentTabId={currentTabId} key={tab.id}>\n {tab.content}\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n }\n);\n\nexport default DevTools;\n"]}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { DevToolsProps } from './DevTools.types';
|
|
2
2
|
export declare const StyledDevTools: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, Partial<DevToolsProps>, never>;
|
|
3
3
|
export declare const StyledTabContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
4
|
-
export declare const StyledToolsContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme,
|
|
4
|
+
export declare const StyledToolsContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
5
5
|
export declare const StyledIcon: import("styled-components").StyledComponent<import("react").FunctionComponent<import("@pega/cosmos-react-core").IconProps & import("@pega/cosmos-react-core").ForwardProps>, import("styled-components").DefaultTheme, {}, never>;
|
|
6
6
|
//# sourceMappingURL=DevTools.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DevTools.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,cAAc,6HAMzB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAuB9B,CAAC;AAIF,eAAO,MAAM,kBAAkB,
|
|
1
|
+
{"version":3,"file":"DevTools.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAEjD,eAAO,MAAM,cAAc,6HAMzB,CAAC;AAIH,eAAO,MAAM,kBAAkB,yGAuB9B,CAAC;AAIF,eAAO,MAAM,kBAAkB,yGAQ9B,CAAC;AAEF,eAAO,MAAM,UAAU,mOAGtB,CAAC"}
|
|
@@ -29,19 +29,15 @@ export const StyledTabContainer = styled.div(({ theme: { base: { palette } } })
|
|
|
29
29
|
`;
|
|
30
30
|
});
|
|
31
31
|
StyledTabContainer.defaultProps = defaultThemeProp;
|
|
32
|
-
export const StyledToolsContent = styled.div
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
padding: 0;
|
|
36
|
-
overflow: auto;
|
|
37
|
-
background-color: ${palette['primary-background']};
|
|
32
|
+
export const StyledToolsContent = styled.div `
|
|
33
|
+
padding: 0;
|
|
34
|
+
overflow: auto;
|
|
38
35
|
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
StyledToolsContent.defaultProps = defaultThemeProp;
|
|
36
|
+
${StyledTabPanel} {
|
|
37
|
+
width: 100%;
|
|
38
|
+
height: 100%;
|
|
39
|
+
}
|
|
40
|
+
`;
|
|
45
41
|
export const StyledIcon = styled(Icon) `
|
|
46
42
|
height: 100%;
|
|
47
43
|
width: 1.5em;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DevTools.styles.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAI9E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;oCAEsB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;0BAEnC,OAAO,CAAC,oBAAoB,CAAC;;UAE7C,UAAU;;;;;;;;KAQf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,
|
|
1
|
+
{"version":3,"file":"DevTools.styles.js","sourceRoot":"","sources":["../../../src/components/DevTools/DevTools.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,EAAE,cAAc,EAAE,MAAM,sDAAsD,CAAC;AACtF,OAAO,EAAE,UAAU,EAAE,MAAM,kDAAkD,CAAC;AAI9E,MAAM,CAAC,MAAM,cAAc,GAAG,MAAM,CAAC,GAAG,CAAyB,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7E,OAAO,GAAG,CAAA;wBACY,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,oBAAoB,CAAC;;;GAG7D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,cAAc,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAC1C,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,OAAO,EAAE,EAClB,EACF,EAAE,EAAE;IACH,OAAO,GAAG,CAAA;;oCAEsB,OAAO,CAAC,aAAa,CAAC;uCACnB,OAAO,CAAC,aAAa,CAAC;;0BAEnC,OAAO,CAAC,oBAAoB,CAAC;;UAE7C,UAAU;;;;;;;;KAQf,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,kBAAkB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEnD,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;IAIxC,cAAc;;;;CAIjB,CAAC;AAEF,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,CAAA;;;CAGrC,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp, Icon } from '@pega/cosmos-react-core';\nimport { StyledTabPanel } from '@pega/cosmos-react-core/lib/components/Tabs/TabPanel';\nimport { StyledTabs } from '@pega/cosmos-react-core/lib/components/Tabs/Tabs';\n\nimport { DevToolsProps } from './DevTools.types';\n\nexport const StyledDevTools = styled.div<Partial<DevToolsProps>>(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n overflow: hidden;\n height: 100vh;\n `;\n});\n\nStyledDevTools.defaultProps = defaultThemeProp;\n\nexport const StyledTabContainer = styled.div(\n ({\n theme: {\n base: { palette }\n }\n }) => {\n return css`\n height: 2.5rem;\n border-top: 0.0625rem solid ${palette['border-line']};\n border-bottom: 0.0625rem solid ${palette['border-line']};\n text-decoration: none;\n background-color: ${palette['primary-background']};\n\n & ${StyledTabs} {\n height: 100%;\n border-bottom: none;\n\n button {\n height: 100%;\n }\n }\n `;\n }\n);\n\nStyledTabContainer.defaultProps = defaultThemeProp;\n\nexport const StyledToolsContent = styled.div`\n padding: 0;\n overflow: auto;\n\n ${StyledTabPanel} {\n width: 100%;\n height: 100%;\n }\n`;\n\nexport const StyledIcon = styled(Icon)`\n height: 100%;\n width: 1.5em;\n`;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,UAAU,WACR,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,cAAc,GAAG,YAAY,GAAG,iBAAiB,CAAC;IACvF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAMtC,OAAO,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC;AAIjD,UAAU,WACR,SAAQ,IAAI,CAAC,aAAa,EAAE,MAAM,GAAG,cAAc,GAAG,YAAY,GAAG,iBAAiB,CAAC;IACvF,KAAK,CAAC,EAAE,SAAS,CAAC;CACnB;AAED,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,WAAW,CAiC3B,CAAC;AACF,eAAe,MAAM,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { StyledTabContainer, StyledIcon } from './DevTools.styles';
|
|
|
5
5
|
registerIcon(bugIcon);
|
|
6
6
|
const Header = ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }) => {
|
|
7
7
|
const t = useI18n();
|
|
8
|
-
return (_jsxs(Flex, { as: StyledTabContainer, container: { justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }, children: [_jsx(Flex, { container: { pad: [0, 1], alignItems: 'center' }, children: _jsx(StyledIcon, { name: 'bug' }) }), onContinueDebug ? (_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { variant: 'secondary', children: t('active_session_info') }), _jsx(Button, { variant: 'link', onClick: onContinueDebug, children: t('continue_debugging') })] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { grow: 1 }, as: Tabs, tabs: tabs, currentTabId: currentTabId, onTabClick: onTabClick }), utils] }))] }));
|
|
8
|
+
return (_jsxs(Flex, { as: StyledTabContainer, item: { shrink: 0 }, container: { justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }, children: [_jsx(Flex, { container: { pad: [0, 1], alignItems: 'center' }, children: _jsx(StyledIcon, { name: 'bug' }) }), onContinueDebug ? (_jsxs(Flex, { container: { gap: 1 }, children: [_jsx(Text, { variant: 'secondary', children: t('active_session_info') }), _jsx(Button, { variant: 'link', onClick: onContinueDebug, children: t('continue_debugging') })] })) : (_jsxs(_Fragment, { children: [_jsx(Flex, { item: { grow: 1 }, as: Tabs, tabs: tabs, currentTabId: currentTabId, onTabClick: onTabClick }), utils] }))] }));
|
|
9
9
|
};
|
|
10
10
|
export default Header;
|
|
11
11
|
//# sourceMappingURL=Header.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGnE,YAAY,CAAC,OAAO,CAAC,CAAC;AAOtB,MAAM,MAAM,GAAoB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,SAAS,EAAE,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAEnF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,YACpD,KAAC,UAAU,IAAC,IAAI,EAAC,KAAK,GAAG,GACpB,EACN,eAAe,CAAC,CAAC,CAAC,CACjB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACzB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,qBAAqB,CAAC,GAAQ,EAC3D,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,eAAe,YAC5C,CAAC,CAAC,oBAAoB,CAAC,GACjB,IACJ,CACR,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,EACD,KAAK,IACL,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\n\nimport { Flex, Button, Tabs, Text, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledTabContainer, StyledIcon } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\n\nregisterIcon(bugIcon);\n\ninterface HeaderProps\n extends Pick<DevToolsProps, 'tabs' | 'currentTabId' | 'onTabClick' | 'onContinueDebug'> {\n utils?: ReactNode;\n}\n\nconst Header: FC<HeaderProps> = ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }) => {\n const t = useI18n();\n\n return (\n <Flex\n as={StyledTabContainer}\n container={{ justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }}\n >\n <Flex container={{ pad: [0, 1], alignItems: 'center' }}>\n <StyledIcon name='bug' />\n </Flex>\n {onContinueDebug ? (\n <Flex container={{ gap: 1 }}>\n <Text variant='secondary'>{t('active_session_info')}</Text>\n <Button variant='link' onClick={onContinueDebug}>\n {t('continue_debugging')}\n </Button>\n </Flex>\n ) : (\n <>\n <Flex\n item={{ grow: 1 }}\n as={Tabs}\n tabs={tabs}\n currentTabId={currentTabId}\n onTabClick={onTabClick}\n />\n {utils}\n </>\n )}\n </Flex>\n );\n};\nexport default Header;\n"]}
|
|
1
|
+
{"version":3,"file":"Header.js","sourceRoot":"","sources":["../../../src/components/DevTools/Header.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,IAAI,EAAE,YAAY,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAC1F,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,EAAE,kBAAkB,EAAE,UAAU,EAAE,MAAM,mBAAmB,CAAC;AAGnE,YAAY,CAAC,OAAO,CAAC,CAAC;AAOtB,MAAM,MAAM,GAAoB,CAAC,EAAE,IAAI,EAAE,YAAY,EAAE,UAAU,EAAE,eAAe,EAAE,KAAK,EAAE,EAAE,EAAE;IAC7F,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,OAAO,CACL,MAAC,IAAI,IACH,EAAE,EAAE,kBAAkB,EACtB,IAAI,EAAE,EAAE,MAAM,EAAE,CAAC,EAAE,EACnB,SAAS,EAAE,EAAE,OAAO,EAAE,eAAe,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,EAAE,UAAU,EAAE,QAAQ,EAAE,aAEnF,KAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,EAAE,UAAU,EAAE,QAAQ,EAAE,YACpD,KAAC,UAAU,IAAC,IAAI,EAAC,KAAK,GAAG,GACpB,EACN,eAAe,CAAC,CAAC,CAAC,CACjB,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,GAAG,EAAE,CAAC,EAAE,aACzB,KAAC,IAAI,IAAC,OAAO,EAAC,WAAW,YAAE,CAAC,CAAC,qBAAqB,CAAC,GAAQ,EAC3D,KAAC,MAAM,IAAC,OAAO,EAAC,MAAM,EAAC,OAAO,EAAE,eAAe,YAC5C,CAAC,CAAC,oBAAoB,CAAC,GACjB,IACJ,CACR,CAAC,CAAC,CAAC,CACF,8BACE,KAAC,IAAI,IACH,IAAI,EAAE,EAAE,IAAI,EAAE,CAAC,EAAE,EACjB,EAAE,EAAE,IAAI,EACR,IAAI,EAAE,IAAI,EACV,YAAY,EAAE,YAAY,EAC1B,UAAU,EAAE,UAAU,GACtB,EACD,KAAK,IACL,CACJ,IACI,CACR,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["import { FC, ReactNode } from 'react';\n\nimport { Flex, Button, Tabs, Text, registerIcon, useI18n } from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport { StyledTabContainer, StyledIcon } from './DevTools.styles';\nimport { DevToolsProps } from './DevTools.types';\n\nregisterIcon(bugIcon);\n\ninterface HeaderProps\n extends Pick<DevToolsProps, 'tabs' | 'currentTabId' | 'onTabClick' | 'onContinueDebug'> {\n utils?: ReactNode;\n}\n\nconst Header: FC<HeaderProps> = ({ tabs, currentTabId, onTabClick, onContinueDebug, utils }) => {\n const t = useI18n();\n\n return (\n <Flex\n as={StyledTabContainer}\n item={{ shrink: 0 }}\n container={{ justify: onContinueDebug ? 'start' : 'between', alignItems: 'center' }}\n >\n <Flex container={{ pad: [0, 1], alignItems: 'center' }}>\n <StyledIcon name='bug' />\n </Flex>\n {onContinueDebug ? (\n <Flex container={{ gap: 1 }}>\n <Text variant='secondary'>{t('active_session_info')}</Text>\n <Button variant='link' onClick={onContinueDebug}>\n {t('continue_debugging')}\n </Button>\n </Flex>\n ) : (\n <>\n <Flex\n item={{ grow: 1 }}\n as={Tabs}\n tabs={tabs}\n currentTabId={currentTabId}\n onTabClick={onTabClick}\n />\n {utils}\n </>\n )}\n </Flex>\n );\n};\nexport default Header;\n"]}
|
|
@@ -5,7 +5,7 @@ import * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.
|
|
|
5
5
|
import Header from '../DevTools/Header';
|
|
6
6
|
import { StyledToolsContent } from '../DevTools/DevTools.styles';
|
|
7
7
|
import PreviewShellContext from './PreviewShellContext';
|
|
8
|
-
import {
|
|
8
|
+
import { StyledFooterContent } from './PreviewShell.styles';
|
|
9
9
|
registerIcon(bugIcon);
|
|
10
10
|
const Footer = forwardRef(({ tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu }, ref) => {
|
|
11
11
|
const { footerExpanded, toggleFooter } = useContext(PreviewShellContext);
|
|
@@ -34,7 +34,7 @@ const Footer = forwardRef(({ tabs, currentTabId, onTabClick, onNewWindowClick, o
|
|
|
34
34
|
footerExpanded,
|
|
35
35
|
toggleFooter
|
|
36
36
|
]);
|
|
37
|
-
return (_jsxs(
|
|
37
|
+
return (_jsxs(Flex, { as: StyledFooterContent, container: { direction: 'column' }, children: [_jsx(Header, { tabs: tabs, onTabClick: handleTabChange, onContinueDebug: onContinueDebug, currentTabId: currentTabId, utils: utils }), _jsx(Flex, { as: StyledToolsContent, ref: ref, container: { pad: [1, 2] }, item: { grow: 1 }, children: tabs.map(tab => (_jsx(TabPanel, { tabId: tab.id, currentTabId: currentTabId, current: currentTabId && tab.id ? currentTabId === tab.id : true, children: tab.content }, tab.id))) })] }));
|
|
38
38
|
});
|
|
39
39
|
export default Footer;
|
|
40
40
|
//# sourceMappingURL=Footer.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,UAAU,EAA+B,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAEzF,OAAO,EACL,IAAI,EAEJ,MAAM,EACN,IAAI,EACJ,UAAU,EACV,OAAO,EACP,YAAY,EACZ,QAAQ,EACT,MAAM,yBAAyB,CAAC;AACjC,OAAO,KAAK,OAAO,MAAM,4DAA4D,CAAC;AAEtF,OAAO,MAAM,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAEjE,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AAExD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"Footer.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/Footer.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FC, forwardRef, MouseEvent, PropsWithoutRef, useContext, useMemo } from 'react';\n\nimport {\n Flex,\n ForwardProps,\n Button,\n Icon,\n MenuButton,\n useI18n,\n registerIcon,\n TabPanel\n} from '@pega/cosmos-react-core';\nimport * as bugIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/bug.icon';\n\nimport Header from '../DevTools/Header';\nimport { StyledToolsContent } from '../DevTools/DevTools.styles';\n\nimport PreviewShellContext from './PreviewShellContext';\nimport { FooterProps } from './PreviewShell.types';\nimport { StyledFooterContent } from './PreviewShell.styles';\n\nregisterIcon(bugIcon);\n\nconst Footer: FC<ForwardProps & PropsWithoutRef<FooterProps>> = forwardRef(\n (\n { tabs, currentTabId, onTabClick, onNewWindowClick, onContinueDebug, menu },\n ref: FooterProps['ref']\n ) => {\n const { footerExpanded, toggleFooter } = useContext(PreviewShellContext);\n const t = useI18n();\n\n const toggleButtonLabel = t(footerExpanded ? 'collapse' : 'expand');\n const toggleButtonA11y = t(footerExpanded ? 'collapse_noun' : 'expand_noun', [t('dev_tools')]);\n\n const handleTabChange = (id: string, e?: MouseEvent<HTMLButtonElement | HTMLAnchorElement>) => {\n if (!footerExpanded) {\n toggleFooter(true);\n }\n onTabClick(id, e);\n };\n\n const utils = useMemo(() => {\n return (\n <Flex container={{ alignItems: 'center', pad: [0, 2] }}>\n {menu && (\n <MenuButton\n text={t('more_options')}\n variant='simple'\n icon='more'\n iconOnly\n menu={menu}\n />\n )}\n {onNewWindowClick && (\n <Button\n variant='simple'\n label={t('open_in_new_window_text')}\n icon\n onClick={(e: MouseEvent<HTMLButtonElement>) => {\n if (footerExpanded) {\n toggleFooter(prev => !prev);\n }\n onNewWindowClick(e);\n }}\n >\n <Icon name='open' />\n </Button>\n )}\n <Button\n variant='simple'\n icon\n aria-expanded={footerExpanded}\n label={toggleButtonLabel}\n aria-label={toggleButtonA11y}\n onClick={() => toggleFooter(prev => !prev)}\n >\n <Icon name={footerExpanded ? 'caret-down' : 'caret-up'} />\n </Button>\n </Flex>\n );\n }, [\n t,\n toggleButtonLabel,\n toggleButtonA11y,\n menu,\n onNewWindowClick,\n footerExpanded,\n toggleFooter\n ]);\n\n return (\n <Flex as={StyledFooterContent} container={{ direction: 'column' }}>\n <Header\n tabs={tabs}\n onTabClick={handleTabChange}\n onContinueDebug={onContinueDebug}\n currentTabId={currentTabId}\n utils={utils}\n />\n <Flex as={StyledToolsContent} ref={ref} container={{ pad: [1, 2] }} item={{ grow: 1 }}>\n {tabs.map(tab => (\n <TabPanel\n tabId={tab.id}\n currentTabId={currentTabId}\n current={currentTabId && tab.id ? currentTabId === tab.id : true}\n key={tab.id}\n >\n {tab.content}\n </TabPanel>\n ))}\n </Flex>\n </Flex>\n );\n }\n);\nexport default Footer;\n"]}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { forwardRef, useEffect, useMemo, useState } from 'react';
|
|
3
3
|
import { useI18n, SkipLinks, ExpandCollapse } from '@pega/cosmos-react-core';
|
|
4
|
-
import { StyledMain, StyledPreviewContainer,
|
|
4
|
+
import { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell.styles';
|
|
5
5
|
import Header from './Header';
|
|
6
6
|
import PreviewShellContext from './PreviewShellContext';
|
|
7
7
|
import Footer from './Footer';
|
|
@@ -35,7 +35,7 @@ const PreviewShell = forwardRef(({ header, children, footer }, ref) => {
|
|
|
35
35
|
return (_jsxs(PreviewShellContext.Provider, { value: useMemo(() => ({
|
|
36
36
|
footerExpanded: expanded,
|
|
37
37
|
toggleFooter: setExpanded
|
|
38
|
-
}), [expanded]), children: [_jsx(SkipLinks, { items: skipLinks }), header && _jsx(Header, { ...header }), _jsx(StyledMain, { ref: ref, footer: !!footer, header: !!header, children: _jsx(StyledPreviewContainer, { tabIndex: 0, "aria-label": t('preview_frame'), children: children }) }), _jsx(ExpandCollapse, { min: footer ? '2.5rem' : '0rem', max: '50vh', collapsed: !expanded,
|
|
38
|
+
}), [expanded]), children: [_jsx(SkipLinks, { items: skipLinks }), header && _jsx(Header, { ...header }), _jsx(StyledMain, { ref: ref, footer: !!footer, header: !!header, children: _jsx(StyledPreviewContainer, { tabIndex: 0, "aria-label": t('preview_frame'), children: children }) }), _jsx(ExpandCollapse, { as: StyledFooter, min: footer ? '2.5rem' : '0rem', max: '50vh', collapsed: !expanded, children: footer && _jsx(Footer, { ...footer, expanded: true }) })] }));
|
|
39
39
|
});
|
|
40
40
|
export default PreviewShell;
|
|
41
41
|
//# sourceMappingURL=PreviewShell.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,OAAO,EAEP,SAAS,EACT,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,
|
|
1
|
+
{"version":3,"file":"PreviewShell.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,UAAU,EAGV,SAAS,EACT,OAAO,EACP,QAAQ,EACT,MAAM,OAAO,CAAC;AAEf,OAAO,EAEL,OAAO,EAEP,SAAS,EACT,cAAc,EACf,MAAM,yBAAyB,CAAC;AAEjC,OAAO,EAAE,UAAU,EAAE,sBAAsB,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AACzF,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,OAAO,mBAAmB,MAAM,uBAAuB,CAAC;AACxD,OAAO,MAAM,MAAM,UAAU,CAAC;AAE9B,MAAM,YAAY,GAAwD,UAAU,CAClF,CACE,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,EAAsC,EAChE,GAA6B,EAC7B,EAAE;IACF,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAC7D,MAAM,CAAC,GAAG,OAAO,EAAE,CAAC;IAEpB,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,CAAC,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC;IAClC,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,SAAS,GAA4B,OAAO,CAAC,GAAG,EAAE;QACtD,MAAM,cAAc,GAAG;YACrB;gBACE,KAAK,EAAE,CAAC,CAAC,oBAAoB,CAAC;gBAC9B,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,cAAc,CAAC;oBAC5B,QAAQ,EAAE,MAAM;iBACjB;aACF;SACF,CAAC;QAEF,IAAI,MAAM,EAAE;YACV,cAAc,CAAC,IAAI,CAAC;gBAClB,KAAK,EAAE,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC;gBACxC,MAAM,EAAE;oBACN,SAAS,EAAE,CAAC,CAAC,WAAW,CAAC;oBACzB,QAAQ,EAAE,QAAQ;iBACnB;aACF,CAAC,CAAC;SACJ;QACD,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,CAAC,EAAE,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE1B,OAAO,CACL,MAAC,mBAAmB,CAAC,QAAQ,IAC3B,KAAK,EAAE,OAAO,CACZ,GAAG,EAAE,CAAC,CAAC;YACL,cAAc,EAAE,QAAQ;YACxB,YAAY,EAAE,WAAW;SAC1B,CAAC,EACF,CAAC,QAAQ,CAAC,CACX,aAED,KAAC,SAAS,IAAC,KAAK,EAAE,SAAS,GAAI,EAC9B,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,GAAI,EACjC,KAAC,UAAU,IAAC,GAAG,EAAE,GAAG,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,EAAE,MAAM,EAAE,CAAC,CAAC,MAAM,YACtD,KAAC,sBAAsB,IAAC,QAAQ,EAAE,CAAC,gBAAc,CAAC,CAAC,eAAe,CAAC,YAChE,QAAQ,GACc,GACd,EACb,KAAC,cAAc,IACb,EAAE,EAAE,YAAY,EAChB,GAAG,EAAE,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,EAC/B,GAAG,EAAC,MAAM,EACV,SAAS,EAAE,CAAC,QAAQ,YAEnB,MAAM,IAAI,KAAC,MAAM,OAAK,MAAM,EAAE,QAAQ,SAAG,GAC3B,IACY,CAChC,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import {\n forwardRef,\n PropsWithoutRef,\n FunctionComponent,\n useEffect,\n useMemo,\n useState\n} from 'react';\n\nimport {\n ForwardProps,\n useI18n,\n SkipLinksProps,\n SkipLinks,\n ExpandCollapse\n} from '@pega/cosmos-react-core';\n\nimport { StyledMain, StyledPreviewContainer, StyledFooter } from './PreviewShell.styles';\nimport Header from './Header';\nimport { PreviewShellProps } from './PreviewShell.types';\nimport PreviewShellContext from './PreviewShellContext';\nimport Footer from './Footer';\n\nconst PreviewShell: FunctionComponent<PreviewShellProps & ForwardProps> = forwardRef(\n (\n { header, children, footer }: PropsWithoutRef<PreviewShellProps>,\n ref: PreviewShellProps['ref']\n ) => {\n const [expanded, setExpanded] = useState(!!footer?.expanded);\n const t = useI18n();\n\n useEffect(() => {\n setExpanded(!!footer?.expanded);\n }, [footer?.expanded]);\n\n const skipLinks: SkipLinksProps['items'] = useMemo(() => {\n const skipLinksItems = [\n {\n label: t('go_to_main_content'),\n target: {\n ariaLabel: t('main_content'),\n selector: 'main'\n }\n }\n ];\n\n if (footer) {\n skipLinksItems.push({\n label: t('go_to_noun', [t('dev_tools')]),\n target: {\n ariaLabel: t('dev_tools'),\n selector: 'footer'\n }\n });\n }\n return skipLinksItems;\n }, [t, header?.channels]);\n\n return (\n <PreviewShellContext.Provider\n value={useMemo(\n () => ({\n footerExpanded: expanded,\n toggleFooter: setExpanded\n }),\n [expanded]\n )}\n >\n <SkipLinks items={skipLinks} />\n {header && <Header {...header} />}\n <StyledMain ref={ref} footer={!!footer} header={!!header}>\n <StyledPreviewContainer tabIndex={0} aria-label={t('preview_frame')}>\n {children}\n </StyledPreviewContainer>\n </StyledMain>\n <ExpandCollapse\n as={StyledFooter}\n min={footer ? '2.5rem' : '0rem'}\n max='50vh'\n collapsed={!expanded}\n >\n {footer && <Footer {...footer} expanded />}\n </ExpandCollapse>\n </PreviewShellContext.Provider>\n );\n }\n);\n\nexport default PreviewShell;\n"]}
|
|
@@ -9,5 +9,5 @@ export declare const StyledMain: import("styled-components").StyledComponent<"ma
|
|
|
9
9
|
}, never>;
|
|
10
10
|
export declare const StyledPreviewContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
11
11
|
export declare const StyledFooter: import("styled-components").StyledComponent<"footer", import("styled-components").DefaultTheme, {}, never>;
|
|
12
|
-
export declare const
|
|
12
|
+
export declare const StyledFooterContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
|
|
13
13
|
//# sourceMappingURL=PreviewShell.styles.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"PreviewShell.styles.d.ts","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoB,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAQjE,eAAO,MAAM,YAAY,4GAOvB,CAAC;AAIH,eAAO,MAAM,WAAW,EAAE,OAAO,IAS/B,CAAC;AAIH,eAAO,MAAM,gBAAgB,0QAM3B,CAAC;AAIH,eAAO,MAAM,cAAc,4GAQ1B,CAAC;AAIF,eAAO,MAAM,UAAU;YAAyB,OAAO;YAAU,OAAO;SAkBvE,CAAC;AAIF,eAAO,MAAM,sBAAsB,yGAejC,CAAC;AAIH,eAAO,MAAM,YAAY,4GAIvB,CAAC;AAIH,eAAO,MAAM,mBAAmB,yGAG/B,CAAC"}
|
|
@@ -2,7 +2,6 @@ import styled, { css } from 'styled-components';
|
|
|
2
2
|
import { useContext } from 'react';
|
|
3
3
|
import { defaultThemeProp, Text } from '@pega/cosmos-react-core';
|
|
4
4
|
import BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';
|
|
5
|
-
import { StyledToolsContent } from '../DevTools/DevTools.styles';
|
|
6
5
|
import PreviewShellContext from './PreviewShellContext';
|
|
7
6
|
const footerExpandedHeight = '50vh';
|
|
8
7
|
const footerCollapsedHeight = '2.5rem';
|
|
@@ -76,25 +75,15 @@ export const StyledPreviewContainer = styled.div(({ theme }) => {
|
|
|
76
75
|
`;
|
|
77
76
|
});
|
|
78
77
|
StyledPreviewContainer.defaultProps = defaultThemeProp;
|
|
79
|
-
export const StyledFooter = styled.footer(({ theme
|
|
78
|
+
export const StyledFooter = styled.footer(({ theme }) => {
|
|
80
79
|
return css `
|
|
81
|
-
|
|
82
|
-
overflow: hidden;
|
|
83
|
-
height: auto;
|
|
84
|
-
|
|
85
|
-
${StyledToolsContent} {
|
|
86
|
-
height: calc(${footerExpandedHeight} - ${footerCollapsedHeight});
|
|
87
|
-
transition: height ${animation.speed} ${animation.timing.ease};
|
|
88
|
-
}
|
|
89
|
-
`;
|
|
90
|
-
});
|
|
91
|
-
StyledFooter.defaultProps = defaultThemeProp;
|
|
92
|
-
export const StyledFooterWrapper = styled.div(({ theme }) => {
|
|
93
|
-
return css `
|
|
94
|
-
height: 100%;
|
|
95
|
-
width: 100%;
|
|
96
|
-
background: ${theme.base.palette['primary-background']};
|
|
80
|
+
background-color: ${theme.base.palette['primary-background']};
|
|
97
81
|
`;
|
|
98
82
|
});
|
|
99
|
-
|
|
83
|
+
StyledFooter.defaultProps = defaultThemeProp;
|
|
84
|
+
export const StyledFooterContent = styled.div `
|
|
85
|
+
height: 100%;
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
`;
|
|
88
|
+
StyledFooterContent.defaultProps = defaultThemeProp;
|
|
100
89
|
//# sourceMappingURL=PreviewShell.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAEnC,OAAO,EAAE,gBAAgB,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AACjE,OAAO,UAAU,MAAM,0DAA0D,CAAC;AAElF,OAAO,
|
|
1
|
+
{"version":3,"file":"PreviewShell.styles.js","sourceRoot":"","sources":["../../../src/components/PreviewShell/PreviewShell.styles.ts"],"names":[],"mappings":"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","sourcesContent":["import styled, { css } from 'styled-components';\nimport { useContext } from 'react';\n\nimport { defaultThemeProp, Text } from '@pega/cosmos-react-core';\nimport BareButton from '@pega/cosmos-react-core/lib/components/Button/BareButton';\n\nimport PreviewShellContext from './PreviewShellContext';\n\nconst footerExpandedHeight = '50vh';\nconst footerCollapsedHeight = '2.5rem';\n\nexport const StyledHeader = 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.palette['border-line']};\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledHeader.defaultProps = defaultThemeProp;\n\nexport const StyledTitle: typeof Text = styled(Text)(({ theme }) => {\n return css`\n max-width: ${theme.base['content-width'].xs};\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']['semi-bold']};\n `;\n});\n\nStyledTitle.defaultProps = defaultThemeProp;\n\nexport const StyledBareButton = styled(BareButton)(({ theme }) => {\n return css`\n &:not([disabled]):focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `;\n});\n\nStyledBareButton.defaultProps = defaultThemeProp;\n\nexport const StyledOperator = styled.button(\n ({ theme }) => css`\n border-radius: 50%;\n\n :focus {\n box-shadow: ${theme.base.shadow.focus};\n }\n `\n);\n\nStyledOperator.defaultProps = defaultThemeProp;\n\nexport const StyledMain = styled.main<{ header: boolean; footer: boolean }>(\n ({ theme, header, footer }) => {\n const { footerExpanded } = useContext(PreviewShellContext);\n const footerHeight = footerExpanded ? footerExpandedHeight : footerCollapsedHeight;\n\n return css`\n height: calc(100vh - ${footer ? footerHeight : '0rem'} - ${header ? '3rem' : '0rem'});\n transition: height ${theme.base.animation.speed} ${theme.base.animation.timing.ease};\n width: 100%;\n background-color: ${theme.base.colors.slate.medium};\n overflow: hidden;\n\n ${header &&\n css`\n padding: calc(2 * ${theme.base.spacing});\n `}\n `;\n }\n);\n\nStyledMain.defaultProps = defaultThemeProp;\n\nexport const StyledPreviewContainer = styled.div(({ theme }) => {\n return css`\n height: 100%;\n width: 100%;\n &:focus,\n &:focus-visible {\n box-shadow: ${theme.base.shadow.focus};\n outline: none;\n }\n > iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n `;\n});\n\nStyledPreviewContainer.defaultProps = defaultThemeProp;\n\nexport const StyledFooter = styled.footer(({ theme }) => {\n return css`\n background-color: ${theme.base.palette['primary-background']};\n `;\n});\n\nStyledFooter.defaultProps = defaultThemeProp;\n\nexport const StyledFooterContent = styled.div`\n height: 100%;\n overflow: hidden;\n`;\n\nStyledFooterContent.defaultProps = defaultThemeProp;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-tools",
|
|
3
|
-
"version": "4.0.0-dev.
|
|
3
|
+
"version": "4.0.0-dev.11.1",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.0.0-dev.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.11.1",
|
|
24
24
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
25
25
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
26
26
|
"@types/styled-components": "^5.1.26",
|