@stack-spot/portal-layout 0.0.64 → 1.0.0-dev.1768482785050

package/src/components/tour/utils.tsx

@@ -0,0 +1,119 @@
+import { getCookie, setCookie } from '@stack-spot/portal-components'
+import { theme } from '@stack-spot/portal-theme'
+import { ReactNode } from 'react'
+import { ReactourStep } from 'reactour'
+import { PointingArrowPosition, StepContainer } from './StepContainer'
+import { NavigationProps } from './StepNavigation'
+
+const TOUR_COOKIE = 'guided-tour-global'
+
+const defaultExpires = new Date()
+defaultExpires.setFullYear(new Date().getFullYear() + 1)
+
+export const getTourCookie = () => {
+  const currentTourObject = getCookie(TOUR_COOKIE)
+  return currentTourObject ? currentTourObject.split(',') : []
+}
+
+/**
+ * Tutorial: marks the tour step as finished. This sets a cookie, preventing the tour from showing again.
+ * @param key the identifier for the step to mark as finished.
+ */
+export const finishTourStep = (key: string) => {
+  const finishedTours: string[] = getTourCookie()
+  if (!finishedTours.includes(key)) finishedTours.push(key)
+  setCookie(TOUR_COOKIE, finishedTours.toString(), { expires: defaultExpires.toUTCString() })
+}
+
+/**
+ * Tutorial: verifies if the React Tour step has not finished yet.
+ * 
+ * A step has not finished if the array stored as a cookie doesn't include the string value of `step.selector`.
+ * @param step the step config.
+ * @returns true if the step has not yet been marked as finished. False otherwise.
+ */
+export const isNewTourStep = (step: ReactourStep) => !hasFinishedTourStep(`${step.selector}`)
+
+/**
+ * Tutorial: verifies if the key passed as parameter refers to a React Tour step that has already finished.
+ * 
+ * The key refers to a finished step if the array stored as a cookie includes it.
+ * If the cookie is set to 'disabled', then the step will be considered finished.Particularly useful in scenarios like e2e tests.
+ * @param key the step's identifier to check.
+ * @returns true if the key refers to a finished step. False otherwise.
+ */
+export const hasFinishedTourStep = (key: string) => {
+  const tourCookie = getTourCookie()
+  return tourCookie.includes(key) || tourCookie[0] === 'disabled'
+}
+
+export interface StackspotTourStep extends ReactourStep {
+  /**
+   * The step's title.
+   */
+  title: string,
+  /**
+   * The unique identifier for the step (key).
+   */
+  selector: string,
+  /**
+   * 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.
+   */
+  customNavigation?: NavigationProps,
+}
+
+/**
+ * Tutorial: utility for building a React Tour step. This already includes some default configuration for tours in Stackspot.
+ * @param options the options for building the step: {@link StackspotTourStep}. 
+ * @returns the React Tour step.
+ */
+export const tourStepBuilder = ({
+  selector,
+  position,
+  title,
+  content,
+  style,
+  right,
+  top,
+  customNavigation,
+  ...rest
+}: StackspotTourStep): ReactourStep => ({
+  selector,
+  content: (<StepContainer
+    stepKey={selector}
+    position={position}
+    right={right}
+    top={top}
+    title={title}
+    customNavigation={customNavigation}>
+    {content}
+  </StepContainer>),
+  position,
+  style: {
+    backgroundColor: theme.color.inverse[500],
+    width: '256px',
+    padding: 0,
+    top: ['right', 'left'].includes(position as PointingArrowPosition) ? '-3px' : '0',
+    ...(style || {}),
+  },
+  ...(rest || {}),
+})

package/src/components/user-menu-manager.ts

