Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Switch alert show/hide to a prop #581

Merged
merged 1 commit into from
Oct 30, 2024
Merged

Switch alert show/hide to a prop #581

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 20 additions & 7 deletions __tests__/components/uswds/Alert.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ function selectAlert(rendered) {

describe('<Alert />', () => {
it('renders a default USWDS styled alert', () => {
const res = render(<Alert id="test"></Alert>);
const res = render(<Alert id="test" isVisible={true}></Alert>);

const alert = selectAlert(res);
expect(alert).toBeInTheDocument();
Expand All @@ -21,30 +21,43 @@ describe('<Alert />', () => {

for (const type of types) {
it(`renders an alert of type ${type}`, () => {
const res = render(<Alert id="test" type={type}></Alert>);
const res = render(
<Alert id="test" type={type} isVisible={true}></Alert>
);

const alert = selectAlert(res);
expect(alert).toHaveClass(`usa-alert--${type}`);
});
}

it('renders an h4 heading by default', () => {
render(<Alert id="test" heading="Testing"></Alert>);
render(<Alert id="test" heading="Testing" isVisible={true}></Alert>);

const heading = screen.getByRole('heading', { level: 4 });
expect(heading).toBeInTheDocument();
});

it('renders an h3 if specified', () => {
render(<Alert id="test" heading="Testing" headingLevel="h3"></Alert>);
render(
<Alert
id="test"
heading="Testing"
headingLevel="h3"
isVisible={true}
></Alert>
);

const heading = screen.getByRole('heading', { level: 3 });
expect(heading).toBeInTheDocument();
});

describe('with children', () => {
it('renders normally within a p tag', () => {
const res = render(<Alert id="test">Test contents</Alert>);
const res = render(
<Alert id="test" isVisible={true}>
Test contents
</Alert>
);

const alert = selectAlert(res);
expect(alert).toHaveTextContent('Test contents');
Expand All @@ -53,7 +66,7 @@ describe('<Alert />', () => {

it('renders validation without a p tag', () => {
const res = render(
<Alert id="test" validation>
<Alert id="test" validation isVisible={true}>
Test contents
</Alert>
);
Expand All @@ -65,7 +78,7 @@ describe('<Alert />', () => {
});

it('can render a slim alert without an icon', () => {
const res = render(<Alert id="test" slim noIcon></Alert>);
const res = render(<Alert id="test" slim noIcon isVisible={true}></Alert>);

const alert = selectAlert(res);
expect(alert).toHaveClass('usa-alert--slim');
Expand Down
6 changes: 5 additions & 1 deletion src/app/orgs/[orgId]/users/[userId]/org-roles/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,5 +3,9 @@
import { Alert } from '@/components/uswds/Alert';

export default function EditOrgPageError({ error }: { error: Error }) {
return <Alert type="error">{error.message}</Alert>;
return (
<Alert type="error" isVisible={true}>
{error.message}
</Alert>
);
}
4 changes: 3 additions & 1 deletion src/app/orgs/error.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,9 @@ export default function Error({

return (
<div className="padding-top-4">
<Alert type="error">Error: {error.message}</Alert>
<Alert type="error" isVisible={true}>
Error: {error.message}
</Alert>
</div>
);
}
51 changes: 51 additions & 0 deletions src/app/prototype/alerts/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
'use client';

import { Alert } from '@/components/uswds/Alert';
import { useState } from 'react';

export default function AlertsPage() {
const [showSuccess, setShowSuccess] = useState(false);
const [successCount, setSuccessCount] = useState(0);
const [showError, setShowError] = useState(false);
const [errorCount, setErrorCount] = useState(0);

return (
<div className="grid-container margin-1 margin-y-4">
<h2>Success alert</h2>

<button
className="usa-button"
onClick={() => {
setShowSuccess(!showSuccess);
setSuccessCount(showSuccess ? successCount + 1 : successCount);
}}
>
show success alert
</button>

<div className="margin-top-2">
<Alert type="success" isVisible={showSuccess}>
This is success alert number {successCount}
</Alert>
</div>

<h2>Error alert</h2>

<button
className="usa-button"
onClick={() => {
setShowError(!showError);
setErrorCount(showError ? errorCount + 1 : errorCount);
}}
>
show error alert
</button>

<div className="margin-top-2">
<Alert type="error" isVisible={showError}>
This is an error alert number {errorCount}
</Alert>
</div>
</div>
);
}
95 changes: 81 additions & 14 deletions src/app/prototype/design-guide/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,22 +84,43 @@ export default function DesignGuidePage() {
<div className="grid-row grid-gap">
<div className="grid-col-6">
<h3>Full sized with icons and default h4 heading size</h3>
<Alert type="success" heading="Success" className="display-block">
<Alert
type="success"
heading="Success"
className="display-block"
isVisible={true}
>
Good job
</Alert>
<Alert type="info" heading="Info" className="display-block">
<Alert
type="info"
heading="Info"
className="display-block"
isVisible={true}
>
So you know
</Alert>
<Alert type="warning" heading="Warning" className="display-block">
<Alert
type="warning"
heading="Warning"
className="display-block"
isVisible={true}
>
Watch out
</Alert>
<Alert type="error" heading="Error" className="display-block">
<Alert
type="error"
heading="Error"
className="display-block"
isVisible={true}
>
Something is wrong
</Alert>
<Alert
type="emergency"
heading="Emergency"
className="display-block"
isVisible={true}
>
Fear! Fire! Foes!
</Alert>
Expand All @@ -110,42 +131,88 @@ export default function DesignGuidePage() {
heading="Validation"
validation
className="display-block"
isVisible={true}
>
Validations do not use usa-alert__text p tag
</Alert>
</div>
<div className="grid-col-6">
<h3>Slim with icons and no headings</h3>
<Alert type="success" slim className="display-block">
<Alert
type="success"
slim
className="display-block"
isVisible={true}
>
Success
</Alert>
<Alert type="info" slim className="display-block">
<Alert type="info" slim className="display-block" isVisible={true}>
Info
</Alert>
<Alert type="warning" slim className="display-block">
<Alert
type="warning"
slim
className="display-block"
isVisible={true}
>
Warning
</Alert>
<Alert type="error" slim className="display-block">
<Alert type="error" slim className="display-block" isVisible={true}>
Error
</Alert>
<Alert type="emergency" slim className="display-block">
<Alert
type="emergency"
slim
className="display-block"
isVisible={true}
>
Emergency
</Alert>

<h3>Slim with no icons and no headings</h3>
<Alert type="success" slim noIcon className="display-block">
<Alert
type="success"
slim
noIcon
className="display-block"
isVisible={true}
>
Success
</Alert>
<Alert type="info" slim noIcon className="display-block">
<Alert
type="info"
slim
noIcon
className="display-block"
isVisible={true}
>
Info
</Alert>
<Alert type="warning" slim noIcon className="display-block">
<Alert
type="warning"
slim
noIcon
className="display-block"
isVisible={true}
>
Warning
</Alert>
<Alert type="error" slim noIcon className="display-block">
<Alert
type="error"
slim
noIcon
className="display-block"
isVisible={true}
>
Error
</Alert>
<Alert type="emergency" slim noIcon className="display-block">
<Alert
type="emergency"
slim
noIcon
className="display-block"
isVisible={true}
>
Emergency
</Alert>
</div>
Expand Down
31 changes: 15 additions & 16 deletions src/components/OrgActions/OrgActionsAddUser.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,22 +78,21 @@ export function OrgActionsAddUser({
able to manage their roles once they're added.
</p>

{actionStatus === 'error' && (
<Alert type="error">{actionErrors.join(', ')}</Alert>
)}
{actionStatus === 'success' && (
<Alert type="success">
<strong>{emailInput || 'User'}</strong> has been added!
{userId && (
<>
<br />
<Link href={`/orgs/${orgId}/users/${userId}/org-roles`}>
Manage their organization roles
</Link>
</>
)}
</Alert>
)}
<Alert type="error" isVisible={actionStatus === 'error'}>
{actionErrors.join(', ')}
</Alert>

<Alert type="success" isVisible={actionStatus === 'success'}>
<strong>{emailInput || 'User'}</strong> has been added!
{userId && (
<>
<br />
<Link href={`/orgs/${orgId}/users/${userId}/org-roles`}>
Manage their organization roles
</Link>
</>
)}
</Alert>

<fieldset className="usa-fieldset">
<legend className="usa-legend usa-sr-only">
Expand Down
Loading