@entur/layout 3.5.0 → 3.6.0
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/Grid/Grid.cjs +2 -2
- package/dist/beta/cjs/Grid/Grid.cjs.map +1 -1
- package/dist/beta/cjs/LayoutWrapper/LayoutWrapper.cjs.map +1 -1
- package/dist/beta/cjs/LayoutWrapper/useLayoutValues.cjs.map +1 -1
- package/dist/beta/cjs/index.cjs +0 -2
- package/dist/beta/cjs/index.cjs.map +1 -1
- package/dist/beta/cjs/templates/Sidebar.cjs +45 -51
- 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 +0 -1
- package/dist/beta/cjs/templates/portal/Portal.cjs.map +1 -1
- package/dist/beta/esm/Grid/Grid.mjs +2 -2
- package/dist/beta/esm/Grid/Grid.mjs.map +1 -1
- package/dist/beta/esm/LayoutWrapper/LayoutWrapper.mjs.map +1 -1
- package/dist/beta/esm/LayoutWrapper/useLayoutValues.mjs.map +1 -1
- package/dist/beta/esm/index.mjs +1 -3
- package/dist/beta/esm/index.mjs.map +1 -1
- package/dist/beta/esm/templates/Sidebar.mjs +45 -51
- 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 +0 -1
- package/dist/beta/esm/templates/portal/Portal.mjs.map +1 -1
- package/dist/beta/styles/index.css +32 -15
- package/dist/beta/types/index.d.ts +1 -1
- package/dist/beta/types/templates/Sidebar.d.ts +3 -4
- package/dist/beta/types/templates/index.d.ts +0 -1
- package/dist/layout.cjs.js.map +1 -1
- package/dist/layout.esm.js.map +1 -1
- package/package.json +7 -9
- package/dist/beta/cjs/Contrast.cjs +0 -21
- package/dist/beta/cjs/Contrast.cjs.map +0 -1
- package/dist/beta/cjs/templates/SidebarContext.cjs +0 -10
- package/dist/beta/cjs/templates/SidebarContext.cjs.map +0 -1
- package/dist/beta/esm/Contrast.mjs +0 -21
- package/dist/beta/esm/Contrast.mjs.map +0 -1
- package/dist/beta/esm/templates/SidebarContext.mjs +0 -10
- package/dist/beta/esm/templates/SidebarContext.mjs.map +0 -1
- package/dist/beta/types/templates/SidebarContext.d.ts +0 -9
|
@@ -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 { useControllableProp } from '@entur/utils';\nimport classNames from 'classnames';\nimport { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\nimport { Contrast } from '../../Contrast';\nimport { Flex } from '../Flex';\nimport { Grid } from '../Grid';\nimport { SidebarContext } from './SidebarContext';\nimport './Sidebar.scss';\n\ntype SidebarOwnProps = {\n /** Toggle contrast styling for the sidebar */\n contrast?: boolean;\n /** Enable collapse functionality */\n collapsible?: boolean;\n /** Controlled collapsed state */\n collapsed?: boolean;\n /** Callback when the sidebar is toggled */\n onCollapseToggle?: (collapsed: boolean) => void;\n /** aria-label for the toggle button when the sidebar is collapsed\n * @default 'Åpne sidemeny'\n */\n openSidebarAriaLabel?: string;\n /** aria-label for the toggle button when the sidebar is expanded\n * @default 'Lukk sidemeny'\n */\n closeSidebarAriaLabel?: string;\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 CollapseToggle: React.FC<{\n isCollapsed: boolean;\n onToggle: () => void;\n openLabel: string;\n closeLabel: string;\n}> = ({ isCollapsed, onToggle, openLabel, closeLabel }) => (\n <button\n type=\"button\"\n className=\"eds-layout-template-sidebar__collapse-toggle\"\n onClick={onToggle}\n aria-expanded={!isCollapsed}\n aria-label={isCollapsed ? openLabel : closeLabel}\n >\n {isCollapsed ? <RightArrowIcon size={16} /> : <LeftArrowIcon size={16} />}\n </button>\n);\n\nconst SidebarRoot = React.forwardRef(\n <E extends React.ElementType = typeof defaultSidebarElement>(\n {\n children,\n className,\n style,\n contrast = true,\n collapsible = false,\n collapsed,\n onCollapseToggle,\n openSidebarAriaLabel = 'Åpne sidemeny',\n closeSidebarAriaLabel = 'Lukk sidemeny',\n as,\n ...rest\n }: SidebarProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const handleCollapseToggle: (value?: boolean) => void = value => {\n if (value === undefined || !onCollapseToggle) {\n return;\n }\n onCollapseToggle(value);\n };\n\n const [isCollapsed, setIsCollapsed] = useControllableProp({\n prop: collapsible ? collapsed : undefined,\n defaultValue: false,\n updater: handleCollapseToggle,\n });\n\n const WrapperElement = contrast ? Contrast : 'div';\n\n const sidebarClassNames = classNames(\n 'eds-layout-template-sidebar',\n {\n 'eds-layout-template-sidebar--plain': !contrast,\n 'eds-layout-template-sidebar--collapsible': collapsible,\n 'eds-layout-template-sidebar--collapsed': collapsible && isCollapsed,\n },\n className,\n );\n\n if (!collapsible) {\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={sidebarClassNames}\n style={style}\n {...rest}\n >\n {children}\n </Flex>\n </Grid.Item>\n );\n }\n\n const collapsedStyle = isCollapsed\n ? ({ ...style, '--eds-sidebar-width': '2rem' } as React.CSSProperties)\n : style;\n\n return (\n <Grid.Item\n as={WrapperElement}\n colSpan=\"1 / 2\"\n className=\"eds-layout-template-sidebar-wrapper\"\n >\n <SidebarContext.Provider value={{ isCollapsed }}>\n <Flex\n ref={ref}\n as={as || defaultSidebarElement}\n direction=\"column\"\n gap=\"m\"\n className={sidebarClassNames}\n style={collapsedStyle}\n {...rest}\n >\n <div className=\"eds-layout-template-sidebar__content\">\n {children}\n </div>\n </Flex>\n <CollapseToggle\n isCollapsed={isCollapsed}\n onToggle={() => setIsCollapsed(!isCollapsed)}\n openLabel={openSidebarAriaLabel}\n closeLabel={closeSidebarAriaLabel}\n />\n </SidebarContext.Provider>\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":"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"}
|
|
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 { LeftArrowIcon, RightArrowIcon } from '@entur/icons';\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 /** Controlled collapsed state. When provided, the sidebar becomes\n * collapsible and a toggle button is rendered. */\n collapsed?: boolean;\n /** Callback when the collapse toggle is clicked */\n onCollapseToggle?: (collapsed: boolean) => void;\n /** aria-label for the toggle button when the sidebar is collapsed\n * @default 'Åpne sidemeny'\n */\n openSidebarAriaLabel?: string;\n /** aria-label for the toggle button when the sidebar is expanded\n * @default 'Lukk sidemeny'\n */\n closeSidebarAriaLabel?: string;\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 return (\n <Flex\n ref={ref}\n as={as || defaultSectionElement}\n direction=\"column\"\n gap=\"s\"\n {...rest}\n >\n {children}\n </Flex>\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 CollapseToggle: React.FC<{\n isCollapsed: boolean;\n onToggle: () => void;\n openLabel: string;\n closeLabel: string;\n}> = ({ isCollapsed, onToggle, openLabel, closeLabel }) => (\n <button\n type=\"button\"\n className=\"eds-layout-template-sidebar__collapse-toggle\"\n onClick={onToggle}\n aria-expanded={!isCollapsed}\n aria-label={isCollapsed ? openLabel : closeLabel}\n >\n {isCollapsed ? <RightArrowIcon size={16} /> : <LeftArrowIcon size={16} />}\n </button>\n);\n\nconst SidebarRoot = React.forwardRef(\n <E extends React.ElementType = typeof defaultSidebarElement>(\n {\n children,\n className,\n style,\n contrast = true,\n collapsed,\n onCollapseToggle,\n openSidebarAriaLabel = 'Åpne sidemeny',\n closeSidebarAriaLabel = 'Lukk sidemeny',\n as,\n ...rest\n }: SidebarProps<E>,\n ref?: React.Ref<Element>,\n ) => {\n const collapsible = collapsed !== undefined;\n const isCollapsed = collapsed ?? false;\n\n const sidebarClassNames = classNames(\n 'eds-layout-template-sidebar',\n {\n 'eds-layout-template-sidebar--plain': !contrast,\n 'eds-layout-template-sidebar--collapsible': collapsible,\n 'eds-layout-template-sidebar--collapsed': collapsible && isCollapsed,\n },\n className,\n );\n\n const wrapperClassNames = classNames(\n 'eds-layout-template-sidebar-wrapper',\n {\n 'eds-contrast': contrast,\n 'eds-layout-template-sidebar-wrapper--collapsible': collapsible,\n },\n );\n\n if (!collapsible) {\n return (\n <Grid.Item className={wrapperClassNames} colSpan=\"1 / 2\">\n <Flex\n ref={ref}\n as={as || defaultSidebarElement}\n direction=\"column\"\n gap=\"m\"\n className={sidebarClassNames}\n style={style}\n {...rest}\n >\n {children}\n </Flex>\n </Grid.Item>\n );\n }\n\n const collapsedStyle = isCollapsed\n ? ({ ...style, '--eds-sidebar-width': '2rem' } as React.CSSProperties)\n : style;\n\n return (\n <Grid.Item className={wrapperClassNames} colSpan=\"1 / 2\">\n <Flex\n ref={ref}\n as={as || defaultSidebarElement}\n direction=\"column\"\n gap=\"m\"\n className={sidebarClassNames}\n style={collapsedStyle}\n {...rest}\n >\n <div className=\"eds-layout-template-sidebar__content\">{children}</div>\n </Flex>\n {onCollapseToggle && (\n <CollapseToggle\n isCollapsed={isCollapsed}\n onToggle={() => onCollapseToggle(!isCollapsed)}\n openLabel={openSidebarAriaLabel}\n closeLabel={closeSidebarAriaLabel}\n />\n )}\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":["Flex","Grid"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
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
|
|
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;"}
|
|
@@ -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 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
|
|
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 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,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;"}
|
|
@@ -163,15 +163,28 @@
|
|
|
163
163
|
-webkit-flex:1 1 0%;
|
|
164
164
|
-moz-box-flex:1;
|
|
165
165
|
flex:1 1 0%;
|
|
166
|
-
}.eds-layout-template-sidebar{
|
|
166
|
+
}.eds-layout-template-sidebar-wrapper{
|
|
167
|
+
height:100%;
|
|
168
|
+
min-height:0;
|
|
169
|
+
}
|
|
170
|
+
.eds-layout-template-sidebar-wrapper--collapsible{
|
|
171
|
+
position:relative;
|
|
172
|
+
}
|
|
173
|
+
|
|
174
|
+
.eds-layout-template-sidebar{
|
|
167
175
|
padding:2rem;
|
|
168
176
|
padding:var(--eds-sidebar-padding, 2rem);
|
|
169
177
|
height:100%;
|
|
178
|
+
max-height:100dvh;
|
|
179
|
+
max-height:var(--eds-viewport-height, 100dvh);
|
|
170
180
|
width:20rem;
|
|
171
181
|
width:var(--eds-sidebar-width, 20rem);
|
|
182
|
+
position:-webkit-sticky;
|
|
183
|
+
position:sticky;
|
|
184
|
+
top:0;
|
|
172
185
|
}
|
|
173
186
|
.eds-layout-template-sidebar--collapsible{
|
|
174
|
-
overflow:hidden;
|
|
187
|
+
overflow-x:hidden;
|
|
175
188
|
contain:inline-size;
|
|
176
189
|
-webkit-transition:width ease-in-out 0.2s;
|
|
177
190
|
-o-transition:width ease-in-out 0.2s;
|
|
@@ -182,16 +195,18 @@
|
|
|
182
195
|
padding:2rem 0;
|
|
183
196
|
padding:var(--eds-sidebar-padding, 2rem) 0;
|
|
184
197
|
}
|
|
185
|
-
|
|
186
198
|
.eds-layout-template-sidebar--plain{
|
|
187
199
|
background-color:var(--components-menu-sidenavigation-standard-background);
|
|
188
200
|
}
|
|
189
|
-
|
|
190
201
|
.eds-layout-template-sidebar__navigation{
|
|
191
202
|
-webkit-box-flex:1;
|
|
192
203
|
-webkit-flex:1 1 auto;
|
|
193
204
|
-moz-box-flex:1;
|
|
194
205
|
flex:1 1 auto;
|
|
206
|
+
min-height:0;
|
|
207
|
+
overflow-y:auto;
|
|
208
|
+
scrollbar-width:thin;
|
|
209
|
+
scrollbar-color:rgba(255, 255, 255, 0.3) transparent;
|
|
195
210
|
margin-left:-webkit-calc(-1 * 2rem);
|
|
196
211
|
margin-left:-moz-calc(-1 * 2rem);
|
|
197
212
|
margin-left:calc(-1 * 2rem);
|
|
@@ -205,11 +220,12 @@
|
|
|
205
220
|
margin-right:-moz-calc(-1 * var(--eds-sidebar-padding, 2rem));
|
|
206
221
|
margin-right:calc(-1 * var(--eds-sidebar-padding, 2rem));
|
|
207
222
|
}
|
|
208
|
-
|
|
223
|
+
.eds-layout-template-sidebar--plain .eds-layout-template-sidebar__navigation{
|
|
224
|
+
scrollbar-color:rgba(0, 0, 0, 0.2) transparent;
|
|
225
|
+
}
|
|
209
226
|
.eds-layout-template-sidebar__footer{
|
|
210
227
|
margin-top:auto;
|
|
211
228
|
}
|
|
212
|
-
|
|
213
229
|
.eds-layout-template-sidebar__content{
|
|
214
230
|
display:-webkit-box;
|
|
215
231
|
display:-webkit-flex;
|
|
@@ -223,9 +239,10 @@
|
|
|
223
239
|
flex-direction:column;
|
|
224
240
|
gap:var(--m);
|
|
225
241
|
-webkit-box-flex:1;
|
|
226
|
-
-webkit-flex:1 0
|
|
242
|
+
-webkit-flex:1 1 0;
|
|
227
243
|
-moz-box-flex:1;
|
|
228
|
-
flex:1 0
|
|
244
|
+
flex:1 1 0;
|
|
245
|
+
min-height:0;
|
|
229
246
|
min-width:-webkit-calc(20rem - 2 * 2rem);
|
|
230
247
|
min-width:-moz-calc(20rem - 2 * 2rem);
|
|
231
248
|
min-width:calc(20rem - 2 * 2rem);
|
|
@@ -246,11 +263,6 @@
|
|
|
246
263
|
-moz-transition:opacity ease-out 0.1s, visibility 0s 0.1s;
|
|
247
264
|
transition:opacity ease-out 0.1s, visibility 0s 0.1s;
|
|
248
265
|
}
|
|
249
|
-
|
|
250
|
-
.eds-layout-template-sidebar-wrapper{
|
|
251
|
-
position:relative;
|
|
252
|
-
}
|
|
253
|
-
|
|
254
266
|
.eds-layout-template-sidebar__collapse-toggle{
|
|
255
267
|
position:absolute;
|
|
256
268
|
right:-1rem;
|
|
@@ -297,7 +309,12 @@
|
|
|
297
309
|
.eds-contrast .eds-layout-template-sidebar__collapse-toggle:focus-visible{
|
|
298
310
|
outline-color:var(--basecolors-stroke-focus-contrast);
|
|
299
311
|
}.eds-layout-template-portal{
|
|
300
|
-
min-
|
|
312
|
+
--grid-template-columns:var(--eds-sidebar-width, min-content) minmax(0, 1fr);
|
|
313
|
+
min-height:0;
|
|
314
|
+
max-height:100dvh;
|
|
315
|
+
max-height:var(--eds-viewport-height, 100dvh);
|
|
316
|
+
height:100dvh;
|
|
317
|
+
height:var(--eds-viewport-height, 100dvh);
|
|
301
318
|
width:100%;
|
|
302
319
|
}
|
|
303
320
|
.eds-layout-template-portal:has(.eds-layout-template-sidebar--collapsible){
|
|
@@ -308,7 +325,7 @@
|
|
|
308
325
|
transition:grid-template-columns ease-in-out 0.2s, -ms-grid-columns ease-in-out 0.2s;
|
|
309
326
|
}
|
|
310
327
|
.eds-layout-template-portal:has(.eds-layout-template-sidebar--collapsed){
|
|
311
|
-
grid-template-columns:2rem minmax(0, 1fr);
|
|
328
|
+
--grid-template-columns:2rem minmax(0, 1fr);
|
|
312
329
|
}
|
|
313
330
|
.eds-layout-template-portal:has(> .eds-layout-template-portal__status-bar){
|
|
314
331
|
--grid-template-rows:auto 1fr;
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
export { Grid, GridItem } from './Grid';
|
|
2
2
|
export { LayoutWrapper, useLayoutValues } from './LayoutWrapper';
|
|
3
3
|
export { Flex, FlexSpacer } from './Flex';
|
|
4
|
-
export { Template
|
|
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
7
|
export type { PortalComponent, PortalMainProps, PortalProps, PortalStatusBarProps, SidebarComponent, SidebarProps, SidebarSectionProps, TemplateComponent, } from './templates';
|
|
@@ -3,11 +3,10 @@ import { PolymorphicComponentProps } from '@entur/utils';
|
|
|
3
3
|
type SidebarOwnProps = {
|
|
4
4
|
/** Toggle contrast styling for the sidebar */
|
|
5
5
|
contrast?: boolean;
|
|
6
|
-
/**
|
|
7
|
-
|
|
8
|
-
/** Controlled collapsed state */
|
|
6
|
+
/** Controlled collapsed state. When provided, the sidebar becomes
|
|
7
|
+
* collapsible and a toggle button is rendered. */
|
|
9
8
|
collapsed?: boolean;
|
|
10
|
-
/** Callback when the
|
|
9
|
+
/** Callback when the collapse toggle is clicked */
|
|
11
10
|
onCollapseToggle?: (collapsed: boolean) => void;
|
|
12
11
|
/** aria-label for the toggle button when the sidebar is collapsed
|
|
13
12
|
* @default 'Åpne sidemeny'
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { PortalComponent, PortalMainProps, PortalProps, PortalStatusBarProps } from './portal';
|
|
2
2
|
import { SidebarComponent, SidebarProps, SidebarSectionProps } from './Sidebar';
|
|
3
|
-
export { useSidebarCollapsed } from './SidebarContext';
|
|
4
3
|
export type TemplateComponent = {
|
|
5
4
|
Portal: PortalComponent;
|
|
6
5
|
};
|
package/dist/layout.cjs.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.cjs.js","sources":["../src/Contrast.tsx","../src/BaseCard.tsx","../src/NavigationCard.tsx","../src/MediaCard.tsx","../src/Badge/Badge.tsx","../src/Badge/BulletBadge.tsx","../src/Badge/NotificationBadge.tsx","../src/Badge/StatusBadge.tsx","../src/Tag.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n T extends React.ElementType = typeof defaultElement,\n>(\n { className, as, ...rest }: ContrastProps<T>,\n ref: PolymorphicRef<T>,\n): JSX.Element {\n const Element: React.ElementType = as || defaultElement;\n return (\n <ContrastContext.Provider value={true}>\n <Element\n className={classNames('eds-contrast', className)}\n ref={ref}\n {...rest}\n />\n </ContrastContext.Provider>\n );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n React.useContext(ContrastContext);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './BaseCard.scss';\n\nexport type BaseCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager Card\n * @default \"div\"\n */\n as?: 'div' | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n children?: React.ReactNode;\n};\n\nexport type BaseCardProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, BaseCardOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const BaseCard = <E extends React.ElementType = typeof defaultElement>({\n children,\n className,\n as,\n ...rest\n}: BaseCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classNames('eds-base-card', className);\n return (\n <Element className={classList} {...rest}>\n {children}\n </Element>\n );\n};\n","import React from 'react';\nimport { Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { Heading3 } from '@entur/typography';\nimport { BaseCard } from './BaseCard';\nimport './NavigationCard.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type NavigationCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager NavigationCard\n * @default 'a'\n */\n as?: 'a' | 'button' | React.ElementType;\n /** Tittelen/teksten som står i CardBox */\n title: string;\n /** Valgfritt ikon som står over tittelen */\n titleIcon?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst\n * @default false\n */\n compact?: boolean;\n /** Beskrivelse under tittel, om ikke \"compact\" er valgt */\n children?: React.ReactNode;\n /** @deprecated eksternlenke ikon er ikke lenger støttet i NavigationCard */\n externalLink?: boolean;\n};\n\nexport type NavigationCardProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, NavigationCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const NavigationCard = <\n E extends React.ElementType = typeof defaultElement,\n>({\n title,\n children,\n titleIcon,\n compact = false,\n className,\n as,\n ...rest\n}: NavigationCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classNames('eds-navigation-card', className, {\n 'eds-base-card--red-line': compact,\n 'eds-navigation-card--compact': compact,\n });\n return (\n <BaseCard as={Element} className={classList} {...rest}>\n <div className=\"eds-navigation-card-header\">\n <div className=\"eds-navigation-card-header__content\">\n {titleIcon && (\n <div\n className=\"eds-navigation-card-header__title-icon\"\n aria-hidden=\"true\"\n >\n {titleIcon}\n </div>\n )}\n <span className=\"eds-navigation-card-header__title\">\n <Heading3 as=\"span\">{title}</Heading3>\n </span>\n </div>\n {!compact && (\n <div className=\"eds-navigation-card-header__highlight\"></div>\n )}\n </div>\n {!compact && (\n <>\n <Paragraph>{children}</Paragraph>\n </>\n )}\n </BaseCard>\n );\n};\n","import React, { CSSProperties } from 'react';\nimport { Paragraph, Label, Heading3 } from '@entur/typography';\nimport classNames from 'classnames';\nimport { BaseCard } from './BaseCard';\nimport { ForwardIcon } from '@entur/icons';\nimport './MediaCard.scss';\nimport { ConditionalWrapper, PolymorphicComponentProps } from '@entur/utils';\n\nexport type MediaCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager bunnen (under media) av MediaCard\n * @default 'a'\n */\n as?: 'a' | 'button' | React.ElementType;\n /** Tittelen/teksten som står i CardBox */\n title: string;\n /** Teksten under tittelen i MediaCard */\n description?: React.ReactNode;\n /** Kategori (eller lignende) som vises over tittelen */\n category?: string;\n /** Ekstra klassenavn */\n className?: string;\n /** Det du skulle ønske som media (f.eks. bilder eller video) */\n children?: React.ReactNode;\n /** Styling som sendes til komponenten */\n style?: CSSProperties;\n /** Hvilken heading som brukes for tittelen.\n * Blir kun satt hvis description også er satt.\n * @default 'h2'\n */\n headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n /** Skjul pil-ikonet nederst til høyre\n * @default false\n */\n hideArrow?: boolean;\n /** Om MediaCard skal vises horisontalt eller vertikalt\n * @default 'vertical'\n */\n orientation?: 'horizontal' | 'vertical';\n /** Props som sendes til wrapper-elementet i stedet for lenke-elementet */\n wrapperProps?: React.HTMLAttributes<HTMLElement>;\n /** @deprecated Denne prop-en har ikke lenger en funksjon.\n * Hvis du trenger å legge til props på wrapper-elementet, bruk 'wrapperProps'-prop-en\n */\n wholeCardAsElement?: boolean;\n};\n\nexport type MediaCardProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, MediaCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const MediaCard = <E extends React.ElementType = typeof defaultElement>({\n title,\n description,\n children,\n className,\n category,\n style,\n as,\n headingLevel = 'h2',\n wholeCardAsElement: whole,\n hideArrow,\n wrapperProps,\n orientation,\n ...rest\n}: MediaCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const Heading = Heading3;\n\n const _wrapperProps = whole\n ? { ...wrapperProps, ...rest }\n : { ...wrapperProps };\n const classList = classNames('eds-base-card, eds-media-card', className, {\n 'eds-media-card--horizontal': orientation === 'horizontal',\n });\n\n return (\n <BaseCard className={classList} style={style} {..._wrapperProps}>\n <div className=\"eds-media-card__media\">{children}</div>\n <div className=\"eds-media-card__text\">\n {category && (\n <Label className=\"eds-media-card__text__category\">{category}</Label>\n )}\n {/* we only want a heading wrapper when we also have description text */}\n <ConditionalWrapper\n condition={description !== undefined}\n wrapper={(children: React.ReactNode) => (\n <Heading as={headingLevel} className=\"eds-media-card__text__title\">\n {children}\n </Heading>\n )}\n >\n <Element\n tabIndex={0}\n className=\"eds-media-card__text__title-link\"\n {...rest}\n >\n {title}\n </Element>\n </ConditionalWrapper>\n {description !== undefined && <Paragraph>{description}</Paragraph>}\n {!hideArrow && (\n <ForwardIcon\n className=\"eds-media-card__arrow-icon\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </BaseCard>\n );\n};\n\nexport default MediaCard;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\nimport './Badge.scss';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\nexport type BadgeTypes = 'status' | 'bullet' | 'notification';\n\nexport type BadgeOwnProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: 'span' | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Om 0 skal vises\n * @default false\n */\n showZero?: boolean;\n /** Hva som er høyeste tallet før det legges på \"+\"\n * @default ++\n */\n max?: number;\n type?: BadgeTypes;\n /** @deprecated Bruk `hide` i stedet */\n invisible?: boolean;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type BadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, BadgeOwnProps>;\n\nexport type BadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: BadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const Badge: BadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n children,\n className,\n max = 99,\n variant,\n showZero = false,\n invisible: invisibleProp = false,\n hide: hideProp = false,\n as,\n type = 'status',\n ...rest\n }: BadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n\n const computedHide =\n hideProp ||\n invisibleProp ||\n (children === 0 && !showZero) ||\n children == null;\n\n let displayValue;\n if (typeof children === 'number') {\n displayValue = children > max ? `${max}+` : children;\n } else {\n displayValue = children;\n }\n\n const classList = classNames(\n className,\n 'eds-badge',\n {\n 'eds-badge--hide': computedHide,\n 'eds-badge--show-zero': showZero,\n },\n `eds-badge--variant-${variant}`,\n `eds-badge--type-${type}`,\n );\n\n return (\n <Element className={classList} ref={ref} {...rest}>\n {displayValue}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype BulletBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type BulletBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, BulletBadgeBaseProps>;\n\nexport type BulletBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: BulletBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const BulletBadge: BulletBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: BulletBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"bullet\" />;\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype NotificationBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Om 0 skal vises\n * @default false\n */\n showZero?: boolean;\n /** Hva som er høyeste tallet før det legges på \"+\"\n * @default ++\n */\n max?: number;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type NotificationBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, NotificationBadgeBaseProps>;\n\nexport type NotificationBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: NotificationBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const NotificationBadge: NotificationBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: NotificationBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"notification\" />;\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype StatusBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type StatusBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, StatusBadgeBaseProps>;\n\nexport type StatusBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: StatusBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const StatusBadge: StatusBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: StatusBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"status\" />;\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './Tag.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type TagOwnProps = {\n /** HTML-elementet eller React-komponenten som rendres\n * @default 'div'\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /**Mindre og mer kompakt Tag, til f.eks. tabellbruk\n * @default false\n */\n compact?: boolean;\n children: React.ReactNode;\n};\n\nexport type TagProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, TagOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Tag = <E extends React.ElementType = typeof defaultElement>({\n className,\n children,\n compact,\n as,\n ...rest\n}: TagProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const childrenArray = React.Children.toArray(children);\n const hasLeadingIcon =\n childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n const hasTrailingIcon =\n childrenArray.length > 1 &&\n typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n return (\n <Element\n className={classNames('eds-tag', className, {\n 'eds-tag--leading-icon': hasLeadingIcon,\n 'eds-tag--trailing-icon': hasTrailingIcon,\n 'eds-tag--compact': compact,\n })}\n {...rest}\n >\n {children}\n </Element>\n );\n};\n","import './styles.scss';\nimport { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('layout', 'typography');\n\nexport * from './Contrast';\nexport * from './NavigationCard';\nexport * from './BaseCard';\nexport * from './MediaCard';\nexport * from './Badge/Badge';\nexport * from './Badge/BulletBadge';\nexport * from './Badge/NotificationBadge';\nexport * from './Badge/StatusBadge';\nexport * from './Tag';\n"],"names":["defaultElement","Contrast","jsx","jsxs","Heading3","Fragment","Paragraph","Label","ConditionalWrapper","children","ForwardIcon","warnAboutMissingStyles"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"layout.cjs.js","sources":["../src/Contrast.tsx","../src/BaseCard.tsx","../src/NavigationCard.tsx","../src/MediaCard.tsx","../src/Badge/Badge.tsx","../src/Badge/BulletBadge.tsx","../src/Badge/NotificationBadge.tsx","../src/Badge/StatusBadge.tsx","../src/Tag.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n T extends React.ElementType = typeof defaultElement,\n>(\n { className, as, ...rest }: ContrastProps<T>,\n ref: PolymorphicRef<T>,\n): JSX.Element {\n const Element: React.ElementType = as || defaultElement;\n return (\n <ContrastContext.Provider value={true}>\n <Element\n className={classNames('eds-contrast', className)}\n ref={ref}\n {...rest}\n />\n </ContrastContext.Provider>\n );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n React.useContext(ContrastContext);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './BaseCard.scss';\n\nexport type BaseCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager Card\n * @default \"div\"\n */\n as?: 'div' | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n children?: React.ReactNode;\n};\n\nexport type BaseCardProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, BaseCardOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const BaseCard = <E extends React.ElementType = typeof defaultElement>({\n children,\n className,\n as,\n ...rest\n}: BaseCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classNames('eds-base-card', className);\n return (\n <Element className={classList} {...rest}>\n {children}\n </Element>\n );\n};\n","import React from 'react';\nimport { Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { Heading3 } from '@entur/typography';\nimport { BaseCard } from './BaseCard';\nimport './NavigationCard.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type NavigationCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager NavigationCard\n * @default 'a'\n */\n as?: 'a' | 'button' | React.ElementType;\n /** Tittelen/teksten som står i CardBox */\n title: string;\n /** Valgfritt ikon som står over tittelen */\n titleIcon?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst\n * @default false\n */\n compact?: boolean;\n /** Beskrivelse under tittel, om ikke \"compact\" er valgt */\n children?: React.ReactNode;\n /** @deprecated eksternlenke ikon er ikke lenger støttet i NavigationCard */\n externalLink?: boolean;\n};\n\nexport type NavigationCardProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, NavigationCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const NavigationCard = <\n E extends React.ElementType = typeof defaultElement,\n>({\n title,\n children,\n titleIcon,\n compact = false,\n className,\n as,\n ...rest\n}: NavigationCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classNames('eds-navigation-card', className, {\n 'eds-base-card--red-line': compact,\n 'eds-navigation-card--compact': compact,\n });\n return (\n <BaseCard as={Element} className={classList} {...rest}>\n <div className=\"eds-navigation-card-header\">\n <div className=\"eds-navigation-card-header__content\">\n {titleIcon && (\n <div\n className=\"eds-navigation-card-header__title-icon\"\n aria-hidden=\"true\"\n >\n {titleIcon}\n </div>\n )}\n <span className=\"eds-navigation-card-header__title\">\n <Heading3 as=\"span\">{title}</Heading3>\n </span>\n </div>\n {!compact && (\n <div className=\"eds-navigation-card-header__highlight\"></div>\n )}\n </div>\n {!compact && (\n <>\n <Paragraph>{children}</Paragraph>\n </>\n )}\n </BaseCard>\n );\n};\n","import React, { CSSProperties } from 'react';\nimport { Heading3, Label, Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { BaseCard } from './BaseCard';\nimport { ForwardIcon } from '@entur/icons';\nimport './MediaCard.scss';\nimport { ConditionalWrapper, PolymorphicComponentProps } from '@entur/utils';\n\nexport type MediaCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager bunnen (under media) av MediaCard\n * @default 'a'\n */\n as?: 'a' | 'button' | React.ElementType;\n /** Tittelen/teksten som står i CardBox */\n title: string;\n /** Teksten under tittelen i MediaCard */\n description?: React.ReactNode;\n /** Kategori (eller lignende) som vises over tittelen */\n category?: string;\n /** Ekstra klassenavn */\n className?: string;\n /** Det du skulle ønske som media (f.eks. bilder eller video) */\n children?: React.ReactNode;\n /** Styling som sendes til komponenten */\n style?: CSSProperties;\n /** Hvilken heading som brukes for tittelen.\n * Blir kun satt hvis description også er satt.\n * @default 'h2'\n */\n headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n /** Skjul pil-ikonet nederst til høyre\n * @default false\n */\n hideArrow?: boolean;\n /** Om MediaCard skal vises horisontalt eller vertikalt\n * @default 'vertical'\n */\n orientation?: 'horizontal' | 'vertical';\n /** Props som sendes til wrapper-elementet i stedet for lenke-elementet */\n wrapperProps?: React.HTMLAttributes<HTMLElement>;\n /** @deprecated Denne prop-en har ikke lenger en funksjon.\n * Hvis du trenger å legge til props på wrapper-elementet, bruk 'wrapperProps'-prop-en\n */\n wholeCardAsElement?: boolean;\n};\n\nexport type MediaCardProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, MediaCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const MediaCard = <E extends React.ElementType = typeof defaultElement>({\n title,\n description,\n children,\n className,\n category,\n style,\n as,\n headingLevel = 'h2',\n wholeCardAsElement: whole,\n hideArrow,\n wrapperProps,\n orientation,\n ...rest\n}: MediaCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const Heading = Heading3;\n\n const _wrapperProps = whole\n ? { ...wrapperProps, ...rest }\n : { ...wrapperProps };\n const classList = classNames('eds-base-card, eds-media-card', className, {\n 'eds-media-card--horizontal': orientation === 'horizontal',\n });\n\n return (\n <BaseCard className={classList} style={style} {..._wrapperProps}>\n <div className=\"eds-media-card__media\">{children}</div>\n <div className=\"eds-media-card__text\">\n {category && (\n <Label className=\"eds-media-card__text__category\">{category}</Label>\n )}\n {/* we only want a heading wrapper when we also have description text */}\n <ConditionalWrapper\n condition={description !== undefined}\n wrapper={(children: React.ReactNode) => (\n <Heading as={headingLevel} className=\"eds-media-card__text__title\">\n {children}\n </Heading>\n )}\n >\n <Element\n tabIndex={0}\n className=\"eds-media-card__text__title-link\"\n {...rest}\n >\n {title}\n </Element>\n </ConditionalWrapper>\n {description !== undefined && <Paragraph>{description}</Paragraph>}\n {!hideArrow && (\n <ForwardIcon\n className=\"eds-media-card__arrow-icon\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </BaseCard>\n );\n};\n\nexport default MediaCard;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\nimport './Badge.scss';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\nexport type BadgeTypes = 'status' | 'bullet' | 'notification';\n\nexport type BadgeOwnProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: 'span' | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Om 0 skal vises\n * @default false\n */\n showZero?: boolean;\n /** Hva som er høyeste tallet før det legges på \"+\"\n * @default ++\n */\n max?: number;\n type?: BadgeTypes;\n /** @deprecated Bruk `hide` i stedet */\n invisible?: boolean;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type BadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, BadgeOwnProps>;\n\nexport type BadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: BadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const Badge: BadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n children,\n className,\n max = 99,\n variant,\n showZero = false,\n invisible: invisibleProp = false,\n hide: hideProp = false,\n as,\n type = 'status',\n ...rest\n }: BadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n\n const computedHide =\n hideProp ||\n invisibleProp ||\n (children === 0 && !showZero) ||\n children == null;\n\n let displayValue;\n if (typeof children === 'number') {\n displayValue = children > max ? `${max}+` : children;\n } else {\n displayValue = children;\n }\n\n const classList = classNames(\n className,\n 'eds-badge',\n {\n 'eds-badge--hide': computedHide,\n 'eds-badge--show-zero': showZero,\n },\n `eds-badge--variant-${variant}`,\n `eds-badge--type-${type}`,\n );\n\n return (\n <Element className={classList} ref={ref} {...rest}>\n {displayValue}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype BulletBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type BulletBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, BulletBadgeBaseProps>;\n\nexport type BulletBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: BulletBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const BulletBadge: BulletBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: BulletBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"bullet\" />;\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype NotificationBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Om 0 skal vises\n * @default false\n */\n showZero?: boolean;\n /** Hva som er høyeste tallet før det legges på \"+\"\n * @default ++\n */\n max?: number;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type NotificationBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, NotificationBadgeBaseProps>;\n\nexport type NotificationBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: NotificationBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const NotificationBadge: NotificationBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: NotificationBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"notification\" />;\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype StatusBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type StatusBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, StatusBadgeBaseProps>;\n\nexport type StatusBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: StatusBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const StatusBadge: StatusBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: StatusBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"status\" />;\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './Tag.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type TagOwnProps = {\n /** HTML-elementet eller React-komponenten som rendres\n * @default 'div'\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /**Mindre og mer kompakt Tag, til f.eks. tabellbruk\n * @default false\n */\n compact?: boolean;\n children: React.ReactNode;\n};\n\nexport type TagProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, TagOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Tag = <E extends React.ElementType = typeof defaultElement>({\n className,\n children,\n compact,\n as,\n ...rest\n}: TagProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const childrenArray = React.Children.toArray(children);\n const hasLeadingIcon =\n childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n const hasTrailingIcon =\n childrenArray.length > 1 &&\n typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n return (\n <Element\n className={classNames('eds-tag', className, {\n 'eds-tag--leading-icon': hasLeadingIcon,\n 'eds-tag--trailing-icon': hasTrailingIcon,\n 'eds-tag--compact': compact,\n })}\n {...rest}\n >\n {children}\n </Element>\n );\n};\n","import './styles.scss';\nimport { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('layout', 'typography');\n\nexport * from './Contrast';\nexport * from './NavigationCard';\nexport * from './BaseCard';\nexport * from './MediaCard';\nexport * from './Badge/Badge';\nexport * from './Badge/BulletBadge';\nexport * from './Badge/NotificationBadge';\nexport * from './Badge/StatusBadge';\nexport * from './Tag';\n"],"names":["defaultElement","Contrast","jsx","jsxs","Heading3","Fragment","Paragraph","Label","ConditionalWrapper","children","ForwardIcon","warnAboutMissingStyles"],"mappings":";;;;;;;;AAkBA,MAAMA,mBAAiB;AAEhB,MAAM,WAA8B,MAAM,WAAW,SAASC,UAGnE,EAAE,WAAW,IAAI,GAAG,KAAA,GACpB,KACa;AACb,QAAM,UAA6B,MAAMD;AACzC,SACEE,2BAAAA,IAAC,gBAAgB,UAAhB,EAAyB,OAAO,MAC/B,UAAAA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,gBAAgB,SAAS;AAAA,MAC/C;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAEM,MAAM,kBAAkB,MAAM,cAAuB,KAAK;AAE1D,MAAM,cAA6B,MACxC,MAAM,WAAW,eAAe;ACvBlC,MAAMF,mBAAiB;AAEhB,MAAM,WAAW,CAAsD;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,UAA6B,MAAMA;AACzC,QAAM,YAAY,WAAW,iBAAiB,SAAS;AACvD,wCACG,SAAA,EAAQ,WAAW,WAAY,GAAG,MAChC,UACH;AAEJ;ACAA,MAAMA,mBAAiB;AAEhB,MAAM,iBAAiB,CAE5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA2C;AACzC,QAAM,UAA6B,MAAMA;AACzC,QAAM,YAAY,WAAW,uBAAuB,WAAW;AAAA,IAC7D,2BAA2B;AAAA,IAC3B,gCAAgC;AAAA,EAAA,CACjC;AACD,yCACG,UAAA,EAAS,IAAI,SAAS,WAAW,WAAY,GAAG,MAC/C,UAAA;AAAA,IAAAG,2BAAAA,KAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,uCACZ,UAAA;AAAA,QAAA,aACCD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,eAAY;AAAA,YAEX,UAAA;AAAA,UAAA;AAAA,QAAA;AAAA,QAGLA,2BAAAA,IAAC,UAAK,WAAU,qCACd,yCAACE,WAAAA,UAAA,EAAS,IAAG,QAAQ,UAAA,MAAA,CAAM,EAAA,CAC7B;AAAA,MAAA,GACF;AAAA,MACC,CAAC,WACAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,wCAAA,CAAwC;AAAA,IAAA,GAE3D;AAAA,IACC,CAAC,WACAA,+BAAAG,WAAAA,UAAA,EACE,UAAAH,2BAAAA,IAACI,WAAAA,WAAA,EAAW,UAAS,EAAA,CACvB;AAAA,EAAA,GAEJ;AAEJ;AC5BA,MAAMN,mBAAiB;AAEhB,MAAM,YAAY,CAAsD;AAAA,EAC7E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf,oBAAoB;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAsC;AACpC,QAAM,UAA6B,MAAMA;AACzC,QAAM,UAAUI,WAAAA;AAEhB,QAAM,gBAAgB,QAClB,EAAE,GAAG,cAAc,GAAG,KAAA,IACtB,EAAE,GAAG,aAAA;AACT,QAAM,YAAY,WAAW,iCAAiC,WAAW;AAAA,IACvE,8BAA8B,gBAAgB;AAAA,EAAA,CAC/C;AAED,yCACG,UAAA,EAAS,WAAW,WAAW,OAAe,GAAG,eAChD,UAAA;AAAA,IAAAF,2BAAAA,IAAC,OAAA,EAAI,WAAU,yBAAyB,SAAA,CAAS;AAAA,IACjDC,2BAAAA,KAAC,OAAA,EAAI,WAAU,wBACZ,UAAA;AAAA,MAAA,YACCD,2BAAAA,IAACK,kBAAA,EAAM,WAAU,kCAAkC,UAAA,UAAS;AAAA,MAG9DL,2BAAAA;AAAAA,QAACM,MAAAA;AAAAA,QAAA;AAAA,UACC,WAAW,gBAAgB;AAAA,UAC3B,SAAS,CAACC,cACRP,2BAAAA,IAAC,SAAA,EAAQ,IAAI,cAAc,WAAU,+BAClC,UAAAO,UAAAA,CACH;AAAA,UAGF,UAAAP,2BAAAA;AAAAA,YAAC;AAAA,YAAA;AAAA,cACC,UAAU;AAAA,cACV,WAAU;AAAA,cACT,GAAG;AAAA,cAEH,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,MAED,gBAAgB,UAAaA,2BAAAA,IAACI,WAAAA,WAAA,EAAW,UAAA,aAAY;AAAA,MACrD,CAAC,aACAJ,2BAAAA;AAAAA,QAACQ,MAAAA;AAAAA,QAAA;AAAA,UACC,WAAU;AAAA,UACV,eAAY;AAAA,QAAA;AAAA,MAAA;AAAA,IACd,EAAA,CAEJ;AAAA,EAAA,GACF;AAEJ;AC9DA,MAAMV,mBAAiB;AAEhB,MAAM,QAAwB,MAAM;AAAA,EACzC,CACE;AAAA,IACE;AAAA,IACA;AAAA,IACA,MAAM;AAAA,IACN;AAAA,IACA,WAAW;AAAA,IACX,WAAW,gBAAgB;AAAA,IAC3B,MAAM,WAAW;AAAA,IACjB;AAAA,IACA,OAAO;AAAA,IACP,GAAG;AAAA,EAAA,GAEL,QACG;AACH,UAAM,UAA6B,MAAMA;AAEzC,UAAM,eACJ,YACA,iBACC,aAAa,KAAK,CAAC,YACpB,YAAY;AAEd,QAAI;AACJ,QAAI,OAAO,aAAa,UAAU;AAChC,qBAAe,WAAW,MAAM,GAAG,GAAG,MAAM;AAAA,IAC9C,OAAO;AACL,qBAAe;AAAA,IACjB;AAEA,UAAM,YAAY;AAAA,MAChB;AAAA,MACA;AAAA,MACA;AAAA,QACE,mBAAmB;AAAA,QACnB,wBAAwB;AAAA,MAAA;AAAA,MAE1B,sBAAsB,OAAO;AAAA,MAC7B,mBAAmB,IAAI;AAAA,IAAA;AAGzB,0CACG,SAAA,EAAQ,WAAW,WAAW,KAAW,GAAG,MAC1C,UAAA,cACH;AAAA,EAEJ;AACF;ACjEA,MAAMA,mBAAiB;AAEhB,MAAM,cAAoC,MAAM;AAAA,EACrD,CACE,OACA,QACG;AACH,UAAM,UAAU,MAAM,MAAMA;AAE5B,WAAOE,2BAAAA,IAAC,SAAM,IAAI,SAAU,GAAG,OAAO,KAAU,MAAK,UAAS;AAAA,EAChE;AACF;ACHA,MAAMF,mBAAiB;AAEhB,MAAM,oBAAgD,MAAM;AAAA,EACjE,CACE,OACA,QACG;AACH,UAAM,UAAU,MAAM,MAAMA;AAE5B,WAAOE,2BAAAA,IAAC,SAAM,IAAI,SAAU,GAAG,OAAO,KAAU,MAAK,gBAAe;AAAA,EACtE;AACF;ACnBA,MAAMF,mBAAiB;AAEhB,MAAM,cAAoC,MAAM;AAAA,EACrD,CACE,OACA,QACG;AACH,UAAM,UAAU,MAAM,MAAMA;AAE5B,WAAOE,2BAAAA,IAAC,SAAM,IAAI,SAAU,GAAG,OAAO,KAAU,MAAK,UAAS;AAAA,EAChE;AACF;ACvBA,MAAM,iBAAiB;AAEhB,MAAM,MAAM,CAAsD;AAAA,EACvE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAgC;AAC9B,QAAM,UAA6B,MAAM;AACzC,QAAM,gBAAgB,MAAM,SAAS,QAAQ,QAAQ;AACrD,QAAM,iBACJ,cAAc,SAAS,KAAK,OAAO,cAAc,CAAC,MAAM;AAC1D,QAAM,kBACJ,cAAc,SAAS,KACvB,OAAO,cAAc,cAAc,SAAS,CAAC,MAAM;AAErD,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,WAAW,WAAW;AAAA,QAC1C,yBAAyB;AAAA,QACzB,0BAA0B;AAAA,QAC1B,oBAAoB;AAAA,MAAA,CACrB;AAAA,MACA,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AC/CAS,MAAAA,uBAAuB,UAAU,YAAY;;;;;;;;;;;;"}
|
package/dist/layout.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.esm.js","sources":["../src/Contrast.tsx","../src/BaseCard.tsx","../src/NavigationCard.tsx","../src/MediaCard.tsx","../src/Badge/Badge.tsx","../src/Badge/BulletBadge.tsx","../src/Badge/NotificationBadge.tsx","../src/Badge/StatusBadge.tsx","../src/Tag.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n T extends React.ElementType = typeof defaultElement,\n>(\n { className, as, ...rest }: ContrastProps<T>,\n ref: PolymorphicRef<T>,\n): JSX.Element {\n const Element: React.ElementType = as || defaultElement;\n return (\n <ContrastContext.Provider value={true}>\n <Element\n className={classNames('eds-contrast', className)}\n ref={ref}\n {...rest}\n />\n </ContrastContext.Provider>\n );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n React.useContext(ContrastContext);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './BaseCard.scss';\n\nexport type BaseCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager Card\n * @default \"div\"\n */\n as?: 'div' | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n children?: React.ReactNode;\n};\n\nexport type BaseCardProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, BaseCardOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const BaseCard = <E extends React.ElementType = typeof defaultElement>({\n children,\n className,\n as,\n ...rest\n}: BaseCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classNames('eds-base-card', className);\n return (\n <Element className={classList} {...rest}>\n {children}\n </Element>\n );\n};\n","import React from 'react';\nimport { Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { Heading3 } from '@entur/typography';\nimport { BaseCard } from './BaseCard';\nimport './NavigationCard.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type NavigationCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager NavigationCard\n * @default 'a'\n */\n as?: 'a' | 'button' | React.ElementType;\n /** Tittelen/teksten som står i CardBox */\n title: string;\n /** Valgfritt ikon som står over tittelen */\n titleIcon?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst\n * @default false\n */\n compact?: boolean;\n /** Beskrivelse under tittel, om ikke \"compact\" er valgt */\n children?: React.ReactNode;\n /** @deprecated eksternlenke ikon er ikke lenger støttet i NavigationCard */\n externalLink?: boolean;\n};\n\nexport type NavigationCardProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, NavigationCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const NavigationCard = <\n E extends React.ElementType = typeof defaultElement,\n>({\n title,\n children,\n titleIcon,\n compact = false,\n className,\n as,\n ...rest\n}: NavigationCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classNames('eds-navigation-card', className, {\n 'eds-base-card--red-line': compact,\n 'eds-navigation-card--compact': compact,\n });\n return (\n <BaseCard as={Element} className={classList} {...rest}>\n <div className=\"eds-navigation-card-header\">\n <div className=\"eds-navigation-card-header__content\">\n {titleIcon && (\n <div\n className=\"eds-navigation-card-header__title-icon\"\n aria-hidden=\"true\"\n >\n {titleIcon}\n </div>\n )}\n <span className=\"eds-navigation-card-header__title\">\n <Heading3 as=\"span\">{title}</Heading3>\n </span>\n </div>\n {!compact && (\n <div className=\"eds-navigation-card-header__highlight\"></div>\n )}\n </div>\n {!compact && (\n <>\n <Paragraph>{children}</Paragraph>\n </>\n )}\n </BaseCard>\n );\n};\n","import React, { CSSProperties } from 'react';\nimport { Paragraph, Label, Heading3 } from '@entur/typography';\nimport classNames from 'classnames';\nimport { BaseCard } from './BaseCard';\nimport { ForwardIcon } from '@entur/icons';\nimport './MediaCard.scss';\nimport { ConditionalWrapper, PolymorphicComponentProps } from '@entur/utils';\n\nexport type MediaCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager bunnen (under media) av MediaCard\n * @default 'a'\n */\n as?: 'a' | 'button' | React.ElementType;\n /** Tittelen/teksten som står i CardBox */\n title: string;\n /** Teksten under tittelen i MediaCard */\n description?: React.ReactNode;\n /** Kategori (eller lignende) som vises over tittelen */\n category?: string;\n /** Ekstra klassenavn */\n className?: string;\n /** Det du skulle ønske som media (f.eks. bilder eller video) */\n children?: React.ReactNode;\n /** Styling som sendes til komponenten */\n style?: CSSProperties;\n /** Hvilken heading som brukes for tittelen.\n * Blir kun satt hvis description også er satt.\n * @default 'h2'\n */\n headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n /** Skjul pil-ikonet nederst til høyre\n * @default false\n */\n hideArrow?: boolean;\n /** Om MediaCard skal vises horisontalt eller vertikalt\n * @default 'vertical'\n */\n orientation?: 'horizontal' | 'vertical';\n /** Props som sendes til wrapper-elementet i stedet for lenke-elementet */\n wrapperProps?: React.HTMLAttributes<HTMLElement>;\n /** @deprecated Denne prop-en har ikke lenger en funksjon.\n * Hvis du trenger å legge til props på wrapper-elementet, bruk 'wrapperProps'-prop-en\n */\n wholeCardAsElement?: boolean;\n};\n\nexport type MediaCardProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, MediaCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const MediaCard = <E extends React.ElementType = typeof defaultElement>({\n title,\n description,\n children,\n className,\n category,\n style,\n as,\n headingLevel = 'h2',\n wholeCardAsElement: whole,\n hideArrow,\n wrapperProps,\n orientation,\n ...rest\n}: MediaCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const Heading = Heading3;\n\n const _wrapperProps = whole\n ? { ...wrapperProps, ...rest }\n : { ...wrapperProps };\n const classList = classNames('eds-base-card, eds-media-card', className, {\n 'eds-media-card--horizontal': orientation === 'horizontal',\n });\n\n return (\n <BaseCard className={classList} style={style} {..._wrapperProps}>\n <div className=\"eds-media-card__media\">{children}</div>\n <div className=\"eds-media-card__text\">\n {category && (\n <Label className=\"eds-media-card__text__category\">{category}</Label>\n )}\n {/* we only want a heading wrapper when we also have description text */}\n <ConditionalWrapper\n condition={description !== undefined}\n wrapper={(children: React.ReactNode) => (\n <Heading as={headingLevel} className=\"eds-media-card__text__title\">\n {children}\n </Heading>\n )}\n >\n <Element\n tabIndex={0}\n className=\"eds-media-card__text__title-link\"\n {...rest}\n >\n {title}\n </Element>\n </ConditionalWrapper>\n {description !== undefined && <Paragraph>{description}</Paragraph>}\n {!hideArrow && (\n <ForwardIcon\n className=\"eds-media-card__arrow-icon\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </BaseCard>\n );\n};\n\nexport default MediaCard;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\nimport './Badge.scss';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\nexport type BadgeTypes = 'status' | 'bullet' | 'notification';\n\nexport type BadgeOwnProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: 'span' | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Om 0 skal vises\n * @default false\n */\n showZero?: boolean;\n /** Hva som er høyeste tallet før det legges på \"+\"\n * @default ++\n */\n max?: number;\n type?: BadgeTypes;\n /** @deprecated Bruk `hide` i stedet */\n invisible?: boolean;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type BadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, BadgeOwnProps>;\n\nexport type BadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: BadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const Badge: BadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n children,\n className,\n max = 99,\n variant,\n showZero = false,\n invisible: invisibleProp = false,\n hide: hideProp = false,\n as,\n type = 'status',\n ...rest\n }: BadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n\n const computedHide =\n hideProp ||\n invisibleProp ||\n (children === 0 && !showZero) ||\n children == null;\n\n let displayValue;\n if (typeof children === 'number') {\n displayValue = children > max ? `${max}+` : children;\n } else {\n displayValue = children;\n }\n\n const classList = classNames(\n className,\n 'eds-badge',\n {\n 'eds-badge--hide': computedHide,\n 'eds-badge--show-zero': showZero,\n },\n `eds-badge--variant-${variant}`,\n `eds-badge--type-${type}`,\n );\n\n return (\n <Element className={classList} ref={ref} {...rest}>\n {displayValue}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype BulletBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type BulletBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, BulletBadgeBaseProps>;\n\nexport type BulletBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: BulletBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const BulletBadge: BulletBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: BulletBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"bullet\" />;\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype NotificationBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Om 0 skal vises\n * @default false\n */\n showZero?: boolean;\n /** Hva som er høyeste tallet før det legges på \"+\"\n * @default ++\n */\n max?: number;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type NotificationBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, NotificationBadgeBaseProps>;\n\nexport type NotificationBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: NotificationBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const NotificationBadge: NotificationBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: NotificationBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"notification\" />;\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype StatusBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type StatusBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, StatusBadgeBaseProps>;\n\nexport type StatusBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: StatusBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const StatusBadge: StatusBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: StatusBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"status\" />;\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './Tag.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type TagOwnProps = {\n /** HTML-elementet eller React-komponenten som rendres\n * @default 'div'\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /**Mindre og mer kompakt Tag, til f.eks. tabellbruk\n * @default false\n */\n compact?: boolean;\n children: React.ReactNode;\n};\n\nexport type TagProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, TagOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Tag = <E extends React.ElementType = typeof defaultElement>({\n className,\n children,\n compact,\n as,\n ...rest\n}: TagProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const childrenArray = React.Children.toArray(children);\n const hasLeadingIcon =\n childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n const hasTrailingIcon =\n childrenArray.length > 1 &&\n typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n return (\n <Element\n className={classNames('eds-tag', className, {\n 'eds-tag--leading-icon': hasLeadingIcon,\n 'eds-tag--trailing-icon': hasTrailingIcon,\n 'eds-tag--compact': compact,\n })}\n {...rest}\n >\n {children}\n </Element>\n );\n};\n","import './styles.scss';\nimport { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('layout', 'typography');\n\nexport * from './Contrast';\nexport * from './NavigationCard';\nexport * from './BaseCard';\nexport * from './MediaCard';\nexport * from './Badge/Badge';\nexport * from './Badge/BulletBadge';\nexport * from './Badge/NotificationBadge';\nexport * from './Badge/StatusBadge';\nexport * from './Tag';\n"],"names":["defaultElement","Contrast","children"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"layout.esm.js","sources":["../src/Contrast.tsx","../src/BaseCard.tsx","../src/NavigationCard.tsx","../src/MediaCard.tsx","../src/Badge/Badge.tsx","../src/Badge/BulletBadge.tsx","../src/Badge/NotificationBadge.tsx","../src/Badge/StatusBadge.tsx","../src/Tag.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n T extends React.ElementType = typeof defaultElement,\n>(\n { className, as, ...rest }: ContrastProps<T>,\n ref: PolymorphicRef<T>,\n): JSX.Element {\n const Element: React.ElementType = as || defaultElement;\n return (\n <ContrastContext.Provider value={true}>\n <Element\n className={classNames('eds-contrast', className)}\n ref={ref}\n {...rest}\n />\n </ContrastContext.Provider>\n );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n React.useContext(ContrastContext);\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './BaseCard.scss';\n\nexport type BaseCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager Card\n * @default \"div\"\n */\n as?: 'div' | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n children?: React.ReactNode;\n};\n\nexport type BaseCardProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, BaseCardOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const BaseCard = <E extends React.ElementType = typeof defaultElement>({\n children,\n className,\n as,\n ...rest\n}: BaseCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classNames('eds-base-card', className);\n return (\n <Element className={classList} {...rest}>\n {children}\n </Element>\n );\n};\n","import React from 'react';\nimport { Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { Heading3 } from '@entur/typography';\nimport { BaseCard } from './BaseCard';\nimport './NavigationCard.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type NavigationCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager NavigationCard\n * @default 'a'\n */\n as?: 'a' | 'button' | React.ElementType;\n /** Tittelen/teksten som står i CardBox */\n title: string;\n /** Valgfritt ikon som står over tittelen */\n titleIcon?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n /** Lager en mer kompakt NavigationCard, uten ikon og beskrivende tekst\n * @default false\n */\n compact?: boolean;\n /** Beskrivelse under tittel, om ikke \"compact\" er valgt */\n children?: React.ReactNode;\n /** @deprecated eksternlenke ikon er ikke lenger støttet i NavigationCard */\n externalLink?: boolean;\n};\n\nexport type NavigationCardProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, NavigationCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const NavigationCard = <\n E extends React.ElementType = typeof defaultElement,\n>({\n title,\n children,\n titleIcon,\n compact = false,\n className,\n as,\n ...rest\n}: NavigationCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classNames('eds-navigation-card', className, {\n 'eds-base-card--red-line': compact,\n 'eds-navigation-card--compact': compact,\n });\n return (\n <BaseCard as={Element} className={classList} {...rest}>\n <div className=\"eds-navigation-card-header\">\n <div className=\"eds-navigation-card-header__content\">\n {titleIcon && (\n <div\n className=\"eds-navigation-card-header__title-icon\"\n aria-hidden=\"true\"\n >\n {titleIcon}\n </div>\n )}\n <span className=\"eds-navigation-card-header__title\">\n <Heading3 as=\"span\">{title}</Heading3>\n </span>\n </div>\n {!compact && (\n <div className=\"eds-navigation-card-header__highlight\"></div>\n )}\n </div>\n {!compact && (\n <>\n <Paragraph>{children}</Paragraph>\n </>\n )}\n </BaseCard>\n );\n};\n","import React, { CSSProperties } from 'react';\nimport { Heading3, Label, Paragraph } from '@entur/typography';\nimport classNames from 'classnames';\nimport { BaseCard } from './BaseCard';\nimport { ForwardIcon } from '@entur/icons';\nimport './MediaCard.scss';\nimport { ConditionalWrapper, PolymorphicComponentProps } from '@entur/utils';\n\nexport type MediaCardOwnProps = {\n /** HTML-elementet eller React-komponenten som lager bunnen (under media) av MediaCard\n * @default 'a'\n */\n as?: 'a' | 'button' | React.ElementType;\n /** Tittelen/teksten som står i CardBox */\n title: string;\n /** Teksten under tittelen i MediaCard */\n description?: React.ReactNode;\n /** Kategori (eller lignende) som vises over tittelen */\n category?: string;\n /** Ekstra klassenavn */\n className?: string;\n /** Det du skulle ønske som media (f.eks. bilder eller video) */\n children?: React.ReactNode;\n /** Styling som sendes til komponenten */\n style?: CSSProperties;\n /** Hvilken heading som brukes for tittelen.\n * Blir kun satt hvis description også er satt.\n * @default 'h2'\n */\n headingLevel?: 'h2' | 'h3' | 'h4' | 'h5' | 'h6';\n /** Skjul pil-ikonet nederst til høyre\n * @default false\n */\n hideArrow?: boolean;\n /** Om MediaCard skal vises horisontalt eller vertikalt\n * @default 'vertical'\n */\n orientation?: 'horizontal' | 'vertical';\n /** Props som sendes til wrapper-elementet i stedet for lenke-elementet */\n wrapperProps?: React.HTMLAttributes<HTMLElement>;\n /** @deprecated Denne prop-en har ikke lenger en funksjon.\n * Hvis du trenger å legge til props på wrapper-elementet, bruk 'wrapperProps'-prop-en\n */\n wholeCardAsElement?: boolean;\n};\n\nexport type MediaCardProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, MediaCardOwnProps>;\n\nconst defaultElement = 'a';\n\nexport const MediaCard = <E extends React.ElementType = typeof defaultElement>({\n title,\n description,\n children,\n className,\n category,\n style,\n as,\n headingLevel = 'h2',\n wholeCardAsElement: whole,\n hideArrow,\n wrapperProps,\n orientation,\n ...rest\n}: MediaCardProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const Heading = Heading3;\n\n const _wrapperProps = whole\n ? { ...wrapperProps, ...rest }\n : { ...wrapperProps };\n const classList = classNames('eds-base-card, eds-media-card', className, {\n 'eds-media-card--horizontal': orientation === 'horizontal',\n });\n\n return (\n <BaseCard className={classList} style={style} {..._wrapperProps}>\n <div className=\"eds-media-card__media\">{children}</div>\n <div className=\"eds-media-card__text\">\n {category && (\n <Label className=\"eds-media-card__text__category\">{category}</Label>\n )}\n {/* we only want a heading wrapper when we also have description text */}\n <ConditionalWrapper\n condition={description !== undefined}\n wrapper={(children: React.ReactNode) => (\n <Heading as={headingLevel} className=\"eds-media-card__text__title\">\n {children}\n </Heading>\n )}\n >\n <Element\n tabIndex={0}\n className=\"eds-media-card__text__title-link\"\n {...rest}\n >\n {title}\n </Element>\n </ConditionalWrapper>\n {description !== undefined && <Paragraph>{description}</Paragraph>}\n {!hideArrow && (\n <ForwardIcon\n className=\"eds-media-card__arrow-icon\"\n aria-hidden=\"true\"\n />\n )}\n </div>\n </BaseCard>\n );\n};\n\nexport default MediaCard;\n","import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\nimport './Badge.scss';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\nexport type BadgeTypes = 'status' | 'bullet' | 'notification';\n\nexport type BadgeOwnProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: 'span' | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Om 0 skal vises\n * @default false\n */\n showZero?: boolean;\n /** Hva som er høyeste tallet før det legges på \"+\"\n * @default ++\n */\n max?: number;\n type?: BadgeTypes;\n /** @deprecated Bruk `hide` i stedet */\n invisible?: boolean;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type BadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, BadgeOwnProps>;\n\nexport type BadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: BadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const Badge: BadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n {\n children,\n className,\n max = 99,\n variant,\n showZero = false,\n invisible: invisibleProp = false,\n hide: hideProp = false,\n as,\n type = 'status',\n ...rest\n }: BadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element: React.ElementType = as || defaultElement;\n\n const computedHide =\n hideProp ||\n invisibleProp ||\n (children === 0 && !showZero) ||\n children == null;\n\n let displayValue;\n if (typeof children === 'number') {\n displayValue = children > max ? `${max}+` : children;\n } else {\n displayValue = children;\n }\n\n const classList = classNames(\n className,\n 'eds-badge',\n {\n 'eds-badge--hide': computedHide,\n 'eds-badge--show-zero': showZero,\n },\n `eds-badge--variant-${variant}`,\n `eds-badge--type-${type}`,\n );\n\n return (\n <Element className={classList} ref={ref} {...rest}>\n {displayValue}\n </Element>\n );\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype BulletBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type BulletBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, BulletBadgeBaseProps>;\n\nexport type BulletBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: BulletBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const BulletBadge: BulletBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: BulletBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"bullet\" />;\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype NotificationBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Om 0 skal vises\n * @default false\n */\n showZero?: boolean;\n /** Hva som er høyeste tallet før det legges på \"+\"\n * @default ++\n */\n max?: number;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type NotificationBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, NotificationBadgeBaseProps>;\n\nexport type NotificationBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: NotificationBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const NotificationBadge: NotificationBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: NotificationBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"notification\" />;\n },\n);\n","import React from 'react';\nimport { Badge } from './Badge';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\nimport { VariantType } from '@entur/utils';\n\n/** @deprecated use variant=\"information\" instead */\nconst info = 'info';\n/** @deprecated use variant=\"negative\" instead */\nconst danger = 'danger';\n\ntype StatusBadgeBaseProps = {\n /** Elementet som wrapper badgen\n * @default \"span\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Elementet som badge vil legges relativt til */\n children: React.ReactNode;\n /** Hvilken type badge man vil ha */\n variant: 'primary' | 'neutral' | VariantType | typeof danger | typeof info;\n /** Skjul badge */\n hide?: boolean;\n};\n\nexport type StatusBadgeProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, StatusBadgeBaseProps>;\n\nexport type StatusBadgeComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: StatusBadgeProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'span';\n\nexport const StatusBadge: StatusBadgeComponent = React.forwardRef(\n <T extends React.ElementType = typeof defaultElement>(\n props: StatusBadgeProps<T>,\n ref: PolymorphicRef<T>,\n ) => {\n const Element = props.as || defaultElement;\n // @ts-expect-error type error due to props not being BadgeOwnProps\n return <Badge as={Element} {...props} ref={ref} type=\"status\" />;\n },\n);\n","import React from 'react';\nimport classNames from 'classnames';\nimport './Tag.scss';\nimport { PolymorphicComponentProps } from '@entur/utils';\n\nexport type TagOwnProps = {\n /** HTML-elementet eller React-komponenten som rendres\n * @default 'div'\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /**Mindre og mer kompakt Tag, til f.eks. tabellbruk\n * @default false\n */\n compact?: boolean;\n children: React.ReactNode;\n};\n\nexport type TagProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, TagOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Tag = <E extends React.ElementType = typeof defaultElement>({\n className,\n children,\n compact,\n as,\n ...rest\n}: TagProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const childrenArray = React.Children.toArray(children);\n const hasLeadingIcon =\n childrenArray.length > 1 && typeof childrenArray[0] !== 'string';\n const hasTrailingIcon =\n childrenArray.length > 1 &&\n typeof childrenArray[childrenArray.length - 1] !== 'string';\n\n return (\n <Element\n className={classNames('eds-tag', className, {\n 'eds-tag--leading-icon': hasLeadingIcon,\n 'eds-tag--trailing-icon': hasTrailingIcon,\n 'eds-tag--compact': compact,\n })}\n {...rest}\n >\n {children}\n </Element>\n );\n};\n","import './styles.scss';\nimport { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('layout', 'typography');\n\nexport * from './Contrast';\nexport * from './NavigationCard';\nexport * from './BaseCard';\nexport * from './MediaCard';\nexport * from './Badge/Badge';\nexport * from './Badge/BulletBadge';\nexport * from './Badge/NotificationBadge';\nexport * from './Badge/StatusBadge';\nexport * from './Tag';\n"],"names":["defaultElement","Contrast","children"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/layout",
|
|
3
|
-
"version": "3.
|
|
3
|
+
"version": "3.6.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/layout.cjs.js",
|
|
6
6
|
"module": "dist/layout.esm.js",
|
|
@@ -43,18 +43,17 @@
|
|
|
43
43
|
"build": "yarn build:main && yarn build:beta",
|
|
44
44
|
"build:main": "vite build",
|
|
45
45
|
"build:beta": "vite build --config vite.config.beta.ts",
|
|
46
|
-
"test": "jest"
|
|
47
|
-
"lint": "eslint src"
|
|
46
|
+
"test": "jest"
|
|
48
47
|
},
|
|
49
48
|
"peerDependencies": {
|
|
50
49
|
"react": ">=16.8.0",
|
|
51
50
|
"react-dom": ">=16.8.0"
|
|
52
51
|
},
|
|
53
52
|
"dependencies": {
|
|
54
|
-
"@entur/icons": "^8.4.
|
|
55
|
-
"@entur/tokens": "^3.22.
|
|
56
|
-
"@entur/typography": "^2.1.
|
|
57
|
-
"@entur/utils": "^0.13.
|
|
53
|
+
"@entur/icons": "^8.4.5",
|
|
54
|
+
"@entur/tokens": "^3.22.4",
|
|
55
|
+
"@entur/typography": "^2.1.6",
|
|
56
|
+
"@entur/utils": "^0.13.3",
|
|
58
57
|
"classnames": "^2.5.1"
|
|
59
58
|
},
|
|
60
59
|
"devDependencies": {
|
|
@@ -62,7 +61,6 @@
|
|
|
62
61
|
"@testing-library/react": "^10.4.9",
|
|
63
62
|
"@testing-library/user-event": "14.6.1",
|
|
64
63
|
"@vitejs/plugin-react": "^5.0.1",
|
|
65
|
-
"eslint": "^7.32.0",
|
|
66
64
|
"jest": "^29.0.0",
|
|
67
65
|
"jest-environment-jsdom": "^29.0.0",
|
|
68
66
|
"ts-jest": "^29.0.0",
|
|
@@ -70,5 +68,5 @@
|
|
|
70
68
|
"vite": "^7.1.3",
|
|
71
69
|
"vite-plugin-dts": "^4.5.4"
|
|
72
70
|
},
|
|
73
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "f103a7b4fef3dc0ce47ce4b0e06a8d4062ba1cc5"
|
|
74
72
|
}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const jsxRuntime = require("react/jsx-runtime");
|
|
4
|
-
const React = require("react");
|
|
5
|
-
const classNames = require("classnames");
|
|
6
|
-
const defaultElement = "div";
|
|
7
|
-
const Contrast = React.forwardRef(function Contrast2({ className, as, ...rest }, ref) {
|
|
8
|
-
const Element = as || defaultElement;
|
|
9
|
-
return /* @__PURE__ */ jsxRuntime.jsx(ContrastContext.Provider, { value: true, children: /* @__PURE__ */ jsxRuntime.jsx(
|
|
10
|
-
Element,
|
|
11
|
-
{
|
|
12
|
-
className: classNames("eds-contrast", className),
|
|
13
|
-
ref,
|
|
14
|
-
...rest
|
|
15
|
-
}
|
|
16
|
-
) });
|
|
17
|
-
});
|
|
18
|
-
const ContrastContext = React.createContext(false);
|
|
19
|
-
exports.Contrast = Contrast;
|
|
20
|
-
exports.ContrastContext = ContrastContext;
|
|
21
|
-
//# sourceMappingURL=Contrast.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Contrast.cjs","sources":["../../../src/Contrast.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n T extends React.ElementType = typeof defaultElement,\n>(\n { className, as, ...rest }: ContrastProps<T>,\n ref: PolymorphicRef<T>,\n): JSX.Element {\n const Element: React.ElementType = as || defaultElement;\n return (\n <ContrastContext.Provider value={true}>\n <Element\n className={classNames('eds-contrast', className)}\n ref={ref}\n {...rest}\n />\n </ContrastContext.Provider>\n );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n React.useContext(ContrastContext);\n"],"names":["Contrast","jsx"],"mappings":";;;;;AAkBA,MAAM,iBAAiB;AAEhB,MAAM,WAA8B,MAAM,WAAW,SAASA,UAGnE,EAAE,WAAW,IAAI,GAAG,KAAA,GACpB,KACa;AACb,QAAM,UAA6B,MAAM;AACzC,SACEC,2BAAAA,IAAC,gBAAgB,UAAhB,EAAyB,OAAO,MAC/B,UAAAA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,gBAAgB,SAAS;AAAA,MAC/C;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAEM,MAAM,kBAAkB,MAAM,cAAuB,KAAK;;;"}
|
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
-
const React = require("react");
|
|
4
|
-
const SidebarContext = React.createContext({
|
|
5
|
-
isCollapsed: false
|
|
6
|
-
});
|
|
7
|
-
const useSidebarCollapsed = () => React.useContext(SidebarContext);
|
|
8
|
-
exports.SidebarContext = SidebarContext;
|
|
9
|
-
exports.useSidebarCollapsed = useSidebarCollapsed;
|
|
10
|
-
//# sourceMappingURL=SidebarContext.cjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"SidebarContext.cjs","sources":["../../../../src/beta/templates/SidebarContext.tsx"],"sourcesContent":["import React from 'react';\n\nexport const SidebarContext = React.createContext<{\n isCollapsed: boolean;\n}>({\n isCollapsed: false,\n});\n\n/** Hook to read the collapsed state of the nearest `Template.Portal.Sidebar`.\n * Returns `{ isCollapsed: false }` when used outside a collapsible sidebar. */\nexport const useSidebarCollapsed: () => { isCollapsed: boolean } = () =>\n React.useContext(SidebarContext);\n"],"names":[],"mappings":";;;AAEO,MAAM,iBAAiB,MAAM,cAEjC;AAAA,EACD,aAAa;AACf,CAAC;AAIM,MAAM,sBAAsD,MACjE,MAAM,WAAW,cAAc;;;"}
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { jsx } from "react/jsx-runtime";
|
|
2
|
-
import React from "react";
|
|
3
|
-
import classNames from "classnames";
|
|
4
|
-
const defaultElement = "div";
|
|
5
|
-
const Contrast = React.forwardRef(function Contrast2({ className, as, ...rest }, ref) {
|
|
6
|
-
const Element = as || defaultElement;
|
|
7
|
-
return /* @__PURE__ */ jsx(ContrastContext.Provider, { value: true, children: /* @__PURE__ */ jsx(
|
|
8
|
-
Element,
|
|
9
|
-
{
|
|
10
|
-
className: classNames("eds-contrast", className),
|
|
11
|
-
ref,
|
|
12
|
-
...rest
|
|
13
|
-
}
|
|
14
|
-
) });
|
|
15
|
-
});
|
|
16
|
-
const ContrastContext = React.createContext(false);
|
|
17
|
-
export {
|
|
18
|
-
Contrast,
|
|
19
|
-
ContrastContext
|
|
20
|
-
};
|
|
21
|
-
//# sourceMappingURL=Contrast.mjs.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Contrast.mjs","sources":["../../../src/Contrast.tsx"],"sourcesContent":["import React from 'react';\nimport classNames from 'classnames';\nimport { PolymorphicComponentPropsWithRef, PolymorphicRef } from '@entur/utils';\n\nexport type ContrastBaseProps = {\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type ContrastProps<T extends React.ElementType> =\n PolymorphicComponentPropsWithRef<T, ContrastBaseProps>;\n\nexport type ContrastComponent = <\n T extends React.ElementType = typeof defaultElement,\n>(\n props: ContrastProps<T>,\n) => React.ReactElement | null;\n\nconst defaultElement = 'div';\n\nexport const Contrast: ContrastComponent = React.forwardRef(function Contrast<\n T extends React.ElementType = typeof defaultElement,\n>(\n { className, as, ...rest }: ContrastProps<T>,\n ref: PolymorphicRef<T>,\n): JSX.Element {\n const Element: React.ElementType = as || defaultElement;\n return (\n <ContrastContext.Provider value={true}>\n <Element\n className={classNames('eds-contrast', className)}\n ref={ref}\n {...rest}\n />\n </ContrastContext.Provider>\n );\n});\n\nexport const ContrastContext = React.createContext<boolean>(false);\n\nexport const useContrast: () => boolean = () =>\n React.useContext(ContrastContext);\n"],"names":["Contrast"],"mappings":";;;AAkBA,MAAM,iBAAiB;AAEhB,MAAM,WAA8B,MAAM,WAAW,SAASA,UAGnE,EAAE,WAAW,IAAI,GAAG,KAAA,GACpB,KACa;AACb,QAAM,UAA6B,MAAM;AACzC,SACE,oBAAC,gBAAgB,UAAhB,EAAyB,OAAO,MAC/B,UAAA;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,gBAAgB,SAAS;AAAA,MAC/C;AAAA,MACC,GAAG;AAAA,IAAA;AAAA,EAAA,GAER;AAEJ,CAAC;AAEM,MAAM,kBAAkB,MAAM,cAAuB,KAAK;"}
|