diff --git a/components/index.d.ts b/components/index.d.ts
index 32f10c8..3e9f806 100644
--- a/components/index.d.ts
+++ b/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';
diff --git a/components/lib/Button/Button.d.ts b/components/lib/Button/Button.d.ts
index 5007af1..2153646 100644
--- a/components/lib/Button/Button.d.ts
+++ b/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 &
*
*/
export const Button: ForwardRefExoticComponent<
- PropsWithoutRef &
- RefAttributes
+ PropsWithoutRef & RefAttributes
>;
export default Button;
diff --git a/components/lib/Button/index.d.ts b/components/lib/Button/index.d.ts
index d600dd4..a61d653 100644
--- a/components/lib/Button/index.d.ts
+++ b/components/lib/Button/index.d.ts
@@ -1 +1 @@
-export { default, ButtonProps } from './Button';
+export { default, ButtonProps, ButtonStyle } from './Button';
diff --git a/components/lib/ConfirmationModal/ConfirmationModal.d.ts b/components/lib/ConfirmationModal/ConfirmationModal.d.ts
index 7f44f48..f82abae 100644
--- a/components/lib/ConfirmationModal/ConfirmationModal.d.ts
+++ b/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;
diff --git a/components/lib/Headline/Headline.d.ts b/components/lib/Headline/Headline.d.ts
new file mode 100644
index 0000000..3a251a6
--- /dev/null
+++ b/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 foo
+ */
+declare const Headline: ForwardRefExoticComponent<
+ PropsWithoutRef & RefAttributes
+>;
+export default Headline;
diff --git a/components/lib/Headline/index.d.ts b/components/lib/Headline/index.d.ts
index dbd4cc9..8c4b340 100644
--- a/components/lib/Headline/index.d.ts
+++ b/components/lib/Headline/index.d.ts
@@ -1,2 +1 @@
-declare const Headline: any;
-export default Headline;
+export { default, HeadlineProps, HeadlineSize, HeadlineWeight } from './Headline';