feat(Text): add "me" option to atMention prop

CHANGELOG.md

@@ -22,6 +22,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Features
 - Add `Attachment` component @levithomason ([#220](https://github.com/stardust-ui/react/pull/220))
+- Add `atMention="me"` value to Text API @codepretty ([#277](https://github.com/stardust-ui/react/pull/277))
 
 ### Documentation
 - Add `Theming` guide @almedint, @levithomason ([#152](https://github.com/stardust-ui/react/pull/152))

docs/src/examples/components/Text/Variations/TextExampleAtMention.shorthand.tsx

@@ -1,6 +1,12 @@
 import React from 'react'
 import { Text } from '@stardust-ui/react'
 
-const TextExampleAtMentionShorthand = () => <Text atMention content="@Russell Wilson" />
+const TextExampleAtMentionShorthand = () => (
+  <div>
+    <Text atMention content="@someone" />
+    <br />
+    <Text atMention="me" content="@me" />
+  </div>
+)
 
 export default TextExampleAtMentionShorthand

docs/src/examples/components/Text/Variations/TextExampleAtMention.tsx

@@ -1,6 +1,12 @@
 import React from 'react'
 import { Text } from '@stardust-ui/react'
 
-const TextExampleAtMention = () => <Text atMention>@Russell Wilson</Text>
+const TextExampleAtMention = () => (
+  <div>
+    <Text atMention>@someone</Text>
+    <br />
+    <Text atMention="me">@me</Text>
+  </div>
+)
 
 export default TextExampleAtMention

src/components/Text/Text.tsx

@@ -8,7 +8,7 @@ import { ComponentVariablesInput, ComponentPartStyle } from '../../../types/them
 
 export interface ITextProps {
   as?: any
-  atMention?: boolean
+  atMention?: boolean | 'me'
   className?: string
   content?: any
   disabled?: boolean
@@ -41,8 +41,8 @@ class Text extends UIComponent<Extendable<ITextProps>, any> {
     /** Change the default element type of the Text component */
     as: customPropTypes.as,
 
-    /** Set as @mention Text component */
-    atMention: PropTypes.bool,
+    /** At mentions can be formatted to draw users' attention. Mentions for "me" can be formatted to appear differently. */
+    atMention: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['me'])]),
 
     /** Additional CSS class name(s) to apply.  */
     className: PropTypes.string,

src/themes/teams/components/Text/textStyles.ts

@@ -27,7 +27,13 @@ export default {
   }: TextStylesParams): ICSSInJSStyle => {
     return {
       ...(truncated && truncateStyle),
-      ...(atMention && { color: v.atMentionTextColor }),
+      ...(atMention === true && {
+        color: v.atMentionOtherTextColor,
+      }),
+      ...(atMention === 'me' && {
+        color: v.atMentionMeTextColor,
+        fontWeight: v.atMentionMeFontWeight,
+      }),
       ...(disabled && { color: v.disabledTextColor }),
       ...(error && { color: v.errorTextColor }),
       ...(success && { color: v.successTextColor }),

src/themes/teams/components/Text/textVariables.ts

@@ -6,7 +6,9 @@ export interface ITextVariables {
   textWeightRegular: number
   textWeightSemibold: number
   textWeightBold: number
-  atMentionTextColor: string
+  atMentionMeFontWeight: number
+  atMentionMeTextColor: string
+  atMentionOtherTextColor: string
   disabledTextColor: string
   errorTextColor: string
   successTextColor: string
@@ -32,7 +34,10 @@ export interface ITextVariables {
 
 export default (siteVariables): ITextVariables => {
   return {
-    atMentionTextColor: siteVariables.orange04,
+    atMentionOtherTextColor: siteVariables.brand06,
+    atMentionMeTextColor: siteVariables.orange04,
+    atMentionMeFontWeight: siteVariables.fontWeightBold,
+
     disabledTextColor: siteVariables.gray06,
     errorTextColor: siteVariables.red,
     successTextColor: siteVariables.green04,