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';