Add trusted 10

app/router.js

@@ -10,4 +10,5 @@ Router.map(function () {
   this.route('glossary');
   this.route('contribute');
   this.route('resources');
+  this.route('trusted-ten');
 });

app/routes/trusted-ten.js

@@ -0,0 +1,3 @@
+import Route from '@ember/routing/route';
+
+export default class TrustedTenRoute extends Route {}

app/styles/app.css

@@ -2,6 +2,7 @@
 @import "bingo.css";
 @import "glossary.css";
 @import "resources.css";
+@import "ten.css";
 @import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;500;600&family=PT+Serif:wght@700&display=swap");
 
 :root {

app/styles/ten.css

@@ -0,0 +1,40 @@
+.ten-grid {
+  max-width: 860px;
+  display: grid;
+  grid-template-columns: repeat(8, 1fr);
+  grid-template-rows: 56px repeat(10, 28px);
+  gap: 8px;
+}
+
+.ten-grid > p {
+  text-align: center;
+  vertical-align: bottom;
+}
+
+input[type="checkbox"] {
+  appearance: none;
+  cursor: pointer;
+  justify-self: center;
+  align-self: center;
+  margin: 0;
+  width: 1.15em;
+  height: 1.15em;
+  border: 0.15em solid grey;
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+  display: grid;
+  place-content: center;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em var(--primary-color);
+}
+
+input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}

app/templates/application.hbs

@@ -17,6 +17,9 @@
       <li>
         <LinkTo @route="resources">{{t "menu.resources"}}</LinkTo>
       </li>
