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

package/src/prototypes/GridItem.tsx

@@ -0,0 +1,15 @@
+import * as React from "react"
+
+export interface GridItemProps {
+  children: React.ReactNode
+  className?: string
+}
+
+const GridItem = (props: GridItemProps) => {
+  const gridItemClasses = ["grid-item"]
+  if (props.className) gridItemClasses.push(props.className)
+
+  return <div className={gridItemClasses.join(" ")}>{props.children}</div>
+}
+
+export { GridItem as default, GridItem }

package/src/prototypes/SideNav.scss

@@ -0,0 +1,32 @@
+.side-nav {
+  @apply border;
+  @apply rounded-lg;
+
+  li {
+    &:first-of-type a {
+      @apply rounded-t-lg;
+    }
+
+    &:last-of-type a {
+      @apply rounded-b-lg;
+    }
+  }
+
+  a {
+    @apply text-gray-700;
+    @apply block;
+    @apply px-4;
+    @apply py-2;
+    @apply border-b;
+
+    &:hover {
+      @apply bg-primary-lighter;
+      @apply text-primary;
+    }
+
+    &.is-current {
+      @apply text-gray-900;
+      box-shadow: inset 3px 0px 0px 0px $tailwind-primary;
+    }
+  }
+}

package/src/prototypes/SideNav.tsx

@@ -0,0 +1,14 @@
+import * as React from "react"
+import "./SideNav.scss"
+
+export interface SideNavProps {
+  children: React.ReactNode[]
+}
+
+const SideNav = (props: SideNavProps) => (
+  <nav className="side-nav" aria-label="Secondary navigation">
+    <ul>{props.children}</ul>
+  </nav>
+)
+
+export { SideNav as default, SideNav }

package/src/prototypes/SummaryCard.scss

@@ -0,0 +1,34 @@
+.summary-card {
+  @apply rounded-lg;
+  @apply border-solid;
+  @apply border;
+  @apply border-gray-450;
+
+  table {
+    &.td-plain tr:last-of-type td {
+      @apply border-b-0;
+    }
+  }
+}
+
+.summary-card__header {
+  @apply px-5;
+  @apply py-4;
+  @apply rounded-t-lg;
+}
+
+.summary-card__title {
+  @apply text-lg;
+  @apply font-alt-sans;
+
+  a {
+    @apply text-primary-dark;
+
+    &:after {
+      content: "\203A";
+      @apply text-2xl;
+      @apply px-2;
+      line-height: 1.4rem;
+    }
+  }
+}

package/src/sections/ContentSection.scss

@@ -0,0 +1,15 @@
+.content-section {
+  @apply py-10;
+}
+
+.content-section__header {
+  @apply mb-5;
+}
+
+.content-section__title {
+  @apply text-2xl;
+}
+
+.content-section__subtitle {
+  @apply text-gray-700;
+}

package/src/sections/ContentSection.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+import "./ContentSection.scss"
+
+export interface ContentSectionProps {
+  title?: string
+  subtitle?: string
+  children: React.ReactNode
+}
+
+const ContentSection = (props: ContentSectionProps) => (
+  <section className="content-section">
+    {props.title && (
+      <header className="content-section__header">
+        <hgroup>
+          <h3 className="content-section__title">{props.title}</h3>
+          <span className="content-section__subtitle">{props.subtitle}</span>
+        </hgroup>
+      </header>
+    )}
+
+    {props.children}
+  </section>
+)
+
+export { ContentSection as default, ContentSection }

package/src/sections/FooterSection.scss

@@ -0,0 +1,6 @@
+.footer-row__section {
+  @apply max-w-5xl;
+  @apply m-auto;
+  @apply px-2;
+  @apply text-center;
+}

