Create skeleton for plugin (PT-185950946)

package.json

@@ -135,6 +135,7 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "classnames": "^2.3.2",
     "iframe-phone": "^1.3.1",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",

src/components/app.scss

@@ -0,0 +1,120 @@
+@import "./vars.scss";
+
+body {
+  margin: 0;
+  padding: 0;
+  overflow-y: hidden;
+}
+
+/* remove Chrome blue halo */
+input:focus,
+select:focus,
+textarea:focus,
+button:focus {
+  outline: none;
+}
+
+/* basic page style */
+.pluginContent {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 12px;
+  font-weight: 400;
+  color: $text;
+  background-color: white;
+  padding: 8px 12px;
+  height: 95vh;
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  justify-content: stretch;
+}
+
+.hide {
+  display: none;
+}
+
+.sectionHeaderLine {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin: 6px 0;
+  .sectionHeaderText {
+    width: 88%;
+  }
+}
+
+.infoButton {
+  display: inline-block;
+  min-width: 20px;
+  height: 20px;
+  background-image: url("../assets/info.svg");
+  cursor: pointer;
+}
+
+.scrollArea {
+  border-bottom: thin solid $teal-light;
+  flex-basis: 300px;
+  flex-grow: 10;
+  overflow-y: scroll;
+  margin-top: 6px;
+  margin-bottom: 0;
+}
+
+.summary {
+  flex-basis: 56px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+}
+
+.introSection {
+  flex-basis: 47px;
+  flex-grow: 0;
+  flex-shrink: 10;
+  border-bottom: thin solid $text;
+}
+
+button {
+  margin: 6px;
+  padding: 6px;
+  border-radius: 3px;
+  border: solid 1px $teal-light;
+  background-color: white;
+  font-family: 'Montserrat', sans-serif;
+  font-size: 12px;
+  font-weight: 500;
+  &:hover {
+    cursor: pointer;
+    background: $teal-light-12;
+  }
+}
+
+a {
+  color: $teal-dark;
+}
+
+.scrollArea {
+  .dropdown {
+    border-bottom: thin #dddddd solid;
+    :last-child {
+      border-bottom: none;
+    }
+  }
+}
+
+.summary  {
+  font-family: 'icomoon' !important;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}

src/components/app.tsx

@@ -1,8 +1,56 @@
-import React from "react";
+import React, {useState} from "react";
+import { Dropdown } from "./dropdown";
+import css from "./app.scss";
+import classnames from "classnames";
+import { Information } from "./information";
 
 function App() {
+  const [showInfo, setShowInfo] = useState<boolean>(false);
+
+  const handleInfoClick = () => {
+    setShowInfo(true);
+  };
+
   return (
-    <div>Hello world, this is a small change I made to test if deployment is working correctly</div>
+    <div className={css.pluginContent}>
+      { showInfo &&
+      <Information closeInfo={() => setShowInfo(false)}/>
+      }
+      <div className={css.introSection}>
+        <div className={css.sectionHeaderLine}>
+        <span className={css.sectionHeaderText}>
+          Retrieve data on U.S. agricultural statitistics at the state or county level.
+        </span>
+        <span
+          title="Further information about this CODAP plugin"
+          className={classnames(css.infoButton, {[css.disabled]: showInfo})}
+          onClick={handleInfoClick}
+        />
+        </div>
+      </div>
+      <div className={css.scrollArea}>
+        <Dropdown
+          sectionName={"Place"}
+          sectionAltText={"Place alt text"}
+          sectionDescription={"Place description"}
+        />
+        <Dropdown
+          sectionName={"Attributes"}
+          sectionAltText={"Attributes alt text"}
+          sectionDescription={"Attributes description"}
+        />
+        <Dropdown
+          sectionName={"Years"}
+          sectionAltText={"Years alt text"}
+          sectionDescription={"Years description"}
+        />
+      </div>
+      <div className={css.summary}>
+        <span className={css.statusGraphic}></span>
+        <button className={css.getDataButton}>Get Data</button>
+      </div>
+    </div>
+
   );
 }
 

