docs(Prototype): Chat messages with reactions popover prototype

docs/src/components/Sidebar/Sidebar.tsx

@@ -265,6 +265,14 @@ class Sidebar extends React.Component<any, any> {
                   <Menu.Item as={NavLink} exact to="/prototype-chat-pane" activeClassName="active">
                     Chat Pane
                   </Menu.Item>
+                  <Menu.Item
+                    as={NavLink}
+                    exact
+                    to="/prototype-chat-message-with-popover"
+                    activeClassName="active"
+                  >
+                    Chat message with popover
+                  </Menu.Item>
                   <Menu.Item
                     as={NavLink}
                     exact

docs/src/prototypes/chatMessageWithPopover/ChatMessageWithPopover.tsx

@@ -0,0 +1,63 @@
+import { ChatMessage } from '@stardust-ui/react'
+
+import * as React from 'react'
+import * as cx from 'classnames'
+import Popover from './Popover'
+
+const janeAvatar = {
+  image: 'public/images/avatar/small/ade.jpg',
+  status: { color: 'green', icon: 'check' },
+}
+
+interface ChatMessageWithPopoverProps {
+  className?: string
+}
+
+interface ChatMessageWithPopoverState {
+  focused: boolean
+}
+
+class ChatMessageWithPopover extends React.Component<
+  ChatMessageWithPopoverProps,
+  ChatMessageWithPopoverState
+> {
+  state = {
+    focused: false,
+  }
+
+  changeFocusState = (isFocused: boolean) => {
+    this.state.focused !== isFocused && this.setState({ focused: isFocused })
+  }
+
+  handleFocus = () => {
+    this.changeFocusState(true)
+  }
+
+  handleBlur = e => {
+    const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget)
+    this.changeFocusState(shouldPreserveFocusState)
+  }
+
+  render() {
+    return (
+      <ChatMessage
+        author="Jane Doe"
+        timestamp="Yesterday, 10:15 PM"
+        content={{
+          content: (
+            <div>
+              <Popover className="actions" />
+              <a href="/">Link</a> Hover me to see the actions <a href="/">Some Link</a>
+            </div>
+          ),
+        }}
+        avatar={janeAvatar}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        className={cx(this.props.className, this.state.focused ? 'focused' : '')}
+      />
+    )
+  }
+}
+
+export default ChatMessageWithPopover

docs/src/prototypes/chatMessageWithPopover/ChatWithPopover.tsx

@@ -0,0 +1,56 @@
+import { Chat, Provider } from '@stardust-ui/react'
+import * as React from 'react'
+import ChatMessageWithPopover from './ChatMessageWithPopover'
+
+const ChatWithPopover = () => (
+  <Provider
+    theme={{
+      componentStyles: {
+        ChatMessage: {
+          root: ({ theme: { siteVariables } }) => ({
+            position: 'relative',
+
+            '&.focused .actions': {
+              opacity: 1,
+            },
+            ':hover .actions': {
+              opacity: 1,
+            },
+            '& a': {
+              color: siteVariables.brand,
+            },
+          }),
+        },
+        ContextMenu: {
+          root: ({ theme: { siteVariables } }) => ({
+            background: siteVariables.white,
+            boxShadow: '0 0.2rem 1.6rem 0 rgba(37,36,35,.3)',
+            borderRadius: '.3rem',
+            marginTop: '5px',
+          }),
+        },
+        Menu: {
+          root: {
+            '& a:focus': {
+              textDecoration: 'none',
+              color: 'inherit',
+            },
+            '& a': {
+              color: 'inherit',
+            },
+          },
+        },
+      },
+    }}
+  >
+    <Chat
+      items={[
+        { key: 'a', content: <ChatMessageWithPopover /> },
+        { key: 'b', content: <ChatMessageWithPopover /> },
+        { key: 'c', content: <ChatMessageWithPopover /> },
+      ]}
+    />
+  </Provider>
+)
+
+export default ChatWithPopover

docs/src/prototypes/chatMessageWithPopover/Popover.tsx

