Skip to content

Commit

Permalink
fix(toast): Correct toast icon
Browse files Browse the repository at this point in the history
  • Loading branch information
@annelhote
annelhote committed Mar 18, 2024
1 parent 88950f1 commit e1690c9
Show file tree
Hide file tree
Showing 3 changed files with 112 additions and 113 deletions.
36 changes: 19 additions & 17 deletions dist/dsfr-plus.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7936,33 +7936,35 @@ const Ad = ({
)
] }) }) });
}, Kd = me(({
className: t,
css: e = {},
hint: n,
id: r,
label: o,
checked: t,
className: e,
css: n = {},
hint: r,
id: o,
imageComponent: i,
...l
}, s) => {
const u = r || ie();
return /* @__PURE__ */ O("div", { className: x("fr-radio-group", { "fr-radio-rich": i }, t), children: [
label: l,
...s
}, u) => {
const a = o || ie();
return /* @__PURE__ */ O("div", { className: x("fr-radio-group", { "fr-radio-rich": i }, e), children: [
/* @__PURE__ */ m(
"input",
{
ref: s,
...l,
checked: t,
id: a,
ref: u,
type: "radio",
id: u
...s
}
),
/* @__PURE__ */ O(
"label",
{
className: x("fr-label"),
htmlFor: u,
htmlFor: a,
children: [
o,
n && /* @__PURE__ */ m("p", { className: x("fr-hint-text"), children: n })
l,
r && /* @__PURE__ */ m("p", { className: x("fr-hint-text"), children: r })
]
}
),
Expand Down Expand Up @@ -8969,10 +8971,10 @@ function Qc(t, e) {
const ed = ({ autoDismissAfter: t = 3e3, description: e = "", id: n, remove: r = () => {
}, title: o = "", type: i = "success" }) => {
const l = {
error: "fr-icon-close-circle-fill",
info: "fr-icon-information-fill",
warning: "fr-icon-error-warning-fill",
success: "fr-icon-checkbox-circle-fill",
error: "fr-icon-close-circle-fill"
warning: "fr-icon-error-warning-fill"
}, s = te(() => {
var c;
(c = document.getElementById(n)) == null || c.style.setProperty("animation", "toast-unmount 1000ms"), setTimeout(() => {
Expand Down
9 changes: 4 additions & 5 deletions src/components/Toast/Toast.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,18 @@
import { useCallback, useEffect } from 'react';

import { Container, Row } from '../Grid';
import { ToastTypeWithId } from './types';
import { Text } from '../Typography';
import usePausableTimer from './usePausableTimer';

import { ToastTypeWithId } from './types';

import './styles.scss';

export const Toast = (({ autoDismissAfter = 3000, description = '', id, remove = () => { }, title = '', type = 'success' }: ToastTypeWithId) => {
const icon = {
error: 'fr-icon-close-circle-fill',
info: 'fr-icon-information-fill',
warning: 'fr-icon-error-warning-fill',
success: 'fr-icon-checkbox-circle-fill',
error: 'fr-icon-close-circle-fill',
warning: 'fr-icon-error-warning-fill',
};

const removeSelf = useCallback(() => {
Expand Down Expand Up @@ -53,7 +52,7 @@ export const Toast = (({ autoDismissAfter = 3000, description = '', id, remove =
onClick={() => remove(id)}
className="toast-btn-close"
>
<span className='fr-icon-close-line' />
<span className="fr-icon-close-line" />
</button>
<Container fluid className="toast-content">
<Row>
Expand Down
180 changes: 89 additions & 91 deletions src/components/Toast/styles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,102 +7,56 @@
transform: translateY(0);
}
}
@keyframes toast-unmount {

@keyframes toast-unfill {
from {
transform: translateX(0);
height: 100%;
}

to {
transform: translateX(300%);
height: 0%
}
}

@keyframes toast-unfill {
@keyframes toast-unmount {
from {
height: 100%;
transform: translateX(0);
}

to {
height: 0%
transform: translateX(300%);
}
}

#toast-container {
position: fixed;
box-sizing: border-box;
z-index: 10000;
bottom: 4px;
box-sizing: border-box;
padding: 4px;
position: fixed;
z-index: 10000;
> * {
margin-top: 8px;
}

@media only screen and (min-width: 992px) {
bottom: 30px;
right: 30px;
padding: 24px;
}
.toast-info {
// border: 1px solid var(--info-main-525);
border-radius: 0.25rem;
--hover: var(--background-contrast-info-hover) !important;
--active: var(--background-contrast-info-active) !important;
background-color: var(--background-contrast-info) !important;
color: var(--text-default-info) !important;

>.toast-colored-box {
background-color: var(--info-main-525);
}
}

.toast-warning {
// border: 1px solid var(--warning-main-525);
--hover: var(--background-contrast-warning-hover) !important;
--active: var(--background-contrast-warning-active) !important;
background-color: var(--background-contrast-warning) !important;
color: var(--text-default-warning) !important;

>.toast-colored-box {
background-color: var(--warning-main-525);
}
}

.toast-success {
// border: 1px solid var(--success-main-525);
--hover: var(--background-contrast-success-hover) !important;
--active: var(--background-contrast-success-active) !important;
background-color: var(--background-contrast-success) !important;
color: var(--text-default-success) !important;


>.toast-colored-box {
background-color: var(--success-main-525);
}
}

.toast-error {
// border: 1px solid var(--error-main-525);
--hover: var(--background-contrast-error-hover) !important;
--active: var(--background-contrast-error-active) !important;
background-color: var(--background-contrast-error) !important;
color: var(--text-default-error) !important;

>.toast-colored-box {
background-color: var(--error-main-525);
}
right: 30px;
}

.toast {
align-items: flex-start;
animation: toast-mount .3s;
border-radius: 0.25rem;
position: relative;
box-shadow: 0 6px 18px 0 rgba(0, 0, 18, 0.16);
display: flex;
flex-wrap: nowrap;
align-items: flex-start;
min-height: 40px;
width: calc(100vw - 8px);
top: 0;
position: relative;
right: 0;
animation: toast-mount .3s;
top: 0;
width: calc(100vw - 8px);

@media only screen and (min-width: 992px) {
width: 400px;
}
Expand All @@ -114,60 +68,104 @@
}

.toast-btn-close {
border-radius: 100%;
height: 32px;
position: absolute;
right: 2px;
top: 2px;
border-radius: 100%;
height: 32px;
width: 32px;

SPAN {
padding-bottom: 6px;
span {
margin-right: 0px;
padding-bottom: 6px;
}

&:hover {
background-color: var(--active-tint);
}
}

.toast-progress-bar {
animation-name: toast-unfill;
animation-timing-function: linear;
animation-play-state: running;
bottom: 0;
left: 0;
position: absolute;
width: 40px;
background: rgba(0, 0, 18, 0.16);
}

.toast-colored-box {
border-top-left-radius: 0.25rem;
align-items: center;
border-bottom-left-radius: 0.25rem;
width: 40px;
position: absolute;
top: 0;
border-top-left-radius: 0.25rem;
bottom: 0;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
width: 40px;

SPAN {
z-index: 100;
margin-left: 9px;
color: var(--background-alt-grey);
span {
font-size: 1.8em;
margin-left: 9px;
z-index: 100;
}
}

.toast-content {
margin: 0 40px;
width: 100%;
display: flex;
padding: 8px;
flex-direction: column;
justify-content: space-between;
margin: 0 40px;
padding: 8px;
width: 100%;
}

.toast-progress-bar {
animation-name: toast-unfill;
animation-play-state: running;
animation-timing-function: linear;
background: rgba(0, 0, 18, 0.16);
bottom: 0;
left: 0;
position: absolute;
width: 40px;
}
}

.toast-error {
--active: var(--background-contrast-error-active) !important;
--hover: var(--background-contrast-error-hover) !important;
background-color: var(--background-contrast-error) !important;
color: var(--text-default-error) !important;

>.toast-colored-box {
background-color: var(--error-main-525);
}
}

.toast-info {
--active: var(--background-contrast-info-active) !important;
--hover: var(--background-contrast-info-hover) !important;
background-color: var(--background-contrast-info) !important;
border-radius: 0.25rem;
color: var(--text-default-info) !important;

>.toast-colored-box {
background-color: var(--info-main-525);
}
}

.toast-success {
--active: var(--background-contrast-success-active) !important;
--hover: var(--background-contrast-success-hover) !important;
background-color: var(--background-contrast-success) !important;
color: var(--text-default-success) !important;

>.toast-colored-box {
background-color: var(--success-main-525);
}
}

.toast-warning {
--active: var(--background-contrast-warning-active) !important;
--hover: var(--background-contrast-warning-hover) !important;
background-color: var(--background-contrast-warning) !important;
color: var(--text-default-warning) !important;

>.toast-colored-box {
background-color: var(--warning-main-525);
}
}
}

0 comments on commit e1690c9

Please sign in to comment.