cc-popover: init component

[pdesoyres-cc]

Context

This component is needed for the logs controller component. We want the different options of the logs component to be located in a popover because it provides an easy way to access options, and we don't have to rely on a more complicated modal dialog component.

Also, the native popover API is not yet supported everywhere.

This component is made of:

• a trigger: A <cc-button>.
• a content: The default slot.

To be discussed

isOpen is a public property that can be set from the outside.
Changing this property from outside the component won't trigger the cc-popover:open or cc-popover:close events.
Maybe, this is something we would like to discuss in sync with the team.

Inputs

We don't need to provide all the features the <cc-button> has. We will expose only some useful ones.

Attributes/properties

Property	Type	Default value	Mandatory	Description
accessibleName	string	null	true	Accessible name to set on the <cc-button>
hideText	boolean	false	false	Whether the <cc-button> should hide text
icon	IconModel	null	false	The icon to set on the cc-button
isOpen	boolean	false	false	Whether the content is shown on screen
position	PopoverPosition	bottom-left	false	The position of the content relative to the button

Slots

Name	Description
default	The popover content
button-text	The text to set on the <cc-button>

CSS custom property

Name	Type	Default value	Description
--cc-popover-z-index	number	999	The z-index to set on the popover content wrapper

Outputs

Event	Data type	Description
cc-popover:open	null	Fires whenever the popover is opened
cc-popover:close	null	Fires whenever the popover is closed

Type Definitions

export interface IconModel {
  content: string;
}

export type PopoverPosition = 'bottom-right' |  'bottom-left' |  'top-right' |  'top-left';

Stories & states

• default: withIconOnly,
• withButtonText,
• withButtonTextAndIcon