[HOLD] lib-classifier: Refactor survey task Choices, ChoiceButton, Choice, Questions, and Filter styling

packages/lib-classifier/src/components/Classifier/components/Layout/components/CenteredLayout/CenteredLayout.js

@@ -1,92 +1,95 @@
-import { useContext } from 'react'
 import styled, { css } from 'styled-components'
-import { Box, ResponsiveContext } from 'grommet'
+import { Box } from 'grommet'
 
 import Banners from '@components/Classifier/components/Banners'
 import FeedbackModal from '@components/Classifier/components/Feedback'
-import ImageToolbar from '@components/Classifier/components/ImageToolbar'
 import MetaTools from '@components/Classifier/components/MetaTools'
 import QuickTalk from '@components/Classifier/components/QuickTalk'
 import SubjectViewer from '@components/Classifier/components/SubjectViewer'
 import TaskArea from '@components/Classifier/components/TaskArea'
 import FieldGuide from '@components/Classifier/components/FieldGuide'
 
-export const Relative = styled(Box)`
+import {
+  StyledImageToolbar,
+  StyledSubjectContainer
+} from '../shared/StyledContainers'
+
+const Relative = styled(Box)`
   position: relative; // Used for QuickTalk and FeedbackModal positioning
 `
 
-const StickySubjectViewer = styled(Box)`
-  ${props =>
-    props.size !== 'small' &&
-    css`
-      position: sticky;
-      top: 10px;
-    `}
+const ContainerBox = styled(Box)`
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+  justify-content: center;
+
+  ${props => props.hasSurveyTask && css`
+    @media screen and (min-width: 769px) and (max-width: 70rem) {
+      flex-direction: column;
+    }
+  `}
+
+  // small screens
+  @media screen and (max-width: 768px) {
+    flex-direction: column;
+  }
+`
+
+const ViewBox = styled(Box)`
+  flex-direction: row;
 `
 
-const StickyTaskArea = styled(Box)`
-  flex: initial; // Don't stretch vertically
-  ${props =>
-    props.size !== 'small' &&
-    css`
-      position: sticky;
-      top: 10px;
-    `}
+const StyledImageToolbarContainer = styled.div`
+  min-width: 3rem;
+  width: 3rem;
 `
 
-const StickyImageToolbar = styled(ImageToolbar)`
+const StickyTaskArea = styled(Box)`
+  height: fit-content;
   position: sticky;
   top: 10px;
-`
+  min-width: ${props => props.hasSurveyTask ? '33.75rem' : 'auto'};
+  width: ${props => props.hasSurveyTask ? '33.75rem' : '25rem'};
 
-export const verticalLayout = {
-  direction: 'column',
-  gap: 'medium',
-  margin: 'none'
-}
+  ${props => props.hasSurveyTask && css`
+    @media screen and (min-width: 769px) and (max-width: 70rem) {
+      position: static;
+      width: 100%;
+    }
+  `}
 
-export const horizontalLayout = {
-  direction: 'row',
-  gap: 'small',
-  justify: 'center'
-}
+  // small screens
+  @media screen and (max-width: 768px) {
+    position: static;
+    width: 100%;
+  }
+`
 
 export default function CenteredLayout({
   separateFramesView = false,
   hasSurveyTask = false
 }) {
-  const size = useContext(ResponsiveContext)
-  const containerProps = size === 'small' ? verticalLayout : horizontalLayout
-  const taskAreaWidth = hasSurveyTask ? '33.75rem' : '25rem'
-
   return (
     <Relative>
-      <Box {...containerProps}>
-        <Box
-          as='section'
-          direction='row'
-          margin={size === 'small' ? 'auto' : 'none'}
-        >
-          <StickySubjectViewer size={size}>
+      <ContainerBox hasSurveyTask={hasSurveyTask}>
+        <ViewBox forwardedAs='section'>
+          <StyledSubjectContainer hasSurveyTask={hasSurveyTask}>
             <Banners />
             <SubjectViewer />
             <MetaTools />
-          </StickySubjectViewer>
+          </StyledSubjectContainer>
           {!separateFramesView && (
-            <Box width='3rem' fill='vertical' style={{ minWidth: '3rem' }}>
-              <StickyImageToolbar />
-            </Box>
+            <StyledImageToolbarContainer>
+              <StyledImageToolbar />
+            </StyledImageToolbarContainer>
           )}
-        </Box>
-        <StickyTaskArea
-          width={size === 'small' ? '100%' : taskAreaWidth}
-          fill={size === 'small' ? 'horizontal' : 'vertical'}
-          size={size}
-        >
+        </ViewBox>
+        <StickyTaskArea hasSurveyTask={hasSurveyTask}>
           <TaskArea />
           {separateFramesView && <FieldGuide />}
         </StickyTaskArea>
-      </Box>
+      </ContainerBox>
       <FeedbackModal />
       <QuickTalk />
     </Relative>

packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.js

@@ -3,42 +3,45 @@ import { Box, Grid } from 'grommet'
 
 import Banners from '@components/Classifier/components/Banners'
 import FeedbackModal from '@components/Classifier/components/Feedback'
-import ImageToolbar from '@components/Classifier/components/ImageToolbar'
 import MetaTools from '@components/Classifier/components/MetaTools'
 import QuickTalk from '@components/Classifier/components/QuickTalk'
 import SubjectViewer from '@components/Classifier/components/SubjectViewer'
 import TaskArea from '@components/Classifier/components/TaskArea'
 import FieldGuide from '@components/Classifier/components/FieldGuide'
+import {
+  ViewerGrid,
+  StyledSubjectContainer,
+  StyledImageToolbarContainer,
+  StyledImageToolbar,
+  StyledTaskAreaContainer,
+  StyledTaskArea
+} from '../shared/StyledContainers'
 
 export const ContainerGrid = styled(Grid)`
   position: relative;
   grid-gap: 1.875rem;
   grid-template-areas: 'viewer task';
