@khanacademy/wonder-blocks-button 3.0.14 → 3.0.16

package/CHANGELOG.md

@@ -1,5 +1,46 @@
 # @khanacademy/wonder-blocks-button
 
+## 3.0.16
+
+### Patch Changes
+
+-   Updated dependencies [779b031d]
+    -   @khanacademy/wonder-blocks-core@4.9.0
+    -   @khanacademy/wonder-blocks-clickable@2.4.7
+    -   @khanacademy/wonder-blocks-icon@1.2.39
+    -   @khanacademy/wonder-blocks-progress-spinner@1.1.42
+    -   @khanacademy/wonder-blocks-typography@1.1.40
+
+## 3.0.15
+
+### Patch Changes
+
+-   d816af08: Update build and test configs use TypeScript
+-   3891f544: Update babel config to include plugins that Storybook needed
+-   0d28bb1c: Configured TypeScript
+-   3d05f764: Fix HOCs and other type errors
+-   c2ec4902: Update eslint configuration, fix lint
+-   2983c05b: Include 'types' field in package.json
+-   77ff6a66: Generate Flow types from TypeScript types
+-   ec8d4b7f: Fix miscellaneous TypeScript errors
+-   Updated dependencies [d816af08]
+-   Updated dependencies [3891f544]
+-   Updated dependencies [3813715d]
+-   Updated dependencies [0d28bb1c]
+-   Updated dependencies [873f4a14]
+-   Updated dependencies [3d05f764]
+-   Updated dependencies [c2ec4902]
+-   Updated dependencies [2983c05b]
+-   Updated dependencies [77ff6a66]
+-   Updated dependencies [ec8d4b7f]
+    -   @khanacademy/wonder-blocks-clickable@2.4.6
+    -   @khanacademy/wonder-blocks-color@1.2.2
+    -   @khanacademy/wonder-blocks-core@4.8.0
+    -   @khanacademy/wonder-blocks-icon@1.2.38
+    -   @khanacademy/wonder-blocks-progress-spinner@1.1.41
+    -   @khanacademy/wonder-blocks-spacing@3.0.6
+    -   @khanacademy/wonder-blocks-typography@1.1.39
+
 ## 3.0.14
 
 ### Patch Changes

