[C-3440] Add Hint component to native harmony (#6904)

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

@@ -57,7 +57,8 @@ const getStories = () => {
     '../src/harmony-native/Box.stories.tsx': require('../src/harmony-native/components/layout/Box/Box.stories.tsx'),
     '../src/harmony-native/Flex.stories.tsx': require('../src/harmony-native/components/layout/Flex/Flex.stories.tsx'),
     '../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/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')
   }
 }
 

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

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react-native'
+
+import { IconQuestionCircle } from '@audius/harmony-native'
+
+import { Flex } from '../layout/Flex/Flex'
+
+import type { HintProps } from './Hint'
+import { Hint } from './Hint'
+
+const messages = {
+  hintMessage: 'A helpful hint message to provide information to the user'
+}
+
+const meta: Meta<HintProps> = {
+  title: 'Components/Hint',
+  component: Hint,
+  argTypes: {},
+  args: {
+    icon: IconQuestionCircle
+  },
+  render: (props) => (
+    <Flex p='l'>
+      <Hint {...props}>{messages.hintMessage}</Hint>
+    </Flex>
+  )
+}
+
+export default meta
+
+type Story = StoryObj<HintProps>
+
+export const Default: Story = {}

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

@@ -0,0 +1,34 @@
+import type { Icon } from 'app/harmony-native/icons'
+
+import { Text } from '../Text/Text'
+import type { PaperProps } from '../layout'
+import { Box, Paper } from '../layout'
+
+export type HintProps = {
+  icon: Icon
+} & PaperProps
+
+export const Hint = (props: HintProps) => {
+  const { icon: Icon, children, ...other } = props
+  return (
+    <Paper
+      role='alert'
+      direction='row'
+      gap='l'
+      ph='l'
+      pv='m'
+      alignItems='center'
+      backgroundColor='surface2'
+      shadow='flat'
+      border='strong'
+      {...other}
+    >
+      <Icon size='l' color='default' />
+      <Box flex={1}>
+        <Text variant='body' color='default'>
+          {children}
+        </Text>
+      </Box>
+    </Paper>
+  )
+}

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

@@ -2,3 +2,4 @@ export * from './Link'
 export * from './Text/Text'
 export * from './layout'
 export * from './Avatar/Avatar'
+export * from './Hint/Hint'