Skip to content

Commit

Permalink
fix: lint error in story
Browse files Browse the repository at this point in the history
  • Loading branch information
inna-i committed Aug 1, 2023
1 parent 66f3428 commit 595fcf3
Showing 1 changed file with 54 additions and 56 deletions.
110 changes: 54 additions & 56 deletions packages/storybook/src/design-system/Elevation/Elevation.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,35 +10,11 @@ import {
Popover,
Tooltip,
} from '@talend/design-system';
import { ModalPropsType } from '@talend/design-system/lib/components/Modal';

export default {
component: Modal,
};

function ModalStory(props: Partial<ModalPropsType>) {
const [modalOpen, setModalOpen] = useState(false);

return (
<>
<ButtonPrimary onClick={() => setModalOpen(true)} data-test="open-modal">
Open Magic drawer
</ButtonPrimary>

{modalOpen && (
<Modal
header={{ title: '(Default story title)' }}
onClose={() => {
action('onClose');
setModalOpen(false);
}}
{...props}
/>
)}
</>
);
}

export const ButtonWithPopover = {
render: (props: Story) => (
<Popover
Expand Down Expand Up @@ -67,36 +43,58 @@ export const ButtonWithTooltip = {
};

export const DialogWithTooltipAndPopover = {
render: (props: Story) => (
<ModalStory {...props} header={{ title: 'Harry Potter' }}>
<p style={{ paddingBottom: 20 }}>
Harry Potter is a series of seven fantasy novels written by British author J. K. Rowling.
<br />
The novels chronicle the lives of a young wizard, Harry Potter, and his friends Hermione
Granger
<br />
and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry.
</p>
<Tooltip title="From Alohomora to Wingardium Leviosa, have your wands at the ready!">
<ButtonPrimary onClick={() => action('clicked')}>Need help? Just hover</ButtonPrimary>
</Tooltip>
<p style={{ paddingTop: 20, paddingBottom: 20 }}>
The series was originally published in English by Bloomsbury in the United Kingdom and
Scholastic Press in the United States. A series of many genres, including fantasy, drama,
coming-of-age fiction, and the British school story (which includes elements of mystery,
thriller, adventure, horror, and romance), the world of Harry Potter explores numerous
themes and includes many cultural meanings and references. According to Rowling, the main
theme is death. Other major themes in the series include prejudice, corruption, and madness.
<Popover
disclosure={
<ButtonIcon icon="talend-question-circle" onClick={() => action('clicked')}>
Hover and click
</ButtonIcon>
}
>
Hey I am Popover
</Popover>
</p>
</ModalStory>
),
render: (props: Story) => {
const [modalOpen, setModalOpen] = useState(false);

Check warning on line 47 in packages/storybook/src/design-system/Elevation/Elevation.stories.tsx

View workflow job for this annotation

GitHub Actions / ESLint Report Analysis

packages/storybook/src/design-system/Elevation/Elevation.stories.tsx#L47

[react-hooks/rules-of-hooks] React Hook "useState" is called in function "render" that is neither a React function component nor a custom React Hook function.

return (
<>
<ButtonPrimary onClick={() => setModalOpen(true)} data-test="open-modal">
Open Magic drawer
</ButtonPrimary>

{modalOpen && (
<Modal
header={{ title: 'Harry Potter' }}
onClose={() => {
action('onClose');
setModalOpen(false);
}}
{...props}
>
<p style={{ paddingBottom: 20 }}>
Harry Potter is a series of seven fantasy novels written by British author J. K.
Rowling.
<br />
The novels chronicle the lives of a young wizard, Harry Potter, and his friends
Hermione Granger
<br />
and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and
Wizardry.
</p>
<Tooltip title="From Alohomora to Wingardium Leviosa, have your wands at the ready!">
<ButtonPrimary onClick={() => action('clicked')}>Need help? Just hover</ButtonPrimary>
</Tooltip>
<p style={{ paddingTop: 20, paddingBottom: 20 }}>
The series was originally published in English by Bloomsbury in the United Kingdom and
Scholastic Press in the United States. A series of many genres, including fantasy,
drama, coming-of-age fiction, and the British school story (which includes elements of
mystery, thriller, adventure, horror, and romance), the world of Harry Potter explores
numerous themes and includes many cultural meanings and references. According to
Rowling, the main theme is death. Other major themes in the series include prejudice,
corruption, and madness.
<Popover
disclosure={
<ButtonIcon icon="talend-question-circle" onClick={() => action('clicked')}>
Hover and click
</ButtonIcon>
}
>
Hey I am Popover
</Popover>
</p>
</Modal>
)}
</>
);
},
};

0 comments on commit 595fcf3

Please sign in to comment.