WIP

src/cli/static-styles/config.tsx

@@ -21,6 +21,15 @@ import { light } from '@sumup/design-tokens';
 import Anchor from '../../components/Anchor';
 import Badge from '../../components/Badge';
 import Button from '../../components/Button';
+// import Blockquote from '../../components/Blockquote';
+// import ButtonGroup from '../../components/ButtonGroup';
+// import Checkbox from '../../components/Checkbox';
+// import Hamburger from '../../components/Hamburger';
+// import Heading from '../../components/Heading';
+// import Hr from '../../components/Hr';
+// import Image from '../../components/Image';
+// import Input from '../../components/Input';
+// import Label from '../../components/Label';
 
 import { ComponentConfig, PropTypes } from './types';
 
@@ -47,4 +56,13 @@ export const components: ComponentConfig[] = [
     component: Button,
     propTypes: { icon: propTypes.element },
   },
+  // { name: 'Blockquote', component: Blockquote },
+  // { name: 'ButtonGroup', component: ButtonGroup },
+  // { name: 'Checkbox', component: Checkbox },
+  // { name: 'Hamburger', component: Hamburger },
+  // { name: 'Heading', component: Heading },
+  // { name: 'Hr', component: Hr },
+  // { name: 'Image', component: Image },
+  // { name: 'Input', component: Input },
+  // { name: 'Label', component: Label },
 ];

src/components/Blockquote/Blockquote.tsx

@@ -13,20 +13,18 @@
  * limitations under the License.
  */
 
-import React from 'react';
+import React, { forwardRef } from 'react';
 import { css } from '@emotion/core';
 
 import styled, { StyleProps } from '../../styles/styled';
 import Text from '../Text';
 import { TextProps } from '../Text/Text';
 
-type Size = 'kilo' | 'mega' | 'giga';
-
 export interface BlockquoteProps extends TextProps {
   /**
    * A Circuit UI body text size.
    */
-  size?: Size;
+  size?: 'kilo' | 'mega' | 'giga';
   /**
    * The ref to the HTML DOM element.
    */
@@ -52,7 +50,7 @@ const StyledText = styled(Text)<BlockquoteProps>(baseStyles, gigaStyles);
 /**
  * Indented and italicised text to denote a quotation.
  */
-export const Blockquote = React.forwardRef(
+export const Blockquote = forwardRef(
   (props: BlockquoteProps, ref: BlockquoteProps['ref']) => (
     <StyledText {...props} as="blockquote" italic ref={ref} />
   ),

src/components/ButtonGroup/ButtonGroup.tsx

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import React, { ReactElement, Ref } from 'react';
+import React, { forwardRef, ReactElement, Ref } from 'react';
 import { css } from '@emotion/core';
 
 import styled, { StyleProps } from '../../styles/styled';
@@ -79,6 +79,9 @@ const alignmentMap = {
 } as const;
 
 const alignmentStyles = ({ align = 'right' }: ButtonGroupProps) => {
+  if (!align) {
+    return null;
+  }
   const label = `button-group--${align}`;
 
   return css`
@@ -106,7 +109,7 @@ const Wrapper = styled('div')<ButtonGroupProps>(
 /**
  * Groups its Button children into a list and adds margins between.
  */
-export const ButtonGroup = React.forwardRef(
+export const ButtonGroup = forwardRef(
   ({ children, ...props }: ButtonGroupProps, ref: ButtonGroupProps['ref']) => (
     <Wrapper {...props} ref={ref}>
       {children}

src/components/Heading/Heading.tsx

@@ -19,14 +19,12 @@ import isPropValid from '@emotion/is-prop-valid';
 
 import styled, { StyleProps } from '../../styles/styled';
 
-type Size = 'kilo' | 'mega' | 'giga' | 'tera' | 'peta' | 'exa' | 'zetta';
-
 export interface HeadingProps
   extends Omit<HTMLProps<HTMLHeadingElement>, 'size'> {
   /**
    * A Circuit UI heading size.
    */
-  size?: Size;
+  size?: 'kilo' | 'mega' | 'giga' | 'tera' | 'peta' | 'exa' | 'zetta';
   /**
    * Removes the default bottom margin from the heading.
    */
@@ -37,6 +35,8 @@ export interface HeadingProps
   as?: string;
 }
 
+type Size = 'kilo' | 'mega' | 'giga' | 'tera' | 'peta' | 'exa' | 'zetta';
+
 const mobileSizeMap: { [key in Size]: Size } = {
   kilo: 'kilo',
   mega: 'mega',

src/components/IconButton/IconButton.tsx

@@ -15,7 +15,7 @@
 
 /** @jsx jsx */
 import React, { Children, cloneElement, ReactElement } from 'react';
-import { css, jsx, SerializedStyles } from '@emotion/core';
+import { css, jsx } from '@emotion/core';
 import { Theme } from '@sumup/design-tokens';
 
 import { hideVisually } from '../../styles/style-helpers';
@@ -34,11 +34,19 @@ export interface IconButtonProps extends Omit<ButtonProps, 'icon' | 'stretch'> {
   label: string;
 }
 
-const Label = styled('span')(hideVisually);
+const labelStyles = css`
+  label: button__label;
+  ${hideVisually()};
+`;
+
+const Label = styled('span')(labelStyles);
 
 const sizeStyles = (size: IconButtonProps['size'] = 'mega') => (
   theme: Theme,
-): SerializedStyles => {
+) => {
+  if (!size) {
+    return null;
+  }
   const sizeMap = {
     kilo: theme.spacings.byte,
     mega: theme.spacings.kilo,

src/components/Input/Input.tsx

@@ -146,6 +146,7 @@ const inputBaseStyles = ({ theme }: StyleProps) => css`
   width: 100%;
   margin: 0;
   ${textMega({ theme })};
+  ${inputOutline({ theme })};
 
   &::placeholder {
     color: ${theme.colors.n500};
@@ -162,6 +163,8 @@ const inputWarningStyles = ({
   hasWarning &&
   css`
     label: input--warning;
+    ${inputOutline({ theme, hasWarning })};
+
     &:not(:focus)::placeholder {
       color: ${theme.colors.warning};
     }
@@ -176,6 +179,8 @@ const inputInvalidStyles = ({
   invalid &&
   css`
     label: input--error;
+    ${inputOutline({ theme, invalid })};
+
     &:not(:focus)::placeholder {
       color: ${theme.colors.danger};
       opacity: 0.5;
@@ -226,7 +231,6 @@ const InputElement = styled('input')<InputElProps>(
   inputDisabledStyles,
   inputPrefixStyles,
   inputSuffixStyles,
-  inputOutline,
 );
 
 /**

src/components/Label/Label.tsx

@@ -67,7 +67,7 @@ const inlineStyles = ({ theme, inline }: StyleProps & LabelProps) =>
 const disabledStyles = ({ disabled }: LabelProps) =>
   disabled &&
   css`
-    label: input__label--disabled;
+    label: label--disabled;
     ${disableVisually()};
   `;