@digigov/react-core 0.6.1 → 0.6.4

package/es/Dropdown/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,144 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Dropdown disabled 1`] = `
+<ForwardRef(Dropdown)
+  disabled={true}
+>
+  <details
+    className="govgr-dropdown--disabled govgr-dropdown"
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with align=left 1`] = `
+<ForwardRef(Dropdown)
+  align="left"
+>
+  <details
+    className="govgr-dropdown--left govgr-dropdown"
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with align=left and open=true 1`] = `
+<ForwardRef(Dropdown)
+  align="left"
+  open={true}
+>
+  <details
+    className="govgr-dropdown--left govgr-dropdown"
+    open={true}
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with align=right and open=false 1`] = `
+<ForwardRef(Dropdown)
+  align="right"
+  open={false}
+>
+  <details
+    className="govgr-dropdown"
+    open={false}
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with no props 1`] = `
+<ForwardRef(Dropdown)>
+  <details
+    className="govgr-dropdown"
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with open=false 1`] = `
+<ForwardRef(Dropdown)
+  open={false}
+>
+  <details
+    className="govgr-dropdown"
+    open={false}
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with open=true 1`] = `
+<ForwardRef(Dropdown)
+  open={true}
+>
+  <details
+    className="govgr-dropdown"
+    open={true}
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with placement=bottom and open=false 1`] = `
+<ForwardRef(Dropdown)
+  open={false}
+  placement="bottom"
+>
+  <details
+    className="govgr-dropdown"
+    open={false}
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with placement=top 1`] = `
+<ForwardRef(Dropdown)
+  placement="top"
+>
+  <details
+    className="govgr-dropdown--up govgr-dropdown"
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with placement=top align=left and open=true 1`] = `
+<ForwardRef(Dropdown)
+  align="left"
+  open={true}
+  placement="top"
+>
+  <details
+    className="govgr-dropdown--up govgr-dropdown--left govgr-dropdown"
+    open={true}
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;
+
+exports[`renders the Dropdown with placement=top and open=true 1`] = `
+<ForwardRef(Dropdown)
+  open={true}
+  placement="top"
+>
+  <details
+    className="govgr-dropdown--up govgr-dropdown"
+    open={true}
+  >
+    hello
+  </details>
+</ForwardRef(Dropdown)>
+`;

package/es/Dropdown/index.js

@@ -0,0 +1,27 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children", "align", "placement", "open", "disabled"];
+import React from 'react';
+import clsx from 'clsx';
+
+/**
+ * Dropdown is the main component for a dropdown.
+ * Inside this component must be DropdownButton and DropdownContent components.
+ */
+// eslint-disable-next-line react/display-name
+export var Dropdown = /*#__PURE__*/React.forwardRef(function Dropdown(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      align = _ref.align,
+      placement = _ref.placement,
+      open = _ref.open,
+      disabled = _ref.disabled,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("details", _extends({
+    ref: ref,
+    open: open,
+    className: clsx(className, placement === 'top' && 'govgr-dropdown--up', disabled === true && 'govgr-dropdown--disabled', align === 'left' && 'govgr-dropdown--left', true && 'govgr-dropdown')
+  }, props), children);
+});
+export default Dropdown;

package/es/Dropdown/index.test.js

