feat(Keyboard): add KeyboardSearch component variant

packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.test.js

@@ -23,12 +23,14 @@ import KeyboardQwerty from './KeyboardQwerty.js';
 import KeyboardNumbers from './KeyboardNumbers.js';
 import KeyboardFullscreen from './KeyboardFullscreen.js';
 import KeyboardEmail from './KeyboardEmail.js';
+import KeyboardSearch from './KeyboardSearch.js';
 const createKeyboard = makeCreateComponent(Keyboard);
 const createKeyboardInput = makeCreateComponent(KeyboardInput);
 const createKeyboardQwerty = makeCreateComponent(KeyboardQwerty);
 const createKeyboardNumbers = makeCreateComponent(KeyboardNumbers);
 const createKeyboardFullscreen = makeCreateComponent(KeyboardFullscreen);
 const createKeyboardEmail = makeCreateComponent(KeyboardEmail);
+const createKeyboardSearch = makeCreateComponent(KeyboardSearch);
 
 describe('Keyboard', () => {
   let keyboard, testRenderer;
@@ -261,6 +263,15 @@ describe('Keyboard', () => {
       expect(Object.keys(keyboard.formats)).toHaveLength(5);
     });
   });
+
+  it('should create a KeyboardSearch format keyboard which has 1 format', () => {
+    [keyboard, testRenderer] = createKeyboardSearch();
+
+    keyboard._whenEnabled.then(() => {
+      expect(Object.keys(keyboard.formats)).toHaveLength(1);
+      expect(keyboard.defaultFormat).toEqual('uppercase');
+    });
+  });
 });
 
 describe('KeyboardInput', () => {

packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Keyboard from './Keyboard';
+
+export default class KeyboardSearch extends Keyboard {}

packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.js

@@ -0,0 +1,62 @@
+/**
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import Keyboard from './Keyboard';
+import * as styles from './Keyboard.styles.js';
+
+export default class KeyboardSearch extends Keyboard {
+  static get __componentName() {
+    return 'KeyboardSearch';
+  }
+
+  static get __themeStyle() {
+    return styles;
+  }
+
+  _construct() {
+    super._construct();
+    this.formats = this.searchFormat;
+  }
+
+  get searchFormat() {
+    return {
+      uppercase: [
+        ['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', '1', '2', '3', '4'],
+        ['5', '6', '7', '8', '9', '0'],
+        [
+          {
+            title: 'Space',
+            size: 'lg',
+            keyId: 'space',
+            announce: 'space, button'
+          },
+          {
+            title: 'Delete',
+            size: 'md',
+            keyId: 'delete',
+            announce: 'delete, button'
+          }
+        ]
+      ]
+    };
+  }
+}

packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.stories.js

@@ -0,0 +1,55 @@
+/**
+ * Copyright 2023 Comcast Cable Communications Management, LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ *
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+import lng from '@lightningjs/core';
+import mdx from './Keyboard.mdx';
+import { CATEGORIES } from '../../docs/constants';
+import { context } from '../../globals';
+import utils from '../../utils';
+import { default as KeyboardSearchComponent } from './KeyboardSearch';
+import { Keyboard } from './Keyboard.stories';
+
+export default {
+  title: `${CATEGORIES[8]}/KeyboardSearch`,
+  parameters: {
+    docs: {
+      page: mdx
+    }
+  }
+};
+
+export const KeyboardSearch = () =>
+  class KeyboardSearch extends lng.Component {
+    static _template() {
+      return {
+        Keyboard: {
+          type: KeyboardSearchComponent,
+          defaultFormat: 'uppercase'
+        },
+        w: utils.getWidthByUpCount(context.theme, 1)
+      };
+    }
+  };
+
+KeyboardSearch.storyName = 'KeyboardSearch';
+KeyboardSearch.args = {
+  centerKeyboard: false,
+  mode: 'focused'
+};
+KeyboardSearch.argTypes = Keyboard.sharedArgTypes;
+KeyboardSearch.parameters = {};