Merge pull request opentripplanner#663 from ibi-group/building-block-…

…library

Building Blocks - Color Palettes

packages/building-blocks/README.md

@@ -0,0 +1,5 @@
+## Usage
+
+```
+TBD
+```

packages/building-blocks/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@opentripplanner/building-blocks",
+  "version": "1.0.0",
+  "description": "Styling and UI Component Lbrary",
+  "author": "@binh-dam-ibigroup",
+  "homepage": "https://github.com/opentripplanner/otp-ui/#readme",
+  "license": "MIT",
+  "main": "lib/index.js",
+  "module": "esm/index.js",
+  "private": false,
+  "dependencies": {
+    "mapbox-gl": "npm:[email protected]",
+    "maplibre-gl": "^2.1.9",
+    "react-map-gl": "^7.0.15",
+    "@opentripplanner/core-utils": "9.0.3"
+  },
+  "peerDependencies": {
+    "@opentripplanner/types": "^6.1.0",
+    "react": "^16.14.0",
+    "styled-components": "^5.3.0"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/opentripplanner/otp-ui.git"
+  },
+  "scripts": {
+    "test": "echo \"Error: run tests from root\" && exit 1",
+    "tsc": "tsc"
+  },
+  "bugs": {
+    "url": "https://github.com/opentripplanner/otp-ui/issues"
+  },
+  "gitHead": "0af1b7cda60bd4252b219dcf893e01c2acb2ed5d"
+}

packages/building-blocks/src/colors/blue.ts

@@ -0,0 +1,16 @@
+const blue = {
+  50: "#E5ECF3",
+  100: "#CCDAE7",
+  200: "#B2C7DB",
+  300: "#99B5CF",
+  400: "#7FA2C2",
+  500: "#6690B7",
+  600: "#4D7EAB",
+  // 700 and above text is WCAG AA accessible on white backgrounds.
+  700: "#336B9E",
+  // 800 and above text is WCAG AAA accessible on white backgrounds.
+  800: "#1A5992",
+  900: "#004686"
+};
+
+export default blue;

packages/building-blocks/src/colors/grey.ts

@@ -0,0 +1,16 @@
+const grey = {
+  50: "#ECECEC",
+  100: "#D9D9D9",
+  200: "#C5C5C5",
+  300: "#B3B3B3",
+  400: "#9F9F9F",
+  500: "#8C8C8C",
+  600: "#797979",
+  // 700 and above text is WCAG AA accessible on white backgrounds.
+  700: "#666666",
+  // 800 and above text is WCAG AAA accessible on white backgrounds.
+  800: "#535353",
+  900: "#404040"
+};
+
+export default grey;

packages/building-blocks/src/colors/red.ts

@@ -0,0 +1,16 @@
+const red = {
+  50: "#F7E7E6",
+  100: "#EFCFCE",
+  200: "#E7B6B4",
+  300: "#DF9E9C",
+  400: "#D78683",
+  500: "#CF6E6B",
+  600: "#C75652",
+  // 700 and above text is WCAG AA accessible on white backgrounds.
+  700: "#BF3E3A",
+  800: "#B72620",
+  // 900 text is WCAG AAA accessible on white backgrounds.
+  900: "#AF0E08"
+};
+
+export default red;

packages/building-blocks/src/index.ts

@@ -0,0 +1,5 @@
+import blue from "./colors/blue";
+import red from "./colors/red";
+import grey from "./colors/grey";
+
+export { blue, red, grey };

packages/building-blocks/src/stories/ColorPalette.tsx

@@ -0,0 +1,56 @@
+import React from "react";
+
+import styled from "styled-components";
+import { getMostReadableTextColor } from "@opentripplanner/core-utils/lib/route";
+
+export interface Hue {
+  [key: number]: string;
+}
+
+interface Props {
+  color: Hue;
+}
+
+const ColorBlock = styled.div<{ hex: string }>`
+  align-items: center;
+  background-color: ${props => props.hex};
+  color: ${props => getMostReadableTextColor(props.hex, "#ffffff")};
+  text-shadow: ${props =>
+    getMostReadableTextColor(props.hex, "#ffffff") === "#ffffff"
+      ? "1px 1px 2px black"
+      : ""};
+  display: flex;
+  font-family: Arial, Helvetica, sans-serif;
+  height: 40px;
+  justify-content: space-between;
+  margin: 0;
+  padding: 10px;
+  width: 300px;
+
+  &:first-of-type {
+    border-radius: 8px 8px 0 0;
+  }
+  &:last-of-type {
+    border-radius: 0 0 8px 8px;
+  }
+`;
+
+const ColorPalette = ({ color }: Props): JSX.Element => {
+  const colorArray: Array<Hue> = Object.entries(color);
+
+  return (
+    <>
+      {colorArray.map(
+        (hue: Hue): JSX.Element => {
+          return (
+            <ColorBlock key={hue[0]} hex={hue[1]}>
+              <p>{hue[0]}</p>
+              <p>{hue[1]}</p>
+            </ColorBlock>
+          );
+        }
+      )}
+    </>
+  );
+};
+export default ColorPalette;

packages/building-blocks/src/stories/index.story.tsx

@@ -0,0 +1,22 @@
+import React, { ReactElement } from "react";
+import ColorPalette from "./ColorPalette";
+
+import grey from "../colors/grey";
+import blue from "../colors/blue";
+import red from "../colors/red";
+
+export default {
+  title: "Building-Blocks/Colors"
+};
+
+export const Grey = (): ReactElement => {
+  return <ColorPalette color={grey} />;
+};
+
+export const Blue = (): ReactElement => {
+  return <ColorPalette color={blue} />;
+};
+
+export const Red = (): ReactElement => {
+  return <ColorPalette color={red} />;
+};

packages/building-blocks/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "composite": true,
+    "target": "es2019",
+    "outDir": "./lib",
+    "rootDir": "./src",
+    "lib": ["es2019", "dom"],
+    "skipLibCheck": true
+  },
+  "include": ["src/**/*"],
+  "exclude": ["src/__tests__/**/*"]
+}