uibee 2.2.10 → 2.3.1

package/dist/globals.css

@@ -234,6 +234,36 @@
       bottom: 0;
     }
   }
+  .heading {
+    z-index: 2;
+    font-weight: 600;
+    font-size: 2.1rem;
+    margin: 1rem 0;
+    padding: .3em 0;
+    padding-left: 0px;
+    line-height: 1.2em;
+    @media only screen and (min-width: 400px) {
+      font-size: 3.5rem;
+    }
+    @media only screen and (min-width: 800px) {
+      &::before {
+        padding-left: 1.5rem;
+        font-size: 3.5rem;
+        z-index: -1;
+        content: "";
+        border-width: .7rem;
+        border-color: var(--color-login-500);
+        z-index: 2;
+        border-style: solid none none solid;
+        width: 2.6rem;
+        height: 2.6rem;
+        margin-top: -.8rem;
+        margin-left: -1.5rem;
+        transition: all .1s;
+        position: absolute;
+      }
+    }
+  }
   .sr-only {
     position: absolute;
     width: 1px;
@@ -320,6 +350,9 @@
   .z-900 {
     z-index: 900;
   }
+  .col-start-3 {
+    grid-column-start: 3;
+  }
   .m-auto {
     margin: auto;
   }
@@ -347,6 +380,15 @@
   .ml-3 {
     margin-left: calc(var(--spacing) * 3);
   }
+  .page-container {
+    display: grid;
+    grid-template-columns: 1fr 1rem minmax(0, 72rem) 1rem 1fr;
+    padding-top: 0rem;
+    @media (min-width: 800px) {
+      grid-template-columns: 1fr 2rem minmax(0, 72rem) 2rem 1fr;
+      padding-top: 2rem;
+    }
+  }
   .line-clamp-3 {
     overflow: hidden;
     display: -webkit-box;

package/dist/src/components/container/page.d.ts

@@ -0,0 +1,4 @@
+export default function PageContainer({ title, children }: {
+    title: string;
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/src/components/container/page.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export default function PageContainer({ title, children }) {
+    return (_jsx("div", { className: 'w-full page-container', children: _jsxs("div", { className: 'flex flex-col col-start-3', children: [_jsx("h1", { className: 'heading', children: title }), children] }) }));
+}

package/dist/src/components/index.d.ts

@@ -13,3 +13,4 @@ export { default as NavDropdown } from './navbar/navbarDropdown';
 export { default as VersionTag } from './version/version';
 export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, addToast } from './toast/toaster';
+export { default as PageContainer } from './container/page';

package/dist/src/components/index.js

@@ -14,6 +14,8 @@ export { default as LanguageToggle } from './toggle/language';
 export { default as Navbar } from './navbar/navbar';
 export { default as NavItem } from './navbar/navbarItem';
 export { default as NavDropdown } from './navbar/navbarDropdown';
+// Other components
 export { default as VersionTag } from './version/version';
 export { default as LoginPage } from './login/loginPage';
 export { default as Toaster, addToast } from './toast/toaster';
+export { default as PageContainer } from './container/page';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.2.10",
+  "version": "2.3.1",
   "description": "Shared components, functions and hooks for reuse across Login projects",
   "homepage": "https://github.com/Login-Linjeforening-for-IT/uibee#readme",
   "bugs": {

package/src/components/container/page.tsx

@@ -0,0 +1,10 @@
+export default function PageContainer({ title, children }: { title: string; children: React.ReactNode }) {
+    return (
+        <div className='w-full page-container'>
+            <div className='flex flex-col col-start-3'>
+                <h1 className='heading'>{title}</h1>
+                {children}
+            </div>
+        </div>
+    )
+}

package/src/components/index.ts

@@ -18,6 +18,8 @@ export { default as Navbar } from './navbar/navbar'
 export { default as NavItem } from './navbar/navbarItem'
 export { default as NavDropdown } from './navbar/navbarDropdown'
 
+// Other components
 export { default as VersionTag } from './version/version'
 export { default as LoginPage } from './login/loginPage'
-export { default as Toaster, addToast } from './toast/toaster'
+export { default as Toaster, addToast } from './toast/toaster'
+export { default as PageContainer} from './container/page'

package/src/globals.css

@@ -128,4 +128,59 @@ body {
         right: 0;
         bottom: 0;
     }
+}
+
+@utility page-container {
+    display: grid;
+    grid-template-columns: 1fr 1rem minmax(0, 72rem) 1rem 1fr;
+    padding-top: 0rem;
+
+    @media (min-width: 800px) {
+        grid-template-columns: 1fr 2rem minmax(0, 72rem) 2rem 1fr;
+        padding-top: 2rem;
+    }
+}
+
+@utility heading {
+    z-index: 2;
+    font-weight: 600;
+    font-size: 2.1rem;
+    margin: 1rem 0;
+    padding: .3em 0;
+    padding-left: 0px;
+    line-height: 1.2em;
+
+    @media only screen and (min-width: 400px) {
+        font-size: 3.5rem;
+    }
+
+    @media only screen and (min-width: 800px) {
+        &::before {
+            padding-left: 1.5rem;
+            font-size: 3.5rem;
+            z-index: -1;
+            content: "";
+            border-width: .7rem;
+            border-color: var(--color-login-500);
+            z-index: 2;
+            border-style: solid none none solid;
+            width: 2.6rem;
+            height: 2.6rem;
+            margin-top: -.8rem;
+            margin-left: -1.5rem;
+            transition: all .1s;
+            position: absolute;
+        }
+    }
+}
+
+@utility highlighted-section {
+    line-height: 1.8rem;
+    border-left: .3rem solid var(--color-login);
+    max-width: 50rem;
+    margin-top: 1.2rem;
+    margin-bottom: 1.2rem;
+    padding: .5rem 0 .5rem 1rem;
+    font-size: 1.2rem;
+    font-weight: 500;
 }