feat: Add helpful tooltips for the key features #2097
Next
Next commit
feat: Add page header and help tooltips
- Loading branch information
commit d4539633f24875249bebbf86314d051b7c6c3f01
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import { ComponentMeta, Story } from "@storybook/react" | ||
| import { | ||
| HelpTooltip, | ||
| HelpTooltipLink, | ||
| HelpTooltipLinksGroup, | ||
| HelpTooltipProps, | ||
| HelpTooltipText, | ||
| HelpTooltipTitle, | ||
| } from "./HelpTooltip" | ||
|
|
||
| export default { | ||
| title: "components/HelpTooltip", | ||
| component: HelpTooltip, | ||
| } as ComponentMeta<typeof HelpTooltip> | ||
|
|
||
| const Template: Story<HelpTooltipProps> = (args) => ( | ||
| <HelpTooltip {...args}> | ||
| <HelpTooltipTitle>What is template?</HelpTooltipTitle> | ||
| <HelpTooltipText> | ||
| With templates you can create a common configuration for your workspaces using Terraform. So, you and your team | ||
| can use the same environment to deliver great software. | ||
| </HelpTooltipText> | ||
| <HelpTooltipLinksGroup> | ||
| <HelpTooltipLink href="https://github.com/coder/coder/">Creating a template</HelpTooltipLink> | ||
| <HelpTooltipLink href="https://github.com/coder/coder/">Updating a template</HelpTooltipLink> | ||
| </HelpTooltipLinksGroup> | ||
| </HelpTooltip> | ||
BrunoQuaresma marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| ) | ||
|
|
||
| export const Close = Template.bind({}) | ||
|
|
||
| export const Open = Template.bind({}) | ||
| Open.args = { | ||
| open: true, | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| import Link from "@material-ui/core/Link" | ||
| import Popover from "@material-ui/core/Popover" | ||
| import { makeStyles } from "@material-ui/core/styles" | ||
| import HelpIcon from "@material-ui/icons/HelpOutline" | ||
| import OpenInNewIcon from "@material-ui/icons/OpenInNew" | ||
| import { useState } from "react" | ||
| import { Stack } from "../Stack/Stack" | ||
|
|
||
| export interface HelpTooltipProps { | ||
| // Useful to test on storybook | ||
| open?: boolean | ||
| } | ||
|
|
||
| export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open }) => { | ||
| const styles = useStyles() | ||
| const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null) | ||
| open = open ?? Boolean(anchorEl) | ||
| const id = open ? "help-popover" : undefined | ||
|
|
||
| return ( | ||
| <> | ||
| <button aria-describedby={id} className={styles.button} onClick={(event) => setAnchorEl(event.currentTarget)}> | ||
| <HelpIcon className={styles.icon} /> | ||
| </button> | ||
| <Popover | ||
| classes={{ paper: styles.popoverPaper }} | ||
| id={id} | ||
| open={open} | ||
| anchorEl={anchorEl} | ||
| onClose={() => { | ||
| setAnchorEl(null) | ||
| }} | ||
| anchorOrigin={{ | ||
| vertical: "bottom", | ||
| horizontal: "left", | ||
| }} | ||
| transformOrigin={{ | ||
| vertical: "top", | ||
| horizontal: "left", | ||
| }} | ||
| > | ||
| {children} | ||
| </Popover> | ||
| </> | ||
| ) | ||
| } | ||
|
|
||
| export const HelpTooltipTitle: React.FC = ({ children }) => { | ||
| const styles = useStyles() | ||
|
|
||
| return <h4 className={styles.title}>{children}</h4> | ||
| } | ||
|
|
||
| export const HelpTooltipText: React.FC = ({ children }) => { | ||
| const styles = useStyles() | ||
|
|
||
| return <p className={styles.text}>{children}</p> | ||
| } | ||
|
|
||
| export const HelpTooltipLink: React.FC<{ href: string }> = ({ children, href }) => { | ||
| const styles = useStyles() | ||
|
|
||
| return ( | ||
| <Link href={href} target="_blank" rel="noreferrer" className={styles.link}> | ||
| <OpenInNewIcon className={styles.linkIcon} /> | ||
| {children} | ||
| </Link> | ||
| ) | ||
| } | ||
|
|
||
| export const HelpTooltipLinksGroup: React.FC = ({ children }) => { | ||
| const styles = useStyles() | ||
|
|
||
| return ( | ||
| <Stack spacing={1} className={styles.linksGroup}> | ||
| {children} | ||
| </Stack> | ||
| ) | ||
| } | ||
|
|
||
| const useStyles = makeStyles((theme) => ({ | ||
| button: { | ||
| display: "flex", | ||
| alignItems: "center", | ||
| justifyContent: "center", | ||
| width: theme.spacing(3), | ||
| height: theme.spacing(3), | ||
| padding: 0, | ||
| border: 0, | ||
| background: "transparent", | ||
| color: theme.palette.text.secondary, | ||
| cursor: "pointer", | ||
| marginLeft: theme.spacing(1), | ||
|
|
||
| "&:hover": { | ||
| color: theme.palette.text.primary, | ||
| }, | ||
| }, | ||
|
|
||
| icon: { | ||
| width: theme.spacing(2), | ||
| height: theme.spacing(2), | ||
| }, | ||
|
|
||
| popoverPaper: { | ||
| marginTop: theme.spacing(0.5), | ||
| width: theme.spacing(38), | ||
| padding: theme.spacing(2.5), | ||
| color: theme.palette.text.secondary, | ||
| }, | ||
|
|
||
| title: { | ||
| marginTop: 0, | ||
| marginBottom: theme.spacing(1), | ||
| color: theme.palette.text.primary, | ||
| }, | ||
|
|
||
| text: { | ||
| marginTop: theme.spacing(0.5), | ||
| marginBottom: theme.spacing(0.5), | ||
| }, | ||
|
|
||
| link: { | ||
| display: "flex", | ||
| alignItems: "center", | ||
| }, | ||
|
|
||
| linkIcon: { | ||
| color: "inherit", | ||
| width: 14, | ||
| height: 14, | ||
| marginRight: theme.spacing(1), | ||
| }, | ||
|
|
||
| linksGroup: { | ||
| marginTop: theme.spacing(2), | ||
| }, | ||
| })) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,15 @@ | ||
| import { ComponentMeta, Story } from "@storybook/react" | ||
| import { PageHeader, PageHeaderTitle } from "./PageHeader" | ||
|
|
||
| export default { | ||
| title: "components/PageHeader", | ||
| component: PageHeader, | ||
| } as ComponentMeta<typeof PageHeader> | ||
|
|
||
| const Template: Story = () => ( | ||
| <PageHeader> | ||
| <PageHeaderTitle>Templates</PageHeaderTitle> | ||
| </PageHeader> | ||
| ) | ||
|
|
||
| export const Example = Template.bind({}) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| import { makeStyles } from "@material-ui/core/styles" | ||
| import { Stack } from "../Stack/Stack" | ||
|
|
||
| export const PageHeader: React.FC = ({ children }) => { | ||
| const styles = useStyles() | ||
|
|
||
| return <div className={styles.root}>{children}</div> | ||
| } | ||
|
|
||
| export const PageHeaderTitle: React.FC = ({ children }) => { | ||
| const styles = useStyles() | ||
|
|
||
| return <h1 className={styles.title}>{children}</h1> | ||
| } | ||
|
|
||
| export const PageHeaderActions: React.FC = ({ children }) => { | ||
| const styles = useStyles() | ||
|
|
||
| return ( | ||
| <Stack direction="row" className={styles.actions}> | ||
| {children} | ||
| </Stack> | ||
| ) | ||
| } | ||
|
|
||
| const useStyles = makeStyles((theme) => ({ | ||
| root: { | ||
| display: "flex", | ||
| alignItems: "center", | ||
| paddingTop: theme.spacing(6), | ||
| paddingBottom: theme.spacing(5), | ||
| }, | ||
|
|
||
| title: { | ||
| fontSize: theme.spacing(4), | ||
| fontWeight: 400, | ||
| margin: 0, | ||
| display: "flex", | ||
| alignItems: "center", | ||
| }, | ||
|
|
||
| actions: { | ||
| marginLeft: "auto", | ||
| }, | ||
| })) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Maybe just one link to the templates doc for now labeled "managing templates"?
https://github.com/coder/coder/blob/main/docs/templates.md#templates
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahh, this one is just a sample. I'm already using this link for the templates: