Added DateRange subcomponent; changed email max-width to 690

content/email-templates/build-from-scratch.yaml

@@ -6,6 +6,7 @@ components:
   - kind: Header
     subComponents:
       - kind: DepartmentSeal
+      - kind: DateRange
       - kind: Title
       - kind: ProgramName
   - kind: Name

content/email-templates/dua-eligible.yaml

@@ -6,6 +6,7 @@ components:
   - kind: Header
     subComponents:
       - kind: DepartmentSeal
+      - kind: DateRange
       - kind: Title
       - kind: ProgramName
   - kind: Name

content/email-templates/overpayment-partially-waived.yaml

@@ -7,6 +7,7 @@ components:
     subComponents:
       - kind: DepartmentSeal
         required: true
+      - kind: DateRange
       - kind: Title
         required: true
       - kind: ProgramName

content/email-templates/status-update-1-2-3-step.yaml

@@ -7,6 +7,7 @@ components:
     subComponents:
       - kind: DepartmentSeal
         required: true
+      - kind: DateRange
       - kind: Title
         required: true
       - kind: ProgramName

content/email-templates/status-update.yaml

@@ -7,6 +7,7 @@ components:
     subComponents:
       - kind: DepartmentSeal
         required: true
+      - kind: DateRange
       - kind: Title
         required: true
       - kind: ProgramName

content/email-templates/waiver-application.yaml

@@ -7,6 +7,7 @@ components:
     subComponents:
       - kind: DepartmentSeal
         required: true
+      - kind: DateRange
       - kind: Title
         required: true
       - kind: ProgramName

src/appTypes.ts

@@ -13,7 +13,7 @@ export const EmailTemplateComponentsMapping = {
     'InformationalBox',
   ],
   Footer: ['AdditionalContent'],
-  Header: ['Title', 'ProgramName', 'DepartmentSeal'],
+  Header: ['DateRange', 'Title', 'ProgramName', 'DepartmentSeal'],
   Name: [],
   Disclaimer: [],
   StateSeal: [],

src/templates/EmailEditorContent/EditEmailSubComponent.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react'
 import { EmailSubComponentProps } from '../EmailTemplateSubComponents/shared'
+import { DateRange } from '../EmailTemplateSubComponents/DateRange'
 import { Title } from '../EmailTemplateSubComponents/Title'
 import { useShouldShowEmailPart } from '../ShouldShowEmailPart'
 import { ProgramName } from '../EmailTemplateSubComponents/ProgramName'
@@ -22,6 +23,8 @@ export const EditEmailSubComponent: FC<EmailSubComponentProps> = (props) => {
   switch (props.emailSubComponent.kind) {
     case 'AdditionalContent':
       return <AdditionalContent {...props} />
+    case 'DateRange':
+      return <DateRange {...props} />
     case 'Title':
       return <Title {...props} />
     case 'ProgramName':

src/templates/EmailTemplateSubComponents/DateRange.tsx

@@ -0,0 +1,52 @@
+import React, { FC, CSSProperties } from 'react'
+import { EditableElement } from 'src/ui/EditableElement'
+import { useIsCurrentlyActiveEmailPart } from '../CurrentlyActiveEmailPart'
+import { useEmailPartsContentFor } from '../EmailPartsContent'
+import { StyleDefaults, Text, Spacing } from '../styles'
+import { EmailBlock } from 'src/ui'
+
+const defaultValue = '[00/00/0000] - [00/00/0000]'
+
+const { Row } = EmailBlock
+
+export const useDateRangeValue = (id: string) => {
+  return useEmailPartsContentFor(id, defaultValue)
+}
+
+export const DateRange: FC<EmailSubComponentProps> = ({ emailSubComponent }) => {
+  const { activate } = useIsCurrentlyActiveEmailPart(emailSubComponent.id)
+  const [value, setValue] = useDateRangeValue(emailSubComponent.id)
+
+  return (
+    <Row
+      elements={[
+        'cell',
+        'table',
+        'row',
+        { part: 'cell', style: cellContainerStyles, className: StyleDefaults.layout.narrow },
+      ]}
+    >
+      <EditableElement
+        element="h3"
+        label="Date Range"
+        onClick={activate}
+        onFocus={activate}
+        onValueChange={setValue}
+        style={styles}
+        value={value}
+      />
+    </Row>
+  )
+}
+
+const cellContainerStyles: CSSProperties = {
+  ...StyleDefaults.inline.colors,
+}
+
+const styles: CSSProperties = {
+  ...Text.header.h3.bold,
+  lineHeight: 1,
+  margin: 0,
+  marginBottom: Spacing.size.tiny,
+  padding: 0,
+}

src/templates/EmailTemplateSubComponents/__tests__/DateRange.test.tsx

@@ -0,0 +1,50 @@
+import React from 'react'
+import { DateRange } from '../DateRange'
+import userEvent from '@testing-library/user-event'
+import { render } from '@testing-library/react'
+import { EmailTemplate } from 'src/appTypes'
+import { faker } from '@faker-js/faker'
+import {
+  buildUniqueEmailSubComponent,
+  emailPartWrapper,
+  expectActiveEmailPartToBe,
+  expectActiveEmailPartToNotBe,
+  expectEmailPartContentFor,
+} from 'src/testHelpers'
+
+describe('Date Range', () => {
+  let emailSubComponent: EmailTemplate.UniqueSubComponent
+
+  beforeEach(() => {
+    emailSubComponent = buildUniqueEmailSubComponent('Header', { kind: 'DateRange' })
+  })
+
+  it('is editable', async () => {
+    const user = userEvent.setup()
+    const { queryByText, getByLabelText, baseElement } = render(
+      <DateRange emailSubComponent={emailSubComponent} />,
+      { wrapper: emailPartWrapper },
+    )
+
+    const value = faker.lorem.words(4)
+    const key = emailSubComponent.id
+    const input = getByLabelText('Date Range')
+    await user.clear(input)
+    await user.type(input, value)
+
+    expect(queryByText(value)).not.toBeNull()
+    expectEmailPartContentFor(key, baseElement)
+  })
+
+  it('activates when clicked', async () => {
+    const user = userEvent.setup()
+    const { getByLabelText, baseElement } = render(
+      <DateRange emailSubComponent={emailSubComponent} />,
+      { wrapper: emailPartWrapper },
+    )
+    const key = emailSubComponent.id
+    expectActiveEmailPartToNotBe(key, baseElement)
+    await user.click(getByLabelText('Date Range'))
+    expectActiveEmailPartToBe(key, baseElement)
+  })
+})

src/templates/styles.tsx

@@ -307,7 +307,7 @@ export const Text = {
 
 export const Spacing = {
   layout: {
-    maxWidth: 690,
+    maxWidth: 600,
   },
   size: {
     tiny: 5,