Typography

Typography can be used to set themes for react components, learn more at https://mui.com/material-ui/api/typography/

Property	description	Required	Default
align	Align text examples: Align.center text alignment is centered, Align.inherit text is aligned the same as the components parent, Align.justify text aligned with both margins, Align.left test is aligned with the left margin, Align.right text is aligned with right margin		Align.inherit
body	The content that you want displayed. String		N/A
paragraph	Boolean		false
tooltip	Text that appears when hovering over the component. string		N/A
variant	Variant is a enum, that can Body1, Body2, Button, Caption, H1, H2, H3, H4, H5, H6, Inherit, Overline, Subtitle1, and Subtitle2		Body1

Examples

Basic Whisper to show how to use the Typography component.

JavaScript

import { whisper } from "@oliveai/ldk"
import { 
  WhisperComponentType,
  Align,
  Variant,
 } from "@oliveai/ldk/src/whisper/types"

(async () => {
  try {
    await whisper.create({
      label: 'Typography Example',
      onClose: () => {
        console.debug('closed');
      },
      components: [
        {
          type: WhisperComponentType.Typography,
          body: 'default = align: "inherit", paragraph: false, variant: "body1"',
        },
        {
          type: WhisperComponentType.Typography,
          paragraph: true,
          body: 'Paragraph: true',
        },
        {
          type: WhisperComponentType.Typography,
          align: Align.Center,
          body: 'Align: Center',
        },
        {
          type: WhisperComponentType.Typography,
          align: Align.Justify,
          body: 'Align: Justify',
        },
        {
          type: WhisperComponentType.Typography,
          align: Align.Left,
          body: 'Align: Left',
        },
        {
          type: WhisperComponentType.Typography,
          align: Align.Right,
          body: 'Align: Right',
        },
        {
          type: WhisperComponentType.Typography,
          tooltip: 'tooltip test',
          body: 'Tooltip',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Body1,
          body: 'body1',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Body2,
          body: 'body2',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Button,
          body: 'button',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Caption,
          body: 'caption',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H1,
          body: 'h1',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H2,
          body: 'h2',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H3,
          body: 'h3',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H4,
          body: 'h4',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H5,
          body: 'h5',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.H6,
          body: 'h6',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Inherit,
          body: 'inherit',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Overline,
          body: 'overline',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Subtitle1,
          body: 'subtitle1',
        },
        {
          type: WhisperComponentType.Typography,
          variant: Variant.Subtitle2,
          body: 'subtitle2',
        },
      ],
    });
  } catch (e) {
    console.debug(e)
  }
})

React

import { React, ReactWhisper } from '@oliveai/ldk';
import { 
  Align,
  Variant,
 } from "@oliveai/ldk/src/whisper/types"
 
 const TypographyExample = () => {
  
  return (
    <oh-whisper label="Typography Example" onClose={() => {}}>
      <oh-typography
        body='default = align: "inherit", paragraph: false, variant: "body1"'
      />
      <oh-typography
          paragraph={true}
          body='Paragraph: true'
      />
      <oh-typography
        align={Align.Center}
        body='Align: Center'
      />
      <oh-typography
        align={Align.Justify}
        body='Align: Justify'
      />
      <oh-typography
        align={Align.Left}
        body='Align: Left'
      />
      <oh-typography
        align={Align.Right}
        body='Align: Right'
      />
      <oh-typography
        tooltip='tooltip test'
        body='Tooltip'
      />
      <oh-typography
        variant={Variant.Body1}
        body='body1'
      />
      <oh-typography
        variant={Variant.Body2}
        body='body2'
      />
      <oh-typography
        variant={Variant.Button}
        body='button'
      />
      <oh-typography
        variant={Variant.Caption}
        body='caption'
      />
      <oh-typography
        variant={Variant.H1}
        body='h1'
      />
      <oh-typography
        variant={Variant.H1}
        body='h1'
      />
      <oh-typography
        variant={Variant.H2}
        body='h2'
      />
      <oh-typography
        variant={Variant.H3}
        body='h3'
      />
      <oh-typography
        variant={Variant.H4}
        body='h4'
      />
      <oh-typography
        variant={Variant.H5}
        body='h5'
      />
      <oh-typography
        variant={Variant.H6}
        body='h6'
      />
      <oh-typography
        variant={Variant.Inherit}
        body='inherit'
      />
      <oh-typography
        variant={Variant.Overline}
        body='overline'
      />
      <oh-typography
        variant={Variant.Subtitle1}
        body='subtitle1'
      />
      <oh-typography
        variant={Variant.Subtitle2}
        body='subtitle2'
      />
    </oh-whisper>
  );
};

ReactWhisper.renderNewWhisper(<TypographyExample />);