Merge pull request #7 from hyvor/divider

fixes #4
hyvor · Nov 23, 2023 · 08fb2d2 · 08fb2d2
2 parents 3053987 + 8867e4a
commit 08fb2d2
Show file tree

Hide file tree

Showing 5 changed files with 196 additions and 0 deletions.
diff --git a/src/lib/components/Divider/Divider.svelte b/src/lib/components/Divider/Divider.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+    export let color : string = 'var(--accent-lightest)';
+    export let height : number = 1;
+    export let width : number = 100;
+    export let margin : number = 0;
+    export let align: 'start' | 'center' | 'end' = 'center';
+</script>
+<!-- <div 
+    class="line"
+    style="
+        background-color: {color};
+        height: {height}px;
+        width: {width}%;
+        margin: {margin}px 0;
+        align: {align};
+    "
+/>
+
+<style>
+   
+</style> -->
+
+<!-- <div 
+    class="line"
+    style="
+        background-color: {color};
+        height: {height}px;
+        width: {width}%;
+        margin-top: {margin}px;
+        margin-bottom: {margin}px;
+        margin-left: {align === 'end' ? 'auto' : '0'};
+        margin-right: {align === 'start' ? 'auto' : '0'};
+    "
+/> -->
+
+<div
+    class="line"
+    style="
+    background-color: {color};
+        height: {height}px;
+        width: {width}%;
+        margin-top: {margin}px;
+        margin-bottom: {margin}px;
+        margin-left: {align === 'center' || align === 'end' ? 'auto' : 0};
+        margin-right: {align === 'center' ? 'auto' : 0};
+        display: flex;
+    "
+/>
+
+<style>
+    .line {
+        display: block;
+    }
+</style>
diff --git a/src/lib/components/index.ts b/src/lib/components/index.ts
@@ -1,3 +1,6 @@
+import Nav from '$lib/marketing/Docs/Nav/Nav.svelte';
+import NavLink from './NavLink/NavLink.svelte';
+
 export { default as ActionList } from './ActionList/ActionList.svelte';
 export { default as ActionListItem } from './ActionList/ActionListItem.svelte';
 export { default as ActionListGroup } from './ActionList/ActionListGroup.svelte';
@@ -21,6 +24,8 @@ export { default as DarkToggle } from './Dark/DarkToggle.svelte';
 
 export { default as Dropdown } from './Dropdown/Dropdown.svelte';
 
+export { default as Divider } from './Divider/Divider.svelte';   
+
 export { default as Caption } from './FormControl/Caption.svelte';
 export { default as FormControl } from './FormControl/FormControl.svelte';
 export { default as InputGroup } from './FormControl/InputGroup.svelte';

diff --git a/src/routes/[[slug]]/+page.svelte b/src/routes/[[slug]]/+page.svelte
@@ -15,6 +15,7 @@
     import { onMount } from "svelte";
     import { page } from '$app/stores';
     import NavLink from './docs/NavLink.svelte';
+    
  
     export let data;
 
@@ -69,6 +70,7 @@
             <NavItem href="/callout">Callout</NavItem>
             <NavItem href="/code-block">Code Block</NavItem>
             <NavItem href="/checkbox">Checkbox</NavItem>
+            <NavItem href="/divider">Divider</NavItem>
             <NavItem href="/dropdown">Dropdown</NavItem>
             <NavItem href="/nav-link">Nav Link</NavItem>
             <NavItem href="/radio">Radio</NavItem>

diff --git a/src/routes/[[slug]]/+page.ts b/src/routes/[[slug]]/+page.ts
@@ -21,6 +21,7 @@ import Tooltip from "./docs/Tooltip.svelte";
 import CodeBlock from "./docs/CodeBlock.svelte";
 import Internationalization from "./docs/Internationalization.svelte";
 import NavLink from "./docs/NavLink.svelte";
+import Divider from "./docs/Divider.svelte";
 import Text from "./docs/Text.svelte";
 
 export const prerender = true;
