@inera/ids-react 7.1.1 → 8.0.0

package/components/dropdown/dropdown-content-button.d.ts

@@ -0,0 +1,7 @@
+import { ButtonHTMLAttributes, ReactNode } from "react";
+import "@inera/ids-design/components/dropdown/dropdown.css";
+export interface IDSDropdownContentButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "children"> {
+    icon?: string;
+    children: ReactNode;
+}
+export declare const IDSDropdownContentButton: import("react").ForwardRefExoticComponent<IDSDropdownContentButtonProps & import("react").RefAttributes<HTMLButtonElement>>;

package/components/dropdown/dropdown-content-button.js

@@ -0,0 +1,11 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import '@inera/ids-design/components/dropdown/dropdown.css';
+import clsx from 'clsx';
+
+const IDSDropdownContentButton = forwardRef(({ icon, children, className, ...props }, ref) => {
+    return (jsxs("button", { ...props, ref: ref, role: "menuitem", className: clsx("ids-dropdown-content__button", className), children: [icon && jsx("span", { className: `ids-icon-${icon} ids-dropdown--start-icon` }), children] }));
+});
+IDSDropdownContentButton.displayName = "IDSDropdownContentButton";
+
+export { IDSDropdownContentButton };

package/components/dropdown/dropdown-content-link.js

@@ -8,11 +8,12 @@ const IDSDropdownContentLink = ({ children, className, ...props }) => {
         console.error("IDSDropdownContentLink expects a single <a> element as its child.");
         return null;
     }
-    const childClassName = clsx("ids-dropdown-content-link", children.props.className, className);
+    const childClassName = clsx("ids-dropdown-content__link", children.props.className, className);
     const content = jsx(Fragment, { children: children.props.children });
     return cloneElement(children, {
         ...props,
         className: childClassName,
+        role: "menuitem",
         children: content
     });
 };

package/components/dropdown/dropdown.d.ts

@@ -2,14 +2,15 @@ import React, { ReactNode, ReactElement } from "react";
 import "@inera/ids-design/components/dropdown/dropdown.css";
 type Position = "left" | "right";
 interface IDSDropdownProps extends React.HTMLAttributes<HTMLSpanElement> {
+    button: ReactElement;
     expanded?: boolean;
+    mBlock?: boolean;
+    onClosed?: () => void;
+    onOpened?: () => void;
     persistent?: boolean;
     position?: Position;
     sBlock?: boolean;
-    mBlock?: boolean;
-    onOpened?: () => void;
-    onClosed?: () => void;
-    button: ReactElement;
+    maxHeight?: string;
     children: ReactNode;
 }
 export declare const IDSDropdown: React.FC<IDSDropdownProps>;

package/components/dropdown/dropdown.js

@@ -1,16 +1,15 @@
 "use client";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default, { useState, useRef, useEffect, isValidElement, cloneElement } from 'react';
+import React, { useState, useRef, useEffect, isValidElement, cloneElement } from 'react';
 import '@inera/ids-design/components/dropdown/dropdown.css';
 import { useElementId } from '../utils/hooks/useElementId.js';
 import clsx from 'clsx';
 
