Skip to content

Commit

Permalink
docs: add masonry working example
Browse files Browse the repository at this point in the history
  • Loading branch information
@astagi
astagi committed Nov 6, 2024
1 parent 8f031c6 commit 089a685
Show file tree
Hide file tree
Showing 4 changed files with 196 additions and 182 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,7 @@
"prettier": "^3.2.5",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-responsive-masonry": "^2.4.1",
"sass": "^1.75.0",
"storybook": "^8.0.5",
"ts-jest": "^29.1.2",
Expand Down
370 changes: 189 additions & 181 deletions stories/Components/ImagesList.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,8 @@ import {
Row
} from '../../src';

import Masonry, { ResponsiveMasonry } from "react-responsive-masonry"

//Non esiste un componente specifico per cui uso GridItem come riferimento per la storia
const meta: Meta<typeof GridItem> = {
title: "Documentazione/Organizzare i contenuti/Liste di Immagini",
Expand Down Expand Up @@ -321,190 +323,196 @@ export const Proporzionale: Story = {
)
};

export const Masonry: Story = {
export const MasonryExample: Story = {
render: () => (
<GridList className='it-image-label-grid it-masonry'>
<div className='card-columns'>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x300/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x500/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x700/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x600/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x500/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x400/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x600/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x500/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x400/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x600/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x500/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x400/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<ResponsiveMasonry
columnsCountBreakPoints={{ 375: 1, 750: 2, 900: 3 }}
>
<Masonry>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x300/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x500/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x700/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x600/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x500/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x400/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x600/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x500/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x400/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x600/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x500/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
<Col xs={12}>
<GridItem>
<a href='#'>
<ResponsiveImage
src='https://placehold.co/400x400/ebebeb/808080/?text=Immagine'
alt='Alternative Text'
title='Image Title'>
<GridItemTextWrapper tag='figcaption' className='figure-caption'>
<GridItemText>Didascalia</GridItemText>
<Icon icon='it-code-circle' size='sm' title='Significato icona' />
</GridItemTextWrapper>
</ResponsiveImage>
</a>
</GridItem>
</Col>
</Masonry>
</ResponsiveMasonry>
</div>
</GridList>
)
Expand Down
Loading

0 comments on commit 089a685

Please sign in to comment.