@@ -36,6 +37,7 @@ const nav = {
     'code-block': CodeBlock,
     checkbox: Checkbox,
     dropdown: Dropdown,
+    divider: Divider,
     switch: Switch,
     radio: Radio,
     "split-control": SplitControl,

diff --git a/src/routes/[[slug]]/docs/Divider.svelte b/src/routes/[[slug]]/docs/Divider.svelte
@@ -0,0 +1,133 @@
+<script lang="ts">
+        import Divider from "$lib/components/Divider/Divider.svelte";
+        import CodeBlock from "$lib/components/CodeBlock/CodeBlock.svelte";
+        import CodeResult from "./Helper/CodeResult.svelte";
+        import Table from "$lib/components/Table/Table.svelte";
+        import TableRow from "$lib/components/Table/TableRow.svelte";
+</script>
+
+    <h1>Divider</h1>
+
+    <p>This is a horizontal line used to divide sections.</p>
+
+    <h2 id="props">Properties</h2>
+
+    <Table columns="2fr 2fr 3fr">
+        <TableRow head>
+            <div>Name</div>
+            <div>Default</div>
+            <div>Description</div>
+        </TableRow>
+
+        <TableRow>
+            <div><code>color</code></div>
+            <div><code>var(--accent-lightest)</code></div>
+            <div>The color of the divider.</div>
+        </TableRow>
+
+        <TableRow>
+            <div><code>height</code></div>
+            <div><code>1</code></div>
+            <div>The height of the divider in pixels (px).</div>
+        </TableRow>
+
+        <TableRow>
+            <div><code>width</code></div>
+            <div><code>100</code></div>
+            <div>The width of the divider as a percentage (%).</div>
+        </TableRow>
+
+        <TableRow>
+            <div><code>margin</code></div>
+            <div><code>0</code></div>
+            <div>The margin of the divider in pixels (px).</div>
+        </TableRow>
+
+        <TableRow>
+            <div><code>align</code></div>
+            <div><code>center</code></div>
+            <div>
+                The alignment of the divider
+                <ul>
+                    <li><code>start</code></li>
+                    <li><code>center</code></li>
+                    <li><code>end</code></li>
+                </ul>
+            </div>
+        </TableRow>
+
+    </Table>
+
+    <h2>Examples</h2>
+
+    <p>Here, we have a simple divider with the default settings.</p>
+
+    <CodeBlock code={`
+        <Divider />
+    `} />
+
+    <CodeResult style="background-color:var(-accent-light)">
+        <Divider />
+    </CodeResult>
+
+    <p>
+        with <code>align="center"</code>
+    </p>
+
+    <CodeBlock code={`
+        <Divider 
+            color=var(--red-light) 
+            height={3} 
+            width={50} 
+            margin={3} 
+            align="center"
+        />
+    `} />
+
+    <CodeResult style="background-color:var(-accent-light)">
+        <Divider color=var(--red-light) height={3} width={50} margin={3} align='center'/>
+    </CodeResult>
+
+    <p>
+        with <code>align="start"</code>
+    </p>
+
+    <CodeBlock code={`
+        <Divider 
+            color=var(--blue-light) 
+            height={2} 
+            width={80} 
+            margin={5} 
+            align="start"
+        />
+    `} />
+
+    <CodeResult style="background-color:var(-accent-light)">
+        <Divider color="var(--blue-light)" height={2} width={80} margin={5} align='start'/>
+    </CodeResult>
+
+
+    <CodeBlock code={`
+        <Divider 
+            color="var(--green-light)"
+            height={4} 
+            width={70} 
+            margin={7} 
+            align="end"
+        />
+    `} />
+
+    <CodeResult style="background-color:var(-accent-light)">
+        <Divider 
+            color="var(--green-light)" 
+            height={4} 
+            width={70} 
+            margin={7} 
+            align="end"
+        />
+    </CodeResult>
+
+    <style>
+    
+    </style>
+