@veracity/vui 2.30.0 → 2.30.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.30.0",
+  "version": "2.30.1-beta.1",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",
@@ -54,4 +54,4 @@
     "dist",
     "src"
   ]
-}
+}

package/src/sidemenuV2/theme.ts

@@ -1,5 +1,3 @@
-import { colors } from '../theme'
-
 const baseStyle = {
   container: {
     display: 'flex',
@@ -85,10 +83,10 @@ const variants = {
     },
     toggleButton: {
       variant: 'tertiaryDark',
-      hoverBg: colors.sandstone[95],
+      hoverBg: 'sandstone.95',
     },
     item: {
-      color: colors.darkBlue.main,
+      color: 'darkBlue.main',
     },
   },
   dark: {

package/src/tutorial/index.ts

@@ -2,4 +2,3 @@ export * from './tutorial'
 export type * from './tutorial.types'
 export * from './tutorialCard'
 export * from './tutorialStep'
-export * from './useTutorial'

package/src/tutorial/tutorial.tsx

@@ -4,7 +4,6 @@ import type { JSXElementConstructor, ReactElement } from 'react'
 import { cs } from '../utils'
 import type { CloseEvent, TutorialProps } from './tutorial.types'
 import { TutorialCard } from './tutorialCard'
-import { useTutorial } from './useTutorial'
 
 /** Popover Tutorial is used to display information about a new, or existing feature. */
 export function Tutorial({
@@ -16,17 +15,15 @@ export function Tutorial({
   onFinish,
   steps,
   title,
-  id,
   placement = 'right',
   showSkipButton,
+  isVisible = true,
+  includeFinalPage = true,
+  useContentTitle = false,
 }: TutorialProps) {
-  const { isVisible, setIsVisible, saveDisplayed } = useTutorial(id)
-
   const onClose = (e: CloseEvent) => {
-    setIsVisible(false)
     if (e === 'dismissed') onDismiss?.()
     if (e === 'finished') onFinish?.()
-    saveDisplayed(e)
   }
 
   return (
@@ -41,6 +38,8 @@ export function Tutorial({
           showSkipButton={showSkipButton}
           steps={steps}
           title={title}
+          includeFinalPage={includeFinalPage}
+          useContentTitle={useContentTitle}
         />
       }
       interactive

package/src/tutorial/tutorial.types.ts

@@ -5,7 +5,7 @@ export type TutorialDataStep = {
   /** title of step */
   title: string
   /** Content */
-  content?: string
+  content?: string | React.ReactNode
   /** Link to page where they can read more */
   readMoreLink?: string
 }
@@ -35,6 +35,12 @@ export type TutorialProps = {
   title: string
   /** Link to page where they can read more */
   readMoreLink?: string
+  /** Decides if should show or hide tooltip  */
+  isVisible?: boolean
+  /** Should include last thank you page  */
+  includeFinalPage?: boolean
+  /** Should use dynamic header based on content  */
+  useContentTitle?: boolean
 }
 
 export type TutorialCardProps = {
@@ -56,6 +62,10 @@ export type TutorialCardProps = {
   readMoreLink?: string
   /** Show the Skip button */
   showSkipButton?: boolean
+  /** Include the final page */
+  includeFinalPage?: boolean
+  /** Should use dynamic header based on content  */
+  useContentTitle?: boolean
 }
 
 export type TutorialStepProps = {
@@ -64,9 +74,11 @@ export type TutorialStepProps = {
   /** Title of step */
   title: string
   /** Step content */
-  content?: string
+  content?: string | React.ReactNode
   /** Link to page where user can read more */
   readMoreLink?: string
+  /** Should use dynamic header based on content  */
+  useContentTitle?: boolean
 }
 
 export type TutorialStepWrapper = {

package/src/tutorial/tutorialCard.tsx

@@ -15,6 +15,8 @@ export function TutorialCard({
   onAction,
   onDismiss,
   onFinish,
+  includeFinalPage,
+  useContentTitle,
 }: TutorialCardProps) {
   const [steps, setSteps] = useState<TutorialStepWrapper[]>([])
   const [activeStep, setActiveStep] = useState<number>(0)
@@ -30,12 +32,12 @@ export function TutorialCard({
 
       if (readMoreLink) finalStep.readMoreLink = readMoreLink
 
-      setSteps([...s, { step: finalStep, key: propsSteps.length }])
+      includeFinalPage ? setSteps([...s, { step: finalStep, key: propsSteps.length }]) : setSteps([...s])
     }
   }, [title, propsSteps])
 
   const isStartStep = activeStep === 0
-  const isFinalStep = activeStep === propsSteps.length
+  const isFinalStep = includeFinalPage ? activeStep === propsSteps.length : activeStep === propsSteps.length - 1
 
   return (
     <Card
@@ -60,7 +62,7 @@ export function TutorialCard({
         row
         style={{ WebkitFlexGrow: '0' }}
       >
-        <H4 color={tutorialColors.color}>{title}</H4>
+        <H4 color={tutorialColors.color}>{useContentTitle ? steps[activeStep]?.step?.title : title}</H4>
         {!isFinalStep && (
           <Button aria-label="close" icon="uiTimes" onClick={onDismiss} scale={2} variant="tertiaryLight" />
         )}
@@ -73,6 +75,7 @@ export function TutorialCard({
             key={s.step.title}
             readMoreLink={s.step.readMoreLink}
             title={s.step.title}
+            useContentTitle={useContentTitle}
           />
         ))}
       </Box>
@@ -116,17 +119,17 @@ export function TutorialCard({
         {(showSkipButton || isFinalStep || !!onAction) && (
           <Box alignItems="center" justifyContent="space-between">
             {showSkipButton && !isFinalStep && (
-              <Button mr={2} onClick={onDismiss} variant="primaryLight">
+              <Button mx={1} onClick={onDismiss} variant="secondaryLight">
                 Skip
               </Button>
             )}
             {isFinalStep && (
-              <Button mr={2} onClick={onFinish} variant="primaryLight">
-                Finish
+              <Button mx={1} onClick={onFinish} variant="primaryLight">
+                I got it
               </Button>
             )}
             {!!onAction && (
-              <Button mr={9} onClick={onAction} variant="primaryLight">
+              <Button ml={1} mr={showSkipButton || isFinalStep ? 12 : 2} onClick={onAction} variant="primaryLight">
                 {actionLabel}
               </Button>
             )}

package/src/tutorial/tutorialStep.tsx

@@ -2,11 +2,13 @@ import { Box, H5, v } from '../index'
 import { tutorialColors } from './consts'
 import type { TutorialStepProps } from './tutorial.types'
 
-export const TutorialStep = ({ active, content, title }: TutorialStepProps) => (
+export const TutorialStep = ({ active, content, title, useContentTitle }: TutorialStepProps) => (
   <v.div className="vui-tutorialStep" hidden={!active} pb={2}>
-    <H5 color={tutorialColors.color} fontWeight="medium" mb={1}>
-      {title}
-    </H5>
+    {!useContentTitle && (
+      <H5 color={tutorialColors.color} fontWeight="medium" mb={1}>
+        {title}
+      </H5>
+    )}
     <Box>{content}</Box>
   </v.div>
 )

package/dist/cjs/tutorial/useTutorial.d.ts

@@ -1,7 +0,0 @@
-import type { CloseEvent } from './tutorial.types';
-export declare const useTutorial: (tutorialId: string) => {
-    isVisible: boolean;
-    setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    saveDisplayed: (e: CloseEvent) => void;
-};
-//# sourceMappingURL=useTutorial.d.ts.map

package/dist/cjs/tutorial/useTutorial.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/useTutorial.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,eAAO,MAAM,WAAW,GAAI,YAAY,MAAM;;;uBAQlB,UAAU;CAGrC,CAAA"}

package/dist/cjs/tutorial/useTutorial.js

@@ -1,15 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useTutorial = void 0;
-const react_1 = require("react");
-const useTutorial = (tutorialId) => {
-    const [isVisible, setIsVisible] = (0, react_1.useState)(false);
-    const localStorageId = `vuiTutorial-${tutorialId}`;
-    (0, react_1.useEffect)(() => {
-        setIsVisible(!window.localStorage.getItem(localStorageId));
-    }, []);
-    const saveDisplayed = (e) => window.localStorage.setItem(localStorageId, e);
-    return { isVisible, setIsVisible, saveDisplayed };
-};
-exports.useTutorial = useTutorial;
-//# sourceMappingURL=useTutorial.js.map

package/dist/cjs/tutorial/useTutorial.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTutorial.js","sourceRoot":"","sources":["../../../src/tutorial/useTutorial.ts"],"names":[],"mappings":";;;AAAA,iCAA2C;AAIpC,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,EAAE;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,IAAA,gBAAQ,EAAU,KAAK,CAAC,CAAA;IAC1D,MAAM,cAAc,GAAG,eAAe,UAAU,EAAE,CAAA;IAElD,IAAA,iBAAS,EAAC,GAAG,EAAE;QACb,YAAY,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAA;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;IAEvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,CAAA;AACnD,CAAC,CAAA;AAXY,QAAA,WAAW,eAWvB"}

package/dist/esm/tutorial/useTutorial.d.ts

@@ -1,7 +0,0 @@
-import type { CloseEvent } from './tutorial.types';
-export declare const useTutorial: (tutorialId: string) => {
-    isVisible: boolean;
-    setIsVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
-    saveDisplayed: (e: CloseEvent) => void;
-};
-//# sourceMappingURL=useTutorial.d.ts.map

package/dist/esm/tutorial/useTutorial.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTutorial.d.ts","sourceRoot":"","sources":["../../../src/tutorial/useTutorial.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAElD,eAAO,MAAM,WAAW,GAAI,YAAY,MAAM;;;uBAQlB,UAAU;CAGrC,CAAA"}

package/dist/esm/tutorial/useTutorial.js

@@ -1,11 +0,0 @@
-import { useEffect, useState } from 'react';
-export const useTutorial = (tutorialId) => {
-    const [isVisible, setIsVisible] = useState(false);
-    const localStorageId = `vuiTutorial-${tutorialId}`;
-    useEffect(() => {
-        setIsVisible(!window.localStorage.getItem(localStorageId));
-    }, []);
-    const saveDisplayed = (e) => window.localStorage.setItem(localStorageId, e);
-    return { isVisible, setIsVisible, saveDisplayed };
-};
-//# sourceMappingURL=useTutorial.js.map

package/dist/esm/tutorial/useTutorial.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"useTutorial.js","sourceRoot":"","sources":["../../../src/tutorial/useTutorial.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAI3C,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,UAAkB,EAAE,EAAE;IAChD,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAA;IAC1D,MAAM,cAAc,GAAG,eAAe,UAAU,EAAE,CAAA;IAElD,SAAS,CAAC,GAAG,EAAE;QACb,YAAY,CAAC,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,CAAC,CAAC,CAAA;IAC5D,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,MAAM,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE,CAAC,MAAM,CAAC,YAAY,CAAC,OAAO,CAAC,cAAc,EAAE,CAAC,CAAC,CAAA;IAEvF,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,CAAA;AACnD,CAAC,CAAA"}

package/src/tutorial/useTutorial.ts

@@ -1,16 +0,0 @@
-import { useEffect, useState } from 'react'
-
-import type { CloseEvent } from './tutorial.types'
-
-export const useTutorial = (tutorialId: string) => {
-  const [isVisible, setIsVisible] = useState<boolean>(false)
-  const localStorageId = `vuiTutorial-${tutorialId}`
-
-  useEffect(() => {
-    setIsVisible(!window.localStorage.getItem(localStorageId))
-  }, [])
-
-  const saveDisplayed = (e: CloseEvent) => window.localStorage.setItem(localStorageId, e)
-
-  return { isVisible, setIsVisible, saveDisplayed }
-}