docs(button): 📝 better storybook docs for button

.storybook/preview.js

@@ -1,3 +1,4 @@
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
+  layout: "centered",
 };

package.json

@@ -32,6 +32,7 @@
     "@react-aria/utils": "^3.2.0",
     "@react-stately/toggle": "^3.2.0",
     "@types/lodash.debounce": "^4.0.6",
+    "emotion": "^10.0.27",
     "lodash.debounce": "^4.0.8",
     "reakit": "^1.2.3",
     "reakit-system": "^0.14.3",

src/button/stories/AriaButton.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ReactAriaButton, ReactAriaButtonProps } from "./Buttons";
+
+export default {
+  title: "Component/Buttons/ReactAriaButton",
+  component: ReactAriaButton,
+} as Meta;
+
+const Template: Story<ReactAriaButtonProps> = args => (
+  <ReactAriaButton {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const LinkButton = Template.bind({});
+LinkButton.args = {
+  as: "a",
+  elementType: "a",
+  href: "https://reakit.io/docs/button/",
+  target: "_blank",
+  rel: "noreferrer noopener",
+};
+
+export const SpanButton = Template.bind({});
+SpanButton.args = {
+  as: "span",
+  elementType: "span",
+};
+
+export const AutoFocus = Template.bind({});
+AutoFocus.args = {
+  autoFocus: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  isDisabled: true,
+};

src/button/stories/AriaToggleButton.stories.tsx

@@ -0,0 +1,40 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ReactAriaToggleButton, ReactAriaButtonProps } from "./Buttons";
+
+export default {
+  title: "Component/Buttons/ReactAriaToggleButton",
+  component: ReactAriaToggleButton,
+} as Meta;
+
+const Template: Story<ReactAriaButtonProps> = args => (
+  <ReactAriaToggleButton {...args} />
+);
+
+export const Default = Template.bind({});
+Default.args = {};
+
+export const LinkButton = Template.bind({});
+LinkButton.args = {
+  as: "a",
+  elementType: "a",
+  href: "https://reakit.io/docs/button/",
+  target: "_blank",
+  rel: "noreferrer noopener",
+};
+
+export const SpanButton = Template.bind({});
+SpanButton.args = {
+  as: "span",
+  elementType: "span",
+};
+
+export const AutoFocus = Template.bind({});
+AutoFocus.args = {
+  autoFocus: true,
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  isDisabled: true,
+};

src/button/stories/Buttons.tsx

@@ -0,0 +1,155 @@
+import React, { JSXElementConstructor, useState } from "react";
+import { Button, AriaButton, AriaToggleButton } from "../index";
+import { useToggleState } from "@react-stately/toggle";
+
+export interface ButtonProps {
+  /**
+   * Button contents
+   * @default Button
+   */
+  label: string;
+  /**
+   * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.
+   * @default 'button'
+   */
+  as?: "button" | undefined;
+  /** A URL to link to if elementType="a". */
+  href?: string;
+  /** The target window for the link. */
+  target?: string;
+  /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */
+  rel?: string;
+  /**
+   * Is button disabled
+   * @default false
+   */
+  disabled?: boolean;
+  /**
+   * Is button focusable
+   * @default false
+   */
+  focusable?: boolean;
+  /**
+   * Optional click handler
+   */
+  onClick?: () => void;
+}
+
+export const ReakitButton: React.FC<ButtonProps> = ({
+  label = "Button",
+  ...props
+}) => {
+  return (
+    <Button
+      {...props}
+      style={{
+        background: "green",
+        color: "white",
+        padding: 10,
+        cursor: "pointer",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        border: "none",
+      }}
+    >
+      {label}
+    </Button>
+  );
+};
+
+export interface ReactAriaButtonProps {
+  /**
+   * Button contents
+   *
+   * @default Button
+   */
+  label: string;
+  /**
+   * The behavior of the button when used in an HTML form.
+   * @default 'button'
+   */
+  type?: "button" | "submit" | "reset";
+  /** Whether the button is disabled. */
+  isDisabled?: boolean;
+  /** Whether the element should receive focus on render. */
+  autoFocus?: boolean;
+  /**
+   * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.
+   * @default 'button'
+   */
+  as?: "button" | undefined;
+  /**
+   * The HTML element or React element used to render the button, e.g. 'div', 'a', or `RouterLink`.
+   * @default 'button'
+   */
+  elementType?: string | JSXElementConstructor<any>;
+
+  /** A URL to link to if elementType="a". */
+  href?: string;
+  /** The target window for the link. */
+  target?: string;
+  /** The relationship between the linked resource and the current page. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/rel). */
+  rel?: string;
+  /**
+   * Optional click handler
+   */
+  onPress?: () => void;
+}
+
+export const ReactAriaButton: React.FC<ReactAriaButtonProps> = ({
+  label,
+  ...props
+}) => {
+  const [isPressed, setIsPressed] = useState(false);
+
+  return (
+    <AriaButton
+      {...props}
+      onPressChange={setIsPressed}
+      style={{
+        background: isPressed ? "darkgreen" : "green",
+        color: "white",
+        padding: 10,
+        cursor: "pointer",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        border: "none",
+      }}
+    >
+      button
+    </AriaButton>
+  );
+};
+
+export const ReactAriaToggleButton: React.FC<ReactAriaButtonProps> = ({
+  label,
+  ...props
+}) => {
+  const state = useToggleState();
+  const [isPressed, setIsPressed] = useState(false);
+
+  return (
+    <AriaToggleButton
+      {...state}
+      {...props}
+      onPressChange={setIsPressed}
+      style={{
+        background: isPressed
+          ? state.isSelected
+            ? "darkblue"
+            : "darkgreen"
+          : state.isSelected
+          ? "blue"
+          : "green",
+        color: "white",
+        padding: 10,
+        cursor: "pointer",
+        userSelect: "none",
+        WebkitUserSelect: "none",
+        border: "none",
+      }}
+    >
+      {label}
+    </AriaToggleButton>
+  );
+};

src/button/stories/ReakitButton.stories.tsx

@@ -0,0 +1,37 @@
+import React from "react";
+import { Meta, Story } from "@storybook/react";
+import { ReakitButton, ButtonProps } from "./Buttons";
+
+export default {
+  title: "Component/Buttons/ReakitButton",
+  component: ReakitButton,
+} as Meta;
+
+const Template: Story<ButtonProps> = args => <ReakitButton {...args} />;
+
+export const Default = Template.bind({});
+
+export const LinkButton = Template.bind({});
+LinkButton.args = {
+  as: "a",
+  href: "https://reakit.io/docs/button/",
+  target: "_blank",
+  rel: "noreferrer noopener",
+};
+
+export const SpanButton = Template.bind({});
+SpanButton.args = {
+  as: "span",
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  focusable: false,
+};
+
+export const Focusable = Template.bind({});
+Focusable.args = {
+  disabled: true,
+  focusable: true,
+};

src/index.js

@@ -1,5 +1,6 @@
 export * from "./accordion";
+export * from "./button";
 export * from "./interactions";
 export * from "./select";
 export * from "./slider";
-export * from "./AriaButton";
+export * from "./link";

src/slider/stories/styles.ts

@@ -36,7 +36,7 @@ export const sliderThumbStyle: CSSProperties = {
 
 export const sliderHorizontalStyle: CSSProperties = {
   ...sliderStyle,
-  width: "100%",
+  width: "200px",
 };
 
 export const sliderHorizontalTrackStyle: CSSProperties = {