@ndla/primitives 0.0.1

package/es/Accordion.js

@@ -0,0 +1,103 @@
+/**
+ * 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 { accordionAnatomy } from "@ark-ui/anatomy";
+import { Accordion } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+const accordionRecipe = sva({
+  slots: accordionAnatomy.keys(),
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "3xsmall"
+    },
+    itemTrigger: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "space-between",
+      background: "surface.default",
+      cursor: "pointer",
+      paddingInline: "medium",
+      paddingBlock: "medium",
+      boxShadowColor: "stroke.subtle",
+      boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+      borderRadius: "xsmall",
+      transitionDuration: "fast",
+      transitionTimingFunction: "default",
+      transitionProperty: "background, border-color, border, border-radius",
+      width: "100%",
+      _closed: {
+        transitionProperty: "background, border-color, border, border-radius"
+      },
+      _disabled: {
+        cursor: "not-allowed",
+        background: "surface..disabled.subtle",
+        boxShadowColor: "stroke.disabled",
+        color: "text.disabled",
+        _hover: {
+          background: "surface.disabled.subtle",
+          boxShadowColor: "stroke.disabled",
+          color: "text.disabled"
+        }
+      },
+      _hover: {
+        background: "surface.actionSubtle.hover",
+        boxShadowColor: "stroke.hover"
+      },
+      _open: {
+        backgroundColor: "surface.actionSubtle.active",
+        boxShadowColor: "stroke.default",
+        borderBottomRadius: "sharp"
+      },
+      _focusVisible: {
+        outline: "none",
+        boxShadowColor: "stroke.default",
+        boxShadow: "inset 0 0 0 2px var(--shadow-color)"
+      }
+    },
+    itemIndicator: {
+      color: "icon.strong",
+      transformOrigin: "center",
+      transitionDuration: "normal",
+      transitionProperty: "transform",
+      transitionTimingFunction: "default",
+      _open: {
+        transform: "rotate(180deg)"
+      }
+    },
+    itemContent: {
+      overflow: "hidden",
+      transitionProperty: "padding-bottom",
+      transitionDuration: "normal",
+      transitionTimingFunction: "default",
+      paddingBlock: "xsmall",
+      paddingInline: "small",
+      borderBottomRadius: "xsmall",
+      borderWidth: "0 1px 1px",
+      borderStyle: "solid",
+      borderColor: "stroke.default",
+      _open: {
+        animation: "collapse-in"
+      },
+      _closed: {
+        animation: "collapse-out"
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(accordionRecipe);
+export const AccordionRoot = withProvider(Accordion.Root, "root");
+export const AccordionItemContent = withContext(Accordion.ItemContent, "itemContent");
+export const AccordionItemIndicator = withContext(Accordion.ItemIndicator, "itemIndicator");
+export const AccordionItem = withContext(Accordion.Item, "item");
+export const AccordionItemTrigger = withContext(Accordion.ItemTrigger, "itemTrigger");

package/es/ArticleLists.js

@@ -0,0 +1,106 @@
+/**
+ * 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 StyledOrderedList = styled("ol", {
+  base: {
+    listStyle: "revert",
+    listStylePosition: "inside",
+    paddingInlineStart: "small",
+    "& li": {
+      marginBlock: "small"
+    }
+  },
+  defaultVariants: {
+    variant: "numbers"
+  },
+  variants: {
+    variant: {
+      numbers: {
+        "& > li": {
+          _marker: {
+            content: "counters(list-item, '.') '. '"
+          }
+        }
+      },
+      letters: {
+        "& ol[data-variant='numbers'] > li": {
+          _marker: {
+            content: "counter(list-item, numeric) '. '"
+          }
+        },
+        "& li": {
+          _marker: {
+            content: "counter(list-item, upper-alpha) '. '"
+          },
+          "& > ol > li": {
+            _marker: {
+              content: "counter(list-item, lower-alpha) '. '"
+            },
+            "& li": {
+              _marker: {
+                content: "counter(list-item, lower-roman) '. '"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+export const OrderedList = _ref => {
+  let {
+    variant = "numbers",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(StyledOrderedList, {
+    variant: variant,
+    "data-variant": variant,
+    ...props
+  });
+};
+const StyledUnOrderedList = styled("ul", {
+  base: {
+    listStyle: "revert",
+    listStylePosition: "inside",
+    paddingInlineStart: "small",
+    "& li": {
+      marginBlock: "small",
+      _marker: {
+        color: "icon.strong"
+      }
+    }
+  }
+});
+export const UnOrderedList = _ref2 => {
+  let {
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(StyledUnOrderedList, {
+    ...props
+  });
+};
+const StyledDefinitionList = styled("dl", {
+  base: {
+    "& dt": {
+      fontWeight: "bold"
+    },
+    "& dd": {
+      marginInlineStart: "medium"
+    }
+  }
+});
+export const DefinitionList = _ref3 => {
+  let {
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/_jsx(StyledDefinitionList, {
+    ...props
+  });
+};

package/es/Badge.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 { cva, cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+const badgeRecipe = cva({
+  base: {
+    paddingInline: "xsmall",
+    borderRadius: "xsmall",
+    border: "1px solid",
+    width: "fit-content"
+  },
+  defaultVariants: {
+    colorTheme: "neutral"
+  },
+  variants: {
+    colorTheme: {
+      brand1: {
+        backgroundColor: "surface.brand.1.subtle",
+        borderColor: "surface.brand.1.strong"
+      },
+      brand2: {
+        backgroundColor: "surface.brand.2.subtle",
+        borderColor: "surface.brand.2.strong"
+      },
+      brand3: {
+        backgroundColor: "surface.brand.3.subtle",
+        borderColor: "surface.brand.3.strong"
+      },
+      neutral: {
+        backgroundColor: "surface.infoSubtle",
+        borderColor: "stroke.default"
+      }
+    }
+  }
+});
+export const Badge = _ref => {
+  let {
+    colorTheme,
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(styled.div, {
+    className: cx(badgeRecipe({
+      colorTheme
+    }), className),
+    ...rest
+  });
+};

package/es/BlockQuote.js

@@ -0,0 +1,49 @@
+/**
+ * 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 blockQuoteRecipe = cva({
+  base: {
+    borderInlineStart: "4px solid",
+    paddingInline: "medium"
+  },
+  variants: {
+    variant: {
+      neutral: {
+        borderColor: "stroke.subtle"
+        // TODO: Figure out if this should have a background color.
+      },
+      brand1: {
+        background: "surface.brand.1.subtle",
+        borderColor: "surface.brand.1.strong"
+      },
+      brand2: {
+        background: "surface.brand.2.subtle",
+        borderColor: "surface.brand.2.strong"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "neutral"
+  }
+});
+export const BlockQuote = _ref => {
+  let {
+    className,
+    variant,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(styled.blockquote, {
+    className: cx(blockQuoteRecipe({
+      variant
+    }), className),
+    ...rest
+  });
+};

package/es/Button.js

@@ -0,0 +1,211 @@
+/**
+ * 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, cva, cx } from "@ndla/styled-system/css";
+import { styled } from "@ndla/styled-system/jsx";
+import { jsx as _jsx } from "react/jsx-runtime";
+export const buttonBaseRecipe = cva({
+  base: {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: "xsmall",
+    cursor: "pointer",
+    textDecoration: "none",
+    textStyle: "label.medium",
+    fontWeight: "bold",
+    transitionProperty: "all",
+    transitionDuration: "fast",
+    transitionTimingFunction: "default",
+    textAlign: "center",
+    borderRadius: "xsmall",
+    outline: "none",
+    boxShadowColor: "stroke.default",
+    _disabled: {
+      cursor: "not-allowed",
+      color: "text.onAction",
+      background: "surface.disabled",
+      _hover: {
+        color: "text.onAction",
+        background: "surface.disabled"
+      }
+    },
+    _focusVisible: {
+      boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+    }
+  },
+  defaultVariants: {
+    variant: "primary"
+  },
+  variants: {
+    variant: {
+      primary: {
+        color: "text.onAction",
+        background: "surface.action",
+        _hover: {
+          color: "text.onAction",
+          background: "surface.action.hover"
+        },
+        _active: {
+          color: "text.onAction",
+          background: "surface.action.active"
+        },
+        _focusVisible: {
+          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+        }
+      },
+      secondary: {
+        color: "text.strong",
+        background: "transparent",
+        boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+        _hover: {
+          background: "surface.actionSubtle.hover"
+        },
+        _active: {
+          background: "surface.actionSubtle.active"
+        }
+      },
+      tertiary: {
+        color: "text.strong",
+        background: "transparent",
+        _hover: {
+          boxShadow: "inset 0 0 0 1px var(--shadow-color)",
+          background: "surface.actionSubtle.hover",
+          _focusVisible: {
+            boxShadow: "inset 0 0 0 3px var(--shadow-color)"
+          }
+        },
+        _active: {
+          borderColor: "stroke.default",
+          background: "surface.actionSubtle.active"
+        }
+      },
+      clear: {
+        background: "transparent",
+        color: "text.strong",
+        _hover: {
+          color: "stroke.hover"
+        }
+      },
+      clearSubtle: {
+        background: "transparent",
+        color: "text.onAction",
+        _hover: {
+          color: "surface.actionSubtle.hover.strong"
+        }
+      },
+      danger: {
+        background: "surface.error",
+        color: "text.onAction",
+        _hover: {
+          background: "surface.error.hover"
+        },
+        _active: {
+          background: "surface.error.active"
+        },
+        _focusVisible: {
+          boxShadowColor: "surface.error",
+          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+        }
+      },
+      success: {
+        background: "surface.success",
+        color: "text.onAction",
+        _hover: {
+          background: "surface.success.hover"
+        },
+        _active: {
+          background: "surface.success.active"
+        },
+        _focusVisible: {
+          boxShadowColor: "surface.success",
+          boxShadow: "inset 0 0 0 3px var(--shadow-color), inset 0px 0px 0px 6px currentcolor"
+        }
+      },
+      link: {
+        background: "transparent",
+        color: "text.link",
+        textDecoration: "underline",
+        textDecorationThickness: "1px",
+        _hover: {
+          textDecoration: "none"
+        }
+      }
+    }
+  }
+});
+export const buttonRecipe = cva({
+  defaultVariants: {
+    size: "default"
+  },
+  variants: {
+    size: {
+      default: {
+        paddingInline: "medium",
+        paddingBlock: "xxsmall",
+        minHeight: "24"
+      },
+      small: {
+        textStyle: "label.small",
+        minHeight: "19",
+        paddingInline: "small",
+        paddingBlock: "3xsmall"
+      }
+    }
+  }
+});
+export const Button = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    type,
+    size,
+    className,
+    variant,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/_jsx(styled.button, {
+    type: type !== null && type !== void 0 ? type : "button",
+    className: cx(css(buttonBaseRecipe.raw({
+      variant
+    }), buttonRecipe.raw({
+      size
+    })), className),
+    ...rest,
+    ref: ref
+  });
+});
+export const IconButton = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    type,
+    className,
+    variant,
+    ...rest
+  } = _ref2;
+  return /*#__PURE__*/_jsx(styled.button, {
+    type: type !== null && type !== void 0 ? type : "button",
+    className: cx(css(buttonBaseRecipe.raw({
+      variant
+    }), iconButtonRecipe.raw()), className),
+    ...rest,
+    ref: ref
+  });
+});
+export const iconButtonRecipe = cva({
+  base: {
+    lineHeight: "1",
+    minHeight: "unset",
+    "& svg": {
+      marginInline: "0",
+      marginBlock: "0",
+      width: "medium",
+      height: "medium"
+    },
+    paddingInline: "xsmall",
+    paddingBlock: "xsmall"
+  }
+});

