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

package/src/global/print.scss

@@ -0,0 +1,59 @@
+@media print {
+  img,
+  button,
+  .button,
+  button.button,
+  .navbar-burger,
+  .site-footer,
+  a.logo:link:after,
+  .navbar-notice {
+    display: none;
+  }
+
+  body {
+    font: 12px;
+    line-height: 1.3;
+    text-align: left !important;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+
+  h4 {
+    font-size: 14px;
+  }
+
+  small {
+    font-size: 12px;
+  }
+
+  a:link:after {
+    display: block;
+    text-transform: none;
+    font-size: 12px;
+    // add full URL in front of relative links like "/listings"
+    content: "/" attr(href);
+  }
+
+  a[href^="http"]:link:after {
+    // if link already starts with http, then just print that
+    content: attr(href);
+  }
+
+  .show-for-print {
+    display: block;
+  }
+
+  .hide-for-print {
+    display: none !important;
+  }
+}

package/src/global/tables.scss

@@ -0,0 +1,197 @@
+table {
+  @apply text-gray-750;
+
+  strong {
+    @apply font-semibold;
+  }
+
+  tr {
+    @apply bg-white;
+  }
+
+  thead tr th {
+    @apply text-left;
+    @apply uppercase;
+    @apply bg-primary-lighter;
+    @apply p-5;
+    @apply font-semibold;
+    @apply tracking-wider;
+    @apply border-0;
+    @apply border-b;
+    @apply border-primary;
+  }
+
+  &.th-plain {
+    thead tr {
+      background: transparent;
+    }
+
+    thead tr th {
+      @apply border-0;
+      @apply py-2;
+      background: transparent;
+    }
+  }
+
+  &.td-plain {
+    tr,
+    tr:nth-of-type(even) {
+      background: transparent;
+    }
+
+    tr td {
+      @apply border-b;
+      background: transparent;
+    }
+  }
+  &.is-flush-left {
+    thead tr th:first-of-type {
+      padding-left: 0 !important;
+    }
+    tr td:first-of-type {
+      padding-left: 0 !important;
+    }
+  }
+  &.is-flush-right {
+    thead tr th:last-of-type {
+      padding-right: 0 !important;
+    }
+    tr td:last-of-type {
+      padding-right: 0 !important;
+    }
+  }
+
+  &.base {
+    thead tr {
+      background: transparent;
+    }
+
+    tr:nth-of-type(even) {
+      background: transparent;
+    }
+
+    thead tr th {
+      background: transparent;
+      @apply border-gray-450;
+    }
+
+    tbody td {
+      @apply border-b;
+      @apply border-gray-450;
+    }
+
+    td:last-child,
+    th:last-child {
+      text-align: right;
+    }
+  }
+}
+
+table tr:nth-of-type(even) {
+  @apply bg-primary-lighter;
+}
+
+td.reserved {
+  @apply font-sans;
+  @apply font-bold;
+  @apply uppercase;
+  @apply text-2xs;
+  @apply leading-tight;
+  @apply py-2;
+  @apply text-gray-750;
+  @apply bg-accent-warm-lighter;
+  @apply tracking-widest;
+  @apply pl-2;
+  @apply border-l-8;
+  @apply border-b;
+  @apply border-t;
+  @apply border-solid;
+  @apply border-accent-warm;
+
+  .reserved-icon {
+    @apply text-accent-warm;
+    @apply text-sm;
+  }
+}
+
+tr.group-reserved td:first-of-type {
+  @apply border-l-8;
+  @apply border-solid;
+  @apply border-accent-warm;
+}
+
+/* Hat tip to this CSS solution:
+https://www.cssscript.com/pure-html5-css3-responsive-table-solution/ */
+
+@media screen and (max-width: 639px) {
+  table.responsive-collapse {
+    thead {
+      @apply hidden;
+    }
+
+    tr {
+      @apply block;
+      @apply mb-6;
+    }
+
+    tr:nth-of-type(even) {
+      background: inherit;
+    }
+
+    td:nth-of-type(even) {
+      @apply bg-primary-lighter;
+    }
+
+    td {
+      @apply block;
+      @apply text-right;
+    }
+
+    td:before {
+      @apply font-bold;
+      @apply uppercase;
+      @apply float-left;
+      content: attr(data-label);
+    }
+
+    td:last-child {
+      @apply border-b-0;
+    }
+  }
+  table.base {
+    td:nth-of-type(even) {
+      background: transparent;
+    }
+    tbody td {
+      @apply border-0;
+    }
+  }
+
+  tr.group-reserved td {
+    @apply border-l-8;
+    @apply border-solid;
+    @apply border-accent-warm;
+  }
+}
+
+.table__thumbnail img {
+  max-height: 80px;
+  max-width: 142px;
+  @apply -my-3;
+  @apply inline-block;
+}
+
+table.td-plain {
+  .table__thumbnail img {
+    @apply -my-1;
+  }
+}
+
+.table__draggable-cell {
+  width: 60px;
+  padding: 0px;
+}
+
+.table__is-dragging {
+  display: table;
+}

package/src/global/text.scss

@@ -0,0 +1,141 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-serif;
+}
+
+h1 {
+  @apply text-3xl;
+
+  @screen md {
+    @apply text-4xl;
+  }
+}
+
+h2 {
+  @apply text-2xl;
+
+  @screen md {
+    @apply text-3xl;
+  }
+}
+
+h3 {
+  @apply text-xl;
+
+  @screen md {
+    @apply text-2xl;
+  }
+}
+
+h4 {
+  @apply text-xl;
+}
+
+h5 {
+  @apply text-lg;
+}
+
+h6 {
+  @apply text-base;
+}
+
+a {
+  @apply text-primary;
+
+  &:hover {
+    @apply text-primary;
+  }
+
+  &:focus {
+    outline: none;
+    box-shadow: 0 0 3px 4px $tailwind-accent-cool;
+  }
+
+  &.lined {
+    @apply underline;
+  }
+
+  &.alert {
+    @apply text-alert;
+  }
+
+  &.darker {
+    @apply text-primary-darker;
+  }
+}
+
+h1.title {
+  @apply text-4xl;
+}
+
+.text-caps-underline {
+  @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;
+}
+
+.text-caps-tiny {
+  @apply mb-4;
+  @apply text-gray-700;
+  @apply uppercase;
+  @apply font-sans;
+  @apply font-bold;
+  @apply text-tiny;
+  @apply tracking-wide;
+}
+
+.text-serif-lg {
+  @apply font-serif;
+  @apply text-lg;
+  @apply mb-4;
+}
+
+.info-group__item {
+  @apply border-b;
+  @apply border-gray-450;
+  @apply mb-4;
+
+  &:last-child {
+    @apply border-0;
+    @apply mb-0;
+  }
+}
+
+.edit-link {
+  @apply underline;
+  @apply font-alt-sans;
+  @apply text-tiny;
+  @apply uppercase;
+  @apply block;
+  @apply text-primary;
+  @apply font-semibold;
+}
+
+.pill {
+  @apply inline-block;
+  @apply bg-primary-lighter;
+  @apply rounded-full;
+  @apply px-2;
+  @apply py-1;
+  @apply text-sm;
+  @apply font-semibold;
+  @apply text-gray-700;
+  @apply mr-2;
+}
+
+.icon-item {
+  @apply block;
+}

