feat: bs5 grid system

Signed-off-by: hxtree <[email protected]>

common/config/rush/browser-approved-packages.json

@@ -434,6 +434,10 @@
       "name": "babel-plugin-prismjs",
       "allowedCategories": [ "apis" ]
     },
+    {
+      "name": "bootstrap",
+      "allowedCategories": [ "apis" ]
+    },
     {
       "name": "bson",
       "allowedCategories": [ "apis", "libraries" ]

common/config/rush/repo-state.json

@@ -1,5 +1,5 @@
 // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush.
 {
-  "pnpmShrinkwrapHash": "bd75aecd3ef0ca509e178152e6b128420b56d3ac",
+  "pnpmShrinkwrapHash": "aeee2ce0d784d1ffd96165dcb760637b0018b27d",
   "preferredVersionsHash": "7c6836c4ff2ee31a263e87ea93a487fc752ca3f6"
 }

services/design-system/package.json

@@ -15,7 +15,7 @@
     "app": "bin/app.js"
   },
   "scripts": {
-    "dev": "storybook dev -p 6006 -s public",
+    "dev": "storybook dev -p 3000 -s public",
     "build": "tsc --build ./tsconfig-build.json && vite build",
     "build:storybook": "tsc --p ./tsconfig-build.json && storybook build",
     "build:all": "rush build -t .",
@@ -46,7 +46,8 @@
     "@fortawesome/free-solid-svg-icons": "~6.4.2",
     "@cats-cradle/base-nodejs": "workspace:*",
     "jsdom": "~23.0.1",
-    "lodash": "~4.17.21"
+    "lodash": "~4.17.21",
+    "bootstrap": "~5.3.2"
   },
   "devDependencies": {
     "vite-plugin-checker": "0.6.2",

services/design-system/src/components/AppBar/AppBar.tsx

@@ -1,14 +1,46 @@
-import MUIAppBar, { AppBarProps as MUIAppBarProps } from '@mui/material/AppBar';
+import './style.module.scss';
 
 export type AppBarProps = {
+  siteTitle?: string;
   theme?: 'dark' | 'light';
-} & MUIAppBarProps;
+}
 
 export const AppBar = (props: AppBarProps) => {
-  const { theme, ...muiProps } = props;
-  return <MUIAppBar {...muiProps} className={
-    theme === 'dark' ? 'app-bar-dark' : 'app-bar-light'
-  }/>;
+  const { siteTitle, theme } = props;
+
+  return (
+    <>
+    <nav className={`navbar navbar-expand-lg navbar-light`}>
+      <div className="container">
+            <a className="navbar-brand" href="#">{siteTitle || 'Your Brand'}</a>
+            <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
+              <span className="navbar-toggler-icon"></span>
+            </button>
+        </div>
+    </nav>
+
+    <nav className="navbar navbar-expand-lg navbar-dark app-bar-dark">
+    <div className="container">
+      <div className="collapse navbar-collapse" id="navbarNav">
+        <ul className="navbar-nav me-auto">
+          <li className="nav-item">
+            <a className="nav-link" href="#">Home</a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link" href="#">About Us</a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link" href="#">Services</a>
+          </li>
+          <li className="nav-item">
+            <a className="nav-link" href="#">Contact</a>
+          </li>
+        </ul>
+        </div>
+      </div>
+    </nav>
+    </>
+  );
 };
 
-export default AppBar;
+export default AppBar;

services/design-system/src/components/AppBar/style.module.scss

