@wayke-se/components-react 2.16.0 → 3.0.0-beta.2

package/src/components/RangeSlider/SliderWithLabel.tsx

@@ -0,0 +1,62 @@
+import React, { useCallback, useEffect, useState } from 'react';
+import { numberSeparator } from '../../utils/formats';
+import RangeSliderLabel from '../RangeSliderLabel/index';
+import { RepeatTiny } from '../Repeat/index';
+import RangeSliderSimple from './RangeSliderSimple';
+
+interface SliderWithLabelProps {
+  label: string;
+  values: number[];
+  domain: number[];
+  steps: number[];
+  loading: boolean;
+  unit: string;
+  formatValues?: boolean;
+  onChange: (values: readonly number[]) => void;
+}
+
+const SliderWithLabel = ({
+  label,
+  values,
+  domain,
+  steps,
+  loading,
+  unit,
+  formatValues,
+  onChange,
+}: SliderWithLabelProps) => {
+  const [local, setLocal] = useState<number[] | undefined>(steps);
+
+  const onUpdate = useCallback((nextValues: readonly number[]) => {
+    setLocal([...nextValues]);
+  }, []);
+
+  useEffect(() => {
+    if (!loading) setLocal(undefined);
+  }, [loading]);
+
+  return (
+    <>
+      <RepeatTiny>
+        <RangeSliderLabel
+          label={label}
+          value={`${numberSeparator(local?.[0] || values[0])}${unit ? ` ${unit}` : ''}`}
+        />
+      </RepeatTiny>
+      <RepeatTiny>
+        <RangeSliderSimple
+          loading={loading}
+          values={values}
+          domain={domain}
+          steps={steps}
+          onChange={onChange}
+          onUpdate={onUpdate}
+          unit={unit}
+          formatValues={formatValues}
+        />
+      </RepeatTiny>
+    </>
+  );
+};
+
+export default SliderWithLabel;

package/src/components/RangeSlider/handle.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { Handle as OwnHandle } from './wrapper';
+import { SliderItem, GetHandleProps } from 'react-compound-slider';
+
+interface IHandleProps {
+  domain: number[];
+  handle: SliderItem;
+  getHandleProps: GetHandleProps;
+}
+
+export const Handle = ({
+  domain: [min, max],
+  handle: { id, value, percent },
+  getHandleProps,
+}: IHandleProps) => (
+  <OwnHandle
+    role="slider"
+    aria-valuemin={min}
+    aria-valuemax={max}
+    aria-valuenow={value}
+    style={{
+      left: `${percent}%`,
+    }}
+    {...getHandleProps(id)}
+  />
+);

package/src/components/RangeSlider/index.tsx

@@ -0,0 +1,132 @@
+import React, { useState, useCallback, useEffect } from 'react';
+import { Slider, Rail, Handles, Tracks } from 'react-compound-slider';
+
+import {
+  Bar,
+  RangeSpan,
+  RangeSpanItem,
+  Slider as OwnSlider,
+  Track as OwnTrack,
+  Handle as OwnHandle,
+} from './wrapper';
+import { Handle } from './handle';
+import { Track } from './track';
+import { numberSeparator } from '../../utils/formats';
+
+const getSteps = (steps: number[]) => {
+  let current = Number.MAX_SAFE_INTEGER;
+  steps.forEach((step, index) => {
+    if (index !== 0) {
+      const c = step - steps[index - 1];
+      if (c < current) {
+        current = c;
+      }
+    }
+  });
+  return current;
+};
+
+interface RangeSliderProps {
+  loading: boolean;
+  domain: number[];
+  values: number[];
+  steps: number[];
+  unit?: string;
+  formatValues?: boolean;
+  maxPrefix?: string;
+  onChange: (values: readonly number[]) => void;
+}
+
+const RangeSlider = ({
+  loading,
+  values,
+  domain,
+  steps,
+  unit,
+  formatValues,
+  maxPrefix,
+  onChange,
+}: RangeSliderProps) => {
+  const [current, setCurrent] = useState<number[]>(values);
+  const onUpdate = useCallback(
+    (nextValues: readonly number[]) => {
+      if (!isNaN(nextValues[0]) && !isNaN(nextValues[1])) {
+        setCurrent(nextValues.slice());
+      }
+    },
+    [values]
+  );
+
+  const step = getSteps(steps);
+
+  const currentMin = formatValues ? numberSeparator(current[0]) : current[0];
+  const currentMax = formatValues ? numberSeparator(current[1]) : current[1];
+  const equal = domain[0] === domain[1];
+  const _maxPrefix = maxPrefix && domain[1] === current[1] ? maxPrefix : undefined;
+
+  useEffect(() => {
+    if (values[0] !== current[0] || values[1] !== current[1]) {
+      setCurrent(values);
+    }
+  }, [values]);
+
+  return (
+    <>
+      {equal ? (
+        <OwnSlider>
+          <Bar>
+            <OwnTrack style={{ left: '0', width: '100%' }} />
+            <OwnHandle role="slider" aria-disabled style={{ left: '0' }} />
+            <OwnHandle role="slider" aria-disabled style={{ left: '100%' }} />
+          </Bar>
+        </OwnSlider>
+      ) : (
+        <OwnSlider>
+          <Slider
+            disabled={loading}
+            mode={1}
+            step={step}
+            domain={domain}
+            onChange={onChange}
+            onUpdate={onUpdate}
+            values={values}
+            rootStyle={{ position: 'relative' }}
+          >
+            <Rail>{({ getRailProps }) => <Bar {...getRailProps()} />}</Rail>
+            <Handles>
+              {({ handles, getHandleProps }) => (
+                <div className="slider-handles">
+                  {handles.map((handle) => (
+                    <Handle
+                      key={handle.id}
+                      handle={handle}
+                      domain={domain}
+                      getHandleProps={getHandleProps}
+                    />
+                  ))}
+                </div>
+              )}
+            </Handles>
+            <Tracks left={false} right={false}>
+              {({ tracks, getTrackProps }) => (
+                <div className="slider-tracks">
+                  {tracks.map(({ id, source, target }) => (
+                    <Track key={id} source={source} target={target} getTrackProps={getTrackProps} />
+                  ))}
+                </div>
+              )}
+            </Tracks>
+          </Slider>
+        </OwnSlider>
+      )}
+      <RangeSpan>
+        <RangeSpanItem>{`${currentMin}${unit ? ` ${unit}` : ''}`}</RangeSpanItem>
+        <RangeSpanItem>{`${currentMax}${_maxPrefix ? _maxPrefix : ''}${
+          unit ? ` ${unit}` : ''
+        }`}</RangeSpanItem>
+      </RangeSpan>
+    </>
+  );
+};
+
+export default RangeSlider;

