Saga: Divider component (horizontal and vertical) (#71134)

* Saga: Divider component (horizontal and vertical)

* Documentation file updated

* Made changes suggested to the component, story and docs

* Updates made to the mdx documentation

* Updates on documentation for Divider component

* Made changes to the mdx documentation following suggestions received

packages/grafana-ui/src/components/Divider/Divider.mdx

@@ -0,0 +1,65 @@
+import { Meta, ArgTypes } from '@storybook/blocks';
+import { Divider } from './Divider';
+
+<Meta title="MDX|Divider" component={Divider} />
+
+# Divider
+
+### Usage
+
+#### When to use
+
+When creating separation between large sections of page content or smaller parts of components like in the page info section of the header.
+
+#### When not to use
+
+Dividers should be used sparingly.
+
+Don’t use dividers when white space (padding / margins) is sufficient to separate out sections. When sections are related to each other, they may not need dividers (ex: filtering / search related to a table).
+
+### Variants
+
+- Horizontal
+
+```tsx
+import { Divider } from '@grafana/ui';
+
+    <header>
+        <h1>My title here</h1>
+        <img src="logo.png" alt="logo" />
+    </header>
+    <Divider />
+    <main>
+        <p>Main content goes here</p>
+    </main>
+
+
+```
+
+- Vertical
+
+```tsx
+import { Divider } from '@grafana/ui';
+
+    <header>
+        <h1>My title here</h1>
+        <Divider direction="vertical" />
+        <img src="logo.png" alt="logo" />
+    </header>
+    <main>
+        <p>Main content goes here</p>
+    </main>
+
+```
+
+### Dos
+
+    - Import and add the Divider component inside the code where you would normally add an hr or a div.
+
+### Don'ts
+
+    - Do not modify the color of the divider
+
+### Props
+
+<ArgTypes of={Divider} />

packages/grafana-ui/src/components/Divider/Divider.story.tsx

@@ -0,0 +1,39 @@
+import { Meta, StoryFn } from '@storybook/react';
+import React from 'react';
+
+import { withCenteredStory } from '../../utils/storybook/withCenteredStory';
+
+import { Divider } from './Divider';
+import mdx from './Divider.mdx';
+
+const meta: Meta<typeof Divider> = {
+  title: 'General/Divider',
+  component: Divider,
+  decorators: [withCenteredStory],
+  parameters: {
+    docs: {
+      page: mdx,
+    },
+  },
+};
+
+export const Basic: StoryFn<typeof Divider> = ({ direction }) => {
+  return <Divider direction={direction} />;
+};
+
+export const Examples: StoryFn<typeof Divider> = () => {
+  return (
+    <div>
+      <p>Text above horizontal divider</p>
+      <Divider />
+      <p>Text below horizontal divider</p>
+      <div style={{ display: 'flex', flexDirection: 'row', height: '50px' }}>
+        <p>Text aside of vertical divider</p>
+        <Divider direction="vertical" />
+        <p>Text aside of vertical divider</p>
+      </div>
+    </div>
+  );
+};
+
+export default meta;

packages/grafana-ui/src/components/Divider/Divider.tsx

@@ -0,0 +1,38 @@
+import { css } from '@emotion/css';
+import React from 'react';
+
+import { GrafanaTheme2 } from '@grafana/data';
+
+import { useTheme2 } from '../../themes';
+
+interface DividerProps {
+  direction?: 'vertical' | 'horizontal';
+}
+
+export const Divider = ({ direction = 'horizontal' }: DividerProps) => {
+  const theme = useTheme2();
+  const styles = getStyles(theme);
+
+  if (direction === 'vertical') {
+    return <div className={styles.verticalDivider}></div>;
+  } else {
+    return <hr className={styles.horizontalDivider} />;
+  }
+};
+
+Divider.displayName = 'Divider';
+
+const getStyles = (theme: GrafanaTheme2) => {
+  return {
+    horizontalDivider: css`
+      border-top: 1px solid ${theme.colors.border.weak};
+      margin: ${theme.spacing(2, 0)};
+      width: 100%;
+    `,
+    verticalDivider: css`
+      border-right: 1px solid ${theme.colors.border.weak};
+      margin: ${theme.spacing(0, 0.5)};
+      height: 100%;
+    `,
+  };
+};

packages/grafana-ui/src/components/index.ts

@@ -253,6 +253,7 @@ export { UserIcon, type UserIconProps } from './UsersIndicator/UserIcon';
 export { type UserView } from './UsersIndicator/types';
 // Export this until we've figured out a good approach to inline form styles.
 export { InlineFormLabel } from './FormLabel/FormLabel';
+export { Divider } from './Divider/Divider';
 
 const LegacyForms = {
   SecretFormField,