@wayke-se/components-react 3.8.0 → 3.9.0-beta.1

package/dist-src/components/ActionList/toggle-item.js

@@ -1,24 +0,0 @@
-import React, { useState, useCallback } from 'react';
-import { ButtonSecondary, ButtonContent } from '../Button/index';
-import { RepeatTiny } from '../Repeat/index';
-const ToggleItem = ({ title, value, type, onClickVisible, onClickValue }) => {
-    const [visible, setVisible] = useState(false);
-    const _onClickValue = useCallback(() => {
-        if (onClickValue) {
-            onClickValue();
-        }
-    }, []);
-    const onClick = useCallback(() => {
-        if (!visible) {
-            setVisible(true);
-            if (onClickVisible) {
-                onClickVisible();
-            }
-        }
-    }, [visible]);
-    const visibleTitle = type === 'tel' ? 'Ring' : type === 'mailto' ? 'Skicka ett mail till' : '';
-    return (React.createElement(RepeatTiny, null, visible ? (React.createElement(ButtonSecondary, { onClick: _onClickValue, as: "a", href: `${type}:${value}`, title: `${visibleTitle} ${value}`, fullWidth: true },
-        React.createElement(ButtonContent, null, value))) : (React.createElement(ButtonSecondary, { onClick: onClick, title: title, fullWidth: true },
-        React.createElement(ButtonContent, null, title)))));
-};
-export default ToggleItem;

package/dist-src/components/Avatar/index.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Wrapper } from './wrapper';
-const Avatar = ({ image, alt }) => React.createElement(Wrapper, { image: image, "aria-label": alt });
-export default Avatar;

package/dist-src/components/Avatar/wrapper.js

@@ -1,15 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.div.attrs(() => ({
-    role: 'image',
-})) `
-  display: block;
-  width: ${size(5)};
-  height: ${size(5)};
-  border-radius: 50%;
-  background-image: ${(props) => `url(${props.image})`};
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-color: ${(props) => props.theme.color.accent};
-`;

package/dist-src/components/Badge/index.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Wrapper } from './wrapper';
-const Badge = ({ label, severity }) => React.createElement(Wrapper, { severity: severity }, label);
-export default Badge;

package/dist-src/components/Badge/wrapper.js

@@ -1,24 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-import theme from '../../layout/theme';
-const getBg = (severity) => {
-    let bg = theme.color.textDark;
-    if (severity === 'positive') {
-        bg = theme.color.ui.positive;
-    }
-    else if (severity === 'negative') {
-        bg = theme.color.ui.negative;
-    }
-    return bg;
-};
-export const Wrapper = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) `
-  display: inline-block;
-  background-color: ${(props) => getBg(props.severity)};
-  padding: ${size(0.75)} ${size(1.5)};
-  color: ${(props) => props.theme.color.textLight};
-  border-radius: 3px;
-  font-size: 0.75rem;
-  line-height: 1.2;
-`;

package/dist-src/components/Blockquote/index.js

@@ -1,12 +0,0 @@
-import React from 'react';
-import { Wrapper, Quote, Author, AvatarWrapper, Info, Name, Date } from './wrapper';
-import Avatar from '../Avatar/index';
-const Blockquote = ({ children, author, avatar, date }) => (React.createElement(Wrapper, null,
-    React.createElement(Quote, null, children),
-    author && (React.createElement(Author, null,
-        avatar && (React.createElement(AvatarWrapper, null,
-            React.createElement(Avatar, { image: avatar, alt: `${author} avatar` }))),
-        React.createElement(Info, null,
-            React.createElement(Name, null, author),
-            date && React.createElement(Date, null, date))))));
-export default Blockquote;

package/dist-src/components/Blockquote/wrapper.js

@@ -1,44 +0,0 @@
-import styled from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.blockquote `
-  display: flex;
-  flex-direction: column;
-  max-width: 600px;
-  margin: 0 auto;
-
-  ${(props) => props.theme.breakpoint.Sm} {
-    align-items: center;
-  }
-`;
-export const Quote = styled.div `
-  > * {
-    :first-child {
-      margin-top: 0;
-    }
-
-    :last-child {
-      margin-bottom: 0;
-    }
-  }
-`;
-export const Author = styled.footer `
-  display: inline-flex;
-  align-items: center;
-  margin-top: ${size(3)};
-
-  ${(props) => props.theme.breakpoint.Md} {
-    margin-top: ${size(4)};
-  }
-`;
-export const AvatarWrapper = styled.div `
-  flex-shrink: 0;
-  padding-right: ${size(1.5)};
-`;
-export const Info = styled.div `
-  flex: 1 1 auto;
-  font-size: 0.875rem;
-`;
-export const Name = styled.div.attrs(() => ({
-    className: 'wayke__theme wayke__font--bold',
-})) ``;
-export const Date = styled.div ``;

