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

package/{src/components/Blockquote/wrapper.tsx → dist-src/components/Blockquote/wrapper.js}

@@ -1,8 +1,6 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const Wrapper = styled.blockquote`
+export const Wrapper = styled.blockquote `
   display: flex;
   flex-direction: column;
   max-width: 600px;
@@ -12,8 +10,7 @@ export const Wrapper = styled.blockquote`
     align-items: center;
   }
 `;
-
-export const Quote = styled.div`
+export const Quote = styled.div `
   > * {
     :first-child {
       margin-top: 0;
@@ -24,8 +21,7 @@ export const Quote = styled.div`
     }
   }
 `;
-
-export const Author = styled.footer`
+export const Author = styled.footer `
   display: inline-flex;
   align-items: center;
   margin-top: ${size(3)};
@@ -34,19 +30,15 @@ export const Author = styled.footer`
     margin-top: ${size(4)};
   }
 `;
-
-export const AvatarWrapper = styled.div`
+export const AvatarWrapper = styled.div `
   flex-shrink: 0;
   padding-right: ${size(1.5)};
 `;
-
-export const Info = styled.div`
+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``;
+    className: 'wayke__theme wayke__font--bold',
+})) ``;
+export const Date = styled.div ``;

package/{src/components/Button/index.tsx → dist-src/components/Button/index.js}

@@ -1,12 +1,9 @@
-import * as React from 'react';
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { UtilityTextRight } from '../Utility/index';
-
 export const ButtonReset = styled.button.attrs(() => ({
-  type: 'button',
-}))`
+    type: 'button',
+})) `
   display: inline-block;
   vertical-align: middle;
   padding: 0;
@@ -32,16 +29,7 @@ export const ButtonReset = styled.button.attrs(() => ({
     border: 0;
   }
 `;
-
-type ButtonResetProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
-  fullWidth?: boolean;
-  inputHeight?: boolean;
-};
-
-const ButtonBase = styled(ButtonReset)<ButtonResetProps>`
+const ButtonBase = styled(ButtonReset) `
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -83,16 +71,14 @@ const ButtonBase = styled(ButtonReset)<ButtonResetProps>`
     color: ${(props) => props.theme.color.disabledText};
   }
 
-  ${({ fullWidth }) =>
-    fullWidth &&
-    css`
+  ${({ fullWidth }) => fullWidth &&
+    css `
       display: flex;
       width: 100%;
     `}
 
-  ${({ inputHeight }) =>
-    inputHeight &&
-    css`
+  ${({ inputHeight }) => inputHeight &&
+    css `
       height: ${(props) => props.theme.distances.inputHeight};
     `}
 
@@ -101,19 +87,16 @@ const ButtonBase = styled(ButtonReset)<ButtonResetProps>`
     font-size: 0.875rem;
   }
 `;
-
 export const ButtonPrimary = styled(ButtonBase).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-bg wayke__font--bold',
-}))``;
-
+    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',
-}))`
+    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`
+export const ButtonContent = styled.div `
   position: relative;
   z-index: 1;
 
@@ -121,10 +104,9 @@ export const ButtonContent = styled.div`
     margin-left: ${size(0.5)};
   }
 `;
-
 export const ButtonClear = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+})) `
   position: relative;
   font-size: 0.875rem;
   padding: ${size(1.5)};
@@ -160,18 +142,9 @@ export const ButtonClear = styled(ButtonReset).attrs(() => ({
     transform: scale(0.95);
   }
 `;
-
-type ButtonInlineProps = React.DetailedHTMLProps<
-  React.HTMLAttributes<HTMLButtonElement>,
-  HTMLButtonElement
-> & {
-  inline?: boolean;
-  as?: string;
-};
-
 export const ButtonInline = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-}))<ButtonInlineProps>`
+    className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
+})) `
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;
@@ -181,16 +154,14 @@ export const ButtonInline = styled(ButtonReset).attrs(() => ({
     color: ${(props) => props.theme.color.textDark};
   }
 
-  ${({ inline }) =>
-    inline &&
-    css`
+  ${({ inline }) => inline &&
+    css `
       display: inline;
     `}
 `;
-
 export const ButtonInlineBold = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
-}))`
+    className: 'wayke__theme wayke__color--primary-text wayke__font--bold',
+})) `
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;
@@ -199,10 +170,9 @@ export const ButtonInlineBold = styled(ButtonReset).attrs(() => ({
     text-decoration: underline;
   }
 `;
-
 export const ButtonInlineLight = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-}))`
+    className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
+})) `
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;
@@ -212,10 +182,9 @@ export const ButtonInlineLight = styled(ButtonReset).attrs(() => ({
     color: ${(props) => props.theme.color.textDarkLighten};
   }
 `;
-
 export const ButtonInlinePrimary = styled(ButtonReset).attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
-}))<ButtonInlineProps>`
+    className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
+})) `
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;

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/{src/components/CheckMarkList/wrapper.tsx → dist-src/components/CheckMarkList/wrapper.js}

@@ -1,14 +1,11 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const List = styled.ul`
+export const List = styled.ul `
   list-style: none;
   padding: 0;
   margin: 0;
 `;
-
-export const Item = styled.li`
+export const Item = styled.li `
   position: relative;
   font-size: 0.875rem;
 
