From 90861e6a5c10558fa08cfe5410b3f486464e01ca Mon Sep 17 00:00:00 2001
From: Uyen Doan <56598021+smmr-dn@users.noreply.github.com>
Date: Fri, 13 Sep 2024 14:07:26 -0500
Subject: [PATCH] Added documentation for `Divider` component (#2225)

---
 apps/website/src/content/docs/divider.mdx | 24 +++++++++++++++++++++++
 examples/Divider.main.css                 |  6 ++++++
 examples/Divider.main.jsx                 | 16 +++++++++++++++
 examples/Divider.vertical.css             |  6 ++++++
 examples/Divider.vertical.jsx             | 16 +++++++++++++++
 examples/index.tsx                        | 10 ++++++++++
 6 files changed, 78 insertions(+)
 create mode 100644 apps/website/src/content/docs/divider.mdx
 create mode 100644 examples/Divider.main.css
 create mode 100644 examples/Divider.main.jsx
 create mode 100644 examples/Divider.vertical.css
 create mode 100644 examples/Divider.vertical.jsx

diff --git a/apps/website/src/content/docs/divider.mdx b/apps/website/src/content/docs/divider.mdx
new file mode 100644
index 00000000000..df990f6a481
--- /dev/null
+++ b/apps/website/src/content/docs/divider.mdx
@@ -0,0 +1,24 @@
+---
+title: Divider
+description: A divider can be used to separate a layout into different sections of content or element.
+group: utilities
+thumbnail: #TODO
+---
+
+<p>{frontmatter.description}</p>
+
+<LiveExample src='Divider.main.jsx' truncate={false}>
+  <AllExamples.DividerMainExample client:load />
+</LiveExample>
+
+## Vertical
+
+The `Divider` component is displayed horizontally by default. To display it vertically, use the `orientation` prop.
+
+<LiveExample src='Divider.vertical.jsx' truncate={false}>
+  <AllExamples.DividerVerticalExample client:load />
+</LiveExample>
+
+## Props
+
+<PropsTable path='@itwin/itwinui-react/esm/core/Divider/Divider.d.ts' />
diff --git a/examples/Divider.main.css b/examples/Divider.main.css
new file mode 100644
index 00000000000..4faf687581d
--- /dev/null
+++ b/examples/Divider.main.css
@@ -0,0 +1,6 @@
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}
diff --git a/examples/Divider.main.jsx b/examples/Divider.main.jsx
new file mode 100644
index 00000000000..40a5cb94142
--- /dev/null
+++ b/examples/Divider.main.jsx
@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Divider, Text } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <div className='demo-container'>
+      <Text variant='subheading'>Section 1</Text>
+      <Divider />
+      <Text variant='subheading'>Section 2</Text>
+    </div>
+  );
+};
diff --git a/examples/Divider.vertical.css b/examples/Divider.vertical.css
new file mode 100644
index 00000000000..8b978551f7d
--- /dev/null
+++ b/examples/Divider.vertical.css
@@ -0,0 +1,6 @@
+.demo-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+}
diff --git a/examples/Divider.vertical.jsx b/examples/Divider.vertical.jsx
new file mode 100644
index 00000000000..84eff3afc22
--- /dev/null
+++ b/examples/Divider.vertical.jsx
@@ -0,0 +1,16 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Bentley Systems, Incorporated. All rights reserved.
+ * See LICENSE.md in the project root for license terms and full copyright notice.
+ *--------------------------------------------------------------------------------------------*/
+import * as React from 'react';
+import { Divider, Text } from '@itwin/itwinui-react';
+
+export default () => {
+  return (
+    <div className='demo-container'>
+      <Text variant='subheading'>Section 1</Text>
+      <Divider orientation='vertical' />
+      <Text variant='subheading'>Section 2</Text>
+    </div>
+  );
+};
diff --git a/examples/index.tsx b/examples/index.tsx
index 43269b0bf5d..53c4f28ead1 100644
--- a/examples/index.tsx
+++ b/examples/index.tsx
@@ -441,6 +441,16 @@ export { DialogPlacementExample };
 
 // ----------------------------------------------------------------------------
 
+import { default as DividerMainExampleRaw } from './Divider.main';
+const DividerMainExample = withThemeProvider(DividerMainExampleRaw);
+export { DividerMainExample };
+
+import { default as DividerVerticalExampleRaw } from './Divider.vertical';
+const DividerVerticalExample = withThemeProvider(DividerVerticalExampleRaw);
+export { DividerVerticalExample };
+
+// ----------------------------------------------------------------------------
+
 import { default as DropdownButtonMainExampleRaw } from './DropdownButton.main';
 const DropdownButtonMainExample = withThemeProvider(
   DropdownButtonMainExampleRaw,