@ndla/primitives 0.0.1

package/es/Dialog.js

@@ -0,0 +1,329 @@
+/**
+ * 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 { Dialog } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { createStyleContext } from "./createStyleContext";
+import { Heading, Text } from "./Text";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const dialogRecipe = sva({
+  // We only use a subset of the dialog components, so we roll our own slots instead of relying on @ark/anatomy.
+  slots: ["positioner", "backdrop", "content"],
+  className: "dialog",
+  base: {
+    backdrop: {
+      position: "fixed",
+      height: "100vh",
+      width: "100vw",
+      zIndex: "overlay",
+      left: "0",
+      top: "0",
+      // TODO: Consider if this should be a token. It's probably consistent enough between dark and light mode to be a token.
+      background: "rgba(1, 1, 1, 0.3)",
+      _open: {
+        animation: "backdrop-in"
+      },
+      _closed: {
+        animation: "backdrop-out"
+      }
+    },
+    positioner: {
+      position: "fixed",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      overflow: "hidden",
+      left: "0",
+      top: "0",
+      width: "100vw",
+      height: "100dvh",
+      zIndex: "modal"
+    },
+    content: {
+      "--margin": "token(sizes.medium)",
+      position: "relative",
+      background: "surface.default",
+      boxShadow: "xlarge",
+      height: "min-content",
+      maxWidth: "95%",
+      maxHeight: "95%",
+      margin: "auto",
+      overflowY: "auto",
+      borderRadius: {
+        base: "sharp",
+        tablet: "small"
+      },
+      paddingBlockStart: "env(safe-area-inset-top)",
+      paddingBlockEnd: "env(safe-area-inset-bottom)",
+      paddingInlineStart: "env(safe-area-inset-left)",
+      paddingInlineEnd: "env(safe-area-inset-right)",
+      tabletDown: {
+        "--margin": "0px",
+        minWidth: "100%",
+        minHeight: "100%"
+      }
+    }
+  },
+  defaultVariants: {
+    size: "medium",
+    position: "center"
+  },
+  compoundVariants: [{
+    variant: "drawer",
+    position: "left",
+    css: {
+      content: {
+        minHeight: "100%",
+        maxHeight: "100%",
+        width: "var(--size)",
+        _open: {
+          animation: "drawer-in-left"
+        },
+        _closed: {
+          animation: "drawer-out-left"
+        }
+      }
+    }
+  }, {
+    variant: "drawer",
+    position: "right",
+    css: {
+      content: {
+        minHeight: "100%",
+        maxHeight: "100%",
+        width: "var(--size)",
+        _open: {
+          animation: "drawer-in-right"
+        },
+        _closed: {
+          animation: "drawer-out-right"
+        }
+      }
+    }
+  }, {
+    variant: "drawer",
+    position: "top",
+    css: {
+      content: {
+        minWidth: "100%",
+        maxWidth: "100%",
+        height: "var(--size)",
+        _open: {
+          animation: "drawer-in-top"
+        },
+        _closed: {
+          animation: "drawer-out-top"
+        }
+      }
+    }
+  }, {
+    variant: "drawer",
+    position: "bottom",
+    css: {
+      content: {
+        minWidth: "100%",
+        maxWidth: "100%",
+        height: "var(--size)",
+        _open: {
+          animation: "drawer-in-bottom"
+        },
+        _closed: {
+          animation: "drawer-out-bottom"
+        }
+      }
+    }
+  }, {
+    variant: "drawer",
+    size: "xsmall",
+    css: {
+      content: {
+        "--size": "sizes.surface.3xsmall"
+      }
+    }
+  }, {
+    variant: "drawer",
+    size: "small",
+    css: {
+      content: {
+        "--size": "sizes.surface.xsmall"
+      }
+    }
+  }, {
+    variant: "drawer",
+    size: "medium",
+    css: {
+      content: {
+        "--size": "sizes.surface.medium"
+      }
+    }
+  }, {
+    variant: "drawer",
+    size: "large",
+    css: {
+      content: {
+        "--size": "sizes.surface.xlarge"
+      }
+    }
+  }],
+  variants: {
+    variant: {
+      drawer: {
+        content: {
+          "--margin": "0px",
+          borderRadius: {
+            base: "sharp",
+            tablet: "sharp"
+          }
+        }
+      },
+      dialog: {
+        content: {
+          width: "var(--size)",
+          _open: {
+            animation: "dialog-in"
+          },
+          _closed: {
+            animation: "dialog-out"
+          }
+        }
+      }
+    },
+    position: {
+      left: {
+        content: {
+          marginInlineStart: "min(var(--margin), 5%)"
+        }
+      },
+      center: {},
+      right: {
+        content: {
+          marginInlineEnd: "var(--margin)"
+        }
+      },
+      bottom: {
+        content: {
+          marginBlockEnd: "var(--margin)"
+        }
+      },
+      top: {
+        content: {
+          marginBlockStart: "var(--margin)"
+        }
+      }
+    },
+    size: {
+      full: {
+        content: {
+          "--margin": "0px",
+          minHeight: "100%",
+          minWidth: "100%",
+          borderRadius: "sharp"
+        }
+      },
+      xsmall: {
+        content: {
+          "--size": "sizes.surface.xsmall"
+        }
+      },
+      small: {
+        content: {
+          "--size": "sizes.surface.medium"
+        }
+      },
+      medium: {
+        content: {
+          "--size": "sizes.surface.xlarge"
+        }
+      },
+      large: {
+        content: {
+          "--size": "sizes.surface.4xlarge"
+        }
+      }
+    }
+  }
+});
+const {
+  withRootProvider,
+  withContext
+} = createStyleContext(dialogRecipe);
+export const InternalDialogRoot = withRootProvider(Dialog.Root);
+export const DialogRoot = _ref => {
+  let {
+    lazyMount = true,
+    unmountOnExit = true,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalDialogRoot, {
+    lazyMount: lazyMount,
+    unmountOnExit: unmountOnExit,
+    ...props
+  });
+};
+export const DialogBackdrop = withContext(Dialog.Backdrop, "backdrop");
+export const DialogStandaloneContent = withContext(Dialog.Content, "content");
+export const DialogPositioner = withContext(Dialog.Positioner, "positioner");
+export const DialogContent = /*#__PURE__*/forwardRef((props, ref) => /*#__PURE__*/_jsxs(_Fragment, {
+  children: [/*#__PURE__*/_jsx(DialogBackdrop, {}), /*#__PURE__*/_jsx(DialogPositioner, {
+    children: /*#__PURE__*/_jsx(DialogStandaloneContent, {
+      ref: ref,
+      ...props
+    })
+  })]
+}));
+export const DialogDescription = _ref2 => {
+  let {
+    textStyle = "body.large",
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Dialog.Description, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Text, {
+      as: "p",
+      textStyle: textStyle,
+      ...rest
+    })
+  });
+};
+export const DialogTitle = _ref3 => {
+  let {
+    textStyle = "title.medium",
+    ...rest
+  } = _ref3;
+  return /*#__PURE__*/_jsx(Dialog.Title, {
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Heading, {
+      as: "h1",
+      textStyle: textStyle,
+      ...rest
+    })
+  });
+};
+export const DialogTrigger = Dialog.Trigger;
+export const DialogCloseTrigger = Dialog.CloseTrigger;
+export const DialogHeader = styled("div", {
+  base: {
+    display: "flex",
+    paddingInline: "medium",
+    paddingBlockStart: "medium",
+    justifyContent: "space-between",
+    gap: "xsmall"
+  }
+});
+export const DialogBody = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+    paddingInline: "medium",
+    paddingBlockStart: "small",
+    paddingBlockEnd: "medium"
+  }
+});

