@brightspace-ui/labs 1.1.1 → 1.2.1

package/src/components/opt-in-flyout/opt-out-dialog.js

@@ -0,0 +1,204 @@
+import '@brightspace-ui/core/components/button/button.js';
+import '@brightspace-ui/core/components/button/button-icon.js';
+import '@brightspace-ui/core/components/colors/colors.js';
+import '@brightspace-ui/core/components/inputs/input-textarea.js';
+import './opt-out-reason-selector.js';
+import { css, html, LitElement } from 'lit';
+import { composeMixins } from '@brightspace-ui/core/helpers/composeMixins.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+
+const defaultEventProperties = {
+	bubbles: true,
+	composed: true
+};
+
+class OptOutDialog extends composeMixins(
+	LitElement,
+	LocalizeLabsElement,
+	RtlMixin
+) {
+
+	static get properties() {
+		return {
+			hideReason: { type: Boolean, attribute: 'hide-reason' },
+			hideFeedback: { type: Boolean, attribute: 'hide-feedback' }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				height: 100%;
+				overflow: hidden;
+				pointer-events: auto;
+				position: absolute;
+				width: 100%;
+				z-index: 950;
+			}
+
+			.opt-out-modal-fade {
+				background-color: #ffffff;
+				height: 100%;
+				opacity: 0.7;
+				position: absolute;
+				width: 100%;
+				z-index: 1;
+			}
+
+			.dialog {
+				background-color: #ffffff;
+				border: 1px solid var(--d2l-color-mica);
+				border-radius: 0.3rem;
+				box-shadow: 0 2px 12px rgba(86, 90, 92, 0.25);
+				box-sizing: border-box;
+				left: 50%;
+				max-width: 680px;
+				padding: 1rem;
+				position: absolute;
+				top: 7.5%;
+				transform: translateX(-50%);
+				width: 90%;
+				z-index: 2;
+			}
+
+			label {
+				display: block;
+				margin-bottom: 0.5rem;
+			}
+
+			#title-label {
+				display: inline;
+				font-weight: bold;
+			}
+
+			d2l-input-textarea {
+				margin-bottom: 1rem;
+			}
+
+			d2l-button {
+				margin-right: 1rem;
+			}
+
+			.close-button {
+				left: auto;
+				position: absolute;
+				right: 0.6rem;
+				top: 0.6rem;
+			}
+
+			:host([dir="rtl"]) .close-button {
+				left: 0.6rem;
+				right: auto;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.hideReason = false;
+		this.hideFeedback = false;
+		this._reason = '';
+	}
+
+	firstUpdated() {
+		super.firstUpdated();
+		this._setFocus();
+	}
+
+	render() {
+		return html`
+			<div class="opt-out-modal-fade"></div>
+			<div class="dialog" role="dialog" aria-labelledby="title-label">
+				<span tabindex="0" @focus="${this._shiftToLast}"></span>
+				<label id="title-label">${this.localize('components:optInFlyout:feedbackTitle')}</label>
+				<br><br>
+				<div ?hidden="${this.hideReason}">
+					<label id="reason-label">${this.localize('components:optInFlyout:feedbackReasonLabel')}</label>
+					<d2l-labs-opt-out-reason-selector id="reason-selector" aria-labelledby="reason-label" @selected="${this._handleSelected}">
+						<slot></slot>
+					</d2l-labs-opt-out-reason-selector>
+				</div>
+				<div ?hidden="${this.hideFeedback}">
+					<label id="feedback-label">${this.localize('components:optInFlyout:feedbackLabel')}</label>
+					<d2l-input-textarea id="feedback" labelled-by="feedback-label" rows="4" max-rows="4"></d2l-input-textarea>
+				</div>
+				<div>
+					<d2l-button id="done-button" primary="" @click="${this._confirm}">${this.localize('components:optInFlyout:done')}</d2l-button>
+					<d2l-button @click="${this._cancel}">${this.localize('components:optInFlyout:cancel')}</d2l-button>
+				</div>
+				<d2l-button-icon icon="tier1:close-small" id="close-button" class="close-button" @click="${this._cancel}" text="${this.localize('components:optInFlyout:close')}"></d2l-button-icon>
+				<span tabindex="0" @focus="${this._shiftToFirst}"></span>
+			</div>
+		`;
+	}
+
+	_cancel() {
+		this.dispatchEvent(new CustomEvent('cancel', defaultEventProperties));
+	}
+
+	_confirm() {
+		if (!this.shadowRoot) {
+			return;
+		}
+
+		const feedback = this.shadowRoot.querySelector('#feedback');
+
+		this.dispatchEvent(
+			new CustomEvent('confirm', {
+				detail: {
+					reason: this._reason || '',
+					feedback: (feedback && feedback.value || '').trim()
+				},
+				...defaultEventProperties
+			})
+		);
+	}
+
+	_handleSelected(e) {
+		this._reason = e.detail.value;
+	}
+
+	_setFocus() {
+		if (!this.shadowRoot) {
+			return;
+		}
+
+		let element;
+
+		if (!this.hideReason) {
+			element = this.shadowRoot.querySelector('#reason-selector');
+		} else if (!this.hideFeedback) {
+			element = this.shadowRoot.querySelector('#feedback');
+		} else {
+			element = this.shadowRoot.querySelector('#done-button');
+		}
+
+		if (!element) {
+			return;
+		}
+
+		element.focus();
+	}
+
+	_shiftToFirst() {
+		this._setFocus();
+	}
+
+	_shiftToLast() {
+		if (!this.shadowRoot) {
+			return;
+		}
+
+		const element = this.shadowRoot.querySelector('#close-button');
+
+		if (!element) {
+			return;
+		}
+
+		element.focus();
+	}
+
+}
+
+customElements.define('d2l-labs-opt-out-dialog', OptOutDialog);

