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

package/src/components/CheckMarkList/wrapper.tsx

@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const List = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-
-export const Item = styled.li`
-  position: relative;
-  font-size: 0.875rem;
-
-  & + & {
-    margin-top: ${size(0.5)};
-  }
-`;
-
-export const Icon = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
-  position: absolute;
-  left: 0;
-  top: 4px; // Magic number
-  font-size: 0.875em;
-`;
-
-export const Label = styled.div`
-  padding-left: calc(1em + ${size(1)});
-`;

package/src/components/Checklist/index.tsx

@@ -1,51 +0,0 @@
-import React from 'react';
-
-import { List, Item, Action, ActionIcon, ActionLabel } from './wrapper';
-import { IconCheck, IconRadio } from '../Icon/index';
-
-export interface IChecklistItem {
-  label: string;
-  onClick: () => void;
-  active?: boolean;
-  radio?: boolean;
-}
-
-export interface IChecklist {
-  items: IChecklistItem[];
-  radio?: boolean;
-}
-
-const ChecklistItem = ({ label, onClick, active, radio }: IChecklistItem) => (
-  <Item>
-    <Action onClick={onClick}>
-      {active && <ActionIcon>{radio ? <IconRadio block /> : <IconCheck block />}</ActionIcon>}
-      <ActionLabel
-        className={active ? 'wayke__theme wayke__font--bold wayke__color--primary-text' : ''}
-      >
-        {label}
-      </ActionLabel>
-    </Action>
-  </Item>
-);
-
-const Checklist = ({ items, radio }: IChecklist) => {
-  if (!items?.length) {
-    return null;
-  }
-
-  return (
-    <List>
-      {items.map((item) => (
-        <ChecklistItem
-          key={item.label}
-          label={item.label}
-          onClick={item.onClick}
-          active={item.active}
-          radio={radio}
-        />
-      ))}
-    </List>
-  );
-};
-
-export default Checklist;

package/src/components/Checklist/wrapper.tsx

@@ -1,65 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const List = styled.ul.attrs(() => ({
-  className: 'wayke__theme wayke__font--regular',
-}))`
-  list-style: none;
-  padding: 0;
-  margin: ${size(-1)} 0;
-  font-size: 0.875rem;
-  overflow: hidden;
-`;
-
-export const Item = styled.li`
-  ${List} {
-    padding-left: ${size(5)};
-    margin: 0;
-  }
-`;
-
-export const Action = styled(ButtonReset)`
-  position: relative;
-  display: block;
-  width: 100%;
-  text-align: left;
-  font: inherit;
-  padding: ${size(1)} 0;
-
-  :before {
-    content: '';
-    position: absolute;
-    left: 0;
-    width: ${size(2)};
-    height: ${size(2)};
-    border-radius: 3px;
-    background-color: ${(props) => props.theme.color.accentDark};
-    margin-top: 2px; // Magic number
-  }
-`;
-
-export const ActionIcon = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
-  position: absolute;
-  top: ${size(1)};
-  left: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: ${size(2)};
-  height: ${size(2)};
-  margin-top: 2px; // Magic number
-  font-size: ${size(1.5)};
-`;
-
-export const ActionLabel = styled.div`
-  padding-left: ${size(3)};
-  transition: transform 150ms ease;
-
-  ${Action}:hover & {
-    transform: translateX(${size(0.5)});
-  }
-`;