package/src/global/vendor/AgPagination.tsx

@@ -0,0 +1,133 @@
+import React from "react"
+import { Button, t } from "@bloom-housing/ui-components"
+
+type AgPaginationProps = {
+  totalItems: number
+  totalPages: number
+  currentPage: number
+  itemsPerPage: number
+  quantityLabel?: string
+  setCurrentPage: React.Dispatch<React.SetStateAction<number>>
+  setItemsPerPage: React.Dispatch<React.SetStateAction<number>>
+  onPageChange?: (page: number) => void
+  onPerPageChange?: (size: number) => void
+}
+
+const AG_PER_PAGE_OPTIONS = [8, 100, 500, 1000]
+
+const AgPagination = ({
+  totalItems,
+  totalPages,
+  currentPage,
+  itemsPerPage,
+  quantityLabel,
+  setCurrentPage,
+  setItemsPerPage,
+  onPageChange,
+  onPerPageChange,
+}: AgPaginationProps) => {
+  const onNextClick = () => {
+    setCurrentPage(currentPage + 1)
+    onPageChange && onPageChange(currentPage)
+  }
+
+  const onPrevClick = () => {
+    setCurrentPage(currentPage - 1)
+    onPageChange && onPageChange(currentPage)
+  }
+
+  const onRowLimitChange = (size: string) => {
+    setItemsPerPage(parseInt(size))
+    onPerPageChange && onPerPageChange(itemsPerPage)
+  }
+
+  return (
+    <div className="data-pager flex flex-col md:flex-row">
+      <div className="hidden md:block">
+        <Button
+          className="data-pager__previous data-pager__control"
+          onClick={onPrevClick}
+          disabled={currentPage === 1}
+        >
+          {t("t.previous")}
+        </Button>
+      </div>
+
+      <div className="data-pager__control-group ml-0 md:ml-auto w-full md:w-auto md:flex md:items-center">
+        <div className="data-pager__control">
+          <span className="field-label" id="lbTotalPages">
+            {totalItems}
+          </span>
+          {quantityLabel && <span className="field-label">{quantityLabel}</span>}
+        </div>
+
+        <div className="flex mt-5 md:mt-0 md:items-center">
+          <div className="field data-pager__control md:mb-0">
+            <label className="field-label font-sans" htmlFor="page-size">
+              {t("t.show")}
+            </label>
+            <select
+              name="page-size"
+              id="page-size"
+              value={itemsPerPage}
+              onChange={({ target }) => onRowLimitChange(target.value)}
+            >
+              {AG_PER_PAGE_OPTIONS.map((item) => (
+                <option key={item} value={item}>
+                  {item}
+                </option>
+              ))}
+            </select>
+          </div>
+
+          <div className="field data-pager__control">
+            <label className="field-label font-sans" htmlFor="page-jump">
+              {t("t.jumpTo")}
+            </label>
+            <select
+              name="page-jump"
+              id="page-jump"
+              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
+                setCurrentPage(parseInt(e.target.value))
+              }
+              value={currentPage}
+            >
+              {Array(totalPages)
+                .fill(totalPages)
+                .map((_, i) => {
+                  const value = i + 1
+                  return (
+                    <option key={value} value={value}>
+                      {value}
+                    </option>
+                  )
+                })}
+            </select>
+          </div>
+        </div>
+      </div>
+
+      <div className="w-full md:w-auto flex justify-between mt-5 md:mt-0 ">
+        <div className="md:hidden">
+          <Button
+            className="data-pager__previous data-pager__control"
+            onClick={onPrevClick}
+            disabled={currentPage === 1}
+          >
+            {t("t.previous")}
+          </Button>
+        </div>
+
+        <Button
+          className="data-pager__next data-pager__control"
+          onClick={onNextClick}
+          disabled={totalPages === currentPage || totalPages === 0}
+        >
+          {t("t.next")}
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+export { AgPagination as default, AgPagination, AG_PER_PAGE_OPTIONS }