Communication component

[akatrukhin]

Communication component

Open in Storybook ↗️        Design specs in Figma

Component includes a few state examples

• Welcome
• Hello
• Empty
• Error
• Thanks

All fields and elements are editable. Design requirements allows to build custom state in the scope of the current layout.

Examples:

There are 6 available templates in CommunicationOptions:

• Default
• Welcome,
• Hello
• Empty,
• Error,
• Thanks

which could be applied through option:

      <Communication
        option={CommunicationOptions.Welcome}
      />

To customize templates, apply custom values into fields :

      <Communication
        option={CommunicationOptions.Welcome}
        fields={{
          title: `Getting Started with HVC Library`,
          desc: `This guide explains how to setup your HVC Library in your project. It includes information on prerequisites, installation process, and HVC component usage in your application to verify your setup.`,
          actions: {
            primary: {
              label: "Documentation",
              action: () => alert("Documentation button clicked"),
            },
            secondary: {
              label: "Samples",
              action: () => alert("Samples button clicked"),
            },
          },
        }}
      />

Or build you own just with fields:

      <Communication
        fields={{
          title: `Hello`,
          actions: {
            primary: {
              label: "World!",
              action: () => alert("Documentation button clicked"),
            },
          },
        }}
      />

Welcome state:

Also, PR included:

• Storybook updated to v6 + TypeScript fix
• Global Themes Enum added

@thure Changes are not huge but affect all library components.

[akatrukhin]

Looks excellent! I don't see any issues at this time.

I wonder if we should call the component something other than States, since that could potentially be confused with redux reducers or some interaction-oriented HOC, but we can revisit it if #2 ever gets prioritized.

Agree, I will discuss it, also, with design team for better naming