feat: update token colors, fonts, sizes, add docs (#1)

* feat: update token colors, fonts, sizes, add docs

Addresses core issues 3263, 3264, 3265

* docs: readme update

* remove: Tailwind

* docs: update Storybook config

* add: minimal CSS reset

* chore: update formatting with Prettier

.storybook/main.js

@@ -1,27 +1,27 @@
-const path = require('path');
+const path = require("path")
 
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ["../src/**/*.stories.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
   /** Expose public folder to storybook as static */
   // staticDirs: ['../public'],
   addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
     {
       /**
        * Fix Storybook issue with PostCSS@8
        * @see https://github.com/storybookjs/storybook/issues/12668#issuecomment-773958085
        */
-      name: '@storybook/addon-postcss',
+      name: "@storybook/addon-postcss",
       options: {
         postcssLoaderOptions: {
-          implementation: require('postcss'),
+          implementation: require("postcss"),
         },
       },
     },
   ],
   core: {
-    builder: 'webpack5',
+    builder: "webpack5",
   },
   webpackFinal: async (config, { configType }) => {
     // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
@@ -64,4 +64,4 @@ module.exports = {
     config.resolve.extensions.push(".ts", ".tsx")
     return config
   },
-};
+}

.storybook/preview.ts

@@ -1,5 +1,6 @@
 // .storybook/preview.js
-import "../src/global/app-css.scss";
+import "../src/global/app-css.scss"
+import "../documentation/storybook.css"
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -12,4 +13,10 @@ export const parameters = {
   previewTabs: {
     "storybook/docs/panel": { index: -1 },
   },
-};
+  options: {
+    storySort: {
+      order: ["Tokens", "Actions", "Forms"],
+    },
+  },
+  viewMode: "docs",
+}

README.md

@@ -1,3 +1,3 @@
-# Bloom UI-seeds
+# Bloom UI Seeds
 
 This package is the home of the core UI components for the Bloom affordable housing system, meant to be imported from one or more applications that provide the end-user interface.

documentation/components/Link.tsx

@@ -0,0 +1,9 @@
+import React from "react"
+
+export const Link = (props) => {
+  return (
+    <a href={props.href} style={{ color: "var(--link-color)" }}>
+      {props.children}
+    </a>
+  )
+}

documentation/components/Swatch.tsx

@@ -0,0 +1,21 @@
+import React from "react"
+
+export const Swatch = (props: { color: string; border?: boolean; label?: string }) => (
+  <div style={{ display: "inline-block", textAlign: "center" }}>
+    <span
+      style={{
+        backgroundColor: `var(--${props.color})`,
+        width: "var(--bloom-s6)",
+        borderRadius: "var(--bloom-rounded-sm)",
+        display: "block",
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: props.border ? "var(--bloom-color-gray-500)" : "transparent",
+      }}
+      title={props.color}
+    >
+      &nbsp;
+    </span>
+    {props.label && <span>{props.label}</span>}
+  </div>
+)

documentation/storybook.css

@@ -0,0 +1,15 @@
+:root {
+  --link-color: #1EA7FD;
+}
+
+.sbdocs-table {
+  width: 100%;
+}
+
+.sbdocs-table thead tr th:first-child {
+  width: 38%;
+}
+
+.sbdocs-content {
+  max-width: 1200px !important;
+}

index.ts

@@ -1 +1 @@
-export * from "./src/expandableText/ExpandableText";
+export * from "./src/expandableText/ExpandableText"

package.json

@@ -40,8 +40,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-scripts": "5.0.1",
-    "storybook": "^6.5.13",
-    "tailwindcss": "^3.2.4",
+    "storybook": "^6.5.16",
     "typescript": "^4.4.2",
     "web-vitals": "^2.1.0"
   },
@@ -82,24 +81,32 @@
     ]
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-interactions": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/node-logger": "^6.5.13",
+    "@storybook/builder-webpack5": "^6.5.16",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/node-logger": "^6.5.16",
     "@storybook/preset-create-react-app": "^4.1.2",
-    "@storybook/react": "^6.5.13",
+    "@storybook/react": "^6.5.16",
     "@storybook/testing-library": "^0.0.13",
     "babel-plugin-named-exports-order": "^0.0.2",
     "postcss": "8.4.19",
     "postcss-loader": "7.0.1",
+    "postcss-import": "^14.1.0",
+    "postcss-load-config": "^3.1.4",
+    "postcss-nested": "6.0.0",
     "prop-types": "^15.8.1",
     "sass": "1.56.1",
     "semantic-release": "19.0.5",
     "ts-loader": "9.4.1",
     "webpack": "^5.75.0"
