diff --git a/core/components/atoms/popperWrapper/PopperWrapper.tsx b/core/components/atoms/popperWrapper/PopperWrapper.tsx index ff8d50844e..bf15854a2b 100644 --- a/core/components/atoms/popperWrapper/PopperWrapper.tsx +++ b/core/components/atoms/popperWrapper/PopperWrapper.tsx @@ -91,6 +91,10 @@ export interface PopperWrapperProps { * Refer to [this](https://popper.js.org/docs/v1/#modifierscomputestyle) */ computeStyles?: object; + /** + * Defines whether to show popover or not + */ + disabled?: boolean; } interface PopperWrapperState { @@ -115,6 +119,7 @@ export class PopperWrapper extends React.Component) { - const { trigger, on, triggerClass } = this.props; + const { trigger, on, triggerClass, disabled } = this.props; const options = - on === 'hover' + on === 'hover' && !disabled ? { ref, onMouseEnter: this.handleMouseEnter, @@ -307,7 +312,7 @@ export class PopperWrapper extends React.Component) => { ev.stopPropagation(); - this.togglePopper('onClick'); + !disabled && this.togglePopper('onClick'); }, }; diff --git a/core/components/molecules/popover/Popover.tsx b/core/components/molecules/popover/Popover.tsx index b43f973374..48290cdb3b 100644 --- a/core/components/molecules/popover/Popover.tsx +++ b/core/components/molecules/popover/Popover.tsx @@ -100,6 +100,10 @@ export interface PopoverProps extends Pick, Bas * Refer to [this](https://popper.js.org/docs/v1/#modifierscomputestyle) */ computeStyles?: object; + /** + * Defines whether to show popover or not + */ + disabled?: boolean; } export const Popover = (props: PopoverProps) => { diff --git a/core/components/molecules/popover/__stories__/DisabledTrigger.story.jsx b/core/components/molecules/popover/__stories__/DisabledTrigger.story.jsx new file mode 100644 index 0000000000..23410e70ff --- /dev/null +++ b/core/components/molecules/popover/__stories__/DisabledTrigger.story.jsx @@ -0,0 +1,76 @@ +import * as React from 'react'; +import { Text, Button, Popover } from '@/index'; + +// CSF format story +export const disabledTrigger = () => { + const booleanValues = [false, true]; + + return ( +
+ {booleanValues.map((toggleValue) => { + return ( + + {toggleValue ? 'Disabled Popover' : 'Show Popover'} + + } + open={false} + className="w-25" + > +
+ You have some edits saved in draft state.You can resume editing or discard those changes. +
+
+ ); + })} +
+ ); +}; + +const customCode = `() => { + const booleanValues = [false, true]; + + return ( +
+ {booleanValues.map((toggleValue) => { + return ( + + {toggleValue ? 'Disabled Popover' : 'Show Popover'} + + } + open={false} + className="w-25" + > +
+ You have some edits saved in draft state.You can resume editing or discard those changes. +
+
+ ); + })} +
+ ); +}`; + +export default { + title: 'Components/Popover/Disabled Trigger', + component: Popover, + parameters: { + docs: { + docPage: { + noHtml: true, + customCode, + }, + }, + }, +}; diff --git a/core/components/molecules/popover/__tests__/Popover.test.tsx b/core/components/molecules/popover/__tests__/Popover.test.tsx index dc87681671..3baf54f803 100644 --- a/core/components/molecules/popover/__tests__/Popover.test.tsx +++ b/core/components/molecules/popover/__tests__/Popover.test.tsx @@ -50,6 +50,7 @@ describe('Popover component', () => { verticalOffset: valueHelper(NumberValue, { required: true }), onToggle: valueHelper(FunctionValue, { required: true }), dark: valueHelper(BooleanValue, { required: true, iterate: true }), + disabled: valueHelper(BooleanValue, { required: true, iterate: true }), }; const testFunc = (props: Record): void => { @@ -208,3 +209,83 @@ describe('Popover component with overwrite class', () => { expect(getByTestId('DesignSystem-Popover')).toHaveClass(className); }); }); + +describe('Popover component with prop: disabled', () => { + const disabledTrigger = ( + + ); + + it('does not renders Popover component with prop: disabled for disabled trigger for click event', () => { + const { getByTestId, queryByTestId } = render( + + Popover + + ); + + const popoverTrigger = getByTestId('DesignSystem-PopoverDisabledTrigger'); + fireEvent.click(popoverTrigger); + + expect(queryByTestId('DesignSystem-Popover')).not.toBeInTheDocument(); + }); + + it('renders Popover component with prop: disabled for disabled trigger for click event', () => { + const { getByTestId } = render( + + Popover + + ); + + const popoverTrigger = getByTestId('DesignSystem-PopoverDisabledTrigger'); + fireEvent.click(popoverTrigger); + + expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument(); + }); + + it('does not renders Popover component with prop: disabled for disabled trigger for hover event', () => { + const { getByTestId, queryByTestId } = render( + + Popover + + ); + + const popoverTrigger = getByTestId('DesignSystem-PopoverDisabledTrigger'); + fireEvent.mouseEnter(popoverTrigger); + + expect(queryByTestId('DesignSystem-Popover')).not.toBeInTheDocument(); + }); + + it('renders Popover component with prop: disabled for disabled trigger for hover event', () => { + const { getByTestId } = render( + + Popover + + ); + + const popoverTrigger = getByTestId('DesignSystem-PopoverDisabledTrigger'); + fireEvent.mouseEnter(popoverTrigger); + + expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument(); + }); + + it('renders Popover component with prop:disabled as false with open=true ', () => { + const { getByTestId } = render( + + Popover + + ); + + expect(getByTestId('DesignSystem-Popover')).toBeInTheDocument(); + }); + + it('does not renders Popover component with prop:disabled as true with open=true ', () => { + const { queryByTestId } = render( + + Popover + + ); + + expect(queryByTestId('DesignSystem-Popover')).not.toBeInTheDocument(); + }); +}); diff --git a/core/components/molecules/popover/__tests__/__snapshots__/Popover.test.tsx.snap b/core/components/molecules/popover/__tests__/__snapshots__/Popover.test.tsx.snap index bb9c3dba38..f7bc23dd71 100644 --- a/core/components/molecules/popover/__tests__/__snapshots__/Popover.test.tsx.snap +++ b/core/components/molecules/popover/__tests__/__snapshots__/Popover.test.tsx.snap @@ -1,7 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`Popover component - appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: false + appendToBody: false, trigger: "[ReactNode]", customStyle: {"width":{"required":true,"value":"150px"},"height":{"required":true,"value":"150px"}}, open: true, verticalOffset: 10, onToggle: "[Function]", dark: false, disabled: false 1`] = `