diff --git a/packages/ui5-webcomponents-react-seed/package.json b/packages/ui5-webcomponents-react-seed/package.json index 23f794f8063..b615d8a7c43 100644 --- a/packages/ui5-webcomponents-react-seed/package.json +++ b/packages/ui5-webcomponents-react-seed/package.json @@ -82,8 +82,8 @@ "test:coverage": "npm run test -- --watchAll=false --coverage", "lint": "eslint --quiet .", "lint:fix": "eslint . --fix", - "prettier": "./node_modules/.bin/prettier --config .prettierrc --check 'src/**/*.js'", - "prettier:fix": "./node_modules/.bin/prettier --config .prettierrc --write 'src/**/*.js'", + "prettier": "./node_modules/.bin/prettier --config .prettierrc --check \"src/**/*.js\"", + "prettier:fix": "./node_modules/.bin/prettier --config .prettierrc --write \"src/**/*.js\"", "eject": "react-scripts eject", "push:pre": "npm-run-all --parallel test:ci lint prettier", "publish:clean": "rm -rf ./template/src ./template/server ./template/.vscode ./template/public && rm -f ./template/.editorconfig ./template/.env.development ./template/.env.production ./template/.eslintignore ./template/.eslintrc.js ./template/.prettierrc ./template/commitlint.config.js ./template/jest.config.json ./template/PULL_REQUEST_TEMPLATE.md ./template/README.md ./template/webpack.config.js", diff --git a/packages/ui5-webcomponents-react-seed/public/index.html b/packages/ui5-webcomponents-react-seed/public/index.html index 3ce5ce8e8f8..7bf1e91a06c 100644 --- a/packages/ui5-webcomponents-react-seed/public/index.html +++ b/packages/ui5-webcomponents-react-seed/public/index.html @@ -18,12 +18,6 @@ "rtl": false } - diff --git a/packages/ui5-webcomponents-react-seed/src/App.css b/packages/ui5-webcomponents-react-seed/src/App.css index 0cc1ec399b2..58f756226fd 100644 --- a/packages/ui5-webcomponents-react-seed/src/App.css +++ b/packages/ui5-webcomponents-react-seed/src/App.css @@ -17,7 +17,6 @@ code { #root { width: 100%; - background-color: 'var(--sapBackgroundColor)'; height: 100%; display: flex; flex-direction: column; diff --git a/packages/ui5-webcomponents-react-seed/src/components/InformationDialog/InformationDialog.js b/packages/ui5-webcomponents-react-seed/src/components/InformationDialog/InformationDialog.js new file mode 100644 index 00000000000..d7753b6c5be --- /dev/null +++ b/packages/ui5-webcomponents-react-seed/src/components/InformationDialog/InformationDialog.js @@ -0,0 +1,132 @@ +import React, { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; +import { spacing } from '@ui5/webcomponents-react-base'; +import { Icon } from '@ui5/webcomponents-react/lib/Icon'; +import { Button } from '@ui5/webcomponents-react/lib/Button'; +import { ButtonDesign } from '@ui5/webcomponents-react/lib/ButtonDesign'; +import { Dialog } from '@ui5/webcomponents-react/lib/Dialog'; +import { FlexBox } from '@ui5/webcomponents-react/lib/FlexBox'; +import { FlexBoxDirection } from '@ui5/webcomponents-react/lib/FlexBoxDirection'; +import { FlexBoxAlignItems } from '@ui5/webcomponents-react/lib/FlexBoxAlignItems'; +import { FlexBoxJustifyContent } from '@ui5/webcomponents-react/lib/FlexBoxJustifyContent'; +import { Text } from '@ui5/webcomponents-react/lib/Text'; + +const KEYBOARD_KEYS = { + ESCAPE: 27, +}; + +const style = { + warning: { + width: '1.5rem', + height: '1.5rem', + color: '#feb60a', + }, + error: { + width: '1.5rem', + height: '1.5rem', + color: '#ff5254', + }, + information: { + width: '1.5rem', + height: '1.5rem', + color: 'black', + }, + text: { + lineHeight: '20px', + }, +}; + +const _getHeaderIcon = (type) => { + switch (type) { + case Type.Warning: + return _getHeaderWarningIcon(); + case Type.Error: + return _getHeaderErrorIcon(); + default: + return _getHeaderInfoIcon(); + } +}; + +const _getHeaderWarningIcon = () => { + return ; +}; + +const _getHeaderErrorIcon = () => { + return ; +}; + +const _getHeaderInfoIcon = () => { + return ; +}; + +const _handleAvoidEscapeClosing = (avoidEscapeClose) => { + document.addEventListener( + 'keydown', + (e) => { + if (e.keyCode === KEYBOARD_KEYS.ESCAPE && avoidEscapeClose) { + e.stopPropagation(); + } + }, + true, + ); +}; + +const InformationDialog = ({ dialogRef, avoidEscapeClose, headerText, innerText, closeButtonText, children, onClose, type }) => { + const { t } = useTranslation(); + + useEffect(() => { + _handleAvoidEscapeClosing(avoidEscapeClose); + }); + + const _onClose = () => { + onClose && onClose(); + if (dialogRef.current) { + dialogRef.current.close(); + } + }; + + const _getFooter = () => { + return ( + + + + ); + }; + + const _getHeader = () => { + return ( + + {_getHeaderIcon(type)} + + {headerText} + + + ); + }; + + return ( + +
+ + {innerText ? ( + + {innerText} + + ) : ( + children + )} + +
+ + ); +}; + +export default InformationDialog; + +export const Type = { + Warning: 'WARNING', + Error: 'ERROR', + Info: 'INFO', +}; diff --git a/packages/ui5-webcomponents-react-seed/src/components/InformationDialog/InformationDialog.test.js b/packages/ui5-webcomponents-react-seed/src/components/InformationDialog/InformationDialog.test.js new file mode 100644 index 00000000000..6a9c5486768 --- /dev/null +++ b/packages/ui5-webcomponents-react-seed/src/components/InformationDialog/InformationDialog.test.js @@ -0,0 +1,25 @@ +import React from 'react'; + +import '@testing-library/jest-dom/extend-expect'; +import { render, screen } from '../../util/TestSetup'; +import InformationDialog, { Type } from './InformationDialog'; + +describe('InformationDialog.js Test Suite', () => { + test('should render', () => { + const dialog = ; + render(dialog); + const infoDialog = screen.getByTestId('information-dialog'); + expect(infoDialog).toBeInTheDocument(); + }); + + test('should render child when not inner text is passed', () => { + const dialog = ( + +
+ + ); + render(dialog); + const child = screen.getByTestId('information-dialog-child'); + expect(child).toBeInTheDocument(); + }); +}); diff --git a/packages/ui5-webcomponents-react-seed/src/components/Shell/Shell.js b/packages/ui5-webcomponents-react-seed/src/components/Shell/Shell.js index 20f8fc14d09..8851b098101 100644 --- a/packages/ui5-webcomponents-react-seed/src/components/Shell/Shell.js +++ b/packages/ui5-webcomponents-react-seed/src/components/Shell/Shell.js @@ -8,6 +8,7 @@ import { AvatarShape } from '@ui5/webcomponents-react/lib/AvatarShape'; import { AvatarSize } from '@ui5/webcomponents-react/lib/AvatarSize'; import BrowserProvider from '../../util/browser/BrowserProvider'; import PopoverListItems from '../Popover/List/PopoverListItems'; +import ThemeSwitch from '../ThemeSwitch/ThemeSwitch'; const style = { shell: { @@ -24,6 +25,7 @@ const Shell = ({ title, ...props }) => { const { t } = useTranslation(); const history = useHistory(); const popoverConfigItemsRef = useRef(null); + const themeSwitchRef = useRef(null); const popoverItems = [ { children: t('shell.button.user.settings.item.languageSwitch'), @@ -33,7 +35,7 @@ const Shell = ({ title, ...props }) => { { children: t('shell.button.user.settings.item.themeSwitch'), icon: 'customize', - onClick: () => alert('activate theme switch dialog'), + onClick: () => themeSwitchRef.current.open(), }, ]; @@ -51,6 +53,7 @@ const Shell = ({ title, ...props }) => { />
+ ); }; diff --git a/packages/ui5-webcomponents-react-seed/src/components/ThemeSwitch/ThemeSwitch.js b/packages/ui5-webcomponents-react-seed/src/components/ThemeSwitch/ThemeSwitch.js new file mode 100644 index 00000000000..9411a47cf9a --- /dev/null +++ b/packages/ui5-webcomponents-react-seed/src/components/ThemeSwitch/ThemeSwitch.js @@ -0,0 +1,52 @@ +import React, { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { Option } from '@ui5/webcomponents-react/lib/Option'; +import { Select } from '@ui5/webcomponents-react/lib/Select'; +import { setTheme } from '@ui5/webcomponents-base/dist/config/Theme.js'; +import InformationDialog from '../InformationDialog/InformationDialog'; +import Constants from '../../util/Constants'; + +const style = { + select: { + width: '100%', + }, +}; + +const themeOptions = [ + { value: 'sap_fiori_3', title: 'shell.button.user.settings.item.themeSwitch.option.default' }, + { value: 'sap_fiori_3_dark', title: 'shell.button.user.settings.item.themeSwitch.option.dark' }, + { value: 'sap_belize', title: 'shell.button.user.settings.item.themeSwitch.option.belize' }, + { value: 'sap_fiori_3_hcb', title: 'shell.button.user.settings.item.themeSwitch.option.highContrastBlack' }, + { value: 'sap_fiori_3_hcw', title: 'shell.button.user.settings.item.themeSwitch.option.highContrastWhite' }, +]; + +const ThemeSwitch = ({ dialogRef, storedTheme = localStorage.getItem(Constants.SEED.SELECTED_THEME) }) => { + const { t } = useTranslation(); + + useEffect(() => { + setTheme(storedTheme ? storedTheme : themeOptions[0].value); + }); + + const onChange = (event) => { + localStorage.setItem(Constants.SEED.SELECTED_THEME, event.detail.selectedOption.dataset.value); + setTheme(event.detail.selectedOption.dataset.value); + }; + + return ( + + + + ); +}; + +export default ThemeSwitch; diff --git a/packages/ui5-webcomponents-react-seed/src/components/ThemeSwitch/ThemeSwitch.test.js b/packages/ui5-webcomponents-react-seed/src/components/ThemeSwitch/ThemeSwitch.test.js new file mode 100644 index 00000000000..886140aac4a --- /dev/null +++ b/packages/ui5-webcomponents-react-seed/src/components/ThemeSwitch/ThemeSwitch.test.js @@ -0,0 +1,36 @@ +import React from 'react'; + +import '@testing-library/jest-dom/extend-expect'; +import { getTheme } from '@ui5/webcomponents-base/dist/config/Theme.js'; +import { render, screen } from '../../util/TestSetup'; + +import ThemeSwitch from './ThemeSwitch'; + +describe('ThemeSwitch.js Test Suite', () => { + test('Should render', () => { + const dialog = ; + render(dialog); + const infoDialog = screen.getByTestId('language-switch-wrapper'); + expect(infoDialog).toBeInTheDocument(); + }); + + test('Should load sap_fiori_3 as default theme', () => { + render(); + const currentTheme = getTheme(); + expect(currentTheme).toBe('sap_fiori_3'); + }); + + test('Should load black contrast theme', () => { + const themeSet = 'sap_fiori_3_hcb'; + render(); + const currentTheme = getTheme(); + expect(currentTheme).toBe(themeSet); + }); + + test('Should load belize theme', () => { + const themeSet = 'sap_belize'; + render(); + const currentTheme = getTheme(); + expect(currentTheme).toBe(themeSet); + }); +}); diff --git a/packages/ui5-webcomponents-react-seed/src/locales/en/translation.json b/packages/ui5-webcomponents-react-seed/src/locales/en/translation.json index 56f6e118d89..2d033a2a54f 100644 --- a/packages/ui5-webcomponents-react-seed/src/locales/en/translation.json +++ b/packages/ui5-webcomponents-react-seed/src/locales/en/translation.json @@ -1,4 +1,5 @@ { + "app.generics.close": "Close", "helmet.title.app": "TodoList App", "helmet.title.error": "Buggy Component - TodoList App", "helmet.title.notfound": "NotFound - TodoList App", @@ -7,6 +8,12 @@ "shell.button.user.settings": "User Settings", "shell.button.user.settings.item.languageSwitch": "Language Switch", "shell.button.user.settings.item.themeSwitch": "Theme Switch", + "shell.button.user.settings.item.themeSwitch.option.default": "Default", + "shell.button.user.settings.item.themeSwitch.option.dark": "Dark", + "shell.button.user.settings.item.themeSwitch.option.highContrastBlack": "High Contrast Black", + "shell.button.user.settings.item.themeSwitch.option.highContrastWhite": "High Contrast White", + "shell.button.user.settings.item.themeSwitch.option.belize": "Belize", + "shell.button.user.settings.item.themeSwitch.title": "Theme Switch", "page.error.text": "Ops! There was an error in loading this page", "page.error.alt": "Error", "page.notfound.text": "Hmmm, we could find this URL", diff --git a/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Fallback.js b/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Fallback.js index 5e7c900bbaf..d3a54f39892 100644 --- a/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Fallback.js +++ b/packages/ui5-webcomponents-react-seed/src/pages/Fallback/Fallback.js @@ -17,7 +17,6 @@ const style = { }, reloadButton: { cursor: 'pointer', - color: 'var(--sapLinkColor)', }, }; diff --git a/packages/ui5-webcomponents-react-seed/src/util/Constants.js b/packages/ui5-webcomponents-react-seed/src/util/Constants.js index bee8ba3fad4..b3f399fff64 100644 --- a/packages/ui5-webcomponents-react-seed/src/util/Constants.js +++ b/packages/ui5-webcomponents-react-seed/src/util/Constants.js @@ -11,4 +11,7 @@ export default { GET_TODO_BY_ID: 'GET_TODO_BY_ID', }, }, + SEED: { + SELECTED_THEME: 'SELECTED_THEME', + }, };