@ndla/primitives 1.0.13-alpha.0 → 1.0.14-alpha.0

package/dist/panda.buildinfo.json

@@ -155,6 +155,11 @@
       "marginBlock]___[value:0]___[cond:& svg",
       "width]___[value:medium]___[cond:& svg",
       "height]___[value:medium]___[cond:& svg",
+      "height]___[value:large",
+      "width]___[value:large",
+      "width]___[value:small]___[cond:& svg",
+      "height]___[value:small]___[cond:& svg",
+      "paddingInline]___[value:xxsmall",
       "userSelect]___[value:none",
       "gap]___[value:xxsmall",
       "color]___[value:text.action]___[cond:_hover",
@@ -331,6 +336,25 @@
       "paddingInlineEnd]___[value:medium",
       "paddingInlineStart]___[value:0",
       "paddingInlineEnd]___[value:0",
+      "gap]___[value:small",
+      "padding]___[value:4xlarge",
+      "transitionProperty]___[value:border, border-color",
+      "borderStyle]___[value:dashed]___[cond:_hover",
+      "borderStyle]___[value:solid]___[cond:_hover<___>_disabled",
+      "borderColor]___[value:stroke.subtle]___[cond:_hover<___>_disabled",
+      "display]___[value:grid",
+      "gridTemplateAreas]___[value: \"preview name delete\" \"preview size delete\"",
+      "gridTemplateColumns]___[value:auto 1fr auto",
+      "gridColumnGap]___[value:small",
+      "gridArea]___[value:preview",
+      "gridArea]___[value:name",
+      "whiteSpace]___[value:nowrap",
+      "textOverflow]___[value:ellipsis",
+      "gridArea]___[value:size",
+      "gridArea]___[value:delete",
+      "alignSelf]___[value:center",
+      "objectFit]___[value:cover",
+      "height]___[value:100%",
       "borderRadius]___[value:small",
       "backgroundColor]___[value:surface.default",
       "backgroundColor]___[value:surface.brand.2.subtle",
@@ -339,7 +363,7 @@
       "clipPath]___[value:polygon(0 0, 100% 0, 100% calc(100% - 5vw), 0 100%)",
       "position]___[value:absolute",
       "background]___[value:primary",
-      "background]___[value:blue.800",
+      "background]___[value:surface.brand.2.bold",
       "background]___[value:surface.brand.2",
       "background]___[value:surface.brand.1",
       "background]___[value:surface.infoSubtle",
@@ -391,7 +415,6 @@
       "padding]___[value:3xsmall",
       "boxShadow]___[value:small",
       "alignItems]___[value:flex-start",
-      "gap]___[value:small",
       "background]___[value:surface.warningSubtle",
       "borderColor]___[value:stroke.warning",
       "background]___[value:surface.successSubtle",
@@ -400,6 +423,7 @@
       "borderColor]___[value:stroke.error",
       "color]___[value:primary",
       "fontVariantNumeric]___[value:tabular-nums",
+      "maxHeight]___[value:inherit",
       "zIndex]___[value:popover",
       "maxWidth]___[value:var(--available-width)",
       "animation]___[value:fade-shift-in 0.2s ease-out]___[cond:_open",
@@ -458,8 +482,6 @@
       "borderInlineEndColor]___[value:stroke.default",
       "animationDuration]___[value:2s]___[cond:_motionReduce",
       "borderWidth]___[value:4px",
-      "height]___[value:large",
-      "width]___[value:large",
       "borderWidth]___[value:8px",
       "background]___[value:surface.disabled.strong",
       "padding]___[value:1",
@@ -516,7 +538,6 @@
       "marginBlockEnd]___[value:-1px]___[cond:_horizontal",
       "marginInlineEnd]___[value:-1px]___[cond:_vertical",
       "transitionProperty]___[value:color, background, border-color",
-      "whiteSpace]___[value:nowrap",
       "color]___[value:text.strong]___[cond:_selected",
       "color]___[value:text.subtle]___[cond:_disabled<___>_hover",
       "borderColor]___[value:stroke.default]___[cond:_hover<___>_focusVisible",
@@ -593,11 +614,9 @@
       "paddingInlineEnd]___[value:xxlarge",
       "top]___[value:xxsmall",
       "right]___[value:xxsmall",
-      "paddingInline]___[value:xxsmall",
       "--arrow-size]___[value:spacing.xxsmall",
       "--arrow-background]___[value:colors.surface.action",
       "height]___[value:200px",
