orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
125 lines • 3.29 kB
JavaScript
import React from "react";
import StyledLink from ".";
import Box from "../Box";
import Flex from "../Flex";
import Spacer from "../Spacer";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/StyledLink",
component: StyledLink,
decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
p: "r",
children: storyFn()
})]
};
export const defaultStyledLink = () => /*#__PURE__*/_jsx(StyledLink, {
href: "#",
children: "Styled Link"
});
defaultStyledLink.storyName = "Default";
export const targetStyledLink = () => /*#__PURE__*/_jsx(StyledLink, {
href: "#",
target: "_blank",
children: "Targeted Link"
});
targetStyledLink.storyName = "Targeted";
export const boldStyledLink = () => /*#__PURE__*/_jsx(StyledLink, {
href: "#",
bold: true,
children: "Bold Link"
});
boldStyledLink.storyName = "Bold";
export const invertedStyledLink = () => /*#__PURE__*/_jsx(Box, {
bg: "greyDarkest",
p: "r",
children: /*#__PURE__*/_jsx(Flex, {
justifyContent: "center",
children: /*#__PURE__*/_jsxs(Spacer, {
mx: "r",
children: [/*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
children: "White navigation link on dark background"
}), /*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
active: true,
bold: true,
children: "Active/selected bold navigation link"
}), /*#__PURE__*/_jsx(StyledLink, {
href: "#",
white: true,
bold: true,
children: "Bold inverted link"
})]
})
})
});
invertedStyledLink.storyName = "Inverted";
const routes = [{
path: "/",
label: "React link to home",
exact: true
}, {
path: "/about",
label: "React link to about"
}, {
path: "/cats",
label: "React link to cats"
}];
export const reactLink = () => /*#__PURE__*/_jsxs(BrowserRouter, {
children: [routes.map(route => /*#__PURE__*/_jsx(StyledLink, {
to: route.path,
children: route.label
}, route.path)), /*#__PURE__*/_jsx(Switch, {
children: routes.map(route => /*#__PURE__*/_jsx(Route, {
path: route.path,
exact: route.exact,
children: /*#__PURE__*/_jsxs("div", {
style: {
padding: "100px"
},
children: ["ROUTE RENDERED: ", route.label]
})
}, route.path))
})]
});
reactLink.storyName = "Using react-router-dom";
export const buttonLink = () => /*#__PURE__*/_jsx(StyledLink, {
href: "https://teamform.co",
target: "_blank",
button: true,
children: "Click me"
});
buttonLink.storyName = "Button";
defaultStyledLink.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultStyledLink"
};
targetStyledLink.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "targetStyledLink"
};
boldStyledLink.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "boldStyledLink"
};
invertedStyledLink.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "invertedStyledLink"
};
reactLink.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "reactLink"
};
buttonLink.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "buttonLink"
};