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

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

@@ -1,6 +1,8 @@
 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;
@@ -10,7 +12,8 @@ export const Wrapper = styled.blockquote `
     align-items: center;
   }
 `;
-export const Quote = styled.div `
+
+export const Quote = styled.div`
   > * {
     :first-child {
       margin-top: 0;
@@ -21,7 +24,8 @@ 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)};
@@ -30,15 +34,19 @@ 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/{dist-src/components/Button/index.js → src/components/Button/index.tsx}

@@ -1,9 +1,12 @@
+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;
@@ -29,7 +32,16 @@ export const ButtonReset = styled.button.attrs(() => ({
     border: 0;
   }
 `;
-const ButtonBase = styled(ButtonReset) `
+
+type ButtonResetProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLButtonElement>,
+  HTMLButtonElement
+> & {
+  fullWidth?: boolean;
+  inputHeight?: boolean;
+};
+
+const ButtonBase = styled(ButtonReset)<ButtonResetProps>`
   position: relative;
   display: inline-flex;
   align-items: center;
@@ -71,14 +83,16 @@ const ButtonBase = styled(ButtonReset) `
     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};
     `}
 
@@ -87,16 +101,19 @@ const ButtonBase = styled(ButtonReset) `
     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;
 
@@ -104,9 +121,10 @@ 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)};
@@ -142,9 +160,18 @@ 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',
-})) `
+  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
+}))<ButtonInlineProps>`
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;
@@ -154,14 +181,16 @@ 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;
@@ -170,9 +199,10 @@ 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;
@@ -182,9 +212,10 @@ 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',
-})) `
+  className: 'wayke__theme wayke__color--primary-text wayke__font--regular',
+}))<ButtonInlineProps>`
   display: inline-flex;
   vertical-align: baseline;
   text-align: left;

package/src/components/CheckMarkList/index.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { List, Item, Icon, Label } from './wrapper';
+import { IconCheck } from '../Icon/index';
+
+export interface ICheckMarkList {
+  children: React.ReactNode;
+}
+
+export const CheckMarkListItem = ({ children }: ICheckMarkList) => (
+  <Item>
+    <Icon>
+      <IconCheck block />
+    </Icon>
+    <Label>{children}</Label>
+  </Item>
+);
+
+const CheckMarkList = ({ children }: ICheckMarkList) => <List>{children}</List>;
+
+export default CheckMarkList;

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

@@ -1,11 +1,14 @@
 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;
 
@@ -13,14 +16,16 @@ 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/src/components/Checklist/index.tsx

@@ -0,0 +1,51 @@
+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/{dist-src/components/Checklist/wrapper.js → src/components/Checklist/wrapper.tsx}

@@ -1,22 +1,26 @@
 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%;
@@ -35,9 +39,10 @@ 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;
@@ -49,7 +54,8 @@ 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/src/components/ColorSelect/index.tsx

@@ -0,0 +1,63 @@
+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/{dist-src/components/ColorSelect/wrapper.js → src/components/ColorSelect/wrapper.tsx}

@@ -1,20 +1,24 @@
 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;
@@ -26,7 +30,13 @@ export const Action = styled(ButtonReset) `
     cursor: default;
   }
 `;
-export const Color = styled.div `
+
+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)};
@@ -51,19 +61,22 @@ export const Color = styled.div `
     }
   }
 
-  ${({ 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/{dist-src/components/ColumnRow/index.js → src/components/ColumnRow/index.tsx}

@@ -1,10 +1,13 @@
 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/src/components/Container/index.tsx

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

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

@@ -1,6 +1,8 @@
 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/src/components/Content/index.tsx

@@ -0,0 +1,15 @@
+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/{dist-src/components/Content/wrapper.js → src/components/Content/wrapper.tsx}

@@ -1,6 +1,15 @@
 import styled, { css } from 'styled-components';
+
 import { size } from '../../layout/helpers';
-export const Wrapper = styled.div `
+
+type WrapperProps = React.DetailedHTMLProps<
+  React.HTMLAttributes<HTMLDivElement>,
+  HTMLDivElement
+> & {
+  small?: boolean;
+};
+
+export const Wrapper = styled.div<WrapperProps>`
   font-size: 1rem;
   line-height: 1.5;
 
@@ -39,8 +48,14 @@ export const Wrapper = styled.div `
     }
   }
 
-  ${({ small }) => small &&
-    css `
+  img {
+    display: block;
+    width: 100%;
+  }
+
+  ${({ small }) =>
+    small &&
+    css`
       font-size: 0.875rem;
     `}
 `;

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

@@ -1,17 +1,21 @@
 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/src/components/DataList/index.tsx

@@ -0,0 +1,25 @@
+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/{dist-src/components/DataList/wrapper.js → src/components/DataList/wrapper.tsx}

@@ -1,11 +1,14 @@
 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;
 
@@ -13,12 +16,14 @@ 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)};
 `;