Merge pull request #81 from catenax-ng/feature/CPLP-3576/StepperUpdates

feat(stepper): add tooltip in stepper

CHANGELOG.md

@@ -1,5 +1,9 @@
 # Changelog
 
+## 2.1.15
+
+- Add tooltip hint in stepper and make stepper responsive
+
 ## 2.1.14
 
 - Technical Improvement: Search Element (active search & delete icon)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@catena-x/portal-shared-components",
-  "version": "2.1.14",
+  "version": "2.1.15",
   "description": "Catena-X Portal Shared Components",
   "author": "Catena-X Contributors",
   "license": "Apache-2.0",

src/components/basic/Stepper/Stepper.scss

@@ -0,0 +1,115 @@
+/********************************************************************************
+ * 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;
+    }
+}

src/components/basic/Stepper/Stepper.stories.tsx

@@ -67,4 +67,6 @@ Stepper.args = {
   list: stepperElements,
   showSteps: 6,
   activeStep: 3,
+  tooltipText: "Continue where you left",
+  tooltipLink: "/registration/form"
 }

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
@@ -59,78 +63,100 @@ export const StepperItem = ({
       setDone(false)
     }
   }, [index, activeStep])
-  const width = 100 / totalSteps
+
   return (
-    <Box
-      sx={{
-        width: `${width}%`,
-        margin: '0px',
-        borderBottom: `2px solid ${backgroundColor}`,
-        textAlign: 'center',
-      }}
-    >
-      <Box
+    <Box className="stepperStep">
+      <Box className="stepHead"
         sx={{
-          backgroundColor: `${backgroundColor}`,
-          borderRadius: `${text ? '20px' : '50%'}`,
-          margin: '12px auto 16px auto',
-          width: `${text ? 'auto' : '28px'}`,
-          height: `${text ? 'auto' : '28px'}`,
-          color: '#fff',
-          display: `${text ? 'inline-block' : 'flex'}`,
-          padding: '3px 15px',
-          justifyContent: 'center',
-          alignItems: 'center',
+          borderBottom: `2px solid ${backgroundColor}`,
         }}
       >
-        <Typography
-          variant="body1"
-          fontSize="14px"
-          color="#fff"
-          sx={{
-            margin: 'auto',
-            width: 'fit-content',
-          }}
-        >
-          {done &&
-            (text || (
-              <svg
-                width="14"
-                height="13"
-                viewBox="0 0 14 13"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
+        <Box className="hintStepMain">
+          <Box
+            className="stepIcon"
+            sx={{
+              margin: '12px 0 16px 0',
+            }}
+          >
+            <Typography
+              variant="body1"
+              fontSize="14px"
+              color="#fff"
+              sx={{
+                backgroundColor: `${backgroundColor}`,
+                borderRadius: `${text ? '20px' : '50%'}`,
+                margin: '0 auto',
+                width: `${text ? 'auto' : '28px'}`,
+                height: `${text ? 'auto' : '28px'}`,
+                color: '#fff',
+                display: `${text ? 'inline-block' : 'flex'}`,
+                padding: `${text ? '3px 15px' : '0'}`,
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              {done &&
+                (text || (
+                  <svg
+                    width="14"
+                    height="13"
+                    viewBox="0 0 14 13"
+                    fill="none"
+                    xmlns="http://www.w3.org/2000/svg"
+                  >
+                    <path
+                      fillRule="evenodd"
+                      clipRule="evenodd"
+                      d="M13.8078 1.24939L5.09535 12.1399L0.305542 7.15056L1.74832 5.7655L4.95851 9.10944L12.2461 0L13.8078 1.24939Z"
+                      fill="white"
+                    />
+                  </svg>
+                ))}
+              {!done && step}
+            </Typography>
+          </Box>
+          <Box className="hintStepMobile" >
+            {
+              index === activeStep &&
+              <Link
+                href={tooltipLink}
+                target="_blank"
+                sx={{
+                  color: '#111111 !important',
+                  display: 'flex',
+                  flexDirection: 'column',
+                  alignItems: 'center',
+                }}
               >
-                <path
-                  fillRule="evenodd"
-                  clipRule="evenodd"
-                  d="M13.8078 1.24939L5.09535 12.1399L0.305542 7.15056L1.74832 5.7655L4.95851 9.10944L12.2461 0L13.8078 1.24939Z"
-                  fill="white"
-                />
-              </svg>
-            ))}
-          {!done && step}
-        </Typography>
-      </Box>
-      <Box
-        sx={{
-          width: '95px',
-          margin: '0px auto 24px auto',
-          textAlign: 'center',
-        }}
-      >
-        <Typography
-          variant="label3"
-          fontSize="14px"
-          fontWeight="500"
-          sx={{
-            margin: 'auto',
-            height: 'fit-contetn',
-          }}
-        >
-          {headline}
-        </Typography>
+                <Typography
+                  variant="label3"
+                  fontSize="12px"
+                  sx={{
+                    paddingBottom: '5px',
+                    textAlign: 'center'
+                  }}
+                >
+                  {tooltipText}
+                </Typography>
+              </Link>
+            }
+          </Box>
+        </Box>
+
+        <Box className="stepHeadline">
+          <Typography
+            variant="label3"
+            fontSize="14px"
+            fontWeight="500"
+            sx={{
+              margin: 'auto',
+              height: 'fit-contetn',
+            }}
+          >
+            {headline}
+          </Typography>
+        </Box>
       </Box>
     </Box>
   )
-}
+}