setup for cn/htf/snd flags

src/Components/BureauPage/BureauResultsCard/BureauResultsCard.jsx

@@ -11,7 +11,7 @@ import DefinitionList from 'Components/DefinitionList';
 import InteractiveElement from 'Components/InteractiveElement';
 import { getResult, getBidStatsToUse, getDifferentials, renderBidCountMobile } from 'Components/ResultsCard/ResultsCard';
 import LanguageList from 'Components/LanguageList';
-import { Handshake } from 'Components/Ribbon';
+import { Handshake, CriticalNeed, HardToFill, ServiceNeedDifferential } from 'Components/Ribbon';
 import { getPostName, getBidStatisticsObject, propOrDefault, shortenString } from 'utilities';
 import {
   NO_BUREAU, NO_GRADE, NO_POSITION_NUMBER,
@@ -86,7 +86,16 @@ class BureauResultsCard extends Component {
             <div>{postShort}</div>
             <div className="shortlist-icon">{shortListIndicator}</div>
             {
-              get(stats, 'has_handshake_offered', false) && <Handshake isWide className="ribbon-results-card" />
+              get(stats, 'has_handshake_offered', false) && <Handshake isWide cutSide="both" className="ribbon-results-card" />
+            }
+            { // for demoing purposes only
+              get(result, 'isCriticalNeed', true) && <CriticalNeed isWide cutSide="both" className="ribbon-results-card" />
+            }
+            {
+              get(result, 'isDifficultToStaff', false) && <HardToFill isWide cutSide="both" className="ribbon-results-card" />
+            }
+            {
+              get(result, 'isServiceNeedDifferential', false) && <ServiceNeedDifferential isWide cutSide="both" className="ribbon-results-card" />
             }
             {renderBidCountMobile(stats)}
           </Row>

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';
@@ -18,7 +19,7 @@ import Favorite from '../../Containers/Favorite';
 import CompareCheck from '../CompareCheck';
 import BidListButton from '../../Containers/BidListButton';
 import PermissionsWrapper from '../../Containers/PermissionsWrapper';
-import { Handshake } from '../Ribbon';
+import { Handshake, CriticalNeed, HardToFill, ServiceNeedDifferential } from '../Ribbon';
 import MediaQuery from '../MediaQuery';
 
 export const renderBidCounts = (compareArray, emptyArray) => (
@@ -310,8 +311,37 @@ class CompareList extends Component {
                             {matches => (
                               <td key={shortId.generate()} className="compare-ribbon">
                                 {
-                                  get(c, 'bid_statistics[0].has_handshake_offered', false)
-                                  && <Handshake isWide={matches} showText={matches} />
+                                  get(c, 'bid_statistics[0].has_handshake_offered', false) &&
+                                  <Handshake
+                                    shortName
+                                    isWide={matches}
+                                    showText={matches}
+                                  />
+                                }
+                                {
+                                  <StaticDevContent>
+                                    <CriticalNeed
+                                      shortName
+                                      isWide={matches}
+                                      showText={matches}
+                                    />
+                                  </StaticDevContent>
+                                }
+                                {
+                                  get(c, 'isDifficultToStaff', false) &&
+                                  <HardToFill
+                                    shortName
+                                    isWide={matches}
+                                    showText={matches}
+                                  />
+                                }
+                                {
+                                  get(c, 'isServiceNeedDifferential', false) &&
+                                  <ServiceNeedDifferential
+                                    shortName
+                                    isWide={matches}
+                                    showText={matches}
+                                  />
                                 }
                               </td>
                             )}

src/Components/PositionDetailsItem/PositionDetailsItem.jsx

@@ -3,14 +3,15 @@ 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';
 import PositionDetailsDescription from './PositionDetailsDescription';
 import PositionDetailsContact from './PositionDetailsContact';
 import ServiceNeededToggle from './ServiceNeededToggle';
 import GlossaryTermTrigger from '../GlossaryTermTrigger';
-import { Featured, Handshake } from '../Ribbon';
+import { Featured, Handshake, CriticalNeed, HardToFill, ServiceNeedDifferential } from '../Ribbon';
 import {
   formatDate,
   propOrDefault,
@@ -38,6 +39,21 @@ export const renderHandshake = stats => (
   get(stats, 'has_handshake_offered', false) && <Handshake cutSide="both" className="ribbon-position-details" />
 );
 
+export const renderCriticalNeed = () => (
+  <StaticDevContent>
+    <CriticalNeed cutSide="both" className="ribbon-position-details" />
+  </StaticDevContent>
+);
+
+export const renderHardToFill = details => (
+  get(details, 'isDifficultToStaff', false) && <HardToFill cutSide="both" className="ribbon-position-details" />
+);
+
+export const renderServiceNeedDifferential = details => (
+  get(details, 'isServiceNeedDifferential', false) && <ServiceNeedDifferential cutSide="both" className="ribbon-position-details" />
+);
+
+
 const PositionDetailsItem = (props) => {
   const {
     details,
@@ -90,6 +106,9 @@ const PositionDetailsItem = (props) => {
     <div className="usa-grid-full padded-main-content position-details-outer-container">
       <div className="handshake-offset-container">
         {renderHandshake(stats, position)}
+        {renderCriticalNeed()}
+        {renderHardToFill(details)}
+        {renderServiceNeedDifferential(details)}
         {
           isHighlighted && <Featured cutSide="both" className="ribbon-position-details" />
         }

src/Components/PositionDetailsItem/__snapshots__/PositionDetailsItem.test.jsx.snap

@@ -6,7 +6,15 @@ exports[`PositionDetailsItem matches snapshot 1`] = `
 >
   <div
     className="handshake-offset-container"
-  />
+  >
+    <Connect(StaticDevContent)>
+      <CriticalNeed
+        className="ribbon-position-details"
+        cutSide="both"
+        shortName={false}
+      />
+    </Connect(StaticDevContent)>
+  </div>
   <div
     className="usa-grid-full position-details-description-container positions-details-about-position"
   >
@@ -376,7 +384,15 @@ exports[`PositionDetailsItem matches snapshot when there is an obc id 1`] = `
 >
   <div
     className="handshake-offset-container"
-  />
+  >
+    <Connect(StaticDevContent)>
+      <CriticalNeed
+        className="ribbon-position-details"
+        cutSide="both"
+        shortName={false}
+      />
+    </Connect(StaticDevContent)>
+  </div>
   <div
     className="usa-grid-full position-details-description-container positions-details-about-position"
   >
@@ -748,7 +764,15 @@ exports[`PositionDetailsItem matches snapshot when various data is missing from
 >
   <div
     className="handshake-offset-container"
-  />
+  >
+    <Connect(StaticDevContent)>
+      <CriticalNeed
+        className="ribbon-position-details"
+        cutSide="both"
+        shortName={false}
+      />
+    </Connect(StaticDevContent)>
+  </div>
   <div
     className="usa-grid-full position-details-description-container positions-details-about-position"
   >

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';
@@ -14,7 +15,7 @@ import CompareCheck from '../CompareCheck/CompareCheck';
 import LanguageList from '../LanguageList';
 import BidCount from '../BidCount';
 import BoxShadow from '../BoxShadow';
-import { Featured, Handshake } from '../Ribbon';
+import { Featured, Handshake, CriticalNeed, HardToFill, ServiceNeedDifferential } from '../Ribbon';
 import InBidListContainer from './InBidList';
 import HoverDescription from './HoverDescription';
 import OBCUrl from '../OBCUrl';
@@ -302,7 +303,18 @@ class ResultsCard extends Component {
                 <Column columns="2">
                   <div className="ribbon-container">
                     {
-                      get(stats, 'has_handshake_offered', false) && <Handshake isWide className="ribbon-results-card" />
+                      get(stats, 'has_handshake_offered', false) && <Handshake className="ribbon-results-card" />
+                    }
+                    {
+                      <StaticDevContent>
+                        <CriticalNeed className="ribbon-results-card" />
+                      </StaticDevContent>
+                    }
+                    {
+                      get(result, 'isDifficultToStaff', false) && <HardToFill className="ribbon-results-card" />
+                    }
+                    {
+                      get(result, 'isServiceNeedDifferential', false) && <ServiceNeedDifferential className="ribbon-results-card" />
                     }
                     {
                       get(result, 'position.is_highlighted') && <Featured isWide className="ribbon-results-card" />

src/Components/ResultsCondensedCardTop/ResultsCondensedCardTop.jsx

@@ -1,7 +1,8 @@
 import PropTypes from 'prop-types';
 import { get } from 'lodash';
 import { Link } from 'react-router-dom';
-import { Featured, Handshake } from '../Ribbon';
+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';
 import { getPostName, getBidStatisticsObject } from '../../utilities';
@@ -27,6 +28,8 @@ const ResultsCondensedCardTop = ({
   const p = position.position || position;
   const stats = getBidStatisticsObject(position.bid_statistics);
   const hasHandshake = get(stats, 'has_handshake_offered', false);
+  const isDifficultToStaff = get(position, 'isDifficultToStaff', false);
+  const isServiceNeedDifferential = get(position, 'isServiceNeedDifferential', false);
 
   const title = get(position, 'position.title', '');
 
@@ -60,12 +63,23 @@ const ResultsCondensedCardTop = ({
             }
           </span></span>
         </div>
-        <div className="ribbon-container">
+        <div className="ribbon-container-condensed">
           {
-            hasHandshake && <Handshake className="ribbon-condensed-card" />
+            hasHandshake && <Handshake showText={false} className="ribbon-condensed-card" />
           }
           {
-            get(position, 'position.is_highlighted') && <Featured className="ribbon-results-card" />
+            <StaticDevContent>
+              <CriticalNeed showText={false} className="ribbon-condensed-card" />
+            </StaticDevContent>
+          }
+          {
+            isDifficultToStaff && <HardToFill showText={false} className="ribbon-condensed-card" />
+          }
+          {
+            isServiceNeedDifferential && <ServiceNeedDifferential showText={false} className="ribbon-condensed-card" />
+          }
+          {
+            get(position, 'position.is_highlighted') && <Featured showText={false} className="ribbon-condensed-card" />
           }
         </div>
       </div>

src/Components/ResultsCondensedCardTop/__snapshots__/ResultsCondensedCardTop.test.jsx.snap

@@ -40,8 +40,16 @@ exports[`ResultsCondensedCardTopComponent matches snapshot 1`] = `
         </span>
       </div>
       <div
-        className="ribbon-container"
-      />
+        className="ribbon-container-condensed"
+      >
+        <Connect(StaticDevContent)>
+          <CriticalNeed
+            className="ribbon-condensed-card"
+            shortName={false}
+            showText={false}
+          />
+        </Connect(StaticDevContent)>
+      </div>
     </div>
   </div>
 </Link>
@@ -87,8 +95,16 @@ exports[`ResultsCondensedCardTopComponent matches snapshot when type is serviceN
         </span>
       </div>
       <div
-        className="ribbon-container"
-      />
+        className="ribbon-container-condensed"
+      >
+        <Connect(StaticDevContent)>
+          <CriticalNeed
+            className="ribbon-condensed-card"
+            shortName={false}
+            showText={false}
+          />
+        </Connect(StaticDevContent)>
+      </div>
     </div>
   </div>
 </Link>

src/Components/Ribbon/CriticalNeed/CriticalNeed.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import Ribbon from '../Ribbon';
+
+const CriticalNeed = ({ shortName, ...props }) => {
+  const text = shortName ? 'CN' : 'Critical need';
+  return (
+    <Ribbon icon="exclamation" text={text} type="cn" {...props} />
+  );
+};
+
+CriticalNeed.propTypes = {
+  shortName: PropTypes.bool,
+};
+
+CriticalNeed.defaultProps = {
+  shortName: false,
+};
+
+export default CriticalNeed;

src/Components/Ribbon/CriticalNeed/CriticalNeed.test.jsx

@@ -0,0 +1,10 @@
+import { shallow } from 'enzyme';
+import CriticalNeed from './CriticalNeed';
+
+describe('CriticalNeedComponent', () => {
+  it('is defined', () => {
+    const wrapper = shallow(<CriticalNeed />);
+
+    expect(wrapper).toBeDefined();
+  });
+});

src/Components/Ribbon/CriticalNeed/index.js

@@ -0,0 +1 @@
+export { default } from './CriticalNeed';

src/Components/Ribbon/Handshake/Handshake.jsx

@@ -1,7 +1,19 @@
+import PropTypes from 'prop-types';
 import Ribbon from '../Ribbon';
 
-const Handshake = ({ ...props }) => (
-  <Ribbon icon="handshake-o" text="Handshake" type="primary" {...props} />
-);
+const Handshake = ({ shortName, ...props }) => {
+  const text = shortName ? 'HS' : 'Handshake';
+  return (
+    <Ribbon icon="handshake-o" text={text} type="primary" {...props} />
+  );
+};
+
+Handshake.propTypes = {
+  shortName: PropTypes.bool,
+};
+
+Handshake.defaultProps = {
+  shortName: false,
+};
 
 export default Handshake;

src/Components/Ribbon/HardToFill/HardToFill.jsx

@@ -0,0 +1,19 @@
+import PropTypes from 'prop-types';
+import Ribbon from '../Ribbon';
+
+const HardToFill = ({ shortName, ...props }) => {
+  const text = shortName ? 'HTF' : 'Hard to fill';
+  return (
+    <Ribbon icon="bolt" text={text} type="htf" {...props} />
+  );
+};
+
+HardToFill.propTypes = {
+  shortName: PropTypes.bool,
+};
+
+HardToFill.defaultProps = {
+  shortName: false,
+};
+
+export default HardToFill;

src/Components/Ribbon/HardToFill/HardToFill.test.jsx

@@ -0,0 +1,10 @@
+import { shallow } from 'enzyme';
+import HardToFill from './HardToFill';
+
+describe('HardToFillComponent', () => {
+  it('is defined', () => {
+    const wrapper = shallow(<HardToFill />);
+
+    expect(wrapper).toBeDefined();
+  });
+});

src/Components/Ribbon/HardToFill/index.js

@@ -0,0 +1 @@
+export { default } from './HardToFill';