@dhis2-ui/button 8.15.1 → 8.16.0-alpha.2

package/build/cjs/dropdown-button/dropdown-button.js

@@ -183,10 +183,8 @@ DropdownButton.propTypes = {
   component: _propTypes2.default.element,
   dataTest: _propTypes2.default.string,
 
-  /**
-   * Applies 'destructive' button appearance, implying a dangerous action.
-   */
-  destructive: _propTypes2.default.bool,
+  /** Button variant. Mutually exclusive with `primary` and `secondary` props */
+  destructive: _uiConstants.sharedPropTypes.buttonVariantPropType,
 
   /** Make the button non-interactive */
   disabled: _propTypes2.default.bool,
@@ -202,15 +200,11 @@ DropdownButton.propTypes = {
   /** Controls popper visibility. When implementing this prop the component becomes a controlled component */
   open: _propTypes2.default.bool,
 
-  /**
-   * Applies 'primary' button appearance, implying the most important action.
-   */
-  primary: _propTypes2.default.bool,
+  /** Button variant. Mutually exclusive with `destructive` and `secondary` props */
+  primary: _uiConstants.sharedPropTypes.buttonVariantPropType,
 
-  /**
-   * Applies 'secondary' button appearance.
-   */
-  secondary: _propTypes2.default.bool,
+  /** Button variant. Mutually exclusive with `primary` and `destructive` props */
+  secondary: _uiConstants.sharedPropTypes.buttonVariantPropType,
 
   /** Button size. Mutually exclusive with `large` prop */
   small: _uiConstants.sharedPropTypes.sizePropType,

package/build/cjs/split-button/split-button.js

@@ -146,10 +146,8 @@ SplitButton.propTypes = {
   component: _propTypes.default.element,
   dataTest: _propTypes.default.string,
 
-  /**
-   * Applies 'destructive' button appearance, implying a dangerous action.
-   */
-  destructive: _propTypes.default.bool,
+  /** Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props */
+  destructive: _uiConstants.sharedPropTypes.buttonVariantPropType,
 
   /** Disables the button and makes it uninteractive */
   disabled: _propTypes.default.bool,
@@ -164,15 +162,11 @@ SplitButton.propTypes = {
   large: _uiConstants.sharedPropTypes.sizePropType,
   name: _propTypes.default.string,
 
-  /**
-   * Applies 'primary' button appearance, implying the most important action.
-   */
-  primary: _propTypes.default.bool,
+  /** Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props */
+  primary: _uiConstants.sharedPropTypes.buttonVariantPropType,
 
-  /**
-   * Applies 'secondary' button appearance.
-   */
-  secondary: _propTypes.default.bool,
+  /** Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props */
+  secondary: _uiConstants.sharedPropTypes.buttonVariantPropType,
 
   /** Changes button size. Mutually exclusive with `large` prop */
   small: _uiConstants.sharedPropTypes.sizePropType,

package/build/es/dropdown-button/dropdown-button.js

@@ -163,10 +163,8 @@ DropdownButton.propTypes = {
   component: PropTypes.element,
   dataTest: PropTypes.string,
 
-  /**
-   * Applies 'destructive' button appearance, implying a dangerous action.
-   */
-  destructive: PropTypes.bool,
+  /** Button variant. Mutually exclusive with `primary` and `secondary` props */
+  destructive: sharedPropTypes.buttonVariantPropType,
 
   /** Make the button non-interactive */
   disabled: PropTypes.bool,
@@ -182,15 +180,11 @@ DropdownButton.propTypes = {
   /** Controls popper visibility. When implementing this prop the component becomes a controlled component */
   open: PropTypes.bool,
 
-  /**
-   * Applies 'primary' button appearance, implying the most important action.
-   */
-  primary: PropTypes.bool,
+  /** Button variant. Mutually exclusive with `destructive` and `secondary` props */
+  primary: sharedPropTypes.buttonVariantPropType,
 
-  /**
-   * Applies 'secondary' button appearance.
-   */
-  secondary: PropTypes.bool,
+  /** Button variant. Mutually exclusive with `primary` and `destructive` props */
+  secondary: sharedPropTypes.buttonVariantPropType,
 
   /** Button size. Mutually exclusive with `large` prop */
   small: sharedPropTypes.sizePropType,

package/build/es/split-button/split-button.js

@@ -124,10 +124,8 @@ SplitButton.propTypes = {
   component: PropTypes.element,
   dataTest: PropTypes.string,
 
-  /**
-   * Applies 'destructive' button appearance, implying a dangerous action.
-   */
-  destructive: PropTypes.bool,
+  /** Applies 'destructive' appearance to indicate purpose. Mutually exclusive with `primary` and `secondary` props */
+  destructive: sharedPropTypes.buttonVariantPropType,
 
   /** Disables the button and makes it uninteractive */
   disabled: PropTypes.bool,
@@ -142,15 +140,11 @@ SplitButton.propTypes = {
   large: sharedPropTypes.sizePropType,
   name: PropTypes.string,
 
-  /**
-   * Applies 'primary' button appearance, implying the most important action.
-   */
-  primary: PropTypes.bool,
+  /** Applies 'primary' appearance to indicate purpose. Mutually exclusive with `destructive` and `secondary` props */
+  primary: sharedPropTypes.buttonVariantPropType,
 
-  /**
-   * Applies 'secondary' button appearance.
-   */
-  secondary: PropTypes.bool,
+  /** Applies 'secondary' appearance to indicate purpose. Mutually exclusive with `primary` and `destructive` props */
+  secondary: sharedPropTypes.buttonVariantPropType,
 
   /** Changes button size. Mutually exclusive with `large` prop */
   small: sharedPropTypes.sizePropType,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@dhis2-ui/button",
-    "version": "8.15.1",
+    "version": "8.16.0-alpha.2",
     "description": "UI Button",
     "repository": {
         "type": "git",
@@ -13,6 +13,7 @@
     "main": "./build/cjs/index.js",
     "module": "./build/es/index.js",
     "exports": {
+        "types": "./types/index.d.ts",
         "import": "./build/es/index.js",
         "require": "./build/cjs/index.js"
     },
@@ -32,20 +33,22 @@
     },
     "dependencies": {
         "@dhis2/prop-types": "^3.1.2",
-        "@dhis2-ui/layer": "8.15.1",
-        "@dhis2-ui/loader": "8.15.1",
-        "@dhis2-ui/popper": "8.15.1",
-        "@dhis2/ui-constants": "8.15.1",
-        "@dhis2/ui-icons": "8.15.1",
+        "@dhis2-ui/layer": "8.16.0-alpha.2",
+        "@dhis2-ui/loader": "8.16.0-alpha.2",
+        "@dhis2-ui/popper": "8.16.0-alpha.2",
+        "@dhis2/ui-constants": "8.16.0-alpha.2",
+        "@dhis2/ui-icons": "8.16.0-alpha.2",
         "classnames": "^2.3.1",
         "prop-types": "^15.7.2"
     },
     "files": [
-        "build"
+        "build",
+        "types"
     ],
     "devDependencies": {
         "react": "16.13",
         "react-dom": "16.13",
         "styled-jsx": "^4.0.1"
-    }
+    },
+    "types": "types"
 }

package/types/index.d.ts

@@ -0,0 +1,234 @@
+import * as React from 'react'
+
+export type ButtonType = 'submit' | 'reset' | 'button'
+
+export interface ButtonEventPayload {
+    value?: string
+    name?: string
+}
+
+type ButtonEventHandler<Event extends React.SyntheticEvent> = (
+    arg0: ButtonEventPayload,
+    event: Event
+) => void
+
+type ButtonOpenEventHandler<
+    Event extends React.SyntheticEvent = React.MouseEvent<HTMLButtonElement>
+> = (arg0: ButtonEventPayload & { open: boolean }, event: Event) => void
+
+export interface ButtonProps {
+    /**
+     * Component to render inside the button
+     */
+    children?: React.ReactNode
+    /**
+     * A className that will be passed to the `<button>` element
+     */
+    className?: string
+    /**
+     * A string that will be applied as a `data-test` attribute on the button element
+     * for identification during testing
+     */
+    dataTest?: string
+    /** Applies 'destructive' button appearance, implying a dangerous action */
+    destructive?: boolean
+    /**
+     * Applies a greyed-out appearance and makes the button non-interactive
+     */
+    disabled?: boolean
+    /**
+     * An icon element to display inside the button
+     */
+    icon?: React.ReactElement
+    /**
+     * Use this variant to capture the initial focus on the page.
+     */
+    initialFocus?: boolean
+    /**
+     * Makes the button large. Mutually exclusive with `small`
+     */
+    large?: boolean
+    /**
+     * Sets the button into a loading state
+     */
+    loading?: boolean
+    /**
+     * Sets `name` attribute on button element.
+     * Gets passed as part of the first argument to callbacks (see `onClick`).
+     */
+    name?: string
+    /** Applies 'primary' button appearance, implying the most important action */
+    primary?: boolean
+    /** Applies 'secondary' button appearance */
+    secondary?: boolean
+    /**
+     * Makes the button small. Mutually exclusive with `large` prop
+     */
+    small?: boolean
+    /**
+     * Tab index for focusing the button with a keyboard
+     */
+    tabIndex?: string
+    /**
+     * Changes appearance of button to an on/off state
+     */
+    toggled?: boolean
+    /**
+     * Sets `type` attribute on `<button>` element
+     */
+    type?: ButtonType
+    /**
+     * Value associated with the button.
+     * Gets passed as part of the first argument to callbacks (see `onClick`).
+     */
+    value?: string
+    /**
+     * Callback to trigger on de-focus (blur).
+     * Called with same args as `onClick`
+     */
+    onBlur?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
+    /**
+     * Callback to trigger on click.
+     * Called with args `({ value, name }, event)`
+     */
+    onClick?: ButtonEventHandler<React.MouseEvent<HTMLButtonElement>>
+    /**
+     * Callback to trigger on focus. Called with same args as `onClick`
+     */
+    onFocus?: ButtonEventHandler<React.FocusEvent<HTMLButtonElement>>
+    /**
+     * Callback to trigger on key-down. Called with same args as `onClick`
+     */
+    onKeyDown?: ButtonEventHandler<React.KeyboardEvent<HTMLButtonElement>>
+}
+
+export const Button: React.FC<ButtonProps>
+
+export interface ButtonStripProps {
+    children?: React.ReactNode
+    className?: string
+    dataTest?: string
+    /**
+     * Horizontal alignment for buttons. Mutually exclusive with `middle` prop
+     */
+    end?: boolean
+    /**
+     * Horizontal alignment. Mutually exclusive with `end` prop
+     */
+    middle?: boolean
+}
+
+export const ButtonStrip: React.FC<ButtonStripProps>
+
+export type DropdownButtonType = 'submit' | 'reset' | 'button'
+
+export interface DropdownButtonProps {
+    /**
+     * Children to render inside the buton
+     */
+    children?: React.ReactNode
+    className?: string
+    /**
+     * Component to show/hide when button is clicked
+     */
+    component?: React.ReactElement<any>
+    dataTest?: string
+    /** Applies 'destructive' button appearance, implying a dangerous action. */
+    destructive?: boolean
+    /**
+     * Make the button non-interactive
+     */
+    disabled?: boolean
+    icon?: React.ReactElement<any>
+    /**
+     * Grants button initial focus on the page
+     */
+    initialFocus?: boolean
+    /**
+     * Button size. Mutually exclusive with `small` prop
+     */
+    large?: boolean
+    name?: string
+    /**
+     * Controls popper visibility. When implementing this prop the component becomes a controlled component
+     */
+    open?: boolean
+    /** Applies 'primary' button appearance, implying the most important action */
+    primary?: boolean
+    /** Applies 'secondary' button appearance */
+    secondary?: boolean
+    /**
+     * Changes button size. Mutually exclusive with `large` prop
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Type of button. Can take advantage of different default behavior
+     */
+    type?: DropdownButtonType
+    value?: string
+    /**
+     * Callback triggered on click.
+     * Called with signature `({ name: string, value: string, open: bool }, event)`
+     * Is required when using the `open` prop to override the internal
+     * state.
+     */
+    onClick?: ButtonOpenEventHandler
+}
+
+export class DropdownButton extends React.Component<DropdownButtonProps, any> {
+    render(): JSX.Element
+}
+
+export type SplitButtonType = 'submit' | 'reset' | 'button'
+
+export interface SplitButtonProps {
+    children?: string
+    className?: string
+    /**
+     * Component to render when the dropdown is opened
+     */
+    component?: React.ReactElement<any>
+    dataTest?: string
+    /** Applies 'destructive' button appearance, implying a dangerous action. */
+    destructive?: boolean
+    /**
+     * Disables the button and makes it uninteractive
+     */
+    disabled?: boolean
+    /**
+     * An icon to add inside the button
+     */
+    icon?: React.ReactElement<any>
+    /**
+     * Grants the button the initial focus
+     */
+    initialFocus?: boolean
+    /**
+     * Changes button size. Mutually exclusive with `small` prop
+     */
+    large?: boolean
+    name?: string
+    /** Applies 'primary' button appearance, implying the most important action */
+    primary?: boolean
+    /** Applies 'secondary' button appearance */
+    secondary?: boolean
+    /**
+     * Changes button size. Mutually exclusive with `large` prop
+     */
+    small?: boolean
+    tabIndex?: string
+    /**
+     * Type of button. Applied to html `button` element
+     */
+    type?: SplitButtonType
+    /**
+     * Value associated with the button. Passed in object to onClick handler
+     */
+    value?: string
+    onClick?: ButtonOpenEventHandler
+}
+
+export class SplitButton extends React.Component<SplitButtonProps, any> {
+    render(): JSX.Element
+}