@@ -0,0 +1,31 @@
+export type UserMenuManagerListeners =  (visible: boolean) => void
+
+class UserMenuManager {
+  private visible: boolean = false
+  private observers = [] as UserMenuManagerListeners[]
+
+  changeVisible(isVisible: boolean): void {
+    this.visible = isVisible
+    this.notify()
+  }
+
+  isOpen(): boolean {
+    return this.visible
+  }
+
+  subscribe(updateFn: UserMenuManagerListeners) {
+    this.observers.push(updateFn)
+    this.notify()
+    return () => this.pullListener(updateFn)
+  }
+
+  private pullListener(updateFn: UserMenuManagerListeners) {
+    this.observers = this.observers.filter((obs) => obs !== updateFn)
+  }
+
+  private notify() {
+    this.observers.forEach((updateFn) => updateFn(this.visible))
+  }
+}
+
+export const userMenuManager = new UserMenuManager()

package/src/dictionary.ts

@@ -1,4 +1,4 @@
-import { Dictionary, getLanguage, useTranslate } from '@stack-spot/portal-translate'
+import { Dictionary, getLanguage, ptEn, useTranslate } from '@stack-spot/portal-translate'
 
 const dictionary = {
   en: {
@@ -7,6 +7,7 @@ const dictionary = {
     dismiss: 'Dismiss',
     confirm: 'OK',
     cancel: 'Cancel',
+    goBack: 'Return',
   },
   pt: {
     close: 'Fechar',
@@ -14,12 +15,16 @@ const dictionary = {
     dismiss: 'Dispensar',
     confirm: 'OK',
     cancel: 'Cancelar',
+    goBack: 'Voltar',
   },
 } satisfies Dictionary
 
+/**
+ * A global dictionary for layout components.
+ */
 export const useDictionary = () => useTranslate(dictionary)
 
 export function getDictionary() {
-  const language = getLanguage()
+  const language = getLanguage(ptEn)
   return dictionary[language]
 }

package/src/elements.ts

@@ -1,3 +1,6 @@
+/**
+ * The ids of the layout elements.
+ */
 export const elementIds = {
   layout: 'layout',
   backdrop: 'backdrop',
@@ -9,6 +12,7 @@ export const elementIds = {
   header: 'header',
   menu: 'menu',
   menuContent: 'menuContent',
+  menuInnerContent: 'menuInnerContent',
   menuSections: 'menuSections',
   accessibilityAnnouncer: 'accessibilityAnnouncer',
 } as const
@@ -16,6 +20,9 @@ export const elementIds = {
 export type LayoutElement = keyof typeof elementIds
 export type LayoutElements = Record<LayoutElement, HTMLElement | null>
 
+/**
+ * @returns an object with the html elements of the layout.
+ */
 export function getLayoutElements() {
   return (Object.keys(elementIds) as LayoutElement[]).reduce<LayoutElements>(
     (result, id) => ({ ...result, [id]: document.getElementById(id) }),

package/src/index.ts

@@ -1,17 +1,24 @@
-export { Layout, RawLayout } from './Layout'
-export { overlay } from './LayoutOverlayManager'
+export { Backdrop } from './components/Backdrop'
+export { showContactUsModal } from './components/Contact/show-contact-modal'
 export { Dialog } from './components/Dialog'
 export { Header, HeaderProps } from './components/Header'
-export { OverlayContent } from './components/OverlayContent'
-export { PortalSwitcher } from './components/PortalSwitcher'
-export { ListAction, SelectionList, SelectionListProps } from './components/SelectionList'
-export { Toaster } from './components/Toaster'
 export { ActionItem, MenuContent, MenuGroup, Title } from './components/menu/MenuContent'
 export { MenuSections } from './components/menu/MenuSections'
 export * from './components/menu/types'
-export * from './components/types'
+export { CLOSE_OVERLAY_ID, OverlayContent } from './components/OverlayContent'
+export { PortalSwitcher } from './components/PortalSwitcher'
+export { usePrivacyPolicyEffect } from './components/PrivacyPolicyMessage/hooks'
+export { RateComponent } from './components/Rate'
+export { shouldShowNpsModal } from './components/Rate/hook'
+export { ShowFeedbackModal, showRateUsModal } from './components/Rate/show-rate-us-modals'
+export * from './components/tour'
+export { TypeForm } from './components/TypeForm'
+export { useTypeFormEffect } from './components/TypeForm/hook'
+export { showTypeFormModal } from './components/TypeForm/show-typeform-modal'
 export * from './elements'
 export * from './errors'
-export { Logo as StackspotLogo } from './svg/Logo'
+export { Layout, RawLayout } from './Layout'
+export { overlay } from './LayoutOverlayManager'
+export * from './types'
 export * from './utils'
 

package/src/layout.css

@@ -27,7 +27,7 @@ body {
   display: flex;
   flex-direction: column;
   flex: 1;
-  background: var(--light-400);
+  background: var(--light-300);
   font: var(--font);
   color: var(--light-contrastText);
 }
@@ -98,7 +98,12 @@ body {
   left: calc(var(--menu-sections-width) + var(--menu-content-width));
 }
 
-#layout.no-menu-sections:not(.menu-content-visible) #page {
+#layout.menu-inner-content-visible #page {
+  left: calc(var(--menu-sections-width) + calc(var(--menu-content-width) * 2));
+}
+
+#layout.no-menu-sections:not(.menu-content-visible) #page,
+#layout.no-menu-sections:not(.menu-inner-content-visible) #page {
   border-top-left-radius: 0;
 }
 
@@ -119,16 +124,12 @@ body {
   bottom: 0;
 }
 
-#menu svg {
-  fill: var(--light-contrastText);
-}
-
 #menu .item-row-group svg {
   fill: var(--light-700);
 }
 
-#menu .toggle .expand {
-  fill: var(--primary-500);
+#menu .hidden-scroll-bars {
+  height: 100%;
 }
 
 #menu .toggle .expand,
@@ -155,42 +156,132 @@ body {
   display: none;
 }
 
+#layout.menu-compact .section-badge {
+  display: none;
+}
+
+#layout.menu-compact .section-icon-with-badge {
+  display: block;
+}
+
+#layout.menu-compact .custom-element {
+  display: none;
+}
+
+#layout.menu-compact .custom-element-icon {
+  display: block;
+}
+
+#layout:not(.menu-compact) > .react-tooltip {
+  display: none;
+}
+
 #layout:not(.menu-compact) .section-label {
   display: block;
 }
 
