From 63533be72843c9a59115c12534ae8bcb74b2df9d Mon Sep 17 00:00:00 2001
From: D038721 <esther.schmitz@sap.com>
Date: Thu, 21 Jul 2022 15:43:04 +0200
Subject: [PATCH] [ui] add 'wrap' option to DataGridCell. Fix SelectRow story

---
 .../DataGridCell/DataGridCell.component.js           | 12 +++++++++++-
 .../src/components/SelectRow/SelectRow.stories.js    |  2 +-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/libs/juno-ui-components/src/components/DataGridCell/DataGridCell.component.js b/libs/juno-ui-components/src/components/DataGridCell/DataGridCell.component.js
index cd52f847b..6d00ac0f4 100644
--- a/libs/juno-ui-components/src/components/DataGridCell/DataGridCell.component.js
+++ b/libs/juno-ui-components/src/components/DataGridCell/DataGridCell.component.js
@@ -20,8 +20,15 @@ const cellCustomStyles = (colSpan) => {
 	return styles
 }
 
+const innerWrapperStyles = (wrap) => {
+	return `
+		${wrap ? '' : 'jn-whitespace-nowrap' }
+	`
+}
+
 export const DataGridCell = ({
 	colSpan,
+	wrap,
 	className,
 	children,
 	...props
@@ -33,7 +40,7 @@ export const DataGridCell = ({
 			role="gridcell"
 			{...props}>
 			{/* The div wrapper is important, otherwise the flexbox layout of the cell causes unexpected behaviour if you don't know about it. With the cell content behaves as expected */}
-			<div className="juno-datagrid-cell-inner-wrapper">
+			<div className={`juno-datagrid-cell-inner-wrapper ${innerWrapperStyles(wrap)}`}>
 				{children}
 			</div>
 		</div>
@@ -43,6 +50,8 @@ export const DataGridCell = ({
 DataGridCell.propTypes = {
 	/** Add a col span to the cell. This works like a colspan in a normal html table, so you have to take care not to place too many cells in a row if some of them have a colspan.  */
 	colSpan: PropTypes.number,
+	/** Set wrap to false if the content shouldn't wrap */
+	wrap: PropTypes.bool,
 	/** Children to render in the DataGridCell */
 	children: PropTypes.node,
 	/** Add a classname */
@@ -51,6 +60,7 @@ DataGridCell.propTypes = {
 
 DataGridCell.defaultProps = {
 	colSpan: undefined,
+	wrap: true,
 	className: "",
 	children: null,
 }
\ No newline at end of file
diff --git a/libs/juno-ui-components/src/components/SelectRow/SelectRow.stories.js b/libs/juno-ui-components/src/components/SelectRow/SelectRow.stories.js
index 9f479c1c4..308d0e0b2 100644
--- a/libs/juno-ui-components/src/components/SelectRow/SelectRow.stories.js
+++ b/libs/juno-ui-components/src/components/SelectRow/SelectRow.stories.js
@@ -39,7 +39,7 @@ WithHelpText.args = {
 export const WithHelpTextWithLink = Template.bind({})
 WithHelpTextWithLink.args = {
   label: "Select Row with Helptext",
-  helptext: <>Helptext with a <a href="#">Link</></>,
+  helptext: <>Helptext with a <a href="#">Link</a></>,
   items: [
     { ...DefaultSelectOptionStory.args, value: "d-1", label: "Option 1" },
     { ...DefaultSelectOptionStory.args, value: "d-2", label: "Option 2" },