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

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';
+
+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,12 @@
+import React from 'react';
+import SphereViewer from './SphereViewer';
+
+type PropsType = {
+  url: string;
+};
+
+const SphereLightbox = ({ url }: PropsType) => (
+  <SphereViewer id={url} src={url} preview={url} autoLoad />
+);
+
+export default SphereLightbox;

package/src/components/Sphere/SphereViewer.tsx

@@ -0,0 +1,45 @@
+import React, { lazy, useState, useEffect } from 'react';
+
+import { Wrapper } from './wrapper';
+import Loader from '../Loader/index';
+
+// Skip loading pannellum with video
+const ReactPannellum = lazy(() => import('pannellum-react/es/elements/Pannellum'));
+
+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);
+  }, []);
+
+  return (
+    <Wrapper>
+      <React.Suspense fallback={<Loader />}>
+        <ReactPannellum
+          id={`a-${id}-${number}`}
+          image={src}
+          hfov={120}
+          autoLoad={autoLoad}
+          compass
+          width={'100%'}
+          preview={preview}
+        />
+      </React.Suspense>
+    </Wrapper>
+  );
+};
+
+export default SphereViewer;

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

@@ -1,13 +1,19 @@
 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`
+  position: relative;
   width: 100%;
   height: 0 !important;
   padding-bottom: 66.666% !important; // 3:2
 
   .pnlm-container {
+    position: absolute;
+    height: 100% !important;
     background-image: none;
     background-color: ${(props) => props.theme.color.accentDark};
   }

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};
 `;

package/src/components/Tabs/index.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+
+import { Action, Item, List, Wrapper } from './wrapper';
+
+export interface ITabItem {
+  name: string;
+  displayName: string;
+}
+
+export interface ITabInterface<T> {
+  tabs: ITabItem[];
+  active: string;
+  onClick?: (name: T) => void;
+}
+
+const Tabs = <T extends {}>({ tabs, active, onClick }: ITabInterface<T>) => (
+  <Wrapper>
+    <List>
+      {tabs.map((tab) => (
+        <Item key={tab.name}>
+          <Action
+            title={tab.displayName}
+            onClick={onClick ? () => onClick(tab.name as unknown as T) : undefined}
+            active={tab.name === active ? 'true' : undefined}
+          >
+            {tab.displayName}
+          </Action>
+        </Item>
+      ))}
+    </List>
+  </Wrapper>
+);
+
+export default Tabs;

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

@@ -1,7 +1,10 @@
+import * as React from 'react';
 import styled, { css } from 'styled-components';
+
 import { ButtonReset } from '../Button/index';
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
+
+export const Wrapper = styled.div`
   overflow: hidden;
   margin-top: ${size(-1)};
   margin-left: ${size(-1)};
@@ -12,7 +15,8 @@ export const Wrapper = styled.div `
     margin-right: ${size(-2)};
   }
 `;
-export const List = styled.ul `
+
+export const List = styled.ul`
   list-style: none;
   padding: 0;
   margin: 0;
@@ -26,15 +30,24 @@ export const List = styled.ul `
     padding-right: ${size(1)};
   }
 `;
-export const Item = styled.li `
+
+export const Item = styled.li`
   display: inline-block;
   vertical-align: bottom;
   font-size: 1rem;
 `;
+
+type ActionProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  active?: boolean | string;
+};
+
 export const Action = styled(ButtonReset).attrs(() => ({
-    role: 'tab',
-    className: 'wayke__theme wayke__font--bold',
-})) `
+  role: 'tab',
+  className: 'wayke__theme wayke__font--bold',
+}))<ActionProps>`
   position: relative;
   display: block;
   padding: ${size(1)};
@@ -57,8 +70,9 @@ export const Action = styled(ButtonReset).attrs(() => ({
     z-index: 1;
   }
 
-  ${(props) => props.active &&
-    css `
+  ${(props) =>
+    props.active &&
+    css`
       color: ${(props) => props.theme.color.textDark};
 
       :after {