Terra-core: Create Section Header component

[dylanklohr]

Issue Description

Create a new Section Header component with OCS theming.

Issue Type

• [x] New Feature
• [ ] Enhancement
• [ ] Bug
• [ ] Other

[dylanklohr]

Technical Design: terra-section-header

Summary:

Create a new package called terra-section-header to provide an uncontrolled sub-header presentational component.

Responsiveness

No special considerations needed for this component.

Accessibility

• None.

I18N / Bidirectionality

• This component must be able to be rendered with its mirror-imaged equivalent for rtl locales.

React Props

| Prop | Type | Required | Default | Description |
| ------------ | ------------ | ------------ | ------------ | ----------------- |
| title | string | true | undefined | Text to be displayed in the section header |
| level | number | optional | 2 | Sets the heading level. One of 1, 2, 3, 4, 5, 6. |
| onClick | func | false | undefined | Function to trigger when the toggle icon is clicked. |
| isOpen | bool | false | false | If set, the toggle icon is displayed in its 'open' state. |

Themeable Styles

• accordion icon (via an inlined SVG in css)
• background
• border
• font-size
• text-transform

Examples

Minimal

<SectionHeader title="Minimal Example" />

Complex

<SectionHeader
  title="Complex Example"
  isToggleable
  isAnimated
  isInitiallyOpen
  onClick={() => {}}
  isOpen={true}
/>

[dm123455]

Talked offline we would add another optional prop is_toggler_present/is_accordian_present!

[dylanklohr]

@dm123455 done

[dm123455]

Thanks! Can we make font size and text transform to be themable?

[dm123455]

+1

[dm123455]

@neilpfeiffer can you please take a look?

[ChaseSinclair]

+1

[bjankord]

+1 on tech design. We'll want to get @neilpfeiffer to take a look and a +1 from one of the other terra maintainers, @mjhenkes, @ryanthemanuel, or @JakeLaCombe

[mjhenkes]

I assume this section header is not intended for lists or tables right? Also is the plan to build this on top of the terra-toggle component? Is this a controlled or uncontrolled component?

[JakeLaCombe]

Can we make the text a node instead of a string. You should still be able to use strings just fine, and having it as a node makes it easier to add wrappers around the text for functionality such as text truncation or other possible styling.

[dylanklohr]

@mjhenkes, I hadn't planned on building this on top of the toggle, as I didn't know how it plays into @neilpfeiffer's plan on how this would end up being expanded on during future enhancements. Looking at its implementation, it does look like the two would share quite a bit of the same functionality. If Neil doesn't see an issue building on top of this, I don't see an issue doing so.

Regarding use cases, I'm still waiting on an updated set of callouts.

This is an uncontrolled component, responsible for maintaining all of its own internal state.

[JakeLaCombe]

Any chance we could throw a warning instead of an error, like we do for the time-input? https://github.com/cerner/terra-core/blob/master/packages/terra-time-input/src/TimeInput.jsx#L112

[JakeLaCombe]

Given my comments, +1

[mjhenkes]

After looking deeper into the section header concept and speaking with @dylan-sftwr. I'd recommend that we remove the toggle-able functionality from this section header and replace it with an 'onclick' callback when the toggle button is clicked. Depending on where this section header would be used different methods of 'toggling' will have be be implemented. For instance in a list the style of toggle-ability that this component is suggesting won't work and being able to toggle sections in a list (accordion) is a main use case for a section header like this.

[bjankord]

Talked offline in scrum about creating a presentational component, "Section Header" which uses on isOpen prop to control its chevron icon placement and an onClick prop to trigger state updates. We also plan to create a "Toggle Section Header" which controls its own state and is uncontrolled by parent state similar to the terra-toggle-button component. With this component, you'd still be able to set the initial state similar to the toggle-button, but after that, the toggle section header state would be managed within itself.

[dylanklohr]

@bjankord @mjhenkes @JakeLaCombe @ChaseSinclair @dm123455 @neilpfeiffer,

Can I get eyes on this, and new +1's?

I've updated the tech-design to reflect the decisions made by this morning's post-scrum (this is the purely-presentational implementation, I'll be making a separate issue/tech-design after this component has been implemented, as I plan on consuming it to create the self-contained toggleable version.

[mjhenkes]

isToggleable could be enabled by the presence of the onclick function.
Do we still need isOpen when we have isInitiallyOpen?

[dylanklohr]

@mjhenkes

[mjhenkes]

+1

[ChaseSinclair]

+1

[bjankord]

+1 on tech design.

[neilpfeiffer]

+1

[dm123455]

+1

[PaulSolDev]

JIRA created