@vodafone_de/brix-components 8.0.1 → 8.1.0

package/dist/components/DiscoveryCard/index.js

@@ -6,7 +6,7 @@ import Body, { isBodyProps, bodyAlignLeft, bodyAlignCenter } from "../Body/index
 import Heading, { isHeadingProps } from "../Heading/index.js";
 import Link, { isLinkProps } from "../Link/index.js";
 import { k as isPriceProps, b as priceSizeSm, P as Price, f as priceAlignLeft, g as priceAlignCenter, a as priceOrientationVertical } from "../../index-Drem899y.js";
-import { R as RichText } from "../../index-CHlQcF_n.js";
+import { R as RichText } from "../../index-CFj4lfgX.js";
 import { f as fontWeightBold } from "../../FontWeight-DEBGHbtO.js";
 import { b as textHeadingSm } from "../../HeadingSize-CfCRn3Lh.js";
 import { s as smallSize } from "../../SizeTypes-Ck_RdzIf.js";

package/dist/components/DiscoveryCardGroup/index.js

@@ -20,7 +20,7 @@ import "../../hooks/useLinkComponent/index.js";
 import "../../index-Drem899y.js";
 import "../InlineLink/index.js";
 import "../../TableWrapper-Do9KCTGV.js";
-import "../../index-CHlQcF_n.js";
+import "../../index-CFj4lfgX.js";
 import "../Image/index.js";
 const DiscoveryCardGroupGridStyled = styled(Grid).withConfig({
   displayName: "DiscoveryCardGroupGridStyled",

package/dist/components/Form/index.js

@@ -1,5 +1,10 @@
 "use client";
-import { jsx } from "react/jsx-runtime";
+import { jsxs, jsx } from "react/jsx-runtime";
+import Body from "../Body/index.js";
+import ButtonGroup from "../ButtonGroup/index.js";
+import Heading from "../Heading/index.js";
+import IconSnippet from "../IconSnippet/index.js";
+import { R as RichText } from "../../index-CFj4lfgX.js";
 import { c as spacingNone } from "../../Spacing-8v6hcO2x.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
@@ -13,8 +18,19 @@ const Form = ({
   children,
   noValidate = true,
   bottomSpacing = spacingNone,
+  heading,
+  subline,
+  buttons,
+  uid,
   ...props
-}) => /* @__PURE__ */ jsx(FormStyled, { ...props, noValidate, bottomSpacing, children });
+}) => /* @__PURE__ */ jsxs(FormStyled, { ...props, noValidate, bottomSpacing, "aria-labelledby": heading && subline ? `${uid}-heading ${uid}-subline` : heading ? `${uid}-heading` : props["aria-labelledby"], children: [
+  heading && /* @__PURE__ */ jsx(Heading, { ...heading, id: `${uid}-heading` }),
+  subline && subline.component === "Body" && /* @__PURE__ */ jsx(Body, { ...subline, id: `${uid}-subline` }),
+  subline && subline.component === "RichText" && /* @__PURE__ */ jsx(RichText, { ...subline, id: `${uid}-subline` }),
+  subline && subline.component === "IconSnippet" && /* @__PURE__ */ jsx(IconSnippet, { ...subline, id: `${uid}-subline` }),
+  children,
+  buttons && /* @__PURE__ */ jsx(ButtonGroup, { ...buttons })
+] });
 export {
   Form as default
 };

package/dist/components/Form/props.d.ts

@@ -1,4 +1,9 @@
 import { FormHTMLAttributes } from 'react';
