feat: add link property wrap

__snapshots__/link/showcase/chromium-highContrast/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -18,4 +18,9 @@
   - link "External"
   - link "Show Icon"
   - link "(Default) True"
-  - link "False"
+  - link "False"
+  - link "Wrap"
+  - link "(Default) False"
+  - link "True [Multiline]"
+  - link "Examples"
+  - link "Variant Inline"

__snapshots__/link/showcase/chromium/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -18,4 +18,9 @@
   - link "External"
   - link "Show Icon"
   - link "(Default) True"
-  - link "False"
+  - link "False"
+  - link "Wrap"
+  - link "(Default) False"
+  - link "True [Multiline]"
+  - link "Examples"
+  - link "Variant Inline"

__snapshots__/link/showcase/firefox/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -18,4 +18,9 @@
   - link "External"
   - link "Show Icon"
   - link "(Default) True"
-  - link "False"
+  - link "False"
+  - link "Wrap"
+  - link "(Default) False"
+  - link "True [Multiline]"
+  - link "Examples"
+  - link "Variant Inline"

__snapshots__/link/showcase/mobile-chrome/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -18,4 +18,9 @@
   - link "External"
   - link "Show Icon"
   - link "(Default) True"
-  - link "False"
+  - link "False"
+  - link "Wrap"
+  - link "(Default) False"
+  - link "True [Multiline]"
+  - link "Examples"
+  - link "Variant Inline"

__snapshots__/link/showcase/mobile-safari/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -18,4 +18,9 @@
   - link "External"
   - link "Show Icon"
   - link "(Default) True"
-  - link "False"
+  - link "False"
+  - link "Wrap"
+  - link "(Default) False"
+  - link "True [Multiline]"
+  - link "Examples"
+  - link "Variant Inline"

__snapshots__/link/showcase/webkit/should-have-same-aria-snapshot/DBLink-should-have-same-aria-snapshot.yaml

@@ -18,4 +18,9 @@
   - link "External"
   - link "Show Icon"
   - link "(Default) True"
-  - link "False"
+  - link "False"
+  - link "Wrap"
+  - link "(Default) False"
+  - link "True [Multiline]"
+  - link "Examples"
+  - link "Variant Inline"

packages/components/src/components/link/link.lite.tsx

