Modified the structure of updates and label components

Author: GabrielChan1

.gitignore

@@ -25,4 +25,4 @@ yarn-error.log*
 *storybook.log
 .storybook/
 /src/stories
-/src/components/UpdatesMenu/
+*.stories.js

src/Styles.js

@@ -12,7 +12,7 @@ export const fonts = {
         size: '16px',
         lineHeight: '24px',
         color: colors.darkGrey,
-        fontWeight: 600
+        fontWeight: 500
     },
     default: {
         size: '13px',

src/components/BasicMenus/MenuToggleButton.jsx

@@ -5,17 +5,17 @@ import { useState } from 'react';
 import PropTypes from 'prop-types';
 
 /**
- * Button component which displays a dropdown menu when toggled
+ * Button component which displays a dropdown menu when toggled.
  * 
  * Props:
- * - label<String>: Text to be used for the button label
+ * - label<String>: Text to be used for the button label.
  * 
- * - menuComponent<Component>: Menu component to be displayed when button is toggled
+ * - menuComponent<Component>: Menu component to be displayed when button is toggled.
  * 
- * - icon<Component>: Optional prop for including an icon in the button label
+ * - icon<Component>: Optional prop for including an icon in the button label.
  *      Default: null
  * 
- * - style<Object>: Optional prop for adding further inline styling 
+ * - style<Object>: Optional prop for adding further inline styling .
  *      Default: {}
  */
 export default function MenuToggleButton({label, menuComponent, icon, style}) {

src/components/Button/HRMButton.jsx

@@ -1,4 +1,4 @@
-import {styled} from '@mui/system';
+import { styled } from '@mui/system';
 import Button from '@mui/material/Button';
 import PropTypes from 'prop-types';
 
@@ -12,13 +12,19 @@ import PropTypes from 'prop-types';
  * 
  * - children<Any>: Text to be used for the button label.
  * 
- * - style<Object>: Optional prop for adding further inline styling 
+ * - startIcon<Component>: Optional prop for including an icon on the left side of the button label.
+ *      Default: null
+ * 
+ * - endIcon<Component>: Optional prop for including an icon on the right side of the button label.
+ *      Default: null
+ * 
+ * - style<Object>: Optional prop for adding further inline styling.
  *      Default: {}
  * 
  * - enabled<Boolean>: Flag determining whether the button is enabled or disabled.
  *      Default: true
  */
-export default function HRMButton({mode, children, style, enabled}) {
+export default function HRMButton({mode, children, startIcon, endIcon, style, enabled}) {
     const primaryStyle = {
         textTransform: "none",
         backgroundColor: "#7F56D9",
@@ -93,17 +99,17 @@ export default function HRMButton({mode, children, style, enabled}) {
 
     if (mode === "primary" || mode === "error") {
         return (
-            <StyledButton variant="contained" disabled={!enabled} disableElevation>{children}</StyledButton>
+            <StyledButton startIcon={startIcon} endIcon={endIcon} variant="contained" disabled={!enabled} disableElevation>{children}</StyledButton>
         );
     }
     else if (mode === "secondaryA" || mode === "secondaryB") {
         return (
-            <StyledButton variant="outlined" disabled={!enabled}>{children}</StyledButton>
+            <StyledButton startIcon={startIcon} endIcon={endIcon} variant="outlined" disabled={!enabled}>{children}</StyledButton>
         );
     }
     else {
         return (
-            <StyledButton variant="text" disabled={!enabled}>{children}</StyledButton>
+            <StyledButton startIcon={startIcon} endIcon={endIcon} variant="text" disabled={!enabled}>{children}</StyledButton>
         );
     }
 };
@@ -125,6 +131,8 @@ HRMButton.propTypes = {
 
 //Default values for this component
 HRMButton.defaultProps = {
+    startIcon: null,
+    endIcon: null,
     style: {},
     enabled: true
 };

src/components/Button/HRMButton.stories.js

@@ -1,4 +1,6 @@
 import HRMButton from './HRMButton';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 
 //Storybook display settings
 export default {
@@ -14,39 +16,50 @@ export default {
 export const Primary = {
     args: {
         mode: 'primary',
-        children: 'Button',
-        enabled: true
+        children: 'Button'
     }
 };
 
 export const SecondaryA = {
     args: {
         mode: 'secondaryA',
-        children: 'Button',
-        enabled: true
+        children: 'Button'
     }
 };
 
 export const SecondaryB = {
     args: {
         mode: 'secondaryB',
-        children: 'Button',
-        enabled: true
+        children: 'Button'
     }
 };
 
 export const Tertiary = {
     args: {
         mode: 'tertiary',
-        children: 'Button',
-        enabled: true
+        children: 'Button'
     }
 };
 
 export const Error = {
     args: {
         mode: 'error',
-        children: 'Button',
-        enabled: true
+        children: 'Button'
     }
 };
+
+export const Previous = {
+    args: {
+        mode: 'secondaryB',
+        children: 'Previous',
+        startIcon: <ArrowBackIcon />
+    }
+};
+
+export const Next = {
+    args: {
+        mode: 'secondaryB',
+        children: 'Next',
+        endIcon: <ArrowForwardIcon />
+    }
+};

src/components/Label/Label.jsx

@@ -0,0 +1,74 @@
+import Chip from '@mui/material/Chip';
+import { styled } from '@mui/system';
+import { colors, fonts } from '../../Styles';
+import PropTypes from 'prop-types';
+
+/**
+ * Label components for both HRM and Onboarding applications. Can be configured to be an orange, 
+ * gray, purple(brand), green(success), new, waiting or seen label using prop values.
+ * 
+ * Props:
+ * - mode<String>: Determines the type of the label. 
+ *      Valid values: ['orange', 'gray', 'brand', 'success', 'new', 'waiting', 'seen']
+ * 
+ * - label<String>: Text to be used for the label.
+ * 
+ * - style<Object>: Optional prop for adding further inline styling.
+ *      Default: {}
+ */
+export default function Label({mode, label, style}) {
+    //Label styles
+    const StyledChip = styled(Chip)({...{
+        backgroundColor: (mode === "orange") ? "#FEF6EE" :
+            (mode === "gray") ? "#F9FAFB" :
+            (mode === "brand") ? "#F9F5FF" : 
+            (mode === "success") ? "#ECFDF3" : "#FFFFFF",
+        color: (mode === "orange") ? "#B42318" : 
+            (mode === "gray") ? "#475467" :
+            (mode === "brand") ? colors.purple :
+            (mode === "success") ? "#067647" : colors.darkGrey,
+        border: (mode === "orange") ? "1px solid #F9DBAF" :
+            (mode === "gray") ? "1px solid #EAECF0" :
+            (mode === "brand") ? "1px solid #E9D7FE" :
+            (mode === "success") ? "1px solid #ABEFC6" : "1px solid #D0D5DD",
+        fontFamily: fonts.fontFamily,
+        fontWeight: (mode === "new" || mode === "waiting" || mode === "seen") ? 
+            fonts.bold.fontWeight : fonts.default.fontWeight,
+        fontSize: "12px",
+        borderRadius: "4px"
+    }, ...style});
+
+    //Colored dot styles if using a status label
+    const coloredDot = <span style={{
+        backgroundColor: (mode === "new") ? "#F79009" :
+            (mode === "waiting") ? "#D92D20" :
+            (mode === "seen") ? "#344054" : "#FFFFFF",
+        height: "6px",
+        width: "6px",
+        borderRadius: "50%",
+        marginLeft: "6px",
+    }}/>;
+
+    return (
+        <StyledChip 
+            icon={(mode === "new" || mode === "waiting" || mode === "seen") ? coloredDot : null} 
+            label={label} 
+            size="small"
+            variant="outlined" 
+        />
+    );
+};
+
+//Control panel settings for storybook 
+Label.propTypes = {
+    //Label type
+    mode: PropTypes.oneOf(['orange', 'gray', 'brand', 'success']),
+
+    //Label text
+    label: PropTypes.string.isRequired
+};
+
+//Default values for this component
+Label.defaultProps = {
+    style: {}
+};