@@ -0,0 +1,95 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import Dropdown from '@digigov/react-core/Dropdown';
+
+var _ref = /*#__PURE__*/React.createElement(Dropdown, null, "hello");
+
+it('renders the Dropdown with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Dropdown, {
+  disabled: true
+}, "hello");
+
+it('renders the Dropdown disabled', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+
+var _ref3 = /*#__PURE__*/React.createElement(Dropdown, {
+  open: true
+}, "hello");
+
+it('renders the Dropdown with open=true', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});
+
+var _ref4 = /*#__PURE__*/React.createElement(Dropdown, {
+  open: false
+}, "hello");
+
+it('renders the Dropdown with open=false', function () {
+  expect(mount(_ref4)).toMatchSnapshot();
+});
+
+var _ref5 = /*#__PURE__*/React.createElement(Dropdown, {
+  align: "left"
+}, "hello");
+
+it('renders the Dropdown with align=left', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});
+
+var _ref6 = /*#__PURE__*/React.createElement(Dropdown, {
+  placement: "top"
+}, "hello");
+
+it('renders the Dropdown with placement=top', function () {
+  expect(mount(_ref6)).toMatchSnapshot();
+});
+
+var _ref7 = /*#__PURE__*/React.createElement(Dropdown, {
+  open: true,
+  align: "left"
+}, "hello");
+
+it('renders the Dropdown with align=left and open=true', function () {
+  expect(mount(_ref7)).toMatchSnapshot();
+});
+
+var _ref8 = /*#__PURE__*/React.createElement(Dropdown, {
+  open: false,
+  align: "right"
+}, "hello");
+
+it('renders the Dropdown with align=right and open=false', function () {
+  expect(mount(_ref8)).toMatchSnapshot();
+});
+
+var _ref9 = /*#__PURE__*/React.createElement(Dropdown, {
+  open: true,
+  placement: "top"
+}, "hello");
+
+it('renders the Dropdown with placement=top and open=true', function () {
+  expect(mount(_ref9)).toMatchSnapshot();
+});
+
+var _ref10 = /*#__PURE__*/React.createElement(Dropdown, {
+  open: false,
+  placement: "bottom"
+}, "hello");
+
+it('renders the Dropdown with placement=bottom and open=false', function () {
+  expect(mount(_ref10)).toMatchSnapshot();
+});
+
+var _ref11 = /*#__PURE__*/React.createElement(Dropdown, {
+  open: true,
+  placement: "top",
+  align: "left"
+}, "hello");
+
+it('renders the Dropdown with placement=top align=left and open=true', function () {
+  expect(mount(_ref11)).toMatchSnapshot();
+});