package/dist-src/components/Button/index.js

@@ -1,195 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-import { UtilityTextRight } from '../Utility/index';
-export const ButtonReset = styled.button.attrs(() => ({
-    type: 'button',
-})) `
-  display: inline-block;
-  vertical-align: middle;
-  padding: 0;
-  margin: 0;
-  background-color: transparent;
-  border: 0;
-  border-radius: 0;
-  font-family: sans-serif;
-  font-weight: 400;
-  font-size: 1em;
-  color: currentColor;
-  line-height: 1.2;
-  text-align: center;
-  text-decoration: none;
-  -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1);
-  cursor: pointer;
-
-  :focus {
-    outline: none;
-  }
-
-  ::-moz-focus-inner {
-    border: 0;
-  }
-`;
-const ButtonBase = styled(ButtonReset) `
-  position: relative;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: ${size(1.75)} ${size(6)};
-  border-radius: 3px;
-  font-size: 1rem;
-  line-height: 1.2;
-  text-decoration: none;
-  transform-origin: 50% 50%;
-  transition: 200ms ease, transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background-color: ${(props) => props.theme.color.hoverOverlay};
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 150ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.97);
-  }
-
-  &[disabled] {
-    background-color: ${(props) => props.theme.color.disabledBg};
-    border-color: ${(props) => props.theme.color.disabledBg};
-    color: ${(props) => props.theme.color.disabledText};
-  }
-
-  ${({ fullWidth }) => fullWidth &&
-    css `
-      display: flex;
-      width: 100%;
-    `}
-
-  ${({ inputHeight }) => inputHeight &&
-    css `
-      height: ${(props) => props.theme.distances.inputHeight};
-    `}
-
-  ${(props) => props.theme.breakpoint.LtSm} {
-    padding: ${size(1.75)} ${size(2.5)};
-    font-size: 0.875rem;
-  }
-`;
-export const ButtonPrimary = styled(ButtonBase).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-bg wayke__font--bold',
-})) ``;
-export const ButtonSecondary = styled(ButtonBase).attrs(() => ({
-    className: 'wayke__theme wayke__color--secondary-bg wayke__font--bold',
-})) `
-  background-color: ${(props) => props.theme.color.accentDark};
-  color: ${(props) => props.theme.color.textDark};
-`;
-export const ButtonContent = styled.div `
-  position: relative;
-  z-index: 1;
-
-  & + & {
-    margin-left: ${size(0.5)};
-  }
-`;
-export const ButtonClear = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-})) `
-  position: relative;
-  font-size: 0.875rem;
-  padding: ${size(1.5)};
-  margin: ${size(-1.5)};
-  text-align: left;
-  transform-origin: 50% 50%;
-  transition: transform 300ms cubic-bezier(0.47, 1.64, 0.41, 0.8);
-
-  ${UtilityTextRight} & {
-    text-align: right;
-  }
-
-  :before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: ${(props) => props.theme.color.accentDark};
-    border-radius: 3px;
-    opacity: 0;
-    transition: opacity 200ms ease;
-  }
-
-  :hover {
-    :before {
-      opacity: 1;
-    }
-  }
-
-  :active {
-    transform: scale(0.95);
-  }
-`;
-export const ButtonInline = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-})) `
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-  text-decoration: underline;
-
-  :not(:hover) {
-    color: ${(props) => props.theme.color.textDark};
-  }
-
-  ${({ inline }) => inline &&
-    css `
-      display: inline;
-    `}
-`;
-export const ButtonInlineBold = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-})) `
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-
-  :hover {
-    text-decoration: underline;
-  }
-`;
-export const ButtonInlineLight = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-})) `
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-  text-decoration: none;
-
-  :not(:hover) {
-    color: ${(props) => props.theme.color.textDarkLighten};
-  }
-`;
-export const ButtonInlinePrimary = styled(ButtonReset).attrs(() => ({
-    className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-})) `
-  display: inline-flex;
-  vertical-align: baseline;
-  text-align: left;
-
-  :hover {
-    text-decoration: underline;
-  }
-`;

