@duetds/components 10.6.0 → 10.7.0

package/lib/types/components/duet-teaser/duet-teaser.d.ts

@@ -0,0 +1,93 @@
+import { DuetColor, DuetHeadingLevel, DuetIconColor, DuetIconName, DuetTheme } from "../../common-types";
+import { ThemeableComponent } from "../../common/themeable-component";
+import { DuetSource } from "../../utils/picture-utils";
+export type DuetTeaserHeadingVisualLevel = "h3" | "h5";
+/**
+ * @slot links - Slot for links or buttons related to the teaser. Only default duet-link and plain duet-button components should be used in this slot. Not rendered when the `url` property is set.
+ */
+export declare class DuetTeaser implements ThemeableComponent {
+    private aOrDivElement;
+    private hasLinksSlot;
+    element: HTMLElement;
+    /**
+     * Theme.
+     */
+    theme: DuetTheme;
+    /**
+     * The heading text.
+     */
+    heading: string;
+    /**
+     * The actual heading level used in the HTML markup.
+     */
+    headingLevel: DuetHeadingLevel;
+    /**
+     * Controls the visual size of the heading. Headings longer than 60 characters
+     * always use "h5" visually, regardless of this setting.
+     */
+    headingVisualLevel: DuetTeaserHeadingVisualLevel;
+    /**
+     * Description text shown below the heading.
+     */
+    description: string;
+    /**
+     * Meta text (date, category, etc.). Placed after the heading in source order, but rendered visually above it.
+     */
+    meta: string;
+    /**
+     * A destination to link to, rendered in the href attribute of a link. Makes
+     * the whole teaser act as a link and disables the links slot.
+     */
+    url: string;
+    /**
+     * Image URL. If provided, the icon property is ignored.
+     */
+    image: string;
+    /**
+     * Alt attribute text for the image. If not provided, image is assigned presentation role.
+     */
+    imageAlt: string;
+    /**
+     * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to
+     * "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+     */
+    imagePriority: "high" | "low";
+    /**
+     * Array of sources for responsive images. Sources have the properties of <source> element.
+     */
+    sources: DuetSource[] | string;
+    /**
+     * Icon to display when no image is set. Not used if the image property is given.
+     */
+    icon: DuetIconName;
+    /**
+     * Background color for the icon
+     */
+    iconBackground: DuetColor;
+    /**
+     * Color for the icon
+     */
+    iconColor: DuetIconColor;
+    /**
+     * Component lifecycle events.
+     */
+    componentWillLoad(): void;
+    componentDidRender(): void;
+    /**
+     * Sets focus on underlying a element.
+     * Available only when url attribute is used.
+     * Use this method instead of the native `focus()`.
+     */
+    setFocus(options?: FocusOptions): Promise<void>;
+    /**
+     * Creates/updates the actual heading element as a light DOM child of the
+     * host, slotted into the "heading" slot.
+     */
+    private headingSetUp;
+    private getHeadingVisualLevel;
+    /**
+     * render() function
+     * Always the last one of the class.
+     */
+    render(): any;
+}

package/lib/types/components.d.ts

