Skip to content

Commit

Permalink
feat: add icons title for steppers
Browse files Browse the repository at this point in the history
  • Loading branch information
@astagi
astagi committed Feb 11, 2025
1 parent 0408075 commit fff4263
Show file tree
Hide file tree
Showing 4 changed files with 423 additions and 419 deletions.
18 changes: 8 additions & 10 deletions src/Stepper/StepperHeaderElement.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,14 +29,14 @@ export interface StepperHeaderElementProps extends HTMLAttributes<HTMLLIElement>
appendIcon?: string;
/** Icona da mostrare alla sinistra dell'etichetta dello step */
prependIcon?: string;
/** Titolo dell'icona da mostrare alla destra dell'etichetta dello step */
appendIconTitle?: string;
/** Titolo dell'icona da mostrare alla sinistra dell'etichetta dello step */
prependIconTitle?: string;
/** Utilizzare questo attributo per elementi aggiuntivi da mostrare su dispositivi mobile per lo step attivo */
stepperNumber?: ReactNode;
/** Nasconde il bordo inferiore azzurro per lo step */
noLine?: boolean;
/** @deprecated Usare `appendIcon` */
icon?: string;
/** @deprecated Usare `prependIcon` */
iconName?: string;
testId?: string;
}

Expand All @@ -45,8 +45,8 @@ export const StepperHeaderElement: FC<StepperHeaderElementProps> = ({
variant,
appendIcon,
prependIcon,
icon,
iconName,
appendIconTitle,
prependIconTitle,
noLine,
stepperNumber,
testId,
Expand All @@ -61,14 +61,12 @@ export const StepperHeaderElement: FC<StepperHeaderElementProps> = ({
const iconClass = classNames('icon', 'steppers-success');
const spanClass = classNames('steppers-number');

const iconToAppend = appendIcon || icon;
const iconToPrepend = prependIcon || iconName;
return (
<Tag {...attributes} className={wrapperClasses} data-testid={testId}>
{iconToPrepend && <Icon icon={iconToPrepend} />}
{prependIcon && <Icon icon={prependIcon} title={prependIconTitle} />}
{stepperNumber && <span className={spanClass}>{stepperNumber}</span>}
{children}
{iconToAppend && <Icon icon={iconToAppend} className={iconClass} />}
{appendIcon && <Icon icon={appendIcon} title={appendIconTitle} className={iconClass} />}
</Tag>
);
};
235 changes: 117 additions & 118 deletions stories/Components/Stepper/Stepper.Navigation.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,118 +1,117 @@
import type { Meta } from "@storybook/react";
import React from "react";
import { Button, Icon, Progress, StepperContainer, StepperContent, StepperDots, StepperNav } from "../../../src";


const meta: Meta<typeof StepperContainer> = {
title: "Documentazione/Componenti/Stepper/Mobile",
component: StepperContainer
};

export default meta;

//type Story = StoryObj<typeof StepperContainer>;

export const ProgressBar = () => {
return (
<StepperContainer mobile>
<StepperContent>
<p>Contenuto di esempio dello step corrente</p>
</StepperContent>
<StepperNav>
<Button outline color="primary" size="sm" className="steppers-btn-prev">
<Icon icon="it-chevron-left" color="primary" />
Indietro
</Button>
<div className="steppers-progress">
<Progress indeterminate={false} value="33" tag="div" style={{ width: "33%" }} />
</div>
<Button outline color="primary" size="sm" className="steppers-btn-next">
Avanti
<Icon icon="it-chevron-right" color="primary" />
</Button>
</StepperNav>
</StepperContainer>
);
};

export const Pallini = () => {
return (
<StepperContainer mobile>
<StepperContent>
<p>Contenuto di esempio dello step corrente</p>
</StepperContent>
<StepperNav>
<Button outline color="primary" size="sm" className="steppers-btn-prev">
<Icon icon="it-chevron-left" color="primary" />
Indietro
</Button>
<StepperDots>
<li className="done">
<span className="visually-hidden">Step 1 di 6 - Confermato</span>
</li>
<li className="done">
<span className="visually-hidden">Step 2 di 6 - Confermato</span>
</li>
<li className="done">
<span className="visually-hidden">Step 3 di 6 - Confermato</span>
</li>
<li>
<span className="visually-hidden">Step 4 di 6</span>
</li>
<li>
<span className="visually-hidden">Step 5 di 6</span>
</li>
<li>
<span className="visually-hidden">Step 6 di 6</span>
</li>
</StepperDots>
<Button outline color="primary" size="sm" className="steppers-btn-next">
Avanti
<Icon icon="it-chevron-right" color="primary" />
</Button>
</StepperNav>
</StepperContainer>
);
};

export const SaveButton = () => {
return (
<StepperContainer mobile>
<StepperContent>
<p>Contenuto di esempio dello step corrente</p>
</StepperContent>
<StepperNav>
<Button outline color="primary" size="sm" className="steppers-btn-prev">
<Icon icon="it-chevron-left" />
Indietro
</Button>
<Button color="primary" size="sm" className="steppers-btn-save">
Salva
</Button>
<Button outline color="primary" size="sm" className="stepper-btn-next">
Avanti
<Icon icon="it-chevron-right" />
</Button>
</StepperNav>
</StepperContainer>
);
};

export const ConfirmButton = () => {
return (
<StepperContainer mobile>
<StepperContent>
<p>Contenuto di esempio dello step corrente</p>
</StepperContent>
<StepperNav>
<Button outline color="primary" size="sm" className="steppers-btn-prev">
<Icon icon="it-chevron-left" />
Indietro
</Button>
<Button color="primary" size="sm" className="steppers-btn-confirm">
Conferma
</Button>
</StepperNav>
</StepperContainer>
);
};
import type { Meta } from '@storybook/react';
import React from 'react';
import { Button, Icon, Progress, StepperContainer, StepperContent, StepperDots, StepperNav } from '../../../src';

const meta: Meta<typeof StepperContainer> = {
title: 'Documentazione/Componenti/Stepper/Mobile',
component: StepperContainer
};

export default meta;

//type Story = StoryObj<typeof StepperContainer>;

export const ProgressBar = () => {
return (
<StepperContainer mobile>
<StepperContent>
<p>Contenuto di esempio dello step corrente</p>
</StepperContent>
<StepperNav>
<Button outline color='primary' size='sm' className='steppers-btn-prev'>
<Icon icon='it-chevron-left' color='primary' />
Indietro
</Button>
<div className='steppers-progress'>
<Progress indeterminate={false} value='33' tag='div' style={{ width: '33%' }} />
</div>
<Button outline color='primary' size='sm' className='steppers-btn-next'>
Avanti
<Icon icon='it-chevron-right' color='primary' />
</Button>
</StepperNav>
</StepperContainer>
);
};

export const Pallini = () => {
return (
<StepperContainer mobile>
<StepperContent>
<p>Contenuto di esempio dello step corrente</p>
</StepperContent>
<StepperNav>
<Button outline color='primary' size='sm' className='steppers-btn-prev'>
<Icon icon='it-chevron-left' color='primary' />
Indietro
</Button>
<StepperDots>
<li className='done'>
<span className='visually-hidden'>Step 1 di 6 - Confermato</span>
</li>
<li className='done'>
<span className='visually-hidden'>Step 2 di 6 - Confermato</span>
</li>
<li className='done'>
<span className='visually-hidden'>Step 3 di 6 - Confermato</span>
</li>
<li>
<span className='visually-hidden'>Step 4 di 6</span>
</li>
<li>
<span className='visually-hidden'>Step 5 di 6</span>
</li>
<li>
<span className='visually-hidden'>Step 6 di 6</span>
</li>
</StepperDots>
<Button outline color='primary' size='sm' className='steppers-btn-next'>
Avanti
<Icon icon='it-chevron-right' color='primary' />
</Button>
</StepperNav>
</StepperContainer>
);
};

export const SaveButton = () => {
return (
<StepperContainer mobile>
<StepperContent>
<p>Contenuto di esempio dello step corrente</p>
</StepperContent>
<StepperNav>
<Button outline color='primary' size='sm' className='steppers-btn-prev'>
<Icon icon='it-chevron-left' />
Indietro
</Button>
<Button color='primary' size='sm' className='steppers-btn-save'>
Salva
</Button>
<Button outline color='primary' size='sm' className='stepper-btn-next'>
Avanti
<Icon icon='it-chevron-right' />
</Button>
</StepperNav>
</StepperContainer>
);
};

export const ConfirmButton = () => {
return (
<StepperContainer mobile>
<StepperContent>
<p>Contenuto di esempio dello step corrente</p>
</StepperContent>
<StepperNav>
<Button outline color='primary' size='sm' className='steppers-btn-prev'>
<Icon icon='it-chevron-left' />
Indietro
</Button>
<Button color='primary' size='sm' className='steppers-btn-confirm'>
Conferma
</Button>
</StepperNav>
</StepperContainer>
);
};
Loading

0 comments on commit fff4263

Please sign in to comment.