-
Notifications
You must be signed in to change notification settings - Fork 4.1k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: changed styling for toast * fix: made changes requested * fix: made changes requested * update Toast design * update Toast storybook * replace "hasError" with actual type of Toast * replace classes with mixins * fix broken notifications * change the animation to "ease-out" * replace Notification type with interface * make enum const * use button dark theme * fixed stretched icon * move z-index value to css variables file * fix toast bottom-margin and update animation * add shadow mixin * reduce spacing-page-bottom to 88px * Revert "reduce spacing-page-bottom to 88px" This reverts commit 6c72ace. * extend base Button component: do not break the text * align text to left set baseline as flex-start * set max width for notification container * fix text center alignment * fix action button margin Co-authored-by: Harshith Mullapudi <harshithmullapudi@gmail.com>
- Loading branch information
1 parent
50f22cd
commit db70435
Showing
21 changed files
with
266 additions
and
171 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,98 @@ | ||
@use "scss/colors"; | ||
@use "scss/variables" as vars; | ||
@use "scss/z-indices"; | ||
@use "scss/mixins"; | ||
|
||
$toast-icon-size: 13px; | ||
$toast-icon-container-size: 34px; | ||
$toast-bottom-margin: 27px; | ||
|
||
@keyframes slide-up-animations { | ||
0% { | ||
transform: translate(-50%, -100%); | ||
bottom: -60px; | ||
} | ||
|
||
100% { | ||
transform: translate(-50%, 0); | ||
bottom: $toast-bottom-margin; | ||
} | ||
} | ||
|
||
@mixin type($name, $color, $background) { | ||
&.#{$name} { | ||
background-color: $background; | ||
border: 1px solid $color; | ||
|
||
.iconContainer { | ||
background-color: $color; | ||
} | ||
|
||
.toastIcon { | ||
color: $color; | ||
} | ||
} | ||
} | ||
|
||
.toastContainer { | ||
display: flex; | ||
flex-direction: row; | ||
align-items: flex-start; | ||
gap: vars.$spacing-md; | ||
max-width: vars.$width-max-notification; | ||
position: fixed; | ||
box-sizing: border-box; | ||
bottom: $toast-bottom-margin; | ||
left: 50%; | ||
transform: translate(-50%, 0); | ||
z-index: z-indices.$notification; | ||
padding: vars.$spacing-md; | ||
border-radius: vars.$border-radius-md; | ||
animation: slide-up-animations 0.25s ease-out; | ||
|
||
@include mixins.shadow; | ||
|
||
@include type("info", colors.$blue-400, colors.$blue-50); | ||
@include type("warning", colors.$yellow-500, colors.$yellow-50); | ||
@include type("success", colors.$green-200, colors.$green-50); | ||
@include type("error", colors.$red-300, colors.$red-50); | ||
} | ||
|
||
.iconContainer { | ||
width: $toast-icon-container-size; | ||
height: $toast-icon-container-size; | ||
max-height: $toast-icon-container-size; | ||
min-width: $toast-icon-container-size; | ||
padding: vars.$border-radius-md; | ||
border-radius: vars.$border-radius-md; | ||
box-sizing: border-box; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
} | ||
|
||
.toastIcon { | ||
width: $toast-icon-size; | ||
height: $toast-icon-size; | ||
background: colors.$white; | ||
border-radius: 50%; | ||
} | ||
|
||
.textContainer { | ||
align-self: center; | ||
} | ||
|
||
.text { | ||
line-height: 17px; | ||
text-align: left; | ||
} | ||
|
||
.actionButton { | ||
margin-top: vars.$spacing-xs; | ||
} | ||
|
||
.closeButton { | ||
margin-left: 10px; | ||
svg { | ||
color: colors.$dark-blue-900; | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,86 +1,64 @@ | ||
import { faTimes } from "@fortawesome/free-solid-svg-icons"; | ||
import { faCheck, faExclamation, faTimes } from "@fortawesome/free-solid-svg-icons"; | ||
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; | ||
import classNames from "classnames"; | ||
import React from "react"; | ||
import styled, { keyframes } from "styled-components"; | ||
|
||
import { H5 } from "components/base/Titles"; | ||
import { CrossIcon } from "components/icons/CrossIcon"; | ||
import { Text } from "components/ui/Text"; | ||
|
||
import { Button } from "../Button"; | ||
import { ErrorSign } from "./ErrorSign"; | ||
import styles from "./Toast.module.scss"; | ||
|
||
interface ToastProps { | ||
title: string | React.ReactNode; | ||
text?: string | React.ReactNode; | ||
hasError?: boolean; | ||
onClose?: () => void; | ||
export const enum ToastType { | ||
WARNING = "warning", | ||
SUCCESS = "success", | ||
ERROR = "error", | ||
INFO = "info", | ||
} | ||
|
||
export const SlideUpAnimation = keyframes` | ||
0% { | ||
translate(-50%, -100%); | ||
bottom: -49px; | ||
} | ||
100% { | ||
translate(-50%, 0); | ||
bottom: 49px; | ||
} | ||
`; | ||
|
||
const Singleton = styled.div<{ hasError?: boolean }>` | ||
position: fixed; | ||
bottom: 49px; | ||
left: 50%; | ||
transform: translate(-50%, 0); | ||
z-index: 20; | ||
padding: 25px 25px 22px; | ||
background: ${({ theme, hasError }) => (hasError ? theme.lightDangerColor : theme.lightPrimaryColor)}; | ||
border: 1px solid ${({ theme }) => theme.greyColor20}; | ||
box-shadow: 0 1px 2px ${({ theme }) => theme.shadowColor}; | ||
border-radius: 8px; | ||
display: flex; | ||
flex-direction: row; | ||
align-items: center; | ||
animation: ${SlideUpAnimation} 0.25s linear; | ||
`; | ||
|
||
const Title = styled(H5)<{ hasError?: boolean }>` | ||
color: ${({ theme, hasError }) => (hasError ? theme.dangerColor : theme.primaryColor)}; | ||
font-style: normal; | ||
font-weight: bold; | ||
font-size: 15px; | ||
line-height: 18px; | ||
`; | ||
export interface ToastProps { | ||
text: string | React.ReactNode; | ||
type?: ToastType; | ||
onAction?: () => void; | ||
actionBtnText?: string; | ||
onClose?: () => void; | ||
} | ||
|
||
const Text = styled.div` | ||
color: ${({ theme }) => theme.mediumPrimaryColor}; | ||
const ICON_MAPPING = { | ||
[ToastType.WARNING]: faExclamation, | ||
[ToastType.ERROR]: faTimes, | ||
[ToastType.SUCCESS]: faCheck, | ||
[ToastType.INFO]: faExclamation, | ||
}; | ||
|
||
font-style: normal; | ||
font-weight: normal; | ||
font-size: 14px; | ||
line-height: 17px; | ||
margin-top: 5px; | ||
`; | ||
const STYLES_BY_TYPE: Readonly<Record<ToastType, string>> = { | ||
[ToastType.WARNING]: styles.warning, | ||
[ToastType.ERROR]: styles.error, | ||
[ToastType.SUCCESS]: styles.success, | ||
[ToastType.INFO]: styles.info, | ||
}; | ||
|
||
export const Toast: React.FC<ToastProps> = (props) => ( | ||
<Singleton hasError={props.hasError}> | ||
{props.hasError && <ErrorSign />} | ||
<div> | ||
<Title hasError={props.hasError}>{props.title}</Title> | ||
{props.text && <Text>{props.text}</Text>} | ||
export const Toast: React.FC<ToastProps> = ({ type = ToastType.INFO, onAction, actionBtnText, onClose, text }) => { | ||
return ( | ||
<div className={classNames(styles.toastContainer, STYLES_BY_TYPE[type])}> | ||
<div className={classNames(styles.iconContainer)}> | ||
<FontAwesomeIcon icon={ICON_MAPPING[type]} className={styles.toastIcon} /> | ||
</div> | ||
<div className={styles.textContainer}> | ||
{text && ( | ||
<Text size="lg" className={styles.text}> | ||
{text} | ||
</Text> | ||
)} | ||
</div> | ||
{onAction && ( | ||
<Button variant="dark" className={styles.actionButton} onClick={onAction}> | ||
{actionBtnText} | ||
</Button> | ||
)} | ||
{onClose && ( | ||
<Button variant="clear" className={styles.closeButton} onClick={onClose} size="sm" icon={<CrossIcon />} /> | ||
)} | ||
</div> | ||
{props.onClose && ( | ||
<Button | ||
className={styles.closeButton} | ||
variant="clear" | ||
onClick={props.onClose} | ||
icon={<FontAwesomeIcon icon={faTimes} />} | ||
/> | ||
)} | ||
</Singleton> | ||
); | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.