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

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;

package/src/components/SectionHeader/index.tsx

@@ -0,0 +1,25 @@
+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/{dist-src/components/SectionHeader/wrapper.js → src/components/SectionHeader/wrapper.tsx}

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

package/src/components/Snackbar/index.tsx

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

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

@@ -0,0 +1,35 @@
+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/{dist-src/components/SortSelect/wrapper.js → src/components/SortSelect/wrapper.tsx}

@@ -1,12 +1,16 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
+
 const iconSize = '0.875rem';
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   position: relative;
 `;
+
 export const Select = styled.select.attrs(() => ({
-    className: 'wayke__theme wayke__font--regular',
-})) `
+  className: 'wayke__theme wayke__font--regular',
+}))`
   position: relative;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -36,10 +40,12 @@ export const Select = styled.select.attrs(() => ({
     border: 0;
   }
 `;
-export const Option = styled.option `
+
+export const Option = styled.option`
   color: ${(props) => props.theme.color.textDark};
 `;
-export const Icon = styled.div `
+
+export const Icon = styled.div`
   position: absolute;
   top: 50%;
   right: 0;

package/src/components/Sphere/Sphere.tsx

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

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

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

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

@@ -1,8 +1,11 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
+
 const compassSize = size(4);
 const controlBtnSize = size(4);
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   width: 100%;
   height: 0 !important;
   padding-bottom: 66.666% !important; // 3:2

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

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+
 // Adds element only visible to screen readers
-export const SrOnly = styled.div `
+export const SrOnly = styled.div`
   position: absolute;
   width: 1px;
   height: 1px;

package/src/components/SwitchBar/index.tsx

@@ -0,0 +1,55 @@
+import React, { useState, useCallback } from 'react';
+
+import { Wrapper, Header, Body, Info, Action, InfoContent, InfoBtn, Title } from './wrapper';
+import Modal from '../Modal/index';
+import { ButtonInline } from '../Button/index';
+import { IconInfo } from '../Icon/index';
+
+interface Props {
+  title: string;
+  body?: string;
+  actionTitle?: string;
+  children: React.ReactNode;
+  onClick?: () => void;
+}
+
+const SwitchBar = ({ title, body, actionTitle, children, onClick }: Props) => {
+  const [info, setInfo] = useState(false);
+  const onToggleInfo = useCallback(() => setInfo(!info), [info]);
+
+  return (
+    <>
+      <Wrapper>
+        <Header>
+          <Info>
+            <InfoContent>
+              <Title>{title}</Title>
+            </InfoContent>
+            {children && (
+              <InfoContent>
+                <InfoBtn onClick={onToggleInfo} title="Mer information">
+                  <IconInfo block />
+                </InfoBtn>
+              </InfoContent>
+            )}
+          </Info>
+          {actionTitle && (
+            <Action>
+              <ButtonInline onClick={onClick} title={actionTitle}>
+                {actionTitle}
+              </ButtonInline>
+            </Action>
+          )}
+        </Header>
+        {body && <Body>{body}</Body>}
+      </Wrapper>
+      {info && (
+        <Modal title={title} onClose={onToggleInfo}>
+          {children}
+        </Modal>
+      )}
+    </>
+  );
+};
+
+export default SwitchBar;

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

@@ -1,38 +1,46 @@
 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`
   padding: ${size(1.5)} ${size(2)};
   background-color: ${(props) => props.theme.color.accentDark};
   border-radius: 3px;
   font-size: 0.875rem;
 `;
-export const Header = styled.div `
+
+export const Header = styled.div`
   display: flex;
   align-items: center;
 `;
-export const Body = styled.div `
+
+export const Body = styled.div`
   font-size: 0.875rem;
   margin-top: ${size(1)};
 `;
-export const Info = styled.div `
+
+export const Info = styled.div`
   flex: 1 1 auto;
   display: flex;
   align-items: center;
 `;
-export const Action = styled.div `
+
+export const Action = styled.div`
   flex-shrink: 0;
   padding-left: ${size(1.5)};
   font-size: 0.875rem;
 `;
-export const InfoContent = styled.div `
+
+export const InfoContent = styled.div`
   & + & {
     margin-left: ${size(0.75)};
   }
 `;
+
 export const InfoBtn = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text',
-})) `
+  className: 'wayke__theme wayke__color--primary-text',
+}))`
   position: relative;
   display: block;
 
@@ -64,8 +72,9 @@ export const InfoBtn = styled(ButtonReset).attrs(() => ({
     transform: scale(0.95);
   }
 `;
+
 export const Title = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
+  className: 'wayke__theme wayke__font--bold',
+}))`
   font-size: 1rem;
 `;

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

@@ -1,14 +1,18 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const TableColumn = styled.div `
+
+export const TableColumn = styled.div`
   line-height: 1.2;
 `;
-export const TableColumnRow = styled.div `
+
+export const TableColumnRow = styled.div`
   display: flex;
   align-items: flex-start;
   margin: ${size(-1)};
 `;
-export const TableColumnCell = styled.div `
+
+export const TableColumnCell = styled.div`
   flex: 1 0 50%;
   padding: ${size(1)};
 `;

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

@@ -1,6 +1,8 @@
 import styled from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const TableList = styled.ul `
+
+export const TableList = styled.ul`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -8,7 +10,8 @@ export const TableList = styled.ul `
   border-bottom: 1px solid ${(props) => props.theme.color.border};
   font-size: 0.875rem;
 `;
-export const TableListItem = styled.li `
+
+export const TableListItem = styled.li`
   display: flex;
   align-items: center;
   padding: ${size(1)} 0;
@@ -17,16 +20,20 @@ export const TableListItem = styled.li `
     border-top: 1px solid ${(props) => props.theme.color.border};
   }
 `;
-export const TableListKey = styled.div `
+
+export const TableListKey = styled.div`
   flex: 1 1 auto;
 `;
-export const TableListValue = styled.div `
+
+export const TableListValue = styled.div`
   flex-shrink: 0;
   padding-left: ${size(1)};
 `;
-export const TableListBooleanPos = styled.div `
+
+export const TableListBooleanPos = styled.div`
   color: ${(props) => props.theme.color.ui.positive};
 `;
-export const TableListBooleanNeg = styled.div `
+
+export const TableListBooleanNeg = styled.div`
   color: ${(props) => props.theme.color.ui.negative};
 `;