@bloom-housing/ui-components 2.0.0-pre-tailwind

package/src/global/vendor/_setup_bulma.scss

@@ -0,0 +1,31 @@
+// Set up Bulma-specific variables and mixins
+$white: $tailwind-white;
+$background: #eee;
+$link: $tailwind-primary;
+$grey-dark: $link;
+$white-bis: #eee;
+$black: $tailwind-black;
+$text: $black;
+$border: 2px solid #ccc; // not sure how this gets used -JW
+$radius-large: 8px;
+$radius: 4px;
+$desktop: $tailwind-screens-md;
+$speed: 86ms;
+$easing: ease-out;
+
+$scheme-main: $white;
+$scheme-main-bis: $white-bis;
+$scheme-invert: $black;
+$colors: (
+  "white": (
+    $white,
+    $black,
+  ),
+  "black": (
+    $black,
+    $white,
+  ),
+);
+
+@import "~bulma/sass/utilities/functions.sass";
+@import "~bulma/sass/utilities/mixins.sass";

package/src/global/vendor/ag_grid.scss

@@ -0,0 +1,140 @@
+// AG Grid
+@import "~ag-grid-community/src/styles/ag-grid.scss";
+@import "~ag-grid-community/src/styles/ag-theme-alpine/sass/ag-theme-alpine-mixin";
+
+.ag-theme-alpine.ag-theme-bloom {
+  // would like to remove the local theme class
+  @include ag-theme-alpine(
+    (
+      header-height: 83px,
+      row-height: 58px,
+    )
+  );
+
+  .ag-row {
+    height: ag-param(row-height);
+  }
+
+  .ag-header {
+    @apply whitespace-normal;
+    text-overflow: unset;
+  }
+
+  .ag-header-select-all {
+    margin: 0 0 0 18px;
+  }
+
+  .ag-header-cell {
+    @apply px-0;
+  }
+
+  .ag-cell-label-container {
+    @apply px-4;
+  }
+
+  .ag-header-cell-sorted-asc,
+  .ag-header-cell-sorted-desc {
+    box-shadow: inset 0px -3px 0px 0px $tailwind-primary;
+  }
+
+  .ag-header-icon .ag-icon.ag-icon-none {
+    @apply text-gray-600;
+  }
+
+  .ag-header-cell-text {
+    @apply whitespace-normal;
+    text-overflow: unset;
+  }
+
+  .ag-header-cell-text {
+    @apply uppercase;
+    @apply font-sans;
+    @apply font-semibold;
+    @apply tracking-wider;
+  }
+
+  .ag-header-cell-resize::after {
+    height: 100%;
+    top: 0;
+    @apply bg-gray-400;
+  }
+
+  .ag-right-aligned-header {
+    text-align: right;
+  }
+
+  .ag-pinned-left-header,
+  .ag-cell.ag-cell-last-left-pinned:not(.ag-cell-range-right):not(.ag-cell-range-single-cell) {
+    @apply border-gray-450;
+    @apply border-r-4;
+    @apply border-t-0;
+    @apply border-l-0;
+    @apply border-b-0;
+  }
+
+  .ag-row {
+    @apply border-t-0;
+    @apply border-l-0;
+    @apply border-r-0;
+  }
+
+  .ag-cell-value {
+    @apply text-gray-750;
+    @apply font-sans;
+  }
+
+  .ag-body-viewport {
+    ::-webkit-scrollbar {
+      // -webkit-appearance: none;
+      height: 8px;
+      @apply bg-gray-600;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      border-radius: 8px;
+      @apply bg-gray-600;
+    }
+
+    ::-webkit-scrollbar-track {
+      @apply bg-gray-100;
+      -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7);
+      box-shadow: inset 0 0 1px rgba(0, 0, 0, 0.7);
+    }
+  }
+
+  .ag-root-wrapper {
+    @apply border-b-0;
+    @apply rounded-t-md;
+    @apply rounded-b-none;
+    overflow: visible;
+  }
+}
+
+.data-pager {
+  @apply p-4;
+  @apply flex;
+  @apply items-center;
+  @apply border;
+  @apply border-t-0;
+  @apply rounded-b-md;
+  @apply border-gray-500;
+  @apply bg-gray-200;
+}
+
+.data-pager__control {
+  @apply px-4;
+
+  .field-label {
+    @apply mr-2;
+  }
+
+  &.field {
+    select {
+      @apply bg-white;
+    }
+  }
+}
+
+.data-pager__control-group {
+  margin-left: auto;
+}

package/src/headers/Hero.scss

