Skip to content

Commit 1d9aa23

Browse files
JonathangarridoJonathangarrido
authored
fix(PDYE-1327): modifico como se estructuran los botones en los modals (#737)
1 parent 61c9030 commit 1d9aa23

File tree

11 files changed

+473
-425
lines changed

11 files changed

+473
-425
lines changed

‎src/documentation/components/Organisms/Modals.tsx

Lines changed: 232 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,248 @@
11
import { useDisclosure } from '@chakra-ui/react'
2-
import { BtnPrimary } from '@/molecules'
3-
import { Modal, ModalAlertNew } from '@/organisms'
2+
3+
import { BtnLink, BtnPrimary, BtnSecondary } from '@/molecules'
4+
import {
5+
Modal,
6+
ModalAlertNew,
7+
ModalAlertButtons,
8+
ModalButtons,
9+
ModalContent,
10+
} from '@/organisms/Modals/'
411

512
export const ModalDemo = ({
613
type,
714
}: {
815
type?:
9-
| 'inside'
1016
| 'withoutButtons'
17+
| 'inside'
18+
| 'buttonsOutside'
1119
| 'buttonsCenter'
1220
| 'buttonsColumn'
13-
| 'buttonsInside'
1421
| 'fixedSubtitle'
1522
| 'withoutMargin'
1623
| 'closeOnOverlayClick'
1724
}): JSX.Element => {
25+
if (type === 'withoutButtons') return <ModalDemoWithoutButtons />
26+
if (type === 'inside') return <ModalDemoInside />
27+
if (type === 'buttonsOutside') return <ModalDemoButtonsOutside />
28+
if (type === 'buttonsCenter') return <ModalDemoButtonsCenter />
29+
if (type === 'buttonsColumn') return <ModalDemoButtonsColumn />
30+
if (type === 'fixedSubtitle') return <ModalDemoFixedSubtitle />
31+
if (type === 'withoutMargin') return <ModalDemoWithoutMargin />
32+
if (type === 'closeOnOverlayClick') return <ModalDemoCloseOnOverlayClick />
33+
34+
return <ModalDemoDefault />
35+
}
36+
37+
const text = `alumnos, además de definir el uso de la plataforma de estudio. 1) El material del
38+
programa de estudio estará disponible en una plataforma tecnológica a la que cada
39+
alumno podrá acceder en la siguiente dirección: http://cursos.eclass.cl 2) Las
40+
credenciales de acceso que recibe el alumno para ingresar a su programa de estudio,
41+
son personales e intransferibles. 3) Al aceptar estos términos y condiciones, el
42+
alumno se compromete a realizar el programa en el que se encuentra inscrito y a
43+
revisar los siguientes documentos: Reglamento Académico, Manual del Alumno e
44+
Información del Programa.Estos documentos estarán disponibles en la plataforma de
45+
estudio, y contienen toda la información académica del programa. 4) El alumno se
46+
compromete a utilizar los materiales y medios tecnológicos de eClass exclusivamente
47+
con fines educativos en el marco del programa de estudio. Se deja constancia que la
48+
alumnos, además de definir el uso de la plataforma de estudio. 5) El material del
49+
programa de estudio estará disponible en una plataforma tecnológica a la que cada
50+
alumno podrá acceder en la siguiente dirección: http://cursos.eclass.cl`
51+
52+
const ModalDemoDefault = (): JSX.Element => {
1853
const { isOpen, onOpen, onClose } = useDisclosure()
1954

20-
const name = {
21-
default: 'Open Modal',
22-
withoutButtons: 'Sin botones (withoutButtons)',
23-
buttonsCenter: 'Con boton centrado (buttonsCenter)',
24-
buttonsColumn: 'Botones en mobile no pasan a columas (buttonsColumn)',
25-
buttonsInside: 'Botones dentro del contenido (buttonsInside)',
26-
fixedSubtitle: 'Subtitulo fijo (fixedSubtitle="")',
27-
withoutMargin: 'Sin margin (withoutMargin)',
28-
closeOnOverlayClick: 'Cerrar solo en botones (closeOnOverlayClick)',
29-
inside: 'Scroll dentro del modal (inside)',
30-
}
55+
return (
56+
<>
57+
<BtnPrimary onClick={onOpen}>Open Modal11111</BtnPrimary>
58+
<Modal isOpen={isOpen} onClose={onClose} title="Confirmación">
59+
<ModalContent>
60+
<p>{text}</p>
61+
<ModalButtons>
62+
<BtnPrimary onClick={onClose}>Guardar</BtnPrimary>
63+
<BtnSecondary onClick={onClose}>Cancelar</BtnSecondary>
64+
</ModalButtons>
65+
</ModalContent>
66+
</Modal>
67+
</>
68+
)
69+
}
70+
71+
const ModalDemoWithoutButtons = (): JSX.Element => {
72+
const { isOpen, onOpen, onClose } = useDisclosure()
73+
74+
return (
75+
<>
76+
<BtnPrimary onClick={onOpen}>Sin botones</BtnPrimary>
77+
<Modal isOpen={isOpen} onClose={onClose} title="Confirmación">
78+
<ModalContent>
79+
<p>{text}</p>
80+
</ModalContent>
81+
</Modal>
82+
</>
83+
)
84+
}
85+
86+
const ModalDemoInside = (): JSX.Element => {
87+
const { isOpen, onOpen, onClose } = useDisclosure()
88+
89+
return (
90+
<>
91+
<BtnPrimary onClick={onOpen}>scroll dentro</BtnPrimary>
92+
<Modal isOpen={isOpen} onClose={onClose} title="Confirmación">
93+
<ModalContent>
94+
<p>
95+
{text} 2) Las credenciales de acceso que recibe el alumno para ingresar a su programa de
96+
estudio, son personales e intransferibles. 3) Al aceptar estos términos y condiciones,
97+
el alumno se compromete a realizar el programa en el que se encuentra inscrito y a
98+
revisar los siguientes documentos: Reglamento Académico, Manual del Alumno e Información
99+
del Programa.Estos documentos estarán disponibles en la plataforma de estudio, y
100+
contienen toda la información académica del programa. 4) El alumno se compromete a
101+
utilizar los materiales y medios tecnológicos de eClass exclusivamente con fines
102+
educativos en el marco del programa de estudio. Se deja constancia que la
103+
</p>
104+
<ModalButtons>
105+
<BtnPrimary onClick={onClose}>Guardar</BtnPrimary>
106+
<BtnSecondary onClick={onClose}>Cancelar</BtnSecondary>
107+
</ModalButtons>
108+
</ModalContent>
109+
</Modal>
110+
</>
111+
)
112+
}
113+
114+
const ModalDemoButtonsOutside = (): JSX.Element => {
115+
const { isOpen, onOpen, onClose } = useDisclosure()
116+
117+
return (
118+
<>
119+
<BtnPrimary onClick={onOpen}>botones fuera</BtnPrimary>
120+
<Modal isOpen={isOpen} onClose={onClose} title="Confirmación" fixedButtons>
121+
<ModalContent>
122+
<p>
123+
{text} 2) Las credenciales de acceso que recibe el alumno para ingresar a su programa de
124+
estudio, son personales e intransferibles. 3) Al aceptar estos términos y condiciones,
125+
el alumno se compromete a realizar el programa en el que se encuentra inscrito y a
126+
revisar los siguientes documentos: Reglamento Académico, Manual del Alumno e Información
127+
del Programa.Estos documentos estarán disponibles en la plataforma de estudio, y
128+
contienen toda la información académica del programa. 4) El alumno se compromete a
129+
utilizar los materiales y medios tecnológicos de eClass exclusivamente con fines
130+
educativos en el marco del programa de estudio. Se deja constancia que la
131+
</p>
132+
</ModalContent>
133+
<ModalButtons>
134+
<BtnPrimary onClick={onClose}>Guardar</BtnPrimary>
135+
<BtnSecondary onClick={onClose}>Cancelar</BtnSecondary>
136+
</ModalButtons>
137+
</Modal>
138+
</>
139+
)
140+
}
141+
142+
const ModalDemoButtonsCenter = (): JSX.Element => {
143+
const { isOpen, onOpen, onClose } = useDisclosure()
144+
145+
return (
146+
<>
147+
<BtnPrimary onClick={onOpen}>boton centrado</BtnPrimary>
148+
<Modal isOpen={isOpen} onClose={onClose} title="Confirmación">
149+
<ModalContent>
150+
<p>{text}</p>
151+
<ModalButtons buttonsCenter>
152+
<BtnPrimary onClick={onClose}>Guardar</BtnPrimary>
153+
</ModalButtons>
154+
</ModalContent>
155+
</Modal>
156+
</>
157+
)
158+
}
159+
160+
const ModalDemoButtonsColumn = (): JSX.Element => {
161+
const { isOpen, onOpen, onClose } = useDisclosure()
31162

32163
return (
33164
<>
34-
<BtnPrimary onClick={onOpen}>{name[type ?? 'default']}</BtnPrimary>
165+
<BtnPrimary onClick={onOpen}>mobile en columna</BtnPrimary>
166+
<Modal isOpen={isOpen} onClose={onClose} title="Confirmación">
167+
<ModalContent>
168+
<p>{text}</p>
169+
<ModalButtons buttonsColumn>
170+
<BtnPrimary onClick={onClose}>Guardar</BtnPrimary>
171+
<BtnSecondary onClick={onClose}>Cancelar</BtnSecondary>
172+
</ModalButtons>
173+
</ModalContent>
174+
</Modal>
175+
</>
176+
)
177+
}
178+
179+
const ModalDemoFixedSubtitle = (): JSX.Element => {
180+
const { isOpen, onOpen, onClose } = useDisclosure()
181+
182+
return (
183+
<>
184+
<BtnPrimary onClick={onOpen}>Subtitulo</BtnPrimary>
35185
<Modal
36186
isOpen={isOpen}
37187
onClose={onClose}
38188
title="Confirmación"
39-
fixedSubtitle={type === 'fixedSubtitle' ? 'Este es un subtitulo que queda fijo' : ''}
40-
buttonsCenter={type === 'buttonsCenter'}
41-
buttonsColumn={type !== 'buttonsColumn'}
42-
buttonsInside={type === 'buttonsInside'}
43-
scrollBehavior={['buttonsInside', 'inside'].includes(type ?? '') ? 'inside' : 'outside'}
44-
withoutMargin={type === 'withoutMargin'}
45-
closeOnOverlayClick={type !== 'closeOnOverlayClick'}
46-
buttons={
47-
type === 'withoutButtons'
48-
? []
49-
: type === 'buttonsCenter'
50-
? [{ action: () => onClose(), text: 'Guardar' }]
51-
: [
52-
{ action: () => onClose(), text: 'Guardar' },
53-
{ type: 'secondary', action: () => onClose(), text: 'Cancelar' },
54-
]
55-
}
189+
fixedSubtitle="Este es un subtitulo que queda fijo"
190+
fixedButtons
56191
>
57-
<p>
58-
alumnos, además de definir el uso de la plataforma de estudio. 1) El material del programa
59-
de estudio estará disponible en una plataforma tecnológica a la que cada alumno podrá
60-
acceder en la siguiente dirección: http://cursos.eclass.cl 2) Las credenciales de acceso
61-
que recibe el alumno para ingresar a su programa de estudio, son personales e
62-
intransferibles. 3) Al aceptar estos términos y condiciones, el alumno se compromete a
63-
realizar el programa en el que se encuentra inscrito y a revisar los siguientes
64-
documentos: Reglamento Académico, Manual del Alumno e Información del Programa.Estos
65-
documentos estarán disponibles en la plataforma de estudio, y contienen toda la
66-
información académica del programa. 4) El alumno se compromete a utilizar los materiales y
67-
medios tecnológicos de eClass exclusivamente con fines educativos en el marco del programa
68-
de estudio. Se deja constancia que la alumnos, además de definir el uso de la plataforma
69-
de estudio. 5) El material del programa de estudio estará disponible en una plataforma
70-
tecnológica a la que cada alumno podrá acceder en la siguiente dirección:
71-
http://cursos.eclass.cl
72-
{['buttonsInside', 'inside'].includes(type ?? '') && (
73-
<>
74-
2) Las credenciales de acceso que recibe el alumno para ingresar a su programa de
75-
estudio, son personales e intransferibles. 3) Al aceptar estos términos y condiciones,
76-
el alumno se compromete a realizar el programa en el que se encuentra inscrito y a
77-
revisar los siguientes documentos: Reglamento Académico, Manual del Alumno e
78-
Información del Programa.Estos documentos estarán disponibles en la plataforma de
79-
estudio, y contienen toda la información académica del programa. 4) El alumno se
80-
compromete a utilizar los materiales y medios tecnológicos de eClass exclusivamente
81-
con fines educativos en el marco del programa de estudio. Se deja constancia que la
82-
</>
83-
)}
84-
</p>
192+
<ModalContent>
193+
<p>
194+
{text} 2) Las credenciales de acceso que recibe el alumno para ingresar a su programa de
195+
estudio, son personales e intransferibles. 3) Al aceptar estos términos y condiciones,
196+
el alumno se compromete a realizar el programa en el que se encuentra inscrito y a
197+
revisar los siguientes documentos: Reglamento Académico, Manual del Alumno e Información
198+
del Programa.Estos documentos estarán disponibles en la plataforma de estudio, y
199+
contienen toda la información académica del programa. 4) El alumno se compromete a
200+
utilizar los materiales y medios tecnológicos de eClass exclusivamente con fines
201+
educativos en el marco del programa de estudio. Se deja constancia que la
202+
</p>
203+
<ModalButtons>
204+
<BtnPrimary onClick={onClose}>Guardar</BtnPrimary>
205+
<BtnSecondary onClick={onClose}>Cancelar</BtnSecondary>
206+
</ModalButtons>
207+
</ModalContent>
208+
</Modal>
209+
</>
210+
)
211+
}
212+
213+
const ModalDemoWithoutMargin = (): JSX.Element => {
214+
const { isOpen, onOpen, onClose } = useDisclosure()
215+
216+
return (
217+
<>
218+
<BtnPrimary onClick={onOpen}>Sin margin</BtnPrimary>
219+
<Modal isOpen={isOpen} onClose={onClose} title="Confirmación" withoutMargin>
220+
<ModalContent>
221+
<p>{text}</p>
222+
<ModalButtons>
223+
<BtnPrimary onClick={onClose}>Guardar</BtnPrimary>
224+
<BtnSecondary onClick={onClose}>Cancelar</BtnSecondary>
225+
</ModalButtons>
226+
</ModalContent>
227+
</Modal>
228+
</>
229+
)
230+
}
231+
232+
const ModalDemoCloseOnOverlayClick = (): JSX.Element => {
233+
const { isOpen, onOpen, onClose } = useDisclosure()
234+
235+
return (
236+
<>
237+
<BtnPrimary onClick={onOpen}>Cerrar solo en botones</BtnPrimary>
238+
<Modal isOpen={isOpen} onClose={onClose} title="Confirmación" closeOnOverlayClick={false}>
239+
<ModalContent>
240+
<p>{text}</p>
241+
<ModalButtons>
242+
<BtnPrimary onClick={onClose}>Guardar</BtnPrimary>
243+
<BtnSecondary onClick={onClose}>Cancelar</BtnSecondary>
244+
</ModalButtons>
245+
</ModalContent>
85246
</Modal>
86247
</>
87248
)
@@ -124,11 +285,16 @@ export const ModalAlertDemo = ({
124285
status={status ?? 'success'}
125286
title={withoutTitle ? '' : text[type ?? 'info'].title}
126287
description={withoutDescription ? '' : text[type ?? 'info'].description}
127-
buttons={[
128-
{ action: () => onClose(), text: 'Opciones más largas' },
129-
{ action: () => onClose(), text: 'Cancelar' },
130-
]}
131-
/>
288+
>
289+
<ModalAlertButtons>
290+
<BtnLink as="button" onClick={() => onClose()}>
291+
Aceptar
292+
</BtnLink>
293+
<BtnLink as="button" onClick={() => onClose()}>
294+
Cancelar
295+
</BtnLink>
296+
</ModalAlertButtons>
297+
</ModalAlertNew>
132298
</>
133299
)
134300
}

0 commit comments

Comments
 (0)