Bit of styling and propTypes

src/courseware/sequence/Sequence.jsx

@@ -94,6 +94,7 @@ function Sequence({
       <div className="container-fluid">
         <AlertList topic="sequence" className="mt-3" />
         <SequenceNavigation
+          className="mb-3"
           onNext={handleNext}
           onNavigate={handleNavigate}
           onPrevious={handlePrevious}
@@ -101,20 +102,21 @@ function Sequence({
           isLocked={isGated}
           showCompletion={showCompletion}
         />
+        {isGated && (
+          <Suspense fallback={<PageLoading
+            srMessage={intl.formatMessage(messages['learn.loading.content.lock'])}
+          />}
+          >
+            <ContentLock
+              courseUsageKey={courseUsageKey}
+              sectionName={displayName}
+              prereqSectionName={prerequisite.name}
+              prereqId={prerequisite.id}
+            />
+          </Suspense>
+        )}
       </div>
-      {isGated ? (
-        <Suspense fallback={<PageLoading
-          srMessage={intl.formatMessage(messages['learn.loading.content.lock'])}
-        />}
-        >
-          <ContentLock
-            courseUsageKey={courseUsageKey}
-            sectionName={displayName}
-            prereqSectionName={prerequisite.name}
-            prereqId={prerequisite.id}
-          />
-        </Suspense>
-      ) : (
+      {!isGated && (
         <Unit key={activeUnitId} {...activeUnit} />
       )}
     </div>

src/courseware/sequence/SequenceNavigation.jsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Button } from '@edx/paragon';
+import classNames from 'classnames';
+
 import UnitButton from './UnitButton';
 
 export default function SequenceNavigation({
@@ -10,6 +12,7 @@ export default function SequenceNavigation({
   units,
   isLocked,
   showCompletion,
+  className,
 }) {
   const unitButtons = units.map((unit, index) => (
     <UnitButton
@@ -21,7 +24,7 @@ export default function SequenceNavigation({
   ));
 
   return (
-    <nav className="flex-grow-0 d-flex w-100 btn-group">
+    <nav className={classNames('flex-grow-0 d-flex w-100 btn-group', className)}>
       <Button className="btn-outline-primary" onClick={onPrevious}>
         Previous
       </Button>
@@ -36,13 +39,18 @@ export default function SequenceNavigation({
 }
 
 SequenceNavigation.propTypes = {
+  className: PropTypes.string,
   onNext: PropTypes.func.isRequired,
   onPrevious: PropTypes.func.isRequired,
   onNavigate: PropTypes.func.isRequired,
   units: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
-    complete: PropTypes.bool.isRequired,
+    complete: PropTypes.bool,
   })).isRequired,
   isLocked: PropTypes.bool.isRequired,
   showCompletion: PropTypes.bool.isRequired,
 };
+
+SequenceNavigation.defaultProps = {
+  className: null,
+};

src/courseware/sequence/UnitButton.jsx

@@ -31,9 +31,14 @@ export default function UnitButton({
 }
 
 UnitButton.propTypes = {
-  isActive: PropTypes.bool.isRequired,
-  isComplete: PropTypes.bool.isRequired,
+  isActive: PropTypes.bool,
+  isComplete: PropTypes.bool,
   onClick: PropTypes.func.isRequired,
   pageTitle: PropTypes.string.isRequired,
   type: PropTypes.string.isRequired,
 };
+
+UnitButton.defaultProps = {
+  isActive: false,
+  isComplete: false,
+};