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

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

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,195 @@
+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

@@ -0,0 +1,9 @@
+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

@@ -0,0 +1,26 @@
+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

@@ -0,0 +1,14 @@
+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

@@ -0,0 +1,59 @@
+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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,69 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,51 @@
+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

@@ -0,0 +1,23 @@
+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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,17 @@
+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

@@ -0,0 +1,27 @@
+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

@@ -0,0 +1,24 @@
+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;