setup for cn/htf/snd flags

src/Components/BureauPage/BureauResultsCard/BureauResultsCard.jsx

@@ -13,6 +13,7 @@ import { getResult, getBidStatsToUse, getDifferentials, renderBidCountMobile } f
 import LanguageList from 'Components/LanguageList';
 import { Handshake, CriticalNeed, HardToFill, ServiceNeedDifferential } from 'Components/Ribbon';
 import { getPostName, getBidStatisticsObject, propOrDefault, shortenString } from 'utilities';
+import StaticDevContent from 'Components/StaticDevContent';
 import {
   NO_BUREAU, NO_GRADE, NO_POSITION_NUMBER,
   NO_POST, NO_SKILL, NO_TOUR_OF_DUTY, NO_UPDATE_DATE, NO_DATE, NO_USER_LISTED,
@@ -88,8 +89,10 @@ class BureauResultsCard extends Component {
             {
               get(stats, 'has_handshake_offered', false) && <Handshake isWide cutSide="both" className="ribbon-results-card" />
             }
-            { // need to verify if this is in the payload
-              <CriticalNeed isWide cutSide="both" className="ribbon-results-card" />
+            {
+              <StaticDevContent>
+                <CriticalNeed isWide cutSide="both" className="ribbon-results-card" />
+              </StaticDevContent>
             }
             {
               get(result, 'isDifficultToStaff', false) && <HardToFill isWide cutSide="both" className="ribbon-results-card" />

src/Components/CompareList/CompareList.jsx

@@ -10,6 +10,7 @@ import { BID_LIST, COMPARE_LIST } from 'Constants/PropTypes';
 import COMPARE_LIMIT from 'Constants/Compare';
 import { NO_POST, NO_TOUR_OF_DUTY, NO_BUREAU, NO_SKILL, NO_DATE, NO_GRADE } from 'Constants/SystemMessages';
 import { propOrDefault, formatDate, getPostName, getAccessiblePositionNumber } from 'utilities';
+import StaticDevContent from 'Components/StaticDevContent';
 import BackButton from '../BackButton';
 import Spinner from '../Spinner';
 import LanguageList from '../LanguageList/LanguageList';
@@ -317,12 +318,14 @@ class CompareList extends Component {
                                     showText={matches}
                                   />
                                 }
-                                { // need to verify if this is in the payload
-                                  <CriticalNeed
-                                    shortName
-                                    isWide={matches}
-                                    showText={matches}
-                                  />
+                                {
+                                  <StaticDevContent>
+                                    <CriticalNeed
+                                      shortName
+                                      isWide={matches}
+                                      showText={matches}
+                                    />
+                                  </StaticDevContent>
                                 }
                                 {
                                   get(c, 'isDifficultToStaff', false) &&

src/Components/PositionDetailsItem/PositionDetailsItem.jsx

@@ -3,6 +3,7 @@ import { get } from 'lodash';
 import Differentials from 'Components/Differentials';
 import BidCount from 'Components/BidCount';
 import PositionSkillCodeList from 'Components/PositionSkillCodeList';
+import StaticDevContent from 'Components/StaticDevContent';
 import { COMMON_PROPERTIES } from '../../Constants/EndpointParams';
 import LanguageList from '../../Components/LanguageList/LanguageList';
 import CondensedCardDataPoint from '../CondensedCardData/CondensedCardDataPoint';
@@ -39,8 +40,9 @@ export const renderHandshake = stats => (
 );
 
 export const renderCriticalNeed = () => (
-  // need to verify if this is in the payload
-  <CriticalNeed cutSide="both" className="ribbon-position-details" />
+  <StaticDevContent>
+    <CriticalNeed cutSide="both" className="ribbon-position-details" />
+  </StaticDevContent>
 );
 
 export const renderHardToFill = details => (

src/Components/ResultsCard/ResultsCard.jsx

@@ -5,6 +5,7 @@ import { get, isNull, isNumber } from 'lodash';
 import { Flag } from 'flag';
 import Differentials from 'Components/Differentials';
 import PositionSkillCodeList from 'Components/PositionSkillCodeList';
+import StaticDevContent from 'Components/StaticDevContent';
 import { COMMON_PROPERTIES } from '../../Constants/EndpointParams';
 import { Row, Column } from '../Layout';
 import DefinitionList from '../DefinitionList';
@@ -300,12 +301,14 @@ class ResultsCard extends Component {
                   </Column>
                 }
                 <Column columns="2">
-                  <div className="ribbon-container-results">
+                  <div className="ribbon-container">
                     {
                       get(stats, 'has_handshake_offered', false) && <Handshake className="ribbon-results-card" />
                     }
-                    { // need to verify if this is in the payload
-                      <CriticalNeed className="ribbon-results-card" />
+                    {
+                      <StaticDevContent>
+                        <CriticalNeed className="ribbon-results-card" />
+                      </StaticDevContent>
                     }
                     {
                       get(result, 'isDifficultToStaff', false) && <HardToFill className="ribbon-results-card" />

src/Components/ResultsCondensedCardTop/ResultsCondensedCardTop.jsx

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { Link } from 'react-router-dom';
+import StaticDevContent from 'Components/StaticDevContent';
 import { Featured, Handshake, CriticalNeed, HardToFill, ServiceNeedDifferential } from '../Ribbon';
 import { POSITION_DETAILS, HOME_PAGE_CARD_TYPE } from '../../Constants/PropTypes';
 import { NO_POST } from '../../Constants/SystemMessages';
@@ -27,7 +28,6 @@ const ResultsCondensedCardTop = ({
   const p = position.position || position;
   const stats = getBidStatisticsObject(position.bid_statistics);
   const hasHandshake = get(stats, 'has_handshake_offered', false);
-  // const isCriticalNeed = ???
   const isDifficultToStaff = get(position, 'isDifficultToStaff', false);
   const isServiceNeedDifferential = get(position, 'isServiceNeedDifferential', false);
 
@@ -67,8 +67,10 @@ const ResultsCondensedCardTop = ({
           {
             hasHandshake && <Handshake showText={false} className="ribbon-condensed-card" />
           }
-          { // need to verify if this is in the payload
-            <CriticalNeed showText={false} className="ribbon-condensed-card" />
+          {
+            <StaticDevContent>
+              <CriticalNeed showText={false} className="ribbon-condensed-card" />
+            </StaticDevContent>
           }
           {
             isDifficultToStaff && <HardToFill showText={false} className="ribbon-condensed-card" />
@@ -77,7 +79,7 @@ const ResultsCondensedCardTop = ({
             isServiceNeedDifferential && <ServiceNeedDifferential showText={false} className="ribbon-condensed-card" />
           }
           {
-            get(position, 'position.is_highlighted') && <Featured className="ribbon-results-card" />
+            get(position, 'position.is_highlighted') && <Featured showText={false} className="ribbon-condensed-card" />
           }
         </div>
       </div>

src/Components/Ribbon/ServiceNeedDifferential/ServiceNeedDifferential.jsx

@@ -1,22 +1,18 @@
 import PropTypes from 'prop-types';
 import Ribbon from '../Ribbon';
 
-const ServiceNeedDifferential = ({ condensed, compare, shortName, ...props }) => {
+const ServiceNeedDifferential = ({ shortName, ...props }) => {
   const text = shortName ? 'SND' : 'Service need differential';
   return (
     <Ribbon icon="line-chart" text={text} type="snd" {...props} />
   );
 };
 
 ServiceNeedDifferential.propTypes = {
-  condensed: PropTypes.bool,
-  compare: PropTypes.bool,
   shortName: PropTypes.bool,
 };
 
 ServiceNeedDifferential.defaultProps = {
-  condensed: false,
-  compare: false,
   shortName: false,
 };
 

src/sass/_condensedCard.scss

@@ -10,7 +10,7 @@ $condensed-card-data-padding: 15px 20px 9px;
   font-size: 16px;
   line-height: 19px;
   margin-bottom: $condensed-card-margin-bottom;
-  width: 360px;
+  width: 371px;
 
   .bid-count-container {
     display: flex;

src/sass/_ribbon.scss

@@ -39,15 +39,15 @@ $ribbon-shadow-color: rgba(112, 112, 112, .5);
 }
 
 .ribbon-cn {
-  background-color: $cn-flag;
+  background-color: $ribbon-cn;
 
   .fa {
     margin-right: .5em;
   }
 }
 
 .ribbon-htf {
-  background-color: $htf-flag;
+  background-color: $ribbon-htf;
 
   .fa {
     margin-right: .4em;
@@ -92,11 +92,6 @@ $ribbon-shadow-color: rgba(112, 112, 112, .5);
 .ribbon-container {
   position: absolute;
   right: -1px;
-}
-
-.ribbon-container-results {
-  position: absolute;
-  right: -1px;
   top: calc(100% - 220px);
   width: 170px;
 

src/sass/_variables.scss

@@ -118,8 +118,10 @@ $tm-gray: #AAAAAA;
 $tm-navy: #215493;
 $tm-navy-dark: $blue-primary-darkest;
 
-$cn-flag: #EDA176 ;
-$htf-flag: #89C1F2;
+//**
+//* Ribbon Colors
+$ribbon-cn: #EDA176 ;
+$ribbon-htf: #89C1F2;
 
 //**
 //* DOS Colors