@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

package/src/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/src/Stack/index.test.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Stack from '@digigov/react-core/Stack';
+
+it('renders the Stack with no props', () => {
+  expect(mount(<Stack>hello</Stack>)).toMatchSnapshot();
+});
+
+it('renders the Stack with direction="column"', () => {
+  expect(mount(<Stack direction = 'column'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with direction="row"', () => {
+  expect(mount(<Stack direction = 'row'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with flexWrap="wrap"', () => {
+  expect(mount(<Stack flexWrap = 'wrap'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with flexWrap="nowrap"', () => {
+  expect(mount(<Stack flexWrap = 'nowrap'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with spacing={2}', () => {
+  expect(mount(<Stack spacing = {2}>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with spacing={4}', () => {
+  expect(mount(<Stack spacing = {4}>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with spacing={6}', () => {
+  expect(mount(<Stack spacing = {6}>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with spacing={8}', () => {
+  expect(mount(<Stack spacing = {8}>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with spacing={10}', () => {
+  expect(mount(<Stack spacing = {10}>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with spacing={12}', () => {
+  expect(mount(<Stack spacing = {12}>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with justifyContent="center"', () => {
+  expect(mount(<Stack justifyContent = 'center'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with justifyContent="flex-start"', () => {
+  expect(mount(<Stack justifyContent = 'flex-start'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with justifyContent="flex-end"', () => {
+  expect(mount(<Stack justifyContent = 'flex-end'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with justifyContent="space-around"', () => {
+  expect(mount(<Stack justifyContent = 'space-around'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with justifyContent="space-between"', () => {
+  expect(mount(<Stack justifyContent = 'space-between'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with justifyContent="space-evenly"', () => {
+  expect(mount(<Stack justifyContent = 'space-evenly'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignItems="flex-start"', () => {
+  expect(mount(<Stack alignItems = 'flex-start'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignItems="flex-end"', () => {
+  expect(mount(<Stack alignItems = 'flex-end'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignItems="center"', () => {
+  expect(mount(<Stack alignItems = 'center'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignItems="baseline"', () => {
+  expect(mount(<Stack alignItems = 'baseline'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignItems="stretch"', () => {
+  expect(mount(<Stack alignItems = 'stretch'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignContent="center"', () => {
+  expect(mount(<Stack alignContent = 'center'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignContent="flex-start"', () => {
+  expect(mount(<Stack alignContent = 'flex-start'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignContent="flex-end"', () => {
+  expect(mount(<Stack alignContent = 'flex-end'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignContent="space-around"', () => {
+  expect(mount(<Stack alignContent = 'space-around'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignContent="space-between"', () => {
+  expect(mount(<Stack alignContent = 'space-between'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with alignContent="space-evenly"', () => {
+  expect(mount(<Stack alignContent = 'space-evenly'>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with direction = "row", flexWrap="nowrap" and spacing={12}', () => {
+  expect(mount(<Stack direction = 'row' flexWrap='nowrap' spacing = {12}>hello</Stack>)).toMatchSnapshot();
+});
+it('renders the Stack with direction = "row", flexWrap="wrap" justifyContent="flex-end" alignItems="baseline" alignContent="center" and spacing={12}', () => {
+  expect(mount(<Stack direction = 'row' flexWrap='wrap' justifyContent="flex-end" alignItems="baseline" alignContent="center" spacing = {12}>hello</Stack>)).toMatchSnapshot();
+});

package/src/Stack/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface StackProps extends BaseProps<'div'> {
+  /**
+   * direction is optional. Set to control the direction of flex items.
+   */
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  /**
+   * justifyContent is optional. Set to control how items are positioned along Stack's main axis .
+   */
+  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly'; 
+  /**
+   * alignItems is optional. Set to control how items are positioned along Stack's cross axis.
+   */
+  alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' ;
+  /**
+   * alignContent is optional. Set to control how rows are positioned in multi-row Stack container.
+   */
+  alignContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly' ;
+  /**
+   * spacing is optional. Set to the number you want the space to be.
+   */
+  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
+  /**
+   * flexWrap is optional. The default value is 'wrap'.
+   */
+  flexWrap?: 'wrap' | 'nowrap';
+
+}
+/**
+ * ...
+ */
+export const Stack = React.forwardRef<
+  HTMLDivElement,
+  StackProps
+>(function Stack(
+  { direction = 'column', justifyContent, alignItems, alignContent, spacing, flexWrap, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-stack': true,
+        [`govgr-stack--${direction}`]: direction,
+        [`govgr-stack--justify-${justifyContent}`]: justifyContent,
+        [`govgr-stack--align-${alignItems}`]: alignItems,
+        [`govgr-stack--content-${alignContent}`]: alignContent,
+        'govgr-stack--nowrap': flexWrap === 'nowrap',
+        [`govgr-gap-${spacing}`]: spacing !== undefined,
+
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default Stack;