@@ -0,0 +1,184 @@
+import {
+  Menu,
+  Popup,
+  toolbarBehavior,
+  popupFocusTrapBehavior,
+  createComponent,
+  ComponentSlotStyle,
+  ComponentVariablesInput,
+  toolbarButtonBehavior,
+} from '@stardust-ui/react'
+import { ReactChildren } from 'types/utils'
+import * as React from 'react'
+import * as cx from 'classnames'
+
+export interface PopoverProps {
+  className?: string
+}
+
+interface PopoverState {
+  focused: boolean
+  popupOpened: boolean
+}
+
+class Popover extends React.Component<PopoverProps, PopoverState> {
+  state = {
+    focused: false,
+    popupOpened: false,
+  }
+
+  changeFocusState = (isFocused: boolean) => {
+    this.state.focused !== isFocused && this.setState({ focused: isFocused })
+  }
+
+  handleFocus = () => {
+    this.changeFocusState(true)
+  }
+
+  handleBlur = e => {
+    // if e.relatedTarget === null it means the click was outside this container
+    if (!this.state.popupOpened || e.relatedTarget === null) {
+      const shouldPreserveFocusState = e.currentTarget.contains(e.relatedTarget)
+      this.changeFocusState(shouldPreserveFocusState)
+    } else {
+      e.stopPropagation()
+    }
+  }
+
+  handleMenuClick = () => {
+    // close popup when other MenuItem clicked, but the event propagation was stopped
+    this.state.popupOpened && this.setState({ popupOpened: false })
+  }
+
+  popoverStyles = ({ theme: { siteVariables } }) => ({
+    transition: 'opacity 0.2s',
+    position: 'absolute',
+    top: '-20px',
+    right: '5px',
+    background: siteVariables.white,
+    boxShadow: '0px 2px 4px #ddd',
+    borderRadius: '.3rem',
+    opacity: 0,
+
+    '& .smile-emoji': {
+      display: 'none',
+    },
+
+    '&.focused .smile-emoji': {
+      display: 'flex',
+    },
+
+    '&:hover .smile-emoji': {
+      display: 'flex',
+    },
+  })
+
+  render() {
+    return (
+      <Menu
+        styles={this.popoverStyles}
+        iconOnly
+        className={cx(this.props.className, this.state.focused ? 'focused' : '')}
+        items={[
+          {
+            key: 'smile',
+            icon: 'smile',
+            className: 'smile-emoji',
+            accessibility: toolbarButtonBehavior,
+            'aria-label': 'smile one',
+          },
+          {
+            key: 'smile2',
+            icon: 'smile',
+            className: 'smile-emoji',
+            accessibility: toolbarButtonBehavior,
+            'aria-label': 'smile two',
+          },
+          {
+            key: 'smile3',
+            icon: 'smile',
+            className: 'smile-emoji',
+            accessibility: toolbarButtonBehavior,
+            'aria-label': 'smile three',
+          },
+          {
+            key: 'a',
+            icon: 'thumbs up',
+            accessibility: toolbarButtonBehavior,
+            'aria-label': 'thumbs up',
+          },
+          {
+            key: 'c',
+            icon: 'ellipsis horizontal',
+            accessibility: toolbarButtonBehavior,
+            'aria-label': 'more options',
+          },
+        ].map(itemShorthandValue => render =>
+          render(itemShorthandValue, this.renderItemOrContextMenu),
+        )}
+        onFocus={this.handleFocus}
+        onBlur={this.handleBlur}
+        onClick={this.handleMenuClick}
+        accessibility={toolbarBehavior}
+        data-is-focusable={true}
+      />
+    )
+  }
+
+  renderItemOrContextMenu = (MenuItem, props) => {
+    if (props.icon !== 'ellipsis horizontal') {
+      return <MenuItem {...props} />
+    }
+
+    return (
+      <Popup
+        key={props.key}
+        position="below"
+        accessibility={popupFocusTrapBehavior}
+        trigger={
+          <MenuItem
+            {...props}
+            onClick={e => {
+              this.setState(prev => ({ popupOpened: !prev.popupOpened }))
+            }}
+          />
+        }
+        open={this.state.popupOpened}
+        onOpenChange={(e, newProps) => {
+          this.setState({ popupOpened: newProps.open })
+        }}
+        content={
+          <ContextMenu>
+            <Menu
+              vertical
+              pills
+              className="actions"
+              items={[
+                { key: 'bookmark', icon: 'folder', content: 'Save this message' },
+                { key: 'linkify', icon: 'linkify', content: 'Copy link' },
+                { key: 'translate', icon: 'translate', content: 'Translate' },
+              ]}
+            />
+          </ContextMenu>
+        }
+      />
+    )
+  }
+}
+
+export default Popover
+
+const ContextMenu = createComponent<ContextMenuProps>({
+  displayName: 'ContextMenu',
+  render: ({ stardust, className, children }) => {
+    const { classes } = stardust
+    return <div className={cx(className, classes.root)}>{children}</div>
+  },
+})
+
+interface ContextMenuProps {
+  className?: string
+  styles?: ComponentSlotStyle
+  variables?: ComponentVariablesInput
+  children?: ReactChildren
+}

docs/src/prototypes/chatMessageWithPopover/index.tsx

@@ -0,0 +1 @@
+export { default } from './ChatWithPopover'

docs/src/routes.tsx

@@ -30,6 +30,12 @@ const Router = () => (
             path="/prototype-chat-pane"
             component={require('./prototypes/chatPane/index').default}
           />,
+          <DocsLayout
+            exact
+            key="/prototype-chat-message-with-popover"
+            path="/prototype-chat-message-with-popover"
+            component={require('./prototypes/chatMessageWithPopover/index').default}
+          />,
           <DocsLayout
             exact
             key="/prototype-async-shorthand"