package/src/sections/FooterSection.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import "./FooterSection.scss"
+
+export interface FooterSectionProps {
+  children: React.ReactNode
+  className?: string
+  small?: boolean
+}
+
+const FooterSection = (props: FooterSectionProps) => (
+  <div className={`footer-row ${props.className || ""}`}>
+    <div className={`footer-row__section ${props.small ? "py-2" : "pb-8"}`}>{props.children}</div>
+  </div>
+)
+
+export { FooterSection as default, FooterSection }

package/src/sections/GridSection.scss

@@ -0,0 +1,72 @@
+.grid-section {
+  .grid-item {
+    @apply mb-4;
+    overflow-wrap: break-word; // temp fix
+
+    @screen md {
+      @apply mb-0;
+    }
+  }
+
+  &.has-separator {
+    @apply border-t;
+    @apply border-gray-450;
+    @apply pt-8;
+    @apply mt-8;
+  }
+}
+
+.grid-section:not(.has-separator) + .grid-section {
+  @apply mt-6;
+}
+
+.grid-section__header {
+  @apply mb-4;
+  @apply flex;
+  @apply flex-wrap;
+  @apply flex-col;
+}
+
+.grid-section__title {
+  @apply font-alt-sans;
+  @apply text-xl;
+  @apply inline-block;
+  @apply w-4/5;
+  @screen sm {
+    @apply w-auto;
+  }
+}
+
+.grid-section__subtitle {
+  @apply mb-4;
+  @apply text-gray-750;
+  @apply uppercase;
+  @apply font-alt-sans;
+  @apply font-bold;
+  @apply text-sm;
+  @apply tracking-widest;
+  @apply w-full;
+  @apply mt-4;
+}
+
+.grid-section__description {
+  @apply font-sans;
+  @apply text-base;
+  @apply text-gray-750;
+  @apply block;
+  @apply mb-4;
+}
+
+.grid-section__inner {
+  &.is-tinted {
+    @apply bg-primary-lighter;
+  }
+
+  &.is-inset {
+    @apply p-8;
+  }
+
+  &.is-reversed {
+    direction: rtl;
+  }
+}

package/src/sections/GridSection.tsx

@@ -0,0 +1,82 @@
+import * as React from "react"
+import "./GridSection.scss"
+
+export interface GridCellProps {
+  children: React.ReactNode
+  span?: number
+  className?: string
+}
+
+const GridCell = (props: GridCellProps) => {
+  const gridCellClasses = ["grid-item"]
+  if (props.span) gridCellClasses.push(`md:col-span-${props.span}`)
+  if (props.className) gridCellClasses.push(props.className)
+
+  return <article className={gridCellClasses.join(" ")}>{props.children}</article>
+}
+
+export interface GridSectionProps {
+  title?: string
+  edit?: string
+  subtitle?: string
+  description?: string
+  tinted?: boolean
+  grid?: boolean
+  columns?: number
+  inset?: boolean
+  className?: string
+  tightSpacing?: boolean
+  reverse?: boolean
+  children: React.ReactNode
+  separator?: boolean
+}
+
+const GridSection = (props: GridSectionProps) => {
+  const sectionClasses = ["grid-section"]
+  if (props.separator) sectionClasses.push("has-separator")
+
+  const gridClasses = ["grid-section__inner"]
+  const grid = typeof props.grid != "undefined" ? props.grid : true
+  if (props.tinted) gridClasses.push("is-tinted")
+  if (props.inset) gridClasses.push("is-inset")
+  if (grid) {
+    const columns = props.columns || 3
+    gridClasses.push(`md:grid md:grid-cols-${columns}`)
+    if (props.tightSpacing) {
+      gridClasses.push("md:gap-2")
+    } else {
+      gridClasses.push("md:gap-8")
+    }
+    if (props.reverse) gridClasses.push("is-reversed")
+  }
+  if (props.className) gridClasses.push(props.className)
+
+  const headerClasses = ["grid-section__header"]
+  if (props.subtitle && (!props.title || !props.inset)) headerClasses.push("mb-0")
+
+  const subtitleClasses = ["grid-section__subtitle"]
+  if (props.title) subtitleClasses.push("mt-4")
+
+  return (
+    <section className={sectionClasses.join(" ")}>
+      {(props.title || props.subtitle) && (
+        <header className={headerClasses.join(" ")}>
+          {props.title && <h2 className="grid-section__title">{props.title}</h2>}
+          {props.edit && (
+            <span className="ml-auto">
+              <a className="edit-link">{props.edit}</a>
+            </span>
+          )}
+          {props.subtitle && <h3 className={subtitleClasses.join(" ")}>{props.subtitle}</h3>}
+          {props.description && (
+            <span className={"grid-section__description"}>{props.description}</span>
+          )}
+        </header>
+      )}
+
+      <div className={gridClasses.join(" ")}>{props.children}</div>
+    </section>
+  )
+}
+
+export { GridSection as default, GridSection, GridCell }

