Update to slider v1.0.0, fix lint errors

cerner · Oct 20, 2023 · 0f8eeca · 0f8eeca
1 parent fbdda7c
commit 0f8eeca
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 41 deletions.
diff --git a/...ra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/SliderWithOnChangeCallback.jsx b/...ra-framework-docs/src/terra-dev-site/doc/slider/Examples.2/SliderWithOnChangeCallback.jsx
@@ -2,25 +2,25 @@ import React, { useState } from 'react';
 import Slider from 'terra-slider';
 
 const SliderWithOnChangeCallback = () => {
-    const [value, setValue] = useState(''); 
+  const [value, setValue] = useState('');
 
-    const handleChange = (event) => {
-        setValue(event.target.value)
-    }
-    const message = value? `Updated Slider value is: ${value}`: "Change the value of Slider to trigger callback";
-    
-    return(
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  const message = value ? `Updated Slider value is: ${value}` : 'Change the value of Slider to trigger callback';
+
+  return (
     <div>
-    <Slider
+      <Slider
         minimumValue={0}
         maximumValue={100}
         labelText="Zoom"
         value={20}
         onChange={handleChange}
-    />
-    <p>{message}</p>
+      />
+      <p>{message}</p>
     </div>
-    )
-    };
+  );
+};
 
 export default SliderWithOnChangeCallback;
diff --git a/...s/terra-framework-docs/src/terra-dev-site/test/slider/SliderWithOnChangeCallback.test.jsx b/...s/terra-framework-docs/src/terra-dev-site/test/slider/SliderWithOnChangeCallback.test.jsx
@@ -2,25 +2,25 @@ import React, { useState } from 'react';
 import Slider from 'terra-slider';
 
 const SliderWithOnChangeCallback = () => {
-    const [value, setValue] = useState(''); 
+  const [value, setValue] = useState('');
 
-    const handleChange = (event) => {
-        setValue(event.target.value)
-    }
-    const message = value? `Updated Slider value is: ${value}`: "Change the value of Slider to trigger callback";
-    
-    return(
+  const handleChange = (event) => {
+    setValue(event.target.value);
+  };
+  const message = value ? `Updated Slider value is: ${value}` : 'Change the value of Slider to trigger callback';
+
+  return (
     <div>
-    <Slider
+      <Slider
         minimumValue={0}
         maximumValue={100}
         labelText="Zoom"
         value={20}
         onChange={handleChange}
-    />
-    <p>{message}</p>
+      />
+      <p>{message}</p>
     </div>
-    )
-    };
+  );
+};
 
-export default SliderWithOnChangeCallback;
+export default SliderWithOnChangeCallback;
diff --git a/packages/terra-slider/README.md b/packages/terra-slider/README.md
@@ -3,17 +3,9 @@
 [![NPM version](https://badgen.net/npm/v/terra-slider)](https://www.npmjs.com/package/terra-slider)
 [![Build Status](https://badgen.net/travis/cerner/terra-framework)](https://travis-ci.com/cerner/terra-framework)
 
----
-### Notice
-
-> Terra Slider is currently under alpha release. There may be breaking changes between releases until it is stable with the 1.0 release.
-
----
-
 Terra Slider component provides users a way to select a value from a given range by sliding a thumb along a bar to track the value.
 
 - [Terra Slider](#terra-slider)
-    - [Notice](#notice)
   - [Getting Started](#getting-started)
   - [Peer Dependencies](#peer-dependencies)
   - [LICENSE](#license)

diff --git a/packages/terra-slider/package.json b/packages/terra-slider/package.json
@@ -1,7 +1,7 @@
 {
   "name": "terra-slider",
   "main": "lib/Slider.js",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "description": "Terra Slider component provides users a way to select a value from a given range by sliding a thumb along a bar to track the value.",
   "repository": {
     "type": "git",

diff --git a/packages/terra-slider/src/Slider.module.scss b/packages/terra-slider/src/Slider.module.scss
@@ -30,8 +30,8 @@
   }
 
   .slider-max-label {
-    margin-right: var(--terra-slider-max-label-margin-right, 0rem);
     margin-left: var(--terra-slider-max-label-margin-left, 0.5rem);
+    margin-right: var(--terra-slider-max-label-margin-right, 0rem);
   }
 
   .input-range {
@@ -52,7 +52,7 @@
     /* Hides the slider so that custom slider can be made */
     -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix, plugin/no-unsupported-browser-features */
     background: linear-gradient(to right, var(--terra-slider-track-selected-range, #007cc3) 0%, var(--terra-slider-track-selected-range, #007cc3) var(--terra-slider-progress-status, 50%), var(--terra-slider-track-unselected-range, #d3d4d5) var(--terra-slider-progress-status, 50%), var(--terra-slider-track-unselected-range, #d3d4d5) 100%);
-    border-radius: var(--terra-slider-track-border-radius, 0.214rem); 
+    border-radius: var(--terra-slider-track-border-radius, 0.214rem);
     height: var(--terra-slider-track-height, 0.43rem);
   }
 
@@ -103,7 +103,7 @@
   .input-range::-ms-track {
     -webkit-appearance: none; /* stylelint-disable-line property-no-vendor-prefix, plugin/no-unsupported-browser-features */
     background: linear-gradient(to right, var(--terra-slider-track-selected-range, #007cc3) 0%, var(--terra-slider-track-selected-range, #007cc3) var(--terra-slider-progress-status, 50%), var(--terra-slider-track-unselected-range, #d3d4d5) var(--terra-slider-progress-status, 50%), var(--terra-slider-track-unselected-range, #d3d4d5) 100%);
-    border-radius: var(--terra-slider-track-border-radius, 0.214rem); 
+    border-radius: var(--terra-slider-track-border-radius, 0.214rem);
     height: var(--terra-slider-track-height, 0.43rem);
   }
 
@@ -153,7 +153,7 @@
   .input-range::-moz-range-track {
     -moz-appearance: none; /* stylelint-disable-line property-no-vendor-prefix, plugin/no-unsupported-browser-features */
     background: linear-gradient(to right, var(--terra-slider-track-selected-range, #007cc3) 0%, var(--terra-slider-track-selected-range, #007cc3) var(--terra-slider-progress-status, 50%), var(--terra-slider-track-unselected-range, #d3d4d5) var(--terra-slider-progress-status, 50%), var(--terra-slider-track-unselected-range, #d3d4d5) 100%);
-    border-radius: var(--terra-slider-track-border-radius, 0.214rem); 
+    border-radius: var(--terra-slider-track-border-radius, 0.214rem);
     height: var(--terra-slider-track-height, 0.43rem);
   }
 

diff --git a/packages/terra-slider/tests/jest/Slider.test.jsx b/packages/terra-slider/tests/jest/Slider.test.jsx
@@ -1,8 +1,6 @@
 import React from 'react';
 import Slider from '../../src/Slider';
 
-const mockOnChange = jest.fn();
-
 describe('Slider', () => {
   it('should render a default slider with proper required props', () => {
     const wrapper = shallow(
@@ -37,7 +35,7 @@ describe('Slider', () => {
       <Slider isDisabled minimumValue={0} maximumValue={100} labelText="testLabel" value={50} />,
     );
     expect(wrapper.find('input').prop('value')).toEqual(50);
-    wrapper.setProps({value: 30});
+    wrapper.setProps({ value: 30 });
     wrapper.update();
     expect(wrapper.find('input').prop('value')).toEqual(30);
   });