package/src/components/RangeSlider/track.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Track as OwnTrack } from './wrapper';
+import { SliderItem, GetTrackProps } from 'react-compound-slider';
+
+interface ITrackProps {
+  source: SliderItem;
+  target: SliderItem;
+  getTrackProps: GetTrackProps;
+}
+
+export const Track = ({ source, target, getTrackProps }: ITrackProps) => (
+  <OwnTrack
+    style={{
+      left: `${source.percent}%`,
+      width: `${target.percent - source.percent}%`,
+    }}
+    {...getTrackProps()}
+  />
+);

package/{dist-src/components/RangeSlider/wrapper.js → src/components/RangeSlider/wrapper.tsx}

@@ -1,12 +1,15 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const RangeSpan = styled.div `
+
+export const RangeSpan = styled.div`
   display: flex;
   align-items: center;
   margin-top: ${size(1)};
   user-select: none;
 `;
-export const RangeSpanItem = styled.div `
+
+export const RangeSpanItem = styled.div`
   font-size: 0.875rem;
   color: ${(props) => props.theme.color.textDarkLighten};
 
@@ -18,10 +21,12 @@ export const RangeSpanItem = styled.div `
     flex-shrink: 0;
   }
 `;
-export const Slider = styled.div `
+
+export const Slider = styled.div`
   padding: 10px 12px;
 `;
-export const Bar = styled.div `
+
+export const Bar = styled.div`
   position: relative;
   height: 4px;
 
@@ -35,19 +40,21 @@ export const Bar = styled.div `
     background-color: ${(props) => props.theme.color.accentDark};
   }
 `;
+
 export const Track = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-bg',
-})) `
+  className: 'wayke__theme wayke__color--primary-bg',
+}))`
   position: absolute;
   top: 0;
   height: 4px;
   margin-left: -12px;
   margin-right: -12px;
 `;
+
 export const Handle = styled.div.attrs(() => ({
-    role: 'slider',
-    className: 'wayke__theme wayke__color--primary-bg',
-})) `
+  role: 'slider',
+  className: 'wayke__theme wayke__color--primary-bg',
+}))`
   position: absolute;
   top: 50%;
   transform-origin: 50% 50%;

package/src/components/RangeSliderLabel/index.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Wrapper, Label, Value } from './wrapper';
+
+interface Props {
+  label: string;
+  value?: React.ReactNode;
+  highlight?: boolean;
+}
+
+const RangeSliderLabel = ({ label, value, highlight }: Props) => (
+  <Wrapper>
+    <Label>{label}</Label>
+    {value && <Value isHighlighted={highlight}>{value}</Value>}
+  </Wrapper>
+);
+
+export default RangeSliderLabel;

package/{dist-src/components/RangeSliderLabel/wrapper.js → src/components/RangeSliderLabel/wrapper.tsx}

@@ -1,23 +1,32 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   display: flex;
   align-items: flex-end;
 `;
