@ndla/primitives 0.0.19 → 0.0.20

package/dist/panda.buildinfo.json

@@ -74,10 +74,8 @@
       "content]___[value:counter(level1, lower-alpha) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>_marker",
       "content]___[value:counter(level1, lower-roman) '. ']___[cond:& > li<___>& > ol[data-variant='letters'] > li<___>& > ol[data-variant='letters'] > li<___>_marker",
       "listStyle]___[value:revert",
-      "listStylePosition]___[value:inside",
       "paddingInlineStart]___[value:medium",
       "color]___[value:icon.strong]___[cond:& li<___>_marker",
-      "display]___[value:inline]___[cond:& li > *:not(ol, ul, li)",
       "fontWeight]___[value:bold]___[cond:& dt",
       "marginInlineStart]___[value:medium]___[cond:& dd",
       "paddingInline]___[value:xsmall",
@@ -327,6 +325,19 @@
       "borderRadius]___[value:small",
       "backgroundColor]___[value:surface.default",
       "backgroundColor]___[value:surface.brand.2.subtle",
+      "height]___[value:350px",
+      "zIndex]___[value:hide",
+      "clipPath]___[value:polygon(0 0, 100% 0, 100% 65%, 0 100%)",
+      "position]___[value:absolute",
+      "background]___[value:primary",
+      "background]___[value:blue.800",
+      "background]___[value:surface.brand.2",
+      "background]___[value:surface.brand.1",
+      "background]___[value:surface.infoSubtle",
+      "background]___[value:surface.brand.4",
+      "flexWrap]___[value:wrap",
+      "alignItems]___[value:flex-end",
+      "paddingBlockStart]___[value:xxlarge]___[cond:tablet",
       "outline]___[value:1px solid",
       "background]___[value:background.default",
       "minHeight]___[value:xxlarge",
@@ -375,7 +386,6 @@
       "boxShadow]___[value:small",
       "alignItems]___[value:flex-start",
       "gap]___[value:small",
-      "background]___[value:surface.infoSubtle",
       "background]___[value:surface.warningSubtle",
       "borderColor]___[value:stroke.warning",
       "background]___[value:surface.successSubtle",
@@ -390,7 +400,6 @@
       "animation]___[value:fade-shift-out 0.2s ease-out]___[cond:_closed",
       "--arrow-size]___[value:sizes.xxsmall",
       "--arrow-background]___[value:colors.surface.default",
-      "flexWrap]___[value:wrap",
       "flexDirection]___[value:column]___[cond:_vertical",
       "flexDirection]___[value:row]___[cond:_horizontal",
       "borderRadius]___[value:full",
@@ -569,7 +578,6 @@
       "zIndex]___[value:var(--z-index)",
       "transitionDuration]___[value:slow",
       "transitionProperty]___[value:translate, scale, opacity, height",
-      "position]___[value:absolute",
       "top]___[value:xxsmall",
       "right]___[value:xxsmall",
       "paddingInline]___[value:xxsmall",

package/dist/styles.css

@@ -544,6 +544,47 @@
     border-radius: var(--radii-small);
 }
 
+  .h_350px {
+    height: 350px;
+}
+
+  .z_hide {
+    z-index: var(--z-index-hide);
+}
+
+  .cp-path_polygon\(0_0\,_100\%_0\,_100\%_65\%\,_0_100\%\) {
+    clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
+    -webkit-clip-path: polygon(0 0, 100% 0, 100% 65%, 0 100%);
+}
+
+  .pos_absolute {
+    position: absolute;
+}
+
+  .bg_primary {
+    background: var(--colors-primary);
+}
+
+  .bg_blue\.800 {
+    background: var(--colors-blue-800);
+}
+
+  .bg_surface\.brand\.2 {
+    background: var(--colors-surface-brand-2);
+}
+
+  .bg_surface\.brand\.1 {
+    background: var(--colors-surface-brand-1);
+}
+
+  .bg_surface\.infoSubtle {
+    background: var(--colors-surface-info-subtle);
+}
+
+  .bg_surface\.brand\.4 {
+    background: var(--colors-surface-brand-4);
+}
+
   .ring_1px_solid {
     outline: 1px solid;
 }
