@stack-spot/portal-layout 2.34.1 → 2.35.0-beta.1

package/src/components/tour/StepNavigation.tsx

@@ -35,7 +35,9 @@ export const StepNavigation = ({ stepKey, nextButton, prevButton }: NavigationPr
   const t = useTranslate(translations)
 
   return <Flex w={12} px={5} py={2} mt="-1px" bg="inverse.500" justifyContent="space-between" alignItems="center">
-    <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
+    { steps.length > 1 &&
+      <Text appearance="microtext1" colorScheme="inverse.contrastText">{currentStep + 1} {t.of} {steps.length}</Text>
+    }
     <Flex sx={{ gap: '8px' }}>
       {currentStep >= 1 &&
         <Button sx={{ paddingInline: '20px' }} onClick={() => {

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: {
@@ -25,6 +25,6 @@ const dictionary = {
 export const useDictionary = () => useTranslate(dictionary)
 
 export function getDictionary() {
-  const language = getLanguage()
+  const language = getLanguage(ptEn)
   return dictionary[language]
 }

package/src/elements.ts

@@ -12,6 +12,7 @@ export const elementIds = {
   header: 'header',
   menu: 'menu',
   menuContent: 'menuContent',
+  menuInnerContent: 'menuInnerContent',
   menuSections: 'menuSections',
   accessibilityAnnouncer: 'accessibilityAnnouncer',
 } as const

package/src/index.ts

@@ -12,6 +12,7 @@ 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'

package/src/layout.css

@@ -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;
 }
 
@@ -363,7 +368,8 @@ body {
   pointer-events: auto;
 }
 
-#menuContent {
+#menuContent,
+#menuInnerContent {
   width: var(--menu-content-width);
   transition: left ease-out var(--menu-animation-duration);
   background-color: var(--light-400);
@@ -375,7 +381,13 @@ body {
   border-top: 1px solid var(--light-300);
 }
 
-#menuContent .goBackLink {
+#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;