+#layout:not(.menu-compact) .section-badge {
+  display: block;
+}
+
+#layout:not(.menu-compact) .section-icon-with-badge {
+  display: none;
+}
+
+#layout:not(.menu-compact) .custom-element-icon {
+  display: block;
+}
+
+#layout:not(.menu-compact) .custom-element-icon {
+  display: none;
+}
+
+
 #menuSections {
   width: var(--menu-sections-width);
   display: flex;
   flex-direction: column;
-  padding: 0 0 10px;
+  padding: 0;
   justify-content: space-between;
   background-color: var(--light-400);
   position: relative;
   border-right: 1px solid var(--light-300);
   border-top: 1px solid var(--light-300);
+  min-height: 100%;
+  box-sizing: border-box;
 }
 
 #menuSections .sections-footer {
   padding: 16px;
+  padding-left: 8px;
 }
 
 #menuSections .toggle,
 #menuSections > ul li a {
   background: transparent;
   border: none;
-  outline: none;
   width: var(--menu-sections-width);
-  height: var(--menu-item-height);
   display: flex;
   flex-direction: column;
   gap: 10px;
   align-items: flex-start;
   justify-content: center;
-  transition: background-color 0.2s;
   cursor: pointer;
   position: relative;
   z-index: 2;
+  border-right: 1px solid var(--light-300);
+}
+
+#menuSections .toggle.sections-footer {
+  height: auto;
+}
+
+.gradient-svg {
+  width: 100px;
+  height: 100px;
+}
+
+.gradient-svg path {
+  fill: url(#gradient);
+}
+
+#menuSections .toggle .gradient {
+  background: linear-gradient(to right, #FF9900, #FF6633);
+  -webkit-background-clip: text;
+  background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-weight: 500;
+  line-height: 16px;
+}
+
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.rotate-icon {
+  animation: rotate 2s linear forwards;
+  animation-delay: 2s;
+}
+
+@keyframes growShrink {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.2);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.grow-shrink {
+  animation: growShrink 2s ease-in-out forwards;
 }
 
 #menuSections > ul li a:before {
@@ -205,7 +296,6 @@ body {
 
 #menuSections > ul li.active a {
   background-color: var(--light-500);
-  border-right: 1px solid var(--light-300);
 }
 
 #menuSections > ul li.active a:before {
@@ -214,11 +304,9 @@ body {
 }
 
 #menuSections .toggle:hover,
-#menuSections > ul li a:hover,
-#menuSections .toggle:focus,
-#menuSections > ul li a:focus {
+#menuSections > ul li a:hover
+{
   background: var(--light-500);
-  border-right: 1px solid var(--light-300);
 }
 
 #menuSections > ul li:not(.active) a:hover:before {
@@ -230,6 +318,33 @@ body {
   position: relative;
 }
 
+#layout.menu-compact #menuSections {
+  .section-icon {
+    display: flex;
+    justify-content: center;
+    flex: 1;
+  }
+  .section-text {
+    display: none;
+  }
+  .chevron-icon-box {
+    display: none;
+  }
+  .item-row.hidden-when-collapsed {
+    display: none;
+    & + ul {
+      visibility: visible;
+      li a  {
+        height: 56px;
+      }
+    }
+  }
+  .sections-footer {
+    padding: 16px 0;
+    align-items: center;
+  }
+}
+
 #menuContentOverlay {
   width: var(--menu-overlay-width);
   position: fixed;
