From 5ff1c4e65ca2095e901a4c1494885c695bfa85ba Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw Date: Fri, 22 Dec 2023 12:28:59 +0530 Subject: [PATCH 1/8] feat(stepper): add tooltip in stepper --- CHANGELOG.md | 1 + .../basic/Stepper/Stepper.stories.tsx | 1 + src/components/basic/Stepper/index.tsx | 90 +++++++++++++++---- 3 files changed, 76 insertions(+), 16 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 3ca81559..a6e73da7 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,6 +3,7 @@ ## 2.1.11 - Fix general issues +- Add tooltip in stepper ## 2.1.10 diff --git a/src/components/basic/Stepper/Stepper.stories.tsx b/src/components/basic/Stepper/Stepper.stories.tsx index 8fd3b084..f3eba16b 100644 --- a/src/components/basic/Stepper/Stepper.stories.tsx +++ b/src/components/basic/Stepper/Stepper.stories.tsx @@ -67,4 +67,5 @@ Stepper.args = { list: stepperElements, showSteps: 6, activeStep: 3, + tooltipText: "Continue where you left" } diff --git a/src/components/basic/Stepper/index.tsx b/src/components/basic/Stepper/index.tsx index 323e1429..2ed5bd5d 100644 --- a/src/components/basic/Stepper/index.tsx +++ b/src/components/basic/Stepper/index.tsx @@ -19,6 +19,7 @@ ********************************************************************************/ import { Box } from '@mui/material' +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import { StepperItem } from './StepperItem' export interface StepList { @@ -33,31 +34,88 @@ export interface StepperProps { list: StepList[] showSteps: number activeStep: number + tooltipText: string } -export const Stepper = ({ list, showSteps, activeStep }: StepperProps) => { +export const Stepper = ({ list, showSteps, activeStep, tooltipText }: StepperProps) => { + const width = 100 / list.length + return ( {list && - list - .filter((item) => item.step <= showSteps && item.step <= list.length) - .map((item, i) => ( - - ))} + <> + + { + list + .filter((item) => item.step <= showSteps && item.step <= list.length) + .map((item, i) => ( + + )) + } + + + { + tooltipText && + list + .map((item, i) => ( + + { + i+1 === activeStep && + + + { tooltipText } + + } + + )) + } + + + } + ) } From 52e3f9652881f840af62d2bd09ba8c0e20aa3604 Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw Date: Fri, 22 Dec 2023 14:18:43 +0530 Subject: [PATCH 2/8] feat(stepper): fix code smell and add tooltip link --- DEPENDENCIES | 2 +- package.json | 4 +-- .../basic/Stepper/Stepper.stories.tsx | 3 +- src/components/basic/Stepper/index.tsx | 35 ++++++++++++------- 4 files changed, 28 insertions(+), 16 deletions(-) diff --git a/DEPENDENCIES b/DEPENDENCIES index e97433db..a9503625 100644 --- a/DEPENDENCIES +++ b/DEPENDENCIES @@ -174,7 +174,7 @@ npm/npmjs/-/csso/4.2.0, MIT, approved, clearlydefined npm/npmjs/-/cssom/0.3.8, MIT, approved, clearlydefined npm/npmjs/-/cssom/0.5.0, MIT, approved, clearlydefined npm/npmjs/-/cssstyle/2.3.0, MIT, approved, clearlydefined -npm/npmjs/-/csstype/3.1.2, MIT, approved, clearlydefined +npm/npmjs/-/csstype/3.1.2, MIT, approved, #11847 npm/npmjs/-/data-urls/3.0.2, MIT, approved, clearlydefined npm/npmjs/-/date-fns/2.30.0, MIT, approved, clearlydefined npm/npmjs/-/debug/2.6.9, MIT, approved, clearlydefined diff --git a/package.json b/package.json index d623d480..93f54560 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "@catena-x/portal-shared-components", - "version": "2.1.11", + "name": "@nidhi.garg/portal-shared-components", + "version": "2.1.12", "description": "Catena-X Portal Shared Components", "author": "Catena-X Contributors", "license": "Apache-2.0", diff --git a/src/components/basic/Stepper/Stepper.stories.tsx b/src/components/basic/Stepper/Stepper.stories.tsx index f3eba16b..96e4de26 100644 --- a/src/components/basic/Stepper/Stepper.stories.tsx +++ b/src/components/basic/Stepper/Stepper.stories.tsx @@ -67,5 +67,6 @@ Stepper.args = { list: stepperElements, showSteps: 6, activeStep: 3, - tooltipText: "Continue where you left" + tooltipText: "Continue where you left", + tooltipLink: "/registration/form" } diff --git a/src/components/basic/Stepper/index.tsx b/src/components/basic/Stepper/index.tsx index 2ed5bd5d..5cb82f1e 100644 --- a/src/components/basic/Stepper/index.tsx +++ b/src/components/basic/Stepper/index.tsx @@ -18,7 +18,7 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -import { Box } from '@mui/material' +import { Box, Link } from '@mui/material' import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; import { StepperItem } from './StepperItem' @@ -34,10 +34,11 @@ export interface StepperProps { list: StepList[] showSteps: number activeStep: number - tooltipText: string + tooltipText?: string + tooltipLink?: string } -export const Stepper = ({ list, showSteps, activeStep, tooltipText }: StepperProps) => { +export const Stepper = ({ list, showSteps, activeStep, tooltipText, tooltipLink }: StepperProps) => { const width = 100 / list.length return ( @@ -81,6 +82,7 @@ export const Stepper = ({ list, showSteps, activeStep, tooltipText }: StepperPro list .map((item, i) => ( - - { tooltipText } + > + + { tooltipText } + } From 799547fe36085438c05403cebc91a91064b243bd Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw Date: Tue, 26 Dec 2023 11:18:28 +0530 Subject: [PATCH 3/8] feat(stepper): fix code smell --- src/components/basic/Stepper/index.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/components/basic/Stepper/index.tsx b/src/components/basic/Stepper/index.tsx index 5cb82f1e..668b5540 100644 --- a/src/components/basic/Stepper/index.tsx +++ b/src/components/basic/Stepper/index.tsx @@ -19,7 +19,7 @@ ********************************************************************************/ import { Box, Link } from '@mui/material' -import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp'; +import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp' import { StepperItem } from './StepperItem' export interface StepList { @@ -41,6 +41,10 @@ export interface StepperProps { export const Stepper = ({ list, showSteps, activeStep, tooltipText, tooltipLink }: StepperProps) => { const width = 100 / list.length + function uniqueId(i: number): import("react").Key | null | undefined { + throw new Error('Function not implemented.'); + } + return ( item.step <= showSteps && item.step <= list.length) .map((item, i) => ( Date: Wed, 27 Dec 2023 14:14:32 +0530 Subject: [PATCH 4/8] feat(stepper): make stepper responsive --- CHANGELOG.md | 5 +- package.json | 2 +- src/components/basic/Stepper/Stepper.scss | 116 +++++++++++++ src/components/basic/Stepper/StepperItem.tsx | 163 +++++++++++-------- src/components/basic/Stepper/index.tsx | 55 +++---- 5 files changed, 243 insertions(+), 98 deletions(-) create mode 100644 src/components/basic/Stepper/Stepper.scss diff --git a/CHANGELOG.md b/CHANGELOG.md index a6e73da7..e8d56033 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,9 +1,12 @@ # Changelog +## 2.1.14 + +- Add tooltip hint in stepper and make stepper responsive + ## 2.1.11 - Fix general issues -- Add tooltip in stepper ## 2.1.10 diff --git a/package.json b/package.json index 93f54560..c55c56b5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@nidhi.garg/portal-shared-components", - "version": "2.1.12", + "version": "2.1.14", "description": "Catena-X Portal Shared Components", "author": "Catena-X Contributors", "license": "Apache-2.0", diff --git a/src/components/basic/Stepper/Stepper.scss b/src/components/basic/Stepper/Stepper.scss new file mode 100644 index 00000000..8294dc79 --- /dev/null +++ b/src/components/basic/Stepper/Stepper.scss @@ -0,0 +1,116 @@ +/******************************************************************************** + * Copyright (c) 2021, 2023 BMW Group AG + * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation + * + * See the NOTICE file(s) distributed with this work for additional + * information regarding copyright ownership. + * + * This program and the accompanying materials are made available under the + * terms of the Apache License, Version 2.0 which is available at + * https://www.apache.org/licenses/LICENSE-2.0. + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT + * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the + * License for the specific language governing permissions and limitations + * under the License. + * + * SPDX-License-Identifier: Apache-2.0 + ********************************************************************************/ + +.stepperMain { + display: flex; + + .stepperStep { + -webkit-flex: 1 0 0%; + -ms-flex: 1 0 0%; + flex: 1 0 0%; + width: 100%; + max-width: 100%; + + .stepHead { + text-align: center; + height: 100%; + + .hintStepMain { + .hintStepMobile { + display: none; + } + } + + .stepHeadline { + width: 95px; + margin: 0px auto 24px auto; + min-height: 56px; + } + } + } +} + +.stepperHint { + display: flex; + + .hintStep { + -webkit-flex: 1 0 0%; + -ms-flex: 1 0 0%; + flex: 1 0 0%; + width: 100%; + max-width: 100%; + } +} + + + +@media only screen and (max-width: 767px) { + + .stepperMain { + display: inline-block; + width: 100%; + + .stepperStep { + margin-bottom: 12px; + + .stepHead { + text-align: left; + height: auto; + + .hintStepMain { + display: flex; + align-items: center; + + .hintStepMobile { + display: inline-block; + + a { + display: inline-flex; + border-radius: 12px; + padding: 6px 12px; + background: var(--Interactive-Secondary, #EAF1FE); + box-shadow: 0px 20px 40px 0px rgba(80, 80, 80, 0.30); + margin-left: 10px; + + span { + padding-bottom: 0; + } + } + } + } + + .stepIcon { + margin: 0; + } + + .stepHeadline { + width: 100%; + margin: 10px auto 12px auto; + min-height: auto; + line-height: normal; + } + } + } + } + + .stepperHint { + display: none; + } +} \ No newline at end of file diff --git a/src/components/basic/Stepper/StepperItem.tsx b/src/components/basic/Stepper/StepperItem.tsx index bf41acc5..b6939b6b 100644 --- a/src/components/basic/Stepper/StepperItem.tsx +++ b/src/components/basic/Stepper/StepperItem.tsx @@ -18,10 +18,10 @@ * SPDX-License-Identifier: Apache-2.0 ********************************************************************************/ -import { Box } from '@mui/material' +import { useEffect, useState } from 'react' +import { Box, Link } from '@mui/material' import { Typography } from '../Typography' import { theme } from '../../../theme' -import { useEffect, useState } from 'react' interface StepperItemProps { step: number @@ -31,6 +31,8 @@ interface StepperItemProps { activeStep: number index: number totalSteps?: number + tooltipText?: string + tooltipLink?: string } export const StepperItem = ({ @@ -41,6 +43,8 @@ export const StepperItem = ({ activeStep, index, totalSteps = 6, + tooltipText, + tooltipLink, }: StepperItemProps) => { const [backgroundColor, setBackgroundColor] = useState( color || theme.palette.stepper.stepUpcoming @@ -61,76 +65,99 @@ export const StepperItem = ({ }, [index, activeStep]) const width = 100 / totalSteps return ( - - + - - {done && - (text || ( - + + + {done && + (text || ( + + + + ))} + {!done && step} + + + + { + index === activeStep && + - - - ))} - {!done && step} - - - - - {headline} - + + {tooltipText} + + + } + + + + + + {headline} + + ) -} +} \ No newline at end of file diff --git a/src/components/basic/Stepper/index.tsx b/src/components/basic/Stepper/index.tsx index 668b5540..3895a05e 100644 --- a/src/components/basic/Stepper/index.tsx +++ b/src/components/basic/Stepper/index.tsx @@ -19,8 +19,11 @@ ********************************************************************************/ import { Box, Link } from '@mui/material' +import uniqueId from 'lodash/uniqueId' import KeyboardArrowUpIcon from '@mui/icons-material/KeyboardArrowUp' +import { Typography } from '../Typography' import { StepperItem } from './StepperItem' +import './Stepper.scss' export interface StepList { step: number @@ -39,11 +42,6 @@ export interface StepperProps { } export const Stepper = ({ list, showSteps, activeStep, tooltipText, tooltipLink }: StepperProps) => { - const width = 100 / list.length - - function uniqueId(i: number): import("react").Key | null | undefined { - throw new Error('Function not implemented.'); - } return ( { list .filter((item) => item.step <= showSteps && item.step <= list.length) .map((item, i) => ( )) } - + { - tooltipText && + tooltipText && list + .filter((item) => item.step <= showSteps && item.step <= list.length) .map((item, i) => ( + marginTop: '25px' + }}> { - i+1 === activeStep && + i + 1 === activeStep && - - - { tooltipText } + + {tooltipText} + } @@ -130,7 +130,6 @@ export const Stepper = ({ list, showSteps, activeStep, tooltipText, tooltipLink } - ) } From fb2cbbf0a9a2fbe6e8041a9b2060ba4f58339bed Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw Date: Wed, 27 Dec 2023 14:19:22 +0530 Subject: [PATCH 5/8] feat(stepper): fix code smells --- src/components/basic/Stepper/StepperItem.tsx | 2 +- src/components/basic/Stepper/index.tsx | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/basic/Stepper/StepperItem.tsx b/src/components/basic/Stepper/StepperItem.tsx index b6939b6b..85a060e3 100644 --- a/src/components/basic/Stepper/StepperItem.tsx +++ b/src/components/basic/Stepper/StepperItem.tsx @@ -63,7 +63,7 @@ export const StepperItem = ({ setDone(false) } }, [index, activeStep]) - const width = 100 / totalSteps + return ( + }} + key={uniqueId(item.headline)} + > { i + 1 === activeStep && Date: Wed, 27 Dec 2023 14:22:00 +0530 Subject: [PATCH 6/8] feat(stepper): fix code smells --- src/components/basic/Stepper/StepperItem.tsx | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/src/components/basic/Stepper/StepperItem.tsx b/src/components/basic/Stepper/StepperItem.tsx index 85a060e3..6148898a 100644 --- a/src/components/basic/Stepper/StepperItem.tsx +++ b/src/components/basic/Stepper/StepperItem.tsx @@ -63,7 +63,7 @@ export const StepperItem = ({ setDone(false) } }, [index, activeStep]) - + return ( Date: Thu, 28 Dec 2023 09:38:06 +0530 Subject: [PATCH 7/8] feat(stepper): undo custom package to catena-x --- package.json | 2 +- src/components/basic/Stepper/Stepper.scss | 1 - src/components/basic/Stepper/index.tsx | 1 - 3 files changed, 1 insertion(+), 3 deletions(-) diff --git a/package.json b/package.json index c55c56b5..4cca3271 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "@nidhi.garg/portal-shared-components", + "name": "@catena-x/portal-shared-components", "version": "2.1.14", "description": "Catena-X Portal Shared Components", "author": "Catena-X Contributors", diff --git a/src/components/basic/Stepper/Stepper.scss b/src/components/basic/Stepper/Stepper.scss index 8294dc79..275ef88e 100644 --- a/src/components/basic/Stepper/Stepper.scss +++ b/src/components/basic/Stepper/Stepper.scss @@ -1,5 +1,4 @@ /******************************************************************************** - * Copyright (c) 2021, 2023 BMW Group AG * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation * * See the NOTICE file(s) distributed with this work for additional diff --git a/src/components/basic/Stepper/index.tsx b/src/components/basic/Stepper/index.tsx index 2e688552..27a55571 100644 --- a/src/components/basic/Stepper/index.tsx +++ b/src/components/basic/Stepper/index.tsx @@ -1,5 +1,4 @@ /******************************************************************************** - * Copyright (c) 2021, 2023 BMW Group AG * Copyright (c) 2021, 2023 Contributors to the Eclipse Foundation * * See the NOTICE file(s) distributed with this work for additional From 878f1dacfc890c50d046ef45638b8376b2e621d8 Mon Sep 17 00:00:00 2001 From: nidhigarg-bmw Date: Thu, 28 Dec 2023 14:19:36 +0530 Subject: [PATCH 8/8] feat(stepper): update package version --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 4cca3271..dbda3e81 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@catena-x/portal-shared-components", - "version": "2.1.14", + "version": "2.1.12", "description": "Catena-X Portal Shared Components", "author": "Catena-X Contributors", "license": "Apache-2.0",