package/src/sections/InfoCardGrid.scss

@@ -0,0 +1,45 @@
+.info-cards__header {
+  @apply mb-3;
+
+  @screen md {
+    margin-right: 1rem;
+  }
+}
+
+.info-cards__title {
+  @apply font-alt-sans;
+  @apply uppercase;
+  @apply text-tiny;
+  @apply mb-5;
+  @apply pb-2;
+  @apply border-0;
+  @apply border-b-4;
+  @apply border-primary;
+  @apply font-semibold;
+  @apply text-gray-800;
+  @apply tracking-widest;
+  @apply inline-block;
+}
+
+.info-cards__subtitle {
+  @apply font-serif;
+  @apply mb-5;
+}
+
+.info-cards__grid {
+  @screen md {
+    @apply flex;
+    @apply flex-wrap;
+  }
+
+  .info-card {
+    & > :not(.info-card__title) {
+      @apply text-tiny;
+    }
+
+    @screen md {
+      width: calc(50% - 1rem);
+      margin-right: 1rem;
+    }
+  }
+}

package/src/sections/InfoCardGrid.tsx

@@ -0,0 +1,20 @@
+import * as React from "react"
+import "./InfoCardGrid.scss"
+
+export interface InfoCardGridProps {
+  title: string
+  subtitle?: string
+  children: React.ReactNode
+}
+
+const InfoCardGrid = (props: InfoCardGridProps) => (
+  <section className="info-cards">
+    <header className="info-cards__header">
+      <h2 className="info-cards__title">{props.title}</h2>
+      {props.subtitle && <p className="info-cards__subtitle">{props.subtitle}</p>}
+    </header>
+    <div className="info-cards__grid">{props.children}</div>
+  </section>
+)
+
+export { InfoCardGrid as default, InfoCardGrid }

package/src/sections/ListSection.scss

@@ -0,0 +1,7 @@
+.list-section {
+  @apply mt-6;
+
+  @screen md {
+    @apply mt-0;
+  }
+}

package/src/sections/ListSection.tsx

@@ -0,0 +1,23 @@
+import * as React from "react"
+import "./ListSection.scss"
+
+export interface ListSectionProps {
+  title: string
+  subtitle: string
+  children?: React.ReactNode
+}
+
+const ListSection = (props: ListSectionProps) => (
+  <li className="list-section custom-counter__item">
+    <header className="list-section__header custom-counter__header">
+      <hgroup>
+        <h4 className="custom-counter__title">{props.title}</h4>
+        <span className="custom-counter__subtitle">{props.subtitle}</span>
+      </hgroup>
+    </header>
+
+    {props.children}
+  </li>
+)
+
+export { ListSection as default, ListSection }

package/src/sections/MarkdownSection.scss

@@ -0,0 +1,13 @@
+.markdown-section {
+  @apply px-5;
+  @apply my-6;
+
+  @screen md {
+    @apply my-12;
+  }
+}
+
+.markdown-section__inner {
+  @apply max-w-5xl;
+  @apply m-auto;
+}