From 17d8fca2894431f2667ae40543be5ad1eba29cd4 Mon Sep 17 00:00:00 2001
From: RoxanaAnamariaTurc
 <106086831+RoxanaAnamariaTurc@users.noreply.github.com>
Date: Tue, 11 Jul 2023 16:30:35 +0100
Subject: [PATCH] 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
---
 .../src/components/Divider/Divider.mdx        | 65 +++++++++++++++++++
 .../src/components/Divider/Divider.story.tsx  | 39 +++++++++++
 .../src/components/Divider/Divider.tsx        | 38 +++++++++++
 packages/grafana-ui/src/components/index.ts   |  1 +
 4 files changed, 143 insertions(+)
 create mode 100644 packages/grafana-ui/src/components/Divider/Divider.mdx
 create mode 100644 packages/grafana-ui/src/components/Divider/Divider.story.tsx
 create mode 100644 packages/grafana-ui/src/components/Divider/Divider.tsx

diff --git a/packages/grafana-ui/src/components/Divider/Divider.mdx b/packages/grafana-ui/src/components/Divider/Divider.mdx
new file mode 100644
index 00000000000..82269111f0a
--- /dev/null
+++ b/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} />
diff --git a/packages/grafana-ui/src/components/Divider/Divider.story.tsx b/packages/grafana-ui/src/components/Divider/Divider.story.tsx
new file mode 100644
index 00000000000..d6adb758de5
--- /dev/null
+++ b/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;
diff --git a/packages/grafana-ui/src/components/Divider/Divider.tsx b/packages/grafana-ui/src/components/Divider/Divider.tsx
new file mode 100644
index 00000000000..169e5e34e45
--- /dev/null
+++ b/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%;
+    `,
+  };
+};
diff --git a/packages/grafana-ui/src/components/index.ts b/packages/grafana-ui/src/components/index.ts
index 32f9fdeabf4..65ca761d285 100644
--- a/packages/grafana-ui/src/components/index.ts
+++ b/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,