docs(redliner): Reconfigure examples #4 #12 (#15)

src/components/Line/Line.mdx

@@ -1,5 +1,6 @@
 ---
 name: Line
+route: /line
 ---
 
 import { Playground, Props } from 'docz';

src/components/RedLiner/RedLiner.mdx

@@ -1,11 +1,11 @@
 ---
 name: RedLiner
+route: /redliner
 ---
 
 import { Playground, Props } from 'docz';
 import RedLiner from './RedLiner';
-import BasicExample from './examples/01-BasicExample.tsx';
-import { buttonStyle } from '../../utils/exampleStyles.ts'
+import { buttonStyle, inputStyle } from '../../utils/exampleStyles.ts'
 
 # RedLiner
 
@@ -17,15 +17,42 @@ The RedLiner component can be used to show style attritbutes on any display comp
 
 ## Usage
 
-### Basic Example
+### Basic
+
+By default `RedLiner` will display the height and width of its child component.
+
+<Playground>
+    <RedLiner>
+      <button style={buttonStyle}>
+        Measure Me
+      </button>
+    </RedLiner>
+</Playground>
+
+### Config Options
+
+Specify which attributes to show using the `config` prop.
+
 <Playground>
-  <BasicExample />
+  <RedLiner config={['height', 'padding', 'specs', 'width']}>
+    <button style={buttonStyle}>Measure Me</button>
+  </RedLiner>
 </Playground>
 
-### Advanced Example
+### Show on Hover
+
+`RedLiner` accepts a prop `showOnHover` which hides the RedLiner component until the child component is hovered.
 <Playground>
-  <RedLiner config={['height', 'padding', 'specs', 'width']} showOnHover>
+  <RedLiner showOnHover>
     <button style={buttonStyle}>helllllo</button>
   </RedLiner>
 </Playground>
 
+### Use with Input
+
+<Playground>
+  <RedLiner config={['height', 'padding', 'specs', 'width']}>
+    <input style={inputStyle}></input>
+  </RedLiner>
+</Playground>
+

src/components/RedLiner/RedLiner.module.scss

@@ -24,3 +24,8 @@
     text-transform: uppercase;
   }
 }
+
+// Add space around examples in docz's Playground
+div[data-testid="live-preview"] {
+  padding: 44px 0 44px 30px;
+}

src/utils/exampleStyles.ts

@@ -10,3 +10,11 @@ export const buttonStyle = {
   outline: 'none',
   width: 142,
 };
+
+export const inputStyle = {
+  borderRadius: 5,
+  fontFamily: 'Source Sans Pro',
+  fontSize: '16px',
+  height: 28,
+  width: 180,
+};