mozilla / blurts-server / 91d6cb3f-fc59-4d91-b83e-160bcd685142

91d6cb3f-fc59-4d91-b83e-160bcd685142

push

circleci

GitHub 
Merge pull request #2917 from mozilla/MNTOR-1343-breach-page-styling

282 of 1595 branches covered (17.68%)

Branch coverage included in aggregate %.

96 of 96 new or added lines in 10 files covered. (100.0%)

959 of 4309 relevant lines covered (22.26%)

3.7 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

0.0
/src/views/partials/all-breaches.js
1 
/* This Source Code Form is subject to the terms of the Mozilla Public
2 
 * License, v. 2.0. If a copy of the MPL was not distributed with this
3 
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
4 









5



import { getLocale, getMessage } from '../../utils/fluent.js'










6



import { getBreachLogo } from '../../utils/breach-logo.js'










7












8



function makeBreachCard (breach, logos) {











9



  return `




×







10



  <a href="/breach-details/${breach.Name}" class="breach-card">










11



    <h3>










12



      <span class="logo-wrapper">${getBreachLogo(breach, logos)}</span>










13



      <span>${breach.Title}</span>










14



    </h3>










15



    <div class="breach-main">










16



      <dl>










17



        <div>










18



          <dt>${getMessage('breach-added-label')}</dt>










19



          <dd>${new Date(breach.AddedDate).toLocaleString(getLocale(), { year: 'numeric', month: 'long', day: 'numeric' })}</dd>










20



        </div>










21



        <div>










22



          <dt>${getMessage('exposed-data')}</dt>










23



          <dd>











24



            ${formatList(breach.DataClasses.map(a => getMessage(a)))}




×







25



          </dd>










26



        </div>










27



      </dl>










28



      <span class="breach-detail-link">${getMessage('more-about-this-breach')}</span>










29



    </div>










30



  </a>










31



  `










32



}










33













34



export const allBreaches = data => `




×







35



<div id="breaches-loader" class="ab-bg breaches-loader"></div>










36



<main>










37



  <div class="all-breaches-front-matter">










38



    <header class="all-breaches-header">










39



      <div>










40



        <h1>${getMessage('all-breaches-headline-2')}</h1>










41



        <p>${getMessage('all-breaches-lead')}</p>










42



      </div>










43



    </header>










44



    <form class="all-breaches-filter" autocomplete="off">










45



      <label for="breach-search">










46



        <svg










47



          role="img"










48



          aria-label="${getMessage('search-breaches')}"










49



          class="search-icon"










50



          xmlns="http://www.w3.org/2000/svg"










51



          width="16"










52



          height="16"










53



          viewBox="0 0 16 16"










54



        >










55



          <title>${getMessage('search-breaches')}</title>










56



          <path fill="#5b5b66" d="M15.707 14.293l-4.822-4.822a6.019 6.019 0 1 0-1.414 1.414l4.822 4.822a1 1 0 0 0 1.414-1.414zM6 10a4 4 0 1 1 4-4 4 4 0 0 1-4 4z"></path>










57



        </svg>










58



      </label>










59



      <input id="breach-search" type="search" autofocus></input>










60



    </form>










61



  </div>










62



  <section>










63



    <div>










64



      <div class="card-container">










65



        ${data.breaches











66



          .filter(a => !a.IsSensitive)




×








67



          .sort((a, b) => new Date(a.AddedDate).getTime() < new Date(b.AddedDate).getTime() ? 1 : -1)





×








68



          .map(breach => makeBreachCard(breach, data.breachLogos))




×







69



          .join('')}










70



      </div>










71



    </div>










72



    <div class="row flx-col">










73



      <!-- TODO span id="no-results-blurb" class="no-results-blurb">${getMessage('no-results-blurb')}</span -->










74



    </div>










75



  </section>










76



</main>










77



`










78












79



function formatList (list) {











80



  if (typeof Intl.ListFormat === 'undefined') {





×








81



    return list.join(', ')




×







82



  }










83













84



  return (new Intl.ListFormat(getLocale(), { type: 'unit', style: 'short' })).format(list)




×







85



}
























    

  • 

    •