@@ -1,4 +1,4 @@
-@import '../ColorPallette/color-pallette.scss';
+@import '../../styles/utils/color-pallette';
 
 .app-bar-light {
   background-color: #FFF !important;

services/design-system/src/components/PageFooter/PageFooter.tsx

@@ -22,15 +22,22 @@ export const PageFooter = (props: PageFooterProps) => {
     <>
       <SocialMediaBar/>
       <footer className='page-footer'>
-      {links && <Typography variant="body"><ul>
-        {links.map((link: PageFooterLink) => (
-          <li><Link href={link.url}>{link.label}</Link></li>
-        ))}</ul></Typography>
-      }
-      <hr/>
-      <Typography variant="body">
-        &copy; {year} {siteOwner}. All Rights Reserved.
-      </Typography>
+        <div className="container">
+          <div className="row">
+              {links && links.map((link: PageFooterLink) => (
+
+              <div className="col-12 col-sm-6 col-md-4 col-lg-3">
+            <Typography variant="body">
+                    <Link href={link.url}>{link.label}</Link>
+                    </Typography>
+                </div>
+              ))}
+          </div>
+          <hr/>
+        <Typography variant="body">
+          &copy; {year} {siteOwner}. All Rights Reserved.
+        </Typography>
+      </div>
     </footer>
     </>
   );

services/design-system/src/components/PageFooter/style.module.scss

@@ -2,16 +2,16 @@
 
 :global {
 .page-footer {
-  background-color: $color-primary;
-  color: $color-white;
+  background-color: $color-white;
+  color: $color-primary;
   margin: 0;
   padding: 3rem;
   a {
     opacity: 0.9;
     text-decoration: none;
-    color: $color-white;
+    color: $color-primary;
     &:hover {
-      color: $color-white;
+      color: $color-primary;
       opacity: 1;
       font-weight: bold;
     }

services/design-system/src/components/SocialMediaBar/SocialMediaBar.tsx

@@ -25,12 +25,19 @@ export const SocialMediaBar = (props: SocialMediaBarProps) => {
 
   return (
     <div className="social-media-bar">
-      <div>
-        {socialMedias && <Typography variant="body"><ul>
-        {socialMedias.map((socialMedia: SocialMediaBarLink) => (
-            <IconButton><FontAwesomeIcon icon={socialMedia.icon} color="white" size="xl"/></IconButton>
-        ))}</ul></Typography>
-      }
+      <div className="container">
+        <div className="row">
+          <div className="col">
+            <div className='logo'></div>
+          </div>
+          <div className="social-links col align-middle p-3 text-end">
+              {socialMedias &&
+              socialMedias.map((socialMedia: SocialMediaBarLink) => (
+                  <IconButton><FontAwesomeIcon icon={socialMedia.icon} color="white" size="xl"/></IconButton>
+              ))
+              }
+          </div>
+        </div>
       </div>
     </div>
   );

services/design-system/src/components/SocialMediaBar/style.module.scss

@@ -1,20 +1,39 @@
 @import '../../styles/utils/color-pallette';
-
+// @import '../../../public/hxtree.png';
 :global {
   .social-media-bar {
     background-color: $color-primary;
-    opacity: 0.8;
     margin: 0;
     margin-top: 4rem;
-    padding: 0.2rem 3rem;
-    text-align: right;
-    a {
-      text-decoration: none;
-      color: $color-white;
-      &:hover {
-        color: $color-white;
-        opacity: 1;
-        font-weight: bold;
+    // padding: 0.2rem 3rem;
+    .logo {
+      background-image: url('/hxtree.png');
+      background-repeat: no-repeat;
+      background-position: center;
+      background-size: cover;
+      width: 72px;
+      height: 72px;
+      margin-top: 0.6rem;
+      margin-bottom: 0.6rem;
+    }
+    .social-links {
+      ul {
+        margin: 0;
+        padding: 0;
+        li {
+          background-color:red;
+          a {
+            text-align: right;
+            text-decoration: none;
+            color: $color-white;
+            &:hover {
+              color: $color-white;
+              opacity: 1;
+              font-weight: bold;
+            }
+          }
+
+        }
       }
     }
   }

services/design-system/src/styles/index.scss

@@ -1,6 +1,42 @@
 @import './utils/color-pallette';
 @import './utils/bg-color';
+
+
+
+@import "../node_modules/bootstrap/scss/bootstrap";
+
+// // 1. Include functions first (so you can manipulate colors, SVGs, calc, etc)
+// @import "../node_modules/bootstrap/scss/functions";
+
+// // 2. Include any default variable overrides here
+
+// // 3. Include remainder of required Bootstrap stylesheets (including any separate color mode stylesheets)
+// @import "../node_modules/bootstrap/scss/variables";
+// @import "../node_modules/bootstrap/scss/variables-dark";
+
+// // 4. Include any default map overrides here
+
+// // 5. Include remainder of required parts
+// @import "../node_modules/bootstrap/scss/maps";
+// @import "../node_modules/bootstrap/scss/mixins";
+// @import "../node_modules/bootstrap/scss/root";
+
+// // 6. Optionally include any other parts as needed
+// @import "../node_modules/bootstrap/scss/utilities";
+// @import "../node_modules/bootstrap/scss/reboot";
+// @import "../node_modules/bootstrap/scss/type";
+// @import "../node_modules/bootstrap/scss/images";
+// @import "../node_modules/bootstrap/scss/containers";
+// @import "../node_modules/bootstrap/scss/grid";
+// @import "../node_modules/bootstrap/scss/helpers";
+
+// // 7. Optionally include utilities API last to generate classes based on the Sass map in `_utilities.scss`
+// @import "../node_modules/bootstrap/scss/utilities/api";
+
+
+
 @import '../components/Typography/style.module.scss';
+@import '../components/AppBar/style.module.scss';
 @import '../components/Button/style.module.scss';
 @import '../components/SocialMediaBar/style.module.scss';
 @import '../components/PageFooter/style.module.scss';