🏳️ Remove Flag from Undefined Words

.eleventy.js

@@ -1,6 +1,8 @@
 const definitionPermalink = require('./11ty/helpers/definitionPermalink');
 const renderDefinitionContentNextEntries = require('./11ty/shortcodes/renderDefinitionContentNextEntries');
 const findExistingDefinition = require('./11ty/filters/helpers/findExistingDefinition');
+const tableOfContentFlag = require('./11ty/shortcodes/tableOfContentFlag');
+
 const pluginRss = require('@11ty/eleventy-plugin-rss');
 
 module.exports = function(config) {
@@ -45,6 +47,7 @@ module.exports = function(config) {
 
   config.addPlugin(pluginRss);
 
+  config.addShortcode('tableOfContentFlag', tableOfContentFlag);
   config.addShortcode('definitionFlag', (flag) => {
     const cleanText = new Map([
       [

11ty/_includes/components/table-of-content-item.njk

@@ -1,16 +1,6 @@
 <li class="toc__list-item">
   {{ definition.data.title | linkIfExistsInCollection(collections.definedWords) | safe  }}
-  {%- if
-    definition.data.flag and
-    definition.data.flag.text and
-    (definition.data.flag.level == 'avoid') -%}
-    <span class="flag flag--red">{{ definition.data.flag.text }}</span>
-  {%- elseif
-    definition.data.flag and
-    definition.data.flag.text and
-    (definition.data.flag.level == 'warning') -%}
-    <span class="flag flag--yellow">{{ definition.data.flag.text }}</span>
-  {% endif %}
+  {% tableOfContentFlag definition.data %}
   {%- if definition.data.sub_terms -%}
     <ul class="sub-terms" role="list" aria-label="{{definition.data.title}}">
       {% for term in definition.data.sub_terms %}

11ty/shortcodes/__tests__/tableOfContentFlag.spec.js

@@ -0,0 +1,94 @@
+import test from 'ava';
+
+import tableOfContentFlag from '../tableOfContentFlag';
+
+const definedWordWithAvoidFlag = {
+  title: '👌 [ok-hand]',
+  slug: 'ok-hand',
+  flag: { text: 'Racist Symbol', level: 'avoid' },
+  defined: true
+};
+
+const definedWordWithAvoidFlagNoText = {
+  title: 'dude',
+  slug: 'dude',
+  defined: true,
+  flag: { level: 'avoid' }
+};
+
+const definedWordWithWarningFlag = {
+  title: 'Ableism',
+  slug: 'ableism',
+  defined: true,
+  speech: 'noun',
+  flag: { level: 'warning', text: 'content warning' }
+};
+
+const definedWordWithToolFlag = {
+  title: 'Gaslighting',
+  slug: 'gaslighting',
+  defined: true,
+  speech: 'noun',
+  flag: { level: 'tool', text: 'Tool of Oppression' }
+};
+
+const definedWordWithAlternativeFlag = {
+  title: 'overrepresented majority (ORM)',
+  slug: 'overrepresented-majority',
+  defined: true,
+  speech: 'noun',
+  flag: {
+    level: 'better-alternative',
+    ['alt-for']: 'underrepresented minority (URM)'
+  }
+};
+
+const definedWordWithoutFlag = {
+  title: 'Transfeminine',
+  slug: 'transfeminine',
+  speech: 'adj',
+  defined: true,
+  excerpt:
+    'describes a [transgender](/definitions/transgender) person for whom femininity forms part of their gender.'
+};
+
+const undefinedWordWithFlag = {
+  title: 'Psychopath',
+  slug: 'psychopath',
+  flag: { text: 'Ableist Slur', level: 'avoid' },
+  defined: false
+};
+
+test('Does not render a flag if none is given', (t) => {
+  t.is(tableOfContentFlag(definedWordWithoutFlag), '');
+});
+
+test('Does not render a flag if the word is undefined', (t) => {
+  t.is(tableOfContentFlag(undefinedWordWithFlag), '');
+});
+
+test('Does not render a flag if the level is `tool`', (t) => {
+  t.is(tableOfContentFlag(definedWordWithToolFlag), '');
+});
+
+test('Does not render a flag if the level is `better-alternative`', (t) => {
+  t.is(tableOfContentFlag(definedWordWithAlternativeFlag), '');
+});
+
+test('Does not render a flag if the level is `avoid` but no text is given', (t) => {
+  t.is(tableOfContentFlag(definedWordWithAvoidFlagNoText), '');
+});
+
+test('Does render an avoid flag if one is given', (t) => {
+  t.is(
+    tableOfContentFlag(definedWordWithAvoidFlag),
+    `<span class="flag flag--red">${definedWordWithAvoidFlag.flag.text}</span>`
+  );
+});
+
+test('Does render a warning flag if one is given', (t) => {
+  t.is(
+    tableOfContentFlag(definedWordWithWarningFlag),
+    `<span class="flag flag--yellow">${definedWordWithWarningFlag.flag.text}</span>`
+  );
+});

11ty/shortcodes/tableOfContentFlag.js

@@ -0,0 +1,24 @@
+function renderNoFlag(data) {
+  const noFlagLevels = ['tool', 'better-alternative'];
+  if (
+    !data.defined ||
+    !data.flag ||
+    (data.flag && !data.flag.text) ||
+    (data.flag && noFlagLevels.includes(data.flag.level))
+  ) {
+    return true;
+  }
+
+  return false;
+}
+
+module.exports = function(definitionData) {
+  if (renderNoFlag(definitionData)) return '';
+
+  const modifier = new Map([
+    ['warning', 'yellow'],
+    ['avoid', 'red']
+  ]).get(definitionData.flag.level);
+
+  return `<span class="flag flag--${modifier}">${definitionData.flag.text}</span>`;
+};