Merge pull request #41 from equinor/fix/tutorial-custom-content-width

Fix/tutorial custom content width
equinor · Oct 25, 2024 · 78f736d · 78f736d
2 parents d53af25 + 71470d1
commit 78f736d
Show file tree

Hide file tree

Showing 6 changed files with 19 additions and 8 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@equinor/subsurface-app-management",
-  "version": "1.1.17",
+  "version": "1.1.18",
   "description": "React Typescript components/hooks to communicate with equinor/sam",
   "types": "dist/index.d.ts",
   "type": "module",

diff --git a/src/providers/TutorialProvider/TutorialDialog.tsx b/src/providers/TutorialProvider/TutorialDialog.tsx
@@ -1,6 +1,6 @@
 import { CSSProperties, FC, useMemo } from 'react';
 
-import { Button, Typography } from '@equinor/eds-core-react';
+import { Button } from '@equinor/eds-core-react';
 
 import {
   DIALOG_EDGE_MARGIN,
@@ -11,6 +11,7 @@ import {
   DialogActions,
   DialogContent,
   DialogImage,
+  DialogTypography,
   DialogWrapper,
   NavigateSteps,
   StyledTutorialDialog,
@@ -50,8 +51,12 @@ const TutorialDialog: FC = () => {
     ) {
       return (
         <>
-          <Typography>{currentStepObject.title}</Typography>
-          <Typography>{currentStepObject.body}</Typography>
+          <DialogTypography variant="h5">
+            {currentStepObject.title}
+          </DialogTypography>
+          <DialogTypography group="paragraph" variant="body_short">
+            {currentStepObject.body}
+          </DialogTypography>
           {currentStepObject.imgUrl && sasToken && (
             <DialogImage
               data-testid="tutorial-image"

diff --git a/src/providers/TutorialProvider/TutorialProvider.stories.tsx b/src/providers/TutorialProvider/TutorialProvider.stories.tsx
@@ -28,6 +28,7 @@ const CustomComponentWrapper = styled.div`
   display: grid;
   grid-template-columns: 24px 1fr;
   gap: 24px;
+  width: 500px;
 `;
 
 const SmallOrangeLine = styled.div`

diff --git a/src/providers/TutorialProvider/TutorialProvider.styles.ts b/src/providers/TutorialProvider/TutorialProvider.styles.ts
@@ -1,4 +1,4 @@
-import { Dialog } from '@equinor/eds-core-react';
+import { Dialog, Typography } from '@equinor/eds-core-react';
 import { tokens } from '@equinor/eds-tokens';
 
 import styled, { keyframes } from 'styled-components';
@@ -58,12 +58,17 @@ export const DialogContent = styled.div`
   display: flex;
   flex-direction: column;
   gap: ${spacings.comfortable.large};
+  width: fit-content;
+`;
+
+export const DialogTypography = styled(Typography)`
   width: 300px;
 `;
 
 export const DialogImage = styled.img`
   max-height: 300px;
   min-height: 50px;
+  max-width: 300px;
   object-fit: contain;
 `;
 

diff --git a/src/providers/TutorialProvider/TutorialProviderInner.tsx b/src/providers/TutorialProvider/TutorialProviderInner.tsx
@@ -73,7 +73,7 @@ const TutorialProviderInner: FC = () => {
   }, [activeTutorial, allElementsToHighlight, currentStep, viewportWidth]);
 
   const tutorialsForPath = useMemo(() => {
-    return appTutorials.filter((item) => item.path === pathname);
+    return appTutorials.filter((item) => pathname.includes(item.path));
   }, [appTutorials, pathname]);
 
   const runTutorial = useCallback(