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

package/src/components/InputGroup/index.tsx

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const InputGroup = styled.div`
-  ${(props) => props.theme.breakpoint.Sm} {
-    display: flex;
-    align-items: flex-start;
-    margin: ${size(-0.5)};
-  }
-`;
-
-export const InputGroupColumn = styled.div`
-  ${(props) => props.theme.breakpoint.LtSm} {
-    & + & {
-      margin-top: ${size(1)};
-    }
-  }
-
-  ${(props) => props.theme.breakpoint.Sm} {
-    flex: 1 1 50%;
-    padding: ${size(0.5)};
-  }
-`;

package/src/components/InputLabel/index.tsx

@@ -1,14 +0,0 @@
-import React from 'react';
-
-import { Wrapper } from './wrapper';
-
-interface Props {
-  children: string;
-  htmlFor?: string;
-}
-
-const InputLabel = ({ children, htmlFor }: Props) => (
-  <Wrapper htmlFor={htmlFor}>{children}</Wrapper>
-);
-
-export default InputLabel;

package/src/components/InputLabel/wrapper.tsx

@@ -1,10 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.label.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
-  margin-bottom: ${size(0.5)};
-  font-size: 0.875rem;
-`;

package/src/components/InputSearch/index.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Search, Action, ActionBtn, Input, Label } from './wrapper';
-import { IconSearch } from '../Icon/index';
-
-type InputProps = React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
->;
-
-type Props = InputProps & {
-  placeholder: string;
-  label: string;
-  value?: string;
-  id: string;
-  onSearch: () => void;
-};
-
-const InputSearch = React.forwardRef(
-  (
-    { placeholder, label, value, id, onSearch, onChange, onKeyDown }: Props,
-    ref:
-      | ((instance: HTMLDivElement | null) => void)
-      | React.RefObject<HTMLDivElement>
-      | null
-      | undefined
-  ) => (
-    <Wrapper ref={ref}>
-      <Label htmlFor={id}>{label}</Label>
-      <Search>
-        <Input
-          placeholder={placeholder}
-          name="search"
-          value={value}
-          id={id}
-          onChange={onChange}
-          onKeyDown={onKeyDown}
-        />
-      </Search>
-      <Action>
-        <ActionBtn onClick={onSearch} title={`Genomför ${label}`} aria-label={`Genomför ${label}`}>
-          <IconSearch block />
-        </ActionBtn>
-      </Action>
-    </Wrapper>
-  )
-);
-
-InputSearch.displayName = 'InputSearch';
-
-export default InputSearch;

package/src/components/InputSearch/wrapper.tsx

@@ -1,97 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const Wrapper = styled.div.attrs(() => ({
-  role: 'search',
-}))`
-  display: flex;
-  align-items: stretch;
-  border-radius: 3px;
-`;
-
-export const Label = styled.label`
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  white-space: nowrap;
-  border: 0;
-`;
-
-export const Search = styled.div`
-  flex: 1 1 auto;
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  background-color: ${(props) => props.theme.color.accentDark};
-  border-top-left-radius: 3px;
-  border-bottom-left-radius: 3px;
-`;
-
-export const Action = styled.div`
-  flex-shrink: 0;
-`;
-
-export const ActionBtn = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-bg',
-}))`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${(props) => props.theme.distances.inputHeight};
-  height: ${(props) => props.theme.distances.inputHeight};
-  border-top-right-radius: 3px;
-  border-bottom-right-radius: 3px;
-  font-size: 1rem;
-`;
-
-export const Input = styled.input.attrs(() => ({
-  type: 'search',
-  className: 'wayke__theme wayke__font--regular',
-}))`
-  flex: 1 1 auto;
-  display: block;
-  width: 100%;
-  height: ${(props) => props.theme.distances.inputHeight};
-  padding: 0 ${size(2)};
-  background-color: transparent;
-  font-size: 16px;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-
-  :focus {
-    outline: none;
-  }
-
-  &::-webkit-input-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-moz-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &::-moz-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-ms-input-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-`;

package/src/components/InputSelect/index.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Select, Option, Icon } from './wrapper';
-import { IconChevronDown } from '../Icon/index';
-
-export interface OptionProps {
-  value: number | string;
-  displayName?: number | string | null;
-}
-
-interface Props {
-  value?: string | number;
-  options?: OptionProps[];
-  unit?: string;
-  title: string;
-  onChange?: (e: React.ChangeEvent<HTMLSelectElement>) => void;
-}
-
-const InputSelect = ({ value, options, onChange, unit, title }: Props) => (
-  <Wrapper>
-    <Select value={value} onChange={onChange} title={title} aria-label={title}>
-      {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 InputSelect;

package/src/components/InputSelect/wrapper.tsx

@@ -1,59 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-const iconSize = '0.875rem';
-const selectPadding = size(2);
-
-export const Wrapper = styled.div`
-  position: relative;
-  background-color: ${(props) => props.theme.color.accent};
-  border-radius: 3px;
-`;
-
-export const Select = styled.select.attrs(() => ({
-  className: 'wayke__theme wayke__font--regular',
-}))`
-  position: relative;
-  display: block;
-  width: 100%;
-  height: ${(props) => props.theme.distances.inputHeight};
-  -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 ${selectPadding};
-  padding-right: calc(${iconSize} + ${selectPadding});
-  background-color: transparent;
-  color: ${(props) => props.theme.color.textDark};
-  border-radius: 0;
-  font-size: 16px;
-  cursor: pointer;
-  z-index: 1;
-
-  :focus {
-    outline: none;
-  }
-
-  ::-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: ${selectPadding};
-  transform: translateY(-50%);
-  font-size: ${iconSize};
-`;

package/src/components/InputText/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Input } from './wrapper';
-
-type Props = React.DetailedHTMLProps<
-  React.InputHTMLAttributes<HTMLInputElement>,
-  HTMLInputElement
-> & {
-  value: string;
-  placeholder: string;
-  label: string;
-};
-
-const InputText = ({ placeholder, label, value, id, onChange, onKeyDown }: Props) => (
-  <Wrapper>
-    <Input
-      placeholder={placeholder}
-      value={value}
-      id={id}
-      aria-label={label}
-      onChange={onChange}
-      onKeyDown={onKeyDown}
-    />
-  </Wrapper>
-);
-
-export default InputText;

package/src/components/InputText/wrapper.tsx

@@ -1,57 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
-  position: relative;
-  display: flex;
-  align-items: stretch;
-  background-color: ${(props) => props.theme.color.accent};
-  border-radius: 3px;
-`;
-
-export const Input = styled.input.attrs(() => ({
-  type: 'text',
-  className: 'wayke__theme wayke__font--regular',
-}))`
-  flex: 1 1 auto;
-  display: block;
-  width: 100%;
-  height: ${(props) => props.theme.distances.inputHeight};
-  padding: 0 ${size(2)};
-  background-color: transparent;
-  font-size: 16px;
-  border: none;
-  border-radius: 0;
-  box-shadow: none;
-  -moz-appearance: none;
-  -webkit-appearance: none;
-
-  :focus {
-    outline: none;
-  }
-
-  &::-webkit-input-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-moz-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &::-moz-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-
-  &:-ms-input-placeholder {
-    font-family: inherit;
-    color: ${(props) => props.theme.color.textDarkLighten};
-    font-size: 1em;
-  }
-`;