-      "objectFit]___[value:cover",
       "minHeight]___[value:3xlarge",
       "borderBlockWidth]___[value:1px",
       "borderInlineColor]___[value:transparent",
@@ -622,7 +641,7 @@
       "--border-hover]___[value:colors.stroke.hover",
       "--color-current-hover]___[value:colors.text.onAction",
       "--background-hover]___[value:colors.surface.brand.2.moderate",
-      "--background-current]___[value:colors.blue.800",
+      "--background-current]___[value:colors.surface.brand.2.bold",
       "--border-hover]___[value:colors.surface.brand.2.strong",
       "borderBlockColor]___[value:stroke.subtle",
       "borderBlockColor]___[value:var(--border-hover)]___[cond:_hover",
@@ -644,7 +663,11 @@
       "minHeight]___[value:40px",
       "maxHeight]___[value:40px",
       "minWidth]___[value:56px",
-      "maxWidth]___[value:56px"
+      "maxWidth]___[value:56px",
+      "paddingInlineStart]___[value:calc((var(--depth) - 1) * token(spacing.medium))",
+      "paddingInlineEnd]___[value:xsmall",
+      "transform]___[value:rotate(90deg)]___[cond:_open",
+      "paddingInlineStart]___[value:calc(((var(--depth) - 1) * token(spacing.medium)) + token(spacing.xxlarge) + token(spacing.3xsmall))"
     ],
     "recipes": {}
   }

package/dist/styles.css

@@ -287,6 +287,18 @@
     width: var(--sizes-xxlarge);
 }
 
+  .h_large {
+    height: var(--sizes-large);
+}
+
+  .w_large {
+    width: var(--sizes-large);
+}
+
+  .px_xxsmall {
+    padding-inline: var(--spacing-xxsmall);
+}
+
   .us_none {
     -webkit-user-select: none;
     user-select: none;
@@ -544,6 +556,50 @@
     padding-inline-end: 0;
 }
 
+  .gap_small {
+    gap: var(--spacing-small);
+}
+
+  .p_4xlarge {
+    padding: var(--spacing-4xlarge);
+}
+
+  .d_grid {
+    display: grid;
+}
+
+  .grid-area_preview {
+    grid-area: preview;
+}
+
+  .grid-area_name {
+    grid-area: name;
+}
+
+  .white-space_nowrap {
+    white-space: nowrap;
+}
+
+  .tov_ellipsis {
+    text-overflow: ellipsis;
+}
+
+  .grid-area_size {
+    grid-area: size;
+}
+
+  .grid-area_delete {
+    grid-area: delete;
+}
+
+  .obj-f_cover {
+    object-fit: cover;
+}
+
+  .h_100\% {
+    height: 100%;
+}
+
   .bdr_small {
     border-radius: var(--radii-small);
 }
@@ -569,8 +625,8 @@
     background: var(--colors-primary);
 }
 
-  .bg_blue\.800 {
-    background: var(--colors-blue-800);
+  .bg_surface\.brand\.2\.bold {
+    background: var(--colors-surface-brand-2-bold);
 }
 
   .bg_surface\.brand\.2 {
@@ -645,10 +701,6 @@
     box-shadow: var(--shadows-small);
 }
 
-  .gap_small {
-    gap: var(--spacing-small);
-}
-
   .bg_surface\.warningSubtle {
     background: var(--colors-surface-warning-subtle);
 }
@@ -665,6 +717,10 @@
     color: var(--colors-primary);
 }
 
+  .max-h_inherit {
+    max-height: inherit;
+}
+
   .z_popover {
     z-index: var(--z-index-popover);
 }
@@ -737,14 +793,6 @@
     border-block-color: var(--colors-background-subtle);
 }
 
-  .h_large {
-    height: var(--sizes-large);
-}
-
-  .w_large {
-    width: var(--sizes-large);
-}
-
   .bg_surface\.disabled\.strong {
     background: var(--colors-surface-disabled-strong);
 }
@@ -777,10 +825,6 @@
     table-layout: fixed;
 }
 
-  .white-space_nowrap {
-    white-space: nowrap;
-}
-
   .ring_3px_solid {
     outline: 3px solid;
 }
@@ -857,10 +901,6 @@
     padding-inline-end: var(--spacing-xxlarge);
 }
 
-  .px_xxsmall {
-    padding-inline: var(--spacing-xxsmall);
-}
-
   .\--arrow-size_spacing\.xxsmall {
     --arrow-size: var(--spacing-xxsmall);
 }
@@ -873,10 +913,6 @@
     height: 200px;
 }
 
