[C-4476] HarmonyNative MusicBadge component (#8765)

packages/mobile/.storybook/storybook.requires.ts

@@ -59,6 +59,7 @@ const getStories = () => {
     '../src/harmony-native/Paper.stories.tsx': require('../src/harmony-native/components/layout/Paper/Paper.stories.tsx'),
     '../src/harmony-native/Avatar.stories.tsx': require('../src/harmony-native/components/Avatar/Avatar.stories.tsx'),
     '../src/harmony-native/Hint.stories.tsx': require('../src/harmony-native/components/Hint/Hint.stories.tsx'),
+    '../src/harmony-native/MusicBadge.stories.tsx': require('../src/harmony-native/components/MusicBadge/MusicBadge.stories.tsx'),
     '../src/harmony-native/SelectablePill.stories.tsx': require('../src/harmony-native/components/input/SelectablePill/SelectablePill.stories.tsx'),
     '../src/harmony-native/TextInput.stories.tsx': require('../src/harmony-native/components/input/TextInput/TextInput.stories.tsx'),
     '../src/harmony-native/PasswordInput.stories.tsx': require('../src/harmony-native/components/input/PasswordInput/PasswordInput.stories.tsx'),

packages/mobile/src/harmony-native/components/MusicBadge/MusicBadge.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IconRobot } from '@audius/harmony-native'
+
+import type { MusicBadgeProps } from './MusicBadge'
+import { MusicBadge } from './MusicBadge'
+
+const meta: Meta<MusicBadgeProps> = {
+  title: 'Components/MusicBadge',
+  component: MusicBadge,
+  argTypes: {
+    variant: {
+      description: 'Variant',
+      control: { type: 'radio' },
+      options: ['default', 'accent']
+    },
+    color: {
+      description: 'Color',
+      control: { type: 'radio' },
+      options: ['aiGreen', 'trendingBlue']
+    }
+  },
+  render: (props) => <MusicBadge {...props} />
+}
+
+export default meta
+
+type Story = StoryObj<MusicBadgeProps>
+
+export const Default: Story = {
+  args: {
+    icon: IconRobot,
+    children: 'Example Badge'
+  }
+}
+
+export const Accent: Story = {
+  args: {
+    variant: 'accent',
+    icon: IconRobot,
+    children: 'Example Badge'
+  }
+}
+
+export const Color: Story = {
+  args: {
+    color: 'aiGreen',
+    icon: IconRobot,
+    children: 'Example Badge'
+  }
+}

packages/mobile/src/harmony-native/components/MusicBadge/MusicBadge.tsx

@@ -0,0 +1,83 @@
+import type { ComponentPropsWithoutRef } from 'react'
+
+import { css } from '@emotion/native'
+import Color from 'color'
+
+import type { SpecialColors, IconComponent } from '@audius/harmony-native'
+import { useTheme } from 'app/harmony-native/foundations/theme'
+
+import { Text } from '../Text/Text'
+import { Flex } from '../layout/Flex/Flex'
+
+export type MusicBadgeVariant = 'default' | 'accent'
+
+export type MusicBadgeSize = 's' | 'm'
+
+export type MusicBadgeProps = {
+  /**
+   * The type of the MusicBadge
+   */
+  variant?: MusicBadgeVariant
+  /**
+   * The icon to display in the left of the MusicBadge
+   */
+  icon?: IconComponent
+  /**
+   * Override the colors of the MusicBadge
+   */
+  color?: SpecialColors
+} & ComponentPropsWithoutRef<'div'>
+
+export const MusicBadge = (props: MusicBadgeProps) => {
+  const { variant = 'default', icon: Icon, color: colorProp, children } = props
+  const { color } = useTheme()
+
+  const backgroundColor = colorProp
+    ? color.special[colorProp]
+    : variant === 'default'
+    ? color.background.default
+    : color.background.accent
+  const textColor = colorProp
+    ? (color.special[colorProp] as string)
+    : variant === 'default'
+    ? color.text.default
+    : color.text.accent
+  const iconColor = colorProp
+    ? (color.special[colorProp] as string)
+    : variant === 'default'
+    ? color.icon.default
+    : color.icon.accent
+  const borderColor = colorProp
+    ? Color(color.special[colorProp]).fade(0.5).toString()
+    : variant === 'default'
+    ? color.border.strong
+    : color.border.accent
+
+  return (
+    <Flex
+      direction='row'
+      alignItems='center'
+      justifyContent='center'
+      borderRadius='s'
+      border='strong'
+      gap='xs'
+      ph='s'
+      pv='xs'
+      style={css({
+        backgroundColor: Color(backgroundColor).fade(0.92).toString(),
+        borderColor
+      })}
+    >
+      {Icon ? <Icon size='s' fill={iconColor} /> : null}
+      <Text
+        variant='label'
+        size='s'
+        // Hack - should not have to explicitly  set lineHeight, but there's a bug
+        // that adds extra margins to demibold + bold text variants.
+        style={css({ color: textColor, lineHeight: 16 })}
+      >
+        {children}
+      </Text>
+    </Flex>
+  )
+}

packages/mobile/src/harmony-native/components/index.ts

@@ -4,6 +4,7 @@ export type { TextLinkProps } from './TextLink/types'
 export * from './layout'
 export * from './Avatar/Avatar'
 export * from './Hint/Hint'
+export * from './MusicBadge/MusicBadge'
 export * from './input/SelectablePill/SelectablePill'
 export * from './input/TextInput/TextInput'
 export * from './input/TextInput/types'