[Proposal] Typography Component

Have in our theme a typography object which has the following styles defined. Then if there is <Typography /> component. It can take in a type prop which can be of the following types

classNames applied {
    root: /* a generic wrapper class for the root element */
    display1: /* extends theme.typography.display1 from theme passes */
    display2: /* extends theme.typography.display2 from theme passes */
    display3: /* extends theme.typography.display3 from theme passes */
    heading: /* extends theme.typography.heading from theme passes */
    title: /* extends theme.typography.title from theme passes */
    subheading: /* extends theme.typography.subheading from theme passes */
    body1: /* extends theme.typography.body1 from theme passes */
    body2: /* extends theme.typography.body2 from theme passes */
    alignLeft: /* applied if align="left" */
    alignRight: /* applied if align="right" */
    alignJusitfy: /* applied if align="justify" */
    color: /* for color props, by default this will default theme.*/
}

So something on the lines like these

<Typography variant="body1" color="inherit" align="right" />

Then the way this component will be build

const headlineMapping = {
    display4: 'h1',
    display3: 'h1',
    display2: 'h1',
    display1: 'h1',
    headline: 'h1',
    title: 'h2',
    subheading: 'h3',
    body2: 'aside',
    body1: 'p',
};
const Component = headlineMapping[variant]) || 'p'
return (
  <Component className={css`${root} ${variant} ${align} ${color}`} />
);

And if no prop provided, variant defaults to body and color defaults to theme primary.color align defaults to left

Things I Studied For This: Reference: Composition in React Emotion https://emotion.sh/docs/composition

Inspiration Taken From React Material UI. I chose this composition technique, because it is really elegant and this way you can build on top of things in a very elegant way.

I would really love your feedback on this @TejasQ @peterszerzo 😃

[adeelibr]

Kudos to this https://github.com/contiamo/operational-ui/blob/master/src/utils/constants.ts Nicely written. I admit I didn’t see this before 😅

Also Typography was just a proposal to have all type styling in one component (as a suggestion)

---

Still if we are on this topic there should be more components then like <H1/> & <P> as you suggested.

[fabien0102]

The main focus of this library is to have (at least try) the more friendly API as possible, even if it’s sometime harder to build (and it’s sometime very tricky to achieve, but we love challenges). This is why we try to doing our components “Readme first” to have the more natural API as possible, without thinking about the implementation 😉

Also, we already have one place for our style variables => https://github.com/contiamo/operational-ui/blob/master/src/utils/constants.ts so I don’t really see your point, and to be fair, I will be very surprise that we have maintainability issues with these components ^^

Sometime it make sense to regroup some usecases, as for Page, because it’s more semantic and easy to use. But I really don’t think that is the case for typography, it’s just more verbose 😕