Skip to content

Commit

Permalink
feat: destacado (#217)
Browse files Browse the repository at this point in the history 
* feat: destacado

* fix: organismos-bloque pasa a componentes-bloque de tramites

* fix: se comenta Addons en PanelLarge

* fix: correccion en botones de destacado banner

* fix: modificaciones en accesibilidad

* fix: se agrega clase sticky en bloque de tramite, se modifica visualizacion de destacado conjunto
  • Loading branch information
@victorianastasi
victorianastasi committed Nov 23, 2023
1 parent 93d8004 commit 1ef6a32
Show file tree
Hide file tree
Showing 17 changed files with 681 additions and 147 deletions.
5 changes: 4 additions & 1 deletion .storybook/preview.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,12 +16,16 @@ const headers = [
'componentes-audio',
'componentes-banner',
'componentes-barra-de-progreso',
'componentes-bloque-de-trámite',
'componentes-botones--button-types',
'componentes-botones-estados',
'componentes-botones',
'componentes-colapsable',
'componentes-desplegables-de-navegación',
'componentes-desplegables-de-selección',
'componentes-destacado-banner',
'componentes-destacado-conjunto',
'componentes-destacado-lateral',
'componentes-enlace',
'componentes-etiqueta',
'componentes-galería',
Expand Down Expand Up @@ -64,7 +68,6 @@ const headers = [
'formulario-validación',
'plantillas-plantilla',
'organismos-accesos',
'organismos-bloque',
'organismos-footer-pie-de-página',
'organismos-header-encabezado-con-buscador',
'organismos-header-encabezado-sin-buscador',
Expand Down
4 changes: 1 addition & 3 deletions src/organisms/Block/Block.stories.scss → src/components/Block/Block.stories.scss
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,5 @@
.storybook__container-block {
width: 100%;
max-width: 340px;
display: flex;
flex-direction: column;
gap: 1.5rem;
position: relative;
}
35 changes: 22 additions & 13 deletions src/organisms/Block/Block.stories.tsx → src/components/Block/Block.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { Block } from '.';

// Configuración general del componente
export default {
title: 'Organismos|Bloque',
title: 'Componentes|Bloque de trámite',
decorators: [withA11y]
};

Expand Down Expand Up @@ -39,8 +39,7 @@ const PROGRESS_BAR_BLOCK = {
export const ButtonBlockTitle = (): JSX.Element => {
return (
<div className="storybook__container-block">
<Block title="Iniciá el trámite y completá todos los pasos" button={BUTTON_BLOCK_LINK}></Block>
<Block title="Iniciá el trámite y completá todos los pasos" button={BUTTON_BLOCK_LINK} isLight={true}></Block>
<Block title="Iniciá el trámite y completá todos los pasos" button={BUTTON_BLOCK_LINK} positionSticky="48px" />
</div>
);
};
Expand All @@ -50,15 +49,12 @@ ButtonBlockTitle.story = { name: 'Con título' };
export const ButtonBlockText = (): JSX.Element => {
return (
<div className="storybook__container-block">
<Block
title="Iniciá el trámite y completá todos los pasos"
text="Si tenés un trámite iniciado podés continuarlo desde acá."
button={BUTTON_BLOCK}></Block>
<Block
title="Iniciá el trámite y completá todos los pasos"
text="Si tenés un trámite iniciado podés continuarlo desde acá."
button={BUTTON_BLOCK}
isLight={true}></Block>
positionSticky="48px"
/>
</div>
);
};
Expand All @@ -68,17 +64,30 @@ ButtonBlockText.story = { name: 'Con bajada' };
export const ButtonBlockProgressBar = (): JSX.Element => {
return (
<div className="storybook__container-block">
<Block
title="Este es tu progreso en el trámite"
button={BUTTON_PROGRESS_BAR_BLOCK}
blockProgressBar={PROGRESS_BAR_BLOCK}></Block>
<Block
title="Este es tu progreso en el trámite"
button={BUTTON_PROGRESS_BAR_BLOCK}
blockProgressBar={PROGRESS_BAR_BLOCK}
isLight={true}></Block>
positionSticky="48px"
/>
</div>
);
};

ButtonBlockProgressBar.story = { name: 'Con barra de progreso' };

export const ButtonBlockSticky = (): JSX.Element => {
return (
<div className="storybook__container-block">
<Block
title="Iniciá el trámite y completá todos los pasos"
text="Si tenés un trámite iniciado podés continuarlo desde acá."
button={BUTTON_BLOCK}
isLight={true}
positionSticky="48px"
/>
</div>
);
};

ButtonBlockSticky.story = { name: 'Con fondo' };
7 changes: 4 additions & 3 deletions src/organisms/Block/index.tsx → src/components/Block/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,15 +15,16 @@ interface ButtonBlockProps {
blockProgressBar?: ProgressBarProps;
button?: BlockButtonProps;
isLight?: boolean;
positionSticky?: string;
}

export const Block: React.FC<ButtonBlockProps> = (props: React.PropsWithChildren<ButtonBlockProps>) => {
const { title, text, blockProgressBar, button, isLight } = props;
const { title, text, blockProgressBar, button, isLight, positionSticky } = props;

const BlockClasses = classNames('card', 'card-block', { 'bg-light': isLight });
const BlockClasses = classNames('card', 'card-block', { 'bg-light': isLight }, { 'position-sticky': positionSticky });

return (
<div className={BlockClasses.trim()}>
<div className={BlockClasses.trim()} style={positionSticky !== undefined ? { top: positionSticky } : undefined}>
<div className="card-body">
{title && <h4 className="block-title">{title}</h4>}
{text && <p className="block-text">{text}</p>}
Expand Down
195 changes: 195 additions & 0 deletions src/components/Panel/HighlightedPanelBanner.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,195 @@
// Base
import React from 'react';

// Addons
import { withA11y } from '@storybook/addon-a11y';

// Components
import { TITLE_HIGHLIGHTED, DESCRIPTION_HIGHLIGHTED, PICTURE_HIGHLIGHTED, VIDEO, IFRAME } from './Panel.constants';
import { HighlightedPanel } from '.';

// Configuración general del componente
export default {
title: 'Componentes|Destacado/Banner',
decorators: [withA11y]
};

export const WithImage = (): JSX.Element => {
return (
<>
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED} picture={PICTURE_HIGHLIGHTED}>
<a className="btn btn-primary btn-lg" href="#">
Botón
</a>
<a className="btn btn-secondary btn-lg" href="#">
Botón
</a>
</HighlightedPanel>
<br />
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED} picture={PICTURE_HIGHLIGHTED}>
<a className="btn btn-primary btn-lg" href="#">
Botón
</a>
</HighlightedPanel>
<br />
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED} picture={PICTURE_HIGHLIGHTED}>
<a className="btn btn-secondary btn-lg btn-icon" href="#" target="_blank" download>
<span className="material-icons-round">file_download</span>
Descargar
</a>
</HighlightedPanel>
<br />
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED} picture={PICTURE_HIGHLIGHTED}>
<a className="external" href="#" target="_blank">
Enlace externo
</a>
</HighlightedPanel>
<br />
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED} picture={PICTURE_HIGHLIGHTED}>
<a href="#" className="list-group-item item-sm">
<i className="bx bxs-info-circle"></i>
<div className="access-content">
<span className="access-title">Acceso</span>
</div>
</a>
</HighlightedPanel>
<br />
</>
);
};
WithImage.story = { name: 'Con imagen' };

export const WithVideo = (): JSX.Element => {
return (
<>
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED} video={VIDEO}>
<a className="btn btn-primary btn-lg" href="#">
Botón
</a>
<a className="btn btn-secondary btn-lg" href="#">
Botón
</a>
</HighlightedPanel>
<br />
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED} iframe={IFRAME}>
<a className="btn btn-primary btn-lg" href="#">
Botón
</a>
<a className="btn btn-secondary btn-lg" href="#">
Botón
</a>
</HighlightedPanel>
</>
);
};
WithVideo.story = { name: 'Con video' };

