Added documentation for Divider component (#2225)

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' />

examples/Divider.main.css

@@ -0,0 +1,6 @@
+.demo-container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+}

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>
+  );
+};

examples/Divider.vertical.css

@@ -0,0 +1,6 @@
+.demo-container {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+  align-items: center;
+}

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>
+  );
+};

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,