@vodafone_de/brix-components 7.1.4 → 7.1.6

package/dist/components/DiscoveryCard/index.js

@@ -19,7 +19,7 @@ import "../../index-B2VrT4fo.js";
 import "../FootnoteLink/index.js";
 import "../../styled-VAsSnb5y.js";
 import "../../styled-q7r_5eaz.js";
-import { a as LinkStyled } from "../../index-C69FNo1a.js";
+import { a as LinkStyled } from "../../index-M27FMM9r.js";
 import "../../hooks/useLinkComponent/index.js";
 import "../InlineLink/index.js";
 import "../../styled-DJWrbsIZ.js";

package/dist/components/DiscoveryCardGroup/index.js

@@ -4,7 +4,7 @@ import styled from "styled-components";
 import DiscoveryCard, { discoveryCardOrientationVertical } from "../DiscoveryCard/index.js";
 import Grid from "../Grid/index.js";
 import GridItem from "../GridItem/index.js";
-import { a as LinkStyled } from "../../index-C69FNo1a.js";
+import { a as LinkStyled } from "../../index-M27FMM9r.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { a as spacingMd } from "../../Spacing-BMQelJYr.js";
 const DiscoveryCardGroupGridStyled = styled(Grid).withConfig({

package/dist/components/FootnoteLink/index.js

@@ -13,13 +13,12 @@ const FootnoteLinkStyled = styled(InlineLink).withConfig({
   verticalAlign: "top",
   fontSize: "0.7em",
   fontWeight: getFontWeight("bold"),
-  paddingLeft: getSpacing(spacing2Xs),
-  paddingRight: getSpacing(spacing2Xs),
   textDecoration: "none",
   display: "inline-block",
   "& a": {
     textDecoration: "underline",
-    padding: 0,
+    paddingLeft: getSpacing(spacing2Xs),
+    paddingRight: getSpacing(spacing2Xs),
     verticalAlign: "baseline",
     fontSize: "inherit"
   }

package/dist/components/Link/getLinkIcon.d.ts

@@ -1,3 +1,3 @@
 import { ReactNode } from 'react';
-import { default as PositionedIconInterface } from '../../foundations/types/PositionedIconInterface';
-export declare const getLinkIcon: (icon: PositionedIconInterface) => ReactNode;
+import { LinkProps } from './props';
+export declare const getLinkIcon: (icon: LinkProps["icon"], iconPosition: LinkProps["iconPosition"]) => ReactNode;

package/dist/components/Link/index.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { L as LinkAsButton, a as LinkStyled, g as getLinkIcon } from "../../index-C69FNo1a.js";
+import { L as LinkAsButton, p as primaryAppearance, a as LinkStyled, g as getLinkIcon } from "../../index-M27FMM9r.js";
 import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
 import { f as filterPropsForUnstyledComponent } from "../../filterProps-CTn92eZw.js";
 import { r as renderInlineRichTextFromOpenText } from "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
@@ -11,15 +11,16 @@ const isLinkAsButtonProp = (props) => {
 const Link = ({
   className,
   bottomSpacing,
+  appearance = primaryAppearance,
   ...props
 }) => {
   if (isLinkAsButtonProp(props)) {
-    return /* @__PURE__ */ jsx(LinkAsButton, { className, bottomSpacing, ...props, children: props.children });
+    return /* @__PURE__ */ jsx(LinkAsButton, { className, bottomSpacing, appearance, ...props, children: props.children });
   }
   const LinkComponent = useLinkComponent();
-  return /* @__PURE__ */ jsx(LinkStyled, { className, bottomSpacing, children: /* @__PURE__ */ jsxs(LinkComponent, { ...sanitizeLinkProps(filterPropsForUnstyledComponent(props)), children: [
+  return /* @__PURE__ */ jsx(LinkStyled, { className, bottomSpacing, appearance, children: /* @__PURE__ */ jsxs(LinkComponent, { ...sanitizeLinkProps(filterPropsForUnstyledComponent(props)), children: [
     renderInlineRichTextFromOpenText(props.children),
-    getLinkIcon(props.icon)
+    getLinkIcon(props.icon, props.iconPosition)
   ] }) });
 };
 export {

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

@@ -1,17 +1,29 @@
+import { IconName } from '@vfde-react/inline-icon-library/IconName';
 import { AnchorHTMLAttributes, ReactNode } from 'react';
 import { PatternProps } from '../../foundations/PatternProps';
-import { default as PositionedIconInterface } from '../../foundations/types/PositionedIconInterface';
-export interface LinkedSharedProps {
+import { primaryAppearance, secondaryAppearance } from '../../foundations/types/Appearance';
+import { leftPosition, rightPosition } from '../../foundations/types/PositionType';
+export type LinkAppearance = typeof primaryAppearance | typeof secondaryAppearance;
+export type LinkIconPosition = typeof leftPosition | typeof rightPosition;
+export interface LinkSharedProps {
     /**
-     * icon object contain name and position, object is optional and name and position is mandatory.
+     * Name of the icon to be used
      */
-    icon: PositionedIconInterface;
+    icon: IconName;
+    /**
+     * Position of the icon in relation to text
+     */
+    iconPosition: LinkIconPosition;
+    /**
+     * Different appearances for emphasis
+     */
+    appearance?: LinkAppearance;
     /**
      * Pin component's name from string to the concrete name
      */
     component?: 'Link' | 'LinkAsButton';
 }
-export interface LinkProps extends LinkedSharedProps, PatternProps, AnchorHTMLAttributes<HTMLAnchorElement> {
+export interface LinkProps extends LinkSharedProps, PatternProps, AnchorHTMLAttributes<HTMLAnchorElement> {
     /**
      * Link has mandatory children
      */
@@ -21,8 +33,8 @@ export interface LinkProps extends LinkedSharedProps, PatternProps, AnchorHTMLAt
      */
     component?: 'Link';
     /**
-     * As long as href is given, this pattern is rendered as a link and
-     * if it is left out, then a button is rendered
+     * As long as href is given, this pattern is rendered as an <a> and
+     * if it is left out, then a <button> is rendered
      */
     href: string;
 }

package/dist/components/Link/styled.d.ts

@@ -1,4 +1,4 @@
 import { CSSObject } from 'styled-components';
-import { LinkProps } from './props';
-export declare const linkBaseCssObject: CSSObject;
-export declare const LinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<LinkProps, "bottomSpacing">>> & string;
+import { LinkProps, LinkSharedProps } from './props';
+export declare const getLinkStyles: (appearance: LinkSharedProps["appearance"]) => CSSObject;
+export declare const LinkStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, Pick<LinkProps, "appearance" | "bottomSpacing">>> & string;

package/dist/components/LinkAsButton/index.js

@@ -1,6 +1,6 @@
 "use client";
 import "react/jsx-runtime";
-import { L } from "../../index-C69FNo1a.js";
+import { L } from "../../index-M27FMM9r.js";
 import "../../renderInlineRichTextFromOpenText-RvOG3QbI.js";
 export {
   L as default

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

@@ -1,7 +1,7 @@
 import { ButtonHTMLAttributes, ReactNode } from 'react';
-import { LinkedSharedProps } from '../Link/props';
+import { LinkSharedProps } from '../Link/props';
 import { PatternProps } from '../../foundations/PatternProps';
-export interface LinkAsButtonProps extends LinkedSharedProps, PatternProps, ButtonHTMLAttributes<HTMLButtonElement> {
+export interface LinkAsButtonProps extends LinkSharedProps, PatternProps, ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Pin component's name from string to the concrete name
      */

package/dist/components/LinkList/index.js

@@ -5,7 +5,7 @@ import { u as ulTagName, l as liTagName } from "../../tags-38kBhOn6.js";
 import { s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import { L as LinkListStyled, b as LinkListLiStyled, l as linkListVariantRow } from "../../styled-BlHKbHF4.js";
 import { a } from "../../styled-BlHKbHF4.js";
-import { l as linkListItemVariantVertical, a as linkListItemVariantHorizontal } from "../../styled-BM1Yo9eD.js";
+import { l as linkListItemVariantVertical, a as linkListItemVariantHorizontal } from "../../styled-SllFJc7o.js";
 const LinkList = ({
   items,
   variant,

package/dist/components/LinkListItem/index.js

@@ -10,8 +10,8 @@ import { s as spacingNone } from "../../Spacing-BMQelJYr.js";
 import { useLinkComponent } from "../../hooks/useLinkComponent/index.js";
 import { f as filterPropsForUnstyledComponent } from "../../filterProps-CTn92eZw.js";
 import { s as sanitizeLinkProps } from "../../sanitizeLinkProps-D2Kkovy1.js";
-import { L as LinkListItemElevatedStyled, b as LinkListItemStyled, c as LinkListItemButtonStyled, d as LinkListItemAnchorStyled, e as LinkListItemContentWrapperStyled, a as linkListItemVariantHorizontal, f as LinkListItemContentStyled, g as LinkListItemLabelWrapperStyled, h as LinkListItemVerticalContentStyled, i as LinkListItemChevronStyled, j as LinkListLabelStyled, k as LinkListSuffixStyled } from "../../styled-BM1Yo9eD.js";
-import { l } from "../../styled-BM1Yo9eD.js";
+import { L as LinkListItemElevatedStyled, b as LinkListItemStyled, c as LinkListItemButtonStyled, d as LinkListItemAnchorStyled, e as LinkListItemContentWrapperStyled, a as linkListItemVariantHorizontal, f as LinkListItemContentStyled, g as LinkListItemLabelWrapperStyled, h as LinkListItemVerticalContentStyled, i as LinkListItemChevronStyled, j as LinkListLabelStyled, k as LinkListSuffixStyled } from "../../styled-SllFJc7o.js";
+import { l } from "../../styled-SllFJc7o.js";
 const isLinkListItemAsButtonProp = (props) => {
   return props.href === void 0;
 };

package/dist/contentful/index.js

@@ -14,7 +14,7 @@ import "../NotificationErrorIcon-DMnAJgPN.js";
 import "../styled-RnVr222F.js";
 import "../styled-B-_SmQSA.js";
 import "../hooks/useLinkComponent/index.js";
-import "../styled-BM1Yo9eD.js";
+import "../styled-SllFJc7o.js";
 import "../styled-BlHKbHF4.js";
 import "../styled-DOK4C5Ml.js";
 import "../styled-D8a-ap4J.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-wTK3ndvI.js";
+import { L } from "../../mapContentToComponents-BobPnbKM.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-wTK3ndvI.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-BobPnbKM.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-wTK3ndvI.js";
+import { m as mapContentToComponents } from "../../mapContentToComponents-BobPnbKM.js";
 const Renderer = ({
   content,
   isDraftMode

package/dist/foundations/types/Appearance.d.ts

@@ -0,0 +1,6 @@
+export declare const primaryAppearance = "primary";
+export declare const secondaryAppearance = "secondary";
+export declare const tertiaryAppearance = "tertiary";
+export declare const successAppearance = "success";
+type AppearanceType = typeof primaryAppearance | typeof secondaryAppearance | typeof tertiaryAppearance | typeof successAppearance;
+export default AppearanceType;

package/dist/{index-C69FNo1a.js → index-M27FMM9r.js}

@@ -16,46 +16,51 @@ import { getTextColor } from "./foundations/token/getTextColor/index.js";
 import { c as colorBorderFocus } from "./BorderColor-CYdSW9dg.js";
 import { a as borderWidthFocus } from "./BorderWidth-eg_mz82k.js";
 import { t as textBodyMd } from "./TextBodySize-BcZR9mh2.js";
-import { f as colorTextBrand } from "./TextColor-DsntmDNw.js";
-const getLinkIcon = (icon) => /* @__PURE__ */ jsx(ButtonIconStyled, { name: icon.name, iconPosition: icon.position, size: iconSizeSm });
-const linkBaseCssObject = {
-  ...forcedColors({
-    color: "LinkText"
-  }),
-  display: "flex",
-  width: "fit-content",
-  flexWrap: "nowrap",
-  alignItems: "center",
-  justifyContent: "center",
-  cursor: "pointer",
-  gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
-  ...getBodySize(textBodyMd),
-  "&:focus-within": {
+import { f as colorTextBrand, a as colorTextNeutral } from "./TextColor-DsntmDNw.js";
+const getLinkIcon = (icon, iconPosition) => /* @__PURE__ */ jsx(ButtonIconStyled, { name: icon, iconPosition, size: iconSizeSm });
+const primaryAppearance = "primary";
+const getLinkStyles = (appearance) => {
+  return {
     ...forcedColors({
-      outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+      color: "LinkText"
     }),
-    boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
-    outline: "none",
-    textDecoration: "underline"
-  },
-  color: getTextColor(colorTextBrand),
-  "&:visited": {
-    ...forcedColors({
-      color: "VisitedText"
-    }),
-    color: getTextColor(colorTextBrand)
-  },
-  background: "transparent",
-  textDecoration: "none",
-  "&:hover": {
-    textDecoration: "underline"
-  }
+    display: "flex",
+    width: "fit-content",
+    flexWrap: "nowrap",
+    alignItems: "center",
+    justifyContent: "center",
+    cursor: "pointer",
+    gap: `${getSpacing(spacingNone)} ${getSpacing(spacingXs)}`,
+    ...getBodySize(textBodyMd),
+    "&:focus-within": {
+      ...forcedColors({
+        outline: `${getBorderWidth(borderWidthFocus)} solid CanvasText`
+      }),
+      boxShadow: `${getBorderColor(colorBorderFocus)} 0px 0px 0px ${getBorderWidth(borderWidthFocus)}`,
+      outline: "none",
+      textDecoration: "underline"
+    },
+    color: appearance === primaryAppearance ? getTextColor(colorTextBrand) : getTextColor(colorTextNeutral),
+    "&:visited": {
+      ...forcedColors({
+        color: "VisitedText"
+      }),
+      color: appearance === primaryAppearance ? getTextColor(colorTextBrand) : getTextColor(colorTextNeutral)
+    },
+    background: "transparent",
+    textDecoration: "none",
+    "&:hover": {
+      textDecoration: "underline"
+    }
+  };
 };
 const LinkStyled = styled.span.withConfig({
   shouldForwardProp: filterProps(["href"]),
   displayName: "LinkStyled",
   componentId: "sc-1eekm6o-0"
-})(linkBaseCssObject, {
+})(({
+  appearance = primaryAppearance
+}) => getLinkStyles(appearance), {
   "& a": {
     color: "inherit",
     display: "flex",
@@ -74,17 +79,20 @@ const LinkAsButtonStyled = styled.button.withConfig({
   shouldForwardProp: filterProps(),
   displayName: "LinkAsButtonStyled",
   componentId: "sc-d0hr7z-0"
-})(linkBaseCssObject, ({
+})(({
+  appearance = primaryAppearance
+}) => getLinkStyles(appearance), ({
   bottomSpacing = spacingMd
 }) => getBottomSpacing({
   bottomSpacing
 }));
 const LinkAsButton = (props) => /* @__PURE__ */ jsxs(LinkAsButtonStyled, { ...props, children: [
   renderInlineRichTextFromOpenText(props.children),
-  getLinkIcon(props.icon)
+  getLinkIcon(props.icon, props.iconPosition)
 ] });
 export {
   LinkAsButton as L,
   LinkStyled as a,
-  getLinkIcon as g
+  getLinkIcon as g,
+  primaryAppearance as p
 };

package/dist/index.js

@@ -27,7 +27,7 @@ import { default as default24 } from "./components/LocalStyle/index.js";
 import { default as default25 } from "./components/LoadingSpinner/index.js";
 import { default as default26 } from "./components/LinkListItem/index.js";
 import { default as default27 } from "./components/LinkList/index.js";
-import { L } from "./index-C69FNo1a.js";
+import { L } from "./index-M27FMM9r.js";
 import { default as default28 } from "./components/Link/index.js";
 import { default as default29 } from "./components/Legend/index.js";
 import { default as default30 } from "./components/Label/index.js";
@@ -110,9 +110,9 @@ 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-wTK3ndvI.js";
+import { L as L2 } from "./mapContentToComponents-BobPnbKM.js";
 import { a as a4, l as l2 } from "./styled-BlHKbHF4.js";
-import { a as a5, l as l3 } from "./styled-BM1Yo9eD.js";
+import { a as a5, l as l3 } from "./styled-SllFJc7o.js";
 import { a as a6, i as i2 } from "./props-DDpgcryb.js";
 import { I as I2, f as f2, i as i3, g as g2, h, j, d as d2, c as c2, b as b2, e as e2, a as a7, k, l as l4 } from "./props-7dcsjRUx.js";
 import { I as I3 } from "./styled-RnVr222F.js";

package/dist/{mapContentToComponents-wTK3ndvI.js → mapContentToComponents-BobPnbKM.js}

@@ -21,7 +21,7 @@ import "react";
 import "./styled-Djetw1lK.js";
 import "./styled-VAsSnb5y.js";
 import "./hooks/useLinkComponent/index.js";
-import { l as linkListItemVariantVertical, a as linkListItemVariantHorizontal } from "./styled-BM1Yo9eD.js";
+import { l as linkListItemVariantVertical, a as linkListItemVariantHorizontal } from "./styled-SllFJc7o.js";
 import { l as linkListVariantRow, a as linkListVariantColumn } from "./styled-BlHKbHF4.js";
 import "./styled-DOK4C5Ml.js";
 import "./styled-D8a-ap4J.js";

package/dist/{styled-BM1Yo9eD.js → styled-SllFJc7o.js}

@@ -240,7 +240,8 @@ const LinkListItemVerticalContentStyled = styled.span.withConfig({
   gap: getSpacing(spacingXs),
   display: "flex",
   flexDirection: "column",
-  flexShrink: 1
+  flexShrink: 1,
+  minWidth: 0
 });
 const LinkListItemLabelWrapperStyled = styled.span.withConfig({
   shouldForwardProp: filterProps(),
@@ -258,7 +259,10 @@ const LinkListLabelStyled = styled.span.withConfig({
   displayName: "LinkListLabelStyled",
   componentId: "sc-1dmfu9f-8"
 })(getHeadingSize(textHeadingXs), {
-  textAlign: "left"
+  textAlign: "left",
+  overflowWrap: "break-word",
+  hyphens: "auto",
+  maxWidth: "100%"
 });
 const LinkListSuffixStyled = styled(Body).withConfig({
   displayName: "LinkListSuffixStyled",

package/package.json

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