@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.
@@ -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", rowSpan: "1 / 2", children: /* @__PURE__ */ jsxRuntime.jsx(
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\" rowSpan=\"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,WACED,+BAACE,MAAAA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SAAQ,SAAQ,SACrD,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
+ {"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 { PortalComponent, PortalMainProps, PortalProps } 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 SidebarComponent,\n SidebarProps,\n SidebarSectionProps,\n};\n"],"names":["Portal"],"mappings":";;;AAYO,MAAM,WAA8B;AAAA,EAAA,QACzCA,OAAAA;AACF;;"}
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: "m",
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":";;;;;;;;AAmBA,MAAM,2BAA2B;AASjC,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,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,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;AAOO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAAA,SAC/DC,QAAAA;AAAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,KAAK,cAAc;;"}
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", rowSpan: "1 / 2", children: /* @__PURE__ */ jsx(
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\" rowSpan=\"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,WACE,oBAACA,cAAK,MAAL,EAAU,IAAI,gBAAgB,SAAQ,SAAQ,SAAQ,SACrD,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
+ {"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 { PortalComponent, PortalMainProps, PortalProps } 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 SidebarComponent,\n SidebarProps,\n SidebarSectionProps,\n};\n"],"names":[],"mappings":";AAYO,MAAM,WAA8B;AAAA,EACzC;AACF;"}
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: "m",
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":";;;;;;AAmBA,MAAM,2BAA2B;AASjC,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,WAAW,WAAW,8BAA8B,SAAS;AAAA,QAC7D;AAAA,QACC,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;AAOO,MAAM,SAA0B,OAAO,OAAO,YAAY;AAAA,EAC/D;AAAA,EACA,MAAM;AACR,CAAC;AAED,OAAO,cAAc;AACrB,OAAO,KAAK,cAAc;"}
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.1-next.1",
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.2",
55
- "@entur/tokens": "^3.22.1",
56
- "@entur/typography": "^2.1.3",
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": "9a27d33d8c6c529e6a9bf94101cb3ef76470dc45"
73
+ "gitHead": "ee1f35746ed0ce1e2ab24377ec9d1bb78f6fabac"
74
74
  }