feat: new notifications alignment and position

Author: luangjokaj

@types/cherry.d.ts

@@ -41,18 +41,15 @@ declare class Space extends React.Component<SpaceProps, any> {}
 
 declare class TableOverflow extends React.Component<TableOverflowProps, any> {}
 
-
-declare class ToastNotificationsProvider extends React.Component<
-	any,
-	any
-> {}
+declare class ToastNotificationsProvider extends React.Component<any, any> {}
 
 declare class ToastNotifications extends React.Component<
-	any,
+	ToastNotificationsProps,
 	any
 > {}
 
-const ToastNotificationsContext = React.createContext<ToastNotificationsContextProps | null>(null);
+const ToastNotificationsContext =
+	React.createContext<ToastNotificationsContextProps | null>(null);
 
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
 	children?: React.ReactNode;
@@ -278,6 +275,12 @@ interface ToastNotificationsContextProps {
 	) => void;
 }
 
+interface ToastNotificationsProps {
+	align?: "right" | "left" | "center";
+	bottom?: boolean;
+	theme?: object;
+}
+
 export {
 	Button,
 	Container,

dist/cherry.js

@@ -1,6 +1,6 @@
 {
 	"name": "cherry-components",
-	"version": "0.0.2-20",
+	"version": "0.0.2-21",
 	"description": "Cherry React Components",
 	"main": "dist/cherry.js",
 	"module": "dist/cherry.module.js",

dist/cherry.module.js

@@ -4,11 +4,11 @@ import * as styles from "./ToastNotifications.styles";
 import { Close } from "../../svg/Close";
 import { localTheme } from "../../theme";
 
-function ToastNotifications({ theme = localTheme }) {
+function ToastNotifications({ align = "center", bottom, theme = localTheme }) {
 	const { notifications } = useContext(ToastNotificationsContext);
 
 	return (
-		<ul css={styles.notificationsStyles(theme)}>
+		<ul css={styles.notificationsStyles(theme, align, bottom)}>
 			{notifications.map((notification, i) => (
 				<NotificationItem key={i} {...notification} />
 			))}

package-lock.json

@@ -1,16 +1,37 @@
 import { css } from "@emotion/react";
 import { resetButtonStyles, shadowStyles } from "../../helperStyles";
 
-export const notificationsStyles = (theme) => css`
+export const notificationsStyles = (theme, align, bottom) => css`
 	position: fixed;
-	top: 12px;
-	left: 50%;
-	transform: translateX(-50%);
 	z-index: 99999;
 	margin: 0;
 	padding: 0;
 	list-style: none;
 
+	${align === "center" &&
+	css`
+		left: 50%;
+		transform: translateX(-50%);
+	`}
+
+	${align === "right" &&
+	css`
+		right: 20px;
+	`}
+
+${align === "left" &&
+	css`
+		left: 20px;
+	`}
+
+${bottom
+		? css`
+				bottom: 12px;
+		  `
+		: css`
+				top: 12px;
+		  `}
+
 	& li {
 		justify-content: center;
 		display: flex;