From 56bb01ef1818023b22de5b6c5d6bb00d3cd233f4 Mon Sep 17 00:00:00 2001
From: Duncan Spencer <duncan@truss.works>
Date: Tue, 26 May 2020 12:29:30 -0400
Subject: [PATCH] feat: remove unused label import in component, show label
 usage in story

---
 .../forms/RangeInput/RangeInput.stories.tsx          | 12 +++++++++---
 src/components/forms/RangeInput/RangeInput.tsx       |  2 --
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/forms/RangeInput/RangeInput.stories.tsx b/src/components/forms/RangeInput/RangeInput.stories.tsx
index a47826b3e4..e0a3ed8883 100644
--- a/src/components/forms/RangeInput/RangeInput.stories.tsx
+++ b/src/components/forms/RangeInput/RangeInput.stories.tsx
@@ -1,5 +1,6 @@
 import React from 'react'
 import { RangeInput } from './RangeInput'
+import { Label } from '../Label/Label'
 
 export default {
   title: 'Forms/RangeInput',
@@ -18,15 +19,20 @@ const labelChildren = (
       <span>Start:</span> <span>0</span>
     </div>
     <div>
-      <span>End:</span> <span>10</span>
+      <span>End:</span> <span>100</span>
     </div>
   </>
 )
 
-const labelHint = <>(Some hint)</>
+const labelHint = <>(drag to adjust or use arrow keys)</>
 
 export const defaultRange = (): React.ReactElement => (
-  <RangeInput id="range-slider" name="range" />
+  <>
+    <Label htmlFor="range-slider" hint={labelHint}>
+      {labelChildren}
+    </Label>
+    <RangeInput id="range-slider" name="range" />
+  </>
 )
 
 export const customRange = (): React.ReactElement => (
diff --git a/src/components/forms/RangeInput/RangeInput.tsx b/src/components/forms/RangeInput/RangeInput.tsx
index 5845496c06..9cc105cdcd 100644
--- a/src/components/forms/RangeInput/RangeInput.tsx
+++ b/src/components/forms/RangeInput/RangeInput.tsx
@@ -1,8 +1,6 @@
 import React from 'react'
 import classnames from 'classnames'
 
-import { Label } from '../Label/Label'
-
 interface RangeInputProps {
   id: string
   name: string