orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
215 lines • 6.36 kB
JavaScript
import React from "react";
import Button from "../Button";
import Popover from ".";
import Box from "../Box";
import Grid from "../Grid";
import Flex from "../Flex";
import StyledLink from "../StyledLink";
import Spacer from "../Spacer";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default {
title: "Components/Popover",
decorators: [storyFn => /*#__PURE__*/_jsx(Box, {
p: "6",
children: /*#__PURE__*/_jsx(Flex, {
justifyContent: "space-around",
children: storyFn()
})
})],
component: Popover
};
export const defaultPopover = () => /*#__PURE__*/_jsx(Popover, {
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
onClick: () => alert("Maintains original click"),
children: "Hover Me!"
})
});
defaultPopover.storyName = "Default";
export const direction = () => /*#__PURE__*/_jsx(Box, {
py: "6",
children: /*#__PURE__*/_jsxs(Grid, {
gridTemplateColumns: "1fr 1fr 1fr",
gridAutoFlow: "row",
gridGap: "r",
alignItems: "center",
justifyContent: "center",
children: [/*#__PURE__*/_jsx(Popover, {
direction: "topLeft",
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Top left"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "top",
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Top"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "topRight",
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Top right"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "left",
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Left"
})
}), /*#__PURE__*/_jsx(Box, {
width: "125px",
bg: "greyLighter",
m: "auto"
}), /*#__PURE__*/_jsx(Popover, {
direction: "right",
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Right"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "bottomLeft",
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Bottom left"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "bottom",
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Bottom"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "bottomRight",
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Bottom right"
})
})]
})
});
direction.storyName = "Direction";
export const specifiedWidth = () => /*#__PURE__*/_jsx(Popover, {
text: "Description that explains child element",
width: "240px",
children: /*#__PURE__*/_jsx(Button, {
children: "Hover Me"
})
});
export const textAlignment = () => /*#__PURE__*/_jsx(Popover, {
textAlign: "center",
text: "Centered description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
children: "Hover Me"
})
});
export const DisplayInlineBlock = () => /*#__PURE__*/_jsx(Flex, {
flexDirection: "column",
children: /*#__PURE__*/_jsxs(Spacer, {
mt: "r",
children: [/*#__PURE__*/_jsx(Popover, {
text: "Description that explains child element",
inlineBlock: true,
children: /*#__PURE__*/_jsx(Button, {
children: "Inline Block Set"
})
}), /*#__PURE__*/_jsx(Popover, {
text: "Description that explains child element",
inlineBlock: true,
children: /*#__PURE__*/_jsx(Button, {
children: "Inline Block Set"
})
}), /*#__PURE__*/_jsx(Popover, {
text: "Because it is display: block, the triggering container is wider than the button",
children: /*#__PURE__*/_jsx(Button, {
children: "Not Inline"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "top",
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
children: "Not Inline"
})
})]
})
});
export const tooltipExample = () => /*#__PURE__*/_jsx(Popover, {
text: "This tooltip helps explain stuff",
direction: "top",
variant: "tooltip"
});
tooltipExample.storyName = "Tooltip Example";
export const tooltipWithLinkExample = () => /*#__PURE__*/_jsx(Popover, {
text: /*#__PURE__*/_jsxs("span", {
children: ["Test tooltip with a", " ", /*#__PURE__*/_jsx(StyledLink, {
href: "https://www.teamform.co",
target: "_blank",
children: "link to TeamForm"
})]
}),
arialLabel: "Link to TeamForm",
direction: "right",
variant: "tooltip",
enableSelectAll: false
});
tooltipWithLinkExample.storyName = "Tooltip with link Example";
export const keepInViewExample = () => /*#__PURE__*/_jsx(Flex, {
justifyContent: "flex-end",
width: "100%",
children: /*#__PURE__*/_jsx(Popover, {
text: "Description that explains child element",
children: /*#__PURE__*/_jsx(Button, {
children: "Hover Me!"
})
})
});
keepInViewExample.storyName = "Keep In View Example";
defaultPopover.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "defaultPopover"
};
direction.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "direction"
};
specifiedWidth.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "specifiedWidth"
};
textAlignment.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "textAlignment"
};
DisplayInlineBlock.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "DisplayInlineBlock"
};
tooltipExample.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "tooltipExample"
};
tooltipWithLinkExample.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "tooltipWithLinkExample"
};
keepInViewExample.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "keepInViewExample"
};