Add divider component

packages/examples/packages/jsx/snap.manifest.json

@@ -7,7 +7,7 @@
     "url": "https://github.com/MetaMask/snaps.git"
   },
   "source": {
-    "shasum": "vIy2eWpUsteiyiWqSxoHAThE2qB2ge3E8i/fOJmChLQ=",
+    "shasum": "vvYDxG244unWDuN9QzSS6SazmKhqwX69oSsCmgjzBZQ=",
     "location": {
       "npm": {
         "filePath": "dist/bundle.js",

packages/examples/packages/jsx/src/components/Counter.tsx

@@ -1,12 +1,5 @@
 import type { SnapComponent } from '@metamask/snaps-sdk/jsx';
-import {
-  Copyable,
-  Bold,
-  Button,
-  Box,
-  Text,
-  Tooltip,
-} from '@metamask/snaps-sdk/jsx';
+import { Bold, Button, Box, Text, Tooltip } from '@metamask/snaps-sdk/jsx';
 
 /**
  * The props for the {@link Counter} component.
@@ -46,7 +39,6 @@ export const Counter: SnapComponent<CounterProps> = ({ count }) => {
         </Text>
       </Tooltip>
       <Button name="increment">Increment</Button>
-      <Copyable value="test" sensitive={true} />
     </Box>
   );
 };

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

@@ -0,0 +1,32 @@
+import type { Meta, Story } from '@metamask/snaps-storybook';
+
+import { Box } from './Box';
+import { Divider } from './Divider';
+import { Text } from './Text';
+
+const meta: Meta<typeof Divider> = {
+  title: 'Divider',
+  component: Divider,
+};
+
+export default meta;
+
+/**
+ * The divider component renders a horizontal line between elements.
+ */
+export const Default: Story = {
+  render: () => <Divider />,
+};
+
+/**
+ * It can be used to separate sections of content.
+ */
+export const WithText: Story = {
+  render: () => (
+    <Box>
+      <Text>Some text</Text>
+      <Divider />
+      <Text>Some more text</Text>
+    </Box>
+  ),
+};

packages/snaps-storybook/src/components/snaps/divider/Divider.styles.ts

@@ -0,0 +1,7 @@
+import { defineStyle, defineStyleConfig } from '@chakra-ui/react';
+
+export const styles = defineStyleConfig({
+  baseStyle: defineStyle({
+    borderColor: 'border.default',
+  }),
+});

packages/snaps-storybook/src/components/snaps/divider/Divider.tsx

@@ -0,0 +1,12 @@
+import { Divider as ChakraDivider } from '@chakra-ui/react';
+import type { FunctionComponent } from 'react';
+
+/**
+ * A divider component, which is used to create a horizontal line between
+ * elements.
+ *
+ * This component does not have any props.
+ *
+ * @returns A divider element.
+ */
+export const Divider: FunctionComponent = () => <ChakraDivider />;

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

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

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

@@ -7,6 +7,7 @@ import * as Address from './address';
 import * as Box from './box';
 import * as Button from './button';
 import * as Copyable from './copyable';
+import * as Divider from './divider';
 import * as Heading from './heading';
 import * as Row from './row';
 import * as Text from './text';
@@ -18,6 +19,7 @@ export const SNAPS_COMPONENTS: Record<string, Component> = {
   Box,
   Button,
   Copyable,
+  Divider,
   Heading,
   Row,
   Text,