publicdata/j40-cejst-2
1
0
Fork 0
mirror of https://github.com/DOI-DO/j40-cejst-2.git synced 2025-08-29 01:21:41 -07:00
Code Issues Projects Releases Packages Wiki Activity Actions

Add back public engagement button to all pages

Browse source 
- add send button in area detail alt tag to i18n
- modify public engagement button to have same CSS as send feedback button
- update snapshots
This commit is contained in:
Vim USDS 2022-04-05 15:36:06 -07:00
commit 5cb265a93c
17 changed files with 219 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

2
client/src/components/AreaDetail/AreaDetail.tsx
View file

@ -617,7 +617,7 @@ const AreaDetail = ({properties}:IAreaDetailProps) => {
<img
className={styles.buttonImage}
src={mailIcon}
alt={'tbd'}
alt={intl.formatMessage(EXPLORE_COPY.COMMUNITY.SEND_FEEDBACK.IMG_ICON.ALT_TAG)}
/>
</div>
</Button>

6
client/src/components/AreaDetail/tests/__snapshots__/areaDetail.test.tsx.snap
View file

@ -76,7 +76,7 @@ exports[`rendering of the AreaDetail checks if indicators for ISLAND AREAS are p
Send feedback
</div>
<img
alt="tbd"
alt="Send feedback"
src="test-file-stub"
/>
</div>
@ -429,7 +429,7 @@ exports[`rendering of the AreaDetail checks if indicators for NATION is present
Send feedback
</div>
<img
alt="tbd"
alt="Send feedback"
src="test-file-stub"
/>
</div>
@ -2133,7 +2133,7 @@ exports[`rendering of the AreaDetail checks if indicators for PUERTO RICO are pr
Send feedback
</div>
<img
alt="tbd"
alt="Send feedback"
src="test-file-stub"
/>
</div>

23
client/src/components/PublicEngageButton/PublicEngageButton.module.scss
View file

@ -20,6 +20,29 @@
.link, .link:visited {
color:white;
text-decoration: none;
.engagementButton{
// @include u-text("blue-70v");
// @include u-bg("yellow-20v");
height: 40px;
// &:hover {
// @include u-bg("yellow-20");
// @include u-text("gray-90");
// }
.buttonContainer{
display: flex;
.buttonImage{
@include u-margin-right(1);
width: 21px;
margin-top: -3px;
filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(119deg) brightness(105%) contrast(101%);
}
}
}
}
}

4
client/src/components/PublicEngageButton/PublicEngageButton.module.scss.d.ts vendored
View file

@ -4,6 +4,10 @@ declare namespace PublicEngagementButton {
tagContainer: string;
container: string;
link: string;
engagementButton: string;
buttonContainer: string;
buttonImage: string;
}
}

19
client/src/components/PublicEngageButton/PublicEngageButton.tsx
View file

@ -5,6 +5,9 @@ import {Button, Tag} from '@trussworks/react-uswds';
import * as styles from './PublicEngageButton.module.scss';
import * as PUBLIC_ENG_COPY from '../../data/copy/publicEngage';
// @ts-ignore
import eventIcon from '/node_modules/uswds/dist/img/usa-icons/event.svg';
const PublicEngageButton = () => {
const intl = useIntl();
@ -16,8 +19,20 @@ const PublicEngageButton = () => {
</Tag>
</div>
<Link className={styles.link} to={'/public-engagement'}>
<Button type={'button'} icon={true}>
{intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.LABEL)}
<Button
type="button"
className={styles.engagementButton}
>
<div className={styles.buttonContainer}>
<img
className={styles.buttonImage}
src={eventIcon}
alt={intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.IMG_ICON_ALT_TAG)}
/>
<div>
{intl.formatMessage(PUBLIC_ENG_COPY.PUBLIC_ENG_BUTTON.LABEL)}
</div>
</div>
</Button>
</Link>
</div>

12
client/src/components/PublicEngageButton/__snapshots__/PublicEngageButton.test.tsx.snap
View file

@ -15,11 +15,19 @@ exports[`rendering of the PublicEngageButton checks if component renders 1`] = `
href="/en/public-engagement"
>
<button
class="usa-button usa-button--icon"
class="usa-button"
data-testid="button"
type="button"
>
Public Engagement
<div>
<img
alt="an icon that represents a calendar"
src="test-file-stub"
/>
<div>
Public engagement
</div>
</div>
</button>
</a>
</div>