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

package/src/components/SearchBar/index.tsx

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

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

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

@@ -1,71 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const Query = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
-  font-size: 2.25rem;
-  min-width: 0;
-  overflow-wrap: break-word;
-  hyphens: auto;
-
-  :before,
-  :after {
-    content: '"';
-  }
-`;
-
-export const Clear = styled(ButtonReset)`
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${size(2)};
-  height: ${size(2)};
-  border-radius: 50%;
-  background-color: ${(props) => props.theme.color.accentDark};
-  margin-left: ${size(1)};
-  font-size: ${size(1)};
-  transform-origin: 50% 50%;
-  transition: transform 150ms ease;
-
-  :before {
-    content: '';
-    position: absolute;
-    top: ${size(-1)};
-    bottom: ${size(-1)};
-    left: ${size(-1)};
-    right: ${size(-1)};
-    border-radius: 50%;
-  }
-
-  :after {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${(props) => props.theme.color.hoverOverlay};
-    border-radius: 50%;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :after {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;

package/src/components/SectionHeader/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Heading, Action } from './wrapper';
-import { ButtonClear, ButtonContent } from '../Button/index';
-
-interface Props {
-  children: React.ReactNode;
-  onClick?: () => void;
-  actionTitle?: string;
-}
-
-const SectionHeader = ({ children, onClick, actionTitle }: Props) => (
-  <Wrapper>
-    <Heading>{children}</Heading>
-    {onClick && actionTitle && (
-      <Action>
-        <ButtonClear as="a" href="#" onClick={onClick}>
-          <ButtonContent>{actionTitle}</ButtonContent>
-        </ButtonClear>
-      </Action>
-    )}
-  </Wrapper>
-);
-
-export default SectionHeader;

package/src/components/SectionHeader/wrapper.tsx

@@ -1,17 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
-  display: flex;
-  align-items: center;
-`;
-
-export const Heading = styled.div`
-  flex: 1 1 auto;
-`;
-
-export const Action = styled.div`
-  flex-shrink: 0;
-  padding-left: ${size(2)};
-`;

package/src/components/Snackbar/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Icon, Content, Heading, Message } from './wrapper';
-
-import { IconCheck, IconInfo, IconExclamationCircle, IconExclamationTriangle } from '../Icon/index';
-
-interface Props {
-  severity?: string;
-  icon?: boolean;
-  heading?: string;
-  children?: React.ReactNode;
-}
-
-const Snackbar = ({ severity, icon, heading, children }: Props) => {
-  let iconSelector = <IconInfo block />;
-  if (severity === 'error') {
-    iconSelector = <IconExclamationCircle block />;
-  } else if (severity === 'warning') {
-    iconSelector = <IconExclamationTriangle block />;
-  } else if (severity === 'success') {
-    iconSelector = <IconCheck block />;
-  }
-
-  return (
-    <Wrapper severity={severity}>
-      {icon && <Icon>{iconSelector}</Icon>}
-      <Content>
-        {heading && <Heading>{heading}</Heading>}
-        <Message>{children}</Message>
-      </Content>
-    </Wrapper>
-  );
-};
-
-export default Snackbar;

package/src/components/Snackbar/wrapper.tsx

@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import theme from '../../layout/theme';
-
-const getSnackbarBg = (severity: string | undefined): string => {
-  let bg = theme.color.accent;
-
-  if (severity === 'error') {
-    bg = theme.color.ui.negativeLight;
-  } else if (severity === 'warning') {
-    bg = theme.color.ui.neutralLight;
-  } else if (severity === 'info') {
-    bg = theme.color.ui.infoLight;
-  } else if (severity === 'success') {
-    bg = theme.color.ui.positiveLight;
-  }
-
-  return bg;
-};
-
-interface Wrapper {
-  severity?: string;
-}
-export const Wrapper = styled.div.attrs(() => ({
-  role: 'alert',
-}))<Wrapper>`
-  display: flex;
-  align-items: center;
-  padding: ${size(1.5)} ${size(2)};
-  background-color: ${(props): string => getSnackbarBg(props.severity)};
-  color: ${(props): string => props.theme.color.textDark};
-  border-radius: 3px;
-`;
-
-export const Icon = styled.div`
-  flex-shrink: 0;
-  padding-right: ${size(2)};
-  font-size: ${size(3)};
-
-  > svg {
-    display: block;
-  }
-`;
-
-export const Content = styled.div`
-  flex: 1 1 auto;
-  font-size: 1rem;
-`;
-
-export const Heading = styled.div`
-  font-weight: 700;
-`;
-
-export const Message = styled.div`
-  > * {
-    &:first-child {
-      margin-top: 0;
-    }
-
-    &:last-child {
-      margin-bottom: 0;
-    }
-  }
-`;

package/src/components/SortSelect/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Select, Option, Icon } from './wrapper';
-import { IconChevronDown } from '../Icon/index';
-import { DrivingDistance } from '../../@types/codegen/types';
-
-export interface OptionProps {
-  value: number | string | DrivingDistance;
-  displayName?: number | string;
-}
-
-interface SortSelectProps {
-  value: string | number;
-  options: OptionProps[];
-  unit?: string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-}
-
-const SortSelect = ({ value, options, onChange, unit }: SortSelectProps) => (
-  <Wrapper>
-    <Select value={value} onChange={onChange} title="Sortering" aria-label="Sortering">
-      {options.map((option) => (
-        <Option key={option.value} value={option.value}>
-          {option.displayName || option.value}
-          {unit ? ` ${unit}` : ''}
-        </Option>
-      ))}
-    </Select>
-    <Icon>
-      <IconChevronDown block />
-    </Icon>
-  </Wrapper>
-);
-
-export default SortSelect;

package/src/components/SortSelect/wrapper.tsx

@@ -1,54 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-const iconSize = '0.875rem';
-
-export const Wrapper = styled.div`
-  position: relative;
-`;
-
-export const Select = styled.select.attrs(() => ({
-  className: 'wayke__theme wayke__font--regular',
-}))`
-  position: relative;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
-  text-indent: 0.01px;
-  border: 0;
-  padding: 0;
-  padding-right: calc(${iconSize} + ${size(1)});
-  background-color: transparent;
-  color: ${(props) => props.theme.color.textDark};
-  border-radius: 0;
-  font-size: 16px;
-  cursor: pointer;
-  z-index: 1;
-
-  :focus {
-    outline: none;
-    text-decoration: underline;
-  }
-
-  ::-ms-expand {
-    display: none;
-  }
-
-  ::-moz-focus-inner {
-    border: 0;
-  }
-`;
-
-export const Option = styled.option`
-  color: ${(props) => props.theme.color.textDark};
-`;
-
-export const Icon = styled.div`
-  position: absolute;
-  top: 50%;
-  right: 0;
-  transform: translateY(-50%);
-  font-size: ${iconSize};
-`;

package/src/components/Sphere/Sphere.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import SphereViewer from './SphereViewer';
-
-import { ImageFull } from '../Gallery/wrapper';
-import MediaButton from '../Gallery/MediaButton';
-
-const onMediaClick = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>, func: () => void) => {
-  e.stopPropagation();
-  e.preventDefault();
-  func();
-};
-
-type PropsType = {
-  url: string;
-  preview: string;
-  navigationDisabled: boolean;
-  visible: boolean;
-  onDisableNavigation: () => void;
-};
-
-const Sphere = ({ url, preview, visible, onDisableNavigation, navigationDisabled }: PropsType) => {
-  if (!visible || (!navigationDisabled && visible)) {
-    return (
-      <>
-        <ImageFull src={preview} alt="alt" />
-        <MediaButton
-          text="Starta 360° interiört"
-          onClick={(e: React.MouseEvent<HTMLButtonElement, MouseEvent>): void =>
-            onMediaClick(e, onDisableNavigation)
-          }
-        />
-      </>
-    );
-  }
-  if (navigationDisabled && visible) {
-    return (
-      <SphereViewer
-        id={url}
-        preview={url}
-        src={url}
-        autoLoad={true}
-        onStart={onDisableNavigation}
-      />
-    );
-  }
-  return null;
-};
-
-export default Sphere;

package/src/components/Sphere/SphereLightbox.tsx

@@ -1,10 +0,0 @@
-import React from 'react';
-import SphereViewer from './SphereViewer';
-
-type PropsType = {
-  url: string;
-};
-
-const SphereLightbox = ({ url }: PropsType) => <SphereViewer id={url} src={url} preview={url} />;
-
-export default SphereLightbox;

package/src/components/Sphere/SphereViewer.tsx

@@ -1,81 +0,0 @@
-import React, { lazy, useState, useEffect } from 'react';
-
-import { Wrapper } from './wrapper';
-import Loader from '../Loader/index';
-
-const ReactPannellum = lazy(() => import('react-pannellum'));
-
-const config = {
-  type: 'equirectangular',
-  autoRotate: -2,
-  autoLoad: true,
-  uiText: {
-    bylineLabel: 'by %s',
-    noPanoramaError: 'No panorama image was specified.',
-    fileAccessError: 'The file %s could not be accessed.',
-    malformedURLError: 'There is something wrong with the panorama URL.',
-    iOS8WebGLError:
-      "Due to iOS 8's broken WebGL implementation, only progressive encoded JPEGs work for your device (this panorama uses standard encoding).",
-    genericWebGLError:
-      'Your browser does not have the necessary WebGL support to display this panorama.',
-    textureSizeError:
-      "This panorama is too big for your device! It's %spx wide, but your device only supports images up to %spx wide. Try another device. (If you're the author, try scaling down the image.)",
-    unknownError: 'Unknown error. Check developer console.',
-    loadButtonLabel: 'Starta 360° interiört',
-    loadingLabel: 'Laddar...',
-  },
-  preview: '/images/placeholders/placeholder_product_card.jpg',
-  compass: true,
-  showZoomCtrl: true,
-  keyboardZoom: false,
-  mouseZoom: false,
-  hfov: 180,
-};
-
-const style = {
-  height: 0,
-  width: '100%',
-  paddingBottom: '66.666%',
-  touchAction: 'manipulation',
-};
-type PropsType = {
-  id: string;
-  src: string;
-  preview: string;
-  autoLoad?: boolean;
-  onStart?: () => void;
-};
-
-const SphereViewer = ({ id, src, preview, autoLoad, onStart }: PropsType) => {
-  const [number] = useState(Math.floor(100000000 + Math.random() * 900000000));
-  useEffect(() => {
-    setTimeout(() => {
-      if (onStart) {
-        const startBtn = document.querySelector('.pnlm-load-button');
-        if (startBtn) startBtn.addEventListener('click', onStart);
-      }
-    }, 100);
-  }, []);
-
-  const c = {
-    ...config,
-    preview,
-    autoLoad,
-  };
-
-  return (
-    <Wrapper>
-      <React.Suspense fallback={<Loader />}>
-        <ReactPannellum
-          id={`a-${id}-${number}`}
-          sceneId={src}
-          imageSource={src}
-          config={c}
-          style={style}
-        />
-      </React.Suspense>
-    </Wrapper>
-  );
-};
-
-export default SphereViewer;