Add bold, italic, link, text, tooltip components

packages/snaps-sdk/src/jsx/components/Link.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import { Bold, Italic } from './formatting';
+import type { LinkProps } from './Link';
+import { Link } from './Link';
+
+const meta: Meta<typeof Link> = {
+  title: 'Link',
+  component: Link,
+  argTypes: {
+    href: {
+      description: 'The URL to link to.',
+      control: 'text',
+    },
+    children: {
+      description:
+        'The text to display in the link. This can contain formatting components.',
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * The link component renders a hyperlink, and an icon to indicate that the link
+ * will open in a new tab.
+ */
+export const Default: Story<LinkProps> = {
+  render: (props) => <Link {...props} />,
+  args: {
+    href: 'https://metamask.io',
+    children: 'MetaMask',
+  },
+};
+
+/**
+ * Links can contain the usual formatting components, such as `Bold` and
+ * `Italic`.
+ */
+export const Formatting: Story<LinkProps> = {
+  render: (props) => <Link {...props} />,
+  args: {
+    href: 'https://metamask.io',
+    children: (
+      <Bold>
+        Formatted <Italic>link</Italic>
+      </Bold>
+    ),
+  },
+};

packages/snaps-sdk/src/jsx/components/Text.stories.tsx

@@ -0,0 +1,61 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import { Bold, Italic } from './formatting';
+import { Link } from './Link';
+import type { TextProps } from './Text';
+import { Text } from './Text';
+
+const meta: Meta<typeof Text> = {
+  title: 'Text/Text',
+  component: Text,
+  argTypes: {
+    children: {
+      description: 'The text to render.',
+      table: {
+        type: {
+          summary:
+            'SnapsChildren<string | StandardFormattingElement | LinkElement>',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * The text component renders text. It can be used in combination with other
+ * formatting components to create rich text.
+ */
+export const Default: Story<TextProps> = {
+  render: (props) => <Text {...props} />,
+  args: {
+    children: 'This is some text.',
+  },
+};
+
+/**
+ * Text can contain formatting components (like `Bold` and `Italic`) to create
+ * rich text.
+ */
+export const Formatting: Story<TextProps> = {
+  render: (props) => (
+    <Text {...props}>
+      This is some <Bold>bold</Bold> and <Italic>italic</Italic> text.
+    </Text>
+  ),
+  args: {},
+};
+
+/**
+ * Text can contain links.
+ */
+export const WithLink: Story<TextProps> = {
+  render: (props) => (
+    <Text {...props}>
+      This is some text with a link:{' '}
+      <Link href="https://metamask.io">metamask.io</Link>.
+    </Text>
+  ),
+  args: {},
+};

packages/snaps-sdk/src/jsx/components/Tooltip.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import { Bold, Italic } from './formatting';
+import { Text } from './Text';
+import type { TooltipProps } from './Tooltip';
+import { Tooltip } from './Tooltip';
+
+const meta: Meta<typeof Tooltip> = {
+  title: 'Tooltip',
+  component: Tooltip,
+  argTypes: {
+    content: {
+      description: 'The element to display in the tooltip.',
+      table: {
+        type: {
+          summary:
+            'TextElement | StandardFormattingElement | LinkElement | string',
+        },
+      },
+    },
+    children: {
+      description:
+        'The children to render outside the tooltip, which will trigger the tooltip when hovered over.',
+      table: {
+        type: {
+          summary:
+            'TextElement | StandardFormattingElement | LinkElement | ImageElement | boolean | null',
+        },
+      },
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * The tooltip component shows a tooltip when hovering over the children, like
+ * text, a link, or an image.
+ */
+export const Default: Story<TooltipProps> = {
+  render: (props) => <Tooltip {...props} />,
+  args: {
+    content: <Text>Tooltip content.</Text>,
+    children: <Text>Hover me!</Text>,
+  },
+};
+
+/**
+ * The tooltip component can contain text with formatting, like bold and italic
+ * text.
+ */
+export const Formatting: Story<TooltipProps> = {
+  render: (props) => <Tooltip {...props} />,
+  args: {
+    content: (
+      <Text>
+        Tooltips can contain <Bold>bold</Bold> and <Italic>italic</Italic> text
+        as well.
+      </Text>
+    ),
+    children: <Text>Hover me!</Text>,
+  },
+};

packages/snaps-sdk/src/jsx/components/formatting/Bold.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import type { BoldProps } from './Bold';
+import { Bold } from './Bold';
+
+const meta: Meta<typeof Bold> = {
+  title: 'Text/Bold',
+  component: Bold,
+  argTypes: {
+    children: {
+      description: 'The text to render in bold.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * The bold component renders text in bold. It can be used in combination with
+ * other formatting components to create rich text.
+ */
+export const Default: Story<BoldProps> = {
+  render: (props) => <Bold {...props} />,
+  args: {
+    children: 'I am bold!',
+  },
+};

packages/snaps-sdk/src/jsx/components/formatting/Italic.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import type { ItalicProps } from './Italic';
+import { Italic } from './Italic';
+
+const meta: Meta<typeof Italic> = {
+  title: 'Text/Italic',
+  component: Italic,
+  argTypes: {
+    children: {
+      description: 'The text to render in italic.',
+      table: {
+        type: { summary: 'string' },
+      },
+    },
+  },
+};
+
+export default meta;
+
+/**
+ * The italic component renders text in italic. It can be used in combination with
+ * other formatting components to create rich text.
+ */
+export const Default: Story<ItalicProps> = {
+  render: (props) => <Italic {...props} />,
+  args: {
+    children: 'I am italic!',
+  },
+};

packages/snaps-storybook/src/components/icons/ExportIcon.tsx

@@ -0,0 +1,11 @@
+import { createIcon } from '@chakra-ui/react';
+
+export const ExportIcon = createIcon({
+  displayName: 'ExportIcon',
+  viewBox: '0 0 512 512',
+  d: 'm313 469l-114 0c-108 0-156-48-156-156l0-114c0-108 48-156 156-156l39 0c13 0 23 9 23 23 0 13-10 23-23 23l-39 0c-83 0-110 27-110 110l0 114c0 83 27 110 110 110l114 0c83 0 110-27 110-110l0-39c0-13 10-23 23-23 14 0 23 10 23 23l0 39c0 108-48 156-156 156z m-39-208c-7 0-11-3-16-7-9-9-9-23 0-32l133-133-36 0c-14 0-23-10-23-23 0-14 9-23 23-23l91 0c14 0 23 9 23 23l0 91c0 14-9 23-23 23-13 0-23-9-23-23l0-36-133 133c-4 4-9 7-16 7z',
+  defaultProps: {
+    width: '14px',
+    height: '14px',
+  },
+});

packages/snaps-storybook/src/components/icons/index.ts

@@ -1,6 +1,7 @@
 export * from './CopyIcon';
 export * from './CopySuccessIcon';
 export * from './DangerIcon';
+export * from './ExportIcon';
 export * from './EyeIcon';
 export * from './EyeSlashIcon';
 export * from './QuestionIcon';

packages/snaps-storybook/src/components/snaps/bold/Bold.tsx

@@ -0,0 +1,13 @@
+import type { BoldProps } from '@metamask/snaps-sdk/jsx';
+import type { FunctionComponent } from 'react';
+
+import type { RenderProps } from '../../Renderer';
+
+export const Bold: FunctionComponent<RenderProps<BoldProps>> = ({
+  children,
+  Renderer,
+}) => (
+  <b>
+    <Renderer id="bold" element={children} />
+  </b>
+);

packages/snaps-storybook/src/components/snaps/bold/index.ts

@@ -0,0 +1 @@
+export { Bold as Component } from './Bold';

packages/snaps-storybook/src/components/snaps/index.ts

@@ -4,27 +4,35 @@
 // window and provide the necessary context for the Snap to render.
 
 import * as Address from './address';
+import * as Bold from './bold';
 import * as Box from './box';
 import * as Button from './button';
 import * as Copyable from './copyable';
 import * as Divider from './divider';
 import * as Footer from './footer';
 import * as Heading from './heading';
+import * as Italic from './italic';
+import * as Link from './link';
 import * as Row from './row';
 import * as Text from './text';
+import * as Tooltip from './tooltip';
 import type { Component } from './types';
 
 // TODO: Change `string` to `JSXElement['type']`.
 export const SNAPS_COMPONENTS: Record<string, Component> = {
   Address,
+  Bold,
   Box,
   Button,
   Copyable,
   Divider,
   Footer,
   Heading,
+  Italic,
+  Link,
   Row,
   Text,
+  Tooltip,
 };
 
 export * from './types';

packages/snaps-storybook/src/components/snaps/italic/Italic.tsx

@@ -0,0 +1,13 @@
+import type { ItalicProps } from '@metamask/snaps-sdk/jsx';
+import type { FunctionComponent } from 'react';
+
+import type { RenderProps } from '../../Renderer';
+
+export const Italic: FunctionComponent<RenderProps<ItalicProps>> = ({
+  children,
+  Renderer,
+}) => (
+  <i>
+    <Renderer id="italic" element={children} />
+  </i>
+);

packages/snaps-storybook/src/components/snaps/italic/index.ts

@@ -0,0 +1 @@
+export { Italic as Component } from './Italic';

packages/snaps-storybook/src/components/snaps/link/Link.styles.ts

@@ -0,0 +1,10 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+
+export const styles = defineStyleConfig({
+  baseStyle: defineStyle({
+    color: 'primary.default',
+    display: 'inline-flex',
+    alignItems: 'center',
+    gap: '1',
+  }),
+});

packages/snaps-storybook/src/components/snaps/link/Link.tsx

@@ -0,0 +1,17 @@
+import { Link as ChakraLink } from '@chakra-ui/react';
+import type { LinkProps } from '@metamask/snaps-sdk/jsx';
+import type { FunctionComponent } from 'react';
+
+import { ExportIcon } from '../../icons';
+import type { RenderProps } from '../../Renderer';
+
+export const Link: FunctionComponent<RenderProps<LinkProps>> = ({
+  href,
+  children,
+  Renderer,
+}) => (
+  <ChakraLink target="_blank" href={href}>
+    <Renderer id="link" element={children} />
+    <ExportIcon />
+  </ChakraLink>
+);

packages/snaps-storybook/src/components/snaps/link/index.ts

@@ -0,0 +1,2 @@
+export { Link as Component } from './Link';
+export { styles } from './Link.styles';

packages/snaps-storybook/src/components/snaps/text/Text.styles.ts

@@ -2,7 +2,7 @@ import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
 
 export const styles = defineStyleConfig({
   baseStyle: defineStyle({
-    fontSize: 'sm',
+    fontSize: 'inherit',
     lineHeight: 'short',
   }),
 });

packages/snaps-storybook/src/components/snaps/tooltip/Tooltip.styles.ts

@@ -0,0 +1,24 @@
+import { cssVar, defineStyle, defineStyleConfig } from '@chakra-ui/react';
+
+const background = cssVar('popper-arrow-bg');
+
+export const styles = defineStyleConfig({
+  baseStyle: defineStyle({
+    background: 'background.default',
+    color: 'text.default',
+    boxShadow: 'md',
+    [background.variable]: 'colors.background.default',
+  }),
+
+  sizes: {
+    sm: defineStyle({
+      fontSize: 'xs',
+      fontWeight: 'normal',
+      lineHeight: 'short',
+    }),
+  },
+
+  defaultProps: {
+    size: 'sm',
+  },
+});