Component / Heading

[jpye-finch]

In many components we define styles for text. eg. const Title=, const Heading=, ... creating inconsistencies.

This ticket is to create a Heading component that can be used by other components to ensure consistency of styling, margin and padding.

The heading component has

• 5 sizes ( Hero, Extra Large, Large, Medium and Small)
• Colour = copy #222
• 1 font style Noto Sans Semi bold
• Question. Should we have a prop for 'default, with form icon, with profile icon)? or leave it
• Question. Different Heading sizes for different screen sizes? Desktop v Mobile...

https://design-system.service.gov.uk/styles/typography/ https://www.figma.com/file/SsqCzO2eherXXCKyixmli9/OpenCRVS-Design-System-v2-WIP?node-id=28%3A6005

good example: good example: https://dcos-labs.github.io/ui-kit/?path=/docs/typography-headingtext--default-heading-text-1

Tasks

• [x] Create component

[naftis]

Question. Should we have a prop for 'default, with form icon, with profile icon)? or leave it

If it's common to have icons in headings, that's one possibility. One other option is to support it with some kind of generic aligning prop (so that the icon & text are vertically centered properly), and then give an example in Storybook of how to add an icon;

<Heading variant="h1" alignItems="center">
  <HandWaveIcon />
  Welcome to OpenCRVS!
</Heading>

Question. Different Heading sizes for different screen sizes? Desktop v Mobile...

I feel like they could be auto-responsive yeah (if that's what you meant). I think almost always they need to be responsive anyway?

Also ideas for that;

• https://developer.mozilla.org/en-US/docs/Web/CSS/clamp CSS clamp?
  • https://utopia.fyi/type/calculator There are these kinds of fancy CSS generators also to have fluid font sizes.
  • (or just fixed font sizes for different breakpoints for now)

[Zangetsu101]

I think clamp is a great idea to handle different font sizes in different screens. It will be a lot more fluid than using breakpoints

[jpye-finch]

At the moment we have fixed font sizes that don't change at different breakpoints.

I believe we are changing the heading eg. in the Content component. Desktop is H2 then on Mobile change to H3.

There is only so many instances where this is important right now. Personally have a hunch that different fonts sizes for different break points is fine.

Desktop and Mobile

[jpye-finch]

Gov Uk seem to have this approach https://design-system.service.gov.uk/styles/typography/