-
- {prefix}
- {pivot}
- {suffix}
-
+
+ {prefix}
+ {pivot}
+ {suffix}
)
}
+
+Segment.propTypes = {
+ children: PropTypes.string.isRequired
+}
diff --git a/src/components/Segment.stories.js b/src/components/Segment.stories.js
new file mode 100644
index 0000000..2d78c99
--- /dev/null
+++ b/src/components/Segment.stories.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import { text } from '@storybook/addon-knobs'
+
+import { Segment } from './Segment'
+
+export default {
+ component: Segment,
+ title: 'Segment'
+}
+
+export const HappyPath = () => {
+ return
{text('Text', 'Hello')}
+}
diff --git a/src/components/Slider.js b/src/components/Slider.js
index 0f4c771..3606cc8 100644
--- a/src/components/Slider.js
+++ b/src/components/Slider.js
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef } from 'react'
+import PropTypes from 'prop-types'
import styles from './Slider.css'
@@ -8,14 +9,15 @@ export const Slider = ({
value,
defaultValue,
name,
- min,
- max,
- step,
+ min = 0,
+ max = 100,
+ step = 1,
onChange
}) => {
+ value = value || defaultValue || (max - min) / 2 + min
// use ref for onChange to not trigger state updates on rerenders of parent
const onChangeRef = useRef(null)
- const [internalValue, setInternalValue] = useState(value || defaultValue)
+ const [internalValue, setInternalValue] = useState(value)
// trigger external update on internal change
useEffect(() => {
@@ -61,3 +63,15 @@ export const Slider = ({
}
const calcWidth = num => `${(String(num).length + 1) * 12}px`
+
+Slider.propTypes = {
+ title: PropTypes.string,
+ description: PropTypes.string,
+ value: PropTypes.number,
+ defaultValue: PropTypes.number,
+ name: PropTypes.string,
+ min: PropTypes.number,
+ max: PropTypes.number,
+ step: PropTypes.number,
+ onChange: PropTypes.func
+}
diff --git a/src/components/Slider.stories.js b/src/components/Slider.stories.js
new file mode 100644
index 0000000..b30fd4b
--- /dev/null
+++ b/src/components/Slider.stories.js
@@ -0,0 +1,15 @@
+import React from 'react'
+import { action } from '@storybook/addon-actions'
+
+import { Slider } from './Slider'
+
+export default {
+ component: Slider,
+ title: 'Slider'
+}
+
+export const Default = () =>
+
+export const CustomRange = () =>
+
+export const CustomStep = () =>