@@ -29,7 +29,8 @@ export default function DBLink(props: DBLinkProps) {
 			data-size={props.size}
 			data-show-icon-trailing={getBooleanAsString(props.showIcon ?? true)}
 			data-variant={props.variant}
-			data-content={props.content || 'internal'}>
+			data-content={props.content || 'internal'}
+			data-wrap={getBooleanAsString(props.wrap)}>
 			<Show when={props.text} else={props.children}>
 				{props.text}
 			</Show>

packages/components/src/components/link/link.scss

@@ -9,6 +9,9 @@
 @use "../../styles/internal/link-components";
 
 .db-link {
+	--db-icon-margin-start: #{variables.$db-spacing-fixed-2xs};
+	--db-icon-vertical-align: top;
+
 	@extend %db-default-link;
 	@extend %db-overwrite-font-size-md;
 
@@ -18,24 +21,14 @@
 	}
 
 	&[data-content="internal"] {
-		@include icons.set-icon("arrow_right", "after");
-
-		&:not([data-show-icon-leading="false"])::after {
-			vertical-align: top;
+		&:not([data-variant="inline"]) {
+			@include icons.set-icon("arrow_right", "after");
 		}
 	}
 
 	&[data-content="external"] {
-		@include icons.set-icon("arrow_up_right", "after");
-	}
-
-	&[data-content="internal"],
-	&[data-content="external"] {
-		--db-icon-margin-start: #{variables.$db-spacing-fixed-2xs};
-
-		&::after {
-			/* stylelint-disable-next-line db-ux/use-spacings */
-			margin-inline-start: var(--db-icon-margin-start);
+		&:not([data-variant="inline"]) {
+			@include icons.set-icon("arrow_up_right", "after");
 		}
 	}
 

packages/components/src/components/link/model.ts

@@ -5,10 +5,11 @@ import {
 	GlobalState,
 	LinkProps,
 	ShowIconProps,
-	TextProps
+	TextProps,
+	WrapProps
 } from '../../shared/model';
 
-export const LinkVariantList = ['adaptive', 'brand'] as const;
+export const LinkVariantList = ['adaptive', 'brand', 'inline'] as const;
 export type LinkVariantType = (typeof LinkVariantList)[number];
 
 export const LinkSizeList = ['medium', 'small'] as const;
@@ -37,7 +38,8 @@ export type DBLinkProps = DBLinkDefaultProps &
 	ClickEventProps<HTMLAnchorElement> &
 	LinkProps &
 	ShowIconProps &
-	TextProps;
+	TextProps &
+	WrapProps;
 
 export type DBLinkDefaultState = {};
 

packages/components/src/components/navigation-item/model.ts

@@ -10,7 +10,8 @@ import {
 	NavigationBehaviorState,
 	ShowIconProps,
 	TextProps,
-	WidthProps
+	WidthProps,
+	WrapProps
 } from '../../shared/model';
 import { NavigationItemSafeTriangle } from '../../utils/navigation';
 
@@ -35,18 +36,14 @@ export type DBNavigationItemDefaultProps = {
 	 * This is for mobile navigation only, if it is set the sub-navigation is a static overlay
 	 */
 	subNavigationExpanded?: boolean | string;
-
-	/**
-	 * Determines whether the text should wrap when its parent container is too small, preventing overflow.
-	 */
-	wrap?: boolean | string;
 };
 
 export type DBNavigationItemProps = DBNavigationItemDefaultProps &
 	GlobalProps &
 	ClickEventProps<HTMLButtonElement> &
 	IconProps &
 	WidthProps &
+	WrapProps &
 	NavigationBackButtonProps &
 	ShowIconProps &
 	TextProps;

packages/components/src/shared/model.ts

@@ -184,6 +184,13 @@ export type OverflowProps = {
 	overflow?: boolean | string;
 };
 
+export type WrapProps = {
+	/**
+	 * Determines whether the text should wrap when its parent container is too small, preventing overflow.
+	 */
+	wrap?: boolean | string;
+};
+
 export const OrientationList = ['horizontal', 'vertical'] as const;
 export type OrientationType = (typeof OrientationList)[number];
 export type OrientationProps = {

packages/components/src/styles/internal/_link-components.scss

@@ -6,7 +6,10 @@
 
 %db-link-height {
 	display: inline-block;
-	block-size: variables.$db-sizing-sm;
+
+	&:not([data-wrap="true"]) {
+		block-size: variables.$db-sizing-sm;
+	}
 }
 
 %db-link-default-color {
@@ -42,7 +45,7 @@
 	text-decoration-thickness: helpers.px-to-rem($pxValue: 1);
 	text-decoration-line: underline;
 
-	&:not([data-variant="inline"]) {
+	&:not([data-wrap="true"], [data-variant="inline"]) {
 		white-space: nowrap;
 	}
 

packages/foundations/scss/icons/_icon-helpers.scss

@@ -151,7 +151,7 @@ $default-icon-font-size: var(--db-icon-font-size, #{$default-icon-size-rem});
 	/* stylelint-disable-next-line declaration-property-value-no-unknown */
 	speak: never; // Hiding icon from screenreaders
 	text-transform: none;
-	vertical-align: middle;
+	vertical-align: var(--db-icon-vertical-align, middle);
 	block-size: $default-icon-font-size;
 	inline-size: $default-icon-font-size;
 

showcases/angular-showcase/src/app/components/link/link.component.html

@@ -17,6 +17,7 @@
 			[size]="exampleProps?.size"
 			[content]="exampleProps?.content"
 			[showIcon]="exampleProps?.showIcon"
+			[wrap]="exampleProps?.wrap"
 			>{{ exampleName }}</db-link
 		>
 	</ng-template>

showcases/react-showcase/src/components/link/index.tsx

@@ -12,15 +12,17 @@ const getLink = ({
 	size,
 	content,
 	children,
-	showIcon
+	showIcon,
+	wrap
 }: DBLinkProps) => (
 	<DBLink
 		href={href}
 		variant={variant}
 		disabled={disabled}
 		size={size}
 		content={content}
-		showIcon={showIcon}>
+		showIcon={showIcon}
+		wrap={wrap}>
 		{children}
 	</DBLink>
 );

showcases/shared/link.json

@@ -116,5 +116,37 @@
 				}
 			}
 		]
+	},
+	{
+		"name": "Wrap",
+		"examples": [
+			{
+				"name": "(Default) False",
+				"props": {
+					"href": "#",
+					"wrap": false
+				}
+			},
+			{
+				"name": "True [Multiline]",
+				"style": { "width": "2ch" },
+				"props": {
+					"href": "#",
+					"wrap": true
+				}
+			}
+		]
+	},
+	{
+		"name": "Examples",
+		"examples": [
+			{
+				"name": "Variant Inline",
+				"props": {
+					"href": "#",
+					"variant": "inline"
+				}
+			}
+		]
 	}
 ]

showcases/vue-showcase/src/components/link/Link.vue

@@ -16,6 +16,7 @@ import DefaultComponent from "../DefaultComponent.vue";
 				:size="exampleProps?.size"
 				:content="exampleProps?.content"
 				:showIcon="exampleProps?.showIcon"
+				:wrap="exampleProps?.wrap"
 			>
 				{{ exampleName }}
 			</DBLink>