Skip to content

Commit c203ba9

Browse files
bryceosterhausbryceosterhaus
committed
feat(@clayui/alert): add hideCloseIcon prop
1 parent d8db899 commit c203ba9

File tree

4 files changed

+166
-2
lines changed

4 files changed

+166
-2
lines changed

‎packages/clay-alert/src/__tests__/ClayAlert.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,4 +83,31 @@ describe('ClayAlert', () => {
8383

8484
expect(testRenderer.toJSON()).toMatchSnapshot();
8585
});
86+
87+
it('renders with an icon for closing with autoClose', () => {
88+
const testRenderer = TestRenderer.create(
89+
<ClayAlert
90+
autoClose
91+
onClose={() => {}}
92+
spritemap="/foo/bar"
93+
title="Hello!"
94+
/>
95+
);
96+
97+
expect(testRenderer.toJSON()).toMatchSnapshot();
98+
});
99+
100+
it('renders with autoClose and without icon', () => {
101+
const testRenderer = TestRenderer.create(
102+
<ClayAlert
103+
autoClose
104+
hideCloseIcon
105+
onClose={() => {}}
106+
spritemap="/foo/bar"
107+
title="Hello!"
108+
/>
109+
);
110+
111+
expect(testRenderer.toJSON()).toMatchSnapshot();
112+
});
86113
});

‎packages/clay-alert/src/__tests__/__snapshots__/ClayAlert.tsx.snap

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -464,3 +464,112 @@ exports[`ClayAlert renders with an icon for closing 1`] = `
464464
</button>
465465
</div>
466466
`;
467+
468+
exports[`ClayAlert renders with an icon for closing with autoClose 1`] = `
469+
<div
470+
className="alert alert-dismissible alert-info"
471+
onMouseOut={[Function]}
472+
onMouseOver={[Function]}
473+
role="alert"
474+
>
475+
<div
476+
className="alert-autofit-row autofit-row"
477+
>
478+
<div
479+
className="autofit-col"
480+
>
481+
<div
482+
className="autofit-section"
483+
>
484+
<span
485+
className="alert-indicator"
486+
>
487+
<svg
488+
className="lexicon-icon lexicon-icon-info-circle"
489+
role="presentation"
490+
>
491+
<use
492+
xlinkHref="/foo/bar#info-circle"
493+
/>
494+
</svg>
495+
</span>
496+
</div>
497+
</div>
498+
<div
499+
className="autofit-col autofit-col-expand"
500+
>
501+
<div
502+
className="autofit-section"
503+
>
504+
<strong
505+
className="lead"
506+
>
507+
Hello!
508+
</strong>
509+
</div>
510+
</div>
511+
</div>
512+
<button
513+
aria-label="Close"
514+
className="close"
515+
onClick={[Function]}
516+
type="button"
517+
>
518+
<svg
519+
className="lexicon-icon lexicon-icon-times"
520+
role="presentation"
521+
>
522+
<use
523+
xlinkHref="/foo/bar#times"
524+
/>
525+
</svg>
526+
</button>
527+
</div>
528+
`;
529+
530+
exports[`ClayAlert renders with autoClose and without icon 1`] = `
531+
<div
532+
className="alert alert-info"
533+
onMouseOut={[Function]}
534+
onMouseOver={[Function]}
535+
role="alert"
536+
>
537+
<div
538+
className="alert-autofit-row autofit-row"
539+
>
540+
<div
541+
className="autofit-col"
542+
>
543+
<div
544+
className="autofit-section"
545+
>
546+
<span
547+
className="alert-indicator"
548+
>
549+
<svg
550+
className="lexicon-icon lexicon-icon-info-circle"
551+
role="presentation"
552+
>
553+
<use
554+
xlinkHref="/foo/bar#info-circle"
555+
/>
556+
</svg>
557+
</span>
558+
</div>
559+
</div>
560+
<div
561+
className="autofit-col autofit-col-expand"
562+
>
563+
<div
564+
className="autofit-section"
565+
>
566+
<strong
567+
className="lead"
568+
>
569+
Hello!
570+
</strong>
571+
</div>
572+
</div>
573+
</div>
574+
</div>
575+
`;

‎packages/clay-alert/src/index.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -75,6 +75,12 @@ export interface IClayAlertProps extends React.HTMLAttributes<HTMLDivElement> {
7575
*/
7676
displayType?: DisplayType;
7777

78+
/**
79+
* Flag to indicate if close icon should be show. This prop is used in
80+
* conjunction with the `onClose`prop;
81+
*/
82+
hideCloseIcon?: boolean;
83+
7884
/**
7985
* Path to the spritemap that Icon should use when referencing symbols.
8086
*/
@@ -106,6 +112,7 @@ const ClayAlert: React.FunctionComponent<IClayAlertProps> & {
106112
children,
107113
className,
108114
displayType = 'info',
115+
hideCloseIcon = false,
109116
onClose,
110117
spritemap,
111118
title,
@@ -124,11 +131,13 @@ const ClayAlert: React.FunctionComponent<IClayAlertProps> & {
124131
<>{children}</>
125132
);
126133

134+
const showDismissible = onClose && !hideCloseIcon;
135+
127136
return (
128137
<div
129138
{...otherProps}
130139
className={classNames(className, 'alert', {
131-
'alert-dismissible': onClose,
140+
'alert-dismissible': showDismissible,
132141
'alert-fluid': variant === 'stripe',
133142
[`alert-${displayType}`]: displayType,
134143
})}
@@ -158,7 +167,7 @@ const ClayAlert: React.FunctionComponent<IClayAlertProps> & {
158167
</div>
159168
</div>
160169

161-
{onClose && (
170+
{showDismissible && (
162171
<button
163172
aria-label="Close"
164173
className="close"

‎packages/clay-alert/stories/index.tsx

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,25 @@ storiesOf('Components|ClayAlert', module)
9696
{text('Content', 'This is an alert!')}
9797
</ClayAlert>
9898
))
99+
.add('w/ autoclose and no icon', () => {
100+
const [show, setShow] = React.useState(true);
101+
102+
return (
103+
<>
104+
{show && (
105+
<ClayAlert
106+
autoClose={2000}
107+
hideCloseIcon
108+
onClose={() => setShow(!show)}
109+
spritemap={spritemap}
110+
title={text('Title', 'Info')}
111+
>
112+
{text('Content', 'Wait 2000ms for me to disappear!')}
113+
</ClayAlert>
114+
)}
115+
</>
116+
);
117+
})
99118
.add('w/ a button', () => (
100119
<ClayAlert
101120
displayType="info"

0 commit comments

Comments
 (0)