@veracity/vui 2.5.0-beta.0 → 2.5.0

package/src/theme/components.ts

@@ -28,6 +28,7 @@ import Pagination from '../pagination/theme'
 import Panel from '../panel/theme'
 import Popover from '../popover/theme'
 import Progress from '../progress/theme'
+import ProgressCircular from '../progressCircular/theme'
 import Radio from '../radio/theme'
 import Select from '../select/theme'
 import Sidemenu from '../sidemenu/theme'
@@ -78,6 +79,7 @@ export default {
   Pagination,
   Panel,
   Progress,
+  ProgressCircular,
   Popover,
   Radio,
   Select,

package/src/tutorial/consts.ts

@@ -0,0 +1,5 @@
+export const tutorialColors = {
+  bg: 'darkBlue.main',
+  buttonColor: 'digiGreen.main',
+  color: 'white'
+}

package/src/tutorial/tutorial.tsx

@@ -8,16 +8,17 @@ import { useTutorial } from './useTutorial'
 
 /** [Beta] Popover Tutorial is used to display information about a new, or existing feature. */
 export function Tutorial({
+  actionLabel,
   children,
   className,
-  description,
+  onAction,
   onDismiss,
   onFinish,
-  readMoreLink,
   steps,
   title,
   id,
-  placement = 'right'
+  placement = 'right',
+  showSkipButton
 }: TutorialProps) {
   const { isVisible, setIsVisible, saveDisplayed } = useTutorial(id)
 
@@ -32,11 +33,12 @@ export function Tutorial({
     <Tippy
       content={
         <TutorialCard
+          actionLabel={actionLabel}
           className={cs('vui-tutorial', className)}
-          description={description}
+          onAction={onAction}
           onDismiss={() => onClose('dismissed')}
           onFinish={() => onClose('finished')}
-          readMoreLink={readMoreLink}
+          showSkipButton={showSkipButton}
           steps={steps}
           title={title}
         />

package/src/tutorial/tutorial.types.ts

@@ -4,50 +4,58 @@ import { Placement } from 'tippy.js'
 export type TutorialDataStep = {
   /** title of step */
   title: string
-  /** description of step */
-  description: string
-  /** Read more link */
+  /** Content */
+  content?: string
+  /** Link to page where they can read more */
   readMoreLink?: string
 }
 
 export type TutorialProps = {
+  /** Label for the action button @default `Action` */
+  actionLabel?: string
   /** Target element for the tutorial */
   children: React.ReactNode
   /** Custom class name */
   className?: string
   /** An id for further handling with localStorage */
   id: string
-  /** A general tutorial description */
-  description?: string
+  /** Invoked once the action button clicked. */
+  onAction?: () => void
   /** Invoked once the dismiss button clicked. */
   onDismiss?: () => void
   /** Invoked once the finish button clicked. */
   onFinish?: () => void
   /** Popover placement */
   placement?: Placement
-  /** Link to page where user can read more */
-  readMoreLink?: string
   /** An array of steps */
   steps: TutorialDataStep[]
-  /** A general tutorial title */
+  /** Show the Skip button */
+  showSkipButton?: boolean
+  /** General tutorial title */
   title: string
+  /** Link to page where they can read more */
+  readMoreLink?: string
 }
 
 export type TutorialCardProps = {
+  /** Label for the action button @default `Action` */
+  actionLabel?: string
   /** Custom class name */
   className?: string
   /** The card title */
   title: string
   /** Steps of the card */
   steps: TutorialDataStep[]
+  /** Invoked once the action button clicked. */
+  onAction?: () => void
   /** Callback for the dismiss button click. */
   onDismiss?: () => void
   /** Callback for the finish button click. */
   onFinish?: () => void
-  /** Description of feature */
-  description?: string
   /** Link to page where they can read more */
   readMoreLink?: string
+  /** Show the Skip button */
+  showSkipButton?: boolean
 }
 
 export type TutorialStepProps = {
@@ -55,8 +63,8 @@ export type TutorialStepProps = {
   active: boolean
   /** Title of step */
   title: string
-  /** Description of step */
-  description: string
+  /** Step content */
+  content?: string
   /** Link to page where user can read more */
   readMoreLink?: string
 }

package/src/tutorial/tutorialCard.tsx

@@ -1,19 +1,21 @@
 import React, { useEffect, useState } from 'react'
 
-import { Box, Button, Card, H3, Icon, T } from '../index'
+import { Box, Button, Card, H4, Icon } from '../index'
+import { tutorialColors } from './consts'
 import { TutorialCardProps, TutorialDataStep, TutorialStepWrapper } from './tutorial.types'
 import { TutorialStep } from './tutorialStep'
 
 export function TutorialCard({
+  actionLabel = 'Action',
   className,
-  description,
   title,
   readMoreLink,
   steps: propsSteps = [],
+  showSkipButton,
+  onAction,
   onDismiss,
   onFinish
 }: TutorialCardProps) {
-  const [started, setStarted] = useState<boolean>(false)
   const [steps, setSteps] = useState<TutorialStepWrapper[]>([])
   const [activeStep, setActiveStep] = useState<number>(0)
 
@@ -23,7 +25,7 @@ export function TutorialCard({
 
       const finalStep: TutorialDataStep = {
         title: `Completed!`,
-        description: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`
+        content: `${readMoreLink ? 'To learn more, please visit:' : 'Thank you!'}`
       }
 
       if (readMoreLink) finalStep.readMoreLink = readMoreLink
@@ -34,109 +36,98 @@ export function TutorialCard({
 
   const isStartStep = activeStep === 0
   const isFinalStep = activeStep === propsSteps.length
-  const decrementStep = () => setActiveStep(activeStep - 1)
-  const incrementStep = () => setActiveStep(activeStep + 1)
 
   return (
-    <Card bg="blue.100" className={className} color="white" column justifyContent="space-between" minH={200} w={450}>
+    <Card
+      bg={tutorialColors.bg}
+      className={className}
+      color={tutorialColors.color}
+      column
+      justifyContent="space-between"
+      minH={400}
+      p={2}
+      pt={1}
+      w={580}
+    >
       <Box
         alignContent="center"
         alignItems="center"
-        display="flex"
         flex={0}
         flexDirection="row"
         flexGrow={0}
         justifyContent="space-between"
-        m={2}
-        mb={1}
-        minH="48px"
+        minH={48}
         row
         style={{ WebkitFlexGrow: '0' }}
       >
-        <H3>{title}</H3>
-        {!isFinalStep && (
-          <Button
-            color="white"
-            hoverColor="prussian.80"
-            icon="falTimes"
-            onClick={onDismiss}
-            scale={2}
-            variant="tertiaryDark"
-          />
-        )}
-      </Box>
-      <Box column flex={5} hidden={started} mx={2}>
-        <T flexGrow={1}>{description}</T>
-        <Box alignItems="center" flexDirection="row-reverse" row>
-          <Button bg="white" color="prussian.80" float="right" mb={0} onClick={() => setStarted(true)} pb={0}>
-            Let&apos;s get started!
-          </Button>
-        </Box>
+        <H4 color={tutorialColors.color}>{title}</H4>
+        {!isFinalStep && <Button icon="falTimes" onClick={onDismiss} scale={2} variant="tertiaryLight" />}
       </Box>
-      <Box flex={5} hidden={!started} mx={2} row>
+      <Box flex={5} row>
         {steps?.map?.(s => (
           <TutorialStep
             active={s.key === activeStep}
-            description={s.step.description}
+            content={s.step.content}
             key={s.step.title}
             readMoreLink={s.step.readMoreLink}
             title={s.step.title}
           />
         ))}
       </Box>
-      <Box
-        alignItems="center"
-        flex={0}
-        flexGrow={0}
-        hidden={!started}
-        justifyContent="space-between"
-        m={2}
-        mt={0}
-        row
-        style={{ WebkitFlexGrow: '0' }}
-      >
-        <Button
-          color="white"
-          disabled={isStartStep}
-          disabledBg="blue.100"
-          disabledBorderColor="blue.100"
-          disabledColor="prussian.80"
-          focusBorderColor="none"
-          hoverBg="none"
-          hoverBorder="none"
-          hoverBorderColor="blue.100"
-          icon="falArrowLeft"
-          onClick={decrementStep}
-          scale={2}
-          transition="none"
-          variant="tertiaryDark"
-          w="80"
-        />
-
-        <Box className="vuiTutorialStepDots">
-          {steps?.map?.(s => (
-            <Icon color={s.key === activeStep ? 'white' : 'grey.70'} key={s.key} name="cusDotFull" />
-          ))}
-        </Box>
-
-        {isFinalStep ? (
-          <Button bg="white" color="prussian.80" hoverBg="blue.30" hoverColor="prussian.80" onClick={onFinish}>
-            Finish
-          </Button>
-        ) : (
+      <Box alignItems="center" justifyContent="space-between" mt={0}>
+        <Box alignItems="center" justifyContent="space-between" w="-webkit-fill-available">
           <Button
-            color="white"
-            focusBorderColor="none"
-            hoverBg="none"
-            hoverBorder="none"
-            hoverBorderColor="blue.100"
+            color={tutorialColors.buttonColor}
+            disabled={isStartStep}
+            icon="falArrowLeft"
+            onClick={() => setActiveStep(activeStep - 1)}
+            scale={2}
+            transition="none"
+            variant="tertiaryLight"
+            w="34"
+          />
+          <Box className="vuiTutorialStepDots">
+            {steps?.map?.(s => (
+              <Icon
+                color={s.key === activeStep ? tutorialColors.color : 'darkBlue.30'}
+                cursor="pointer"
+                hoverColor={tutorialColors.buttonColor}
+                key={s.key}
+                name="cusDotFull"
+                onClick={() => setActiveStep(s.key)}
+              />
+            ))}
+          </Box>
+          <Button
+            color={tutorialColors.buttonColor}
+            disabled={isFinalStep}
             icon="falArrowRight"
-            onClick={incrementStep}
+            onClick={() => setActiveStep(activeStep + 1)}
             scale={2}
             transition="none"
-            variant="tertiaryDark"
-            w="80"
+            variant="tertiaryLight"
+            w="34"
           />
+        </Box>
+        {(showSkipButton || isFinalStep || !!onAction) && (
+          <Box alignItems="center" justifyContent="space-between">
+            {showSkipButton && !isFinalStep && (
+              <Button mr={2} onClick={onDismiss} variant="primaryLight">
+                Skip
+              </Button>
+            )}
+            {isFinalStep && (
+              <Button mr={2} onClick={onFinish} variant="primaryLight">
+                Finish
+              </Button>
+            )}
+            {!!onAction && (
+              <Button mr={6} onClick={onAction} variant="primaryLight">
+                {actionLabel}
+                {onAction}
+              </Button>
+            )}
+          </Box>
         )}
       </Box>
     </Card>

package/src/tutorial/tutorialStep.tsx

@@ -1,20 +1,14 @@
 import React from 'react'
 
-import { H5, P, v } from '../index'
+import { Box, H5, v } from '../index'
+import { tutorialColors } from './consts'
 import { TutorialStepProps } from './tutorial.types'
 
-export const TutorialStep = ({ active, description, readMoreLink, title }: TutorialStepProps) => (
+export const TutorialStep = ({ active, content, title }: TutorialStepProps) => (
   <v.div className="vui-tutorialStep" hidden={!active} pb={2}>
-    <H5 fontWeight="medium" mb={1}>
+    <H5 color={tutorialColors.color} fontWeight="medium" mb={1}>
       {title}
     </H5>
-    <P>{description}</P>
-    {!!readMoreLink && (
-      <P>
-        <v.a href={readMoreLink} textDecoration="underline">
-          {readMoreLink}
-        </v.a>
-      </P>
-    )}
+    <Box>{content}</Box>
   </v.div>
 )

package/dist/cjs/textarea/consts.d.ts

@@ -1,4 +0,0 @@
-export declare const greyLightColor = "grey.10";
-export declare const greyColor = "grey.80";
-export declare const redColor = "red.80";
-//# sourceMappingURL=consts.d.ts.map

package/dist/cjs/textarea/consts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/textarea/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,YAAY,CAAA;AACvC,eAAO,MAAM,SAAS,YAAY,CAAA;AAClC,eAAO,MAAM,QAAQ,WAAW,CAAA"}

package/dist/cjs/textarea/consts.js

@@ -1,6 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.redColor = exports.greyColor = exports.greyLightColor = void 0;
-exports.greyLightColor = 'grey.10';
-exports.greyColor = 'grey.80';
-exports.redColor = 'red.80';

package/dist/esm/textarea/consts.d.ts

@@ -1,4 +0,0 @@
-export declare const greyLightColor = "grey.10";
-export declare const greyColor = "grey.80";
-export declare const redColor = "red.80";
-//# sourceMappingURL=consts.d.ts.map

package/dist/esm/textarea/consts.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"consts.d.ts","sourceRoot":"","sources":["../../../src/textarea/consts.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,cAAc,YAAY,CAAA;AACvC,eAAO,MAAM,SAAS,YAAY,CAAA;AAClC,eAAO,MAAM,QAAQ,WAAW,CAAA"}

package/dist/esm/textarea/consts.js

@@ -1,3 +0,0 @@
-export const greyLightColor = 'grey.10';
-export const greyColor = 'grey.80';
-export const redColor = 'red.80';

package/src/textarea/consts.ts

@@ -1,3 +0,0 @@
-export const greyLightColor = 'grey.10'
-export const greyColor = 'grey.80'
-export const redColor = 'red.80'