-  .obj-f_cover {
-    object-fit: cover;
-}
-
   .min-h_3xlarge {
     min-height: var(--sizes-3xlarge);
 }
@@ -909,8 +945,8 @@
     --background-hover: var(--colors-surface-brand-2-moderate);
 }
 
-  .\--background-current_colors\.blue\.800 {
-    --background-current: var(--colors-blue-800);
+  .\--background-current_colors\.surface\.brand\.2\.bold {
+    --background-current: var(--colors-surface-brand-2-bold);
 }
 
   .\--border-hover_colors\.surface\.brand\.2\.strong {
@@ -941,6 +977,18 @@
     max-width: 56px;
 }
 
+  .ps_calc\(\(var\(--depth\)_-_1\)_\*_token\(spacing\.medium\)\) {
+    padding-inline-start: calc((var(--depth) - 1) * var(--spacing-medium));
+}
+
+  .pe_xsmall {
+    padding-inline-end: var(--spacing-xsmall);
+}
+
+  .ps_calc\(\(\(var\(--depth\)_-_1\)_\*_token\(spacing\.medium\)\)_\+_token\(spacing\.xxlarge\)_\+_token\(spacing\.3xsmall\)\) {
+    padding-inline-start: calc(((var(--depth) - 1) * var(--spacing-medium)) + var(--spacing-xxlarge) + var(--spacing-3xsmall));
+}
+
   .flex-d_column {
     flex-direction: column;
 }
@@ -1083,6 +1131,27 @@
     left: auto;
 }
 
+  .trs-prop_border\,_border-color {
+    --transition-prop: border, border-color;
+    transition-property: border, border-color;
+}
+
+  .grid-template-areas_\"preview_name_delete\"_\"preview_size_delete\" {
+    grid-template-areas: "preview name delete" "preview size delete";
+}
+
+  .grid-tc_auto_1fr_auto {
+    grid-template-columns: auto 1fr auto;
+}
+
+  .grid-cg_small {
+    grid-column-gap: var(--spacing-small);
+}
+
+  .as_center {
+    align-self: center;
+}
+
   .bg-c_surface\.default {
     background-color: var(--colors-surface-default);
 }
@@ -1352,6 +1421,14 @@
     height: var(--sizes-medium);
 }
 
+  .\[\&_svg\]\:w_small svg {
+    width: var(--sizes-small);
+}
+
+  .\[\&_svg\]\:h_small svg {
+    height: var(--sizes-small);
+}
+
   .checked\:c_text\.onAction:is(:checked, [data-checked], [aria-checked=true], [data-state="checked"]) {
     color: var(--colors-text-on-action);
 }
@@ -1681,6 +1758,10 @@
     border-block-color: var(--border-hover);
 }
 
+  .open\:trf_rotate\(90deg\):is([open], [data-open], [data-state="open"]) {
+    transform: rotate(90deg);
+}
+
   .closed\:trs-prop_background\,_border-color\,_border\,_border-radius:is([closed], [data-closed], [data-state="closed"]) {
     --transition-prop: background, border-color, border, border-radius;
     transition-property: background, border-color, border, border-radius;
@@ -2083,6 +2164,10 @@
     outline-color: var(--colors-stroke-hover);
 }
 
+  .hover\:border-style_dashed:is(:hover, [data-hover]) {
+    border-style: dashed;
+}
+
   .hover\:bg-c_surface\.actionSubtle\.hover:is(:hover, [data-hover]) {
     background-color: var(--colors-surface-action-subtle-hover);
 }
@@ -2433,6 +2518,14 @@
     background-color: var(--colors-surface-danger-subtle);
 }
 
+  .hover\:disabled\:border-style_solid:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+    border-style: solid;
+}
+
+  .hover\:disabled\:bd-c_stroke\.subtle:is(:hover, [data-hover]):is(:disabled, [disabled], [data-disabled], [aria-disabled='true']) {
+    border-color: var(--colors-stroke-subtle);
+}
+
   .hover\:focusVisible\:bd-c_stroke\.default:is(:hover, [data-hover]):is(:focus-visible, [data-focus-visible]) {
     border-color: var(--colors-stroke-default);
 }

package/es/Button.js