@@ -0,0 +1,56 @@
+.hero {
+  @apply bg-primary-darker;
+  @apply py-10;
+  @apply px-5;
+  @apply text-white;
+  @apply text-center;
+  @apply bg-cover;
+
+  @screen md {
+    @apply py-20;
+  }
+
+  &.centered {
+    background-position: center center;
+  }
+}
+
+.hero__button,
+.with_secondary a {
+  width: 100%;
+}
+
+.hero__title {
+  @apply text-4xl;
+  @apply mb-5;
+  @apply mx-auto;
+  letter-spacing: -0.04em;
+  max-width: 41rem;
+
+  @screen md {
+    @apply text-6xl;
+    @apply mb-8;
+  }
+
+  em {
+    @apply not-italic;
+    @apply underline;
+    -webkit-text-decoration-color: $tailwind-warn;
+    -moz-text-decoration-color: $tailwind-warn;
+    text-decoration-color: $tailwind-warn;
+  }
+}
+
+h2.hero__subtitle {
+  @apply font-sans;
+  @apply text-base;
+  @apply text-gray-100;
+  @apply mb-8;
+  @apply mx-auto;
+  max-width: 41rem;
+  text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.5);
+
+  @screen md {
+    @apply text-lg;
+  }
+}

package/src/headers/Hero.tsx

@@ -0,0 +1,76 @@
+import * as React from "react"
+import { LinkButton } from "../actions/LinkButton"
+import { Listing } from "@bloom-housing/backend-core/types"
+import moment from "moment"
+import { t } from "../helpers/translator"
+import { openDateState } from "../helpers/state"
+import "./Hero.scss"
+
+export interface HeroProps {
+  title: React.ReactNode
+  backgroundImage?: string
+  buttonTitle?: string
+  buttonLink?: string
+  secondaryButtonTitle?: string
+  secondaryButtonLink?: string
+  listings?: Listing[]
+  children?: React.ReactNode
+  centered?: boolean
+}
+
+const listingOpen = (listing: Listing) => {
+  return moment() < moment(listing.applicationDueDate)
+}
+
+const HeroButton = (props: { title: string; href: string; className?: string }) => (
+  <span className={props.className + " hero__button"}>
+    <LinkButton href={props.href}>{props.title}</LinkButton>
+  </span>
+)
+
+const Hero = (props: HeroProps) => {
+  let subHeader, styles
+  let classNames = ""
+  if (props.listings) {
+    if (!props.listings.some(listingOpen) && !props.listings.some(openDateState)) {
+      subHeader = <h2 className="hero__subtitle">{t("welcome.allApplicationClosed")}</h2>
+    }
+  } else if (props.children) {
+    subHeader = <h2 className="hero__subtitle">{props.children}</h2>
+  }
+  if (props.backgroundImage) {
+    styles = { backgroundImage: `url(${props.backgroundImage})` }
+  }
+  if (props.centered) {
+    classNames = "centered"
+  }
+  return (
+    <div className={`hero ${classNames}`} style={styles}>
+      <h1 className="hero__title">{props.title}</h1>
+      {subHeader}
+
+      {props.buttonTitle && props.buttonLink && (
+        <>
+          {props.secondaryButtonTitle && props.secondaryButtonLink ? (
+            <div className="grid md:grid-cols-6 gap-5 ">
+              <HeroButton
+                className={"md:col-start-3 with_secondary"}
+                href={props.buttonLink}
+                title={props.buttonTitle}
+              />
+              <HeroButton
+                className={"with_secondary"}
+                href={props.secondaryButtonLink}
+                title={props.secondaryButtonTitle}
+              />
+            </div>
+          ) : (
+            <HeroButton className={"px-5"} href={props.buttonLink} title={props.buttonTitle} />
+          )}
+        </>
+      )}
+    </div>
+  )
+}
+
+export { Hero as default, Hero }

package/src/headers/PageHeader.scss

@@ -0,0 +1,31 @@
+.page-header {
+  @apply py-8;
+
+  @screen md {
+    @apply py-10;
+  }
+
+  &.bg-primary-dark {
+    @apply text-white;
+  }
+}
+
+.page-header__group {
+  @apply px-5;
+  @apply m-auto;
+  @apply max-w-5xl;
+}
+
+.page-header__title {
+  @apply text-center;
+
+  @screen md {
+    @apply text-5xl;
+    @apply text-left;
+  }
+}
+
+.page-header__lead {
+  @apply m-auto;
+  @apply max-w-5xl;
+}

package/src/headers/PageHeader.tsx

