@digigov/react-core 2.0.0-rc.1 → 2.0.0-rc.11

package/src/AutoCompleteResultList/index.test.tsx

@@ -14,23 +14,3 @@ it('renders the AutoCompleteResultList with isVisible props', () => {
     mount(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>)
   ).toMatchSnapshot();
 });
-
-it('renders the AutoCompleteResultList with isVisible  displayMenu="inline props', () => {
-  expect(
-    mount(
-      <AutoCompleteResultList isVisible displayMenu="inline">
-        Hello
-      </AutoCompleteResultList>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the AutoCompleteResultList with isVisible displayMenu="overlay props', () => {
-  expect(
-    mount(
-      <AutoCompleteResultList isVisible displayMenu="overlay">
-        Hello
-      </AutoCompleteResultList>
-    )
-  ).toMatchSnapshot();
-});

package/src/AutoCompleteResultList/index.tsx

@@ -13,15 +13,6 @@ export interface AutoCompleteResultListProps extends BaseProps<'ul'> {
    * @default false
    */
   isVisible?: boolean;
-  /**
-   * displayMenu is optional.
-   * Use displayMenu to choose the display of the manue
-   * default value is inline.
-   *
-   * @value 'inline'
-   * @value 'overlay'
-   */
-  displayMenu?: 'inline' | 'overlay';
 }
 /**
  * AutoCompleteResultList component is used for listing items.
@@ -31,7 +22,7 @@ export const AutoCompleteResultList = React.forwardRef<
   HTMLUListElement,
   AutoCompleteResultListProps
 >(function List(
-  { isVisible = false, displayMenu, className, children, ...props },
+  { isVisible = false, className, children, ...props },
   ref
 ) {
   return (
@@ -40,9 +31,6 @@ export const AutoCompleteResultList = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'ds-autocomplete__menu': true,
-        'ds-autocomplete__menu--inline': displayMenu === 'inline',
-        'ds-autocomplete__menu--overlay': displayMenu === 'overlay',
-        'ds-autocomplete__menu--visible': isVisible,
         'ds-autocomplete__menu--hidden': isVisible === false,
       })}
       {...props}

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the AdminContainer with no props 1`] = `
-<ForwardRef(AutoCompleteStatusWrapper)>
+<ForwardRef(AutoCompleteStatusContainer)>
   <ForwardRef(Base)
     aria-atomic="true"
     aria-live="polite"
@@ -18,5 +18,5 @@ exports[`renders the AdminContainer with no props 1`] = `
       hello
     </div>
   </ForwardRef(Base)>
-</ForwardRef(AutoCompleteStatusWrapper)>
+</ForwardRef(AutoCompleteStatusContainer)>
 `;

package/src/AutoCompleteStatus/index.tsx

@@ -5,12 +5,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 export interface AutoCompleteStatusProps extends BaseProps<'div'> { }
 /**
  * AutoCompleteStatus is a div element for displaying the autocomplete status.
- * Use AutoCompleteStatus inside AutoCompleteStatusWrapper wrapper.
+ * Use AutoCompleteStatus inside AutoCompleteStatusContainer wrapper.
  */
 export const AutoCompleteStatus = React.forwardRef<
   HTMLDivElement,
   AutoCompleteStatusProps
->(function AutoCompleteStatusWrapper({ className, children, ...props }, ref) {
+>(function AutoCompleteStatusContainer({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AdminContainer with no props 1`] = `
+<ForwardRef(AutoCompleteStatusContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="ds-autocomplete__status__container"
+  >
+    <div
+      className="ds-autocomplete__status__container"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(AutoCompleteStatusContainer)>
+`;

package/src/AutoCompleteStatusContainer/index.test.tsx

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

package/src/AutoCompleteStatusContainer/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AutoCompleteStatusContainerProps extends BaseProps<'div'> {}
+/**
+ * AutoCompleteStatusContainer is a wrapper for autocomplete element.
+ * Use AutoCompleteStatusContainer to wrap autocomplete elements.
+ */
+export const AutoCompleteStatusContainer = React.forwardRef<
+  HTMLDivElement,
+  AutoCompleteStatusContainerProps
+>(function AutoCompleteStatusContainer({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'ds-autocomplete__status__container': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AutoCompleteStatusContainer;

package/src/Base/index.tsx

@@ -235,11 +235,11 @@ export const Base: BaseComponent = React.forwardRef(function Base<
         'ds-print-visible-block': printVisible === 'block',
         'ds-print-visible-inline': printVisible === 'inline',
         'ds-hidden': !!hidden,
-        'ds-hidden-xs--up': !!xsUpHidden,
-        'ds-hidden-sm--up': !!smUpHidden,
-        'ds-hidden-md--up': !!mdUpHidden,
-        'ds-hidden-lg--up': !!lgUpHidden,
-        'ds-hidden-xl--up': !!xlUpHidden,
+        'ds-hidden-xs-up': !!xsUpHidden,
+        'ds-hidden-sm-up': !!smUpHidden,
+        'ds-hidden-md-up': !!mdUpHidden,
+        'ds-hidden-lg-up': !!lgUpHidden,
+        'ds-hidden-xl-up': !!xlUpHidden,
         'ds-hidden-xs': !!xsHidden,
         'ds-hidden-sm': !!smHidden,
         'ds-hidden-md': !!mdHidden,

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

@@ -42,6 +42,48 @@ exports[`renders the Card with dense props 1`] = `
 </ForwardRef(Card)>
 `;
 
+exports[`renders the Card with dense" prop 1`] = `
+<ForwardRef(Card)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="ds-card--dense ds-card"
+  >
+    <div
+      className="ds-card--dense ds-card"
+    >
+      <div
+        className="ds-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with fullHeight" prop 1`] = `
+<ForwardRef(Card)
+  fullHeight={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="ds-card--full-height ds-card"
+  >
+    <div
+      className="ds-card--full-height ds-card"
+    >
+      <div
+        className="ds-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
 exports[`renders the Card with no props 1`] = `
 <ForwardRef(Card)>
   <ForwardRef(Base)

package/src/Card/index.test.tsx

@@ -22,6 +22,12 @@ it('renders the Card with variant="divider" props', () => {
 it('renders the Card with variant="border-top" props', () => {
   expect(mount(<Card variant="border-top">hello</Card>)).toMatchSnapshot();
 });
+it('renders the Card with dense" prop', () => {
+  expect(mount(<Card dense>hello</Card>)).toMatchSnapshot();
+});
+it('renders the Card with fullHeight" prop', () => {
+  expect(mount(<Card fullHeight>hello</Card>)).toMatchSnapshot();
+});
 it('renders the Card with variant="border" and borderColor="dark" props', () => {
   expect(
     mount(

package/src/Card/index.tsx

@@ -37,6 +37,13 @@ export interface CardProps extends BaseProps<'div'> {
    * @default false
    * */
   dense?: boolean;
+  /**
+   * fullHeight is optional.
+   * @value true Card will be have it's full height.
+   * @value false
+   * @default false
+   * */
+  fullHeight?: boolean;
 }
 /**
  * Cards can be used to divide and organise interface content for better understandability and readability.
@@ -44,7 +51,7 @@ export interface CardProps extends BaseProps<'div'> {
  * Use Card as parent component to wrap CardHeading, CardContent and CartAction components
  */
 export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
-  { variant, borderColor, callToAction, dense, className, children, ...props },
+  { variant, borderColor, callToAction, dense, fullHeight, className, children, ...props },
   ref
 ) {
   return (
@@ -60,6 +67,7 @@ export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
         'ds-card--cta': callToAction,
         'ds-card--border-light': borderColor === 'light',
         'ds-card--border-dark': borderColor === 'dark',
+        'ds-card--full-height': fullHeight,
       })}
       {...props}
     >

package/src/DateInputItem/index.tsx

@@ -47,8 +47,6 @@ export const DateInputItem = React.forwardRef<
           as="input"
           ref={ref}
           type="text"
-          pattern="[0-9]*"
-          inputMode="numeric"
           name={name}
           className={clsx({
             'ds-input': true,

package/src/DropdownContent/index.tsx

@@ -11,6 +11,14 @@ export interface DropdownContentProps extends BaseProps<'div'> {
    * @default true
    */
   fullWidth?: boolean;
+  /**
+   * scrollable prop is optional.
+   * If true, the dropdown content will have limited scrollable height.
+   * @value true
+   * @value false
+   * @default false
+   */
+  scrollable?: boolean;
 }
 /**
  * You should use DropdownContent component inside Dropdown component.
@@ -19,7 +27,7 @@ export const DropdownContent = React.forwardRef<
   HTMLDivElement,
   DropdownContentProps
 >(function DropdownContent(
-  { className, children, fullWidth = true, ...props },
+  {fullWidth = true, scrollable, className, children, ...props },
   ref
 ) {
   return (
@@ -29,6 +37,7 @@ export const DropdownContent = React.forwardRef<
       className={clsx(className, {
         'ds-dropdown__content': true,
         'ds-dropdown__content--full-width': fullWidth,
+        'ds-dropdown__content--scrollable': scrollable,
       })}
       {...props}
     >

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

@@ -4,10 +4,10 @@ exports[`renders the FooterContentLogos with no props 1`] = `
 <ForwardRef(FooterContentLogos)>
   <ForwardRef(Base)
     as="div"
-    className="ds-footer__content--logos"
+    className="ds-footer__content__logos"
   >
     <div
-      className="ds-footer__content--logos"
+      className="ds-footer__content__logos"
     >
       hello
     </div>

package/src/FooterContentLogos/index.tsx

@@ -17,7 +17,7 @@ export const FooterContentLogos = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-footer__content--logos': true,
+        'ds-footer__content__logos': true,
       })}
       {...props}
     >

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

@@ -10,7 +10,7 @@ exports[`renders the Hidden with \`lgUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-lg--up"
+      className="ds-hidden-lg-up"
     >
       <div>
         hello
@@ -30,7 +30,7 @@ exports[`renders the Hidden with \`mdUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-md--up"
+      className="ds-hidden-md-up"
     >
       <div>
         hello
@@ -50,7 +50,7 @@ exports[`renders the Hidden with \`smUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-sm--up"
+      className="ds-hidden-sm-up"
     >
       <div>
         hello
@@ -70,7 +70,7 @@ exports[`renders the Hidden with \`xlUp\` props 1`] = `
     xsUpHidden={false}
   >
     <div
-      className="ds-hidden-xl--up"
+      className="ds-hidden-xl-up"
     >
       <div>
         hello
@@ -89,7 +89,7 @@ exports[`renders the Hidden with \`xsUp\` props 1`] = `
     xsUpHidden={true}
   >
     <div
-      className="ds-hidden-xs--up"
+      className="ds-hidden-xs-up"
     >
       <div>
         hello

package/src/Hint/index.tsx

@@ -29,8 +29,8 @@ export const Hint = React.forwardRef<HTMLParagraphElement, HintProps>(
         className={clsx(className, {
           'ds-hint': true,
           'ds-hint--break-words': breakWords,
-          'ds-hint-lg': size === 'lg',
-          'ds-hint-sm': size === 'sm',
+          'ds-hint--lg': size === 'lg',
+          'ds-hint--sm': size === 'sm',
         })}
         {...props}
       >

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

@@ -7,12 +7,12 @@ exports[`renders the Hint with  variant and src props 1`] = `
 >
   <ForwardRef(Base)
     as="img"
-    className="ds-image-logo--dark"
+    className="ds-image-logo-dark"
     printHidden={true}
     src="logo.png"
   >
     <img
-      className="ds-image-logo--dark ds-print-hidden"
+      className="ds-image-logo-dark ds-print-hidden"
       src="logo.png"
     />
   </ForwardRef(Base)>

package/src/ImageLogo/index.tsx

@@ -23,7 +23,6 @@ export const ImageLogo = React.forwardRef<HTMLImageElement, ImageLogoProps>(
     { lang, src, variant, className, children, ...props },
     ref
   ) {
-    console.log('src is', src);
     return (
       <>
         <Base
@@ -33,7 +32,7 @@ export const ImageLogo = React.forwardRef<HTMLImageElement, ImageLogoProps>(
           printHidden
           className={clsx(className, {
             'ds-image-logo': variant === undefined,
-            [`ds-image-logo--${variant}`]: variant !== undefined,
+            [`ds-image-logo-${variant}`]: variant !== undefined,
           })}
           {...props}
         />

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

@@ -17,12 +17,12 @@ exports[`renders the Hint with  variants=[light, dark] and src props 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--light"
+      className="ds-image-logo-light"
       printHidden={true}
       src="logo--light.png"
     >
       <img
-        className="ds-image-logo--light ds-print-hidden"
+        className="ds-image-logo-light ds-print-hidden"
         src="logo--light.png"
       />
     </ForwardRef(Base)>
@@ -34,12 +34,12 @@ exports[`renders the Hint with  variants=[light, dark] and src props 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--dark"
+      className="ds-image-logo-dark"
       printHidden={true}
       src="logo--dark.png"
     >
       <img
-        className="ds-image-logo--dark ds-print-hidden"
+        className="ds-image-logo-dark ds-print-hidden"
         src="logo--dark.png"
       />
     </ForwardRef(Base)>
@@ -63,12 +63,12 @@ exports[`renders the Hint with  variants=[light] and src props 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--light"
+      className="ds-image-logo-light"
       printHidden={true}
       src="logo--light.png"
     >
       <img
-        className="ds-image-logo--light ds-print-hidden"
+        className="ds-image-logo-light ds-print-hidden"
         src="logo--light.png"
       />
     </ForwardRef(Base)>
@@ -87,12 +87,12 @@ exports[`renders the Hint with src prop 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--dark"
+      className="ds-image-logo-dark"
       printHidden={true}
       src="logo--dark.png"
     >
       <img
-        className="ds-image-logo--dark ds-print-hidden"
+        className="ds-image-logo-dark ds-print-hidden"
         src="logo--dark.png"
       />
     </ForwardRef(Base)>
@@ -104,12 +104,12 @@ exports[`renders the Hint with src prop 1`] = `
   >
     <ForwardRef(Base)
       as="img"
-      className="ds-image-logo--light"
+      className="ds-image-logo-light"
       printHidden={true}
       src="logo--light.png"
     >
       <img
-        className="ds-image-logo--light ds-print-hidden"
+        className="ds-image-logo-light ds-print-hidden"
         src="logo--light.png"
       />
     </ForwardRef(Base)>

package/src/ModalContainer/index.tsx

@@ -15,6 +15,13 @@ export interface ModalContainerProps extends BaseProps<'div'> {
    * @default false
    */
   dense?: boolean;
+  /**
+   * gaps is optional.
+   * @value false there will be no extra gaps among children components.
+   * @value true
+   * @default true
+   */
+  gaps?: boolean;
 }
 /**
  * Modals can be used to open a pop-up dialog box and provide critical information
@@ -25,9 +32,10 @@ export interface ModalContainerProps extends BaseProps<'div'> {
 export const ModalContainer = React.forwardRef<
   HTMLDivElement,
   ModalContainerProps
->(function ModalContainer({ className, children, open, dense, ...props }, ref) {
+>(function ModalContainer({ className, gaps = true, children, open, dense, ...props }, ref) {
   return (
     <Base
+      ref={ref}
       as="div"
       className={clsx(className, {
         'ds-modal': true,
@@ -36,19 +44,15 @@ export const ModalContainer = React.forwardRef<
       })}
       {...props}
     >
-      <div
-        className={clsx({
-          'ds-modal__body': true,
-        })}
-      >
-        <div
-          ref={ref}
-          className={clsx({
-            'ds-modal__container': true,
-          })}
-        >
-          {children}
-        </div>
+      <div className='ds-modal__body'>
+        {gaps ?
+          <div
+            className='ds-modal__container'
+          >
+            {children}
+          </div>
+          :
+          children}
       </div>
     </Base>
   );

package/src/ModalHeading/index.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import Heading, { HeadingProps } from '@digigov/react-core/Heading';
 
-export interface ModalHeadingProps extends HeadingProps {}
+export interface ModalHeadingProps extends HeadingProps { }
 /**
  * ModalHeading gives header title to Modal Component
  * Use ModalHeading inside Modal component as children
@@ -10,7 +10,7 @@ export interface ModalHeadingProps extends HeadingProps {}
 export const ModalHeading = React.forwardRef<HTMLDivElement, ModalHeadingProps>(
   function ModalHeading({ children, ...props }, ref) {
     return (
-      <Heading ref={ref} size="md" element="h2" marginBottom={0} {...props}>
+      <Heading ref={ref} size="md" element="h2" {...props}>
         {children}
       </Heading>
     );