feat: guide detail/editor style updates, add accessible expand toggle (…

…#69)
usnationalarchives · Sep 28, 2020 · ca9ead5 · ca9ead5
1 parent 57f2aaf
commit ca9ead5
Show file tree

Hide file tree

Showing 15 changed files with 478 additions and 372 deletions.
diff --git a/app/controllers/api/v1/guides_controller.rb b/app/controllers/api/v1/guides_controller.rb
@@ -103,7 +103,7 @@ def edit
           :audience_ids,
           :guide_sections
         ],
-        descriptions: [:title, :naId, :thumbnailUrl, :level, :creators, :ancestors],
+        descriptions: [:title, :naId, :thumbnailUrl, :level, :creators, :ancestors, :scopeContent],
         guide_sections: [:id, :title, :weight, :descriptions]
       }
   end
@@ -116,7 +116,7 @@ def show
     end
 
     render jsonapi: @guide,
-      include: :guide_sections,
+      include: [guide_sections: [:descriptions]],
       fields: {
         guides: [
           :id,
@@ -133,7 +133,8 @@ def show
           :audience_ids,
           :guide_sections
         ],
-        guide_sections: [:id, :title, :weight]
+        descriptions: [:title, :naId, :thumbnailUrl, :level, :creators, :ancestors, :scopeContent],
+        guide_sections: [:id, :title, :weight, :descriptions]
       }
   end
 

diff --git a/app/javascript/src/components/pages/Editor/Description.js b/app/javascript/src/components/pages/Editor/Description.js
@@ -1,8 +1,14 @@
 import React, { useState, Fragment } from "react";
 import styled from "styled-components";
+import useCollapse from "react-collapsed";
 
 // components
+import * as Layout from "#components/shared/Layout";
 import DescriptionActions from "./DescriptionActions";
+import Triangle from "#components/shared/Triangle";
+
+// styles
+import { buttonReset } from "#styles/mixins";
 
 const Root = styled.div`
   border-bottom: 1px solid ${(props) => props.theme.colors.mediumGrey};
@@ -19,6 +25,7 @@ const Root = styled.div`
 
 const Inner = styled.div`
   border: 1px solid transparent;
+  padding: 20px 0;
   position: relative;
   transition: border-color 200ms ease-in-out;
 
@@ -31,26 +38,26 @@ const Inner = styled.div`
   }
 `;
 
-const Level = styled.p`
+export const Level = styled.p`
   text-transform: uppercase;
   font-size: 0.8rem;
   margin-bottom: 10px;
 `;
 
-const Title = styled.p`
+export const Title = styled.p`
   color: ${(props) => props.theme.colors.blue};
   font-size: 1.1rem;
   font-weight: bold;
 `;
 
-const Ancestors = styled.ol`
+export const Ancestors = styled.ol`
   font-size: 0.8rem;
   margin-bottom: 10px;
 `;
 
-const Ancestor = styled.li``;
+export const Ancestor = styled.li``;
 
-const DesktopThumbnail = styled.img`
+export const DesktopThumbnail = styled.img`
   display: none;
   float: right;
   margin-bottom: 20px;
@@ -60,21 +67,31 @@ const DesktopThumbnail = styled.img`
     display: block;
   }
 `;
-const MobileThumbnail = styled.img`
+
+export const MobileThumbnail = styled.img`
   margin-top: 20px;
 
   @media all and ${(props) => props.theme.breakpoints.medium} {
     display: none;
   }
 `;
 
-const Meta = styled.dl`
+const ExpandToggle = styled.button`
+  ${buttonReset}
+
+  color: ${(props) => props.theme.colors.blue};
+  font-size: 0.8rem;
+  text-transform: uppercase;
+  vertical-align: middle;
+`;
+
+export const Meta = styled.dl`
   display: flex;
   flex-wrap: wrap;
   margin-top: 20px;
 `;
 
-const MetaTerm = styled.dt`
+export const MetaTerm = styled.dt`
   color: ${(props) => props.theme.colors.textLightGrey};
   font-size: 0.75rem;
   margin-bottom: 20px;
@@ -86,7 +103,7 @@ const MetaTerm = styled.dt`
   }
 `;
 
-const MetaDefinition = styled.dd`
+export const MetaDefinition = styled.dd`
   width: 100%;
   margin-bottom: 20px;
   font-size: 0.8rem;
