orc-shared 5.7.0-dev.16 → 5.7.0-dev.17

package/dist/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.js

@@ -34,13 +34,11 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
         return !props.error ? theme.palette.text.hint : theme.palette.error.main;
       },
       fontFamily: theme.typography.fontFamily,
-      marginBottom: theme.spacing(1),
-      "&:after": {
-        content: function content(props) {
-          return props.required && '" *"';
-        },
-        color: theme.palette.error.main
-      }
+      marginBottom: theme.spacing(1)
+    },
+    titleRequired: {
+      paddingLeft: theme.spacing(0.5),
+      color: theme.palette.error.main
     },
     value: {
       fontSize: theme.typography.fontSize,
@@ -111,11 +109,15 @@ var InformationItemHeader = function InformationItemHeader(_ref2) {
   var classes = _ref2.classes,
     label = _ref2.label,
     headerIcon = _ref2.headerIcon,
-    headerIconClassName = _ref2.headerIconClassName;
+    headerIconClassName = _ref2.headerIconClassName,
+    required = _ref2.required;
   var formattedLabel = typeof label === "object" ? /*#__PURE__*/_react.default.createElement(_reactIntl.FormattedMessage, label) : label;
   var headerText = (_ref3 = formattedLabel && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     className: classes.title,
-    children: formattedLabel
+    children: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, formattedLabel, required && /*#__PURE__*/_react.default.createElement("span", {
+      "data-qa": "required",
+      className: classes.titleRequired
+    }, "*"))
   })) != null ? _ref3 : null;
   if (headerIcon) {
     return /*#__PURE__*/_react.default.createElement("div", {
@@ -154,6 +156,7 @@ var InformationItem = function InformationItem(_ref4) {
   }, /*#__PURE__*/_react.default.createElement(InformationItemHeader, {
     classes: classes,
     label: label,
+    required: required,
     headerIcon: headerIcon,
     headerIconClassName: headerIconClassName
   }), /*#__PURE__*/_react.default.createElement(InformationItemChildren, {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "orc-shared",
-	"version": "5.7.0-dev.16",
+	"version": "5.7.0-dev.17",
 	"description": "Shared code for Orckestra applications",
 	"main": "./src/index.js",
 	"exports": {

package/src/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.js

@@ -15,11 +15,10 @@ const useStyles = makeStyles(theme => ({
 		color: props => (!props.error ? theme.palette.text.hint : theme.palette.error.main),
 		fontFamily: theme.typography.fontFamily,
 		marginBottom: theme.spacing(1),
-
-		"&:after": {
-			content: props => props.required && '" *"',
-			color: theme.palette.error.main,
-		},
+	},
+	titleRequired: {
+		paddingLeft: theme.spacing(0.5),
+		color: theme.palette.error.main,
 	},
 	value: {
 		fontSize: theme.typography.fontSize,
@@ -77,9 +76,25 @@ const InformationItemChildren = ({
 	return <MultipleLinesText textProps={multipleLinesTextProps} children={value} tooltipClasses={tooltipClasses} />;
 };
 
-const InformationItemHeader = ({ classes, label, headerIcon, headerIconClassName }) => {
+const InformationItemHeader = ({ classes, label, headerIcon, headerIconClassName, required }) => {
 	const formattedLabel = typeof label === "object" ? <FormattedMessage {...label} /> : label;
-	const headerText = (formattedLabel && <Typography className={classes.title} children={formattedLabel} />) ?? null;
+	const headerText =
+		(formattedLabel && (
+			<Typography
+				className={classes.title}
+				children={
+					<>
+						{formattedLabel}
+						{required && (
+							<span data-qa="required" className={classes.titleRequired}>
+								*
+							</span>
+						)}
+					</>
+				}
+			/>
+		)) ??
+		null;
 
 	if (headerIcon) {
 		return (
@@ -113,6 +128,7 @@ const InformationItem = ({
 			<InformationItemHeader
 				classes={classes}
 				label={label}
+				required={required}
 				headerIcon={headerIcon}
 				headerIconClassName={headerIconClassName}
 			/>

package/src/components/MaterialUI/DataDisplay/PredefinedElements/InformationItem.test.js

@@ -237,7 +237,7 @@ describe("Information Item", () => {
 
 		const component = (
 			<IntlProvider locale="en" messages={{ label }}>
-				<InformationItem label={label} required={true}>
+				<InformationItem label={label} required={false}>
 					{value}
 				</InformationItem>
 			</IntlProvider>
@@ -272,19 +272,31 @@ describe("Information Item", () => {
 
 	it("Renders Information Item with required", () => {
 		const label = "label";
-		const value = "value";
+		const value = <p>Value</p>;
 
-		const component = mount(
+		const component = (
 			<IntlProvider locale="en-US">
 				<InformationItem label={label} required={true}>
 					{value}
 				</InformationItem>
-			</IntlProvider>,
+			</IntlProvider>
 		);
 
-		const labelContainer = component.find("p").get(0);
+		const expected = (
+			<div>
+				<Typography
+					children={
+						<>
+							{label}
+							<span data-qa="required">*</span>
+						</>
+					}
+				/>
+				{value}
+			</div>
+		);
 
-		expect(labelContainer, "when mounted", "to have style rules satisfying", "to contain", 'content: " *"');
+		expect(component, "when mounted", "to satisfy", expected);
 	});
 
 	it("Renders Information Item properly with a header icon", () => {