+import { BodyProps } from '../Body';
+import { ButtonGroupProps } from '../ButtonGroup';
+import { HeadingProps } from '../Heading';
+import { IconSnippetProps } from '../IconSnippet';
+import { RichTextProps } from '../RichText';
 import { PatternProps } from '../../foundations/PatternProps';
 export interface FormProps extends PatternProps, FormHTMLAttributes<HTMLFormElement> {
     /**
@@ -8,6 +13,18 @@ export interface FormProps extends PatternProps, FormHTMLAttributes<HTMLFormElem
      * default will be true in pattern
      */
     noValidate?: boolean;
+    /**
+     * Heading that will be rendered at the top of the Form and automatically label the Form via aria-labelledby
+     */
+    heading?: HeadingProps;
+    /**
+     * Body or RichText that will be rendered at the top of the Form beneath the Heading and automatically label the Form via aria-labelledby
+     */
+    subline?: BodyProps | RichTextProps | IconSnippetProps;
+    /**
+     * ButtonGroup that will be rendered at the bottom of the Form
+     */
+    buttons?: ButtonGroupProps;
     /**
      * Pin component's name from string to the concrete name
      */

package/dist/components/IconSnippet/index.js

@@ -4,7 +4,7 @@ import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import InlineLink from "../InlineLink/index.js";
 import Link from "../Link/index.js";
-import { R as RichText } from "../../index-CHlQcF_n.js";
+import { R as RichText } from "../../index-CFj4lfgX.js";
 import { d as divTagName, c as spanTagName } from "../../tags-D7CRQqc1.js";
 import { a as iconSizeLg, f as iconSize3xl, i as iconSizeSm } from "../../IconSize-AJp7xdJi.js";
 import { b as spacingSm, s as spacingMd, c as spacingNone, a as spacingXs } from "../../Spacing-8v6hcO2x.js";
@@ -117,7 +117,7 @@ const getContents = (contents) => {
     if ("InlineLink" === content.component) {
       return /* @__PURE__ */ jsx(Body, { bottomSpacing: spacingXs, children: /* @__PURE__ */ jsx(InlineLink, { ...content, children: content.children }) }, content.uid);
     }
-    if ("Link" === content.component) {
+    if ("Link" === content.component || "LinkAsButton" === content.component) {
       return /* @__PURE__ */ jsx(Link, { ...content, children: content.children }, content.uid);
     }
     return null;

package/dist/components/ImageHeader/index.js

@@ -5,7 +5,7 @@ import Button from "../Button/index.js";
 import Container from "../Container/index.js";
 import Heading, { headingAlignCenter } from "../Heading/index.js";
 import { P as Price, b as priceSizeSm } from "../../index-Drem899y.js";
-import { R as RichText } from "../../index-CHlQcF_n.js";
+import { R as RichText } from "../../index-CFj4lfgX.js";
 import { b as fontWeightLight } from "../../FontWeight-DEBGHbtO.js";
 import { m as mediumSize } from "../../SizeTypes-Ck_RdzIf.js";
 import { s as spacingMd, b as spacingSm, e as spacingXl, a as spacingXs, f as spacing2Xs, c as spacingNone } from "../../Spacing-8v6hcO2x.js";

package/dist/components/InfoBanner/index.js

@@ -2,7 +2,7 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import Button from "../Button/index.js";
 import FlexItem from "../FlexItem/index.js";
-import Heading from "../Heading/index.js";
+import Heading, { headingAlignLeft } from "../Heading/index.js";
 import Icon from "../Icon/index.js";
 import { a as fontWeightRegular } from "../../FontWeight-DEBGHbtO.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
@@ -81,7 +81,7 @@ const InfoBanner = ({
       icon && /* @__PURE__ */ jsx(FlexItem, { children: /* @__PURE__ */ jsx(Icon, { name: icon, size: iconSizeLg, "aria-hidden": true }) }),
       /* @__PURE__ */ jsx(FlexItem, { grow: "full", children: /* @__PURE__ */ jsx(Heading, { ...heading, id: headingId, size: textHeadingXs, weight: fontWeightRegular, style: {
         color: "inherit"
-      }, bottomSpacing: spacingNone }) })
+      }, align: headingAlignLeft, bottomSpacing: spacingNone }) })
     ] }),
     button && /* @__PURE__ */ jsx(Button, { ...button, bottomSpacing: spacingNone, "aria-describedby": headingId })
   ] });

package/dist/components/InfoBanner/props.d.ts

@@ -24,7 +24,7 @@ export interface InfoBannerProps extends PatternProps, HTMLAttributes<HTMLDivEle
     /**
      * Heading
      */