package/src/components/ColorSelect/index.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-
-import { List, Item, Action, Color, Label } from './wrapper';
-
-export interface ItemProps {
-  label: string;
-  hex: string[];
-  onClick?: () => void;
-  active?: boolean;
-  disabled?: boolean;
-  boxShadow?: boolean;
-}
-
-export interface Props {
-  items?: ItemProps[];
-}
-
-const ColorSelectItem = ({ label, hex, onClick, active, disabled, boxShadow }: ItemProps) => {
-  return (
-    <Item>
-      <Action onClick={onClick} disabled={disabled} title={label} aria-label={label}>
-        <Color
-          style={{
-            backgroundColor: hex.length === 1 ? hex[0] : '',
-            backgroundImage: hex.length > 1 ? `linear-gradient(${hex.join()})` : '',
-          }}
-          active={active}
-          boxShadow={boxShadow}
-          className={active ? 'wayke__theme wayke__color--primary-text' : ''}
-        />
-        <Label
-          className={active ? 'wayke__theme wayke__color--primary-text wayke__font--bold' : ''}
-        >
-          {label}
-        </Label>
-      </Action>
-    </Item>
-  );
-};
-
-const ColorSelect = ({ items }: Props) => {
-  if (!items) {
-    return null;
-  }
-
-  return (
-    <List>
-      {items.map((item) => (
-        <ColorSelectItem
-          key={item.label}
-          label={item.label}
-          hex={item.hex}
-          onClick={item.onClick}
-          active={item.active}
-          disabled={item.disabled}
-          boxShadow={item.boxShadow}
-        />
-      ))}
-    </List>
-  );
-};
-
-export default ColorSelect;

package/src/components/ColorSelect/wrapper.tsx

@@ -1,82 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { ButtonReset } from '../Button/index';
-
-export const List = styled.ul`
-  display: flex;
-  flex-wrap: wrap;
-  list-style: none;
-  padding: 0;
-  margin: ${size(-1.5)};
-`;
-
-export const Item = styled.li`
-  flex: 1 1 auto;
-  width: 33.333%;
-  max-width: 33.333%;
-  padding: ${size(1.5)};
-`;
-
-export const Action = styled(ButtonReset)`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  font: inherit;
-
-  &[disabled] {
-    opacity: 0.4;
-    cursor: default;
-  }
-`;
-
-type ColorProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-  active?: boolean;
-  boxShadow?: boolean;
-};
-
-export const Color = styled.div<ColorProps>`
-  position: relative;
-  width: ${size(3.75)};
-  height: ${size(3.75)};
-  border-radius: 50%;
-  color: ${(props) => props.theme.color.border};
-
-  :before {
-    content: '';
-    position: absolute;
-    top: -5px;
-    bottom: -5px;
-    left: -5px;
-    right: -5px;
-    border: 2px solid;
-    border-radius: 50%;
-    display: none;
-  }
-
-  ${Action}:not([disabled]):hover & {
-    :before {
-      display: block;
-    }
-  }
-
-  ${({ active }) =>
-    active &&
-    css`
-      :before {
-        display: block;
-      }
-    `}
-
-  ${({ boxShadow }) =>
-    boxShadow &&
-    css`
-      box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
-    `}
-`;
-
-export const Label = styled.div`
-  margin-top: ${size(1.25)};
-  font-size: 0.875rem;
-`;

package/src/components/ColumnRow/index.tsx

@@ -1,20 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const ColumnRow = styled.div`
-  display: flex;
-  align-items: flex-start;
-`;
-
-export const ColumnRowItem = styled.div`
-  flex: 1 1 auto;
-
-  :last-child:not(:only-child) {
-    flex: 0 0 auto;
-  }
-
-  & + & {
-    padding-left: ${size(2)};
-  }
-`;

package/src/components/Container/index.tsx

@@ -1,11 +0,0 @@
-import React from 'react';
-
-import { Wrapper } from './wrapper';
-
-interface Props {
-  children: React.ReactNode;
-}
-
-const Container = ({ children }: Props) => <Wrapper>{children}</Wrapper>;
-
-export default Container;

package/src/components/Container/wrapper.tsx

@@ -1,14 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div`
-  width: 100%;
-  max-width: ${(props) => props.theme.distances.containerMaxWidth};
-  margin: 0 auto;
-  padding: 0 ${size(3)};
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    padding: 0 ${size(2)};
-  }
-`;

package/src/components/Content/index.tsx

