Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Corretto componente dimmer #1091

Merged
merged 4 commits into from
Sep 10, 2024
Merged

Corretto componente dimmer #1091

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
d6a0b4e
feat: rivisto componente dimmer
Virtute90 Aug 20, 2024
5c1dd4f
docs: aggiornata/modificata documentazione
Virtute90 Aug 20, 2024
b426a2b
test: aggiornato snap
Virtute90 Aug 20, 2024
d04dfbb
Merge branch 'main' into feat/dimmer
Virtute90 Aug 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 25 additions & 15 deletions src/Dimmer/Dimmer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,17 @@
import React, { FC, HTMLAttributes } from 'react';
import classNames from 'classnames';
import React, { FC, HTMLAttributes } from 'react';

import { Icon } from '../Icon/Icon';

export interface DimmerProps extends HTMLAttributes<HTMLElement> {
/** Il nome dell'icona da mostrare. Per una lista completa vedi: @TODO-URL */
/** Il nome dell'icona da mostrare */
icon?: string;
/** Le varianti di colore definite in Bootstrap Italia */
color?: 'success' | 'warning' | 'danger' | 'note' | 'important' | string;
color?: 'primary' | 'secondary';
/** Classi aggiuntive da usare per il componente Dimmer */
className?: string;
/** Mostra il wrapper */
show?: boolean;
/**
* Classi aggiuntive da usare per il componente contenitore del Dimmer
* Per replicare il comportamento precedente, in cui `className` veniva applicato anche al wrapper,
Expand All @@ -19,20 +21,28 @@ export interface DimmerProps extends HTMLAttributes<HTMLElement> {
testId?: string;
}

export const Dimmer: FC<DimmerProps> = ({ icon, color, className, wrapperClassName, testId, ...attributes }) => {
const { children, ...rest } = attributes;
const classes = classNames('dimmer', wrapperClassName === true ? className : wrapperClassName, {
[`dimmer-${color}`]: color
});
const innerClasses = classNames('dimmer-inner', className);
const dimmerIcon = icon && (
<div className='dimmer-icon'>
<Icon icon={icon} />
</div>
);
export const Dimmer: FC<DimmerProps> = ({
icon,
color,
className,
show = true,
wrapperClassName,
testId,
...attributes
}) => {
const { children, ...rest } = attributes,
classes = classNames('dimmer fade', { show: show }, wrapperClassName === true ? className : wrapperClassName, {
[`dimmer-${color}`]: color
}),
innerClasses = classNames('dimmer-inner', className),
dimmerIcon = icon && (
<div className='dimmer-icon'>
<Icon icon={icon} />
</div>
);

return (
<div className={classes} {...rest} style={{ display: 'flex' }} data-testid={testId}>
<div className={classes} {...rest} data-testid={testId} aria-hidden={show ? undefined : true}>
<div className={innerClasses} {...rest}>
{dimmerIcon}
{children}
Expand Down
152 changes: 55 additions & 97 deletions stories/Components/Dimmer.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,20 +1,29 @@
import { Meta, StoryObj } from '@storybook/react';
import React from 'react';
import { Button, Card, CardBody, CardText, CardTitle, Dimmer, DimmerButtons, Fade } from '../../src';
import { Button, Card, CardBody, CardText, CardTitle, Dimmer, DimmerButtons } from '../../src';

const colors = ['primary', 'secondary'];

const meta: Meta<typeof Dimmer> = {
title: "Documentazione/Componenti/Dimmer",
component: Dimmer,
title: 'Documentazione/Componenti/Dimmer',
component: Dimmer
};

export default meta;

type Story = StoryObj<typeof Dimmer>;

export const Esempi: Story = {
render: () => (
parameters: {
docs: {
controls: {
include: ['color', 'show', 'icon']
}
}
},
render: ({ ...args }) => (
<div>
<div className='row'>
<div className='row dimmable'>
<div className='col-12 col-lg-4'>
{/* start card */}
<Card>
Expand Down Expand Up @@ -61,84 +70,37 @@ export const Esempi: Story = {
</Card>
</div>
</div>
<Fade in={true} tag='div' className='mt-3'>
<Dimmer icon='it-unlocked'>
<p>
Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo
donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
</p>
</Dimmer>
</Fade>
<Dimmer {...args}>
<p>
Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo
donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
</p>
</Dimmer>
</div>
)
};

