@ndla/primitives 1.0.110-alpha.0 → 1.0.111-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 +6 -0
- package/es/Hero.mjs +2 -1
- package/es/Hero.mjs.map +1 -1
- package/lib/Hero.js +2 -1
- package/lib/Hero.js.map +1 -1
- package/package.json +5 -5
|
@@ -407,6 +407,7 @@
|
|
|
407
407
|
"height]___[value:350px",
|
|
408
408
|
"zIndex]___[value:hide",
|
|
409
409
|
"clipPath]___[value:polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)",
|
|
410
|
+
"background]___[value:none]___[cond:_print",
|
|
410
411
|
"position]___[value:absolute",
|
|
411
412
|
"background]___[value:primary",
|
|
412
413
|
"background]___[value:surface.brand.2.bold",
|
package/dist/styles.css
CHANGED
|
@@ -3006,6 +3006,12 @@
|
|
|
3006
3006
|
.checked\:hover\:motionReduce\:trf_translateX\(120\%\):is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]):is(:hover, [data-hover]) {
|
|
3007
3007
|
transform: translateX(120%);
|
|
3008
3008
|
}
|
|
3009
|
+
}
|
|
3010
|
+
|
|
3011
|
+
@media print {
|
|
3012
|
+
.print\:bg_none {
|
|
3013
|
+
background: none;
|
|
3014
|
+
}
|
|
3009
3015
|
}
|
|
3010
3016
|
|
|
3011
3017
|
@media not print {
|
package/es/Hero.mjs
CHANGED
|
@@ -26,7 +26,8 @@ const { withProvider, withContext } = createStyleContext(sva({
|
|
|
26
26
|
width: "100%",
|
|
27
27
|
zIndex: "hide",
|
|
28
28
|
overflow: "hidden",
|
|
29
|
-
clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)"
|
|
29
|
+
clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)",
|
|
30
|
+
_print: { background: "none" }
|
|
30
31
|
},
|
|
31
32
|
content: {
|
|
32
33
|
display: "flex",
|
package/es/Hero.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.mjs","names":[],"sources":["../src/Hero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n slots: [\"root\", \"background\", \"content\"],\n base: {\n root: {\n width: \"100%\",\n position: \"relative\",\n },\n background: {\n height: \"350px\",\n width: \"100%\",\n zIndex: \"hide\",\n overflow: \"hidden\",\n clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n },\n content: {\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"flex-end\",\n paddingBlock: \"xsmall\",\n tablet: {\n paddingBlockStart: \"xxlarge\",\n },\n },\n },\n defaultVariants: {\n variant: \"primary\",\n absolute: true,\n },\n variants: {\n absolute: {\n true: {\n background: {\n position: \"absolute\",\n },\n },\n },\n variant: {\n primary: {\n background: {\n background: \"primary\",\n },\n content: {\n \"@media not print\": {\n color: \"text.onAction\",\n },\n },\n },\n brand2Bold: {\n background: {\n background: \"surface.brand.2.bold\",\n },\n content: {\n \"@media not print\": {\n color: \"text.onAction\",\n },\n },\n },\n brand2: {\n background: {\n background: \"surface.brand.2\",\n },\n },\n brand2Moderate: {\n background: {\n background: \"surface.brand.2.moderate\",\n },\n },\n brand1: {\n background: {\n background: \"surface.brand.1\",\n },\n },\n brand1Moderate: {\n background: {\n background: \"surface.brand.1.moderate\",\n },\n },\n brand3Moderate: {\n background: {\n background: \"surface.brand.3.moderate\",\n },\n },\n brand4Moderate: {\n background: {\n background: \"surface.brand.4.moderate\",\n },\n },\n brand5Moderate: {\n background: {\n background: \"surface.brand.5.moderate\",\n },\n },\n neutral: {\n background: {\n background: \"surface.infoSubtle\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Hero.mjs","names":[],"sources":["../src/Hero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n slots: [\"root\", \"background\", \"content\"],\n base: {\n root: {\n width: \"100%\",\n position: \"relative\",\n },\n background: {\n height: \"350px\",\n width: \"100%\",\n zIndex: \"hide\",\n overflow: \"hidden\",\n clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n _print: {\n background: \"none\",\n },\n },\n content: {\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"flex-end\",\n paddingBlock: \"xsmall\",\n tablet: {\n paddingBlockStart: \"xxlarge\",\n },\n },\n },\n defaultVariants: {\n variant: \"primary\",\n absolute: true,\n },\n variants: {\n absolute: {\n true: {\n background: {\n position: \"absolute\",\n },\n },\n },\n variant: {\n primary: {\n background: {\n background: \"primary\",\n },\n content: {\n \"@media not print\": {\n color: \"text.onAction\",\n },\n },\n },\n brand2Bold: {\n background: {\n background: \"surface.brand.2.bold\",\n },\n content: {\n \"@media not print\": {\n color: \"text.onAction\",\n },\n },\n },\n brand2: {\n background: {\n background: \"surface.brand.2\",\n },\n },\n brand2Moderate: {\n background: {\n background: \"surface.brand.2.moderate\",\n },\n },\n brand1: {\n background: {\n background: \"surface.brand.1\",\n },\n },\n brand1Moderate: {\n background: {\n background: \"surface.brand.1.moderate\",\n },\n },\n brand3Moderate: {\n background: {\n background: \"surface.brand.3.moderate\",\n },\n },\n brand4Moderate: {\n background: {\n background: \"surface.brand.4.moderate\",\n },\n },\n brand5Moderate: {\n background: {\n background: \"surface.brand.5.moderate\",\n },\n },\n neutral: {\n background: {\n background: \"surface.infoSubtle\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;AAqHA,MAAM,EAAE,cAAc,gBAAgB,mBAxGnB,IAAI;CACrB,OAAO;EAAC;EAAQ;EAAc;EAAU;CACxC,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU;GACX;EACD,YAAY;GACV,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ,EACN,YAAY,QACb;GACF;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,cAAc;GACd,QAAQ,EACN,mBAAmB,WACpB;GACF;EACF;CACD,iBAAiB;EACf,SAAS;EACT,UAAU;EACX;CACD,UAAU;EACR,UAAU,EACR,MAAM,EACJ,YAAY,EACV,UAAU,YACX,EACF,EACF;EACD,SAAS;GACP,SAAS;IACP,YAAY,EACV,YAAY,WACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,YAAY;IACV,YAAY,EACV,YAAY,wBACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,SAAS,EACP,YAAY,EACV,YAAY,sBACb,EACF;GACF;EACF;CACF,CAAC,CAEkE;AAQpE,MAAa,OAAO,aAAa,IAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI1E,MAAa,iBAAiB,YAAY,IAAI,KAAK,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzF,MAAa,cAAc,YAAY,IAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC"}
|
package/lib/Hero.js
CHANGED
|
@@ -26,7 +26,8 @@ const { withProvider, withContext } = (0, __ndla_styled_system_jsx.createStyleCo
|
|
|
26
26
|
width: "100%",
|
|
27
27
|
zIndex: "hide",
|
|
28
28
|
overflow: "hidden",
|
|
29
|
-
clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)"
|
|
29
|
+
clipPath: "polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)",
|
|
30
|
+
_print: { background: "none" }
|
|
30
31
|
},
|
|
31
32
|
content: {
|
|
32
33
|
display: "flex",
|
package/lib/Hero.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Hero.js","names":["ark"],"sources":["../src/Hero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n slots: [\"root\", \"background\", \"content\"],\n base: {\n root: {\n width: \"100%\",\n position: \"relative\",\n },\n background: {\n height: \"350px\",\n width: \"100%\",\n zIndex: \"hide\",\n overflow: \"hidden\",\n clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n },\n content: {\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"flex-end\",\n paddingBlock: \"xsmall\",\n tablet: {\n paddingBlockStart: \"xxlarge\",\n },\n },\n },\n defaultVariants: {\n variant: \"primary\",\n absolute: true,\n },\n variants: {\n absolute: {\n true: {\n background: {\n position: \"absolute\",\n },\n },\n },\n variant: {\n primary: {\n background: {\n background: \"primary\",\n },\n content: {\n \"@media not print\": {\n color: \"text.onAction\",\n },\n },\n },\n brand2Bold: {\n background: {\n background: \"surface.brand.2.bold\",\n },\n content: {\n \"@media not print\": {\n color: \"text.onAction\",\n },\n },\n },\n brand2: {\n background: {\n background: \"surface.brand.2\",\n },\n },\n brand2Moderate: {\n background: {\n background: \"surface.brand.2.moderate\",\n },\n },\n brand1: {\n background: {\n background: \"surface.brand.1\",\n },\n },\n brand1Moderate: {\n background: {\n background: \"surface.brand.1.moderate\",\n },\n },\n brand3Moderate: {\n background: {\n background: \"surface.brand.3.moderate\",\n },\n },\n brand4Moderate: {\n background: {\n background: \"surface.brand.4.moderate\",\n },\n },\n brand5Moderate: {\n background: {\n background: \"surface.brand.5.moderate\",\n },\n },\n neutral: {\n background: {\n background: \"surface.infoSubtle\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;
|
|
1
|
+
{"version":3,"file":"Hero.js","names":["ark"],"sources":["../src/Hero.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-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 HTMLArkProps, ark } from \"@ark-ui/react\";\nimport { type RecipeVariantProps, sva } from \"@ndla/styled-system/css\";\nimport { createStyleContext } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps } from \"@ndla/styled-system/types\";\n\nconst heroRecipe = sva({\n slots: [\"root\", \"background\", \"content\"],\n base: {\n root: {\n width: \"100%\",\n position: \"relative\",\n },\n background: {\n height: \"350px\",\n width: \"100%\",\n zIndex: \"hide\",\n overflow: \"hidden\",\n clipPath: \"polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)\",\n _print: {\n background: \"none\",\n },\n },\n content: {\n display: \"flex\",\n flexWrap: \"wrap\",\n alignItems: \"flex-end\",\n paddingBlock: \"xsmall\",\n tablet: {\n paddingBlockStart: \"xxlarge\",\n },\n },\n },\n defaultVariants: {\n variant: \"primary\",\n absolute: true,\n },\n variants: {\n absolute: {\n true: {\n background: {\n position: \"absolute\",\n },\n },\n },\n variant: {\n primary: {\n background: {\n background: \"primary\",\n },\n content: {\n \"@media not print\": {\n color: \"text.onAction\",\n },\n },\n },\n brand2Bold: {\n background: {\n background: \"surface.brand.2.bold\",\n },\n content: {\n \"@media not print\": {\n color: \"text.onAction\",\n },\n },\n },\n brand2: {\n background: {\n background: \"surface.brand.2\",\n },\n },\n brand2Moderate: {\n background: {\n background: \"surface.brand.2.moderate\",\n },\n },\n brand1: {\n background: {\n background: \"surface.brand.1\",\n },\n },\n brand1Moderate: {\n background: {\n background: \"surface.brand.1.moderate\",\n },\n },\n brand3Moderate: {\n background: {\n background: \"surface.brand.3.moderate\",\n },\n },\n brand4Moderate: {\n background: {\n background: \"surface.brand.4.moderate\",\n },\n },\n brand5Moderate: {\n background: {\n background: \"surface.brand.5.moderate\",\n },\n },\n neutral: {\n background: {\n background: \"surface.infoSubtle\",\n },\n },\n },\n },\n});\n\nconst { withProvider, withContext } = createStyleContext(heroRecipe);\n\nexport type HeroVariantProps = NonNullable<RecipeVariantProps<typeof heroRecipe>>;\n\nexport type HeroVariant = NonNullable<HeroVariantProps>[\"variant\"];\n\nexport interface HeroProps extends HTMLArkProps<\"div\">, StyledProps, HeroVariantProps {}\n\nexport const Hero = withProvider(ark.div, \"root\", { baseComponent: true });\n\nexport interface HeroBackgroundProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroBackground = withContext(ark.div, \"background\", { baseComponent: true });\n\nexport interface HeroContentProps extends HTMLArkProps<\"div\">, StyledProps {}\n\nexport const HeroContent = withContext(ark.div, \"content\", { baseComponent: true });\n"],"mappings":";;;;;;;;;;;;AAqHA,MAAM,EAAE,cAAc,mGAxGC;CACrB,OAAO;EAAC;EAAQ;EAAc;EAAU;CACxC,MAAM;EACJ,MAAM;GACJ,OAAO;GACP,UAAU;GACX;EACD,YAAY;GACV,QAAQ;GACR,OAAO;GACP,QAAQ;GACR,UAAU;GACV,UAAU;GACV,QAAQ,EACN,YAAY,QACb;GACF;EACD,SAAS;GACP,SAAS;GACT,UAAU;GACV,YAAY;GACZ,cAAc;GACd,QAAQ,EACN,mBAAmB,WACpB;GACF;EACF;CACD,iBAAiB;EACf,SAAS;EACT,UAAU;EACX;CACD,UAAU;EACR,UAAU,EACR,MAAM,EACJ,YAAY,EACV,UAAU,YACX,EACF,EACF;EACD,SAAS;GACP,SAAS;IACP,YAAY,EACV,YAAY,WACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,YAAY;IACV,YAAY,EACV,YAAY,wBACb;IACD,SAAS,EACP,oBAAoB,EAClB,OAAO,iBACR,EACF;IACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,QAAQ,EACN,YAAY,EACV,YAAY,mBACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,gBAAgB,EACd,YAAY,EACV,YAAY,4BACb,EACF;GACD,SAAS,EACP,YAAY,EACV,YAAY,sBACb,EACF;GACF;EACF;CACF,CAAC,CAEkE;AAQpE,MAAa,OAAO,aAAaA,mBAAI,KAAK,QAAQ,EAAE,eAAe,MAAM,CAAC;AAI1E,MAAa,iBAAiB,YAAYA,mBAAI,KAAK,cAAc,EAAE,eAAe,MAAM,CAAC;AAIzF,MAAa,cAAc,YAAYA,mBAAI,KAAK,WAAW,EAAE,eAAe,MAAM,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/primitives",
|
|
3
3
|
"type": "module",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.111-alpha.0",
|
|
5
5
|
"description": "Primitive components for NDLA.",
|
|
6
6
|
"license": "GPL-3.0",
|
|
7
7
|
"exports": {
|
|
@@ -33,11 +33,11 @@
|
|
|
33
33
|
],
|
|
34
34
|
"dependencies": {
|
|
35
35
|
"@ark-ui/react": "^5.25.0",
|
|
36
|
-
"@ndla/styled-system": "^0.0.
|
|
37
|
-
"@ndla/util": "^5.0.
|
|
36
|
+
"@ndla/styled-system": "^0.0.43",
|
|
37
|
+
"@ndla/util": "^5.0.16-alpha.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@ndla/preset-panda": "^0.0.
|
|
40
|
+
"@ndla/preset-panda": "^0.0.65",
|
|
41
41
|
"@pandacss/dev": "^1.3.1"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "62d7cf5983d3a65eb82e63e30ab03677c99b3dbd"
|
|
51
51
|
}
|