-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
cda08f6
commit 62ea160
Showing
12 changed files
with
242 additions
and
52 deletions.
There are no files selected for viewing
This file contains 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
This file contains 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
This file contains 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
This file contains 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,68 @@ | ||
| /* | ||
| * Echoes React | ||
| * Copyright (C) 2023-2024 SonarSource SA | ||
| * mailto:info AT sonarsource DOT com | ||
| * | ||
| * This program is free software; you can redistribute it and/or | ||
| * modify it under the terms of the GNU Lesser General Public | ||
| * License as published by the Free Software Foundation; either | ||
| * version 3 of the License, or (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | ||
| * Lesser General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU Lesser General Public License | ||
| * along with this program; if not, write to the Free Software Foundation, | ||
| * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||
| */ | ||
|
|
||
| import styled from '@emotion/styled'; | ||
| import { ComponentProps, forwardRef } from 'react'; | ||
| import { useIntl } from 'react-intl'; | ||
| import { ButtonIcon, ButtonVariety } from '../buttons'; | ||
| import { IconInfo } from '../icons'; | ||
| import { Popover } from '../popover'; | ||
|
|
||
| type PopoverProps = Omit<ComponentProps<typeof Popover>, 'children'>; | ||
|
|
||
| interface Props extends PopoverProps { | ||
| ariaLabel?: string; | ||
| className?: string; | ||
| } | ||
|
|
||
| export const ToggleTip = forwardRef<HTMLButtonElement, Props>((props: Props, ref) => { | ||
| const { ariaLabel, className, ...popoverProps } = props; | ||
|
|
||
| const intl = useIntl(); | ||
|
|
||
| const defaultAriaLabel = intl.formatMessage({ | ||
| id: 'toggletip.help', | ||
| defaultMessage: 'More information', | ||
| description: 'aria-label text and tooltip for the ToggleTip', | ||
| }); | ||
|
|
||
| return ( | ||
| <Popover {...popoverProps}> | ||
| <ToggleTipButtonIcon | ||
| Icon={IconInfo} | ||
| ariaLabel={ariaLabel ?? defaultAriaLabel} | ||
| className={className} | ||
| ref={ref} | ||
| variety={ButtonVariety.DefaultGhost} | ||
| /> | ||
| </Popover> | ||
| ); | ||
| }); | ||
|
|
||
| const ToggleTipButtonIcon = styled(ButtonIcon)` | ||
| line-height: var(--echoes-line-height-10); | ||
| font-size: var(--echoes-font-size-10); | ||
| border-radius: var(--echoes-border-radius-200); | ||
| --button-padding: var(--echoes-dimension-space-0); | ||
| --button-height: var(--echoes-sizes-toggletips-height); | ||
| --button-width: var(--echoes-sizes-toggletips-width); | ||
| `; | ||
|
|
||
| ToggleTip.displayName = 'ToggleTip'; |
This file contains 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,56 @@ | ||
| /* | ||
| * Echoes React | ||
| * Copyright (C) 2023-2024 SonarSource SA | ||
| * mailto:info AT sonarsource DOT com | ||
| * | ||
| * This program is free software; you can redistribute it and/or | ||
| * modify it under the terms of the GNU Lesser General Public | ||
| * License as published by the Free Software Foundation; either | ||
| * version 3 of the License, or (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | ||
| * Lesser General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU Lesser General Public License | ||
| * along with this program; if not, write to the Free Software Foundation, | ||
| * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||
| */ | ||
| import { screen } from '@testing-library/react'; | ||
| import { ComponentProps } from 'react'; | ||
| import { render } from '~common/helpers/test-utils'; | ||
| import { ToggleTip } from '..'; | ||
|
|
||
| it('appears when trigger is clicked and disappears when "esc" is hit', async () => { | ||
| const { user } = setupToggleTip(); | ||
|
|
||
| expect(screen.queryByText('Header')).not.toBeInTheDocument(); | ||
|
|
||
| await user.click(screen.getByLabelText('More information')); | ||
|
|
||
| expect(screen.getByText('Header')).toBeInTheDocument(); | ||
|
|
||
| await user.keyboard('[escape]'); | ||
|
|
||
| expect(screen.queryByText('Header')).not.toBeInTheDocument(); | ||
| }); | ||
|
|
||
| it('displays all additional parts', async () => { | ||
| const { user } = setupToggleTip({ | ||
| ariaLabel: 'Trigger', | ||
| description: 'description', | ||
| extraContent: 'extra content', | ||
| footer: 'footer', | ||
| }); | ||
|
|
||
| await user.click(screen.getByLabelText('Trigger')); | ||
|
|
||
| expect(screen.getByText('description')).toBeInTheDocument(); | ||
| expect(screen.getByText('extra content')).toBeInTheDocument(); | ||
| expect(screen.getByText('footer')).toBeInTheDocument(); | ||
| }); | ||
|
|
||
| function setupToggleTip(props: Partial<ComponentProps<typeof ToggleTip>> = {}) { | ||
| return render(<ToggleTip title="Header" {...props} />); | ||
| } |
This file contains 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,21 @@ | ||
| /* | ||
| * Echoes React | ||
| * Copyright (C) 2023-2024 SonarSource SA | ||
| * mailto:info AT sonarsource DOT com | ||
| * | ||
| * This program is free software; you can redistribute it and/or | ||
| * modify it under the terms of the GNU Lesser General Public | ||
| * License as published by the Free Software Foundation; either | ||
| * version 3 of the License, or (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | ||
| * Lesser General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU Lesser General Public License | ||
| * along with this program; if not, write to the Free Software Foundation, | ||
| * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||
| */ | ||
|
|
||
| export { ToggleTip } from './ToggleTip'; |
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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
This file contains 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,75 @@ | ||
| /* | ||
| * Echoes React | ||
| * Copyright (C) 2023-2024 SonarSource SA | ||
| * mailto:info AT sonarsource DOT com | ||
| * | ||
| * This program is free software; you can redistribute it and/or | ||
| * modify it under the terms of the GNU Lesser General Public | ||
| * License as published by the Free Software Foundation; either | ||
| * version 3 of the License, or (at your option) any later version. | ||
| * | ||
| * This program is distributed in the hope that it will be useful, | ||
| * but WITHOUT ANY WARRANTY; without even the implied warranty of | ||
| * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU | ||
| * Lesser General Public License for more details. | ||
| * | ||
| * You should have received a copy of the GNU Lesser General Public License | ||
| * along with this program; if not, write to the Free Software Foundation, | ||
| * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. | ||
| */ | ||
|
|
||
| import type { Meta, StoryObj } from '@storybook/react'; | ||
| import { LinkStandalone, Text, ToggleTip } from '../src/components'; | ||
| import { basicWrapperDecorator } from './helpers/BasicWrapper'; | ||
|
|
||
| const meta: Meta<typeof ToggleTip> = { | ||
| component: ToggleTip, | ||
| title: 'Echoes/ToggleTip', | ||
| parameters: { | ||
| controls: { exclude: ['footer', 'extraContent'] }, | ||
| }, | ||
| decorators: [basicWrapperDecorator], | ||
| }; | ||
|
|
||
| export default meta; | ||
|
|
||
| type Story = StoryObj<typeof ToggleTip>; | ||
|
|
||
| export const Basic: Story = { | ||
| args: { | ||
| title: 'Explanation', | ||
| description: | ||
| 'This is a more complete explanation to detail the concepts and practices that are required to understand said explanation. It is fairly easy to assess how this important text is made important by its self-sufficient importance.', | ||
| }, | ||
| render: (args) => <ToggleTip {...args} />, | ||
| }; | ||
|
|
||
| export const Advanced: Story = { | ||
| args: { | ||
| title: 'Explanation', | ||
| description: | ||
| 'This is a more complete explanation to detail the concepts and practices that are required to understand said explanation. It is fairly easy to assess how this important text is made important by its self-sufficient importance.', | ||
| }, | ||
| render: (args) => ( | ||
| <ToggleTip | ||
| extraContent={ | ||
| <Text> | ||
| <span>First, click on the thing, then the other thing.</span> | ||
| <ul> | ||
| <li>Field 1: put your name</li> | ||
| <li>Field 2: put your favorite food item</li> | ||
| </ul> | ||
| <span>Finally, profit!</span> | ||
| </Text> | ||
| } | ||
| footer={ | ||
| <> | ||
| <LinkStandalone to="#">Go to the config page</LinkStandalone> | ||
| {' - '} | ||
| <LinkStandalone to="#">Go to the docs</LinkStandalone> | ||
| </> | ||
| } | ||
| {...args} | ||
| /> | ||
| ), | ||
| }; |