From 878b474f32a8edf4c870147ba8c2bc8098ac919e Mon Sep 17 00:00:00 2001
From: Tatiana Mac <github@tatianamac.com>
Date: Sat, 9 May 2020 19:31:20 -0700
Subject: [PATCH] =?UTF-8?q?=E2=9A=A0=EF=B8=8F=20Add=20flag=20design=20for?=
 =?UTF-8?q?=20content=20warning=20(#120)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* ⚠️ Add flag design for content warning

* Fix build error

* Lol fix build error

* Added terms
---
 .eleventy.js                                   |  7 +++++++
 .../components/table-of-content-item.njk       |  5 +++++
 11ty/definitions/ableism.md                    | 15 +++++++++------
 11ty/definitions/ablelist-language.md          |  8 ++++++++
 11ty/definitions/abuse.md                      |  8 ++++++++
 11ty/definitions/alcoholism.md                 |  8 ++++++++
 11ty/definitions/bullying.md                   |  8 ++++++++
 11ty/definitions/childhood-trauma.md           |  8 ++++++++
 11ty/definitions/crazy.md                      |  2 +-
 11ty/definitions/depression.md                 |  8 ++++++++
 11ty/definitions/fatphobia.md                  |  3 +++
 11ty/definitions/food.md                       |  8 ++++++++
 11ty/definitions/maniac.md                     |  2 +-
 11ty/definitions/nudity.md                     |  8 ++++++++
 11ty/definitions/pedophilia.md                 |  8 ++++++++
 11ty/definitions/police-brutality.md           |  8 ++++++++
 11ty/definitions/psych.md                      |  5 ++++-
 11ty/definitions/racism.md                     |  3 +++
 11ty/definitions/racist-language.md            |  8 ++++++++
 11ty/definitions/rape.md                       |  8 ++++++++
 11ty/definitions/self-harm.md                  |  8 ++++++++
 11ty/definitions/sexual-assault.md             |  8 ++++++++
 11ty/definitions/stupid.md                     |  2 +-
 11ty/definitions/suicide.md                    |  8 ++++++++
 11ty/definitions/transmisia.md                 |  8 ++++++++
 11ty/definitions/transphobia.md                |  8 ++++++++
 11ty/definitions/trauma.md                     |  8 ++++++++
 11ty/definitions/weight-gain.md                |  8 ++++++++
 11ty/definitions/weight-loss.md                |  8 ++++++++
 11ty/definitions/white-feminism.md             |  8 ++++++++
 11ty/definitions/xenophoba.md                  |  8 ++++++++
 assets/css/abstracts/_mixins.scss              |  4 ++++
 assets/css/abstracts/_variables.scss           |  6 +++++-
 assets/css/components/_flag.scss               | 18 +++++++++++++++++-
 assets/css/components/_word.scss               | 11 +++++++++--
 assets/css/structures/_definition-content.scss | 13 +++++++++++--
 36 files changed, 256 insertions(+), 16 deletions(-)
 create mode 100644 11ty/definitions/ablelist-language.md
 create mode 100644 11ty/definitions/abuse.md
 create mode 100644 11ty/definitions/alcoholism.md
 create mode 100644 11ty/definitions/bullying.md
 create mode 100644 11ty/definitions/childhood-trauma.md
 create mode 100644 11ty/definitions/depression.md
 create mode 100644 11ty/definitions/food.md
 create mode 100644 11ty/definitions/nudity.md
 create mode 100644 11ty/definitions/pedophilia.md
 create mode 100644 11ty/definitions/police-brutality.md
 create mode 100644 11ty/definitions/racist-language.md
 create mode 100644 11ty/definitions/rape.md
 create mode 100644 11ty/definitions/self-harm.md
 create mode 100644 11ty/definitions/sexual-assault.md
 create mode 100644 11ty/definitions/suicide.md
 create mode 100644 11ty/definitions/transmisia.md
 create mode 100644 11ty/definitions/transphobia.md
 create mode 100644 11ty/definitions/trauma.md
 create mode 100644 11ty/definitions/weight-gain.md
 create mode 100644 11ty/definitions/weight-loss.md
 create mode 100644 11ty/definitions/white-feminism.md
 create mode 100644 11ty/definitions/xenophoba.md

diff --git a/.eleventy.js b/.eleventy.js
index 25f8c61f..6443a5d1 100644
--- a/.eleventy.js
+++ b/.eleventy.js
@@ -60,6 +60,13 @@ module.exports = function(config) {
           class: 'tool',
           text: ''
         }
+      ],
+      [
+        'warning',
+        {
+          class: 'warning',
+          text: 'Content warning'
+        }
       ]
     ]);
 