@@ -616,10 +657,6 @@
     gap: var(--spacing-small);
 }
 
-  .bg_surface\.infoSubtle {
-    background: var(--colors-surface-info-subtle);
-}
-
   .bg_surface\.warningSubtle {
     background: var(--colors-surface-warning-subtle);
 }
@@ -828,10 +865,6 @@
     z-index: var(--z-index);
 }
 
-  .pos_absolute {
-    position: absolute;
-}
-
   .px_xxsmall {
     padding-inline: var(--spacing-xxsmall);
 }
@@ -906,10 +939,6 @@
     border-color: var(--colors-stroke-default);
 }
 
-  .li-pos_inside {
-    list-style-position: inside;
-}
-
   .bg-c_surface\.brand\.1\.subtle {
     background-color: var(--colors-surface-brand-1-subtle);
 }
@@ -1002,6 +1031,14 @@
     background-color: var(--colors-surface-brand-2-subtle);
 }
 
+  .flex-wrap_wrap {
+    flex-wrap: wrap;
+}
+
+  .ai_flex-end {
+    align-items: flex-end;
+}
+
   .ov-y_hidden {
     overflow-y: hidden;
 }
@@ -1031,10 +1068,6 @@
     font-variant-numeric: tabular-nums;
 }
 
-  .flex-wrap_wrap {
-    flex-wrap: wrap;
-}
-
   .bd-w_2px {
     border-width: 2px;
 }
@@ -1200,10 +1233,6 @@
     counter-increment: level1;
 }
 
-  .\[\&_li_\>_\*\:not\(ol\,_ul\,_li\)\]\:d_inline li > *:not(ol, ul, li) {
-    display: inline;
-}
-
   .\[\&_dd\]\:ms_medium dd {
     margin-inline-start: var(--spacing-medium);
 }
@@ -2348,6 +2377,9 @@
 }
     .tablet\:clear_right {
       clear: right;
+}
+    .tablet\:pbs_xxlarge {
+      padding-block-start: var(--spacing-xxlarge);
 }
 }
 

package/es/ArticleLists.js