package/es/ExpandableBox.js

@@ -0,0 +1,55 @@
+/**
+ * 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 { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledExpandableBox = styled("details", {
+  base: {
+    transitionDuration: "fast",
+    width: "100%",
+    position: "relative",
+    border: "1px solid",
+    borderRadius: "xsmall",
+    borderColor: "stroke.subtle",
+    padding: "medium",
+    _open: {
+      padding: "medium",
+      "& summary": {
+        marginBlockEnd: "-xxsmall"
+      }
+    }
+  }
+});
+export const ExpandableBox = props => /*#__PURE__*/_jsx(StyledExpandableBox, {
+  ...props
+});
+const StyledExpandableBoxSummary = styled("summary", {
+  base: {
+    cursor: "pointer",
+    margin: "-medium",
+    padding: "medium",
+    textStyle: "label.large!",
+    _hover: {
+      color: "text.action"
+    },
+    "& > *": {
+      display: "inline!",
+      textStyle: "label.large!"
+    }
+  }
+});
+export const ExpandableBoxSummary = _ref => {
+  let {
+    children,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledExpandableBoxSummary, {
+    ...rest,
+    children: children
+  });
+};

package/es/FieldErrorMessage.js

@@ -0,0 +1,44 @@
+/**
+ * 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 { css, cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { useFormControlContext } from "./FormControl";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledErrorMessage = styled("div", {
+  base: {
+    color: "text.error",
+    whiteSpace: "pre-line"
+  }
+});
+export const FieldErrorMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var _field$getErrorMessag;
+  let {
+    textStyle = "label.small",
+    fontWeight,
+    color,
+    srOnly,
+    className,
+    ...props
+  } = _ref;
+  const field = useFormControlContext();
+  if (field && !field.isInvalid) return null;
+  return /*#__PURE__*/_jsx(StyledErrorMessage, {
+    ...((_field$getErrorMessag = field === null || field === void 0 ? void 0 : field.getErrorMessageProps(props, ref)) !== null && _field$getErrorMessag !== void 0 ? _field$getErrorMessag : {
+      ref,
+      ...props
+    }),
+    className: cx(css({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly: srOnly
+    }), className)
+  });
+});

