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

package/src/navigation/Tabs.scss

@@ -0,0 +1,65 @@
+.tabs {
+  ul {
+    @apply block;
+    @screen md {
+      @apply flex;
+    }
+    @apply items-center;
+    @apply font-alt-sans;
+    @apply text-sm;
+  }
+}
+
+.tabs__tab {
+  @apply bg-white;
+  @apply text-gray-800;
+  @apply px-6;
+  @apply pt-3;
+  padding-bottom: 0.65rem;
+  @apply border;
+  @apply border-gray-450;
+  @apply border-b-2;
+  @screen md {
+    @apply border-l-0;
+  }
+  @apply block;
+  border-bottom-color: transparent;
+  cursor: pointer;
+
+  &:first-of-type {
+    @apply border-l;
+    @apply rounded-tl-lg;
+    @apply rounded-tr-lg;
+    @screen md {
+      @apply rounded-tr-none;
+    }
+  }
+  &:last-of-type {
+    @screen md {
+      @apply rounded-tr-lg;
+    }
+  }
+  &:hover {
+    border-bottom-color: map-get($tailwind-gray, 400);
+  }
+  &[aria-selected="true"] {
+    @apply text-black;
+    border-bottom-color: $tailwind-primary;
+  }
+  &[aria-disabled="true"] {
+    @apply text-gray-600;
+    @apply cursor-not-allowed;
+    border-bottom-color: transparent;
+  }
+}
+
+.tabs__panel {
+  @apply p-8;
+  @apply bg-white;
+  @apply border;
+  @apply border-gray-450;
+
+  &:not(.is-active) {
+    display: none;
+  }
+}

package/src/navigation/Tabs.tsx