diff --git a/11ty/_includes/components/table-of-content-item.njk b/11ty/_includes/components/table-of-content-item.njk
index f9136784..7d20b6fb 100644
--- a/11ty/_includes/components/table-of-content-item.njk
+++ b/11ty/_includes/components/table-of-content-item.njk
@@ -5,6 +5,11 @@
     definition.data.flag.text and
     (definition.data.flag.level == 'avoid') -%}
     <span class="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__yellow">{{ definition.data.flag.text }}</span>
   {% endif %}
   {%- if definition.data.sub_terms -%}
     <ul class="sub-terms" role="list" aria-label="{{definition.data.title}}">
diff --git a/11ty/definitions/ableism.md b/11ty/definitions/ableism.md
index 597656ab..f6b12ba3 100644
--- a/11ty/definitions/ableism.md
+++ b/11ty/definitions/ableism.md
@@ -3,6 +3,14 @@ title: Ableism
 slug: ableism
 defined: true
 speech: noun
+flag:
+  level: warning
+  text: content warning
+reading:
+- text: "Ableism 2020: An Updated Definition"
+  href: https://www.talilalewis.com/blog/ableism-2020-an-updated-definition
+- text: "Longmore Lecture: Context, Clarity & Grounding"
+  href: https://www.talilalewis.com/blog/longmore-lecture-context-clarity-grounding
 ---
 
 a system that places value on people’s bodies and minds based on societally constructed ideas of normalcy, intelligence, excellence, and productivity. These constructed ideas are deeply rooted in anti-Blackness, eugenics, colonialism, and capitalism.
@@ -11,9 +19,4 @@ a system that places value on people’s bodies and minds based on societally co
 
 ## Impact
 