@@ -245,6 +360,7 @@ body {
   pointer-events: none;
   z-index: 1;
   transition: opacity 0.3s;
+  overflow-y: auto;
 }
 
 #menuContentOverlay.visible {
@@ -252,12 +368,8 @@ body {
   pointer-events: auto;
 }
 
-#menuContentOverlay > div {
-  flex: 1;
-  overflow: auto;
-}
-
-#menuContent {
+#menuContent,
+#menuInnerContent {
   width: var(--menu-content-width);
   transition: left ease-out var(--menu-animation-duration);
   background-color: var(--light-400);
@@ -269,6 +381,21 @@ body {
   border-top: 1px solid var(--light-300);
 }
 
+#menuInnerContent {
+  left: var(--menu-content-width);
+  border-left: 1px solid var(--light-300);
+}
+
+#menuContent .goBackLink,
+#menuInnerContent .goBackLink {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  margin: 20px;
+  margin-bottom: 16px;
+  gap: 6px;
+}
+
 #layout.menu-content-visible #menuContent {
   left: var(--menu-sections-width);
 }
@@ -297,7 +424,7 @@ body {
   pointer-events: auto;
 }
 
-#modal {
+#modal,  #backdrop .modal-box {
   transform: scale(0);
   display: flex;
   flex-direction: column;
@@ -305,27 +432,32 @@ body {
   width: calc(100% - 60px);
 }
 
-#modal.fit-content {
+#modal.fit-content, #backdrop .modal-box.fit-content {
   width: auto;
 }
 
-#modal.large {
+#modal.full, #backdrop .modal-box.full {
+  width: 100%;
+  height: 100%;
+}
+
+#modal.large, #backdrop .modal-box.large {
   max-width: 1000px;
 }
 
-#modal.medium {
+#modal.medium, #backdrop .modal-box.medium {
   max-width: 800px;
 }
 
-#modal.small {
+#modal.small, #backdrop .modal-box.small {
   max-width: 600px;
 }
 