@@ -0,0 +1,93 @@
+import React, { FunctionComponent } from "react"
+import "./Tabs.scss"
+
+import {
+  Tab as ReactTab,
+  Tabs as ReactTabs,
+  TabList as ReactTabList,
+  TabPanel as ReactTabPanel,
+} from "react-tabs"
+
+export interface TabsProps {
+  children: React.ReactNode
+  className?: string
+  defaultFocus?: boolean
+  defaultIndex?: number
+  disabledTabClassName?: string
+  domRef?: (node?: HTMLElement) => void
+  forceRenderTabPanel?: boolean
+  onSelect?: (index: number, last: number, event: Event) => boolean | void
+  selectedIndex?: number
+  selectedTabClassName?: string
+  selectedTabPanelClassName?: string
+}
+
+export const Tabs: FunctionComponent<TabsProps> = ({ children, ...props }: TabsProps) => {
+  const className = ["tabs"]
+  if (props.className) className.push(props.className)
+  return (
+    <ReactTabs {...props} className={className.join(" ")}>
+      {children}
+    </ReactTabs>
+  )
+}
+
+export interface TabProps {
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+  disabledClassName?: string
+  selectedClassName?: string
+  tabIndex?: string
+}
+
+export const Tab: FunctionComponent<TabProps> = ({ children, ...props }: TabProps) => {
+  const className = ["tabs__tab"]
+  if (props.className) className.push(props.className)
+  return (
+    <ReactTab selectedClassName="is-active" {...props} className={className}>
+      {children}
+    </ReactTab>
+  )
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+Tab.tabsRole = "Tab"
+
+export interface TabListProps {
+  children: React.ReactNode
+  className?: string | string[] | { [name: string]: boolean }
+}
+
+export const TabList: FunctionComponent<TabListProps> = ({ children, ...props }: TabListProps) => {
+  return <ReactTabList {...props}>{children}</ReactTabList>
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+TabList.tabsRole = "TabList"
+
+export interface TabPanelProps {
+  children: React.ReactNode
+  className?: string
+  forceRender?: boolean
+  selectedClassName?: string
+}
+
+export const TabPanel: FunctionComponent<TabPanelProps> = ({
+  children,
+  ...props
+}: TabPanelProps) => {
+  const className = ["tabs__panel"]
+  if (props.className) className.push(props.className)
+  return (
+    <ReactTabPanel selectedClassName="is-active" {...props} className={className}>
+      {children}
+    </ReactTabPanel>
+  )
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+TabPanel.tabsRole = "TabPanel"

package/src/navigation/UserNav.tsx

@@ -0,0 +1,37 @@
+import * as React from "react"
+import { LocalizedLink } from "../actions/LocalizedLink"
+import { t } from "../helpers/translator"
+import { NavbarDropdown } from "../headers/SiteHeader"
+
+export interface UserNavProps {
+  signedIn: boolean
+  children: React.ReactNode
+  signOut: () => void
+}
+
+const UserNav = (props: UserNavProps) => {
+  const { signedIn, children, signOut } = props
+
+  if (signedIn) {
+    return (
+      <>
+        <NavbarDropdown menuTitle={t("nav.myAccount")}>
+          {children}
+          <a href="#" className="navbar-item" onClick={signOut}>
+            {t("nav.signOut")}
+          </a>
+        </NavbarDropdown>
+      </>
+    )
+  } else {
+    return (
+      <>
+        <LocalizedLink className="navbar-item" href="/sign-in">
+          {t("nav.signIn")}
+        </LocalizedLink>
+      </>
+    )
+  }
+}
+
+export { UserNav as default, UserNav }

package/src/notifications/AlertBox.scss

@@ -0,0 +1,78 @@
+.alert-box {
+  @apply relative;
+  @apply py-4;
+  @apply pr-10;
+  @apply leading-snug;
+  @apply flex;
+  @apply items-center;
+
+  .alert-box_inner {
+    @apply m-auto;
+    @apply max-w-5xl;
+    @apply px-4;
+    @apply flex-1;
+    @apply flex;
+    @apply items-center;
+  }
+
+  &.fullWidth {
+    @apply px-4;
+  }
+
+  &.narrow {
+    @apply py-2;
+  }
+
+  // Inverts color scheme of alert
+  &.invert {
+    @apply text-white;
+
+    .close {
+      @apply text-white;
+    }
+  }
+
+  &.alert {
+    @apply bg-alert-light;
+
+    &.invert {
+      @apply bg-alert;
+    }
+  }
+
+  &.primary {
+    @apply bg-primary-light;
+
+    &.invert {
+      @apply bg-primary;
+    }
+  }
+
+  &.success {
+    @apply bg-success-light;
+
+    &.invert {
+      @apply bg-success;
+    }
+  }
+
+  &.warn {
+    @apply bg-warn-light;
+
+    &.invert {
+      @apply bg-warn;
+    }
+  }
+}
+
+.alert-box__body {
+  @apply ml-2;
+  @apply font-semibold;
+  @apply text-tiny;
+}
+
+.alert-box__close {
+  @apply absolute;
+  @apply text-3xl;
+  right: 1rem;
+}

package/src/notifications/AlertBox.tsx

@@ -0,0 +1,79 @@
+import React, { useState } from "react"
+import type { ReactNode } from "react"
+import { Icon, IconTypes, IconFillColors } from "../icons/Icon"
+import type { AlertTypes } from "./alertTypes"
+import { colorClasses } from "./alertTypes"
+import "./AlertBox.scss"
+
+export interface AlertBoxProps {
+  type?: AlertTypes
+  closeable?: boolean
+  onClose?: () => void
+  children: ReactNode
+  inverted?: boolean
+  className?: string
+  boundToLayoutWidth?: boolean
+  narrow?: boolean
+}
+
+const icons: { [k in AlertTypes]: IconTypes } = {
+  alert: "warning",
+  notice: "info",
+  success: "check",
+}
+
+const AlertBox = (props: AlertBoxProps) => {
+  const [showing, setShowing] = useState(true)
+  let { onClose, closeable } = props
+
+  const classNames = [
+    "alert-box",
+    colorClasses[props.type || "alert"],
+    ...(props.inverted ? ["invert"] : []),
+    ...(props.className ? [props.className] : []),
+    ...(props.boundToLayoutWidth ? [] : ["fullWidth"]),
+    ...(props.narrow ? ["narrow"] : []),
+  ].join(" ")
+
+  if (onClose) closeable = true
+
+  if (!onClose && closeable) {
+    onClose = () => {
+      setShowing(false)
+    }
+  }
+
+  let innerSection = (
+    <>
+      <span className="alert-box__icon">
+        <Icon
+          size="medium"
+          symbol={icons[props.type || "alert"]}
+          fill={props.inverted ? IconFillColors.white : undefined}
+        />
+      </span>
+      <span className="alert-box__body">
+        {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
+      </span>
+      {closeable && (
+        <button
+          className={`alert-box__close ${props.inverted ? "text-white" : ""}`}
+          onClick={onClose}
+        >
+          &times;
+        </button>
+      )}
+    </>
+  )
+  if (props.boundToLayoutWidth) {
+    innerSection = <div className="alert-box_inner">{innerSection}</div>
+  }
+
+  return showing ? (
+    <div className={classNames} role="alert">
+      {innerSection}
+    </div>
+  ) : null
+}
+
+export { AlertBox as default, AlertBox }

package/src/notifications/AlertNotice.scss

@@ -0,0 +1,58 @@
+// secondary alert messaging
+.alert-notice {
+  @apply text-sm;
+  @apply py-4;
+  @apply px-8;
+  @apply bg-gray-200;
+  @apply border-2;
+  @apply border-solid;
+  @apply border-primary;
+
+  &.alert {
+    @apply border-alert-light;
+
+    &.invert {
+      @apply border-alert;
+    }
+  }
+
+  &.primary {
+    @apply border-primary-light;
+
+    &.invert {
+      @apply border-primary;
+    }
+  }
+
+  &.success {
+    @apply border-success-light;
+
+    &.invert {
+      @apply border-success;
+    }
+  }
+
+  p {
+    @apply text-sm;
+  }
+}
+
+.alert-notice__title {
+  @apply text-sm;
+  @apply mb-3;
+  @apply font-semibold;
+
+  &.alert {
+    @apply text-alert;
+  }
+  &.primary {
+    @apply text-primary;
+  }
+  &.success {
+    @apply text-success;
+  }
+}
+
+.alert-notice__body {
+  @apply text-sm;
+}

package/src/notifications/AlertNotice.tsx

@@ -0,0 +1,37 @@
+import React from "react"
+import type { ReactNode } from "react"
+import type { AlertTypes } from "./alertTypes"
+import { colorClasses } from "./alertTypes"
+import "./AlertNotice.scss"
+
+export interface AlertNoticeProps {
+  type?: AlertTypes
+  inverted?: boolean
+  title: ReactNode
+  children: ReactNode
+  className?: string
+}
+
+const AlertNotice = (props: AlertNoticeProps) => {
+  const colorClass = colorClasses[props.type || "alert"]
+  const classNames = [
+    "alert-notice",
+    colorClass,
+    ...(props.className ? [props.className] : []),
+    ...(props.inverted ? ["invert"] : []),
+  ].join(" ")
+
+  return (
+    <div className={classNames}>
+      <div className={`alert-notice__title ${colorClass}`}>
+        {typeof props.title === "string" ? <p>{props.title}</p> : props.title}
+      </div>
+
+      <div className="alert-notice__body">
+        {typeof props.children === "string" ? <p>{props.children}</p> : props.children}
+      </div>
+    </div>
+  )
+}
+
+export { AlertNotice as default, AlertNotice }