Added support for two-column and narrow-wide templates in Banner template (#110)

* Added QuickCreate component to support Quick links in wss portal

Co-authored-by: manasa <[email protected]>

Author: 4manasa

packages/react-sdk-components/src/components/designSystemExtension/Banner/Banner.css

@@ -33,3 +33,7 @@
   font-size: 1rem;
   font-weight: 400;
 }
+
+.banner-layout {
+  padding: 1rem;
+}

packages/react-sdk-components/src/components/designSystemExtension/Banner/Banner.tsx

@@ -3,8 +3,13 @@ import Grid from '@material-ui/core/Grid';
 import './Banner.css';
 
 export default function Banner(props) {
-  const { a, b, banner } = props;
+  const { a, b, banner, variant} = props;
   const { title, message, backgroundImage } = banner;
+  const variantMap = {
+    'two-column': [6, 6],
+    'narrow-wide': [4, 8],
+    'wide-narrow': [8, 4]
+  };
   return (
     <div style={{ marginBottom: '2rem' }}>
       <div
@@ -18,16 +23,14 @@ export default function Banner(props) {
           </div>
         </div>
       </div>
-      <div style={{ padding: '1rem' }}>
-        <Grid container item xs={12} spacing={1}>
-          <Grid item xs={8} style={{ padding: '1em' }}>
-            {a}
-          </Grid>
-          <Grid item xs={4} style={{ padding: '1em' }}>
-            {b}
-          </Grid>
+      <Grid container item xs={12} className='banner-layout' spacing={1}>
+        <Grid item xs={variantMap[variant][0]} style={{ padding: '1em' }}>
+          {a}
         </Grid>
-      </div>
+        <Grid item xs={variantMap[variant][1]} style={{ padding: '1em' }}>
+          {b}
+        </Grid>
+      </Grid>
     </div>
   );
 }

packages/react-sdk-components/src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.css

@@ -1,7 +1,7 @@
 .quick-link-ul-list {
   list-style: none;
   padding: 0;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(auto-fill, minmax(min(40ch, 100%), 1fr));
   display: grid;
   gap: calc(1rem);
 }
@@ -33,4 +33,8 @@
   display: flex;
   align-items: center;
   gap: 0.5rem;
- }
+}
+
+.quick-link-heading {
+  margin-top: 8px;
+}

packages/react-sdk-components/src/components/designSystemExtension/WssQuickCreate/WssQuickCreate.tsx

@@ -7,7 +7,7 @@ export default function WssQuickCreate(props) {
 
   return (
     <div>
-      <h1>{heading}</h1>
+      <h1 className='quick-link-heading'>{heading}</h1>
       <ul className='quick-link-ul-list'>
         {actions &&
           actions.map(element => {

packages/react-sdk-components/src/components/template/WssNavBar/WssNavBar.tsx

@@ -34,7 +34,7 @@ const useStyles = makeStyles(theme => ({
 
 export default function WssNavBar(props) {
   const { appInfo, navLinks, operator, navDisplayOptions } = props;
-  const { alignment } = navDisplayOptions;
+  const { alignment, position } = navDisplayOptions;
   const classes = useStyles();
 
   const [anchorElNav, setAnchorElNav] = useState<null | HTMLElement>(null);
@@ -55,11 +55,24 @@ export default function WssNavBar(props) {
     setAnchorElUser(null);
   };
 
+  const navLinksContent = (
+    <Box
+      sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
+      style={{ justifyContent: alignment }}
+    >
+      {navLinks.map(link => (
+        <Button className='link-style' key={link.text} onClick={link.onClick}>
+          {link.text}
+        </Button>
+      ))}
+    </Box>
+  );
+
   return (
     <div id='NavBar' className='nav-bar'>
       <AppBar position='static' color='primary'>
         <Container maxWidth='xl'>
-          <Toolbar disableGutters>
+          <Toolbar disableGutters style={{ justifyContent: 'space-between' }}>
             <Button style={{ textTransform: 'capitalize' }} onClick={appInfo.onClick}>
               <img src={appInfo.imageSrc} className={classes.appListLogo} />
               <span className={classes.appName}>{appInfo.appName}</span>
@@ -98,16 +111,7 @@ export default function WssNavBar(props) {
               </Menu>
             </Box>
 
-            <Box
-              sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}
-              style={{ justifyContent: alignment }}
-            >
-              {navLinks.map(link => (
-                <Button className='link-style' key={link.text} onClick={link.onClick}>
-                  {link.text}
-                </Button>
-              ))}
-            </Box>
+            {position === 'inline' && <>{navLinksContent}</>}
 
             <Box sx={{ flexGrow: 0 }}>
               <IconButton onClick={handleOpenUserMenu}>
@@ -134,6 +138,7 @@ export default function WssNavBar(props) {
               </Menu>
             </Box>
           </Toolbar>
+          {position === 'below' && <>{navLinksContent}</>}
         </Container>
       </AppBar>
     </div>