-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added additional disclaimer text to the state seal component and made…
… it editable on the settings page
- Loading branch information
Showing
10 changed files
with
217 additions
and
45 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,42 +1,84 @@ | ||
| import React, { CSSProperties, FC } from 'react' | ||
| import React, { CSSProperties, FC, ReactElement } from 'react' | ||
| import { EmailComponentProps } from './shared' | ||
| import { useLocalStorageJSON } from 'src/utils/useLocalStorage' | ||
| import { EmailBlock } from 'src/ui' | ||
| import startCase from 'lodash.startcase' | ||
| import { StateSealKey, StateSeals } from 'src/ui/StateSeal' | ||
| import { StyleDefaults } from '../styles' | ||
| import { Spacing, SpacingCell, StyleDefaults, Text } from '../styles' | ||
| import Config from '../../../gatsby-config' | ||
|
|
||
| const defaultValue: StateSealKey = 'US' | ||
| export interface StateSealValue { | ||
| stateSealKey: StateSealKey | ||
| additionalDisclaimer: string | ||
| [key: string]: null | string | ||
| } | ||
|
|
||
| const defaultValue: StateSealValue = { | ||
| additionalDisclaimer: `The [Insert State] Department of Labor and Workforce Development is an equal opportunity employer and provides equal opportunity programs. Auxiliary aids and services are available upon request to assist individuals with disabilities.`, | ||
| stateSealKey: 'US', | ||
| } | ||
|
|
||
| export const useStateSealValue = () => { | ||
| return useLocalStorageJSON<StateSealKey>('stateSeal', defaultValue) | ||
| return useLocalStorageJSON<StateSealValue>('stateSeal', defaultValue) | ||
| } | ||
|
|
||
| const { Row } = EmailBlock | ||
| const { Row, Cell } = EmailBlock | ||
|
|
||
| interface StateSealMarkupProps { | ||
| stateSealKey: StateSealKey | ||
| additionalDisclaimer: string | ReactElement | ||
| } | ||
|
|
||
| export const StateSealMarkup: FC<StateSealMarkupProps> = ({ | ||
| additionalDisclaimer, | ||
| stateSealKey, | ||
| }) => { | ||
| return ( | ||
| <> | ||
| <Row> | ||
| <Cell className={StyleDefaults.layout.narrow} style={additionalDisclaimerStyles}> | ||
| {additionalDisclaimer} | ||
| </Cell> | ||
| </Row> | ||
| <Row> | ||
| <SpacingCell size="medium" /> | ||
| </Row> | ||
| <Row> | ||
| <Cell className={StyleDefaults.layout.narrow} style={imageContainerStyles}> | ||
| <img | ||
| src={`${Config.siteMetadata?.siteUrl}/state-seal-designation/${StateSeals[stateSealKey]}.png`} | ||
| alt={startCase(stateSealKey)} | ||
| style={imageStyles} | ||
| /> | ||
| </Cell> | ||
| </Row> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export const StateSeal: FC<EmailComponentProps> = ({}) => { | ||
| const [value] = useStateSealValue() | ||
|
|
||
| return ( | ||
| <Row> | ||
| <td className={StyleDefaults.layout.narrow} style={tdStyles}> | ||
| <img | ||
| src={`${Config.siteMetadata?.siteUrl}/state-seal-designation/${StateSeals[value]}.png`} | ||
| alt={startCase(value)} | ||
| style={styles} | ||
| /> | ||
| </td> | ||
| </Row> | ||
| <StateSealMarkup | ||
| additionalDisclaimer={value.additionalDisclaimer} | ||
| stateSealKey={value.stateSealKey} | ||
| /> | ||
| ) | ||
| } | ||
|
|
||
| const tdStyles: CSSProperties = { | ||
| const additionalDisclaimerStyles: CSSProperties = { | ||
| ...Text.caption.small.regular, | ||
| color: '#777777', | ||
| lineHeight: 1.5, | ||
| } | ||
|
|
||
| const imageContainerStyles: CSSProperties = { | ||
| ...StyleDefaults.inline.colors, | ||
| display: 'block', | ||
| } | ||
|
|
||
| const styles: CSSProperties = { | ||
| height: '30px', | ||
| const imageStyles: CSSProperties = { | ||
| height: 30, | ||
| display: 'block', | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
src/templates/EmailTemplateComponents/__tests__/StateSeal.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { render } from '@testing-library/react' | ||
| import React from 'react' | ||
| import { StateSeal, StateSealMarkup, StateSealValue } from '../StateSeal' | ||
| import { faker } from '@faker-js/faker' | ||
| import { buildUniqueEmailComponent, emailPartWrapper } from 'src/testHelpers' | ||
|
|
||
| describe('StateSealMarkup', () => { | ||
| it('displays the additional content', () => { | ||
| const text = faker.lorem.paragraph() | ||
| const { baseElement } = render( | ||
| <StateSealMarkup additionalDisclaimer={<span>{text}</span>} stateSealKey="NewJersey" />, | ||
| { wrapper: emailPartWrapper }, | ||
| ) | ||
| expect(baseElement).toContainHTML(`<span>${text}</span>`) | ||
| }) | ||
|
|
||
| it('displays the selected state seal', () => { | ||
| const { getByRole } = render( | ||
| <StateSealMarkup additionalDisclaimer={faker.lorem.paragraph()} stateSealKey="NewJersey" />, | ||
| { wrapper: emailPartWrapper }, | ||
| ) | ||
| const img: HTMLImageElement = getByRole('img') as any | ||
| expect(img.alt).toEqual('New Jersey') | ||
| expect(img.src).toContain('/state-seal-designation/New-Jersey.png') | ||
| }) | ||
| }) | ||
|
|
||
| describe('StateSeal', () => { | ||
| let stateSealValue: StateSealValue | ||
|
|
||
| beforeEach(() => { | ||
| stateSealValue = { | ||
| additionalDisclaimer: faker.lorem.paragraph(), | ||
| stateSealKey: 'NewJersey', | ||
| } | ||
| localStorage.setItem('stateSeal', JSON.stringify(stateSealValue)) | ||
| }) | ||
|
|
||
| it('displays the additional content', () => { | ||
| const { baseElement } = render( | ||
| <StateSeal emailComponent={buildUniqueEmailComponent('StateSeal')}>{null}</StateSeal>, | ||
| { wrapper: emailPartWrapper }, | ||
| ) | ||
| expect(baseElement).toContainHTML(stateSealValue.additionalDisclaimer) | ||
| }) | ||
|
|
||
| it('displays the selected state seal', () => { | ||
| const { getByRole } = render( | ||
| <StateSeal emailComponent={buildUniqueEmailComponent('StateSeal')}>{null}</StateSeal>, | ||
| { wrapper: emailPartWrapper }, | ||
| ) | ||
| const img: HTMLImageElement = getByRole('img') as any | ||
| expect(img.alt).toEqual('New Jersey') | ||
| expect(img.src).toContain('/state-seal-designation/New-Jersey.png') | ||
| }) | ||
|
|
||
| it('when there is no state seal value saved it renders without issue', () => { | ||
| localStorage.removeItem('stateSeal') | ||
| const { queryByRole, queryByText } = render( | ||
| <StateSeal emailComponent={buildUniqueEmailComponent('StateSeal')}>{null}</StateSeal>, | ||
| { wrapper: emailPartWrapper }, | ||
| ) | ||
| expect(queryByRole('img')).not.toBeNull() | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| import React from 'react' | ||
| import { render } from '@testing-library/react' | ||
| import userEvent from '@testing-library/user-event' | ||
| import { EditStateSeal } from '../EditStateSeal' | ||
| import { StateSealValue } from 'src/templates/EmailTemplateComponents/StateSeal' | ||
| import { faker } from '@faker-js/faker' | ||
|
|
||
| describe('EditStateSeal', () => { | ||
| const stored = (): StateSealValue => { | ||
| const stored = localStorage.getItem('stateSeal') ?? '{}' | ||
| return JSON.parse(stored) | ||
| } | ||
|
|
||
| it('has an editable state seal dropdown', async () => { | ||
| const user = userEvent.setup() | ||
| const { getByRole } = render(<EditStateSeal />) | ||
|
|
||
| const stateSealSelect = () => getByRole('button') | ||
| expect(stateSealSelect()).toHaveTextContent('US') | ||
|
|
||
| await user.click(stateSealSelect()) | ||
| await user.click(getByRole('option', { name: 'California' })) | ||
|
|
||
| expect(stateSealSelect()).toHaveTextContent('California') | ||
| expect(stored().stateSealKey).toEqual('California') | ||
| }) | ||
|
|
||
| it('has an editable additional disclaimer text', async () => { | ||
| const user = userEvent.setup() | ||
| const { getByLabelText } = render(<EditStateSeal />) | ||
| const value = faker.lorem.paragraph() | ||
| const additionalDisclaimerField = () => getByLabelText('Additional Disclaimer') | ||
|
|
||
| await user.clear(additionalDisclaimerField()) | ||
| await user.type(additionalDisclaimerField(), value) | ||
| expect(additionalDisclaimerField()).toHaveTextContent(value) | ||
| }) | ||
| }) |