package/es/DropdownButton/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,375 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the DropdownButton with arrow=false 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with arrow=true 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+  >
+    hello
+    <ForwardRef(ArrowIcon)
+      direction="down"
+    >
+      <ForwardRef(SvgIcon)
+        className="govgr-arrow--down"
+      >
+        <svg
+          aria-hidden="true"
+          className="govgr-arrow--down govgr-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+          />
+        </svg>
+      </ForwardRef(SvgIcon)>
+    </ForwardRef(ArrowIcon)>
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary 1`] = `
+<ForwardRef(DropdownButton)
+  color="primary"
+>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="primary"
+>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="primary"
+>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+  >
+    <ForwardRef(ArrowIcon)
+      direction="down"
+    >
+      <ForwardRef(SvgIcon)
+        className="govgr-arrow--down"
+      >
+        <svg
+          aria-hidden="true"
+          className="govgr-arrow--down govgr-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+          />
+        </svg>
+      </ForwardRef(SvgIcon)>
+    </ForwardRef(ArrowIcon)>
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and variant="button" 1`] = `
+<ForwardRef(DropdownButton)
+  color="primary"
+  variant="button"
+>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and variant="link" 1`] = `
+<ForwardRef(DropdownButton)
+  color="primary"
+  variant="link"
+>
+  <summary
+    className="govgr-link govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and variant="link" 2`] = `
+<ForwardRef(DropdownButton)
+  color="secondary"
+  variant="link"
+>
+  <summary
+    className="govgr-link govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary variant="button" and arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="primary"
+  variant="button"
+>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary variant="button" arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="primary"
+  variant="button"
+>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+  >
+    <ForwardRef(ArrowIcon)
+      direction="down"
+    >
+      <ForwardRef(SvgIcon)
+        className="govgr-arrow--down"
+      >
+        <svg
+          aria-hidden="true"
+          className="govgr-arrow--down govgr-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+          />
+        </svg>
+      </ForwardRef(SvgIcon)>
+    </ForwardRef(ArrowIcon)>
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary variant="link" arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="primary"
+  variant="link"
+>
+  <summary
+    className="govgr-link govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary variant="link" arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="primary"
+  variant="link"
+>
+  <summary
+    className="govgr-link govgr-dropdown__button--arrow govgr-dropdown__button"
+  >
+    <ForwardRef(ArrowIcon)
+      direction="down"
+    >
+      <ForwardRef(SvgIcon)
+        className="govgr-arrow--down"
+      >
+        <svg
+          aria-hidden="true"
+          className="govgr-arrow--down govgr-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+          />
+        </svg>
+      </ForwardRef(SvgIcon)>
+    </ForwardRef(ArrowIcon)>
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=secondary 1`] = `
+<ForwardRef(DropdownButton)
+  color="secondary"
+>
+  <summary
+    className="govgr-btn-secondary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=secondary and arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="secondary"
+>
+  <summary
+    className="govgr-btn-secondary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=secondary and arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="secondary"
+>
+  <summary
+    className="govgr-btn-secondary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+  >
+    <ForwardRef(ArrowIcon)
+      direction="down"
+    >
+      <ForwardRef(SvgIcon)
+        className="govgr-arrow--down"
+      >
+        <svg
+          aria-hidden="true"
+          className="govgr-arrow--down govgr-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+          />
+        </svg>
+      </ForwardRef(SvgIcon)>
+    </ForwardRef(ArrowIcon)>
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=secondary and variant="button" 1`] = `
+<ForwardRef(DropdownButton)
+  color="secondary"
+  variant="button"
+>
+  <summary
+    className="govgr-btn-secondary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=warning variant="button" arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="warning"
+  variant="link"
+>
+  <summary
+    className="govgr-link govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=warning variant="button" arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="warning"
+  variant="link"
+>
+  <summary
+    className="govgr-link govgr-dropdown__button--arrow govgr-dropdown__button"
+  >
+    hello
+    <ForwardRef(ArrowIcon)
+      direction="down"
+    >
+      <ForwardRef(SvgIcon)
+        className="govgr-arrow--down"
+      >
+        <svg
+          aria-hidden="true"
+          className="govgr-arrow--down govgr-svg-icon"
+          focusable="false"
+          viewBox="0 0 24 24"
+        >
+          <path
+            d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+          />
+        </svg>
+      </ForwardRef(SvgIcon)>
+    </ForwardRef(ArrowIcon)>
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with no props 1`] = `
+<ForwardRef(DropdownButton)>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with variant=button 1`] = `
+<ForwardRef(DropdownButton)
+  variant="button"
+>
+  <summary
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with variant=link 1`] = `
+<ForwardRef(DropdownButton)
+  variant="link"
+>
+  <summary
+    className="govgr-link govgr-dropdown__button"
+  >
+    hello
+  </summary>
+</ForwardRef(DropdownButton)>
+`;

package/es/DropdownButton/index.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children", "color", "variant", "arrow"];
+import React from 'react';
+import clsx from 'clsx';
+import ArrowIcon from '@digigov/react-core/ArrowIcon';
+
+var _ref2 = /*#__PURE__*/React.createElement(ArrowIcon, {
+  direction: "down"
+});
+
+/**
+ * DropdownButton it should be inside the Dropdown and it is used for opening or closing dropdown.
+ */
+export var DropdownButton = /*#__PURE__*/React.forwardRef(function DropdownButton(_ref, ref) {
+  var className = _ref.className,
+      children = _ref.children,
+      _ref$color = _ref.color,
+      color = _ref$color === void 0 ? 'primary' : _ref$color,
+      _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'button' : _ref$variant,
+      _ref$arrow = _ref.arrow,
+      arrow = _ref$arrow === void 0 ? false : _ref$arrow,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement("summary", _extends({
+    ref: ref,
+    className: clsx(className, variant === 'button' && [color === 'secondary' && 'govgr-btn-secondary', color === 'primary' && 'govgr-btn-primary', color === 'warning' && 'govgr-btn-warning', 'govgr-btn'], variant === 'link' && 'govgr-link', arrow === true && 'govgr-dropdown__button--arrow', true && 'govgr-dropdown__button')
+  }, props), children, arrow === true && _ref2);
+});
+export default DropdownButton;