@digigov/react-core 1.0.0-002c630d → 1.0.0-6b93ebf2

package/src/AutoCompleteResultListItem/index.tsx

@@ -4,32 +4,40 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface AutoCompleteResultListItemProps extends BaseProps<'li'> {
   /**
-   * index is optional.
-   * Use index prop to add or not option-odd css class.
-   *
-   *
-   */
+  * index is optional.
+  * Use index prop to add or not option-odd css class.
+  *
+  *
+
+  */
   index?: number;
   /**
-   * isFocused is optional.
-   * Use isFocused prop to focus selected element.
-   *
-   *
-   */
+  * isFocused is optional.
+  * Use isFocused prop to focus selected element.
+  *
+  *
+  * @value undefined
+  * @value undefined
+  */
   isFocused?: boolean | null;
   /**
-   * isHovered is optional.
-   * Use isHovered prop to hover over elements.
-   *
-   *
-   */
+  * isHovered is optional.
+  * Use isHovered prop to hover over elements.
+  *
+  *
+  * @value undefined
+  * @value undefined
+  */
   isHovered?: boolean | null;
   /**
-   * empty is optional.
-   * Use empty prop when there are no results in AutoComplete.
-   * by default is false.
-   *
-   */
+  * empty is optional.
+  * Use empty prop when there are no results in AutoComplete.
+  * by default is false.
+  *
+  * @value true
+  * @value false
+  * @default false
+  */
   empty?: boolean;
 }
 

package/src/AutoCompleteWrapper/index.tsx

@@ -4,9 +4,15 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface AutoCompleteWrapperProps extends BaseProps<'div'> {
   /**
-   * cellWidth is optional.
-   * Use cellWidth prop to define a custom width for a specific reference number in your components.
-   */
+  * cellWidth is optional.
+  * Use cellWidth prop to define a custom width for a specific reference number in your components.
+  * @value 'one-quarter'
+  * @value 'one-third'
+  * @value 'one-half'
+  * @value 'two-thirds'
+  * @value 'three-quarters'
+  * @value 'full'
+  */
   cellWidth?:
     | 'one-quarter'
     | 'one-third'

package/src/BreadcrumbsListItem/index.tsx

@@ -4,8 +4,9 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface BreadcrumbsListItemProps extends BaseProps<'li'> {
   /**
-   * href is optional and provides the text and url of the Breadcrumbs items.
-   */
+  * href is optional and provides the text and url of the Breadcrumbs items.
+
+  */
   href?: string;
 }
 /**

package/src/Button/index.tsx

@@ -4,16 +4,23 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface ButtonProps extends BaseProps<'button'> {
   /**
-   * color is optional.
-   * 'primary' color is used for the main call to action on a page.
-   * 'secondary' color is used for secondary calls to action on a page.
-   * 'warning' color is used to make users think carefully before they use them.
-   * The default value is 'primary'.
-   */
+  * color is optional.
+  * 'primary' color is used for the main call to action on a page.
+  * 'secondary' color is used for secondary calls to action on a page.
+  * 'warning' color is used to make users think carefully before they use them.
+  * The default value is 'primary'.
+  * @value 'primary'
+  * @value 'secondary'
+  * @value 'warning'
+  * @default 'primary'
+  */
   color?: 'primary' | 'secondary' | 'warning';
   /**
-   * variant is optional.
-   */
+  * variant is optional.
+  * @value 'link'
+  * @value 'button'
+  * @default 'button'
+  */
   variant?: 'link' | 'button';
 }
 /**

package/src/ButtonLink/index.tsx

@@ -4,12 +4,16 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface ButtonLinkProps extends BaseProps<'a'> {
   /**
-   * color is optional.
-   * 'primary' color is used for the main call to action on a page.
-   * 'secondary' color is used for secondary calls to action on a page.
-   * 'warning' color is used to make users think carefully before they use them.
-   * The default value is 'primary'.
-   */
+  * color is optional.
+  * 'primary' color is used for the main call to action on a page.
+  * 'secondary' color is used for secondary calls to action on a page.
+  * 'warning' color is used to make users think carefully before they use them.
+  * The default value is 'primary'.
+  * @value 'primary'
+  * @value 'secondary'
+  * @value 'warning'
+  * @default 'primary'
+  */
   color?: 'primary' | 'secondary' | 'warning';
 }
 /**

package/src/Card/index.tsx

@@ -4,24 +4,31 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface CardProps extends BaseProps<'div'> {
   /**
-   * By default, we recommend using Cards without border style. Card border increases the contrast to its background.
-   * divider
-   * `variant` property is optional.
-   */
+  * By default, we recommend using Cards without border style. Card border increases the contrast to its background.
+  * divider
+  * `variant` property is optional.
+  * @value 'border'
+  * @value 'divider'
+  * @value 'border-top'
+  */
   variant?: 'border' | 'divider' | 'border-top';
 
   /**
-   *borderColor property is optional and it is used to set the color of the Card's border.
-   *
-   *
-   */
+  *borderColor property is optional and it is used to set the color of the Card's border.
+  *
+  *
+  * @value 'light'
+  * @value 'dark'
+  */
   borderColor?: 'light' | 'dark';
 
   /**
-   *callToAction property is optional and it is used to set the content of the Card clickable.
-   *
-   *
-   */
+  *callToAction property is optional and it is used to set the content of the Card clickable.
+  *
+  *
+  * @value true
+  * @value false
+  */
   callToAction?: boolean;
 }
 /**

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

@@ -1,15 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the Checkbox with inline prop and CheckboxItems 1`] = `
+exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
 <ForwardRef(Checkbox)
-  inline={true}
+  layout="horizontal"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-checkboxes--inline govgr-checkboxes"
+    className="govgr-checkboxes--horizontal govgr-checkboxes"
   >
     <div
-      className="govgr-checkboxes--inline govgr-checkboxes"
+      className="govgr-checkboxes--horizontal govgr-checkboxes"
     >
       <ForwardRef(CheckboxItem)>
         <div

package/src/Checkbox/index.test.tsx

@@ -17,10 +17,10 @@ it('renders the Checkbox with no props and CheckboxItem', () => {
     )
   ).toMatchSnapshot();
 });
-it('renders the Checkbox with inline prop and CheckboxItems', () => {
+it('renders the Checkbox with layout=horizontal and CheckboxItems', () => {
   expect(
     mount(
-      <Checkbox inline>
+      <Checkbox layout='horizontal'>
         <CheckboxItem>This is item 1</CheckboxItem>
         <CheckboxItem>This is item 2</CheckboxItem>
       </Checkbox>

package/src/Checkbox/index.tsx

@@ -4,11 +4,14 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface CheckboxProps extends BaseProps<'div'> {
   /**
-   * inline is optional. The default value is false.
-   * inline prop places the CheckboxItems in one line.
-   * Suggested using it for only two CheckboxItems with limited text.
+   * layout is optional.
+   * 'horizontal' places the CheckboxItems in one line.
+   * 'horizontal' should be used or only two CheckboxItems with limited text.
+   * @value 'vertical'
+   * @value 'horizontal'
+   * @default 'vertical'
    */
