fix: elevation story

Talend · Jul 31, 2023 · aefa554 · aefa554
1 parent 219e41b
commit aefa554
Show file tree

Hide file tree

Showing 2 changed files with 92 additions and 19 deletions.
diff --git a/packages/storybook/src/design-system/Elevation/Elevation.stories.mdx b/packages/storybook/src/design-system/Elevation/Elevation.stories.mdx
@@ -13,26 +13,46 @@ import * as Stories from './Elevation.stories';
 	}}
 />
 
-# Elevation for different components combination
+# Combinations of Elevation of various components
 
-Different component overlay
+Different components overlay
 
 ## Zoning
 
+<FigmaImage src="https://www.figma.com/file/93AaDV2pC1tK9J1O6IbHho/Elevation" />
+
+## Style
+
+<FigmaImage src="https://www.figma.com/file/93AaDV2pC1tK9J1O6IbHho/Elevation" />
+
 ### Variations
 
-**Modal with info in Popover**
+**Button with Popover**
+
+<Canvas>
+	<Story height="7rem" story={Stories.ButtonWithPopover} />
+</Canvas>
+
+**Button with Tooltip**
 
 <Canvas>
-	<Story height="5rem" story={Stories.DialogWithTooltipAndPopover} />
+	<Story height="7rem" story={Stories.ButtonWithTooltip} />
 </Canvas>
 
-## States
+**Modal with Tooltip and Popover**
+
+<Canvas>
+	<Story height="7rem" story={Stories.DialogWithTooltipAndPopover} />
+</Canvas>
 
 ## Interactions
 
-## Content
+N/A
 
 ## Usage
 
+N/A
+
 ## Accessibility
+
+N/A
diff --git a/packages/storybook/src/design-system/Elevation/Elevation.stories.tsx b/packages/storybook/src/design-system/Elevation/Elevation.stories.tsx
@@ -1,8 +1,15 @@
-import { Story, ComponentStory } from '@storybook/react';
+import { Story } from '@storybook/react';
 import { useState } from 'react';
 import { action } from '@storybook/addon-actions';
 
-import { Popover, ButtonIcon, ButtonPrimary, Modal } from '@talend/design-system';
+import {
+	ButtonIconFloating,
+	ButtonPrimary,
+	ButtonTertiary,
+	Modal,
+	Popover,
+	Tooltip,
+} from '@talend/design-system';
 import { ModalPropsType } from '@talend/design-system/lib/components/Modal';
 
 export default {
@@ -15,7 +22,7 @@ function ModalStory(props: Partial<ModalPropsType>) {
 	return (
 		<>
 			<ButtonPrimary onClick={() => setModalOpen(true)} data-test="open-modal">
-				See
+				Open Magic drawer
 			</ButtonPrimary>
 
 			{modalOpen && (
@@ -32,18 +39,64 @@ function ModalStory(props: Partial<ModalPropsType>) {
 	);
 }
 
-export const DialogWithTooltipAndPopover: ComponentStory<typeof Modal> = props => (
-	<ModalStory {...props} header={{ title: 'Dialog with Tooltip and Popover' }}>
+export const ButtonWithPopover = {
+	render: (props: Story) => (
 		<Popover
-			isFixed
+			{...props}
 			disclosure={
-				<ButtonIcon size="M" icon="pencil" onClick={() => action('click')}>
-					Hey I am tooltip. Click to see the Popover
-				</ButtonIcon>
+				<ButtonTertiary onClick={() => action('clicked')} data-test="help-action">
+					Need help?
+				</ButtonTertiary>
 			}
 		>
-			Hey I am Popover
+			Spell "Patronus!"
 		</Popover>
-		Default story child
-	</ModalStory>
-);
+	),
+};
+
+export const ButtonWithTooltip = {
+	render: (props: Story) => (
+		<Tooltip
+			title="A summoning spell, Accio! brings objects to you. Great for finding something when it's misplaced"
+			placement="top"
+			{...props}
+		>
+			<ButtonPrimary onClick={() => action('clicked')}>Accio!</ButtonPrimary>
+		</Tooltip>
+	),
+};
+
+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={
+						<ButtonIconFloating icon="talend-question-circle" onClick={() => action('clicked')}>
+							Hover and click
+						</ButtonIconFloating>
+					}
+				>
+					Hey I am Popover
+				</Popover>
+			</p>
+		</ModalStory>
+	),
+};