@@ -1,15 +0,0 @@
-import React from 'react';
-
-import { Wrapper } from './wrapper';
-
-type Props = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-  small?: boolean;
-};
-
-const Content = ({ children, small, dangerouslySetInnerHTML }: Props) => (
-  <Wrapper small={small} dangerouslySetInnerHTML={dangerouslySetInnerHTML}>
-    {children}
-  </Wrapper>
-);
-
-export default Content;

package/src/components/Content/wrapper.tsx

@@ -1,61 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-type WrapperProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLDivElement>,
-  HTMLDivElement
-> & {
-  small?: boolean;
-};
-
-export const Wrapper = styled.div<WrapperProps>`
-  font-size: 1rem;
-  line-height: 1.5;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6 {
-    margin-top: ${size(4)};
-    margin-bottom: ${size(1)};
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-
-    & + p,
-    & + table {
-      margin-top: ${size(1)};
-    }
-  }
-
-  p {
-    margin: ${size(2)} 0;
-
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-  }
-
-  img {
-    display: block;
-    width: 100%;
-  }
-
-  ${({ small }) =>
-    small &&
-    css`
-      font-size: 0.875rem;
-    `}
-`;

package/src/components/ContentLogo/index.tsx

@@ -1,27 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const ContentLogo = styled.div`
-  ${(props) => props.theme.breakpoint.Sm} {
-    display: flex;
-    align-items: flex-start;
-  }
-`;
-
-export const ContentLogoText = styled.div`
-  ${(props) => props.theme.breakpoint.Sm} {
-    flex: 1 1 auto;
-  }
-`;
-
-export const ContentLogoMedia = styled.div`
-  ${(props) => props.theme.breakpoint.LtSm} {
-    margin-top: ${size(2)};
-  }
-
-  ${(props) => props.theme.breakpoint.Sm} {
-    flex-shrink: 0;
-    padding-left: ${size(4)};
-  }
-`;

package/src/components/DataList/index.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-
-import { List, Item, Label, Value } from './wrapper';
-
-interface ItemProps {
-  label: string;
-  value: string;
-}
-
-interface Props {
-  items: ItemProps[];
-}
-
-const DataList = ({ items }: Props) => (
-  <List>
-    {items.map((item) => (
-      <Item key={item.label}>
-        <Label>{item.label}</Label>
-        <Value>{item.value}</Value>
-      </Item>
-    ))}
-  </List>
-);
-
-export default DataList;

package/src/components/DataList/wrapper.tsx

