@entur/layout 3.4.1-next.1 → 3.4.2
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/dist/beta/cjs/templates/Sidebar.cjs +1 -1
- package/dist/beta/cjs/templates/Sidebar.cjs.map +1 -1
- package/dist/beta/cjs/templates/index.cjs.map +1 -1
- package/dist/beta/cjs/templates/portal/Portal.cjs +22 -1
- package/dist/beta/cjs/templates/portal/Portal.cjs.map +1 -1
- package/dist/beta/esm/templates/Sidebar.mjs +1 -1
- package/dist/beta/esm/templates/Sidebar.mjs.map +1 -1
- package/dist/beta/esm/templates/index.mjs.map +1 -1
- package/dist/beta/esm/templates/portal/Portal.mjs +22 -1
- package/dist/beta/esm/templates/portal/Portal.mjs.map +1 -1
- package/dist/beta/styles/index.css +13 -0
- package/dist/beta/types/index.d.ts +1 -1
- package/dist/beta/types/templates/index.d.ts +2 -2
- package/dist/beta/types/templates/portal/Portal.d.ts +11 -0
- package/dist/beta/types/templates/portal/index.d.ts +1 -1
- package/package.json +5 -5
|
@@ -70,7 +70,7 @@ const SidebarRoot = React.forwardRef(
|
|
|
70
70
|
...rest
|
|
71
71
|
}, ref) => {
|
|
72
72
|
const WrapperElement = contrast ? Contrast.Contrast : "div";
|
|
73
|
-
return /* @__PURE__ */ jsxRuntime.jsx(index.GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2",
|
|
73
|
+
return /* @__PURE__ */ jsxRuntime.jsx(index.GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
74
74
|
index$1.FlexComponent,
|
|
75
75
|
{
|
|
76
76
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n /** Toggle contrast styling for the sidebar */\n contrast?: boolean;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarUser = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarData = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarNavigation = React.forwardRef(\n <E extends React.ElementType = typeof defaultNavigationElement>(\n { children, className, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultNavigationElement;\n return (\n <Element\n ref={ref}\n className={classNames(\n 'eds-layout-template-sidebar__navigation',\n className,\n )}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarFooter = React.forwardRef(\n <E extends React.ElementType = typeof defaultFooterElement>(\n { children, className, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultFooterElement;\n return (\n <Element\n ref={ref}\n className={classNames('eds-layout-template-sidebar__footer', className)}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarRoot = React.forwardRef(\n <E extends React.ElementType = typeof defaultSidebarElement>(\n {\n children,\n className,\n style,\n contrast = true,\n as,\n ...rest\n }: SidebarProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const WrapperElement = contrast ? Contrast : 'div';\n return (\n <Grid.Item as={WrapperElement} colSpan=\"1 / 2\"
|
|
1
|
+
{"version":3,"file":"Sidebar.cjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n /** Toggle contrast styling for the sidebar */\n contrast?: boolean;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarUser = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarData = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarNavigation = React.forwardRef(\n <E extends React.ElementType = typeof defaultNavigationElement>(\n { children, className, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultNavigationElement;\n return (\n <Element\n ref={ref}\n className={classNames(\n 'eds-layout-template-sidebar__navigation',\n className,\n )}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarFooter = React.forwardRef(\n <E extends React.ElementType = typeof defaultFooterElement>(\n { children, className, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultFooterElement;\n return (\n <Element\n ref={ref}\n className={classNames('eds-layout-template-sidebar__footer', className)}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarRoot = React.forwardRef(\n <E extends React.ElementType = typeof defaultSidebarElement>(\n {\n children,\n className,\n style,\n contrast = true,\n as,\n ...rest\n }: SidebarProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const WrapperElement = contrast ? Contrast : 'div';\n return (\n <Grid.Item as={WrapperElement} colSpan=\"1 / 2\">\n <Flex\n ref={ref}\n as={as || defaultSidebarElement}\n direction=\"column\"\n gap=\"m\"\n className={classNames(\n 'eds-layout-template-sidebar',\n {\n 'eds-layout-template-sidebar--plain': !contrast,\n },\n className,\n )}\n style={style}\n {...rest}\n >\n {children}\n </Flex>\n </Grid.Item>\n );\n },\n);\n\nexport type SidebarComponent = typeof SidebarRoot & {\n Logo: typeof SidebarLogo;\n User: typeof SidebarUser;\n Data: typeof SidebarData;\n Navigation: typeof SidebarNavigation;\n Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n Logo: SidebarLogo,\n User: SidebarUser,\n Data: SidebarData,\n Navigation: SidebarNavigation,\n Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["jsx","Contrast","Grid","Flex"],"mappings":";;;;;;;;;AAsBA,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAU7B,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA,IAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA,IAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA,IAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACEA,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,uCAAuC,SAAS;AAAA,QACrE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,WAAWC,SAAAA,WAAW;AAC7C,0CACGC,oBAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SACrC,UAAAF,2BAAAA;AAAAA,MAACG,QAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,sCAAsC,CAAC;AAAA,UAAA;AAAA,UAEzC;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAUO,MAAM,UAA4B,OAAO,OAAO,aAAa;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAED,QAAQ,cAAc;AACtB,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,WAAW,cAAc;AACjC,QAAQ,OAAO,cAAc;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.cjs","sources":["../../../../src/beta/templates/index.ts"],"sourcesContent":["import { Portal } from './portal';\nimport type {
|
|
1
|
+
{"version":3,"file":"index.cjs","sources":["../../../../src/beta/templates/index.ts"],"sourcesContent":["import { Portal } from './portal';\nimport type {\n PortalComponent,\n PortalMainProps,\n PortalProps,\n PortalStatusBarProps,\n} from './portal';\nimport type {\n SidebarComponent,\n SidebarProps,\n SidebarSectionProps,\n} from './Sidebar';\n\nexport type TemplateComponent = {\n Portal: PortalComponent;\n};\n\nexport const Template: TemplateComponent = {\n Portal,\n};\n\nexport type {\n PortalComponent,\n PortalMainProps,\n PortalProps,\n PortalStatusBarProps,\n SidebarComponent,\n SidebarProps,\n SidebarSectionProps,\n};\n"],"names":["Portal"],"mappings":";;;AAiBO,MAAM,WAA8B;AAAA,EAAA,QACzCA,OAAAA;AACF;;"}
|
|
@@ -6,6 +6,7 @@ const classNames = require("classnames");
|
|
|
6
6
|
const index = require("../../Grid/index.cjs");
|
|
7
7
|
const Sidebar = require("../Sidebar.cjs");
|
|
8
8
|
;/* empty css */
|
|
9
|
+
const defaultStatusBarElement = "div";
|
|
9
10
|
const defaultPortalMainElement = "main";
|
|
10
11
|
const PortalRoot = React.forwardRef(
|
|
11
12
|
({ children, className, style, as, ...rest }, ref) => {
|
|
@@ -15,7 +16,8 @@ const PortalRoot = React.forwardRef(
|
|
|
15
16
|
ref,
|
|
16
17
|
as,
|
|
17
18
|
templateColumns: "var(--eds-sidebar-width, min-content) minmax(0, 1fr)",
|
|
18
|
-
gap: "
|
|
19
|
+
gap: "none",
|
|
20
|
+
columnGap: "m",
|
|
19
21
|
className: classNames("eds-layout-template-portal", className),
|
|
20
22
|
style,
|
|
21
23
|
...rest,
|
|
@@ -24,6 +26,23 @@ const PortalRoot = React.forwardRef(
|
|
|
24
26
|
);
|
|
25
27
|
}
|
|
26
28
|
);
|
|
29
|
+
const PortalStatusBar = React.forwardRef(
|
|
30
|
+
({ children, className, as, ...rest }, ref) => {
|
|
31
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
32
|
+
index.GridComponent.Item,
|
|
33
|
+
{
|
|
34
|
+
ref,
|
|
35
|
+
as: as || defaultStatusBarElement,
|
|
36
|
+
className: classNames(
|
|
37
|
+
"eds-layout-template-portal__status-bar",
|
|
38
|
+
className
|
|
39
|
+
),
|
|
40
|
+
...rest,
|
|
41
|
+
children
|
|
42
|
+
}
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
);
|
|
27
46
|
const PortalMain = React.forwardRef(
|
|
28
47
|
({ children, className, style, as, ...rest }, ref) => {
|
|
29
48
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
@@ -41,10 +60,12 @@ const PortalMain = React.forwardRef(
|
|
|
41
60
|
}
|
|
42
61
|
);
|
|
43
62
|
const Portal = Object.assign(PortalRoot, {
|
|
63
|
+
StatusBar: PortalStatusBar,
|
|
44
64
|
Sidebar: Sidebar.Sidebar,
|
|
45
65
|
Main: PortalMain
|
|
46
66
|
});
|
|
47
67
|
Portal.displayName = "Template.Portal";
|
|
68
|
+
Portal.StatusBar.displayName = "Template.Portal.StatusBar";
|
|
48
69
|
Portal.Main.displayName = "Template.Portal.Main";
|
|
49
70
|
exports.Portal = Portal;
|
|
50
71
|
//# sourceMappingURL=Portal.cjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Portal.cjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalMainProps<\n T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n <E extends React.ElementType = typeof Grid>(\n { children, className, style, as, ...rest }: PortalProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid\n ref={ref}\n as={as}\n templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n gap=\"m\"\n className={classNames('eds-layout-template-portal', className)}\n style={style}\n {...rest}\n >\n {children}\n </Grid>\n );\n },\n);\n\nconst PortalMain = React.forwardRef(\n <E extends React.ElementType = typeof defaultPortalMainElement>(\n { children, className, style, as, ...rest }: PortalMainProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid.Item\n ref={ref}\n as={as || defaultPortalMainElement}\n colSpan=\"2 / -1\"\n className={classNames('eds-layout-template-portal__main', className)}\n style={style}\n {...rest}\n >\n {children}\n </Grid.Item>\n );\n },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n Sidebar: SidebarComponent;\n Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n Sidebar,\n Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["jsx","Grid","Sidebar"],"mappings":";;;;;;;;
|
|
1
|
+
{"version":3,"file":"Portal.cjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n <E extends React.ElementType = typeof Grid>(\n { children, className, style, as, ...rest }: PortalProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid\n ref={ref}\n as={as}\n templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n gap=\"none\"\n columnGap=\"m\"\n className={classNames('eds-layout-template-portal', className)}\n style={style}\n {...rest}\n >\n {children}\n </Grid>\n );\n },\n);\n\nconst PortalStatusBar = React.forwardRef(\n <E extends React.ElementType = typeof defaultStatusBarElement>(\n { children, className, as, ...rest }: PortalStatusBarProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid.Item\n ref={ref}\n as={as || defaultStatusBarElement}\n className={classNames(\n 'eds-layout-template-portal__status-bar',\n className,\n )}\n {...rest}\n >\n {children}\n </Grid.Item>\n );\n },\n);\n\nconst PortalMain = React.forwardRef(\n <E extends React.ElementType = typeof defaultPortalMainElement>(\n { children, className, style, as, ...rest }: PortalMainProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid.Item\n ref={ref}\n as={as || defaultPortalMainElement}\n colSpan=\"2 / -1\"\n className={classNames('eds-layout-template-portal__main', className)}\n style={style}\n {...rest}\n >\n {children}\n </Grid.Item>\n );\n },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n StatusBar: typeof PortalStatusBar;\n Sidebar: SidebarComponent;\n Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n StatusBar: PortalStatusBar,\n Sidebar,\n Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["jsx","Grid","Sidebar"],"mappings":";;;;;;;;AAyBA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AAajC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACEA,2BAAAA;AAAAA,MAACC,MAAAA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAgB;AAAA,QAChB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACED,2BAAAA;AAAAA,MAACC,MAAAA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EAAA,SACXC,QAAAA;AAAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;;"}
|
|
@@ -68,7 +68,7 @@ const SidebarRoot = React.forwardRef(
|
|
|
68
68
|
...rest
|
|
69
69
|
}, ref) => {
|
|
70
70
|
const WrapperElement = contrast ? Contrast : "div";
|
|
71
|
-
return /* @__PURE__ */ jsx(GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2",
|
|
71
|
+
return /* @__PURE__ */ jsx(GridComponent.Item, { as: WrapperElement, colSpan: "1 / 2", children: /* @__PURE__ */ jsx(
|
|
72
72
|
FlexComponent,
|
|
73
73
|
{
|
|
74
74
|
ref,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sidebar.mjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n /** Toggle contrast styling for the sidebar */\n contrast?: boolean;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarUser = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarData = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarNavigation = React.forwardRef(\n <E extends React.ElementType = typeof defaultNavigationElement>(\n { children, className, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultNavigationElement;\n return (\n <Element\n ref={ref}\n className={classNames(\n 'eds-layout-template-sidebar__navigation',\n className,\n )}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarFooter = React.forwardRef(\n <E extends React.ElementType = typeof defaultFooterElement>(\n { children, className, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultFooterElement;\n return (\n <Element\n ref={ref}\n className={classNames('eds-layout-template-sidebar__footer', className)}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarRoot = React.forwardRef(\n <E extends React.ElementType = typeof defaultSidebarElement>(\n {\n children,\n className,\n style,\n contrast = true,\n as,\n ...rest\n }: SidebarProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const WrapperElement = contrast ? Contrast : 'div';\n return (\n <Grid.Item as={WrapperElement} colSpan=\"1 / 2\"
|
|
1
|
+
{"version":3,"file":"Sidebar.mjs","sources":["../../../../src/beta/templates/Sidebar.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n /** Toggle contrast styling for the sidebar */\n contrast?: boolean;\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype SidebarSectionOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\nconst defaultSidebarElement = 'aside';\nconst defaultSectionElement = 'div';\nconst defaultNavigationElement = 'nav';\nconst defaultFooterElement = 'footer';\n\nexport type SidebarProps<\n T extends React.ElementType = typeof defaultSidebarElement,\n> = PolymorphicComponentProps<T, SidebarOwnProps>;\n\nexport type SidebarSectionProps<\n T extends React.ElementType = typeof defaultSectionElement,\n> = PolymorphicComponentProps<T, SidebarSectionOwnProps>;\n\nconst SidebarLogo = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarUser = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarData = React.forwardRef(\n <E extends React.ElementType = typeof defaultSectionElement>(\n { children, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultSectionElement;\n return (\n <Element ref={ref} {...rest}>\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarNavigation = React.forwardRef(\n <E extends React.ElementType = typeof defaultNavigationElement>(\n { children, className, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultNavigationElement;\n return (\n <Element\n ref={ref}\n className={classNames(\n 'eds-layout-template-sidebar__navigation',\n className,\n )}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarFooter = React.forwardRef(\n <E extends React.ElementType = typeof defaultFooterElement>(\n { children, className, as, ...rest }: SidebarSectionProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const Element: React.ElementType = as || defaultFooterElement;\n return (\n <Element\n ref={ref}\n className={classNames('eds-layout-template-sidebar__footer', className)}\n {...rest}\n >\n {children}\n </Element>\n );\n },\n);\n\nconst SidebarRoot = React.forwardRef(\n <E extends React.ElementType = typeof defaultSidebarElement>(\n {\n children,\n className,\n style,\n contrast = true,\n as,\n ...rest\n }: SidebarProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const WrapperElement = contrast ? Contrast : 'div';\n return (\n <Grid.Item as={WrapperElement} colSpan=\"1 / 2\">\n <Flex\n ref={ref}\n as={as || defaultSidebarElement}\n direction=\"column\"\n gap=\"m\"\n className={classNames(\n 'eds-layout-template-sidebar',\n {\n 'eds-layout-template-sidebar--plain': !contrast,\n },\n className,\n )}\n style={style}\n {...rest}\n >\n {children}\n </Flex>\n </Grid.Item>\n );\n },\n);\n\nexport type SidebarComponent = typeof SidebarRoot & {\n Logo: typeof SidebarLogo;\n User: typeof SidebarUser;\n Data: typeof SidebarData;\n Navigation: typeof SidebarNavigation;\n Footer: typeof SidebarFooter;\n};\n\nexport const Sidebar: SidebarComponent = Object.assign(SidebarRoot, {\n Logo: SidebarLogo,\n User: SidebarUser,\n Data: SidebarData,\n Navigation: SidebarNavigation,\n Footer: SidebarFooter,\n});\n\nSidebar.displayName = 'Template.Portal.Sidebar';\nSidebar.Logo.displayName = 'Template.Portal.Sidebar.Logo';\nSidebar.User.displayName = 'Template.Portal.Sidebar.User';\nSidebar.Data.displayName = 'Template.Portal.Sidebar.Data';\nSidebar.Navigation.displayName = 'Template.Portal.Sidebar.Navigation';\nSidebar.Footer.displayName = 'Template.Portal.Sidebar.Footer';\n"],"names":["Grid","Flex"],"mappings":";;;;;;;AAsBA,MAAM,wBAAwB;AAC9B,MAAM,wBAAwB;AAC9B,MAAM,2BAA2B;AACjC,MAAM,uBAAuB;AAU7B,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE,oBAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE,oBAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE,EAAE,UAAU,IAAI,GAAG,KAAA,GACnB,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE,oBAAC,SAAA,EAAQ,KAAW,GAAG,MACpB,UACH;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAoB,MAAM;AAAA,EAC9B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,gBAAgB,MAAM;AAAA,EAC1B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,UAAM,UAA6B,MAAM;AACzC,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAW,WAAW,uCAAuC,SAAS;AAAA,QACrE,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,cAAc,MAAM;AAAA,EACxB,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,iBAAiB,WAAW,WAAW;AAC7C,+BACGA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SACrC,UAAA;AAAA,MAACC;AAAAA,MAAA;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAU;AAAA,QACV,KAAI;AAAA,QACJ,WAAW;AAAA,UACT;AAAA,UACA;AAAA,YACE,sCAAsC,CAAC;AAAA,UAAA;AAAA,UAEzC;AAAA,QAAA;AAAA,QAEF;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA,GAEL;AAAA,EAEJ;AACF;AAUO,MAAM,UAA4B,OAAO,OAAO,aAAa;AAAA,EAClE,MAAM;AAAA,EACN,MAAM;AAAA,EACN,MAAM;AAAA,EACN,YAAY;AAAA,EACZ,QAAQ;AACV,CAAC;AAED,QAAQ,cAAc;AACtB,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,KAAK,cAAc;AAC3B,QAAQ,WAAW,cAAc;AACjC,QAAQ,OAAO,cAAc;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.mjs","sources":["../../../../src/beta/templates/index.ts"],"sourcesContent":["import { Portal } from './portal';\nimport type {
|
|
1
|
+
{"version":3,"file":"index.mjs","sources":["../../../../src/beta/templates/index.ts"],"sourcesContent":["import { Portal } from './portal';\nimport type {\n PortalComponent,\n PortalMainProps,\n PortalProps,\n PortalStatusBarProps,\n} from './portal';\nimport type {\n SidebarComponent,\n SidebarProps,\n SidebarSectionProps,\n} from './Sidebar';\n\nexport type TemplateComponent = {\n Portal: PortalComponent;\n};\n\nexport const Template: TemplateComponent = {\n Portal,\n};\n\nexport type {\n PortalComponent,\n PortalMainProps,\n PortalProps,\n PortalStatusBarProps,\n SidebarComponent,\n SidebarProps,\n SidebarSectionProps,\n};\n"],"names":[],"mappings":";AAiBO,MAAM,WAA8B;AAAA,EACzC;AACF;"}
|
|
@@ -4,6 +4,7 @@ import classNames from "classnames";
|
|
|
4
4
|
import { GridComponent } from "../../Grid/index.mjs";
|
|
5
5
|
import { Sidebar } from "../Sidebar.mjs";
|
|
6
6
|
/* empty css */
|
|
7
|
+
const defaultStatusBarElement = "div";
|
|
7
8
|
const defaultPortalMainElement = "main";
|
|
8
9
|
const PortalRoot = React.forwardRef(
|
|
9
10
|
({ children, className, style, as, ...rest }, ref) => {
|
|
@@ -13,7 +14,8 @@ const PortalRoot = React.forwardRef(
|
|
|
13
14
|
ref,
|
|
14
15
|
as,
|
|
15
16
|
templateColumns: "var(--eds-sidebar-width, min-content) minmax(0, 1fr)",
|
|
16
|
-
gap: "
|
|
17
|
+
gap: "none",
|
|
18
|
+
columnGap: "m",
|
|
17
19
|
className: classNames("eds-layout-template-portal", className),
|
|
18
20
|
style,
|
|
19
21
|
...rest,
|
|
@@ -22,6 +24,23 @@ const PortalRoot = React.forwardRef(
|
|
|
22
24
|
);
|
|
23
25
|
}
|
|
24
26
|
);
|
|
27
|
+
const PortalStatusBar = React.forwardRef(
|
|
28
|
+
({ children, className, as, ...rest }, ref) => {
|
|
29
|
+
return /* @__PURE__ */ jsx(
|
|
30
|
+
GridComponent.Item,
|
|
31
|
+
{
|
|
32
|
+
ref,
|
|
33
|
+
as: as || defaultStatusBarElement,
|
|
34
|
+
className: classNames(
|
|
35
|
+
"eds-layout-template-portal__status-bar",
|
|
36
|
+
className
|
|
37
|
+
),
|
|
38
|
+
...rest,
|
|
39
|
+
children
|
|
40
|
+
}
|
|
41
|
+
);
|
|
42
|
+
}
|
|
43
|
+
);
|
|
25
44
|
const PortalMain = React.forwardRef(
|
|
26
45
|
({ children, className, style, as, ...rest }, ref) => {
|
|
27
46
|
return /* @__PURE__ */ jsx(
|
|
@@ -39,10 +58,12 @@ const PortalMain = React.forwardRef(
|
|
|
39
58
|
}
|
|
40
59
|
);
|
|
41
60
|
const Portal = Object.assign(PortalRoot, {
|
|
61
|
+
StatusBar: PortalStatusBar,
|
|
42
62
|
Sidebar,
|
|
43
63
|
Main: PortalMain
|
|
44
64
|
});
|
|
45
65
|
Portal.displayName = "Template.Portal";
|
|
66
|
+
Portal.StatusBar.displayName = "Template.Portal.StatusBar";
|
|
46
67
|
Portal.Main.displayName = "Template.Portal.Main";
|
|
47
68
|
export {
|
|
48
69
|
Portal
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Portal.mjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalMainProps<\n T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n <E extends React.ElementType = typeof Grid>(\n { children, className, style, as, ...rest }: PortalProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid\n ref={ref}\n as={as}\n templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n gap=\"m\"\n className={classNames('eds-layout-template-portal', className)}\n style={style}\n {...rest}\n >\n {children}\n </Grid>\n );\n },\n);\n\nconst PortalMain = React.forwardRef(\n <E extends React.ElementType = typeof defaultPortalMainElement>(\n { children, className, style, as, ...rest }: PortalMainProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid.Item\n ref={ref}\n as={as || defaultPortalMainElement}\n colSpan=\"2 / -1\"\n className={classNames('eds-layout-template-portal__main', className)}\n style={style}\n {...rest}\n >\n {children}\n </Grid.Item>\n );\n },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n Sidebar: SidebarComponent;\n Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n Sidebar,\n Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["Grid"],"mappings":";;;;;;
|
|
1
|
+
{"version":3,"file":"Portal.mjs","sources":["../../../../../src/beta/templates/portal/Portal.tsx"],"sourcesContent":["import React from 'react';\nimport type { PolymorphicComponentProps } from '@entur/utils';\nimport classNames from 'classnames';\nimport { Grid } from '../../Grid';\nimport { Sidebar, SidebarComponent } from '../Sidebar';\nimport './Portal.scss';\n\ntype PortalOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype PortalStatusBarOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\ntype PortalMainOwnProps = {\n className?: string;\n style?: React.CSSProperties;\n children?: React.ReactNode;\n};\n\nconst defaultStatusBarElement = 'div';\nconst defaultPortalMainElement = 'main';\n\nexport type PortalProps<T extends React.ElementType = typeof Grid> =\n PolymorphicComponentProps<T, PortalOwnProps>;\n\nexport type PortalStatusBarProps<\n T extends React.ElementType = typeof defaultStatusBarElement,\n> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;\n\nexport type PortalMainProps<\n T extends React.ElementType = typeof defaultPortalMainElement,\n> = PolymorphicComponentProps<T, PortalMainOwnProps>;\n\nconst PortalRoot = React.forwardRef(\n <E extends React.ElementType = typeof Grid>(\n { children, className, style, as, ...rest }: PortalProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid\n ref={ref}\n as={as}\n templateColumns=\"var(--eds-sidebar-width, min-content) minmax(0, 1fr)\"\n gap=\"none\"\n columnGap=\"m\"\n className={classNames('eds-layout-template-portal', className)}\n style={style}\n {...rest}\n >\n {children}\n </Grid>\n );\n },\n);\n\nconst PortalStatusBar = React.forwardRef(\n <E extends React.ElementType = typeof defaultStatusBarElement>(\n { children, className, as, ...rest }: PortalStatusBarProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid.Item\n ref={ref}\n as={as || defaultStatusBarElement}\n className={classNames(\n 'eds-layout-template-portal__status-bar',\n className,\n )}\n {...rest}\n >\n {children}\n </Grid.Item>\n );\n },\n);\n\nconst PortalMain = React.forwardRef(\n <E extends React.ElementType = typeof defaultPortalMainElement>(\n { children, className, style, as, ...rest }: PortalMainProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n return (\n <Grid.Item\n ref={ref}\n as={as || defaultPortalMainElement}\n colSpan=\"2 / -1\"\n className={classNames('eds-layout-template-portal__main', className)}\n style={style}\n {...rest}\n >\n {children}\n </Grid.Item>\n );\n },\n);\n\nexport type PortalComponent = typeof PortalRoot & {\n StatusBar: typeof PortalStatusBar;\n Sidebar: SidebarComponent;\n Main: typeof PortalMain;\n};\n\nexport const Portal: PortalComponent = Object.assign(PortalRoot, {\n StatusBar: PortalStatusBar,\n Sidebar,\n Main: PortalMain,\n});\n\nPortal.displayName = 'Template.Portal';\nPortal.StatusBar.displayName = 'Template.Portal.StatusBar';\nPortal.Main.displayName = 'Template.Portal.Main';\n"],"names":["Grid"],"mappings":";;;;;;AAyBA,MAAM,0BAA0B;AAChC,MAAM,2BAA2B;AAajC,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACE;AAAA,MAACA;AAAAA,MAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA,iBAAgB;AAAA,QAChB,KAAI;AAAA,QACJ,WAAU;AAAA,QACV,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,kBAAkB,MAAM;AAAA,EAC5B,CACE,EAAE,UAAU,WAAW,IAAI,GAAG,KAAA,GAC9B,QACG;AACH,WACE;AAAA,MAACA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,WAAW;AAAA,UACT;AAAA,UACA;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,MAAM,aAAa,MAAM;AAAA,EACvB,CACE,EAAE,UAAU,WAAW,OAAO,IAAI,GAAG,KAAA,GACrC,QACG;AACH,WACE;AAAA,MAACA,cAAK;AAAA,MAAL;AAAA,QACC;AAAA,QACA,IAAI,MAAM;AAAA,QACV,SAAQ;AAAA,QACR,WAAW,WAAW,oCAAoC,SAAS;AAAA,QACnE;AAAA,QACC,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAQO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D,WAAW;AAAA,EACX;AAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,UAAU,cAAc;AAC/B,OAAO,KAAK,cAAc;"}
|
|
@@ -200,6 +200,19 @@
|
|
|
200
200
|
min-height:100vh;
|
|
201
201
|
width:100%;
|
|
202
202
|
}
|
|
203
|
+
.eds-layout-template-portal:has(> .eds-layout-template-portal__status-bar){
|
|
204
|
+
--grid-template-rows:auto 1fr;
|
|
205
|
+
}
|
|
206
|
+
.eds-layout-template-portal:has(> .eds-layout-template-portal__status-bar) > .eds-layout-template-portal__status-bar{
|
|
207
|
+
--grid-item-column:1 / -1;
|
|
208
|
+
--grid-item-row:1;
|
|
209
|
+
}
|
|
210
|
+
.eds-layout-template-portal:has(> .eds-layout-template-portal__status-bar) > .eds-layout-grid-item:has(.eds-layout-template-sidebar){
|
|
211
|
+
--grid-item-row:2;
|
|
212
|
+
}
|
|
213
|
+
.eds-layout-template-portal:has(> .eds-layout-template-portal__status-bar) > .eds-layout-template-portal__main{
|
|
214
|
+
--grid-item-row:2;
|
|
215
|
+
}
|
|
203
216
|
|
|
204
217
|
.eds-layout-template-portal__main{
|
|
205
218
|
padding:1rem;
|
|
@@ -4,4 +4,4 @@ export { Flex, FlexSpacer } from './Flex';
|
|
|
4
4
|
export { Template } from './templates';
|
|
5
5
|
export type { GridProps, GridOwnProps, GridItemProps, GridItemOwnProps, GridSpacingValue, ResponsiveValue, } from './Grid';
|
|
6
6
|
export type { FlexProps, FlexOwnProps, FlexSpacingValue, FlexSpacerProps, FlexSpacerOwnProps, } from './Flex';
|
|
7
|
-
export type { PortalComponent, PortalMainProps, PortalProps, SidebarComponent, SidebarProps, SidebarSectionProps, TemplateComponent, } from './templates';
|
|
7
|
+
export type { PortalComponent, PortalMainProps, PortalProps, PortalStatusBarProps, SidebarComponent, SidebarProps, SidebarSectionProps, TemplateComponent, } from './templates';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
import { PortalComponent, PortalMainProps, PortalProps } from './portal';
|
|
1
|
+
import { PortalComponent, PortalMainProps, PortalProps, PortalStatusBarProps } from './portal';
|
|
2
2
|
import { SidebarComponent, SidebarProps, SidebarSectionProps } from './Sidebar';
|
|
3
3
|
export type TemplateComponent = {
|
|
4
4
|
Portal: PortalComponent;
|
|
5
5
|
};
|
|
6
6
|
export declare const Template: TemplateComponent;
|
|
7
|
-
export type { PortalComponent, PortalMainProps, PortalProps, SidebarComponent, SidebarProps, SidebarSectionProps, };
|
|
7
|
+
export type { PortalComponent, PortalMainProps, PortalProps, PortalStatusBarProps, SidebarComponent, SidebarProps, SidebarSectionProps, };
|
|
@@ -7,21 +7,32 @@ type PortalOwnProps = {
|
|
|
7
7
|
style?: React.CSSProperties;
|
|
8
8
|
children?: React.ReactNode;
|
|
9
9
|
};
|
|
10
|
+
type PortalStatusBarOwnProps = {
|
|
11
|
+
className?: string;
|
|
12
|
+
style?: React.CSSProperties;
|
|
13
|
+
children?: React.ReactNode;
|
|
14
|
+
};
|
|
10
15
|
type PortalMainOwnProps = {
|
|
11
16
|
className?: string;
|
|
12
17
|
style?: React.CSSProperties;
|
|
13
18
|
children?: React.ReactNode;
|
|
14
19
|
};
|
|
20
|
+
declare const defaultStatusBarElement = "div";
|
|
15
21
|
declare const defaultPortalMainElement = "main";
|
|
16
22
|
export type PortalProps<T extends React.ElementType = typeof Grid> = PolymorphicComponentProps<T, PortalOwnProps>;
|
|
23
|
+
export type PortalStatusBarProps<T extends React.ElementType = typeof defaultStatusBarElement> = PolymorphicComponentProps<T, PortalStatusBarOwnProps>;
|
|
17
24
|
export type PortalMainProps<T extends React.ElementType = typeof defaultPortalMainElement> = PolymorphicComponentProps<T, PortalMainOwnProps>;
|
|
18
25
|
declare const PortalRoot: React.ForwardRefExoticComponent<Omit<PortalOwnProps & {
|
|
19
26
|
as?: React.ElementType<any> | undefined;
|
|
20
27
|
} & Omit<Omit<any, "ref">, "as" | keyof PortalOwnProps>, "ref"> & React.RefAttributes<Element>>;
|
|
28
|
+
declare const PortalStatusBar: React.ForwardRefExoticComponent<Omit<PortalStatusBarOwnProps & {
|
|
29
|
+
as?: React.ElementType<any> | undefined;
|
|
30
|
+
} & Omit<Omit<any, "ref">, "as" | keyof PortalStatusBarOwnProps>, "ref"> & React.RefAttributes<Element>>;
|
|
21
31
|
declare const PortalMain: React.ForwardRefExoticComponent<Omit<PortalMainOwnProps & {
|
|
22
32
|
as?: React.ElementType<any> | undefined;
|
|
23
33
|
} & Omit<Omit<any, "ref">, "as" | keyof PortalMainOwnProps>, "ref"> & React.RefAttributes<Element>>;
|
|
24
34
|
export type PortalComponent = typeof PortalRoot & {
|
|
35
|
+
StatusBar: typeof PortalStatusBar;
|
|
25
36
|
Sidebar: SidebarComponent;
|
|
26
37
|
Main: typeof PortalMain;
|
|
27
38
|
};
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export { Portal } from './Portal';
|
|
2
|
-
export type { PortalComponent, PortalMainProps, PortalProps } from './Portal';
|
|
2
|
+
export type { PortalComponent, PortalMainProps, PortalProps, PortalStatusBarProps, } from './Portal';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/layout",
|
|
3
|
-
"version": "3.4.
|
|
3
|
+
"version": "3.4.2",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/layout.cjs.js",
|
|
6
6
|
"module": "dist/layout.esm.js",
|
|
@@ -51,9 +51,9 @@
|
|
|
51
51
|
"react-dom": ">=16.8.0"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@entur/icons": "^8.4.
|
|
55
|
-
"@entur/tokens": "^3.22.
|
|
56
|
-
"@entur/typography": "^2.1.
|
|
54
|
+
"@entur/icons": "^8.4.3",
|
|
55
|
+
"@entur/tokens": "^3.22.2",
|
|
56
|
+
"@entur/typography": "^2.1.4",
|
|
57
57
|
"@entur/utils": "^0.13.1",
|
|
58
58
|
"classnames": "^2.5.1"
|
|
59
59
|
},
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"vite": "^7.1.3",
|
|
71
71
|
"vite-plugin-dts": "^4.5.4"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "ee1f35746ed0ce1e2ab24377ec9d1bb78f6fabac"
|
|
74
74
|
}
|