-  inline?: boolean;
+  layout?: 'horizontal' | 'vertical';
 }
 /**
  * Details for the Checkbox.
@@ -16,14 +19,14 @@ export interface CheckboxProps extends BaseProps<'div'> {
  * It takes CheckboxItem as children
  */
 export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
-  function Checkbox({ inline, className, children, ...props }, ref) {
+  function Checkbox({ layout, className, children, ...props }, ref) {
     return (
       <Base
         as="div"
         ref={ref}
         className={clsx(className, {
           'govgr-checkboxes': true,
-          'govgr-checkboxes--inline': inline,
+          'govgr-checkboxes--horizontal': layout=== 'horizontal',
         })}
         {...props}
       >

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

@@ -39,22 +39,20 @@ exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
 
 exports[`renders the CheckboxItem with \`divider\` prop 1`] = `
 <ForwardRef(CheckboxItem)
-  divider="ή"
+  dividerText="ή"
 >
-  <ForwardRef(ChoiceDivider)
-    text="ή"
-  >
+  <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
       as="div"
-      className="govgr-choice-divider"
+      className="govgr-choice-divider-text"
     >
       <div
-        className="govgr-choice-divider"
+        className="govgr-choice-divider-text"
       >
         ή
       </div>
     </ForwardRef(Base)>
-  </ForwardRef(ChoiceDivider)>
+  </ForwardRef(ChoiceDividerText)>
   <div
     className="govgr-checkboxes__item"
   >
@@ -169,24 +167,22 @@ exports[`renders the CheckboxItem with \`value\` \`name\` and \`disabled\` props
 exports[`renders the CheckboxItem with \`value\` \`name\`, \`divider\` and \`disabled\` props 1`] = `
 <ForwardRef(CheckboxItem)
   disabled={true}
-  divider="ή"
+  dividerText="ή"
   name="example"
   value="example"
 >
-  <ForwardRef(ChoiceDivider)
-    text="ή"
-  >
+  <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
       as="div"
-      className="govgr-choice-divider"
+      className="govgr-choice-divider-text"
     >
       <div
-        className="govgr-choice-divider"
+        className="govgr-choice-divider-text"
       >
         ή
       </div>
     </ForwardRef(Base)>
-  </ForwardRef(ChoiceDivider)>
+  </ForwardRef(ChoiceDividerText)>
   <div
     className="govgr-checkboxes__item"
   >

package/src/CheckboxItem/index.test.tsx

@@ -23,7 +23,7 @@ it('renders the CheckboxItem with `disabled` prop', () => {
 });
 it('renders the CheckboxItem with `divider` prop', () => {
   expect(
-    mount(<CheckboxItem divider="ή">hello</CheckboxItem>)
+    mount(<CheckboxItem dividerText="ή">hello</CheckboxItem>)
   ).toMatchSnapshot();
 });
 
@@ -39,7 +39,7 @@ it('renders the CheckboxItem with `value` `name` and `disabled` props', () => {
 it('renders the CheckboxItem with `value` `name`, `divider` and `disabled` props', () => {
   expect(
     mount(
-      <CheckboxItem value="example" name="example" divider="ή" disabled>
+      <CheckboxItem value="example" name="example" dividerText="ή" disabled>
         hello
       </CheckboxItem>
     )

package/src/CheckboxItem/index.tsx

@@ -1,16 +1,16 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-import ChoiceDivider from '@digigov/react-core/ChoiceDivider';
+import ChoiceDividerText from '@digigov/react-core/ChoiceDividerText';
 import LabelContainer from '@digigov/react-core/LabelContainer';
 
 export interface CheckboxItemProps extends BaseProps<'input'> {
   /**
-   * divider is optional.
-   * Add this prop to add a choice divider ontop of a checkbox item.
+   * dividerText is optional.
+   * Add this prop to add a choice divider on top of a checkbox item.
    * The string is the text that it will appear above this checkbox item.
    */
-  divider?: string;
+  dividerText?: string;
 }
 /**
  * Details for the CheckboxItem.
@@ -21,11 +21,11 @@ export const CheckboxItem = React.forwardRef<
   HTMLInputElement,
   CheckboxItemProps
 >(function CheckboxItem(
-  { name, value, divider, className, disabled, children, ...props },
+  { name, value, dividerText, className, disabled, children, ...props },
   ref
 ) {
   return <>
-    {divider && <ChoiceDivider text={divider} />}
+    {dividerText && <ChoiceDividerText>{dividerText}</ChoiceDividerText>}
     <div
       className={clsx(className, {
         'govgr-checkboxes__item': true,

package/src/Chip/index.tsx

@@ -4,7 +4,10 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 import { CloseIcon } from '@digigov/react-icons';
 
 export interface ChipProps extends BaseProps<'li'> {
-  onDelete?: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void;
+  /**
+
+  */
+  onDelete?: (e: React.MouseEvent<SVGSVGElement, MouseEvent>) => void
 }
 /**
  * Chips can be used to represent small blocks of information.

package/src/ChipKeyValue/index.test.tsx

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

package/src/ChipKeyValue/index.tsx

@@ -2,13 +2,13 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface ChipKeyValueProps extends BaseProps<'span'> {}
+export interface ChipKeyValueProps extends BaseProps<'span'> { }
 /**
  * ChipKeyValue is used to provide key value inside chips.
  * ChipKeyValue component must be wrapped inside Chip component.
  */
 export const ChipKeyValue = React.forwardRef<
-  HTMLHeadingElement,
+  HTMLSpanElement,
   ChipKeyValueProps
 >(function ChipKeyValue({ className, children, ...props }, ref) {
   return (

package/src/ChipSection/index.tsx

@@ -3,7 +3,11 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface ChipSectionProps extends BaseProps<'ul'> {
-  horizontal?: boolean;
+  /**
+  * @value true
+  * @value false
+  */
+  horizontal?: boolean
 }
 /**
  * ChipSection is used inside Chip component as a container for its items.

package/src/ChipSectionWrapper/index.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface ChipSectionWrapperProps extends BaseProps<'ul'> {}
+export interface ChipSectionWrapperProps extends BaseProps<'div'> { }
 /**
  * ChipSectionWrapper is used as a wrapper for the ChipHeading and ChipSection components
  * in case one wants to use them in a horizontal layout.
  */
 export const ChipSectionWrapper = React.forwardRef<
-  HTMLUListElement,
+  HTMLDivElement,
   ChipSectionWrapperProps
 >(function ChipSectionWrapper({ className, children, ...props }, ref) {
   return (
-    <Base as="ul" ref={ref} className={clsx(className)} {...props}>
+    <Base as="div" ref={ref} className={clsx(className)} {...props}>
       {children}
     </Base>
   );

package/src/{ChoiceDivider → ChoiceDividerText}/__snapshots__/index.test.tsx.snap

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

package/src/ChoiceDividerText/index.test.tsx

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

package/src/{ChoiceDivider → ChoiceDividerText}/index.tsx

@@ -2,29 +2,27 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface ChoiceDividerProps extends BaseProps<'div'> {
-  text?: string;
-}
+export interface ChoiceDividerTextProps extends BaseProps<'div'> { }
 /**
  * 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<
+export const ChoiceDividerText = React.forwardRef<
   HTMLDivElement,
-  ChoiceDividerProps
->(function ChoiceDivider({ text, className, ...props }, ref) {
+  ChoiceDividerTextProps
+>(function ChoiceDividerText({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
-        'govgr-choice-divider': true,
+        'govgr-choice-divider-text': true,
       })}
       {...props}
     >
-      {text}
+      {children}
     </Base>
   );
 });
 
-export default ChoiceDivider;
+export default ChoiceDividerText;