package/es/FieldHelper.js

@@ -0,0 +1,37 @@
+/**
+ * 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 { css, cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { useFormControlContext } from "./FormControl";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const FieldHelper = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var _field$getHelpTextPro;
+  let {
+    textStyle = "label.small",
+    fontWeight,
+    color,
+    srOnly,
+    className,
+    ...props
+  } = _ref;
+  const field = useFormControlContext();
+  return /*#__PURE__*/_jsx(styled.div, {
+    ...((_field$getHelpTextPro = field === null || field === void 0 ? void 0 : field.getHelpTextProps(props, ref)) !== null && _field$getHelpTextPro !== void 0 ? _field$getHelpTextPro : {
+      ref,
+      ...props
+    }),
+    className: cx(css({
+      textStyle,
+      fontWeight,
+      color,
+      srOnly
+    }), className)
+  });
+});

package/es/FormControl.js

@@ -0,0 +1,163 @@
+/**
+ * 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 { createContext, useCallback, useContext, useState } from "react";
+import { styled } from "@ndla/styled-system/jsx";
+import { composeRefs } from "@ndla/util";
+import { jsx as _jsx } from "react/jsx-runtime";
+const StyledFormControl = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "3xsmall"
+  }
+});
+const useFormControlProvider = _ref => {
+  let {
+    id: idProp,
+    isRequired,
+    isDisabled,
+    isInvalid
+  } = _ref;
+  const id = "field-".concat(idProp);
+  const labelId = "".concat(id, "-label");
+  const errorTextId = "".concat(id, "-error-message");
+  const helpTextId = "".concat(id, "-helper");
+  const [hasErrorText, setHasErrorText] = useState(false);
+  const [hasHelpText, setHasHelpText] = useState(false);
+  const getHelpTextProps = useCallback(function () {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return {
+      id: helpTextId,
+      ...props,
+      ref: composeRefs(forwardedRef, node => {
+        if (!node) return;
+        setHasHelpText(true);
+      })
+    };
+  }, [helpTextId]);
+  const getLabelProps = useCallback(function () {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return {
+      ...props,
+      ref: forwardedRef,
+      "data-disabled": props !== null && props !== void 0 && props["data-disabled"] ? props["data-disabled"] : isDisabled,
+      "data-invalid": props !== null && props !== void 0 && props["data-invalid"] ? props["data-invalid"] : isInvalid,
+      id: props.id !== undefined ? props.id : labelId,
+      htmlFor: props.htmlFor !== undefined ? props.htmlFor : id
+    };
+  }, [id, isDisabled, isInvalid, labelId]);
+  const getErrorMessageProps = useCallback(function () {
+    let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+    let forwardedRef = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+    return {
+      id: errorTextId,
+      ...props,
+      ref: composeRefs(forwardedRef, node => {
+        if (!node) return;
+        setHasErrorText(true);
+      }),
+      "aria-live": "polite"
+    };
+  }, [errorTextId]);
+  return {
+    isRequired: !!isRequired,
+    isDisabled: !!isDisabled,
+    isInvalid: !!isInvalid,
+    hasErrorText,
+    setHasErrorText,
+    hasHelpText,
+    setHasHelpText,
+    id,
+    labelId,
+    errorTextId,
+    helpTextId,
+    getHelpTextProps,
+    getErrorMessageProps,
+    getLabelProps
+  };
+};
+const FormControlContext = /*#__PURE__*/createContext(undefined);
+
+/**
+ * Form control component inspired by chakra-ui. Allows for easy composition of form fields.
+ */
+export const FormControl = _ref2 => {
+  let {
+    children,
+    id,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    ...rest
+  } = _ref2;
+  const context = useFormControlProvider({
+    id,
+    isDisabled,
+    isInvalid,
+    isRequired
+  });
+  return /*#__PURE__*/_jsx(FormControlContext.Provider, {
+    value: context,
+    children: /*#__PURE__*/_jsx(StyledFormControl, {
+      ...rest,
+      children: children
+    })
+  });
+};
+export const useFormControlContext = () => {
+  const context = useContext(FormControlContext);
+  return context;
+};
+export const useFormControlProps = _ref3 => {
+  let {
+    id,
+    disabled,
+    required,
+    isDisabled,
+    isInvalid,
+    isRequired,
+    ...rest
+  } = _ref3;
+  const field = useFormControlContext();
+  const labelIds = [];
+  if (field !== null && field !== void 0 && field.hasErrorText && field !== null && field !== void 0 && field.isInvalid) {
+    labelIds.push(field.errorTextId);
+  }
+  if (rest["aria-describedby"]) {
+    labelIds.push(rest["aria-describedby"]);
+  }
+  if (field !== null && field !== void 0 && field.hasHelpText) {
+    labelIds.push(field.helpTextId);
+  }
+  return {
+    ...rest,
+    "aria-describedby": labelIds.join(" ") || undefined,
+    id: id !== null && id !== void 0 ? id : field === null || field === void 0 ? void 0 : field.id,
+    isDisabled: disabled !== null && disabled !== void 0 ? disabled : field === null || field === void 0 ? void 0 : field.isDisabled,
+    isRequired: required !== null && required !== void 0 ? required : field === null || field === void 0 ? void 0 : field.isRequired,
+    isInvalid: isInvalid !== null && isInvalid !== void 0 ? isInvalid : field === null || field === void 0 ? void 0 : field.isInvalid
+  };
+};
+export const useFormControl = props => {
+  const {
+    isDisabled,
+    isInvalid,
+    isRequired,
+    ...rest
+  } = useFormControlProps(props);
+  return {
+    ...rest,
+    disabled: isDisabled,
+    required: isRequired,
+    "aria-invalid": isInvalid ? true : undefined,
+    "aria-required": isRequired ? true : undefined
+  };
+};

package/es/FramedContent.js

@@ -0,0 +1,54 @@
+/**
+ * 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 { cva, cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+const framedContentRecipe = cva({
+  base: {
+    padding: "medium",
+    border: "1px solid",
+    borderRadius: "small",
+    boxShadow: "4px 4px 0px 0px var(--shadow-color)"
+  },
+  variants: {
+    colorTheme: {
+      neutral: {
+        backgroundColor: "surface.default",
+        borderColor: "stroke.subtle",
+        boxShadowColor: "stroke.subtle"
+      },
+      brand1: {
+        backgroundColor: "surface.brand.1.subtle",
+        borderColor: "surface.brand.1.strong",
+        boxShadowColor: "surface.brand.1.strong"
+      },
+      brand2: {
+        backgroundColor: "surface.brand.2.subtle",
+        borderColor: "surface.brand.2.strong",
+        boxShadowColor: "surface.brand.2.strong"
+      }
+    }
+  },
+  defaultVariants: {
+    colorTheme: "neutral"
+  }
+});
+export const FramedContent = _ref => {
+  let {
+    className,
+    colorTheme,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(styled.div, {
+    className: cx(framedContentRecipe({
+      colorTheme
+    }), className),
+    ...rest
+  });
+};