diff options
author | Kevin Silva <kevin.silva@sonarsource.com> | 2023-05-11 14:53:21 +0200 |
---|---|---|
committer | sonartech <sonartech@sonarsource.com> | 2023-05-12 20:02:40 +0000 |
commit | 804a7a7d5a05ec01293c6ebfc85185b313b6670a (patch) | |
tree | fccffb435187262d718e614017356dd78009a36d /server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx | |
parent | 57573e1ea66e415b32bb9dfb2c575f16be1d8277 (diff) | |
download | sonarqube-804a7a7d5a05ec01293c6ebfc85185b313b6670a.tar.gz sonarqube-804a7a7d5a05ec01293c6ebfc85185b313b6670a.zip |
SONAR-19167 - Create KeyboardHint component in DS
Diffstat (limited to 'server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx')
-rw-r--r-- | server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx | 78 |
1 files changed, 78 insertions, 0 deletions
diff --git a/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx b/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx new file mode 100644 index 00000000000..7aa37f175d3 --- /dev/null +++ b/server/sonar-web/design-system/src/components/KeyboardHintKeys.tsx @@ -0,0 +1,78 @@ +/* + * SonarQube + * Copyright (C) 2009-2023 SonarSource SA + * mailto:info AT sonarsource DOT com + * + * This program is free software; you can redistribute it and/or + * modify it under the terms of the GNU Lesser General Public + * License as published by the Free Software Foundation; either + * version 3 of the License, or (at your option) any later version. + * + * This program is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU + * Lesser General Public License for more details. + * + * You should have received a copy of the GNU Lesser General Public License + * along with this program; if not, write to the Free Software Foundation, + * Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. + */ +import styled from '@emotion/styled'; +import tw from 'twin.macro'; +import { themeColor, themeContrast } from '../helpers'; +import { Key } from '../helpers/keyboard'; +import { TriangleDownIcon, TriangleLeftIcon, TriangleRightIcon, TriangleUpIcon } from './icons'; + +const COMMAND = '⌘'; +const CTRL = 'Ctrl'; +const OPTION = '⌥'; +const ALT = 'Alt'; +const NON_KEY_SYMBOLS = ['+', ' ']; + +export function KeyboardHintKeys({ command }: { command: string }) { + const keys = command + .trim() + .split(' ') + .map((key, index) => { + const uniqueKey = `${key}-${index}`; + if (NON_KEY_SYMBOLS.includes(key)) { + return <span key={uniqueKey}>{key}</span>; + } + + return <KeyBox key={uniqueKey}>{getKey(key)}</KeyBox>; + }); + + return <div className="sw-flex sw-gap-1">{keys}</div>; +} + +export const KeyBox = styled.span` + ${tw`sw-flex sw-items-center sw-justify-center`} + ${tw`sw-px-1/2`} + ${tw`sw-rounded-1/2`} + + color: ${themeContrast('keyboardHintKey')}; + background-color: ${themeColor('keyboardHintKey')}; +`; + +function getKey(key: string) { + switch (key) { + case Key.Control: + return CTRL; + case Key.Command: + return COMMAND; + case Key.Alt: + return ALT; + case Key.Option: + return OPTION; + case Key.ArrowUp: + return <TriangleUpIcon />; + case Key.ArrowDown: + return <TriangleDownIcon />; + case Key.ArrowLeft: + return <TriangleLeftIcon />; + case Key.ArrowRight: + return <TriangleRightIcon />; + default: + return key; + } +} |