+
 export const Label = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
+  className: 'wayke__theme wayke__font--bold',
+}))`
   flex: 1 1 auto;
 `;
+
+type ValueProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
+  isHighlighted?: boolean;
+};
+
 export const Value = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold wayke__color--primary-text',
-})) `
+  className: 'wayke__theme wayke__font--bold wayke__color--primary-text',
+}))<ValueProps>`
   flex-shrink: 0;
   padding-left: ${size(2)};
   font-size: 1.125rem;
 
-  ${({ isHighlighted }) => isHighlighted &&
-    css `
+  ${({ isHighlighted }) =>
+    isHighlighted &&
+    css`
       font-size: 1.375rem;
       color: ${(props) => props.theme.color.textDark} !important;
     `}

package/{dist-src/components/Repeat/index.js → src/components/Repeat/index.tsx}

@@ -1,16 +1,20 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Repeat = styled.div `
+
+export const Repeat = styled.div`
   & + & {
     margin-top: ${size(3)};
   }
 `;
-export const RepeatTiny = styled.div `
+
+export const RepeatTiny = styled.div`
   & + & {
     margin-top: ${size(1)};
   }
 `;
-export const RepeatSmall = styled.div `
+
+export const RepeatSmall = styled.div`
   & + & {
     margin-top: ${size(2)};
   }

package/src/components/Result/index.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback } from 'react';
+
+import {
+  Wrapper,
+  Header,
+  HeaderCount,
+  HeaderSort,
+  Body,
+  Footer,
+  FooterProgress,
+  FooterAction,
+  ResultCount,
+} from './wrapper';
+import ProgressBar from '../ProgressBar/index';
+import { ButtonSecondary, ButtonContent } from '../Button/index';
+import Loader from '../Loader/index';
+import { numberSeparator } from '../../utils/formats';
+import useSearch from '../../State/Search/useSearch';
+import SortSelect, { OptionProps } from '../SortSelect/index';
+import { getTranslatedSortOptionDisplayName } from '../../utils/sortOptions';
+
+interface Props {
+  children: React.ReactNode;
+}
+
+const Result = ({ children }: Props) => {
+  const { loading, response, documents, queryFilter, onLoadMore, onFilterUpdate } = useSearch();
+
+  const onSortOptionChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => onFilterUpdate(e.currentTarget.value),
+    []
+  );
+
+  const numberOfDocuments = documents?.length || 0;
+  const numberOfHits = response?.documentList.numberOfHits || 0;
+  const useSkeletons = !!queryFilter?.concatResult;
+
+  const selectedSortOption = response?.documentList.sortOptions.find((x) => x.selected)?.query;
+  const sortOptions = response?.documentList.sortOptions
+    .filter((x) => x.displayName !== 'relevance')
+    .map(
+      (so): OptionProps => ({
+        value: so.query,
+        displayName: getTranslatedSortOptionDisplayName(so.displayName),
+      })
+    );
+
+  if (loading && !useSkeletons) {
+    return <Loader />;
+  }
+  return (
+    <Wrapper>
+      <Header>
+        <HeaderCount>
+          <ResultCount>{`${numberSeparator(numberOfHits)} ${
+            numberOfHits === 1 ? 'bil' : 'bilar'
+          }`}</ResultCount>
+        </HeaderCount>
+        {sortOptions && selectedSortOption && (
+          <HeaderSort>
+            <SortSelect
+              value={selectedSortOption}
+              options={sortOptions}
+              onChange={onSortOptionChange}
+            />
+          </HeaderSort>
+        )}
+      </Header>
+      <Body>{children}</Body>
+      <Footer>
+        <FooterProgress>
+          <ProgressBar unit="bilar" valueCurrent={numberOfDocuments} valueMax={numberOfHits} />
+        </FooterProgress>
+        {numberOfDocuments !== numberOfHits && (
+          <FooterAction>
+            <ButtonSecondary
+              disabled={loading}
+              onClick={onLoadMore}
+              title="Visa fler"
+              aria-label="Visa fler"
+            >
+              <ButtonContent>Visa fler</ButtonContent>
+            </ButtonSecondary>
+          </FooterAction>
+        )}
+      </Footer>
+    </Wrapper>
+  );
+};
+
+export default Result;

package/{dist-src/components/Result/wrapper.js → src/components/Result/wrapper.tsx}

@@ -1,29 +1,39 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div ``;
-export const Header = styled.header `
+
+export const Wrapper = styled.div``;
+
+export const Header = styled.header`
   display: flex;
   margin-bottom: ${size(4)};
 `;
-export const HeaderCount = styled.div `
+
+export const HeaderCount = styled.div`
   flex: 1 1 auto;
 `;
-export const HeaderSort = styled.div `
+
+export const HeaderSort = styled.div`
   flex-shrink: 0;
 `;
-export const Body = styled.div ``;
-export const Footer = styled.footer `
+
+export const Body = styled.div``;
+
+export const Footer = styled.footer`
   margin-top: ${size(8)};
   text-align: center;
 `;
-export const FooterProgress = styled.div `
+
+export const FooterProgress = styled.div`
   max-width: 175px;
   margin: 0 auto;
 `;
-export const FooterAction = styled.div `
+
+export const FooterAction = styled.div`
   margin-top: ${size(3)};
 `;
-export const ResultCount = styled.div `
+
+export const ResultCount = styled.div`
   color: ${(props) => props.theme.color.textDarkLighten};
   font-size: 0.875rem;
 `;

package/{dist-src/components/Root/index.js → src/components/Root/index.tsx}

@@ -1,7 +1,8 @@
 import styled from 'styled-components';
+
 const Root = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--regular',
-})) `
+  className: 'wayke__theme wayke__font--regular',
+}))`
   background-color: ${(props) => props.theme.color.bg};
   color: ${(props) => props.theme.color.textDark};
   font-size: 1rem;
