Merge pull request #930 from nrrao/add-headings-tag-generator-steps-911

Add Headings to Tag Generator Steps

Author: bruceplai

cypress/integration/pages/tag-creator.spec.js

@@ -128,7 +128,7 @@ describe('Tag Generator Page (Tag Creator)', () => {
   it('loads correct 7 tags and new tags for `civictechindex/CTI-website-frontend` - unaffiliated', () => {
     cy.get('[data-cy=radio-no]').click();
     cy.get('#submitButton').click();
-    cy.get('p').contains('Unaffliated');
+    cy.get('p').contains('Unaffiliated');
     cy.get('[data-cy=grid-repository]').within(() => {
       cy.get('#repository-url', { force: true })
         .click()
@@ -169,7 +169,7 @@ describe('Tag Generator Page (Tag Creator)', () => {
   it('change the org form unaffiliated for `civictechindex/CTI-website-frontend` to affiliated', () => {
     cy.get('[data-cy=radio-no]').click();
     cy.get('#submitButton').click();
-    cy.get('p').contains('Unaffliated');
+    cy.get('p').contains('Unaffiliated');
     cy.get('#change-org').click();
     cy.contains('Are you affiliated with an organization?');
     cy.get('[data-cy=radio-yes]');

src/pages/TagCreator/AffilationQuestionSection.js

@@ -6,7 +6,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles((theme) => ({
   containerPadding: {
-    paddingTop: '30px',
+    paddingTop: '20px',
   },
   gridPadding: {
     padding: '10px',

src/pages/TagCreator/Organization.js

@@ -28,6 +28,9 @@ const useStyles = makeStyles((theme) => ({
   typoStyle: {
     fontWeight: '700',
   },
+  orgNameSectionGrid:{
+    padding: '30px 0px',
+  },
 }));
 
 export const OrganizationSelectorSection = ({
@@ -127,10 +130,10 @@ export const OrgNameSection = ({ setDisplayState, orgName, linkStyles }) => {
       container
       direction='row'
       alignItems='center'
-      style={{ padding: '48px 0px 32px 0px' }}
+      className={classes.orgNameSectionGrid}
     >
       <Grid item xs={12} sm={3} className={classes.gridStyle}>
-        <Typography variant='body1'>Affliated Organization:</Typography>
+        <Typography variant='body1'>Affiliated Organization:</Typography>
       </Grid>
       {orgName ? (
         <Grid item xs={10} sm={7}>
@@ -141,7 +144,7 @@ export const OrgNameSection = ({ setDisplayState, orgName, linkStyles }) => {
       ) : (
         <Grid item xs={7} style={{ paddingRight: '50px' }}>
           <Typography variant='body1' className={classes.typoStyle}>
-            Unaffliated
+            Unaffiliated
           </Typography>
         </Grid>
       )}

src/pages/TagCreator/ProjectRepository.js

@@ -18,6 +18,9 @@ const useStyles = makeStyles((theme) => ({
       fontSize: '0.875rem',
     },
   },
+  projRepoGrid:{
+    padding: '30px 0px',
+  },
 }));
 
 export const ProjectRepositorySection = ({
@@ -31,7 +34,7 @@ export const ProjectRepositorySection = ({
       container
       direction='row'
       alignItems='center'
-      style={{ paddingBottom: '32px' }}
+      className={classes.projRepoGrid}
     >
       <Grid item xs={12} sm={3} className={classes.gridStyle}>
         <Typography variant='body1'>Project Repository URL:</Typography>

src/pages/TagCreator/StepComponent.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Grid from '@material-ui/core/Grid';
+import Typography from '@material-ui/core/Typography';
+
+const useStyles = makeStyles((theme) => ({
+  stepTypo:{
+    color: theme.palette.spectrum.teal,
+  },
+}));
+
+const StepComponent = ({ step,stepHeading }) => {
+  const classes = useStyles();
+  return (
+    <Grid>
+      <Typography variant='h5' className={classes.stepTypo}>{step}</Typography>
+      <Typography variant='h3' className={classes.stepTypo}>{stepHeading}</Typography>
+    </Grid>
+  )
+}
+
+export default StepComponent

src/pages/TagCreator/TopicTagSection.js

@@ -12,10 +12,10 @@ import {
 } from './TopicTag';
 import { makeStyles } from '@material-ui/core/styles';
 import Link from '@material-ui/core/Link';
-import Divider from '@material-ui/core/Divider';
 import { useClipboard } from 'use-clipboard-copy';
 import SettingsGearIcon from '../../icons/SettingsGearIcon';
 import ImageComponent from '../../components/ImageComponent';
+import StepComponent from './StepComponent'
 
 const useStyles = makeStyles((theme) => ({
   tagGridStyle: {
@@ -76,6 +76,12 @@ const useStyles = makeStyles((theme) => ({
   typoPadding: {
     padding: '30px 0px',
   },
+  stepGrid:{
+    paddingTop: '20px',
+  },
+  currentTopicTagGrid:{
+    paddingBottom: '24px' ,
+  },
 }));
 
 const ButtonComponent = ({
@@ -114,6 +120,7 @@ const ButtonComponent = ({
 };
 
 export const CurrentTopicTagSection = ({ currentTags, repositoryName }) => {
+  const classes = useStyles();
   return (
     <>
       {currentTags.length !== 0 ? (
@@ -128,6 +135,7 @@ export const CurrentTopicTagSection = ({ currentTags, repositoryName }) => {
             direction='row'
             alignItems='center'
             data-cy='current-tags'
+            className={classes.currentTopicTagGrid}
           >
             <GeneratedTopicTag topicnames={currentTags} variant='generated' />
           </Grid>{' '}
@@ -140,9 +148,6 @@ export const CurrentTopicTagSection = ({ currentTags, repositoryName }) => {
           </Typography>
         </Grid>
       )}
-      <Grid style={{ padding: '24px 0px' }}>
-        <Divider />
-      </Grid>
     </>
   );
 };
@@ -416,6 +421,7 @@ export const CopyPasteTags = ({
   repositoryUrl,
   linkStyles,
 }) => {
+  const classes = useStyles();
   const copyPasteTopicTags = [...tagsToAdd, ...userTags];
 
   return (
@@ -448,6 +454,9 @@ export const CopyPasteTags = ({
           </Grid>
         </Grid>
       </Grid>
+      <Grid className={classes.stepGrid}>
+        <StepComponent step='Step 4 of 4' stepHeading='Submit Project to the Index'/>
+      </Grid>
       <TagGeneratorInstructions
         copyPasteTopicTags={copyPasteTopicTags}
         linkStyles={linkStyles}

src/pages/TagCreator/index.js

@@ -35,6 +35,7 @@ import {
 } from './TopicTagSection';
 import useTheme from '@material-ui/core/styles/useTheme';
 import BottomSection from './BottomSection';
+import StepComponent from './StepComponent'
 import { makeStyles } from '@material-ui/core/styles';
 const useStyles = makeStyles((theme) => ({
   containerPadding: {
@@ -48,6 +49,9 @@ const useStyles = makeStyles((theme) => ({
       padding: '0px 16px',
     },
   },
+  stepGrid:{
+    paddingTop: '50px',
+  },
 }));
 
 /**
@@ -305,11 +309,15 @@ const TagCreator = () => {
   const OrgProjSection = () => {
     return (
       <>
+        <Grid className={classes.stepGrid}>
+          <StepComponent step='Step 1 of 4' stepHeading='Select Project Affiliation'/>
+        </Grid>
         <OrgNameSection
           setDisplayState={setDisplayState}
           orgName={orgName}
           linkStyles={linkStyles}
         />
+        <StepComponent step='Step 2 of 4' stepHeading='Find Project'/>
         <ProjectRepositorySection
           repositoryUrl={fullRepositoryUrl}
           setDisplayState={setDisplayState}
@@ -347,11 +355,15 @@ const TagCreator = () => {
     case 'ProjectUrl':
       return (
         <>
+          <Grid className={classes.stepGrid}>
+            <StepComponent step='Step 1 of 4' stepHeading='Select Project Affiliation'/>
+          </Grid>
           <OrgNameSection
             setDisplayState={setDisplayState}
             orgName={orgName}
             linkStyles={linkStyles}
           />
+          <StepComponent step='Step 2 of 4' stepHeading='Find Project'/>
           <ProjectRepositoryInput
             repositoryUrl={repositoryUrl}
             handleEnter={handleEnter}
@@ -376,6 +388,7 @@ const TagCreator = () => {
                 currentTags={currentTags}
                 repositoryName={repositoryName}
               />
+              <StepComponent step='Step 3 of 4' stepHeading='Create Topic Tags'/>
               <AddTagsQuestion
                 userTags={userTags}
                 displayState={displayState}
@@ -398,6 +411,7 @@ const TagCreator = () => {
       return (
         <>
           <OrgProjSection />
+          <StepComponent step='Step 3 of 4' stepHeading='Create Topic Tags'/>
           <CurrentTopicTagSection
             currentTags={currentTags}
             repositoryName={repositoryName}
@@ -420,6 +434,7 @@ const TagCreator = () => {
       return (
         <>
           <OrgProjSection />
+          <StepComponent step='Step 3 of 4' stepHeading='Create Topic Tags'/>
           <CurrentTopicTagSection
             currentTags={currentTags}
             repositoryName={repositoryName}
@@ -442,6 +457,7 @@ const TagCreator = () => {
       return (
         <>
           <OrgProjSection />
+          <StepComponent step='Step 3 of 4' stepHeading='Create Topic Tags'/>
           <CurrentTopicTagSection
             currentTags={currentTags}
             repositoryName={repositoryName}
@@ -459,6 +475,9 @@ const TagCreator = () => {
     default:
       return (
         <>
+          <Grid className={classes.stepGrid}>
+            <StepComponent step='Step 1 of 4' stepHeading='Select Project Affiliation'/>
+          </Grid>
           <AffiliationQuestionSection
             value={value}
             handleChange={handleChange}