-To paraphrase Lewis, ableism "leads to people and society determining who is valuable and worthy based on a person’s appearance and/or their ability to [...] produce, excel, and 'behave.'" You do not have to be disabled to experience ableism, and Disabled people can also reinforce ableism internally (manifesting as harm to themselves) and externally (harm to other disabled people).
-
-## Further reading
-
-- [Longmore Lecture: Context, Clarity & Grounding](https://www.talilalewis.com/blog/longmore-lecture-context-clarity-grounding)
-- [Ableism 2020: An Updated Definition](https://www.talilalewis.com/blog/ableism-2020-an-updated-definition)
+To paraphrase Lewis, ableism "leads to people and society determining who is valuable and worthy based on a person’s appearance and/or their ability to [...] produce, excel, and 'behave.'" You do not have to be disabled to experience ableism, and Disabled people can also reinforce ableism internally (manifesting as harm to themselves) and externally (harm to other disabled people).
\ No newline at end of file
diff --git a/11ty/definitions/ablelist-language.md b/11ty/definitions/ablelist-language.md
new file mode 100644
index 00000000..66cca073
--- /dev/null
+++ b/11ty/definitions/ablelist-language.md
@@ -0,0 +1,8 @@
+---
+title: Ableist language
+slug: ableist-language
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/abuse.md b/11ty/definitions/abuse.md
new file mode 100644
index 00000000..40f323dc
--- /dev/null
+++ b/11ty/definitions/abuse.md
@@ -0,0 +1,8 @@
+---
+title: Abuse
+slug: abuse
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
\ No newline at end of file
diff --git a/11ty/definitions/alcoholism.md b/11ty/definitions/alcoholism.md
new file mode 100644
index 00000000..0e518b64
--- /dev/null
+++ b/11ty/definitions/alcoholism.md
@@ -0,0 +1,8 @@
+---
+title: alcoholism
+slug: alcoholism
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/bullying.md b/11ty/definitions/bullying.md
new file mode 100644
index 00000000..884d3794
--- /dev/null
+++ b/11ty/definitions/bullying.md
@@ -0,0 +1,8 @@
+---
+title: Bullying
+slug: bullying
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/childhood-trauma.md b/11ty/definitions/childhood-trauma.md
new file mode 100644
index 00000000..30c10a6e
--- /dev/null
+++ b/11ty/definitions/childhood-trauma.md
@@ -0,0 +1,8 @@
+---
+title: chilldhood trauma
+slug: childhood-trauma
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
\ No newline at end of file
diff --git a/11ty/definitions/crazy.md b/11ty/definitions/crazy.md
index a6866a83..f1ccec4c 100644
--- a/11ty/definitions/crazy.md
+++ b/11ty/definitions/crazy.md
@@ -2,7 +2,7 @@
 title: crazy
 slug: crazy
 flag:
-  text: 'Ableist Slur'
+  text: 'Ableist language'
   level: avoid
 defined: true
 speech: noun
diff --git a/11ty/definitions/depression.md b/11ty/definitions/depression.md
new file mode 100644
index 00000000..95d5c8a0
--- /dev/null
+++ b/11ty/definitions/depression.md
@@ -0,0 +1,8 @@
+---
+title: Depression
+slug: depression
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/fatphobia.md b/11ty/definitions/fatphobia.md
index 5c41d135..1da5cfea 100644
--- a/11ty/definitions/fatphobia.md
+++ b/11ty/definitions/fatphobia.md
@@ -4,6 +4,9 @@ slug: fatphobia
 defined: true
 speech: noun
 skip_in_table_of_content: true
+flag:
+  level: warning
+  text: content warning
 reading:
   - text: Sizeism and Fatphobia
     href: https://www.srhweek.ca/providers/people-and-communities/sizeism-and-fatphobia/
diff --git a/11ty/definitions/food.md b/11ty/definitions/food.md
new file mode 100644
index 00000000..625b304b
--- /dev/null
+++ b/11ty/definitions/food.md
@@ -0,0 +1,8 @@
+---
+title: Food
+slug: food
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/maniac.md b/11ty/definitions/maniac.md
index aa8f3bf6..6d4462f1 100644
--- a/11ty/definitions/maniac.md
+++ b/11ty/definitions/maniac.md
@@ -4,5 +4,5 @@ slug: maniac
 defined: false
 flag:
   level: avoid
-  text: ableist slur
+  text: ableist language
 ---
diff --git a/11ty/definitions/nudity.md b/11ty/definitions/nudity.md
new file mode 100644
index 00000000..ca2b6c87
--- /dev/null
+++ b/11ty/definitions/nudity.md
@@ -0,0 +1,8 @@
+---
+title: Nudity
+slug: nudity
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/pedophilia.md b/11ty/definitions/pedophilia.md
new file mode 100644
index 00000000..b0f3476e
--- /dev/null
+++ b/11ty/definitions/pedophilia.md
@@ -0,0 +1,8 @@
+---
+title: pedophilia
+slug: pedophilia
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/police-brutality.md b/11ty/definitions/police-brutality.md
new file mode 100644
index 00000000..6592bc3e
--- /dev/null
+++ b/11ty/definitions/police-brutality.md
@@ -0,0 +1,8 @@
+---
+title: police brutality
+slug: police-brutality
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
\ No newline at end of file
diff --git a/11ty/definitions/psych.md b/11ty/definitions/psych.md
index 044e4712..a05afffa 100644
--- a/11ty/definitions/psych.md
+++ b/11ty/definitions/psych.md
@@ -1,5 +1,8 @@
 ---
-title: Psych ableist slur
+title: Psych
 slug: psych
 defined: false
+flag:
+  level: avoid
+  text: ableist language
 ---
\ No newline at end of file
diff --git a/11ty/definitions/racism.md b/11ty/definitions/racism.md
index e013369f..6b192d8b 100644
--- a/11ty/definitions/racism.md
+++ b/11ty/definitions/racism.md
@@ -2,4 +2,7 @@
 title: Racism
 slug: racism
 defined: false
+flag:
+  level: warning
+  text: content warning
 ---
\ No newline at end of file
diff --git a/11ty/definitions/racist-language.md b/11ty/definitions/racist-language.md
new file mode 100644
index 00000000..98070826
--- /dev/null
+++ b/11ty/definitions/racist-language.md
@@ -0,0 +1,8 @@
+---
+title: Racist language
+slug: racist-language
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/rape.md b/11ty/definitions/rape.md
new file mode 100644
index 00000000..2fdb9d0c
--- /dev/null
+++ b/11ty/definitions/rape.md
@@ -0,0 +1,8 @@
+---
+title: Rape
+slug: rape
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
\ No newline at end of file
diff --git a/11ty/definitions/self-harm.md b/11ty/definitions/self-harm.md
new file mode 100644
index 00000000..806557a5
--- /dev/null
+++ b/11ty/definitions/self-harm.md
@@ -0,0 +1,8 @@
+---
+title: Self-harm
+slug: self-harm
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/sexual-assault.md b/11ty/definitions/sexual-assault.md
new file mode 100644
index 00000000..b839115f
--- /dev/null
+++ b/11ty/definitions/sexual-assault.md
@@ -0,0 +1,8 @@
+---
+title: sexual assault
+slug: sexual-assault
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
\ No newline at end of file
diff --git a/11ty/definitions/stupid.md b/11ty/definitions/stupid.md
index 01080da5..4ac6f545 100644
--- a/11ty/definitions/stupid.md
+++ b/11ty/definitions/stupid.md
@@ -4,5 +4,5 @@ slug: stupid
 defined: false
 flag:
   level: avoid
-  text: ableist slur
+  text: ableist language
 ---
diff --git a/11ty/definitions/suicide.md b/11ty/definitions/suicide.md
new file mode 100644
index 00000000..c497d746
--- /dev/null
+++ b/11ty/definitions/suicide.md
@@ -0,0 +1,8 @@
+---
+title: Suicide
+slug: suicide
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/transmisia.md b/11ty/definitions/transmisia.md
new file mode 100644
index 00000000..f1ed64e2
--- /dev/null
+++ b/11ty/definitions/transmisia.md
@@ -0,0 +1,8 @@
+---
+title: transmisia
+slug: transmisia
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/transphobia.md b/11ty/definitions/transphobia.md
new file mode 100644
index 00000000..9e05a132
--- /dev/null
+++ b/11ty/definitions/transphobia.md
@@ -0,0 +1,8 @@
+---
+title: transphobia
+slug: transphobia
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/trauma.md b/11ty/definitions/trauma.md
new file mode 100644
index 00000000..79557f51
--- /dev/null
+++ b/11ty/definitions/trauma.md
@@ -0,0 +1,8 @@
+---
+title: trauma
+slug: trauma
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
\ No newline at end of file
diff --git a/11ty/definitions/weight-gain.md b/11ty/definitions/weight-gain.md
new file mode 100644
index 00000000..80ec6396
--- /dev/null
+++ b/11ty/definitions/weight-gain.md
@@ -0,0 +1,8 @@
+---
+title: weight gain
+slug: weight-gain
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/weight-loss.md b/11ty/definitions/weight-loss.md
new file mode 100644
index 00000000..039ccca1
--- /dev/null
+++ b/11ty/definitions/weight-loss.md
@@ -0,0 +1,8 @@
+---
+title: weight loss
+slug: weight-loss
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/white-feminism.md b/11ty/definitions/white-feminism.md
new file mode 100644
index 00000000..37b1704b
--- /dev/null
+++ b/11ty/definitions/white-feminism.md
@@ -0,0 +1,8 @@
+---
+title: white feminism
+slug: white-feminism
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
diff --git a/11ty/definitions/xenophoba.md b/11ty/definitions/xenophoba.md
new file mode 100644
index 00000000..4fb94c8a
--- /dev/null
+++ b/11ty/definitions/xenophoba.md
@@ -0,0 +1,8 @@
+---
+title: xenophobia
+slug: xenophobia
+defined: false
+flag:
+  level: warning
+  text: content warning
+---
\ No newline at end of file
diff --git a/assets/css/abstracts/_mixins.scss b/assets/css/abstracts/_mixins.scss
index e0e2cfb6..ad928545 100644
--- a/assets/css/abstracts/_mixins.scss
+++ b/assets/css/abstracts/_mixins.scss
@@ -2,6 +2,10 @@
   content: '🚨';
 }
 
+@mixin icon__warning() {
+  content: '⚠️';
+}
+
 @mixin icon__alt() {
   content: '👍';
 }
diff --git a/assets/css/abstracts/_variables.scss b/assets/css/abstracts/_variables.scss
index ba8ea795..d1bf4240 100644
--- a/assets/css/abstracts/_variables.scss
+++ b/assets/css/abstracts/_variables.scss
@@ -3,6 +3,10 @@ $secondary-color: hsl(120, 100%, 25%);
 
 $dark-red: hsl(0, 100%, 32.2%);
 $pink: hsl(349.5, 100%, 87.6%);
+$dark-green: hsl(120, 100%, 15%);
+$yellow: hsl(50, 100%, 50%);
+$dark-yellow: hsl(50, 100%, 20%);
+$pale-yellow: hsl(50, 100%, 86%);
 $black: hsl(0, 0%, 13%);
 $white: hsl(0, 0%, 100%);
 
@@ -13,4 +17,4 @@ $light-grey: hsl(0, 0%, 93.3%); // for backgrounds only
 $browser-context: 16;
 
 $lt-background-color: $pink;
-
+$lt-background-color-warning: $pale-yellow;
diff --git a/assets/css/components/_flag.scss b/assets/css/components/_flag.scss
index 25fac85a..93a9d047 100644
--- a/assets/css/components/_flag.scss
+++ b/assets/css/components/_flag.scss
@@ -1,5 +1,5 @@
 .flag__red {
-  background-color: rgb(255, 192, 203);
+  background-color:$lt-background-color;
   border-radius: 1rem;
   display: inline-block;
   font-size: 0.9rem;
@@ -13,3 +13,19 @@
     @include icon__embed();
   }
 }