export const ColorePrimario: Story = {
render: () => (
<div>
<div className='row'>
<div className='col-12 col-lg-4'>
{/* start card */}
<Card>
<CardBody>
<CardTitle tag='h5'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
</CardTitle>
<CardText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</CardText>
</CardBody>
</Card>
{/* end card */}
</div>

<div className='col-12 col-lg-4 d-none d-lg-block'>
{/* start card */}
<Card>
<CardBody>
<CardTitle tag='h5'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
</CardTitle>
<CardText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</CardText>
</CardBody>
</Card>
{/* end card */}
</div>
<div className='col-12 col-lg-4 d-none d-lg-block'>
{/* start card */}
<Card>
<CardBody>
<CardTitle tag='h5'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor…
</CardTitle>
<CardText>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua.
</CardText>
</CardBody>
</Card>
</div>
</div>
<Fade in={true} tag='div' className='mt-3'>
<Dimmer color='primary' icon='it-unlocked'>
<p>
Platea dictumst vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras. Dictum sit amet justo
donec enim diam vulputate ut. Eu nisl nunc mi ipsum faucibus.
</p>
</Dimmer>
</Fade>
</div>
)
),
args: {
color: 'primary',
show: true,
icon: 'it-unlocked'
},
argTypes: {
color: {
control: 'radio',
options: colors
},
show: {
control: 'boolean'
},
icon: {
control: 'text'
}
}
};

export const DimmerConAzioni: Story = {
render: () => (
<div>
<div className='col'>
<div className='col dimmable'>
<div className='col-12 col-lg-4'>
{/* start card */}
<Card>
Expand Down Expand Up @@ -170,25 +132,23 @@ export const DimmerConAzioni: Story = {
{/* end card */}
</div>
</div>
<Fade in={true} tag='div' className='mt-3'>
<Dimmer icon='it-unlocked'>
<h4>Titolo Dimmer</h4>
<DimmerButtons>
<Button color='primary' outline>
Azione secondaria
</Button>
<Button color='primary'>Azione primaria</Button>
</DimmerButtons>
</Dimmer>
</Fade>
<Dimmer icon='it-unlocked'>
<h4>Titolo Dimmer</h4>
<DimmerButtons>
<Button color='primary' outline>
Azione secondaria
</Button>
<Button color='primary'>Azione primaria</Button>
</DimmerButtons>
</Dimmer>
</div>
)
};

export const DimmerConAzioniColorePrimario: Story = {
render: () => (
<div>
<div className='col'>
<div className='col dimmable'>
<div className='col-12 col-lg-4'>
{/* start card */}
<Card>
Expand Down Expand Up @@ -220,14 +180,12 @@ export const DimmerConAzioniColorePrimario: Story = {
{/* end card */}
</div>
</div>
<Fade in={true} tag='div' className='mt-3'>
<Dimmer color='primary' icon='it-unlocked'>
<h4>Titolo Dimmer</h4>
<DimmerButtons single>
<Button color='primary'>Azione primaria</Button>
</DimmerButtons>
</Dimmer>
</Fade>
<Dimmer color='primary' icon='it-unlocked'>
<h4>Titolo Dimmer</h4>
<DimmerButtons single>
<Button color='primary'>Azione primaria</Button>
</DimmerButtons>
</Dimmer>
</div>
)
};
25 changes: 12 additions & 13 deletions stories/Documentation/Dimmer.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { ArgTypes, Canvas, Meta } from '@storybook/blocks';
import { Dimmer } from '../../src';
import { ArgTypes, Canvas, Controls, Meta } from '@storybook/blocks';
import { Dimmer, DimmerButtons } from '../../src';
import * as DimmerStories from '../Components/Dimmer.stories';

<Meta of={DimmerStories} />
Expand All @@ -8,34 +8,33 @@ import * as DimmerStories from '../Components/Dimmer.stories';

## Un componente per focalizzare l’attenzione su un contenuto

Un Dimmer occupa tutta l’altezza e la larghezza dell’elemento all’interno del quale è contenuto.
Un Dimmer occupa tutta l’altezza e la larghezza dell’elemento all’interno del quale è contenuto, l’elemento contenitore deve avere la classe `.dimmable`

### Esempio
### Esempio interattivo

Il componente `Dimmer` può contenere del testo, che può essere preceduto da un'icona, come da esempio:
Il componente `Dimmer` può contenere del testo, può essere preceduto da un'icona e può avere diversi colori; puoi eseguire delle prove con i controlli sotto al canvas.

<Canvas of={DimmerStories.Esempi} />

#### Colore primario

Impostando l'attributo `color="primary"` si ottiene una versione con sfondo di colore primario.

<Canvas of={DimmerStories.ColorePrimario} />
<Controls of={DimmerStories.Esempi} />

### Dimmer con Azioni

Un Dimmer può contenere tasti collegati ad azioni ed un titolo descrittivo.

<Canvas of={DimmerStories.DimmerConAzioni} />

#### Colore primario
#### Colore primario con azioni

Impostando l'attributo `color="primary"` si ottiene una versione con sfondo di colore primario.

<Canvas of={DimmerStories.DimmerConAzioniColorePrimario} />

## Argomenti componente

## Dimmer
### Dimmer

<ArgTypes of={Dimmer} />

### DimmerButton

<ArgTypes of={DimmerButtons} />
Loading
Loading