Move TripDetail component to its own file.

packages/trip-details/src/index.js

@@ -9,17 +9,11 @@ import {
 } from "@opentripplanner/core-utils/lib/types";
 import moment from "moment";
 import PropTypes from "prop-types";
-import React, { Component } from "react";
-import {
-  CalendarAlt,
-  Heartbeat,
-  MoneyBillAlt,
-  QuestionCircle,
-  TimesCircle
-} from "styled-icons/fa-solid";
-import { VelocityTransitionGroup } from "velocity-react";
+import React from "react";
+import { CalendarAlt, Heartbeat, MoneyBillAlt } from "styled-icons/fa-solid";
 
 import * as Styled from "./styled";
+import TripDetail from "./trip-detail";
 
 export default function TripDetails({
   className,
@@ -149,67 +143,3 @@ TripDetails.defaultProps = {
   routingType: "ITINERARY",
   timeOptions: null
 };
-
-class TripDetail extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      expanded: false
-    };
-  }
-
-  toggle = () => {
-    const { expanded } = this.state;
-    if (expanded) this.onHideClick();
-    else this.onExpandClick();
-  };
-
-  onExpandClick = () => {
-    this.setState({ expanded: true });
-  };
-
-  onHideClick = () => {
-    this.setState({ expanded: false });
-  };
-
-  render() {
-    const { icon, summary, description } = this.props;
-    const { expanded } = this.state;
-    return (
-      <Styled.TripDetail>
-        <Styled.TripDetailIcon>{icon}</Styled.TripDetailIcon>
-        <Styled.TripDetailSummary>
-          {summary}
-          {description && (
-            <Styled.ExpandButton onClick={this.toggle}>
-              <QuestionCircle size={17} />
-            </Styled.ExpandButton>
-          )}
-          <VelocityTransitionGroup
-            enter={{ animation: "slideDown" }}
-            leave={{ animation: "slideUp" }}
-          >
-            {expanded && (
-              <Styled.TripDetailDescription>
-                <Styled.HideButton onClick={this.onHideClick}>
-                  <TimesCircle size={17} />
-                </Styled.HideButton>
-                {description}
-              </Styled.TripDetailDescription>
-            )}
-          </VelocityTransitionGroup>
-        </Styled.TripDetailSummary>
-      </Styled.TripDetail>
-    );
-  }
-}
-
-TripDetail.propTypes = {
-  icon: PropTypes.node.isRequired,
-  summary: PropTypes.node.isRequired,
-  description: PropTypes.node
-};
-
-TripDetail.defaultProps = {
-  description: undefined
-};

packages/trip-details/src/trip-detail.js

@@ -0,0 +1,70 @@
+import PropTypes from "prop-types";
+import React, { Component } from "react";
+import { QuestionCircle, TimesCircle } from "styled-icons/fa-solid";
+import { VelocityTransitionGroup } from "velocity-react";
+
+import * as Styled from "./styled";
+
+export default class TripDetail extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      expanded: false
+    };
+  }
+
+  toggle = () => {
+    const { expanded } = this.state;
+    if (expanded) this.onHideClick();
+    else this.onExpandClick();
+  };
+
+  onExpandClick = () => {
+    this.setState({ expanded: true });
+  };
+
+  onHideClick = () => {
+    this.setState({ expanded: false });
+  };
+
+  render() {
+    const { icon, summary, description } = this.props;
+    const { expanded } = this.state;
+    return (
+      <Styled.TripDetail>
+        <Styled.TripDetailIcon>{icon}</Styled.TripDetailIcon>
+        <Styled.TripDetailSummary>
+          {summary}
+          {description && (
+            <Styled.ExpandButton onClick={this.toggle}>
+              <QuestionCircle size={17} />
+            </Styled.ExpandButton>
+          )}
+          <VelocityTransitionGroup
+            enter={{ animation: "slideDown" }}
+            leave={{ animation: "slideUp" }}
+          >
+            {expanded && (
+              <Styled.TripDetailDescription>
+                <Styled.HideButton onClick={this.onHideClick}>
+                  <TimesCircle size={17} />
+                </Styled.HideButton>
+                {description}
+              </Styled.TripDetailDescription>
+            )}
+          </VelocityTransitionGroup>
+        </Styled.TripDetailSummary>
+      </Styled.TripDetail>
+    );
+  }
+}
+
+TripDetail.propTypes = {
+  icon: PropTypes.node.isRequired,
+  summary: PropTypes.node.isRequired,
+  description: PropTypes.node
+};
+
+TripDetail.defaultProps = {
+  description: undefined
+};