package/dist-src/components/CheckMarkList/index.js

@@ -1,9 +0,0 @@
-import React from 'react';
-import { List, Item, Icon, Label } from './wrapper';
-import { IconCheck } from '../Icon/index';
-export const CheckMarkListItem = ({ children }) => (React.createElement(Item, null,
-    React.createElement(Icon, null,
-        React.createElement(IconCheck, { block: true })),
-    React.createElement(Label, null, children)));
-const CheckMarkList = ({ children }) => React.createElement(List, null, children);
-export default CheckMarkList;

package/dist-src/components/CheckMarkList/wrapper.js

@@ -1,26 +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/dist-src/components/Checklist/index.js

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

package/dist-src/components/Checklist/wrapper.js

@@ -1,59 +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/dist-src/components/ColorSelect/index.js

@@ -1,18 +0,0 @@
-import React from 'react';
-import { List, Item, Action, Color, Label } from './wrapper';
-const ColorSelectItem = ({ label, hex, onClick, active, disabled, boxShadow }) => {
-    return (React.createElement(Item, null,
-        React.createElement(Action, { onClick: onClick, disabled: disabled, title: label, "aria-label": label },
-            React.createElement(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' : '' }),
-            React.createElement(Label, { className: active ? 'wayke__theme wayke__color--primary-text wayke__font--bold' : '' }, label))));
-};
-const ColorSelect = ({ items }) => {
-    if (!items) {
-        return null;
-    }
-    return (React.createElement(List, null, items.map((item) => (React.createElement(ColorSelectItem, { key: item.label, label: item.label, hex: item.hex, onClick: item.onClick, active: item.active, disabled: item.disabled, boxShadow: item.boxShadow })))));
-};
-export default ColorSelect;

package/dist-src/components/ColorSelect/wrapper.js

@@ -1,69 +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;
-  }
-`;
-export const Color = styled.div `
-  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/dist-src/components/ColumnRow/index.js

@@ -1,17 +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/dist-src/components/Columns/index.js

@@ -1,76 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Column = styled.div `
-  flex: 0 1 auto;
-
-  ${({ grow }) => grow &&
-    css `
-      flex-grow: 1;
-    `}
-
-  ${({ noShrink }) => noShrink &&
-    css `
-      flex-shrink: 0;
-    `}
-`;
-export const Columns = styled.div `
-  display: flex;
-  align-items: flex-start;
-
-  ${({ valign }) => valign === 'end'
-    ? css `
-          align-items: flex-end;
-        `
-    : valign === 'center'
-        ? css `
-          align-items: center;
-        `
-        : css `
-          align-items: flex-start;
-        `}
-
-  ${({ align }) => align === 'end'
-    ? css `
-          justify-content: flex-end;
-        `
-    : align === 'center'
-        ? css `
-          justify-content: center;
-        `
-        : css `
-          justify-content: flex-start;
-        `}
-
-  ${({ $spacing }) => $spacing &&
-    css `
-      margin: ${size($spacing / -2)};
-
-      & > ${Column} {
-        padding: ${size($spacing / 2)};
-      }
-    `}
-
-  ${({ flexWrap }) => flexWrap &&
-    css `
-      flex-wrap: wrap;
-    `}
-
-  ${({ flexInline }) => flexInline &&
-    css `
-      display: inline-flex;
-    `}
-
-  ${({ clearLtSm }) => clearLtSm &&
-    css `
-      ${(props) => props.theme.breakpoint.LtSm} {
-        display: block;
-      }
-    `}
-
-  ${({ clearLtMd }) => clearLtMd &&
-    css `
-      ${(props) => props.theme.breakpoint.LtMd} {
-        display: block;
-      }
-    `}
-`;

package/dist-src/components/Container/index.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Wrapper } from './wrapper';
-const Container = ({ children }) => React.createElement(Wrapper, null, children);
-export default Container;

package/dist-src/components/Container/wrapper.js

@@ -1,12 +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/dist-src/components/Content/index.js

@@ -1,4 +0,0 @@
-import React from 'react';
-import { Wrapper } from './wrapper';
-const Content = ({ children, small, dangerouslySetInnerHTML }) => (React.createElement(Wrapper, { small: small, dangerouslySetInnerHTML: dangerouslySetInnerHTML }, children));
-export default Content;