-#modal.visible {
+#modal.visible, #backdrop.visible .modal-box {
   transform: scale(1);
 }
 
-#rightPanel {
+#rightPanel, #backdrop .right-panel-box {
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -338,25 +470,45 @@ body {
   border-bottom-left-radius: 1rem;
 }
 
-#rightPanel.small {
+#rightPanel.small, #backdrop .right-panel-box.small {
   right: -400px;
   width: 400px;
 }
 
-#rightPanel.medium {
+#rightPanel.medium, #backdrop .right-panel-box.medium {
   right: -600px;
   width: 600px;
 }
 
-#rightPanel.large {
+#rightPanel.large, #backdrop .right-panel-box.large {
   right: -800px;
   width: 800px;
 }
 
-#rightPanel.visible {
+#rightPanel.extra-large, #backdrop .right-panel-box.extra-large {
+  right: -800px;
+  width: 70%;
+}
+
+#rightPanel.visible, #backdrop.visible .right-panel-box {
   right: 0;
 }
 
+#modal .modal-instance,
+#rightPanel .right-panel-instance {
+  flex-direction: column;
+  flex: 1;
+  overflow: hidden;
+  display: none;
+  &.active {
+    display: flex;
+  }
+  &.disabled {
+    pointer-events: none;
+    opacity: 0.7;
+  }
+}
+
 #bottomPanel {
   position: fixed;
   display: flex;
@@ -398,8 +550,11 @@ body {
 }
 
 /* Overlay: toaster */
+.container-toaster {
+  margin-top: var(--header-height);
+}
 
-.main-toaster h1 {
+.main-toaster h2 {
   font-size: 14px;
   font-weight: 500;
   margin: 0 0 8px 0;

package/src/svg/StarFillWithGradient.tsx

@@ -0,0 +1,14 @@
+/* eslint-disable max-len */
+
+export const StarFillWithGradient = ({ className, id, style }: { className?: string, id?: string, style?: React.CSSProperties }) => (
+  <svg viewBox="0 0 512 512"  className={className} id={id} style={style} width="16" height="16"   xmlns="http://www.w3.org/2000/svg">
+    <defs>
+      <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="100%">
+        <stop offset="0%" style={{ 'stopColor':'#FF9900', 'stopOpacity': 1 }}/>
+        <stop offset="100%" style={{ 'stopColor':'#FF6633', 'stopOpacity': 1 }}/>
+      </linearGradient>
+    </defs>
+    <path d="M226.885 21.9523C231.432 9.88404 242.98 1.91992 255.85 1.91992C268.719 1.91992 280.268 9.88408 284.814 21.9523C284.863 22.0812 284.91 22.2105 284.956 22.3403L335.667 165.876L478.048 165.876H478.049C490.986 165.876 502.581 173.922 507.079 186.08C511.579 198.245 508.006 211.912 498.152 220.324C498.075 220.39 497.997 220.456 497.918 220.521L377.676 320.039L428.087 471.216L428.091 471.226C432.349 484.019 427.824 498.078 416.935 505.998C406.055 513.912 391.305 513.892 380.445 505.949L380.435 505.941L255.825 414.67L131.151 505.944L131.075 506C131.045 506.021 131.016 506.042 130.987 506.063C120.124 513.848 105.488 513.783 94.6943 505.902C83.8927 498.015 79.374 484.073 83.5272 471.34C83.5408 471.299 83.5545 471.257 83.5683 471.216L133.979 320.041L13.7166 220.522C13.6378 220.457 13.5595 220.391 13.4817 220.324C3.62771 211.912 0.054518 198.245 4.55486 186.08C9.05287 173.922 20.6475 165.876 33.5842 165.876H33.5857L175.992 165.876L226.745 22.3356C226.791 22.2074 226.837 22.0796 226.885 21.9523Z" />
+  </svg>
+)
+