@stack-spot/portal-layout 2.21.0 → 2.21.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Changelog
 
+## [2.21.1](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.21.0...portal-layout@v2.21.1) (2024-12-27)
+
+
+### Bug Fixes
+
+* layout tour guided ([#606](https://github.com/stack-spot/portal-commons/issues/606)) ([c9bf51f](https://github.com/stack-spot/portal-commons/commit/c9bf51fa51c21f940df3c9f839bf303f3a1512fc))
+* remove banner css ([#619](https://github.com/stack-spot/portal-commons/issues/619)) ([d4d8432](https://github.com/stack-spot/portal-commons/commit/d4d843239f3fbba3b9d69f2abee3b23fd297d581))
+
 ## [2.21.0](https://github.com/stack-spot/portal-commons/compare/portal-layout@v2.20.1...portal-layout@v2.21.0) (2024-12-27)
 
 

package/dist/components/tour/StepContainer.d.ts

@@ -1,4 +1,4 @@
-import { ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { NavigationProps } from './StepNavigation.js';
 interface StepContainerProps {
     children: ReactNode;
@@ -13,7 +13,15 @@ interface StepContainerProps {
     /**
      * The position of the tour overlay related to the content being explained.
      */
-    position: PointingArrowPosition;
+    position?: PointingArrowPosition;
+    /**
+     * The CSS 'right' property to adjust the horizontal position of the overlay.
+     */
+    right?: React.CSSProperties['right'];
+    /**
+     * The CSS 'top' property to adjust the vertical position of the overlay.
+     */
+    top?: React.CSSProperties['top'];
     /**
      * A customizable set of buttons for navigating the tour steps.
      */
@@ -23,7 +31,7 @@ interface StepContainerProps {
  * Tutorial: the overlay component for showing a step on React Tour.
  * @param props the react props for the component {@link StepContainerProps}.
  */
-export declare const StepContainer: ({ title, stepKey, customNavigation, position, children }: StepContainerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StepContainer: ({ title, stepKey, customNavigation, position, top, right, children }: StepContainerProps) => import("react/jsx-runtime").JSX.Element;
 export type PointingArrowPosition = 'right' | 'top' | 'left' | 'bottom';
 export {};
 //# sourceMappingURL=StepContainer.d.ts.map

package/dist/components/tour/StepContainer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepContainer.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepContainer.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEjC,OAAO,EAAE,eAAe,EAAkB,MAAM,kBAAkB,CAAA;AAIlE,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,qBAAqB,CAAC;IAChC;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;CACrD;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,6DAA8D,kBAAkB,4CAOzG,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAA"}
+{"version":3,"file":"StepContainer.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepContainer.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAExC,OAAO,EAAE,eAAe,EAAkB,MAAM,kBAAkB,CAAA;AAIlE,UAAU,kBAAkB;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB;;OAEG;IACH,OAAO,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjC;;OAEG;IACH,gBAAgB,CAAC,EAAE,IAAI,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC;CACrD;AAED;;;GAGG;AACH,eAAO,MAAM,aAAa,yEAAqF,kBAAkB,4CAShI,CAAA;AAED,MAAM,MAAM,qBAAqB,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,QAAQ,CAAA"}

package/dist/components/tour/StepContainer.js

@@ -8,9 +8,9 @@ import { useTour } from './hook.js';
  * Tutorial: the overlay component for showing a step on React Tour.
  * @param props the react props for the component {@link StepContainerProps}.
  */
-export const StepContainer = ({ title, stepKey, customNavigation, position, children }) => {
+export const StepContainer = ({ title, stepKey, customNavigation, position = 'bottom', top, right, children }) => {
     const { closeTour } = useTour();
-    return _jsxs(BoxWithPointingArrow, { "$position": position, children: [_jsx(StepTitle, { title: title, onClose: () => closeTour() }), children, _jsx(StepNavigation, { stepKey: stepKey, ...(customNavigation || {}) })] });
+    return (_jsxs(BoxWithPointingArrow, { "$position": position, "$top": top, "$right": right, children: [_jsx(StepTitle, { title: title, onClose: () => closeTour() }), children, _jsx(StepNavigation, { stepKey: stepKey, ...(customNavigation || {}) })] }));
 };
 const BoxWithPointingArrow = styled.div `
   position: relative;
@@ -22,28 +22,27 @@ const BoxWithPointingArrow = styled.div `
     border-width: 10px;
     border-style: solid;
     border-color: transparent;
-    margin-top: -5px;
     border-right-color: ${theme.color.inverse[500]};
     ${({ $position, $top }) => $position === 'right' ?
     `
       top: ${$top || '16px'};
-      left: -18px;
+      right: 100%;
     ` : ''}
     ${({ $position, $right }) => $position === 'top' ?
     `
-    bottom: 96%;
+    top: 100%;
     right: ${$right || '16px'};
-    transform: rotate(90deg);
+    transform: rotate(-90deg);
     ` : ''}
     ${({ $position, $top }) => $position === 'left' ?
     `
       top: ${$top || '16px'};
-      right: -18px;
+      left: 100%;
       transform: rotate(180deg);
     ` : ''}
     ${({ $position, $right }) => $position === 'bottom' ?
     `
-    top: -13px;
+    bottom: 100%;
     right: ${$right || '16px'};
     transform: rotate(90deg);
     ` : ''}

package/dist/components/tour/StepContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepContainer.js","sourceRoot":"","sources":["../../../src/components/tour/StepContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAmB,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAsBhC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,EAAE,QAAQ,EAAsB,EAAE,EAAE;IAC5G,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAA;IAC/B,OAAO,MAAC,oBAAoB,iBAAY,QAAQ,aAC9C,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EACtD,QAAQ,EACT,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,KAAM,CAAC,gBAAgB,IAAI,EAAE,CAAC,GAAI,IAC7C,CAAA;AACzB,CAAC,CAAA;AAID,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAInC;;;sBAGkB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;;;;0BAQpB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;MAC5C,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC;IAClD;aACS,IAAI,IAAI,MAAM;;KAEtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC;IAClD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC;IACjD;aACS,IAAI,IAAI,MAAM;;;KAGtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC;IACrD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;;CAET,CAAA"}
+{"version":3,"file":"StepContainer.js","sourceRoot":"","sources":["../../../src/components/tour/StepContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAEhD,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAA;AAC1C,OAAO,EAAmB,cAAc,EAAE,MAAM,kBAAkB,CAAA;AAClE,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAA;AACvC,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AA8BhC;;;GAGG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAE,gBAAgB,EAAE,QAAQ,GAAG,QAAQ,EAAE,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAsB,EAAE,EAAE;IACnI,MAAM,EAAE,SAAS,EAAE,GAAG,OAAO,EAAE,CAAA;IAC/B,OAAO,CACL,MAAC,oBAAoB,iBAAY,QAAQ,UAAQ,GAAG,YAAU,KAAK,aACjE,KAAC,SAAS,IAAC,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EACtD,QAAQ,EACT,KAAC,cAAc,IAAC,OAAO,EAAE,OAAO,KAAM,CAAC,gBAAgB,IAAI,EAAE,CAAC,GAAI,IAC7C,CACxB,CAAA;AACH,CAAC,CAAA;AAID,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAInC;;;sBAGkB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;;;;;;;0BAOpB,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;MAC5C,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,OAAO,CAAC,CAAC;IAClD;aACS,IAAI,IAAI,MAAM;;KAEtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,KAAK,CAAC,CAAC;IAClD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,MAAM,CAAC,CAAC;IACjD;aACS,IAAI,IAAI,MAAM;;;KAGtB,CAAC,CAAC,CAAC,EAAE;MACJ,CAAC,EAAE,SAAS,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,SAAS,KAAK,QAAQ,CAAC,CAAC;IACrD;;aAES,MAAM,IAAI,MAAM;;KAExB,CAAC,CAAC,CAAC,EAAE;;CAET,CAAA"}

package/dist/components/tour/StepTitle.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"StepTitle.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":"AAGA,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,uBAAwB,cAAc,4CAQnD,CAAA"}
+{"version":3,"file":"StepTitle.d.ts","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":"AAIA,UAAU,cAAc;IACtB;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED;;;GAGG;AACH,eAAO,MAAM,SAAS,uBAAwB,cAAc,4CAQnD,CAAA"}

package/dist/components/tour/StepTitle.js

@@ -1,9 +1,10 @@
 import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
-import { Button, Flex, IconBox, Text } from '@citric/core';
+import { Flex, IconBox, Text } from '@citric/core';
 import { TimesMini } from '@citric/icons';
+import { IconButton } from '@citric/ui';
 /**
  * Tutorial: the component in a React Tour overlay that renders the title.
  * @param props the react props for the component {@link StepTitleProps}.
  */
-export const StepTitle = ({ title, onClose }) => _jsxs(Flex, { w: 12, pl: 5, py: 3, flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "body2", colorScheme: "inverse.contrastText", weight: "medium", children: [" ", title, " "] }), _jsx(Button, { appearance: "text", size: "sm", onClick: () => onClose?.(), sx: { ':hover': { borderColor: 'transparent !important' } }, children: _jsx(IconBox, { size: "xs", colorIcon: "inverse.contrastText", children: _jsx(TimesMini, {}) }) })] });
+export const StepTitle = ({ title, onClose }) => _jsxs(Flex, { w: 12, px: 5, py: 3, flexWrap: "nowrap", justifyContent: "space-between", alignItems: "center", children: [_jsxs(Text, { appearance: "body2", colorScheme: "inverse.contrastText", weight: "medium", children: [" ", title, " "] }), _jsx(IconButton, { onClick: onClose, sx: { r: 'full', p: 0 }, children: _jsx(IconBox, { size: "xs", colorIcon: "inverse.contrastText", children: _jsx(TimesMini, {}) }) })] });
 //# sourceMappingURL=StepTitle.js.map

package/dist/components/tour/StepTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"StepTitle.js","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAC1D,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AAazC;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAkB,EAAE,EAAE,CAC9D,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC7F,MAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,kBAAG,KAAK,SAAS,EAC5F,KAAC,MAAM,IAAC,UAAU,EAAC,MAAM,EAAC,IAAI,EAAC,IAAI,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,WAAW,EAAE,wBAAwB,EAAE,EAAE,YACzH,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,YACjD,KAAC,SAAS,KAAG,GACL,GACH,IACJ,CAAA"}
+{"version":3,"file":"StepTitle.js","sourceRoot":"","sources":["../../../src/components/tour/StepTitle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,cAAc,CAAA;AAClD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAA;AACzC,OAAO,EAAE,UAAU,EAAE,MAAM,YAAY,CAAA;AAavC;;;GAGG;AACH,MAAM,CAAC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,OAAO,EAAkB,EAAE,EAAE,CAC9D,MAAC,IAAI,IAAC,CAAC,EAAE,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,QAAQ,EAAC,QAAQ,EAAC,cAAc,EAAC,eAAe,EAAC,UAAU,EAAC,QAAQ,aAC7F,MAAC,IAAI,IAAC,UAAU,EAAC,OAAO,EAAC,WAAW,EAAC,sBAAsB,EAAC,MAAM,EAAC,QAAQ,kBAAG,KAAK,SAAS,EAC5F,KAAC,UAAU,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,EAAE,MAAM,EAAE,CAAC,EAAE,CAAC,EAAE,YACnD,KAAC,OAAO,IAAC,IAAI,EAAC,IAAI,EAAC,SAAS,EAAC,sBAAsB,YACjD,KAAC,SAAS,KAAG,GACL,GACC,IACR,CAAA"}

package/dist/components/tour/utils.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 import { ReactourStep } from 'reactour';
+import { PointingArrowPosition } from './StepContainer.js';
 import { NavigationProps } from './StepNavigation.js';
 /**
  * Tutorial: marks the tour step as finished. This sets a cookie, preventing the tour from showing again.
@@ -36,6 +37,21 @@ export interface StackspotTourStep extends ReactourStep {
      * The step's content.
      */
     content: ReactNode;
+    /**
+     * The position of the tour overlay related to the content being explained.
+     */
+    position?: PointingArrowPosition;
+    /**
+     * The CSS 'right' property to adjust the horizontal position of the overlay.
+     */
+    right?: React.CSSProperties['right'];
+    /**
+     * The CSS 'top' property to adjust the vertical position of the overlay.
+     */
+    top?: React.CSSProperties['top'];
+    /**
+     * A customizable set of buttons for navigating the tour steps.
+     */
     /**
      * A set of properties for customizing the next and previous buttons.
      */
@@ -46,5 +62,5 @@ export interface StackspotTourStep extends ReactourStep {
  * @param options the options for building the step: {@link StackspotTourStep}.
  * @returns the React Tour step.
  */
-export declare const tourStepBuilder: ({ selector, position, title, content, style, customNavigation, ...rest }: StackspotTourStep) => ReactourStep;
+export declare const tourStepBuilder: ({ selector, position, title, content, style, right, top, customNavigation, ...rest }: StackspotTourStep) => ReactourStep;
 //# sourceMappingURL=utils.d.ts.map

package/dist/components/tour/utils.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAEvC,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAYlD;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAS,MAAM,SAIzC,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,SAAU,YAAY,YAA6C,CAAA;AAE7F;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,YAG9C,CAAA;AAED,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,gBAAgB,CAAC,EAAE,eAAe,CAAC;CACpC;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,6EAQzB,iBAAiB,KAAG,YAkBrB,CAAA"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AACjC,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AACvC,OAAO,EAAE,qBAAqB,EAAiB,MAAM,iBAAiB,CAAA;AACtE,OAAO,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAA;AAYlD;;;GAGG;AACH,eAAO,MAAM,cAAc,QAAS,MAAM,SAIzC,CAAA;AAED;;;;;;GAMG;AACH,eAAO,MAAM,aAAa,SAAU,YAAY,YAA6C,CAAA;AAE7F;;;;;;;GAOG;AACH,eAAO,MAAM,mBAAmB,QAAS,MAAM,YAG9C,CAAA;AAED,MAAM,WAAW,iBAAkB,SAAQ,YAAY;IACrD;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IACd;;OAEG;IACH,QAAQ,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IACnB;;OAEG;IACH,QAAQ,CAAC,EAAE,qBAAqB,CAAC;IACjC;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;IACrC;;OAEG;IACH,GAAG,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IACjC;;OAEG;IACH;;OAEG;IACH,gBAAgB,CAAC,EAAE,eAAe,CAAC;CACpC;AAED;;;;GAIG;AACH,eAAO,MAAM,eAAe,yFAUzB,iBAAiB,KAAG,YAoBrB,CAAA"}

package/dist/components/tour/utils.js

@@ -44,9 +44,9 @@ export const hasFinishedTourStep = (key) => {
  * @param options the options for building the step: {@link StackspotTourStep}.
  * @returns the React Tour step.
  */
-export const tourStepBuilder = ({ selector, position, title, content, style, customNavigation, ...rest }) => ({
+export const tourStepBuilder = ({ selector, position, title, content, style, right, top, customNavigation, ...rest }) => ({
     selector,
-    content: (_jsx(StepContainer, { stepKey: selector, position: position, title: title, customNavigation: customNavigation, children: content })),
+    content: (_jsx(StepContainer, { stepKey: selector, position: position, right: right, top: top, title: title, customNavigation: customNavigation, children: content })),
     position,
     style: {
         backgroundColor: theme.color.inverse[500],

package/dist/components/tour/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAGhD,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGtE,MAAM,WAAW,GAAG,oBAAoB,CAAA;AAExC,MAAM,cAAc,GAAG,IAAI,IAAI,EAAE,CAAA;AACjC,cAAc,CAAC,WAAW,CAAC,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAA;AAExD,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,iBAAiB,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;IAChD,OAAO,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AAC9D,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,EAAE;IAC5C,MAAM,aAAa,GAAa,aAAa,EAAE,CAAA;IAC/C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACzD,SAAS,CAAC,WAAW,EAAE,aAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;AAC7F,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAkB,EAAE,EAAE,CAAC,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;AAE7F;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;IACjD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,OAAO,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAA;AACjE,CAAC,CAAA;AAqBD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,KAAK,EACL,gBAAgB,EAChB,GAAG,IAAI,EACW,EAAgB,EAAE,CAAC,CAAC;IACtC,QAAQ;IACR,OAAO,EAAE,CAAC,KAAC,aAAa,IACtB,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAiC,EAC3C,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,YACjC,OAAO,GACM,CAAC;IACjB,QAAQ;IACR,KAAK,EAAE;QACL,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACzC,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,CAAC;QACV,GAAG,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAiC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;QACjF,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;KACjB;IACD,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;CAChB,CAAC,CAAA"}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../src/components/tour/utils.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,MAAM,+BAA+B,CAAA;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,0BAA0B,CAAA;AAGhD,OAAO,EAAyB,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGtE,MAAM,WAAW,GAAG,oBAAoB,CAAA;AAExC,MAAM,cAAc,GAAG,IAAI,IAAI,EAAE,CAAA;AACjC,cAAc,CAAC,WAAW,CAAC,IAAI,IAAI,EAAE,CAAC,WAAW,EAAE,GAAG,CAAC,CAAC,CAAA;AAExD,MAAM,aAAa,GAAG,GAAG,EAAE;IACzB,MAAM,iBAAiB,GAAG,SAAS,CAAC,WAAW,CAAC,CAAA;IAChD,OAAO,iBAAiB,CAAC,CAAC,CAAC,iBAAiB,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,CAAA;AAC9D,CAAC,CAAA;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,cAAc,GAAG,CAAC,GAAW,EAAE,EAAE;IAC5C,MAAM,aAAa,GAAa,aAAa,EAAE,CAAA;IAC/C,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,GAAG,CAAC;QAAE,aAAa,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IACzD,SAAS,CAAC,WAAW,EAAE,aAAa,CAAC,QAAQ,EAAE,EAAE,EAAE,OAAO,EAAE,cAAc,CAAC,WAAW,EAAE,EAAE,CAAC,CAAA;AAC7F,CAAC,CAAA;AAED;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,IAAkB,EAAE,EAAE,CAAC,CAAC,mBAAmB,CAAC,GAAG,IAAI,CAAC,QAAQ,EAAE,CAAC,CAAA;AAE7F;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,EAAE;IACjD,MAAM,UAAU,GAAG,aAAa,EAAE,CAAA;IAClC,OAAO,UAAU,CAAC,QAAQ,CAAC,GAAG,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAA;AACjE,CAAC,CAAA;AAoCD;;;;GAIG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC9B,QAAQ,EACR,QAAQ,EACR,KAAK,EACL,OAAO,EACP,KAAK,EACL,KAAK,EACL,GAAG,EACH,gBAAgB,EAChB,GAAG,IAAI,EACW,EAAgB,EAAE,CAAC,CAAC;IACtC,QAAQ;IACR,OAAO,EAAE,CAAC,KAAC,aAAa,IACtB,OAAO,EAAE,QAAQ,EACjB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,gBAAgB,EAAE,gBAAgB,YACjC,OAAO,GACM,CAAC;IACjB,QAAQ;IACR,KAAK,EAAE;QACL,eAAe,EAAE,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG,CAAC;QACzC,KAAK,EAAE,OAAO;QACd,OAAO,EAAE,CAAC;QACV,GAAG,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,QAAiC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,GAAG;QACjF,GAAG,CAAC,KAAK,IAAI,EAAE,CAAC;KACjB;IACD,GAAG,CAAC,IAAI,IAAI,EAAE,CAAC;CAChB,CAAC,CAAA"}

package/dist/layout.css

@@ -94,16 +94,6 @@ body {
   transition: left ease-in-out var(--menu-animation-duration);
 }
 
-#page.home-banner-visible {
-  padding: 0 !important; 
-}
-
-#banner-warning {
-  width: 90.7vw; 
-  margin-left: calc(-0.6 * var(--menu-sections-width)); 
-  margin-right: 0;
-}
-
 #layout.menu-content-visible #page {
   left: calc(var(--menu-sections-width) + var(--menu-content-width));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stack-spot/portal-layout",
-  "version": "2.21.0",
+  "version": "2.21.1",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/tour/StepContainer.tsx

@@ -1,5 +1,5 @@
 import { theme } from '@stack-spot/portal-theme'
-import { ReactNode } from 'react'
+import React, { ReactNode } from 'react'
 import { styled } from 'styled-components'
 import { NavigationProps, StepNavigation } from './StepNavigation'
 import { StepTitle } from './StepTitle'
@@ -18,7 +18,15 @@ interface StepContainerProps {
   /**
    * The position of the tour overlay related to the content being explained.
    */
-  position: PointingArrowPosition,
+  position?: PointingArrowPosition,
+  /**
+   * The CSS 'right' property to adjust the horizontal position of the overlay.
+   */
+  right?: React.CSSProperties['right'],
+  /**
+   * The CSS 'top' property to adjust the vertical position of the overlay.
+   */
+  top?: React.CSSProperties['top'],
   /**
    * A customizable set of buttons for navigating the tour steps.
    */
@@ -29,21 +37,23 @@ interface StepContainerProps {
  * Tutorial: the overlay component for showing a step on React Tour.
  * @param props the react props for the component {@link StepContainerProps}.
  */
-export const StepContainer = ({ title, stepKey, customNavigation, position, children }: StepContainerProps) => {
+export const StepContainer = ({ title, stepKey, customNavigation, position = 'bottom', top, right, children }: StepContainerProps) => {
   const { closeTour } = useTour()
-  return <BoxWithPointingArrow $position={position}>
-    <StepTitle title={title} onClose={() => closeTour()} />
-    {children}
-    <StepNavigation stepKey={stepKey} {...(customNavigation || {})} />
-  </BoxWithPointingArrow>
+  return (
+    <BoxWithPointingArrow $position={position} $top={top} $right={right}>
+      <StepTitle title={title} onClose={() => closeTour()} />
+      {children}
+      <StepNavigation stepKey={stepKey} {...(customNavigation || {})} />
+    </BoxWithPointingArrow>
+  )
 }
 
 export type PointingArrowPosition = 'right' | 'top' | 'left' | 'bottom'
 
 const BoxWithPointingArrow = styled.div < {
   $position: PointingArrowPosition,
-  $top?: string,
-  $right?: string,
+  $top?: React.CSSProperties['top'],
+  $right?: React.CSSProperties['right'],
 } > `
   position: relative;
   width: 100%;
@@ -54,28 +64,27 @@ const BoxWithPointingArrow = styled.div < {
     border-width: 10px;
     border-style: solid;
     border-color: transparent;
-    margin-top: -5px;
     border-right-color: ${theme.color.inverse[500]};
     ${({ $position, $top }) => $position === 'right' ?
     `
       top: ${$top || '16px'};
-      left: -18px;
+      right: 100%;
     ` : ''}
     ${({ $position, $right }) => $position === 'top' ?
     `
-    bottom: 96%;
+    top: 100%;
     right: ${$right || '16px'};
-    transform: rotate(90deg);
+    transform: rotate(-90deg);
     ` : ''}
     ${({ $position, $top }) => $position === 'left' ?
     `
       top: ${$top || '16px'};
-      right: -18px;
+      left: 100%;
       transform: rotate(180deg);
     ` : ''}
     ${({ $position, $right }) => $position === 'bottom' ?
     `
-    top: -13px;
+    bottom: 100%;
     right: ${$right || '16px'};
     transform: rotate(90deg);
     ` : ''}

package/src/components/tour/StepTitle.tsx

@@ -1,5 +1,6 @@
-import { Button, Flex, IconBox, Text } from '@citric/core'
+import { Flex, IconBox, Text } from '@citric/core'
 import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
 
 interface StepTitleProps {
   /**
@@ -17,11 +18,11 @@ interface StepTitleProps {
  * @param props the react props for the component {@link StepTitleProps}.
  */
 export const StepTitle = ({ title, onClose }: StepTitleProps) =>
-  <Flex w={12} pl={5} py={3} flexWrap="nowrap" justifyContent="space-between" alignItems="center">
+  <Flex w={12} px={5} py={3} flexWrap="nowrap" justifyContent="space-between" alignItems="center">
     <Text appearance="body2" colorScheme="inverse.contrastText" weight="medium"> {title} </Text>
-    <Button appearance="text" size="sm" onClick={() => onClose?.()} sx={{ ':hover': { borderColor: 'transparent !important' } }}>
+    <IconButton onClick={onClose} sx={{ r: 'full', p: 0 }} >
       <IconBox size="xs" colorIcon="inverse.contrastText">
         <TimesMini />
       </IconBox>
-    </Button>
+    </IconButton>
   </Flex>

package/src/components/tour/utils.tsx

@@ -60,6 +60,21 @@ export interface StackspotTourStep extends ReactourStep {
    * The step's content.
    */
   content: ReactNode,
+  /**
+   * The position of the tour overlay related to the content being explained.
+   */
+  position?: PointingArrowPosition,
+  /**
+   * The CSS 'right' property to adjust the horizontal position of the overlay.
+   */
+  right?: React.CSSProperties['right'],
+  /**
+   * The CSS 'top' property to adjust the vertical position of the overlay.
+   */
+  top?: React.CSSProperties['top'],
+  /**
+   * A customizable set of buttons for navigating the tour steps.
+   */
   /**
    * A set of properties for customizing the next and previous buttons.
    */
@@ -77,13 +92,17 @@ export const tourStepBuilder = ({
   title,
   content,
   style,
+  right,
+  top,
   customNavigation,
   ...rest
 }: StackspotTourStep): ReactourStep => ({
   selector,
   content: (<StepContainer
     stepKey={selector}
-    position={position as PointingArrowPosition}
+    position={position}
+    right={right}
+    top={top}
     title={title}
     customNavigation={customNavigation}>
     {content}

package/src/layout.css

@@ -94,16 +94,6 @@ body {
   transition: left ease-in-out var(--menu-animation-duration);
 }
 
-#page.home-banner-visible {
-  padding: 0 !important; 
-}
-
-#banner-warning {
-  width: 90.7vw; 
-  margin-left: calc(-0.6 * var(--menu-sections-width)); 
-  margin-right: 0;
-}
-
 #layout.menu-content-visible #page {
   left: calc(var(--menu-sections-width) + var(--menu-content-width));
 }