@brightspace-ui/labs 1.7.0 → 2.1.0

package/README.md

@@ -36,6 +36,9 @@ npm run lint:style
 # translations
 npm run test:translations
 
+# accessibility tests
+npm run test:axe
+
 # unit tests
 npm run test:unit
 ```

package/package.json

@@ -13,6 +13,7 @@
     "./components/opt-out-flyout.js": "./src/components/opt-in-flyout/opt-out-flyout.js",
     "./components/opt-out-reason.js": "./src/components/opt-in-flyout/opt-out-reason.js",
     "./components/pager-numeric.js": "./src/components/pagination/pager-numeric.js",
+    "./components/status-icon.js": "./src/components/status-icon/status-icon.js",
     "./controllers/computed-value.js": "./src/controllers/computed-values/computed-value.js",
     "./controllers/computed-values.js": "./src/controllers/computed-values/computed-values.js",
     "./controllers/language-listener.js": "./src/controllers/language-listener/language-listener.js"
@@ -24,8 +25,9 @@
     "lint:eslint": "eslint . --ext .js,.html",
     "lint:style": "stylelint \"**/*.{js,html}\"",
     "start": "web-dev-server --node-resolve --open --watch",
-    "test": "npm run lint && npm run test:translations && npm run test:unit",
-    "test:translations": "mfv -e -s en -p ./lang/ -i untranslated",
+    "test": "npm run lint && npm run test:translations && npm run test:unit && npm run test:axe",
+    "test:translations": "mfv -e -i untranslated",
+    "test:axe": "d2l-test-runner axe --chrome",
     "test:unit": "d2l-test-runner",
     "test:vdiff": "d2l-test-runner vdiff"
   },
@@ -48,8 +50,8 @@
     "access": "public"
   },
   "dependencies": {
-    "@brightspace-ui/core": "^2",
-    "lit": "^2"
+    "@brightspace-ui/core": "^3",
+    "lit": "^3"
   },
-  "version": "1.7.0"
+  "version": "2.1.0"
 }

package/src/components/status-icon/README.md

@@ -0,0 +1,21 @@
+# d2l-labs-status-icon
+
+Displays an icon as well as optional text to show the state/status of some feature or tool
+
+## Usage
+
+```html
+<script type="module">
+    import '@brightspace-ui-labs/status-icon/status-icon.js';
+</script>
+<d2l-labs-status-icon state="failure" message="Failure"></d2l-labs-status-icon>
+```
+
+![Status Icons preview](./StatusIconPreview.PNG)
+
+**Properties:**
+
+| Property | Type | Description |
+|--|--|--|
+| `message` | String | Message to be displayed |
+| `state` | String, default: `'failure'` | State of the status. Can be one of  `failure`, `warning`, `success`. |

package/src/components/status-icon/status-icon.js

@@ -0,0 +1,67 @@
+import '@brightspace-ui/core/components/colors/colors.js';
+import '@brightspace-ui/core/components/icons/icon.js';
+import { css, html, LitElement } from 'lit';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+
+function getIcon(state) {
+	switch (state) {
+		case 'success':
+			return 'tier1:check-circle';
+		case 'warning':
+			return 'tier1:alert';
+		default:
+			return 'tier1:close-circle';
+	}
+}
+
+class StatusIcon extends RtlMixin(LitElement) {
+
+	static get properties() {
+		return {
+			state: { type: String, reflect: true },
+			message: { type: String, reflect: true }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				align-items: center;
+				display: inline-flex;
+			}
+			:host([hidden]) {
+				display: none;
+			}
+			:host,
+			d2l-icon {
+				color: var(--d2l-color-cinnabar);
+			}
+			:host([state="warning"]),
+			:host([state="warning"]) d2l-icon {
+				color: var(--d2l-color-citrine);
+			}
+			:host([state="success"]),
+			:host([state="success"]) d2l-icon {
+				color: var(--d2l-color-olivine);
+			}
+			span {
+				margin-inline-start: 0.4em;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.state = 'failure';
+	}
+
+	render() {
+		const icon = getIcon(this.state);
+		return html`
+			<d2l-icon icon="${icon}"></d2l-icon>
+			<span>${this.message} </span>
+		`;
+	}
+
+}
+customElements.define('d2l-labs-status-icon', StatusIcon);

package/src/lang/ar.js

@@ -1,30 +1,30 @@
 export default {
-	"components:accessibilityDisabilitySimulator:blurLevel": "Blur Level", // Label for input slider that users can use to change the level of blurriness
-	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopia", // Disability simulation option for users with Deuteranopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopia", // Disability simulation option for users with Protanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopia", // Disability simulation option for users with Tritanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindness": "Colorblindness", // Disability simulation option for users with Colorblindness
-	"components:accessibilityDisabilitySimulator:keyboardOnly": "Keyboard Only", // Disability simulation option for users who can only use the keyboard for navigation
-	"components:accessibilityDisabilitySimulator:lowVision": "Low Vision", // Disability simulation option for users with a limited ability to see
-	"components:accessibilityDisabilitySimulator:noVision": "No Vision", // Disability simulation option for users without the ability to see
-	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
-	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
-	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:accessibilityDisabilitySimulator:blurLevel": "مستوى الضباب", // Label for input slider that users can use to change the level of blurriness
+	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "عمى الألوان التام", // Disability simulation option for users with Achromatiopsia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "عمى اللون الأخضر", // Disability simulation option for users with Deuteranopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "عمى اللون الأحمر", // Disability simulation option for users with Protanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "عمى اللون الأزرق", // Disability simulation option for users with Tritanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindness": "عمى الألوان", // Disability simulation option for users with Colorblindness
+	"components:accessibilityDisabilitySimulator:keyboardOnly": "لوحة المفاتيح فقط", // Disability simulation option for users who can only use the keyboard for navigation
+	"components:accessibilityDisabilitySimulator:lowVision": "ضعف النظر", // Disability simulation option for users with a limited ability to see
+	"components:accessibilityDisabilitySimulator:noVision": "انعدام الرؤية", // Disability simulation option for users without the ability to see
+	"components:accessibilityDisabilitySimulator:none": "لا شيء", // Disability simulation option that represents having no disability
+	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "تمكين قارئ الشاشة وعلامة التبويب في المحتوى", // Alert that prompts the user to use a screenreader and tabbing to view content
+	"components:accessibilityDisabilitySimulator:simulationType": "نوع المحاكاة:", // Label for the disability simulation options
 	"components:checkboxDrawer:checkboxCollapsed": "تم طي خانة الاختيار", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "تم توسيع خانة الاختيار", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "إلغاء",
 	"components:optInFlyout:close": "إغلاق مربع الحوار هذا",
 	"components:optInFlyout:done": "تم",
 	"components:optInFlyout:feedbackChooseReason": "-- يُرجى اختيار سبب --",
-	"components:optInFlyout:feedbackLabel": "ما الذي يمكننا القيام به لتتشوّق إلى استخدام خدمتنا؟",
-	"components:optInFlyout:feedbackReasonJustCheckingSomething": "أرجع للتحقّق من أمر ما فحسب",
+	"components:optInFlyout:feedbackLabel": "ما الذي يمكننا القيام به لتتحمّس لاستخدام خدمتنا؟",
+	"components:optInFlyout:feedbackReasonJustCheckingSomething": "أرجع للتحقق من أمر ما فحسب",
 	"components:optInFlyout:feedbackReasonLabel": "هلا أخبرتنا بسبب رجوعك إلى الإصدار القديم؟",
-	"components:optInFlyout:feedbackReasonMissingFeature": "لا يتضمّن ميزة أستخدمها",
+	"components:optInFlyout:feedbackReasonMissingFeature": "لا يتضمن ميزة أستخدمها",
 	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "ليس الوقت مناسبًا لتجربة هذا الإصدار",
 	"components:optInFlyout:feedbackReasonOther": "غير ذلك",
 	"components:optInFlyout:feedbackReasonPreferOldExperience": "أعتقد أن الإصدار القديم يوفر تجربة أفضل",
-	"components:optInFlyout:feedbackTitle": "Let us know how to improve!",
+	"components:optInFlyout:feedbackTitle": "أخبرنا كيف يمكننا تحسين أدائنا!",
 	"components:optInFlyout:helpMessage": "اقرأ *مستندات التعليمات* الخاصة بنا للبدء!",
 	"components:optInFlyout:leaveOff": "الاستمرار في إيقاف التشغيل",
 	"components:optInFlyout:leaveOn": "الاستمرار في التشغيل",
@@ -34,9 +34,9 @@ export default {
 	"components:optInFlyout:turnOn": "التشغيل",
 	"components:optInFlyout:tutorialAndHelpMessage": "شاهد *الدروس التعليمية* الخاصة بنا أو اقرأ ~مستندات التعليمات الخاصة بنا~ للبدء!",
 	"components:optInFlyout:tutorialMessage": "شاهد *الدروس التعليمية* الخاصة بنا لمساعدتك على البدء!",
-	"components:pagination:amountPerPage" : "{count} لكل صفحة",
+	"components:pagination:amountPerPage": "{count} لكل صفحة",
 	"components:pagination:currentPage": "رقم الصفحة {pageNumber} من {maxPageNumber}",
-	"components:pagination:nextPage" : "الصفحة التالية",
-	"components:pagination:previousPage" : "الصفحة السابقة",
-	"components:pagination:resultsPerPage" : "النتائج لكل صفحة"
+	"components:pagination:nextPage": "الصفحة التالية",
+	"components:pagination:previousPage": "الصفحة السابقة",
+	"components:pagination:resultsPerPage": "النتائج لكل صفحة"
 };

package/src/lang/cy.js

@@ -1,27 +1,27 @@
 export default {
-	"components:accessibilityDisabilitySimulator:blurLevel": "Blur Level", // Label for input slider that users can use to change the level of blurriness
-	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopia", // Disability simulation option for users with Deuteranopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopia", // Disability simulation option for users with Protanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopia", // Disability simulation option for users with Tritanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindness": "Colorblindness", // Disability simulation option for users with Colorblindness
-	"components:accessibilityDisabilitySimulator:keyboardOnly": "Keyboard Only", // Disability simulation option for users who can only use the keyboard for navigation
-	"components:accessibilityDisabilitySimulator:lowVision": "Low Vision", // Disability simulation option for users with a limited ability to see
-	"components:accessibilityDisabilitySimulator:noVision": "No Vision", // Disability simulation option for users without the ability to see
-	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
-	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
-	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:accessibilityDisabilitySimulator:blurLevel": "Lefel aneglurdeb", // Label for input slider that users can use to change the level of blurriness
+	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsia", // mfv-translated Disability simulation option for users with Achromatiopsia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Dewteranopia", // Disability simulation option for users with Deuteranopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Cochddallineb", // Disability simulation option for users with Protanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopia", // mfv-translated Disability simulation option for users with Tritanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindness": "Dallineb lliw", // Disability simulation option for users with Colorblindness
+	"components:accessibilityDisabilitySimulator:keyboardOnly": "Bysellfwrdd yn Unig", // Disability simulation option for users who can only use the keyboard for navigation
+	"components:accessibilityDisabilitySimulator:lowVision": "Golwg Gwan", // Disability simulation option for users with a limited ability to see
+	"components:accessibilityDisabilitySimulator:noVision": "Dim Golwg", // Disability simulation option for users without the ability to see
+	"components:accessibilityDisabilitySimulator:none": "Dim", // Disability simulation option that represents having no disability
+	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Galluogwch eich darllenydd sgrîn a thab i'r cynnwys", // Alert that prompts the user to use a screenreader and tabbing to view content
+	"components:accessibilityDisabilitySimulator:simulationType": "Math o efelychiad:", // Label for the disability simulation options
 	"components:checkboxDrawer:checkboxCollapsed": "Wedi crebachu blwch ticio", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Wedi ehangu blwch ticio", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Canslo",
-	"components:optInFlyout:close": "Cau’r deialog hwn",
+	"components:optInFlyout:close": "Cau’r dialog hwn",
 	"components:optInFlyout:done": "Wedi Gorffen",
 	"components:optInFlyout:feedbackChooseReason": "-- Dewiswch reswm --",
 	"components:optInFlyout:feedbackLabel": "Beth allwn ni ei wneud i droi hwn yn rhywbeth y byddech chi’n dwlu ar ei ddefnyddio?",
 	"components:optInFlyout:feedbackReasonJustCheckingSomething": "Dim ond yn newid yn ôl i wirio rhywbeth",
 	"components:optInFlyout:feedbackReasonLabel": "A fyddech cystal â rhoi gwybod i ni pam eich bod yn newid yn ôl?",
 	"components:optInFlyout:feedbackReasonMissingFeature": "Mae nodwedd rydw i’n ei defnyddio ar goll",
-	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "Nid yw’n amser da i fi roi cynnig ar y fersiwn hwn",
+	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "Nid yw’n amser da i fi roi cynnig ar y fersiwn hon",
 	"components:optInFlyout:feedbackReasonOther": "Arall",
 	"components:optInFlyout:feedbackReasonPreferOldExperience": "Rwy’n meddwl fod yr hen fersiwn yn brofiad gwell",
 	"components:optInFlyout:feedbackTitle": "Rhowch wybod i ni sut gallwn wella!",
@@ -34,9 +34,9 @@ export default {
 	"components:optInFlyout:turnOn": "Trowch e ymlaen",
 	"components:optInFlyout:tutorialAndHelpMessage": "Gwyliwch ein *tiwtorialau* neu darllenwch ein ~dogfennaeth cymorth~ i gychwyn arni!",
 	"components:optInFlyout:tutorialMessage": "Gwyliwch ein *tiwtorialau* i’ch helpu i gychwyn arni!",
-	"components:pagination:amountPerPage" : "{count} fesul tudalen",
+	"components:pagination:amountPerPage": "{count} fesul tudalen",
 	"components:pagination:currentPage": "Rhif tudalen {pageNumber} o {maxPageNumber}",
-	"components:pagination:nextPage" : "Tudalen nesaf",
-	"components:pagination:previousPage" : "Y dudalen flaenorol",
-	"components:pagination:resultsPerPage" : "Canlyniadau fesul tudalen"
+	"components:pagination:nextPage": "Tudalen nesaf",
+	"components:pagination:previousPage": "Y dudalen flaenorol",
+	"components:pagination:resultsPerPage": "Canlyniadau fesul tudalen"
 };

package/src/lang/da.js

@@ -1,16 +1,16 @@
 export default {
-	"components:accessibilityDisabilitySimulator:blurLevel": "Blur Level", // Label for input slider that users can use to change the level of blurriness
-	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopia", // Disability simulation option for users with Deuteranopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopia", // Disability simulation option for users with Protanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopia", // Disability simulation option for users with Tritanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindness": "Colorblindness", // Disability simulation option for users with Colorblindness
-	"components:accessibilityDisabilitySimulator:keyboardOnly": "Keyboard Only", // Disability simulation option for users who can only use the keyboard for navigation
-	"components:accessibilityDisabilitySimulator:lowVision": "Low Vision", // Disability simulation option for users with a limited ability to see
-	"components:accessibilityDisabilitySimulator:noVision": "No Vision", // Disability simulation option for users without the ability to see
-	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
-	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
-	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:accessibilityDisabilitySimulator:blurLevel": "Sløringsniveau", // Label for input slider that users can use to change the level of blurriness
+	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Farveblindhed", // Disability simulation option for users with Achromatiopsia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Grønblindhed", // Disability simulation option for users with Deuteranopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Rødblindhed", // Disability simulation option for users with Protanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Violetblindhed", // Disability simulation option for users with Tritanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindness": "Farveblindhed", // Disability simulation option for users with Colorblindness
+	"components:accessibilityDisabilitySimulator:keyboardOnly": "Kun tastatur", // Disability simulation option for users who can only use the keyboard for navigation
+	"components:accessibilityDisabilitySimulator:lowVision": "Svagsyn", // Disability simulation option for users with a limited ability to see
+	"components:accessibilityDisabilitySimulator:noVision": "Intet syn", // Disability simulation option for users without the ability to see
+	"components:accessibilityDisabilitySimulator:none": "Ingen", // Disability simulation option that represents having no disability
+	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Aktivér din skærmlæser og fane i indholdet", // Alert that prompts the user to use a screenreader and tabbing to view content
+	"components:accessibilityDisabilitySimulator:simulationType": "Simulationstype:", // Label for the disability simulation options
 	"components:checkboxDrawer:checkboxCollapsed": "Afkrydsningsfelt skjult", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Afkrydsningsfelt udvidet", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuller",
@@ -34,9 +34,9 @@ export default {
 	"components:optInFlyout:turnOn": "Slå den til",
 	"components:optInFlyout:tutorialAndHelpMessage": "Se vores *selvstudier*, eller læs vores ~hjælp-dokumentation~ for at komme i gang!",
 	"components:optInFlyout:tutorialMessage": "Se vores *selvstudier* for at komme i gang!",
-	"components:pagination:amountPerPage" : "{count} pr. side",
+	"components:pagination:amountPerPage": "{count} pr. side",
 	"components:pagination:currentPage": "Sidenummer {pageNumber} af {maxPageNumber}",
-	"components:pagination:nextPage" : "Næste side",
-	"components:pagination:previousPage" : "Forrige side",
-	"components:pagination:resultsPerPage" : "Resultater pr. side"
+	"components:pagination:nextPage": "Næste side",
+	"components:pagination:previousPage": "Forrige side",
+	"components:pagination:resultsPerPage": "Resultater pr. side"
 };

package/src/lang/de.js

@@ -1,25 +1,25 @@
 export default {
-	"components:accessibilityDisabilitySimulator:blurLevel": "Blur Level", // Label for input slider that users can use to change the level of blurriness
-	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopia", // Disability simulation option for users with Deuteranopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopia", // Disability simulation option for users with Protanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopia", // Disability simulation option for users with Tritanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindness": "Colorblindness", // Disability simulation option for users with Colorblindness
-	"components:accessibilityDisabilitySimulator:keyboardOnly": "Keyboard Only", // Disability simulation option for users who can only use the keyboard for navigation
-	"components:accessibilityDisabilitySimulator:lowVision": "Low Vision", // Disability simulation option for users with a limited ability to see
-	"components:accessibilityDisabilitySimulator:noVision": "No Vision", // Disability simulation option for users without the ability to see
-	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
-	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
-	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:accessibilityDisabilitySimulator:blurLevel": "Unschärfe", // Label for input slider that users can use to change the level of blurriness
+	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsie", // Disability simulation option for users with Achromatiopsia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Grünblindheit", // Disability simulation option for users with Deuteranopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Rotblindheit", // Disability simulation option for users with Protanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Violettblindheit", // Disability simulation option for users with Tritanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindness": "Farbenblindheit", // Disability simulation option for users with Colorblindness
+	"components:accessibilityDisabilitySimulator:keyboardOnly": "Nur Tastatur", // Disability simulation option for users who can only use the keyboard for navigation
+	"components:accessibilityDisabilitySimulator:lowVision": "Sehbeeinträchtigung", // Disability simulation option for users with a limited ability to see
+	"components:accessibilityDisabilitySimulator:noVision": "Blindheit", // Disability simulation option for users without the ability to see
+	"components:accessibilityDisabilitySimulator:none": "Keine", // Disability simulation option that represents having no disability
+	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Aktivieren Sie Ihre Bildschirmsprachausgabe und tippen Sie den Inhalt an", // Alert that prompts the user to use a screenreader and tabbing to view content
+	"components:accessibilityDisabilitySimulator:simulationType": "Simulationstyp:", // Label for the disability simulation options
 	"components:checkboxDrawer:checkboxCollapsed": "Kontrollkästchen ausgeblendet", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Kontrollkästchen eingeblendet", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Abbrechen",
 	"components:optInFlyout:close": "Dieses Dialogfeld schließen",
 	"components:optInFlyout:done": "Fertig",
 	"components:optInFlyout:feedbackChooseReason": "-- Bitte wählen Sie einen Grund --",
-	"components:optInFlyout:feedbackLabel": "Was können wir tun, damit Sie die neue Oberfläche gerne nutzen?",
-	"components:optInFlyout:feedbackReasonJustCheckingSomething": "Ich schalte nur um, um etwas nachzusehen",
-	"components:optInFlyout:feedbackReasonLabel": "Würden Sie uns sagen, warum Sie wieder zurückwechseln?",
+	"components:optInFlyout:feedbackLabel": "Was können wir tun, damit Sie es gerne nutzen?",
+	"components:optInFlyout:feedbackReasonJustCheckingSomething": "Ich wechsele nur zurück, um etwas nachzusehen",
+	"components:optInFlyout:feedbackReasonLabel": "Mögen Sie uns mitteilen, warum Sie wieder zurückwechseln?",
 	"components:optInFlyout:feedbackReasonMissingFeature": "Es fehlt eine Funktion, die ich nutze",
 	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "Es ist kein guter Zeitpunkt für mich, um diese Version auszuprobieren",
 	"components:optInFlyout:feedbackReasonOther": "Andere",
@@ -32,11 +32,11 @@ export default {
 	"components:optInFlyout:openOptOut": "Deaktivierungsdialog öffnen",
 	"components:optInFlyout:turnOff": "Ausschalten",
 	"components:optInFlyout:turnOn": "Einschalten",
-	"components:optInFlyout:tutorialAndHelpMessage": "Sehen Sie unsere *Tutorials* an, oder lesen Sie unsere ~Hilfe-Dokumentation~, um zu beginnen!",
+	"components:optInFlyout:tutorialAndHelpMessage": "Sehen Sie sich unsere *Tutorials* an, oder lesen Sie unsere ~Hilfe-Dokumentation~, um zu beginnen!",
 	"components:optInFlyout:tutorialMessage": "Unsere *Tutorials* helfen Ihnen beim Start!",
-	"components:pagination:amountPerPage" : "{count} pro Seite",
+	"components:pagination:amountPerPage": "{count} pro Seite",
 	"components:pagination:currentPage": "Seitennummer {pageNumber} von {maxPageNumber}",
-	"components:pagination:nextPage" : "Nächste Seite",
-	"components:pagination:previousPage" : "Vorherige Seite",
-	"components:pagination:resultsPerPage" : "Ergebnisse pro Seite"
+	"components:pagination:nextPage": "Nächste Seite",
+	"components:pagination:previousPage": "Vorherige Seite",
+	"components:pagination:resultsPerPage": "Ergebnisse pro Seite"
 };

package/src/lang/en-gb.js

@@ -0,0 +1,42 @@
+export default {
+	"components:accessibilityDisabilitySimulator:blurLevel": "Blur Level", // Label for input slider that users can use to change the level of blurriness
+	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopia", // Disability simulation option for users with Deuteranopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopia", // Disability simulation option for users with Protanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopia", // Disability simulation option for users with Tritanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindness": "Colourblindness", // Disability simulation option for users with Colorblindness
+	"components:accessibilityDisabilitySimulator:keyboardOnly": "Keyboard Only", // Disability simulation option for users who can only use the keyboard for navigation
+	"components:accessibilityDisabilitySimulator:lowVision": "Low Vision", // Disability simulation option for users with a limited ability to see
+	"components:accessibilityDisabilitySimulator:noVision": "No Vision", // Disability simulation option for users without the ability to see
+	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
+	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
+	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:checkboxDrawer:checkboxCollapsed": "Tick box collapsed", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
+	"components:checkboxDrawer:checkboxExpanded": "Tick box expanded", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
+	"components:optInFlyout:cancel": "Cancel",
+	"components:optInFlyout:close": "Close this dialogue",
+	"components:optInFlyout:done": "Done",
+	"components:optInFlyout:feedbackChooseReason": "-- Please choose a reason --",
+	"components:optInFlyout:feedbackLabel": "What could we do to make this something you'd love to use?",
+	"components:optInFlyout:feedbackReasonJustCheckingSomething": "Just switching back to check something",
+	"components:optInFlyout:feedbackReasonLabel": "Would you mind telling us why you are switching back?",
+	"components:optInFlyout:feedbackReasonMissingFeature": "It's missing a feature that I use",
+	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "It's not a good time for me to try this version",
+	"components:optInFlyout:feedbackReasonOther": "Other",
+	"components:optInFlyout:feedbackReasonPreferOldExperience": "I think the old version is a better experience",
+	"components:optInFlyout:feedbackTitle": "Let us know how to improve!",
+	"components:optInFlyout:helpMessage": "Read our *help documentation* to get started!",
+	"components:optInFlyout:leaveOff": "Leave it off",
+	"components:optInFlyout:leaveOn": "Leave it on",
+	"components:optInFlyout:openOptIn": "Open the opt-in dialogue",
+	"components:optInFlyout:openOptOut": "Open the opt-out dialogue",
+	"components:optInFlyout:turnOff": "Turn it off",
+	"components:optInFlyout:turnOn": "Turn it on",
+	"components:optInFlyout:tutorialAndHelpMessage": "Watch our *tutorials* or read our ~help documentation~ to get started!",
+	"components:optInFlyout:tutorialMessage": "Watch our *tutorials* to help you get started!",
+	"components:pagination:amountPerPage": "{count} per page",
+	"components:pagination:currentPage": "Page number {pageNumber} of {maxPageNumber}",
+	"components:pagination:nextPage": "Next page",
+	"components:pagination:previousPage": "Previous page",
+	"components:pagination:resultsPerPage": "Results per page"
+};

package/src/lang/es-es.js

@@ -1,21 +1,21 @@
 export default {
-	"components:accessibilityDisabilitySimulator:blurLevel": "Blur Level", // Label for input slider that users can use to change the level of blurriness
-	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopia", // Disability simulation option for users with Deuteranopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopia", // Disability simulation option for users with Protanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopia", // Disability simulation option for users with Tritanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindness": "Colorblindness", // Disability simulation option for users with Colorblindness
-	"components:accessibilityDisabilitySimulator:keyboardOnly": "Keyboard Only", // Disability simulation option for users who can only use the keyboard for navigation
-	"components:accessibilityDisabilitySimulator:lowVision": "Low Vision", // Disability simulation option for users with a limited ability to see
-	"components:accessibilityDisabilitySimulator:noVision": "No Vision", // Disability simulation option for users without the ability to see
-	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
-	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
-	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:accessibilityDisabilitySimulator:blurLevel": "Nivel de desenfoque", // Label for input slider that users can use to change the level of blurriness
+	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Acromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopía", // Disability simulation option for users with Deuteranopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopía", // Disability simulation option for users with Protanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopía", // Disability simulation option for users with Tritanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindness": "Daltonismo", // Disability simulation option for users with Colorblindness
+	"components:accessibilityDisabilitySimulator:keyboardOnly": "Solo teclado", // Disability simulation option for users who can only use the keyboard for navigation
+	"components:accessibilityDisabilitySimulator:lowVision": "Visión reducida", // Disability simulation option for users with a limited ability to see
+	"components:accessibilityDisabilitySimulator:noVision": "Sin visión", // Disability simulation option for users without the ability to see
+	"components:accessibilityDisabilitySimulator:none": "Ninguno", // Disability simulation option that represents having no disability
+	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Habilite el lector de pantalla y desplácese con el tabulador por el contenido.", // Alert that prompts the user to use a screenreader and tabbing to view content
+	"components:accessibilityDisabilitySimulator:simulationType": "Tipo de simulación:", // Label for the disability simulation options
 	"components:checkboxDrawer:checkboxCollapsed": "Casilla de verificación contraída", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Casilla de verificación expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancelar",
 	"components:optInFlyout:close": "Cerrar este cuadro de diálogo",
-	"components:optInFlyout:done": "Listo",
+	"components:optInFlyout:done": "Hecho",
 	"components:optInFlyout:feedbackChooseReason": "-- Seleccione un motivo --",
 	"components:optInFlyout:feedbackLabel": "¿Qué podríamos hacer para que esto sea algo que le encantaría utilizar?",
 	"components:optInFlyout:feedbackReasonJustCheckingSomething": "Quiero volver atrás a verificar algo",
@@ -34,9 +34,9 @@ export default {
 	"components:optInFlyout:turnOn": "Activar",
 	"components:optInFlyout:tutorialAndHelpMessage": "Consulte nuestros *tutoriales* o lea nuestra ~documentación de ayuda~ para comenzar.",
 	"components:optInFlyout:tutorialMessage": "Consulte nuestros *tutoriales* como ayuda adicional para empezar.",
-	"components:pagination:amountPerPage" : "{count} por página",
+	"components:pagination:amountPerPage": "{count} por página",
 	"components:pagination:currentPage": "Página número {pageNumber} de {maxPageNumber}",
-	"components:pagination:nextPage" : "Página siguiente",
-	"components:pagination:previousPage" : "Página anterior",
-	"components:pagination:resultsPerPage" : "Resultados por página"
+	"components:pagination:nextPage": "Página siguiente",
+	"components:pagination:previousPage": "Página anterior",
+	"components:pagination:resultsPerPage": "Resultados por página"
 };

package/src/lang/es.js

@@ -1,16 +1,16 @@
 export default {
-	"components:accessibilityDisabilitySimulator:blurLevel": "Blur Level", // Label for input slider that users can use to change the level of blurriness
-	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopia", // Disability simulation option for users with Deuteranopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopia", // Disability simulation option for users with Protanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopia", // Disability simulation option for users with Tritanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindness": "Colorblindness", // Disability simulation option for users with Colorblindness
-	"components:accessibilityDisabilitySimulator:keyboardOnly": "Keyboard Only", // Disability simulation option for users who can only use the keyboard for navigation
-	"components:accessibilityDisabilitySimulator:lowVision": "Low Vision", // Disability simulation option for users with a limited ability to see
-	"components:accessibilityDisabilitySimulator:noVision": "No Vision", // Disability simulation option for users without the ability to see
-	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
-	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
-	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:accessibilityDisabilitySimulator:blurLevel": "Nivel de desenfoque", // Label for input slider that users can use to change the level of blurriness
+	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Acromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopía", // Disability simulation option for users with Deuteranopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopía", // Disability simulation option for users with Protanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopía", // Disability simulation option for users with Tritanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindness": "Daltonismo", // Disability simulation option for users with Colorblindness
+	"components:accessibilityDisabilitySimulator:keyboardOnly": "Solo teclado", // Disability simulation option for users who can only use the keyboard for navigation
+	"components:accessibilityDisabilitySimulator:lowVision": "Baja visión", // Disability simulation option for users with a limited ability to see
+	"components:accessibilityDisabilitySimulator:noVision": "Sin visión", // Disability simulation option for users without the ability to see
+	"components:accessibilityDisabilitySimulator:none": "Ninguno", // Disability simulation option that represents having no disability
+	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Habilite su lector de pantalla y tableta en el contenido", // Alert that prompts the user to use a screenreader and tabbing to view content
+	"components:accessibilityDisabilitySimulator:simulationType": "Tipo de simulación:", // Label for the disability simulation options
 	"components:checkboxDrawer:checkboxCollapsed": "Casilla de selección contraída", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Casilla de selección expandida", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Cancelar",
@@ -24,19 +24,19 @@ export default {
 	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "No me parece un buen momento para probar esta versión",
 	"components:optInFlyout:feedbackReasonOther": "Otro",
 	"components:optInFlyout:feedbackReasonPreferOldExperience": "Creo que la versión anterior ofrece una mejor experiencia",
-	"components:optInFlyout:feedbackTitle": "Háganos saber cómo podemos mejorar.",
-	"components:optInFlyout:helpMessage": "Lea nuestra *documentación de ayuda* para comenzar.",
+	"components:optInFlyout:feedbackTitle": "Háganos saber cómo podemos mejorar",
+	"components:optInFlyout:helpMessage": "Lea nuestra *documentación de ayuda* para comenzar",
 	"components:optInFlyout:leaveOff": "Mantenerla apagada",
 	"components:optInFlyout:leaveOn": "Mantenerla activada",
 	"components:optInFlyout:openOptIn": "Abrir cuadro de diálogo de suscripción",
 	"components:optInFlyout:openOptOut": "Abrir cuadro de diálogo de anulación de suscripción",
 	"components:optInFlyout:turnOff": "Desactivar",
 	"components:optInFlyout:turnOn": "Activar",
-	"components:optInFlyout:tutorialAndHelpMessage": "Vea nuestros *tutoriales* o lea nuestra ~documentación de ayuda~ para comenzar.",
-	"components:optInFlyout:tutorialMessage": "Vea nuestros *tutoriales* para saber cómo comenzar.",
-	"components:pagination:amountPerPage" : "{count} por página",
+	"components:optInFlyout:tutorialAndHelpMessage": "Vea nuestros *tutoriales* o lea nuestra ~documentación de ayuda~ para comenzar",
+	"components:optInFlyout:tutorialMessage": "Vea nuestros *tutoriales* para saber cómo comenzar",
+	"components:pagination:amountPerPage": "{count} por página",
 	"components:pagination:currentPage": "Página número {pageNumber} de {maxPageNumber}",
-	"components:pagination:nextPage" : "Página siguiente",
-	"components:pagination:previousPage" : "Página anterior",
-	"components:pagination:resultsPerPage" : "Resultados por página"
+	"components:pagination:nextPage": "Página siguiente",
+	"components:pagination:previousPage": "Página anterior",
+	"components:pagination:resultsPerPage": "Resultados por página"
 };

package/src/lang/fr-fr.js

@@ -1,16 +1,16 @@
 export default {
-	"components:accessibilityDisabilitySimulator:blurLevel": "Blur Level", // Label for input slider that users can use to change the level of blurriness
-	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsia", // Disability simulation option for users with Achromatiopsia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deuteranopia", // Disability simulation option for users with Deuteranopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopia", // Disability simulation option for users with Protanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopia", // Disability simulation option for users with Tritanopia colorblindness
-	"components:accessibilityDisabilitySimulator:colorblindness": "Colorblindness", // Disability simulation option for users with Colorblindness
-	"components:accessibilityDisabilitySimulator:keyboardOnly": "Keyboard Only", // Disability simulation option for users who can only use the keyboard for navigation
-	"components:accessibilityDisabilitySimulator:lowVision": "Low Vision", // Disability simulation option for users with a limited ability to see
-	"components:accessibilityDisabilitySimulator:noVision": "No Vision", // Disability simulation option for users without the ability to see
-	"components:accessibilityDisabilitySimulator:none": "None", // Disability simulation option that represents having no disability
-	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Enable your screenreader and tab into the content", // Alert that prompts the user to use a screenreader and tabbing to view content
-	"components:accessibilityDisabilitySimulator:simulationType": "Simulation type:", // Label for the disability simulation options
+	"components:accessibilityDisabilitySimulator:blurLevel": "Niveau de flou", // Label for input slider that users can use to change the level of blurriness
+	"components:accessibilityDisabilitySimulator:colorblindAchromatopsia": "Achromatopsie", // Disability simulation option for users with Achromatiopsia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindDeuteranopia": "Deutéranopie", // Disability simulation option for users with Deuteranopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindProtanopia": "Protanopie", // Disability simulation option for users with Protanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindTritanopia": "Tritanopie", // Disability simulation option for users with Tritanopia colorblindness
+	"components:accessibilityDisabilitySimulator:colorblindness": "Daltonisme", // Disability simulation option for users with Colorblindness
+	"components:accessibilityDisabilitySimulator:keyboardOnly": "Clavier uniquement", // Disability simulation option for users who can only use the keyboard for navigation
+	"components:accessibilityDisabilitySimulator:lowVision": "Malvoyance", // Disability simulation option for users with a limited ability to see
+	"components:accessibilityDisabilitySimulator:noVision": "Aucune vision", // Disability simulation option for users without the ability to see
+	"components:accessibilityDisabilitySimulator:none": "Aucune", // Disability simulation option that represents having no disability
+	"components:accessibilityDisabilitySimulator:screenreaderAndTabAlert": "Activez votre lecteur d’écran et parcourez le contenu", // Alert that prompts the user to use a screenreader and tabbing to view content
+	"components:accessibilityDisabilitySimulator:simulationType": "Type de simulation :", // Label for the disability simulation options
 	"components:checkboxDrawer:checkboxCollapsed": "Case à cocher réduite", // Read by screen readers when focusing the collapsed (unchecked) checkbox, with the inner content hidden
 	"components:checkboxDrawer:checkboxExpanded": "Case à cocher développée", // Read by screen readers when focusing the expanded (checked) checkbox, with the inner content shown
 	"components:optInFlyout:cancel": "Annuler",
@@ -34,9 +34,9 @@ export default {
 	"components:optInFlyout:turnOn": "Activer",
 	"components:optInFlyout:tutorialAndHelpMessage": "Regardez nos * tutoriels *ou lisez notre ~ documentation d’aide ~ pour commencer !",
 	"components:optInFlyout:tutorialMessage": "Regardez nos * tutoriels * pour vous aider à démarrer !",
-	"components:pagination:amountPerPage" : "{count} par page",
+	"components:pagination:amountPerPage": "{count} par page",
 	"components:pagination:currentPage": "Page numéro {pageNumber} sur {maxPageNumber}",
-	"components:pagination:nextPage" : "Page suivante",
-	"components:pagination:previousPage" : "Page précédente",
-	"components:pagination:resultsPerPage" : "Résultats par page"
+	"components:pagination:nextPage": "Page suivante",
+	"components:pagination:previousPage": "Page précédente",
+	"components:pagination:resultsPerPage": "Résultats par page"
 };