@@ -16,16 +13,14 @@ export const Item = styled.li`
     margin-top: ${size(0.5)};
   }
 `;
-
 export const Icon = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
   position: absolute;
   left: 0;
   top: 4px; // Magic number
   font-size: 0.875em;
 `;
-
-export const Label = styled.div`
+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/{src/components/Checklist/wrapper.tsx → dist-src/components/Checklist/wrapper.js}

@@ -1,26 +1,22 @@
 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',
-}))`
+    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`
+export const Item = styled.li `
   ${List} {
     padding-left: ${size(5)};
     margin: 0;
   }
 `;
-
-export const Action = styled(ButtonReset)`
+export const Action = styled(ButtonReset) `
   position: relative;
   display: block;
   width: 100%;
@@ -39,10 +35,9 @@ export const Action = styled(ButtonReset)`
     margin-top: 2px; // Magic number
   }
 `;
-
 export const ActionIcon = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__color--primary-text',
-}))`
+    className: 'wayke__theme wayke__color--primary-text',
+})) `
   position: absolute;
   top: ${size(1)};
   left: 0;
@@ -54,8 +49,7 @@ export const ActionIcon = styled.div.attrs(() => ({
   margin-top: 2px; // Magic number
   font-size: ${size(1.5)};
 `;
-
-export const ActionLabel = styled.div`
+export const ActionLabel = styled.div `
   padding-left: ${size(3)};
   transition: transform 150ms ease;
 

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/{src/components/ColorSelect/wrapper.tsx → dist-src/components/ColorSelect/wrapper.js}

@@ -1,24 +1,20 @@
 import styled, { css } from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { ButtonReset } from '../Button/index';
-
-export const List = styled.ul`
+export const List = styled.ul `
   display: flex;
   flex-wrap: wrap;
   list-style: none;
   padding: 0;
   margin: ${size(-1.5)};
 `;
-
-export const Item = styled.li`
+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)`
+export const Action = styled(ButtonReset) `
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -30,13 +26,7 @@ export const Action = styled(ButtonReset)`
     cursor: default;
   }
 `;
-
-type ColorProps = React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
-  active?: boolean;
-  boxShadow?: boolean;
-};
-
-export const Color = styled.div<ColorProps>`
+export const Color = styled.div `
   position: relative;
   width: ${size(3.75)};
   height: ${size(3.75)};
@@ -61,22 +51,19 @@ export const Color = styled.div<ColorProps>`
     }
   }
 
-  ${({ active }) =>
-    active &&
-    css`
+  ${({ active }) => active &&
+    css `
       :before {
         display: block;
       }
     `}
 
-  ${({ boxShadow }) =>
-    boxShadow &&
-    css`
+  ${({ boxShadow }) => boxShadow &&
+    css `
       box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
     `}
 `;
-
-export const Label = styled.div`
+export const Label = styled.div `
   margin-top: ${size(1.25)};
   font-size: 0.875rem;
 `;

package/{src/components/ColumnRow/index.tsx → dist-src/components/ColumnRow/index.js}

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

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/{src/components/Container/wrapper.tsx → dist-src/components/Container/wrapper.js}

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

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/{src/components/Content/wrapper.tsx → dist-src/components/Content/wrapper.js}

@@ -1,15 +1,6 @@
 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>`
+export const Wrapper = styled.div `
   font-size: 1rem;
   line-height: 1.5;
 
@@ -53,9 +44,8 @@ export const Wrapper = styled.div<WrapperProps>`
     width: 100%;
   }
 
-  ${({ small }) =>
-    small &&
-    css`
+  ${({ small }) => small &&
+    css `
       font-size: 0.875rem;
     `}
 `;

package/{src/components/ContentLogo/index.tsx → dist-src/components/ContentLogo/index.js}

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

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/{src/components/DataList/wrapper.tsx → dist-src/components/DataList/wrapper.js}

@@ -1,14 +1,11 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
-
-export const List = styled.ul`
+export const List = styled.ul `
   list-style: none;
   padding: 0;
   margin: 0;
 `;
-
-export const Item = styled.li`
+export const Item = styled.li `
   display: flex;
   align-items: flex-start;
 
@@ -16,14 +13,12 @@ export const Item = styled.li`
     margin-top: ${size(1)};
   }
 `;
-
-export const Label = styled.div`
+export const Label = styled.div `
   flex: 1 1 auto;
 `;
-
 export const Value = styled.div.attrs(() => ({
-  className: 'wayke__theme wayke__font--bold',
-}))`
+    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/{src/components/DetailBox/wrapper.tsx → dist-src/components/DetailBox/wrapper.js}

@@ -1,34 +1,27 @@
 import styled from 'styled-components';
-
 import { size } from '../../layout/helpers';
 import { H2 } from '../Heading/index';
-
-export const Wrapper = styled.article`
+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`
+export const Main = styled.div `
   padding: ${size(2.5)};
 `;
-
 export const Heading = styled(H2).attrs(() => ({
-  as: 'h1',
-}))`
+    as: 'h1',
+})) `
   margin-bottom: 0;
 `;
-
-export const Description = styled.div`
+export const Description = styled.div `
   margin-top: ${size(1)};
 `;
-
-export const Footer = styled.div`
+export const Footer = styled.div `
   margin-top: ${size(1)};
   color: red;
 `;
-
-export const Foldout = styled.div`
+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;