@@ -19,4 +20,5 @@ const Root = styled.div.attrs(() => ({
     border: 0;
   }
 `;
+
 export default Root;

package/src/components/SearchBar/index.tsx

@@ -0,0 +1,48 @@
+import React, { useCallback, useRef } from 'react';
+import InputSearch from '../InputSearch/index';
+import useOutsideClick from '../../hooks/useOutsideClick';
+
+interface SearchBarProps {
+  value: string;
+  setValue: (value: string) => void;
+  onSearch: (value: string) => void;
+}
+
+const SearchBar = ({ value, setValue, onSearch }: SearchBarProps) => {
+  const ref = useRef<HTMLDivElement>(null);
+
+  const onChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => setValue(e.currentTarget.value),
+    []
+  );
+
+  useOutsideClick(ref, () => setValue(''));
+
+  const _onSearch = useCallback(() => {
+    onSearch(value);
+  }, [value]);
+
+  const onKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLInputElement>) => {
+      if (e.keyCode === 13) {
+        _onSearch();
+      }
+    },
+    [value, _onSearch]
+  );
+
+  return (
+    <InputSearch
+      ref={ref}
+      value={value}
+      onChange={onChange}
+      onKeyDown={onKeyDown}
+      onSearch={_onSearch}
+      placeholder="Sök"
+      label="Sök"
+      id="main-search"
+    />
+  );
+};
+
+export default SearchBar;

package/src/components/SearchFilter/index.tsx

@@ -0,0 +1,31 @@
+import React, { useCallback, useState } from 'react';
+import useSearch from '../../State/Search/useSearch';
+import SearchBar from '../SearchBar/index';
+
+const SearchFilter = () => {
+  const [value, setValue] = useState('');
+  const { queryFilter, onFilterUpdate } = useSearch();
+
+  const onSearch = useCallback(
+    (value: string) => {
+      const nextQuery = new URLSearchParams(queryFilter.searchParams);
+      if (value === nextQuery.get('query')) {
+        return;
+      }
+
+      if (value) {
+        nextQuery.set('query', value);
+      } else {
+        nextQuery.delete('qquery');
+      }
+
+      onFilterUpdate(nextQuery.toString());
+      setValue('');
+    },
+    [queryFilter]
+  );
+
+  return <SearchBar value={value} setValue={setValue} onSearch={onSearch} />;
+};
+
+export default SearchFilter;

package/src/components/SearchTerm/index.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Wrapper, Query, Clear } from './wrapper';
+import { IconCancel } from '../Icon/index';
+
+interface Props {
+  children: string;
+  onClear?: () => void;
+  clearTitle?: string;
+}
+
+const SearchTerm = ({ children, onClear, clearTitle }: Props) => (
+  <Wrapper>
+    <Query>{children}</Query>
+    {onClear && (
+      <Clear onClick={onClear} title={clearTitle ? clearTitle : 'Rensa fritext'}>
+        <IconCancel block />
+      </Clear>
+    )}
+  </Wrapper>
+);
+
+export default SearchTerm;

package/{dist-src/components/SearchTerm/wrapper.js → src/components/SearchTerm/wrapper.tsx}

@@ -1,13 +1,16 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   display: flex;
   align-items: center;
 `;
+
 export const Query = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
+  className: 'wayke__theme wayke__font--bold',
+}))`
   font-size: 2.25rem;
   min-width: 0;
   overflow-wrap: break-word;
@@ -18,7 +21,8 @@ export const Query = styled.div.attrs(() => ({
     content: '"';
   }
 `;
-export const Clear = styled(ButtonReset) `
+
+export const Clear = styled(ButtonReset)`
   position: relative;
   display: flex;
   align-items: center;