{data.attributes.title}
diff --git a/app/javascript/src/components/pages/ResearchGuide/Description.js b/app/javascript/src/components/pages/ResearchGuide/Description.js
new file mode 100644
index 0000000..03b8a20
--- /dev/null
+++ b/app/javascript/src/components/pages/ResearchGuide/Description.js
@@ -0,0 +1,141 @@
+import React, { Fragment } from "react";
+import styled from "styled-components";
+import useCollapse from "react-collapsed";
+
+// components
+import * as Layout from "#components/shared/Layout";
+import Triangle from "#components/shared/Triangle";
+
+// styles
+import { buttonReset } from "#styles/mixins";
+import {
+ Ancestor,
+ Ancestors,
+ DesktopThumbnail,
+ Level,
+ Meta,
+ MetaDefinition,
+ MetaTerm,
+ MobileThumbnail,
+ Title,
+} from "#components/pages/Editor/Description";
+
+const Root = styled.div`
+ padding: 30px 0;
+ margin-bottom: 30px;
+
+ &:after {
+ background-color: ${(props) => props.theme.colors.mediumGrey};
+ content: "";
+ display: block;
+ height: 1px;
+ left: -5%;
+ top: 30px;
+ position: relative;
+ width: 110%;
+ }
+
+ &:last-child {
+ &:after {
+ display: none;
+ }
+ }
+`;
+
+const Inner = styled.div``;
+
+const ExpandToggle = styled.button`
+ ${buttonReset}
+
+ color: ${(props) => props.theme.colors.blue};
+ font-size: 0.8rem;
+ text-transform: uppercase;
+ vertical-align: middle;
+`;
+
+const Description = ({ description }) => {
+ const {
+ ancestors,
+ creators,
+ level,
+ naId,
+ scopeContent,
+ thumbnailUrl,
+ title,
+ } = description.attributes;
+
+ const { getCollapseProps, getToggleProps, isExpanded } = useCollapse({
+ defaultExpanded: false,
+ });
+
+ const Metadata = () => {
+ return (
+
+ NAID
+ {naId}
+
+ Creator(s)
+ {creators}
+
+ {scopeContent && (
+
+ Scope & Content
+ {scopeContent}
+
+ )}
+
+ );
+ };
+
+ return (
+
+
+
+ {ancestors.map((ancestor) => (
+
+ {ancestor.level}: {ancestor.title}
+
+ ))}
+
+
+ {level}
+
+ {thumbnailUrl && (
+
+ )}
+
+ {title}
+
+ {thumbnailUrl && (
+
+ )}
+
+
+
+ Metadata
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default Description;
diff --git a/app/javascript/src/components/pages/ResearchGuide/GuideIntro.js b/app/javascript/src/components/pages/ResearchGuide/GuideIntro.js
index 8d49718..17b37e7 100644
--- a/app/javascript/src/components/pages/ResearchGuide/GuideIntro.js
+++ b/app/javascript/src/components/pages/ResearchGuide/GuideIntro.js
@@ -1,17 +1,10 @@
import React from "react";
-import ReactDOM from "react-dom";
-import AnchorLink from "react-anchor-link-smooth-scroll";
import styled, { css } from "styled-components";
-import { Link } from "react-router-dom";
// components
import * as Layout from "#components/shared/Layout";
-import * as Text from "#components/shared/Text";
-import Triangle from "../../shared/Triangle";
-
-// styles
-import { fl_static } from "#styles/frontline";
-import { fl_attention } from "#styles/frontline";
+import TableOfContents from "./TableOfContents";
+import SectionSelect from "./SectionSelect";
export const Root = styled.div`
background-color: ${(props) => props.theme.colors.lightGrey};
@@ -76,122 +69,36 @@ export const BackgroundInfo = styled.p`
}
`;
-export const SectionTitle = styled.h4`
- color: ${(props) => props.theme.colors.darkGrey};
- font-weight: bold;
- margin-top: 20px;
-`;
-
-export const SectionItem = styled(AnchorLink)`
- display: block;
- margin-top: 15px;
-
- ${fl_static(css`
- color: ${(props) => props.theme.colors.blue};
- text-decoration: none;
- `)}
- ${fl_attention(css`
- text-decoration: underline;
- `)}
-`;
-
-export const SectionSelect = styled.select`
- background-color: ${(props) => props.theme.colors.lightGrey};
- border-color: ${(props) => props.theme.colors.textlightGrey};
- border-radius: 30px;
- color: ${(props) => props.theme.colors.textlightGrey};
- max-width: 400px;
- padding: 10px;
- width: 100%;
-
- dropdownIndicator {
- margin-left: 20px;
- }
-
- ${fl_attention(css`
- border-color: ${(props) => props.theme.colors.darkGrey};
- `)}
-`;
-
-export const Desktop = styled.div`
- display: none;
-
- @media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
- display: block;
- }
-`;
-
-export const Mobile = styled.div`
- display: block;
-
- @media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
- display: none;
- }
-`;
-
-const GuideIntro = ({ data }) => {
+const GuideIntro = ({ guide }) => {
return (
Guide Background
-
-
- {data.attributes.about}
-
-
-
- {data.attributes.purpose}
-
- {data.attributes.audience_names && (
+ {guide.data.attributes.about && (
+
+
+ {guide.data.attributes.about}
+
+ )}
+ {guide.data.attributes.purpose && (
+
+
+ {guide.data.attributes.purpose}
+
+ )}
+ {guide.data.attributes.audience_names && (
- {data.attributes.audience_names}
+
+ {guide.data.attributes.audience_names}
+
)}
-
-
-
-
-
-
-
-
-
-
-
-
- Table of Contents
- Leaders of the March
-
- Civil Rights March on Washignton [Leaders Marching from the
- Washington Monument to the Lincoln Memorial]
-
-
- Civil Rights March on Washignton Civil Rights March on Washignton
- Civil Rights March on Washignton
-
-
- Photograph of Meeting with Leaders of the March on Washington Aug
- 28, 1963
-
- Planning Documents
-
- March on Washignton Program
-
-
- Committee Papers, 1945-1975
-
-
- Final Plans for the March on Washington for Jobs and Freedom
-
-
+
+
diff --git a/app/javascript/src/components/pages/ResearchGuide/ResearchGuide.js b/app/javascript/src/components/pages/ResearchGuide/ResearchGuide.js
index cbace71..32e028f 100644
--- a/app/javascript/src/components/pages/ResearchGuide/ResearchGuide.js
+++ b/app/javascript/src/components/pages/ResearchGuide/ResearchGuide.js
@@ -5,7 +5,7 @@ import { Get } from "react-axios";
// components
import Banner from "./Banner";
import GuideIntro from "./GuideIntro";
-import Section from "./Section";
+import Sections from "./Sections";
import NavBar from "#components/shared/NavBar";
export const Root = styled.div``;
@@ -27,9 +27,8 @@ const ResearchGuide = ({ ...props }) => {
return (
-
-
-
+
+
);
}
diff --git a/app/javascript/src/components/pages/ResearchGuide/Section.js b/app/javascript/src/components/pages/ResearchGuide/Section.js
index f91f928..0cf2c49 100644
--- a/app/javascript/src/components/pages/ResearchGuide/Section.js
+++ b/app/javascript/src/components/pages/ResearchGuide/Section.js
@@ -1,28 +1,20 @@
import React from "react";
-import styled, { css } from 'styled-components';
-import { Link } from "react-router-dom";
+import styled from "styled-components";
// components
-import * as Layout from "#components/shared/Layout";
-import SectionItem from './SectionItem';
-
-// styles
-import { fl_static } from "#styles/frontline";
-import { fl_attention } from "#styles/frontline";
-import ResearchHighlight from "./ResearchHighlight";
+import Description from "./Description";
export const Root = styled.div`
- &:last-of-type {
+ &:last-of-type {
margin-bottom: 50px;
}
`;
-export const SectionTitle = styled.h2`
+export const Title = styled.h2`
color: ${(props) => props.theme.colors.darkGrey};
font-size: 1.6em;
font-weight: bold;
margin: 30px 0 10px 0;
- padding: 0 20px;
@media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
font-size: 2em;
@@ -31,17 +23,20 @@ export const SectionTitle = styled.h2`
}
`;
+const Section = ({ guide, section }) => {
+ const { title } = section.attributes;
+ const descriptions = guide.included.filter(
+ (i) =>
+ i.type === "descriptions" &&
+ section.relationships.descriptions.data.map((r) => r.id).includes(i.id)
+ );
-const Section = ({ title }) => {
return (
-
- { title }
-
-
-
-
-
+ {title}
+ {descriptions.map((description) => (
+
+ ))}
);
};
diff --git a/app/javascript/src/components/pages/ResearchGuide/SectionItem.js b/app/javascript/src/components/pages/ResearchGuide/SectionItem.js
deleted file mode 100644
index b5f6759..0000000
--- a/app/javascript/src/components/pages/ResearchGuide/SectionItem.js
+++ /dev/null
@@ -1,180 +0,0 @@
-import React, { useState } from "react";
-import styled, { css } from 'styled-components';
-import { Link } from "react-router-dom";
-
-// components
-import ItemInfo from "./ItemInfo";
-import SlideToggleContent from "../../shared/SlideToggleContent";
-import Triangle from "../../shared/Triangle";
-
-// assets
-import ItemIcon from '#assets/icons/item.svg';
-import FileUnitIcon from '#assets/icons/file-unit.svg';
-import SeriesIcon from '#assets/icons/series.svg';
-
-// styles
-import * as Layout from "#components/shared/Layout";
-import { fl_static } from "#styles/frontline";
-import { fl_attention } from "#styles/frontline";
-import { buttonReset } from '#styles/mixins';
-
-export const Root = styled.div`
- padding: 0 20px;
-
- @media all and (min-width: 820px) {
- padding: 0;
- }
-
- & + & {
- border-top: 1px solid ${(props) => props.theme.colors.mediumGrey};
- margin-top: 20px;
- padding-top: 20px;
-
- @media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
- margin-top: 40px;
- padding-top: 40px;
- }
- }
-`;
-
-export const ContentWrap = styled.div`
- align-items: flex-start;
- display: flex;
- justify-content: space-between;
-`;
-
-export const Content = styled.div`
- ${props =>
- props.image &&
- css`
- width: 75%;
- `}
-
- button {
- ${buttonReset}
-
- color: ${(props) => props.theme.colors.blue};
- display: block;
- font-size: 0.8em;
- margin-top: 20px;
- text-align: left;
- text-transform: uppercase;
-
- @media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
- display: none;
- }
- }
-`;
-
-export const Label = styled.p`
- align-items: center;
- color: ${(props) => props.theme.colors.darkGrey};
- display: flex;
- font-size: 0.8em;
- margin-bottom: 10px;
- text-transform: uppercase;
-
- svg {
- margin-right: 10px;
- }
-`;
-
-export const Title = styled(Link)`
- color: ${(props) => props.theme.colors.blue};
- font-size: 1.1em;
- font-weight: bold;
-
- ${fl_static(css`
- color: ${(props) => props.theme.colors.blue};
- text-decoration: none;
- `)}
- ${fl_attention(css`
- text-decoration: underline;
- `)}
-`;
-
-export const DesktopInfo = styled.div`
- display: none;
-
- @media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
- display: block;
- }
-`;
-
-
-
-export const Image = styled.div`
- display: none;
-
- @media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
- background-color: ${(props) => props.theme.colors.mediumGrey};
- display: block;
- height: 100px;
- width: 20%;
- }
-`;
-
-export const MobileImage = styled.div`
- background-color: ${(props) => props.theme.colors.mediumGrey};
- height: 150px;
- margin-top: 20px;
- width: 150px;
-
- @media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
- display: none;
- }
-`;
-
-const SectionItem = ({ item, fileUnit, series, image, id }) => {
- const [isVisible, setIsVisible] = useState(false);
-
- return (
-
- {item &&
- }
-
- {fileUnit &&
- }
-
- {series &&
- }
-
-
- Civil Rights March on Washignton [Leaders Marching from the Washington Monument to the Lincoln Memorial]
- {image &&
-
- }
-
- {/* Mobile view for item info */}
-
-
-
-
-
- {/* Desktop view for item info */}
-
-
-
-
-
- {image &&
-
- }
-
-
- );
-};
-
-export default SectionItem;
diff --git a/app/javascript/src/components/pages/ResearchGuide/SectionSelect.js b/app/javascript/src/components/pages/ResearchGuide/SectionSelect.js
new file mode 100644
index 0000000..81d5a72
--- /dev/null
+++ b/app/javascript/src/components/pages/ResearchGuide/SectionSelect.js
@@ -0,0 +1,59 @@
+import React from "react";
+import styled, { css } from "styled-components";
+
+// components
+import * as Layout from "#components/shared/Layout";
+import * as Text from "#components/shared/Text";
+
+// styles
+import { fl_attention } from "#styles/frontline";
+
+export const Root = styled.div`
+ display: block;
+
+ @media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
+ display: none;
+ }
+`;
+
+export const Select = styled.select`
+ background-color: ${(props) => props.theme.colors.lightGrey};
+ border-color: ${(props) => props.theme.colors.textlightGrey};
+ border-radius: 30px;
+ color: ${(props) => props.theme.colors.textlightGrey};
+ max-width: 400px;
+ padding: 10px;
+ width: 100%;
+
+ ${fl_attention(css`
+ border-color: ${(props) => props.theme.colors.darkGrey};
+ `)}
+`;
+
+const SectionSelect = ({ guide }) => {
+ const sections = (guide.included || []).filter(
+ (s) => s.type === "guide_sections"
+ );
+
+ const handleChange = (event) => {};
+
+ return (
+
+
+
+
+
+
+ );
+};
+
+export default SectionSelect;
diff --git a/app/javascript/src/components/pages/ResearchGuide/Sections.js b/app/javascript/src/components/pages/ResearchGuide/Sections.js
new file mode 100644
index 0000000..c08f5f7
--- /dev/null
+++ b/app/javascript/src/components/pages/ResearchGuide/Sections.js
@@ -0,0 +1,25 @@
+import React, { Fragment } from "react";
+
+// components
+import Section from "./Section";
+import * as Layout from "#components/shared/Layout";
+
+const Sections = ({ guide }) => {
+ const sections = (guide.included || []).filter(
+ (s) => s.type === "guide_sections"
+ );
+
+ return (
+
+
+
+ {sections.map((section) => (
+
+ ))}
+
+
+
+ );
+};
+
+export default Sections;
diff --git a/app/javascript/src/components/pages/ResearchGuide/TableOfContents.js b/app/javascript/src/components/pages/ResearchGuide/TableOfContents.js
new file mode 100644
index 0000000..e3653d1
--- /dev/null
+++ b/app/javascript/src/components/pages/ResearchGuide/TableOfContents.js
@@ -0,0 +1,80 @@
+import React from "react";
+import styled, { css } from "styled-components";
+import AnchorLink from "react-anchor-link-smooth-scroll";
+
+// components
+
+// styles
+import { fl_static, fl_attention } from "#styles/frontline";
+
+export const Root = styled.div`
+ display: none;
+
+ @media all and (min-width: ${(props) => props.theme.layout.maxWidthNarrow}) {
+ display: block;
+ }
+`;
+
+export const IntroHeading = styled.h3`
+ color: ${(props) => props.theme.colors.darkGrey};
+ font-size: 1.4em;
+ font-weight: bold;
+`;
+
+export const SectionTitle = styled.h4`
+ color: ${(props) => props.theme.colors.darkGrey};
+ font-weight: bold;
+ margin-top: 20px;
+`;
+
+export const SectionItem = styled(AnchorLink)`
+ display: block;
+ margin-top: 15px;
+
+ ${fl_static(css`
+ color: ${(props) => props.theme.colors.blue};
+ text-decoration: none;
+ `)}
+ ${fl_attention(css`
+ text-decoration: underline;
+ `)}
+`;
+
+const TableOfContents = ({ guide }) => {
+ const sections = (guide.included || []).filter(
+ (s) => s.type === "guide_sections"
+ );
+
+ const Section = ({ section }) => {
+ const descriptions = guide.included.filter(
+ (i) =>
+ i.type === "descriptions" &&
+ section.relationships.descriptions.data.map((r) => r.id).includes(i.id)
+ );
+
+ return (
+
+ {section.attributes.title}
+ {descriptions.map((description) => (
+
+ {description.attributes.title}
+
+ ))}
+
+ );
+ };
+
+ return (
+
+ Table of Contents
+ {sections.map((section) => (
+
+ ))}
+
+ );
+};
+
+export default TableOfContents;
diff --git a/app/javascript/src/components/shared/Layout.js b/app/javascript/src/components/shared/Layout.js
index 095da94..33b1323 100644
--- a/app/javascript/src/components/shared/Layout.js
+++ b/app/javascript/src/components/shared/Layout.js
@@ -1,5 +1,5 @@
-import styled, { css } from 'styled-components';
-import { fl_clearfix } from '#styles/frontline';
+import styled, { css } from "styled-components";
+import { fl_clearfix } from "#styles/frontline";
export const Padding = styled.div`
width: 100%;
@@ -53,4 +53,17 @@ export const Center = styled.div`
export const Right = styled.div`
text-align: right;
-`;
\ No newline at end of file
+`;
+
+export const Mobile = styled.div`
+ @media all and ${(props) => props.theme.breakpoints.medium} {
+ display: none;
+ }
+`;
+
+export const Desktop = styled.div`
+ display: none;
+ @media all and ${(props) => props.theme.breakpoints.medium} {
+ display: block;
+ }
+`;
diff --git a/app/javascript/src/components/shared/Triangle.js b/app/javascript/src/components/shared/Triangle.js
index b08b038..e82e863 100644
--- a/app/javascript/src/components/shared/Triangle.js
+++ b/app/javascript/src/components/shared/Triangle.js
@@ -1,31 +1,27 @@
-import React from 'react';
-import styled, { css } from 'styled-components';
+import React from "react";
+import styled, { css } from "styled-components";
const Root = styled.div`
display: inline-block;
height: 0;
border-style: solid;
border-width: 6px 6px 0 6px;
- border-color: ${props => props.theme.colors.blue} transparent transparent transparent;
- margin-bottom: 2px;
- margin-left: 10px;
- transition: transform .5s;
+ border-color: ${(props) => props.theme.colors.blue} transparent transparent
+ transparent;
+ transition: transform 0.5s;
width: 0;
- ${props =>
+ ${(props) =>
props.toggleOpen &&
css`
- -ms-transform: rotate(180deg); /* IE 9 */
- -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
- transform: rotateX(180deg);
- `}
+ -ms-transform: rotate(180deg); /* IE 9 */
+ -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+ transform: rotateX(180deg);
+ `}
`;
const Triangle = ({ toggleOpen }) => {
-
- return (
-
- );
+ return ;
};
-export default Triangle;
\ No newline at end of file
+export default Triangle;
diff --git a/package.json b/package.json
index c58d027..4ff21b4 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
"react": "^16.13.1",
"react-anchor-link-smooth-scroll": "^1.0.12",
"react-axios": "^2.0.3",
+ "react-collapsed": "^3.0.1",
"react-dom": "^16.13.1",
"react-hook-form": "^6.2.0",
"react-router-dom": "^5.2.0",
diff --git a/yarn.lock b/yarn.lock
index 1b0453d..56a6ce9 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6510,6 +6510,13 @@ querystringify@^2.1.1:
resolved "https://registry.yarnpkg.com/querystringify/-/querystringify-2.1.1.tgz#60e5a5fd64a7f8bfa4d2ab2ed6fdf4c85bad154e"
integrity sha512-w7fLxIRCRT7U8Qu53jQnJyPkYZIaR4n5151KMfcJlO/A9397Wxb1amJvROTK6TOnp7PfoAmg/qXiNHI+08jRfA==
+raf@^3.4.1:
+ version "3.4.1"
+ resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.1.tgz#0742e99a4a6552f445d73e3ee0328af0ff1ede39"
+ integrity sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==
+ dependencies:
+ performance-now "^2.1.0"
+
randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0:
version "2.1.0"
resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -6550,6 +6557,14 @@ react-axios@^2.0.3:
resolved "https://registry.yarnpkg.com/react-axios/-/react-axios-2.0.3.tgz#9aeb75a2db07cebaf0ff710f666a2932ce024af5"
integrity sha512-63kY2iupdRgbvPq9G8xmM0NWUnt2Q5YmpotMoLQsxKOzKXKZg2Lo6CzF/bcZvtmv3WnfjBU6Bg8nZQO28eIAZw==
+react-collapsed@^3.0.1:
+ version "3.0.1"
+ resolved "https://registry.yarnpkg.com/react-collapsed/-/react-collapsed-3.0.1.tgz#1bd8daab639cba51917e7de6a5f7b4641d010717"
+ integrity sha512-TP3TEszJv0VXDgAq2XaSJffGGeNErYCLuODwK6i5CRM1jcSmZuEoQw54rbxvten7XnhoaX9FYub7BA/zc0o17A==
+ dependencies:
+ raf "^3.4.1"
+ tiny-warning "^1.0.3"
+
react-dom@^16.13.1:
version "16.13.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f"