@wayke-se/components-react 3.0.0-beta.11 → 3.0.0-beta.12

package/src/components/ProgressBar/wrapper.tsx

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
-  text-align: center;
-`;
-
-export const Description = styled.div`
-  margin-bottom: ${size(1.5)};
-  font-size: 0.875rem;
-`;
-
-export const Bar = styled.div`
-  position: relative;
-  width: 100%;
-  height: 2px;
-  background-color: ${(props) => props.theme.color.accentDark};
-`;
-
-export const BarActive = styled.div.attrs(() => ({
-  role: 'progressbar',
-}))`
-  position: absolute;
-  top: 0;
-  left: 0;
-  height: 100%;
-  background-color: ${(props) => props.theme.color.textDark};
-`;

package/src/components/RangeSlider/RangeSliderSimple.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { Slider, Rail, Handles, Tracks } from 'react-compound-slider';
-
-import { Bar, RangeSpan, RangeSpanItem, Slider as OwnSlider } from './wrapper';
-import { Handle } from './handle';
-import { Track } from './track';
-import { numberSeparator } from '../../utils/formats';
-
-interface RangeSliderProps {
-  loading: boolean;
-  domain: number[];
-  values: number[];
-  steps: number[];
-  unit?: string;
-  formatValues?: boolean;
-  onChange: (values: readonly number[]) => void;
-  onUpdate?: (values: readonly number[]) => void;
-}
-
-const RangeSliderSimple = ({
-  loading,
-  values,
-  domain,
-  steps,
-  unit,
-  formatValues,
-  onChange,
-  onUpdate,
-}: RangeSliderProps) => {
-  const first = steps[0];
-  const second = steps[1];
-  const step = second - first;
-
-  const currentMin = formatValues ? numberSeparator(domain[0]) : domain[0];
-  const currentMax = formatValues ? numberSeparator(domain[1]) : domain[1];
-
-  if (steps.length < 2) {
-    return null;
-  }
-
-  return (
-    <>
-      <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 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>
-      {false && (
-        <RangeSpan>
-          <RangeSpanItem>{`${currentMin}${unit ? ` ${unit}` : ''}`}</RangeSpanItem>
-          <RangeSpanItem>{`${currentMax}${unit ? ` ${unit}` : ''}`}</RangeSpanItem>
-        </RangeSpan>
-      )}
-    </>
-  );
-};
-
-export default RangeSliderSimple;

package/src/components/RangeSlider/SliderWithLabel.tsx

@@ -1,62 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,132 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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/src/components/RangeSlider/wrapper.tsx

@@ -1,93 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const RangeSpan = styled.div`
-  display: flex;
-  align-items: center;
-  margin-top: ${size(1)};
-  user-select: none;
-`;
-
-export const RangeSpanItem = styled.div`
-  font-size: 0.875rem;
-  color: ${(props) => props.theme.color.textDarkLighten};
-
-  :first-child {
-    flex: 1 1 auto;
-  }
-
-  :last-child {
-    flex-shrink: 0;
-  }
-`;
-
-export const Slider = styled.div`
-  padding: 10px 12px;
-`;
-
-export const Bar = styled.div`
-  position: relative;
-  height: 4px;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: -12px;
-    right: -12px;
-    background-color: ${(props) => props.theme.color.accentDark};
-  }
-`;
-
-export const Track = styled.div.attrs(() => ({
-  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',
-}))`
-  position: absolute;
-  top: 50%;
-  transform-origin: 50% 50%;
-  display: block;
-  width: 24px;
-  height: 24px;
-  margin-top: -12px;
-  margin-left: -12px;
-  border-radius: 50%;
-  cursor: move;
-  cursor: ew-resize;
-  cursor: -webkit-grab;
-  cursor: grab;
-  transition: transform 150ms ease;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    border-radius: 50%;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :active {
-    transform: scale(1.3);
-
-    :before {
-      opacity: 1;
-    }
-  }
-`;

package/src/components/RangeSliderLabel/index.tsx

@@ -1,18 +0,0 @@
-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/src/components/RangeSliderLabel/wrapper.tsx

@@ -1,33 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
-  display: flex;
-  align-items: flex-end;
-`;
-
-export const Label = styled.div.attrs(() => ({
-  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',
-}))<ValueProps>`
-  flex-shrink: 0;
-  padding-left: ${size(2)};
-  font-size: 1.125rem;
-
-  ${({ isHighlighted }) =>
-    isHighlighted &&
-    css`
-      font-size: 1.375rem;
-      color: ${(props) => props.theme.color.textDark} !important;
-    `}
-`;

package/src/components/Repeat/index.tsx

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

package/src/components/Result/index.tsx

@@ -1,91 +0,0 @@
-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/src/components/Result/wrapper.tsx

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

package/src/components/Root/index.tsx

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-const Root = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--regular',
-}))`
-  background-color: ${(props) => props.theme.color.bg};
-  color: ${(props) => props.theme.color.textDark};
-  font-size: 1rem;
-  line-height: 1.5;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-
-  *,
-  *:before,
-  *:after {
-    box-sizing: border-box;
-  }
-
-  a img {
-    border: 0;
-  }
-`;
-
-export default Root;