package/dist/components/button-core.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import type { ChildrenProps, ClickableState } from "@khanacademy/wonder-blocks-clickable";
+import type { SharedProps } from "./button";
+type Props = SharedProps & ChildrenProps & ClickableState;
+export default class ButtonCore extends React.Component<Props> {
+    renderInner(router: any): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/button-core.js.flow

@@ -0,0 +1,18 @@
+/**
+ * Flowtype definitions for button-core
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type {
+  ChildrenProps,
+  ClickableState,
+} from "@khanacademy/wonder-blocks-clickable";
+import type { SharedProps } from "./button";
+declare type Props = { ...SharedProps, ...ChildrenProps, ...ClickableState };
+declare export default class ButtonCore extends React.Component<Props> {
+  renderInner(router: any): React.Node;
+  render(): React.Element<>;
+}

package/dist/components/button.d.ts

@@ -0,0 +1,178 @@
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
+export type SharedProps = 
+/**
+ * aria-label should be used when `spinner={true}` to let people using screen
+ * readers that the action taken by clicking the button will take some
+ * time to complete.
+ */
+Partial<Omit<AriaProps, "aria-disabled">> & {
+    /**
+     * Text to appear on the button.
+     */
+    children: string;
+    /**
+     * An icon, displayed to the left of the title.
+     */
+    icon?: IconAsset;
+    /**
+     * If true, replaces the contents with a spinner.
+     *
+     * Note: setting this prop to `true` will disable the button.
+     *
+     * TODO(kevinb): support spinner + light once we have designs
+     */
+    spinner: boolean;
+    /**
+     * The color of the button, either blue or red.
+     */
+    color: "default" | "destructive";
+    /**
+     * The kind of the button, either primary, secondary, or tertiary.
+     *
+     * In default state:
+     *
+     * - Primary buttons have background colors
+     * - Secondary buttons have a border and no background color
+     * - Tertiary buttons have no background or border
+     */
+    kind: "primary" | "secondary" | "tertiary";
+    /**
+     * Whether the button is on a dark/colored background.
+     *
+     * Sets primary button background color to white, and secondary and
+     * tertiary button title to color.
+     */
+    light: boolean;
+    /**
+     * The size of the button. "medium" = height: 40; "small" = height: 32;
+     * "large" = height: 56;
+     */
+    size: "medium" | "small" | "large";
+    /**
+     * Whether the button is disabled.
+     */
+    disabled: boolean;
+    /**
+     * An optional id attribute.
+     */
+    id?: string;
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string;
+    /**
+     * Specifies the type of relationship between the current document and the
+     * linked document. Should only be used when `href` is specified. This
+     * defaults to "noopener noreferrer" when `target="_blank"`, but can be
+     * overridden by setting this prop to something else.
+     */
+    rel?: string;
+    /**
+     * A target destination window for a link to open in. Should only be used
+     * when `href` is specified.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank";
+    /**
+     * Set the tabindex attribute on the rendered element.
+     */
+    tabIndex?: number;
+    /**
+     * Whether to avoid using client-side navigation.
+     *
+     * If the URL passed to href is local to the client-side, e.g.
+     * /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
+     * component which handles the client-side navigation. You can set
+     * `skipClientNav` to true avoid using client-side nav entirely.
+     *
+     * NOTE: All URLs containing a protocol are considered external, e.g.
+     * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
+     * page reload.
+     */
+    skipClientNav?: boolean;
+    /**
+     * Optional custom styles.
+     */
+    style?: StyleType;
+    /**
+     * URL to navigate to.
+     */
+    href?: string;
+    /**
+     * Used for buttons within <form>s.
+     */
+    type?: "submit";
+    /**
+     * Adds CSS classes to the Button.
+     */
+    className?: string;
+    /**
+     * Function to call when button is clicked.
+     *
+     * This callback should be used for running synchronous code, like
+     * dispatching a Redux action. For asynchronous code see the
+     * beforeNav and safeWithNav props. It should NOT be used to redirect
+     * to a different URL.
+     *
+     * Note: onClick is optional if href is present, but must be defined if
+     * href is not
+     */
+    onClick?: (e: React.SyntheticEvent) => unknown;
+    /**
+     * Run async code before navigating. If the promise returned rejects then
+     * navigation will not occur.
+     *
+     * If both safeWithNav and beforeNav are provided, beforeNav will be run
+     * first and safeWithNav will only be run if beforeNav does not reject.
+     *
+     * WARNING: Do not use with `type="submit"`.
+     */
+    beforeNav?: () => Promise<unknown>;
+    /**
+     * Run async code in the background while client-side navigating. If the
+     * browser does a full page load navigation, the callback promise must be
+     * settled before the navigation will occur. Errors are ignored so that
+     * navigation is guaranteed to succeed.
+     *
+     * WARNING: Do not use with `type="submit"`.
+     */
+    safeWithNav?: () => Promise<unknown>;
+};
+type Props = SharedProps;
+type DefaultProps = {
+    color: Props["color"];
+    kind: Props["kind"];
+    light: Props["light"];
+    size: Props["size"];
+    disabled: Props["disabled"];
+    spinner: Props["spinner"];
+};
+/**
+ * Reusable button component.
+ *
+ * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
+ * `ButtonCore`. `ClickableBehavior` handles interactions and state changes.
+ * `ButtonCore` is a stateless component which displays the different states
+ * the `Button` can take.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import Button from "@khanacademy/wonder-blocks-button";
+ *
+ * <Button
+ *     onClick={(e) => console.log("Hello, world!")}
+ * >
+ *     Hello, world!
+ * </Button>
+ * ```
+ */
+export default class Button extends React.Component<Props> {
+    static defaultProps: DefaultProps;
+    renderClickableBehavior(router: any): React.ReactNode;
+    render(): React.ReactElement;
+}
+export {};

package/dist/components/button.js.flow

@@ -0,0 +1,203 @@
+/**
+ * Flowtype definitions for button
+ * Generated by Flowgen from a Typescript Definition
+ * Flowgen v1.21.0
+ * @flow
+ */
+
+import * as React from "react";
+import type { AriaProps, StyleType } from "@khanacademy/wonder-blocks-core";
+import type { IconAsset } from "@khanacademy/wonder-blocks-icon";
+export type SharedProps = {
+  ...$Rest<$Diff<AriaProps, { "aria-disabled": any }>, { ... }>,
+  ...{
+    /**
+     * Text to appear on the button.
+     */
+    children: string,
+
+    /**
+     * An icon, displayed to the left of the title.
+     */
+    icon?: IconAsset,
+
+    /**
+     * If true, replaces the contents with a spinner.
+     *
+     * Note: setting this prop to `true` will disable the button.
+     *
+     * TODO(kevinb): support spinner + light once we have designs
+     */
+    spinner: boolean,
+
+    /**
+     * The color of the button, either blue or red.
+     */
+    color: "default" | "destructive",
+
+    /**
+     * The kind of the button, either primary, secondary, or tertiary.
+     *
+     * In default state:
+     *
+     * - Primary buttons have background colors
+     * - Secondary buttons have a border and no background color
+     * - Tertiary buttons have no background or border
+     */
+    kind: "primary" | "secondary" | "tertiary",
+
+    /**
+     * Whether the button is on a dark/colored background.
+     *
+     * Sets primary button background color to white, and secondary and
+     * tertiary button title to color.
+     */
+    light: boolean,
+
+    /**
+     * The size of the button. "medium" = height: 40; "small" = height: 32;
+     * "large" = height: 56;
+     */
+    size: "medium" | "small" | "large",
+
+    /**
+     * Whether the button is disabled.
+     */
+    disabled: boolean,
+
+    /**
+     * An optional id attribute.
+     */
+    id?: string,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+
+    /**
+     * Specifies the type of relationship between the current document and the
+     * linked document. Should only be used when `href` is specified. This
+     * defaults to "noopener noreferrer" when `target="_blank"`, but can be
+     * overridden by setting this prop to something else.
+     */
+    rel?: string,
+
+    /**
+     * A target destination window for a link to open in. Should only be used
+     * when `href` is specified.
+     *
+     * TODO(WB-1262): only allow this prop when `href` is also set.t
+     */
+    target?: "_blank",
+
+    /**
+     * Set the tabindex attribute on the rendered element.
+     */
+    tabIndex?: number,
+
+    /**
+     * Whether to avoid using client-side navigation.
+     *
+     * If the URL passed to href is local to the client-side, e.g.
+     * /math/algebra/eval-exprs, then it tries to use react-router-dom's Link
+     * component which handles the client-side navigation. You can set
+     * `skipClientNav` to true avoid using client-side nav entirely.
+     *
+     * NOTE: All URLs containing a protocol are considered external, e.g.
+     * https://khanacademy.org/math/algebra/eval-exprs will trigger a full
+     * page reload.
+     */
+    skipClientNav?: boolean,
+
+    /**
+     * Optional custom styles.
+     */
+    style?: StyleType,
+
+    /**
+     * URL to navigate to.
+     */
+    href?: string,
+
+    /**
+     * Used for buttons within <form>s.
+     */
+    type?: "submit",
+
+    /**
+     * Adds CSS classes to the Button.
+     */
+    className?: string,
+
+    /**
+     * Function to call when button is clicked.
+     *
+     * This callback should be used for running synchronous code, like
+     * dispatching a Redux action. For asynchronous code see the
+     * beforeNav and safeWithNav props. It should NOT be used to redirect
+     * to a different URL.
+     *
+     * Note: onClick is optional if href is present, but must be defined if
+     * href is not
+     */
+    onClick?: (e: React.SyntheticEvent<>) => mixed,
+
+    /**
+     * Run async code before navigating. If the promise returned rejects then
+     * navigation will not occur.
+     *
+     * If both safeWithNav and beforeNav are provided, beforeNav will be run
+     * first and safeWithNav will only be run if beforeNav does not reject.
+     *
+     * WARNING: Do not use with `type="submit"`.
+     */
+    beforeNav?: () => Promise<mixed>,
+
+    /**
+     * Run async code in the background while client-side navigating. If the
+     * browser does a full page load navigation, the callback promise must be
+     * settled before the navigation will occur. Errors are ignored so that
+     * navigation is guaranteed to succeed.
+     *
+     * WARNING: Do not use with `type="submit"`.
+     */
+    safeWithNav?: () => Promise<mixed>,
+    ...
+  },
+};
+declare type Props = SharedProps;
+declare type DefaultProps = {
+  color: $PropertyType<Props, "color">,
+  kind: $PropertyType<Props, "kind">,
+  light: $PropertyType<Props, "light">,
+  size: $PropertyType<Props, "size">,
+  disabled: $PropertyType<Props, "disabled">,
+  spinner: $PropertyType<Props, "spinner">,
+  ...
+};
+/**
+ * Reusable button component.
+ *
+ * Consisting of a [`ClickableBehavior`](#clickablebehavior) surrounding a
+ * `ButtonCore`. `ClickableBehavior` handles interactions and state changes.
+ * `ButtonCore` is a stateless component which displays the different states
+ * the `Button` can take.
+ *
+ * ### Usage
+ *
+ * ```jsx
+ * import Button from "@khanacademy/wonder-blocks-button";
+ *
+ * <Button
+ *     onClick={(e) => console.log("Hello, world!")}
+ * >
+ *     Hello, world!
+ * </Button>
+ * ```
+ */
+declare export default class Button extends React.Component<Props> {
+  static defaultProps: DefaultProps;
+  renderClickableBehavior(router: any): React.Node;
+  render(): React.Element<>;
+}