@@ -63,6 +63,7 @@ import { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-s
 import { DuetStepChangeEvent } from "./components/duet-stepper/duet-stepper";
 import { IndicatorVariation as IndicatorVariation1 } from "./components/duet-indicator/duet-indicator";
 import { DuetTabGroupEvent, DuetTabVariation } from "./components/duet-tab-group/duet-tab-group";
+import { DuetTeaserHeadingVisualLevel } from "./components/duet-teaser/duet-teaser";
 import { DuetTextareaEvent } from "./components/duet-textarea/duet-textarea";
 import { DuetToggleChangeEvent } from "./components/duet-toggle/duet-toggle";
 import { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip";
@@ -131,6 +132,7 @@ export { DuetStepClickEvent, DuetStepState } from "./components/duet-step/duet-s
 export { DuetStepChangeEvent } from "./components/duet-stepper/duet-stepper";
 export { IndicatorVariation as IndicatorVariation1 } from "./components/duet-indicator/duet-indicator";
 export { DuetTabGroupEvent, DuetTabVariation } from "./components/duet-tab-group/duet-tab-group";
+export { DuetTeaserHeadingVisualLevel } from "./components/duet-teaser/duet-teaser";
 export { DuetTextareaEvent } from "./components/duet-textarea/duet-textarea";
 export { DuetToggleChangeEvent } from "./components/duet-toggle/duet-toggle";
 export { DuetTooltipBreakpoint } from "./components/duet-tooltip/duet-tooltip";
@@ -386,6 +388,10 @@ export namespace Components {
           * @default "cover"
          */
         "imageFit": "cover" | "contain";
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -730,6 +736,10 @@ export namespace Components {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt": string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -1386,6 +1396,10 @@ export namespace Components {
           * Image.
          */
         "image": string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -1867,7 +1881,8 @@ export namespace Components {
     | "sidebar-left"
     | "two-columns"
     | "three-columns"
-    | "button-grid";
+    | "button-grid"
+    | "teaser";
         /**
           * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first is row-gap and the second column-gap. Does not apply to button-grid.
           * @default "auto"
@@ -2180,6 +2195,11 @@ export namespace Components {
           * @default "auto"
          */
         "imagePosition": "auto" | "center";
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+          * @default "high"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Image sizing.
           * @default "auto"
@@ -4214,6 +4234,10 @@ export namespace Components {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt": string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -5544,6 +5568,73 @@ export namespace Components {
          */
         "variation": DuetTableVariant;
     }
+    interface DuetTeaser {
+        /**
+          * Description text shown below the heading.
+         */
+        "description": string;
+        /**
+          * The heading text.
+         */
+        "heading": string;
+        /**
+          * The actual heading level used in the HTML markup.
+          * @default "h3"
+         */
+        "headingLevel": DuetHeadingLevel;
+        /**
+          * Controls the visual size of the heading. Headings longer than 60 characters always use "h5" visually, regardless of this setting.
+          * @default "h3"
+         */
+        "headingVisualLevel": DuetTeaserHeadingVisualLevel;
+        /**
+          * Icon to display when no image is set. Not used if the image property is given.
+         */
+        "icon": DuetIconName;
+        /**
+          * Background color for the icon
+          * @default "color-background-accent-secondary"
+         */
+        "iconBackground": DuetColor;
+        /**
+          * Color for the icon
+          * @default "color-foreground-accent-secondary"
+         */
+        "iconColor": DuetIconColor;
+        /**
+          * Image URL. If provided, the icon property is ignored.
+         */
+        "image": string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt": string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority": "high" | "low";
+        /**
+          * Meta text (date, category, etc.). Placed after the heading in source order, but rendered visually above it.
+         */
+        "meta": string;
+        /**
+          * Sets focus on underlying a element. Available only when url attribute is used. Use this method instead of the native `focus()`.
+         */
+        "setFocus": (options?: FocusOptions) => Promise<void>;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources": DuetSource[] | string;
+        /**
+          * Theme.
+          * @default ""
+         */
+        "theme": DuetTheme;
+        /**
+          * A destination to link to, rendered in the href attribute of a link. Makes the whole teaser act as a link and disables the links slot.
+         */
+        "url": string;
+    }
     interface DuetTextarea {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -7672,6 +7763,12 @@ declare global {
         prototype: HTMLDuetTableElement;
         new (): HTMLDuetTableElement;
     };
+    interface HTMLDuetTeaserElement extends Components.DuetTeaser, HTMLStencilElement {
+    }
+    var HTMLDuetTeaserElement: {
+        prototype: HTMLDuetTeaserElement;
+        new (): HTMLDuetTeaserElement;
+    };
     interface HTMLDuetTextareaElementEventMap {
         "duetInput": DuetTextareaEvent;
         "duetChange": DuetTextareaEvent;
@@ -7911,6 +8008,7 @@ declare global {
         "duet-tab": HTMLDuetTabElement;
         "duet-tab-group": HTMLDuetTabGroupElement;
         "duet-table": HTMLDuetTableElement;
+        "duet-teaser": HTMLDuetTeaserElement;
         "duet-textarea": HTMLDuetTextareaElement;
         "duet-toggle": HTMLDuetToggleElement;
         "duet-toolbar": HTMLDuetToolbarElement;
@@ -8169,6 +8267,10 @@ declare namespace LocalJSX {
           * @default "cover"
          */
         "imageFit"?: "cover" | "contain";
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -8517,6 +8619,10 @@ declare namespace LocalJSX {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt"?: string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -9186,6 +9292,10 @@ declare namespace LocalJSX {
           * Image.
          */
         "image"?: string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -9695,7 +9805,8 @@ declare namespace LocalJSX {
     | "sidebar-left"
     | "two-columns"
     | "three-columns"
-    | "button-grid";
+    | "button-grid"
+    | "teaser";
         /**
           * When gridTemplate is used, gridTemplateGap sets the row and column gaps. With two values the first is row-gap and the second column-gap. Does not apply to button-grid.
           * @default "auto"
@@ -10036,6 +10147,11 @@ declare namespace LocalJSX {
           * @default "auto"
          */
         "imagePosition"?: "auto" | "center";
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+          * @default "high"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Image sizing.
           * @default "auto"
@@ -12011,6 +12127,10 @@ declare namespace LocalJSX {
           * Alt attribute text for the image. If not provided, image is assigned presentation role.
          */
         "imageAlt"?: string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
         /**
           * Controls the margin of the component.
           * @default "auto"
@@ -13293,6 +13413,69 @@ declare namespace LocalJSX {
          */
         "variation"?: DuetTableVariant;
     }
+    interface DuetTeaser {
+        /**
+          * Description text shown below the heading.
+         */
+        "description"?: string;
+        /**
+          * The heading text.
+         */
+        "heading"?: string;
+        /**
+          * The actual heading level used in the HTML markup.
+          * @default "h3"
+         */
+        "headingLevel"?: DuetHeadingLevel;
+        /**
+          * Controls the visual size of the heading. Headings longer than 60 characters always use "h5" visually, regardless of this setting.
+          * @default "h3"
+         */
+        "headingVisualLevel"?: DuetTeaserHeadingVisualLevel;
+        /**
+          * Icon to display when no image is set. Not used if the image property is given.
+         */
+        "icon"?: DuetIconName;
+        /**
+          * Background color for the icon
+          * @default "color-background-accent-secondary"
+         */
+        "iconBackground"?: DuetColor;
+        /**
+          * Color for the icon
+          * @default "color-foreground-accent-secondary"
+         */
+        "iconColor"?: DuetIconColor;
+        /**
+          * Image URL. If provided, the icon property is ignored.
+         */
+        "image"?: string;
+        /**
+          * Alt attribute text for the image. If not provided, image is assigned presentation role.
+         */
+        "imageAlt"?: string;
+        /**
+          * Make the image load with higher or lower priority. Value "high" sets the img's attributes fetchpriority and loading to "high" and "eager", while value "low" sets those attributes to "low" and "lazy"
+         */
+        "imagePriority"?: "high" | "low";
+        /**
+          * Meta text (date, category, etc.). Placed after the heading in source order, but rendered visually above it.
+         */
+        "meta"?: string;
+        /**
+          * Array of sources for responsive images. Sources have the properties of <source> element.
+         */
+        "sources"?: DuetSource[] | string;
+        /**
+          * Theme.
+          * @default ""
+         */
+        "theme"?: DuetTheme;
+        /**
+          * A destination to link to, rendered in the href attribute of a link. Makes the whole teaser act as a link and disables the links slot.
+         */
+        "url"?: string;
+    }
     interface DuetTextarea {
         /**
           * Indicates the id of a related component’s visually focused element.
@@ -14399,6 +14582,7 @@ declare namespace LocalJSX {
         "duet-tab": DuetTab;
         "duet-tab-group": DuetTabGroup;
         "duet-table": DuetTable;
+        "duet-teaser": DuetTeaser;
         "duet-textarea": DuetTextarea;
         "duet-toggle": DuetToggle;
         "duet-toolbar": DuetToolbar;
@@ -14511,6 +14695,7 @@ declare module "@stencil/core" {
             "duet-tab": LocalJSX.DuetTab & JSXBase.HTMLAttributes<HTMLDuetTabElement>;
             "duet-tab-group": LocalJSX.DuetTabGroup & JSXBase.HTMLAttributes<HTMLDuetTabGroupElement>;
             "duet-table": LocalJSX.DuetTable & JSXBase.HTMLAttributes<HTMLDuetTableElement>;
+            "duet-teaser": LocalJSX.DuetTeaser & JSXBase.HTMLAttributes<HTMLDuetTeaserElement>;
             "duet-textarea": LocalJSX.DuetTextarea & JSXBase.HTMLAttributes<HTMLDuetTextareaElement>;
             "duet-toggle": LocalJSX.DuetToggle & JSXBase.HTMLAttributes<HTMLDuetToggleElement>;
             "duet-toolbar": LocalJSX.DuetToolbar & JSXBase.HTMLAttributes<HTMLDuetToolbarElement>;

package/lib/types/utils/picture-utils.d.ts

@@ -7,9 +7,13 @@ export type DuetSource = {
 };
 export type DuetImg = {
     src: string;
+    class?: string;
     alt?: string;
     width?: string | number;
     height?: string | number;
+    role?: string;
+    loading?: "eager" | "lazy";
+    fetchpriority?: "high" | "low";
 };
 export type DuetPictureSource = {
     sources: DuetSource[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duetds/components",
-  "version": "10.6.0",
+  "version": "10.7.0",
   "description": "This package includes Duet Design System Web Components and related utilities.",
   "bugs": {
     "email": "duetdesignsystem@lahitapiola.fi"
@@ -67,9 +67,9 @@
     "body-scroll-lock": "3.1.5"
   },
   "devDependencies": {
-    "@duetds/fonts": "3.0.68",
-    "@duetds/icons": "4.3.10",
-    "@duetds/tokens": "5.1.3",
+    "@duetds/fonts": "3.0.69",
+    "@duetds/icons": "4.3.11",
+    "@duetds/tokens": "5.1.4",
     "@percy/cli": "1.30.1",
     "@rollup/plugin-replace": "5.0.2",
     "@stencil/core": "4.36.3",
@@ -97,5 +97,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "572d3c821f7c9a3d07ebba40c15cf13221523411"
+  "gitHead": "8d551fabdfe64b18b16ba0e247f6fbd99fc1f6aa"
 }