[UIK-3194][wizard] added StepTitle component

semcore/wizard/__tests__/wizard.browser-test.tsx

@@ -259,6 +259,34 @@ test.describe(`${TAG.VISUAL}`, () => {
         await expect(page).toHaveScreenshot();
       });
     });
+
+    test('Verify long first step title wraps inside content', {
+      tag: [
+        TAG.PRIORITY_HIGH,
+        '@wizard',
+        '@typography',
+        '@base-components'],
+    },
+    async ({ page }) => {
+      const firstStepTitle = 'PersonalInfovfdnvmdfnbmvfdnbnnmdlymmvdvd'.repeat(3);
+
+      await loadPage(page, 'stories/components/wizard/tests/examples/steps_and_buttons_states.tsx', 'en', {
+        firstStepTitle,
+      });
+
+      await locators.button(page).click();
+      await locators.button(page, 'Close').waitFor({ state: 'visible' });
+
+      const title = page.getByRole('heading', { level: 3, name: firstStepTitle });
+      await expect(title).toBeVisible();
+
+      const titleBox = await title.boundingBox();
+      const contentBox = await locators.contentPanel(page).boundingBox();
+
+      expect(titleBox).not.toBeNull();
+      expect(contentBox).not.toBeNull();
+      expect(titleBox!.x + titleBox!.width).toBeLessThanOrEqual(contentBox!.x + contentBox!.width);
+    });
   });
 
   test('Verify WizardContent is not right rounded when noSidebar=false', {

semcore/wizard/package.json

@@ -18,7 +18,8 @@
   },
   "dependencies": {
     "@semcore/button": "^17.2.0",
-    "@semcore/modal": "^17.2.0"
+    "@semcore/modal": "^17.2.0",
+    "@semcore/typography": "^17.2.0"
   },
   "peerDependencies": {
     "@semcore/base-components": "^17.2.0",

semcore/wizard/src/Wizard.tsx

@@ -11,6 +11,7 @@ import ArrowLeft from '@semcore/icon/ArrowLeft/m';
 import ArrowRight from '@semcore/icon/ArrowRight/m';
 import CheckM from '@semcore/icon/Check/m';
 import Modal from '@semcore/modal';
+import { Text } from '@semcore/typography';
 import React from 'react';
 
 import style from './style/wizard.shadow.css';
@@ -354,6 +355,15 @@ function StepNext(props: Required<WizardStepNextProps> & IRootComponentProps) {
   );
 }
 
+function StepTitle(props: Intergalactic.InternalTypings.InferChildComponentProps<WizardType, typeof WizardRoot, 'StepTitle'>) {
+  const SWizardStepTitle = Root;
+  const { styles } = props;
+
+  return sstyled(styles)(
+    <SWizardStepTitle render={Text} tag='h3' size={500} />,
+  );
+}
+
 /**
  * Wizard
  *
@@ -366,6 +376,7 @@ const Wizard = createComponent<
   Sidebar,
   Content,
   Step,
+  StepTitle,
   Stepper,
   StepBack,
   StepNext,

semcore/wizard/src/Wizard.types.ts

@@ -3,6 +3,7 @@ import type { ButtonProps } from '@semcore/button';
 import type { Intergalactic } from '@semcore/core';
 import type { useI18n } from '@semcore/core/lib/utils/enhances/WithI18n';
 import type { ModalProps } from '@semcore/modal';
+import type { Text, NSText } from '@semcore/typography';
 import type React from 'react';
 
 /** Ordered step position from 0 */
@@ -137,6 +138,9 @@ export type WizardDefaultProps = {
   locale: 'en';
 };
 
+// Need this for API page in docs
+export type WizardStepTitleProps = NSText.Props;
+
 export type IntergalacticWizardStepperComponent<PropsExtending = {}> = (<
   Tag extends Intergalactic.Tag = 'div',
 >(
@@ -148,6 +152,7 @@ Intergalactic.InternalTypings.ComponentAdditive<'div', 'div', WizardStepperProps
 export type WizardType = Intergalactic.Component<'div', WizardProps> & {
   Sidebar: Intergalactic.Component<'div', WizardSidebarProps>;
   Step: Intergalactic.Component<'div', WizardStepProps>;
+  StepTitle: typeof Text;
   Stepper: IntergalacticWizardStepperComponent;
   Content: Intergalactic.Component<'div', WizardContentProps>;
   StepBack: Intergalactic.Component<'button', WizardStepBackProps>;

semcore/wizard/src/style/wizard.shadow.css

@@ -97,10 +97,18 @@ SStepDescription {
 
 SContent {
   padding: var(--intergalactic-spacing-10x, 40px);
-  width: 100%;
+  overflow: hidden;
+  flex: 1;
   border-radius: 0 var(--intergalactic-modal-rounded, 14px) var(--intergalactic-modal-rounded, 14px)
     0;
   background: var(--intergalactic-bg-primary-neutral, oklch(1 0 0));
+
+  SWizardStepTitle {
+    display: block;
+    word-break: break-word;
+    font-weight: var(--intergalactic-semi-bold, 600);
+    margin-bottom: var(--intergalactic-spacing-5x, 20px);
+  }
 }
 SContent[noSidebar] {
   border-radius: var(--intergalactic-modal-rounded, 14px);

stories/components/wizard/docs/examples/basic_example.tsx

@@ -1,4 +1,4 @@
-import { Flex } from '@semcore/ui/base-components';
+import { Box, Flex } from '@semcore/ui/base-components';
 import Button from '@semcore/ui/button';
 import { Text } from '@semcore/ui/typography';
 import Wizard from '@semcore/ui/wizard';
@@ -30,19 +30,19 @@ const Demo = () => {
         </Wizard.Sidebar>
         <Wizard.Content tag={Flex} direction='column' justifyContent='space-between'>
           <Wizard.Step step={1}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[0].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Wizard.Step step={2}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[1].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Wizard.Step step={3}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[2].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Flex mt={5}>
             {step > 1 && (

stories/components/wizard/docs/examples/custom_step.tsx

@@ -7,11 +7,11 @@ import React from 'react';
 
 const Step1 = React.forwardRef(function (_props, ref: React.Ref<HTMLDivElement>) {
   return (
-    <Flex ref={ref} direction='column' gap={4}>
-      <Text size={500} tag='h3'>
+    <Flex ref={ref} direction='column'>
+      <Wizard.StepTitle>
         Keywords
-      </Text>
-      <Input>
+      </Wizard.StepTitle>
+      <Input mb={4}>
         <Input.Value placeholder='Keyword 1' aria-label='Keyword 1' />
       </Input>
       <Input>
@@ -57,10 +57,10 @@ const Demo = () => {
             }}
           </Wizard.Step>
           <Wizard.Step step={3}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               Final step
-            </Text>
-            <Text tag='p' mt={2}>
+            </Wizard.StepTitle>
+            <Text tag='p'>
               Congratulations on passing all the steps!
             </Text>
           </Wizard.Step>

stories/components/wizard/docs/examples/custom_stepper.tsx

@@ -87,9 +87,9 @@ const Demo = () => {
             </RadioGroup>
           </Wizard.Step>
           <Wizard.Step step={4}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               Final step
-            </Text>
+            </Wizard.StepTitle>
             <Text tag='p' mt={2}>
               Congratulations on passing all the steps!
             </Text>

stories/components/wizard/tests/Wizard.stories.tsx

@@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 
 import FocusNextPrevExample from './examples/focus-next-prev';
 import SidebarAsComponentExample, { defaultExampleNoSideBarProps } from './examples/sidebar-as-component';
-import SteppersAndButtonsStatesExample from './examples/steps_and_buttons_states';
+import SteppersAndButtonsStatesExample, { defaultProps as steppersAndButtonsStatesProps } from './examples/steps_and_buttons_states';
 import WithScrollAreaExample from './examples/with-scroll-area';
 import WizardContentExample from './examples/wizard-content';
 
@@ -15,8 +15,17 @@ export default meta;
 
 type Story = StoryObj<typeof Wizard>;
 
-export const SteppersAndButtonsStates: Story = {
+export const SteppersAndButtonsStates: StoryObj<typeof steppersAndButtonsStatesProps> = {
   render: SteppersAndButtonsStatesExample,
+  argTypes: {
+    firstStepTitle: {
+      control: { type: 'text' },
+    },
+    ellipsis: {
+      control: { type: 'boolean' },
+    },
+  },
+  args: steppersAndButtonsStatesProps,
 };
 
 export const WizardContent: Story = {

stories/components/wizard/tests/examples/focus-next-prev.tsx

@@ -62,19 +62,19 @@ const Demo = () => {
         </Wizard.Sidebar>
         <Wizard.Content tag={Flex} direction='column' justifyContent='space-between'>
           <Wizard.Step step={1}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[0].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Wizard.Step step={2}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[1].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Wizard.Step step={3}>
-            <Text size={500} tag='h3'>
+            <Wizard.StepTitle>
               {steps[2].title}
-            </Text>
+            </Wizard.StepTitle>
           </Wizard.Step>
           <Flex mt={5}>
             {step > 1 && (

stories/components/wizard/tests/examples/sidebar-as-component.tsx

@@ -25,9 +25,9 @@ const Demo = (props: WizardContentProps) => {
         <Wizard.Content tag={Flex} direction='column' justifyContent='space-between' noSidebar={props.noSidebar}>
           {steps.map((s, i) => (
             <Wizard.Step key={s.title} step={i + 1}>
-              <Text size={500} tag='h3'>
+              <Wizard.StepTitle>
                 {s.title}
-              </Text>
+              </Wizard.StepTitle>
             </Wizard.Step>
           ))}