uibee 2.2.9 → 2.3.0

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;
@@ -551,8 +593,8 @@
   .animate-jump {
     animation: jump 0.4s 1;
   }
-  .cursor-none {
-    cursor: none;
+  .cursor-default {
+    cursor: default;
   }
   .cursor-pointer {
     cursor: pointer;

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

@@ -0,0 +1,4 @@
+export declare 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 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/login/loginPage.js

@@ -8,6 +8,6 @@ export default function LoginPage({ title, description, redirectURL, version, bt
                         handleSubmit?.(new FormData(e.currentTarget));
                         e.currentTarget.reset();
                     }, children: [_jsx("input", { type: 'text', name: 'name', placeholder: 'Name', className: 'py-2 px-3 rounded bg-login-900 font-medium focus:outline-none', required: true }), _jsx("input", { type: 'password', name: 'token', placeholder: 'Token', className: 'py-2 px-3 rounded bg-login-900 font-medium focus:outline-none', required: true }), _jsx("button", { type: 'submit', className: 'py-2 px-4 rounded-xl bg-login font-bold text-lg ' +
-                                'hover:bg-login/80 transition-all duration-200 mt-2', children: "Login" })] })) : (_jsx(Link, { href: redirectURL, className: 'w-full flex justify-center cursor-none', children: _jsxs("button", { className: 'flex items-center justify-center gap-2 w-full max-w-xs py-3 px-6 rounded-xl bg-login font-bold text-lg ' +
+                                'hover:bg-login/80 transition-all duration-200 mt-2', children: "Login" })] })) : (_jsx(Link, { href: redirectURL, className: 'w-full flex justify-center cursor-default', children: _jsxs("button", { className: 'flex items-center justify-center gap-2 w-full max-w-xs py-3 px-6 rounded-xl bg-login font-bold text-lg ' +
                             'hover:bg-login/80 transition-all duration-200 mb-2 mt-2 cursor-pointer', children: ["Login", _jsx(LogIn, { className: 'w-6 h-6' })] }) })), _jsxs("span", { className: 'text-sm mt-2', children: ["v", version] })] }) }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "uibee",
-  "version": "2.2.9",
+  "version": "2.3.0",
   "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 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/login/loginPage.tsx

@@ -56,7 +56,7 @@ export default function LoginPage({title, description, redirectURL, version, btg
                         </button>
                     </form>
                 ) : (
-                    <Link href={redirectURL} className='w-full flex justify-center cursor-none'>
+                    <Link href={redirectURL} className='w-full flex justify-center cursor-default'>
                         <button
                             className={
                                 'flex items-center justify-center gap-2 w-full max-w-xs py-3 px-6 rounded-xl bg-login font-bold text-lg ' +

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;
 }