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

TeamForm's Design System, aka: ORCS

import React from "react";
import Icon from ".";
import { library } from "@fortawesome/fontawesome-svg-core";
import { far } from "@fortawesome/free-regular-svg-icons";
import { fas } from "@fortawesome/free-solid-svg-icons";
import Box from "../Box";
import Flex from "../Flex";
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
library.add(far, fas);
export default {
  title: "Components/Icon",
  decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
    p: "3",
    children: /*#__PURE__*/_jsx(Flex, {
      alignItems: "center",
      justifyContent: "space-around",
      children: storyFn()
    })
  })],
  component: Icon
};
export const defaultIcon = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "angle-down"],
    title: "Down"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "plus"],
    title: "Plus"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["far", "user"],
    title: "User"
  })]
});
export const colouredIcon = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "angle-down"],
    color: "primaryDark",
    title: "Down"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "plus"],
    color: "successDark",
    title: "Plus"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["far", "user"],
    color: "dangerDark",
    title: "User"
  })]
});
export const iconSize = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "plus"],
    size: "sm",
    title: "Plus"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "plus"],
    size: "rg",
    title: "Plus"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "plus"],
    size: "lg",
    title: "Plus"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "plus"],
    size: "2x",
    title: "Plus"
  })]
});
export const invertedIcons = () => /*#__PURE__*/_jsx(Box, {
  bg: "greyDarker",
  width: "100%",
  children: /*#__PURE__*/_jsxs(Flex, {
    alignItems: "center",
    justifyContent: "space-around",
    children: [/*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "angle-down"],
      inverse: true,
      title: "Down"
    }), /*#__PURE__*/_jsx(Icon, {
      icon: ["fas", "plus"],
      inverse: true,
      title: "Plus"
    }), /*#__PURE__*/_jsx(Icon, {
      icon: ["far", "user"],
      inverse: true,
      title: "User"
    })]
  })
});
export const animatedIcons = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "angle-down"],
    spin: true,
    title: "Spinning arrow"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "plus"],
    pulse: true,
    title: "Spinning plus"
  })]
});
export const transformsAndRotations = () => /*#__PURE__*/_jsxs(_Fragment, {
  children: [/*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "coffee"],
    rotation: "270",
    title: "Coffee"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "user"],
    flip: "vertical",
    title: "User"
  }), /*#__PURE__*/_jsx(Icon, {
    icon: ["fas", "certificate"],
    transform: "grow-8 up-10",
    title: "Certificate"
  })]
});
defaultIcon.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "defaultIcon"
};
colouredIcon.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "colouredIcon"
};
iconSize.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "iconSize"
};
invertedIcons.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "invertedIcons"
};
animatedIcons.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "animatedIcons"
};
transformsAndRotations.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "transformsAndRotations"
};