From 23d527dd67fcd393e0f6cd428b2bbe68e8ced338 Mon Sep 17 00:00:00 2001 From: Ladi Adenusi Date: Wed, 8 Nov 2023 14:10:33 +0000 Subject: [PATCH] feat(Keyboard): add KeyboardSearch component variant --- .../src/components/Keyboard/Keyboard.test.js | 11 ++++ .../components/Keyboard/KeyboardSearch.d.ts | 21 +++++++ .../src/components/Keyboard/KeyboardSearch.js | 62 +++++++++++++++++++ .../Keyboard/KeyboardSearch.stories.js | 55 ++++++++++++++++ 4 files changed, 149 insertions(+) create mode 100644 packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.d.ts create mode 100644 packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.js create mode 100644 packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.stories.js diff --git a/packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.test.js b/packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.test.js index bdf5b2f29..709af047b 100644 --- a/packages/@lightningjs/ui-components/src/components/Keyboard/Keyboard.test.js +++ b/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', () => { diff --git a/packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.d.ts b/packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.d.ts new file mode 100644 index 000000000..ab6437643 --- /dev/null +++ b/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 {} diff --git a/packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.js b/packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.js new file mode 100644 index 000000000..2e6dd5a39 --- /dev/null +++ b/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' + } + ] + ] + }; + } +} diff --git a/packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.stories.js b/packages/@lightningjs/ui-components/src/components/Keyboard/KeyboardSearch.stories.js new file mode 100644 index 000000000..6f9a1455c --- /dev/null +++ b/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 = {};