Removed files
This commit is contained in:
Daniel Cojocea committed
1 parent
92d4caa801
commit
4b9c0b86c4
11 files changed
-522
No files matched your search
-71
@@ -1,71 +0,0 @@
|
||||
import "./announcementUpdateSubscription.css";
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@mui/material";
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {string} props.title - Title text for the update subscription dialog (required)
|
||||
* @param {string} props.text - Body text for the update subscription dialog (required)
|
||||
* @param {string} props.cancel - Text for the negative (cancel) button (required)
|
||||
* @param {string} props.positive - Text for the positive button (required)
|
||||
* @param {string} props.header - Title text for the email subscription section (required)
|
||||
* @param {string} props.button - Text for the subscribe button (required)
|
||||
* @returns {JSX.Element} - Renders the announcement update subscription component
|
||||
*/
|
||||
|
||||
const AnnouncementUpdateSubscription = ({
|
||||
title,
|
||||
text,
|
||||
cancel,
|
||||
positive,
|
||||
header,
|
||||
button,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const fontLookup = {
|
||||
default: theme.font.default.font,
|
||||
};
|
||||
|
||||
const fontFamily = fontLookup["default"];
|
||||
|
||||
return (
|
||||
<div className="update-subscription" style={{ fontFamily: fontFamily }}>
|
||||
<div className="update-subscription-dialog">
|
||||
<div className="subscription-dialog-title">{title}</div>
|
||||
<div className="v-spacing-small"></div>
|
||||
<div className="subscription-dialog-text">{text}</div>
|
||||
<div className="v-spacing-medium"></div>
|
||||
<div className="subscription-dialog-controls">
|
||||
<button className="controls-negative">{cancel}</button>
|
||||
<button className="controls-positive">{positive}</button>
|
||||
</div>
|
||||
<div className="v-spacing-medium"></div>
|
||||
</div>
|
||||
<div className="v-spacing-medium"></div>
|
||||
<div className="update-subscription-title">{header}</div>
|
||||
<div className="subscription-email">
|
||||
<input
|
||||
className="subscription-email-field"
|
||||
type="text"
|
||||
placeholder="olivia@untitledui.com"
|
||||
/>
|
||||
<button className="subscribe-button">{button}</button>
|
||||
</div>
|
||||
<div className="v-spacing-medium"></div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AnnouncementUpdateSubscription.propTypes = {
|
||||
title: PropTypes.string.isRequired,
|
||||
text: PropTypes.string.isRequired,
|
||||
cancel: PropTypes.string.isRequired,
|
||||
positive: PropTypes.string.isRequired,
|
||||
header: PropTypes.string.isRequired,
|
||||
button: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default AnnouncementUpdateSubscription;
|
||||
-86
@@ -1,86 +0,0 @@
|
||||
.update-subscription {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.update-subscription,
|
||||
.update-subscription-dialog {
|
||||
max-width: 770px;
|
||||
border-radius: 4px;
|
||||
border: 1px solid #eaecf0;
|
||||
}
|
||||
|
||||
.update-subscription-dialog {
|
||||
padding: 15px 30px;
|
||||
}
|
||||
|
||||
.subscription-dialog-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 700;
|
||||
color: var(--env-var-color-1);
|
||||
}
|
||||
|
||||
.v-spacing-small {
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.v-spacing-medium {
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.subscription-dialog-text {
|
||||
font-size: 13px;
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
|
||||
.subscription-dialog-controls {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.controls-negative {
|
||||
padding: 12px 16px;
|
||||
margin-right: 12px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
border: 1px solid var(--env-var-color-6);
|
||||
background-color: var(--env-var-color-8);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.controls-positive,
|
||||
.subscribe-button {
|
||||
padding: 12px 16px;
|
||||
margin-right: 12px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
border: 1px solid var(--env-var-color-7);
|
||||
background-color: var(--env-var-color-3);
|
||||
color: var(--env-var-color-8);
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
}
|
||||
|
||||
.update-subscription-title {
|
||||
color: var(--env-var-color-5);
|
||||
padding: 0 20px;
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subscription-email {
|
||||
display: flex;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.subscription-email-field {
|
||||
width: 290px;
|
||||
height: 24px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
box-shadow: 0px 1px 2px 0px rgba(101, 182, 28, 0.05);
|
||||
padding: 5px 15px;
|
||||
margin-right: 20px;
|
||||
}
|
||||
|
||||
.subscribe-button {
|
||||
width: 100px;
|
||||
height: 34px;
|
||||
padding: 2px 15px;
|
||||
}
|
||||
@@ -1,55 +0,0 @@
|
||||
import "./announcementsDualButton.css";
|
||||
import React from "react";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@mui/material";
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {string} props.subject - The announcement subject text
|
||||
* @param {string} props.body - The announcement body text content
|
||||
* @param {string} props.esc - The text for the escape button
|
||||
* @param {string} props.primary - The text for the primary button
|
||||
* @returns {JSX.Element} - Renders the announcement dual button component
|
||||
*/
|
||||
|
||||
const AnnouncementsDualButton = ({ subject, body, esc, primary }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const fontLookup = {
|
||||
default: theme.font.default.font,
|
||||
};
|
||||
|
||||
const fontFamily = fontLookup["default"];
|
||||
|
||||
return (
|
||||
<div
|
||||
className="announcement-without-tile"
|
||||
style={{ fontFamily: fontFamily }}
|
||||
>
|
||||
<div className="announcement-without-content">
|
||||
<div className="announcement-without-content-subject">{subject}</div>
|
||||
<div className="v-spacing"></div>
|
||||
<div className="announcement-without-content-body">{body}</div>
|
||||
<div className="announcement-content-controllers">
|
||||
<div className="controllers-button-esc">{esc}</div>
|
||||
<div className="controllers-button-primary">{primary}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="h-spacing"></div>
|
||||
<div className="announcement-close">
|
||||
<CloseIcon style={{ fill: "#98A2B3" }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AnnouncementsDualButton.propTypes = {
|
||||
subject: PropTypes.string.isRequired,
|
||||
body: PropTypes.string.isRequired,
|
||||
esc: PropTypes.string.isRequired,
|
||||
primary: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default AnnouncementsDualButton;
|
||||
@@ -1,25 +0,0 @@
|
||||
.announcement-without-tile {
|
||||
margin: 20px;
|
||||
max-width: 343px;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
padding: 16px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
|
||||
.h-spacing {
|
||||
width: 20px;
|
||||
}
|
||||
|
||||
.announcement-without-content-subject {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.announcement-without-content-body {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-2);
|
||||
}
|
||||
-71
@@ -1,71 +0,0 @@
|
||||
import "./announcementsDualButtonWithIcon.css";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@mui/material";
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {React.ReactNode} props.icon - Optional React node for an announcement icon
|
||||
* @param {string} props.subject - The announcement subject text
|
||||
* @param {string} props.body - The announcement body text content
|
||||
* @param {string} props.esc - The text for the escape button (usually "Close")
|
||||
* @param {string} props.primary - The text for the primary button
|
||||
* @param {function} props.closeToast - Function to close the toast notification
|
||||
* @returns {JSX.Element} - Renders the announcement dual button with icon component
|
||||
*/
|
||||
|
||||
const AnnouncementsDualButtonWithIcon = ({
|
||||
icon,
|
||||
subject,
|
||||
body,
|
||||
esc,
|
||||
primary,
|
||||
closeToast,
|
||||
}) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const fontLookup = {
|
||||
default: theme.font.default.font,
|
||||
};
|
||||
|
||||
const fontFamily = fontLookup["default"];
|
||||
|
||||
return (
|
||||
<div className="announcement-tile" style={{ fontFamily: fontFamily }}>
|
||||
{icon && <div className="announcement-icon">{icon}</div>}
|
||||
<div className="announcement-content">
|
||||
{subject && (
|
||||
<div className="announcement-content-subject">{subject}</div>
|
||||
)}
|
||||
{body && <div className="announcement-content-body">{body}</div>}
|
||||
{(esc || primary) && (
|
||||
<div className="announcement-content-controllers">
|
||||
{esc && (
|
||||
<div className="controllers-button-esc" onClick={closeToast}>
|
||||
{esc}
|
||||
</div>
|
||||
)}
|
||||
{primary && (
|
||||
<div className="controllers-button-primary">{primary}</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
<div className="announcement-close" onClick={closeToast}>
|
||||
<CloseIcon style={{ fill: "#98A2B3" }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AnnouncementsDualButtonWithIcon.propTypes = {
|
||||
icon: PropTypes.object,
|
||||
subject: PropTypes.string,
|
||||
body: PropTypes.string,
|
||||
esc: PropTypes.string,
|
||||
primary: PropTypes.string,
|
||||
closeToast: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default AnnouncementsDualButtonWithIcon;
|
||||
-58
@@ -1,58 +0,0 @@
|
||||
.announcement-tile {
|
||||
margin: 20px;
|
||||
width: fit-content;
|
||||
display: flex;
|
||||
border: 1px solid var(--env-var-color-4);
|
||||
padding: 16px;
|
||||
border-radius: var(--env-var-radius-1);
|
||||
}
|
||||
|
||||
.info-icon-frame {
|
||||
display: flex;
|
||||
width: var(--env-var-default-2);
|
||||
height: var(--env-var-default-2);
|
||||
border: 1px solid var(--env-var-color-6);
|
||||
border-radius: var(--env-var-radius-2);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.announcement-content {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.announcement-content-subject {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-5);
|
||||
font-weight: 700;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.announcement-content-body {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
color: var(--env-var-color-2);
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
.announcement-content-controllers {
|
||||
display: flex;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.controllers-button-esc {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 600;
|
||||
margin-right: 12px;
|
||||
}
|
||||
|
||||
.controllers-button-primary {
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
font-weight: 600;
|
||||
color: var(--env-var-color-3);
|
||||
}
|
||||
|
||||
.announcement-close {
|
||||
width: var(--env-var-default-1);
|
||||
height: var(--env-var-default-1);
|
||||
}
|
||||
@@ -1,36 +0,0 @@
|
||||
import "./announcementsMessageBar.css";
|
||||
import React from "react";
|
||||
import CloseIcon from "@mui/icons-material/Close";
|
||||
import PropTypes from "prop-types";
|
||||
import { useTheme } from "@mui/material";
|
||||
|
||||
/**
|
||||
* @component
|
||||
* @param {Object} props
|
||||
* @param {string} props.message - The announcement message text content (required)
|
||||
* @returns {JSX.Element} - Renders the announcement message bar component
|
||||
*/
|
||||
const AnnouncementsMessageBar = ({ message }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const fontLookup = {
|
||||
default: theme.font.default.font,
|
||||
};
|
||||
|
||||
const fontFamily = fontLookup["default"];
|
||||
|
||||
return (
|
||||
<div className="announcement-tile" style={{ fontFamily: fontFamily }}>
|
||||
<div className="announcement-messagebar-body">{message}</div>
|
||||
<div className="announcement-close">
|
||||
<CloseIcon style={{ fill: "#98A2B3" }} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
AnnouncementsMessageBar.propTypes = {
|
||||
message: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default AnnouncementsMessageBar;
|
||||
@@ -1,8 +0,0 @@
|
||||
.announcement-messagebar-body {
|
||||
margin: 20px;
|
||||
font-size: var(--env-var-font-size-medium);
|
||||
padding: 0 16px 0 0;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: auto;
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
.Toastify__toast-container {
|
||||
width: auto;
|
||||
}
|
||||
@@ -1,52 +0,0 @@
|
||||
import PropTypes from "prop-types";
|
||||
import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
|
||||
import AnnouncementsDualButtonWithIcon from "./AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
|
||||
import "react-toastify/dist/ReactToastify.css";
|
||||
import { toast, ToastContainer } from "react-toastify";
|
||||
import "./index.css";
|
||||
|
||||
/**
|
||||
* ToastComponent displays a notification that is triggered by error messages.
|
||||
*
|
||||
* @component
|
||||
* @param {Object} props - The component props
|
||||
* @param {string} props.subject - The subject or title of the toast message
|
||||
* @param {string} props.body - The body content of the toast message
|
||||
* @param {string} props.esc - The text for the dismiss action button
|
||||
* @param {string} props.primary - The text for the primary action button
|
||||
* @returns {JSX.Element} JSX element representing the ToastComponent
|
||||
*/
|
||||
|
||||
const ToastComponent = ({ subject, body, esc, primary }) => {
|
||||
const displayMsg = () => {
|
||||
toast(
|
||||
({ closeToast, toastProps }) => (
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={<ComplexAlert theme="red" />}
|
||||
subject={subject}
|
||||
body={body}
|
||||
esc={esc}
|
||||
primary={primary}
|
||||
closeToast={closeToast}
|
||||
/>
|
||||
),
|
||||
{ closeButton: false }
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div>
|
||||
<button onClick={displayMsg}>Click me</button>
|
||||
<ToastContainer className="Toastify__toast-container" />
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
ToastComponent.propTypes = {
|
||||
subject: PropTypes.string.isRequired,
|
||||
body: PropTypes.string.isRequired,
|
||||
esc: PropTypes.string.isRequired,
|
||||
primary: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default ToastComponent;
|
||||
@@ -4,16 +4,9 @@ import ErrorOutlineIcon from "@mui/icons-material/ErrorOutline";
|
||||
import HelpOutlineIcon from "@mui/icons-material/HelpOutline";
|
||||
import WebsiteTextField from "../../Components/TextFields/Website/WebsiteTextField";
|
||||
import DescriptionTextField from "../../Components/TextFields/Description/DescriptionTextField";
|
||||
import AnnouncementsDualButton from "../../Components/Toast/AnnouncementsDualButton/AnnouncementsDualButton";
|
||||
import AnnouncementsDualButtonWithIcon from "../../Components/Toast/AnnouncementsDualButtonWithIcon/AnnouncementsDualButtonWithIcon";
|
||||
import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
|
||||
import ComplexAlert from "../../Components/Icons/ComplexAlert/ComplexAlert";
|
||||
import AnnouncementsMessageBar from "../../Components/Toast/AnnouncementsMessageBar/AnnouncementsMessageBar";
|
||||
import AnnouncementUpdateSubscription from "../../Components/Toast/AnnouncementUpdateSubscription/AnnouncementUpdateSubscription";
|
||||
import PlayGroundCharts from "./PlayGround-Charts";
|
||||
import PlayGroundPopupModals from "./PlayGround-Popup-Modals";
|
||||
import PlayGroundTooltips from "./PlayGround-Tooltips";
|
||||
import Toast from "../../Components/Toast";
|
||||
|
||||
// This Component is just for the development and test
|
||||
// purposes and just to see what my components look like while development
|
||||
@@ -53,7 +46,6 @@ function PlayGround() {
|
||||
hasCopyButton={true}
|
||||
hintText="This is a hint text to help user."
|
||||
/>
|
||||
<Toast />
|
||||
|
||||
<hr />
|
||||
{/* Now, illustration of the Description text fields */}
|
||||
@@ -66,55 +58,6 @@ function PlayGround() {
|
||||
hasError={true}
|
||||
hintText="This is a hint text to help user."
|
||||
/>
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={
|
||||
<div className="info-icon-frame">
|
||||
<InfoOutlinedIcon style={{ fill: "#344054" }} />
|
||||
</div>
|
||||
}
|
||||
subject="We’ve just released a new feature"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="View changes"
|
||||
/>
|
||||
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={<ComplexAlert theme="red" />}
|
||||
subject="There was a problem with that action"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="Learn more"
|
||||
/>
|
||||
|
||||
<AnnouncementsDualButtonWithIcon
|
||||
icon={<ComplexAlert theme="green" />}
|
||||
subject="Successfully updated profile"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="Learn more"
|
||||
/>
|
||||
|
||||
<AnnouncementsDualButton
|
||||
subject="We’ve just released a new feature"
|
||||
body="Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid
|
||||
pariatur, ipsum dolor."
|
||||
esc="Dismiss"
|
||||
primary="View changes"
|
||||
/>
|
||||
|
||||
<AnnouncementsMessageBar message="New employee created successfully" />
|
||||
|
||||
<AnnouncementUpdateSubscription
|
||||
title="We’ve just released a new update!"
|
||||
text="Check out the all new dashboard view. Pages and now load faster."
|
||||
cancel="Dismiss"
|
||||
positive="Changelog"
|
||||
header="Subscribe to updates"
|
||||
button="Subscribe"
|
||||
/>
|
||||
<hr />
|
||||
<PlayGroundCharts />
|
||||
<hr />
|
||||
|
||||
Reference in new issue
Block a user