From 930b975018693bb70a72be16be2ef30241085639 Mon Sep 17 00:00:00 2001 From: Jeppe Reinhold Date: Fri, 22 Sep 2023 22:13:22 +0200 Subject: [PATCH 1/8] add Notifications to Layout --- code/ui/manager/src/components/layout/Layout.tsx | 8 ++++++++ .../src/components/notifications/NotificationList.tsx | 2 +- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index 03b94a616863..51767dd248d7 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -5,6 +5,7 @@ import { useDragging } from './useDragging'; import { MobileNavigation } from '../mobile/navigation/MobileNavigation'; import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; import { useLayout } from './LayoutProvider'; +import Notifications from '../../container/Notifications'; interface InternalLayoutState { isDragging: boolean; @@ -142,6 +143,13 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: isDragging={isDragging} viewMode={managerLayoutState.viewMode} > + {showPages && {slots.slotPages}} {slots.slotMain} {isDesktop && ( diff --git a/code/ui/manager/src/components/notifications/NotificationList.tsx b/code/ui/manager/src/components/notifications/NotificationList.tsx index b1d3cf6584f9..1ad39c4af628 100644 --- a/code/ui/manager/src/components/notifications/NotificationList.tsx +++ b/code/ui/manager/src/components/notifications/NotificationList.tsx @@ -7,7 +7,7 @@ import NotificationItem from './NotificationItem'; const List = styled.div<{ placement?: CSSObject }>( { - zIndex: 10, + zIndex: 200, '> * + *': { marginTop: 10, From 49b599b1f5caf02b45aa81ab335857d8305eb0f1 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 26 Sep 2023 08:09:35 -0500 Subject: [PATCH 2/8] Fixes box shadow problem --- code/ui/manager/src/components/preview/Toolbar.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/code/ui/manager/src/components/preview/Toolbar.tsx b/code/ui/manager/src/components/preview/Toolbar.tsx index 9e81c650e02d..3892bd1b7ca2 100644 --- a/code/ui/manager/src/components/preview/Toolbar.tsx +++ b/code/ui/manager/src/components/preview/Toolbar.tsx @@ -260,6 +260,7 @@ const Toolbar = styled.div<{ shown: boolean }>(({ theme, shown }) => ({ marginTop: shown ? 0 : -40, boxShadow: `${theme.appBorderColor} 0 -1px 0 0 inset`, background: theme.barBg, + zIndex: 4, })); const ToolbarInner = styled.div({ From b2a1b9e5d3b29d038b5e0f033fd6a78abe34b848 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Wed, 4 Oct 2023 14:59:02 +0100 Subject: [PATCH 3/8] Custom positioning of notiication --- code/ui/manager/src/components/layout/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index 51767dd248d7..ca3db70c7d6a 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -146,7 +146,7 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: From cec1b838a3dbea63b3575e5cd28d3729b1dcf446 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Mon, 30 Oct 2023 16:41:56 +0000 Subject: [PATCH 4/8] Improved Notifications to have a fixed placement in CSS --- .../manager/src/components/layout/Layout.tsx | 10 +-- .../NotificationList.stories.jsx | 2 +- .../notifications/NotificationList.tsx | 70 ++++++++++--------- .../manager/src/container/Notifications.tsx | 6 +- 4 files changed, 42 insertions(+), 46 deletions(-) diff --git a/code/ui/manager/src/components/layout/Layout.tsx b/code/ui/manager/src/components/layout/Layout.tsx index 4fb310c1d11f..dc1e3949c6e2 100644 --- a/code/ui/manager/src/components/layout/Layout.tsx +++ b/code/ui/manager/src/components/layout/Layout.tsx @@ -5,7 +5,7 @@ import { useDragging } from './useDragging'; import { MobileNavigation } from '../mobile/navigation/MobileNavigation'; import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; import { useLayout } from './LayoutProvider'; -import Notifications from '../../container/Notifications'; +import { Notifications } from '../../container/Notifications'; interface InternalLayoutState { isDragging: boolean; @@ -143,13 +143,7 @@ export const Layout = ({ managerLayoutState, setManagerLayoutState, ...slots }: isDragging={isDragging} viewMode={managerLayoutState.viewMode} > - + {showPages && {slots.slotPages}} {slots.slotMain} {isDesktop && ( diff --git a/code/ui/manager/src/components/notifications/NotificationList.stories.jsx b/code/ui/manager/src/components/notifications/NotificationList.stories.jsx index 72eb3247f76b..8ccbce821e8f 100644 --- a/code/ui/manager/src/components/notifications/NotificationList.stories.jsx +++ b/code/ui/manager/src/components/notifications/NotificationList.stories.jsx @@ -1,7 +1,7 @@ import React from 'react'; import { LocationProvider } from '@storybook/router'; -import NotificationList from './NotificationList'; +import { NotificationList } from './NotificationList'; import itemMeta, * as itemStories from './NotificationItem.stories.jsx'; export default { diff --git a/code/ui/manager/src/components/notifications/NotificationList.tsx b/code/ui/manager/src/components/notifications/NotificationList.tsx index 1ad39c4af628..f4a43021d996 100644 --- a/code/ui/manager/src/components/notifications/NotificationList.tsx +++ b/code/ui/manager/src/components/notifications/NotificationList.tsx @@ -4,41 +4,45 @@ import type { State } from '@storybook/manager-api'; import { styled } from '@storybook/theming'; import type { CSSObject } from '@storybook/theming'; import NotificationItem from './NotificationItem'; +import { MEDIA_DESKTOP_BREAKPOINT } from '../../constants'; -const List = styled.div<{ placement?: CSSObject }>( - { - zIndex: 200, +interface NotificationListProps { + notifications: State['notifications']; + clearNotification: (id: string) => void; +} + +export const NotificationList: FC = ({ + notifications, + clearNotification, +}) => { + return ( + + {notifications.map((notification) => ( + clearNotification(id)} + notification={notification} + /> + ))} + + ); +}; + +const List = styled.div<{ placement?: CSSObject }>({ + zIndex: 200, + position: 'fixed', + left: 20, + bottom: 60, - '> * + *': { - marginTop: 10, - }, - '&:empty': { - display: 'none', - }, + [MEDIA_DESKTOP_BREAKPOINT]: { + bottom: 20, }, - ({ placement }) => - placement || { - bottom: 0, - left: 0, - right: 0, - position: 'fixed', - } -); -const NotificationList: FC<{ - placement: CSSObject; - notifications: State['notifications']; - clearNotification: (id: string) => void; -}> = ({ notifications, clearNotification, placement = undefined }) => ( - - {notifications.map((notification) => ( - clearNotification(id)} - notification={notification} - /> - ))} - -); + '> * + *': { + marginTop: 10, + }, -export default NotificationList; + '&:empty': { + display: 'none', + }, +}); diff --git a/code/ui/manager/src/container/Notifications.tsx b/code/ui/manager/src/container/Notifications.tsx index ddea3edb588e..8a578c1d2fb9 100644 --- a/code/ui/manager/src/container/Notifications.tsx +++ b/code/ui/manager/src/container/Notifications.tsx @@ -4,7 +4,7 @@ import React from 'react'; import type { Combo } from '@storybook/manager-api'; import { Consumer } from '@storybook/manager-api'; -import NotificationList from '../components/notifications/NotificationList'; +import { NotificationList } from '../components/notifications/NotificationList'; const mapper = ({ state, api }: Combo) => { return { @@ -13,10 +13,8 @@ const mapper = ({ state, api }: Combo) => { }; }; -const NotificationConnect: FC = (props) => ( +export const Notifications: FC = (props) => ( {(fromState) => } ); - -export default NotificationConnect; From 46bfc2af72376bde22592b2dc30fdd8d28579650 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 31 Oct 2023 08:47:01 +0000 Subject: [PATCH 5/8] Update NotificationList.tsx --- .../components/notifications/NotificationList.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/code/ui/manager/src/components/notifications/NotificationList.tsx b/code/ui/manager/src/components/notifications/NotificationList.tsx index f4a43021d996..d16942d57f0c 100644 --- a/code/ui/manager/src/components/notifications/NotificationList.tsx +++ b/code/ui/manager/src/components/notifications/NotificationList.tsx @@ -17,13 +17,14 @@ export const NotificationList: FC = ({ }) => { return ( - {notifications.map((notification) => ( - clearNotification(id)} - notification={notification} - /> - ))} + {notifications && + notifications.map((notification) => ( + clearNotification(id)} + notification={notification} + /> + ))} ); }; From 1ecac7e11c0bc85a9f7a1ae594ecdd37e714dec8 Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 31 Oct 2023 10:08:26 +0000 Subject: [PATCH 6/8] Fix maxHeight on scroll + improve stories --- .../NotificationItem.stories.jsx | 266 ------------------ .../NotificationItem.stories.tsx | 256 +++++++++++++++++ .../NotificationList.stories.jsx | 62 ---- .../NotificationList.stories.tsx | 46 +++ .../notifications/NotificationList.tsx | 2 + 5 files changed, 304 insertions(+), 328 deletions(-) delete mode 100644 code/ui/manager/src/components/notifications/NotificationItem.stories.jsx create mode 100644 code/ui/manager/src/components/notifications/NotificationItem.stories.tsx delete mode 100644 code/ui/manager/src/components/notifications/NotificationList.stories.jsx create mode 100644 code/ui/manager/src/components/notifications/NotificationList.stories.tsx diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.jsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.jsx deleted file mode 100644 index b60f985a5fee..000000000000 --- a/code/ui/manager/src/components/notifications/NotificationItem.stories.jsx +++ /dev/null @@ -1,266 +0,0 @@ -import React from 'react'; -import { LocationProvider } from '@storybook/router'; -import NotificationItem from './NotificationItem'; - -export default { - component: NotificationItem, - title: 'Notifications/NotificationItem', - decorators: [ - (StoryFn) => ( - - - - ), - (storyFn) =>
{storyFn()}
, - ], - excludeStories: /.*Data$/, -}; - -const onClear = () => {}; -const onDismissNotification = () => {}; - -const Template = (args) => ; - -export const simpleData = { - id: '1', - onClear, - content: { - headline: 'Storybook cool!', - }, -}; - -export const Simple = Template.bind({}); - -Simple.args = { - notification: simpleData, - onDismissNotification, -}; - -export const longHeadlineData = { - id: '2', - onClear, - content: { - headline: 'This is a long message that extends over two lines!', - }, -}; - -export const LongHeadline = Template.bind({}); - -LongHeadline.args = { - notification: longHeadlineData, - onDismissNotification, -}; - -export const linkData = { - id: '3', - onClear, - content: { - headline: 'Storybook X.X is available! Download now »', - }, - link: '/some/path', -}; - -export const Link = Template.bind({}); - -Link.args = { - notification: linkData, - onDismissNotification, -}; - -export const linkIconWithColorData = { - id: '4', - onClear, - content: { - headline: 'Storybook with a smile!', - }, - icon: { - name: 'facehappy', - color: 'hotpink', - }, - link: '/some/path', -}; - -export const LinkIconWithColor = Template.bind({}); - -LinkIconWithColor.args = { - notification: linkIconWithColorData, - onDismissNotification, -}; - -export const linkIconWithColorSubHeadlineData = { - id: '5', - onClear, - content: { - headline: 'Storybook X.X is available with a smile! Download now »', - subHeadline: 'This link also has a sub headline', - }, - icon: { - name: 'facehappy', - color: 'tomato', - }, - link: '/some/path', -}; - -export const LinkIconWithColorSubHeadline = Template.bind({}); - -LinkIconWithColorSubHeadline.args = { - notification: linkIconWithColorSubHeadlineData, - onDismissNotification, -}; - -export const bookIconData = { - id: '6', - onClear, - content: { - headline: 'Storybook has a book icon!', - }, - icon: { - name: 'book', - }, -}; - -export const BookIcon = Template.bind({}); - -BookIcon.args = { - notification: bookIconData, - onDismissNotification, -}; - -export const strongSubHeadlineData = { - id: '7', - onClear, - content: { - headline: 'Storybook has a book icon!', - subHeadline: Strong subHeadline, - }, - icon: { - name: 'book', - }, -}; - -export const StrongSubHeadline = Template.bind({}); - -StrongSubHeadline.args = { - notification: strongSubHeadlineData, - onDismissNotification, -}; - -export const strongEmphasizedSubHeadlineData = { - id: '8', - onClear, - content: { - headline: 'Storybook cool!', - subHeadline: ( - - Emphasized normal strong Storybook! - - ), - }, - icon: { - name: 'book', - }, -}; - -export const StrongEmphasizedSubHeadline = Template.bind({}); - -StrongEmphasizedSubHeadline.args = { - notification: strongEmphasizedSubHeadlineData, - onDismissNotification, -}; - -export const bookIconSubHeadlineData = { - id: '9', - onClear, - content: { - headline: 'Storybook has a book icon!', - subHeadline: 'Find out more!', - }, - icon: { - name: 'book', - }, -}; - -export const BookIconSubHeadline = Template.bind({}); - -BookIconSubHeadline.args = { - notification: bookIconSubHeadlineData, - onDismissNotification, -}; - -export const bookIconLongSubHeadlineData = { - id: '10', - onClear, - content: { - headline: 'Storybook has a book icon!', - subHeadline: - 'Find out more! by clicking on on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications', - }, - icon: { - name: 'book', - }, -}; - -export const BookIconLongSubHeadline = Template.bind({}); - -BookIconLongSubHeadline.args = { - notification: bookIconLongSubHeadlineData, - onDismissNotification, -}; - -export const accessibilityIconData = { - id: '11', - onClear, - content: { - headline: 'Storybook has a accessibility icon!', - subHeadline: 'It is here!', - }, - icon: { - name: 'accessibility', - }, -}; - -export const AccessibilityIcon = Template.bind({}); - -AccessibilityIcon.args = { - notification: accessibilityIconData, - onDismissNotification, -}; - -export const accessibilityGoldIconData = { - id: '12', - onClear, - content: { - headline: 'Accessibility icon!', - subHeadline: 'It is gold!', - }, - icon: { - name: 'accessibility', - color: 'gold', - }, -}; - -export const AccessibilityGoldIcon = Template.bind({}); - -AccessibilityGoldIcon.args = { - notification: accessibilityGoldIconData, - onDismissNotification, -}; - -export const accessibilityGoldIconLongHeadLineNoSubHeadlineData = { - id: '13', - onClear, - content: { - headline: 'Storybook notifications has a accessibility icon it can be any color!', - }, - icon: { - name: 'accessibility', - color: 'gold', - }, -}; - -export const AccessibilityGoldIconLongHeadLineNoSubHeadline = Template.bind({}); - -AccessibilityGoldIconLongHeadLineNoSubHeadline.args = { - notification: accessibilityGoldIconLongHeadLineNoSubHeadlineData, - onDismissNotification, -}; diff --git a/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx new file mode 100644 index 000000000000..87755129055e --- /dev/null +++ b/code/ui/manager/src/components/notifications/NotificationItem.stories.tsx @@ -0,0 +1,256 @@ +import React from 'react'; +import { LocationProvider } from '@storybook/router'; +import type { Meta, StoryObj } from '@storybook/react'; +import NotificationItem from './NotificationItem'; + +const meta = { + component: NotificationItem, + title: 'Notifications/NotificationItem', + decorators: [ + (Story) => ( + + + + ), + (Story) => ( +
+ +
+ ), + ], + excludeStories: /.*Data$/, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +const onClear = () => {}; +const onDismissNotification = () => {}; + +export const Simple: Story = { + args: { + notification: { + id: '1', + onClear, + content: { + headline: 'Storybook cool!', + }, + link: '/some/path', + }, + onDismissNotification, + }, +}; + +export const LongHeadline: Story = { + args: { + ...Simple.args, + notification: { + id: '2', + onClear, + content: { + headline: 'This is a long message that extends over two lines!', + }, + link: '/some/path', + }, + }, +}; + +export const Link: Story = { + args: { + ...Simple.args, + notification: { + id: '3', + onClear, + content: { + headline: 'Storybook X.X is available! Download now »', + }, + link: '/some/path', + }, + }, +}; + +export const LinkIconWithColor: Story = { + args: { + ...Simple.args, + notification: { + id: '4', + onClear, + content: { + headline: 'Storybook with a smile!', + }, + icon: { + name: 'facehappy', + color: 'hotpink', + }, + link: '/some/path', + }, + }, +}; + +export const LinkIconWithColorSubHeadline: Story = { + args: { + ...Simple.args, + notification: { + id: '5', + onClear, + content: { + headline: 'Storybook X.X is available with a smile! Download now »', + subHeadline: 'This link also has a sub headline', + }, + icon: { + name: 'facehappy', + color: 'tomato', + }, + link: '/some/path', + }, + }, +}; + +export const BookIcon: Story = { + args: { + ...Simple.args, + notification: { + id: '6', + onClear, + content: { + headline: 'Storybook has a book icon!', + }, + icon: { + name: 'book', + }, + link: '/some/path', + }, + }, +}; + +export const StrongSubHeadline: Story = { + args: { + ...Simple.args, + notification: { + id: '7', + onClear, + content: { + headline: 'Storybook has a book icon!', + subHeadline: Strong subHeadline, + }, + icon: { + name: 'book', + }, + link: '/some/path', + }, + }, +}; + +export const StrongEmphasizedSubHeadline: Story = { + args: { + ...Simple.args, + notification: { + id: '8', + onClear, + content: { + headline: 'Storybook cool!', + subHeadline: ( + + Emphasized normal strong Storybook! + + ), + }, + icon: { + name: 'book', + }, + link: '/some/path', + }, + }, +}; + +export const BookIconSubHeadline: Story = { + args: { + ...Simple.args, + notification: { + id: '9', + onClear, + content: { + headline: 'Storybook has a book icon!', + subHeadline: 'Find out more!', + }, + icon: { + name: 'book', + }, + link: '/some/path', + }, + }, +}; + +export const BookIconLongSubHeadline: Story = { + args: { + ...Simple.args, + notification: { + id: '10', + onClear, + content: { + headline: 'Storybook has a book icon!', + subHeadline: + 'Find out more! by clicking on on buttons and downloading some applications. Find out more! by clicking on buttons and downloading some applications', + }, + icon: { + name: 'book', + }, + link: '/some/path', + }, + }, +}; + +export const AccessibilityIcon: Story = { + args: { + ...Simple.args, + notification: { + id: '11', + onClear, + content: { + headline: 'Storybook has a accessibility icon!', + subHeadline: 'It is here!', + }, + icon: { + name: 'accessibility', + }, + link: '/some/path', + }, + }, +}; + +export const AccessibilityGoldIcon: Story = { + args: { + ...Simple.args, + notification: { + id: '12', + onClear, + content: { + headline: 'Accessibility icon!', + subHeadline: 'It is gold!', + }, + icon: { + name: 'accessibility', + color: 'gold', + }, + link: '/some/path', + }, + }, +}; + +export const AccessibilityGoldIconLongHeadLineNoSubHeadline: Story = { + args: { + ...Simple.args, + notification: { + id: '13', + onClear, + content: { + headline: 'Storybook notifications has a accessibility icon it can be any color!', + }, + icon: { + name: 'accessibility', + color: 'gold', + }, + link: '/some/path', + }, + }, +}; diff --git a/code/ui/manager/src/components/notifications/NotificationList.stories.jsx b/code/ui/manager/src/components/notifications/NotificationList.stories.jsx deleted file mode 100644 index 8ccbce821e8f..000000000000 --- a/code/ui/manager/src/components/notifications/NotificationList.stories.jsx +++ /dev/null @@ -1,62 +0,0 @@ -import React from 'react'; -import { LocationProvider } from '@storybook/router'; - -import { NotificationList } from './NotificationList'; -import itemMeta, * as itemStories from './NotificationItem.stories.jsx'; - -export default { - component: NotificationList, - title: 'Notifications/NotificationList', - decorators: [ - (StoryFn) => ( - - - - ), - - (storyFn) => ( -
- {storyFn()} -
- ), - ], - excludeStories: /.*Data$/, -}; - -// eslint-disable-next-line no-underscore-dangle, import/namespace -const ordering = itemStories.__namedExportsOrder; - -const items = (Array.isArray(ordering) ? ordering : Array.from(Object.keys(itemStories))) - .filter((key) => itemMeta.excludeStories.exec(key)) - // eslint-disable-next-line import/namespace - .map((key) => itemStories[key]); - -export const singleData = [items[0]]; -export const allData = items; - -function clearNotification(id) {} - -export const Single = () => ( - -); - -export const All = () => ( - -); - -export const Placement = () => ( - // Note: position:absolute is only for QA/testing. Use position:fixed when integrating into the real UI. - -); diff --git a/code/ui/manager/src/components/notifications/NotificationList.stories.tsx b/code/ui/manager/src/components/notifications/NotificationList.stories.tsx new file mode 100644 index 000000000000..ea2f4d301cff --- /dev/null +++ b/code/ui/manager/src/components/notifications/NotificationList.stories.tsx @@ -0,0 +1,46 @@ +import React from 'react'; +import { LocationProvider } from '@storybook/router'; +import type { Meta } from '@storybook/react'; + +import { NotificationList } from './NotificationList'; +import itemMeta, * as itemStories from './NotificationItem.stories'; + +const meta = { + component: NotificationList, + title: 'Notifications/NotificationList', + decorators: [ + (StoryFn) => ( + + + + ), + + (storyFn) => ( +
+ {storyFn()} +
+ ), + ], + excludeStories: /.*Data$/, +} satisfies Meta; + +export default meta; + +type ItemStories = typeof itemStories & { [key: string]: any }; + +const items = Array.from(Object.keys(itemStories as ItemStories)) + .filter((key) => itemMeta.excludeStories.exec(key)) + .map((key) => (itemStories as ItemStories)[key]); + +export const singleData = [items[0]]; +export const allData = items; + +function clearNotification() {} + +export const Single = () => ( + +); + +export const All = () => ( + +); diff --git a/code/ui/manager/src/components/notifications/NotificationList.tsx b/code/ui/manager/src/components/notifications/NotificationList.tsx index d16942d57f0c..1419850cc20c 100644 --- a/code/ui/manager/src/components/notifications/NotificationList.tsx +++ b/code/ui/manager/src/components/notifications/NotificationList.tsx @@ -34,6 +34,8 @@ const List = styled.div<{ placement?: CSSObject }>({ position: 'fixed', left: 20, bottom: 60, + maxHeight: 'calc(100vh - 40px)', + overflowY: 'scroll', [MEDIA_DESKTOP_BREAKPOINT]: { bottom: 20, From b744fe868cf22acee162c789d3e31eab27dd5f5a Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 31 Oct 2023 10:44:15 +0000 Subject: [PATCH 7/8] Update NotificationList.stories.tsx --- .../components/notifications/NotificationList.stories.tsx | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/code/ui/manager/src/components/notifications/NotificationList.stories.tsx b/code/ui/manager/src/components/notifications/NotificationList.stories.tsx index ea2f4d301cff..36abcbb81a9e 100644 --- a/code/ui/manager/src/components/notifications/NotificationList.stories.tsx +++ b/code/ui/manager/src/components/notifications/NotificationList.stories.tsx @@ -3,7 +3,7 @@ import { LocationProvider } from '@storybook/router'; import type { Meta } from '@storybook/react'; import { NotificationList } from './NotificationList'; -import itemMeta, * as itemStories from './NotificationItem.stories'; +import * as itemStories from './NotificationItem.stories'; const meta = { component: NotificationList, @@ -29,8 +29,10 @@ export default meta; type ItemStories = typeof itemStories & { [key: string]: any }; const items = Array.from(Object.keys(itemStories as ItemStories)) - .filter((key) => itemMeta.excludeStories.exec(key)) - .map((key) => (itemStories as ItemStories)[key]); + .filter((key) => !['default', '__namedExportsOrder'].includes(key)) + .map((key) => (itemStories as ItemStories)[key].args.notification); + +console.log(items); export const singleData = [items[0]]; export const allData = items; From 9598dc3d0dc0221763dd3e235ce4cdbd2eb27e6d Mon Sep 17 00:00:00 2001 From: Charles de Dreuille Date: Tue, 31 Oct 2023 11:40:55 +0000 Subject: [PATCH 8/8] Improved stories --- .../NotificationList.stories.tsx | 30 +++++++++---------- .../notifications/NotificationList.tsx | 2 -- 2 files changed, 15 insertions(+), 17 deletions(-) diff --git a/code/ui/manager/src/components/notifications/NotificationList.stories.tsx b/code/ui/manager/src/components/notifications/NotificationList.stories.tsx index 36abcbb81a9e..e75c77965b03 100644 --- a/code/ui/manager/src/components/notifications/NotificationList.stories.tsx +++ b/code/ui/manager/src/components/notifications/NotificationList.stories.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { LocationProvider } from '@storybook/router'; -import type { Meta } from '@storybook/react'; +import type { Meta, StoryObj } from '@storybook/react'; import { NotificationList } from './NotificationList'; import * as itemStories from './NotificationItem.stories'; @@ -25,6 +25,7 @@ const meta = { } satisfies Meta; export default meta; +type Story = StoryObj; type ItemStories = typeof itemStories & { [key: string]: any }; @@ -32,17 +33,16 @@ const items = Array.from(Object.keys(itemStories as ItemStories)) .filter((key) => !['default', '__namedExportsOrder'].includes(key)) .map((key) => (itemStories as ItemStories)[key].args.notification); -console.log(items); - -export const singleData = [items[0]]; -export const allData = items; - -function clearNotification() {} - -export const Single = () => ( - -); - -export const All = () => ( - -); +export const Single: Story = { + args: { + notifications: [items[0]], + clearNotification: () => {}, + }, +}; + +export const Multiple: Story = { + args: { + notifications: items.slice(0, 3), + clearNotification: () => {}, + }, +}; diff --git a/code/ui/manager/src/components/notifications/NotificationList.tsx b/code/ui/manager/src/components/notifications/NotificationList.tsx index 1419850cc20c..d16942d57f0c 100644 --- a/code/ui/manager/src/components/notifications/NotificationList.tsx +++ b/code/ui/manager/src/components/notifications/NotificationList.tsx @@ -34,8 +34,6 @@ const List = styled.div<{ placement?: CSSObject }>({ position: 'fixed', left: 20, bottom: 60, - maxHeight: 'calc(100vh - 40px)', - overflowY: 'scroll', [MEDIA_DESKTOP_BREAKPOINT]: { bottom: 20,