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

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

Build Type

push

circleci

Committed by GitHub

Commit Message

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

Run Details

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/utils/breach-logo.js

/* This Source Code Form is subject to the terms of the Mozilla Public
 * License, v. 2.0. If a copy of the MPL was not distributed with this
 * file, You can obtain one at http://mozilla.org/MPL/2.0/. */

/**
 * @param {object} breach
 * @param {Map<string, string>} logos Map of URLs to logos indexed by the domain name of the respective company
 * @returns {string} HTML for a breach logo (either an `img`, or a `span.breach-logo` containing the breached company's first letter)
 */
export function getBreachLogo (breach, logos) {
  const logo = logos.has(breach.Domain)
    ? `<img src='${logos.get(breach.Domain)}' alt='' loading="lazy" class='breach-logo' height='32' />`
    : `<span role="img" aria-hidden='true' class='breach-logo' style='background-color: var(${getColorForName(breach.Name)});'>${breach.Name.substring(0, 1)}</span>`

  return logo
}

/**
 * @param {string} name
 * @returns string CSS variable for a string-specific color
 */
function getColorForName (name) {
  const logoColors = [
    '--blue-5',
    '--purple-5',
    '--green-05',
    '--violet-5',
    '--orange-5',
    '--yellow-5',
    '--red-5',
    '--pink-5'
  ]

  const charValue = name
    .split('')
    .map(letter => letter.codePointAt(0))
    .reduce((sum, codePoint) => sum + codePoint)

  return logoColors[charValue % logoColors.length]
}

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	/**
6	* @param {object} breach
7	* @param {Map<string, string>} logos Map of URLs to logos indexed by the domain name of the respective company
8	* @returns {string} HTML for a breach logo (either an `img`, or a `span.breach-logo` containing the breached company's first letter)
9	*/
10	export function getBreachLogo (breach, logos) {
11	const logo = logos.has(breach.Domain)	×
12	? `<img src='${logos.get(breach.Domain)}' alt='' loading="lazy" class='breach-logo' height='32' />`
13	: `<span role="img" aria-hidden='true' class='breach-logo' style='background-color: var(${getColorForName(breach.Name)});'>${breach.Name.substring(0, 1)}</span>`
14
15	return logo	×
16	}
17
18	/**
19	* @param {string} name
20	* @returns string CSS variable for a string-specific color
21	*/
22	function getColorForName (name) {
23	const logoColors = [	×
24	'--blue-5',
25	'--purple-5',
26	'--green-05',
27	'--violet-5',
28	'--orange-5',
29	'--yellow-5',
30	'--red-5',
31	'--pink-5'
32	]
33
34	const charValue = name	×
35	.split('')
36	.map(letter => letter.codePointAt(0))	×
37	.reduce((sum, codePoint) => sum + codePoint)	×
38
39	return logoColors[charValue % logoColors.length]	×
40	}

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

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

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