@entur/grid 0.3.65 → 0.3.66-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/grid.cjs.js +85 -0
- package/dist/grid.cjs.js.map +1 -0
- package/dist/grid.esm.js +80 -89
- package/dist/grid.esm.js.map +1 -1
- package/dist/index.d.ts +79 -3
- package/dist/styles.css +4 -5
- package/package.json +30 -12
- package/dist/BaseGrid.d.ts +0 -41
- package/dist/GridContainer.d.ts +0 -23
- package/dist/GridItem.d.ts +0 -23
- package/dist/grid.cjs.development.js +0 -99
- package/dist/grid.cjs.development.js.map +0 -1
- package/dist/grid.cjs.production.min.js +0 -2
- package/dist/grid.cjs.production.min.js.map +0 -1
- package/dist/index.js +0 -8
package/dist/grid.cjs.js
ADDED
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
|
|
3
|
+
const utils = require("@entur/utils");
|
|
4
|
+
const jsxRuntime = require("react/jsx-runtime");
|
|
5
|
+
const classnames = require("classnames");
|
|
6
|
+
const defaultElement$2 = "code";
|
|
7
|
+
const BaseGrid = ({
|
|
8
|
+
item,
|
|
9
|
+
container,
|
|
10
|
+
children,
|
|
11
|
+
className,
|
|
12
|
+
spacing,
|
|
13
|
+
rowSpacing,
|
|
14
|
+
small = 1,
|
|
15
|
+
medium,
|
|
16
|
+
large,
|
|
17
|
+
as,
|
|
18
|
+
...rest
|
|
19
|
+
}) => {
|
|
20
|
+
const Element = as || defaultElement$2;
|
|
21
|
+
const classList = classnames([
|
|
22
|
+
"eds-grid",
|
|
23
|
+
className,
|
|
24
|
+
{ "eds-grid__item": item },
|
|
25
|
+
{ "eds-grid__container": container },
|
|
26
|
+
{ [`eds-grid--spacing-${spacing}`]: spacing && container },
|
|
27
|
+
{ [`eds-grid--spacing-row-${rowSpacing}`]: spacing !== rowSpacing },
|
|
28
|
+
{ [`eds-grid--small-${small}`]: small && item },
|
|
29
|
+
{ [`eds-grid--medium-${medium}`]: medium && item },
|
|
30
|
+
{ [`eds-grid--large-${large}`]: large && item }
|
|
31
|
+
]);
|
|
32
|
+
return /* @__PURE__ */ jsxRuntime.jsx(Element, { className: classList, ...rest, children });
|
|
33
|
+
};
|
|
34
|
+
const defaultElement$1 = "div";
|
|
35
|
+
const GridItem = ({
|
|
36
|
+
children,
|
|
37
|
+
className,
|
|
38
|
+
small,
|
|
39
|
+
medium,
|
|
40
|
+
large,
|
|
41
|
+
as,
|
|
42
|
+
...rest
|
|
43
|
+
}) => {
|
|
44
|
+
const Element = as || defaultElement$1;
|
|
45
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
46
|
+
BaseGrid,
|
|
47
|
+
{
|
|
48
|
+
as: Element,
|
|
49
|
+
item: true,
|
|
50
|
+
className,
|
|
51
|
+
small,
|
|
52
|
+
medium,
|
|
53
|
+
large,
|
|
54
|
+
...rest,
|
|
55
|
+
children
|
|
56
|
+
}
|
|
57
|
+
);
|
|
58
|
+
};
|
|
59
|
+
const defaultElement = "div";
|
|
60
|
+
const GridContainer = ({
|
|
61
|
+
children,
|
|
62
|
+
className,
|
|
63
|
+
spacing,
|
|
64
|
+
rowSpacing,
|
|
65
|
+
as,
|
|
66
|
+
...rest
|
|
67
|
+
}) => {
|
|
68
|
+
const Element = as || defaultElement;
|
|
69
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
70
|
+
BaseGrid,
|
|
71
|
+
{
|
|
72
|
+
container: true,
|
|
73
|
+
as: Element,
|
|
74
|
+
className,
|
|
75
|
+
spacing,
|
|
76
|
+
rowSpacing,
|
|
77
|
+
...rest,
|
|
78
|
+
children
|
|
79
|
+
}
|
|
80
|
+
);
|
|
81
|
+
};
|
|
82
|
+
utils.warnAboutMissingStyles("grid");
|
|
83
|
+
exports.GridContainer = GridContainer;
|
|
84
|
+
exports.GridItem = GridItem;
|
|
85
|
+
//# sourceMappingURL=grid.cjs.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"grid.cjs.js","sources":["../src/BaseGrid.tsx","../src/GridItem.tsx","../src/GridContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\ntype BaseGridOwnProps = {\n /** Om det er en GridContainer\n * @default false\n */\n container?: boolean;\n /** Om det er et GridItem\n * @default false\n */\n item?: boolean;\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Vertikalt mellomrom for hver GridItem\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n};\nconst defaultElement = 'code';\n\nexport type BaseGridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, BaseGridOwnProps>;\n\nexport const BaseGrid = <E extends React.ElementType = typeof defaultElement>({\n item,\n container,\n children,\n className,\n spacing,\n rowSpacing,\n small = 1,\n medium,\n large,\n as,\n ...rest\n}: BaseGridProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classnames([\n 'eds-grid',\n className,\n { 'eds-grid__item': item },\n { 'eds-grid__container': container },\n { [`eds-grid--spacing-${spacing}`]: spacing && container },\n { [`eds-grid--spacing-row-${rowSpacing}`]: spacing !== rowSpacing },\n { [`eds-grid--small-${small}`]: small && item },\n { [`eds-grid--medium-${medium}`]: medium && item },\n { [`eds-grid--large-${large}`]: large && item },\n ]);\n return (\n <Element className={classList} {...rest}>\n {children}\n </Element>\n );\n};\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridItemOwnProps = {\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridItemProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridItemOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridItem = <E extends React.ElementType = typeof defaultElement>({\n children,\n className,\n small,\n medium,\n large,\n as,\n ...rest\n}: GridItemProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n as={Element}\n item\n className={className}\n small={small}\n medium={medium}\n large={large}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridContainerOwnProps = {\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Mellomrom mellom hver rad\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid-containeren */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridContainerProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, GridContainerOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridContainer = <\n E extends React.ElementType = typeof defaultElement,\n>({\n children,\n className,\n spacing,\n rowSpacing,\n as,\n ...rest\n}: GridContainerProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n container\n as={Element}\n className={className}\n spacing={spacing}\n rowSpacing={rowSpacing}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('grid');\n\nexport * from './GridItem';\nexport * from './GridContainer';\n"],"names":["defaultElement","jsx","warnAboutMissingStyles"],"mappings":";;;;;AAqDA,MAAMA,mBAAiB;AAKhB,MAAM,WAAW,CAAsD;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,UAA6B,MAAMA;AACzC,QAAM,YAAY,WAAW;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,EAAE,kBAAkB,KAAA;AAAA,IACpB,EAAE,uBAAuB,UAAA;AAAA,IACzB,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,WAAW,UAAA;AAAA,IAC/C,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,YAAY,WAAA;AAAA,IACvD,EAAE,CAAC,mBAAmB,KAAK,EAAE,GAAG,SAAS,KAAA;AAAA,IACzC,EAAE,CAAC,oBAAoB,MAAM,EAAE,GAAG,UAAU,KAAA;AAAA,IAC5C,EAAE,CAAC,mBAAmB,KAAK,EAAE,GAAG,SAAS,KAAA;AAAA,EAAK,CAC/C;AACD,wCACG,SAAA,EAAQ,WAAW,WAAY,GAAG,MAChC,UACH;AAEJ;AC/DA,MAAMA,mBAAiB;AAEhB,MAAM,WAAW,CAAsD;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,UAA6B,MAAMA;AACzC,SACEC,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;ACVA,MAAM,iBAAiB;AAEhB,MAAM,gBAAgB,CAE3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0C;AACxC,QAAM,UAA6B,MAAM;AACzC,SACEA,2BAAAA;AAAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AC9DAC,MAAAA,uBAAuB,MAAM;;;"}
|
package/dist/grid.esm.js
CHANGED
|
@@ -1,94 +1,85 @@
|
|
|
1
|
-
import { warnAboutMissingStyles } from
|
|
2
|
-
import
|
|
3
|
-
import classnames from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
1
|
+
import { warnAboutMissingStyles } from "@entur/utils";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import classnames from "classnames";
|
|
4
|
+
const defaultElement$2 = "code";
|
|
5
|
+
const BaseGrid = ({
|
|
6
|
+
item,
|
|
7
|
+
container,
|
|
8
|
+
children,
|
|
9
|
+
className,
|
|
10
|
+
spacing,
|
|
11
|
+
rowSpacing,
|
|
12
|
+
small = 1,
|
|
13
|
+
medium,
|
|
14
|
+
large,
|
|
15
|
+
as,
|
|
16
|
+
...rest
|
|
17
|
+
}) => {
|
|
18
|
+
const Element = as || defaultElement$2;
|
|
19
|
+
const classList = classnames([
|
|
20
|
+
"eds-grid",
|
|
21
|
+
className,
|
|
22
|
+
{ "eds-grid__item": item },
|
|
23
|
+
{ "eds-grid__container": container },
|
|
24
|
+
{ [`eds-grid--spacing-${spacing}`]: spacing && container },
|
|
25
|
+
{ [`eds-grid--spacing-row-${rowSpacing}`]: spacing !== rowSpacing },
|
|
26
|
+
{ [`eds-grid--small-${small}`]: small && item },
|
|
27
|
+
{ [`eds-grid--medium-${medium}`]: medium && item },
|
|
28
|
+
{ [`eds-grid--large-${large}`]: large && item }
|
|
29
|
+
]);
|
|
30
|
+
return /* @__PURE__ */ jsx(Element, { className: classList, ...rest, children });
|
|
31
|
+
};
|
|
32
|
+
const defaultElement$1 = "div";
|
|
33
|
+
const GridItem = ({
|
|
34
|
+
children,
|
|
35
|
+
className,
|
|
36
|
+
small,
|
|
37
|
+
medium,
|
|
38
|
+
large,
|
|
39
|
+
as,
|
|
40
|
+
...rest
|
|
41
|
+
}) => {
|
|
42
|
+
const Element = as || defaultElement$1;
|
|
43
|
+
return /* @__PURE__ */ jsx(
|
|
44
|
+
BaseGrid,
|
|
45
|
+
{
|
|
46
|
+
as: Element,
|
|
47
|
+
item: true,
|
|
48
|
+
className,
|
|
49
|
+
small,
|
|
50
|
+
medium,
|
|
51
|
+
large,
|
|
52
|
+
...rest,
|
|
53
|
+
children
|
|
10
54
|
}
|
|
11
|
-
|
|
12
|
-
}, _extends.apply(null, arguments);
|
|
13
|
-
}
|
|
14
|
-
function _objectWithoutPropertiesLoose(r, e) {
|
|
15
|
-
if (null == r) return {};
|
|
16
|
-
var t = {};
|
|
17
|
-
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
18
|
-
if (e.includes(n)) continue;
|
|
19
|
-
t[n] = r[n];
|
|
20
|
-
}
|
|
21
|
-
return t;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
var _excluded$2 = ["item", "container", "children", "className", "spacing", "rowSpacing", "small", "medium", "large", "as"];
|
|
25
|
-
var defaultElement$2 = 'code';
|
|
26
|
-
var BaseGrid = function BaseGrid(_ref) {
|
|
27
|
-
var _ref2, _ref3, _ref4, _ref5, _ref6;
|
|
28
|
-
var item = _ref.item,
|
|
29
|
-
container = _ref.container,
|
|
30
|
-
children = _ref.children,
|
|
31
|
-
className = _ref.className,
|
|
32
|
-
spacing = _ref.spacing,
|
|
33
|
-
rowSpacing = _ref.rowSpacing,
|
|
34
|
-
_ref$small = _ref.small,
|
|
35
|
-
small = _ref$small === void 0 ? 1 : _ref$small,
|
|
36
|
-
medium = _ref.medium,
|
|
37
|
-
large = _ref.large,
|
|
38
|
-
as = _ref.as,
|
|
39
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
40
|
-
var Element = as || defaultElement$2;
|
|
41
|
-
var classList = classnames(['eds-grid', className, {
|
|
42
|
-
'eds-grid__item': item
|
|
43
|
-
}, {
|
|
44
|
-
'eds-grid__container': container
|
|
45
|
-
}, (_ref2 = {}, _ref2["eds-grid--spacing-" + spacing] = spacing && container, _ref2), (_ref3 = {}, _ref3["eds-grid--spacing-row-" + rowSpacing] = spacing !== rowSpacing, _ref3), (_ref4 = {}, _ref4["eds-grid--small-" + small] = small && item, _ref4), (_ref5 = {}, _ref5["eds-grid--medium-" + medium] = medium && item, _ref5), (_ref6 = {}, _ref6["eds-grid--large-" + large] = large && item, _ref6)]);
|
|
46
|
-
return React.createElement(Element, _extends({
|
|
47
|
-
className: classList
|
|
48
|
-
}, rest), children);
|
|
55
|
+
);
|
|
49
56
|
};
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
57
|
+
const defaultElement = "div";
|
|
58
|
+
const GridContainer = ({
|
|
59
|
+
children,
|
|
60
|
+
className,
|
|
61
|
+
spacing,
|
|
62
|
+
rowSpacing,
|
|
63
|
+
as,
|
|
64
|
+
...rest
|
|
65
|
+
}) => {
|
|
66
|
+
const Element = as || defaultElement;
|
|
67
|
+
return /* @__PURE__ */ jsx(
|
|
68
|
+
BaseGrid,
|
|
69
|
+
{
|
|
70
|
+
container: true,
|
|
71
|
+
as: Element,
|
|
72
|
+
className,
|
|
73
|
+
spacing,
|
|
74
|
+
rowSpacing,
|
|
75
|
+
...rest,
|
|
76
|
+
children
|
|
77
|
+
}
|
|
78
|
+
);
|
|
70
79
|
};
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
var children = _ref.children,
|
|
76
|
-
className = _ref.className,
|
|
77
|
-
spacing = _ref.spacing,
|
|
78
|
-
rowSpacing = _ref.rowSpacing,
|
|
79
|
-
as = _ref.as,
|
|
80
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
81
|
-
var Element = as || defaultElement;
|
|
82
|
-
return React.createElement(BaseGrid, _extends({
|
|
83
|
-
container: true,
|
|
84
|
-
as: Element,
|
|
85
|
-
className: className,
|
|
86
|
-
spacing: spacing,
|
|
87
|
-
rowSpacing: rowSpacing
|
|
88
|
-
}, rest), children);
|
|
80
|
+
warnAboutMissingStyles("grid");
|
|
81
|
+
export {
|
|
82
|
+
GridContainer,
|
|
83
|
+
GridItem
|
|
89
84
|
};
|
|
90
|
-
|
|
91
|
-
warnAboutMissingStyles('grid');
|
|
92
|
-
|
|
93
|
-
export { GridContainer, GridItem };
|
|
94
85
|
//# sourceMappingURL=grid.esm.js.map
|
package/dist/grid.esm.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"grid.esm.js","sources":["../src/BaseGrid.tsx","../src/GridItem.tsx","../src/GridContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\ntype BaseGridOwnProps = {\n /** Om det er en GridContainer\n * @default false\n */\n container?: boolean;\n /** Om det er et GridItem\n * @default false\n */\n item?: boolean;\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Vertikalt mellomrom for hver GridItem\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n};\nconst defaultElement = 'code';\n\nexport type BaseGridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, BaseGridOwnProps>;\n\nexport const BaseGrid = <E extends React.ElementType = typeof defaultElement>({\n item,\n container,\n children,\n className,\n spacing,\n rowSpacing,\n small = 1,\n medium,\n large,\n as,\n ...rest\n}: BaseGridProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classnames([\n 'eds-grid',\n className,\n { 'eds-grid__item': item },\n { 'eds-grid__container': container },\n { [`eds-grid--spacing-${spacing}`]: spacing && container },\n { [`eds-grid--spacing-row-${rowSpacing}`]: spacing !== rowSpacing },\n { [`eds-grid--small-${small}`]: small && item },\n { [`eds-grid--medium-${medium}`]: medium && item },\n { [`eds-grid--large-${large}`]: large && item },\n ]);\n return (\n <Element className={classList} {...rest}>\n {children}\n </Element>\n );\n};\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridItemOwnProps = {\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridItemProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridItemOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridItem = <E extends React.ElementType = typeof defaultElement>({\n children,\n className,\n small,\n medium,\n large,\n as,\n ...rest\n}: GridItemProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n as={Element}\n item\n className={className}\n small={small}\n medium={medium}\n large={large}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridContainerOwnProps = {\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Mellomrom mellom hver rad\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid-containeren */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridContainerProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, GridContainerOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridContainer = <\n E extends React.ElementType = typeof defaultElement,\n>({\n children,\n className,\n spacing,\n rowSpacing,\n as,\n ...rest\n}: GridContainerProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n container\n as={Element}\n className={className}\n spacing={spacing}\n rowSpacing={rowSpacing}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('grid');\n\nexport * from './GridItem';\nexport * from './GridContainer';\n"],"names":["defaultElement"
|
|
1
|
+
{"version":3,"file":"grid.esm.js","sources":["../src/BaseGrid.tsx","../src/GridItem.tsx","../src/GridContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\ntype BaseGridOwnProps = {\n /** Om det er en GridContainer\n * @default false\n */\n container?: boolean;\n /** Om det er et GridItem\n * @default false\n */\n item?: boolean;\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Vertikalt mellomrom for hver GridItem\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n};\nconst defaultElement = 'code';\n\nexport type BaseGridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, BaseGridOwnProps>;\n\nexport const BaseGrid = <E extends React.ElementType = typeof defaultElement>({\n item,\n container,\n children,\n className,\n spacing,\n rowSpacing,\n small = 1,\n medium,\n large,\n as,\n ...rest\n}: BaseGridProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classnames([\n 'eds-grid',\n className,\n { 'eds-grid__item': item },\n { 'eds-grid__container': container },\n { [`eds-grid--spacing-${spacing}`]: spacing && container },\n { [`eds-grid--spacing-row-${rowSpacing}`]: spacing !== rowSpacing },\n { [`eds-grid--small-${small}`]: small && item },\n { [`eds-grid--medium-${medium}`]: medium && item },\n { [`eds-grid--large-${large}`]: large && item },\n ]);\n return (\n <Element className={classList} {...rest}>\n {children}\n </Element>\n );\n};\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridItemOwnProps = {\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridItemProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridItemOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridItem = <E extends React.ElementType = typeof defaultElement>({\n children,\n className,\n small,\n medium,\n large,\n as,\n ...rest\n}: GridItemProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n as={Element}\n item\n className={className}\n small={small}\n medium={medium}\n large={large}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridContainerOwnProps = {\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Mellomrom mellom hver rad\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid-containeren */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridContainerProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, GridContainerOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridContainer = <\n E extends React.ElementType = typeof defaultElement,\n>({\n children,\n className,\n spacing,\n rowSpacing,\n as,\n ...rest\n}: GridContainerProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n container\n as={Element}\n className={className}\n spacing={spacing}\n rowSpacing={rowSpacing}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('grid');\n\nexport * from './GridItem';\nexport * from './GridContainer';\n"],"names":["defaultElement"],"mappings":";;;AAqDA,MAAMA,mBAAiB;AAKhB,MAAM,WAAW,CAAsD;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,UAA6B,MAAMA;AACzC,QAAM,YAAY,WAAW;AAAA,IAC3B;AAAA,IACA;AAAA,IACA,EAAE,kBAAkB,KAAA;AAAA,IACpB,EAAE,uBAAuB,UAAA;AAAA,IACzB,EAAE,CAAC,qBAAqB,OAAO,EAAE,GAAG,WAAW,UAAA;AAAA,IAC/C,EAAE,CAAC,yBAAyB,UAAU,EAAE,GAAG,YAAY,WAAA;AAAA,IACvD,EAAE,CAAC,mBAAmB,KAAK,EAAE,GAAG,SAAS,KAAA;AAAA,IACzC,EAAE,CAAC,oBAAoB,MAAM,EAAE,GAAG,UAAU,KAAA;AAAA,IAC5C,EAAE,CAAC,mBAAmB,KAAK,EAAE,GAAG,SAAS,KAAA;AAAA,EAAK,CAC/C;AACD,6BACG,SAAA,EAAQ,WAAW,WAAY,GAAG,MAChC,UACH;AAEJ;AC/DA,MAAMA,mBAAiB;AAEhB,MAAM,WAAW,CAAsD;AAAA,EAC5E;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAAqC;AACnC,QAAM,UAA6B,MAAMA;AACzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,IAAI;AAAA,MACJ,MAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;ACVA,MAAM,iBAAiB;AAEhB,MAAM,gBAAgB,CAE3B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,GAAG;AACL,MAA0C;AACxC,QAAM,UAA6B,MAAM;AACzC,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAS;AAAA,MACT,IAAI;AAAA,MACJ;AAAA,MACA;AAAA,MACA;AAAA,MACC,GAAG;AAAA,MAEH;AAAA,IAAA;AAAA,EAAA;AAGP;AC9DA,uBAAuB,MAAM;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -1,3 +1,79 @@
|
|
|
1
|
-
import '
|
|
2
|
-
|
|
3
|
-
|
|
1
|
+
import { default as default_2 } from 'react';
|
|
2
|
+
|
|
3
|
+
declare type AsProp<C extends default_2.ElementType> = {
|
|
4
|
+
/**
|
|
5
|
+
* An override of the default HTML tag.
|
|
6
|
+
* Can also be another React component.
|
|
7
|
+
*/
|
|
8
|
+
as?: C;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
declare const defaultElement = "div";
|
|
12
|
+
|
|
13
|
+
declare const defaultElement_2 = "div";
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Allows for extending a set of props (`ExtendedProps`) by an overriding set of props
|
|
17
|
+
* (`OverrideProps`), ensuring that any duplicates are overridden by the overriding
|
|
18
|
+
* set of props.
|
|
19
|
+
*/
|
|
20
|
+
declare type ExtendableProps<ExtendedProps = Record<string, unknown>, OverrideProps = Record<string, unknown>> = OverrideProps & Omit<ExtendedProps, keyof OverrideProps>;
|
|
21
|
+
|
|
22
|
+
export declare const GridContainer: <E extends default_2.ElementType = "div">({ children, className, spacing, rowSpacing, as, ...rest }: GridContainerProps<E>) => JSX.Element;
|
|
23
|
+
|
|
24
|
+
export declare type GridContainerOwnProps = {
|
|
25
|
+
/** Mellomromet mellom hver GridItem, basert på spacing-tokens
|
|
26
|
+
* @default none
|
|
27
|
+
*/
|
|
28
|
+
spacing?: 'none' | 'extraSmall2' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
|
|
29
|
+
/** Mellomrom mellom hver rad
|
|
30
|
+
* @default Verdien til spacing
|
|
31
|
+
*/
|
|
32
|
+
rowSpacing?: 'none' | 'extraSmall2' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
|
|
33
|
+
/** HTML-elementet eller React-komponenten som lager Grid-elementet*/
|
|
34
|
+
as?: 'div' | default_2.ElementType;
|
|
35
|
+
/** Innholdet til Grid-containeren */
|
|
36
|
+
children?: default_2.ReactNode;
|
|
37
|
+
/** Ekstra klassenavn */
|
|
38
|
+
className?: string;
|
|
39
|
+
};
|
|
40
|
+
|
|
41
|
+
export declare type GridContainerProps<T extends default_2.ElementType = typeof defaultElement_2> = PolymorphicComponentProps<T, GridContainerOwnProps>;
|
|
42
|
+
|
|
43
|
+
export declare const GridItem: <E extends default_2.ElementType = "div">({ children, className, small, medium, large, as, ...rest }: GridItemProps<E>) => JSX.Element;
|
|
44
|
+
|
|
45
|
+
export declare type GridItemOwnProps = {
|
|
46
|
+
/** Antall kolonner en Item bruker på små flater (og oppover)
|
|
47
|
+
* @default 1
|
|
48
|
+
*/
|
|
49
|
+
small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
50
|
+
/** Antall kolonner en Item bruker på medium flater (og oppover) */
|
|
51
|
+
medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
52
|
+
/** Antall kolonner en Item bruker på store flater. */
|
|
53
|
+
large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
54
|
+
/** HTML-elementet eller React-komponenten som lager Grid-elementet*/
|
|
55
|
+
as?: 'div' | default_2.ElementType;
|
|
56
|
+
/** Innholdet til Grid containeren/item */
|
|
57
|
+
children?: default_2.ReactNode;
|
|
58
|
+
/** Ekstra klassenavn */
|
|
59
|
+
className?: string;
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export declare type GridItemProps<T extends default_2.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridItemOwnProps>;
|
|
63
|
+
|
|
64
|
+
/**
|
|
65
|
+
* Allows for inheriting the props from the specified element type so that
|
|
66
|
+
* props like children, className & style work, as well as element-specific
|
|
67
|
+
* attributes like aria roles. The component (`C`) must be passed in.
|
|
68
|
+
*/
|
|
69
|
+
declare type InheritableElementProps<C extends default_2.ElementType, Props = Record<string, unknown>> = ExtendableProps<PropsOf<C>, Props>;
|
|
70
|
+
|
|
71
|
+
/**
|
|
72
|
+
* A more sophisticated version of `InheritableElementProps` where
|
|
73
|
+
* the passed in `as` prop will determine which props can be included
|
|
74
|
+
*/
|
|
75
|
+
declare type PolymorphicComponentProps<C extends default_2.ElementType, Props = Record<string, unknown>> = InheritableElementProps<C, Props & AsProp<C>>;
|
|
76
|
+
|
|
77
|
+
declare type PropsOf<C extends keyof JSX.IntrinsicElements | default_2.JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, default_2.ComponentPropsWithoutRef<C>>;
|
|
78
|
+
|
|
79
|
+
export { }
|
package/dist/styles.css
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
:root {
|
|
2
|
+
--eds-grid: 1;
|
|
3
|
+
}/* DO NOT CHANGE!*/
|
|
2
4
|
/* This file is automatically generated from @entur/tokens! Changes will be overwritten. */
|
|
3
5
|
.eds-grid__container {
|
|
4
6
|
box-sizing: border-box;
|
|
@@ -180,7 +182,4 @@
|
|
|
180
182
|
.eds-grid--large-12 {
|
|
181
183
|
grid-column: span 12;
|
|
182
184
|
}
|
|
183
|
-
}
|
|
184
|
-
:root {
|
|
185
|
-
--eds-grid: 1;
|
|
186
|
-
}
|
|
185
|
+
}
|
package/package.json
CHANGED
|
@@ -1,10 +1,18 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@entur/grid",
|
|
3
|
-
"version": "0.3.
|
|
3
|
+
"version": "0.3.66-beta.1",
|
|
4
4
|
"license": "EUPL-1.2",
|
|
5
|
-
"main": "dist/
|
|
5
|
+
"main": "dist/grid.cjs.js",
|
|
6
6
|
"module": "dist/grid.esm.js",
|
|
7
|
-
"
|
|
7
|
+
"types": "dist/index.d.ts",
|
|
8
|
+
"exports": {
|
|
9
|
+
".": {
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"import": "./dist/grid.esm.js",
|
|
12
|
+
"require": "./dist/grid.cjs.js"
|
|
13
|
+
},
|
|
14
|
+
"./dist/*": "./dist/*"
|
|
15
|
+
},
|
|
8
16
|
"files": [
|
|
9
17
|
"dist"
|
|
10
18
|
],
|
|
@@ -17,22 +25,32 @@
|
|
|
17
25
|
"access": "public"
|
|
18
26
|
},
|
|
19
27
|
"scripts": {
|
|
20
|
-
"start": "
|
|
21
|
-
"build": "
|
|
22
|
-
"test": "
|
|
23
|
-
"lint": "
|
|
28
|
+
"start": "vite build --watch",
|
|
29
|
+
"build": "vite build",
|
|
30
|
+
"test": "jest",
|
|
31
|
+
"lint": "eslint src"
|
|
24
32
|
},
|
|
25
33
|
"peerDependencies": {
|
|
26
34
|
"react": ">=16.8.0",
|
|
27
35
|
"react-dom": ">=16.8.0"
|
|
28
36
|
},
|
|
29
37
|
"dependencies": {
|
|
30
|
-
"@entur/tokens": "^3.19.1",
|
|
31
|
-
"@entur/utils": "^0.12.
|
|
32
|
-
"classnames": "^2.
|
|
38
|
+
"@entur/tokens": "^3.19.2-beta.1",
|
|
39
|
+
"@entur/utils": "^0.12.4-beta.1",
|
|
40
|
+
"classnames": "^2.5.1"
|
|
33
41
|
},
|
|
34
42
|
"devDependencies": {
|
|
35
|
-
"
|
|
43
|
+
"@testing-library/jest-dom": "^5.17.0",
|
|
44
|
+
"@testing-library/react": "^10.4.9",
|
|
45
|
+
"@testing-library/user-event": "14.6.1",
|
|
46
|
+
"@vitejs/plugin-react": "^5.0.1",
|
|
47
|
+
"eslint": "^7.32.0",
|
|
48
|
+
"jest": "^29.0.0",
|
|
49
|
+
"jest-environment-jsdom": "^29.0.0",
|
|
50
|
+
"ts-jest": "^29.0.0",
|
|
51
|
+
"typescript": "^5.9.2",
|
|
52
|
+
"vite": "^7.1.3",
|
|
53
|
+
"vite-plugin-dts": "^4.5.4"
|
|
36
54
|
},
|
|
37
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "1654c868b8fe67eb6b1eac6087a67fc41134ddb0"
|
|
38
56
|
}
|
package/dist/BaseGrid.d.ts
DELETED
|
@@ -1,41 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
-
import './Grid.scss';
|
|
4
|
-
type BaseGridOwnProps = {
|
|
5
|
-
/** Om det er en GridContainer
|
|
6
|
-
* @default false
|
|
7
|
-
*/
|
|
8
|
-
container?: boolean;
|
|
9
|
-
/** Om det er et GridItem
|
|
10
|
-
* @default false
|
|
11
|
-
*/
|
|
12
|
-
item?: boolean;
|
|
13
|
-
/** Mellomromet mellom hver GridItem, basert på spacing-tokens
|
|
14
|
-
* @default none
|
|
15
|
-
*/
|
|
16
|
-
spacing?: 'none' | 'extraSmall2' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
|
|
17
|
-
/** Vertikalt mellomrom for hver GridItem
|
|
18
|
-
* @default Verdien til spacing
|
|
19
|
-
*/
|
|
20
|
-
rowSpacing?: 'none' | 'extraSmall2' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
|
|
21
|
-
/** Antall kolonner en Item bruker på små flater (og oppover)
|
|
22
|
-
* @default 1
|
|
23
|
-
*/
|
|
24
|
-
small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
25
|
-
/** Antall kolonner en Item bruker på medium flater (og oppover) */
|
|
26
|
-
medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
27
|
-
/** Antall kolonner en Item bruker på store flater. */
|
|
28
|
-
large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
29
|
-
/** HTML-elementet eller React-komponenten som lager Grid-elementet
|
|
30
|
-
* @default "div"
|
|
31
|
-
*/
|
|
32
|
-
as?: string | React.ElementType;
|
|
33
|
-
/** Ekstra klassenavn */
|
|
34
|
-
className?: string;
|
|
35
|
-
/** Innholdet til Grid containeren/item */
|
|
36
|
-
children?: React.ReactNode;
|
|
37
|
-
};
|
|
38
|
-
declare const defaultElement = "code";
|
|
39
|
-
export type BaseGridProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, BaseGridOwnProps>;
|
|
40
|
-
export declare const BaseGrid: <E extends React.ElementType = "code">({ item, container, children, className, spacing, rowSpacing, small, medium, large, as, ...rest }: BaseGridProps<E>) => JSX.Element;
|
|
41
|
-
export {};
|
package/dist/GridContainer.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
-
import './Grid.scss';
|
|
4
|
-
export type GridContainerOwnProps = {
|
|
5
|
-
/** Mellomromet mellom hver GridItem, basert på spacing-tokens
|
|
6
|
-
* @default none
|
|
7
|
-
*/
|
|
8
|
-
spacing?: 'none' | 'extraSmall2' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
|
|
9
|
-
/** Mellomrom mellom hver rad
|
|
10
|
-
* @default Verdien til spacing
|
|
11
|
-
*/
|
|
12
|
-
rowSpacing?: 'none' | 'extraSmall2' | 'extraSmall' | 'small' | 'medium' | 'large' | 'extraLarge';
|
|
13
|
-
/** HTML-elementet eller React-komponenten som lager Grid-elementet*/
|
|
14
|
-
as?: 'div' | React.ElementType;
|
|
15
|
-
/** Innholdet til Grid-containeren */
|
|
16
|
-
children?: React.ReactNode;
|
|
17
|
-
/** Ekstra klassenavn */
|
|
18
|
-
className?: string;
|
|
19
|
-
};
|
|
20
|
-
export type GridContainerProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridContainerOwnProps>;
|
|
21
|
-
declare const defaultElement = "div";
|
|
22
|
-
export declare const GridContainer: <E extends React.ElementType = "div">({ children, className, spacing, rowSpacing, as, ...rest }: GridContainerProps<E>) => JSX.Element;
|
|
23
|
-
export {};
|
package/dist/GridItem.d.ts
DELETED
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import { PolymorphicComponentProps } from '@entur/utils';
|
|
3
|
-
import './Grid.scss';
|
|
4
|
-
export type GridItemOwnProps = {
|
|
5
|
-
/** Antall kolonner en Item bruker på små flater (og oppover)
|
|
6
|
-
* @default 1
|
|
7
|
-
*/
|
|
8
|
-
small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
9
|
-
/** Antall kolonner en Item bruker på medium flater (og oppover) */
|
|
10
|
-
medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
11
|
-
/** Antall kolonner en Item bruker på store flater. */
|
|
12
|
-
large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
|
|
13
|
-
/** HTML-elementet eller React-komponenten som lager Grid-elementet*/
|
|
14
|
-
as?: 'div' | React.ElementType;
|
|
15
|
-
/** Innholdet til Grid containeren/item */
|
|
16
|
-
children?: React.ReactNode;
|
|
17
|
-
/** Ekstra klassenavn */
|
|
18
|
-
className?: string;
|
|
19
|
-
};
|
|
20
|
-
export type GridItemProps<T extends React.ElementType = typeof defaultElement> = PolymorphicComponentProps<T, GridItemOwnProps>;
|
|
21
|
-
declare const defaultElement = "div";
|
|
22
|
-
export declare const GridItem: <E extends React.ElementType = "div">({ children, className, small, medium, large, as, ...rest }: GridItemProps<E>) => JSX.Element;
|
|
23
|
-
export {};
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var utils = require('@entur/utils');
|
|
6
|
-
var React = require('react');
|
|
7
|
-
var classnames = require('classnames');
|
|
8
|
-
|
|
9
|
-
function _extends() {
|
|
10
|
-
return _extends = Object.assign ? Object.assign.bind() : function (n) {
|
|
11
|
-
for (var e = 1; e < arguments.length; e++) {
|
|
12
|
-
var t = arguments[e];
|
|
13
|
-
for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
|
|
14
|
-
}
|
|
15
|
-
return n;
|
|
16
|
-
}, _extends.apply(null, arguments);
|
|
17
|
-
}
|
|
18
|
-
function _objectWithoutPropertiesLoose(r, e) {
|
|
19
|
-
if (null == r) return {};
|
|
20
|
-
var t = {};
|
|
21
|
-
for (var n in r) if ({}.hasOwnProperty.call(r, n)) {
|
|
22
|
-
if (e.includes(n)) continue;
|
|
23
|
-
t[n] = r[n];
|
|
24
|
-
}
|
|
25
|
-
return t;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
var _excluded$2 = ["item", "container", "children", "className", "spacing", "rowSpacing", "small", "medium", "large", "as"];
|
|
29
|
-
var defaultElement$2 = 'code';
|
|
30
|
-
var BaseGrid = function BaseGrid(_ref) {
|
|
31
|
-
var _ref2, _ref3, _ref4, _ref5, _ref6;
|
|
32
|
-
var item = _ref.item,
|
|
33
|
-
container = _ref.container,
|
|
34
|
-
children = _ref.children,
|
|
35
|
-
className = _ref.className,
|
|
36
|
-
spacing = _ref.spacing,
|
|
37
|
-
rowSpacing = _ref.rowSpacing,
|
|
38
|
-
_ref$small = _ref.small,
|
|
39
|
-
small = _ref$small === void 0 ? 1 : _ref$small,
|
|
40
|
-
medium = _ref.medium,
|
|
41
|
-
large = _ref.large,
|
|
42
|
-
as = _ref.as,
|
|
43
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$2);
|
|
44
|
-
var Element = as || defaultElement$2;
|
|
45
|
-
var classList = classnames(['eds-grid', className, {
|
|
46
|
-
'eds-grid__item': item
|
|
47
|
-
}, {
|
|
48
|
-
'eds-grid__container': container
|
|
49
|
-
}, (_ref2 = {}, _ref2["eds-grid--spacing-" + spacing] = spacing && container, _ref2), (_ref3 = {}, _ref3["eds-grid--spacing-row-" + rowSpacing] = spacing !== rowSpacing, _ref3), (_ref4 = {}, _ref4["eds-grid--small-" + small] = small && item, _ref4), (_ref5 = {}, _ref5["eds-grid--medium-" + medium] = medium && item, _ref5), (_ref6 = {}, _ref6["eds-grid--large-" + large] = large && item, _ref6)]);
|
|
50
|
-
return React.createElement(Element, _extends({
|
|
51
|
-
className: classList
|
|
52
|
-
}, rest), children);
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
var _excluded$1 = ["children", "className", "small", "medium", "large", "as"];
|
|
56
|
-
var defaultElement$1 = 'div';
|
|
57
|
-
var GridItem = function GridItem(_ref) {
|
|
58
|
-
var children = _ref.children,
|
|
59
|
-
className = _ref.className,
|
|
60
|
-
small = _ref.small,
|
|
61
|
-
medium = _ref.medium,
|
|
62
|
-
large = _ref.large,
|
|
63
|
-
as = _ref.as,
|
|
64
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded$1);
|
|
65
|
-
var Element = as || defaultElement$1;
|
|
66
|
-
return React.createElement(BaseGrid, _extends({
|
|
67
|
-
as: Element,
|
|
68
|
-
item: true,
|
|
69
|
-
className: className,
|
|
70
|
-
small: small,
|
|
71
|
-
medium: medium,
|
|
72
|
-
large: large
|
|
73
|
-
}, rest), children);
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
var _excluded = ["children", "className", "spacing", "rowSpacing", "as"];
|
|
77
|
-
var defaultElement = 'div';
|
|
78
|
-
var GridContainer = function GridContainer(_ref) {
|
|
79
|
-
var children = _ref.children,
|
|
80
|
-
className = _ref.className,
|
|
81
|
-
spacing = _ref.spacing,
|
|
82
|
-
rowSpacing = _ref.rowSpacing,
|
|
83
|
-
as = _ref.as,
|
|
84
|
-
rest = _objectWithoutPropertiesLoose(_ref, _excluded);
|
|
85
|
-
var Element = as || defaultElement;
|
|
86
|
-
return React.createElement(BaseGrid, _extends({
|
|
87
|
-
container: true,
|
|
88
|
-
as: Element,
|
|
89
|
-
className: className,
|
|
90
|
-
spacing: spacing,
|
|
91
|
-
rowSpacing: rowSpacing
|
|
92
|
-
}, rest), children);
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
utils.warnAboutMissingStyles('grid');
|
|
96
|
-
|
|
97
|
-
exports.GridContainer = GridContainer;
|
|
98
|
-
exports.GridItem = GridItem;
|
|
99
|
-
//# sourceMappingURL=grid.cjs.development.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grid.cjs.development.js","sources":["../src/BaseGrid.tsx","../src/GridItem.tsx","../src/GridContainer.tsx","../src/index.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\ntype BaseGridOwnProps = {\n /** Om det er en GridContainer\n * @default false\n */\n container?: boolean;\n /** Om det er et GridItem\n * @default false\n */\n item?: boolean;\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Vertikalt mellomrom for hver GridItem\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n};\nconst defaultElement = 'code';\n\nexport type BaseGridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, BaseGridOwnProps>;\n\nexport const BaseGrid = <E extends React.ElementType = typeof defaultElement>({\n item,\n container,\n children,\n className,\n spacing,\n rowSpacing,\n small = 1,\n medium,\n large,\n as,\n ...rest\n}: BaseGridProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classnames([\n 'eds-grid',\n className,\n { 'eds-grid__item': item },\n { 'eds-grid__container': container },\n { [`eds-grid--spacing-${spacing}`]: spacing && container },\n { [`eds-grid--spacing-row-${rowSpacing}`]: spacing !== rowSpacing },\n { [`eds-grid--small-${small}`]: small && item },\n { [`eds-grid--medium-${medium}`]: medium && item },\n { [`eds-grid--large-${large}`]: large && item },\n ]);\n return (\n <Element className={classList} {...rest}>\n {children}\n </Element>\n );\n};\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridItemOwnProps = {\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridItemProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridItemOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridItem = <E extends React.ElementType = typeof defaultElement>({\n children,\n className,\n small,\n medium,\n large,\n as,\n ...rest\n}: GridItemProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n as={Element}\n item\n className={className}\n small={small}\n medium={medium}\n large={large}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridContainerOwnProps = {\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Mellomrom mellom hver rad\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid-containeren */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridContainerProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, GridContainerOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridContainer = <\n E extends React.ElementType = typeof defaultElement,\n>({\n children,\n className,\n spacing,\n rowSpacing,\n as,\n ...rest\n}: GridContainerProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n container\n as={Element}\n className={className}\n spacing={spacing}\n rowSpacing={rowSpacing}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('grid');\n\nexport * from './GridItem';\nexport * from './GridContainer';\n"],"names":["defaultElement","BaseGrid","_ref","_ref2","_ref3","_ref4","_ref5","_ref6","item","container","children","className","spacing","rowSpacing","_ref$small","small","medium","large","as","rest","_objectWithoutPropertiesLoose","_excluded","Element","classList","classnames","React","createElement","_extends","GridItem","GridContainer","warnAboutMissingStyles"],"mappings":"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"}
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("@entur/utils"),r=require("react"),a=require("classnames");function i(){return i=Object.assign?Object.assign.bind():function(e){for(var r=1;r<arguments.length;r++){var a=arguments[r];for(var i in a)({}).hasOwnProperty.call(a,i)&&(e[i]=a[i])}return e},i.apply(null,arguments)}function n(e,r){if(null==e)return{};var a={};for(var i in e)if({}.hasOwnProperty.call(e,i)){if(r.includes(i))continue;a[i]=e[i]}return a}var s=["item","container","children","className","spacing","rowSpacing","small","medium","large","as"],l=function(e){var l,c,t,d,m,u=e.item,g=e.container,o=e.children,p=e.className,v=e.spacing,f=e.rowSpacing,h=e.small,w=void 0===h?1:h,N=e.medium,S=e.large,_=e.as,b=n(e,s),y=_||"code",O=a(["eds-grid",p,{"eds-grid__item":u},{"eds-grid__container":g},(l={},l["eds-grid--spacing-"+v]=v&&g,l),(c={},c["eds-grid--spacing-row-"+f]=v!==f,c),(t={},t["eds-grid--small-"+w]=w&&u,t),(d={},d["eds-grid--medium-"+N]=N&&u,d),(m={},m["eds-grid--large-"+S]=S&&u,m)]);return r.createElement(y,i({className:O},b),o)},c=["children","className","small","medium","large","as"],t=["children","className","spacing","rowSpacing","as"];e.warnAboutMissingStyles("grid"),exports.GridContainer=function(e){var a=e.children,s=e.className,c=e.spacing,d=e.rowSpacing,m=e.as,u=n(e,t);return r.createElement(l,i({container:!0,as:m||"div",className:s,spacing:c,rowSpacing:d},u),a)},exports.GridItem=function(e){var a=e.children,s=e.className,t=e.small,d=e.medium,m=e.large,u=e.as,g=n(e,c);return r.createElement(l,i({as:u||"div",item:!0,className:s,small:t,medium:d,large:m},g),a)};
|
|
2
|
-
//# sourceMappingURL=grid.cjs.production.min.js.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"grid.cjs.production.min.js","sources":["../src/BaseGrid.tsx","../src/index.tsx","../src/GridContainer.tsx","../src/GridItem.tsx"],"sourcesContent":["import React from 'react';\nimport classnames from 'classnames';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\ntype BaseGridOwnProps = {\n /** Om det er en GridContainer\n * @default false\n */\n container?: boolean;\n /** Om det er et GridItem\n * @default false\n */\n item?: boolean;\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Vertikalt mellomrom for hver GridItem\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet\n * @default \"div\"\n */\n as?: string | React.ElementType;\n /** Ekstra klassenavn */\n className?: string;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n};\nconst defaultElement = 'code';\n\nexport type BaseGridProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, BaseGridOwnProps>;\n\nexport const BaseGrid = <E extends React.ElementType = typeof defaultElement>({\n item,\n container,\n children,\n className,\n spacing,\n rowSpacing,\n small = 1,\n medium,\n large,\n as,\n ...rest\n}: BaseGridProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n const classList = classnames([\n 'eds-grid',\n className,\n { 'eds-grid__item': item },\n { 'eds-grid__container': container },\n { [`eds-grid--spacing-${spacing}`]: spacing && container },\n { [`eds-grid--spacing-row-${rowSpacing}`]: spacing !== rowSpacing },\n { [`eds-grid--small-${small}`]: small && item },\n { [`eds-grid--medium-${medium}`]: medium && item },\n { [`eds-grid--large-${large}`]: large && item },\n ]);\n return (\n <Element className={classList} {...rest}>\n {children}\n </Element>\n );\n};\n","import { warnAboutMissingStyles } from '@entur/utils';\nimport './index.scss';\n\nwarnAboutMissingStyles('grid');\n\nexport * from './GridItem';\nexport * from './GridContainer';\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridContainerOwnProps = {\n /** Mellomromet mellom hver GridItem, basert på spacing-tokens\n * @default none\n */\n spacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** Mellomrom mellom hver rad\n * @default Verdien til spacing\n */\n rowSpacing?:\n | 'none'\n | 'extraSmall2'\n | 'extraSmall'\n | 'small'\n | 'medium'\n | 'large'\n | 'extraLarge';\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid-containeren */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridContainerProps<\n T extends React.ElementType = typeof defaultElement,\n> = PolymorphicComponentProps<T, GridContainerOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridContainer = <\n E extends React.ElementType = typeof defaultElement,\n>({\n children,\n className,\n spacing,\n rowSpacing,\n as,\n ...rest\n}: GridContainerProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n container\n as={Element}\n className={className}\n spacing={spacing}\n rowSpacing={rowSpacing}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n","import React from 'react';\nimport { BaseGrid } from './BaseGrid';\nimport { PolymorphicComponentProps } from '@entur/utils';\nimport './Grid.scss';\n\nexport type GridItemOwnProps = {\n /** Antall kolonner en Item bruker på små flater (og oppover)\n * @default 1\n */\n small?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på medium flater (og oppover) */\n medium?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** Antall kolonner en Item bruker på store flater. */\n large?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;\n /** HTML-elementet eller React-komponenten som lager Grid-elementet*/\n as?: 'div' | React.ElementType;\n /** Innholdet til Grid containeren/item */\n children?: React.ReactNode;\n /** Ekstra klassenavn */\n className?: string;\n};\n\nexport type GridItemProps<T extends React.ElementType = typeof defaultElement> =\n PolymorphicComponentProps<T, GridItemOwnProps>;\n\nconst defaultElement = 'div';\n\nexport const GridItem = <E extends React.ElementType = typeof defaultElement>({\n children,\n className,\n small,\n medium,\n large,\n as,\n ...rest\n}: GridItemProps<E>): JSX.Element => {\n const Element: React.ElementType = as || defaultElement;\n return (\n <BaseGrid\n as={Element}\n item\n className={className}\n small={small}\n medium={medium}\n large={large}\n {...rest}\n >\n {children}\n </BaseGrid>\n );\n};\n"],"names":["BaseGrid","_ref","_ref2","_ref3","_ref4","_ref5","_ref6","item","container","children","className","spacing","rowSpacing","_ref$small","small","medium","large","as","rest","_objectWithoutPropertiesLoose","_excluded","Element","classList","classnames","React","createElement","_extends","warnAboutMissingStyles"],"mappings":"qlBA0DaA,EAAW,SAAHC,GAYe,IAAAC,EAAAC,EAAAC,EAAAC,EAAAC,EAXlCC,EAAIN,EAAJM,KACAC,EAASP,EAATO,UACAC,EAAQR,EAARQ,SACAC,EAAST,EAATS,UACAC,EAAOV,EAAPU,QACAC,EAAUX,EAAVW,WAAUC,EAAAZ,EACVa,MAAAA,OAAQ,IAAHD,EAAG,EAACA,EACTE,EAAMd,EAANc,OACAC,EAAKf,EAALe,MACAC,EAAEhB,EAAFgB,GACGC,EAAIC,EAAAlB,EAAAmB,GAEDC,EAA6BJ,GAlBd,OAmBfK,EAAYC,EAAW,CAC3B,WACAb,EACA,CAAE,iBAAkBH,GACpB,CAAE,sBAAuBC,IAAWN,EAAAA,GAAAA,EACZS,qBAAAA,GAAYA,GAAWH,EAASN,IAAAC,EAAAA,CAAAA,EAAAA,EAC5BS,yBAAAA,GAAeD,IAAYC,EAAUT,IAAAC,EAAAA,GAAAA,EAC3CU,mBAAAA,GAAUA,GAASP,EAAIH,IAAAC,EAAAA,GAAAA,EACtBU,oBAAAA,GAAWA,GAAUR,EAAIF,IAAAC,EAAAA,GAAAA,EAC1BU,mBAAAA,GAAUA,GAAST,EAAID,KAE/C,OACEkB,EAAAC,cAACJ,EAAOK,EAAA,CAAChB,UAAWY,GAAeJ,GAChCT,EAGP,kHCrFAkB,EAAsBA,uBAAC,8BCuCM,SAAH1B,GASe,IANvCQ,EAAQR,EAARQ,SACAC,EAAST,EAATS,UACAC,EAAOV,EAAPU,QACAC,EAAUX,EAAVW,WACAK,EAAEhB,EAAFgB,GACGC,EAAIC,EAAAlB,EAAAmB,GAGP,OACEI,EAACC,cAAAzB,EAAQ0B,EAAA,CACPlB,WACA,EAAAS,GAJ+BA,GAZd,MAiBjBP,UAAWA,EACXC,QAASA,EACTC,WAAYA,GACRM,GAEHT,EAGP,mBCtCwB,SAAHR,GAQe,IAPlCQ,EAAQR,EAARQ,SACAC,EAAST,EAATS,UACAI,EAAKb,EAALa,MACAC,EAAMd,EAANc,OACAC,EAAKf,EAALe,MACAC,EAAEhB,EAAFgB,GACGC,EAAIC,EAAAlB,EAAAmB,GAGP,OACEI,EAAAC,cAACzB,EAAQ0B,EAAA,CACPT,GAH+BA,GAXd,MAejBV,MAAI,EACJG,UAAWA,EACXI,MAAOA,EACPC,OAAQA,EACRC,MAAOA,GACHE,GAEHT,EAGP"}
|