-    heading: Omit<HeadingProps, 'size' | 'weight' | 'bottomSpacing'>;
+    heading: Omit<HeadingProps, 'size' | 'weight' | 'bottomSpacing' | 'align'>;
     /**
      * Button
      */

package/dist/components/Legend/index.js

@@ -3,7 +3,7 @@ import { jsx, Fragment } from "react/jsx-runtime";
 import Body from "../Body/index.js";
 import Heading from "../Heading/index.js";
 import IconSnippet, { iconSnippetAlignCenter } from "../IconSnippet/index.js";
-import { R as RichText } from "../../index-CHlQcF_n.js";
+import { R as RichText } from "../../index-CFj4lfgX.js";
 import styled from "styled-components";
 const LegendStyled = styled.legend.withConfig({
   displayName: "LegendStyled",

package/dist/components/MediaText/index.js

@@ -6,7 +6,7 @@ import "../FlexItem/index.js";
 import "../Heading/index.js";
 import "../Image/index.js";
 import "../Link/index.js";
-import "../../index-CHlQcF_n.js";
+import "../../index-CFj4lfgX.js";
 import "../RichtTextContentful/index.js";
 import "../YoutubeVideo/index.js";
 import "../../tags-D7CRQqc1.js";
@@ -14,7 +14,7 @@ import "../../FontWeight-DEBGHbtO.js";
 import "../../HeadingSize-CfCRn3Lh.js";
 import "../../Spacing-8v6hcO2x.js";
 import "../../hooks/useViewport/index.js";
-import { M, i, a, b, m, c, v } from "../../index-vziwfNHJ.js";
+import { M, i, a, b, m, c, v } from "../../index-X3REY6f1.js";
 import "../../styled-BV6KxOQh.js";
 import "../../validate-DYmFz2FF.js";
 export {

package/dist/components/Notification/index.js

@@ -7,7 +7,7 @@ import Flex from "../Flex/index.js";
 import Heading from "../Heading/index.js";
 import { I as IconLoader } from "../../index--RjkzZm0.js";
 import Link from "../Link/index.js";
-import { R as RichText } from "../../index-CHlQcF_n.js";
+import { R as RichText } from "../../index-CFj4lfgX.js";
 import { i as iconSizeSm } from "../../IconSize-AJp7xdJi.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getObjectColor } from "../../foundations/token/getObjectColor/index.js";

package/dist/components/OpenTextFootnoteAdapter/index.js

@@ -5,7 +5,7 @@ import AccordionGroup from "../AccordionGroup/index.js";
 import Container from "../Container/index.js";
 import FootnoteContent from "../FootnoteContent/index.js";
 import Heading from "../Heading/index.js";
-import { R as RichText } from "../../index-CHlQcF_n.js";
+import { R as RichText } from "../../index-CFj4lfgX.js";
 import { b as textHeadingSm, c as textHeadingLg } from "../../HeadingSize-CfCRn3Lh.js";
 import { h as h3TagName } from "../../tags-D7CRQqc1.js";
 const getFootnoteContent = (content, footnoteContentBacklinkText) => {

package/dist/components/RichText/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
 import "react";
-import { R } from "../../index-CHlQcF_n.js";
+import { R } from "../../index-CFj4lfgX.js";
 export {
   R as default
 };

package/dist/components/RichtTextContentful/index.js

@@ -5,7 +5,7 @@ import Body from "../Body/index.js";
 import Divider from "../Divider/index.js";
 import Heading from "../Heading/index.js";
 import InlineLink from "../InlineLink/index.js";
-import { a as TextListItem, T as TextList } from "../../index-CHlQcF_n.js";
+import { a as TextListItem, T as TextList } from "../../index-CFj4lfgX.js";
 import styled from "styled-components";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
 import { a as filterProps } from "../../filterProps-DYkraWyH.js";

package/dist/components/TextList/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { a, T } from "../../index-CHlQcF_n.js";
+import { a, T } from "../../index-CFj4lfgX.js";
 import "../../tags-D7CRQqc1.js";
 import "../../Spacing-8v6hcO2x.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";

package/dist/contentful/live-preview-inspector/index.js

@@ -1,7 +1,7 @@
 "use client";
 import "react/jsx-runtime";
 import "@contentful/live-preview/react";
-import { L } from "../../mapContentToComponents-DzoG1jxP.js";
+import { L } from "../../mapContentToComponents-D_ULBSpu.js";
 export {
   L as LivePreviewInspector
 };

package/dist/contentful/live-preview-renderer/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import { useContentfulLiveUpdates, ContentfulLivePreviewProvider } from "@contentful/live-preview/react";
-import { m as mapContentToComponents } from "../../mapContentToComponents-DzoG1jxP.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-D_ULBSpu.js";
 const BrixLiveRendererComponents = ({
   data
 }) => {

package/dist/contentful/renderer/index.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, Fragment } from "react/jsx-runtime";
 import LivePreviewRenderer from "../live-preview-renderer/index.js";
-import { m as mapContentToComponents } from "../../mapContentToComponents-DzoG1jxP.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-D_ULBSpu.js";
 const Renderer = ({
   content,
   isDraftMode

package/dist/{index-CHlQcF_n.js → index-CFj4lfgX.js}

@@ -7,7 +7,7 @@ import Heading from "./components/Heading/index.js";
 import InlineLink from "./components/InlineLink/index.js";
 import { T as TableWrapper, e as TableHead, a as TableBody, d as TableFoot } from "./TableWrapper-Do9KCTGV.js";
 import { e as headingHtmlTags, o as olTagName, f as strongTagName, g as supTagName, u as ulTagName } from "./tags-D7CRQqc1.js";
-import { s as spacingMd, c as spacingNone } from "./Spacing-8v6hcO2x.js";
+import { c as spacingNone, s as spacingMd } from "./Spacing-8v6hcO2x.js";
 import { r as renderInlineRichTextFromOpenText } from "./renderInlineRichTextFromOpenText-RvOG3QbI.js";
 import styled from "styled-components";
 import { getBodySize } from "./foundations/token/getBodySize/index.js";
@@ -173,7 +173,10 @@ const TextListItemStyled = styled.li.withConfig({
   componentId: "sc-e2ohp8-0"
 })({
   display: "list-item",
-  marginBottom: getSpacing(spacingMd)
+  marginBottom: getSpacing(spacingMd),
+  "& :last-child": {
+    marginBottom: getSpacing(spacingNone)
+  }
 }, ({
   bottomSpacing = spacingNone
 }) => getBottomSpacing({

package/dist/{index-vziwfNHJ.js → index-X3REY6f1.js}

@@ -5,7 +5,7 @@ import FlexItem from "./components/FlexItem/index.js";
 import Heading, { isHeadingProps, headingAlignLeft } from "./components/Heading/index.js";
 import Image from "./components/Image/index.js";
 import Link, { isLinkProps } from "./components/Link/index.js";
-import { R as RichText } from "./index-CHlQcF_n.js";
+import { R as RichText } from "./index-CFj4lfgX.js";
 import RichTextContentful from "./components/RichtTextContentful/index.js";
 import YoutubeVideo from "./components/YoutubeVideo/index.js";
 import { r as pTagName, u as ulTagName, d as divTagName, l as liTagName } from "./tags-D7CRQqc1.js";

package/dist/index.js

@@ -3,7 +3,7 @@ import { default as default3 } from "./components/UtilityLink/index.js";
 import { default as default4 } from "./components/Tray/index.js";
 import { default as default5 } from "./components/TimeInput/index.js";
 import { default as default6 } from "./components/Textarea/index.js";
-import { R, T, a } from "./index-CHlQcF_n.js";
+import { R, T, a } from "./index-CFj4lfgX.js";
 import { P, T as T2, c, k, g, f, j, p, a as a2, i, e, d, b, h, v } from "./index-Drem899y.js";
 import { T as T3, a as a3, b as b2, c as c2, d as d2, e as e2, f as f2, T as T4 } from "./TableWrapper-Do9KCTGV.js";
 import { PanelStyled, default as default7, TabGroupContainerStyled, TabGroupIndicatorStyled, TabGroupTabsScrollableContainerStyled, TabGroupTabsStyled, TabLabelStyled, TabStyled, iconPositionLeft, iconPositionTop, tabGroupWidthAuto, tabGroupWidthFull } from "./components/TabGroup/index.js";
@@ -24,7 +24,7 @@ import { default as default20 } from "./components/PickerGroup/index.js";
 import { default as default21, overlayAppearancePrimary, overlayAppearanceSecondary } from "./components/Overlay/index.js";
 import { default as default22 } from "./components/OpenTextFootnoteAdapter/index.js";
 import { default as default23, notificationStatusError, notificationStatusInfo, notificationStatusSuccess, notificationStatusWarning } from "./components/Notification/index.js";
-import { M, i as i2, a as a4, b as b3, m, c as c3, v as v2 } from "./index-vziwfNHJ.js";
+import { M, i as i2, a as a4, b as b3, m, c as c3, v as v2 } from "./index-X3REY6f1.js";
 import { default as default24 } from "./components/LocalStyle/index.js";
 import { default as default25 } from "./components/LoadingSpinner/index.js";
 import { default as default26, linkListItemVariantHorizontal, linkListItemVariantVertical } from "./components/LinkListItem/index.js";
@@ -114,7 +114,7 @@ import { useForcedColors } from "./hooks/useForcedColors/index.js";
 import { useFocusWithin } from "./hooks/useFocusWithin/index.js";
 import "react/jsx-runtime";
 import "@contentful/live-preview/react";
-import { L as L2 } from "./mapContentToComponents-DzoG1jxP.js";
+import { L as L2 } from "./mapContentToComponents-D_ULBSpu.js";
 import { a as a8, i as i7 } from "./props-DDpgcryb.js";
 import { p as p3, m as m2, q, r, s as s2, n, t as t2, x, d as d5, h as h2, c as c6, w, z, o, a as a9, b as b6, u, e as e4, i as i8, g as g2, f as f4, l, k as k2, j as j2, v as v7, y } from "./validate-DYmFz2FF.js";
 import { e as e5, d as d6, c as c7, b as b7, f as f5, a as a10 } from "./styled-BV6KxOQh.js";

package/dist/{mapContentToComponents-DzoG1jxP.js → mapContentToComponents-D_ULBSpu.js}

@@ -23,7 +23,7 @@ import ImageHeader, { isImageHeaderProps } from "./components/ImageHeader/index.
 import Link, { isLinkProps } from "./components/Link/index.js";
 import { i as isLinkAsButtonProps, L as LinkAsButton } from "./index-C8-Q-EZ3.js";
 import LinkList, { linkListVariantRow, linkListVariantColumn } from "./components/LinkList/index.js";
-import { d as isConsentMessageProps, e as isRichTextContentfulProps, f as isYoutubeVideoProps, i as isMediaTextProps, M as MediaText } from "./index-vziwfNHJ.js";
+import { d as isConsentMessageProps, e as isRichTextContentfulProps, f as isYoutubeVideoProps, i as isMediaTextProps, M as MediaText } from "./index-X3REY6f1.js";
 import { k as isPriceProps, P as Price } from "./index-Drem899y.js";
 import ResponsiveImage, { isResponsiveImageProps } from "./components/ResponsiveImage/index.js";
 import RichTextContentful from "./components/RichtTextContentful/index.js";
@@ -47,7 +47,7 @@ import "./components/FlexItem/index.js";
 import "./styled-D0QqjIRm.js";
 import "./components/InlineLink/index.js";
 import "./TableWrapper-Do9KCTGV.js";
-import "./index-CHlQcF_n.js";
+import "./index-CFj4lfgX.js";
 import "./styled-CizpdAAZ.js";
 const validateLegibleContent = (check) => {
   var _a, _b, _c, _d;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vodafone_de/brix-components",
   "description": "Brix is the digital design system for vodafone.de",
-  "version": "8.0.1",
+  "version": "8.1.0",
   "exports": {
     "./package.json": "./package.json",
     ".": {