-const IDSDropdown = ({ expanded = false, persistent = false, position = "right", sBlock = false, mBlock = false, onOpened, onClosed, children, className, button, ...props }) => {
+const IDSDropdown = ({ expanded = false, persistent = false, position = "right", sBlock = false, mBlock = false, maxHeight = "", onOpened, onClosed, children, className, button, ...props }) => {
     const [isExpanded, setIsExpanded] = useState(expanded);
     const triggerRef = useRef(null);
     const contentRef = useRef(null);
     const buttonId = useElementId();
-    const contentId = useElementId();
     useEffect(() => {
         setIsExpanded(expanded);
     }, [expanded]);
@@ -45,25 +44,27 @@ const IDSDropdown = ({ expanded = false, persistent = false, position = "right",
                 id: buttonId,
                 ref: triggerRef,
                 onClick: handleToggle,
-                "aria-controls": contentId,
                 "aria-expanded": isExpanded,
+                "aria-haspopup": "menu",
                 className: clsx(button.props.className)
             });
         }
         return null;
     };
     const renderDropdownContent = () => {
-        const enhancedChildren = React__default.Children.map(children, (child, i) => {
-            if (!React__default.isValidElement(child))
+        const enhancedChildren = React.Children.map(children, (child, i) => {
+            if (!React.isValidElement(child))
                 return child;
             return cloneElement(child, {
                 key: `dropdown-content-link-${i}`
             });
         });
-        return (jsx("div", { id: contentId, ref: contentRef, "aria-labelledby": buttonId, className: clsx(`ids-dropdown__content ids-dropdown__content--position-${position}`, {
-                "ids-dropdown__content--mblock": mBlock,
-                "ids-dropdown__content--sblock": sBlock
-            }), ...props, children: enhancedChildren }));
+        return (jsx("div", { ref: contentRef, "aria-labelledby": buttonId, "aria-hidden": !isExpanded, role: "menu", className: clsx(`ids-dropdown-content ids-dropdown-content--position-${position}`, {
+                "ids-dropdown-content--show": isExpanded,
+                "ids-dropdown-content--mblock": mBlock,
+                "ids-dropdown-content--sblock": sBlock,
+                "ids-dropdown-content--scrollable": !!maxHeight
+            }), ...props, children: jsx("div", { className: "ids-dropdown-content__scroll-area", role: "menu", style: { maxHeight: maxHeight || "auto" }, tabIndex: !!maxHeight ? 0 : -1, children: enhancedChildren }) }));
     };
     return (jsxs("span", { className: clsx(`ids-dropdown`, className, {
             "ids-dropdown--mblock": mBlock,

package/components/footer-1177/footer-1177.d.ts

@@ -9,9 +9,6 @@ interface Footer1177Props extends React.HTMLAttributes<HTMLDivElement> {
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
-    col1Size?: string;
-    col2Size?: string;
-    col3Size?: string;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;

package/components/footer-1177/footer-1177.js

@@ -1,29 +1,23 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177/footer-1177.css';
 
-const IDSFooter1177 = ({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Size = "2", col2Size = "2", col3Size = "2", subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+const IDSFooter1177 = ({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
     const ref = useRef(null);
-    useEffect(() => {
-    }, [cols, col1Size, col2Size, col3Size]);
-    const getColumnWidth = (col) => {
-        const map = { 1: col1Size, 2: col2Size, 3: col3Size };
-        return `ids-footer-1177__col-size-${map[col]}`;
-    };
     const renderHeadline = () => {
         if (srHeadline) {
-            return (jsxs(Fragment, { children: [jsxs("h1", { className: "ids-footer-1177__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }), jsxs("h1", { "aria-hidden": "true", className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] })] }));
+            return (jsxs(Fragment, { children: [jsxs("h2", { className: "ids-footer-1177__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }), jsxs("h2", { "aria-hidden": "true", className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] })] }));
         }
-        return (jsxs("h1", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
+        return (jsxs("h2", { className: "ids-footer-1177__headline", children: [headline, jsx("span", { className: "ids-footer-1177__headline--sub", children: subHeadline })] }));
     };
     const renderCol = (column) => {
         return column?.map((link, idx) => {
-            if (React__default.isValidElement(link)) {
-                return React__default.cloneElement(link, {
+            if (React.isValidElement(link)) {
+                return React.cloneElement(link, {
                     key: `footer-link-${idx}`,
-                    colorPreset: 2,
+                    footer: true,
                     block: true
                 });
             }
@@ -32,27 +26,27 @@ const IDSFooter1177 = ({ headline = "", srHeadline = "", subHeadline = "", cols
     };
     const renderCols = () => {
         if (cols === 1) {
-            return (jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--1", getColumnWidth(1)), children: renderCol(col1) }));
+            return jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--100"), children: renderCol(col1) });
         }
         else if (cols === 2) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--2", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--2", getColumnWidth(2)), children: renderCol(col2) })] }));
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--50"), children: renderCol(col2) })] }));
         }
-        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", getColumnWidth(2)), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-1177__link-col", getColumnWidth(3)), children: renderCol(col3) })] }));
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-1177__link-col", "ids-footer-1177__link-col--33"), children: renderCol(col3) })] }));
     };
-    const renderCookieLinks = (content) => {
+    const renderLinks = (content) => {
         const applyProps = (node, keyPrefix = "") => {
             if (!node)
                 return null;
             if (Array.isArray(node)) {
                 return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
             }
-            if (React__default.isValidElement(node)) {
-                if (node.type === React__default.Fragment) {
-                    return (jsx(React__default.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
+            if (React.isValidElement(node)) {
+                if (node.type === React.Fragment) {
+                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
                 }
-                return React__default.cloneElement(node, {
+                return React.cloneElement(node, {
                     key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset: 4,
+                    colorPreset: 3,
                     small: true,
                     ...node.props
                 });
@@ -61,7 +55,7 @@ const IDSFooter1177 = ({ headline = "", srHeadline = "", subHeadline = "", cols
         };
         return applyProps(content, "root");
     };
-    return (jsxs("footer", { className: clsx("ids-footer-1177", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-row", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177__content", children: [jsx("div", { className: "ids-footer-1177__text", children: children }), renderCols()] })] }) }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-row", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: renderCookieLinks(subFooterRight) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsx("div", { className: "ids-footer-1177__mobile-links", children: renderCookieLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-1177", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-1177__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177__inner", children: [jsx("div", { className: "ids-footer-1177__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177__content", children: [jsx("div", { className: "ids-footer-1177__text", children: children }), jsx("div", { className: "ids-footer-1177__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177__sub-footer", children: [jsx("div", { className: "ids-footer-1177__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177__sub-footer-left", children: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-1177__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177__mobile-links", children: renderLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-1177__sub-footer-mobile", children: jsx("div", { className: "ids-footer-1177__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
 };
 
 export { IDSFooter1177 };

package/components/footer-1177-admin/footer-1177-admin.d.ts

@@ -1,21 +1,19 @@
 import React, { ReactElement, ReactNode } from "react";
 import "@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSFooter1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
-    serviceName?: string;
+interface Footer1177AdminProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
     cols?: 1 | 2 | 3;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
-    col1Size?: string;
-    col2Size?: string;
-    col3Size?: string;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
-    subFooterMobile?: ReactNode;
     mobileMenu?: ReactNode;
     mobileLinks?: ReactNode;
+    subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooter1177Admin: React.FC<IDSFooter1177AdminProps>;
+export declare const IDSFooter1177Admin: React.FC<Footer1177AdminProps>;
 export {};

package/components/footer-1177-admin/footer-1177-admin.js

@@ -1,27 +1,23 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default, { useRef, useEffect } from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177-admin/footer-1177-admin.css';
 
-const IDSFooter1177Admin = ({ serviceName = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Size = "2", col2Size = "2", col3Size = "2", subFooterLeft, subFooterRight, subFooterMobile, mobileMenu, mobileLinks, children, className, ...props }) => {
+const IDSFooter1177Admin = ({ headline = "", srHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
     const ref = useRef(null);
-    useEffect(() => {
-    }, [cols, col1Size, col2Size, col3Size]);
-    const getColumnWidth = (col) => {
-        const map = { 1: col1Size, 2: col2Size, 3: col3Size };
-        if (cols === 1)
-            return "ids-footer-1177-admin__col-size-6";
-        if (cols === 2)
-            return "ids-footer-1177-admin__col-size-3";
-        return `ids-footer-1177-admin__col-size-${map[col]}`;
+    const renderHeadline = () => {
+        if (srHeadline) {
+            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-1177-admin__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-1177-admin__headline", children: headline })] }));
+        }
+        return jsx("h2", { className: "ids-footer-1177-admin__headline", children: headline });
     };
     const renderCol = (column) => {
         return column?.map((link, idx) => {
-            if (React__default.isValidElement(link)) {
-                return React__default.cloneElement(link, {
+            if (React.isValidElement(link)) {
+                return React.cloneElement(link, {
                     key: `footer-link-${idx}`,
-                    colorPreset: 1,
+                    footer: true,
                     block: true
                 });
             }
@@ -30,28 +26,27 @@ const IDSFooter1177Admin = ({ serviceName = "", cols = 3, col1 = [], col2 = [],
     };
     const renderCols = () => {
         if (cols === 1) {
-            return (jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--1", getColumnWidth(1)), children: renderCol(col1) }));
+            return (jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--100"), children: renderCol(col1) }));
         }
-        if (cols === 2) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--2", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--2", getColumnWidth(2)), children: renderCol(col2) })] }));
+        else if (cols === 2) {
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--50"), children: renderCol(col2) })] }));
         }
-        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", getColumnWidth(2)), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", getColumnWidth(3)), children: renderCol(col3) })] }));
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-1177-admin__link-col", "ids-footer-1177-admin__link-col--33"), children: renderCol(col3) })] }));
     };
-    const renderLogo = () => (jsxs(Fragment, { children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-icon", children: jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-service-name", children: serviceName }) }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-text", children: subFooterMobile })] }));
-    const renderCookieLinks = (content, colorPreset) => {
+    const renderLinks = (content) => {
         const applyProps = (node, keyPrefix = "") => {
             if (!node)
                 return null;
             if (Array.isArray(node)) {
                 return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
             }
-            if (React__default.isValidElement(node)) {
-                if (node.type === React__default.Fragment) {
-                    return (jsx(React__default.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
+            if (React.isValidElement(node)) {
+                if (node.type === React.Fragment) {
+                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
                 }
-                return React__default.cloneElement(node, {
+                return React.cloneElement(node, {
                     key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset,
+                    colorPreset: 3,
                     small: true,
                     ...node.props
                 });
@@ -60,7 +55,7 @@ const IDSFooter1177Admin = ({ serviceName = "", cols = 3, col1 = [], col2 = [],
         };
         return applyProps(content, "root");
     };
-    return (jsxs("footer", { className: clsx("ids-footer-1177-admin", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-1177-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-admin__inner", children: [jsx("div", { className: "ids-footer-1177-admin__headline-row", children: jsx("h1", { className: "ids-footer-1177-admin__headline", children: serviceName }) }), jsxs("div", { className: "ids-footer-1177-admin__content", children: [jsx("div", { className: "ids-footer-1177-admin__text", children: children }), renderCols()] })] }) }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-admin__sub-footer-row", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-right", children: renderCookieLinks(subFooterRight, 4) }), jsx("div", { className: "ids-footer-1177-admin__mobile-menu", children: mobileMenu }), jsx("div", { className: "ids-footer-1177-admin__mobile-links", children: renderCookieLinks(mobileLinks, 1) })] }) }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile", children: renderLogo() })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-1177-admin", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-1177-admin__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-admin__inner", children: [jsx("div", { className: "ids-footer-1177-admin__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177-admin__content", children: [jsx("div", { className: "ids-footer-1177-admin__text", children: children }), jsx("div", { className: "ids-footer-1177-admin__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177-admin__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-admin__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-left", children: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-admin__mobile-links", children: renderLinks(mobileLinks) })] }) }), jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-1177-admin__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
 };
 
 export { IDSFooter1177Admin };

package/components/footer-1177-pro/footer-1177-pro.d.ts

@@ -1,17 +1,22 @@
 import React, { ReactElement, ReactNode } from "react";
 import "@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSFooter1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
+interface Footer1177ProProps extends React.HTMLAttributes<HTMLDivElement> {
+    headline?: string;
+    srHeadline?: string;
     cols?: 1 | 2 | 3;
-    desktopCol1Headline?: ReactNode;
-    desktopCol2Headline?: ReactNode;
-    desktopCol3Headline?: ReactNode;
-    desktopCol1?: ReactElement<IDSLinkProps>[];
-    desktopCol2?: ReactElement<IDSLinkProps>[];
-    desktopCol3?: ReactElement<IDSLinkProps>[];
+    col1Headline?: ReactNode;
+    col2Headline?: ReactNode;
+    col3Headline?: ReactNode;
+    col1?: ReactElement<IDSLinkProps>[];
+    col2?: ReactElement<IDSLinkProps>[];
+    col3?: ReactElement<IDSLinkProps>[];
+    subFooterLeft?: ReactNode;
+    subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;
-    bottomFooterHeadline?: string;
-    bottomFooterText?: ReactNode;
+    mobileLinks?: ReactNode;
+    subFooterMobile?: ReactNode;
+    children?: ReactNode;
 }
-export declare const IDSFooter1177Pro: React.FC<IDSFooter1177ProProps>;
+export declare const IDSFooter1177Pro: React.FC<Footer1177ProProps>;
 export {};

package/components/footer-1177-pro/footer-1177-pro.js

@@ -1,16 +1,23 @@
 "use client";
-import { jsxs, jsx } from 'react/jsx-runtime';
-import React__default from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-1177-pro/footer-1177-pro.css';
 
-const IDSFooter1177Pro = ({ cols = 3, desktopCol1Headline = "", desktopCol2Headline = "", desktopCol3Headline = "", desktopCol1 = [], desktopCol2 = [], desktopCol3 = [], mobileMenu, bottomFooterHeadline = "", bottomFooterText, className, ...props }) => {
+const IDSFooter1177Pro = ({ headline = "", srHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Headline, col2Headline, col3Headline, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+    const ref = useRef(null);
+    const renderHeadline = () => {
+        if (srHeadline) {
+            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-1177-pro__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-1177-pro__headline", children: headline })] }));
+        }
+        return jsx("h2", { className: "ids-footer-1177-pro__headline", children: headline });
+    };
     const renderCol = (column) => {
         return column?.map((link, idx) => {
-            if (React__default.isValidElement(link)) {
-                return React__default.cloneElement(link, {
+            if (React.isValidElement(link)) {
+                return React.cloneElement(link, {
                     key: `footer-link-${idx}`,
-                    colorPreset: 1,
+                    footer: true,
                     block: true
                 });
             }
@@ -18,25 +25,37 @@ const IDSFooter1177Pro = ({ cols = 3, desktopCol1Headline = "", desktopCol2Headl
         });
     };
     const renderCols = () => {
-        const colClasses = {
-            1: "ids-footer-1177-pro__desktop-col--1",
-            2: "ids-footer-1177-pro__desktop-col--2",
-            3: "ids-footer-1177-pro__desktop-col--3"
-        };
-        const baseClass = "ids-footer-1177-pro__desktop-col";
-        const columns = [];
-        if (cols >= 1) {
-            columns.push(jsxs("div", { className: clsx(baseClass, colClasses[cols]), children: [jsx("div", { className: "ids-footer-1177-pro__footer-headline", children: jsx("h2", { children: desktopCol1Headline }) }), renderCol(desktopCol1)] }, "col1"));
+        if (cols === 1) {
+            return (jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--100"), children: [col1Headline, renderCol(col1)] }));
         }
-        if (cols >= 2) {
-            columns.push(jsxs("div", { className: clsx(baseClass, colClasses[cols]), children: [jsx("div", { className: "ids-footer-1177-pro__footer-headline", children: jsx("h2", { children: desktopCol2Headline }) }), renderCol(desktopCol2)] }, "col2"));
+        else if (cols === 2) {
+            return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col1Headline, renderCol(col1)] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--50"), children: [col2Headline, renderCol(col2)] })] }));
         }
-        if (cols === 3) {
-            columns.push(jsxs("div", { className: clsx(baseClass, colClasses[cols]), children: [jsx("div", { className: "ids-footer-1177-pro__footer-headline", children: jsx("h2", { children: desktopCol3Headline }) }), renderCol(desktopCol3)] }, "col3"));
-        }
-        return columns;
+        return (jsxs(Fragment, { children: [jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col1Headline, renderCol(col1)] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [col2Headline, renderCol(col2)] }), jsxs("div", { className: clsx("ids-footer-1177-pro__link-col", "ids-footer-1177-pro__link-col--33"), children: [" ", col3Headline, renderCol(col3)] })] }));
+    };
+    const renderLinks = (content) => {
+        const applyProps = (node, keyPrefix = "") => {
+            if (!node)
+                return null;
+            if (Array.isArray(node)) {
+                return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
+            }
+            if (React.isValidElement(node)) {
+                if (node.type === React.Fragment) {
+                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
+                }
+                return React.cloneElement(node, {
+                    key: `footer-sub-footer-right-link-${keyPrefix}`,
+                    colorPreset: 3,
+                    small: true,
+                    ...node.props
+                });
+            }
+            return node;
+        };
+        return applyProps(content, "root");
     };
-    return (jsxs("footer", { className: clsx("ids-footer-1177-pro", className), ...props, children: [jsxs("div", { className: "ids-footer-1177-pro__top-footer", children: [jsx("div", { className: "ids-footer-1177-pro__desktop-content", children: renderCols() }), jsx("div", { className: "ids-footer-1177-pro__mobile-content", children: mobileMenu })] }), jsx("div", { className: "ids-footer-1177-pro__bottom-footer", children: jsxs("div", { className: "ids-footer-1177-pro__bottom-footer-inner", children: [jsx("div", { className: "ids-footer-1177-pro__bottom-footer-logo" }), jsx("div", { className: "ids-footer-1177-pro__bottom-footer-headline", children: jsx("h2", { children: bottomFooterHeadline }) }), jsx("div", { className: "ids-footer-1177-pro__bottom-footer-text", children: bottomFooterText })] }) })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-1177-pro", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-1177-pro__inner-wrapper", children: jsxs("div", { className: "ids-footer-1177-pro__inner", children: [jsx("div", { className: "ids-footer-1177-pro__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-1177-pro__content", children: [jsx("div", { className: "ids-footer-1177-pro__text", children: children }), jsx("div", { className: "ids-footer-1177-pro__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-1177-pro__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-1177-pro__sub-footer", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-container", children: jsxs("div", { className: "ids-footer-1177-pro__sub-footer-inner", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-left", children: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-1177-pro__mobile-links", children: renderLinks(mobileLinks) })] }) }), jsxs("div", { className: "ids-footer-1177-pro__sub-footer-mobile", children: [jsxs("div", { className: "ids-footer-1177-pro__sub-footer-mobile-headline-wrapper", children: [jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-logo" }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-headline", children: headline })] }), jsx("div", { className: "ids-footer-1177-pro__sub-footer-mobile-text", children: subFooterMobile })] })] })] }));
 };
 
 export { IDSFooter1177Pro };

package/components/footer-inera/footer-inera.d.ts

@@ -1,17 +1,13 @@
 import React, { ReactElement, ReactNode } from "react";
 import "@inera/ids-design/components/footer-inera/footer-inera.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSFooterIneraProps extends React.HTMLAttributes<HTMLDivElement> {
+interface FooterIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;
-    subHeadline?: string;
     cols?: 1 | 2 | 3;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
-    col1Size?: string;
-    col2Size?: string;
-    col3Size?: string;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;
@@ -19,5 +15,5 @@ interface IDSFooterIneraProps extends React.HTMLAttributes<HTMLDivElement> {
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooterInera: React.FC<IDSFooterIneraProps>;
+export declare const IDSFooterInera: React.FC<FooterIneraProps>;
 export {};

package/components/footer-inera/footer-inera.js

@@ -1,29 +1,23 @@
 "use client";
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import React__default from 'react';
+import React, { useRef } from 'react';
 import clsx from 'clsx';
 import '@inera/ids-design/components/footer-inera/footer-inera.css';
 
-const IDSFooterInera = ({ headline = "", srHeadline = "", subHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], col1Size, col2Size, col3Size, subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
-    const defaultCols = {
-        1: { col1Size: "6", col2Size: "6", col3Size: "6" },
-        2: { col1Size: "3", col2Size: "3", col3Size: "3" },
-        3: { col1Size: "2", col2Size: "2", col3Size: "2" }
-    };
-    const resolvedCol1 = col1Size ?? defaultCols[cols].col1Size;
-    const resolvedCol2 = col2Size ?? defaultCols[cols].col2Size;
-    const resolvedCol3 = col3Size ?? defaultCols[cols].col3Size;
-    const getColumnWidth = (col) => {
-        const val = col === 1 ? resolvedCol1 : col === 2 ? resolvedCol2 : resolvedCol3;
-        return `ids-footer-inera__col-size-${val}`;
+const IDSFooterInera = ({ headline = "", srHeadline = "", cols = 3, col1 = [], col2 = [], col3 = [], subFooterLeft, subFooterRight, mobileMenu, mobileLinks, subFooterMobile, children, className, ...props }) => {
+    const ref = useRef(null);
+    const renderHeadline = () => {
+        if (srHeadline) {
+            return (jsxs(Fragment, { children: [jsx("h2", { className: "ids-footer-inera__headline--sr", children: srHeadline }), jsx("h2", { "aria-hidden": "true", className: "ids-footer-inera__headline", children: headline })] }));
+        }
+        return jsx("h2", { className: "ids-footer-inera__headline", children: headline });
     };
-    const renderHeadlineElements = () => srHeadline ? (jsxs(Fragment, { children: [jsxs("h1", { className: "ids-footer-inera__headline--sr", children: [srHeadline, jsx("span", { className: "ids-footer-inera__headline--sub", children: subHeadline })] }), jsxs("h1", { "aria-hidden": "true", className: "ids-footer-inera__headline", children: [headline, jsx("span", { className: "ids-footer-inera__headline--sub", children: subHeadline })] })] })) : (jsxs("h1", { className: "ids-footer-inera__headline", children: [headline, jsx("span", { className: "ids-footer-inera__headline--sub", children: subHeadline })] }));
     const renderCol = (column) => {
         return column?.map((link, idx) => {
-            if (React__default.isValidElement(link)) {
-                return React__default.cloneElement(link, {
+            if (React.isValidElement(link)) {
+                return React.cloneElement(link, {
                     key: `footer-link-${idx}`,
-                    light: true,
+                    footer: true,
                     block: true
                 });
             }
@@ -32,27 +26,27 @@ const IDSFooterInera = ({ headline = "", srHeadline = "", subHeadline = "", cols
     };
     const renderCols = () => {
         if (cols === 1) {
-            return (jsx("div", { className: clsx("ids-footer-inera__link-col ids-footer-inera__link-col--1", getColumnWidth(1)), children: renderCol(col1) }));
+            return jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--100"), children: renderCol(col1) });
         }
         else if (cols === 2) {
-            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col ids-footer-inera__link-col--1", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera__link-col ids-footer-inera__link-col--2", getColumnWidth(2)), children: renderCol(col2) })] }));
+            return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--50"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--50"), children: renderCol(col2) })] }));
         }
-        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col", getColumnWidth(1)), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera__link-col", getColumnWidth(2)), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-inera__link-col", getColumnWidth(3)), children: renderCol(col3) })] }));
+        return (jsxs(Fragment, { children: [jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: renderCol(col1) }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: renderCol(col2) }), jsx("div", { className: clsx("ids-footer-inera__link-col", "ids-footer-inera__link-col--33"), children: renderCol(col3) })] }));
     };
-    const renderCookieLinks = (content) => {
+    const renderLinks = (content) => {
         const applyProps = (node, keyPrefix = "") => {
             if (!node)
                 return null;
             if (Array.isArray(node)) {
                 return node.map((child, idx) => applyProps(child, `${keyPrefix}-${idx}`));
             }
-            if (React__default.isValidElement(node)) {
-                if (node.type === React__default.Fragment) {
-                    return (jsx(React__default.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
+            if (React.isValidElement(node)) {
+                if (node.type === React.Fragment) {
+                    return (jsx(React.Fragment, { children: applyProps(node.props.children, keyPrefix) }, keyPrefix));
                 }
-                return React__default.cloneElement(node, {
+                return React.cloneElement(node, {
                     key: `footer-sub-footer-right-link-${keyPrefix}`,
-                    colorPreset: 4,
+                    colorPreset: 3,
                     small: true,
                     ...node.props
                 });
@@ -61,7 +55,7 @@ const IDSFooterInera = ({ headline = "", srHeadline = "", subHeadline = "", cols
         };
         return applyProps(content, "root");
     };
-    return (jsxs("footer", { className: clsx("ids-footer-inera", className), ...props, children: [jsx("div", { className: "ids-footer-inera__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera__inner", children: [jsx("div", { className: "ids-footer-inera__headline-row", children: renderHeadlineElements() }), jsxs("div", { className: "ids-footer-inera__content", children: [jsx("div", { className: "ids-footer-inera__text", children: children }), renderCols()] })] }) }), jsxs("div", { className: "ids-footer-inera__sub-footer", children: [jsx("div", { className: "ids-footer-inera__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera__sub-footer-row", children: [jsx("div", { className: "ids-footer-inera__sub-footer-left", children: subFooterLeft }), jsx("div", { className: "ids-footer-inera__sub-footer-right", children: renderCookieLinks(subFooterRight) }), jsx("div", { className: "ids-footer-inera__mobile-menu", children: mobileMenu }), jsx("div", { className: "ids-footer-inera__mobile-links", children: renderCookieLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-inera__sub-footer-mobile", children: subFooterMobile })] })] }));
+    return (jsxs("footer", { className: clsx("ids-footer-inera", className), ref: ref, ...props, children: [jsx("div", { className: "ids-footer-inera__inner-wrapper", children: jsxs("div", { className: "ids-footer-inera__inner", children: [jsx("div", { className: "ids-footer-inera__headline-wrapper", children: renderHeadline() }), jsxs("div", { className: "ids-footer-inera__content", children: [jsx("div", { className: "ids-footer-inera__text", children: children }), jsx("div", { className: "ids-footer-inera__cols", children: renderCols() })] })] }) }), jsx("div", { className: "ids-footer-inera__mobile-menu", children: mobileMenu }), jsxs("div", { className: "ids-footer-inera__sub-footer", children: [jsx("div", { className: "ids-footer-inera__sub-footer-container", children: jsxs("div", { className: "ids-footer-inera__sub-footer-inner", children: [jsx("div", { className: "ids-footer-inera__sub-footer-left", children: renderLinks(subFooterLeft) }), jsx("div", { className: "ids-footer-inera__sub-footer-right", children: subFooterRight }), jsx("div", { className: "ids-footer-inera__mobile-links", children: renderLinks(mobileLinks) })] }) }), jsx("div", { className: "ids-footer-inera__sub-footer-mobile", children: jsx("div", { className: "ids-footer-inera__sub-footer-mobile-text", children: subFooterMobile }) })] })] }));
 };
 
 export { IDSFooterInera };

package/components/footer-inera-admin/footer-inera-admin.d.ts

@@ -1,17 +1,13 @@
 import React, { ReactElement, ReactNode } from "react";
 import "@inera/ids-design/components/footer-inera-admin/footer-inera-admin.css";
 import { IDSLinkProps } from "../link/link";
-interface IDSFooterIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
+interface FooterIneraAdminProps extends React.HTMLAttributes<HTMLDivElement> {
     headline?: string;
     srHeadline?: string;
-    subHeadline?: string;
     cols?: 1 | 2 | 3;
     col1?: ReactElement<IDSLinkProps>[];
     col2?: ReactElement<IDSLinkProps>[];
     col3?: ReactElement<IDSLinkProps>[];
-    col1Size?: string;
-    col2Size?: string;
-    col3Size?: string;
     subFooterLeft?: ReactNode;
     subFooterRight?: ReactNode;
     mobileMenu?: ReactNode;
@@ -19,5 +15,5 @@ interface IDSFooterIneraAdminProps extends React.HTMLAttributes<HTMLDivElement>
     subFooterMobile?: ReactNode;
     children?: ReactNode;
 }
-export declare const IDSFooterIneraAdmin: React.FC<IDSFooterIneraAdminProps>;
+export declare const IDSFooterIneraAdmin: React.FC<FooterIneraAdminProps>;
 export {};