@entur/layout 3.4.0-beta.0 → 3.4.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.
|
@@ -13,6 +13,9 @@ const Grid = ({
|
|
|
13
13
|
rowGap,
|
|
14
14
|
columnGap,
|
|
15
15
|
autoFlow = "row",
|
|
16
|
+
align,
|
|
17
|
+
justify,
|
|
18
|
+
alignContent,
|
|
16
19
|
height,
|
|
17
20
|
as,
|
|
18
21
|
className,
|
|
@@ -27,6 +30,9 @@ const Grid = ({
|
|
|
27
30
|
const resolvedRowGap = useResponsiveValue.useResponsiveValue(rowGap);
|
|
28
31
|
const resolvedColumnGap = useResponsiveValue.useResponsiveValue(columnGap);
|
|
29
32
|
const resolvedAutoFlow = useResponsiveValue.useResponsiveValue(autoFlow) ?? "row";
|
|
33
|
+
const resolvedAlign = useResponsiveValue.useResponsiveValue(align);
|
|
34
|
+
const resolvedJustify = useResponsiveValue.useResponsiveValue(justify);
|
|
35
|
+
const resolvedAlignContent = useResponsiveValue.useResponsiveValue(alignContent);
|
|
30
36
|
const gridStyle = {
|
|
31
37
|
...resolvedTemplateColumns && {
|
|
32
38
|
"--grid-template-columns": resolvedTemplateColumns
|
|
@@ -37,6 +43,15 @@ const Grid = ({
|
|
|
37
43
|
...resolvedAutoFlow && {
|
|
38
44
|
"--grid-auto-flow": resolvedAutoFlow
|
|
39
45
|
},
|
|
46
|
+
...resolvedAlign && {
|
|
47
|
+
"--grid-align-items": resolvedAlign
|
|
48
|
+
},
|
|
49
|
+
...resolvedJustify && {
|
|
50
|
+
"--grid-justify-content": resolvedJustify
|
|
51
|
+
},
|
|
52
|
+
...resolvedAlignContent && {
|
|
53
|
+
"--grid-align-content": resolvedAlignContent
|
|
54
|
+
},
|
|
40
55
|
...resolvedGap && {
|
|
41
56
|
"--grid-gap": utils.getSpacingValue(resolvedGap)
|
|
42
57
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.cjs","sources":["../../../../src/beta/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport classNames from 'classnames';\n\nimport './Grid.scss';\n\nexport type GridOwnProps = {\n /** CSS grid-template-columns value (supports responsive objects)\n * @default \"repeat(12, 1fr)\"\n */\n templateColumns?: string | ResponsiveValue<string>;\n /** Spacing between grid items (supports responsive objects)\n * @default \"m\"\n */\n gap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Vertical spacing between grid rows (supports responsive objects) */\n rowGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Horizontal spacing between grid columns (supports responsive objects) */\n columnGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** CSS grid-template-rows value (supports responsive objects) */\n templateRows?: string | ResponsiveValue<string>;\n /** CSS grid-auto-flow value (supports responsive objects)\n * @default \"row\"\n */\n autoFlow?:\n | 'row'\n | 'column'\n | 'dense'\n | 'row dense'\n | 'column dense'\n | ResponsiveValue<\n 'row' | 'column' | 'dense' | 'row dense' | 'column dense'\n >;\n /** The height of the grid container */\n height?: string;\n /** HTML element or React component used to render the Grid\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Grid container */\n children?: React.ReactNode;\n};\n\nexport type GridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Grid = <E extends React.ElementType = typeof defaultElement>({\n templateColumns,\n templateRows,\n gap = 'm',\n rowGap,\n columnGap,\n autoFlow = 'row',\n height,\n as,\n className,\n children,\n style,\n ...rest\n}: GridProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n\n const resolvedTemplateColumns =\n useResponsiveValue(templateColumns) ?? 'repeat(12, 1fr)';\n const resolvedTemplateRows = useResponsiveValue(templateRows);\n const resolvedGap = useResponsiveValue(gap);\n const resolvedRowGap = useResponsiveValue(rowGap);\n const resolvedColumnGap = useResponsiveValue(columnGap);\n const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? 'row';\n\n const gridStyle: React.CSSProperties = {\n ...(resolvedTemplateColumns && {\n '--grid-template-columns': resolvedTemplateColumns,\n }),\n ...(resolvedTemplateRows && {\n '--grid-template-rows': resolvedTemplateRows,\n }),\n ...(resolvedAutoFlow && {\n '--grid-auto-flow': resolvedAutoFlow,\n }),\n ...(resolvedGap && {\n '--grid-gap': getSpacingValue(resolvedGap),\n }),\n ...(resolvedRowGap && {\n '--grid-row-gap': getSpacingValue(resolvedRowGap),\n }),\n ...(resolvedColumnGap && {\n '--grid-column-gap': getSpacingValue(resolvedColumnGap),\n }),\n ...(height && {\n '--grid-height': height,\n }),\n ...style,\n } as React.CSSProperties;\n\n return (\n <Element\n className={classNames('eds-layout-grid', className)}\n style={gridStyle}\n {...rest}\n >\n {children}\n </Element>\n );\n};\n"],"names":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;
|
|
1
|
+
{"version":3,"file":"Grid.cjs","sources":["../../../../src/beta/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport classNames from 'classnames';\n\nimport './Grid.scss';\n\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\n\nexport type GridOwnProps = {\n /** CSS grid-template-columns value (supports responsive objects)\n * @default \"repeat(12, 1fr)\"\n */\n templateColumns?: string | ResponsiveValue<string>;\n /** Spacing between grid items (supports responsive objects)\n * @default \"m\"\n */\n gap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Vertical spacing between grid rows (supports responsive objects) */\n rowGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Horizontal spacing between grid columns (supports responsive objects) */\n columnGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** CSS grid-template-rows value (supports responsive objects) */\n templateRows?: string | ResponsiveValue<string>;\n /** CSS grid-auto-flow value (supports responsive objects)\n * @default \"row\"\n */\n autoFlow?:\n | 'row'\n | 'column'\n | 'dense'\n | 'row dense'\n | 'column dense'\n | ResponsiveValue<\n 'row' | 'column' | 'dense' | 'row dense' | 'column dense'\n >;\n /** CSS align-items value (supports responsive objects) */\n align?: AlignItems | ResponsiveValue<AlignItems>;\n /** CSS justify-content value (supports responsive objects) */\n justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n /** CSS align-content value (supports responsive objects) */\n alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n /** The height of the grid container */\n height?: string;\n /** HTML element or React component used to render the Grid\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Grid container */\n children?: React.ReactNode;\n};\n\nexport type GridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Grid = <E extends React.ElementType = typeof defaultElement>({\n templateColumns,\n templateRows,\n gap = 'm',\n rowGap,\n columnGap,\n autoFlow = 'row',\n align,\n justify,\n alignContent,\n height,\n as,\n className,\n children,\n style,\n ...rest\n}: GridProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n\n const resolvedTemplateColumns =\n useResponsiveValue(templateColumns) ?? 'repeat(12, 1fr)';\n const resolvedTemplateRows = useResponsiveValue(templateRows);\n const resolvedGap = useResponsiveValue(gap);\n const resolvedRowGap = useResponsiveValue(rowGap);\n const resolvedColumnGap = useResponsiveValue(columnGap);\n const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? 'row';\n const resolvedAlign = useResponsiveValue(align);\n const resolvedJustify = useResponsiveValue(justify);\n const resolvedAlignContent = useResponsiveValue(alignContent);\n\n const gridStyle: React.CSSProperties = {\n ...(resolvedTemplateColumns && {\n '--grid-template-columns': resolvedTemplateColumns,\n }),\n ...(resolvedTemplateRows && {\n '--grid-template-rows': resolvedTemplateRows,\n }),\n ...(resolvedAutoFlow && {\n '--grid-auto-flow': resolvedAutoFlow,\n }),\n ...(resolvedAlign && {\n '--grid-align-items': resolvedAlign,\n }),\n ...(resolvedJustify && {\n '--grid-justify-content': resolvedJustify,\n }),\n ...(resolvedAlignContent && {\n '--grid-align-content': resolvedAlignContent,\n }),\n ...(resolvedGap && {\n '--grid-gap': getSpacingValue(resolvedGap),\n }),\n ...(resolvedRowGap && {\n '--grid-row-gap': getSpacingValue(resolvedRowGap),\n }),\n ...(resolvedColumnGap && {\n '--grid-column-gap': getSpacingValue(resolvedColumnGap),\n }),\n ...(height && {\n '--grid-height': height,\n }),\n ...style,\n } as React.CSSProperties;\n\n return (\n <Element\n className={classNames('eds-layout-grid', className)}\n style={gridStyle}\n {...rest}\n >\n {children}\n </Element>\n );\n};\n"],"names":["useResponsiveValue","getSpacingValue","jsx"],"mappings":";;;;;;;AA6DA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,CAAsD;AAAA,EACxE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,UAA6B,MAAM;AAEzC,QAAM,0BACJA,mBAAAA,mBAAmB,eAAe,KAAK;AACzC,QAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAC5D,QAAM,cAAcA,mBAAAA,mBAAmB,GAAG;AAC1C,QAAM,iBAAiBA,mBAAAA,mBAAmB,MAAM;AAChD,QAAM,oBAAoBA,mBAAAA,mBAAmB,SAAS;AACtD,QAAM,mBAAmBA,mBAAAA,mBAAmB,QAAQ,KAAK;AACzD,QAAM,gBAAgBA,mBAAAA,mBAAmB,KAAK;AAC9C,QAAM,kBAAkBA,mBAAAA,mBAAmB,OAAO;AAClD,QAAM,uBAAuBA,mBAAAA,mBAAmB,YAAY;AAE5D,QAAM,YAAiC;AAAA,IACrC,GAAI,2BAA2B;AAAA,MAC7B,2BAA2B;AAAA,IAAA;AAAA,IAE7B,GAAI,wBAAwB;AAAA,MAC1B,wBAAwB;AAAA,IAAA;AAAA,IAE1B,GAAI,oBAAoB;AAAA,MACtB,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAI,iBAAiB;AAAA,MACnB,sBAAsB;AAAA,IAAA;AAAA,IAExB,GAAI,mBAAmB;AAAA,MACrB,0BAA0B;AAAA,IAAA;AAAA,IAE5B,GAAI,wBAAwB;AAAA,MAC1B,wBAAwB;AAAA,IAAA;AAAA,IAE1B,GAAI,eAAe;AAAA,MACjB,cAAcC,MAAAA,gBAAgB,WAAW;AAAA,IAAA;AAAA,IAE3C,GAAI,kBAAkB;AAAA,MACpB,kBAAkBA,MAAAA,gBAAgB,cAAc;AAAA,IAAA;AAAA,IAElD,GAAI,qBAAqB;AAAA,MACvB,qBAAqBA,MAAAA,gBAAgB,iBAAiB;AAAA,IAAA;AAAA,IAExD,GAAI,UAAU;AAAA,MACZ,iBAAiB;AAAA,IAAA;AAAA,IAEnB,GAAG;AAAA,EAAA;AAGL,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;;"}
|
|
@@ -11,6 +11,9 @@ const Grid = ({
|
|
|
11
11
|
rowGap,
|
|
12
12
|
columnGap,
|
|
13
13
|
autoFlow = "row",
|
|
14
|
+
align,
|
|
15
|
+
justify,
|
|
16
|
+
alignContent,
|
|
14
17
|
height,
|
|
15
18
|
as,
|
|
16
19
|
className,
|
|
@@ -25,6 +28,9 @@ const Grid = ({
|
|
|
25
28
|
const resolvedRowGap = useResponsiveValue(rowGap);
|
|
26
29
|
const resolvedColumnGap = useResponsiveValue(columnGap);
|
|
27
30
|
const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? "row";
|
|
31
|
+
const resolvedAlign = useResponsiveValue(align);
|
|
32
|
+
const resolvedJustify = useResponsiveValue(justify);
|
|
33
|
+
const resolvedAlignContent = useResponsiveValue(alignContent);
|
|
28
34
|
const gridStyle = {
|
|
29
35
|
...resolvedTemplateColumns && {
|
|
30
36
|
"--grid-template-columns": resolvedTemplateColumns
|
|
@@ -35,6 +41,15 @@ const Grid = ({
|
|
|
35
41
|
...resolvedAutoFlow && {
|
|
36
42
|
"--grid-auto-flow": resolvedAutoFlow
|
|
37
43
|
},
|
|
44
|
+
...resolvedAlign && {
|
|
45
|
+
"--grid-align-items": resolvedAlign
|
|
46
|
+
},
|
|
47
|
+
...resolvedJustify && {
|
|
48
|
+
"--grid-justify-content": resolvedJustify
|
|
49
|
+
},
|
|
50
|
+
...resolvedAlignContent && {
|
|
51
|
+
"--grid-align-content": resolvedAlignContent
|
|
52
|
+
},
|
|
38
53
|
...resolvedGap && {
|
|
39
54
|
"--grid-gap": getSpacingValue(resolvedGap)
|
|
40
55
|
},
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.mjs","sources":["../../../../src/beta/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport classNames from 'classnames';\n\nimport './Grid.scss';\n\nexport type GridOwnProps = {\n /** CSS grid-template-columns value (supports responsive objects)\n * @default \"repeat(12, 1fr)\"\n */\n templateColumns?: string | ResponsiveValue<string>;\n /** Spacing between grid items (supports responsive objects)\n * @default \"m\"\n */\n gap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Vertical spacing between grid rows (supports responsive objects) */\n rowGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Horizontal spacing between grid columns (supports responsive objects) */\n columnGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** CSS grid-template-rows value (supports responsive objects) */\n templateRows?: string | ResponsiveValue<string>;\n /** CSS grid-auto-flow value (supports responsive objects)\n * @default \"row\"\n */\n autoFlow?:\n | 'row'\n | 'column'\n | 'dense'\n | 'row dense'\n | 'column dense'\n | ResponsiveValue<\n 'row' | 'column' | 'dense' | 'row dense' | 'column dense'\n >;\n /** The height of the grid container */\n height?: string;\n /** HTML element or React component used to render the Grid\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Grid container */\n children?: React.ReactNode;\n};\n\nexport type GridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Grid = <E extends React.ElementType = typeof defaultElement>({\n templateColumns,\n templateRows,\n gap = 'm',\n rowGap,\n columnGap,\n autoFlow = 'row',\n height,\n as,\n className,\n children,\n style,\n ...rest\n}: GridProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n\n const resolvedTemplateColumns =\n useResponsiveValue(templateColumns) ?? 'repeat(12, 1fr)';\n const resolvedTemplateRows = useResponsiveValue(templateRows);\n const resolvedGap = useResponsiveValue(gap);\n const resolvedRowGap = useResponsiveValue(rowGap);\n const resolvedColumnGap = useResponsiveValue(columnGap);\n const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? 'row';\n\n const gridStyle: React.CSSProperties = {\n ...(resolvedTemplateColumns && {\n '--grid-template-columns': resolvedTemplateColumns,\n }),\n ...(resolvedTemplateRows && {\n '--grid-template-rows': resolvedTemplateRows,\n }),\n ...(resolvedAutoFlow && {\n '--grid-auto-flow': resolvedAutoFlow,\n }),\n ...(resolvedGap && {\n '--grid-gap': getSpacingValue(resolvedGap),\n }),\n ...(resolvedRowGap && {\n '--grid-row-gap': getSpacingValue(resolvedRowGap),\n }),\n ...(resolvedColumnGap && {\n '--grid-column-gap': getSpacingValue(resolvedColumnGap),\n }),\n ...(height && {\n '--grid-height': height,\n }),\n ...style,\n } as React.CSSProperties;\n\n return (\n <Element\n className={classNames('eds-layout-grid', className)}\n style={gridStyle}\n {...rest}\n >\n {children}\n </Element>\n );\n};\n"],"names":[],"mappings":";;;;;
|
|
1
|
+
{"version":3,"file":"Grid.mjs","sources":["../../../../src/beta/Grid/Grid.tsx"],"sourcesContent":["import React from 'react';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport { getSpacingValue } from '../LayoutWrapper/utils';\nimport type { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';\nimport { useResponsiveValue } from '../LayoutWrapper/useResponsiveValue';\nimport classNames from 'classnames';\n\nimport './Grid.scss';\n\ntype AlignItems = React.CSSProperties['alignItems'];\ntype JustifyContent = React.CSSProperties['justifyContent'];\ntype AlignContent = React.CSSProperties['alignContent'];\n\nexport type GridOwnProps = {\n /** CSS grid-template-columns value (supports responsive objects)\n * @default \"repeat(12, 1fr)\"\n */\n templateColumns?: string | ResponsiveValue<string>;\n /** Spacing between grid items (supports responsive objects)\n * @default \"m\"\n */\n gap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Vertical spacing between grid rows (supports responsive objects) */\n rowGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** Horizontal spacing between grid columns (supports responsive objects) */\n columnGap?: GridSpacingValue | ResponsiveValue<GridSpacingValue>;\n /** CSS grid-template-rows value (supports responsive objects) */\n templateRows?: string | ResponsiveValue<string>;\n /** CSS grid-auto-flow value (supports responsive objects)\n * @default \"row\"\n */\n autoFlow?:\n | 'row'\n | 'column'\n | 'dense'\n | 'row dense'\n | 'column dense'\n | ResponsiveValue<\n 'row' | 'column' | 'dense' | 'row dense' | 'column dense'\n >;\n /** CSS align-items value (supports responsive objects) */\n align?: AlignItems | ResponsiveValue<AlignItems>;\n /** CSS justify-content value (supports responsive objects) */\n justify?: JustifyContent | ResponsiveValue<JustifyContent>;\n /** CSS align-content value (supports responsive objects) */\n alignContent?: AlignContent | ResponsiveValue<AlignContent>;\n /** The height of the grid container */\n height?: string;\n /** HTML element or React component used to render the Grid\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Additional class names */\n className?: string;\n /** Content of the Grid container */\n children?: React.ReactNode;\n};\n\nexport type GridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const Grid = <E extends React.ElementType = typeof defaultElement>({\n templateColumns,\n templateRows,\n gap = 'm',\n rowGap,\n columnGap,\n autoFlow = 'row',\n align,\n justify,\n alignContent,\n height,\n as,\n className,\n children,\n style,\n ...rest\n}: GridProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n\n const resolvedTemplateColumns =\n useResponsiveValue(templateColumns) ?? 'repeat(12, 1fr)';\n const resolvedTemplateRows = useResponsiveValue(templateRows);\n const resolvedGap = useResponsiveValue(gap);\n const resolvedRowGap = useResponsiveValue(rowGap);\n const resolvedColumnGap = useResponsiveValue(columnGap);\n const resolvedAutoFlow = useResponsiveValue(autoFlow) ?? 'row';\n const resolvedAlign = useResponsiveValue(align);\n const resolvedJustify = useResponsiveValue(justify);\n const resolvedAlignContent = useResponsiveValue(alignContent);\n\n const gridStyle: React.CSSProperties = {\n ...(resolvedTemplateColumns && {\n '--grid-template-columns': resolvedTemplateColumns,\n }),\n ...(resolvedTemplateRows && {\n '--grid-template-rows': resolvedTemplateRows,\n }),\n ...(resolvedAutoFlow && {\n '--grid-auto-flow': resolvedAutoFlow,\n }),\n ...(resolvedAlign && {\n '--grid-align-items': resolvedAlign,\n }),\n ...(resolvedJustify && {\n '--grid-justify-content': resolvedJustify,\n }),\n ...(resolvedAlignContent && {\n '--grid-align-content': resolvedAlignContent,\n }),\n ...(resolvedGap && {\n '--grid-gap': getSpacingValue(resolvedGap),\n }),\n ...(resolvedRowGap && {\n '--grid-row-gap': getSpacingValue(resolvedRowGap),\n }),\n ...(resolvedColumnGap && {\n '--grid-column-gap': getSpacingValue(resolvedColumnGap),\n }),\n ...(height && {\n '--grid-height': height,\n }),\n ...style,\n } as React.CSSProperties;\n\n return (\n <Element\n className={classNames('eds-layout-grid', className)}\n style={gridStyle}\n {...rest}\n >\n {children}\n </Element>\n );\n};\n"],"names":[],"mappings":";;;;;AA6DA,MAAM,iBAAiB;AAEhB,MAAM,OAAO,CAAsD;AAAA,EACxE;AAAA,EACA;AAAA,EACA,MAAM;AAAA,EACN;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAiC;AAC/B,QAAM,UAA6B,MAAM;AAEzC,QAAM,0BACJ,mBAAmB,eAAe,KAAK;AACzC,QAAM,uBAAuB,mBAAmB,YAAY;AAC5D,QAAM,cAAc,mBAAmB,GAAG;AAC1C,QAAM,iBAAiB,mBAAmB,MAAM;AAChD,QAAM,oBAAoB,mBAAmB,SAAS;AACtD,QAAM,mBAAmB,mBAAmB,QAAQ,KAAK;AACzD,QAAM,gBAAgB,mBAAmB,KAAK;AAC9C,QAAM,kBAAkB,mBAAmB,OAAO;AAClD,QAAM,uBAAuB,mBAAmB,YAAY;AAE5D,QAAM,YAAiC;AAAA,IACrC,GAAI,2BAA2B;AAAA,MAC7B,2BAA2B;AAAA,IAAA;AAAA,IAE7B,GAAI,wBAAwB;AAAA,MAC1B,wBAAwB;AAAA,IAAA;AAAA,IAE1B,GAAI,oBAAoB;AAAA,MACtB,oBAAoB;AAAA,IAAA;AAAA,IAEtB,GAAI,iBAAiB;AAAA,MACnB,sBAAsB;AAAA,IAAA;AAAA,IAExB,GAAI,mBAAmB;AAAA,MACrB,0BAA0B;AAAA,IAAA;AAAA,IAE5B,GAAI,wBAAwB;AAAA,MAC1B,wBAAwB;AAAA,IAAA;AAAA,IAE1B,GAAI,eAAe;AAAA,MACjB,cAAc,gBAAgB,WAAW;AAAA,IAAA;AAAA,IAE3C,GAAI,kBAAkB;AAAA,MACpB,kBAAkB,gBAAgB,cAAc;AAAA,IAAA;AAAA,IAElD,GAAI,qBAAqB;AAAA,MACvB,qBAAqB,gBAAgB,iBAAiB;AAAA,IAAA;AAAA,IAExD,GAAI,UAAU;AAAA,MACZ,iBAAiB;AAAA,IAAA;AAAA,IAEnB,GAAG;AAAA,EAAA;AAGL,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,WAAW,mBAAmB,SAAS;AAAA,MAClD,OAAO;AAAA,MACN,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
|
|
@@ -70,6 +70,16 @@
|
|
|
70
70
|
grid-template-rows:var(--grid-template-rows);
|
|
71
71
|
grid-auto-flow:row;
|
|
72
72
|
grid-auto-flow:var(--grid-auto-flow, row);
|
|
73
|
+
-webkit-box-align:var(--grid-align-items);
|
|
74
|
+
-webkit-align-items:var(--grid-align-items);
|
|
75
|
+
-moz-box-align:var(--grid-align-items);
|
|
76
|
+
align-items:var(--grid-align-items);
|
|
77
|
+
-webkit-box-pack:var(--grid-justify-content);
|
|
78
|
+
-webkit-justify-content:var(--grid-justify-content);
|
|
79
|
+
-moz-box-pack:var(--grid-justify-content);
|
|
80
|
+
justify-content:var(--grid-justify-content);
|
|
81
|
+
-webkit-align-content:var(--grid-align-content);
|
|
82
|
+
align-content:var(--grid-align-content);
|
|
73
83
|
grid-gap:var(--grid-gap);
|
|
74
84
|
gap:var(--grid-gap);
|
|
75
85
|
grid-row-gap:var(--grid-row-gap, var(--grid-gap));
|
|
@@ -178,6 +188,7 @@
|
|
|
178
188
|
margin-top:auto;
|
|
179
189
|
}.eds-layout-template-portal{
|
|
180
190
|
min-height:100vh;
|
|
191
|
+
width:100%;
|
|
181
192
|
}
|
|
182
193
|
|
|
183
194
|
.eds-layout-template-portal__main{
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { default as React } from 'react';
|
|
2
2
|
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
3
|
import { GridSpacingValue, ResponsiveValue } from '../LayoutWrapper/utils';
|
|
4
|
+
type AlignItems = React.CSSProperties['alignItems'];
|
|
5
|
+
type JustifyContent = React.CSSProperties['justifyContent'];
|
|
6
|
+
type AlignContent = React.CSSProperties['alignContent'];
|
|
4
7
|
export type GridOwnProps = {
|
|
5
8
|
/** CSS grid-template-columns value (supports responsive objects)
|
|
6
9
|
* @default "repeat(12, 1fr)"
|
|
@@ -20,6 +23,12 @@ export type GridOwnProps = {
|
|
|
20
23
|
* @default "row"
|
|
21
24
|
*/
|
|
22
25
|
autoFlow?: 'row' | 'column' | 'dense' | 'row dense' | 'column dense' | ResponsiveValue<'row' | 'column' | 'dense' | 'row dense' | 'column dense'>;
|
|
26
|
+
/** CSS align-items value (supports responsive objects) */
|
|
27
|
+
align?: AlignItems | ResponsiveValue<AlignItems>;
|
|
28
|
+
/** CSS justify-content value (supports responsive objects) */
|
|
29
|
+
justify?: JustifyContent | ResponsiveValue<JustifyContent>;
|
|
30
|
+
/** CSS align-content value (supports responsive objects) */
|
|
31
|
+
alignContent?: AlignContent | ResponsiveValue<AlignContent>;
|
|
23
32
|
/** The height of the grid container */
|
|
24
33
|
height?: string;
|
|
25
34
|
/** HTML element or React component used to render the Grid
|
|
@@ -33,5 +42,5 @@ export type GridOwnProps = {
|
|
|
33
42
|
};
|
|
34
43
|
export type GridProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridOwnProps>;
|
|
35
44
|
declare const defaultElement = "div";
|
|
36
|
-
export declare const Grid: <E extends React.ElementType = "div">({ templateColumns, templateRows, gap, rowGap, columnGap, autoFlow, height, as, className, children, style, ...rest }: GridProps<E>) => JSX.Element;
|
|
45
|
+
export declare const Grid: <E extends React.ElementType = "div">({ templateColumns, templateRows, gap, rowGap, columnGap, autoFlow, align, justify, alignContent, height, as, className, children, style, ...rest }: GridProps<E>) => JSX.Element;
|
|
37
46
|
export {};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/layout",
|
|
3
|
-
"version": "3.4.0
|
|
3
|
+
"version": "3.4.0",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
5
|
"main": "dist/layout.cjs.js",
|
|
6
6
|
"module": "dist/layout.esm.js",
|
|
@@ -70,5 +70,5 @@
|
|
|
70
70
|
"vite": "^7.1.3",
|
|
71
71
|
"vite-plugin-dts": "^4.5.4"
|
|
72
72
|
},
|
|
73
|
-
"gitHead": "
|
|
73
|
+
"gitHead": "6ccfa209ff0606983e817dc86e9081c1a0b1a6f0"
|
|
74
74
|
}
|