@ndla/ui 56.0.166-alpha.0 → 56.0.167-alpha.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/panda.buildinfo.json +1 -0
- package/dist/styles.css +4 -0
- package/es/Grid/Grid.mjs +2 -2
- package/es/Grid/Grid.mjs.map +1 -1
- package/lib/Grid/Grid.js +2 -2
- package/lib/Grid/Grid.js.map +1 -1
- package/package.json +2 -2
- package/src/Grid/Grid.tsx +4 -2
|
@@ -308,6 +308,7 @@
|
|
|
308
308
|
"gridTemplateColumns]___[value:repeat(4, minmax(0, 1fr))]___[cond:desktop",
|
|
309
309
|
"borderColor]___[value:surface.brand.2",
|
|
310
310
|
"outline]___[value:1px solid",
|
|
311
|
+
"outlineColor]___[value:stroke.default",
|
|
311
312
|
"paddingBlock]___[value:xxlarge]___[cond:&:not(:has(> img))",
|
|
312
313
|
"width]___[value:surface.3xsmall",
|
|
313
314
|
"textStyle]___[value:heading.large",
|
package/dist/styles.css
CHANGED
package/es/Grid/Grid.mjs
CHANGED
|
@@ -44,10 +44,10 @@ const GridContainer = styled("div", {
|
|
|
44
44
|
}
|
|
45
45
|
});
|
|
46
46
|
const StyledGridItem = styled("div", {
|
|
47
|
-
base: {},
|
|
47
|
+
base: { padding: "medium" },
|
|
48
48
|
variants: { border: { true: {
|
|
49
49
|
outline: "1px solid",
|
|
50
|
-
|
|
50
|
+
outlineColor: "stroke.default"
|
|
51
51
|
} } }
|
|
52
52
|
});
|
|
53
53
|
const Grid = ({ columns, border, children, ...rest }) => {
|
package/es/Grid/Grid.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.mjs","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nconst StyledGridItem = styled(\"div\", {\n base: {},\n variants: {\n border: {\n true: {\n outline: \"1px solid\",\n
|
|
1
|
+
{"version":3,"file":"Grid.mjs","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nconst StyledGridItem = styled(\"div\", {\n base: {\n padding: \"medium\",\n },\n variants: {\n border: {\n true: {\n outline: \"1px solid\",\n outlineColor: \"stroke.default\",\n },\n },\n },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n children?: ReactNode[];\n columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n return (\n <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n {children}\n </GridContainer>\n );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n return (\n <StyledGridItem data-embed-type=\"grid-cell\" border={border} {...rest}>\n {children}\n </StyledGridItem>\n );\n};\n"],"mappings":";;;;;AAYA,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO;CACnC,MAAM,EACJ,SAAS,UACV;CACD,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,SAAS;EACT,cAAc;EACf,EACF,EACF;CACF,CAAC;AAaF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,GAAG,WAAsB;CACzE,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,oBAAC;EAAc,mBAAgB;EAAe;EAAQ,SAAS;EAAiB,GAAI;EACjF;GACa;;AAIpB,MAAa,YAAY,EAAE,QAAQ,UAAU,GAAG,WAA0B;AACxE,QACE,oBAAC;EAAe,mBAAgB;EAAoB;EAAQ,GAAI;EAC7D;GACc"}
|
package/lib/Grid/Grid.js
CHANGED
|
@@ -52,10 +52,10 @@ const GridContainer = (0, __ndla_styled_system_jsx.styled)("div", {
|
|
|
52
52
|
}
|
|
53
53
|
});
|
|
54
54
|
const StyledGridItem = (0, __ndla_styled_system_jsx.styled)("div", {
|
|
55
|
-
base: {},
|
|
55
|
+
base: { padding: "medium" },
|
|
56
56
|
variants: { border: { true: {
|
|
57
57
|
outline: "1px solid",
|
|
58
|
-
|
|
58
|
+
outlineColor: "stroke.default"
|
|
59
59
|
} } }
|
|
60
60
|
});
|
|
61
61
|
const Grid = ({ columns, border, children, ...rest }) => {
|
package/lib/Grid/Grid.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nconst StyledGridItem = styled(\"div\", {\n base: {},\n variants: {\n border: {\n true: {\n outline: \"1px solid\",\n
|
|
1
|
+
{"version":3,"file":"Grid.js","names":[],"sources":["../../src/Grid/Grid.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentProps, type ReactNode } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledVariantProps } from \"@ndla/styled-system/types\";\n\nconst GridContainer = styled(\"div\", {\n base: {\n display: \"grid\",\n justifyContent: \"center\",\n borderRadius: \"xsmall\",\n gridRowGap: \"large\",\n gridColumnGap: \"medium\",\n width: \"100%\",\n minWidth: \"surface.xxsmall\",\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n\n \"& div[data-embed-type='pitch']\": {\n height: \"100%\",\n \"& > :last-child\": {\n marginTop: \"auto\",\n },\n },\n tabletDown: {\n gridTemplateColumns: \"repeat(1, minmax(0, 1fr))\",\n },\n tabletToDesktop: {\n gridTemplateColumns: \"repeat(2, minmax(0, 1fr))\",\n \"& > div:nth-child(3):last-child\": {\n display: \"flex\",\n flexFlow: \"column\",\n justifyContent: \"center\",\n alignItems: \"center\",\n gridColumn: \"span 2\",\n },\n },\n },\n variants: {\n columns: {\n \"2\": {},\n \"2x2\": {},\n \"3\": { desktop: { gridTemplateColumns: \"repeat(3, minmax(0, 1fr))\" } },\n \"4\": { desktop: { gridTemplateColumns: \"repeat(4, minmax(0, 1fr))\" } },\n },\n border: {\n lightBlue: {\n padding: \"xsmall\",\n border: \"1px solid\",\n borderColor: \"surface.brand.2\",\n },\n },\n },\n});\n\nconst StyledGridItem = styled(\"div\", {\n base: {\n padding: \"medium\",\n },\n variants: {\n border: {\n true: {\n outline: \"1px solid\",\n outlineColor: \"stroke.default\",\n },\n },\n },\n});\n\ntype GridVariantProps = NonNullable<StyledVariantProps<typeof GridContainer>>;\n\nexport interface GridProps extends ComponentProps<\"div\">, GridVariantProps {\n children?: ReactNode[];\n columns: NonNullable<GridVariantProps[\"columns\"]>;\n}\n\ntype GridItemVariantProps = NonNullable<StyledVariantProps<typeof StyledGridItem>>;\n\nexport interface GridItemProps extends ComponentProps<\"div\">, GridItemVariantProps {}\n\nexport const Grid = ({ columns, border, children, ...rest }: GridProps) => {\n const amountOfColumns = children?.length === 3 ? \"3\" : columns;\n\n return (\n <GridContainer data-embed-type=\"grid\" border={border} columns={amountOfColumns} {...rest}>\n {children}\n </GridContainer>\n );\n};\n\nexport const GridItem = ({ border, children, ...rest }: GridItemProps) => {\n return (\n <StyledGridItem data-embed-type=\"grid-cell\" border={border} {...rest}>\n {children}\n </StyledGridItem>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAYA,MAAM,qDAAuB,OAAO;CAClC,MAAM;EACJ,SAAS;EACT,gBAAgB;EAChB,cAAc;EACd,YAAY;EACZ,eAAe;EACf,OAAO;EACP,UAAU;EACV,qBAAqB;EAErB,kCAAkC;GAChC,QAAQ;GACR,mBAAmB,EACjB,WAAW,QACZ;GACF;EACD,YAAY,EACV,qBAAqB,6BACtB;EACD,iBAAiB;GACf,qBAAqB;GACrB,mCAAmC;IACjC,SAAS;IACT,UAAU;IACV,gBAAgB;IAChB,YAAY;IACZ,YAAY;IACb;GACF;EACF;CACD,UAAU;EACR,SAAS;GACP,KAAK,EAAE;GACP,OAAO,EAAE;GACT,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACtE,KAAK,EAAE,SAAS,EAAE,qBAAqB,6BAA6B,EAAE;GACvE;EACD,QAAQ,EACN,WAAW;GACT,SAAS;GACT,QAAQ;GACR,aAAa;GACd,EACF;EACF;CACF,CAAC;AAEF,MAAM,sDAAwB,OAAO;CACnC,MAAM,EACJ,SAAS,UACV;CACD,UAAU,EACR,QAAQ,EACN,MAAM;EACJ,SAAS;EACT,cAAc;EACf,EACF,EACF;CACF,CAAC;AAaF,MAAa,QAAQ,EAAE,SAAS,QAAQ,UAAU,GAAG,WAAsB;CACzE,MAAM,kBAAkB,UAAU,WAAW,IAAI,MAAM;AAEvD,QACE,2CAAC;EAAc,mBAAgB;EAAe;EAAQ,SAAS;EAAiB,GAAI;EACjF;GACa;;AAIpB,MAAa,YAAY,EAAE,QAAQ,UAAU,GAAG,WAA0B;AACxE,QACE,2CAAC;EAAe,mBAAgB;EAAoB;EAAQ,GAAI;EAC7D;GACc"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/ui",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "56.0.
|
|
4
|
+
"version": "56.0.167-alpha.0",
|
|
5
5
|
"description": "UI component library for NDLA",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -62,5 +62,5 @@
|
|
|
62
62
|
"publishConfig": {
|
|
63
63
|
"access": "public"
|
|
64
64
|
},
|
|
65
|
-
"gitHead": "
|
|
65
|
+
"gitHead": "c4043a8cc2993ba04ebf8303f39cc4a22054b4c9"
|
|
66
66
|
}
|
package/src/Grid/Grid.tsx
CHANGED
|
@@ -59,12 +59,14 @@ const GridContainer = styled("div", {
|
|
|
59
59
|
});
|
|
60
60
|
|
|
61
61
|
const StyledGridItem = styled("div", {
|
|
62
|
-
base: {
|
|
62
|
+
base: {
|
|
63
|
+
padding: "medium",
|
|
64
|
+
},
|
|
63
65
|
variants: {
|
|
64
66
|
border: {
|
|
65
67
|
true: {
|
|
66
68
|
outline: "1px solid",
|
|
67
|
-
|
|
69
|
+
outlineColor: "stroke.default",
|
|
68
70
|
},
|
|
69
71
|
},
|
|
70
72
|
},
|