Rename tags

src/components/ContentTags/Inline.tsx

@@ -9,7 +9,8 @@ import {
   CardProps
 } from 'src/components/Card'
 import { LinkContext } from 'src/components/ContentTags/Links'
-import { InlineHighlightType } from 'src/types/ContentTagTypes'
+
+export type InlineHighlightType = 'white' | 'none' | 'blue' | 'pink'
 
 interface HighlightContextProps {
   inHighlightType: InlineHighlightType
@@ -47,7 +48,7 @@ export const Italic = (props: JSX.IntrinsicElements['span']) => (
   />
 )
 
-export const Strong = ({
+export const HighlightBold = ({
   highlightType,
   ...props
 }: {
@@ -74,9 +75,7 @@ export const Strong = ({
           css={[
             css`
               font-weight: bold;
-              background: ${highlightType === 'yellow'
-                ? colors('yellow100')
-                : highlightType === 'blue'
+              background: ${highlightType === 'blue'
                 ? mix(color, colors('blue50'))
                 : highlightType === 'white'
                 ? colors('white')
@@ -101,11 +100,11 @@ export const Strong = ({
   }
 }
 
-Strong.defaultProps = {
+HighlightBold.defaultProps = {
   highlightType: 'default'
 }
 
-export const Em = ({
+export const Highlight = ({
   highlightType,
   ...props
 }: {
@@ -132,8 +131,6 @@ export const Em = ({
               font-style: normal;
               background: ${highlightType === 'pink'
                 ? colors('pink50')
-                : highlightType === 'yellow'
-                ? colors('yellow100')
                 : highlightType === 'blue'
                 ? mix(color, colors('blue50'))
                 : highlightType === 'white'
@@ -157,6 +154,6 @@ export const Em = ({
   }
 }
 
-Em.defaultProps = {
+Highlight.defaultProps = {
   highlightType: 'default'
 }

src/components/ContentTags/index.tsx

@@ -1,7 +1,12 @@
 export { Ul, Ol, OlLi, UlLi } from 'src/components/ContentTags/List'
 export { P, PFullWidth } from 'src/components/ContentTags/P'
 export { Hr } from 'src/components/ContentTags/Hr'
-export { Strong, Em, Bold, Italic } from 'src/components/ContentTags/Inline'
+export {
+  HighlightBold,
+  Highlight,
+  Bold,
+  Italic
+} from 'src/components/ContentTags/Inline'
 export { ExternalLink, InternalLink } from 'src/components/ContentTags/Links'
 export { H3 } from 'src/components/ContentTags/Headings'
 export { Img } from 'src/components/ContentTags/Img'

src/components/EmojiWithText.tsx

@@ -4,7 +4,7 @@ import { VariableNames } from 'src/types/VariableNames'
 import Emoji, { EmojiProps } from 'src/components/Emoji'
 import emojiLabelMapping from 'src/lib/emojiLabelMapping'
 import letterEmojiMapping from 'src/lib/letterEmojiMapping'
-import { Em } from 'src/components/ContentTags'
+import { Highlight } from 'src/components/ContentTags'
 import BubbleQuoteContext from 'src/components/BubbleQuoteContext'
 
 interface EmojiWithTextProps {
@@ -20,9 +20,9 @@ const EmojiWithText = ({ letter, size }: EmojiWithTextProps) => {
     throw new Error()
   }
   return (
-    <Em highlightType={inQuote ? 'blue' : 'white'}>
+    <Highlight highlightType={inQuote ? 'blue' : 'white'}>
       {label[locale]} <Emoji size={size}>{emoji}</Emoji>{' '}
-    </Em>
+    </Highlight>
   )
 }