Skip to content

Commit 8262c05

Browse files
stif59100anooparveti
stif59100
authored and
anooparveti
committed
feat(container): add latest ods version and replace boostrap on legacy (#10991)
ref:MANAGER-12303 Signed-off-by: stif59100 <[email protected]>
1 parent e2b556e commit 8262c05

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+568
-644
lines changed

‎packages/manager-components/src/components/typography/links/links.component.tsx‎

Lines changed: 33 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -48,42 +48,40 @@ export const Links: React.FC<LinksProps> = ({
4848
}
4949

5050
return (
51-
<div className="mb-5">
52-
<OsdsLink
53-
color={ODS_THEME_COLOR_INTENT.primary}
54-
download={download}
55-
href={href}
56-
target={target}
57-
rel={rel}
58-
{...props}
59-
>
60-
<span slot="start">
61-
{type === LinkType.back && (
62-
<OsdsIcon
63-
className={`${arrowClass}`}
64-
hoverable
65-
name={arrowIcon}
66-
size={ODS_ICON_SIZE.xxs}
67-
color={ODS_THEME_COLOR_INTENT.primary}
68-
/>
69-
)}
70-
</span>
71-
72-
{label}
73-
{(type === LinkType.next || type === LinkType.external) && (
74-
<span slot="end">
75-
<OsdsIcon
76-
aria-hidden="true"
77-
className={`${arrowClass}`}
78-
name={arrowIcon}
79-
hoverable
80-
size={ODS_ICON_SIZE.xxs}
81-
color={ODS_THEME_COLOR_INTENT.primary}
82-
/>
83-
</span>
51+
<OsdsLink
52+
color={ODS_THEME_COLOR_INTENT.primary}
53+
download={download}
54+
href={href}
55+
target={target}
56+
rel={rel}
57+
{...props}
58+
>
59+
<span slot="start">
60+
{type === LinkType.back && (
61+
<OsdsIcon
62+
className={`${arrowClass}`}
63+
hoverable
64+
name={arrowIcon}
65+
size={ODS_ICON_SIZE.xxs}
66+
color={ODS_THEME_COLOR_INTENT.primary}
67+
/>
8468
)}
85-
</OsdsLink>
86-
</div>
69+
</span>
70+
71+
{label}
72+
{(type === LinkType.next || type === LinkType.external) && (
73+
<span slot="end">
74+
<OsdsIcon
75+
aria-hidden="true"
76+
className={`${arrowClass}`}
77+
name={arrowIcon}
78+
hoverable
79+
size={ODS_ICON_SIZE.xxs}
80+
color={ODS_THEME_COLOR_INTENT.primary}
81+
/>
82+
</span>
83+
)}
84+
</OsdsLink>
8785
);
8886
};
8987

‎packages/manager/apps/container/package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,8 @@
6464
"react-router-dom": "^6.3.0",
6565
"react-select": "^5.3.2",
6666
"react-tooltip": "^5.4.0",
67-
"react-use": "^17.4.0"
67+
"react-use": "^17.4.0",
68+
"tailwindcss": "^3.3.3"
6869
},
6970
"devDependencies": {
7071
"@ovh-ux/manager-dev-server-config": "^6.1.0",

‎packages/manager/apps/container/postcss.config.js‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
module.exports = {
2+
plugins: {
3+
tailwindcss: {},
4+
autoprefixer: {},
5+
},
6+
};

‎packages/manager/apps/container/src/container/legacy/account-sidebar/PaymentMethod/Details.tsx‎

Lines changed: 33 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,53 @@ import { TRANSLATE_NAMESPACE } from '../constants';
66

77
import { PaymentMethodType } from './usePaymentMethod';
88

9+
import { OsdsChip, OsdsText } from '@ovhcloud/ods-components/react';
10+
import { ODS_TEXT_LEVEL } from '@ovhcloud/ods-components';
11+
12+
import {
13+
ODS_THEME_COLOR_INTENT,
14+
ODS_THEME_COLOR_HUE,
15+
} from '@ovhcloud/ods-common-theming';
16+
917
type Props = {
10-
cssBaseClassName?: string;
1118
defaultPaymentMethod?: PaymentMethodType;
1219
translationBase?: string;
1320
};
1421

1522
const Details = ({
16-
cssBaseClassName = '',
1723
defaultPaymentMethod = null,
1824
translationBase = '',
1925
}: Props): JSX.Element => {
2026
const { t } = useTranslation(TRANSLATE_NAMESPACE);
21-
2227
return (
23-
<div className="m-auto p-1 minw-0 w-100">
24-
<h3>{t(`${translationBase}_title`)}</h3>
28+
<div className="mx-auto p-1 min-w-0 w-full">
29+
<OsdsText
30+
className="m-0 p-0"
31+
level={ODS_TEXT_LEVEL.subheading}
32+
color={ODS_THEME_COLOR_INTENT.primary}
33+
hue={ODS_THEME_COLOR_HUE._800}
34+
>
35+
{t(`${translationBase}_title`)}
36+
</OsdsText>
37+
2538
{defaultPaymentMethod ? (
26-
<div className={`${cssBaseClassName}_label`}>
27-
<p className="m-0 text-truncate">{defaultPaymentMethod.label}</p>
28-
<span
29-
className={`${cssBaseClassName}_status oui-badge oui-badge_${defaultPaymentMethod.getStatusCategory()}`}
39+
<>
40+
<OsdsText
41+
level={ODS_TEXT_LEVEL.body}
42+
color={ODS_THEME_COLOR_INTENT.text}
43+
></OsdsText>
44+
<p className="m-0 truncate">{defaultPaymentMethod.label}</p>
45+
<OsdsChip
46+
inline
47+
color={
48+
ODS_THEME_COLOR_INTENT[
49+
defaultPaymentMethod.getStatusCategory() as keyof typeof ODS_THEME_COLOR_INTENT
50+
]
51+
}
3052
>
3153
{t(`${translationBase}_status_${defaultPaymentMethod.status}`)}
32-
</span>
33-
</div>
54+
</OsdsChip>
55+
</>
3456
) : (
3557
<p>{t(`${translationBase}_none`)}</p>
3658
)}

‎packages/manager/apps/container/src/container/legacy/account-sidebar/PaymentMethod/Icon.tsx‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,11 @@
11
import React from 'react';
22
import { PaymentMethodType } from './usePaymentMethod';
33

4+
import { OsdsIcon } from '@ovhcloud/ods-components/react';
5+
import { ODS_ICON_SIZE, ODS_ICON_NAME } from '@ovhcloud/ods-components';
6+
7+
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
8+
49
type Props = {
510
defaultPaymentMethod?: PaymentMethodType;
611
};
@@ -9,10 +14,12 @@ const Icon = ({ defaultPaymentMethod = {} }: Props): JSX.Element => {
914
return (
1015
<>
1116
{!defaultPaymentMethod?.icon ? (
12-
<span
13-
className="mr-auto oui-icon oui-icon-credit-card_concept"
14-
aria-hidden="true"
15-
></span>
17+
<OsdsIcon
18+
className="mr-4"
19+
name={ODS_ICON_NAME.CREDIT_CARD_CONCEPT}
20+
size={ODS_ICON_SIZE.sm}
21+
color={ODS_THEME_COLOR_INTENT.primary}
22+
></OsdsIcon>
1623
) : (
1724
<img
1825
src={defaultPaymentMethod.icon.data}

‎packages/manager/apps/container/src/container/legacy/account-sidebar/PaymentMethod/PaymentMethod.tsx‎

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,9 @@ import Icon from './Icon';
66
import usePaymentMethod, { PaymentMethodType } from './usePaymentMethod';
77

88
import { useShell } from '@/context';
9+
import { OsdsSkeleton, OsdsIcon } from '@ovhcloud/ods-components/react';
10+
import { ODS_ICON_NAME } from '@ovhcloud/ods-components';
11+
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
912

1013
import './index.scss';
1114

@@ -53,27 +56,26 @@ const PaymentMethod = (): JSX.Element => {
5356
!isEnterpriseAccount() && (
5457
<div className={`${cssBaseClassName} mb-4`}>
5558
<a
56-
className="d-flex flex-row align-items-center p-2"
59+
className="flex flex-row items-center p-2"
5760
href={paymentMethodURL}
5861
target="_top"
5962
onClick={paymentMethodClickHandler}
6063
>
6164
<Icon defaultPaymentMethod={defaultPaymentMethod} />
6265
{isLoading ? (
63-
<div className="oui-skeleton oui-skeleton_s">
64-
<div className="oui-skeleton__loader"></div>
65-
</div>
66+
<OsdsSkeleton/>
6667
) : (
6768
<Details
6869
defaultPaymentMethod={defaultPaymentMethod}
6970
translationBase={translationBase}
70-
cssBaseClassName={cssBaseClassName}
7171
/>
7272
)}
73-
<span
74-
className="ml-auto oui-icon oui-icon-arrow-right"
73+
<OsdsIcon
7574
aria-hidden="true"
76-
></span>
75+
name={ODS_ICON_NAME.ARROW_RIGHT}
76+
className="ml-auto"
77+
color={ODS_THEME_COLOR_INTENT.primary}
78+
></OsdsIcon>
7779
</a>
7880
</div>
7981
)

‎packages/manager/apps/container/src/container/legacy/account-sidebar/PaymentMethod/index.scss‎

Lines changed: 0 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -23,48 +23,4 @@
2323
img {
2424
width: 2.5rem;
2525
}
26-
27-
h3 {
28-
font-size: 0.85rem;
29-
margin: 0;
30-
padding: 0;
31-
line-height: 1.5rem;
32-
}
33-
34-
&_label {
35-
font-size: 0.75rem;
36-
37-
> p {
38-
color: inherit;
39-
}
40-
}
41-
42-
&_status {
43-
font-size: 0.8rem;
44-
font-weight: bold;
45-
max-width: none;
46-
line-height: 0.85rem;
47-
}
48-
49-
.oui-badge {
50-
&_error {
51-
color: $ae-500;
52-
}
53-
54-
&_warning {
55-
color: $aw-500;
56-
}
57-
58-
&_success {
59-
color: $as-500;
60-
}
61-
}
62-
63-
.oui-icon {
64-
color: $p-800;
65-
}
66-
67-
.oui-icon-arrow-right {
68-
color: $p-500;
69-
}
7026
}

‎packages/manager/apps/container/src/container/legacy/account-sidebar/Shortcuts/Shortcuts.tsx‎

Lines changed: 7 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,32 +1,27 @@
11
import React from 'react';
2-
32
import { useTranslation } from 'react-i18next';
4-
53
import { TRANSLATE_NAMESPACE } from '../constants';
6-
74
import Tile from './Tile';
85
import useShortcuts from './useShortcuts';
96

107
const Shortcuts = (): JSX.Element => {
118
const { t } = useTranslation(TRANSLATE_NAMESPACE);
129
const shortcuts = useShortcuts().getShortcuts();
1310

14-
const cssClassName = 'manager-account-sidebar-shortcuts';
1511
const translationBase = 'user_account_menu_shortcuts';
1612

1713
return (
1814
<div className="mb-4" data-navi-id="account-sidebar-shortcuts-block">
19-
<h3>{t(`${translationBase}_title`)}</h3>
15+
<h3 className="text-lg font-bold mb-2">
16+
{t(`${translationBase}_title`)}
17+
</h3>
2018
<div
21-
className={`d-flex flex-wrap justify-content-${
22-
shortcuts.length > 2 ? 'around' : 'start'
19+
className={`flex flex-wrap ${
20+
shortcuts.length > 2 ? 'justify-around' : 'justify-start'
2321
}`}
2422
>
25-
{shortcuts.map((shortcut, index) => (
26-
<div
27-
key={`shortcut-tile-${index}`}
28-
className={`${cssClassName}_links`}
29-
>
23+
{shortcuts.map((shortcut) => (
24+
<div key={shortcut.id} className="max-w-1/3 flex-1">
3025
<Tile shortcut={shortcut} />
3126
</div>
3227
))}

‎packages/manager/apps/container/src/container/legacy/account-sidebar/Shortcuts/Tile/Tile.tsx‎

Lines changed: 24 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,13 @@ import { useTranslation } from 'react-i18next';
44

55
import { useShell } from '@/context';
66
import { TRANSLATE_NAMESPACE } from '../../constants';
7+
import { OsdsTile, OsdsText } from '@ovhcloud/ods-components/react';
8+
import {
9+
ODS_TEXT_LEVEL,
10+
ODS_TEXT_SIZE,
11+
ODS_TILE_VARIANT,
12+
} from '@ovhcloud/ods-components';
13+
import { ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
714

815
import { Shortcut } from './shortcut';
916

@@ -15,7 +22,6 @@ const Tile = ({ shortcut = {} as Shortcut }: Props): JSX.Element => {
1522
const { t } = useTranslation(TRANSLATE_NAMESPACE);
1623
const shell = useShell();
1724

18-
const cssClassName = 'manager-account-sidebar-shortcuts-tile';
1925
const translationBase = 'user_account_menu_shortcuts_tile';
2026

2127
const handleShortcutClick = (param: Shortcut) => {
@@ -28,19 +34,29 @@ const Tile = ({ shortcut = {} as Shortcut }: Props): JSX.Element => {
2834
};
2935

3036
return (
31-
<div className={cssClassName}>
37+
<div className="m-1">
3238
<a
3339
href={shortcut.url}
3440
target="_top"
3541
onClick={() => handleShortcutClick(shortcut)}
42+
className="block"
3643
>
37-
<span
38-
className={`${cssClassName}__icon oui-icon ${shortcut.icon}`}
39-
aria-hidden="true"
40-
></span>
41-
<span className={`${cssClassName}__description`}>
44+
<OsdsTile
45+
hoverable
46+
variant={ODS_TILE_VARIANT.stroked}
47+
color={ODS_THEME_COLOR_INTENT.primary}
48+
>
49+
{shortcut.icon}
50+
</OsdsTile>
51+
<div className='flex justify-center items-center'>
52+
<OsdsText
53+
color={ODS_THEME_COLOR_INTENT.text}
54+
size={ODS_TEXT_SIZE._200}
55+
level={ODS_TEXT_LEVEL.body}
56+
className="font-bold text-center"
57+
>
4258
{t(`${translationBase}_${shortcut.id}`)}
43-
</span>
59+
</OsdsText></div>
4460
</a>
4561
</div>
4662
);

0 commit comments

Comments
 (0)