diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuBack.scss b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuBack.scss deleted file mode 100644 index a52608e5c..000000000 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuBack.scss +++ /dev/null @@ -1,35 +0,0 @@ -@import './styles'; - -.bp-MediaSettingsMenuBack { - @include bp-MediaSettingsRow; - - &:hover { - background-color: $hover-blue-background; - - .bp-MediaSettingsMenuBack-label { - color: lighten($blue-steel, 50%); - } - } - - .bp-is-focused &:focus { - background-color: $box-blue; - - .bp-MediaSettingsMenuBack-arrow { - fill: $white; - } - - .bp-MediaSettingsMenuBack-label { - color: $white; - } - } -} - -.bp-MediaSettingsMenuBack-arrow { - @include bp-MediaSettingsRow-cell; -} - -.bp-MediaSettingsMenuBack-label { - @include bp-MediaSettingsRow-label; - - text-align: center; -} diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.scss b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.scss deleted file mode 100644 index 278497c82..000000000 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.scss +++ /dev/null @@ -1,42 +0,0 @@ -@import './styles'; - -.bp-MediaSettingsMenuItem { - @include bp-MediaSettingsRow; - - &:hover { - background-color: $hover-blue-background; - - .bp-MediaSettingsMenuItem-label { - color: lighten($blue-steel, 50%); - } - - .bp-MediaSettingsMenuItem-value { - color: $blue-steel; - } - } - - .bp-is-focused &:focus { - background-color: $box-blue; - - .bp-MediaSettingsMenuItem-arrow { - fill: $white; - } - - .bp-MediaSettingsMenuItem-label, - .bp-MediaSettingsMenuItem-value { - color: $white; - } - } -} - -.bp-MediaSettingsMenuItem-arrow { - @include bp-MediaSettingsRow-cell; -} - -.bp-MediaSettingsMenuItem-label { - @include bp-MediaSettingsRow-label; -} - -.bp-MediaSettingsMenuItem-value { - @include bp-MediaSettingsRow-value; -} diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.scss b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.scss deleted file mode 100644 index 595da9c5e..000000000 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import './styles'; - -.bp-MediaSettingsRadioItem { - @include bp-MediaSettingsRow; - - &.bp-is-selected { - .bp-MediaSettingsRadioItem-check-icon { - visibility: visible; - } - - .bp-MediaSettingsRadioItem-value { - color: $box-blue; - } - } - - &:hover { - background-color: $hover-blue-background; - - .bp-MediaSettingsRadioItem-check-icon { - fill: $blue-steel; - } - - .bp-MediaSettingsRadioItem-value { - color: $blue-steel; - } - } - - .bp-is-focused &:focus { - background-color: $box-blue; - - .bp-MediaSettingsRadioItem-check-icon { - fill: $white; - } - - .bp-MediaSettingsRadioItem-value { - color: $white; - } - } -} - -.bp-MediaSettingsRadioItem-check { - @include bp-MediaSettingsRow-cell; -} - -.bp-MediaSettingsRadioItem-check-icon { - visibility: hidden; -} - -.bp-MediaSettingsRadioItem-value { - @include bp-MediaSettingsRow-value; -} diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRate.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRate.tsx deleted file mode 100644 index 2092d263d..000000000 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRate.tsx +++ /dev/null @@ -1,32 +0,0 @@ -import React from 'react'; -import MediaSettings, { Menu } from '.'; - -export type Props = { - onRateChange: (rate: string) => void; - rate: string; -}; - -export default function MediaSettingsMenuRate({ rate, onRateChange }: Props): JSX.Element { - const { setActiveMenu } = React.useContext(MediaSettings.Context); - - const handleChange = (value: string): void => { - setActiveMenu(Menu.MAIN); - onRateChange(value); - }; - - return ( - - - - - - - - - ); -} diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.tsx b/src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.tsx deleted file mode 100644 index 64a5f3063..000000000 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import React from 'react'; -import classNames from 'classnames'; -import IconGear24 from '../../icons/IconGear24'; -import './MediaSettingsToggle.scss'; - -export type Props = { - isOpen: boolean; - onClick: () => void; -}; - -export type Ref = HTMLButtonElement; - -function MediaSettingsToggle({ isOpen, onClick }: Props, ref: React.Ref): JSX.Element { - return ( - - ); -} - -export default React.forwardRef(MediaSettingsToggle); diff --git a/src/lib/viewers/controls/media/MediaSettings/index.ts b/src/lib/viewers/controls/media/MediaSettings/index.ts deleted file mode 100644 index cdb9e4863..000000000 --- a/src/lib/viewers/controls/media/MediaSettings/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './MediaSettings'; -export * from './MediaSettingsContext'; -export { default } from './MediaSettings'; diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsAutoplay.tsx b/src/lib/viewers/controls/media/MediaSettingsMenuAutoplay.tsx similarity index 68% rename from src/lib/viewers/controls/media/MediaSettings/MediaSettingsAutoplay.tsx rename to src/lib/viewers/controls/media/MediaSettingsMenuAutoplay.tsx index 1f24ba118..c436316e1 100644 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsAutoplay.tsx +++ b/src/lib/viewers/controls/media/MediaSettingsMenuAutoplay.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import MediaSettings, { Menu } from '.'; +import Settings, { Menu } from '../settings'; export type Props = { autoplay: boolean; @@ -7,7 +7,7 @@ export type Props = { }; export default function MediaSettingsMenuAutoplay({ autoplay, onAutoplayChange }: Props): JSX.Element { - const { setActiveMenu } = React.useContext(MediaSettings.Context); + const { setActiveMenu } = React.useContext(Settings.Context); const handleChange = (value: boolean): void => { setActiveMenu(Menu.MAIN); @@ -15,20 +15,20 @@ export default function MediaSettingsMenuAutoplay({ autoplay, onAutoplayChange } }; return ( - - - + + - - + ); } diff --git a/src/lib/viewers/controls/media/MediaSettingsMenuRate.tsx b/src/lib/viewers/controls/media/MediaSettingsMenuRate.tsx new file mode 100644 index 000000000..aeb644cfc --- /dev/null +++ b/src/lib/viewers/controls/media/MediaSettingsMenuRate.tsx @@ -0,0 +1,32 @@ +import React from 'react'; +import Settings, { Menu } from '../settings'; + +export type Props = { + onRateChange: (rate: string) => void; + rate: string; +}; + +export default function MediaSettingsMenuRate({ rate, onRateChange }: Props): JSX.Element { + const { setActiveMenu } = React.useContext(Settings.Context); + + const handleChange = (value: string): void => { + setActiveMenu(Menu.MAIN); + onRateChange(value); + }; + + return ( + + + + + + + + + ); +} diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsAutoplay-test.tsx b/src/lib/viewers/controls/media/__tests__/MediaSettingsMenuAutoplay-test.tsx similarity index 71% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsAutoplay-test.tsx rename to src/lib/viewers/controls/media/__tests__/MediaSettingsMenuAutoplay-test.tsx index d0419adf1..9ff6c327f 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsAutoplay-test.tsx +++ b/src/lib/viewers/controls/media/__tests__/MediaSettingsMenuAutoplay-test.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { mount, ReactWrapper } from 'enzyme'; -import MediaSettings, { Context, Menu } from '..'; -import MediaSettingsAutoplay from '../MediaSettingsAutoplay'; +import MediaSettingsMenu from '../MediaSettingsMenuAutoplay'; +import Settings, { Context, Menu } from '../../settings'; -describe('MediaSettingsAutoplay', () => { +describe('MediaSettingsMenuAutoplay', () => { const getContext = (): Partial => ({ setActiveMenu: jest.fn() }); const getWrapper = (props = {}, context = getContext()): ReactWrapper => - mount(, { - wrappingComponent: MediaSettings.Context.Provider, + mount(, { + wrappingComponent: Settings.Context.Provider, wrappingComponentProps: { value: context }, }); @@ -35,8 +35,8 @@ describe('MediaSettingsAutoplay', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.exists(MediaSettings.MenuBack)).toBe(true); - expect(wrapper.exists(MediaSettings.RadioItem)).toBe(true); + expect(wrapper.exists(Settings.MenuBack)).toBe(true); + expect(wrapper.exists(Settings.RadioItem)).toBe(true); }); }); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRate-test.tsx b/src/lib/viewers/controls/media/__tests__/MediaSettingsMenuRate-test.tsx similarity index 71% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRate-test.tsx rename to src/lib/viewers/controls/media/__tests__/MediaSettingsMenuRate-test.tsx index 72ef51895..fa7eac66a 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRate-test.tsx +++ b/src/lib/viewers/controls/media/__tests__/MediaSettingsMenuRate-test.tsx @@ -1,13 +1,13 @@ import React from 'react'; import { mount, ReactWrapper } from 'enzyme'; -import MediaSettings, { Context, Menu } from '..'; -import MediaSettingsRate from '../MediaSettingsRate'; +import MediaSettingsMenuRate from '../MediaSettingsMenuRate'; +import Settings, { Context, Menu } from '../../settings'; -describe('MediaSettingsRate', () => { +describe('SettingsRate', () => { const getContext = (): Partial => ({ setActiveMenu: jest.fn() }); const getWrapper = (props = {}, context = getContext()): ReactWrapper => - mount(, { - wrappingComponent: MediaSettings.Context.Provider, + mount(, { + wrappingComponent: Settings.Context.Provider, wrappingComponentProps: { value: context }, }); @@ -35,8 +35,8 @@ describe('MediaSettingsRate', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.exists(MediaSettings.MenuBack)).toBe(true); - expect(wrapper.exists(MediaSettings.RadioItem)).toBe(true); + expect(wrapper.exists(Settings.MenuBack)).toBe(true); + expect(wrapper.exists(Settings.RadioItem)).toBe(true); }); }); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettings.tsx b/src/lib/viewers/controls/settings/Settings.tsx similarity index 60% rename from src/lib/viewers/controls/media/MediaSettings/MediaSettings.tsx rename to src/lib/viewers/controls/settings/Settings.tsx index 47de95ee8..c872a3889 100644 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettings.tsx +++ b/src/lib/viewers/controls/settings/Settings.tsx @@ -1,24 +1,24 @@ import React from 'react'; import classNames from 'classnames'; -import MediaSettingsContext, { Menu, Rect } from './MediaSettingsContext'; -import MediaSettingsFlyout from './MediaSettingsFlyout'; -import MediaSettingsMenu from './MediaSettingsMenu'; -import MediaSettingsMenuBack from './MediaSettingsMenuBack'; -import MediaSettingsMenuItem from './MediaSettingsMenuItem'; -import MediaSettingsRadioItem from './MediaSettingsRadioItem'; -import MediaSettingsToggle, { Ref as MediaSettingsToggleRef } from './MediaSettingsToggle'; -import { decodeKeydown } from '../../../../util'; +import SettingsContext, { Menu, Rect } from './SettingsContext'; +import SettingsFlyout from './SettingsFlyout'; +import SettingsMenu from './SettingsMenu'; +import SettingsMenuBack from './SettingsMenuBack'; +import SettingsMenuItem from './SettingsMenuItem'; +import SettingsRadioItem from './SettingsRadioItem'; +import SettingsToggle, { Ref as SettingsToggleRef } from './SettingsToggle'; +import { decodeKeydown } from '../../../util'; export type Props = React.PropsWithChildren<{ className?: string; }>; -export default function MediaSettings({ children, className, ...rest }: Props): JSX.Element | null { +export default function Settings({ children, className, ...rest }: Props): JSX.Element | null { const [activeMenu, setActiveMenu] = React.useState(Menu.MAIN); const [activeRect, setActiveRect] = React.useState(); const [isFocused, setIsFocused] = React.useState(false); const [isOpen, setIsOpen] = React.useState(false); - const buttonElRef = React.useRef(null); + const buttonElRef = React.useRef(null); const controlsElRef = React.useRef(null); const resetControls = React.useCallback(() => { setActiveMenu(Menu.MAIN); @@ -73,21 +73,21 @@ export default function MediaSettings({ children, className, ...rest }: Props): return (
- - - {children} - + + + {children} +
); } -MediaSettings.Context = MediaSettingsContext; -MediaSettings.Menu = MediaSettingsMenu; -MediaSettings.MenuBack = MediaSettingsMenuBack; -MediaSettings.MenuItem = MediaSettingsMenuItem; -MediaSettings.RadioItem = MediaSettingsRadioItem; +Settings.Context = SettingsContext; +Settings.Menu = SettingsMenu; +Settings.MenuBack = SettingsMenuBack; +Settings.MenuItem = SettingsMenuItem; +Settings.RadioItem = SettingsRadioItem; diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsContext.ts b/src/lib/viewers/controls/settings/SettingsContext.ts similarity index 100% rename from src/lib/viewers/controls/media/MediaSettings/MediaSettingsContext.ts rename to src/lib/viewers/controls/settings/SettingsContext.ts diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.scss b/src/lib/viewers/controls/settings/SettingsFlyout.scss similarity index 96% rename from src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.scss rename to src/lib/viewers/controls/settings/SettingsFlyout.scss index 2bdd58d24..6025772b4 100644 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.scss +++ b/src/lib/viewers/controls/settings/SettingsFlyout.scss @@ -1,6 +1,6 @@ @import '../styles'; -.bp-MediaSettingsFlyout { +.bp-SettingsFlyout { position: absolute; top: -5px; right: 0; diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.tsx b/src/lib/viewers/controls/settings/SettingsFlyout.tsx similarity index 79% rename from src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.tsx rename to src/lib/viewers/controls/settings/SettingsFlyout.tsx index df9fd59cc..59573074c 100644 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsFlyout.tsx +++ b/src/lib/viewers/controls/settings/SettingsFlyout.tsx @@ -1,17 +1,17 @@ import React from 'react'; import classNames from 'classnames'; -import MediaSettingsContext from './MediaSettingsContext'; -import './MediaSettingsFlyout.scss'; +import SettingsContext from './SettingsContext'; +import './SettingsFlyout.scss'; export type Props = React.PropsWithChildren<{ className?: string; isOpen: boolean; }>; -export default function MediaSettingsFlyout({ children, className, isOpen }: Props): JSX.Element { +export default function SettingsFlyout({ children, className, isOpen }: Props): JSX.Element { const [isTransitioning, setIsTransitioning] = React.useState(false); const flyoutElRef = React.useRef(null); - const { activeRect } = React.useContext(MediaSettingsContext); + const { activeRect } = React.useContext(SettingsContext); const { height, width } = activeRect || { height: 'auto', width: 'auto' }; React.useEffect(() => { @@ -35,7 +35,7 @@ export default function MediaSettingsFlyout({ children, className, isOpen }: Pro return (
; -export default function MediaSettingsMenu({ children, className, name }: Props): JSX.Element | null { +export default function SettingsMenu({ children, className, name }: Props): JSX.Element | null { const [activeIndex, setActiveIndex] = React.useState(0); const [activeItem, setActiveItem] = React.useState(null); - const { activeMenu, setActiveRect } = React.useContext(MediaSettingsContext); + const { activeMenu, setActiveRect } = React.useContext(SettingsContext); const isActive = activeMenu === name; const menuElRef = React.useRef(null); @@ -46,7 +46,7 @@ export default function MediaSettingsMenu({ children, className, name }: Props): return (
): JSX.Element { - const { setActiveMenu } = React.useContext(MediaSettingsContext); +function SettingsMenuBack({ label }: Props, ref: React.Ref): JSX.Element { + const { setActiveMenu } = React.useContext(SettingsContext); const handleClick = (): void => { setActiveMenu(Menu.MAIN); @@ -29,20 +29,20 @@ function MediaSettingsMenuBack({ label }: Props, ref: React.Ref): JSX.Eleme return (
-
+
-
+
{label}
); } -export default React.forwardRef(MediaSettingsMenuBack); +export default React.forwardRef(SettingsMenuBack); diff --git a/src/lib/viewers/controls/settings/SettingsMenuItem.scss b/src/lib/viewers/controls/settings/SettingsMenuItem.scss new file mode 100644 index 000000000..74d43488d --- /dev/null +++ b/src/lib/viewers/controls/settings/SettingsMenuItem.scss @@ -0,0 +1,42 @@ +@import './styles'; + +.bp-SettingsMenuItem { + @include bp-SettingsRow; + + &:hover { + background-color: $hover-blue-background; + + .bp-SettingsMenuItem-label { + color: lighten($blue-steel, 50%); + } + + .bp-SettingsMenuItem-value { + color: $blue-steel; + } + } + + .bp-is-focused &:focus { + background-color: $box-blue; + + .bp-SettingsMenuItem-arrow { + fill: $white; + } + + .bp-SettingsMenuItem-label, + .bp-SettingsMenuItem-value { + color: $white; + } + } +} + +.bp-SettingsMenuItem-arrow { + @include bp-SettingsRow-cell; +} + +.bp-SettingsMenuItem-label { + @include bp-SettingsRow-label; +} + +.bp-SettingsMenuItem-value { + @include bp-SettingsRow-value; +} diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.tsx b/src/lib/viewers/controls/settings/SettingsMenuItem.tsx similarity index 57% rename from src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.tsx rename to src/lib/viewers/controls/settings/SettingsMenuItem.tsx index 4004bbebd..03163a4fd 100644 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsMenuItem.tsx +++ b/src/lib/viewers/controls/settings/SettingsMenuItem.tsx @@ -1,9 +1,9 @@ import React from 'react'; import classNames from 'classnames'; -import IconArrowRight24 from '../../icons/IconArrowRight24'; -import MediaSettingsContext, { Menu } from './MediaSettingsContext'; -import { decodeKeydown } from '../../../../util'; -import './MediaSettingsMenuItem.scss'; +import IconArrowRight24 from '../icons/IconArrowRight24'; +import SettingsContext, { Menu } from './SettingsContext'; +import { decodeKeydown } from '../../../util'; +import './SettingsMenuItem.scss'; export type Props = { className?: string; @@ -13,9 +13,9 @@ export type Props = { }; export type Ref = HTMLDivElement; -function MediaSettingsMenuItem(props: Props, ref: React.Ref): JSX.Element { +function SettingsMenuItem(props: Props, ref: React.Ref): JSX.Element { const { className, label, target, value } = props; - const { setActiveMenu } = React.useContext(MediaSettingsContext); + const { setActiveMenu } = React.useContext(SettingsContext); const handleClick = (): void => { setActiveMenu(target); @@ -35,21 +35,21 @@ function MediaSettingsMenuItem(props: Props, ref: React.Ref): JSX.Element {
-
+
{label}
-
{value}
-
+
{value}
+
); } -export default React.forwardRef(MediaSettingsMenuItem); +export default React.forwardRef(SettingsMenuItem); diff --git a/src/lib/viewers/controls/settings/SettingsRadioItem.scss b/src/lib/viewers/controls/settings/SettingsRadioItem.scss new file mode 100644 index 000000000..dcca6b22d --- /dev/null +++ b/src/lib/viewers/controls/settings/SettingsRadioItem.scss @@ -0,0 +1,51 @@ +@import './styles'; + +.bp-SettingsRadioItem { + @include bp-SettingsRow; + + &.bp-is-selected { + .bp-SettingsRadioItem-check-icon { + visibility: visible; + } + + .bp-SettingsRadioItem-value { + color: $box-blue; + } + } + + &:hover { + background-color: $hover-blue-background; + + .bp-SettingsRadioItem-check-icon { + fill: $blue-steel; + } + + .bp-SettingsRadioItem-value { + color: $blue-steel; + } + } + + .bp-is-focused &:focus { + background-color: $box-blue; + + .bp-SettingsRadioItem-check-icon { + fill: $white; + } + + .bp-SettingsRadioItem-value { + color: $white; + } + } +} + +.bp-SettingsRadioItem-check { + @include bp-SettingsRow-cell; +} + +.bp-SettingsRadioItem-check-icon { + visibility: hidden; +} + +.bp-SettingsRadioItem-value { + @include bp-SettingsRow-value; +} diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.tsx b/src/lib/viewers/controls/settings/SettingsRadioItem.tsx similarity index 61% rename from src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.tsx rename to src/lib/viewers/controls/settings/SettingsRadioItem.tsx index 0c4394575..cc5d822a3 100644 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsRadioItem.tsx +++ b/src/lib/viewers/controls/settings/SettingsRadioItem.tsx @@ -1,8 +1,8 @@ import React from 'react'; import classNames from 'classnames'; -import IconCheckMark24 from '../../icons/IconCheckMark24'; -import { decodeKeydown } from '../../../../util'; -import './MediaSettingsRadioItem.scss'; +import IconCheckMark24 from '../icons/IconCheckMark24'; +import { decodeKeydown } from '../../../util'; +import './SettingsRadioItem.scss'; export type Props = { className?: string; @@ -14,7 +14,7 @@ export type Props = { export type Ref = HTMLDivElement; export type Value = boolean | number | string; -function MediaSettingsRadioItem(props: Props, ref: React.Ref): JSX.Element { +function SettingsRadioItem(props: Props, ref: React.Ref): JSX.Element { const { className, isSelected, label, onChange, value } = props; const handleClick = (): void => { @@ -35,7 +35,7 @@ function MediaSettingsRadioItem(props: Props, ref: React.Ref
(props: Props, ref: React.Ref role="menuitemradio" tabIndex={0} > -
- +
+
-
{label || value}
+
{label || value}
); } -export default React.forwardRef(MediaSettingsRadioItem) as typeof MediaSettingsRadioItem; +export default React.forwardRef(SettingsRadioItem) as typeof SettingsRadioItem; diff --git a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.scss b/src/lib/viewers/controls/settings/SettingsToggle.scss similarity index 56% rename from src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.scss rename to src/lib/viewers/controls/settings/SettingsToggle.scss index af7b78607..3281943c7 100644 --- a/src/lib/viewers/controls/media/MediaSettings/MediaSettingsToggle.scss +++ b/src/lib/viewers/controls/settings/SettingsToggle.scss @@ -1,16 +1,16 @@ @import '../styles'; -.bp-MediaSettingsToggle { - @include bp-MediaButton; +.bp-SettingsToggle { + @include bp-Control; &.bp-is-open { - .bp-MediaSettingsToggle-icon { + .bp-SettingsToggle-icon { transform: rotate(60deg); } } } -.bp-MediaSettingsToggle-icon { +.bp-SettingsToggle-icon { transform: rotate(0); transition: transform 300ms ease; } diff --git a/src/lib/viewers/controls/settings/SettingsToggle.tsx b/src/lib/viewers/controls/settings/SettingsToggle.tsx new file mode 100644 index 000000000..ebe6b09e2 --- /dev/null +++ b/src/lib/viewers/controls/settings/SettingsToggle.tsx @@ -0,0 +1,27 @@ +import React from 'react'; +import classNames from 'classnames'; +import IconGear24 from '../icons/IconGear24'; +import './SettingsToggle.scss'; + +export type Props = { + isOpen: boolean; + onClick: () => void; +}; + +export type Ref = HTMLButtonElement; + +function SettingsToggle({ isOpen, onClick }: Props, ref: React.Ref): JSX.Element { + return ( + + ); +} + +export default React.forwardRef(SettingsToggle); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettings-test.tsx b/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx similarity index 61% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettings-test.tsx rename to src/lib/viewers/controls/settings/__tests__/Settings-test.tsx index 8a59e0165..3b18f77bb 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettings-test.tsx +++ b/src/lib/viewers/controls/settings/__tests__/Settings-test.tsx @@ -1,27 +1,27 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { mount, ReactWrapper } from 'enzyme'; -import MediaSettings from '../MediaSettings'; -import MediaSettingsToggle from '../MediaSettingsToggle'; -import MediaSettingsFlyout from '../MediaSettingsFlyout'; +import Settings from '../Settings'; +import SettingsToggle from '../SettingsToggle'; +import SettingsFlyout from '../SettingsFlyout'; -describe('MediaSettings', () => { +describe('Settings', () => { const getHostNode = (): HTMLDivElement => { return document.body.appendChild(document.createElement('div')); }; - const getWrapper = (props = {}): ReactWrapper => mount(, { attachTo: getHostNode() }); + const getWrapper = (props = {}): ReactWrapper => mount(, { attachTo: getHostNode() }); describe('event handlers', () => { test('should update the flyout and toggle button isOpen prop when clicked', () => { const wrapper = getWrapper(); - expect(wrapper.find(MediaSettingsFlyout).prop('isOpen')).toBe(false); - expect(wrapper.find(MediaSettingsToggle).prop('isOpen')).toBe(false); + expect(wrapper.find(SettingsFlyout).prop('isOpen')).toBe(false); + expect(wrapper.find(SettingsToggle).prop('isOpen')).toBe(false); - wrapper.find(MediaSettingsToggle).simulate('click'); + wrapper.find(SettingsToggle).simulate('click'); - expect(wrapper.find(MediaSettingsFlyout).prop('isOpen')).toBe(true); - expect(wrapper.find(MediaSettingsToggle).prop('isOpen')).toBe(true); + expect(wrapper.find(SettingsFlyout).prop('isOpen')).toBe(true); + expect(wrapper.find(SettingsToggle).prop('isOpen')).toBe(true); }); test.each` @@ -56,20 +56,20 @@ describe('MediaSettings', () => { return event; }; - wrapper.find(MediaSettingsToggle).simulate('click'); // Open the controls - expect(wrapper.find(MediaSettingsToggle).prop('isOpen')).toBe(true); + wrapper.find(SettingsToggle).simulate('click'); // Open the controls + expect(wrapper.find(SettingsToggle).prop('isOpen')).toBe(true); act(() => { document.dispatchEvent(getEvent(document.body)); // Click outside the controls }); wrapper.update(); - expect(wrapper.find(MediaSettingsToggle).prop('isOpen')).toBe(false); + expect(wrapper.find(SettingsToggle).prop('isOpen')).toBe(false); - wrapper.find(MediaSettingsToggle).simulate('click'); // Re-open the controls - expect(wrapper.find(MediaSettingsToggle).prop('isOpen')).toBe(true); + wrapper.find(SettingsToggle).simulate('click'); // Re-open the controls + expect(wrapper.find(SettingsToggle).prop('isOpen')).toBe(true); - wrapper.find(MediaSettingsFlyout).simulate('click'); // Click within the controls - expect(wrapper.find(MediaSettingsToggle).prop('isOpen')).toBe(true); + wrapper.find(SettingsFlyout).simulate('click'); // Click within the controls + expect(wrapper.find(SettingsToggle).prop('isOpen')).toBe(true); }); test('should stop propagation on all keydown events to prevent triggering global event listeners', () => { @@ -89,9 +89,9 @@ describe('MediaSettings', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.getDOMNode()).toHaveClass('bp-MediaSettings'); - expect(wrapper.exists(MediaSettingsFlyout)).toBe(true); - expect(wrapper.exists(MediaSettingsToggle)).toBe(true); + expect(wrapper.getDOMNode()).toHaveClass('bp-Settings'); + expect(wrapper.exists(SettingsFlyout)).toBe(true); + expect(wrapper.exists(SettingsToggle)).toBe(true); }); }); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsContext-test.tsx b/src/lib/viewers/controls/settings/__tests__/SettingsContext-test.tsx similarity index 58% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsContext-test.tsx rename to src/lib/viewers/controls/settings/__tests__/SettingsContext-test.tsx index 6ef990d12..3318c9e08 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsContext-test.tsx +++ b/src/lib/viewers/controls/settings/__tests__/SettingsContext-test.tsx @@ -1,20 +1,18 @@ import React from 'react'; import { mount } from 'enzyme'; -import MediaSettingsContext, { Context, Menu } from '../MediaSettingsContext'; +import SettingsContext, { Context, Menu } from '../SettingsContext'; -describe('MediaSettingsContext', () => { +describe('SettingsContext', () => { const getContext = (): Context => ({ activeMenu: Menu.MAIN, setActiveMenu: jest.fn(), setActiveRect: jest.fn(), }); - const TestComponent = (): JSX.Element => ( -
{React.useContext(MediaSettingsContext).activeMenu}
- ); + const TestComponent = (): JSX.Element =>
{React.useContext(SettingsContext).activeMenu}
; test('should populate its context values', () => { const wrapper = mount(, { - wrappingComponent: MediaSettingsContext.Provider, + wrappingComponent: SettingsContext.Provider, wrappingComponentProps: { value: getContext() }, }); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsFlyout-test.tsx b/src/lib/viewers/controls/settings/__tests__/SettingsFlyout-test.tsx similarity index 84% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsFlyout-test.tsx rename to src/lib/viewers/controls/settings/__tests__/SettingsFlyout-test.tsx index ac8502a8d..6243f0579 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsFlyout-test.tsx +++ b/src/lib/viewers/controls/settings/__tests__/SettingsFlyout-test.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { mount, ReactWrapper } from 'enzyme'; -import MediaSettingsContext, { Context } from '../MediaSettingsContext'; -import MediaSettingsFlyout from '../MediaSettingsFlyout'; +import SettingsContext, { Context } from '../SettingsContext'; +import SettingsFlyout from '../SettingsFlyout'; -describe('MediaSettingsFlyout', () => { +describe('SettingsFlyout', () => { const getContext = (): Partial => ({ activeRect: undefined }); const getWrapper = (props = {}, context = getContext()): ReactWrapper => - mount(, { - wrappingComponent: MediaSettingsContext.Provider, + mount(, { + wrappingComponent: SettingsContext.Provider, wrappingComponentProps: { value: context }, }); @@ -58,7 +58,7 @@ describe('MediaSettingsFlyout', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.getDOMNode()).toHaveClass('bp-MediaSettingsFlyout'); + expect(wrapper.getDOMNode()).toHaveClass('bp-SettingsFlyout'); }); }); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenu-test.tsx b/src/lib/viewers/controls/settings/__tests__/SettingsMenu-test.tsx similarity index 89% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenu-test.tsx rename to src/lib/viewers/controls/settings/__tests__/SettingsMenu-test.tsx index 73323c072..b43f92ef5 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenu-test.tsx +++ b/src/lib/viewers/controls/settings/__tests__/SettingsMenu-test.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { act } from 'react-dom/test-utils'; import { mount, ReactWrapper } from 'enzyme'; -import MediaSettingsContext, { Context, Menu } from '../MediaSettingsContext'; -import MediaSettingsMenu from '../MediaSettingsMenu'; +import SettingsContext, { Context, Menu } from '../SettingsContext'; +import SettingsMenu from '../SettingsMenu'; -describe('MediaSettingsMenu', () => { +describe('SettingsMenu', () => { const getContext = (overrides = {}): Partial => ({ activeMenu: Menu.MAIN, setActiveRect: jest.fn(), @@ -15,14 +15,14 @@ describe('MediaSettingsMenu', () => { }; const getWrapper = (props = {}, context = getContext()): ReactWrapper => mount( - +
- , + , { attachTo: getHostNode(), - wrappingComponent: MediaSettingsContext.Provider, + wrappingComponent: SettingsContext.Provider, wrappingComponentProps: { value: context }, }, ); @@ -86,7 +86,7 @@ describe('MediaSettingsMenu', () => { const wrapper = getWrapper(); const element = wrapper.getDOMNode(); - expect(element).toHaveClass('bp-MediaSettingsMenu'); + expect(element).toHaveClass('bp-SettingsMenu'); expect(element).toHaveAttribute('role', 'menu'); }); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuBack-test.tsx b/src/lib/viewers/controls/settings/__tests__/SettingsMenuBack-test.tsx similarity index 70% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuBack-test.tsx rename to src/lib/viewers/controls/settings/__tests__/SettingsMenuBack-test.tsx index 5dd00c1af..8a85e7d05 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuBack-test.tsx +++ b/src/lib/viewers/controls/settings/__tests__/SettingsMenuBack-test.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { mount, ReactWrapper } from 'enzyme'; -import IconArrowLeft24 from '../../../icons/IconArrowLeft24'; -import MediaSettingsContext, { Context } from '../MediaSettingsContext'; -import MediaSettingsMenuBack from '../MediaSettingsMenuBack'; +import IconArrowLeft24 from '../../icons/IconArrowLeft24'; +import SettingsContext, { Context } from '../SettingsContext'; +import SettingsMenuBack from '../SettingsMenuBack'; -describe('MediaSettingsMenuBack', () => { +describe('SettingsMenuBack', () => { const getContext = (): Partial => ({ setActiveMenu: jest.fn() }); const getWrapper = (props = {}, context = {}): ReactWrapper => - mount(, { - wrappingComponent: MediaSettingsContext.Provider, + mount(, { + wrappingComponent: SettingsContext.Provider, wrappingComponentProps: { value: context }, }); @@ -42,8 +42,8 @@ describe('MediaSettingsMenuBack', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.getDOMNode()).toHaveClass('bp-MediaSettingsMenuBack'); - expect(wrapper.find('.bp-MediaSettingsMenuBack-label').contains('Autoplay')).toBe(true); + expect(wrapper.getDOMNode()).toHaveClass('bp-SettingsMenuBack'); + expect(wrapper.find('.bp-SettingsMenuBack-label').contains('Autoplay')).toBe(true); expect(wrapper.exists(IconArrowLeft24)).toBe(true); }); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuItem-test.tsx b/src/lib/viewers/controls/settings/__tests__/SettingsMenuItem-test.tsx similarity index 66% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuItem-test.tsx rename to src/lib/viewers/controls/settings/__tests__/SettingsMenuItem-test.tsx index a12da1967..8c362f042 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsMenuItem-test.tsx +++ b/src/lib/viewers/controls/settings/__tests__/SettingsMenuItem-test.tsx @@ -1,14 +1,14 @@ import React from 'react'; import { mount, ReactWrapper } from 'enzyme'; -import IconArrowRight24 from '../../../icons/IconArrowRight24'; -import MediaSettingsContext, { Menu, Context } from '../MediaSettingsContext'; -import MediaSettingsMenuItem from '../MediaSettingsMenuItem'; +import IconArrowRight24 from '../../icons/IconArrowRight24'; +import SettingsContext, { Menu, Context } from '../SettingsContext'; +import SettingsMenuItem from '../SettingsMenuItem'; -describe('MediaSettingsMenuItem', () => { +describe('SettingsMenuItem', () => { const getContext = (): Partial => ({ setActiveMenu: jest.fn() }); const getWrapper = (props = {}, context = {}): ReactWrapper => - mount(, { - wrappingComponent: MediaSettingsContext.Provider, + mount(, { + wrappingComponent: SettingsContext.Provider, wrappingComponentProps: { value: context }, }); @@ -42,9 +42,9 @@ describe('MediaSettingsMenuItem', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.getDOMNode()).toHaveClass('bp-MediaSettingsMenuItem'); - expect(wrapper.find('.bp-MediaSettingsMenuItem-label').contains('Speed')).toBe(true); - expect(wrapper.find('.bp-MediaSettingsMenuItem-value').contains('Normal')).toBe(true); + expect(wrapper.getDOMNode()).toHaveClass('bp-SettingsMenuItem'); + expect(wrapper.find('.bp-SettingsMenuItem-label').contains('Speed')).toBe(true); + expect(wrapper.find('.bp-SettingsMenuItem-value').contains('Normal')).toBe(true); expect(wrapper.exists(IconArrowRight24)).toBe(true); }); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRadioItem-test.tsx b/src/lib/viewers/controls/settings/__tests__/SettingsRadioItem-test.tsx similarity index 76% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRadioItem-test.tsx rename to src/lib/viewers/controls/settings/__tests__/SettingsRadioItem-test.tsx index a7bf59840..c82a5fad0 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsRadioItem-test.tsx +++ b/src/lib/viewers/controls/settings/__tests__/SettingsRadioItem-test.tsx @@ -1,11 +1,11 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; -import IconCheckMark24 from '../../../icons/IconCheckMark24'; -import MediaSettingsRadioItem from '../MediaSettingsRadioItem'; +import IconCheckMark24 from '../../icons/IconCheckMark24'; +import SettingsRadioItem from '../SettingsRadioItem'; -describe('MediaSettingsRadioItem', () => { +describe('SettingsRadioItem', () => { const getWrapper = (props = {}): ShallowWrapper => - shallow(); + shallow(); describe('event handlers', () => { test('should set the active menu when clicked', () => { @@ -43,8 +43,8 @@ describe('MediaSettingsRadioItem', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.hasClass('bp-MediaSettingsRadioItem')).toBe(true); - expect(wrapper.find('.bp-MediaSettingsRadioItem-value').contains('1.0')).toBe(true); + expect(wrapper.hasClass('bp-SettingsRadioItem')).toBe(true); + expect(wrapper.find('.bp-SettingsRadioItem-value').contains('1.0')).toBe(true); expect(wrapper.exists(IconCheckMark24)).toBe(true); // Rendered, but visually hidden by default }); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsToggle-test.tsx b/src/lib/viewers/controls/settings/__tests__/SettingsToggle-test.tsx similarity index 66% rename from src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsToggle-test.tsx rename to src/lib/viewers/controls/settings/__tests__/SettingsToggle-test.tsx index c90b87236..af0a74cde 100644 --- a/src/lib/viewers/controls/media/MediaSettings/__tests__/MediaSettingsToggle-test.tsx +++ b/src/lib/viewers/controls/settings/__tests__/SettingsToggle-test.tsx @@ -1,17 +1,17 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; -import IconGear24 from '../../../icons/IconGear24'; -import MediaSettingsToggle from '../MediaSettingsToggle'; +import IconGear24 from '../../icons/IconGear24'; +import SettingsToggle from '../SettingsToggle'; -describe('MediaSettingsToggle', () => { +describe('SettingsToggle', () => { const getWrapper = (props = {}): ShallowWrapper => - shallow(); + shallow(); describe('render', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.hasClass('bp-MediaSettingsToggle')).toBe(true); + expect(wrapper.hasClass('bp-SettingsToggle')).toBe(true); expect(wrapper.exists(IconGear24)).toBe(true); expect(wrapper.prop('title')).toBe('Settings'); }); diff --git a/src/lib/viewers/controls/media/MediaSettings/_styles.scss b/src/lib/viewers/controls/settings/_styles.scss similarity index 67% rename from src/lib/viewers/controls/media/MediaSettings/_styles.scss rename to src/lib/viewers/controls/settings/_styles.scss index 4e2c0e378..c1545e495 100644 --- a/src/lib/viewers/controls/media/MediaSettings/_styles.scss +++ b/src/lib/viewers/controls/settings/_styles.scss @@ -1,6 +1,6 @@ @import '../styles'; -@mixin bp-MediaSettingsRow { +@mixin bp-SettingsRow { display: table-row; overflow: hidden; white-space: nowrap; @@ -8,13 +8,13 @@ cursor: pointer; } -@mixin bp-MediaSettingsRow-cell { +@mixin bp-SettingsRow-cell { display: table-cell; vertical-align: middle; } -@mixin bp-MediaSettingsRow-label { - @include bp-MediaSettingsRow-cell; +@mixin bp-SettingsRow-label { + @include bp-SettingsRow-cell; padding: 6px; color: $downtown-grey; @@ -24,8 +24,8 @@ text-transform: uppercase; } -@mixin bp-MediaSettingsRow-value { - @include bp-MediaSettingsRow-cell; +@mixin bp-SettingsRow-value { + @include bp-SettingsRow-cell; padding: 6px 6px 6px 10px; color: $sunset-grey; diff --git a/src/lib/viewers/controls/settings/index.ts b/src/lib/viewers/controls/settings/index.ts new file mode 100644 index 000000000..e735c7dfe --- /dev/null +++ b/src/lib/viewers/controls/settings/index.ts @@ -0,0 +1,3 @@ +export * from './Settings'; +export * from './SettingsContext'; +export { default } from './Settings'; diff --git a/src/lib/viewers/media/MP3Settings.scss b/src/lib/viewers/media/MP3Settings.scss new file mode 100644 index 000000000..87ac17a27 --- /dev/null +++ b/src/lib/viewers/media/MP3Settings.scss @@ -0,0 +1,7 @@ +@import '../controls/media/styles'; + +.bp-MP3Settings { + .bp-SettingsToggle { + @include bp-MediaButton; + } +} diff --git a/src/lib/viewers/media/MP3Settings.tsx b/src/lib/viewers/media/MP3Settings.tsx index cb4aa6015..c24a82d04 100644 --- a/src/lib/viewers/media/MP3Settings.tsx +++ b/src/lib/viewers/media/MP3Settings.tsx @@ -1,7 +1,8 @@ import React from 'react'; -import MediaSettings, { Menu } from '../controls/media/MediaSettings'; -import MediaSettingsAutoplay, { Props as AutoplayProps } from '../controls/media/MediaSettings/MediaSettingsAutoplay'; -import MediaSettingsRate, { Props as RateProps } from '../controls/media/MediaSettings/MediaSettingsRate'; +import Settings, { Menu } from '../controls/settings'; +import MediaSettingsMenuAutoplay, { Props as AutoplayProps } from '../controls/media/MediaSettingsMenuAutoplay'; +import MediaSettingsMenuRate, { Props as RateProps } from '../controls/media/MediaSettingsMenuRate'; +import './MP3Settings.scss'; export type Props = AutoplayProps & RateProps; @@ -10,14 +11,14 @@ export default function MP3Settings({ autoplay, onAutoplayChange, onRateChange, const rateValue = rate === '1.0' || !rate ? __('media_speed_normal') : rate; return ( - - - - - + + + + + - - - + + + ); } diff --git a/src/lib/viewers/media/__tests__/MP3Settings-test.tsx b/src/lib/viewers/media/__tests__/MP3Settings-test.tsx index 8444a2f60..5eb0905a5 100644 --- a/src/lib/viewers/media/__tests__/MP3Settings-test.tsx +++ b/src/lib/viewers/media/__tests__/MP3Settings-test.tsx @@ -1,9 +1,9 @@ import React from 'react'; import { shallow, ShallowWrapper } from 'enzyme'; -import MediaSettings from '../../controls/media/MediaSettings/MediaSettings'; import MP3Settings from '../MP3Settings'; -import MediaSettingsMenu from '../../controls/media/MediaSettings/MediaSettingsMenu'; -import MediaSettingsMenuItem from '../../controls/media/MediaSettings/MediaSettingsMenuItem'; +import Settings from '../../controls/settings/Settings'; +import SettingsMenu from '../../controls/settings/SettingsMenu'; +import SettingsMenuItem from '../../controls/settings/SettingsMenuItem'; describe('MP3SettingsControls', () => { const getWrapper = (props = {}): ShallowWrapper => @@ -21,9 +21,9 @@ describe('MP3SettingsControls', () => { test('should return a valid wrapper', () => { const wrapper = getWrapper(); - expect(wrapper.exists(MediaSettings)).toBe(true); - expect(wrapper.exists(MediaSettingsMenu)).toBe(true); - expect(wrapper.exists(MediaSettingsMenuItem)).toBe(true); + expect(wrapper.exists(Settings)).toBe(true); + expect(wrapper.exists(SettingsMenu)).toBe(true); + expect(wrapper.exists(SettingsMenuItem)).toBe(true); }); test.each`