Merge pull request #31 from AirWalk-Digital/upgrade

Fixes to broken components
AirWalk-Digital · Jan 7, 2024 · d612258 · d612258
2 parents 4b3cefb + 5706fb4
commit d612258
Show file tree

Hide file tree

Showing 6 changed files with 100 additions and 77 deletions.
diff --git a/src/stories/Banner.jsx b/src/stories/Banner.jsx
@@ -122,7 +122,7 @@ const Banner = ({ children, color='primary', sx = {}, ...props }) => {
             <Box sx={{ display: "flex", alignItems: "center", breakInside: 'avoid-column' }}>
                 {/* <Box sx={{ display: "flex", alignItems: "left", paddingLeft: "2.5%" }}> */}
                 {/* {faIcon && <FontAwesomeIcon icon={['fal', faIcon]} sx={{ pl: "2%", pr: '10px' }} style={{ width: "50px", height: "50px", paddingTop: '1%', paddingBottom: '1%', paddingLeft: '2%', paddingRight: '2%' }} />} */}
-                {icon && <Icon type={type} sx={{  color: theme.palette.background[color], pl: '5px', pr: '1%', pt: '1%' }} >{icon}</Icon>}
+                {icon && <Icon type={type} color={color} sx={{ pl: '5px', pr: '1%', pt: '1%' }} >{icon}</Icon>}
 
                 {/* <Box sx={{ variant: "styles.p", paddingLeft: "2.5%", minHeight: "100px", m: '1%' }}> */}
                 <Box sx={{ py: '0', pl: padding, minHeight: "50px", m: '0.5%', display: "flex", flexDirection: 'column', alignItems: "left" }}>

diff --git a/src/stories/Icons.stories.tsx b/src/stories/Icons.stories.tsx
@@ -16,7 +16,7 @@ const meta: Meta<typeof Icon> = {
       control: { type: 'select' },
     },
     type: {
-      options: ["light", "solid", "brands", "thin", "custom"],
+      options: ["light", "solid", "brands", "thin", "custom", "fas", "fal", "far", "fab"],
       control: { type: 'select' },
       defaultValue: "light"
     }
@@ -37,6 +37,16 @@ export const Primary: Story = {
 };
 
 
+export const OldTypeDefinition: Story = {
+  args : {
+    type: "fal",
+  children: (
+`star`
+  ),
+  color: 'secondary',
+}
+};
+
 export const Custom: Story = {
 args : {
   type: "custom",

diff --git a/src/stories/Images.jsx b/src/stories/Images.jsx
@@ -28,7 +28,12 @@ library.add(fab, fas, fal, fass);
 // fas -> solid
 // fab -> brands
 // fad -> duotone (pro only)
-// const faTypes = ["fal", "fas", "fab", "fad", "fa-solid"];
+const faOldTypes = [
+  { "fal": { type: "light" } },
+  { "fas": { type: "solid" } },
+  { "fab": { type: "bold" } }
+];
+
 const faTypes = ["light", "solid", "brands", "thin", "custom"];
 
 const FaIcon = ({ children, text = "", sx = {}, ...props }) => {
@@ -59,36 +64,43 @@ const Icon = ({ children, type = 'light', size = '75px', color = 'primary', sx =
   }
   let kiticon = "fa-kit fa-" + children
   // console.log('Icon:children: ', children)
-  // console.log('Icon:kiticon: ', kiticon)
-
-  if (children) {
-    if (type === 'custom') {
-      icon = <Box sx={{ ...sx, color:themeColor }}><i className={kiticon} style={{ width: size, height: size }}></i></Box>;
-      // console.log(icon)
-    } else if (faTypes.indexOf(type) > -1) {
-      if (type === 'solid') {
-        icon = <Box sx={{ ...sx, color:themeColor }}><FontAwesomeIcon icon={['fa-solid', 'fa-' + children]} style={{ width: size, height: size }}  /></Box>;
-      } else if (type === 'light') {
-        icon = <Box sx={{ ...sx , color:themeColor }}><FontAwesomeIcon icon={['fa-light', 'fa-' + children]} style={{ width: size, height: size }} /></Box>;
-      } else if (type === 'thin') {
-        icon = <Box sx={{ ...sx, color:themeColor  }}><FontAwesomeIcon icon={['fa-thin', 'fa-' + children]} style={{ width: size, height: size }} /></Box>;
-      }
+  for (let i = 0; i < faOldTypes.length; i++) {
+    const faType = faOldTypes[i];
+    if (faType[type]) {
+      type = faType[type].type;
+      break;
     }
+  }
+    // console.log('Icon:kiticon: ', kiticon)
+
+    if (children) {
+      if (type === 'custom') {
+        icon = <Box sx={{ ...sx, color:themeColor }}><i className={kiticon} style={{ width: size, height: size }}></i></Box>;
+        // console.log(icon)
+      } else if (faTypes.indexOf(type) > -1) {
+        if (type === 'solid') {
+          icon = <Box sx={{ ...sx, color:themeColor }}><FontAwesomeIcon icon={['fa-solid', 'fa-' + children]} style={{ width: size, height: size }}  /></Box>;
+        } else if (type === 'light') {
+          icon = <Box sx={{ ...sx , color:themeColor }}><FontAwesomeIcon icon={['fa-light', 'fa-' + children]} style={{ width: size, height: size }} /></Box>;
+        } else if (type === 'thin') {
+          icon = <Box sx={{ ...sx, color:themeColor  }}><FontAwesomeIcon icon={['fa-thin', 'fa-' + children]} style={{ width: size, height: size }} /></Box>;
+        } 
+      } 
+    };
+    return (icon);
   };
-  return (icon);
-};
 
-const Team = ({ children }) => {
-  let content = getListFromContent(children);
+  const Team = ({ children }) => {
+    let content = getListFromContent(children);
 
-  return (<></>)
+    return (<></>)
 
-}
+  }
 
-const FaIcons = () => {
-  const icons = [
-    "cloud",
-    "shield-halved",
+  const FaIcons = () => {
+    const icons = [
+      "cloud",
+      "shield-halved",
     "people-arrows",
     "server",
     "building",

diff --git a/src/stories/Insights.jsx b/src/stories/Insights.jsx
@@ -11,8 +11,45 @@ import { useTheme } from '@mui/material/styles';
 import { Icon } from './Images.jsx'
 import {getListContent, getMDXparts, faTypes} from './utils/mdxContent.js'
 
-const Insight = ({ children, table = false, row = 0, maxRows = 0, splitter = true, sx = {} }) => {
+
+
+const Insights = ({ children, sx = {}, splitter = true, color='secondary', ...props }) => {
+
+    // console.log('InsightTable:children: ', children)
+
+    if (children.hasOwnProperty('props')) {
+        let list = React.Children.toArray(children.props.children);
+        list = list.filter(item => item !== "\n") //strip all the empty entries (\n)
+        // console.log(list)
+
+        const insights = list.map((item, i) => (
+            item.type === "li" ? (
+                <Insight row={i} maxRows={list.length} splitter={splitter} color={color} key={i} sx={sx}>{React.Children.toArray(item.props.children).filter(item => item !== "\n")}</Insight>
+            ) : (<p>error</p>)
+
+        )
+        )
+        return (
+            <Table sx={{ minWidth: 650, background: "unset", border: "unset" }}>
+                <TableBody>
+                    {list.map((item, i) => (
+                <Insight table={true} row={i} maxRows={list.length} splitter={splitter} color={color} key={i} sx={sx}>{React.Children.toArray(item.props.children).filter(item => item !== "\n")}</Insight>
+                ))}
+
+                </TableBody>
+            </Table>
+        )
+    } else {
+        return (
+            <p>Error in content...</p>
+        )
+    }
+
+};
+
+const Insight = ({ children, table = false, splitter = true, sx = {}, color = 'secondary' , row = 0, maxRows = 0}) => {
     const theme = useTheme();
+
 
     let content = getListContent(children);
 
@@ -30,12 +67,12 @@ const Insight = ({ children, table = false, row = 0, maxRows = 0, splitter = tru
     if (!content.body) { block2 = 'none' } // if there is no body, only show the header
 
 
-    const Splitter = ({ row = 0, maxRows = 0, splitter = true }) => {
+    const Splitter = ({ row = 0, maxRows = 0, splitter = true, color={color} }) => {
 
 
         if (row < maxRows - 1 && splitter) {
             return (
-                <Box sx={{ display: "flex", backgroundColor: theme.palette.background.tertiary, width: "100%", height: "2px", }} />
+                <Box sx={{ display: "flex", backgroundColor: theme.palette.background[color], width: "100%", height: "2px", }} />
             )
         }
         else {
@@ -49,7 +86,7 @@ const Insight = ({ children, table = false, row = 0, maxRows = 0, splitter = tru
             <Box sx={{ display: "flex", py: "0", minHeight: "4em", ...sx }}>
                 <Box sx={{ px: "2%", display: "flex", alignItems: "center" }}>
                     {/* <FontAwesomeIcon icon={fas("cloud")} sx={{ px: "2%" }} style={{ width: "50px", height: "50px" }} /> */}
-                    <Icon type={type} sx={{ px: "2%" }} style={{ width: "50px", height: "50px" }} >{icon}</Icon>
+                    <Icon type={type} color={color} sx={{ px: "2%" }} style={{ width: "50px", height: "50px" }} >{icon}</Icon>
                 </Box>
                 <Box sx={{ px: "1%", py: '5px', display: 'flex', alignItems: 'center', fontSize: '2rem', minWidth: '30%', ...sx }}>
                     {content.heading}
@@ -58,56 +95,20 @@ const Insight = ({ children, table = false, row = 0, maxRows = 0, splitter = tru
                     {content.body}
                 </Box>
             </Box>
-            <Splitter row={row} maxRows={maxRows} splitter={splitter} />
+            <Splitter row={row} maxRows={maxRows} splitter={splitter} color={color}/>
         </>
 
     )} else {
         return (
             <TableRow key={row.name} sx={{ color: 'text.main', '&:last-child td, &:last-child th': { border: 0 } }}>
-              <TableCell align="left" sx={{ color: 'text.main', borderBottomWidth: '2px', borderBottomColor: 'background.tertiary'}}><Icon type={type} sx={{ px: "2%" }} style={{ width: "50px", height: "50px" }} >{icon}</Icon></TableCell>
-              <TableCell align="left" sx={{ color: 'text.main', borderBottomWidth: '2px', borderBottomColor: 'background.tertiary', fontSize: '2rem' }}>{content.heading}</TableCell>
-              <TableCell align="left" sx={{ color: 'text.main', borderBottomWidth: '2px', borderBottomColor: 'background.tertiary', fontSize: '2rem'}}>{content.body}</TableCell>
+              <TableCell align="left" sx={{ color: 'text.main', borderBottomWidth: splitter==true ? '2px' : '0px', borderBottomColor: theme.palette.background[color]}}><Icon type={type} color={color} sx={{ px: "2%" }} style={{ width: "50px", height: "50px" }} >{icon}</Icon></TableCell>
+              <TableCell align="left" sx={{ color: 'text.main', borderBottomWidth: splitter==true ? '2px' : '0px', borderBottomColor: theme.palette.background[color], fontSize: '2rem' }}>{content.heading}</TableCell>
+              <TableCell align="left" sx={{ color: 'text.main', borderBottomWidth: splitter==true ? '2px' : '0px', borderBottomColor: theme.palette.background[color], fontSize: '2rem'}}>{content.body}</TableCell>
             </TableRow>
 
         )
     }
 };
 
-const Insights = ({ children, sx = {}, splitter = true, ...props }) => {
-
-    // console.log('InsightTable:children: ', children)
-
-    if (children.hasOwnProperty('props')) {
-        let list = React.Children.toArray(children.props.children);
-        list = list.filter(item => item !== "\n") //strip all the empty entries (\n)
-        // console.log(list)
-
-        const insights = list.map((item, i) => (
-            item.type === "li" ? (
-                <Insight row={i} maxRows={list.length} splitter={splitter} key={i} sx={sx}>{React.Children.toArray(item.props.children).filter(item => item !== "\n")}</Insight>
-            ) : (<p>error</p>)
-
-        )
-        )
-        return (
-            <Table sx={{ minWidth: 650, background: "unset", border: "unset" }}>
-                <TableBody>
-                    {list.map((item, i) => (
-                <Insight table={true} row={i} maxRows={list.length} splitter={splitter} key={i} sx={sx}>{React.Children.toArray(item.props.children).filter(item => item !== "\n")}</Insight>
-                ))}
-
-                </TableBody>
-            </Table>
-        )
-    } else {
-        return (
-            <p>no content</p>
-        )
-    }
-
-};
-
-
-
 
 export { Insights };
diff --git a/src/stories/Insights.stories.tsx b/src/stories/Insights.stories.tsx
@@ -68,5 +68,5 @@ args: {
   - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ipsum enim. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eu ipsum enim.
 `
   ),
-  splitter: 'false',
+  splitter: false,
 }};
diff --git a/src/stories/Roadmap.jsx b/src/stories/Roadmap.jsx
@@ -15,7 +15,7 @@ import { getContrastYIQ } from './utils/colors.js';
 
 import {getListContent, getMDXparts, faTypes} from './utils/mdxContent.js'
 
-const Roadmap = ({ children, minWidth = '20%', maxWidth = '30em', sx = {}, ...props }) => {
+const Roadmap = ({ children, minWidth = '20%', maxWidth = '30em', color='secondary', sx = {}, ...props }) => {
     let renderlist = "";
 
     let roadmap = [];
@@ -36,7 +36,7 @@ const Roadmap = ({ children, minWidth = '20%', maxWidth = '30em', sx = {}, ...pr
     }
     const roadmapitems = roadmap.map((item, i) => (
         <Grid item xs={3} sx={{ overflow:'hidden', ...sx}}>
-            <RoadmapItem title={item.title[0].props.children} content={item.content[0].props.children}/>
+            <RoadmapItem title={item.title[0].props.children} content={item.content[0].props.children} color={color}/>
         </Grid>
     ));
 
@@ -52,7 +52,7 @@ const Roadmap = ({ children, minWidth = '20%', maxWidth = '30em', sx = {}, ...pr
 
 };
 
-const RoadmapItem = ({ title, content, minWidth, maxWidth }, key = 0) => {
+const RoadmapItem = ({ title, content, minWidth, maxWidth, color='tertiary' }, key = 0) => {
 
     // console.log(content.toString());
     const theme = useTheme();
@@ -61,7 +61,7 @@ const RoadmapItem = ({ title, content, minWidth, maxWidth }, key = 0) => {
         <Box key={key} sx={{ display: "flex", flexDirection: 'column', py: "1%", fontSize: 'xsmall', minHeight: "5em", maxHeight: '10em' }}>
 
             <Box id='1' sx={{
-                backgroundColor: 'background.tertiary', borderTopLeftRadius: "10px", borderBottomLeftRadius: "10px",
+                backgroundColor: theme.palette.background[color], borderTopLeftRadius: "10px", borderBottomLeftRadius: "10px",
                 pr: '60px',
                 pl: '2%', 
                 py: '0.5%', 
@@ -74,7 +74,7 @@ const RoadmapItem = ({ title, content, minWidth, maxWidth }, key = 0) => {
                 textAlign: 'center',
                 my: '0',
                 // marginRight: '-30px',
-                color: getContrastYIQ(theme.palette.background.tertiary, theme),
+                color: getContrastYIQ(theme.palette.background[color], theme),
                 clipPath: 'polygon(0 0, calc(100% - 40px) 0, 100% 50%, calc(100% - 40px) 100%, 0 100%)',
                 em: {'&:before': {content: '"\\a "',whiteSpace: 'pre'}}