@strapi/admin 5.22.0 → 5.23.1

package/dist/admin/admin/src/components/GuidedTour/{Step.js → Steps/Step.js}

@@ -6,8 +6,9 @@ var designSystem = require('@strapi/design-system');
 var reactIntl = require('react-intl');
 var reactRouterDom = require('react-router-dom');
 var styled = require('styled-components');
-var Tracking = require('../../features/Tracking.js');
-var Context = require('./Context.js');
+var Tracking = require('../../../features/Tracking.js');
+var Context = require('../Context.js');
+var Tours = require('../Tours.js');
 
 function _interopNamespaceDefault(e) {
   var n = Object.create(null);
@@ -28,21 +29,12 @@ function _interopNamespaceDefault(e) {
 
 var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
 
-const ActionsContainer = styled.styled(designSystem.Flex)`
-  border-top: ${({ theme })=>`1px solid ${theme.colors.neutral150}`};
-`;
-/**
- * TODO:
- * We should probably move all arrow styles + svg to the DS
- */ const PopoverArrow = styled.styled(designSystem.Popover.Arrow)`
-  fill: ${({ theme })=>theme.colors.neutral0};
-  transform: translateY(-16px) rotate(-90deg);
-`;
-const StepCount = ({ tourName })=>{
+/* -------------------------------------------------------------------------------------------------
+ * Common Step Components
+ * -----------------------------------------------------------------------------------------------*/ const StepCount = ({ tourName, displayedCurrentStep, displayedTourLength })=>{
     const state = Context.useGuidedTour('GuidedTourPopover', (s)=>s.state);
-    const currentStep = state.tours[tourName].currentStep + 1;
-    // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
-    const displayedLength = state.tours[tourName].length - 1;
+    const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;
+    const displayedStepCount = displayedTourLength ?? Tours.tours[tourName]._meta.displayedStepCount;
     return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
         variant: "omega",
         fontSize: "12px",
@@ -51,11 +43,107 @@ const StepCount = ({ tourName })=>{
             defaultMessage: "Step {currentStep} of {tourLength}",
             values: {
                 currentStep,
-                tourLength: displayedLength
+                tourLength: displayedStepCount
             }
         })
     });
 };