package/src/components/InsuranceOptions/Insurance.tsx

@@ -1,60 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { Repeat, RepeatTiny } from '../Repeat/index';
-import { VisualHeading } from '../Heading/index';
-import OptionBox from '../OptionBox/index';
-import { OptionBoxHeading, OptionBoxContent } from '../OptionBox/wrapper';
-import { ButtonInline } from '../Button/index';
-import { InsuranceOption, Branch } from '../../@types/codegen/types';
-import InsuranceModal from './InsuranceModal';
-
-interface InsuranceOptions {
-  id: string;
-  branch?: Branch | null;
-  insuranceOptions: InsuranceOption[];
-}
-
-const Insurance = ({ id, branch, insuranceOptions }: InsuranceOptions) => {
-  const [modal, setModal] = useState(false);
-  const toggleModal = useCallback(() => setModal(!modal), [modal]);
-  if (!insuranceOptions.length) {
-    return null;
-  }
-
-  return (
-    <>
-      {modal && (
-        <InsuranceModal
-          id={id}
-          branch={branch}
-          onClose={toggleModal}
-          insuranceOptions={insuranceOptions[0]}
-        />
-      )}
-      <Repeat>
-        <RepeatTiny>
-          <VisualHeading>Välj till försäkring</VisualHeading>
-        </RepeatTiny>
-        <RepeatTiny>
-          <>
-            {insuranceOptions.map((insuranceOption, index) => (
-              <OptionBox
-                key={`${insuranceOption.url}-${index}`}
-                logo={insuranceOption.logotype || undefined}
-                logoAlt={insuranceOption.name || 'Logotyp'}
-              >
-                <OptionBoxHeading>Få prisförslag</OptionBoxHeading>
-                <OptionBoxContent>
-                  <p>
-                    <ButtonInline onClick={toggleModal}>Mer information</ButtonInline>
-                  </p>
-                </OptionBoxContent>
-              </OptionBox>
-            ))}
-          </>
-        </RepeatTiny>
-      </Repeat>
-    </>
-  );
-};
-
-export default Insurance;