-  grid-template-columns: minmax(auto, 100rem) ${props =>
-      props.hasSurveyTask ? '33.75rem' : '25rem'};
+  grid-template-columns: minmax(auto, 100rem) ${props => props.hasSurveyTask ? '33.75rem' : '25rem'};
   margin: auto;
 
-  ${props =>
-    props.hasSurveyTask
-      ? css`
-          @media screen and (min-width: 769px) and (max-width: 70rem) {
-            grid-gap: 1.25rem;
-            grid-template-areas:
-              'viewer'
-              'task';
-            grid-template-columns: 100%;
-            grid-template-rows: auto auto;
-            margin: 0;
-          }
-        `
-      : css`
-          // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem
-          @media screen and (min-width: 769px) and (max-width: 70rem) {
-            grid-gap: 1.25rem;
-            grid-template-areas: 'viewer task';
-            grid-template-columns: 9fr 5fr;
-          }
-        `}
+  ${props => props.hasSurveyTask ? css`
+    @media screen and (min-width: 769px) and (max-width: 70rem) {
+      grid-gap: 1.25rem;
+      grid-template-areas:
+        'viewer'
+        'task';
+      grid-template-columns: 100%;
+      grid-template-rows: auto auto;
+      margin: 0;
+    }
+  ` : css`
+    // proportional 9:5 subject/task sizing up to a maximum subject/task width of 45rem/25rem
+    @media screen and (min-width: 769px) and (max-width: 70rem) {
+      grid-gap: 1.25rem;
+      grid-template-areas: 'viewer task';
+      grid-template-columns: 9fr 5fr;
+    }
+  `}
 
   @media screen and (max-width: 768px) {
     grid-gap: 1.25rem;
@@ -51,59 +54,6 @@ export const ContainerGrid = styled(Grid)`
   }
 `
 
-export const ViewerGrid = styled(Grid)`
-  ${props =>
-    props.hasSurveyTask
-      ? css`
-          @media screen and (min-width: 70rem) {
-            position: sticky;
-            top: 10px;
-          }
-        `
-      : css`
-          @media screen and (min-width: 769px) {
-            position: sticky;
-            top: 10px;
-          }
-        `}
-
-  height: fit-content;
-  grid-area: viewer;
-  grid-template-columns: auto clamp(3rem, 10%, 4.5rem);
-  grid-template-rows: auto;
-  grid-template-areas: 'subject toolbar';
-`
-
-const StyledTaskAreaContainer = styled.div`
-  grid-area: task;
-`
-
-const StyledTaskArea = styled(Box)`
-  ${props =>
-    props.hasSurveyTask
-      ? css`
-          @media screen and (min-width: 70rem) {
-            position: sticky;
-            top: 10px;
-          }
-        `
-      : css`
-          @media screen and (min-width: 769px) {
-            position: sticky;
-            top: 10px;
-          }
-        `}
-`
-
-const StyledImageToolbarContainer = styled.div`
-  grid-area: toolbar;
-`
-
-const StyledImageToolbar = styled(ImageToolbar)`
-  position: sticky;
-  top: 10px;
-`
-
 export default function MaxWidth({
   className = '',
   separateFramesView = false,
@@ -118,12 +68,12 @@ export default function MaxWidth({
           <MetaTools />
         </Box>
       ) : (
-        <ViewerGrid forwardedAs='section' hasSurveyTask={hasSurveyTask}>
-          <Box gridArea='subject'>
+        <ViewerGrid forwardedAs='section'>
+          <StyledSubjectContainer hasSurveyTask={hasSurveyTask}>
             <Banners />
             <SubjectViewer />
             <MetaTools />
-          </Box>
+          </StyledSubjectContainer>
           <StyledImageToolbarContainer>
             <StyledImageToolbar />
           </StyledImageToolbarContainer>

packages/lib-classifier/src/components/Classifier/components/Layout/components/MaxWidth/MaxWidth.stories.js

@@ -80,7 +80,7 @@ taskEntries.forEach(([key, value]) => {
 const surveyWorkflowSnapshot = WorkflowFactory.build({
   configuration: {
     invert_subject: true,
-    limit_subject_height: true
+    limit_subject_height: false
   },
   first_task: 'T0',
   strings: surveyTaskStrings,

packages/lib-classifier/src/components/Classifier/components/Layout/components/NoMaxWidth/NoMaxWidth.js

@@ -3,12 +3,19 @@ import { Box, Grid } from 'grommet'
 
 import Banners from '@components/Classifier/components/Banners'
 import FeedbackModal from '@components/Classifier/components/Feedback'
-import ImageToolbar from '@components/Classifier/components/ImageToolbar'
 import MetaTools from '@components/Classifier/components/MetaTools'
 import QuickTalk from '@components/Classifier/components/QuickTalk'
 import SubjectViewer from '@components/Classifier/components/SubjectViewer'
 import TaskArea from '@components/Classifier/components/TaskArea'
 import FieldGuide from '@components/Classifier/components/FieldGuide'
+import {
+  ViewerGrid,
+  StyledSubjectContainer,
+  StyledImageToolbarContainer,
+  StyledImageToolbar,
+  StyledTaskAreaContainer,
+  StyledTaskArea
+} from '../shared/StyledContainers'
 
 const ContainerGrid = styled(Grid)`
   position: relative;
@@ -46,53 +53,6 @@ const ContainerGrid = styled(Grid)`
   }
 `
 
-export const ViewerGrid = styled(Grid)`
-  ${props => props.hasSurveyTask ? css`
-    @media screen and (min-width: 70rem) {
-      position: sticky;
-      top: 10px;
-    }
-  ` : css`
-    @media screen and (min-width: 769px) {
-      position: sticky;
-      top: 10px;
-    }
-  `}
-
-  height: fit-content;
-  grid-area: viewer;
-  grid-template-columns: auto clamp(3rem, 10%, 4.5rem);
-  grid-template-rows: auto;
-  grid-template-areas: 'subject toolbar';
-`
-
-const StyledTaskAreaContainer = styled.div`
-  grid-area: task;
-`
-
-const StyledTaskArea = styled(Box)`
-  ${props => props.hasSurveyTask ? css`
-    @media screen and (min-width: 70rem) {
-      position: sticky;
-      top: 10px;
-    }
-  ` : css`
-    @media screen and (min-width: 769px) {
-      position: sticky;
-      top: 10px;
-    }
-  `}
-`
-
-const StyledImageToolbarContainer = styled.div`
-  grid-area: toolbar;
-`
-
-const StyledImageToolbar = styled(ImageToolbar)`
-  position: sticky;
-  top: 10px;
-`
-
 export default function NoMaxWidth({
   className = '',
   separateFramesView = false,
@@ -110,15 +70,12 @@ export default function NoMaxWidth({
           <MetaTools />
         </Box>
       ) : (
-        <ViewerGrid
-          forwardedAs='section'
-          hasSurveyTask={hasSurveyTask}
-        >
-          <Box gridArea='subject'>
+        <ViewerGrid forwardedAs='section'>
+          <StyledSubjectContainer hasSurveyTask={hasSurveyTask}>
             <Banners />
             <SubjectViewer />
             <MetaTools />
-          </Box>
+          </StyledSubjectContainer>
           <StyledImageToolbarContainer>
             <StyledImageToolbar />
           </StyledImageToolbarContainer>