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

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/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;

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

@@ -1,51 +0,0 @@
-import styled, { css } from 'styled-components';
-import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
-  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/dist-src/components/ContentLogo/index.js

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

@@ -1,6 +0,0 @@
-import React from 'react';
-import { List, Item, Label, Value } from './wrapper';
-const DataList = ({ items }) => (React.createElement(List, null, items.map((item) => (React.createElement(Item, { key: item.label },
-    React.createElement(Label, null, item.label),
-    React.createElement(Value, null, item.value))))));
-export default DataList;

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

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

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

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

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

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