Deprecated fonts

const fonts = [{
  className: 'u-titleXS',
  label: 'Main Title XS'  
}, {
  className: 'u-titleS',
  label: 'Main Title S'  
}, {
  className: 'u-titleL',
  label: 'Main Title L'  
}, {
  className: 'u-h1',
  label: 'Heading 1'
}, {
  className: 'u-h2',
  label: 'Heading 2'
}, {
  className: 'u-h3',
  label: 'Heading 3'
}, {
  className: 'u-h4',
  label: 'Heading 4'
}
];

<Fonts fonts={fonts}></Fonts>

New fonts

const fonts = [{
  className: 'display-xx-large',
  label: 'This is a main title'
}, {
  className: 'display-x-large',
  label: 'This is a title'
}, {
  className: 'display-large',
  label: 'This is a heading level one'
}, {
  className: 'display-medium',
  label: 'This is a heading level two'
}, {
  className: 'display-small',
  label: 'This is a heading level three'
}, {
  className: 'display-x-small',
  label: 'This is a heading level four'
}, {
  className: 'large',
  label: 'This is a large text'
},{
  className: 'body',
  label: 'This is a body text'
},
{
  className: 'tiny',
  label: 'This is a tiny text'
},
{
  className: 'bold',
  label: 'This is a bold text'
},
{
  className: 'italic',
  label: 'This is a italic text'
},
{
  className: 'link',
  label: 'This is a link text'
},
{
  className: 'error',
  label: 'This is an error text'
},
{
  className: 'display-xx-large--soft',
  label: 'This is a main title'
}, {
  className: 'display-x-large--soft',
  label: 'This is a title'
}, {
  className: 'display-large--soft',
  label: 'This is a heading level one'
}, {
  className: 'display-medium--soft',
  label: 'This is a heading level two'
}, {
  className: 'display-small--soft',
  label: 'This is a heading level three'
}, {
  className: 'display-x-small--soft',
  label: 'This is a heading level four'
}, {
  className: 'large--soft',
  label: 'This is a large text'
},{
  className: 'body--soft',
  label: 'This is a body text'
},
{
  className: 'tiny--soft',
  label: 'This is a tiny text'
}];

<Fonts fonts={fonts}></Fonts>