From be6e5d68a6b30bd5d8383b8c98911cc6cabac093 Mon Sep 17 00:00:00 2001 From: Romain Jamet Date: Wed, 15 Jan 2025 10:46:34 +0100 Subject: [PATCH] fix(mrc): fix - add loading state - fix style ref: 14925 Signed-off-by: Romain Jamet --- .../menus/guide/guide.component.tsx | 30 ++++++++++--------- .../navigation/menus/guide/guide.stories.tsx | 4 +++ 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx b/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx index 9c76c06a6956..6cb9abcda8b0 100644 --- a/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx +++ b/packages/manager-react-components/src/components/navigation/menus/guide/guide.component.tsx @@ -6,10 +6,10 @@ import { } from '@ovhcloud/ods-components'; import { OdsPopover, OdsButton } from '@ovhcloud/ods-components/react'; import { useTranslation } from 'react-i18next'; -import { Links, LinkType } from '../../../typography'; +import { Links, LinksProps, LinkType } from '../../../typography'; import '../translations/translation'; -export interface GuideItem { +export interface GuideItem extends Omit { id: number; href: string; download?: string; @@ -21,14 +21,19 @@ export interface GuideItem { export interface GuideButtonProps { items: GuideItem[]; + isLoading?: boolean; } -export const GuideButton: React.FC = ({ items }) => { +export const GuideButton: React.FC = ({ + isLoading, + items, +}) => { const { t } = useTranslation('buttons'); return ( <> - - {items.map((item) => ( -
+ +
+ {items.map(({ id, onClick, ...rest }) => ( -
- ))} + ))} +
); diff --git a/packages/manager-react-components/src/components/navigation/menus/guide/guide.stories.tsx b/packages/manager-react-components/src/components/navigation/menus/guide/guide.stories.tsx index ce2f5e6d4920..9f520cb5d145 100644 --- a/packages/manager-react-components/src/components/navigation/menus/guide/guide.stories.tsx +++ b/packages/manager-react-components/src/components/navigation/menus/guide/guide.stories.tsx @@ -21,6 +21,10 @@ export const guideButton: GuideButtonProps = { items: guideItems, }; +export const GuideButtonLoading = () => ( + +); + const meta: Meta = { title: 'Navigation/Menus', decorators: [(story) =>
{story()}
],