Skip to content

Commit

Permalink
Merge branch 'italia:main' into feat/eslint-v9
Browse files Browse the repository at this point in the history
  • Loading branch information
@Virtute90
Virtute90 authored Sep 12, 2024
2 parents de83310 + 548608a commit 916c7a7
Show file tree
Hide file tree
Showing 4 changed files with 164 additions and 333 deletions.
40 changes: 25 additions & 15 deletions src/Dimmer/Dimmer.tsx
View file
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
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
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

0 comments on commit 916c7a7

Please sign in to comment.