+const GotItAction = ({ onClick })=>{
+    return /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+        onClick: onClick,
+        children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
+            id: "tours.gotIt",
+            defaultMessage: "Got it"
+        })
+    });
+};
+const DefaultActions = ({ showSkip, showPrevious, to, tourName, onNextStep, onPreviousStep })=>{
+    const { trackUsage } = Tracking.useTracking();
+    const dispatch = Context.useGuidedTour('GuidedTourPopover', (s)=>s.dispatch);
+    const state = Context.useGuidedTour('GuidedTourPopover', (s)=>s.state);
+    const currentStep = state.tours[tourName].currentStep + 1;
+    const actualTourLength = Tours.tours[tourName]._meta.totalStepCount;
+    const handleSkip = ()=>{
+        trackUsage('didSkipGuidedTour', {
+            name: tourName
+        });
+        dispatch({
+            type: 'skip_tour',
+            payload: tourName
+        });
+    };
+    const handleNextStep = ()=>{
+        if (currentStep === actualTourLength) {
+            trackUsage('didCompleteGuidedTour', {
+                name: tourName
+            });
+        }
+        if (onNextStep) {
+            onNextStep();
+        } else {
+            dispatch({
+                type: 'next_step',
+                payload: tourName
+            });
+        }
+    };
+    const handlePreviousStep = ()=>{
+        if (onPreviousStep) {
+            onPreviousStep();
+        } else {
+            dispatch({
+                type: 'previous_step',
+                payload: tourName
+            });
+        }
+    };
+    return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
+        gap: 2,
+        children: [
+            showSkip && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                variant: "tertiary",
+                onClick: handleSkip,
+                children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
+                    id: "tours.skip",
+                    defaultMessage: "Skip"
+                })
+            }),
+            !showSkip && showPrevious && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                variant: "tertiary",
+                onClick: handlePreviousStep,
+                children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
+                    id: "tours.previous",
+                    defaultMessage: "Previous"
+                })
+            }),
+            to ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.LinkButton, {
+                tag: reactRouterDom.NavLink,
+                to: to,
+                onClick: handleNextStep,
+                children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
+                    id: "tours.next",
+                    defaultMessage: "Next"
+                })
+            }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
+                onClick: handleNextStep,
+                children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
+                    id: "tours.next",
+                    defaultMessage: "Next"
+                })
+            })
+        ]
+    });
+};
+const ActionsContainer = styled.styled(designSystem.Flex)`
+  border-top: ${({ theme })=>`1px solid ${theme.colors.neutral150}`};
+`;
+/**
+ * TODO:
+ * We should probably move all arrow styles + svg to the DS
+ */ const PopoverArrow = styled.styled(designSystem.Popover.Arrow)`
+  fill: ${({ theme })=>theme.colors.neutral0};
+  transform: translateY(-16px) rotate(-90deg);
+`;
 const createStepComponents = (tourName)=>({
         Root: /*#__PURE__*/ React__namespace.forwardRef(({ withArrow = true, ...props }, ref)=>{
             return /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Popover.Content, {
@@ -66,6 +154,7 @@ const createStepComponents = (tourName)=>({
                 style: {
                     border: 'none'
                 },
+                onClick: (e)=>e.stopPropagation(),
                 ...props,
                 children: [
                     withArrow && /*#__PURE__*/ jsxRuntime.jsx(PopoverArrow, {
@@ -119,36 +208,12 @@ const createStepComponents = (tourName)=>({
                     variant: "omega",
                     children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
                         id: props.id,
-                        defaultMessage: props.defaultMessage
+                        defaultMessage: props.defaultMessage,
+                        values: props.values
                     })
                 })
             }),
-        Actions: ({ showStepCount = true, showSkip = false, to, children, ...flexProps })=>{
-            const { trackUsage } = Tracking.useTracking();
-            const dispatch = Context.useGuidedTour('GuidedTourPopover', (s)=>s.dispatch);
-            const state = Context.useGuidedTour('GuidedTourPopover', (s)=>s.state);
-            const currentStep = state.tours[tourName].currentStep + 1;
-            const actualTourLength = state.tours[tourName].length;
-            const handleSkipAction = ()=>{
-                trackUsage('didSkipGuidedTour', {
-                    name: tourName
-                });
-                dispatch({
-                    type: 'skip_tour',
-                    payload: tourName
-                });
-            };
-            const handleNextStep = ()=>{
-                if (currentStep === actualTourLength) {
-                    trackUsage('didCompleteGuidedTour', {
-                        name: tourName
-                    });
-                }
-                dispatch({
-                    type: 'next_step',
-                    payload: tourName
-                });
-            };
+        Actions: ({ showStepCount = true, showPrevious = true, showSkip = false, to, children, ...flexProps })=>{
             return /*#__PURE__*/ jsxRuntime.jsx(ActionsContainer, {
                 width: "100%",
                 padding: 3,
@@ -160,33 +225,11 @@ const createStepComponents = (tourName)=>({
                         showStepCount && /*#__PURE__*/ jsxRuntime.jsx(StepCount, {
                             tourName: tourName
                         }),
-                        /*#__PURE__*/ jsxRuntime.jsxs(designSystem.Flex, {
-                            gap: 2,
-                            children: [
-                                showSkip && /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                                    variant: "tertiary",
-                                    onClick: handleSkipAction,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
-                                        id: "tours.skip",
-                                        defaultMessage: "Skip"
-                                    })
-                                }),
-                                to ? /*#__PURE__*/ jsxRuntime.jsx(designSystem.LinkButton, {
-                                    tag: reactRouterDom.NavLink,
-                                    to: to,
-                                    onClick: handleNextStep,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
-                                        id: "tours.next",
-                                        defaultMessage: "Next"
-                                    })
-                                }) : /*#__PURE__*/ jsxRuntime.jsx(designSystem.Button, {
-                                    onClick: handleNextStep,
-                                    children: /*#__PURE__*/ jsxRuntime.jsx(reactIntl.FormattedMessage, {
-                                        id: "tours.next",
-                                        defaultMessage: "Next"
-                                    })
-                                })
-                            ]
+                        /*#__PURE__*/ jsxRuntime.jsx(DefaultActions, {
+                            tourName: tourName,
+                            showSkip: showSkip,
+                            showPrevious: !showSkip && showPrevious,
+                            to: to
                         })
                     ]
                 })
@@ -194,6 +237,8 @@ const createStepComponents = (tourName)=>({
         }
     });
 
+exports.DefaultActions = DefaultActions;
+exports.GotItAction = GotItAction;
 exports.StepCount = StepCount;
 exports.createStepComponents = createStepComponents;
 //# sourceMappingURL=Step.js.map

package/dist/admin/admin/src/components/GuidedTour/Steps/Step.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.js","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Popover,\n  Box,\n  Flex,\n  Button,\n  Typography,\n  LinkButton,\n  FlexProps,\n} from '@strapi/design-system';\nimport { FormattedMessage, type MessageDescriptor } from 'react-intl';\nimport { To, NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../../features/Tracking';\nimport { useGuidedTour, type ValidTourName } from '../Context';\nimport { tours } from '../Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * Common Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst StepCount = ({\n  tourName,\n  displayedCurrentStep,\n  displayedTourLength,\n}: {\n  tourName: ValidTourName;\n  displayedCurrentStep?: number;\n  displayedTourLength?: number;\n}) => {\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;\n  const displayedStepCount = displayedTourLength ?? tours[tourName]._meta.displayedStepCount;\n\n  return (\n    <Typography variant=\"omega\" fontSize=\"12px\">\n      <FormattedMessage\n        id=\"tours.stepCount\"\n        defaultMessage=\"Step {currentStep} of {tourLength}\"\n        values={{ currentStep, tourLength: displayedStepCount }}\n      />\n    </Typography>\n  );\n};\n\nconst GotItAction = ({ onClick }: { onClick: () => void }) => {\n  return (\n    <Button onClick={onClick}>\n      <FormattedMessage id=\"tours.gotIt\" defaultMessage=\"Got it\" />\n    </Button>\n  );\n};\n\nexport type DefaultActionsProps = {\n  showSkip?: boolean;\n  showPrevious?: boolean;\n  to?: To;\n  onNextStep?: () => void;\n  onPreviousStep?: () => void;\n  tourName: ValidTourName;\n};\nconst DefaultActions = ({\n  showSkip,\n  showPrevious,\n  to,\n  tourName,\n  onNextStep,\n  onPreviousStep,\n}: DefaultActionsProps) => {\n  const { trackUsage } = useTracking();\n  const dispatch = useGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = state.tours[tourName].currentStep + 1;\n  const actualTourLength = tours[tourName]._meta.totalStepCount;\n\n  const handleSkip = () => {\n    trackUsage('didSkipGuidedTour', { name: tourName });\n    dispatch({ type: 'skip_tour', payload: tourName });\n  };\n\n  const handleNextStep = () => {\n    if (currentStep === actualTourLength) {\n      trackUsage('didCompleteGuidedTour', { name: tourName });\n    }\n\n    if (onNextStep) {\n      onNextStep();\n    } else {\n      dispatch({ type: 'next_step', payload: tourName });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    if (onPreviousStep) {\n      onPreviousStep();\n    } else {\n      dispatch({ type: 'previous_step', payload: tourName });\n    }\n  };\n\n  return (\n    <Flex gap={2}>\n      {showSkip && (\n        <Button variant=\"tertiary\" onClick={handleSkip}>\n          <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n        </Button>\n      )}\n      {!showSkip && showPrevious && (\n        <Button variant=\"tertiary\" onClick={handlePreviousStep}>\n          <FormattedMessage id=\"tours.previous\" defaultMessage=\"Previous\" />\n        </Button>\n      )}\n      {to ? (\n        <LinkButton tag={NavLink} to={to} onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </LinkButton>\n      ) : (\n        <Button onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Step factory\n * -----------------------------------------------------------------------------------------------*/\n\ntype WithChildren = {\n  children: React.ReactNode;\n  id?: never;\n  defaultMessage?: never;\n};\n\ntype WithIntl = {\n  children?: undefined;\n  id: MessageDescriptor['id'];\n  defaultMessage: MessageDescriptor['defaultMessage'];\n  withArrow?: boolean;\n};\n\ntype WithActionsChildren = {\n  children: React.ReactNode;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype StepProps = WithChildren | WithIntl;\ntype ActionsProps = WithActionsChildren | WithActionsProps;\n\ntype Step = {\n  Root: React.ForwardRefExoticComponent<\n    React.ComponentProps<typeof Popover.Content> & { withArrow?: boolean }\n  >;\n  Title: (props: StepProps) => React.ReactNode;\n  Content: (\n    props: StepProps & {\n      values?: Record<string, React.ReactNode | ((chunks: React.ReactNode) => React.ReactNode)>;\n    }\n  ) => React.ReactNode;\n  Actions: (props: ActionsProps & { to?: string } & FlexProps) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n  border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\n/**\n * TODO:\n * We should probably move all arrow styles + svg to the DS\n */\nconst PopoverArrow = styled(Popover.Arrow)`\n  fill: ${({ theme }) => theme.colors.neutral0};\n  transform: translateY(-16px) rotate(-90deg);\n`;\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n    return (\n      <Popover.Content\n        ref={ref}\n        aria-labelledby=\"guided-tour-title\"\n        side=\"top\"\n        align=\"center\"\n        style={{ border: 'none' }}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {withArrow && (\n          <PopoverArrow asChild>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"23\"\n              height=\"25\"\n              viewBox=\"0 0 23 25\"\n              fill=\"none\"\n            >\n              <path d=\"M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z\" />\n            </svg>\n          </PopoverArrow>\n        )}\n        <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n          {props.children}\n        </Flex>\n      </Popover.Content>\n    );\n  }),\n\n  Title: (props) => {\n    return (\n      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <Typography tag=\"h1\" id=\"guided-tour-title\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage id={props.id} defaultMessage={props.defaultMessage} />\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n\n  Content: (props) => (\n    <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n      {'children' in props ? (\n        props.children\n      ) : (\n        <Typography tag=\"div\" variant=\"omega\">\n          <FormattedMessage\n            id={props.id}\n            defaultMessage={props.defaultMessage}\n            values={props.values}\n          />\n        </Typography>\n      )}\n    </Box>\n  ),\n\n  Actions: ({\n    showStepCount = true,\n    showPrevious = true,\n    showSkip = false,\n    to,\n    children,\n    ...flexProps\n  }) => {\n    return (\n      <ActionsContainer\n        width=\"100%\"\n        padding={3}\n        paddingLeft={5}\n        justifyContent={showStepCount ? 'space-between' : 'flex-end'}\n        {...flexProps}\n      >\n        {children ? (\n          children\n        ) : (\n          <>\n            {showStepCount && <StepCount tourName={tourName} />}\n            <DefaultActions\n              tourName={tourName}\n              showSkip={showSkip}\n              showPrevious={!showSkip && showPrevious}\n              to={to}\n            />\n          </>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents, GotItAction, StepCount, DefaultActions };\n"],"names":["StepCount","tourName","displayedCurrentStep","displayedTourLength","state","useGuidedTour","s","currentStep","tours","displayedStepCount","_meta","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","GotItAction","onClick","Button","DefaultActions","showSkip","showPrevious","to","onNextStep","onPreviousStep","trackUsage","useTracking","dispatch","actualTourLength","totalStepCount","handleSkip","name","type","payload","handleNextStep","handlePreviousStep","_jsxs","Flex","gap","LinkButton","tag","NavLink","ActionsContainer","styled","theme","colors","neutral150","PopoverArrow","Popover","Arrow","neutral0","createStepComponents","Root","React","forwardRef","withArrow","props","ref","Content","aria-labelledby","side","align","style","border","e","stopPropagation","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","Box","paddingTop","paddingLeft","paddingRight","paddingBottom","fontWeight","Actions","showStepCount","flexProps","padding","justifyContent","_Fragment"],"mappings":"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"}

package/dist/admin/admin/src/components/GuidedTour/{Step.mjs → Steps/Step.mjs}

@@ -1,27 +1,19 @@
-import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import * as React from 'react';
-import { Flex, Popover, Typography, Box, Button, LinkButton } from '@strapi/design-system';
+import { Flex, Popover, Box, Typography, Button, LinkButton } from '@strapi/design-system';
 import { FormattedMessage } from 'react-intl';
 import { NavLink } from 'react-router-dom';
 import { styled } from 'styled-components';
-import { useTracking } from '../../features/Tracking.mjs';
-import { useGuidedTour } from './Context.mjs';
+import { useTracking } from '../../../features/Tracking.mjs';
+import { useGuidedTour } from '../Context.mjs';
+import { tours } from '../Tours.mjs';
 
-const ActionsContainer = styled(Flex)`
-  border-top: ${({ theme })=>`1px solid ${theme.colors.neutral150}`};
-`;
-/**
- * TODO:
- * We should probably move all arrow styles + svg to the DS
- */ const PopoverArrow = styled(Popover.Arrow)`
-  fill: ${({ theme })=>theme.colors.neutral0};
-  transform: translateY(-16px) rotate(-90deg);
-`;
-const StepCount = ({ tourName })=>{
+/* -------------------------------------------------------------------------------------------------
+ * Common Step Components
+ * -----------------------------------------------------------------------------------------------*/ const StepCount = ({ tourName, displayedCurrentStep, displayedTourLength })=>{
     const state = useGuidedTour('GuidedTourPopover', (s)=>s.state);
-    const currentStep = state.tours[tourName].currentStep + 1;
-    // TODO: Currently all tours do not count their last step, but we should find a way to make this more smart
-    const displayedLength = state.tours[tourName].length - 1;
+    const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;
+    const displayedStepCount = displayedTourLength ?? tours[tourName]._meta.displayedStepCount;
     return /*#__PURE__*/ jsx(Typography, {
         variant: "omega",
         fontSize: "12px",
@@ -30,11 +22,107 @@ const StepCount = ({ tourName })=>{
             defaultMessage: "Step {currentStep} of {tourLength}",
             values: {
                 currentStep,
-                tourLength: displayedLength
+                tourLength: displayedStepCount
             }
         })
     });
 };
+const GotItAction = ({ onClick })=>{
+    return /*#__PURE__*/ jsx(Button, {
+        onClick: onClick,
+        children: /*#__PURE__*/ jsx(FormattedMessage, {
+            id: "tours.gotIt",
+            defaultMessage: "Got it"
+        })
+    });
+};
+const DefaultActions = ({ showSkip, showPrevious, to, tourName, onNextStep, onPreviousStep })=>{
+    const { trackUsage } = useTracking();
+    const dispatch = useGuidedTour('GuidedTourPopover', (s)=>s.dispatch);
+    const state = useGuidedTour('GuidedTourPopover', (s)=>s.state);
+    const currentStep = state.tours[tourName].currentStep + 1;
+    const actualTourLength = tours[tourName]._meta.totalStepCount;
+    const handleSkip = ()=>{
+        trackUsage('didSkipGuidedTour', {
+            name: tourName
+        });
+        dispatch({
+            type: 'skip_tour',
+            payload: tourName
+        });
+    };
+    const handleNextStep = ()=>{
+        if (currentStep === actualTourLength) {
+            trackUsage('didCompleteGuidedTour', {
+                name: tourName
+            });
+        }
+        if (onNextStep) {
+            onNextStep();
+        } else {
+            dispatch({
+                type: 'next_step',
+                payload: tourName
+            });
+        }
+    };
+    const handlePreviousStep = ()=>{
+        if (onPreviousStep) {
+            onPreviousStep();
+        } else {
+            dispatch({
+                type: 'previous_step',
+                payload: tourName
+            });
+        }
+    };
+    return /*#__PURE__*/ jsxs(Flex, {
+        gap: 2,
+        children: [
+            showSkip && /*#__PURE__*/ jsx(Button, {
+                variant: "tertiary",
+                onClick: handleSkip,
+                children: /*#__PURE__*/ jsx(FormattedMessage, {
+                    id: "tours.skip",
+                    defaultMessage: "Skip"
+                })
+            }),
+            !showSkip && showPrevious && /*#__PURE__*/ jsx(Button, {
+                variant: "tertiary",
+                onClick: handlePreviousStep,
+                children: /*#__PURE__*/ jsx(FormattedMessage, {
+                    id: "tours.previous",
+                    defaultMessage: "Previous"
+                })
+            }),
+            to ? /*#__PURE__*/ jsx(LinkButton, {
+                tag: NavLink,
+                to: to,
+                onClick: handleNextStep,
+                children: /*#__PURE__*/ jsx(FormattedMessage, {
+                    id: "tours.next",
+                    defaultMessage: "Next"
+                })
+            }) : /*#__PURE__*/ jsx(Button, {
+                onClick: handleNextStep,
+                children: /*#__PURE__*/ jsx(FormattedMessage, {
+                    id: "tours.next",
+                    defaultMessage: "Next"
+                })
+            })
+        ]
+    });
+};
+const ActionsContainer = styled(Flex)`
+  border-top: ${({ theme })=>`1px solid ${theme.colors.neutral150}`};
+`;
+/**
+ * TODO:
+ * We should probably move all arrow styles + svg to the DS
+ */ const PopoverArrow = styled(Popover.Arrow)`
+  fill: ${({ theme })=>theme.colors.neutral0};
+  transform: translateY(-16px) rotate(-90deg);
+`;
 const createStepComponents = (tourName)=>({
         Root: /*#__PURE__*/ React.forwardRef(({ withArrow = true, ...props }, ref)=>{
             return /*#__PURE__*/ jsxs(Popover.Content, {
@@ -45,6 +133,7 @@ const createStepComponents = (tourName)=>({
                 style: {
                     border: 'none'
                 },
+                onClick: (e)=>e.stopPropagation(),
                 ...props,
                 children: [
                     withArrow && /*#__PURE__*/ jsx(PopoverArrow, {
@@ -98,36 +187,12 @@ const createStepComponents = (tourName)=>({
                     variant: "omega",
                     children: /*#__PURE__*/ jsx(FormattedMessage, {
                         id: props.id,
-                        defaultMessage: props.defaultMessage
+                        defaultMessage: props.defaultMessage,
+                        values: props.values
                     })
                 })
             }),
-        Actions: ({ showStepCount = true, showSkip = false, to, children, ...flexProps })=>{
-            const { trackUsage } = useTracking();
-            const dispatch = useGuidedTour('GuidedTourPopover', (s)=>s.dispatch);
-            const state = useGuidedTour('GuidedTourPopover', (s)=>s.state);
-            const currentStep = state.tours[tourName].currentStep + 1;
-            const actualTourLength = state.tours[tourName].length;
-            const handleSkipAction = ()=>{
-                trackUsage('didSkipGuidedTour', {
-                    name: tourName
-                });
-                dispatch({
-                    type: 'skip_tour',
-                    payload: tourName
-                });
-            };
-            const handleNextStep = ()=>{
-                if (currentStep === actualTourLength) {
-                    trackUsage('didCompleteGuidedTour', {
-                        name: tourName
-                    });
-                }
-                dispatch({
-                    type: 'next_step',
-                    payload: tourName
-                });
-            };
+        Actions: ({ showStepCount = true, showPrevious = true, showSkip = false, to, children, ...flexProps })=>{
             return /*#__PURE__*/ jsx(ActionsContainer, {
                 width: "100%",
                 padding: 3,
@@ -139,33 +204,11 @@ const createStepComponents = (tourName)=>({
                         showStepCount && /*#__PURE__*/ jsx(StepCount, {
                             tourName: tourName
                         }),
-                        /*#__PURE__*/ jsxs(Flex, {
-                            gap: 2,
-                            children: [
-                                showSkip && /*#__PURE__*/ jsx(Button, {
-                                    variant: "tertiary",
-                                    onClick: handleSkipAction,
-                                    children: /*#__PURE__*/ jsx(FormattedMessage, {
-                                        id: "tours.skip",
-                                        defaultMessage: "Skip"
-                                    })
-                                }),
-                                to ? /*#__PURE__*/ jsx(LinkButton, {
-                                    tag: NavLink,
-                                    to: to,
-                                    onClick: handleNextStep,
-                                    children: /*#__PURE__*/ jsx(FormattedMessage, {
-                                        id: "tours.next",
-                                        defaultMessage: "Next"
-                                    })
-                                }) : /*#__PURE__*/ jsx(Button, {
-                                    onClick: handleNextStep,
-                                    children: /*#__PURE__*/ jsx(FormattedMessage, {
-                                        id: "tours.next",
-                                        defaultMessage: "Next"
-                                    })
-                                })
-                            ]
+                        /*#__PURE__*/ jsx(DefaultActions, {
+                            tourName: tourName,
+                            showSkip: showSkip,
+                            showPrevious: !showSkip && showPrevious,
+                            to: to
                         })
                     ]
                 })
@@ -173,5 +216,5 @@ const createStepComponents = (tourName)=>({
         }
     });
 
-export { StepCount, createStepComponents };
+export { DefaultActions, GotItAction, StepCount, createStepComponents };
 //# sourceMappingURL=Step.mjs.map

package/dist/admin/admin/src/components/GuidedTour/Steps/Step.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Step.mjs","sources":["../../../../../../../admin/src/components/GuidedTour/Steps/Step.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport {\n  Popover,\n  Box,\n  Flex,\n  Button,\n  Typography,\n  LinkButton,\n  FlexProps,\n} from '@strapi/design-system';\nimport { FormattedMessage, type MessageDescriptor } from 'react-intl';\nimport { To, NavLink } from 'react-router-dom';\nimport { styled } from 'styled-components';\n\nimport { useTracking } from '../../../features/Tracking';\nimport { useGuidedTour, type ValidTourName } from '../Context';\nimport { tours } from '../Tours';\n\n/* -------------------------------------------------------------------------------------------------\n * Common Step Components\n * -----------------------------------------------------------------------------------------------*/\n\nconst StepCount = ({\n  tourName,\n  displayedCurrentStep,\n  displayedTourLength,\n}: {\n  tourName: ValidTourName;\n  displayedCurrentStep?: number;\n  displayedTourLength?: number;\n}) => {\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = displayedCurrentStep ?? state.tours[tourName].currentStep + 1;\n  const displayedStepCount = displayedTourLength ?? tours[tourName]._meta.displayedStepCount;\n\n  return (\n    <Typography variant=\"omega\" fontSize=\"12px\">\n      <FormattedMessage\n        id=\"tours.stepCount\"\n        defaultMessage=\"Step {currentStep} of {tourLength}\"\n        values={{ currentStep, tourLength: displayedStepCount }}\n      />\n    </Typography>\n  );\n};\n\nconst GotItAction = ({ onClick }: { onClick: () => void }) => {\n  return (\n    <Button onClick={onClick}>\n      <FormattedMessage id=\"tours.gotIt\" defaultMessage=\"Got it\" />\n    </Button>\n  );\n};\n\nexport type DefaultActionsProps = {\n  showSkip?: boolean;\n  showPrevious?: boolean;\n  to?: To;\n  onNextStep?: () => void;\n  onPreviousStep?: () => void;\n  tourName: ValidTourName;\n};\nconst DefaultActions = ({\n  showSkip,\n  showPrevious,\n  to,\n  tourName,\n  onNextStep,\n  onPreviousStep,\n}: DefaultActionsProps) => {\n  const { trackUsage } = useTracking();\n  const dispatch = useGuidedTour('GuidedTourPopover', (s) => s.dispatch);\n  const state = useGuidedTour('GuidedTourPopover', (s) => s.state);\n  const currentStep = state.tours[tourName].currentStep + 1;\n  const actualTourLength = tours[tourName]._meta.totalStepCount;\n\n  const handleSkip = () => {\n    trackUsage('didSkipGuidedTour', { name: tourName });\n    dispatch({ type: 'skip_tour', payload: tourName });\n  };\n\n  const handleNextStep = () => {\n    if (currentStep === actualTourLength) {\n      trackUsage('didCompleteGuidedTour', { name: tourName });\n    }\n\n    if (onNextStep) {\n      onNextStep();\n    } else {\n      dispatch({ type: 'next_step', payload: tourName });\n    }\n  };\n\n  const handlePreviousStep = () => {\n    if (onPreviousStep) {\n      onPreviousStep();\n    } else {\n      dispatch({ type: 'previous_step', payload: tourName });\n    }\n  };\n\n  return (\n    <Flex gap={2}>\n      {showSkip && (\n        <Button variant=\"tertiary\" onClick={handleSkip}>\n          <FormattedMessage id=\"tours.skip\" defaultMessage=\"Skip\" />\n        </Button>\n      )}\n      {!showSkip && showPrevious && (\n        <Button variant=\"tertiary\" onClick={handlePreviousStep}>\n          <FormattedMessage id=\"tours.previous\" defaultMessage=\"Previous\" />\n        </Button>\n      )}\n      {to ? (\n        <LinkButton tag={NavLink} to={to} onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </LinkButton>\n      ) : (\n        <Button onClick={handleNextStep}>\n          <FormattedMessage id=\"tours.next\" defaultMessage=\"Next\" />\n        </Button>\n      )}\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * Step factory\n * -----------------------------------------------------------------------------------------------*/\n\ntype WithChildren = {\n  children: React.ReactNode;\n  id?: never;\n  defaultMessage?: never;\n};\n\ntype WithIntl = {\n  children?: undefined;\n  id: MessageDescriptor['id'];\n  defaultMessage: MessageDescriptor['defaultMessage'];\n  withArrow?: boolean;\n};\n\ntype WithActionsChildren = {\n  children: React.ReactNode;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype WithActionsProps = {\n  children?: undefined;\n  showStepCount?: boolean;\n  showSkip?: boolean;\n  showPrevious?: boolean;\n};\n\ntype StepProps = WithChildren | WithIntl;\ntype ActionsProps = WithActionsChildren | WithActionsProps;\n\ntype Step = {\n  Root: React.ForwardRefExoticComponent<\n    React.ComponentProps<typeof Popover.Content> & { withArrow?: boolean }\n  >;\n  Title: (props: StepProps) => React.ReactNode;\n  Content: (\n    props: StepProps & {\n      values?: Record<string, React.ReactNode | ((chunks: React.ReactNode) => React.ReactNode)>;\n    }\n  ) => React.ReactNode;\n  Actions: (props: ActionsProps & { to?: string } & FlexProps) => React.ReactNode;\n};\n\nconst ActionsContainer = styled(Flex)`\n  border-top: ${({ theme }) => `1px solid ${theme.colors.neutral150}`};\n`;\n\n/**\n * TODO:\n * We should probably move all arrow styles + svg to the DS\n */\nconst PopoverArrow = styled(Popover.Arrow)`\n  fill: ${({ theme }) => theme.colors.neutral0};\n  transform: translateY(-16px) rotate(-90deg);\n`;\n\nconst createStepComponents = (tourName: ValidTourName): Step => ({\n  Root: React.forwardRef(({ withArrow = true, ...props }, ref) => {\n    return (\n      <Popover.Content\n        ref={ref}\n        aria-labelledby=\"guided-tour-title\"\n        side=\"top\"\n        align=\"center\"\n        style={{ border: 'none' }}\n        onClick={(e) => e.stopPropagation()}\n        {...props}\n      >\n        {withArrow && (\n          <PopoverArrow asChild>\n            <svg\n              xmlns=\"http://www.w3.org/2000/svg\"\n              width=\"23\"\n              height=\"25\"\n              viewBox=\"0 0 23 25\"\n              fill=\"none\"\n            >\n              <path d=\"M11 24.5L1.82843 15.3284C0.266332 13.7663 0.26633 11.2337 1.82843 9.67157L11 0.5L23 12.5L11 24.5Z\" />\n            </svg>\n          </PopoverArrow>\n        )}\n        <Flex width=\"360px\" direction=\"column\" alignItems=\"start\">\n          {props.children}\n        </Flex>\n      </Popover.Content>\n    );\n  }),\n\n  Title: (props) => {\n    return (\n      <Box paddingTop={5} paddingLeft={5} paddingRight={5} paddingBottom={1} width=\"100%\">\n        {'children' in props ? (\n          props.children\n        ) : (\n          <Typography tag=\"h1\" id=\"guided-tour-title\" variant=\"omega\" fontWeight=\"bold\">\n            <FormattedMessage id={props.id} defaultMessage={props.defaultMessage} />\n          </Typography>\n        )}\n      </Box>\n    );\n  },\n\n  Content: (props) => (\n    <Box paddingBottom={5} paddingLeft={5} paddingRight={5} width=\"100%\">\n      {'children' in props ? (\n        props.children\n      ) : (\n        <Typography tag=\"div\" variant=\"omega\">\n          <FormattedMessage\n            id={props.id}\n            defaultMessage={props.defaultMessage}\n            values={props.values}\n          />\n        </Typography>\n      )}\n    </Box>\n  ),\n\n  Actions: ({\n    showStepCount = true,\n    showPrevious = true,\n    showSkip = false,\n    to,\n    children,\n    ...flexProps\n  }) => {\n    return (\n      <ActionsContainer\n        width=\"100%\"\n        padding={3}\n        paddingLeft={5}\n        justifyContent={showStepCount ? 'space-between' : 'flex-end'}\n        {...flexProps}\n      >\n        {children ? (\n          children\n        ) : (\n          <>\n            {showStepCount && <StepCount tourName={tourName} />}\n            <DefaultActions\n              tourName={tourName}\n              showSkip={showSkip}\n              showPrevious={!showSkip && showPrevious}\n              to={to}\n            />\n          </>\n        )}\n      </ActionsContainer>\n    );\n  },\n});\n\nexport type { Step };\nexport { createStepComponents, GotItAction, StepCount, DefaultActions };\n"],"names":["StepCount","tourName","displayedCurrentStep","displayedTourLength","state","useGuidedTour","s","currentStep","tours","displayedStepCount","_meta","_jsx","Typography","variant","fontSize","FormattedMessage","id","defaultMessage","values","tourLength","GotItAction","onClick","Button","DefaultActions","showSkip","showPrevious","to","onNextStep","onPreviousStep","trackUsage","useTracking","dispatch","actualTourLength","totalStepCount","handleSkip","name","type","payload","handleNextStep","handlePreviousStep","_jsxs","Flex","gap","LinkButton","tag","NavLink","ActionsContainer","styled","theme","colors","neutral150","PopoverArrow","Popover","Arrow","neutral0","createStepComponents","Root","React","forwardRef","withArrow","props","ref","Content","aria-labelledby","side","align","style","border","e","stopPropagation","asChild","svg","xmlns","width","height","viewBox","fill","path","d","direction","alignItems","children","Title","Box","paddingTop","paddingLeft","paddingRight","paddingBottom","fontWeight","Actions","showStepCount","flexProps","padding","justifyContent","_Fragment"],"mappings":"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"}