@digigov/react-core 1.3.0-dcbd7ded → 2.0.0-0edebf87

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

@@ -57,31 +57,31 @@ exports[`renders the DropdownButton with arrow=true 1`] = `
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -150,31 +150,31 @@ exports[`renders the DropdownButton with color=primary and arrow={true} 1`] = `
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -286,31 +286,31 @@ exports[`renders the DropdownButton with color=primary variant="button" arrow={t
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -362,31 +362,31 @@ exports[`renders the DropdownButton with color=primary variant="link" arrow={tru
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -455,31 +455,31 @@ exports[`renders the DropdownButton with color=secondary and arrow={true} 1`] =
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -552,31 +552,31 @@ exports[`renders the DropdownButton with color=warning variant="button" arrow={t
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>

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

@@ -6,10 +6,11 @@ exports[`renders the Hidden with \`lgUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-lg--up"
+    lgUpHidden={true}
+    xsUpHidden={false}
   >
     <div
-      className="ds-hidden-lg--up"
+      className="ds-hidden-lg-up"
     >
       <div>
         hello
@@ -25,10 +26,11 @@ exports[`renders the Hidden with \`mdUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-md--up"
+    mdUpHidden={true}
+    xsUpHidden={false}
   >
     <div
-      className="ds-hidden-md--up"
+      className="ds-hidden-md-up"
     >
       <div>
         hello
@@ -44,10 +46,11 @@ exports[`renders the Hidden with \`smUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-sm--up"
+    smUpHidden={true}
+    xsUpHidden={false}
   >
     <div
-      className="ds-hidden-sm--up"
+      className="ds-hidden-sm-up"
     >
       <div>
         hello
@@ -63,10 +66,11 @@ exports[`renders the Hidden with \`xlUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-xl--up"
+    xlUpHidden={true}
+    xsUpHidden={false}
   >
     <div
-      className="ds-hidden-xl--up"
+      className="ds-hidden-xl-up"
     >
       <div>
         hello
@@ -82,10 +86,10 @@ exports[`renders the Hidden with \`xsUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-xs--up"
+    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>
     );

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

@@ -25,31 +25,31 @@ exports[`renders the NavListItemButton with active=false 1`] = `
         >
           <ForwardRef(Icon)
             direction="down"
-            icon="arrow"
+            icon="chevron"
           >
             <ForwardRef(SvgIcon)
-              className="ds-svg-icon--arrow"
+              className="ds-svg-icon--chevron"
             >
               <ForwardRef(Base)
                 aria-hidden="true"
                 as="svg"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
                 <svg
                   aria-hidden="true"
-                  className="ds-svg-icon--arrow ds-svg-icon"
+                  className="ds-svg-icon--chevron ds-svg-icon"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
-                  <arrow
+                  <chevron
                     direction="down"
                   >
                     <path
                       d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                     />
-                  </arrow>
+                  </chevron>
                 </svg>
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>
@@ -86,31 +86,31 @@ exports[`renders the NavListItemButton with active=true 1`] = `
         >
           <ForwardRef(Icon)
             direction="up"
-            icon="arrow"
+            icon="chevron"
           >
             <ForwardRef(SvgIcon)
-              className="ds-svg-icon--arrow"
+              className="ds-svg-icon--chevron"
             >
               <ForwardRef(Base)
                 aria-hidden="true"
                 as="svg"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
                 <svg
                   aria-hidden="true"
-                  className="ds-svg-icon--arrow ds-svg-icon"
+                  className="ds-svg-icon--chevron ds-svg-icon"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
-                  <arrow
+                  <chevron
                     direction="up"
                   >
                     <path
                       d="M2,15.8l2.3,2.4l7.7-7.6l7.6,7.6l2.4-2.4l-10-10L2,15.8z"
                     />
-                  </arrow>
+                  </chevron>
                 </svg>
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>
@@ -142,31 +142,31 @@ exports[`renders the NavListItemButton with no props 1`] = `
         >
           <ForwardRef(Icon)
             direction="down"
-            icon="arrow"
+            icon="chevron"
           >
             <ForwardRef(SvgIcon)
-              className="ds-svg-icon--arrow"
+              className="ds-svg-icon--chevron"
             >
               <ForwardRef(Base)
                 aria-hidden="true"
                 as="svg"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
                 <svg
                   aria-hidden="true"
-                  className="ds-svg-icon--arrow ds-svg-icon"
+                  className="ds-svg-icon--chevron ds-svg-icon"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
-                  <arrow
+                  <chevron
                     direction="down"
                   >
                     <path
                       d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                     />
-                  </arrow>
+                  </chevron>
                 </svg>
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>