export const WithoutMultimedia = (): JSX.Element => {
return (
<>
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED}>
<a className="btn btn-primary btn-lg" href="#">
Botón
</a>
<a className="btn btn-secondary btn-lg" href="#">
Botón
</a>
</HighlightedPanel>
<br />
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED}>
<a className="btn btn-primary btn-lg" href="#">
Botón
</a>
</HighlightedPanel>
<br />
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED}>
<a className="btn btn-secondary btn-lg btn-icon" href="#" target="_blank" download>
<span className="material-icons-round">file_download</span>
Descargar
</a>
</HighlightedPanel>
<br />
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED}>
<a className="external" href="#" target="_blank">
Enlace externo
</a>
</HighlightedPanel>
<br />
<HighlightedPanel title={TITLE_HIGHLIGHTED} description={DESCRIPTION_HIGHLIGHTED}>
<a href="#" className="list-group-item item-sm">
<i className="bx bxs-info-circle"></i>
<div className="access-content">
<span className="access-title">Acceso</span>
</div>
</a>
</HighlightedPanel>
<br />
</>
);
};
WithoutMultimedia.story = { name: 'Sin Multimedia' };

export const WithBackground = (): JSX.Element => {
return (
<>
<HighlightedPanel
title={TITLE_HIGHLIGHTED}
description={DESCRIPTION_HIGHLIGHTED}
picture={PICTURE_HIGHLIGHTED}
bgColor="light">
<a className="btn btn-primary btn-lg" href="#">
Botón
</a>
<a className="btn btn-secondary btn-lg" href="#">
Botón
</a>
</HighlightedPanel>
<br />
<HighlightedPanel
title={TITLE_HIGHLIGHTED}
description={DESCRIPTION_HIGHLIGHTED}
picture={PICTURE_HIGHLIGHTED}
bgColor="light">
<a className="btn btn-primary btn-lg" href="#">
Botón
</a>
</HighlightedPanel>
<br />
<HighlightedPanel
title={TITLE_HIGHLIGHTED}
description={DESCRIPTION_HIGHLIGHTED}
picture={PICTURE_HIGHLIGHTED}
bgColor="light">
<a className="btn btn-secondary btn-lg btn-icon" href="#" target="_blank" download>
<span className="material-icons-round">file_download</span>
Descargar
</a>
</HighlightedPanel>
<br />
<HighlightedPanel
title={TITLE_HIGHLIGHTED}
description={DESCRIPTION_HIGHLIGHTED}
picture={PICTURE_HIGHLIGHTED}
bgColor="light">
<a className="external" href="#" target="_blank">
Enlace externo
</a>
</HighlightedPanel>
<br />
<HighlightedPanel
title={TITLE_HIGHLIGHTED}
description={DESCRIPTION_HIGHLIGHTED}
picture={PICTURE_HIGHLIGHTED}
bgColor="light">
<a href="#" className="list-group-item item-sm">
<i className="bx bxs-info-circle"></i>
<div className="access-content">
<span className="access-title">Acceso</span>
</div>
</a>
</HighlightedPanel>
<br />
</>
);
};
WithBackground.story = { name: 'Con fondo' };

0 comments on commit 1ef6a32

Please sign in to comment.