+  },
+  "prettier": {
+    "singleQuote": false,
+    "printWidth": 100,
+    "semi": false
   }
 }

postcss.config.js

@@ -1,6 +1,5 @@
 module.exports = {
-    plugins: {
-      tailwindcss: {},
-      autoprefixer: {},
-    },
-  }
+  plugins: {
+    autoprefixer: {},
+  },
+}

src/expandableText/ExpandableText.tsx

@@ -1,69 +1,59 @@
-import { useState } from "react";
-import Markdown, { MarkdownOptions } from "markdown-to-jsx";
-import "./ExpandableText.scss";
+import { useState } from "react"
+import Markdown, { MarkdownOptions } from "markdown-to-jsx"
+import "./ExpandableText.scss"
 
 export interface ExpandableTextProps {
-  children: string;
-  expand?: boolean;
-  maxLength?: number;
-  className?: string;
+  children: string
+  expand?: boolean
+  maxLength?: number
+  className?: string
   strings: {
-    readMore: string;
-    readLess: string;
-  };
-  markdownProps?: MarkdownOptions;
-  buttonClassName?: string;
+    readMore: string
+    readLess: string
+  }
+  markdownProps?: MarkdownOptions
+  buttonClassName?: string
 }
 
 const getText = (text: string, expanded: boolean, maxLength: number) => {
   if (expanded || text.length <= maxLength) {
-    return text;
+    return text
   }
 
-  let position = maxLength;
+  let position = maxLength
   while (text[position] !== " " && position > 0) {
-    position -= 1;
+    position -= 1
   }
-  return position > 0
-    ? text.substring(0, position) + "..."
-    : text.substring(0, maxLength) + "...";
-};
+  return position > 0 ? text.substring(0, position) + "..." : text.substring(0, maxLength) + "..."
+}
 
 const moreLessButton = (
   expanded: boolean,
   setExpanded: (newValue: boolean) => void,
   strings: ExpandableTextProps["strings"],
   buttonClassName: ExpandableTextProps["buttonClassName"]
 ) => {
-  const classes = ["button-toggle"];
+  const classes = ["button-toggle"]
   if (buttonClassName) {
-    classes.push(buttonClassName);
+    classes.push(buttonClassName)
   }
 
   return (
-    <button
-      className={classes.join(" ")}
-      onClick={() => setExpanded(!expanded)}
-    >
+    <button className={classes.join(" ")} onClick={() => setExpanded(!expanded)}>
       {expanded ? strings?.readLess : strings?.readMore}
     </button>
-  );
-};
+  )
+}
 
 const ExpandableText = (props: ExpandableTextProps) => {
-  const [expanded, setExpanded] = useState(props.expand || false);
-  const maxLength = props.maxLength || 350;
-  let button;
+  const [expanded, setExpanded] = useState(props.expand || false)
+  const maxLength = props.maxLength || 350
+  let button
 
-  if (!props.children) return null;
+  if (!props.children) return null
 
   if (props.children.length > maxLength) {
-    button = moreLessButton(
-      expanded,
-      setExpanded,
-      props.strings,
-      props.buttonClassName
-    );
+    button = moreLessButton(expanded, setExpanded, props.strings, props.buttonClassName)
   }
   return (
     <div className={`expandable-text ${props?.className}`}>
@@ -73,7 +63,7 @@ const ExpandableText = (props: ExpandableTextProps) => {
       />
       {button}
     </div>
-  );
-};
+  )
+}
 
-export { ExpandableText as default, ExpandableText };
+export { ExpandableText as default, ExpandableText }

src/fonts/Lato/Lato.css

@@ -0,0 +1,18 @@
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./lato-latin-400-normal.woff2) format('woff2'); 
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+/* latin */
+@font-face {
+  font-family: 'Lato';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(./lato-latin-700-normal.woff2) format('woff2'); 
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}

src/fonts/NotoSerif/NotoSerif.css

@@ -0,0 +1,35 @@
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./noto-serif-latin-400-italic.woff2) format('woff2'); 
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url(./noto-serif-latin-700-italic.woff2) format('woff2'); 
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url(./noto-serif-latin-400-normal.woff2) format('woff2'); 
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
+
+@font-face {
+  font-family: 'Noto Serif';
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url(./noto-serif-latin-700-normal.woff2) format('woff2'); 
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}