@@ -1,29 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const List = styled.ul`
-  list-style: none;
-  padding: 0;
-  margin: 0;
-`;
-
-export const Item = styled.li`
-  display: flex;
-  align-items: flex-start;
-
-  & + & {
-    margin-top: ${size(1)};
-  }
-`;
-
-export const Label = styled.div`
-  flex: 1 1 auto;
-`;
-
-export const Value = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
-  flex-shrink: 0;
-  padding-left: ${size(2)};
-`;

package/src/components/DetailBox/index.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import { Wrapper, Main, Heading, Description, Footer, Foldout } from './wrapper';
-import { ButtonClear, ButtonContent } from '../Button/index';
-
-interface Props {
-  heading: string;
-  description?: string;
-  children: React.ReactNode;
-}
-
-const DetailBox = ({ heading, description, children }: Props) => {
-  const [extend, setExtend] = React.useState(false);
-  const onToggleExtend = React.useCallback(() => setExtend(!extend), [extend]);
-
-  const extendBtnText = extend ? 'Mindre information' : 'Mer information';
-
-  return (
-    <Wrapper>
-      <Main>
-        <Heading>{heading}</Heading>
-        {description && <Description>{description}</Description>}
-        <Footer>
-          <ButtonClear onClick={onToggleExtend}>
-            <ButtonContent>{extendBtnText}</ButtonContent>
-          </ButtonClear>
-        </Footer>
-      </Main>
-      {extend && <Foldout>{children}</Foldout>}
-    </Wrapper>
-  );
-};
-
-export default DetailBox;

package/src/components/DetailBox/wrapper.tsx

@@ -1,34 +0,0 @@
-import styled from 'styled-components';
-
-import { size } from '../../layout/helpers';
-import { H2 } from '../Heading/index';
-
-export const Wrapper = styled.article`
-  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.1);
-  border-radius: 3px;
-  overflow: hidden;
-`;
-
-export const Main = styled.div`
-  padding: ${size(2.5)};
-`;
-
-export const Heading = styled(H2).attrs(() => ({
-  as: 'h1',
-}))`
-  margin-bottom: 0;
-`;
-
-export const Description = styled.div`
-  margin-top: ${size(1)};
-`;
-
-export const Footer = styled.div`
-  margin-top: ${size(1)};
-  color: red;
-`;
-
-export const Foldout = styled.div`
-  background-color: ${(props) => props.theme.color.accent};
-  padding: ${size(2.5)};
-`;

package/src/components/ExtendContent/index.tsx

@@ -1,43 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { Wrapper, Extend, Action } from './wrapper';
-import { ButtonClear, ButtonContent } from '../Button/index';
-
-interface Props {
-  children: React.ReactNode;
-  actionTitle: string;
-  onClick?: () => void;
-}
-
-const ExtendContent = ({ children, actionTitle, onClick }: Props) => {
-  const [extend, setExtend] = useState(false);
-  const onExtend = useCallback(() => {
-    setExtend(true);
-    if (onClick) {
-      onClick();
-    }
-  }, []);
-
-  const onRef = (ref: HTMLDivElement | null) => {
-    const refHeight = ref?.clientHeight || 0;
-
-    if (refHeight < 207) {
-      setExtend(true);
-    }
-  };
-
-  return (
-    <Wrapper ref={onRef}>
-      <Extend extended={extend}>{children}</Extend>
-      {!extend && (
-        <Action>
-          <ButtonClear onClick={onExtend} title={actionTitle}>
-            <ButtonContent>{actionTitle}</ButtonContent>
-          </ButtonClear>
-        </Action>
-      )}
-    </Wrapper>
-  );
-};
-
-export default ExtendContent;

package/src/components/ExtendContent/wrapper.tsx

@@ -1,41 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.div``;
-
-type ExtendProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-  extended?: boolean;
-};
-
-export const Extend = styled.div<ExtendProps>`
-  position: relative;
-  max-height: 175px;
-  overflow: hidden;
-
-  :after {
-    content: '';
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    height: ${size(6)};
-    background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
-  }
-
-  ${({ extended }) =>
-    extended &&
-    css`
-      max-height: none;
-
-      :after {
-        content: none;
-      }
-    `}
-`;
-
-export const Action = styled.div`
-  display: flex;
-  justify-content: flex-end;
-  margin-top: ${size(2)};
-`;

package/src/components/ExtendInfo/index.tsx

@@ -1,32 +0,0 @@
-import React, { useState, useCallback } from 'react';
-
-import { Wrapper, Header, Title, Info, InfoBtn, Extend } from './wrapper';
-import { IconInfo } from '../Icon/index';
-
-interface Props {
-  title: string;
-  children?: React.ReactNode;
-}
-
-const ExtendInfo = ({ title, children }: Props) => {
-  const [extend, setExtend] = useState(false);
-  const onToggleExtend = useCallback(() => setExtend(!extend), [extend]);
-
-  return (
-    <Wrapper>
-      <Header>
-        <Title>{title}</Title>
-        {children && (
-          <Info>
-            <InfoBtn onClick={onToggleExtend} title="Mer information">
-              <IconInfo block />
-            </InfoBtn>
-          </Info>
-        )}
-      </Header>
-      {extend && <Extend>{children}</Extend>}
-    </Wrapper>
-  );
-};
-
-export default ExtendInfo;