@ndla/primitives 1.0.125-alpha.0 → 1.0.126-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 +8 -0
- package/dist/styles.css +119 -7
- package/es/Figure.mjs +30 -12
- package/es/Figure.mjs.map +1 -1
- package/lib/Figure.d.ts +20 -0
- package/lib/Figure.js +30 -12
- package/lib/Figure.js.map +1 -1
- package/package.json +4 -4
|
@@ -348,16 +348,24 @@
|
|
|
348
348
|
"color]___[value:text.error",
|
|
349
349
|
"whiteSpace]___[value:pre-line",
|
|
350
350
|
"transitionProperty]___[value:transform, width, height",
|
|
351
|
+
"width]___[value:60%]___[cond:_print",
|
|
351
352
|
"width]___[value:50%]___[cond:tablet",
|
|
352
353
|
"width]___[value:65%]___[cond:desktop",
|
|
354
|
+
"width]___[value:65%]___[cond:_print",
|
|
353
355
|
"width]___[value:35%]___[cond:tablet",
|
|
354
356
|
"width]___[value:50%]___[cond:desktop",
|
|
357
|
+
"width]___[value:50%]___[cond:_print",
|
|
355
358
|
"width]___[value:25%]___[cond:tablet",
|
|
356
359
|
"width]___[value:35%]___[cond:desktop",
|
|
360
|
+
"width]___[value:35%]___[cond:_print",
|
|
357
361
|
"float]___[value:left]___[cond:tablet",
|
|
358
362
|
"clear]___[value:left]___[cond:tablet",
|
|
363
|
+
"float]___[value:left]___[cond:_print",
|
|
364
|
+
"clear]___[value:left]___[cond:_print",
|
|
359
365
|
"float]___[value:right]___[cond:tablet",
|
|
360
366
|
"clear]___[value:right]___[cond:tablet",
|
|
367
|
+
"float]___[value:right]___[cond:_print",
|
|
368
|
+
"clear]___[value:right]___[cond:_print",
|
|
361
369
|
"zIndex]___[value:base",
|
|
362
370
|
"left]___[value:auto",
|
|
363
371
|
"marginBlock]___[value:xsmall",
|
package/dist/styles.css
CHANGED
|
@@ -102,6 +102,90 @@
|
|
|
102
102
|
font-size: calc(var(--font-sizes-xxlarge) * 1.11);
|
|
103
103
|
line-height: calc(var(--line-heights-xxlarge) * 1.11);
|
|
104
104
|
}
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
@media print {
|
|
108
|
+
.textStyle_label\.small {
|
|
109
|
+
font-size: var(--font-sizes-xxsmall);
|
|
110
|
+
line-height: var(--line-heights-xsmall);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
.textStyle_label\.small:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
114
|
+
font-size: calc(var(--font-sizes-xxsmall) * 1.11);
|
|
115
|
+
line-height: calc(var(--line-heights-xsmall) * 1.11);
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
@media print {
|
|
120
|
+
.textStyle_label\.medium {
|
|
121
|
+
font-size: var(--font-sizes-xsmall);
|
|
122
|
+
line-height: var(--line-heights-xsmall);
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
.textStyle_label\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
126
|
+
font-size: calc(var(--font-sizes-xsmall) * 1.11);
|
|
127
|
+
line-height: calc(var(--line-heights-xsmall) * 1.11);
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
@media print {
|
|
132
|
+
.textStyle_label\.large\! {
|
|
133
|
+
font-size: var(--font-sizes-small) !important;
|
|
134
|
+
line-height: var(--line-heights-small) !important;
|
|
135
|
+
}
|
|
136
|
+
|
|
137
|
+
.textStyle_label\.large\!:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
138
|
+
font-size: calc(var(--font-sizes-small) * 1.11) !important;
|
|
139
|
+
line-height: calc(var(--line-heights-small) * 1.11) !important;
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
|
|
143
|
+
@media print {
|
|
144
|
+
.textStyle_label\.xsmall {
|
|
145
|
+
font-size: var(--font-sizes-xxsmall);
|
|
146
|
+
line-height: var(--line-heights-xxsmall);
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
.textStyle_label\.xsmall:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
150
|
+
font-size: calc(var(--font-sizes-xxsmall) * 1.11);
|
|
151
|
+
line-height: calc(var(--line-heights-xxsmall) * 1.11);
|
|
152
|
+
}
|
|
153
|
+
}
|
|
154
|
+
|
|
155
|
+
@media print {
|
|
156
|
+
.textStyle_body\.medium {
|
|
157
|
+
font-size: var(--font-sizes-xsmall);
|
|
158
|
+
line-height: var(--line-heights-xsmall);
|
|
159
|
+
}
|
|
160
|
+
|
|
161
|
+
.textStyle_body\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
162
|
+
font-size: calc(var(--font-sizes-xsmall) * 1.11);
|
|
163
|
+
line-height: calc(var(--line-heights-xsmall) * 1.11);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
|
|
167
|
+
@media print {
|
|
168
|
+
.textStyle_heading\.medium {
|
|
169
|
+
font-size: var(--font-sizes-xxlarge);
|
|
170
|
+
line-height: var(--line-heights-xxlarge);
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.textStyle_heading\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
174
|
+
font-size: calc(var(--font-sizes-xxlarge) * 1.11);
|
|
175
|
+
line-height: calc(var(--line-heights-xxlarge) * 1.11);
|
|
176
|
+
}
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
@media print {
|
|
180
|
+
.\[\&_\>_\*\]\:textStyle_label\.large\! > * {
|
|
181
|
+
font-size: var(--font-sizes-small) !important;
|
|
182
|
+
line-height: var(--line-heights-small) !important;
|
|
183
|
+
}
|
|
184
|
+
|
|
185
|
+
.\[\&_\>_\*\]\:textStyle_label\.large\! > *:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
|
|
186
|
+
font-size: calc(var(--font-sizes-small) * 1.11) !important;
|
|
187
|
+
line-height: calc(var(--line-heights-small) * 1.11) !important;
|
|
188
|
+
}
|
|
105
189
|
}
|
|
106
190
|
}
|
|
107
191
|
|
|
@@ -461,7 +545,7 @@
|
|
|
461
545
|
gap: var(--spacing-xxsmall);
|
|
462
546
|
}
|
|
463
547
|
|
|
464
|
-
.
|
|
548
|
+
.text-decoration_none {
|
|
465
549
|
text-decoration: none;
|
|
466
550
|
}
|
|
467
551
|
|
|
@@ -470,8 +554,9 @@
|
|
|
470
554
|
outline-offset: 2px;
|
|
471
555
|
}
|
|
472
556
|
|
|
473
|
-
.
|
|
557
|
+
.text-decoration_underline {
|
|
474
558
|
text-decoration: underline;
|
|
559
|
+
text-decoration-thickness: max(0.0625em, 1px);
|
|
475
560
|
}
|
|
476
561
|
|
|
477
562
|
.py_xxsmall {
|
|
@@ -1665,12 +1750,14 @@
|
|
|
1665
1750
|
border-color: var(--colors-surface-action);
|
|
1666
1751
|
}
|
|
1667
1752
|
|
|
1668
|
-
.checked\:
|
|
1753
|
+
.checked\:text-decoration_underline:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
|
|
1669
1754
|
text-decoration: underline;
|
|
1755
|
+
text-decoration-thickness: max(0.0625em, 1px);
|
|
1670
1756
|
}
|
|
1671
1757
|
|
|
1672
|
-
.highlighted\:
|
|
1758
|
+
.highlighted\:text-decoration_underline[data-highlighted] {
|
|
1673
1759
|
text-decoration: underline;
|
|
1760
|
+
text-decoration-thickness: max(0.0625em, 1px);
|
|
1674
1761
|
}
|
|
1675
1762
|
|
|
1676
1763
|
.autofill\:trs_background-color_600000s_0s\,_color_600000s_0s:autofill {
|
|
@@ -2339,7 +2426,7 @@
|
|
|
2339
2426
|
background: var(--colors-surface-danger-subtle-hover);
|
|
2340
2427
|
}
|
|
2341
2428
|
|
|
2342
|
-
.hover\:
|
|
2429
|
+
.hover\:text-decoration_none:is(:hover, [data-hover]) {
|
|
2343
2430
|
text-decoration: none;
|
|
2344
2431
|
}
|
|
2345
2432
|
|
|
@@ -2351,8 +2438,9 @@
|
|
|
2351
2438
|
border-style: dashed;
|
|
2352
2439
|
}
|
|
2353
2440
|
|
|
2354
|
-
.hover\:
|
|
2441
|
+
.hover\:text-decoration_underline:is(:hover, [data-hover]) {
|
|
2355
2442
|
text-decoration: underline;
|
|
2443
|
+
text-decoration-thickness: max(0.0625em, 1px);
|
|
2356
2444
|
}
|
|
2357
2445
|
|
|
2358
2446
|
.hover\:bx-sh-c_stroke\.hover:is(:hover, [data-hover]) {
|
|
@@ -2511,7 +2599,7 @@
|
|
|
2511
2599
|
border-color: var(--colors-stroke-error);
|
|
2512
2600
|
}
|
|
2513
2601
|
|
|
2514
|
-
.disabled\:hover\:
|
|
2602
|
+
.disabled\:hover\:text-decoration_none:is(:disabled, [disabled], [data-disabled], [aria-disabled=true]):is(:hover, [data-hover]) {
|
|
2515
2603
|
text-decoration: none;
|
|
2516
2604
|
}
|
|
2517
2605
|
|
|
@@ -2947,6 +3035,30 @@
|
|
|
2947
3035
|
@media print {
|
|
2948
3036
|
.print\:bg_none {
|
|
2949
3037
|
background: none;
|
|
3038
|
+
}
|
|
3039
|
+
.print\:float_left {
|
|
3040
|
+
float: left;
|
|
3041
|
+
}
|
|
3042
|
+
.print\:clear_left {
|
|
3043
|
+
clear: left;
|
|
3044
|
+
}
|
|
3045
|
+
.print\:float_right {
|
|
3046
|
+
float: right;
|
|
3047
|
+
}
|
|
3048
|
+
.print\:clear_right {
|
|
3049
|
+
clear: right;
|
|
3050
|
+
}
|
|
3051
|
+
.print\:w_60\% {
|
|
3052
|
+
width: 60%;
|
|
3053
|
+
}
|
|
3054
|
+
.print\:w_65\% {
|
|
3055
|
+
width: 65%;
|
|
3056
|
+
}
|
|
3057
|
+
.print\:w_50\% {
|
|
3058
|
+
width: 50%;
|
|
3059
|
+
}
|
|
3060
|
+
.print\:w_35\% {
|
|
3061
|
+
width: 35%;
|
|
2950
3062
|
}
|
|
2951
3063
|
}
|
|
2952
3064
|
|
package/es/Figure.mjs
CHANGED
|
@@ -24,29 +24,47 @@ const figureRecipe = cva({
|
|
|
24
24
|
},
|
|
25
25
|
variants: {
|
|
26
26
|
size: {
|
|
27
|
-
full: {
|
|
27
|
+
full: {
|
|
28
|
+
width: "100%",
|
|
29
|
+
_print: { width: "60%" }
|
|
30
|
+
},
|
|
28
31
|
medium: {
|
|
29
32
|
tablet: { width: "50%" },
|
|
30
|
-
desktop: { width: "65%" }
|
|
33
|
+
desktop: { width: "65%" },
|
|
34
|
+
_print: { width: "65%" }
|
|
31
35
|
},
|
|
32
36
|
small: {
|
|
33
37
|
tablet: { width: "35%" },
|
|
34
|
-
desktop: { width: "50%" }
|
|
38
|
+
desktop: { width: "50%" },
|
|
39
|
+
_print: { width: "50%" }
|
|
35
40
|
},
|
|
36
41
|
xsmall: {
|
|
37
42
|
tablet: { width: "25%" },
|
|
38
|
-
desktop: { width: "35%" }
|
|
43
|
+
desktop: { width: "35%" },
|
|
44
|
+
_print: { width: "35%" }
|
|
39
45
|
}
|
|
40
46
|
},
|
|
41
47
|
float: {
|
|
42
|
-
left: {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
left: {
|
|
49
|
+
tablet: {
|
|
50
|
+
float: "left",
|
|
51
|
+
clear: "left"
|
|
52
|
+
},
|
|
53
|
+
_print: {
|
|
54
|
+
float: "left",
|
|
55
|
+
clear: "left"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
right: {
|
|
59
|
+
tablet: {
|
|
60
|
+
float: "right",
|
|
61
|
+
clear: "right"
|
|
62
|
+
},
|
|
63
|
+
_print: {
|
|
64
|
+
float: "right",
|
|
65
|
+
clear: "right"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
50
68
|
}
|
|
51
69
|
},
|
|
52
70
|
defaultVariants: { size: "full" },
|
package/es/Figure.mjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Figure.mjs","names":[],"sources":["../src/Figure.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, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n base: {\n position: \"relative\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform, width, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n variants: {\n size: {\n full: {\n width: \"100%\",\n },\n medium: {\n tablet: {\n width: \"50%\",\n },\n desktop: {\n width: \"65%\",\n },\n },\n small: {\n tablet: {\n width: \"35%\",\n },\n desktop: {\n width: \"50%\",\n },\n },\n xsmall: {\n tablet: {\n width: \"25%\",\n },\n desktop: {\n width: \"35%\",\n },\n },\n },\n float: {\n left: {\n tablet: {\n float: \"left\",\n clear: \"left\",\n },\n },\n right: {\n tablet: {\n float: \"right\",\n clear: \"right\",\n },\n },\n },\n },\n defaultVariants: {\n size: \"full\",\n },\n compoundVariants: [\n {\n float: [\"left\", \"right\"],\n css: {\n zIndex: \"base\",\n left: \"auto\",\n marginBlock: \"xsmall\",\n },\n },\n {\n float: \"left\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineEnd: \"medium\",\n tabletDown: { marginInlineEnd: \"0\" },\n },\n },\n {\n float: \"right\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineStart: \"medium\",\n tabletDown: { marginInlineStart: \"0\" },\n },\n },\n {\n float: [\"left\", \"right\"],\n size: [\"full\"],\n css: {\n marginInlineStart: \"0\",\n marginInlineEnd: \"0\",\n },\n },\n ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAe,IAAI;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM,
|
|
1
|
+
{"version":3,"file":"Figure.mjs","names":[],"sources":["../src/Figure.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, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n base: {\n position: \"relative\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform, width, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n variants: {\n size: {\n full: {\n width: \"100%\",\n _print: {\n width: \"60%\",\n },\n },\n medium: {\n tablet: {\n width: \"50%\",\n },\n desktop: {\n width: \"65%\",\n },\n _print: {\n width: \"65%\",\n },\n },\n small: {\n tablet: {\n width: \"35%\",\n },\n desktop: {\n width: \"50%\",\n },\n _print: {\n width: \"50%\",\n },\n },\n xsmall: {\n tablet: {\n width: \"25%\",\n },\n desktop: {\n width: \"35%\",\n },\n _print: {\n width: \"35%\",\n },\n },\n },\n float: {\n left: {\n tablet: {\n float: \"left\",\n clear: \"left\",\n },\n _print: {\n float: \"left\",\n clear: \"left\",\n },\n },\n right: {\n tablet: {\n float: \"right\",\n clear: \"right\",\n },\n _print: {\n float: \"right\",\n clear: \"right\",\n },\n },\n },\n },\n defaultVariants: {\n size: \"full\",\n },\n compoundVariants: [\n {\n float: [\"left\", \"right\"],\n css: {\n zIndex: \"base\",\n left: \"auto\",\n marginBlock: \"xsmall\",\n },\n },\n {\n float: \"left\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineEnd: \"medium\",\n tabletDown: { marginInlineEnd: \"0\" },\n },\n },\n {\n float: \"right\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineStart: \"medium\",\n tabletDown: { marginInlineStart: \"0\" },\n },\n },\n {\n float: [\"left\", \"right\"],\n size: [\"full\"],\n css: {\n marginInlineStart: \"0\",\n marginInlineEnd: \"0\",\n },\n },\n ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,eAAe,IAAI;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,OAAO;IACP,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM;IACJ,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACD,OAAO;IACL,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,eAAe,OAAO,IAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,SAAS,YAAsC,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,oBAAC,cAAD;EAAc,KAAK,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EACtG"}
|
package/lib/Figure.d.ts
CHANGED
|
@@ -12,6 +12,9 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
|
|
|
12
12
|
size: {
|
|
13
13
|
full: {
|
|
14
14
|
width: "100%";
|
|
15
|
+
_print: {
|
|
16
|
+
width: "60%";
|
|
17
|
+
};
|
|
15
18
|
};
|
|
16
19
|
medium: {
|
|
17
20
|
tablet: {
|
|
@@ -20,6 +23,9 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
|
|
|
20
23
|
desktop: {
|
|
21
24
|
width: "65%";
|
|
22
25
|
};
|
|
26
|
+
_print: {
|
|
27
|
+
width: "65%";
|
|
28
|
+
};
|
|
23
29
|
};
|
|
24
30
|
small: {
|
|
25
31
|
tablet: {
|
|
@@ -28,6 +34,9 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
|
|
|
28
34
|
desktop: {
|
|
29
35
|
width: "50%";
|
|
30
36
|
};
|
|
37
|
+
_print: {
|
|
38
|
+
width: "50%";
|
|
39
|
+
};
|
|
31
40
|
};
|
|
32
41
|
xsmall: {
|
|
33
42
|
tablet: {
|
|
@@ -36,6 +45,9 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
|
|
|
36
45
|
desktop: {
|
|
37
46
|
width: "35%";
|
|
38
47
|
};
|
|
48
|
+
_print: {
|
|
49
|
+
width: "35%";
|
|
50
|
+
};
|
|
39
51
|
};
|
|
40
52
|
};
|
|
41
53
|
float: {
|
|
@@ -44,12 +56,20 @@ declare const figureRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<
|
|
|
44
56
|
float: "left";
|
|
45
57
|
clear: "left";
|
|
46
58
|
};
|
|
59
|
+
_print: {
|
|
60
|
+
float: "left";
|
|
61
|
+
clear: "left";
|
|
62
|
+
};
|
|
47
63
|
};
|
|
48
64
|
right: {
|
|
49
65
|
tablet: {
|
|
50
66
|
float: "right";
|
|
51
67
|
clear: "right";
|
|
52
68
|
};
|
|
69
|
+
_print: {
|
|
70
|
+
float: "right";
|
|
71
|
+
clear: "right";
|
|
72
|
+
};
|
|
53
73
|
};
|
|
54
74
|
};
|
|
55
75
|
}>;
|
package/lib/Figure.js
CHANGED
|
@@ -24,29 +24,47 @@ const figureRecipe = (0, _ndla_styled_system_css.cva)({
|
|
|
24
24
|
},
|
|
25
25
|
variants: {
|
|
26
26
|
size: {
|
|
27
|
-
full: {
|
|
27
|
+
full: {
|
|
28
|
+
width: "100%",
|
|
29
|
+
_print: { width: "60%" }
|
|
30
|
+
},
|
|
28
31
|
medium: {
|
|
29
32
|
tablet: { width: "50%" },
|
|
30
|
-
desktop: { width: "65%" }
|
|
33
|
+
desktop: { width: "65%" },
|
|
34
|
+
_print: { width: "65%" }
|
|
31
35
|
},
|
|
32
36
|
small: {
|
|
33
37
|
tablet: { width: "35%" },
|
|
34
|
-
desktop: { width: "50%" }
|
|
38
|
+
desktop: { width: "50%" },
|
|
39
|
+
_print: { width: "50%" }
|
|
35
40
|
},
|
|
36
41
|
xsmall: {
|
|
37
42
|
tablet: { width: "25%" },
|
|
38
|
-
desktop: { width: "35%" }
|
|
43
|
+
desktop: { width: "35%" },
|
|
44
|
+
_print: { width: "35%" }
|
|
39
45
|
}
|
|
40
46
|
},
|
|
41
47
|
float: {
|
|
42
|
-
left: {
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
48
|
+
left: {
|
|
49
|
+
tablet: {
|
|
50
|
+
float: "left",
|
|
51
|
+
clear: "left"
|
|
52
|
+
},
|
|
53
|
+
_print: {
|
|
54
|
+
float: "left",
|
|
55
|
+
clear: "left"
|
|
56
|
+
}
|
|
57
|
+
},
|
|
58
|
+
right: {
|
|
59
|
+
tablet: {
|
|
60
|
+
float: "right",
|
|
61
|
+
clear: "right"
|
|
62
|
+
},
|
|
63
|
+
_print: {
|
|
64
|
+
float: "right",
|
|
65
|
+
clear: "right"
|
|
66
|
+
}
|
|
67
|
+
}
|
|
50
68
|
}
|
|
51
69
|
},
|
|
52
70
|
defaultVariants: { size: "full" },
|
package/lib/Figure.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Figure.js","names":["ark","css"],"sources":["../src/Figure.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, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n base: {\n position: \"relative\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform, width, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n variants: {\n size: {\n full: {\n width: \"100%\",\n },\n medium: {\n tablet: {\n width: \"50%\",\n },\n desktop: {\n width: \"65%\",\n },\n },\n small: {\n tablet: {\n width: \"35%\",\n },\n desktop: {\n width: \"50%\",\n },\n },\n xsmall: {\n tablet: {\n width: \"25%\",\n },\n desktop: {\n width: \"35%\",\n },\n },\n },\n float: {\n left: {\n tablet: {\n float: \"left\",\n clear: \"left\",\n },\n },\n right: {\n tablet: {\n float: \"right\",\n clear: \"right\",\n },\n },\n },\n },\n defaultVariants: {\n size: \"full\",\n },\n compoundVariants: [\n {\n float: [\"left\", \"right\"],\n css: {\n zIndex: \"base\",\n left: \"auto\",\n marginBlock: \"xsmall\",\n },\n },\n {\n float: \"left\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineEnd: \"medium\",\n tabletDown: { marginInlineEnd: \"0\" },\n },\n },\n {\n float: \"right\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineStart: \"medium\",\n tabletDown: { marginInlineStart: \"0\" },\n },\n },\n {\n float: [\"left\", \"right\"],\n size: [\"full\"],\n css: {\n marginInlineStart: \"0\",\n marginInlineEnd: \"0\",\n },\n },\n ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,gBAAA,GAAA,wBAAA,KAAmB;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM,
|
|
1
|
+
{"version":3,"file":"Figure.js","names":["ark","css"],"sources":["../src/Figure.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, css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { RecipeVariant, StyledProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst figureRecipe = cva({\n base: {\n position: \"relative\",\n transitionDuration: \"normal\",\n transitionProperty: \"transform, width, height\",\n transitionTimingFunction: \"default\",\n _motionReduce: {\n transition: \"none\",\n transitionDuration: \"0s\",\n },\n },\n variants: {\n size: {\n full: {\n width: \"100%\",\n _print: {\n width: \"60%\",\n },\n },\n medium: {\n tablet: {\n width: \"50%\",\n },\n desktop: {\n width: \"65%\",\n },\n _print: {\n width: \"65%\",\n },\n },\n small: {\n tablet: {\n width: \"35%\",\n },\n desktop: {\n width: \"50%\",\n },\n _print: {\n width: \"50%\",\n },\n },\n xsmall: {\n tablet: {\n width: \"25%\",\n },\n desktop: {\n width: \"35%\",\n },\n _print: {\n width: \"35%\",\n },\n },\n },\n float: {\n left: {\n tablet: {\n float: \"left\",\n clear: \"left\",\n },\n _print: {\n float: \"left\",\n clear: \"left\",\n },\n },\n right: {\n tablet: {\n float: \"right\",\n clear: \"right\",\n },\n _print: {\n float: \"right\",\n clear: \"right\",\n },\n },\n },\n },\n defaultVariants: {\n size: \"full\",\n },\n compoundVariants: [\n {\n float: [\"left\", \"right\"],\n css: {\n zIndex: \"base\",\n left: \"auto\",\n marginBlock: \"xsmall\",\n },\n },\n {\n float: \"left\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineEnd: \"medium\",\n tabletDown: { marginInlineEnd: \"0\" },\n },\n },\n {\n float: \"right\",\n size: [\"medium\", \"small\", \"xsmall\"],\n css: {\n marginInlineStart: \"medium\",\n tabletDown: { marginInlineStart: \"0\" },\n },\n },\n {\n float: [\"left\", \"right\"],\n size: [\"full\"],\n css: {\n marginInlineStart: \"0\",\n marginInlineEnd: \"0\",\n },\n },\n ],\n});\n\nexport type FigureVariantProps = NonNullable<RecipeVariantProps<typeof figureRecipe>>;\n\nexport type FigureSize = RecipeVariant<typeof figureRecipe>[\"size\"];\n\nexport type FigureFloat = RecipeVariant<typeof figureRecipe>[\"float\"];\n\nexport interface FigureProps extends HTMLArkProps<\"figure\">, StyledProps, FigureVariantProps {}\n\nconst StyledFigure = styled(ark.figure, {}, { baseComponent: true });\n\nexport const Figure = forwardRef<HTMLElement, FigureProps>(({ size, float, css: cssProp, ...props }, ref) => {\n return <StyledFigure css={css.raw(figureRecipe.raw({ size, float }), cssProp)} {...props} ref={ref} />;\n});\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,gBAAA,GAAA,wBAAA,KAAmB;CACvB,MAAM;EACJ,UAAU;EACV,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,eAAe;GACb,YAAY;GACZ,oBAAoB;GACrB;EACF;CACD,UAAU;EACR,MAAM;GACJ,MAAM;IACJ,OAAO;IACP,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,OAAO;IACL,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACD,QAAQ;IACN,QAAQ,EACN,OAAO,OACR;IACD,SAAS,EACP,OAAO,OACR;IACD,QAAQ,EACN,OAAO,OACR;IACF;GACF;EACD,OAAO;GACL,MAAM;IACJ,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACD,OAAO;IACL,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACD,QAAQ;KACN,OAAO;KACP,OAAO;KACR;IACF;GACF;EACF;CACD,iBAAiB,EACf,MAAM,QACP;CACD,kBAAkB;EAChB;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,KAAK;IACH,QAAQ;IACR,MAAM;IACN,aAAa;IACd;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,iBAAiB;IACjB,YAAY,EAAE,iBAAiB,KAAK;IACrC;GACF;EACD;GACE,OAAO;GACP,MAAM;IAAC;IAAU;IAAS;IAAS;GACnC,KAAK;IACH,mBAAmB;IACnB,YAAY,EAAE,mBAAmB,KAAK;IACvC;GACF;EACD;GACE,OAAO,CAAC,QAAQ,QAAQ;GACxB,MAAM,CAAC,OAAO;GACd,KAAK;IACH,mBAAmB;IACnB,iBAAiB;IAClB;GACF;EACF;CACF,CAAC;AAUF,MAAM,gBAAA,GAAA,wBAAA,QAAsBA,cAAAA,IAAI,QAAQ,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEpE,MAAa,UAAA,GAAA,MAAA,aAA+C,EAAE,MAAM,OAAO,KAAK,SAAS,GAAG,SAAS,QAAQ;AAC3G,QAAO,iBAAA,GAAA,kBAAA,KAAC,cAAD;EAAc,KAAKC,wBAAAA,IAAI,IAAI,aAAa,IAAI;GAAE;GAAM;GAAO,CAAC,EAAE,QAAQ;EAAE,GAAI;EAAY;EAAO,CAAA;EACtG"}
|
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.126-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.34.1",
|
|
36
|
-
"@ndla/styled-system": "^0.0.
|
|
36
|
+
"@ndla/styled-system": "^0.0.48",
|
|
37
37
|
"@ndla/util": "^5.0.19-alpha.0"
|
|
38
38
|
},
|
|
39
39
|
"devDependencies": {
|
|
40
|
-
"@ndla/preset-panda": "^0.0.
|
|
40
|
+
"@ndla/preset-panda": "^0.0.75",
|
|
41
41
|
"@pandacss/dev": "^1.7.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"publishConfig": {
|
|
48
48
|
"access": "public"
|
|
49
49
|
},
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "74f4af9223bd5cbd27679b44b3cab1fcf4d26c76"
|
|
51
51
|
}
|