@@ -106,6 +123,38 @@ const Description = ({
   last,
 }) => {
   const [hovering, setHovering] = useState(false);
+  const { getCollapseProps, getToggleProps, isExpanded } = useCollapse({
+    defaultExpanded: false,
+  });
+
+  const {
+    ancestors,
+    creators,
+    level,
+    naId,
+    scopeContent,
+    thumbnailUrl,
+    title,
+  } = description.attributes;
+
+  const Metadata = () => {
+    return (
+      <Meta>
+        <MetaTerm>NAID</MetaTerm>
+        <MetaDefinition>{naId}</MetaDefinition>
+
+        <MetaTerm>Creator(s)</MetaTerm>
+        <MetaDefinition>{creators}</MetaDefinition>
+
+        {scopeContent && (
+          <Fragment>
+            <MetaTerm>Scope &amp; Content</MetaTerm>
+            <MetaDefinition>{scopeContent}</MetaDefinition>
+          </Fragment>
+        )}
+      </Meta>
+    );
+  };
 
   return (
     <Root>
@@ -126,49 +175,47 @@ const Description = ({
         )}
 
         <Ancestors>
-          {description.attributes.ancestors.map((ancestor) => (
+          {ancestors.map((ancestor) => (
             <Ancestor key={ancestor.naId}>
               {ancestor.level}: {ancestor.title}
             </Ancestor>
           ))}
         </Ancestors>
 
-        <Level>{description.attributes.level} </Level>
+        <Level>{level} </Level>
 
-        {description.attributes.thumbnailUrl && (
+        {thumbnailUrl && (
           <DesktopThumbnail
-            src={description.attributes.thumbnailUrl}
+            src={thumbnailUrl}
             alt=""
             aria-hidden="true"
             role="presentation"
           />
         )}
 
-        <Title>{description.attributes.title}</Title>
+        <Title>{title}</Title>
 
-        {description.attributes.thumbnailUrl && (
+        {thumbnailUrl && (
           <MobileThumbnail
-            src={description.attributes.thumbnailUrl}
+            src={thumbnailUrl}
             alt=""
             aria-hidden="true"
             role="presentation"
           />
         )}
 
-        <Meta>
-          <MetaTerm>NAID</MetaTerm>
-          <MetaDefinition>{description.attributes.naId}</MetaDefinition>
-
-          <MetaTerm>Creator(s)</MetaTerm>
-          <MetaDefinition>{description.attributes.creators}</MetaDefinition>
-
-          {description.attributes.scopeContent && (
-            <Fragment>
-              <MetaTerm>Scope &amp; Content</MetaTerm>
-              <MetaDefinition>FIXME</MetaDefinition>
-            </Fragment>
-          )}
-        </Meta>
+        <Layout.Mobile>
+          <ExpandToggle {...getToggleProps()}>
+            Metadata <Triangle toggleOpen={isExpanded} />
+          </ExpandToggle>
+          <div {...getCollapseProps()}>
+            <Metadata />
+          </div>
+        </Layout.Mobile>
+
+        <Layout.Desktop>
+          <Metadata />
+        </Layout.Desktop>
       </Inner>
     </Root>
   );

diff --git a/app/javascript/src/components/pages/ResearchGuide/Banner.js b/app/javascript/src/components/pages/ResearchGuide/Banner.js
@@ -4,9 +4,12 @@ import styled from "styled-components";
 // components
 import * as Layout from "#components/shared/Layout";
 
+// modules
+import backgroundColors from "#modules/backgroundColors";
+
 export const Root = styled.div`
   align-items: stretch;
-  background-color: ${(props) => props.theme.colors.darkGrey};
+  background-color: ${(props) => props.backgroundColor};
   display: flex;
   flex-direction: column;
   justify-content: space-between;
@@ -71,8 +74,12 @@ export const Image = styled.div`
 `;
 
 const Banner = ({ data }) => {
+  const backgroundColor = backgroundColors.filter(
+    (c) => c.value === data.attributes.background_color
+  )[0].code;
+
   return (
-    <Root>
+    <Root backgroundColor={backgroundColor}>
       <Content>
         <Layout.Padding>
           <Title>{data.attributes.title}</Title>