package/src/components/opt-in-flyout/opt-out-flyout.js

@@ -0,0 +1,82 @@
+import '@brightspace-ui/core/components/typography/typography.js';
+import './flyout-impl.js';
+import { css, html, LitElement } from 'lit';
+
+class OptOutFlyout extends LitElement {
+
+	static get properties() {
+		return {
+			opened: { type: Boolean, reflect: true },
+			flyoutTitle: { attribute: 'flyout-title', type: String },
+			shortDescription: { type: String, attribute: 'short-description' },
+			longDescription: { type: String, attribute: 'long-description' },
+			tabPosition: { type: String, attribute: 'tab-position' },
+			noTransform: { type: Boolean, attribute: 'no-transform' },
+			tutorialLink: { type: String, attribute: 'tutorial-link' },
+			helpDocsLink: { type: String, attribute: 'help-docs-link' },
+			hideReason: { type: Boolean, attribute: 'hide-reason' },
+			hideFeedback: { type: Boolean, attribute: 'hide-feedback' }
+		};
+	}
+
+	static get styles() {
+		return css`
+			d2l-labs-opt-in-flyout-impl {
+				font-size: 20px;
+			}
+		`;
+	}
+
+	constructor() {
+		super();
+		this.opened = false;
+	}
+
+	render() {
+		return html`
+			<d2l-labs-opt-in-flyout-impl
+				id="flyout-impl"
+				class="d2l-typography"
+				opt-out
+				flyout-title="${this.flyoutTitle}"
+				short-description="${this.shortDescription}"
+				long-description="${this.longDescription}"
+				tab-position="${this.tabPosition}"
+				tutorial-link="${this.tutorialLink}"
+				help-docs-link="${this.helpDocsLink}"
+				?hide-reason="${this.hideReason}"
+				?hide-feedback="${this.hideFeedback}"
+				?no-transform="${this.noTransform}"
+				?opened="${this.opened}"
+				@flyout-opened="${this._handleOpened}"
+				@flyout-closed="${this._handleClosed}">
+				<slot></slot>
+			</d2l-labs-opt-in-flyout-impl>
+		`;
+	}
+
+	focus() {
+		if (!this.shadowRoot) {
+			return;
+		}
+
+		const element = this.shadowRoot.querySelector('d2l-labs-opt-in-flyout-impl');
+
+		if (!element) {
+			return;
+		}
+
+		element.focus();
+	}
+
+	_handleClosed() {
+		this.opened = false;
+	}
+
+	_handleOpened() {
+		this.opened = true;
+	}
+
+}
+
+customElements.define('d2l-labs-opt-out-flyout', OptOutFlyout);

