orcs-design-system/es/components/Button/Button.stories.js

TeamForm's Design System, aka: ORCS

import React from "react";
import { action } from "@storybook/addon-actions";
import Icon from "../Icon";
import Spacer from "../Spacer";
import Flex from "../Flex";
import Button, { VARIANT_COLORS } from ".";
import outlookLogo from "../../../.storybook/static/images/outlookLogo.png";
import teamsLogo from "../../../.storybook/static/images/teamsLogo.png";
import slackLogo from "../../../.storybook/static/images/slackLogo.png";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
  title: "Components/Buttons/Button",
  component: Button
};
export const defaultButton = () => /*#__PURE__*/_jsx(Button, {
  children: "Default button"
});
defaultButton.storyName = "Default button";
export const variants = () => /*#__PURE__*/_jsx(Spacer, {
  my: "3",
  children: Object.keys(VARIANT_COLORS).map(variant => /*#__PURE__*/_jsx(Button, {
    large: true,
    variant: variant,
    onClick: action("clicked"),
    children: variant
  }, variant))
});
export const alternateSize = () => /*#__PURE__*/_jsxs(Spacer, {
  my: "3",
  children: [/*#__PURE__*/_jsx(Button, {
    small: true,
    onClick: action("clicked"),
    children: "Small button"
  }), /*#__PURE__*/_jsx(Button, {
    large: true,
    onClick: action("clicked"),
    children: "Large button"
  }), /*#__PURE__*/_jsx(Button, {
    height: "xxxl",
    onClick: action("clicked"),
    children: "Specified height button"
  }), /*#__PURE__*/_jsx(Button, {
    onClick: action("clicked"),
    width: "100px",
    children: "A multiple-line button with specified width"
  })]
});
alternateSize.storyName = "Alternate sizes";
export const alternateColours = () => /*#__PURE__*/_jsxs(Spacer, {
  my: "3",
  children: [/*#__PURE__*/_jsx(Button, {
    variant: "success",
    onClick: action("clicked"),
    children: "Success/green button"
  }), /*#__PURE__*/_jsx(Button, {
    variant: "danger",
    onClick: action("clicked"),
    children: "Danger/red button"
  })]
});
alternateColours.storyName = "Alternate colours";
export const ghost = () => /*#__PURE__*/_jsxs(Spacer, {
  my: "3",
  children: [/*#__PURE__*/_jsx(Button, {
    small: true,
    variant: "ghost",
    onClick: action("clicked"),
    children: "Small ghost button"
  }), /*#__PURE__*/_jsx(Button, {
    variant: "ghost",
    onClick: action("clicked"),
    children: "Regular ghost button"
  }), /*#__PURE__*/_jsx(Button, {
    large: true,
    variant: "ghost",
    onClick: action("clicked"),
    children: "Large ghost button"
  })]
});
ghost.storyName = "Ghost style";
export const fullWidth = () => /*#__PURE__*/_jsx(Button, {
  fullWidth: true,
  children: "Full width button"
});
fullWidth.storyName = "Full width";
export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
  my: "r",
  children: [/*#__PURE__*/_jsx(Button, {
    disabled: true,
    children: "Disabled button"
  }), /*#__PURE__*/_jsx(Button, {
    variant: "disabled",
    children: "Alternate way of making button disabled"
  })]
});
disabled.storyName = "Disabled state";
export const loading = () => /*#__PURE__*/_jsxs(Spacer, {
  my: "3",
  children: [/*#__PURE__*/_jsx(Button, {
    isLoading: true,
    children: "Loading..."
  }), /*#__PURE__*/_jsx(Button, {
    isLoading: true,
    variant: "success",
    children: "Saving..."
  }), /*#__PURE__*/_jsx(Button, {
    isLoading: true,
    variant: "danger",
    children: "Deleting..."
  })]
});
loading.storyName = "Loading state";
export const withIcon = () => /*#__PURE__*/_jsxs(Spacer, {
  my: "3",
  children: [/*#__PURE__*/_jsxs(Button, {
    iconLeft: true,
    children: [/*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "user-plus"]
    }), "Left aligned icon"]
  }), /*#__PURE__*/_jsxs(Button, {
    iconRight: true,
    children: ["Right aligned icon", /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "download"]
    })]
  }), /*#__PURE__*/_jsx(Button, {
    leftIcon: ["fas", "star"],
    children: "Left icon magic!"
  })]
});
withIcon.storyName = "With icon";
export const iconOnly = () => /*#__PURE__*/_jsxs(Spacer, {
  my: "3",
  children: [/*#__PURE__*/_jsx(Button, {
    small: true,
    iconOnly: true,
    p: "s",
    ariaLabel: /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "download"]
    }),
    children: /*#__PURE__*/_jsx(Icon, {
      icon: ["far", "calendar-alt"]
    })
  }), /*#__PURE__*/_jsx(Button, {
    iconOnly: true,
    p: "s",
    ariaLabel: "Show calendar",
    children: /*#__PURE__*/_jsx(Icon, {
      icon: ["far", "calendar-alt"]
    })
  }), /*#__PURE__*/_jsx(Button, {
    large: true,
    iconOnly: true,
    p: "s",
    ariaLabel: "Show calendar",
    children: /*#__PURE__*/_jsx(Icon, {
      icon: ["far", "calendar-alt"]
    })
  }), /*#__PURE__*/_jsx(Flex, {
    alignItems: "center",
    mt: "r",
    children: /*#__PURE__*/_jsxs(Spacer, {
      mr: "r",
      children: [/*#__PURE__*/_jsx(Button, {
        iconOnly: true,
        variant: "success",
        onClick: action("clicked"),
        width: "33px",
        height: "32px",
        ariaLabel: "Confirm",
        children: /*#__PURE__*/_jsx(Icon, {
          icon: ["fas", "check"]
        })
      }), /*#__PURE__*/_jsx(Button, {
        iconOnly: true,
        variant: "successAlternate",
        onClick: action("clicked"),
        width: "33px",
        height: "32px",
        ariaLabel: "Confirm",
        children: /*#__PURE__*/_jsx(Icon, {
          icon: ["fas", "check"]
        })
      }), /*#__PURE__*/_jsx(Button, {
        iconOnly: true,
        variant: "danger",
        onClick: action("clicked"),
        width: "33px",
        height: "32px",
        ariaLabel: "Cancel",
        children: /*#__PURE__*/_jsx(Icon, {
          icon: ["fas", "times"]
        })
      }), /*#__PURE__*/_jsx(Button, {
        iconOnly: true,
        variant: "dangerAlternate",
        onClick: action("clicked"),
        width: "33px",
        height: "32px",
        ariaLabel: "Cancel",
        children: /*#__PURE__*/_jsx(Icon, {
          icon: ["fas", "times"]
        })
      })]
    })
  })]
});
iconOnly.storyName = "Icon only";
export const alternativeStyles = () => /*#__PURE__*/_jsxs(Flex, {
  gap: "r",
  children: [/*#__PURE__*/_jsx(Button, {
    height: "35px",
    width: "35px",
    borderRadius: "35px",
    variant: "borderBlue",
    children: /*#__PURE__*/_jsx("img", {
      src: outlookLogo,
      alt: "Outlook logo",
      height: "50%"
    })
  }), /*#__PURE__*/_jsx(Button, {
    height: "35px",
    width: "35px",
    borderRadius: "35px",
    variant: "borderBlue",
    children: /*#__PURE__*/_jsx("img", {
      src: teamsLogo,
      alt: "Teams logo",
      height: "50%"
    })
  }), /*#__PURE__*/_jsx(Button, {
    height: "35px",
    width: "35px",
    borderRadius: "35px",
    variant: "borderBlue",
    children: /*#__PURE__*/_jsx("img", {
      src: slackLogo,
      alt: "Slack logo",
      height: "50%"
    })
  }), /*#__PURE__*/_jsx(Button, {
    height: "35px",
    width: "35px",
    borderRadius: "35px",
    variant: "borderGrey",
    children: /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "share-alt"],
      color: "greyDarkest"
    })
  }), /*#__PURE__*/_jsx(Button, {
    height: "35px",
    width: "35px",
    borderRadius: "35px",
    variant: "borderGrey",
    children: /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "thumbtack"],
      color: "greyDarkest"
    })
  }), /*#__PURE__*/_jsxs(Button, {
    height: "35px",
    borderRadius: "35px",
    variant: "borderGrey",
    px: "r",
    iconLeft: true,
    children: [/*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "share-alt"],
      color: "greyDarkest"
    }), "Share"]
  }), /*#__PURE__*/_jsxs(Button, {
    height: "35px",
    borderRadius: "35px",
    variant: "borderGrey",
    px: "r",
    iconLeft: true,
    children: [/*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "thumbtack"],
      color: "greyDarkest"
    }), "Pin"]
  })]
});
alternativeStyles.storyName = "Alternative styles";
export const aiButtons = () => /*#__PURE__*/_jsxs(Flex, {
  gap: "r",
  children: [/*#__PURE__*/_jsx(Button, {
    height: "30px",
    width: "30px",
    iconOnly: true,
    borderRadius: "30px",
    variant: "ai",
    children: /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "hand-sparkles"],
      color: "white"
    })
  }), /*#__PURE__*/_jsxs(Button, {
    height: "30px",
    iconLeft: true,
    borderRadius: "30px",
    variant: "ai",
    children: [/*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "hand-sparkles"],
      color: "white"
    }), "AI Summarise"]
  })]
});
aiButtons.storyName = "AI buttons";
defaultButton.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultButton"
};
variants.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "variants"
};
alternateSize.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "alternateSize"
};
alternateColours.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "alternateColours"
};
ghost.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "ghost"
};
fullWidth.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "fullWidth"
};
disabled.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "disabled"
};
loading.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "loading"
};
withIcon.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "withIcon"
};
iconOnly.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "iconOnly"
};
alternativeStyles.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "alternativeStyles"
};
aiButtons.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "aiButtons"
};