Overlay panel (#152)

* done

* del effect

* ver

* del pt

* fix nav name

---------

Co-authored-by: Aleksej Tre <[email protected]>

package.json

@@ -1,6 +1,6 @@
 {
  "name": "@cadolabs/sphere-ui",
- "version": "5.0.3",
+ "version": "5.1.0",
  "main": "dist/index.js",
  "license": "MIT",
  "repository": "https://github.com/Cado-Labs/sphere-ui",

src/components/OverlayPanel/index.js

@@ -0,0 +1,43 @@
+import React from "react"
+import { OverlayPanel as PrimeOverlayPanel } from "primereact/overlaypanel"
+
+import { pickDataAttributes } from "../../utils"
+
+export const OverlayPanel = React.forwardRef(
+ (
+ {
+ ariaCloseLabel,
+ breakpoints,
+ closeIcon,
+ closeOnEscape = true,
+ dismissable = true,
+ showCloseIcon = false,
+ transitionOptions,
+ unstyled = false,
+ onShow,
+ onHide,
+ children,
+ ...props
+ },
+ ref) => {
+ const dataAttributes = pickDataAttributes(props)
+
+ return (
+ <PrimeOverlayPanel
+ ref={ref}
+ ariaCloseLabel={ariaCloseLabel}
+ breakpoints={breakpoints}
+ closeIcon={closeIcon}
+ closeOnEscape={closeOnEscape}
+ dismissable={dismissable}
+ showCloseIcon={showCloseIcon}
+ transitionOptions={transitionOptions}
+ unstyled={unstyled}
+ onShow={onShow}
+ onHide={onHide}
+ {...dataAttributes}
+ >
+ {children}
+ </PrimeOverlayPanel>
+ )
+ })

src/index.js

@@ -36,6 +36,7 @@ export { Message } from "./components/Message"
 export { Money } from "./components/Money"
 export { MultiSelect } from "./components/MultiSelect"
 export { Number } from "./components/Number"
+export { OverlayPanel } from "./components/OverlayPanel"
 export { Pagination } from "./components/Pagination"
 export { PanelMenu } from "./components/PanelMenu"
 export { ProgressBar } from "./components/ProgressBar"

storybook/i18n/locales/stories/overlayPanel/en.yml

@@ -0,0 +1,13 @@
+content: OverlayPanel, also known as Popover, is a container component that can overlay other components on page.
+props:
+ ariaCloseLabel: Aria label of the close icon.
+ breakpoints: Object literal to define widths per screen size.
+ children: Used to get the child elements of the component.
+ closeIcon: Icon to display as close icon.
+ closeOnEscape: Specifies if pressing escape key should hide the preview.
+ dismissable: Enables to hide the overlay when outside is clicked.
+ showCloseIcon: When enabled, displays a close icon at top right corner.
+ transitionOptions: The properties of CSSTransition can be customized, except for "nodeRef" and "in" properties.
+ unstyled: When enabled, it removes component related styles in the core.
+ onHide: Callback to invoke when overlay becomes hidden.
+ onShow: Callback to invoke when overlay becomes visible.

storybook/stories/display/OverlayPanel/overlayPanel.js

@@ -0,0 +1,45 @@
+/* eslint-disable max-len */
+import { OverlayPanel, Button } from "@cadolabs/sphere-ui"
+
+import i18n from "@i18n"
+
+const I18N_PREFIX = "stories.overlayPanel"
+
+const code = `
+function OverlayPanelExample() {
+ const op = React.useRef(null);
+
+ return (
+ <div className="card flex justify-content-center">
+ <Button type="button" icon="pi pi-image" label="Image" onClick={(e) => op.current.toggle(e)} />
+ <OverlayPanel ref={op}>
+ <img src={'https://primefaces.org/cdn/primereact/images/product/bamboo-watch.jpg'} alt="Bamboo Watch"></img>
+ </OverlayPanel>
+ </div>
+ );
+}
+`
+
+export const overlayPanel = {
+ component: "OverlayPanel",
+ content: {
+ description: i18n.t(`${I18N_PREFIX}.content`),
+ },
+ code,
+ scope: { OverlayPanel, Button },
+ descriptionProps: [
+ { name: "ariaCloseLabel", type: "string", default: "close", description: `${I18N_PREFIX}.props.ariaCloseLabel` },
+ { name: "breakpoints", type: "OverlayPanelBreakpoints", default: null, description: `${I18N_PREFIX}.props.breakpoints` },
+ { name: "children", type: "ReactNode", default: null, description: `${I18N_PREFIX}.props.children` },
+ { name: "closeIcon", type: "IconType<OverlayPanelProps>", default: null, description: `${I18N_PREFIX}.props.closeIcon` },
+ { name: "closeOnEscape", type: "boolean", default: true, description: `${I18N_PREFIX}.props.closeOnEscape` },
+ { name: "dismissable", type: "boolean", default: true, description: `${I18N_PREFIX}.props.dismissable` },
+ { name: "showCloseIcon", type: "boolean", default: false, description: `${I18N_PREFIX}.props.showCloseIcon` },
+ { name: "transitionOptions", type: "CSSTransitionProps", default: null, description: `${I18N_PREFIX}.props.transitionOptions` },
+ { name: "unstyled", type: "boolean", default: false, description: `${I18N_PREFIX}.props.unstyled` },
+ ],
+ eventDescriptionProps: [
+ { name: "onHide", description: `${I18N_PREFIX}.props.onHide` },
+ { name: "onShow", description: `${I18N_PREFIX}.props.onShow` },
+ ],
+}

storybook/stories/display/OverlayPanel/overlayPanel.stories.js

@@ -0,0 +1,13 @@
+import React from "react"
+
+import { StoryPage } from "@components"
+
+import { overlayPanel } from "./overlayPanel"
+
+export default {
+ title: "Components / Display",
+}
+
+export const OverlayPanel = context => <StoryPage {...overlayPanel} {...context} />
+
+OverlayPanel.storyName = "OverlayPanel"