orcs-design-system
Version:
TeamForm's Design System, aka: ORCS
331 lines • 9.64 kB
JavaScript
import React from "react";
import Button from "../Button";
import Popover from ".";
import Box from "../Box";
import Grid from "../Grid";
import Icon from "../Icon";
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",
width: "fit-content",
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",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Top left"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "top",
text: "Description that explains child element",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Top"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "topRight",
text: "Description that explains child element",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Top right"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "left",
text: "Description that explains child element",
width: "fit-content",
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",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Right"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "bottomLeft",
text: "Description that explains child element",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Bottom left"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "bottom",
text: "Description that explains child element",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Bottom"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "bottomRight",
text: "Description that explains child element",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
width: "125px",
children: "Bottom right"
})
})]
})
});
direction.storyName = "Direction";
export const specifiedWidth = () => /*#__PURE__*/_jsx(Popover, {
text: "Long description that you might not want to show on one line, and instead would like it to wrap",
width: "200px",
children: /*#__PURE__*/_jsx(Button, {
children: "Hover Me"
})
});
export const textAlignment = () => /*#__PURE__*/_jsx(Popover, {
textAlign: "center",
text: "Centered description that explains child element",
width: "fit-content",
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,
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
children: "Inline Block Set"
})
}), /*#__PURE__*/_jsx(Popover, {
text: "Description that explains child element",
inlineBlock: true,
width: "fit-content",
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",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
children: "Not Inline"
})
}), /*#__PURE__*/_jsx(Popover, {
direction: "top",
text: "Description that explains child element",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
children: "Not Inline"
})
})]
})
});
export const tooltipExample = () => /*#__PURE__*/_jsx(Popover, {
text: "This tooltip helps explain stuff",
direction: "top",
variant: "tooltip",
width: "fit-content"
});
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,
width: "fit-content"
});
tooltipWithLinkExample.storyName = "Tooltip with link Example";
export const iconExample = () => /*#__PURE__*/_jsx(Popover, {
text: "Description that explains child element",
direction: "top",
width: "fit-content",
children: /*#__PURE__*/_jsx(Icon, {
icon: ["fas", "exclamation-circle"],
color: "warning",
size: "lg"
})
});
iconExample.storyName = "Icon Example";
export const keepInViewExample = () => /*#__PURE__*/_jsx(Flex, {
justifyContent: "flex-end",
width: "100%",
children: /*#__PURE__*/_jsx(Popover, {
text: "Description that explains child element",
width: "fit-content",
children: /*#__PURE__*/_jsx(Button, {
children: "Hover Me!"
})
})
});
keepInViewExample.storyName = "Keep In View Example";
export const customOffset = () => /*#__PURE__*/_jsx("div", {
children: /*#__PURE__*/_jsxs(Spacer, {
mb: "r",
children: [/*#__PURE__*/_jsx(Popover, {
text: "Default offset (10px mainAxis)",
direction: "right",
width: "fit-content",
inlineBlock: true,
children: /*#__PURE__*/_jsx(Button, {
height: "130px",
children: "Default Offset"
})
}), /*#__PURE__*/_jsx(Popover, {
text: "Custom offset: 30px mainAxis (moved further away)",
direction: "right",
offset: {
mainAxis: 30
},
width: "fit-content",
inlineBlock: true,
children: /*#__PURE__*/_jsx(Button, {
height: "130px",
children: "30px Main Axis (Right)"
})
}), /*#__PURE__*/_jsx(Popover, {
text: "Custom offset: -10px mainAxis (moved closer)",
direction: "right",
offset: {
mainAxis: -10
},
width: "fit-content",
inlineBlock: true,
children: /*#__PURE__*/_jsx(Button, {
height: "130px",
children: "-10px Main Axis (Left)"
})
}), /*#__PURE__*/_jsx(Popover, {
text: "Custom offset: 20px alignmentAxis (moved down)",
direction: "right",
offset: {
alignmentAxis: 20
},
width: "fit-content",
inlineBlock: true,
children: /*#__PURE__*/_jsx(Button, {
height: "130px",
children: "20px Alignment Axis (Down)"
})
}), /*#__PURE__*/_jsx(Popover, {
text: "Custom offset: -20px alignmentAxis (moved up)",
direction: "right",
offset: {
alignmentAxis: -20
},
width: "fit-content",
inlineBlock: true,
children: /*#__PURE__*/_jsx(Button, {
height: "130px",
children: "-20px Alignment Axis (Up)"
})
}), /*#__PURE__*/_jsx(Popover, {
text: "Custom offset: both axes combined",
direction: "right",
offset: {
mainAxis: 25,
alignmentAxis: -25
},
width: "fit-content",
inlineBlock: true,
children: /*#__PURE__*/_jsx(Button, {
height: "130px",
children: "Combined Axes (right and up)"
})
})]
})
});
customOffset.storyName = "Custom Offset";
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"
};
iconExample.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "iconExample"
};
keepInViewExample.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "keepInViewExample"
};
customOffset.__docgenInfo = {
"description": "",
"methods": [],
"displayName": "customOffset"
};