New Login Page

express/code/blocks/floating-panel/floating-panel.css

@@ -0,0 +1,66 @@
+.floating-panel {
+  line-height: 130%;
+  padding: 16px;
+  border-radius: 16px;
+  box-shadow: 0px 0px 12px 0px rgba(0, 0, 0, 0.16);
+  position: fixed;
+  z-index: 2;
+  bottom: 100px;
+  box-sizing: border-box;
+  width: 343px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.floating-panel.dark {
+  color: var(--color-white);
+  background-color: #000b1d;
+}
+
+.floating-panel .header {
+  font-weight: 700;
+  font-size: var(--body-font-size-l);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 8px;;
+}
+.floating-panel .header .icon{
+  width: 10px;
+  height: 10px;
+  padding: 7px;
+}
+
+.floating-panel .subheader {
+  font-weight: 400;
+  font-size: var(--body-font-size-s);
+  padding-bottom: 16px;
+}
+
+.floating-panel .link-rows-container {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.floating-panel-link-row {
+  display: flex;
+  justify-content: space-between;
+}
+
+.floating-panel-link-row div {
+  display: flex;
+  gap: 8px;
+  align-items: center;
+}
+
+.floating-panel-link-row .icon {
+  width: 22px;
+  height: 22px;
+  gap: 4px;
+}
+
+.floating-panel .floating-panel-link-row a.con-button {
+  /* min-width: 100px; */
+  margin: 0;
+}

express/code/blocks/floating-panel/floating-panel.js

@@ -0,0 +1,28 @@
+import { getLibs, getIconElementDeprecated } from '../../scripts/utils.js';
+
+const iconRegex = /icon-\s*([^\s]+)/;
+let decorateButtons; let createTag;
+
+export default async function init(el) {
+  [{ decorateButtons }, { createTag }] = await Promise.all([import(`${getLibs()}/utils/decorate.js`), import(`${getLibs()}/utils/utils.js`)]);
+
+  decorateButtons(el);
+  const rows = [...el.children];
+  const [header, subheader, ...linkRows] = rows;
+  header.classList.add('header');
+  header.append(getIconElementDeprecated('close-white'));
+  subheader.classList.add('subheader');
+
+  const linkRowsContainer = createTag('div', { class: 'link-rows-container' });
+  linkRows.forEach((link) => {
+    link.classList.add('floating-panel-link-row');
+    const icon = link.querySelector('.icon');
+    const match = icon && iconRegex.exec(icon.className);
+    if (match?.[1]) {
+      icon.append(getIconElementDeprecated(match[1]));
+    }
+    linkRowsContainer.append(link);
+  });
+  el.append(linkRowsContainer);
+  return el;
+}

express/code/blocks/login-page/login-page.css

@@ -0,0 +1,62 @@
+/* make susi-light in the same ax-login-page section hover */
+.section.ax-login-page {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.login-page .background img {
+  display: none;
+  width: 100vw; /* not needed if authored right images */
+}
+
+@media (min-width: 768px) {
+  .login-page .background .m-background {
+    display: block;
+  }
+}
+
+@media (min-width: 1024px) {
+  .login-page .background .m-background {
+    display: none;
+  }
+  .login-page .background .tablet-background {
+    display: block;
+  }
+}
+
+@media (min-width: 1280px) {
+  .login-page .background .tablet-background {
+    display: none;
+  }
+  .login-page .background .l-background {
+    display: block;
+  }
+}
+
+@media (min-width: 1440px) {
+  .login-page .background .l-background {
+    display: none;
+  }
+  .login-page .background .desktop-background {
+    display: block;
+  }
+}
+
+@media (min-width: 1680px) {
+  .login-page .background .desktop-background {
+    display: none;
+  }
+  .login-page .background .xl-background {
+    display: block;
+  }
+}
+
+@media (min-width: 1920px) {
+  .login-page .background .xl-background {
+    display: none;
+  }
+  .login-page .background .xxl-background {
+    display: block;
+  }
+}

express/code/blocks/login-page/login-page.js

@@ -0,0 +1,10 @@
+// 768/1024/1280/1440/1600/1920
+const breakpoints = ['m', 'tablet', 'l', 'desktop', 'xl', 'xxl'];
+export default async function init(el) {
+  const background = el.children[0];
+  background.classList.add('background');
+  const imgs = [...background.querySelectorAll('img')];
+  imgs.forEach((img, index) => {
+    img.classList.add(`${breakpoints[index]}-background`);
+  });
+}

express/code/blocks/susi-light/susi-light.css

@@ -3,3 +3,143 @@
     width: 360px;
     min-height: 462px;
 }
+
+.susi-light {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.susi-tabs {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.susi-tabs .express-logo {
+  width: unset;
+  height: 24px;
+  padding-top: 32px;
+}
+
+.susi-tabs .title {
+  font-size: var(--heading-font-size-s);
+  line-height: 28.6px;
+  font-weight: 900;
+  padding-top: 12px;
+  text-align: center;
+}
+
+.susi-tabs [role='tablist'] {
+  background-color: #e6e6e6;
+  border-radius: 8px;
+  display: flex;
+  gap: 4px;
+  padding: 4px;
+  margin-top: 16px;
+  box-shadow: 0px 2px 8px 0px #00000029;
+}
+
+.susi-tabs [role='tablist']:has(:first-child:last-child) {
+  display: none;
+}
+
+.susi-tabs [role='tab'] {
+  background-color: #e6e6e6;
+  color: #222222;
+  border: initial;
+  font-family: var(--body-font-family);
+  font-size: var(--body-font-size-xs);
+  font-weight: 700;
+  padding: 8px 12px 10px;
+  line-height: 130%;
+  cursor: pointer;
+}
+
+.susi-tabs [role='tab'][aria-selected='true'] {
+  background-color: var(--color-white);
+  border-radius: 6px;
+}
+
+.susi-tabs [role='tabpanel'] {
+  width: 400px;
+  max-width: 95vw;
+}
+
+.susi-tabs [role='tabpanel'].hide {
+  display: none;
+}
+
+/* reduce CLS */
+.susi-tabs [role='tabpanel'].standard .susi-wrapper {
+  min-height: 457.5px;
+}
+
+.susi-tabs [role='tabpanel'].edu-express .susi-wrapper {
+  min-height: 366.5px;
+}
+
+.susi-tabs .footer {
+  font-size: var(--body-font-size-s);
+  text-align: center;
+  padding: 16px 0;
+  font-weight: 700;
+  color: #292929;
+  line-height: 20.8px;
+}
+
+.susi-tabs .footer a {
+  text-decoration: underline;
+  color: initial;
+  font-weight: 500;
+}
+
+.susi-tabs .footer.susi-banner {
+  background-color: #f3f3f3;
+}
+
+.susi-tabs .footer.susi-bubbles h2 {
+  font-size: var(--body-font-size-l);
+  font-weight: 700;
+}
+
+.susi-tabs .footer .susi-bubble-container {
+  display: flex;
+  gap: 12px;
+  justify-content: center;
+  padding-top: 8px;
+}
+
+.susi-tabs .footer .susi-bubble {
+  font-size: var(--body-font-size-s);
+  background-color: #f3f3f3;
+  display: flex;
+  flex-direction: column;
+  padding: 12px 24px;
+  border-radius: 8px;
+  margin: 0;
+}
+
+/* ax-login-page section metadata styles */
+.section.ax-login-page .susi-tabs {
+  background-color: var(--color-white);
+  border-radius: 16px;
+}
+
+.section.ax-login-page .susi-light {
+  padding-bottom: 32px;
+}
+.section.ax-login-page .susi-tabs .footer {
+  border-radius: 8px;
+}
+
+@media (min-width: 768px) {
+  .section.ax-login-page .susi-light {
+    position: absolute;
+    padding-top: 30px;
+  }
+  .section.ax-login-page .susi-tabs .footer {
+    border-radius: 0 0 16px 16px;
+  }
+}