Added basic subcomponent toggle highlighting in the email sidebar

src/templates/CurrentlyActiveEmailPart.tsx

@@ -17,8 +17,16 @@ export const CurrentlyActiveEmailPartContext = createContext<CurrentlyActiveEmai
   () => {},
 ])
 
-export const CurrentlyActiveEmailPart: FC<{ children: ReactNode }> = ({ children }) => {
-  const value = useState('')
+interface CurrentlyActiveEmailPartProps {
+  children: ReactNode
+  initiallyActiveEmailPartId?: string
+}
+
+export const CurrentlyActiveEmailPart: FC<CurrentlyActiveEmailPartProps> = ({
+  children,
+  initiallyActiveEmailPartId,
+}) => {
+  const value = useState(initiallyActiveEmailPartId ?? '')
 
   return (
     <CurrentlyActiveEmailPartContext.Provider value={value}>

src/templates/EmailEditorSidebar/EmailEditorSidebarAccordion.css

@@ -106,6 +106,7 @@
   margin: 1rem 0;
   padding: 0 2rem;
 }
+
 .accordion-email-subcomponent:first-of-type {
   margin-top: 1.5rem;
 }
@@ -114,6 +115,14 @@
   align-items: center;
   display: flex;
   justify-content: space-between;
+  border-radius: 5px;
+  border-top-right-radius: 20px;
+  border-bottom-right-radius: 20px;
+  transition: background-color ease-in-out 150ms;
+}
+
+.accordion-email-subcomponent .label-and-toggle.active {
+  background-color: var(--gray-medium);
 }
 
 .accordion-email-subcomponent label {

src/templates/EmailEditorSidebar/EmailEditorSidebarAccordion.tsx

@@ -11,6 +11,8 @@ import './EmailEditorSidebarAccordion.css'
 import { RightPointer } from 'src/ui/RightPointer'
 import { EmailSubComponentControls } from './EmailSubcomponentControls'
 import { labelForComponent } from './labelForComponent'
+import { useIsCurrentlyActiveEmailPart } from '../CurrentlyActiveEmailPart'
+import classNames from 'classnames'
 
 interface ContainerProps {
   children: ReactNode
@@ -97,9 +99,11 @@ interface EmailSubComponentProps {
 const EmailSubComponent: FC<EmailSubComponentProps> = ({ componentId, emailSubComponent }) => {
   const toggleId = `toggle-${emailSubComponent.id}`
   const shouldShow = useShouldShowEmailPart(emailSubComponent.id)
+  const { isActive } = useIsCurrentlyActiveEmailPart(emailSubComponent.id)
+
   return (
     <div className="accordion-email-subcomponent">
-      <div className="label-and-toggle">
+      <div className={classNames('label-and-toggle', { active: isActive })}>
         <label htmlFor={toggleId}>{labelForSubComponent(emailSubComponent.kind)}</label>
         <Toggle
           id={toggleId}

src/templates/EmailEditorSidebar/__tests__/EmailEditorSidebarAccordion.test.tsx

@@ -8,10 +8,10 @@ import { EmailEditorSidebarAccordion } from '../EmailEditorSidebarAccordion'
 import { EmailTemplate } from 'src/appTypes'
 import {
   WrapperComponent,
-  buildEmailTemplateSubComponent,
   buildUniqueEmailComponent,
   buildUniqueEmailSubComponent,
 } from 'src/testHelpers'
+import { CurrentlyActiveEmailPart } from 'src/templates/CurrentlyActiveEmailPart'
 
 describe(EmailEditorSidebarAccordion.Container.displayName!, () => {
   it('displays its children', () => {
@@ -342,4 +342,32 @@ describe(EmailEditorSidebarAccordion.EmailSubComponent.displayName!, () => {
     )
     expect(queryByText('Status variant')).not.toBeNull()
   })
+
+  it('is highlighted when the subcomponent is active', () => {
+    const { baseElement } = render(
+      <ShouldShowEmailPart>
+        <CurrentlyActiveEmailPart initiallyActiveEmailPartId={emailSubComponent.id}>
+          <EmailEditorSidebarAccordion.EmailSubComponent
+            componentId={faker.lorem.word()}
+            emailSubComponent={emailSubComponent}
+          />
+        </CurrentlyActiveEmailPart>
+      </ShouldShowEmailPart>,
+    )
+    expect(baseElement.querySelector('.active')).not.toBeNull()
+  })
+
+  it('is not hightlighted when the subcomponent is inactive', () => {
+    const { baseElement } = render(
+      <ShouldShowEmailPart>
+        <CurrentlyActiveEmailPart initiallyActiveEmailPartId={faker.lorem.words(3)}>
+          <EmailEditorSidebarAccordion.EmailSubComponent
+            componentId={faker.lorem.word()}
+            emailSubComponent={emailSubComponent}
+          />
+        </CurrentlyActiveEmailPart>
+      </ShouldShowEmailPart>,
+    )
+    expect(baseElement.querySelector('.active')).toBeNull()
+  })
 })