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

package/src/text/Description.scss

@@ -0,0 +1,52 @@
+@import "../global/mixins.scss";
+
+// Description
+.description__title {
+  @apply font-serif;
+  @apply text-xl;
+}
+
+.description__body {
+  @apply mb-4;
+
+  @screen md {
+    padding-top: 0.4em;
+  }
+}
+
+// Data lists
+.column-definition-list {
+  @include clearfix;
+
+  .description__title {
+    @apply text-lg;
+    @apply text-gray-800;
+    @apply mb-3;
+    clear: left;
+
+    @screen md {
+      @apply pl-4;
+      @apply border-l-2;
+      @apply border-gray-450;
+      @apply float-left;
+      @apply w-1/3;
+      @apply pr-3;
+      margin-top: 0.15rem;
+    }
+  }
+
+  .description__body {
+    @apply text-tiny;
+    @apply mb-5;
+
+    @screen md {
+      @apply mb-0;
+      @apply float-left;
+      @apply w-2/3;
+    }
+
+    &:last-of-type {
+      @apply w-full;
+    }
+  }
+}

package/src/text/Description.tsx

@@ -0,0 +1,24 @@
+import * as React from "react"
+import "./Description.scss"
+import Markdown from "markdown-to-jsx"
+
+export interface DescriptionProps {
+  term: string
+  description: any
+  markdown?: boolean
+}
+
+export const Description = (props: DescriptionProps) => {
+  return (
+    <>
+      <dd className="description__title">{props.term}</dd>
+      {props.markdown ? (
+        <dt className="description__body">
+          <Markdown options={{ disableParsingRawHTML: true }} children={props.description} />
+        </dt>
+      ) : (
+        <dt className="description__body">{props.description}</dt>
+      )}
+    </>
+  )
+}

package/src/text/Message.scss

@@ -0,0 +1,16 @@
+.message {
+  @apply py-2;
+  @apply px-4;
+  @apply bg-primary-lighter;
+  @apply font-semibold;
+  @apply uppercase;
+  @apply tracking-wider;
+  @apply text-sm;
+  @apply border-l-2;
+  @apply border-primary;
+
+  &.is-warning {
+    @apply bg-accent-warm-lighter;
+    @apply border-accent-warm;
+  }
+}

package/src/text/Message.tsx

@@ -0,0 +1,16 @@
+import * as React from "react"
+import "./Message.scss"
+
+export interface MessageProps {
+  children: React.ReactNode
+  warning?: boolean
+}
+
+const Message = (props: MessageProps) => {
+  const messageClasses = ["message"]
+  if (props.warning) messageClasses.push("is-warning")
+
+  return <div className={messageClasses.join(" ")}>{props.children}</div>
+}
+
+export { Message as default, Message }

package/src/text/Tag.scss

@@ -0,0 +1,94 @@
+.tag {
+  @apply py-3;
+  @apply px-5;
+  @apply text-white;
+  @apply text-tiny;
+  @apply bg-primary;
+  @apply rounded-md;
+  @apply text-center;
+
+  &.is-pill {
+    @apply px-4;
+    @apply py-2;
+    @apply bg-primary-light;
+    @apply text-primary-dark;
+    @apply rounded-full;
+    @apply font-semibold;
+    @apply font-alt-sans;
+    @apply uppercase;
+    @apply tracking-ultrawide;
+    @apply inline;
+    @apply text-tiny;
+    @apply leading-4;
+
+    &.is-small {
+      @apply text-2xs;
+      @apply py-1;
+      @apply px-3;
+      @apply leading-3;
+    }
+  }
+
+  &.fill-container {
+    @apply w-full;
+    @apply inline-block;
+  }
+
+  &.is-warning {
+    @apply bg-accent-warm-dark;
+  }
+
+  &.is-secondary {
+    @apply text-white;
+    @apply bg-secondary;
+  }
+
+  &.is-success {
+    &:not(.is-light-mode) {
+      @apply text-white;
+      @apply bg-success;
+    }
+    &.is-light-mode {
+      @apply text-gray-900;
+      @apply bg-success-light;
+    }
+  }
+
+  &.is-accent-cool {
+    &:not(.is-light-mode) {
+      @apply text-white;
+      @apply bg-accent-cool-dark;
+    }
+    &.is-light-mode {
+      @apply text-gray-900;
+      @apply bg-accent-cool;
+    }
+  }
+
+  &.is-accent-warm {
+    &:not(.is-light-mode) {
+      @apply text-white;
+      @apply bg-accent-warm-dark;
+    }
+    &.is-light-mode {
+      @apply text-gray-900;
+      @apply bg-accent-warm;
+    }
+  }
+
+  &.is-closed {
+    @apply text-white;
+    @apply bg-gray-750;
+  }
+
+  &.is-info {
+    @apply text-gray-800;
+    @apply bg-warn-light;
+  }
+
+  &.is-small {
+    @apply text-sm;
+    @apply py-2;
+    @apply px-4;
+  }
+}

