orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
244 lines • 6.33 kB
JavaScript
import React from "react";
import Icon from "../Icon";
import Spacer from "../Spacer";
import Flex from "../Flex";
import { VARIANT_COLORS, ButtonLink } from ".";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/Buttons/ButtonLink",
component: ButtonLink
};
const link = "http://www.google.com";
export const defaultButton = () => /*#__PURE__*/_jsx(ButtonLink, {
href: link,
children: "Default button"
});
defaultButton.storyName = "Default button";
export const variants = () => /*#__PURE__*/_jsx(Spacer, {
my: "3",
children: Object.keys(VARIANT_COLORS).map(variant => /*#__PURE__*/_jsx(ButtonLink, {
large: true,
variant: variant,
href: link,
children: variant
}, variant))
});
export const alternateSize = () => /*#__PURE__*/_jsxs(Spacer, {
my: "3",
children: [/*#__PURE__*/_jsx(ButtonLink, {
small: true,
href: link,
children: "Small button"
}), /*#__PURE__*/_jsx(ButtonLink, {
large: true,
href: link,
children: "Large button"
}), /*#__PURE__*/_jsx(ButtonLink, {
height: "xxxl",
href: link,
children: "Specified height button"
}), /*#__PURE__*/_jsx(ButtonLink, {
href: link,
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(ButtonLink, {
variant: "success",
href: link,
children: "Success/green button"
}), /*#__PURE__*/_jsx(ButtonLink, {
variant: "danger",
href: link,
children: "Danger/red button"
})]
});
alternateColours.storyName = "Alternate colours";
export const ghost = () => /*#__PURE__*/_jsxs(Spacer, {
my: "3",
children: [/*#__PURE__*/_jsx(ButtonLink, {
small: true,
variant: "ghost",
href: link,
children: "Small ghost button"
}), /*#__PURE__*/_jsx(ButtonLink, {
variant: "ghost",
href: link,
children: "Regular ghost button"
}), /*#__PURE__*/_jsx(ButtonLink, {
large: true,
variant: "ghost",
href: link,
children: "Large ghost button"
})]
});
ghost.storyName = "Ghost style";
export const fullWidth = () => /*#__PURE__*/_jsx(ButtonLink, {
fullWidth: true,
href: link,
children: "Full width button"
});
fullWidth.storyName = "Full width";
export const disabled = () => /*#__PURE__*/_jsxs(Spacer, {
my: "r",
children: [/*#__PURE__*/_jsx(ButtonLink, {
disabled: true,
href: link,
children: "Disabled button"
}), /*#__PURE__*/_jsx(ButtonLink, {
variant: "disabled",
href: link,
children: "Alternate way of making button disabled"
})]
});
disabled.storyName = "Disabled state";
export const withIcon = () => /*#__PURE__*/_jsxs(Spacer, {
my: "3",
children: [/*#__PURE__*/_jsxs(ButtonLink, {
iconLeft: true,
href: link,
isLoading: true,
children: [/*#__PURE__*/_jsx(Icon, {
icon: ["fas", "user-plus"]
}), "Left aligned icon"]
}), /*#__PURE__*/_jsxs(ButtonLink, {
iconRight: true,
href: link,
children: ["Right aligned icon", /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "download"]
})]
}), /*#__PURE__*/_jsx(ButtonLink, {
leftIcon: ["fas", "star"],
href: link,
children: "Left icon magic!"
})]
});
withIcon.storyName = "With icon";
export const iconOnly = () => /*#__PURE__*/_jsxs(Spacer, {
my: "3",
children: [/*#__PURE__*/_jsx(ButtonLink, {
small: true,
iconOnly: true,
p: "s",
ariaLabel: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "download"]
}),
href: link,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["far", "calendar-alt"]
})
}), /*#__PURE__*/_jsx(ButtonLink, {
iconOnly: true,
p: "s",
ariaLabel: "Show calendar",
href: link,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["far", "calendar-alt"]
})
}), /*#__PURE__*/_jsx(ButtonLink, {
large: true,
iconOnly: true,
p: "s",
ariaLabel: "Show calendar",
href: link,
children: /*#__PURE__*/_jsx(Icon, {
icon: ["far", "calendar-alt"]
})
}), /*#__PURE__*/_jsx(Flex, {
alignItems: "center",
mt: "r",
children: /*#__PURE__*/_jsxs(Spacer, {
mr: "r",
children: [/*#__PURE__*/_jsx(ButtonLink, {
iconOnly: true,
variant: "success",
href: link,
width: "33px",
height: "32px",
ariaLabel: "Confirm",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "check"]
})
}), /*#__PURE__*/_jsx(ButtonLink, {
iconOnly: true,
variant: "successAlternate",
href: link,
width: "33px",
height: "32px",
ariaLabel: "Confirm",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "check"]
})
}), /*#__PURE__*/_jsx(ButtonLink, {
iconOnly: true,
variant: "danger",
href: link,
width: "33px",
height: "32px",
ariaLabel: "Cancel",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "times"]
})
}), /*#__PURE__*/_jsx(ButtonLink, {
iconOnly: true,
variant: "dangerAlternate",
href: link,
width: "33px",
height: "32px",
ariaLabel: "Cancel",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "times"]
})
})]
})
})]
});
iconOnly.storyName = "Icon only";
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"
};
withIcon.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "withIcon"
};
iconOnly.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "iconOnly"
};