diff --git a/__snapshots__/storybook.test.ts.snap b/__snapshots__/storybook.test.ts.snap
index 91c269215..fa7c40510 100644
--- a/__snapshots__/storybook.test.ts.snap
+++ b/__snapshots__/storybook.test.ts.snap
@@ -26,24 +26,219 @@ exports[`Storyshots Building-Blocks/Colors Blue 1`] = `
"900": "#004686",
}
}
+ label="Blue"
/>
`;
exports[`Storyshots Building-Blocks/Colors Blue 2`] = `
-Array [
- .c0 {
+.c22 {
+ border: 1px solid #D9D9D9;
+ border-radius: 7px;
+ padding: 10px 15px;
+}
+
+.c23 {
+ font-size: 16px;
+ font-weight: bolder;
+}
+
+.c24 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ gap: 5px;
+}
+
+.c24 p {
+ margin: 0;
+}
+
+.c25 {
+ color: white;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ font-size: 13px;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ border-radius: 20px;
+ padding: 5px 15px;
+ margin: 3px 0;
+}
+
+.c26 {
+ background-color: #B72620;
+}
+
+.c19 {
+ position: relative;
+ width: 50%;
+}
+
+.c19 label span {
+ color: #666666;
+ font-size: 12px;
+ background-color: white;
+ z-index: 10;
+ margin-left: 8px;
+ padding: 0 7px;
+}
+
+.c21 {
+ margin: 5px 0 0 8px;
+ color: #B72620;
+ font-size: 12px;
+}
+
+.c20 {
+ border: 1px solid #D9D9D9;
+ border-radius: 7px;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
+ padding: 5px;
+ margin-top: -8px;
+}
+
+.c20 input {
+ border: none;
+ background: transparent;
+}
+
+.c20 input[type="text"] {
+ height: 27px;
+ padding: 0 5px;
+ min-width: 70px;
+ width: 80%;
+}
+
+.c13 {
+ border: 1px solid #D9D9D9;
+ border-radius: 7px;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ padding: 10px 15px;
+ margin-bottom: 15px;
+}
+
+.c16 {
+ width: 100px;
+ height: 50px;
background-color: #E5ECF3;
- color: #000000;
+ border-radius: 5px 5px 0 0;
+}
+
+.c15 {
+ border: 1px solid grey;
+ border-radius: 5px;
+ min-width: 85px;
+}
+
+.c15 p {
+ padding: 10px;
+ margin: 0;
+}
+
+.c14 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ -webkit-box-pack: center;
+ -webkit-justify-content: center;
+ -ms-flex-pack: center;
+ justify-content: center;
+ gap: 10px;
+}
+
+.c17 {
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
+ -webkit-flex-direction: column;
+ -ms-flex-direction: column;
+ flex-direction: column;
+ gap: 3px;
+}
+
+.c17 button {
+ background: #fff;
+ border: 1px solid #797979;
+ border-radius: 5px;
+ padding: 5px 10px;
+}
+
+.c17 button:hover {
+ background-color: #ECECEC;
+ cursor: pointer;
+}
+
+.c12 {
+ background-color: #E5ECF3;
+ line-height: 1.5;
+ padding: 10px;
+ border-radius: 5px;
+ margin-bottom: 15px;
+ text-align: center;
+}
+
+.c12 p {
+ margin: 0;
+}
+
+.c12 a {
+ color: #336B9E;
+ font-weight: 700;
+ -webkit-text-decoration: none;
+ text-decoration: none;
+}
+
+.c12 a:hover {
+ color: #004686;
+}
+
+.c0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
+ gap: 15px;
font-family: Arial,Helvetica,sans-serif;
+ margin: 0 auto;
+}
+
+.c1 {
+ -webkit-align-items: center;
+ -webkit-box-align: center;
+ -ms-flex-align: center;
+ align-items: center;
+ background-color: #E5ECF3;
+ color: #000000;
+ display: -webkit-box;
+ display: -webkit-flex;
+ display: -ms-flexbox;
+ display: flex;
height: 40px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
@@ -51,28 +246,29 @@ Array [
justify-content: space-between;
margin: 0;
padding: 10px;
+ -webkit-transition: all 0.2s ease-in;
+ transition: all 0.2s ease-in;
width: 300px;
}
-.c0:first-of-type {
+.c1:first-of-type {
border-radius: 8px 8px 0 0;
}
-.c0:last-of-type {
+.c1:last-of-type {
border-radius: 0 0 8px 8px;
}
-,
- .c0 {
+.c1:hover {
+ -webkit-transform: scale(1.012);
+ -ms-transform: scale(1.012);
+ transform: scale(1.012);
+ -webkit-transition: all 0.2s ease-in;
+ transition: all 0.2s ease-in;
+ cursor: pointer;
+}
+
+.c2 {
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
@@ -83,7 +279,6 @@ Array [
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
- font-family: Arial,Helvetica,sans-serif;
height: 40px;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
@@ -91,28 +286,29 @@ Array [
justify-content: space-between;
margin: 0;
padding: 10px;
+ -webkit-transition: all 0.2s ease-in;
+ transition: all 0.2s ease-in;
width: 300px;
}
-.c0:first-of-type {
+.c2:first-of-type {
border-radius: 8px 8px 0 0;
}
-.c0:last-of-type {
+.c2:last-of-type {
border-radius: 0 0 8px 8px;
}
-
-
- 100
-
-
- #CCDAE7
-
-
-
- 200
-
-
- #B2C7DB
-
-
-
- 300
-
-
- #99B5CF
-
-
-
- 400
-
-
- #7FA2C2
-
-
-
- 500
-
-
- #6690B7
-
-
-
- 600
-
-
- #4D7EAB
-
-
-
- 700
-
-
- #336B9E
-
-
-
- 800
-
-
- #1A5992
-
-
+
-
- 900
-
-
- #004686
-
-
,
-]
+
+
+
+ 100
+
+
+ #CCDAE7
+
+
+
+
+ 200
+
+
+ #B2C7DB
+
+
+
+
+ 300
+
+
+ #99B5CF
+
+
+
+
+ 400
+
+
+ #7FA2C2
+
+
+
+
+ 500
+
+
+ #6690B7
+
+
+
+
+ 600
+
+
+ #4D7EAB
+
+
+
+
+ 700
+
+
+ #336B9E
+
+
+
+
+ 800
+
+
+ #1A5992
+
+
+
+
+ 900
+
+
+ #004686
+
+
+
+
+
+ Select a color variable from the palette to check it against WCAG contrast requirements.
+
+
+ See more
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Normal Text
+
+
+
+ WCAG AA:
+
+
+
+ Fail
+
+
+
+
+
+ WCAG AAA:
+
+
+
+ Fail
+
+
+
+
+ Large Text (at least 18 point or 14 point bold)
+
+
+
+ WCAG AA:
+
+
+
+ Fail
+
+
+
+
+
+ WCAG AAA:
+
+
+
+ Fail
+
+
+
+
+ Graphical Objects and User Interface Components
+
+
+
+ WCAG AA:
+
+
+
+ Fail
+
+
+
+
+
-
- 100
-
-
- #D9D9D9
-
-
-
- 200
-
-
- #C5C5C5
-
-
-
- 300
-
-
- #B3B3B3
-
-
-
- 400
-
-
- #9F9F9F
-
-
-
- 500
-
-
- #8C8C8C
-
-
-
- 600
-
-
- #797979
-
-
-
- 700
-
-
- #666666
-
-
-
- 800
-
-
- #535353
-
-
+
-
- 900
-
-
- #404040
-
-
,
-]
+
+
+
+ 100
+
+
+ #D9D9D9
+
+
+
+
+ 200
+
+
+ #C5C5C5
+
+
+
+
+ 300
+
+
+ #B3B3B3
+
+
+
+
+ 400
+
+
+ #9F9F9F
+
+
+
+
+ 500
+
+
+ #8C8C8C
+
+
+
+
+ 600
+
+
+ #797979
+
+
+
+
+ 700
+
+
+ #666666
+
+
+
+
+ 800
+
+
+ #535353
+
+
+
+
+ 900
+
+
+ #404040
+
+
+
+
+
+ Select a color variable from the palette to check it against WCAG contrast requirements.
+
+
+ See more
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Normal Text
+
+
+
+ WCAG AA:
+
+
+
+ Fail
+
+
+
+
+
+ WCAG AAA:
+
+
+
+ Fail
+
+
+
+
+ Large Text (at least 18 point or 14 point bold)
+
+
+
+ WCAG AA:
+
+
+
+ Fail
+
+
+
+
+
+ WCAG AAA:
+
+
+
+ Fail
+
+
+
+
+ Graphical Objects and User Interface Components
+
+
+
+ WCAG AA:
+
+
+
+ Fail
+
+
+
+
+
-
- 100
-
-
- #EFCFCE
-
-
-
- 200
-
-
- #E7B6B4
-
-
-
- 300
-
-
- #DF9E9C
-
-
-
- 400
-
-
- #D78683
-
-
-
- 500
-
-
- #CF6E6B
-
-
-
- 600
-
-
- #C75652
-
-
-
- 700
-
-
- #BF3E3A
-
-
-
- 800
-
-
- #B72620
-
-
+
-
- 900
-
-
- #AF0E08
-
-
,
-]
+
+
+
+ 100
+
+
+ #EFCFCE
+
+
+
+
+ 200
+
+
+ #E7B6B4
+
+
+
+
+ 300
+
+
+ #DF9E9C
+
+
+
+
+ 400
+
+
+ #D78683
+
+
+
+
+ 500
+
+
+ #CF6E6B
+
+
+
+
+ 600
+
+
+ #C75652
+
+
+
+
+ 700
+
+
+ #BF3E3A
+
+
+
+
+ 800
+
+
+ #B72620
+
+
+
+
+ 900
+
+
+ #AF0E08
+
+
+
+
+
+ Select a color variable from the palette to check it against WCAG contrast requirements.
+
+
+ See more
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Normal Text
+
+
+
+ WCAG AA:
+
+
+
+ Fail
+
+
+
+
+
+ WCAG AAA:
+
+
+
+ Fail
+
+
+
+
+ Large Text (at least 18 point or 14 point bold)
+
+
+
+ WCAG AA:
+
+
+
+ Fail
+
+
+
+
+
+ WCAG AAA:
+
+
+
+ Fail
+
+
+
+
+ Graphical Objects and User Interface Components
+
+
+
+ WCAG AA:
+
+
+
+ Fail
+
+
+
+
+
-
- otpUi.ItineraryBody.tripAccessibility.itineraryAccessibilityotpUi.ItineraryBody.tripAccessibility.likelyAccessible
-
- ✅
+
+ ✅
+
@@ -223984,16 +225604,11 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
-
- otpUi.ItineraryBody.tripAccessibility.itineraryAccessibilityotpUi.ItineraryBody.tripAccessibility.unclear
-
- ？
+
+ ？
+
@@ -224196,16 +225814,11 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
-
- otpUi.ItineraryBody.tripAccessibility.itineraryAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible
-
- ❌
+
+ ❌
+
@@ -224310,16 +225926,11 @@ exports[`Storyshots PrintableItinerary Walk Transit Transfer With A 11 Y Itinera
-
- otpUi.ItineraryBody.tripAccessibility.itineraryAccessibilityotpUi.ItineraryBody.tripAccessibility.inaccessible
-
- ❌
+
+ ❌
+
diff --git a/packages/building-blocks/package.json b/packages/building-blocks/package.json
index 2b1a92084..d0772a4ca 100644
--- a/packages/building-blocks/package.json
+++ b/packages/building-blocks/package.json
@@ -8,6 +8,9 @@
"main": "lib/index.js",
"module": "esm/index.js",
"private": false,
+ "dependencies": {
+ "chroma-js": "^2.4.2"
+ },
"devDependencies": {
"@opentripplanner/types": "^6.2.1",
"@opentripplanner/core-utils": "^11.1.3"
diff --git a/packages/building-blocks/src/stories/ColorPalette.tsx b/packages/building-blocks/src/stories/ColorPalette.tsx
deleted file mode 100644
index 7c8490b57..000000000
--- a/packages/building-blocks/src/stories/ColorPalette.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-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 = Object.entries(color);
-
- return (
- <>
- {colorArray.map(
- (hue: Hue): JSX.Element => {
- return (
-
- {hue[0]}
- {hue[1]}
-
- );
- }
- )}
-
- );
-};
-export default ColorPalette;
diff --git a/packages/building-blocks/src/stories/color-stories/ColorPalette.story.tsx b/packages/building-blocks/src/stories/color-stories/ColorPalette.story.tsx
new file mode 100644
index 000000000..325146abc
--- /dev/null
+++ b/packages/building-blocks/src/stories/color-stories/ColorPalette.story.tsx
@@ -0,0 +1,231 @@
+import React, { useEffect, useState } from "react";
+
+import styled, { css } from "styled-components";
+import { getMostReadableTextColor } from "@opentripplanner/core-utils/lib/route";
+import WcagChecker from "./WCAGChecker.story";
+import ColorPickerInput from "./ColorPickerInput.story";
+import blue from "../../colors/blue";
+import grey from "../../colors/grey";
+import SelectedColorOptions from "./SelectedColorOptions.story";
+import { Hue } from "../../types/hue";
+
+interface Props {
+ color: Hue;
+ label: string;
+}
+
+export const borderStyles = css`
+ border: 1px solid ${grey[100]};
+ border-radius: 7px;
+`;
+
+const Info = styled.div`
+ background-color: ${blue[50]};
+ line-height: 1.5;
+ padding: 10px;
+ border-radius: 5px;
+ margin-bottom: 15px;
+ text-align: center;
+
+ p {
+ margin: 0;
+ }
+
+ a {
+ color: ${blue[700]};
+ font-weight: 700;
+ text-decoration: none;
+
+ &:hover {
+ color: ${blue[900]};
+ }
+ }
+`;
+
+const ColorContainer = styled.div`
+ display: flex;
+ gap: 15px;
+ font-family: Arial, Helvetica, sans-serif;
+ margin: 0 auto;
+`;
+
+const ColorPaletteContainer = styled.div``;
+
+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;
+ height: 40px;
+ justify-content: space-between;
+ margin: 0;
+ padding: 10px;
+ transition: all 0.2s ease-in;
+ width: 300px;
+
+ &:first-of-type {
+ border-radius: 8px 8px 0 0;
+ }
+ &:last-of-type {
+ border-radius: 0 0 8px 8px;
+ }
+
+ &:hover {
+ transform: scale(1.012);
+ transition: all 0.2s ease-in;
+ cursor: pointer;
+ }
+`;
+
+const ColorPickForm = styled.form`
+ display: flex;
+ gap: 15px;
+ margin-bottom: 15px;
+`;
+
+const WCAGContainer = styled.div`
+ max-width: 425px;
+`;
+
+const ColorPalette = ({ color, label }: Props): JSX.Element => {
+ const colorArray: Array = Object.entries(color);
+ const [selectedColor, setSelectedColor] = useState(colorArray[0]);
+ const [foregroundColor, setForegroundColor] = useState(colorArray[0][1]);
+ const [foregroundColorInput, setForegroundColorInput] = useState(
+ colorArray[0][1]
+ );
+ const [backgroundColorInput, setBackgroundColorInput] = useState("#FFFFFF");
+ const [backgroundColor, setBackgroundColor] = useState("#FFFFFF");
+ const [foregroundError, setForegroundError] = useState(false);
+ const [backgroundError, setBackgroundError] = useState(false);
+
+ const REX_EXP = /(^#[0-9A-F]{6}$)/i;
+
+ const isValidHexCode = code => {
+ let hexcode = code;
+ if (!code.startsWith("#")) hexcode = `#${code}`;
+ return REX_EXP.test(hexcode);
+ };
+
+ const backgroundHandleChange = event => {
+ const value = event.target.value;
+ setBackgroundColorInput(value);
+ };
+
+ const foregroundHandleChange = event => {
+ const value = event.target.value;
+ setForegroundColorInput(value);
+ };
+ const hexArray = colorArray.map(x => x[1]);
+ const foregroundColorIsInPalette = () => {
+ if (foregroundColorInput && hexArray.includes(foregroundColorInput)) {
+ return `${label} ${
+ colorArray[hexArray.indexOf(foregroundColorInput)][0]
+ }`;
+ }
+ return null;
+ };
+ const backgroundColorIsInPalette = () => {
+ if (backgroundColorInput && hexArray.includes(backgroundColorInput)) {
+ return `${label} ${
+ colorArray[hexArray.indexOf(backgroundColorInput)][0]
+ }`;
+ }
+ return null;
+ };
+ const selectedColorReset =
+ selectedColor &&
+ foregroundColorInput !== selectedColor[1] &&
+ backgroundColorInput !== selectedColor[1];
+
+ useEffect(() => {
+ if (selectedColorReset) {
+ setSelectedColor(undefined);
+ }
+ if (!isValidHexCode(foregroundColorInput)) {
+ setForegroundError(true);
+ } else {
+ setForegroundError(false);
+ setForegroundColor(foregroundColorInput);
+ }
+ }, [foregroundColorInput]);
+
+ useEffect(() => {
+ if (selectedColorReset) {
+ setSelectedColor(undefined);
+ }
+ if (!isValidHexCode(backgroundColorInput)) {
+ setBackgroundError(true);
+ } else {
+ setBackgroundError(false);
+ setBackgroundColor(backgroundColorInput);
+ }
+ }, [backgroundColorInput]);
+
+ return (
+
+
+ {colorArray.map(
+ (hue: Hue): JSX.Element => {
+ return (
+ setSelectedColor(hue)}
+ >
+ {hue[0]}
+ {hue[1]}
+
+ );
+ }
+ )}
+
+
+
+
+
+ Select a color variable from the palette to check it against WCAG
+ contrast requirements.{" "}
+
+ See more
+ {" "}
+
+
+
+
+
+
+
+
+
+
+ );
+};
+export default ColorPalette;
diff --git a/packages/building-blocks/src/stories/color-stories/ColorPickerInput.story.tsx b/packages/building-blocks/src/stories/color-stories/ColorPickerInput.story.tsx
new file mode 100644
index 000000000..6521c1d7c
--- /dev/null
+++ b/packages/building-blocks/src/stories/color-stories/ColorPickerInput.story.tsx
@@ -0,0 +1,81 @@
+import React, { ChangeEventHandler, ReactElement } from "react";
+import styled from "styled-components";
+import grey from "../../colors/grey";
+import red from "../../colors/red";
+
+interface Props {
+ handleChange: ChangeEventHandler;
+ colorInPalette: string | null;
+ inputLabel: string;
+ colorInput: string;
+ error: boolean;
+}
+
+const ColorPicker = styled.div`
+ position: relative;
+ width: 50%;
+ label span {
+ color: ${grey[700]};
+ font-size: 12px;
+ background-color: white;
+ z-index: 10;
+ margin-left: 8px;
+ padding: 0 7px;
+ }
+`;
+
+const InputError = styled.div`
+ margin: 5px 0 0 8px;
+ color: ${red[800]};
+ font-size: 12px;
+`;
+
+const InputContainer = styled.div`
+ border: 1px solid ${grey[100]};
+ border-radius: 7px;
+ display: flex;
+ align-items: center;
+ padding: 5px;
+ margin-top: -8px;
+
+ input {
+ border: none;
+ background: transparent;
+ }
+
+ input[type="text"] {
+ height: 27px;
+ padding: 0 5px;
+ min-width: 70px;
+ width: 80%;
+ }
+`;
+
+const ColorPickerInput = ({
+ colorInPalette,
+ handleChange,
+ colorInput,
+ error,
+ inputLabel
+}: Props): ReactElement => {
+ return (
+
+
+ {error ? "Please enter a valid hex code" : ""}
+
+ );
+};
+
+export default ColorPickerInput;
diff --git a/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx b/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx
new file mode 100644
index 000000000..bc61599b3
--- /dev/null
+++ b/packages/building-blocks/src/stories/color-stories/SelectedColorOptions.story.tsx
@@ -0,0 +1,108 @@
+import React, { Dispatch, ReactElement, SetStateAction } from "react";
+import styled from "styled-components";
+import grey from "../../colors/grey";
+import { Hue } from "../../types/hue";
+
+interface Props {
+ selectedColorLabel: string;
+ selectedColor: Hue;
+ setForegroundColor: Dispatch>;
+ setBackgroundColor: Dispatch>;
+ setForegroundColorInput: Dispatch>;
+ setBackgroundColorInput: Dispatch>;
+}
+
+const SelectedColorContainer = styled.div`
+ border: 1px solid ${grey[100]};
+ border-radius: 7px;
+ justify-content: center;
+ padding: 10px 15px;
+ margin-bottom: 15px;
+`;
+
+const SelectedColor = styled.div<{ color: string }>`
+ width: 100px;
+ height: 50px;
+ background-color: ${props => props.color};
+ border-radius: 5px 5px 0 0;
+`;
+
+const SelectedColorSwatch = styled.div`
+ border: 1px solid grey;
+ border-radius: 5px;
+ min-width: 85px;
+
+ p {
+ padding: 10px;
+ margin: 0;
+ }
+`;
+
+const SelectedColorControls = styled.div`
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ gap: 10px;
+`;
+
+const ButtonContainer = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 3px;
+ button {
+ background: #fff;
+ border: 1px solid ${grey[600]};
+ border-radius: 5px;
+ padding: 5px 10px;
+
+ &:hover {
+ background-color: ${grey[50]};
+ cursor: pointer;
+ }
+ }
+`;
+
+const SelectedColorOptions = ({
+ selectedColorLabel,
+ selectedColor,
+ setForegroundColor,
+ setBackgroundColor,
+ setForegroundColorInput,
+ setBackgroundColorInput
+}: Props): ReactElement => {
+ const handleSetForegroundColor = () => {
+ setForegroundColor(selectedColor[1]);
+ setForegroundColorInput(selectedColor[1]);
+ };
+ const handleSetBackgroundColor = () => {
+ setBackgroundColor(selectedColor[1]);
+ setBackgroundColorInput(selectedColor[1]);
+ };
+ return (
+
+ {selectedColor ? (
+
+
+
+
+ {selectedColorLabel} {selectedColor[0]}
+
+
+
+
+
+
+
+
+ ) : (
+ "Please choose a color from the left"
+ )}
+
+ );
+};
+
+export default SelectedColorOptions;
diff --git a/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx b/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx
new file mode 100644
index 000000000..1117eb821
--- /dev/null
+++ b/packages/building-blocks/src/stories/color-stories/WCAGChecker.story.tsx
@@ -0,0 +1,95 @@
+import React from "react";
+import chroma from "chroma-js";
+import styled from "styled-components";
+import grey from "../../colors/grey";
+import red from "../../colors/red";
+
+interface Props {
+ hue: string;
+ background: string;
+}
+
+const ScoreCard = styled.div`
+ border: 1px solid ${grey[100]};
+ border-radius: 7px;
+ padding: 10px 15px;
+`;
+
+const ScoreCardHeader = styled.p`
+ font-size: 16px;
+ font-weight: bolder;
+`;
+
+const ScoreBlock = styled.div`
+ align-items: center;
+ display: flex;
+ gap: 5px;
+
+ p {
+ margin: 0;
+ }
+`;
+
+const ScorePill = styled.div`
+ color: white;
+ display: flex;
+ font-size: 13px;
+ align-items: center;
+ border-radius: 20px;
+ padding: 5px 15px;
+ margin: 3px 0;
+`;
+
+const PassContainer = styled(ScorePill)`
+ background-color: green;
+`;
+
+const FailContainer = styled(ScorePill)`
+ background-color: ${red[800]};
+`;
+
+const pass = Pass;
+const fail = Fail;
+
+const WcagChecker = ({ hue, background }: Props): any => {
+ const wcagScore = chroma.contrast(hue, background);
+
+ const returnPassFail = (benchmark: number) => {
+ const sufficientContrast = wcagScore >= benchmark;
+ return sufficientContrast ? pass : fail;
+ };
+
+ return (
+
+ Normal Text
+
+ WCAG AA:
+ {returnPassFail(4.1)}
+
+
+ WCAG AAA:
+ {returnPassFail(7.1)}
+
+
+ Large Text (at least 18 point or 14 point bold)
+
+
+ WCAG AA:
+ {returnPassFail(3.1)}
+
+
+ WCAG AAA:
+ {returnPassFail(4.5)}
+
+
+ Graphical Objects and User Interface Components
+
+
+ WCAG AA:
+ {returnPassFail(3)}
+
+
+ );
+};
+
+export default WcagChecker;
diff --git a/packages/building-blocks/src/stories/index.story.tsx b/packages/building-blocks/src/stories/index.story.tsx
index 642bc7835..3f6410e96 100644
--- a/packages/building-blocks/src/stories/index.story.tsx
+++ b/packages/building-blocks/src/stories/index.story.tsx
@@ -1,5 +1,5 @@
import React, { ReactElement } from "react";
-import ColorPalette from "./ColorPalette";
+import ColorPalette from "./color-stories/ColorPalette.story";
import grey from "../colors/grey";
import blue from "../colors/blue";
@@ -10,13 +10,13 @@ export default {
};
export const Grey = (): ReactElement => {
- return ;
+ return ;
};
export const Blue = (): ReactElement => {
- return ;
+ return ;
};
export const Red = (): ReactElement => {
- return ;
+ return ;
};
diff --git a/packages/building-blocks/src/types/hue.ts b/packages/building-blocks/src/types/hue.ts
new file mode 100644
index 000000000..14b85af21
--- /dev/null
+++ b/packages/building-blocks/src/types/hue.ts
@@ -0,0 +1,3 @@
+export interface Hue {
+ [key: number]: string;
+}
diff --git a/yarn.lock b/yarn.lock
index 917932aaa..cde8ef964 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3241,6 +3241,24 @@
resolved "https://registry.yarnpkg.com/@open-draft/until/-/until-1.0.3.tgz#db9cc719191a62e7d9200f6e7bab21c5b848adca"
integrity sha512-Aq58f5HiWdyDlFffbbSjAlv596h/cOnt2DO1w3DOC7OJ5EHs0hd/nycJfiu9RJbT6Yk6F1knnRRXNSpxoIVZ9Q==
+"@opentripplanner/core-utils@11.1.2":
+ version "11.1.2"
+ resolved "https://registry.yarnpkg.com/@opentripplanner/core-utils/-/core-utils-11.1.2.tgz#a99d1fa4fb1f587d58fae8fcfd70a3bfe4eed424"
+ integrity sha512-Rn1tBm5F+nt/A4/0cpq6cyNTprSsxfFslujMoZ4P4r6fZ7YTx0d25di+MZ/CZgSlCzHJIiGAfi8DsfJ7yStcTA==
+ dependencies:
+ "@conveyal/lonlat" "^1.4.1"
+ "@mapbox/polyline" "^1.1.0"
+ "@opentripplanner/geocoder" "^1.4.2"
+ "@styled-icons/foundation" "^10.34.0"
+ "@turf/along" "^6.0.1"
+ chroma-js "^2.4.2"
+ date-fns "^2.28.0"
+ date-fns-tz "^1.2.2"
+ graphql "^16.6.0"
+ lodash.clonedeep "^4.5.0"
+ lodash.isequal "^4.5.0"
+ qs "^6.9.1"
+
"@opentripplanner/types@7.0.0-alpha.2":
version "7.0.0-alpha.2"
resolved "https://registry.yarnpkg.com/@opentripplanner/types/-/types-7.0.0-alpha.2.tgz#d10c69f99b2da6d1e80ab5989520bde8e558627b"