[terra-slider] New Terra slider component creation

packages/terra-framework-docs/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+* Added
+  * New Terra Slider component documentation, examples and tests.
+
+* Fixed
+  * Fixed the `terra-tabs` icon-only examples keyboard navigation issue.
+
 * Added
   * Added test for data grid column resizing.
   * Added example for Flowsheet Data Grid containing "No Result" cells.

packages/terra-framework-docs/package.json

@@ -71,6 +71,7 @@
     "terra-slide-group": "^4.33.0",
     "terra-slide-panel": "^3.46.0",
     "terra-slide-panel-manager": "^5.82.0",
+    "terra-slider": "^1.0.0",
     "terra-spacer": "^3.59.0",
     "terra-table": "^5.1.0-alpha.0",
     "terra-tabs": "^7.11.0",

packages/terra-framework-docs/src/terra-dev-site/doc/slider/About.1.doc.mdx

@@ -0,0 +1,57 @@
+import { Notice } from "@cerner/terra-docs";
+import { Badge } from 'terra-slider/package.json?dev-site-package';
+
+import SliderPropsTable from 'terra-slider/src/Slider?dev-site-props-table';
+
+import DefaultSlider from './Examples.2/DefaultSlider?dev-site-example';
+import CustomSlider from './Examples.2/CustomSlider?dev-site-example';
+import DisabledSlider from './Examples.2/DisabledSlider?dev-site-example';
+import SliderWithOnChangeCallback from './Examples.2/SliderWithOnChangeCallback?dev-site-example';
+import SliderWithValueUpdate from './Examples.2/SliderWithValueUpdate?dev-site-example';
+
+<Badge />
+
+# Terra Slider
+
+Terra Slider provides a way to select a value from a given range by sliding a thumb along a bar to track the value.
+
+<Notice variant="caution" ariaLevel="2">
+Terra Slider is an input component used to quickly select an imprecise value within a range such as a zoom level. It does not yet include features required for entering precise values.
+</Notice>
+
+
+## Getting Started
+
+- Install with [npmjs](https://www.npmjs.com):
+  - `npm install terra-slider`
+
+<!-- AUTO-GENERATED-CONTENT:START Peer Dependencies -->
+## Peer Dependencies
+
+This component requires the following peer dependencies be installed in your app for the component to properly function.
+
+| Peer Dependency | Version |
+|-|-|
+| react | ^16.8.5 |
+| react-dom | ^16.8.5 |
+| react-intl | ^2.8.0 |
+
+<!-- AUTO-GENERATED-CONTENT:END -->
+
+## Component Features
+
+ * [Cross-Browser Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#cross-browser-support)
+ * [Mobile Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#mobile-support)
+ * [Internationalization Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#internationalization-i18n)
+ * [LTR/RTL Support](https://engineering.cerner.com/terra-ui/about/terra-ui/component-standards#ltr--rtl)
+
+## Examples
+<DefaultSlider />
+<CustomSlider />
+<DisabledSlider />
+<SliderWithOnChangeCallback />
+<SliderWithValueUpdate />
+
+## Slider props table
+<SliderPropsTable />
+

packages/terra-framework-docs/src/terra-dev-site/doc/slider/ChangeLog.3.doc.mdx

@@ -0,0 +1,7 @@
+import { Badge } from 'terra-slider/package.json?dev-site-package';
+
+import ChangeLog from 'terra-slider/CHANGELOG.md';
+
+<Badge />
+
+<ChangeLog />

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/CustomSlider.3.doc.mdx

@@ -0,0 +1,3 @@
+import CustomSlider from './CustomSlider?dev-site-example';
+
+<CustomSlider />

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/CustomSlider.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Slider from 'terra-slider';
+
+const CustomSlider = () => (
+  <Slider
+    minimumValue={0}
+    maximumValue={100}
+    label="Zoom"
+    minimumLabel="0%"
+    maximumLabel="100%"
+    value={20}
+  />
+);
+
+export default CustomSlider;

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/DefaultSlider.1.doc.mdx

@@ -0,0 +1,3 @@
+import DefaultSlider from './DefaultSlider?dev-site-example';
+
+<DefaultSlider />

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/DefaultSlider.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Slider from 'terra-slider';
+
+const DefaultSlider = () => (
+  <Slider
+    minimumValue={0}
+    maximumValue={100}
+    label="Size"
+    value={50}
+  />
+);
+
+export default DefaultSlider;

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/DisabledSlider.2.doc.mdx

@@ -0,0 +1,3 @@
+import DisabledSlider from './DisabledSlider?dev-site-example';
+
+<DisabledSlider />

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/DisabledSlider.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Slider from 'terra-slider';
+
+const DisabledSlider = () => (
+  <Slider
+    isDisabled
+    minimumValue={0}
+    maximumValue={100}
+    label="Size"
+    value={50}
+  />
+);
+
+export default DisabledSlider;

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/SliderWithOnChangeCallback.4.doc.mdx

@@ -0,0 +1,3 @@
+import SliderWithOnChangeCallback from './SliderWithOnChangeCallback?dev-site-example';
+
+<SliderWithOnChangeCallback />

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/SliderWithOnChangeCallback.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import Slider from 'terra-slider';
+
+const SliderWithOnChangeCallback = () => {
+  const [value, setValue] = useState('20');
+
+  const handleChange = (v) => {
+    setValue(v);
+  };
+  const message = `Slider value is: ${value}`;
+
+  return (
+    <>
+      <Slider
+        minimumValue={0}
+        maximumValue={100}
+        label="Zoom"
+        value={value}
+        onChange={handleChange}
+      />
+      <p>{message}</p>
+    </>
+  );
+};
+
+export default SliderWithOnChangeCallback;

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/SliderWithValueUpdate.5.doc.mdx

@@ -0,0 +1,3 @@
+import SliderWithValueUpdate from './SliderWithValueUpdate?dev-site-example';
+
+<SliderWithValueUpdate />

packages/terra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/SliderWithValueUpdate.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import Slider from 'terra-slider';
+
+const SliderWithValueUpdate = () => {
+  const [value, setValue] = useState('20');
+
+  const setSliderValue = () => {
+    setValue(80);
+  };
+
+  const handleChange = (v) => {
+    setValue(v);
+  };
+  const message = `Slider value is: ${value}`;
+
+  return (
+    <div>
+      <Slider
+        minimumValue={0}
+        maximumValue={100}
+        label="Zoom"
+        value={value}
+        onChange={handleChange}
+      />
+      <p>{message}</p>
+      <button text="Set slider value" type="button" onClick={setSliderValue} id="slider-set-value-button"> Set slider value to 80 </button>
+    </div>
+  );
+};
+
+export default SliderWithValueUpdate;

packages/terra-framework-docs/src/terra-dev-site/test/slider/CustomSlider.test.jsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import Slider from 'terra-slider';
+
+const CustomMinMaxLabelSlider = () => (
+  <Slider
+    minimumValue={0}
+    maximumValue={100}
+    label="Field Label"
+    minimumLabel="label"
+    maximumLabel="label"
+    value={20}
+  />
+);
+
+export default CustomMinMaxLabelSlider;

packages/terra-framework-docs/src/terra-dev-site/test/slider/DefaultSlider.test.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import Slider from 'terra-slider';
+
+const DefaultSlider = () => (
+  <Slider
+    minimumValue={0}
+    maximumValue={100}
+    label="Label"
+    value={50}
+  />
+);
+
+export default DefaultSlider;

packages/terra-framework-docs/src/terra-dev-site/test/slider/DisabledSlider.test.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import Slider from 'terra-slider';
+
+const DisabledSlider = () => (
+  <Slider
+    isDisabled
+    minimumValue={0}
+    maximumValue={100}
+    label="Label"
+    value={50}
+  />
+);
+
+export default DisabledSlider;

packages/terra-framework-docs/src/terra-dev-site/test/slider/SliderWithOnChangeCallback.test.jsx

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+import Slider from 'terra-slider';
+
+const SliderWithOnChangeCallback = () => {
+  const [value, setValue] = useState('20');
+
+  const handleChange = (v) => {
+    setValue(v);
+  };
+  const message = `Slider value is: ${value}`;
+
+  return (
+    <div>
+      <Slider
+        minimumValue={0}
+        maximumValue={100}
+        label="Zoom"
+        value={value}
+        onChange={handleChange}
+      />
+      <p>{message}</p>
+    </div>
+  );
+};
+
+export default SliderWithOnChangeCallback;

packages/terra-framework-docs/src/terra-dev-site/test/slider/SliderWithValueUpdate.test.jsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import Slider from 'terra-slider';
+
+const SliderWithValueUpdate = () => {
+  const [value, setValue] = useState('20');
+
+  const setSliderValue = () => {
+    setValue(80);
+  };
+
+  const handleChange = (v) => {
+    setValue(v);
+  };
+  const message = `Slider value is: ${value}`;
+
+  return (
+    <div>
+      <Slider
+        minimumValue={0}
+        maximumValue={100}
+        label="Zoom"
+        value={value}
+        onChange={handleChange}
+      />
+      <p>{message}</p>
+      <button text="Set slider value" type="button" onClick={setSliderValue} id="slider-set-value-button"> Set slider value to 80 </button>
+    </div>
+  );
+};
+
+export default SliderWithValueUpdate;

packages/terra-slider/.eslintrc.js

@@ -0,0 +1,10 @@
+module.exports = {
+  extends: '@cerner/terra',
+  root: true,
+  parserOptions: {
+    requireConfigFile: false,
+    babelOptions: {
+      presets: ['@babel/preset-react'],
+    },
+  },
+};

packages/terra-slider/.npmignore

@@ -0,0 +1,5 @@
+.eslintrc.js
+*.log
+jest.config.js
+jest.enzymeSetup.js
+tests

packages/terra-slider/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/terra-slider/CHANGELOG.md

@@ -0,0 +1,6 @@
+# Changelog
+
+## Unreleased
+
+* Added
+  * New Terra Slider component, documentation, examples and tests.