package/src/components/opt-in-flyout/opt-out-reason-selector.js

@@ -0,0 +1,149 @@
+import './opt-out-reason.js';
+import { css, html, LitElement } from 'lit';
+import { composeMixins } from '@brightspace-ui/core/helpers/composeMixins.js';
+import { inputStyles } from '@brightspace-ui/core/components/inputs/input-styles.js';
+import { LocalizeLabsElement } from '../localize-labs-element.js';
+import { RtlMixin } from '@brightspace-ui/core/mixins/rtl-mixin.js';
+
+class OptOutReasonSelector extends composeMixins(
+	LitElement,
+	LocalizeLabsElement,
+	RtlMixin
+) {
+	static get properties() {
+		return {
+			_reasons: { state: true }
+		};
+	}
+
+	static get styles() {
+		return [
+			inputStyles,
+			css`
+				select {
+					-moz-appearance: none;
+					-webkit-appearance: none;
+					appearance: none;
+					background-image: url("data:image/svg+xml,%3Csvg%20width%3D%2242%22%20height%3D%2242%22%20viewBox%3D%220%200%2042%2042%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cpath%20fill%3D%22%23f2f3f5%22%20d%3D%22M0%200h42v42H0z%22%2F%3E%3Cpath%20stroke%3D%22%23d3d9e3%22%20d%3D%22M0%200v42%22%2F%3E%3Cpath%20d%3D%22M14.99%2019.582l4.95%204.95a1.5%201.5%200%200%200%202.122%200l4.95-4.95a1.5%201.5%200%200%200-2.122-2.122L21%2021.35l-3.888-3.89a1.5%201.5%200%200%200-2.12%202.122z%22%20fill%3D%22%23565A5C%22%2F%3E%3C%2Fsvg%3E");
+					background-position: right center;
+					background-repeat: no-repeat;
+					background-size: contain;
+					display: block;
+					margin-bottom: 1.5rem !important;
+					position: relative;
+					width: 80%;
+				}
+
+				/* for ie11 - avoid displaying default select arrow */
+				select::-ms-expand {
+					display: none;
+				}
+
+				/* for ie11 - prevent background box from covering select arrow */
+				select::-ms-value {
+					background-color: transparent;
+					color: var(--d2l-input-color);
+				}
+
+				:host([dir="rtl"]) select {
+					background-position: left center !important;
+				}
+
+				#options {
+					display: none;
+				}
+			`
+		];
+	}
+
+	constructor() {
+		super();
+		this._reasons = [];
+	}
+
+	connectedCallback() {
+		super.connectedCallback();
+		this._onSlotChanged();
+	}
+
+	render() {
+		return html`
+			<select class="d2l-input" id="selector" @change="${this._reasonSelected}" onload="${this.focus()}">
+				<option disabled="" value="">${this.localize('components:optInFlyout:feedbackChooseReason')}</option>
+				${this._reasons.map((item) => html`<option value="${item.key}">${item.text}</option>`)}
+				<option value="Other">${this.localize('components:optInFlyout:feedbackReasonOther')}</option>
+			</select>
+			<div id="options">
+				<slot id="options-slot" @slotchange="${this._onSlotChanged}"></slot>
+			</div>
+		`;
+	}
+
+	focus() {
+		this.shadowRoot.querySelector('#selector')?.focus();
+	}
+
+	_onSlotChanged() {
+		/* Passing <option> elements directly into a <select> tag with a slot doesn't work.
+		 * Instead, pass in <d2l-labs-opt-out-reason> elements, and this component will construct
+		 * the options from the passed in options.
+		 */
+		const selector = this.shadowRoot.querySelector('#selector');
+		if (!selector) {
+			return;
+		}
+		selector.selectedIndex = 0;
+		let children = this.shadowRoot.querySelector('#options-slot')?.assignedNodes({ flatten: true });
+
+		children = children.filter(child =>
+			child &&
+			child.tagName === 'D2L-LABS-OPT-OUT-REASON' &&
+			child.key &&
+			child.text
+		).map(child => ({
+			key: child.key,
+			text: child.text
+		}));
+
+		if (children.length <= 0) {
+			// Use default options if no valid options were provided
+			children = [
+				{ key: 'PreferOldExperience', text: this.localize('components:optInFlyout:feedbackReasonPreferOldExperience') },
+				{ key: 'MissingFeature', text: this.localize('components:optInFlyout:feedbackReasonMissingFeature') },
+				{ key: 'NotReadyForSomethingNew', text: this.localize('components:optInFlyout:feedbackReasonNotReadyForSomethingNew') },
+				{ key: 'JustCheckingSomething', text: this.localize('components:optInFlyout:feedbackReasonJustCheckingSomething') }
+			];
+		}
+
+		this._reasons = children;
+	}
+
+	_reasonSelected() {
+		const selectionIndex = this.shadowRoot.querySelector('#selector').selectedIndex;
+		if (selectionIndex < 1) {
+			this._setSelectedReason(null);
+			return;
+		}
+
+		const selection = this.shadowRoot.querySelector('#selector').options[selectionIndex];
+		if (!selection || !selection.value) {
+			this._setSelectedReason(null);
+			return;
+		}
+
+		this._setSelectedReason(selection.value);
+	}
+
+	_setSelectedReason(value) {
+		this.dispatchEvent(
+			new CustomEvent('selected', {
+				bubbles: true,
+				composed: true,
+				detail: { value }
+			})
+		);
+	}
+
+}
+
+customElements.define('d2l-labs-opt-out-reason-selector', OptOutReasonSelector);

