@ndla/primitives 1.0.61-alpha.0 → 1.0.63-alpha.0

package/dist/panda.buildinfo.json

@@ -95,8 +95,9 @@
       "paddingInline]___[value:xsmall",
       "border]___[value:1px solid",
       "width]___[value:fit-content",
-      "textStyle]___[value:label.medium",
       "color]___[value:text.default",
+      "textStyle]___[value:label.small",
+      "textStyle]___[value:label.medium",
       "backgroundColor]___[value:surface.brand.1.moderate",
       "borderColor]___[value:surface.brand.1.strong",
       "backgroundColor]___[value:surface.brand.2.moderate",
@@ -175,7 +176,6 @@
       "marginBlock]___[value:0]___[cond:& svg",
       "width]___[value:medium]___[cond:& svg",
       "height]___[value:medium]___[cond:& svg",
-      "textStyle]___[value:label.small",
       "minHeight]___[value:large",
       "paddingBlock]___[value:4xsmall",
       "width]___[value:small]___[cond:& svg",

package/dist/styles.css

@@ -1,29 +1,29 @@
 @layer utilities {
   @layer compositions {
-    .textStyle_label\.medium {
+    .textStyle_label\.small {
       letter-spacing: normal;
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
-      font-size: var(--font-sizes-small);
-      line-height: var(--line-heights-small);
+      font-size: var(--font-sizes-xsmall);
+      line-height: var(--line-heights-xsmall);
 }
 
-    .textStyle_label\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
-      font-size: calc(var(--font-sizes-small) * 1.11);
-      line-height: calc(var(--line-heights-small) * 1.11);
+    .textStyle_label\.small:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-xsmall) * 1.11);
+      line-height: calc(var(--line-heights-xsmall) * 1.11);
 }
 