@@ -0,0 +1,39 @@
+import * as React from "react"
+import "./PageHeader.scss"
+
+export interface PageHeaderProps {
+  className?: string
+  inverse?: boolean
+  title: React.ReactNode
+  subtitle?: string
+  children?: React.ReactNode
+  tabNav?: React.ReactNode
+}
+
+const PageHeader = (props: PageHeaderProps) => {
+  const classNames = ["page-header"]
+  if (props.className) {
+    classNames.push(...props.className.split(" "))
+  }
+
+  if (props.inverse) {
+    classNames.push("bg-primary-dark")
+    classNames.push("text-white")
+  } else {
+    classNames.push("bg-primary-lighter")
+  }
+
+  return (
+    <header className={classNames.join(" ")}>
+      <hgroup className="page-header__group">
+        <h1 className="page-header__title">{props.title}</h1>
+        {props.subtitle && <p className="page-header__lead"> {props.subtitle}</p>}
+        {props.children}
+
+        {props.tabNav ? props.tabNav : null}
+      </hgroup>
+    </header>
+  )
+}
+
+export { PageHeader as default, PageHeader }

package/src/headers/SiteHeader.tsx

@@ -0,0 +1,136 @@
+import React, { useState } from "react"
+import { LocalizedLink } from "../actions/LocalizedLink"
+import { LanguageNav, LangItem } from "../navigation/LanguageNav"
+
+export interface SiteHeaderLanguage {
+  list: LangItem[]
+  codes: string[]
+}
+type LogoWidth = "slim" | "medium" | "wide"
+
+export interface SiteHeaderProps {
+  logoSrc: string
+  title: string
+  imageOnly?: boolean
+  skip: string
+  notice: string | React.ReactNode
+  children: React.ReactNode
+  language?: SiteHeaderLanguage
+  logoClass?: string
+  logoWidth?: LogoWidth
+}
+
+export interface SiteHeaderState {
+  active: boolean
+}
+
+export interface NavbarDropdownProps {
+  menuTitle: string
+  children: React.ReactNode
+}
+
+export const NavbarDropdown = (props: NavbarDropdownProps) => {
+  return (
+    <div className="navbar-item has-dropdown is-hoverable" tabIndex={0}>
+      <a className="navbar-link">{props.menuTitle}</a>
+      <div className="navbar-dropdown">{props.children}</div>
+    </div>
+  )
+}
+
+const SiteHeader = (props: SiteHeaderProps) => {
+  const [active, setActive] = useState(false)
+
+  const skipLink = () => {
+    return (
+      <a href="#main-content" className="navbar__skip-link">
+        {props.skip}
+      </a>
+    )
+  }
+
+  const noticeBar = () => {
+    return (
+      <div className="navbar-notice">
+        <div className="navbar-notice__text">{props.notice}</div>
+      </div>
+    )
+  }
+
+  const getLogoWidthClass = () => {
+    if (props.logoWidth === "slim") return "navbar-width-slim"
+    if (props.logoWidth === "medium") return "navbar-width-med"
+    if (props.logoWidth === "wide") return "navbar-width-wide"
+    return ""
+  }
+
+  const logo = (logoClass = "") => {
+    return (
+      <LocalizedLink
+        className={`navbar-item logo ${logoClass} ${getLogoWidthClass()}`}
+        href="/"
+        aria-label="homepage"
+      >
+        <div
+          className={`logo__lockup ${getLogoWidthClass()} ${
+            props.logoWidth && "navbar-custom-width"
+          } ${props.imageOnly && "navbar-image-only-container"}`}
+        >
+          <img
+            className={`logo__image ${props.imageOnly && "navbar-image-only"}`}
+            src={props.logoSrc}
+            alt={"Site logo"}
+          />
+          {!props.imageOnly && <div className="logo__title">{props.title}</div>}
+        </div>
+      </LocalizedLink>
+    )
+  }
+
+  const handleMenuToggle = () => {
+    setActive(!active)
+  }
+
+  const hamburgerMenu = () => {
+    return (
+      <a
+        role="button"
+        className={"navbar-burger burger" + (active ? " is-active" : "")}
+        aria-label="menu"
+        aria-expanded={active ? "true" : "false"}
+        data-target="navbarMenuLinks"
+        onClick={handleMenuToggle}
+      >
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+        <span aria-hidden="true"></span>
+      </a>
+    )
+  }
+
+  return (
+    <>
+      {props.language && <LanguageNav language={props.language} />}
+
+      {skipLink()}
+      {noticeBar()}
+      <div className="navbar__wrapper">
+        <nav className="navbar" role="navigation" aria-label="main navigation">
+          <div className="navbar-brand">
+            {logo(props.logoClass)}
+            {hamburgerMenu()}
+          </div>
+
+          <div
+            id="navbarMenuLinks"
+            className={"navbar-menu md:mt-0" + (active ? " is-active" : "")}
+          >
+            <div className="navbar-end">{props.children}</div>
+          </div>
+        </nav>
+      </div>
+    </>
+  )
+}
+
+export { SiteHeader as default, SiteHeader }