@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-75e5086d

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

@@ -0,0 +1,516 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Stack with alignContent="center" 1`] = `
+<ForwardRef(Stack)
+  alignContent="center"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--content-center govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--content-center govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignContent="flex-end" 1`] = `
+<ForwardRef(Stack)
+  alignContent="flex-end"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--content-flex-end govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--content-flex-end govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignContent="flex-start" 1`] = `
+<ForwardRef(Stack)
+  alignContent="flex-start"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--content-flex-start govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--content-flex-start govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignContent="space-around" 1`] = `
+<ForwardRef(Stack)
+  alignContent="space-around"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--content-space-around govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--content-space-around govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignContent="space-between" 1`] = `
+<ForwardRef(Stack)
+  alignContent="space-between"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--content-space-between govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--content-space-between govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignContent="space-evenly" 1`] = `
+<ForwardRef(Stack)
+  alignContent="space-evenly"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--content-space-evenly govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--content-space-evenly govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignItems="baseline" 1`] = `
+<ForwardRef(Stack)
+  alignItems="baseline"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--align-baseline govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--align-baseline govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignItems="center" 1`] = `
+<ForwardRef(Stack)
+  alignItems="center"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--align-center govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--align-center govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignItems="flex-end" 1`] = `
+<ForwardRef(Stack)
+  alignItems="flex-end"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--align-flex-end govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--align-flex-end govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignItems="flex-start" 1`] = `
+<ForwardRef(Stack)
+  alignItems="flex-start"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--align-flex-start govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--align-flex-start govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with alignItems="stretch" 1`] = `
+<ForwardRef(Stack)
+  alignItems="stretch"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--align-stretch govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--align-stretch govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with direction = "row", flexWrap="nowrap" and spacing={12} 1`] = `
+<ForwardRef(Stack)
+  direction="row"
+  flexWrap="nowrap"
+  spacing={12}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--nowrap govgr-gap-12 govgr-stack--row govgr-stack"
+  >
+    <div
+      className="govgr-stack--nowrap govgr-gap-12 govgr-stack--row govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with direction = "row", flexWrap="wrap" justifyContent="flex-end" alignItems="baseline" alignContent="center" and spacing={12} 1`] = `
+<ForwardRef(Stack)
+  alignContent="center"
+  alignItems="baseline"
+  direction="row"
+  flexWrap="wrap"
+  justifyContent="flex-end"
+  spacing={12}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-gap-12 govgr-stack--justify-flex-end govgr-stack--content-center govgr-stack--align-baseline govgr-stack--row govgr-stack"
+  >
+    <div
+      className="govgr-gap-12 govgr-stack--justify-flex-end govgr-stack--content-center govgr-stack--align-baseline govgr-stack--row govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with direction="column" 1`] = `
+<ForwardRef(Stack)
+  direction="column"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with direction="row" 1`] = `
+<ForwardRef(Stack)
+  direction="row"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--row govgr-stack"
+  >
+    <div
+      className="govgr-stack--row govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with flexWrap="nowrap" 1`] = `
+<ForwardRef(Stack)
+  flexWrap="nowrap"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--nowrap govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--nowrap govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with flexWrap="wrap" 1`] = `
+<ForwardRef(Stack)
+  flexWrap="wrap"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with justifyContent="center" 1`] = `
+<ForwardRef(Stack)
+  justifyContent="center"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--justify-center govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--justify-center govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with justifyContent="flex-end" 1`] = `
+<ForwardRef(Stack)
+  justifyContent="flex-end"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--justify-flex-end govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--justify-flex-end govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with justifyContent="flex-start" 1`] = `
+<ForwardRef(Stack)
+  justifyContent="flex-start"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--justify-flex-start govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--justify-flex-start govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with justifyContent="space-around" 1`] = `
+<ForwardRef(Stack)
+  justifyContent="space-around"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--justify-space-around govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--justify-space-around govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with justifyContent="space-between" 1`] = `
+<ForwardRef(Stack)
+  justifyContent="space-between"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--justify-space-between govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--justify-space-between govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with justifyContent="space-evenly" 1`] = `
+<ForwardRef(Stack)
+  justifyContent="space-evenly"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--justify-space-evenly govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--justify-space-evenly govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with no props 1`] = `
+<ForwardRef(Stack)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with spacing={2} 1`] = `
+<ForwardRef(Stack)
+  spacing={2}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-gap-2 govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-gap-2 govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with spacing={4} 1`] = `
+<ForwardRef(Stack)
+  spacing={4}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-gap-4 govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-gap-4 govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with spacing={6} 1`] = `
+<ForwardRef(Stack)
+  spacing={6}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-gap-6 govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-gap-6 govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with spacing={8} 1`] = `
+<ForwardRef(Stack)
+  spacing={8}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-gap-8 govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-gap-8 govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with spacing={10} 1`] = `
+<ForwardRef(Stack)
+  spacing={10}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-gap-10 govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-gap-10 govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;
+
+exports[`renders the Stack with spacing={12} 1`] = `
+<ForwardRef(Stack)
+  spacing={12}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-gap-12 govgr-stack--column govgr-stack"
+  >
+    <div
+      className="govgr-gap-12 govgr-stack--column govgr-stack"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Stack)>
+`;

package/es/Stack/index.js

@@ -0,0 +1,29 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["direction", "justifyContent", "alignItems", "alignContent", "spacing", "flexWrap", "className", "children"];
+import React from 'react';
+import clsx from 'clsx';
+import Base from '@digigov/react-core/Base';
+
+/**
+ * ...
+ */
+export var Stack = /*#__PURE__*/React.forwardRef(function Stack(_ref, ref) {
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? 'column' : _ref$direction,
+      justifyContent = _ref.justifyContent,
+      alignItems = _ref.alignItems,
+      alignContent = _ref.alignContent,
+      spacing = _ref.spacing,
+      flexWrap = _ref.flexWrap,
+      className = _ref.className,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    as: "div",
+    ref: ref,
+    className: clsx(className, flexWrap === 'nowrap' && 'govgr-stack--nowrap', spacing !== undefined && "govgr-gap-".concat(spacing), justifyContent && "govgr-stack--justify-".concat(justifyContent), alignContent && "govgr-stack--content-".concat(alignContent), alignItems && "govgr-stack--align-".concat(alignItems), direction && "govgr-stack--".concat(direction), true && 'govgr-stack')
+  }, props), children);
+});
+export default Stack;