Create Alert Component

packages/building-blocks/package.json

@@ -9,11 +9,12 @@
   "module": "esm/index.js",
   "private": false,
   "devDependencies": {
-    "@opentripplanner/types": "^6.4.0",
-    "@opentripplanner/core-utils": "^11.2.3"
+    "@opentripplanner/core-utils": "^11.2.3",
+    "@opentripplanner/types": "^6.4.0"
   },
   "peerDependencies": {
     "react": "^16.14.0",
+    "react-animate-height": "^3.0.4",
     "styled-components": "^5.3.0"
   },
   "repository": {
@@ -27,5 +28,8 @@
   "bugs": {
     "url": "https://github.com/opentripplanner/otp-ui/issues"
   },
-  "gitHead": "0af1b7cda60bd4252b219dcf893e01c2acb2ed5d"
+  "gitHead": "0af1b7cda60bd4252b219dcf893e01c2acb2ed5d",
+  "dependencies": {
+    "styled-icons": "^10.47.1"
+  }
 }

packages/building-blocks/src/Alert.tsx

@@ -0,0 +1,124 @@
+import React, { ReactChild, useState } from "react";
+import styled from "styled-components";
+import AnimateHeight from "react-animate-height";
+import { ChevronUp } from "@styled-icons/bootstrap/ChevronUp";
+import { Bell } from "@styled-icons/bootstrap/Bell";
+import blue from "./colors/blue";
+
+interface Props {
+  alertHeader: string;
+  alertSubheader?: string;
+  backgroundColor?: string;
+  collapsable?: boolean;
+  children?: ReactChild;
+  Icon?: any;
+}
+
+const AlertContainer = styled.div<{
+  backgroundColor: string;
+  collapsable: boolean;
+  expandAlert: boolean;
+}>`
+  background-color: ${props =>
+    props.backgroundColor ? props.backgroundColor : blue[50]};
+  display: grid;
+  grid-template-columns: 50px auto auto;
+  grid-template-rows: minmax(25px, auto) auto;
+  max-width: 715px;
+  padding: 1.5em 2em;
+
+  svg {
+    align-self: center;
+    grid-column: 1;
+    grid-row: 1 / span 2;
+    justify-self: start;
+  }
+
+  button {
+    background: transparent;
+    border: none;
+    width: 40px;
+
+    svg {
+      transform: ${props => !props.expandAlert && "rotate(180deg)"};
+      transition: all 0.2s ease-in;
+    }
+  }
+
+  @media (max-width: 550px) {
+    grid-template-columns: 40px auto auto;
+    padding: 1.25em 1.25em;
+  }
+`;
+
+const ButtonContainer = styled.span`
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  justify-self: right;
+`;
+
+const AlertHeader = styled.span`
+  align-self: center;
+  font-weight: 700;
+  grid-column: 2;
+`;
+
+const AlertSubheader = styled(AlertHeader)`
+  font-weight: 400;
+  margin-top: 0.3em;
+`;
+
+const AlertContent = styled.div`
+  grid-column: 2;
+  grid-row: 3;
+`;
+
+const ContentPadding = styled.div<{
+  collapsable: boolean;
+}>`
+  margin-top: ${props => (props.collapsable ? "1em" : ".5em")};
+`;
+
+const Alert = ({
+  alertHeader,
+  alertSubheader,
+  backgroundColor,
+  children,
+  collapsable,
+  Icon = Bell
+}: Props): JSX.Element => {
+  const [expandAlert, setExpandAlert] = useState(false);
+  return (
+    <AlertContainer
+      backgroundColor={backgroundColor}
+      expandAlert={expandAlert}
+      collapsable={collapsable}
+    >
+      <Icon size={24} />
+      <AlertHeader>{alertHeader}</AlertHeader>
+      <ButtonContainer>
+        {collapsable && (
+          <button type="button" onClick={() => setExpandAlert(!expandAlert)}>
+            <ChevronUp size={16} />
+          </button>
+        )}
+      </ButtonContainer>
+      {alertSubheader && <AlertSubheader>{alertSubheader}</AlertSubheader>}
+      {children && (
+        <AlertContent>
+          <AnimateHeight
+            duration={500}
+            height={collapsable ? (expandAlert ? "auto" : 0) : "auto"}
+          >
+            <ContentPadding collapsable={collapsable}>
+              {children}
+            </ContentPadding>
+          </AnimateHeight>
+        </AlertContent>
+      )}
+    </AlertContainer>
+  );
+};
+
+export default Alert;

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

@@ -0,0 +1,76 @@
+import React, { ReactElement } from "react";
+import { Meta } from "@storybook/react";
+import { Warning } from "@styled-icons/fluentui-system-regular/Warning";
+import Alert from "../Alert";
+import red from "../colors/red";
+
+const meta: Meta<typeof Alert> = {
+  title: "Building-Blocks/Alert",
+  component: Alert
+};
+
+export default meta;
+
+const alerts = [
+  {
+    alertUrl: "http://trimet.org/alerts/",
+    effectiveStartDate: 1576471800,
+    alertDescriptionText:
+      "TriMet Customer Service will be unavailable to serve text messages or Twitter responses from 9:00 p.m.- 11:30 p.m. For immediate assistance regarding safety or security concerns, please contact the police via 911."
+  },
+  {
+    alertUrl:
+      "https://news.trimet.org/2019/11/next-up-for-elevator-improvements-sunset-transit-center-park-ride/",
+    effectiveStartDate: 1573083439,
+    alertDescriptionText:
+      "The Park and Ride garage elevator at Sunset Transit Center is closed for approximately 3 months for improvements. During this time garage users must use the stairs or find alternate parking. Visit trimet.org/parkandride for a complete list of Park and Ride garages."
+  },
+  {
+    alertUrl: "http://trimet.org/alerts/",
+    effectiveStartDate: 1572827580,
+    alertDescriptionText:
+      "The west elevators at the Washington Park MAX Station are out of service. Please use east elevators to access street level and platforms. "
+  }
+];
+
+const AlertContent = () => {
+  return (
+    <>
+      {alerts.map((alert, i) => {
+        return (
+          <>
+            <div key={alert.alertDescriptionText}>
+              {`${i + 1}) `}
+              {alert.alertDescriptionText}
+            </div>
+            <br />
+          </>
+        );
+      })}
+    </>
+  );
+};
+
+export const BasicAlert = (): ReactElement => {
+  return (
+    <Alert
+      alertHeader="Next trip starts on Wednesday April 17th"
+      alertSubheader="Trip is due to begin at 7:43 AM (Realtime monitoring will being at 7:13 AM)"
+    >
+      Here is more content
+    </Alert>
+  );
+};
+
+export const CollapsableAlertWithTransitAlerts = (): ReactElement => {
+  return (
+    <Alert
+      backgroundColor={red[50]}
+      collapsable
+      Icon={Warning}
+      alertHeader="Your trip has alerts"
+    >
+      <AlertContent />
+    </Alert>
+  );
+};