Feature/slider redesign

packages/asc-web-components/avatar-editor/sub-components/avatar-editor-body.js

@@ -10,6 +10,7 @@ import Box from "../../box";
 import ContextMenuButton from "../../context-menu-button";
 import IconButton from "../../icon-button";
 
+import Slider from "../../slider";
 import {
   isDesktop,
   //isTablet,
@@ -27,7 +28,6 @@ import {
   StyledAvatarEditorBody,
   StyledAvatarContainer,
   DropZoneContainer,
-  Slider,
   StyledErrorContainer,
 } from "./styled-avatar-editor-body";
 
@@ -458,11 +458,11 @@ class AvatarEditorBody extends React.Component {
                           id="scale"
                           type="range"
                           className="custom-range"
-                          onChange={this.handleScale}
                           min={this.state.allowZoomOut ? "0.1" : min}
                           max={max}
                           step={step}
                           value={this.state.scale}
+                          onChange={this.handleScale}
                         />
                         <IconButton
                           size="16"

packages/asc-web-components/avatar-editor/sub-components/styled-avatar-editor-body.js

@@ -15,142 +15,6 @@ const StyledErrorContainer = styled.div`
   }
 `;
 
-const Slider = styled.input.attrs({
-  type: "range",
-})`
-  width: ${(props) => props.theme.avatarEditorBody.slider.width};
-  margin: ${(props) => props.theme.avatarEditorBody.slider.margin};
-  background-color: ${(props) =>
-    props.theme.avatarEditorBody.slider.backgroundColor};
-  -webkit-appearance: none;
-
-  &:focus {
-    outline: none;
-  }
-
-  &::-webkit-slider-runnable-track {
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.runnableTrack.background};
-    border: ${(props) =>
-      props.theme.avatarEditorBody.slider.runnableTrack.border};
-    border-radius: ${(props) =>
-      props.theme.avatarEditorBody.slider.runnableTrack.borderRadius};
-    width: ${(props) =>
-      props.theme.avatarEditorBody.slider.runnableTrack.width};
-    height: ${(props) =>
-      props.theme.avatarEditorBody.slider.runnableTrack.height};
-    cursor: pointer;
-  }
-
-  &::-webkit-slider-thumb {
-    margin-top: ${(props) =>
-      props.theme.avatarEditorBody.slider.sliderThumb.marginTop};
-    width: ${(props) => props.theme.avatarEditorBody.slider.sliderThumb.width};
-    height: ${(props) =>
-      props.theme.avatarEditorBody.slider.sliderThumb.height};
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.sliderThumb.background};
-    border: ${(props) =>
-      props.theme.avatarEditorBody.slider.sliderThumb.border};
-    border-radius: ${(props) =>
-      props.theme.avatarEditorBody.slider.sliderThumb.height};
-    cursor: pointer;
-    -webkit-appearance: none;
-    -webkit-box-shadow: ${(props) =>
-      props.theme.avatarEditorBody.slider.sliderThumb.boxShadow};
-    box-shadow: ${(props) =>
-      props.theme.avatarEditorBody.slider.sliderThumb.boxShadow};
-  }
-
-  &:focus::-webkit-slider-runnable-track {
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.runnableTrack.focusBackground};
-  }
-
-  &::-moz-range-track {
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.rangeTrack.background};
-    border: ${(props) =>
-      props.theme.avatarEditorBody.slider.rangeTrack.background};
-    border-radius: ${(props) =>
-      props.theme.avatarEditorBody.slider.rangeTrack.borderRadius};
-    width: ${(props) => props.theme.avatarEditorBody.slider.rangeTrack.width};
-    height: ${(props) => props.theme.avatarEditorBody.slider.rangeTrack.height};
-    cursor: pointer;
-  }
-
-  &::-moz-range-thumb {
-    width: ${(props) => props.theme.avatarEditorBody.slider.rangeThumb.width};
-    height: ${(props) => props.theme.avatarEditorBody.slider.rangeThumb.height};
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.rangeThumb.background};
-    border: ${(props) => props.theme.avatarEditorBody.slider.rangeThumb.border};
-    border-radius: ${(props) =>
-      props.theme.avatarEditorBody.slider.rangeThumb.borderRadius};
-    cursor: pointer;
-    -moz-box-shadow: ${(props) =>
-      props.theme.avatarEditorBody.slider.rangeThumb.boxShadow};
-    box-shadow: ${(props) =>
-      props.theme.avatarEditorBody.slider.rangeThumb.boxShadow};
-  }
-
-  &::-ms-track {
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.track.background};
-    border-color: ${(props) =>
-      props.theme.avatarEditorBody.slider.track.borderColor};
-    border-width: ${(props) =>
-      props.theme.avatarEditorBody.slider.track.borderWidth};
-    color: ${(props) => props.theme.avatarEditorBody.slider.track.color};
-    width: ${(props) => props.theme.avatarEditorBody.slider.track.width};
-    height: ${(props) => props.theme.avatarEditorBody.slider.track.height};
-    cursor: pointer;
-  }
-
-  &::-ms-fill-lower {
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.fillLower.background};
-    border: ${(props) => props.theme.avatarEditorBody.slider.fillLower.border};
-    border-radius: ${(props) =>
-      props.theme.avatarEditorBody.slider.fillLower.borderRadius};
-  }
-
-  &::-ms-fill-upper {
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.fillUpper.background};
-    border: ${(props) => props.theme.avatarEditorBody.slider.fillUpper.border};
-    border-radius: ${(props) =>
-      props.theme.avatarEditorBody.slider.fillUpper.borderRadius};
-  }
-
-  &::-ms-thumb {
-    width: ${(props) => props.theme.avatarEditorBody.slider.thumb.width};
-    height: ${(props) => props.theme.avatarEditorBody.slider.thumb.height};
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.thumb.background};
-    border: ${(props) => props.theme.avatarEditorBody.slider.thumb.border};
-    border-radius: ${(props) =>
-      props.theme.avatarEditorBody.slider.thumb.borderRadius};
-    cursor: pointer;
-    margin-top: ${(props) =>
-      props.theme.avatarEditorBody.slider.thumb.marginTop};
-    /*Needed to keep the Edge thumb centred*/
-    box-shadow: ${(props) =>
-      props.theme.avatarEditorBody.slider.thumb.boxShadow};
-  }
-
-  &:focus::-ms-fill-lower {
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.fillLower.focusBackground};
-  }
-
-  &:focus::-ms-fill-upper {
-    background: ${(props) =>
-      props.theme.avatarEditorBody.slider.fillUpper.focusBackground};
-  }
-`;
-Slider.defaultProps = { theme: Base };
-
 const DropZoneContainer = styled.div`
   outline: none;
 
@@ -333,6 +197,5 @@ export {
   StyledAvatarEditorBody,
   StyledAvatarContainer,
   DropZoneContainer,
-  Slider,
   StyledErrorContainer,
 };

packages/asc-web-components/slider/index.js

@@ -0,0 +1,60 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { StyledSlider } from "./styled-slider";
+
+const Slider = ({
+  id,
+  type,
+  className,
+  onChange,
+  min,
+  max,
+  step,
+  value,
+  withPouring,
+  style,
+}) => {
+  const [size, setSize] = useState("0%");
+
+  const handleChange = (e) => {
+    let target = e.target;
+
+    const max = target.max;
+    const min = target.min;
+    const val = target.value;
+
+    setSize(((val - min) * 100) / (max - min) + "%");
+    onChange && onChange(e);
+  };
+
+  return (
+    <StyledSlider
+      style={style}
+      id={id}
+      type={type}
+      className={className}
+      min={min}
+      max={max}
+      step={step}
+      value={value}
+      size={value && withPouring ? size : "0%"}
+      withPouring={withPouring}
+      onChange={handleChange}
+    />
+  );
+};
+
+Slider.propTypes = {
+  id: PropTypes.string,
+  type: PropTypes.string,
+  className: PropTypes.string,
+  onChange: PropTypes.func,
+  min: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  max: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  step: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  value: PropTypes.number,
+  withPouring: PropTypes.bool,
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+};
+
+export default Slider;

packages/asc-web-components/slider/slider.stories.js

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import Slider from ".";
+
+export default {
+  title: "Components/Slider",
+  component: Slider,
+  parameters: {
+    docs: { description: { component: "Components/Slider" } },
+  },
+};
+
+const Template = ({ ...args }) => {
+  const [value, setValue] = useState(0);
+
+  const handleChange = (e) => {
+    const target = e.target;
+    setValue(target.value);
+  };
+
+  return (
+    <div style={{ width: "400px", height: "50px" }}>
+      <Slider {...args} value={value} onChange={handleChange} />
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  min: 0,
+  max: 5,
+  step: 0.1,
+  withPouring: false,
+};

packages/asc-web-components/slider/slider.test.js

@@ -0,0 +1,23 @@
+import React from "react";
+import { mount } from "enzyme";
+import Slider from ".";
+
+describe("<Textarea />", () => {
+  it("renders without error", () => {
+    const wrapper = mount(<Slider />);
+
+    expect(wrapper).toExist();
+  });
+
+  it("accepts id", () => {
+    const wrapper = mount(<Slider id="testId" />);
+
+    expect(wrapper.prop("id")).toEqual("testId");
+  });
+
+  it("accepts className", () => {
+    const wrapper = mount(<Slider className="test" />);
+
+    expect(wrapper.prop("className")).toEqual("test");
+  });
+});