@ndla/primitives 0.0.1

package/lib/Accordion.js

@@ -0,0 +1,109 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AccordionRoot = exports.AccordionItemTrigger = exports.AccordionItemIndicator = exports.AccordionItemContent = exports.AccordionItem = void 0;
+var _anatomy = require("@ark-ui/anatomy");
+var _react = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("./createStyleContext");
+/**
+ * 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.
+ *
+ */
+
+const accordionRecipe = (0, _css.sva)({
+  slots: _anatomy.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
+} = (0, _createStyleContext.createStyleContext)(accordionRecipe);
+const AccordionRoot = exports.AccordionRoot = withProvider(_react.Accordion.Root, "root");
+const AccordionItemContent = exports.AccordionItemContent = withContext(_react.Accordion.ItemContent, "itemContent");
+const AccordionItemIndicator = exports.AccordionItemIndicator = withContext(_react.Accordion.ItemIndicator, "itemIndicator");
+const AccordionItem = exports.AccordionItem = withContext(_react.Accordion.Item, "item");
+const AccordionItemTrigger = exports.AccordionItemTrigger = withContext(_react.Accordion.ItemTrigger, "itemTrigger");

package/lib/ArticleLists.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 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 { ComponentPropsWithoutRef } from "react";
+import { StyledVariantProps } from "@ndla/styled-system/types";
+declare const StyledOrderedList: import("@ndla/styled-system/jsx").StyledComponent<"ol", {
+    variant?: "numbers" | "letters" | undefined;
+}>;
+export type OrderedListVariantProps = StyledVariantProps<typeof StyledOrderedList>;
+export type OrderedListProps = ComponentPropsWithoutRef<"ol"> & OrderedListVariantProps;
+export declare const OrderedList: ({ variant, ...props }: OrderedListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type UnOrderedListProps = ComponentPropsWithoutRef<"ul">;
+export declare const UnOrderedList: ({ ...props }: UnOrderedListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export type DefinitionListProps = ComponentPropsWithoutRef<"dl">;
+export declare const DefinitionList: ({ ...props }: DefinitionListProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/lib/ArticleLists.js

@@ -0,0 +1,115 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.UnOrderedList = exports.OrderedList = exports.DefinitionList = void 0;
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const StyledOrderedList = (0, _jsx2.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) '. '"
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+});
+const OrderedList = _ref => {
+  let {
+    variant = "numbers",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledOrderedList, {
+    variant: variant,
+    "data-variant": variant,
+    ...props
+  });
+};
+exports.OrderedList = OrderedList;
+const StyledUnOrderedList = (0, _jsx2.styled)("ul", {
+  base: {
+    listStyle: "revert",
+    listStylePosition: "inside",
+    paddingInlineStart: "small",
+    "& li": {
+      marginBlock: "small",
+      _marker: {
+        color: "icon.strong"
+      }
+    }
+  }
+});
+const UnOrderedList = _ref2 => {
+  let {
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledUnOrderedList, {
+    ...props
+  });
+};
+exports.UnOrderedList = UnOrderedList;
+const StyledDefinitionList = (0, _jsx2.styled)("dl", {
+  base: {
+    "& dt": {
+      fontWeight: "bold"
+    },
+    "& dd": {
+      marginInlineStart: "medium"
+    }
+  }
+});
+const DefinitionList = _ref3 => {
+  let {
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledDefinitionList, {
+    ...props
+  });
+};
+exports.DefinitionList = DefinitionList;

package/lib/Badge.d.ts

@@ -0,0 +1,33 @@
+/**
+ * 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 { ComponentPropsWithoutRef } from "react";
+import { RecipeVariantProps } from "@ndla/styled-system/css";
+declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    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 type BadgeVariantProps = RecipeVariantProps<typeof badgeRecipe>;
+export type BadgeProps = BadgeVariantProps & ComponentPropsWithoutRef<"div">;
+export declare const Badge: ({ colorTheme, className, ...rest }: BadgeProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/lib/Badge.js

@@ -0,0 +1,62 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Badge = void 0;
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const badgeRecipe = (0, _css.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"
+      }
+    }
+  }
+});
+const Badge = _ref => {
+  let {
+    colorTheme,
+    className,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.div, {
+    className: (0, _css.cx)(badgeRecipe({
+      colorTheme
+    }), className),
+    ...rest
+  });
+};
+exports.Badge = Badge;

package/lib/BlockQuote.d.ts

@@ -0,0 +1,28 @@
+/**
+ * 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 { ComponentPropsWithoutRef } from "react";
+import { RecipeVariantProps } from "@ndla/styled-system/css";
+declare const blockQuoteRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    variant: {
+        neutral: {
+            borderColor: "stroke.subtle";
+        };
+        brand1: {
+            background: "surface.brand.1.subtle";
+            borderColor: "surface.brand.1.strong";
+        };
+        brand2: {
+            background: "surface.brand.2.subtle";
+            borderColor: "surface.brand.2.strong";
+        };
+    };
+}>;
+export type BlockQuoteVariantProps = RecipeVariantProps<typeof blockQuoteRecipe>;
+export type BlockQuoteProps = ComponentPropsWithoutRef<"blockquote"> & BlockQuoteVariantProps;
+export declare const BlockQuote: ({ className, variant, ...rest }: BlockQuoteProps) => import("@emotion/react/jsx-runtime").JSX.Element;
+export {};

package/lib/BlockQuote.js

@@ -0,0 +1,56 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BlockQuote = void 0;
+var _css = require("@ndla/styled-system/css");
+var _jsx2 = require("@ndla/styled-system/jsx");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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.
+ *
+ */
+
+const blockQuoteRecipe = (0, _css.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"
+  }
+});
+const BlockQuote = _ref => {
+  let {
+    className,
+    variant,
+    ...rest
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsx2.styled.blockquote, {
+    className: (0, _css.cx)(blockQuoteRecipe({
+      variant
+    }), className),
+    ...rest
+  });
+};
+exports.BlockQuote = BlockQuote;

package/lib/Button.d.ts

@@ -0,0 +1,131 @@
+/**
+ * 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 { ComponentPropsWithRef } from "react";
+import { RecipeVariantProps } from "@ndla/styled-system/css";
+export declare const buttonBaseRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    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 declare const buttonRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    size: {
+        default: {
+            paddingInline: "medium";
+            paddingBlock: "xxsmall";
+            minHeight: "24";
+        };
+        small: {
+            textStyle: "label.small";
+            minHeight: "19";
+            paddingInline: "small";
+            paddingBlock: "3xsmall";
+        };
+    };
+}>;
+export type ButtonVariantProps = RecipeVariantProps<typeof buttonBaseRecipe> & RecipeVariantProps<typeof buttonRecipe>;
+export type ButtonProps = ComponentPropsWithRef<"button"> & ButtonVariantProps & {
+    variant?: Exclude<NonNullable<ButtonVariantProps>["variant"], "clear" | "clearSubtle">;
+};
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export type IconButtonVariantProps = RecipeVariantProps<typeof buttonBaseRecipe>;
+export type IconButtonProps = ComponentPropsWithRef<"button"> & IconButtonVariantProps & {
+    variant?: Exclude<NonNullable<IconButtonVariantProps>["variant"], "link">;
+};
+export declare const IconButton: import("react").ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const iconButtonRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<import("@ndla/styled-system/types").RecipeVariantRecord>;