Skip to content
Snippets Groups Projects
Commit da0be137 authored by Rémi PAILHAREY's avatar Rémi PAILHAREY :fork_knife_plate:
Browse files

feat(custom-popup): can add link in custom popup

parent 901c7f27
No related branches found
No related tags found
2 merge requests!905MEP 2.4 : intégration Ma Bulle,!883feat(custom-popup): added link in custom modal
Hide whitespace changes
Inline Side-by-side
src/components/CustomPopup/CustomPopupModal.tsx
+ 7
− 5
View file @ da0be137
...@@ -38,7 +38,6 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({ ...@@ -38,7 +38,6 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
}} }}
> >
<div id="accessibility-title">{customPopup.title}</div> <div id="accessibility-title">{customPopup.title}</div>
<div id="accessibility-content">{customPopup.description}</div>
<IconButton <IconButton
aria-label={t('feedback.accessibility.button_close')} aria-label={t('feedback.accessibility.button_close')}
className="modal-paper-close-button" className="modal-paper-close-button"
...@@ -47,15 +46,18 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({ ...@@ -47,15 +46,18 @@ const CustomPopupModal: React.FC<CustomPopupModalProps> = ({
<Icon icon={CloseIcon} size={16} /> <Icon icon={CloseIcon} size={16} />
</IconButton> </IconButton>
<div className="customPopupModal"> <div className="customPopupModal">
<StyledIcon icon={Speaker} size={100} className={'warn-icon'} /> <StyledIcon icon={Speaker} size={100} />
<div className="customPopup-title text-20-bold"> <div className="customPopup-title text-20-bold">
{customPopup.title} {customPopup.title}
</div> </div>
<div className="customPopup-content text-16-normal"> <div
{customPopup.description} className="customPopup-content text-16-normal"
</div> dangerouslySetInnerHTML={{
__html: customPopup.description,
}}
/>
<Button <Button
onClick={handleCloseClick} onClick={handleCloseClick}
......
src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+ 9
− 18
View file @ da0be137
...@@ -417,11 +417,6 @@ exports[`CustomPopupModal component should render correctly 1`] = ` ...@@ -417,11 +417,6 @@ exports[`CustomPopupModal component should render correctly 1`] = `
> >
Bold title Bold title
</div> </div>
<div
id="accessibility-content"
>
Interesting description
</div>
<button <button
aria-label="feedback.accessibility.button_close" aria-label="feedback.accessibility.button_close"
class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button" class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
...@@ -450,7 +445,7 @@ exports[`CustomPopupModal component should render correctly 1`] = ` ...@@ -450,7 +445,7 @@ exports[`CustomPopupModal component should render correctly 1`] = `
> >
<svg <svg
aria-hidden="true" aria-hidden="true"
class="warn-icon styles__icon___23x3R" class="styles__icon___23x3R"
height="100" height="100"
width="100" width="100"
> >
...@@ -695,11 +690,6 @@ exports[`CustomPopupModal component should render correctly 1`] = ` ...@@ -695,11 +690,6 @@ exports[`CustomPopupModal component should render correctly 1`] = `
> >
Bold title Bold title
</div> </div>
<div
id="accessibility-content"
>
Interesting description
</div>
<WithStyles(ForwardRef(IconButton)) <WithStyles(ForwardRef(IconButton))
aria-label="feedback.accessibility.button_close" aria-label="feedback.accessibility.button_close"
className="modal-paper-close-button" className="modal-paper-close-button"
...@@ -829,27 +819,25 @@ exports[`CustomPopupModal component should render correctly 1`] = ` ...@@ -829,27 +819,25 @@ exports[`CustomPopupModal component should render correctly 1`] = `
className="customPopupModal" className="customPopupModal"
> >
<StyledIcon <StyledIcon
className="warn-icon"
icon="test-file-stub" icon="test-file-stub"
size={100} size={100}
> >
<Icon <Icon
aria-hidden={true} aria-hidden={true}
className="warn-icon"
icon="test-file-stub" icon="test-file-stub"
size={100} size={100}
spin={false} spin={false}
> >
<Component <Component
aria-hidden={true} aria-hidden={true}
className="warn-icon styles__icon___23x3R" className="styles__icon___23x3R"
height={100} height={100}
style={Object {}} style={Object {}}
width={100} width={100}
> >
<svg <svg
aria-hidden={true} aria-hidden={true}
className="warn-icon styles__icon___23x3R" className="styles__icon___23x3R"
height={100} height={100}
style={Object {}} style={Object {}}
width={100} width={100}
...@@ -868,9 +856,12 @@ exports[`CustomPopupModal component should render correctly 1`] = ` ...@@ -868,9 +856,12 @@ exports[`CustomPopupModal component should render correctly 1`] = `
</div> </div>
<div <div
className="customPopup-content text-16-normal" className="customPopup-content text-16-normal"
> dangerouslySetInnerHTML={
Interesting description Object {
</div> "__html": "Interesting description",
}
}
/>
<WithStyles(ForwardRef(Button)) <WithStyles(ForwardRef(Button))
classes={ classes={
Object { Object {
......
src/components/CustomPopup/customPopupModal.scss
+ 15
− 9
View file @ da0be137
...@@ -6,29 +6,35 @@ ...@@ -6,29 +6,35 @@
} }
.customPopupModal { .customPopupModal {
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem; padding: 1rem;
max-width: 20rem; max-width: 20rem;
.warn-icon {
margin: 1rem auto;
display: block;
}
.customPopup-title { .customPopup-title {
text-align: center;
color: $gold-shadow; color: $gold-shadow;
margin: 1rem auto; margin: 1rem auto;
} }
.customPopup-content { .customPopup-content {
text-align: center; text-align: center;
color: $grey-bright; font-weight: 700;
p {
color: $grey-bright;
}
a {
color: $gold-shadow;
}
} }
button.btn-highlight { button.btn-highlight {
padding: 0.65rem; padding: 0.65rem 2.5rem;
margin-top: 1rem;
width: unset;
} }
} }
#accessibility-title, #accessibility-title {
#accessibility-content {
display: none; display: none;
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment