Web: Components: create slider component

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

@@ -0,0 +1,58 @@
+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,
+}) => {
+  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
+      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");
+  });
+});

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

@@ -0,0 +1,134 @@
+import styled from "styled-components";
+import { Base } from "../themes";
+
+const StyledSlider = styled.input.attrs({
+  type: "range",
+})`
+  width: ${(props) => props.theme.avatarEditorBody.slider.width};
+  margin: ${(props) => props.theme.avatarEditorBody.slider.margin};
+  background: ${(props) =>
+    props.theme.avatarEditorBody.slider.runnableTrack.focusBackground};
+
+  border-radius: ${(props) =>
+    props.theme.avatarEditorBody.slider.runnableTrack.borderRadius};
+
+  -webkit-appearance: none;
+
+  background-image: ${(props) =>
+    props.withPouring && `linear-gradient(#2da7db, #2da7db)`};
+  background-size: ${(props) => `${props.size} 100%`};
+  background-repeat: no-repeat;
+
+  &:focus {
+    outline: none;
+  }
+
+  &::-webkit-slider-runnable-track {
+    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};
+  }
+
+  &::-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};
+  }
+`;
+StyledSlider.defaultProps = { theme: Base };
+
+const StyledRangeSlider = styled.div`
+  background: red;
+`;
+
+export { StyledSlider, StyledRangeSlider };