package/src/components/InsuranceOptions/InsuranceFree.tsx

@@ -1,59 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { Repeat, RepeatTiny } from '../Repeat/index';
-import { VisualHeading } from '../Heading/index';
-import OptionBox from '../OptionBox/index';
-import { OptionBoxContent } from '../OptionBox/wrapper';
-import Content from '../Content/index';
-import { marked } from 'marked';
-import { ButtonInline } from '../Button/index';
-import { InsuranceOption } from '../../@types/codegen/types';
-import InsuranceFreeModal from './InsuranceFreeModal';
-
-interface InsuranceOptions {
-  insuranceOptions: InsuranceOption[];
-}
-
-const Insurance = ({ insuranceOptions }: InsuranceOptions) => {
-  const [modal, setModal] = useState(false);
-  const toggleModal = useCallback(() => setModal(!modal), [modal]);
-  if (!insuranceOptions.length) {
-    return null;
-  }
-
-  return (
-    <>
-      {modal && <InsuranceFreeModal onClose={toggleModal} insuranceOptions={insuranceOptions[0]} />}
-      <Repeat>
-        <RepeatTiny>
-          <VisualHeading>{insuranceOptions[0]?.insuranceHeader ?? 'Försäkring'}</VisualHeading>
-        </RepeatTiny>
-        <RepeatTiny>
-          <>
-            {insuranceOptions.map((insuranceOption, index) => (
-              <OptionBox
-                key={`${insuranceOption.url}-${index}`}
-                logo={insuranceOption.logotype || undefined}
-                logoAlt={insuranceOption.name || 'Logotyp'}
-              >
-                {insuranceOption.description && (
-                  <Content
-                    dangerouslySetInnerHTML={{
-                      __html: marked(insuranceOption.description),
-                    }}
-                  />
-                )}
-                <OptionBoxContent>
-                  <p>
-                    <ButtonInline onClick={toggleModal}>Mer information</ButtonInline>
-                  </p>
-                </OptionBoxContent>
-              </OptionBox>
-            ))}
-          </>
-        </RepeatTiny>
-      </Repeat>
-    </>
-  );
-};
-
-export default Insurance;

package/src/components/InsuranceOptions/InsuranceFreeModal.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-
-import Modal from '../Modal/index';
-import Content from '../Content/index';
-import { Repeat } from '../Repeat/index';
-import { ButtonInline } from '../Button/index';
-import LogoBox from '../LogoBox/index';
-import { InsuranceOption } from '../../@types/codegen/types';
-import { marked } from 'marked';
-
-interface InsuranceFreeModal {
-  onClose: () => void;
-  insuranceOptions: InsuranceOption;
-}
-
-const InsuranceFreeModal = ({ onClose, insuranceOptions }: InsuranceFreeModal) => {
-  return (
-    <Modal title={insuranceOptions?.insuranceHeader ?? 'Försäkring'} onClose={onClose}>
-      {insuranceOptions?.longDescription && (
-        <Repeat>
-          <Content
-            dangerouslySetInnerHTML={{
-              __html: marked(insuranceOptions.longDescription),
-            }}
-          ></Content>
-        </Repeat>
-      )}
-      {insuranceOptions?.url && (
-        <Repeat>
-          <ButtonInline
-            as="a"
-            href={insuranceOptions.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            Läs mer om försäkringen (Öppnas i ett nytt fönster)
-          </ButtonInline>
-        </Repeat>
-      )}
-      {insuranceOptions?.logotype && (
-        <Repeat>
-          <LogoBox logo={insuranceOptions.logotype} alt={insuranceOptions.name || 'Logotyp'} wide />
-        </Repeat>
-      )}
-    </Modal>
-  );
-};
-
-export default InsuranceFreeModal;