@digigov/react-core 0.25.5 → 0.27.0-28c68d3d

package/src/Base/index.tsx

@@ -55,6 +55,7 @@ export type BaseProps<
     paddingRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
     /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
     printHidden?: boolean;
+    printVisible?: 'block' | 'inline';
     /** Components will be hidden from 'xs' screen size and up. */
     xsUpHidden?: boolean;
     /** Components will be hidden from 'sm' screen size and up. */
@@ -85,59 +86,6 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
   props: BaseProps<C>
 ) => React.ReactElement | null;
 
-function calculateClasses(
-  margin?: number,
-  marginTop?: number,
-  marginBottom?: number,
-  marginRight?: number,
-  marginLeft?: number,
-  padding?: number,
-  paddingTop?: number,
-  paddingBottom?: number,
-  paddingRight?: number,
-  paddingLeft?: number,
-  printHidden?: boolean,
-  printVisible?: 'block' | 'inline',
-  xsUpHidden?: boolean,
-  smUpHidden?: boolean,
-  mdUpHidden?: boolean,
-  lgUpHidden?: boolean,
-  xlUpHidden?: boolean,
-  xsHidden?: boolean,
-  smHidden?: boolean,
-  mdHidden?: boolean,
-  lgHidden?: boolean,
-  xlHidden?: boolean
-) {
-  const classList = {} as Record<string, boolean>;
-  for (let i = 0; i <= 12; i++) {
-    classList[`govgr-m-${i}`] = margin === i;
-    classList[`govgr-mt-${i}`] = marginTop === i;
-    classList[`govgr-mb-${i}`] = marginBottom === i;
-    classList[`govgr-mr-${i}`] = marginRight === i;
-    classList[`govgr-ml-${i}`] = marginLeft === i;
-    classList[`govgr-p-${i}`] = padding === i;
-    classList[`govgr-pt-${i}`] = paddingTop === i;
-    classList[`govgr-pb-${i}`] = paddingBottom === i;
-    classList[`govgr-pr-${i}`] = paddingRight === i;
-    classList[`govgr-pl-${i}`] = paddingLeft === i;
-  }
-  classList['govgr-print-hidden'] = !!printHidden;
-  classList['govgr-print-visible-block'] = printVisible === 'block';
-  classList['govgr-print-visible-inline'] = printVisible === 'inline';
-  classList['govgr-hidden-xs--up'] = xsUpHidden === true;
-  classList['govgr-hidden-sm--up'] = smUpHidden === true;
-  classList['govgr-hidden-md--up'] = mdUpHidden === true;
-  classList['govgr-hidden-lg--up'] = lgUpHidden === true;
-  classList['govgr-hidden-xl--up'] = xlUpHidden === true;
-  classList['govgr-hidden-xs'] = xsHidden === true;
-  classList['govgr-hidden-sm'] = smHidden === true;
-  classList['govgr-hidden-md'] = mdHidden === true;
-  classList['govgr-hidden-lg'] = lgHidden === true;
-  classList['govgr-hidden-xl'] = xlHidden === true;
-  return classList;
-}
-
 export const Base: BaseComponent = React.forwardRef(function Base<
   C extends React.ElementType = 'span'
 >(
@@ -175,34 +123,37 @@ export const Base: BaseComponent = React.forwardRef(function Base<
 
   return (
     <Component
+      className={clsx(className, {
+        [`govgr-m-${margin}`]: margin !== undefined ? true : undefined,
+        [`govgr-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,
+        [`govgr-mb-${marginBottom}`]:
+          marginBottom !== undefined ? true : undefined,
+        [`govgr-mr-${marginRight}`]:
+          marginRight !== undefined ? true : undefined,
+        [`govgr-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,
+        [`govgr-p-${padding}`]: padding !== undefined ? true : undefined,
+        [`govgr-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,
+        [`govgr-pb-${paddingBottom}`]:
+          paddingBottom !== undefined ? true : undefined,
+        [`govgr-pr-${paddingRight}`]:
+          paddingRight !== undefined ? true : undefined,
+        [`govgr-pl-${paddingLeft}`]:
+          paddingLeft !== undefined ? true : undefined,
+        'govgr-print-hidden': !!printHidden,
+        'govgr-print-visible-block': printVisible === 'block',
+        'govgr-print-visible-inline': printVisible === 'inline',
+        'govgr-hidden-xs--up': !!xsUpHidden,
+        'govgr-hidden-sm--up': !!smUpHidden,
+        'govgr-hidden-md--up': !!mdUpHidden,
+        'govgr-hidden-lg--up': !!lgUpHidden,
+        'govgr-hidden-xl--up': !!xlUpHidden,
+        'govgr-hidden-xs': !!xsHidden,
+        'govgr-hidden-sm': !!smHidden,
+        'govgr-hidden-md': !!mdHidden,
+        'govgr-hidden-lg': !!lgHidden,
+        'govgr-hidden-xl': !!xlHidden,
+      })}
       ref={ref}
-      className={clsx(
-        className,
-        calculateClasses(
-          margin,
-          marginTop,
-          marginBottom,
-          marginRight,
-          marginLeft,
-          padding,
-          paddingTop,
-          paddingBottom,
-          paddingRight,
-          paddingLeft,
-          printHidden,
-          printVisible,
-          xsUpHidden,
-          smUpHidden,
-          mdUpHidden,
-          lgUpHidden,
-          xlUpHidden,
-          xsHidden,
-          smHidden,
-          mdHidden,
-          lgHidden,
-          xlHidden
-        )
-      )}
       {...props}
     >
       {children}

package/src/CheckboxItem/__snapshots__/index.test.tsx.snap

@@ -7,23 +7,81 @@ exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-checkboxes__label--disabled govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label--disabled govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={true}
-        type="checkbox"
+        as="label"
+        className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={true}
-          type="checkbox"
-        />
+        <label
+          className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            disabled={true}
+            type="checkbox"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              disabled={true}
+              type="checkbox"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
+exports[`renders the CheckboxItem with \`divider\` prop 1`] = `
+<ForwardRef(CheckboxItem)
+  divider="ή"
+>
+  <ForwardRef(ChoiceDivider)
+    text="ή"
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-choice-divider"
+    >
+      <div
+        className="govgr-choice-divider"
+      >
+        ή
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(ChoiceDivider)>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label"
+    >
+      <ForwardRef(Base)
+        as="label"
+        className="govgr-checkboxes__label govgr-label"
+      >
+        <label
+          className="govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            type="checkbox"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              type="checkbox"
+            />
+          </ForwardRef(Base)>
+        </label>
+      </ForwardRef(Base)>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;
@@ -35,25 +93,32 @@ exports[`renders the CheckboxItem with \`name\` prop 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={false}
-        name="example"
-        type="checkbox"
+        as="label"
+        className="govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={false}
-          name="example"
-          type="checkbox"
-        />
+        <label
+          className="govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            name="example"
+            type="checkbox"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              name="example"
+              type="checkbox"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;
@@ -67,27 +132,94 @@ exports[`renders the CheckboxItem with \`value\` \`name\` and \`disabled\` props
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-checkboxes__label--disabled govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label--disabled govgr-checkboxes__label"
+    >
+      <ForwardRef(Base)
+        as="label"
+        className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
+      >
+        <label
+          className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            disabled={true}
+            name="example"
+            type="checkbox"
+            value="example"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              disabled={true}
+              name="example"
+              type="checkbox"
+              value="example"
+            />
+          </ForwardRef(Base)>
+        </label>
+      </ForwardRef(Base)>
+    </ForwardRef(LabelContainer)>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
+exports[`renders the CheckboxItem with \`value\` \`name\`, \`divider\` and \`disabled\` props 1`] = `
+<ForwardRef(CheckboxItem)
+  disabled={true}
+  divider="ή"
+  name="example"
+  value="example"
+>
+  <ForwardRef(ChoiceDivider)
+    text="ή"
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-choice-divider"
+    >
+      <div
+        className="govgr-choice-divider"
+      >
+        ή
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(ChoiceDivider)>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label--disabled govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={true}
-        name="example"
-        type="checkbox"
-        value="example"
+        as="label"
+        className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={true}
-          name="example"
-          type="checkbox"
-          value="example"
-        />
+        <label
+          className="govgr-checkboxes__label--disabled govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            disabled={true}
+            name="example"
+            type="checkbox"
+            value="example"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              disabled={true}
+              name="example"
+              type="checkbox"
+              value="example"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;
@@ -99,25 +231,32 @@ exports[`renders the CheckboxItem with \`value\` prop 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={false}
-        type="checkbox"
-        value="example"
+        as="label"
+        className="govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={false}
-          type="checkbox"
-          value="example"
-        />
+        <label
+          className="govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            type="checkbox"
+            value="example"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              type="checkbox"
+              value="example"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;
@@ -127,23 +266,30 @@ exports[`renders the CheckboxItem with no props 1`] = `
   <div
     className="govgr-checkboxes__item"
   >
-    <label
-      className="govgr-label govgr-checkboxes__label"
+    <ForwardRef(LabelContainer)
+      className="govgr-checkboxes__label"
     >
-      hello
       <ForwardRef(Base)
-        as="input"
-        className="govgr-checkboxes__input"
-        disabled={false}
-        type="checkbox"
+        as="label"
+        className="govgr-checkboxes__label govgr-label"
       >
-        <input
-          className="govgr-checkboxes__input"
-          disabled={false}
-          type="checkbox"
-        />
+        <label
+          className="govgr-checkboxes__label govgr-label"
+        >
+          hello
+          <ForwardRef(Base)
+            as="input"
+            className="govgr-checkboxes__input"
+            type="checkbox"
+          >
+            <input
+              className="govgr-checkboxes__input"
+              type="checkbox"
+            />
+          </ForwardRef(Base)>
+        </label>
       </ForwardRef(Base)>
-    </label>
+    </ForwardRef(LabelContainer)>
   </div>
 </ForwardRef(CheckboxItem)>
 `;

package/src/CheckboxItem/index.test.tsx

@@ -21,6 +21,9 @@ it('renders the CheckboxItem with `value` prop', () => {
 it('renders the CheckboxItem with `disabled` prop', () => {
   expect(mount(<CheckboxItem disabled>hello</CheckboxItem>)).toMatchSnapshot();
 });
+it('renders the CheckboxItem with `divider` prop', () => {
+  expect(mount(<CheckboxItem divider='ή'>hello</CheckboxItem>)).toMatchSnapshot();
+});
 
 it('renders the CheckboxItem with `value` `name` and `disabled` props', () => {
   expect(
@@ -31,3 +34,13 @@ it('renders the CheckboxItem with `value` `name` and `disabled` props', () => {
     )
   ).toMatchSnapshot();
 });
+it('renders the CheckboxItem with `value` `name`, `divider` and `disabled` props', () => {
+  expect(
+    mount(
+      <CheckboxItem value="example" name="example" divider='ή' disabled>
+        hello
+      </CheckboxItem>
+    )
+  ).toMatchSnapshot();
+});
+

package/src/CheckboxItem/index.tsx

@@ -2,8 +2,16 @@ import React from 'react';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 import clsx from 'clsx';
+import ChoiceDivider from '@digigov/react-core/ChoiceDivider';
 
-export interface CheckboxItemProps extends BaseProps<'input'> {}
+export interface CheckboxItemProps extends BaseProps<'input'> {
+  /**
+   * divider is optional.
+   * Add this prop to add a choice divider ontop of a checkbox item.
+   * The string is the text that it will appear above this checkbox item.
+   */
+  divider?: string;
+}
 /**
  * Details for the CheckboxItem.
  * CheckboxItem component allows the user to select one or more checkboxes
@@ -13,36 +21,39 @@ export const CheckboxItem = React.forwardRef<
   HTMLInputElement,
   CheckboxItemProps
 >(function CheckboxItem(
-  { name, value, className, disabled, children, ...props },
+  { name, value, divider, className, disabled, children, ...props },
   ref
 ) {
   return (
-    <div
-      className={clsx(className, {
-        'govgr-checkboxes__item': true,
-      })}
-    >
-      <LabelContainer
-        className={clsx({
-          'govgr-checkboxes__label': true,
-          'govgr-checkboxes__label--disabled': disabled === true,
+    <>
+      {divider && <ChoiceDivider text={divider} />}
+      <div
+        className={clsx(className, {
+          'govgr-checkboxes__item': true,
         })}
       >
-        {children}
-        <Base
-          as="input"
-          ref={ref}
-          type="checkbox"
-          name={name}
-          value={value}
+        <LabelContainer
           className={clsx({
-            'govgr-checkboxes__input': true,
+            'govgr-checkboxes__label': true,
+            'govgr-checkboxes__label--disabled': disabled === true,
           })}
-          disabled={disabled}
-          {...props}
-        />
-      </LabelContainer>
-    </div>
+        >
+          {children}
+          <Base
+            as="input"
+            ref={ref}
+            type="checkbox"
+            name={name}
+            value={value}
+            className={clsx({
+              'govgr-checkboxes__input': true,
+            })}
+            disabled={disabled}
+            {...props}
+          />
+        </LabelContainer>
+      </div>
+    </>
   );
 });
 

package/src/ChoiceDivider/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the ChoiceDivider with text prop 1`] = `
+<ForwardRef(ChoiceDivider)
+  text="ή"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-choice-divider"
+  >
+    <div
+      className="govgr-choice-divider"
+    >
+      ή
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(ChoiceDivider)>
+`;

package/src/ChoiceDivider/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ChoiceDivider from '@digigov/react-core/ChoiceDivider';
+
+it('renders the ChoiceDivider with text prop', () => {
+  expect(mount(<ChoiceDivider text='ή'/>)).toMatchSnapshot();
+});

package/src/ChoiceDivider/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ChoiceDividerProps extends BaseProps<'div'> {
+  text?: string;
+}
+/**
+ * ChoiceDivider component adds a text divider on top of a Radio or Checkbox item.
+ * It's been used as a prop ("divider") inside RadioItem and CheckboxItem. 
+ */
+export const ChoiceDivider = React.forwardRef<HTMLDivElement, ChoiceDividerProps>(
+  function ChoiceDivider({ text, className, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-choice-divider': true,
+        })}
+        {...props}
+      >
+        {text}
+      </Base>
+    );
+  }
+);
+
+export default ChoiceDivider;

package/src/NavVerticalItem/index.tsx

@@ -8,6 +8,12 @@ export interface NavVerticalItemProps extends BaseProps<'a'> {
    * When the NavVerticalItem is active, that means that we are in this option / title / page of the NavVertical.
    */
   active?: boolean;
+  /**
+   * variant is optional.
+   * When variant is spaced, the NavVerticalItem has more padding.
+   * When variant is dense, the NavVerticalItem has less padding.
+    */
+  variant?: 'spaced' | 'dense';
 }
 /**
  * NavVerticalItem is an <a> element. It should be inside the NavVertical component.
@@ -15,7 +21,7 @@ export interface NavVerticalItemProps extends BaseProps<'a'> {
 export const NavVerticalItem = React.forwardRef<
   HTMLAnchorElement,
   NavVerticalItemProps
->(function NavVerticalItem({ active, className, children, ...props }, ref) {
+>(function NavVerticalItem({ active, variant = 'spaced', className, children, ...props }, ref) {
   return (
     <Base
       as="a"
@@ -23,6 +29,7 @@ export const NavVerticalItem = React.forwardRef<
       className={clsx(className, {
         'govgr-link': true,
         'govgr-vertical-nav__item': true,
+        'govgr-vertical-nav__item--spaced': variant === 'spaced',
         'govgr-vertical-nav__item--active': active === true,
       })}
       {...props}