package/src/components/opt-in-flyout/opt-out-reason.js

@@ -0,0 +1,22 @@
+import { css, LitElement } from 'lit';
+
+class OptOutReason extends LitElement {
+
+	static get properties() {
+		return {
+			key: { type: String },
+			text: { type: String }
+		};
+	}
+
+	static get styles() {
+		return css`
+			:host {
+				display: none;
+			}
+		`;
+	}
+
+}
+
+customElements.define('d2l-labs-opt-out-reason', OptOutReason);

package/src/lang/ar.js

@@ -1,4 +1,22 @@
-/* eslint quotes: 0 */
-
 export default {
+	"components:optInFlyout:cancel": "إلغاء",
+	"components:optInFlyout:close": "إغلاق مربع الحوار هذا",
+	"components:optInFlyout:done": "تم",
+	"components:optInFlyout:feedbackChooseReason": "-- يُرجى اختيار سبب --",
+	"components:optInFlyout:feedbackLabel": "ما الذي يمكننا القيام به لتتشوّق إلى استخدام خدمتنا؟",
+	"components:optInFlyout:feedbackReasonJustCheckingSomething": "أرجع للتحقّق من أمر ما فحسب",
+	"components:optInFlyout:feedbackReasonLabel": "هلا أخبرتنا بسبب رجوعك إلى الإصدار القديم؟",
+	"components:optInFlyout:feedbackReasonMissingFeature": "لا يتضمّن ميزة أستخدمها",
+	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "ليس الوقت مناسبًا لتجربة هذا الإصدار",
+	"components:optInFlyout:feedbackReasonOther": "غير ذلك",
+	"components:optInFlyout:feedbackReasonPreferOldExperience": "أعتقد أن الإصدار القديم يوفر تجربة أفضل",
+	"components:optInFlyout:helpMessage": "اقرأ *مستندات التعليمات* الخاصة بنا للبدء!",
+	"components:optInFlyout:leaveOff": "الاستمرار في إيقاف التشغيل",
+	"components:optInFlyout:leaveOn": "الاستمرار في التشغيل",
+	"components:optInFlyout:openOptIn": "فتح مربع حوار الاشتراك",
+	"components:optInFlyout:openOptOut": "فتح مربع حوار إلغاء الاشتراك",
+	"components:optInFlyout:tutorialAndHelpMessage": "شاهد *الدروس التعليمية* الخاصة بنا أو اقرأ ~مستندات التعليمات الخاصة بنا~ للبدء!",
+	"components:optInFlyout:tutorialMessage": "شاهد *الدروس التعليمية* الخاصة بنا لمساعدتك على البدء!",
+	"components:optInFlyout:turnOff": "إيقاف التشغيل",
+	"components:optInFlyout:turnOn": "التشغيل"
 };