+      <li>
+        <LinkTo @route="trusted-ten">{{t "menu.ten"}}</LinkTo>
+      </li>
       <li>
         <select aria-label={{t "menu.language"}} name="locale" {{on 'change' this.changeLocale}}>
           {{#each this.locales as |model|}}
@@ -66,6 +69,9 @@
           <li>
             <mm.LinkTo @route="resources">{{t "menu.resources"}}</mm.LinkTo>
           </li>
+          <li>
+            <mm.LinkTo @route="trusted-ten">{{t "menu.ten"}}</mm.LinkTo>
+          </li>
         </ul>
       </nav>
     </div>

app/templates/trusted-ten.hbs

@@ -0,0 +1,114 @@
+{{page-title (t "ten.pagetitle")}}
+<Callout @subtitle={{t "ten.subtitle"}}>{{t "ten.title"}}</Callout>
+            <p class="intro">{{t "ten.intro" htmlSafe=true}}</p>
+
+<div class="ten-grid">
+    <p id="name">{{t "ten.name"}}</p>
+    <p>{{t "ten.gender"}}</p>
+    <p>{{t "ten.race"}}</p>
+    <p>{{t "ten.age"}}</p>
+    <p>{{t "ten.sex"}}</p>
+    <p>{{t "ten.ed"}}</p>
+    <p>{{t "ten.language"}}</p>
+    <p>{{t "ten.relation"}}</p>
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+
+    <input aria-label={{t "ten.name"}} type="input"/>
+    <input aria-label={{t "ten.gender"}} type="checkbox"/>
+    <input aria-label={{t "ten.race"}} type="checkbox"/>
+    <input aria-label={{t "ten.age"}} type="checkbox"/>
+    <input aria-label={{t "ten.sex"}} type="checkbox"/>
+    <input aria-label={{t "ten.ed"}} type="checkbox"/>
+    <input aria-label={{t "ten.language"}} type="checkbox"/>
+    <input aria-label={{t "ten.relation"}} type="checkbox"/>
+</div>
+<h2 class="cards-title">{{t "ten.reflection"}}</h2>
+<p class="intro">{{t "ten.reflection-text" htmlSafe=true}}</p>

tests/unit/routes/trusted-ten-test.js

@@ -0,0 +1,11 @@
+import { module, test } from 'qunit';
+import { setupTest } from 'dei-bingo/tests/helpers';
+
+module('Unit | Route | trusted-ten', function (hooks) {
+  setupTest(hooks);
+
+  test('it exists', function (assert) {
+    let route = this.owner.lookup('route:trusted-ten');
+    assert.ok(route);
+  });
+});

translations/de.yaml

@@ -5,6 +5,7 @@ menu:
   contribute: 'Beitragen'
   glossary: 'Glossar'
   resources: 'Ressourcen'
+  ten: 'Vertraute Zehn'
   language: 'Sprache auswählen'
 index:
   page-title: 'DEI@Nedap'
@@ -255,3 +256,28 @@ resources:
   design: 'Inklusives Design'
   types: 'Arten der Vielfalt / Persönliche Geschichten'
   community: 'Gemeinschaftsaufbau'
+
+ten:
+  pagetitle: 'Vertraute Zehn'
+  subtitle: 'Vertraute'
+  title: 'Zehn'
+  intro: 'Eine Übung, um über deinen vertrauten Kreis nachzudenken und das Bewusstsein dafür zu schärfen, wer dich umgibt.<br /><br />Wähle 10 deiner "go-to" Personen bei der Arbeit/Schule/anderen Gruppen - betrachte sie als deinen inneren Kreis - die Menschen, die du als vertrauenswürdig ansiehst und deren Rat du bei Entscheidungen suchst. Fülle ihre Namen aus und markiere die Kästchen, wenn diese Person in dieselbe Kategorie wie du fällt.'
+  name: 'Name/Initialen'
+  gender: 'Geschlecht'
+  race: 'Rasse/Ethnizität'
+  age: 'Alter'
+  sex: 'Sexuelle Orientierung'
+  ed: 'Bildungsniveau'
+  relation: 'Beziehungsstatus'
+  language: 'Muttersprache'
+  reflection: 'Reflexion'
+  reflection-text: 'Wenn du die gesamte Karte ausgefüllt hast, reflektiere über Folgendes:
+  <ul>
+  <li>Wie divers ist dein Vertrauenskreis?
+    <ul>
+      <li>Wenn du ein Mann bist, sind die meisten deiner Vertrauenspersonen auch Männer? Wenn du eine Frau bist, sind die meisten deiner Vertrauenspersonen Frauen?</li>
+      <li>Sehen diejenigen, denen du vertraust, dir ähnlich in Bezug auf Alter, Rasse, Bildungsniveau oder sprechen sie größtenteils deine Muttersprache?</li>
+    </ul>
+  </li>
+  <li>Wie könntest du deinen inneren Kreis der Vertrauten diversifizieren?</li>
+  <li>In Bezug auf eine Geschäftsstrategie, wie könnte die Einbeziehung unterschiedlicher Perspektiven Auswirkungen haben auf: Kundenempathie, Weltbild von Märkten, potenzielle Kunden und Chancen?</li>'

translations/en.yaml

@@ -5,6 +5,7 @@ menu:
   contribute: 'Contribute'
   glossary: 'Glossary'
   resources: 'Resources'
+  ten: 'Trusted Ten'
   language: 'Select language'
 index:
   page-title: 'DEI@Nedap'
@@ -255,3 +256,28 @@ resources:
   design: 'Inclusive design'
   types: 'Types of Diversity / Personal stories'
   community: 'Community building'
+
+ten:
+  pagetitle: 'Trusted Ten'
+  subtitle: 'Trusted'
+  title: 'Ten'
+  intro: 'An exercise to look and reflect on your trusted circle and cultivate awareness of who is around you.<br /><br />Choose 10 of your "go-to "people at work/school/another group - think of them as your inner circle - the people you consider trustworthy and whose counsel you seek in making decisions. Fill in their names and check the boxes when that person falls in the same category as you.'
+  name: 'Name/Initials'
+  gender: 'Gender'
+  race: 'Race/Ethnicity'
+  age: 'Age'
+  sex: 'Sexual Orientation'
+  ed: 'Education Level'
+  relation: 'Relationship Status'
+  language: 'Native Language'
+  reflection: 'Reflection'
+  reflection-text: 'When you have filled in the whole card reflect on the following:
+  <ul>
+  <li>How diverse is your circle of trust?
+    <ul>
+      <li>If you are male, are most of your trusted male too? If you are female, are the majority of your trusted females?</li>
+      <li>Do those you trust look similar to you in age or race or education level or speaks the majority your native language?</li>
+    </ul>
+  </li>
+  <li>How might you diversify your inner circle of confidants?</li>
+  <li>In regards to a business strategy, how might embracing diverse perspectives, have an impact on: customer empathy, worldview of markets, potential customers and opportunities?</li>'

translations/es.yaml

@@ -5,6 +5,7 @@ menu:
   contribute: 'Contribuir'
   glossary: 'Glosario'
   resources: 'Recursos'
+  ten: 'Los Diez de Confianza'
   language: 'Seleccionar idioma'
 index:
   page-title: 'DEI@Nedap'
@@ -255,3 +256,29 @@ resources:
   design: 'Diseño inclusivo'
   types: 'Tipos de diversidad / Historias personales'
   community: 'Construcción de comunidad'
+
+ten:
+  pagetitle: 'Los Diez de Confianza'
+  subtitle: 'Confianza'
+  title: 'Diez'
+  intro: 'Un ejercicio para reflexionar sobre tu círculo de confianza y cultivar la conciencia de quién te rodea.<br /><br />Elige 10 de tus "personas de referencia" en el trabajo/escuela/otro grupo - considéralos como tu círculo íntimo - las personas que consideras confiables y cuyo consejo buscas para tomar decisiones. Llena sus nombres y marca las casillas cuando esa persona esté en la misma categoría que tú.'
+  name: 'Nombre/Iniciales'
+  gender: 'Género'
+  race: 'Raza/Etnicidad'
+  age: 'Edad'
+  sex: 'Orientación Sexual'
+  ed: 'Nivel Educativo'
+  relation: 'Estado Civil'
+  language: 'Idioma Nativo'
+  reflection: 'Reflexión'
+  reflection-text: 'Cuando hayas completado toda la tarjeta, reflexiona sobre lo siguiente:
+  <ul>
+  <li>¿Qué tan diverso es tu círculo de confianza?
+    <ul>
+      <li>Si eres hombre, ¿la mayoría de tus personas de confianza también son hombres? Si eres mujer, ¿la mayoría de tus personas de confianza son mujeres?</li>
+      <li>¿Las personas en quienes confías se parecen a ti en términos de edad, raza, nivel educativo o hablan en su mayoría tu idioma nativo?</li>
+    </ul>
+  </li>
+  <li>¿Cómo podrías diversificar tu círculo íntimo de confidentes?</li>
+  <li>En cuanto a una estrategia empresarial, ¿cómo podría la adopción de perspectivas diversas impactar en: la empatía con los clientes, la visión de los mercados, los clientes potenciales y las oportunidades?</li>'
+

translations/fr.yaml

@@ -5,6 +5,7 @@ menu:
   contribute: "Contribuer"
   glossary: "Glossaire"
   resources: "Ressources"
+  ten: 'Les Dix de Confiance'
   language: 'Sélectionner la langue'
 index:
   page-title: "DEI@Nedap"
@@ -255,3 +256,28 @@ resources:
   design: "Conception inclusive"
   types: "Types de diversité / Histoires personnelles"
   community: "Construction de communauté"
+
+ten:
+  pagetitle: 'Les Dix de Confiance'
+  subtitle: 'Confiance'
+  title: 'Dix'
+  intro: 'Un exercice pour réfléchir à votre cercle de confiance et prendre conscience de ceux qui vous entourent.<br /><br />Choisissez 10 de vos "personnes de référence" au travail/école/dans un autre groupe - considérez-les comme votre cercle intime - les personnes que vous considérez comme dignes de confiance et dont vous cherchez le conseil pour prendre des décisions. Remplissez leurs noms et cochez les cases lorsque cette personne se trouve dans la même catégorie que vous.'
+  name: 'Nom/Initiales'
+  gender: 'Genre'
+  race: 'Race/Ethnicité'
+  age: 'Âge'
+  sex: 'Orientation sexuelle'
+  ed: "Niveau d'éducation"
+  relation: 'Statut relationnel'
+  language: 'Langue maternelle'
+  reflection: 'Réflexion'
+  reflection-text: "Une fois que vous avez rempli la carte entière, réfléchissez aux points suivants :
+  <ul>
+  <li>Quelle est la diversité de votre cercle de confiance ?
+    <ul>
+      <li>Si vous êtes un homme, la plupart de vos personnes de confiance sont-elles également des hommes ? Si vous êtes une femme, la majorité de vos personnes de confiance sont-elles des femmes ?</li>
+      <li>Les personnes en qui vous avez confiance vous ressemblent-elles en termes d'âge, de race, de niveau d'éducation ou parlent-elles majoritairement votre langue maternelle ?</li>
+    </ul>
+  </li>
+  <li>Comment pourriez-vous diversifier votre cercle intime de confidents ?</li>
+  <li>En ce qui concerne une stratégie d'entreprise, comment l'adoption de perspectives diverses pourrait-elle avoir un impact sur : l'empathie envers les clients, la vision du monde des marchés, les clients potentiels et les opportunités ?</li>"

translations/nl.yaml

@@ -6,6 +6,7 @@ menu:
   glossary: 'Woordenlijst'
   resources: 'Bronnen'
   language: 'Taal selecteren'
+  ten: 'Vertrouwde Tien'
 index:
   page-title: 'DEI@Nedap'
   subtitle: 'Samen'
@@ -256,3 +257,28 @@ resources:
   design: 'Inclusief ontwerp'
   types: 'Soorten Diversiteit / Persoonlijke verhalen'
   community: 'Community building'
+
+ten:
+  pagetitle: 'Vertrouwde Tien'
+  subtitle: 'Vertrouwde'
+  title: 'Tien'
+  intro: 'Een oefening om na te denken over je vertrouwde kring en bewustwording te kweken van wie er om je heen is.<br /><br />Kies 10 van je "go-to" mensen op het werk/school/een andere groep - beschouw hen als je innerlijke kring - de mensen die je als betrouwbaar beschouwt en wiens advies je zoekt bij het nemen van beslissingen. Vul hun namen in en vink de vakjes aan wanneer die persoon in dezelfde categorie als jij valt.'
+  name: 'Naam/Initialen'
+  gender: 'Geslacht'
+  race: 'Ras/Etniciteit'
+  age: 'Leeftijd'
+  sex: 'Seksuele geaardheid'
+  ed: 'Opleidingsniveau'
+  relation: 'Relatiestatus'
+  language: 'Moedertaal'
+  reflection: 'Reflectie'
+  reflection-text: 'Wanneer je de hele kaart hebt ingevuld, reflecteer dan op het volgende:
+  <ul>
+  <li>Hoe divers is je vertrouwenskring?
+    <ul>
+      <li>Als je een man bent, zijn de meeste van je vertrouwelingen dan ook mannen? Als je een vrouw bent, zijn de meeste van je vertrouwelingen dan vrouwen?</li>
+      <li>Lijken degenen die je vertrouwt op jou qua leeftijd, ras, opleidingsniveau of spreken ze grotendeels jouw moedertaal?</li>
+    </ul>
+  </li>
+  <li>Hoe zou je je innerlijke kring van vertrouwelingen kunnen diversifiëren?</li>
+  <li>Met betrekking tot een bedrijfsstrategie, hoe zou het omarmen van diverse perspectieven een impact kunnen hebben op: klantempathie, wereldbeeld van markten, potentiële klanten en kansen?</li>'