+
+.flag__yellow {
+  background-color: $lt-background-color-warning;
+  border-radius: 1rem;
+  display: inline-block;
+  font-size: 0.9rem;
+  font-weight: bold;
+  margin: 0.5rem 0.75rem 0.25rem 0;
+  padding: 0.45rem 0.65rem;
+  text-transform: lowercase;
+
+  &:before {
+    @include icon__warning();
+    @include icon__embed();
+  }
+}
diff --git a/assets/css/components/_word.scss b/assets/css/components/_word.scss
index ba6d3870..17e6c016 100644
--- a/assets/css/components/_word.scss
+++ b/assets/css/components/_word.scss
@@ -74,7 +74,7 @@
     text-transform: uppercase;
 
     &--avoid {
-      --word-signal-color: #a40000;
+      --word-signal-color: $dark-red;
 
       &:before {
         @include icon__avoid();
@@ -83,7 +83,7 @@
     }
 
     &--better {
-      --word-signal-color: green;
+      --word-signal-color: $dark-green;
 
       &:before {
         @include icon__alt();
@@ -97,5 +97,12 @@
         @include icon__hanging();
       }
     }
+    &--warning {
+      --word-signal-color: $dark-yellow;
+      &:before {
+        @include icon__warning();
+        @include icon__hanging();
+      }
+    }
   }
 }
diff --git a/assets/css/structures/_definition-content.scss b/assets/css/structures/_definition-content.scss
index 8e48d088..27d4a9cc 100644
--- a/assets/css/structures/_definition-content.scss
+++ b/assets/css/structures/_definition-content.scss
@@ -81,7 +81,7 @@
     text-transform: uppercase;
 
     &--avoid {
-      --word-signal-color: #a40000;
+      --word-signal-color: $dark-red;
 
       &:before {
         @include icon__avoid();
@@ -90,7 +90,7 @@
     }
 
     &--better {
-      --word-signal-color: green;
+      --word-signal-color: $dark-green;
 
       &:before {
         @include icon__alt();
@@ -104,6 +104,15 @@
         @include icon__hanging();
       }
     }
+
+    &--warning {
+      --word-signal-color: $dark-yellow;
+
+      &:before {
+        @include icon__warning();
+        @include icon__hanging();
+      }
+    }
   }
 }