src/components/dropdown.scss

@@ -0,0 +1,79 @@
+@import "./vars.scss";
+
+.dropdown {
+  border-bottom: thin #dddddd solid;
+}
+
+.dropdownBody {
+  padding-left: 0;
+  padding-right: 0;
+  max-height: 1000px;
+  transition: max-height;
+  transition-duration: .5s;
+  transition-timing-function: ease-in;
+  &.hidden {
+    max-height: 0;
+  }
+}
+
+.dropdownBody .sectionHeaderLine .sectionTitle {
+  flex-grow: 5;
+}
+
+.sectionHeaderLine {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  margin: 6px 0;
+  .sectionTitle {
+    min-width: 102px;
+    font-weight: 600;
+    flex-basis: 75px;
+    flex-shrink: 0;
+    flex-grow: 0
+  }
+}
+
+.dropdown .dropdownBody {
+  padding: 0 12px;
+  overflow-y: hidden;
+  transition-property: max-height;
+  transition-duration: .5s;
+  transition-timing-function: ease-in;
+}
+
+.dropdownIndicator{
+  display: inline-block;
+  width: 20px;
+  height: 20px;
+  flex-basis: 20px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  background-image: url("../assets/arrow-drop-down.svg");
+  &.up {
+    transform: rotate(180deg);
+  }
+}
+
+.dropdownHeader {
+  cursor: pointer;
+}
+
+.userSelection {
+  font-family: 'Montserrat', sans-serif;
+  font-size: 12px;
+  color: $teal-dark;
+  flex-grow: 10;
+  padding: 0 6px;
+}
+
+.selectionCount {
+  padding: 1.5px 5px;
+  border-radius: 3px;
+  background-color: $teal-light-25;
+  flex-basis: 16px;
+  flex-grow: 0;
+  flex-shrink: 0;
+  text-align: center;
+  height: 16px;
+}

src/components/dropdown.tsx

@@ -0,0 +1,33 @@
+import React, { useState } from "react";
+import classnames from "classnames";
+import css from "./dropdown.scss";
+
+interface IProps {
+  sectionName: string
+  sectionAltText: string
+  sectionDescription: string
+}
+
+export const Dropdown: React.FC<IProps> = (props) => {
+  const {sectionName, sectionAltText, sectionDescription} = props;
+  const [showItems, setShowItems] = useState<boolean>(false);
+
+  const handleClick = () => {
+    setShowItems(!showItems);
+  };
+
+  return (
+  <div className={`${css.dropdown}`}>
+    <div className={`${css.sectionHeaderLine} ${css.dropdownHeader}`} title={sectionAltText}>
+      <span className={css.sectionTitle}>{sectionName}</span>
+      <span className={css.userSelection}></span>
+      <span className={classnames(css.dropdownIndicator, {[css.up]: showItems})} onClick={handleClick}></span>
+    </div>
+    <div className={classnames(css.dropdownBody, {[css.hidden]: !showItems})}>
+      <p>{sectionDescription}</p>
+      <div className={css.selectionItems}>
+      </div>
+    </div>
+  </div>
+  );
+};

src/components/global.d.ts

@@ -0,0 +1,2 @@
+declare module "*.scss";
+declare module "*.svg";

src/components/information.scss

@@ -0,0 +1,43 @@
+@import "./vars.scss";
+
+.popUpContent {
+  position: absolute;
+  left: 12px;
+  right: 12px;
+  top: 35px;
+  z-index: 3;
+
+  display: flex;
+  flex-direction: column;
+  overflow-y: hidden;
+  background-color: white;
+
+  border: 0 solid $teal-dark;
+  border-radius: 6px;
+
+  max-height: 1000px;
+  border-width: 1px;
+}
+
+.popUpFooter {
+  flex-basis: 50px;
+  .controlRow {
+    display: block;
+    text-align: right;
+  }
+}
+
+.cover {
+  position: absolute;
+  background-color: rgba(0,0,0,0.32);
+  z-index: 2;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+.popUpBody {
+  background-color: white;
+  padding: 12px;
+}