feat(ChatMessage): add hasMention and isImportant variables in Teams theme

[mnajdova]

This PR adds hasMention, isImportant, hasMentionColor and isImportantColor variables in the ChatMessage for Teams theme. These variables are controlling the color of the badge, as well as are adding the left border on the messages.

Prototype:

API (Teams theme):

Code:

import React from 'react'
import { Avatar, Chat, Divider } from '@stardust-ui/react'
const janeAvatar = {
  image: 'public/images/avatar/small/ade.jpg',
  status: {
    color: 'green',
    icon: 'check',
  },
}
const items = [
  {
    message: {
      content: (
        <Chat.Message
          content="Hello"
          author="John Doe"
          timestamp="Yesterday, 10:15 PM"
          mine
          badge={{
            icon: 'mention',
          }}
          variables={{
            hasMention: true,
          }}
        />
      ),
    },
    contentPosition: 'end',
    attached: 'top',
    key: 'message-id-1',
  },
  {
    message: {
      content: (
        <Chat.Message
          content="I'm back!"
          author="John Doe"
          timestamp="Yesterday, 10:15 PM"
          mine
          badge={{
            icon: 'redbang',
          }}
          variables={{
            isImportant: true,
          }}
        />
      ),
    },
    contentPosition: 'end',
    attached: true,
    key: 'message-id-2',
  },
  {
    message: {
      content: (
        <Chat.Message
          content="Thanks for waiting!"
          author="John Doe"
          timestamp="Yesterday, 10:15 PM"
          mine
          badge={{
            icon: 'mention',
          }}
          variables={{
            hasMention: true,
          }}
        />
      ),
    },
    contentPosition: 'end',
    attached: 'bottom',
    key: 'message-id-3',
  },
  {
    gutter: {
      content: <Avatar {...janeAvatar} />,
    },
    message: {
      content: (
        <Chat.Message
          content="Hi"
          author="Jane Doe"
          timestamp="Yesterday, 10:15 PM"
          badge={{
            icon: 'redbang',
          }}
          variables={{
            isImportant: true,
          }}
        />
      ),
    },
    attached: 'top',
    key: 'message-id-4',
  },
  {
    gutter: {
      content: <Avatar {...janeAvatar} />,
    },
    message: {
      content: (
        <Chat.Message
          content="No problem!"
          author="Jane Doe"
          timestamp="Yesterday, 10:15 PM"
          badge={{
            icon: 'mention',
          }}
          variables={{
            hasMention: true,
          }}
        />
      ),
    },
    attached: true,
    key: 'message-id-5',
  },
  {
    gutter: {
      content: <Avatar {...janeAvatar} />,
    },
    message: {
      content: (
        <Chat.Message
          content="What's up?"
          author="Jane Doe"
          timestamp="Yesterday, 10:15 PM"
          badge={{
            icon: 'mention',
          }}
          variables={{
            hasMention: true,
          }}
        />
      ),
    },
    attached: 'bottom',
    key: 'message-id-6',
  },
]

const ChatExample = () => <Chat items={items} />

export default ChatExample

[layershifter]

Can we move this to chatMessageVariables?

[mnajdova]

Yep, will add hasMentionColor and isImportantColor variables there.

[codecov]

Codecov Report

Merging #841 into master will not change coverage.
The diff coverage is n/a.

@@           Coverage Diff           @@
##           master     #841   +/-   ##
=======================================
  Coverage   93.54%   93.54%           
=======================================
  Files          21       21           
  Lines         728      728           
  Branches       69       69           
=======================================
  Hits          681      681           
  Misses         47       47

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c086719...b149a7e. Read the comment docs.

[kuzhelov]

👍