feat(@clayui/alert): add hideCloseIcon prop

liferay · Feb 14, 2020 · c203ba9 · c203ba9
1 parent d8db899
commit c203ba9
Show file tree

Hide file tree

Showing 4 changed files with 166 additions and 2 deletions.
diff --git a/packages/clay-alert/src/__tests__/ClayAlert.tsx b/packages/clay-alert/src/__tests__/ClayAlert.tsx
@@ -83,4 +83,31 @@ describe('ClayAlert', () => {
 
 		expect(testRenderer.toJSON()).toMatchSnapshot();
 	});
+
+	it('renders with an icon for closing with autoClose', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayAlert
+				autoClose
+				onClose={() => {}}
+				spritemap="/foo/bar"
+				title="Hello!"
+			/>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
+
+	it('renders with autoClose and without icon', () => {
+		const testRenderer = TestRenderer.create(
+			<ClayAlert
+				autoClose
+				hideCloseIcon
+				onClose={() => {}}
+				spritemap="/foo/bar"
+				title="Hello!"
+			/>
+		);
+
+		expect(testRenderer.toJSON()).toMatchSnapshot();
+	});
 });
diff --git a/packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.tsx.snap b/packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.tsx.snap
@@ -464,3 +464,112 @@ exports[`ClayAlert renders with an icon for closing 1`] = `
   </button>
 </div>
 `;
+
+exports[`ClayAlert renders with an icon for closing with autoClose 1`] = `
+<div
+  className="alert alert-dismissible alert-info"
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  role="alert"
+>
+  <div
+    className="alert-autofit-row autofit-row"
+  >
+    <div
+      className="autofit-col"
+    >
+      <div
+        className="autofit-section"
+      >
+        <span
+          className="alert-indicator"
+        >
+          <svg
+            className="lexicon-icon lexicon-icon-info-circle"
+            role="presentation"
+          >
+            <use
+              xlinkHref="/foo/bar#info-circle"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div
+      className="autofit-col autofit-col-expand"
+    >
+      <div
+        className="autofit-section"
+      >
+        <strong
+          className="lead"
+        >
+          Hello!
+        </strong>
+      </div>
+    </div>
+  </div>
+  <button
+    aria-label="Close"
+    className="close"
+    onClick={[Function]}
+    type="button"
+  >
+    <svg
+      className="lexicon-icon lexicon-icon-times"
+      role="presentation"
+    >
+      <use
+        xlinkHref="/foo/bar#times"
+      />
+    </svg>
+  </button>
+</div>
+`;
+
+exports[`ClayAlert renders with autoClose and without icon 1`] = `
+<div
+  className="alert alert-info"
+  onMouseOut={[Function]}
+  onMouseOver={[Function]}
+  role="alert"
+>
+  <div
+    className="alert-autofit-row autofit-row"
+  >
+    <div
+      className="autofit-col"
+    >
+      <div
+        className="autofit-section"
+      >
+        <span
+          className="alert-indicator"
+        >
+          <svg
+            className="lexicon-icon lexicon-icon-info-circle"
+            role="presentation"
+          >
+            <use
+              xlinkHref="/foo/bar#info-circle"
+            />
+          </svg>
+        </span>
+      </div>
+    </div>
+    <div
+      className="autofit-col autofit-col-expand"
+    >
+      <div
+        className="autofit-section"
+      >
+        <strong
+          className="lead"
+        >
+          Hello!
+        </strong>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/clay-alert/src/index.tsx b/packages/clay-alert/src/index.tsx
@@ -75,6 +75,12 @@ export interface IClayAlertProps extends React.HTMLAttributes<HTMLDivElement> {
 	 */
 	displayType?: DisplayType;
 
+	/**
+	 * Flag to indicate if close icon should be show. This prop is used in
+	 * conjunction with the `onClose`prop;
+	 */
+	hideCloseIcon?: boolean;
+
 	/**
 	 * Path to the spritemap that Icon should use when referencing symbols.
 	 */
@@ -106,6 +112,7 @@ const ClayAlert: React.FunctionComponent<IClayAlertProps> & {
 	children,
 	className,
 	displayType = 'info',
+	hideCloseIcon = false,
 	onClose,
 	spritemap,
 	title,
@@ -124,11 +131,13 @@ const ClayAlert: React.FunctionComponent<IClayAlertProps> & {
 			<>{children}</>
 		);
 
+	const showDismissible = onClose && !hideCloseIcon;
+
 	return (
 		<div
 			{...otherProps}
 			className={classNames(className, 'alert', {
-				'alert-dismissible': onClose,
+				'alert-dismissible': showDismissible,
 				'alert-fluid': variant === 'stripe',
 				[`alert-${displayType}`]: displayType,
 			})}
@@ -158,7 +167,7 @@ const ClayAlert: React.FunctionComponent<IClayAlertProps> & {
 					</div>
 				</div>
 
-				{onClose && (
+				{showDismissible && (
 					<button
 						aria-label="Close"
 						className="close"

diff --git a/packages/clay-alert/stories/index.tsx b/packages/clay-alert/stories/index.tsx
@@ -96,6 +96,25 @@ storiesOf('Components|ClayAlert', module)
 			{text('Content', 'This is an alert!')}
 		</ClayAlert>
 	))
+	.add('w/ autoclose and no icon', () => {
+		const [show, setShow] = React.useState(true);
+
+		return (
+			<>
+				{show && (
+					<ClayAlert
+						autoClose={2000}
+						hideCloseIcon
+						onClose={() => setShow(!show)}
+						spritemap={spritemap}
+						title={text('Title', 'Info')}
+					>
+						{text('Content', 'Wait 2000ms for me to disappear!')}
+					</ClayAlert>
+				)}
+			</>
+		);
+	})
 	.add('w/ a button', () => (
 		<ClayAlert
 			displayType="info"