@rpg-engine/long-bow 0.6.11 → 0.6.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rpg-engine/long-bow",
-  "version": "0.6.11",
+  "version": "0.6.13",
   "license": "MIT",
   "main": "dist/index.js",
   "typings": "dist/index.d.ts",

package/src/components/Tutorial/TutorialStepper.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled from 'styled-components';
+import styled, { CSSProperties } from 'styled-components';
 import { Stepper } from '../Stepper';
 import { DynamicText } from '../typography/DynamicText';
 
@@ -8,6 +8,7 @@ export interface ITutorialLesson {
   body?: React.ReactNode | string;
   text?: string;
   image: string;
+  imageStyle?: CSSProperties;
 }
 
 export interface ITutorialStepperProps {
@@ -22,16 +23,18 @@ export const TutorialStepper = ({
   const generateLessons = () => {
     return lessons.map((lesson, index) => ({
       component: (
-        <div>
-          <h1>{lesson.title}</h1>
+        <LessonContainer key={index} className="lesson-container">
+          <LessonTitle className="lesson-title">{lesson.title}</LessonTitle>
           {lesson.image && (
-            <LessonImage>
+            <LessonImage className="lesson-image" style={lesson.imageStyle}>
               <img src={lesson.image} alt={lesson.title} />
             </LessonImage>
           )}
-          {lesson.body && <LessonBody>{lesson.body}</LessonBody>}
+          {lesson.body && (
+            <LessonBody className="lesson-body">{lesson.body}</LessonBody>
+          )}
           {lesson.text && <DynamicText text={lesson.text} />}
-        </div>
+        </LessonContainer>
       ),
       id: index,
     }));
@@ -75,3 +78,7 @@ const LessonImage = styled.div`
     border-radius: 10px;
   }
 `;
+
+const LessonTitle = styled.h1``;
+
+const LessonContainer = styled.div``;