@24i/bigscreen-sdk 0.9.9-alpha.2147

package/packages/keyboard/src/WhitelabelKeyboard/Keyboard.tsx

@@ -0,0 +1,354 @@
+import { clearNode, DeclareProps } from '@24i/bigscreen-sdk/jsx';
+import { Matrix } from '@24i/bigscreen-sdk/focus';
+import { Interactable } from '@24i/bigscreen-sdk/interactable';
+import { map } from '@24i/bigscreen-sdk/perf-utils/array';
+import { Backdrop } from '../Backdrop/Backdrop';
+import { BaseProps, KeyboardBase } from '../KeyboardBase';
+import { KeyMatrixCell } from '../types';
+import { makeNormalFocusStrings, makeSpecialFocusStrings } from './focusMatrix';
+import { KeyTexts } from './types';
+import './Keyboard.styles';
+
+type Layouts = 'normal' | 'special';
+
+export type Props = BaseProps<Layouts> & {
+    texts?: KeyTexts;
+    makeFocusStrings?: Record<Layouts, (base: KeyMatrixCell[][]) => KeyMatrixCell[][]>,
+};
+
+const NORMAL_LAYOUT = [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+    ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j'],
+    ['k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't'],
+    ['u', 'v', 'w', 'x', 'y', 'z', '.', '@', '-', '_'],
+];
+
+const SPECIAL_LAYOUT = [
+    ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0'],
+    ['{', '}', '[', ']', '^', '%', '*', '#', '+', '='],
+    ['<', '>', '~', '/', '|', '\\', '(', ')', '&', '“'],
+    [';', ':', '‘', '!', '?', ',', '.', '@', '-', '_'],
+    ['$', '€'], ['£', '¥'],
+];
+
+export class Keyboard extends KeyboardBase<Layouts, Props> {
+    static defaultProps = {
+        ...KeyboardBase.defaultProps,
+        layouts: {
+            normal: NORMAL_LAYOUT,
+            special: SPECIAL_LAYOUT,
+        },
+        makeFocusStrings: {
+            normal: makeNormalFocusStrings,
+            special: makeSpecialFocusStrings,
+        },
+        texts: {
+            toNormalLayout: 'Abc',
+            toSpecialLayout: '+/#',
+            space: 'Space',
+            domain: '.com',
+            clear: 'Clear',
+            continue: 'Continue',
+        },
+        initialFocus: { x: 5, y: 2 },
+    };
+
+    renderedLayout: Layouts | undefined = undefined;
+
+    declare props: DeclareProps<Props, typeof Keyboard.defaultProps>;
+
+    createFocusMatrices() {
+        const { layouts, makeFocusStrings } = this.props;
+        super.createFocusMatrices({
+            normal: makeFocusStrings.normal(layouts.normal),
+            special: makeFocusStrings.special(layouts.special),
+        });
+    }
+
+    show() {
+        super.show();
+        this.renderedLayout = 'normal';
+        this.renderNormal();
+    }
+
+    hide() {
+        super.hide();
+        this.renderedLayout = undefined;
+        clearNode(this.keyboardWrapper);
+    }
+
+    onAbc = () => {
+        if (this.renderedLayout === 'normal') return;
+        this.renderedLayout = 'normal';
+        this.renderNormal();
+        this.matrix.current!.setIndex({ x: 0, y: 1 });
+        this.matrix.current!.focus();
+    };
+
+    onSpecial = () => {
+        if (this.renderedLayout === 'special') return;
+        this.renderedLayout = 'special';
+        this.renderSpecial();
+        this.matrix.current!.setIndex({ x: 0, y: 2 });
+        this.matrix.current!.focus();
+    };
+
+    generateKey = (char: string) => (
+        <Interactable
+            ref={this.keyRefs[char]}
+            className={`key key-${char}`}
+            onPress={() => this.onKey(char)}
+        >
+            <div className="key-background">
+                {char}
+            </div>
+        </Interactable>
+    );
+
+    renderNormal() {
+        const { texts, circular } = this.props;
+        this.clearMount(
+            <Matrix
+                ref={this.matrix}
+                domRef={this.keyboardWrapper}
+                matrix={this.focusMatrices.normal}
+                circular={circular}
+            >
+                {this.renderKeyboard([
+                    <>
+                        <div className="key-row first-row rounded-border-container">
+                            {map(NORMAL_LAYOUT[0], this.generateKey)}
+                        </div>
+                        <div className="rounded-border-container">
+                            <div className="key-row key-chars">
+                                {map(NORMAL_LAYOUT[1], this.generateKey)}
+                            </div>
+                            <div className="key-row key-chars">
+                                {map(NORMAL_LAYOUT[2], this.generateKey)}
+                            </div>
+                            <div className="key-row key-chars">
+                                {
+                                    // eslint-disable-next-line no-magic-numbers
+                                    map(NORMAL_LAYOUT[3], this.generateKey)
+                                }
+                            </div>
+                            <div className="key-row">
+                                <Interactable
+                                    ref={this.keyRefs.shift}
+                                    className="key key-wide key-with-icon key-shift"
+                                    onPress={() => this.onShift()}
+                                >
+                                    <div className="key-background">
+                                        <div className="key-mask-icon" />
+                                    </div>
+                                </Interactable>
+                                <Interactable
+                                    ref={this.keyRefs.space}
+                                    className="key key-wide key-space"
+                                    onPress={() => { this.onKey(' '); }}
+                                >
+                                    <div className="key-background">
+                                        {texts.space}
+                                    </div>
+                                </Interactable>
+                                <Interactable
+                                    ref={this.keyRefs.domain}
+                                    className="key key-wide key-domain"
+                                    onPress={() => {
+                                        this.onKey(
+                                            this.keyRefs.domain.current!.firstChild!.textContent!,
+                                        );
+                                    }}
+                                >
+                                    <div className="key-background">
+                                        {texts.domain}
+                                    </div>
+                                </Interactable>
+                            </div>
+                        </div>
+                    </>,
+                ])}
+            </Matrix>,
+            this.keyboardWrapper,
+        );
+    }
+
+    renderSpecial() {
+        const { texts, circular } = this.props;
+        this.clearMount(
+            <Matrix
+                ref={this.matrix}
+                domRef={this.keyboardWrapper}
+                matrix={this.focusMatrices.special}
+                circular={circular}
+            >
+                {this.renderKeyboard([
+                    <>
+                        <div className="key-row first-row rounded-border-container">
+                            {map(SPECIAL_LAYOUT[0], this.generateKey)}
+                        </div>
+                        <div className="rounded-border-container">
+                            <div className="key-row">
+                                {map(SPECIAL_LAYOUT[1], this.generateKey)}
+                            </div>
+                            <div className="key-row">
+                                {map(SPECIAL_LAYOUT[2], this.generateKey)}
+                            </div>
+                            <div className="key-row">
+                                {
+                                    // eslint-disable-next-line no-magic-numbers
+                                    map(SPECIAL_LAYOUT[3], this.generateKey)
+                                }
+                            </div>
+                            <div className="key-row">
+                                {
+                                    // eslint-disable-next-line no-magic-numbers
+                                    map(SPECIAL_LAYOUT[4], this.generateKey)
+                                }
+                                <Interactable
+                                    ref={this.keyRefs.space}
+                                    className="key key-wide key-space"
+                                    onPress={() => { this.onKey(' '); }}
+                                >
+                                    <div className="key-background">
+                                        {texts.space}
+                                    </div>
+                                </Interactable>
+                                {
+                                    // eslint-disable-next-line no-magic-numbers
+                                    map(SPECIAL_LAYOUT[5], this.generateKey)
+                                }
+                            </div>
+                        </div>
+                    </>,
+                ])}
+            </Matrix>,
+            this.keyboardWrapper,
+        );
+    }
+
+    renderKeyboard(layout: JSX.Element[]) {
+        const { texts, shouldHideOnBackdropClick } = this.props;
+        const isSpecialLayout = this.renderedLayout === 'special';
+        const isNormalLayout = this.renderedLayout === 'normal';
+        return (
+            <>
+                <Backdrop
+                    onClick={() => this.onCancel()}
+                    enableOnClick={shouldHideOnBackdropClick}
+                />
+                <div className="keyboard-wrapper">
+                    <div className="keys-container side-bar layout-selector">
+                        <div className="key-row first-row">
+                            <div className="key key-wide key-empty">&nbsp;</div>
+                        </div>
+                        <div className="rounded-border-container">
+                            <div className="key-row">
+                                <Interactable
+                                    ref={this.keyRefs.abc}
+                                    className={
+                                        `key key-wide key-abc ${isNormalLayout ? 'active' : ''}`
+                                    }
+                                    onPress={this.onAbc}
+                                >
+                                    <div className="key-background">
+                                        {texts.toNormalLayout}
+                                    </div>
+                                </Interactable>
+                            </div>
+                            <div className="key-row">
+                                <Interactable
+                                    ref={this.keyRefs.special}
+                                    className={
+                                        `key key-wide key-special ${
+                                            isSpecialLayout ? 'active' : ''
+                                        }`
+                                    }
+                                    onPress={this.onSpecial}
+                                >
+                                    <div className="key-background">
+                                        {texts.toSpecialLayout}
+                                    </div>
+                                </Interactable>
+                            </div>
+                        </div>
+                        <div className="key-row">
+                            <div className="key key-wide key-empty">&nbsp;</div>
+                        </div>
+                        <div className="key-row">
+                            <div className="key key-wide key-empty">&nbsp;</div>
+                        </div>
+                    </div>
+                    <div className="keys-container key-layout">
+                        {layout}
+                    </div>
+
+                    <div className="keys-container side-bar controls">
+                        <div className="key-row first-row rounded-border-container">
+                            <Interactable
+                                ref={this.keyRefs.backspace}
+                                className="key key-wide key-with-icon key-backspace"
+                                onPress={() => this.onBackspace()}
+                            >
+                                <div className="key-background">
+                                    <div className="key-mask-icon" />
+                                </div>
+                            </Interactable>
+                        </div>
+                        <div className="rounded-border-container">
+                            <div className="key-row">
+                                <Interactable
+                                    ref={this.keyRefs.clear}
+                                    className="key key-wide key-clear"
+                                    onPress={() => this.onClear()}
+                                >
+                                    <div className="key-background">
+                                        {texts.clear}
+                                    </div>
+                                </Interactable>
+                            </div>
+                            <div className="key-row">
+                                <div className="key-arrows">
+                                    <Interactable
+                                        ref={this.keyRefs.left}
+                                        className="key key-with-icon key-left"
+                                        onPress={() => this.onLeft()}
+                                    >
+                                        <div className="key-background">
+                                            <div className="key-mask-icon" />
+                                        </div>
+                                    </Interactable>
+                                    <Interactable
+                                        ref={this.keyRefs.right}
+                                        className="key key-with-icon key-right"
+                                        onPress={() => this.onRight()}
+                                    >
+                                        <div className="key-background">
+                                            <div className="key-mask-icon" />
+                                        </div>
+                                    </Interactable>
+                                </div>
+                            </div>
+                        </div>
+                        <div className="key-row">
+                            <div className="key key-wide key-empty">&nbsp;</div>
+                        </div>
+                        <div className="rounded-border-container">
+                            <div className="key-row">
+                                <Interactable
+                                    ref={this.keyRefs.continue}
+                                    className="key key-wide key-continue"
+                                    onPress={() => this.onDone()}
+                                >
+                                    <div className="key-background">
+                                        {texts.continue}
+                                    </div>
+                                </Interactable>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </>
+        );
+    }
+}

package/packages/keyboard/src/WhitelabelKeyboard/WhitelabelStyles/_sizes.1080.scss

@@ -0,0 +1,7 @@
+$normal-font-size: 30px;
+$normal-letter-spacing: -0.31px;
+$normal-line-height: normal;
+
+$small-font-size: 24px;
+$small-letter-spacing: -0.26px;
+$small-line-height: normal;

package/packages/keyboard/src/WhitelabelKeyboard/WhitelabelStyles/_sizes.scss

@@ -0,0 +1,7 @@
+$normal-font-size: 20px;
+$normal-letter-spacing: -0.21px;
+$normal-line-height: normal;
+
+$small-font-size: 16px;
+$small-letter-spacing: -0.17px;
+$small-line-height: normal;

package/packages/keyboard/src/WhitelabelKeyboard/WhitelabelStyles/index.ts

@@ -0,0 +1 @@
+import './whitelabel.styles';

package/packages/keyboard/src/WhitelabelKeyboard/WhitelabelStyles/whitelabel.scss

@@ -0,0 +1,77 @@
+// Colors
+$key-background: rgb(255, 255, 255);
+$focus-background: rgb(255, 255, 255, 0.1);
+$keyboard-background: rgba(31, 31, 31, 0.9);
+$keyboard-background-over: rgba(31, 31, 31, 0.9);
+$dark-background: rgba(97, 98, 100, 0.8);
+$medium-background: rgba(97, 98, 100, 0.6);
+$light-background: rgba(97, 98, 100, 0.3);
+
+.keyboard {
+    background-color: $keyboard-background;
+
+    .keyboard-wrapper {
+        background-color: $keyboard-background-over;
+    }
+
+    .key-layout,
+    .side-bar.controls {
+        .rounded-border-container {
+            background-color: $light-background;
+        }
+    }
+
+    .key {
+        &.key-abc,
+        &.key-special {
+            background-color: $medium-background;
+            
+            &.active {
+                background-color: $light-background;
+            }
+        }
+
+        &.key-space {
+            background-color: $dark-background;
+        }
+
+        &:focus {
+            .key-background {
+                background-color: $focus-background;
+                border-color: $key-background;
+            }
+        }
+
+        .key-mask-icon {
+            background-color: $key-background;
+        }
+    }
+}
+
+// Typography
+.keyboard {
+    .keys-container {
+        &.key-layout {
+            font-size: $normal-font-size;
+            font-weight: 700;
+            letter-spacing: $normal-letter-spacing;
+            line-height: $normal-line-height;
+
+            .rounded-border-container {
+                .key-row:last-child {
+                    font-size: $small-font-size;
+                    font-weight: 600;
+                    letter-spacing: $small-letter-spacing;
+                    line-height: $small-line-height;
+                }
+            }
+        }
+
+        &.side-bar {
+            font-size: $small-font-size;
+            font-weight: 600;
+            letter-spacing: $small-letter-spacing;
+            line-height: $small-line-height;
+        }
+    }
+}

package/packages/keyboard/src/WhitelabelKeyboard/WhitelabelStyles/whitelabel.styles.1080.scss

@@ -0,0 +1,2 @@
+@import './sizes.1080';
+@import './whitelabel';

package/packages/keyboard/src/WhitelabelKeyboard/WhitelabelStyles/whitelabel.styles.scss

@@ -0,0 +1,2 @@
+@import './sizes';
+@import './whitelabel';

package/packages/keyboard/src/WhitelabelKeyboard/_sizes.1080.scss

@@ -0,0 +1,31 @@
+$keyboard-padding-top: 24px;
+$keyboard-padding-bottom: 54px;
+
+$keys-container-margin: 0 12px;
+
+$side-bar-width: 176px;
+
+$key-row-height: 74px;
+
+$first-row-bottom-margin: 24px;
+
+$key-border-radius: 8px;
+$key-border-size: 2px;
+$key-padding: 18px;
+$key-height: 74px;
+$key-width: 88px;
+
+$rounded-border-container-shadow-1: 0 4px 6px 0;
+$rounded-border-container-shadow-2: 0 1px 1px 0;
+
+$key-wide-padding: 21px 18px;
+$key-wide-width: 176px;
+
+$icon-mask-size: 40px;
+
+$key-with-icon-padding: 17px 22px;
+
+$key-space-width: 528px;
+
+$focus-shadow-1: 0 1px 3px 0;
+$focus-shadow-2: 0 20px 32px 0;

package/packages/keyboard/src/WhitelabelKeyboard/_sizes.scss

@@ -0,0 +1,31 @@
+$keyboard-padding-top: 16px;
+$keyboard-padding-bottom: 37px;
+
+$keys-container-margin: 0 8px;
+
+$side-bar-width: 118px;
+
+$key-row-height: 49px;
+
+$first-row-bottom-margin: 16px;
+
+$key-border-radius: 5px;
+$key-border-size: 1px;
+$key-padding: 12px;
+$key-height: 49px;
+$key-width: 58px;
+
+$rounded-border-container-shadow-1: 0 3px 4px 0;
+$rounded-border-container-shadow-2: 0 1px 1px 0;
+
+$key-wide-padding: 14px 12px;
+$key-wide-width: 116px;
+
+$icon-mask-size: 27px;
+
+$key-with-icon-padding: 11px 15px;
+
+$key-space-width: 348px;
+
+$focus-shadow-1: 0 1px 2px 0;
+$focus-shadow-2: 0 13px 21px 0;

package/packages/keyboard/src/WhitelabelKeyboard/focusMatrix.ts

@@ -0,0 +1,19 @@
+/* eslint-disable no-magic-numbers */
+import { KeyMatrixCell } from '../types';
+
+/* eslint-disable max-len */
+export const makeNormalFocusStrings = (layout: KeyMatrixCell[][]) => [
+    ['', '', ...layout[0], 'backspace', 'backspace'],
+    ['abc', 'abc', ...layout[1], 'clear', 'clear'],
+    ['special', 'special', ...layout[2], 'left', 'right'],
+    ['', '', ...layout[3], '', ''],
+    ['', '', 'shift', 'shift', 'space', 'space', 'space', 'space', 'space', 'space', 'domain', 'domain', 'continue', 'continue'],
+];
+
+export const makeSpecialFocusStrings = (layout: KeyMatrixCell[][]) => [
+    ['', '', ...layout[0], 'backspace', 'backspace'],
+    ['abc', 'abc', ...layout[1], 'clear', 'clear'],
+    ['special', 'special', ...layout[2], 'left', 'right'],
+    ['', '', ...layout[3], '', ''],
+    ['', '', ...layout[4], 'space', 'space', 'space', 'space', 'space', 'space', ...layout[5], 'continue', 'continue'],
+];

package/packages/keyboard/src/WhitelabelKeyboard/icons/arrow_left.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>System icons/onPrimary-back</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="arrow_back_ios-24px" transform="translate(0.000000, 0.000000)">
+            <polygon id="Path" opacity="0.87" points="0 0 40 0 40 40 0 40"></polygon>
+            <path d="M27.7,4.98333333 C26.8833333,4.16666667 25.5666667,4.16666667 24.75,4.98333333 L10.9,18.8333333 C10.25,19.4833333 10.25,20.5333333 10.9,21.1833333 L24.75,35.0333333 C25.5666667,35.85 26.8833333,35.85 27.7,35.0333333 C28.5166667,34.2166667 28.5166667,32.9 27.7,32.0833333 L15.6333333,20 L27.7166667,7.91666667 C28.5166667,7.11666667 28.5166667,5.78333333 27.7,4.98333333 Z" id="Path" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>

package/packages/keyboard/src/WhitelabelKeyboard/icons/arrow_right.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>System icons/onPrimary-back_rtl</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="arrow_forward_ios-24px" transform="translate(0.000000, 0.000000)">
+            <polygon id="Path" opacity="0.87" points="40 40 0 40 0 0 40 0"></polygon>
+            <path d="M12.3,35.0166667 C13.1166667,35.8333333 14.4333333,35.8333333 15.25,35.0166667 L29.1,21.1666667 C29.75,20.5166667 29.75,19.4666667 29.1,18.8166667 L15.25,4.96666667 C14.4333333,4.15 13.1166667,4.15 12.3,4.96666667 C11.4833333,5.78333333 11.4833333,7.1 12.3,7.91666667 L24.3666667,20 L12.2833333,32.0833333 C11.4833333,32.8833333 11.4833333,34.2166667 12.3,35.0166667 Z" id="Path" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>

package/packages/keyboard/src/WhitelabelKeyboard/icons/key_backspace.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>System icons/onPrimary-Backspace</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="backspace-white-18dp-2" transform="translate(5.000000, 5.000000)">
+            <polygon id="Path" points="0 0 30 0 30 30 0 30"></polygon>
+            <path d="M27.5,3.75 L8.75,3.75 C7.8875,3.75 7.2125,4.1875 6.7625,4.85 L0.4625,14.3125 C0.1875,14.7375 0.1875,15.275 0.4625,15.7 L6.7625,25.15 C7.2125,25.8 7.8875,26.25 8.75,26.25 L27.5,26.25 C28.875,26.25 30,25.125 30,23.75 L30,6.25 C30,4.875 28.875,3.75 27.5,3.75 Z M22.875,20.375 C22.3875,20.8625 21.6,20.8625 21.1125,20.375 L17.5,16.7625 L13.8875,20.375 C13.4,20.8625 12.6125,20.8625 12.125,20.375 C11.6375,19.8875 11.6375,19.1 12.125,18.6125 L15.7375,15 L12.125,11.3875 C11.6375,10.9 11.6375,10.1125 12.125,9.625 C12.6125,9.1375 13.4,9.1375 13.8875,9.625 L17.5,13.2375 L21.1125,9.625 C21.6,9.1375 22.3875,9.1375 22.875,9.625 C23.3625,10.1125 23.3625,10.9 22.875,11.3875 L19.2625,15 L22.875,18.6125 C23.35,19.0875 23.35,19.8875 22.875,20.375 Z" id="Shape" fill="#FFFFFF" fill-rule="nonzero"></path>
+        </g>
+    </g>
+</svg>

package/packages/keyboard/src/WhitelabelKeyboard/icons/key_shift.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>System icons/onPrimary-capslockOff</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Combined-Shape-2" transform="translate(-0.833333, -0.833333)">
+            <polygon id="Path" opacity="0.87" points="0.833333333 0.833333333 40.8333333 0.833333333 40.8333333 40.8333333 0.833333333 40.8333333"></polygon>
+            <path d="M19.0618475,5.70528281 L5.73838295,18.497703 C4.75642143,19.4405256 4.75350554,20.9719532 5.73187014,21.9182421 L5.91611588,22.0795991 C6.36320056,22.4337663 6.92602103,22.6298011 7.50986876,22.6298011 L14.0208325,22.6290569 L14.0208325,29.2479762 C14.0208325,30.5837821 15.144539,31.6666667 16.5307012,31.6666667 L25.1359655,31.6666667 L25.3418137,31.6586488 C26.6316891,31.5577459 27.6458342,30.5169918 27.6458342,29.2479762 L27.6458342,22.6290569 L34.1567979,22.6298011 C35.5429602,22.6298011 36.6666667,21.5469165 36.6666667,20.2111107 C36.6666667,19.5680961 36.4009689,18.9515479 35.9282837,18.497703 L22.6048192,5.70528281 C21.6254047,4.76490573 20.041262,4.76490573 19.0618475,5.70528281 Z M20.8333333,8.88260234 L31.5526242,19.1737848 L24.0603074,19.174529 L24.0603074,28.2113946 L17.6063593,28.2113946 L17.6063593,19.174529 L10.1126083,19.1737848 L20.8333333,8.88260234 Z" id="Combined-Shape" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>

package/packages/keyboard/src/WhitelabelKeyboard/icons/key_shift_active.svg

@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>System icons/onPrimary-capslockOnce</title>
+    <g id="Icons" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Combined-Shape-2" transform="translate(-0.833333, -0.833333)">
+            <polygon id="Path" opacity="0.87" points="0.833333333 0.833333333 40.8333333 0.833333333 40.8333333 40.8333333 0.833333333 40.8333333"></polygon>
+            <path d="M19.0618475,5.70528281 L5.73838295,18.497703 C4.75642143,19.4405256 4.75350554,20.9719532 5.73187014,21.9182421 L5.91611588,22.0795991 C6.36320056,22.4337663 6.92602103,22.6298011 7.50986876,22.6298011 L14.0208325,22.6290569 L14.0208325,29.2479762 C14.0208325,30.5837821 15.144539,31.6666667 16.5307012,31.6666667 L25.1359655,31.6666667 L25.3418137,31.6586488 C26.6316891,31.5577459 27.6458342,30.5169918 27.6458342,29.2479762 L27.6458342,22.6290569 L34.1567979,22.6298011 C35.5429602,22.6298011 36.6666667,21.5469165 36.6666667,20.2111107 C36.6666667,19.5680961 36.4009689,18.9515479 35.9282837,18.497703 L22.6048192,5.70528281 C21.6254047,4.76490573 20.041262,4.76490573 19.0618475,5.70528281 Z" id="Combined-Shape" fill="#FFFFFF"></path>
+        </g>
+    </g>
+</svg>

package/packages/keyboard/src/WhitelabelKeyboard/index.ts

@@ -0,0 +1,2 @@
+export { Keyboard } from './Keyboard';
+export type { Props } from './Keyboard';

package/packages/keyboard/src/WhitelabelKeyboard/types.ts

@@ -0,0 +1,8 @@
+export type KeyTexts = {
+    toNormalLayout: string | JSX.Element,
+    toSpecialLayout: string | JSX.Element,
+    space: string | JSX.Element,
+    domain: string | JSX.Element,
+    clear: string | JSX.Element,
+    continue: string | JSX.Element,
+};