-    .textStyle_label\.small {
+    .textStyle_label\.medium {
       letter-spacing: normal;
       font-family: var(--fonts-sans);
       font-weight: var(--font-weights-normal);
-      font-size: var(--font-sizes-xsmall);
-      line-height: var(--line-heights-xsmall);
+      font-size: var(--font-sizes-small);
+      line-height: var(--line-heights-small);
 }
 
-    .textStyle_label\.small:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
-      font-size: calc(var(--font-sizes-xsmall) * 1.11);
-      line-height: calc(var(--line-heights-xsmall) * 1.11);
+    .textStyle_label\.medium:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+      font-size: calc(var(--font-sizes-small) * 1.11);
+      line-height: calc(var(--line-heights-small) * 1.11);
 }
 
     .textStyle_label\.large\! {

package/es/Badge.js

@@ -17,13 +17,21 @@ const badgeRecipe = cva({
     borderRadius: "xsmall",
     border: "1px solid",
     width: "fit-content",
-    textStyle: "label.medium",
     color: "text.default"
   },
   defaultVariants: {
-    colorTheme: "neutral"
+    colorTheme: "neutral",
+    size: "medium"
   },
   variants: {
+    size: {
+      small: {
+        textStyle: "label.small"
+      },
+      medium: {
+        textStyle: "label.medium"
+      }
+    },
     colorTheme: {
       brand1: {
         backgroundColor: "surface.brand.1.moderate",
@@ -62,12 +70,14 @@ const StyledBadge = styled(ark.div, {}, {
 export const Badge = /*#__PURE__*/forwardRef((_ref, ref) => {
   let {
     colorTheme,
+    size,
     css: cssProp,
     ...props
   } = _ref;
   return /*#__PURE__*/_jsx(StyledBadge, {
     css: css.raw(badgeRecipe.raw({
-      colorTheme
+      colorTheme,
+      size
     }), cssProp),
     ...props,
     ref: ref

package/es/RadioGroup.js

@@ -10,7 +10,6 @@ import { forwardRef } from "react";
 import { RadioGroup, radioGroupAnatomy } 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 radioGroupRecipe = sva({
@@ -131,15 +130,17 @@ export const InternalRadioGroupLabel = withContext(RadioGroup.Label, "label");
 export const RadioGroupLabel = /*#__PURE__*/forwardRef((_ref2, ref) => {
   let {
     textStyle = "label.large",
+    fontWeight = "bold",
     children,
     ...props
   } = _ref2;
   return /*#__PURE__*/_jsx(InternalRadioGroupLabel, {
-    ref: ref,
     ...props,
     asChild: true,
-    children: /*#__PURE__*/_jsx(Label, {
+    ref: ref,
+    children: /*#__PURE__*/_jsx(Text, {
       textStyle: textStyle,
+      fontWeight: fontWeight,
       children: children
     })
   });

package/es/Table.js

@@ -70,6 +70,11 @@ export const Table = styled(ark.table, {
       }
     }
   }
-}, {
-  baseComponent: true
+},
+// TODO: Chrome doesn't support automatically making overflowed elements tabbable yet. Revisit this in a year or two
+{
+  baseComponent: true,
+  defaultProps: {
+    tabIndex: 0
+  }
 });

package/lib/Badge.d.ts

@@ -9,6 +9,14 @@ import { type HTMLArkProps } from "@ark-ui/react";
 import { type RecipeVariantProps } from "@ndla/styled-system/css";
 import type { JsxStyleProps } from "@ndla/styled-system/types";
 declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
+    size: {
+        small: {
+            textStyle: "label.small";
+        };
+        medium: {
+            textStyle: "label.medium";
+        };
+    };
     colorTheme: {
         brand1: {
             backgroundColor: "surface.brand.1.moderate";
@@ -46,6 +54,7 @@ export type BadgeProps = HTMLArkProps<"div"> & JsxStyleProps & BadgeVariantProps
 export declare const Badge: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & {
+    size?: "small" | "medium" | undefined;
     colorTheme?: "neutral" | "brand1" | "brand2" | "brand3" | "danger" | "success" | "warning" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/lib/Badge.js

@@ -23,13 +23,21 @@ const badgeRecipe = (0, _css.cva)({
     borderRadius: "xsmall",
     border: "1px solid",
     width: "fit-content",
-    textStyle: "label.medium",
     color: "text.default"
   },
   defaultVariants: {
-    colorTheme: "neutral"
+    colorTheme: "neutral",
+    size: "medium"
   },
   variants: {
+    size: {
+      small: {
+        textStyle: "label.small"
+      },
+      medium: {
+        textStyle: "label.medium"
+      }
+    },
     colorTheme: {
       brand1: {
         backgroundColor: "surface.brand.1.moderate",
@@ -68,12 +76,14 @@ const StyledBadge = (0, _jsx2.styled)(_react2.ark.div, {}, {
 const Badge = exports.Badge = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   let {
     colorTheme,
+    size,
     css: cssProp,
     ...props
   } = _ref;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledBadge, {
     css: _css.css.raw(badgeRecipe.raw({
-      colorTheme
+      colorTheme,
+      size
     }), cssProp),
     ...props,
     ref: ref

package/lib/Layout/PageContent.d.ts

@@ -52,7 +52,5 @@ export declare const PageContent: import("react").ForwardRefExoticComponent<Omit
 } & {
     consumeCss?: boolean;
 } & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
-export declare const BleedPageContent: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const BleedPageContent: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
 export {};

package/lib/RadioGroup.js

@@ -8,7 +8,6 @@ var _react = require("react");
 var _react2 = require("@ark-ui/react");
 var _css = require("@ndla/styled-system/css");
 var _createStyleContext = require("./createStyleContext");
-var _Label = require("./Label");
 var _Text = require("./Text");
 var _jsxRuntime = require("react/jsx-runtime");
 /**
@@ -138,15 +137,17 @@ const InternalRadioGroupLabel = exports.InternalRadioGroupLabel = withContext(_r
 const RadioGroupLabel = exports.RadioGroupLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
   let {
     textStyle = "label.large",
+    fontWeight = "bold",
     children,
     ...props
   } = _ref2;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(InternalRadioGroupLabel, {
-    ref: ref,
     ...props,
     asChild: true,
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Label.Label, {
+    ref: ref,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
       textStyle: textStyle,
+      fontWeight: fontWeight,
       children: children
     })
   });

package/lib/Skeleton.d.ts

@@ -7,8 +7,6 @@
  */
 import { type HTMLArkProps } from "@ark-ui/react";
 import type { JsxStyleProps } from "@ndla/styled-system/types";
-export declare const Skeleton: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const Skeleton: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & import("@ark-ui/react").PolymorphicProps>, {}>;
 export interface SkeletonProps extends HTMLArkProps<"div">, JsxStyleProps {
 }

package/lib/Table.d.ts

@@ -8,6 +8,4 @@
 import { type HTMLArkProps } from "@ark-ui/react";
 import type { JsxStyleProps } from "@ndla/styled-system/types";
 export type TableProps = HTMLArkProps<"table"> & JsxStyleProps;
-export declare const Table: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>, "ref"> & {
-    ref?: ((instance: HTMLTableElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLTableElement> | null | undefined;
-} & import("@ark-ui/react").PolymorphicProps>, {}>;
+export declare const Table: import("@ndla/styled-system/types").StyledComponent<import("react").ForwardRefExoticComponent<import("react").ClassAttributes<HTMLTableElement> & import("react").TableHTMLAttributes<HTMLTableElement> & import("@ark-ui/react").PolymorphicProps>, {}>;

package/lib/Table.js

@@ -76,6 +76,11 @@ const Table = exports.Table = (0, _jsx.styled)(_react.ark.table, {
       }
     }
   }
-}, {
-  baseComponent: true
+},
+// TODO: Chrome doesn't support automatically making overflowed elements tabbable yet. Revisit this in a year or two
+{
+  baseComponent: true,
+  defaultProps: {
+    tabIndex: 0
+  }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.61-alpha.0",
+  "version": "1.0.63-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -30,7 +30,7 @@
   "dependencies": {
     "@ark-ui/react": "^4.1.2",
     "@ndla/styled-system": "^0.0.29",
-    "@ndla/util": "^5.0.2-alpha.0"
+    "@ndla/util": "^5.0.4-alpha.0"
   },
   "devDependencies": {
     "@ndla/preset-panda": "^0.0.48",
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "bb87f73d8b8c67d7a39a3e10cc06ed55325798e4"
+  "gitHead": "e1109fda9f34b6ab504a45ce844b2f7fbfa374a9"
 }