package/es/Checkbox.js

@@ -0,0 +1,118 @@
+/**
+ * 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 { checkboxAnatomy } from "@ark-ui/anatomy";
+import { Checkbox } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+import { useFormControl } from "./FormControl";
+import { Text } from "./Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+const checkboxRecipe = sva({
+  slots: checkboxAnatomy.keys(),
+  base: {
+    root: {
+      userSelect: "none",
+      display: "flex",
+      alignItems: "center",
+      cursor: "pointer",
+      gap: "xxsmall",
+      _disabled: {
+        color: "text.disabled",
+        cursor: "not-allowed"
+      },
+      _hover: {
+        color: "text.action"
+      },
+      _focus: {
+        outline: "2px solid",
+        outlineOffset: "4xsmall",
+        outlineColor: "stroke.default",
+        borderRadius: "xsmall"
+      }
+    },
+    control: {
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      cursor: "pointer",
+      width: "medium",
+      height: "medium",
+      background: "surface.default",
+      borderRadius: "xsmall",
+      border: "2px solid",
+      borderColor: "stroke.subtle",
+      color: "text.strong",
+      transitionDuration: "normal",
+      transitionProperty: "border-color, background, box-shadow, color",
+      transitionTimingFunction: "default",
+      _hover: {
+        boxShadow: "0 0 0 4px var(--shadow-color)",
+        boxShadowColor: "surface.actionSubtle.hover.strong"
+      },
+      _checked: {
+        color: "icon.onAction",
+        backgroundColor: "surface.action",
+        borderColor: "surface.action"
+      },
+      _disabled: {
+        borderColor: "stroke.disabled",
+        _hover: {
+          borderColor: "stroke.disabled",
+          boxShadow: "none"
+        },
+        _checked: {
+          background: "surface.disabled"
+        }
+      },
+      _invalid: {
+        borderColor: "stroke.error",
+        _checked: {
+          color: "stroke.error",
+          borderColor: "stroke.error",
+          backgroundColor: "surface.default"
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(checkboxRecipe);
+const InternalCheckboxRoot = withProvider(Checkbox.Root, "root");
+export const CheckboxRoot = /*#__PURE__*/forwardRef((props, ref) => {
+  var _field$invalid;
+  const field = useFormControl(props);
+  return /*#__PURE__*/_jsx(InternalCheckboxRoot, {
+    ...field,
+    invalid: (_field$invalid = field.invalid) !== null && _field$invalid !== void 0 ? _field$invalid : !!field["aria-invalid"],
+    ref: ref,
+    "aria-invalid": undefined
+  });
+});
+export const CheckboxIndicator = withContext(Checkbox.Indicator, "indicator");
+const InternalCheckboxLabel = withContext(Checkbox.Label, "label");
+export const CheckboxLabel = _ref => {
+  let {
+    textStyle = "label.medium",
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(InternalCheckboxLabel, {
+    ...props,
+    asChild: true,
+    children: /*#__PURE__*/_jsx(Text, {
+      textStyle: textStyle,
+      children: children
+    })
+  });
+};
+export const CheckboxControl = withContext(Checkbox.Control, "control");
+export const CheckboxHiddenInput = Checkbox.HiddenInput;