@ndla/primitives 1.0.87-alpha.0 → 1.0.88-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 +12 -0
- package/dist/styles.css +48 -0
- package/lib/DatePicker.d.ts +88 -0
- package/lib/index.d.ts +2 -0
- package/package.json +2 -2
- package/es/Accordion.js +0 -140
- package/es/ArticleLists.js +0 -186
- package/es/Badge.js +0 -85
- package/es/BlockQuote.js +0 -55
- package/es/Button.js +0 -320
- package/es/Card/Card.js +0 -92
- package/es/Checkbox.js +0 -250
- package/es/Combobox.js +0 -258
- package/es/Dialog.js +0 -409
- package/es/ErrorMessage/ErrorMessage.js +0 -80
- package/es/ExpandableBox.js +0 -60
- package/es/Field.js +0 -25
- package/es/FieldErrorMessage.js +0 -68
- package/es/FieldHelper.js +0 -59
- package/es/Figure.js +0 -125
- package/es/FileUpload.js +0 -176
- package/es/FramedContent.js +0 -59
- package/es/Hero.js +0 -120
- package/es/Image.js +0 -165
- package/es/Input.js +0 -191
- package/es/Label.js +0 -102
- package/es/Layout/PageContainer.js +0 -48
- package/es/Layout/PageContent.js +0 -106
- package/es/ListItem/ListItem.js +0 -216
- package/es/Menu.js +0 -226
- package/es/MessageBox.js +0 -63
- package/es/NdlaLogo.js +0 -287
- package/es/Pagination.js +0 -48
- package/es/Popover.js +0 -125
- package/es/RadioGroup.js +0 -166
- package/es/Select.js +0 -239
- package/es/Skeleton.js +0 -30
- package/es/Slider.js +0 -115
- package/es/Spinner.js +0 -67
- package/es/Switch.js +0 -143
- package/es/Table.js +0 -81
- package/es/Tabs.js +0 -257
- package/es/TagsInput.js +0 -146
- package/es/Text.js +0 -59
- package/es/Toast.js +0 -125
- package/es/ToggleGroup.js +0 -31
- package/es/Tooltip.js +0 -74
- package/es/Tree/Tree.js +0 -219
- package/es/createStyleContext.js +0 -71
- package/es/index.js +0 -53
- package/es/storybookHelpers/data.js +0 -212
- package/lib/Accordion.js +0 -146
- package/lib/ArticleLists.js +0 -192
- package/lib/Badge.js +0 -91
- package/lib/BlockQuote.js +0 -61
- package/lib/Button.js +0 -326
- package/lib/Card/Card.js +0 -98
- package/lib/Checkbox.js +0 -257
- package/lib/Combobox.js +0 -268
- package/lib/Dialog.js +0 -418
- package/lib/ErrorMessage/ErrorMessage.js +0 -86
- package/lib/ExpandableBox.js +0 -66
- package/lib/Field.js +0 -31
- package/lib/FieldErrorMessage.js +0 -74
- package/lib/FieldHelper.js +0 -65
- package/lib/Figure.js +0 -131
- package/lib/FileUpload.js +0 -182
- package/lib/FramedContent.js +0 -65
- package/lib/Hero.js +0 -126
- package/lib/Image.js +0 -173
- package/lib/Input.js +0 -197
- package/lib/Label.js +0 -108
- package/lib/Layout/PageContainer.js +0 -54
- package/lib/Layout/PageContent.js +0 -112
- package/lib/ListItem/ListItem.js +0 -222
- package/lib/Menu.js +0 -234
- package/lib/MessageBox.js +0 -69
- package/lib/NdlaLogo.js +0 -296
- package/lib/Pagination.js +0 -54
- package/lib/Popover.js +0 -134
- package/lib/RadioGroup.js +0 -173
- package/lib/Select.js +0 -246
- package/lib/Skeleton.js +0 -36
- package/lib/Slider.js +0 -122
- package/lib/Spinner.js +0 -73
- package/lib/Switch.js +0 -150
- package/lib/Table.js +0 -87
- package/lib/Tabs.js +0 -265
- package/lib/TagsInput.js +0 -152
- package/lib/Text.js +0 -65
- package/lib/Toast.js +0 -133
- package/lib/ToggleGroup.js +0 -37
- package/lib/Tooltip.js +0 -80
- package/lib/Tree/Tree.js +0 -227
- package/lib/createStyleContext.js +0 -78
- package/lib/index.js +0 -1430
- package/lib/storybookHelpers/data.js +0 -218
|
@@ -283,6 +283,18 @@
|
|
|
283
283
|
"color]___[value:stroke.default",
|
|
284
284
|
"textDecoration]___[value:underline]___[cond:_checked",
|
|
285
285
|
"textDecoration]___[value:underline]___[cond:_highlighted",
|
|
286
|
+
"animation]___[value:fade-shift-in 0.25s ease-in-out]___[cond:_open",
|
|
287
|
+
"animation]___[value:fade-shift-out 0.25s ease-in-out]___[cond:_closed",
|
|
288
|
+
"gap]___[value:5xsmall",
|
|
289
|
+
"borderCollapse]___[value:separate",
|
|
290
|
+
"borderSpacing]___[value:5xsmall",
|
|
291
|
+
"margin]___[value:-5xsmall",
|
|
292
|
+
"content]___[value:'-']___[cond:&[data-today]<___>_before",
|
|
293
|
+
"color]___[value:stroke.default]___[cond:&[data-today]<___>_before",
|
|
294
|
+
"position]___[value:absolute]___[cond:&[data-today]<___>_before",
|
|
295
|
+
"marginBlockStart]___[value:medium]___[cond:&[data-today]<___>_before",
|
|
296
|
+
"color]___[value:text.subtle]___[cond:&[data-outside-range]",
|
|
297
|
+
"fontWeight]___[value:normal]___[cond:&[data-outside-range]",
|
|
286
298
|
"position]___[value:fixed",
|
|
287
299
|
"height]___[value:100vh",
|
|
288
300
|
"width]___[value:100vw",
|
package/dist/styles.css
CHANGED
|
@@ -392,6 +392,22 @@
|
|
|
392
392
|
color: var(--colors-stroke-default);
|
|
393
393
|
}
|
|
394
394
|
|
|
395
|
+
.gap_5xsmall {
|
|
396
|
+
gap: var(--spacing-5xsmall);
|
|
397
|
+
}
|
|
398
|
+
|
|
399
|
+
.bd-cl_separate {
|
|
400
|
+
border-collapse: separate;
|
|
401
|
+
}
|
|
402
|
+
|
|
403
|
+
.bd-sp_5xsmall {
|
|
404
|
+
border-spacing: var(--spacing-5xsmall);
|
|
405
|
+
}
|
|
406
|
+
|
|
407
|
+
.m_-5xsmall {
|
|
408
|
+
margin: calc(var(--spacing-5xsmall) * -1);
|
|
409
|
+
}
|
|
410
|
+
|
|
395
411
|
.pos_fixed {
|
|
396
412
|
position: fixed;
|
|
397
413
|
}
|
|
@@ -1709,6 +1725,18 @@
|
|
|
1709
1725
|
text-decoration: underline;
|
|
1710
1726
|
}
|
|
1711
1727
|
|
|
1728
|
+
.open\:anim_fade-shift-in_0\.25s_ease-in-out:is([open], [data-open], [data-state="open"]) {
|
|
1729
|
+
animation: fade-shift-in 0.25s ease-in-out;
|
|
1730
|
+
}
|
|
1731
|
+
|
|
1732
|
+
.closed\:anim_fade-shift-out_0\.25s_ease-in-out:is([closed], [data-closed], [data-state="closed"]) {
|
|
1733
|
+
animation: fade-shift-out 0.25s ease-in-out;
|
|
1734
|
+
}
|
|
1735
|
+
|
|
1736
|
+
.\[\&\[data-outside-range\]\]\:c_text\.subtle[data-outside-range] {
|
|
1737
|
+
color: var(--colors-text-subtle);
|
|
1738
|
+
}
|
|
1739
|
+
|
|
1712
1740
|
.open\:anim_backdrop-in:is([open], [data-open], [data-state="open"]) {
|
|
1713
1741
|
animation: var(--animations-backdrop-in);
|
|
1714
1742
|
}
|
|
@@ -2064,6 +2092,10 @@
|
|
|
2064
2092
|
transition-timing-function: var(--easings-default);
|
|
2065
2093
|
}
|
|
2066
2094
|
|
|
2095
|
+
.\[\&\[data-outside-range\]\]\:fw_normal[data-outside-range] {
|
|
2096
|
+
font-weight: var(--font-weights-normal);
|
|
2097
|
+
}
|
|
2098
|
+
|
|
2067
2099
|
.\[\&_\>_\*\]\:grid-cs_2 > * {
|
|
2068
2100
|
grid-column-start: 2;
|
|
2069
2101
|
}
|
|
@@ -2602,6 +2634,18 @@
|
|
|
2602
2634
|
transform: rotate(180deg);
|
|
2603
2635
|
}
|
|
2604
2636
|
|
|
2637
|
+
.\[\&\[data-today\]\]\:before\:c_stroke\.default[data-today]::before {
|
|
2638
|
+
color: var(--colors-stroke-default);
|
|
2639
|
+
}
|
|
2640
|
+
|
|
2641
|
+
.\[\&\[data-today\]\]\:before\:pos_absolute[data-today]::before {
|
|
2642
|
+
position: absolute;
|
|
2643
|
+
}
|
|
2644
|
+
|
|
2645
|
+
.\[\&\[data-today\]\]\:before\:mbs_medium[data-today]::before {
|
|
2646
|
+
margin-block-start: var(--spacing-medium);
|
|
2647
|
+
}
|
|
2648
|
+
|
|
2605
2649
|
.open\:\[\&_summary\,_\[data-embed-type\=\'expandable-box-summary\'\]\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) summary,.open\:\[\&_summary\,_\[data-embed-type\=\'expandable-box-summary\'\]\]\:mbe_-xxsmall:is([open], [data-open], [data-state="open"]) [data-embed-type='expandable-box-summary'] {
|
|
2606
2650
|
margin-block-end: calc(var(--spacing-xxsmall) * -1);
|
|
2607
2651
|
}
|
|
@@ -2748,6 +2792,10 @@
|
|
|
2748
2792
|
background-color: var(--colors-surface-default);
|
|
2749
2793
|
}
|
|
2750
2794
|
|
|
2795
|
+
.\[\&\[data-today\]\]\:before\:content_\'-\'[data-today]::before {
|
|
2796
|
+
content: '-';
|
|
2797
|
+
}
|
|
2798
|
+
|
|
2751
2799
|
.first\:hover\:bd-bs-c_var\(--border-hover\):first-child:is(:hover, [data-hover]) {
|
|
2752
2800
|
border-block-start-color: var(--border-hover);
|
|
2753
2801
|
}
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Copyright (c) 2024-present, NDLA.
|
|
3
|
+
*
|
|
4
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
+
* LICENSE file in the root directory of this source tree.
|
|
6
|
+
*
|
|
7
|
+
*/
|
|
8
|
+
import { DatePicker } from "@ark-ui/react";
|
|
9
|
+
import type { JsxStyleProps } from "@ndla/styled-system/types";
|
|
10
|
+
import type { TextProps } from "./Text";
|
|
11
|
+
export interface DatePickerRootProps extends DatePicker.RootProps, JsxStyleProps {
|
|
12
|
+
translations: DatePicker.RootProps["translations"];
|
|
13
|
+
locale: DatePicker.RootProps["locale"];
|
|
14
|
+
}
|
|
15
|
+
export declare const DatePickerRoot: import("react").ForwardRefExoticComponent<DatePickerRootProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
16
|
+
interface ClearTriggerProps extends DatePicker.ClearTriggerProps, JsxStyleProps {
|
|
17
|
+
}
|
|
18
|
+
export declare const DatePickerClearTrigger: import("react").ForwardRefExoticComponent<ClearTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
19
|
+
export declare const DatePickerContent: import("react").ForwardRefExoticComponent<DatePicker.ContentProps & {
|
|
20
|
+
consumeCss?: boolean;
|
|
21
|
+
} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
|
|
22
|
+
interface DatePickerContentProps extends DatePicker.ContentProps, JsxStyleProps {
|
|
23
|
+
}
|
|
24
|
+
export declare const DatePickerStandaloneContent: import("react").ForwardRefExoticComponent<DatePickerContentProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
25
|
+
interface DatePickerControlProps extends DatePicker.ControlProps, JsxStyleProps {
|
|
26
|
+
}
|
|
27
|
+
export declare const DatePickerControl: import("react").ForwardRefExoticComponent<DatePickerControlProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
28
|
+
interface DatePickerInputProps extends DatePicker.InputProps, JsxStyleProps {
|
|
29
|
+
}
|
|
30
|
+
export declare const DatePickerInput: import("react").ForwardRefExoticComponent<DatePickerInputProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
31
|
+
interface DatePickerLabelProps extends DatePicker.LabelProps, JsxStyleProps {
|
|
32
|
+
}
|
|
33
|
+
export declare const DatePickerLabel: ({ textStyle, fontWeight, ...props }: DatePickerLabelProps & TextProps) => import("react/jsx-runtime").JSX.Element;
|
|
34
|
+
interface DatePickerMonthSelectProps extends DatePicker.MonthSelectProps, JsxStyleProps {
|
|
35
|
+
}
|
|
36
|
+
export declare const DatePickerMonthSelect: import("react").ForwardRefExoticComponent<DatePickerMonthSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
|
|
37
|
+
interface DatePickerNextTrigger extends DatePicker.NextTriggerProps, JsxStyleProps {
|
|
38
|
+
}
|
|
39
|
+
export declare const DatePickerNextTrigger: import("react").ForwardRefExoticComponent<DatePickerNextTrigger & import("react").RefAttributes<HTMLButtonElement>>;
|
|
40
|
+
interface DatePickerPositionerProps extends DatePicker.PositionerProps, JsxStyleProps {
|
|
41
|
+
}
|
|
42
|
+
export declare const DatePickerPositioner: import("react").ForwardRefExoticComponent<DatePickerPositionerProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
43
|
+
interface DatePickerPresetTriggerProps extends DatePicker.PresetTriggerProps, JsxStyleProps {
|
|
44
|
+
}
|
|
45
|
+
export declare const DatePickerPresetTrigger: import("react").ForwardRefExoticComponent<DatePickerPresetTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
46
|
+
interface DatePickerPrevTriggerProps extends DatePicker.PrevTriggerProps, JsxStyleProps {
|
|
47
|
+
}
|
|
48
|
+
export declare const DatePickerPrevTrigger: import("react").ForwardRefExoticComponent<DatePickerPrevTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
49
|
+
interface DatePickerRangeTextProps extends DatePicker.RangeTextProps, JsxStyleProps {
|
|
50
|
+
}
|
|
51
|
+
export declare const DatePickerRangeText: import("react").ForwardRefExoticComponent<DatePickerRangeTextProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
52
|
+
interface DatePickerTableBodyProps extends DatePicker.TableBodyProps, JsxStyleProps {
|
|
53
|
+
}
|
|
54
|
+
export declare const DatePickerTableBody: import("react").ForwardRefExoticComponent<DatePickerTableBodyProps & import("react").RefAttributes<HTMLTableSectionElement>>;
|
|
55
|
+
interface DatePickerTableCellProps extends DatePicker.TableCellProps, JsxStyleProps {
|
|
56
|
+
}
|
|
57
|
+
export declare const DatePickerTableCell: import("react").ForwardRefExoticComponent<DatePickerTableCellProps & import("react").RefAttributes<HTMLTableCellElement>>;
|
|
58
|
+
interface DatePickerTableCellTriggerProps extends DatePicker.TableCellTriggerProps, JsxStyleProps {
|
|
59
|
+
}
|
|
60
|
+
export declare const DatePickerTableCellTrigger: import("react").ForwardRefExoticComponent<DatePickerTableCellTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
61
|
+
interface DatePickerTableHeadProps extends DatePicker.TableHeadProps, JsxStyleProps {
|
|
62
|
+
}
|
|
63
|
+
export declare const DatePickerTableHead: import("react").ForwardRefExoticComponent<DatePickerTableHeadProps & import("react").RefAttributes<HTMLTableSectionElement>>;
|
|
64
|
+
interface DatePickerTableHeaderProps extends DatePicker.TableHeaderProps, JsxStyleProps {
|
|
65
|
+
}
|
|
66
|
+
export declare const DatePickerTableHeader: import("react").ForwardRefExoticComponent<DatePickerTableHeaderProps & import("react").RefAttributes<HTMLTableCellElement>>;
|
|
67
|
+
interface DatePickerTableProps extends DatePicker.TableProps, JsxStyleProps {
|
|
68
|
+
}
|
|
69
|
+
export declare const DatePickerTable: import("react").ForwardRefExoticComponent<DatePickerTableProps & import("react").RefAttributes<HTMLTableElement>>;
|
|
70
|
+
interface DatePickerTableRowProps extends DatePicker.TableRowProps, JsxStyleProps {
|
|
71
|
+
}
|
|
72
|
+
export declare const DatePickerTableRow: import("react").ForwardRefExoticComponent<DatePickerTableRowProps & import("react").RefAttributes<HTMLTableRowElement>>;
|
|
73
|
+
interface DatePickerTriggerProps extends DatePicker.TriggerProps, JsxStyleProps {
|
|
74
|
+
}
|
|
75
|
+
export declare const DatePickerTrigger: import("react").ForwardRefExoticComponent<DatePickerTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
76
|
+
interface DatePickerViewControlProps extends DatePicker.ViewControlProps, JsxStyleProps {
|
|
77
|
+
}
|
|
78
|
+
export declare const DatePickerViewControl: import("react").ForwardRefExoticComponent<DatePickerViewControlProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
79
|
+
interface DatePickerViewProps extends DatePicker.ViewProps, JsxStyleProps {
|
|
80
|
+
}
|
|
81
|
+
export declare const DatePickerView: import("react").ForwardRefExoticComponent<DatePickerViewProps & import("react").RefAttributes<HTMLDivElement>>;
|
|
82
|
+
interface DatePickerViewTriggerProps extends DatePicker.ViewTriggerProps, JsxStyleProps {
|
|
83
|
+
}
|
|
84
|
+
export declare const DatePickerViewTrigger: import("react").ForwardRefExoticComponent<DatePickerViewTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
|
|
85
|
+
interface DatePickerYearSelectProps extends DatePicker.YearSelectProps, JsxStyleProps {
|
|
86
|
+
}
|
|
87
|
+
export declare const DatePickerYearSelect: import("react").ForwardRefExoticComponent<DatePickerYearSelectProps & import("react").RefAttributes<HTMLSelectElement>>;
|
|
88
|
+
export { DatePickerContext } from "@ark-ui/react";
|
package/lib/index.d.ts
CHANGED
|
@@ -24,6 +24,8 @@ export type { CheckboxVariantProps, CheckboxRootProps } from "./Checkbox";
|
|
|
24
24
|
export { CheckboxRoot, CheckboxIndicator, CheckboxLabel, CheckboxControl, CheckboxGroup, CheckboxHiddenInput, } from "./Checkbox";
|
|
25
25
|
export type { ComboboxVariantProps, ComboboxRootProps, ComboboxClearTriggerProps, ComboboxContentProps, ComboboxControlProps, ComboboxInputProps, ComboboxItemGroupLabelProps, ComboboxItemGroupProps, ComboboxItemProps, ComboboxItemIndicatorProps, ComboboxItemTextProps, ComboboxLabelProps, ComboboxPositionerProps, ComboboxTriggerProps, ComboboxListProps, } from "./Combobox";
|
|
26
26
|
export { ComboboxRoot, ComboboxClearTrigger, ComboboxContent, ComboboxContentStandalone, ComboboxControl, ComboboxInput, ComboboxItemGroupLabel, ComboboxItemGroup, ComboboxItemIndicator, ComboboxItem, ComboboxItemText, ComboboxLabel, ComboboxPositioner, ComboboxTrigger, ComboboxList, } from "./Combobox";
|
|
27
|
+
export type { DatePickerRootProps } from "./DatePicker";
|
|
28
|
+
export { DatePickerRoot, DatePickerClearTrigger, DatePickerContent, DatePickerStandaloneContent, DatePickerControl, DatePickerInput, DatePickerLabel, DatePickerMonthSelect, DatePickerNextTrigger, DatePickerPositioner, DatePickerPresetTrigger, DatePickerPrevTrigger, DatePickerRangeText, DatePickerTableBody, DatePickerTableCell, DatePickerTableCellTrigger, DatePickerTableHead, DatePickerTableHeader, DatePickerTable, DatePickerTableRow, DatePickerTrigger, DatePickerViewControl, DatePickerView, DatePickerViewTrigger, DatePickerYearSelect, DatePickerContext, } from "./DatePicker";
|
|
27
29
|
export type { DialogVariantProps, DialogRootProps } from "./Dialog";
|
|
28
30
|
export { DialogRoot, DialogBackdrop, DialogStandaloneContent, DialogPositioner, DialogContent, DialogDescription, DialogTitle, DialogTrigger, DialogCloseTrigger, DialogHeader, DialogBody, DialogFooter, useDialog, DialogRootProvider, } from "./Dialog";
|
|
29
31
|
export type { ExpandableBoxProps, ExpandableBoxSummaryProps } from "./ExpandableBox";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ndla/primitives",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.88-alpha.0",
|
|
4
4
|
"description": "Primitive components for NDLA",
|
|
5
5
|
"license": "GPL-3.0",
|
|
6
6
|
"main": "lib/index.js",
|
|
@@ -43,5 +43,5 @@
|
|
|
43
43
|
"publishConfig": {
|
|
44
44
|
"access": "public"
|
|
45
45
|
},
|
|
46
|
-
"gitHead": "
|
|
46
|
+
"gitHead": "52adafa4348c1c02ebc4da28317aa5270cbe2a80"
|
|
47
47
|
}
|
package/es/Accordion.js
DELETED
|
@@ -1,140 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { Accordion, accordionAnatomy } from "@ark-ui/react";
|
|
10
|
-
import { sva } from "@ndla/styled-system/css";
|
|
11
|
-
import { createStyleContext } from "./createStyleContext";
|
|
12
|
-
const accordionRecipe = sva({
|
|
13
|
-
slots: accordionAnatomy.keys(),
|
|
14
|
-
base: {
|
|
15
|
-
root: {
|
|
16
|
-
display: "flex",
|
|
17
|
-
flexDirection: "column",
|
|
18
|
-
gap: "3xsmall"
|
|
19
|
-
},
|
|
20
|
-
itemTrigger: {
|
|
21
|
-
display: "flex",
|
|
22
|
-
alignItems: "center",
|
|
23
|
-
justifyContent: "space-between",
|
|
24
|
-
background: "surface.default",
|
|
25
|
-
cursor: "pointer",
|
|
26
|
-
transitionDuration: "fast",
|
|
27
|
-
transitionTimingFunction: "default",
|
|
28
|
-
transitionProperty: "background, border-color, border, border-radius",
|
|
29
|
-
_closed: {
|
|
30
|
-
transitionProperty: "background, border-color, border, border-radius"
|
|
31
|
-
},
|
|
32
|
-
_disabled: {
|
|
33
|
-
cursor: "not-allowed",
|
|
34
|
-
background: "surface.disabled.subtle",
|
|
35
|
-
boxShadowColor: "stroke.disabled",
|
|
36
|
-
color: "text.disabled",
|
|
37
|
-
_hover: {
|
|
38
|
-
background: "surface.disabled.subtle",
|
|
39
|
-
boxShadowColor: "stroke.disabled",
|
|
40
|
-
color: "text.disabled"
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
},
|
|
44
|
-
itemIndicator: {
|
|
45
|
-
color: "icon.strong",
|
|
46
|
-
transformOrigin: "center",
|
|
47
|
-
transitionDuration: "normal",
|
|
48
|
-
transitionProperty: "transform",
|
|
49
|
-
transitionTimingFunction: "default",
|
|
50
|
-
_open: {
|
|
51
|
-
transform: "rotate(180deg)"
|
|
52
|
-
},
|
|
53
|
-
_motionReduce: {
|
|
54
|
-
transition: "none",
|
|
55
|
-
transitionDuration: "0s"
|
|
56
|
-
}
|
|
57
|
-
},
|
|
58
|
-
itemContent: {
|
|
59
|
-
overflow: "hidden",
|
|
60
|
-
// TODO: Is this needed?
|
|
61
|
-
transitionProperty: "padding-bottom",
|
|
62
|
-
transitionDuration: "normal",
|
|
63
|
-
transitionTimingFunction: "default",
|
|
64
|
-
paddingBlock: "xsmall",
|
|
65
|
-
paddingInline: "small",
|
|
66
|
-
_open: {
|
|
67
|
-
animation: "collapse-in",
|
|
68
|
-
_motionReduce: {
|
|
69
|
-
animation: "none"
|
|
70
|
-
}
|
|
71
|
-
},
|
|
72
|
-
_closed: {
|
|
73
|
-
animation: "collapse-out",
|
|
74
|
-
_motionReduce: {
|
|
75
|
-
animation: "none"
|
|
76
|
-
}
|
|
77
|
-
}
|
|
78
|
-
},
|
|
79
|
-
item: {
|
|
80
|
-
width: "100%"
|
|
81
|
-
}
|
|
82
|
-
},
|
|
83
|
-
defaultVariants: {
|
|
84
|
-
variant: "bordered"
|
|
85
|
-
},
|
|
86
|
-
variants: {
|
|
87
|
-
variant: {
|
|
88
|
-
clean: {},
|
|
89
|
-
bordered: {
|
|
90
|
-
itemTrigger: {
|
|
91
|
-
paddingInline: "medium",
|
|
92
|
-
paddingBlock: "medium",
|
|
93
|
-
width: "100%",
|
|
94
|
-
borderRadius: "xsmall",
|
|
95
|
-
boxShadowColor: "stroke.subtle",
|
|
96
|
-
boxShadow: "inset 0 0 0 1px var(--shadow-color)",
|
|
97
|
-
_hover: {
|
|
98
|
-
background: "surface.actionSubtle.hover",
|
|
99
|
-
boxShadowColor: "stroke.hover"
|
|
100
|
-
},
|
|
101
|
-
_open: {
|
|
102
|
-
background: "surface.actionSubtle.active",
|
|
103
|
-
boxShadowColor: "stroke.default",
|
|
104
|
-
borderBottomRadius: "sharp"
|
|
105
|
-
},
|
|
106
|
-
_focusVisible: {
|
|
107
|
-
outline: "none",
|
|
108
|
-
boxShadowColor: "stroke.default",
|
|
109
|
-
boxShadow: "inset 0 0 0 3px var(--shadow-color)"
|
|
110
|
-
}
|
|
111
|
-
},
|
|
112
|
-
itemContent: {
|
|
113
|
-
borderBottomRadius: "xsmall",
|
|
114
|
-
borderWidth: "0 1px 1px",
|
|
115
|
-
borderStyle: "solid",
|
|
116
|
-
borderColor: "stroke.default"
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
});
|
|
122
|
-
const {
|
|
123
|
-
withProvider,
|
|
124
|
-
withContext
|
|
125
|
-
} = createStyleContext(accordionRecipe);
|
|
126
|
-
export const AccordionRoot = withProvider(Accordion.Root, "root", {
|
|
127
|
-
baseComponent: true
|
|
128
|
-
});
|
|
129
|
-
export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent", {
|
|
130
|
-
baseComponent: true
|
|
131
|
-
});
|
|
132
|
-
export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator", {
|
|
133
|
-
baseComponent: true
|
|
134
|
-
});
|
|
135
|
-
export const AccordionItem = withContext(Accordion.Item, "item", {
|
|
136
|
-
baseComponent: true
|
|
137
|
-
});
|
|
138
|
-
export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger", {
|
|
139
|
-
baseComponent: true
|
|
140
|
-
});
|
package/es/ArticleLists.js
DELETED
|
@@ -1,186 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { forwardRef, useMemo } from "react";
|
|
10
|
-
import { ark } from "@ark-ui/react";
|
|
11
|
-
import { css, cva } from "@ndla/styled-system/css";
|
|
12
|
-
import { styled } from "@ndla/styled-system/jsx";
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
const LIST_ITEM = "& > li";
|
|
15
|
-
const LETTER_LIST = "& > ol[data-variant='letters']";
|
|
16
|
-
const NUMBER_LIST = "& > ol:not([data-variant='letters'])";
|
|
17
|
-
const LETTER_LIST_ITEM = `${LETTER_LIST} > li`;
|
|
18
|
-
const orderedListRecipe = cva({
|
|
19
|
-
base: {
|
|
20
|
-
marginInlineStart: "small",
|
|
21
|
-
paddingInlineStart: "small",
|
|
22
|
-
[LIST_ITEM]: {
|
|
23
|
-
"& > ul": {
|
|
24
|
-
marginInlineStart: "0 !important"
|
|
25
|
-
},
|
|
26
|
-
_before: {
|
|
27
|
-
position: "absolute",
|
|
28
|
-
transform: "translateX(calc(-100% + (token(spacing.small) * -1)))",
|
|
29
|
-
fontVariantNumeric: "tabular-nums"
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
"& li": {
|
|
33
|
-
marginBlock: "small"
|
|
34
|
-
}
|
|
35
|
-
},
|
|
36
|
-
defaultVariants: {
|
|
37
|
-
variant: "numbers"
|
|
38
|
-
},
|
|
39
|
-
variants: {
|
|
40
|
-
variant: {
|
|
41
|
-
numbers: {
|
|
42
|
-
[NUMBER_LIST]: {
|
|
43
|
-
marginInlineStart: "0",
|
|
44
|
-
paddingInlineStart: "0"
|
|
45
|
-
},
|
|
46
|
-
counterReset: "level1",
|
|
47
|
-
"&[data-count='true']": {
|
|
48
|
-
counterReset: "level1 var(--start, 0)"
|
|
49
|
-
},
|
|
50
|
-
[LIST_ITEM]: {
|
|
51
|
-
counterIncrement: "level1",
|
|
52
|
-
_before: {
|
|
53
|
-
content: "counter(level1, decimal) '. '"
|
|
54
|
-
},
|
|
55
|
-
[NUMBER_LIST]: {
|
|
56
|
-
counterReset: "level2",
|
|
57
|
-
"&[data-count='true']": {
|
|
58
|
-
counterReset: "level2 var(--start, 0)"
|
|
59
|
-
},
|
|
60
|
-
[LIST_ITEM]: {
|
|
61
|
-
marginInlineStart: "small",
|
|
62
|
-
counterIncrement: "level2",
|
|
63
|
-
_before: {
|
|
64
|
-
content: "counter(level1, decimal) '.' counter(level2, decimal) '. '"
|
|
65
|
-
},
|
|
66
|
-
[NUMBER_LIST]: {
|
|
67
|
-
counterReset: "level3",
|
|
68
|
-
"&[data-count='true']": {
|
|
69
|
-
counterReset: "level3 var(--start, 0)"
|
|
70
|
-
},
|
|
71
|
-
[LIST_ITEM]: {
|
|
72
|
-
marginInlineStart: "calc(1.5ch + token(spacing.small))",
|
|
73
|
-
counterIncrement: "level3",
|
|
74
|
-
_before: {
|
|
75
|
-
content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '. '"
|
|
76
|
-
},
|
|
77
|
-
[NUMBER_LIST]: {
|
|
78
|
-
counterReset: "level4",
|
|
79
|
-
"&[data-count='true']": {
|
|
80
|
-
counterReset: "level4 var(--start, 0)"
|
|
81
|
-
},
|
|
82
|
-
[LIST_ITEM]: {
|
|
83
|
-
marginInlineStart: "calc(3ch + token(spacing.small))",
|
|
84
|
-
counterIncrement: "level4",
|
|
85
|
-
_before: {
|
|
86
|
-
content: "counter(level1, decimal) '.' counter(level2, decimal) '.' counter(level3, decimal) '.' counter(level4, decimal) '. '"
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
}
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
},
|
|
96
|
-
letters: {
|
|
97
|
-
counterReset: "level1",
|
|
98
|
-
"&[data-count='true']": {
|
|
99
|
-
counterReset: "level1 var(--start, 0)"
|
|
100
|
-
},
|
|
101
|
-
[LETTER_LIST]: {
|
|
102
|
-
marginInlineStart: "0",
|
|
103
|
-
paddingInlineStart: "0"
|
|
104
|
-
},
|
|
105
|
-
[LIST_ITEM]: {
|
|
106
|
-
counterIncrement: "level1",
|
|
107
|
-
_before: {
|
|
108
|
-
content: "counter(level1, upper-alpha) '. '"
|
|
109
|
-
},
|
|
110
|
-
[LETTER_LIST_ITEM]: {
|
|
111
|
-
_before: {
|
|
112
|
-
content: "counter(level1, lower-alpha) '. '"
|
|
113
|
-
},
|
|
114
|
-
[LETTER_LIST_ITEM]: {
|
|
115
|
-
_before: {
|
|
116
|
-
content: "counter(level1, lower-roman) '. '"
|
|
117
|
-
}
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
}
|
|
122
|
-
}
|
|
123
|
-
}
|
|
124
|
-
});
|
|
125
|
-
const StyledOrderedList = styled(ark.ol, {}, {
|
|
126
|
-
baseComponent: true
|
|
127
|
-
});
|
|
128
|
-
export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
129
|
-
let {
|
|
130
|
-
variant,
|
|
131
|
-
css: cssProp,
|
|
132
|
-
start,
|
|
133
|
-
...props
|
|
134
|
-
} = _ref;
|
|
135
|
-
const style = useMemo(() => ({
|
|
136
|
-
"--start": start ? start - 1 : undefined
|
|
137
|
-
}), [start]);
|
|
138
|
-
return /*#__PURE__*/_jsx(StyledOrderedList, {
|
|
139
|
-
"data-embed-type": "ordered-list",
|
|
140
|
-
"data-variant": variant,
|
|
141
|
-
"data-count": start !== undefined,
|
|
142
|
-
css: css.raw(orderedListRecipe.raw({
|
|
143
|
-
variant
|
|
144
|
-
}), cssProp),
|
|
145
|
-
style: style,
|
|
146
|
-
ref: ref,
|
|
147
|
-
...props
|
|
148
|
-
});
|
|
149
|
-
});
|
|
150
|
-
export const UnOrderedList = styled("ul", {
|
|
151
|
-
base: {
|
|
152
|
-
listStyle: "revert",
|
|
153
|
-
marginInlineStart: "medium",
|
|
154
|
-
paddingInlineStart: "small",
|
|
155
|
-
"& ul": {
|
|
156
|
-
marginInlineStart: "0"
|
|
157
|
-
},
|
|
158
|
-
"& li": {
|
|
159
|
-
marginBlock: "small",
|
|
160
|
-
paddingInlineStart: "small",
|
|
161
|
-
_marker: {
|
|
162
|
-
color: "icon.strong"
|
|
163
|
-
},
|
|
164
|
-
"& > ol": {
|
|
165
|
-
marginInlineStart: "0 !important"
|
|
166
|
-
}
|
|
167
|
-
},
|
|
168
|
-
listStyleType: "disc",
|
|
169
|
-
"& > li > ul": {
|
|
170
|
-
listStyleType: "circle",
|
|
171
|
-
"& > li > ul": {
|
|
172
|
-
listStyleType: "square"
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
}
|
|
176
|
-
});
|
|
177
|
-
export const DefinitionList = styled("dl", {
|
|
178
|
-
base: {
|
|
179
|
-
"& dt": {
|
|
180
|
-
fontWeight: "bold"
|
|
181
|
-
},
|
|
182
|
-
"& dd": {
|
|
183
|
-
marginInlineStart: "medium"
|
|
184
|
-
}
|
|
185
|
-
}
|
|
186
|
-
});
|
package/es/Badge.js
DELETED
|
@@ -1,85 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { forwardRef } from "react";
|
|
10
|
-
import { ark } from "@ark-ui/react";
|
|
11
|
-
import { css, cva } from "@ndla/styled-system/css";
|
|
12
|
-
import { styled } from "@ndla/styled-system/jsx";
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
const badgeRecipe = cva({
|
|
15
|
-
base: {
|
|
16
|
-
paddingInline: "xsmall",
|
|
17
|
-
borderRadius: "xsmall",
|
|
18
|
-
border: "1px solid",
|
|
19
|
-
width: "fit-content",
|
|
20
|
-
color: "text.default"
|
|
21
|
-
},
|
|
22
|
-
defaultVariants: {
|
|
23
|
-
colorTheme: "neutral",
|
|
24
|
-
size: "medium"
|
|
25
|
-
},
|
|
26
|
-
variants: {
|
|
27
|
-
size: {
|
|
28
|
-
small: {
|
|
29
|
-
textStyle: "label.small"
|
|
30
|
-
},
|
|
31
|
-
medium: {
|
|
32
|
-
textStyle: "label.medium"
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
colorTheme: {
|
|
36
|
-
brand1: {
|
|
37
|
-
backgroundColor: "surface.brand.1.moderate",
|
|
38
|
-
borderColor: "surface.brand.1.strong"
|
|
39
|
-
},
|
|
40
|
-
brand2: {
|
|
41
|
-
backgroundColor: "surface.brand.2.moderate",
|
|
42
|
-
borderColor: "surface.brand.2.strong"
|
|
43
|
-
},
|
|
44
|
-
brand3: {
|
|
45
|
-
backgroundColor: "surface.brand.3.subtle",
|
|
46
|
-
borderColor: "surface.brand.3.strong"
|
|
47
|
-
},
|
|
48
|
-
neutral: {
|
|
49
|
-
backgroundColor: "surface.infoSubtle",
|
|
50
|
-
borderColor: "stroke.default"
|
|
51
|
-
},
|
|
52
|
-
danger: {
|
|
53
|
-
backgroundColor: "surface.dangerSubtle",
|
|
54
|
-
borderColor: "surface.danger"
|
|
55
|
-
},
|
|
56
|
-
success: {
|
|
57
|
-
backgroundColor: "surface.successSubtle",
|
|
58
|
-
borderColor: "surface.success"
|
|
59
|
-
},
|
|
60
|
-
warning: {
|
|
61
|
-
backgroundColor: "surface.warningSubtle",
|
|
62
|
-
borderColor: "surface.warning"
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
}
|
|
66
|
-
});
|
|
67
|
-
const StyledBadge = styled(ark.div, {}, {
|
|
68
|
-
baseComponent: true
|
|
69
|
-
});
|
|
70
|
-
export const Badge = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
71
|
-
let {
|
|
72
|
-
colorTheme,
|
|
73
|
-
size,
|
|
74
|
-
css: cssProp,
|
|
75
|
-
...props
|
|
76
|
-
} = _ref;
|
|
77
|
-
return /*#__PURE__*/_jsx(StyledBadge, {
|
|
78
|
-
css: css.raw(badgeRecipe.raw({
|
|
79
|
-
colorTheme,
|
|
80
|
-
size
|
|
81
|
-
}), cssProp),
|
|
82
|
-
...props,
|
|
83
|
-
ref: ref
|
|
84
|
-
});
|
|
85
|
-
});
|
package/es/BlockQuote.js
DELETED
|
@@ -1,55 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Copyright (c) 2024-present, NDLA.
|
|
3
|
-
*
|
|
4
|
-
* This source code is licensed under the GPLv3 license found in the
|
|
5
|
-
* LICENSE file in the root directory of this source tree.
|
|
6
|
-
*
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
import { forwardRef } from "react";
|
|
10
|
-
import { ark } from "@ark-ui/react";
|
|
11
|
-
import { css, cva } from "@ndla/styled-system/css";
|
|
12
|
-
import { styled } from "@ndla/styled-system/jsx";
|
|
13
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
14
|
-
const blockQuoteRecipe = cva({
|
|
15
|
-
base: {
|
|
16
|
-
borderInlineStart: "4px solid",
|
|
17
|
-
paddingInline: "medium"
|
|
18
|
-
},
|
|
19
|
-
variants: {
|
|
20
|
-
variant: {
|
|
21
|
-
neutral: {
|
|
22
|
-
borderColor: "stroke.subtle",
|
|
23
|
-
background: "surface.default"
|
|
24
|
-
},
|
|
25
|
-
brand1: {
|
|
26
|
-
background: "surface.brand.1.subtle",
|
|
27
|
-
borderColor: "surface.brand.1.strong"
|
|
28
|
-
},
|
|
29
|
-
brand2: {
|
|
30
|
-
background: "surface.brand.2.subtle",
|
|
31
|
-
borderColor: "surface.brand.2.strong"
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
},
|
|
35
|
-
defaultVariants: {
|
|
36
|
-
variant: "neutral"
|
|
37
|
-
}
|
|
38
|
-
});
|
|
39
|
-
const StyledBlockQuote = styled(ark.blockquote, {}, {
|
|
40
|
-
baseComponent: true
|
|
41
|
-
});
|
|
42
|
-
export const BlockQuote = /*#__PURE__*/forwardRef((_ref, ref) => {
|
|
43
|
-
let {
|
|
44
|
-
variant,
|
|
45
|
-
css: cssProp,
|
|
46
|
-
...props
|
|
47
|
-
} = _ref;
|
|
48
|
-
return /*#__PURE__*/_jsx(StyledBlockQuote, {
|
|
49
|
-
css: css.raw(blockQuoteRecipe.raw({
|
|
50
|
-
variant
|
|
51
|
-
}), cssProp),
|
|
52
|
-
...props,
|
|
53
|
-
ref: ref
|
|
54
|
-
});
|
|
55
|
-
});
|