package/src/text/Tag.tsx

@@ -0,0 +1,22 @@
+import * as React from "react"
+import { AppearanceProps, classNamesForAppearanceTypes } from "../global/AppearanceTypes"
+import "./Tag.scss"
+
+export interface TagProps extends AppearanceProps {
+  className?: string
+  pillStyle?: boolean
+  children: React.ReactNode
+  fillContainer?: boolean
+}
+
+const Tag = (props: TagProps) => {
+  const tagClasses = ["tag"].concat(classNamesForAppearanceTypes(props))
+
+  if (props.pillStyle) tagClasses.push("is-pill")
+  if (props.fillContainer) tagClasses.push("fill-container")
+  if (props.className) tagClasses.push(props.className)
+
+  return <span className={tagClasses.join(" ")}>{props.children}</span>
+}
+
+export { Tag as default, Tag }

package/tailwind.config.js

@@ -0,0 +1,128 @@
+/* eslint-env node */
+
+module.exports = {
+  important: true,
+  purge: false,
+  future: {
+    removeDeprecatedGapUtilities: true,
+  },
+  theme: {
+    screens: {
+      sm: "640px",
+      md: "768px",
+      lg: "1200px",
+      xl: "1280px",
+      print: { raw: "print" },
+    },
+    fontSize: {
+      "2xs": ".6875rem",
+      xs: ".75rem",
+      sm: ".8125rem",
+      tiny: ".875rem",
+      base: "1rem",
+      lg: "1.25rem",
+      xl: "1.375rem",
+      "2xl": "1.5rem",
+      "3xl": "1.625rem",
+      "4xl": "2rem",
+      "5xl": "2.5rem",
+      "6xl": "3rem",
+      "7xl": "4.5rem",
+    },
+    fontFamily: {
+      sans: ["Open Sans", "Helvetica", "Arial", "Verdana", "sans-serif"],
+      serif: ["Droid Serif", "Georgia", "Times", "serif"],
+      "alt-sans": ["Lato", "Helvetica", "Arial", "Verdana", "sans-serif"],
+    },
+    colors: {
+      primary: "#0077DA",
+      "primary-dark": "#0067be",
+      "primary-darker": "#205493",
+      "primary-light": "#DAEEFF",
+      "primary-lighter": "#F5F8F9",
+      secondary: "#0067be",
+      alert: "#E41D3D",
+      "alert-light": "#F9D2D8",
+      "alert-dark": "#B21D38",
+      success: "#2E8540",
+      "success-light": "#B4E5BE",
+      "success-dark": "#216E1F",
+      warn: "#FDB81E",
+      "warn-light": "#FEE8B6",
+      "warn-dark": "#E5A000",
+      "accent-cool": "#00BED5",
+      "accent-cool-light": "#C8F1FF",
+      "accent-cool-dark": "#009DB0",
+      "accent-warm": "#ff6627",
+      "accent-warm-dark": "#D54309",
+      "accent-warm-light": "#FFD2C0",
+      "accent-warm-lighter": "#FFF7F3",
+      royal: "#B85ED5",
+      "royal-light": "#EED7F5",
+      "royal-dark": "#A131C6",
+      lush: "#99CD00",
+      "lush-light": "#F2FFCD",
+      "lush-dark": "#7CA700",
+      white: "#FFFFFF",
+      black: "#000000",
+      blue: {
+        800: "#205493",
+        700: "#0067be",
+        600: "#0077DA",
+        300: "#DAEEFF",
+        200: "#F5F8F9",
+      },
+      red: {
+        700: "#E41D3D",
+        300: "#F9D2D8",
+      },
+      yellow: {
+        700: "#FDB81E",
+        300: "#FEE8B6",
+      },
+      green: {
+        700: "#2E8540",
+        300: "#B4E5BE",
+      },
+      teal: {
+        700: "#2E8540",
+        300: "#B4E5BE",
+      },
+      gray: {
+        950: "#242C2E",
+        900: "#222222",
+        850: "#333333",
+        800: "#30383A",
+        750: "#555555",
+        700: "#767676",
+        600: "#999999",
+        550: "#AAAAAA",
+        500: "#CCCCCC",
+        450: "#DEDEE0",
+        400: "#EFEFEF",
+        300: "#F6F6F6",
+        200: "#F7F7F7",
+        100: "#F9F9F9",
+      },
+    },
+    letterSpacing: {
+      tightest: "-.075em",
+      tighter: "-.05em",
+      tight: "-.025em",
+      normal: "0",
+      wide: ".025em",
+      wider: ".05em",
+      widest: ".12em",
+      ultrawide: ".25em",
+    },
+    extend: {
+      borderColor: (theme) => ({
+        default: theme("colors.gray.450", "currentColor"),
+      }),
+      inset: {
+        4: "1rem",
+        "-10": "-2.5rem",
+      },
+    },
+  },
+}

