@aegov/design-system-react/dist/components/Popover/Popover.stories.js

A design system for the Government of the United Arab Emirates. Extending the original design system released as @aegov/design-system, this is the package specefically created for the ReactJs enviornment.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = exports.WithForm = exports.Positions = exports.Basic = void 0;
var _react = _interopRequireDefault(require("react"));
var _Popover = require("./Popover");
var _react2 = require("@phosphor-icons/react");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var _default = exports.default = {
  title: 'Components/Popover',
  component: _Popover.PopoverRoot,
  parameters: {
    layout: 'centered'
  }
};
const Basic = () => /*#__PURE__*/_react.default.createElement(_Popover.PopoverRoot, null, /*#__PURE__*/_react.default.createElement(_Popover.PopoverTrigger, {
  asChild: true
}, /*#__PURE__*/_react.default.createElement("button", {
  className: "inline-flex items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
}, /*#__PURE__*/_react.default.createElement(_react2.List, {
  className: "mr-2 h-4 w-4"
}), "Open Popover")), /*#__PURE__*/_react.default.createElement(_Popover.PopoverContent, null, /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-4"
}, /*#__PURE__*/_react.default.createElement("h4", {
  className: "text-lg font-semibold text-gray-900"
}, "Popover Title"), /*#__PURE__*/_react.default.createElement("p", {
  className: "text-sm text-gray-500"
}, "This is a description text that can contain any content you want to display in the popover"), /*#__PURE__*/_react.default.createElement("div", {
  className: "flex justify-end"
}, /*#__PURE__*/_react.default.createElement("button", {
  className: "rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
}, "Action")))));
exports.Basic = Basic;
const WithForm = () => /*#__PURE__*/_react.default.createElement(_Popover.PopoverRoot, null, /*#__PURE__*/_react.default.createElement(_Popover.PopoverTrigger, {
  asChild: true
}, /*#__PURE__*/_react.default.createElement("button", {
  className: "inline-flex items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
}, /*#__PURE__*/_react.default.createElement(_react2.List, {
  className: "mr-2 h-4 w-4"
}), "Settings")), /*#__PURE__*/_react.default.createElement(_Popover.PopoverContent, null, /*#__PURE__*/_react.default.createElement("form", {
  className: "flex flex-col gap-4"
}, /*#__PURE__*/_react.default.createElement("h4", {
  className: "text-lg font-semibold text-gray-900"
}, "Preferences"), /*#__PURE__*/_react.default.createElement("div", {
  className: "space-y-4"
}, /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-2"
}, /*#__PURE__*/_react.default.createElement("label", {
  className: "text-sm font-medium text-gray-700"
}, "Name"), /*#__PURE__*/_react.default.createElement("input", {
  type: "text",
  className: "rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500",
  placeholder: "Enter your name"
})), /*#__PURE__*/_react.default.createElement("div", {
  className: "flex flex-col gap-2"
}, /*#__PURE__*/_react.default.createElement("label", {
  className: "text-sm font-medium text-gray-700"
}, "Email"), /*#__PURE__*/_react.default.createElement("input", {
  type: "email",
  className: "rounded-md border border-gray-300 px-3 py-2 text-sm focus:border-primary-500 focus:outline-none focus:ring-1 focus:ring-primary-500",
  placeholder: "Enter your email"
}))), /*#__PURE__*/_react.default.createElement("div", {
  className: "flex justify-end gap-2"
}, /*#__PURE__*/_react.default.createElement("button", {
  type: "button",
  className: "rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50"
}, "Cancel"), /*#__PURE__*/_react.default.createElement("button", {
  type: "submit",
  className: "rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-primary-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary-600"
}, "Save")))));
exports.WithForm = WithForm;
const Positions = () => /*#__PURE__*/_react.default.createElement("div", {
  className: "flex gap-4"
}, ['top', 'right', 'bottom', 'left'].map(side => /*#__PURE__*/_react.default.createElement(_Popover.PopoverRoot, {
  key: side
}, /*#__PURE__*/_react.default.createElement(_Popover.PopoverTrigger, {
  asChild: true
}, /*#__PURE__*/_react.default.createElement("button", {
  className: "inline-flex items-center justify-center rounded-md bg-white px-4 py-2 text-sm font-medium text-gray-700 shadow-sm hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2"
}, side)), /*#__PURE__*/_react.default.createElement(_Popover.PopoverContent, {
  side: side
}, /*#__PURE__*/_react.default.createElement("p", {
  className: "text-sm text-gray-500"
}, "This popover appears on the ", side)))));
exports.Positions = Positions;