package/src/lang/cy.js

@@ -1,4 +1,23 @@
-/* eslint quotes: 0 */
-
 export default {
+	"components:optInFlyout:cancel": "Canslo",
+	"components:optInFlyout:close": "Cau’r deialog 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: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!",
+	"components:optInFlyout:helpMessage": "Darllenwch ein *dogfennaeth cymorth* i gychwyn arni!",
+	"components:optInFlyout:leaveOff": "Gadewch e bant",
+	"components:optInFlyout:leaveOn": "Gadewch e ymlaen",
+	"components:optInFlyout:openOptIn": "Agor y deialog optio i mewn",
+	"components:optInFlyout:openOptOut": "Agor y deialog optio allan",
+	"components:optInFlyout:turnOff": "Diffoddwch e",
+	"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!"
 };

package/src/lang/da.js

@@ -1,4 +1,23 @@
-/* eslint quotes: 0 */
-
 export default {
+	"components:optInFlyout:cancel": "Annuller",
+	"components:optInFlyout:close": "Luk denne dialogboks",
+	"components:optInFlyout:done": "Udført",
+	"components:optInFlyout:feedbackChooseReason": "-- Vælg en årsag --",
+	"components:optInFlyout:feedbackLabel": "Hvad kan vi gøre, før dette bliver et produkt, du gerne vil bruge?",
+	"components:optInFlyout:feedbackReasonJustCheckingSomething": "Jeg skifter tilbage for at tjekke noget",
+	"components:optInFlyout:feedbackReasonLabel": "Vil du fortælle os, hvorfor du skifter tilbage?",
+	"components:optInFlyout:feedbackReasonMissingFeature": "Der mangler en funktion, som jeg skal bruge",
+	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "Det er ikke et godt tidspunkt for mig at prøve denne version",
+	"components:optInFlyout:feedbackReasonOther": "Andet",
+	"components:optInFlyout:feedbackReasonPreferOldExperience": "Jeg tror, at den gamle version er en bedre oplevelse",
+	"components:optInFlyout:feedbackTitle": "Fortæl os, hvordan vi kan gøre det bedre!",
+	"components:optInFlyout:helpMessage": "Læs vores *hjælp-dokumentation* for at komme i gang!",
+	"components:optInFlyout:leaveOff": "Lad den være slået fra",
+	"components:optInFlyout:leaveOn": "Lad den være slået til",
+	"components:optInFlyout:openOptIn": "Åbn tilmeldingsdialogboksen",
+	"components:optInFlyout:openOptOut": "Åbn udmeldelsesdialogboksen",
+	"components:optInFlyout:turnOff": "Slå den fra",
+	"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!"
 };

package/src/lang/de.js

@@ -1,4 +1,23 @@
-/* eslint quotes: 0 */
-
 export default {
+	"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: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",
+	"components:optInFlyout:feedbackReasonPreferOldExperience": "Ich finde, dass die alte Version ein besseres Erlebnis bietet",
+	"components:optInFlyout:feedbackTitle": "Sagen Sie uns, wie wir uns verbessern können!",
+	"components:optInFlyout:helpMessage": "Lesen Sie unsere *Hilfe-Dokumentation*, um zu beginnen!",
+	"components:optInFlyout:leaveOff": "Ausgeschaltet lassen",
+	"components:optInFlyout:leaveOn": "Eingeschaltet lassen",
+	"components:optInFlyout:openOptIn": "Aktivierungsdialog öffnen",
+	"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:tutorialMessage": "Unsere *Tutorials* helfen Ihnen beim Start!"
 };

package/src/lang/en.js

@@ -1,4 +1,23 @@
-/* eslint quotes: 0 */
-
 export default {
+	"components:optInFlyout:cancel": "Cancel",
+	"components:optInFlyout:close": "Close this dialog",
+	"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 dialog",
+	"components:optInFlyout:openOptOut": "Open the opt-out dialog",
+	"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!"
 };

