How to use @tds/shared-typography - 10 common examples

it('can be inverted', () => {
      let text = doShallowStyled()
      expect(text).not.toHaveStyleRule('color', typography.invertedColor.color)

      text = doShallowStyled({ invert: true })
      expect(text).toHaveStyleRule('color', typography.invertedColor.color)
    })

it('can be inverted', () => {
      let paragraph = doShallowStyled()
      expect(paragraph).toHaveStyleRule('color', typography.color.color)
      expect(paragraph).not.toHaveStyleRule('color', typography.invertedColor.color)

      paragraph = doShallowStyled({ invert: true })
      expect(paragraph).not.toHaveStyleRule('color', typography.color.color)
      expect(paragraph).toHaveStyleRule('color', typography.invertedColor.color)
    })

it('can be inverted', () => {
      let paragraph = doShallowStyled()
      expect(paragraph).toHaveStyleRule('color', typography.color.color)
      expect(paragraph).not.toHaveStyleRule('color', typography.invertedColor.color)

      paragraph = doShallowStyled({ invert: true })
      expect(paragraph).not.toHaveStyleRule('color', typography.color.color)
      expect(paragraph).toHaveStyleRule('color', typography.invertedColor.color)
    })

it('can be inverted', () => {
      let text = doShallowStyled()
      expect(text).not.toHaveStyleRule('color', typography.invertedColor.color)

      text = doShallowStyled({ invert: true })
      expect(text).toHaveStyleRule('color', typography.invertedColor.color)
    })

it('can be bold', () => {
      let text = doShallowStyled({ bold: false })
      expect(text).not.toHaveStyleRule('font-weight', typography.boldFont.fontWeight.toString())

      text = doShallowStyled({ bold: true })
      expect(text).toHaveStyleRule('font-weight', typography.boldFont.fontWeight.toString())
    })

it('can be bold', () => {
      let text = doShallowStyled({ bold: false })
      expect(text).not.toHaveStyleRule('font-weight', typography.boldFont.fontWeight.toString())

      text = doShallowStyled({ bold: true })
      expect(text).toHaveStyleRule('font-weight', typography.boldFont.fontWeight.toString())
    })

it('can be inverted', () => {
      let paragraph = doShallowStyled()
      expect(paragraph).toHaveStyleRule('color', typography.color.color)
      expect(paragraph).not.toHaveStyleRule('color', typography.invertedColor.color)

      paragraph = doShallowStyled({ invert: true })
      expect(paragraph).not.toHaveStyleRule('color', typography.color.color)
      expect(paragraph).toHaveStyleRule('color', typography.invertedColor.color)
    })

it('can be inverted', () => {
      let paragraph = doShallowStyled()
      expect(paragraph).toHaveStyleRule('color', typography.color.color)
      expect(paragraph).not.toHaveStyleRule('color', typography.invertedColor.color)

      paragraph = doShallowStyled({ invert: true })
      expect(paragraph).not.toHaveStyleRule('color', typography.color.color)
      expect(paragraph).toHaveStyleRule('color', typography.invertedColor.color)
    })

it('renders a span with display: block if specified', () => {
      let text = doShallowStyled()
      expect(text).not.toHaveStyleRule('display', typography.blockText.display)

      text = doShallowStyled({ block: true })
      expect(text).toHaveStyleRule('display', typography.blockText.display)
    })

it('renders a span with display: block if specified', () => {
      let text = doShallowStyled()
      expect(text).not.toHaveStyleRule('display', typography.blockText.display)

      text = doShallowStyled({ block: true })
      expect(text).toHaveStyleRule('display', typography.blockText.display)
    })