Merge branch 'master' into upgrade_tooling

Author: Gerard Brull

CHANGELOG.md

@@ -1,3 +1,17 @@
+## [3.2.1](https://github.com/zopaUK/react-components/compare/v3.2.0...v3.2.1) (2020-05-05)
+
+
+### Bug Fixes
+
+* **alert:** fix font family for Alert component ([329ba85](https://github.com/zopaUK/react-components/commit/329ba8524b83f29ff5566aacdc104f27ec1b46b0))
+
+# [3.2.0](https://github.com/zopaUK/react-components/compare/v3.1.6...v3.2.0) (2020-04-30)
+
+
+### Features
+
+* **inputrange:** adding Input Range without controls ([933e2da](https://github.com/zopaUK/react-components/commit/933e2daacc04f602588893fea628ed9897c246e1))
+
 ## [3.1.6](https://github.com/zopaUK/react-components/compare/v3.1.5...v3.1.6) (2020-04-29)
 
 

package.json

@@ -2,7 +2,7 @@
   "name": "@zopauk/react-components",
   "sideEffects": false,
   "description": "Shared react styled components for all the Zopa projects.",
-  "version": "3.1.6",
+  "version": "3.2.1",
   "license": "MIT",
   "author": "Zopa Ltd <[email protected]> (https://zopa.com)",
   "main": "cjs/src/index.js",

src/components/atoms/Alert/Alert.tsx

@@ -1,5 +1,6 @@
 import React, { FC } from 'react';
 import styled from 'styled-components';
+import { typography } from '../../../constants/typography';
 
 type TSeverity = 'info' | 'alert' | 'warning' | 'success';
 
@@ -56,6 +57,7 @@ const Wrapper = styled.div<Required<IAlertProps>>`
   color: ${({ severity }) => MAP_BY_SEVERITY[severity].text};
   font-size: 15px;
   line-height: 20px;
+  font-family: ${typography.primary};
   font-weight: 400;
   fill: ${({ severity }) => MAP_BY_SEVERITY[severity].icon};
 

src/components/atoms/Alert/__snapshots__/Alert.test.tsx.snap

@@ -12,6 +12,7 @@ exports[`Alert renders the component with no props and no a11y violations 1`] =
   color: #2C3236;
   font-size: 15px;
   line-height: 20px;
+  font-family: "Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-weight: 400;
   fill: #818F9B;
 }
@@ -72,6 +73,7 @@ exports[`Alert renders with specific severity: alert 1`] = `
   color: #940700;
   font-size: 15px;
   line-height: 20px;
+  font-family: "Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-weight: 400;
   fill: #FF453A;
 }
@@ -132,6 +134,7 @@ exports[`Alert renders with specific severity: info 1`] = `
   color: #2C3236;
   font-size: 15px;
   line-height: 20px;
+  font-family: "Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-weight: 400;
   fill: #818F9B;
 }
@@ -192,6 +195,7 @@ exports[`Alert renders with specific severity: success 1`] = `
   color: #17592B;
   font-size: 15px;
   line-height: 20px;
+  font-family: "Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-weight: 400;
   fill: #3EBC64;
 }
@@ -252,6 +256,7 @@ exports[`Alert renders with specific severity: warning 1`] = `
   color: #704300;
   font-size: 15px;
   line-height: 20px;
+  font-family: "Open Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
   font-weight: 400;
   fill: #FF9F0A;
 }

src/components/atoms/InputRange/InputRange.md

@@ -0,0 +1,131 @@
+### Summary
+
+Use `<InputRange />` to render a native HTML `<input type="range" />`.
+
+### Examples
+
+With default props:
+
+```tsx
+import { InputRange } from '@zopauk/react-components';
+
+<InputRange />;
+```
+
+With default value:
+
+```tsx
+import { InputRange } from '@zopauk/react-components';
+
+<InputRange defaultValue={75} />;
+```
+
+With min and max:
+
+```tsx
+import { InputRange } from '@zopauk/react-components';
+
+<InputRange min={100} max={200} />;
+```
+
+With step:
+
+```tsx
+import { InputRange } from '@zopauk/react-components';
+
+<InputRange step={10} />;
+```
+
+With default value, min, max and step:
+
+```tsx
+import { InputRange } from '@zopauk/react-components';
+
+<InputRange defaultValue={150} min={100} max={500} step={50} />;
+```
+
+### Controlled Examples
+
+Store value of `<InputRange />`:
+
+```tsx
+import { Fragment, useState } from 'react';
+import { InputRange, Text } from '@zopauk/react-components';
+
+const ControlledInputRange = () => {
+  const [value, setValue] = useState(75);
+  const onChangeHandler = event => setValue(Number(event.target.value));
+
+  return (
+    <Fragment>
+      <Text mb>Value: {value}</Text>
+      <InputRange value={value} onChange={onChangeHandler} />
+    </Fragment>
+  );
+};
+
+<ControlledInputRange />;
+```
+
+Store value of `<InputRange />` with min and max:
+
+```tsx
+import { Fragment, useState } from 'react';
+import { InputRange, Text } from '@zopauk/react-components';
+
+const ControlledInputRange = () => {
+  const [value, setValue] = useState(150);
+  const onChangeHandler = event => setValue(Number(event.target.value));
+
+  return (
+    <Fragment>
+      <Text mb>Value: {value}</Text>
+      <InputRange value={value} min={100} max={200} onChange={onChangeHandler} />
+    </Fragment>
+  );
+};
+
+<ControlledInputRange />;
+```
+
+Store value of `<InputRange />` with step:
+
+```tsx
+import { Fragment, useState } from 'react';
+import { InputRange, Text } from '@zopauk/react-components';
+
+const ControlledInputRange = () => {
+  const [value, setValue] = useState(50);
+  const onChangeHandler = event => setValue(Number(event.target.value));
+
+  return (
+    <Fragment>
+      <Text mb>Value: {value}</Text>
+      <InputRange value={value} step={10} onChange={onChangeHandler} />
+    </Fragment>
+  );
+};
+
+<ControlledInputRange />;
+```
+
+Store value of `<InputRange />` with min, max and step:
+
+```tsx
+import { Fragment, useState } from 'react';
+import { InputRange, Text } from '@zopauk/react-components';
+
+const ControlledInputRange = () => {
+  const [value, setValue] = useState(150);
+  const onChangeHandler = event => setValue(Number(event.target.value));
+
+  return (
+    <Fragment>
+      <Text mb>Value: {value}</Text>
+      <InputRange value={value} min={100} max={500} step={50} onChange={onChangeHandler} />
+    </Fragment>
+  );
+};
+
+<ControlledInputRange />;
+```

src/components/atoms/InputRange/InputRange.test.tsx

@@ -0,0 +1,32 @@
+import React, { ChangeEvent, useState } from 'react';
+import { fireEvent, render, screen } from '@testing-library/react';
+import InputRange from './InputRange';
+import { axe } from 'jest-axe';
+
+describe('<InputRange />', () => {
+  it('renders and updates as expected', async () => {
+    const ControlledInputRange = () => {
+      const [value, setValue] = useState(75);
+      const onChangeHandler = (event: ChangeEvent<HTMLInputElement>) => setValue(Number(event.target.value));
+
+      return <InputRange value={value} onChange={onChangeHandler} />;
+    };
+
+    render(<ControlledInputRange />);
+
+    const input = (await screen.findByRole('slider')) as HTMLInputElement;
+
+    expect(input.value).toEqual('75');
+
+    fireEvent.change(input, { target: { value: '25' } });
+
+    expect(input.value).toEqual('25');
+  });
+
+  it('renders the component with no a11y violations', async () => {
+    const { container } = render(<InputRange aria-label="slider" defaultValue={51} />);
+    const results = await axe(container.innerHTML);
+    expect(container.firstChild).toMatchSnapshot();
+    expect(results).toHaveNoViolations();
+  });
+});

src/components/atoms/InputRange/InputRange.tsx

@@ -0,0 +1,125 @@
+import React, { InputHTMLAttributes, useState, ChangeEvent, useRef, useEffect } from 'react';
+import styled, { css } from 'styled-components';
+import { colors } from '../../../constants/colors';
+import { calculateTrackPosition } from './helpers';
+
+const trackHeight = 8;
+const thumbDiameter = 40;
+
+const TrackStyles = css`
+  box-sizing: border-box;
+  border: none;
+  border-radius: ${trackHeight / 2}px;
+  height: ${trackHeight}px;
+  background: ${colors.neutral.light};
+`;
+
+const ThumbStyles = css`
+  box-sizing: border-box;
+  border: none;
+  border-radius: 50%;
+  width: ${thumbDiameter}px;
+  height: ${thumbDiameter}px;
+  background: #007468;
+`;
+
+const ThumbStylesFocus = css`
+  background: ${colors.base.secondary};
+`;
+
+interface IInput extends InputHTMLAttributes<HTMLInputElement> {
+  trackPosition: number;
+}
+
+const SInputRange = styled.input<IInput>`
+  -webkit-appearance: none;
+  width: 100%;
+  height: ${thumbDiameter}px;
+
+  &::-webkit-slider-runnable-track {
+    ${TrackStyles}
+  }
+  &::-moz-range-track {
+    ${TrackStyles}
+  }
+
+  &::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    margin-top: ${(trackHeight - thumbDiameter) * 0.5}px;
+    ${ThumbStyles}
+  }
+  &::-moz-range-thumb {
+    ${ThumbStyles}
+  }
+
+  &::-webkit-slider-runnable-track {
+    background: -webkit-gradient(
+      linear,
+      0% 0%,
+      100% 0%,
+      color-stop(${({ trackPosition }) => trackPosition}, ${colors.base.primary}),
+      color-stop(${({ trackPosition }) => trackPosition}, ${colors.neutral.medium})
+    );
+  }
+  &::-moz-range-progress {
+    border-radius: ${trackHeight / 2}px;
+    height: ${trackHeight}px;
+    background: ${colors.base.primary};
+  }
+
+  &:focus {
+    outline: none;
+
+    &::-webkit-slider-thumb {
+      ${ThumbStylesFocus}
+    }
+    &::-moz-range-thumb {
+      ${ThumbStylesFocus}
+    }
+  }
+
+  ::-moz-focus-outer {
+    border: 0;
+  }
+`;
+
+interface IInputRange extends InputHTMLAttributes<HTMLInputElement> {
+  defaultValue?: number;
+  value?: number;
+  min?: number;
+  max?: number;
+  step?: number;
+}
+
+const InputRange = ({ min = 0, max = 100, onChange, ...otherProps }: IInputRange) => {
+  const inputRef = useRef<HTMLInputElement>(null);
+  const [trackPosition, setTrackPosition] = useState(0.5);
+
+  const calculateTrackPositionFromInput = (input: HTMLInputElement) => {
+    return calculateTrackPosition({ min: Number(input.min), max: Number(input.max), value: Number(input.value) });
+  };
+
+  useEffect(() => {
+    inputRef.current && setTrackPosition(calculateTrackPositionFromInput(inputRef.current));
+  }, []);
+
+  const onChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
+    setTrackPosition(calculateTrackPositionFromInput(e.target));
+    onChange && onChange(e);
+  };
+
+  return (
+    <SInputRange
+      {...otherProps}
+      role="slider"
+      trackPosition={trackPosition}
+      min={min}
+      max={max}
+      onChange={onChangeHandler}
+      type="range"
+      ref={inputRef}
+    />
+  );
+};
+
+export default InputRange;