@@ -158,11 +158,11 @@ export const buttonBaseRecipe = cva({
 });
 export const buttonRecipe = cva({
   defaultVariants: {
-    size: "default"
+    size: "medium"
   },
   variants: {
     size: {
-      default: {
+      medium: {
         paddingInline: "xsmall",
         paddingBlock: "xxsmall",
         minHeight: "24"
@@ -179,17 +179,38 @@ export const buttonRecipe = cva({
 export const iconButtonRecipe = cva({
   base: {
     lineHeight: "1",
-    minHeight: "unset",
-    height: "xxlarge",
-    width: "xxlarge",
-    "& svg": {
-      marginInline: "0",
-      marginBlock: "0",
-      width: "medium",
-      height: "medium"
-    },
-    paddingInline: "xsmall",
-    paddingBlock: "xsmall"
+    minHeight: "unset"
+  },
+  defaultVariants: {
+    size: "medium"
+  },
+  variants: {
+    size: {
+      medium: {
+        height: "xxlarge",
+        width: "xxlarge",
+        "& svg": {
+          marginInline: "0",
+          marginBlock: "0",
+          width: "medium",
+          height: "medium"
+        },
+        paddingInline: "xsmall",
+        paddingBlock: "xsmall"
+      },
+      small: {
+        height: "large",
+        width: "large",
+        "& svg": {
+          marginInline: "0",
+          marginBlock: "0",
+          width: "small",
+          height: "small"
+        },
+        paddingInline: "xxsmall",
+        paddingBlock: "xxsmall"
+      }
+    }
   }
 });
 const StyledButton = styled(ark.button, {}, {
@@ -247,6 +268,7 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     variant,
     css: cssProp,
     loadingContent,
+    size,
     replaceContent = true,
     ...props
   } = _ref3;
@@ -254,7 +276,9 @@ export const IconButton = /*#__PURE__*/forwardRef((_ref3, ref) => {
     ...props,
     css: css.raw(buttonBaseRecipe.raw({
       variant
-    }), iconButtonRecipe.raw(), cssProp),
+    }), iconButtonRecipe.raw({
+      size
+    }), cssProp),
     loadingContent: loadingContent ?? /*#__PURE__*/_jsx(Spinner, {
       size: "small"
     }),

package/es/Checkbox.js

@@ -44,6 +44,9 @@ const checkboxRecipe = sva({
       transitionDuration: "normal",
       transitionProperty: "border-color, background, box-shadow, color",
       transitionTimingFunction: "default",
+      _disabled: {
+        cursor: "not-allowed"
+      },
       _motionReduce: {
         transition: "none",
         transitionDuration: "0s"
@@ -89,7 +92,8 @@ const checkboxRecipe = sva({
               boxShadow: "none"
             },
             _checked: {
-              background: "surface.disabled"
+              background: "surface.disabled",
+              borderColor: "stroke.disabled"
             }
           },
           _invalid: {

package/es/FileUpload.js

@@ -0,0 +1,176 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { forwardRef } from "react";
+import { FileUpload, fileUploadAnatomy } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+import { Label } from "./Label";
+import { Text } from "./Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+const fileUploadRecipe = sva({
+  slots: fileUploadAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      minHeight: "100%"
+    },
+    dropzone: {
+      display: "flex",
+      gap: "small",
+      flexDirection: "column",
+      alignItems: "center",
+      justifyContent: "center",
+      padding: "4xlarge",
+      borderRadius: "xsmall",
+      border: "1px solid",
+      borderColor: "stroke.subtle",
+      transitionProperty: "border, border-color",
+      transitionTimingFunction: "default",
+      transitionDuration: "normal",
+      _hover: {
+        borderStyle: "dashed",
+        borderColor: "stroke.hover",
+        _disabled: {
+          borderStyle: "solid",
+          borderColor: "stroke.subtle"
+        }
+      }
+    },
+    itemGroup: {
+      paddingBlockStart: "medium",
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall"
+    },
+    item: {
+      width: "100%",
+      display: "grid",
+      gridTemplateAreas: `
+      "preview name delete" 
+      "preview size delete"`,
+      gridTemplateColumns: "auto 1fr auto",
+      gridColumnGap: "small",
+      border: "1px solid",
+      borderColor: "stroke.subtle",
+      borderRadius: "xsmall",
+      padding: "xsmall"
+    },
+    itemPreview: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "xxlarge",
+      height: "xxlarge",
+      gridArea: "preview"
+    },
+    itemName: {
+      gridArea: "name",
+      whiteSpace: "nowrap",
+      overflow: "hidden",
+      textOverflow: "ellipsis"
+    },
+    itemSizeText: {
+      gridArea: "size"
+    },
+    itemDeleteTrigger: {
+      gridArea: "delete",
+      alignSelf: "center"
+    },
+    itemPreviewImage: {
+      borderRadius: "xsmall",
+      objectFit: "cover",
+      width: "100%",
+      height: "100%"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(fileUploadRecipe);
+export const FileUploadHiddenInput = FileUpload.HiddenInput;
+export const FileUploadContext = FileUpload.Context;
+export const FileUploadRoot = withProvider(FileUpload.Root, "root", {
+  baseComponent: true
+});
+export const FileUploadDropzone = withContext(FileUpload.Dropzone, "dropzone", {
+  baseComponent: true
+});
+export const FileUploadTrigger = withContext(FileUpload.Trigger, "trigger", {
+  baseComponent: true
+});
+export const FileUploadItemGroup = withContext(FileUpload.ItemGroup, "itemGroup", {
+  baseComponent: true
+});
+export const FileUploadItemPreview = withContext(FileUpload.ItemPreview, "itemPreview", {
+  baseComponent: true
+});
+export const FileUploadItem = withContext(FileUpload.Item, "item", {
+  baseComponent: true
+});
+export const FileUploadItemDeleteTrigger = withContext(FileUpload.ItemDeleteTrigger, "itemDeleteTrigger", {
+  baseComponent: true
+});
+export const FileUploadItemPreviewImage = withContext(FileUpload.ItemPreviewImage, "itemPreviewImage", {
+  baseComponent: true
+});
+const InternalFileUploadItemName = withContext(FileUpload.ItemName, "itemName", {
+  baseComponent: true
+});
+export const FileUploadItemName = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "bold",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Text, {
+    textStyle: textStyle,
+    fontWeight: fontWeight,
+    asChild: true,
+    ...props,
+    ref: ref,
+    children: /*#__PURE__*/_jsx(InternalFileUploadItemName, {})
+  });
+});
+const InternalFileUploadItemSizeText = withContext(FileUpload.ItemSizeText, "itemSizeText", {
+  baseComponent: true
+});
+export const FileUploadItemSizeText = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    textStyle = "label.small",
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Text, {
+    textStyle: textStyle,
+    ref: ref,
+    asChild: true,
+    ...props,
+    children: /*#__PURE__*/_jsx(InternalFileUploadItemSizeText, {})
+  });
+});
+const InternalFileUploadLabel = withContext(FileUpload.Label, "label");
+export const FileUploadLabel = /*#__PURE__*/forwardRef((_ref3, ref) => {
+  let {
+    textStyle = "label.medium",
+    fontWeight = "light",
+    children,
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/_jsx(InternalFileUploadLabel, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Label, {
+      textStyle: textStyle,
+      fontWeight: fontWeight,
+      ref: ref,
+      ...props,
+      children: children
+    })
+  });
+});

package/es/Hero.js

@@ -57,8 +57,7 @@ const heroRecipe = sva({
       },
       brand2Strong: {
         background: {
-          // TODO: This is not a semantic token.
-          background: "blue.800"
+          background: "surface.brand.2.bold"
         },
         content: {
           color: "text.onAction"

package/es/ListItem/ListItem.js

@@ -119,8 +119,7 @@ export const listItemRecipe = sva({
       brand2: {
         root: {
           "--background-hover": "colors.surface.brand.2.moderate",
-          // TODO: Not a semantic color
-          "--background-current": "colors.blue.800",
+          "--background-current": "colors.surface.brand.2.bold",
           "--border-hover": "colors.surface.brand.2.strong",
           "--color-current-hover": "colors.text.onAction"
         }

package/es/Popover.js

@@ -6,6 +6,7 @@
  *
  */
 
+import { forwardRef } from "react";
 import { Popover, popoverAnatomy } from "@ark-ui/react";
 import { sva } from "@ndla/styled-system/css";
 import { createStyleContext } from "./createStyleContext";
@@ -14,6 +15,7 @@ const popoverRecipe = sva({
   slots: popoverAnatomy.keys(),
   base: {
     positioner: {
+      maxHeight: "inherit",
       position: "relative"
     },
     content: {
@@ -81,11 +83,12 @@ export const PopoverCloseTrigger = withContext(Popover.CloseTrigger, "closeTrigg
 export const PopoverContentStandalone = withContext(Popover.Content, "content", {
   baseComponent: true
 });
-export const PopoverContent = props => /*#__PURE__*/_jsx(PopoverPositioner, {
+export const PopoverContent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsx(PopoverPositioner, {
   children: /*#__PURE__*/_jsx(PopoverContentStandalone, {
-    ...props
+    ...props,
+    ref: ref
   })
-});
+}));
 export const PopoverDescription = withContext(Popover.Description, "description", {
   baseComponent: true
 });