@@ -126,16 +126,12 @@ export const OrderedList = /*#__PURE__*/forwardRef((_ref, ref) => {
 export const UnOrderedList = styled("ul", {
   base: {
     listStyle: "revert",
-    listStylePosition: "inside",
     paddingInlineStart: "medium",
     "& li": {
       marginBlock: "small",
       _marker: {
         color: "icon.strong"
       }
-    },
-    "& li > *:not(ol, ul, li)": {
-      display: "inline"
     }
   }
 });

package/es/Hero.js

@@ -0,0 +1,108 @@
+/**
+ * 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 { ark } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "./createStyleContext";
+const heroRecipe = sva({
+  slots: ["root", "background", "content"],
+  base: {
+    root: {
+      width: "100%",
+      position: "relative",
+      zIndex: "base"
+    },
+    background: {
+      height: "350px",
+      width: "100%",
+      zIndex: "hide",
+      overflow: "hidden",
+      clipPath: "polygon(0 0, 100% 0, 100% 65%, 0 100%)"
+    },
+    content: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "flex-end",
+      paddingBlock: "xsmall",
+      tablet: {
+        paddingBlockStart: "xxlarge"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    absolute: true
+  },
+  variants: {
+    absolute: {
+      true: {
+        background: {
+          position: "absolute"
+        }
+      }
+    },
+    variant: {
+      primary: {
+        background: {
+          background: "primary"
+        },
+        content: {
+          color: "text.onAction"
+        }
+      },
+      brand2Strong: {
+        background: {
+          // TODO: This is not a semantic token.
+          background: "blue.800"
+        },
+        content: {
+          color: "text.onAction"
+        }
+      },
+      brand2: {
+        background: {
+          background: "surface.brand.2"
+        }
+      },
+      brand1: {
+        background: {
+          background: "surface.brand.1"
+        }
+      },
+      brand1Subtle: {
+        background: {
+          background: "surface.brand.1.subtle"
+        }
+      },
+      neutral: {
+        background: {
+          background: "surface.infoSubtle"
+        }
+      },
+      brand4: {
+        background: {
+          // TODO: This needs a proper color...
+          background: "surface.brand.4"
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(heroRecipe);
+export const Hero = withProvider(ark.div, "root", {
+  baseComponent: true
+});
+export const HeroBackground = withContext(ark.div, "background", {
+  baseComponent: true
+});
+export const HeroContent = withContext(ark.div, "content", {
+  baseComponent: true
+});

package/es/index.js

@@ -21,6 +21,7 @@ export { FieldErrorMessage } from "./FieldErrorMessage";
 export { FieldHelper } from "./FieldHelper";
 export { Figure } from "./Figure";
 export { FramedContent } from "./FramedContent";
+export { Hero, HeroBackground, HeroContent } from "./Hero";
 export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";
 export { Label, FieldLabel } from "./Label";

package/lib/ArticleLists.js

@@ -132,16 +132,12 @@ const OrderedList = exports.OrderedList = /*#__PURE__*/(0, _react.forwardRef)((_
 const UnOrderedList = exports.UnOrderedList = (0, _jsx2.styled)("ul", {
   base: {
     listStyle: "revert",
-    listStylePosition: "inside",
     paddingInlineStart: "medium",
     "& li": {
       marginBlock: "small",
       _marker: {
         color: "icon.strong"
       }
-    },
-    "& li > *:not(ol, ul, li)": {
-      display: "inline"
     }
   }
 });

package/lib/Hero.d.ts

@@ -0,0 +1,80 @@
+/**
+ * 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 { type HTMLArkProps } from "@ark-ui/react";
+import { type RecipeVariantProps } from "@ndla/styled-system/css";
+import { type JsxStyleProps } from "@ndla/styled-system/types";
+declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"content" | "root" | "background", {
+    absolute: {
+        true: {
+            background: {
+                position: "absolute";
+            };
+        };
+    };
+    variant: {
+        primary: {
+            background: {
+                background: "primary";
+            };
+            content: {
+                color: "text.onAction";
+            };
+        };
+        brand2Strong: {
+            background: {
+                background: "blue.800";
+            };
+            content: {
+                color: "text.onAction";
+            };
+        };
+        brand2: {
+            background: {
+                background: "surface.brand.2";
+            };
+        };
+        brand1: {
+            background: {
+                background: "surface.brand.1";
+            };
+        };
+        brand1Subtle: {
+            background: {
+                background: "surface.brand.1.subtle";
+            };
+        };
+        neutral: {
+            background: {
+                background: "surface.infoSubtle";
+            };
+        };
+        brand4: {
+            background: {
+                background: "surface.brand.4";
+            };
+        };
+    };
+}>;
+export type HeroVariantProps = RecipeVariantProps<typeof heroRecipe>;
+export type HeroVariant = NonNullable<HeroVariantProps>["variant"];
+export type HeroProps = HTMLArkProps<"div"> & JsxStyleProps & HeroVariantProps;
+export declare const Hero: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & {
+    absolute?: boolean | undefined;
+    variant?: "primary" | "neutral" | "brand1" | "brand2" | "brand2Strong" | "brand1Subtle" | "brand4" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export type HeroBackgroundProps = HTMLArkProps<"div"> & JsxStyleProps;
+export declare const HeroBackground: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export type HeroContentProps = HTMLArkProps<"div"> & JsxStyleProps;
+export declare const HeroContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/lib/Hero.js

@@ -0,0 +1,114 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.HeroContent = exports.HeroBackground = exports.Hero = void 0;
+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 heroRecipe = (0, _css.sva)({
+  slots: ["root", "background", "content"],
+  base: {
+    root: {
+      width: "100%",
+      position: "relative",
+      zIndex: "base"
+    },
+    background: {
+      height: "350px",
+      width: "100%",
+      zIndex: "hide",
+      overflow: "hidden",
+      clipPath: "polygon(0 0, 100% 0, 100% 65%, 0 100%)"
+    },
+    content: {
+      display: "flex",
+      flexWrap: "wrap",
+      alignItems: "flex-end",
+      paddingBlock: "xsmall",
+      tablet: {
+        paddingBlockStart: "xxlarge"
+      }
+    }
+  },
+  defaultVariants: {
+    variant: "primary",
+    absolute: true
+  },
+  variants: {
+    absolute: {
+      true: {
+        background: {
+          position: "absolute"
+        }
+      }
+    },
+    variant: {
+      primary: {
+        background: {
+          background: "primary"
+        },
+        content: {
+          color: "text.onAction"
+        }
+      },
+      brand2Strong: {
+        background: {
+          // TODO: This is not a semantic token.
+          background: "blue.800"
+        },
+        content: {
+          color: "text.onAction"
+        }
+      },
+      brand2: {
+        background: {
+          background: "surface.brand.2"
+        }
+      },
+      brand1: {
+        background: {
+          background: "surface.brand.1"
+        }
+      },
+      brand1Subtle: {
+        background: {
+          background: "surface.brand.1.subtle"
+        }
+      },
+      neutral: {
+        background: {
+          background: "surface.infoSubtle"
+        }
+      },
+      brand4: {
+        background: {
+          // TODO: This needs a proper color...
+          background: "surface.brand.4"
+        }
+      }
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(heroRecipe);
+const Hero = exports.Hero = withProvider(_react.ark.div, "root", {
+  baseComponent: true
+});
+const HeroBackground = exports.HeroBackground = withContext(_react.ark.div, "background", {
+  baseComponent: true
+});
+const HeroContent = exports.HeroContent = withContext(_react.ark.div, "content", {
+  baseComponent: true
+});

package/lib/index.d.ts

@@ -31,6 +31,8 @@ export type { FigureSize, FigureVariantProps, FigureProps, FigureFloat } from ".
 export { Figure } from "./Figure";
 export type { FramedContentVariantProps, FramedContentProps } from "./FramedContent";
 export { FramedContent } from "./FramedContent";
+export type { HeroVariantProps, HeroVariant, HeroProps, HeroBackgroundProps, HeroContentProps } from "./Hero";
+export { Hero, HeroBackground, HeroContent } from "./Hero";
 export type { ImageCrop, ImageFocalPoint, PictureProps, ImgProps, ImageProps } from "./Image";
 export { Picture, Img, Image, makeSrcQueryString, getSrcSet } from "./Image";
 export { Input, FieldInput, InputContainer, TextArea, FieldTextArea } from "./Input";

package/lib/index.js

@@ -333,6 +333,24 @@ Object.defineProperty(exports, "Heading", {
     return _Text.Heading;
   }
 });
+Object.defineProperty(exports, "Hero", {
+  enumerable: true,
+  get: function () {
+    return _Hero.Hero;
+  }
+});
+Object.defineProperty(exports, "HeroBackground", {
+  enumerable: true,
+  get: function () {
+    return _Hero.HeroBackground;
+  }
+});
+Object.defineProperty(exports, "HeroContent", {
+  enumerable: true,
+  get: function () {
+    return _Hero.HeroContent;
+  }
+});
 Object.defineProperty(exports, "IconButton", {
   enumerable: true,
   get: function () {
@@ -1014,6 +1032,7 @@ var _FieldErrorMessage = require("./FieldErrorMessage");
 var _FieldHelper = require("./FieldHelper");
 var _Figure = require("./Figure");
 var _FramedContent = require("./FramedContent");
+var _Hero = require("./Hero");
 var _Image = require("./Image");
 var _Input = require("./Input");
 var _Label = require("./Label");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "0.0.19",
+  "version": "0.0.20",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -33,7 +33,7 @@
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.11",
+    "@ndla/preset-panda": "^0.0.12",
     "@pandacss/dev": "^0.42.0"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3675a902b9f44f5afb37c648038b8d90f1ccd7d0"
+  "gitHead": "557f718324916e39e3b04d6a7196679d31056e00"
 }