Headline, button improvements

components/index.d.ts

@@ -1,7 +1,7 @@
 /* form elements */
 export { default as AutoSuggest } from './lib/AutoSuggest';
 export { default as Badge, BadgeProps } from './lib/Badge';
-export { default as Button, ButtonProps } from './lib/Button';
+export { default as Button, ButtonProps, ButtonStyle } from './lib/Button';
 export { default as ButtonGroup } from './lib/ButtonGroup';
 export { default as Checkbox, CheckboxProps } from './lib/Checkbox';
 export { default as CurrencySelect } from './lib/CurrencySelect';
@@ -109,7 +109,7 @@ export { default as DropdownMenu, DropdownMenuProps } from './lib/DropdownMenu';
 export { default as DropdownButton } from './lib/DropdownButton';
 export { default as MenuSection } from './lib/MenuSection';
 export { default as FocusLink } from './lib/FocusLink';
-export { default as Headline } from './lib/Headline';
+export { default as Headline, HeadlineProps, HeadlineSize, HeadlineWeight } from './lib/Headline';
 export { HotKeys, FocusTrap } from './lib/HotKeys';
 export { default as Highlighter } from './lib/Highlighter';
 export { default as MenuItem } from './lib/MenuItem';

components/lib/Button/Button.d.ts

@@ -8,6 +8,8 @@ import {
 } from 'react';
 import { LinkProps } from 'react-router-dom';
 
+export type ButtonStyle = 'default' | 'primary' | 'success' | 'warning' | 'danger' | 'dropdownItem';
+
 export interface ButtonBaseProps extends AriaAttributes {
   /** Changes the (flex box) alignment of the button */
   align?: 'start' | 'center' | 'end';
@@ -20,13 +22,7 @@ export interface ButtonBaseProps extends AriaAttributes {
   /** Add a custom CSS class to the button */
   buttonClass?: string;
   /** Sets the style of the button */
-  buttonStyle?:
-    | 'default'
-    | 'primary'
-    | 'success'
-    | 'warning'
-    | 'danger'
-    | 'dropdownItem';
+  buttonStyle?: ButtonStyle;
   /** The button for the label */
   children: ReactNode;
   /** Forces the button to 100% width */
@@ -61,7 +57,6 @@ export type ButtonProps = ButtonBaseProps &
  * <Button>Sample</Button>
  */
 export const Button: ForwardRefExoticComponent<
-  PropsWithoutRef<ButtonProps> &
-    RefAttributes<HTMLAnchorElement | HTMLButtonElement>
+  PropsWithoutRef<ButtonProps> & RefAttributes<HTMLAnchorElement | HTMLButtonElement>
 >;
 export default Button;

components/lib/Button/index.d.ts

@@ -1 +1 @@
-export { default, ButtonProps } from './Button';
+export { default, ButtonProps, ButtonStyle } from './Button';

components/lib/ConfirmationModal/ConfirmationModal.d.ts

@@ -1,5 +1,5 @@
 import { FunctionComponent, MouseEventHandler, ReactNode } from 'react';
-import { ButtonProps } from '../Button';
+import { ButtonStyle } from '../Button';
 
 export interface ConfirmationModalProps {
   /** The modal's H1 tag and ARIA-label */
@@ -23,9 +23,9 @@ export interface ConfirmationModalProps {
   confirmLabel?: ReactNode;
 
   /** Style of the Submit action button */
-  buttonStyle?: ButtonProps['buttonStyle'];
+  buttonStyle?: ButtonStyle;
   /** Style of the Cancel action button */
-  cancelButtonStyle?: ButtonProps['buttonStyle'];
+  cancelButtonStyle?: ButtonStyle;
 
   /** The tag to render the modal's body as */
   bodyTag?: string;

components/lib/Headline/Headline.d.ts

@@ -0,0 +1,49 @@
+import { ForwardRefExoticComponent, PropsWithoutRef, ReactNode, RefAttributes } from 'react';
+
+export type HeadlineSize = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large';
+export type HeadlineWeight = 'regular' | 'medium' | 'bold' | 'black';
+
+export interface HeadlineProps {
+  /** If the headline should have display: block */
+  block?: boolean;
+  /**
+   * Makes the headline bold
+   * @deprecated use the weight prop instead
+   */
+  bold?: boolean;
+  /** Sets the label of the headline */
+  children: ReactNode;
+  /** Adds additional classes to the element */
+  className?: string;
+  /** Adds a faded style (gray color) */
+  faded?: boolean;
+  /** If the headline should have display: flex */
+  flex?: boolean;
+  /** Controls the bottom margin of the headline, corresponds to the size prop */
+  margin?:
+    | 'xx-small'
+    | 'x-small'
+    | 'small'
+    | 'medium'
+    | 'large'
+    | 'x-large'
+    | 'xx-large'
+    | 'none'
+    | '';
+  /** The size of the headline */
+  size?: HeadlineSize;
+  /** The tag to render the headline as */
+  // redundant, but provides nice auto-complete for listed tags
+  tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'legend' | string;
+  /** Control the font-weight of the headline */
+  weight?: HeadlineWeight;
+}
+
+/**
+ * Renders headlines in different sizes and with different tags, margins and styles depending on props.
+ * @example <Headline size="x-large">foo</Headline>
+ */
+declare const Headline: ForwardRefExoticComponent<
+  PropsWithoutRef<HeadlineProps> & RefAttributes<HTMLElement>
+>;
+export default Headline;

components/lib/Headline/index.d.ts

@@ -1,2 +1 @@
-declare const Headline: any;
-export default Headline;
+export { default, HeadlineProps, HeadlineSize, HeadlineWeight } from './Headline';