package/src/lang/es-es.js

@@ -1,4 +1,23 @@
-/* eslint quotes: 0 */
-
 export default {
+	"components:optInFlyout:cancel": "Cancelar",
+	"components:optInFlyout:close": "Cerrar este cuadro de diálogo",
+	"components:optInFlyout:done": "Listo",
+	"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",
+	"components:optInFlyout:feedbackReasonLabel": "¿Le importaría decirnos por qué desea volver atrás?",
+	"components:optInFlyout:feedbackReasonMissingFeature": "Falta una función que utilizo",
+	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "No es un buen momento para probar esta versión",
+	"components:optInFlyout:feedbackReasonOther": "Otro",
+	"components:optInFlyout:feedbackReasonPreferOldExperience": "Creo que la versión anterior proporciona una experiencia mejor",
+	"components:optInFlyout:feedbackTitle": "Háganos saber cómo podemos mejorar.",
+	"components:optInFlyout:helpMessage": "¡Lea nuestra *documentación de ayuda* para comenzar!",
+	"components:optInFlyout:leaveOff": "Mantener desactivado",
+	"components:optInFlyout:leaveOn": "Mantener activado",
+	"components:optInFlyout:openOptIn": "Abrir el cuadro de diálogo de suscripción",
+	"components:optInFlyout:openOptOut": "Abrir el cuadro de diálogo de anulación de suscripción",
+	"components:optInFlyout:turnOff": "Desactivar",
+	"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."
 };

package/src/lang/es.js

@@ -1,4 +1,23 @@
-/* eslint quotes: 0 */
-
 export default {
+	"components:optInFlyout:cancel": "Cancelar",
+	"components:optInFlyout:close": "Cerrar este cuadro de diálogo",
+	"components:optInFlyout:done": "Listo",
+	"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",
+	"components:optInFlyout:feedbackReasonLabel": "¿Le importaría decirnos por qué desea volver atrás?",
+	"components:optInFlyout:feedbackReasonMissingFeature": "Falta una función que utilizo",
+	"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: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."
 };

package/src/lang/fr-fr.js

@@ -1,4 +1,23 @@
-/* eslint quotes: 0 */
-
 export default {
+	"components:optInFlyout:cancel": "Annuler",
+	"components:optInFlyout:close": "Fermer cette boîte de dialogue",
+	"components:optInFlyout:done": "Terminé",
+	"components:optInFlyout:feedbackChooseReason": "-- Choisissez un motif --",
+	"components:optInFlyout:feedbackLabel": "Que pourrions-nous améliorer pour que vous aimiez utiliser cette expérience ?",
+	"components:optInFlyout:feedbackReasonJustCheckingSomething": "Je souhaite juste revenir en arrière pour effectuer des vérifications",
+	"components:optInFlyout:feedbackReasonLabel": "Pourriez-vous nous expliquer pourquoi vous êtes revenu à l’ancienne expérience ?",
+	"components:optInFlyout:feedbackReasonMissingFeature": "Il manque l’une des fonctionnalités que j’utilise",
+	"components:optInFlyout:feedbackReasonNotReadyForSomethingNew": "Ce n’est pas le bon moment pour essayer cette version",
+	"components:optInFlyout:feedbackReasonOther": "Autre",
+	"components:optInFlyout:feedbackReasonPreferOldExperience": "Je pense que l’ancienne version est une meilleure expérience",
+	"components:optInFlyout:feedbackTitle": "Dites-nous comment nous améliorer !",
+	"components:optInFlyout:helpMessage": "Consultez notre * documentation d’aide * pour commencer !",
+	"components:optInFlyout:leaveOff": "Laisser désactivé",
+	"components:optInFlyout:leaveOn": "Laisser actif",
+	"components:optInFlyout:openOptIn": "Ouvrir la boîte de dialogue d’adhésion",
+	"components:optInFlyout:openOptOut": "Ouvrir la boîte de dialogue d’annulation d’adhésion",
+	"components:optInFlyout:turnOff": "Désactiver",
+	"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 !"
 };