@digigov/react-core 0.26.0 → 1.0.0-rc

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

@@ -0,0 +1,589 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Button with tabIndex prop 1`] = `
+<ForwardRef(DropdownButton)
+  tabIndex={0}
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      Menu
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with arrow=false 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with arrow=true 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+      <ForwardRef(ArrowIcon)
+        direction="down"
+      >
+        <ForwardRef(SvgIcon)
+          className="govgr-svg-icon--arrow--down"
+        >
+          <ForwardRef(Base)
+            aria-hidden="true"
+            as="svg"
+            className="govgr-svg-icon--arrow--down govgr-svg-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <svg
+              aria-hidden="true"
+              className="govgr-svg-icon--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(Base)>
+        </ForwardRef(SvgIcon)>
+      </ForwardRef(ArrowIcon)>
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary 1`] = `
+<ForwardRef(DropdownButton)
+  color="primary"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="primary"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="primary"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+      tabIndex={0}
+    >
+      <ForwardRef(ArrowIcon)
+        direction="down"
+      >
+        <ForwardRef(SvgIcon)
+          className="govgr-svg-icon--arrow--down"
+        >
+          <ForwardRef(Base)
+            aria-hidden="true"
+            as="svg"
+            className="govgr-svg-icon--arrow--down govgr-svg-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <svg
+              aria-hidden="true"
+              className="govgr-svg-icon--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(Base)>
+        </ForwardRef(SvgIcon)>
+      </ForwardRef(ArrowIcon)>
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and variant="button" 1`] = `
+<ForwardRef(DropdownButton)
+  color="primary"
+  variant="button"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and variant="link" 1`] = `
+<ForwardRef(DropdownButton)
+  color="primary"
+  variant="link"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-link govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-link govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary and variant="link" 2`] = `
+<ForwardRef(DropdownButton)
+  color="secondary"
+  variant="link"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-link govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-link govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary variant="button" and arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="primary"
+  variant="button"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary variant="button" arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="primary"
+  variant="button"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+      tabIndex={0}
+    >
+      <ForwardRef(ArrowIcon)
+        direction="down"
+      >
+        <ForwardRef(SvgIcon)
+          className="govgr-svg-icon--arrow--down"
+        >
+          <ForwardRef(Base)
+            aria-hidden="true"
+            as="svg"
+            className="govgr-svg-icon--arrow--down govgr-svg-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <svg
+              aria-hidden="true"
+              className="govgr-svg-icon--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(Base)>
+        </ForwardRef(SvgIcon)>
+      </ForwardRef(ArrowIcon)>
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary variant="link" arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="primary"
+  variant="link"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-link govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-link govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=primary variant="link" arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="primary"
+  variant="link"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-link govgr-dropdown__button--arrow govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-link govgr-dropdown__button--arrow govgr-dropdown__button"
+      tabIndex={0}
+    >
+      <ForwardRef(ArrowIcon)
+        direction="down"
+      >
+        <ForwardRef(SvgIcon)
+          className="govgr-svg-icon--arrow--down"
+        >
+          <ForwardRef(Base)
+            aria-hidden="true"
+            as="svg"
+            className="govgr-svg-icon--arrow--down govgr-svg-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <svg
+              aria-hidden="true"
+              className="govgr-svg-icon--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(Base)>
+        </ForwardRef(SvgIcon)>
+      </ForwardRef(ArrowIcon)>
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=secondary 1`] = `
+<ForwardRef(DropdownButton)
+  color="secondary"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-secondary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-secondary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=secondary and arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="secondary"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-secondary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-secondary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=secondary and arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="secondary"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-secondary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-secondary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
+      tabIndex={0}
+    >
+      <ForwardRef(ArrowIcon)
+        direction="down"
+      >
+        <ForwardRef(SvgIcon)
+          className="govgr-svg-icon--arrow--down"
+        >
+          <ForwardRef(Base)
+            aria-hidden="true"
+            as="svg"
+            className="govgr-svg-icon--arrow--down govgr-svg-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <svg
+              aria-hidden="true"
+              className="govgr-svg-icon--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(Base)>
+        </ForwardRef(SvgIcon)>
+      </ForwardRef(ArrowIcon)>
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=secondary and variant="button" 1`] = `
+<ForwardRef(DropdownButton)
+  color="secondary"
+  variant="button"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-secondary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-secondary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=warning variant="button" arrow={false} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={false}
+  color="warning"
+  variant="link"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-link govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-link govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with color=warning variant="button" arrow={true} 1`] = `
+<ForwardRef(DropdownButton)
+  arrow={true}
+  color="warning"
+  variant="link"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-link govgr-dropdown__button--arrow govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-link govgr-dropdown__button--arrow govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+      <ForwardRef(ArrowIcon)
+        direction="down"
+      >
+        <ForwardRef(SvgIcon)
+          className="govgr-svg-icon--arrow--down"
+        >
+          <ForwardRef(Base)
+            aria-hidden="true"
+            as="svg"
+            className="govgr-svg-icon--arrow--down govgr-svg-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <svg
+              aria-hidden="true"
+              className="govgr-svg-icon--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(Base)>
+        </ForwardRef(SvgIcon)>
+      </ForwardRef(ArrowIcon)>
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with no props 1`] = `
+<ForwardRef(DropdownButton)>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with variant=button 1`] = `
+<ForwardRef(DropdownButton)
+  variant="button"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-btn-primary govgr-btn govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;
+
+exports[`renders the DropdownButton with variant=link 1`] = `
+<ForwardRef(DropdownButton)
+  variant="link"
+>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-link govgr-dropdown__button"
+    tabIndex={0}
+  >
+    <summary
+      className="govgr-link govgr-dropdown__button"
+      tabIndex={0}
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(DropdownButton)>
+`;

package/es/DropdownButton/index.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["className", "children", "color", "variant", "arrow", "tabIndex", "underline"];
+import React from 'react';
+import clsx from 'clsx';
+import Base from '@digigov/react-core/Base';
+import { ArrowIcon } from '@digigov/react-icons';
+
+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,
+      _ref$tabIndex = _ref.tabIndex,
+      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex,
+      underline = _ref.underline,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    as: "summary",
+    ref: ref,
+    tabIndex: tabIndex,
+    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', underline && 'govgr-dropdown__button--underline', arrow && 'govgr-dropdown__button--arrow', true && 'govgr-dropdown__button')
+  }, props), children, arrow && _ref2);
+});
+export default DropdownButton;