package/tailwind.tosass.js

@@ -0,0 +1,29 @@
+/* eslint-env node */
+
+const tailwindToSassVars = (bloomTheme) => {
+  const bloomColorVars = Object.keys(bloomTheme.theme.colors).map((colorKey) => {
+    if (typeof bloomTheme.theme.colors[colorKey] == "object") {
+      // create a map variable that can be used by the map-get SCSS function
+      let colorMap = "$tailwind-" + colorKey + ": ("
+      colorMap += Object.keys(bloomTheme.theme.colors[colorKey])
+        .map((colorMapKey) => {
+          return `${colorMapKey}: ${bloomTheme.theme.colors[colorKey][colorMapKey]}`
+        })
+        .join(", ")
+      return colorMap + ");"
+    } else {
+      // return a simple variable
+      return `$tailwind-${colorKey}: ${bloomTheme.theme.colors[colorKey]};`
+    }
+  })
+  const bloomScreenVars = Object.keys(bloomTheme.theme.screens).map((screenKey) => {
+    return `$tailwind-screens-${screenKey}: ${bloomTheme.theme.screens[screenKey]};`
+  })
+
+  // Uncomment this if you want to debug:
+  // console.log(bloomColorVars.concat(bloomScreenVars).join("\n"))
+
+  return bloomColorVars.concat(bloomScreenVars).join("\n")
+}
+
+module.exports = tailwindToSassVars

package/tsconfig.json

@@ -0,0 +1,31 @@
+{
+  "extends": "../tsconfig.json" /* TODO: is this worth connecting? */,
+  "compilerOptions": {
+    "outDir": "build/lib",
+    // "module": "es2015",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "target": "es5",
+    "lib": ["es5", "es6", "es7", "es2017", "dom"],
+    "sourceMap": true,
+    "allowJs": true,
+    "jsx": "react",
+    "moduleResolution": "node",
+    "rootDirs": ["src"],
+    "baseUrl": "src",
+    "forceConsistentCasingInFileNames": true,
+    "noImplicitReturns": true,
+    "noImplicitThis": true,
+    "noImplicitAny": true,
+    "strictNullChecks": true,
+    "suppressImplicitAnyIndexErrors": true,
+    "noUnusedLocals": false,
+    "declaration": true,
+    "allowSyntheticDefaultImports": true,
+    "experimentalDecorators": true,
+    "emitDecoratorMetadata": true,
+    "resolveJsonModule": true
+  },
+  "include": ["src/**/*", "__tests__/**/*"]
+  // "exclude": ["../../node_modules", "node_modules", "build", "scripts"]
+}