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

package/src/NavListItemButton/index.tsx

@@ -5,17 +5,22 @@ import { ArrowIcon } from '@digigov/react-icons';
 
 export interface NavListItemButtonProps extends ButtonProps {
   /**
-   * When the NavListItemButton is active, that means that we are in this option / page of the Nav.
-   * NavListItemButton for nav menu.
-   * active is optional.
-   *
-   */
+  * When the NavListItemButton is active, that means that we are in this option / page of the Nav.
+  * NavListItemButton for nav menu.
+  * active is optional.
+  *
+  * @value true
+  * @value false
+  */
   active?: boolean;
   /**
-   * use arrow prop if you want to have arrows in navigation buttons.
-   * arrow is optional.
-   *
-   */
+  * use arrow prop if you want to have arrows in navigation buttons.
+  * arrow is optional.
+  *
+  * @value true
+  * @value false
+  * @default true
+  */
   arrow?: boolean;
 }
 /**

package/src/NavListItemLink/index.tsx

@@ -5,10 +5,12 @@ import Link from '@digigov/react-core/LinkBase';
 
 export interface NavListItemLinkProps extends BaseProps<'a'> {
   /**
-   * When the NavListItemLink is active, that means that we are in this option / page of the Nav.
-   * active is optional.
-   *
-   */
+  * When the NavListItemLink is active, that means that we are in this option / page of the Nav.
+  * active is optional.
+  *
+  * @value true
+  * @value false
+  */
   active?: boolean;
 }
 /**

package/src/NavMenu/index.tsx

@@ -4,15 +4,20 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface NavMenuProps extends BaseProps<'div'> {
   /**
-   * active is optional.
-   * Exactly one NavMenu should be active every time.
-   * This declares that this content is active and should depend of the 'selected' NavItem.
-   */
+  * active is optional.
+  * Exactly one NavMenu should be active every time.
+  * This declares that this content is active and should depend of the 'selected' NavItem.
+  * @value true
+  * @value false
+  */
   active?: boolean;
   /**
-   * layout prop sets the display layout for the nav list
-   * layout is horizontal by default.
-   */
+  * layout prop sets the display layout for the nav list
+  * layout is horizontal by default.
+  * @value 'vertical'
+  * @value 'horizontal'
+  * @default 'horizontal'
+  */
   layout?: 'vertical' | 'horizontal';
 }
 /**

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

@@ -7,10 +7,10 @@ exports[`renders the NavMenuContainer with no props 1`] = `
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-width-container"
+      className="govgr-container"
     >
       <div
-        className="govgr-width-container"
+        className="govgr-container"
       >
         <ForwardRef(Base)
           as="div"

package/src/NavMenuContainer/index.tsx

@@ -4,9 +4,12 @@ import Container from '@digigov/react-core/Container';
 
 export interface NavMenuContainerProps extends BaseProps<'div'> {
   /**
-   * layout prop sets the display layout for the nav list
-   * layout is horizontal by default.
-   */
+  * layout prop sets the display layout for the nav list
+  * layout is horizontal by default.
+  * @value 'vertical'
+  * @value 'horizontal'
+  * @default 'horizontal'
+  */
   layout?: 'vertical' | 'horizontal';
 }
 /**
@@ -22,7 +25,7 @@ export const NavMenuContainer = React.forwardRef<
 ) {
   return (
     <Container
-      cols={layout === 'horizontal'}
+      grid={layout === 'horizontal'}
       ref={ref}
       className={className}
       {...props}

package/src/NavVerticalItem/index.tsx

@@ -4,9 +4,11 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface NavVerticalItemProps extends BaseProps<'a'> {
   /**
-   * active is optional.
-   * When the NavVerticalItem is active, that means that we are in this option / title / page of the NavVertical.
-   */
+  * active is optional.
+  * When the NavVerticalItem is active, that means that we are in this option / title / page of the NavVertical.
+  * @value true
+  * @value false
+  */
   active?: boolean;
 }
 /**

package/src/NormalText/index.tsx

@@ -2,59 +2,74 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface NormalTextProps extends BaseProps<'span'> {
+export interface NormalTextProps extends BaseProps<'span' | 'p'> {
   /**
-   * variant is optional.
-   * Use 'lg' when a lg text is an introductory paragraph that you can use at the top of a page to summarize the content.
-   * The majority of your body should use the standard 'md' variant. This is the default value.
-   * You can use the 'sm' sparingly to make your text font size smaller: 16px on larger screens and 14px on smaller screens.
-   */
+  * variant is optional.
+  * Use 'lg' when a lg text is an introductory paragraph that you can use at the top of a page to summarize the content.
+  * The majority of your body should use the standard 'md' variant. This is the default value.
+  * You can use the 'sm' sparingly to make your text font size smaller: 16px on larger screens and 14px on smaller screens.
+  * @value 'lg'
+  * @value 'md'
+  * @value 'sm'
+  * @default 'md'
+  */
   variant?: 'lg' | 'md' | 'sm';
   /**
-   * fontSize is optional.
-   * Add this fontSize override prop in order to change the font size.
-   */
+  * fontSize is optional.
+  * Add this fontSize override prop in order to change the font size.
+  * @value '14'
+  * @value '16'
+  * @value '19'
+  * @value '24'
+  * @value '30'
+  * @value '36'
+  * @value '48'
+  * @value '72'
+  */
   fontSize?: '14' | '16' | '19' | '24' | '30' | '36' | '48' | '72';
   /**
-   * fontWeight is optional.
-   * You can add a fontWeight override prop to change the font weight to regular or bold.
-   */
+  * fontWeight is optional.
+  * You can add a fontWeight override prop to change the font weight to regular or bold.
+  * @value 'regular'
+  * @value 'bold'
+  */
   fontWeight?: 'regular' | 'bold';
 }
 /**
  * NormalText component is used for text formatting.
  * If you need a paragraph, use the Paragraph component instead.
  */
-export const NormalText = React.forwardRef<HTMLSpanElement, NormalTextProps>(
-  function NormalText(
-    { variant = 'md', fontSize, fontWeight, className, children, ...props },
-    ref
-  ) {
-    return (
-      <Base
-        as="span"
-        ref={ref}
-        className={clsx(className, {
-          'govgr-body': true,
-          'govgr-body-lg': variant === 'lg',
-          'govgr-body-sm': variant === 'sm',
-          'govgr-!-font-size-14': fontSize === '14',
-          'govgr-!-font-size-16': fontSize === '16',
-          'govgr-!-font-size-19': fontSize === '19',
-          'govgr-!-font-size-24': fontSize === '24',
-          'govgr-!-font-size-30': fontSize === '30',
-          'govgr-!-font-size-36': fontSize === '36',
-          'govgr-!-font-size-48': fontSize === '48',
-          'govgr-!-font-size-72': fontSize === '72',
-          'govgr-!-font-weight-regular': fontWeight == 'regular',
-          'govgr-!-font-weight-bold': fontWeight == 'bold',
-        })}
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
+export const NormalText = React.forwardRef<
+  HTMLSpanElement | HTMLParagraphElement,
+  NormalTextProps
+>(function NormalText(
+  { variant = 'md', fontSize, fontWeight, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="span"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-body': true,
+        'govgr-body-lg': variant === 'lg',
+        'govgr-body-sm': variant === 'sm',
+        'govgr-!-font-size-14': fontSize === '14',
+        'govgr-!-font-size-16': fontSize === '16',
+        'govgr-!-font-size-19': fontSize === '19',
+        'govgr-!-font-size-24': fontSize === '24',
+        'govgr-!-font-size-30': fontSize === '30',
+        'govgr-!-font-size-36': fontSize === '36',
+        'govgr-!-font-size-48': fontSize === '48',
+        'govgr-!-font-size-72': fontSize === '72',
+        'govgr-!-font-weight-regular': fontWeight == 'regular',
+        'govgr-!-font-weight-bold': fontWeight == 'bold',
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
 
 export default NormalText;

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

@@ -5,13 +5,13 @@ exports[`renders the NotificationBannerContainer with no props 1`] = `
   <ForwardRef(Base)
     aria-labelledby="govgr-notification-banner-title"
     as="div"
-    className="govgr-notification-banner"
+    className="govgr-notification-banner--info govgr-notification-banner"
     data-module="govgr-notification-banner"
     role="region"
   >
     <div
       aria-labelledby="govgr-notification-banner-title"
-      className="govgr-notification-banner"
+      className="govgr-notification-banner--info govgr-notification-banner"
       data-module="govgr-notification-banner"
       role="region"
     >
@@ -21,32 +21,9 @@ exports[`renders the NotificationBannerContainer with no props 1`] = `
 </ForwardRef(NotificationBannerContainer)>
 `;
 
-exports[`renders the NotificationBannerContainer with success=false 1`] = `
+exports[`renders the NotificationBannerContainer with variant=success 1`] = `
 <ForwardRef(NotificationBannerContainer)
-  success={false}
->
-  <ForwardRef(Base)
-    aria-labelledby="govgr-notification-banner-title"
-    as="div"
-    className="govgr-notification-banner"
-    data-module="govgr-notification-banner"
-    role="region"
-  >
-    <div
-      aria-labelledby="govgr-notification-banner-title"
-      className="govgr-notification-banner"
-      data-module="govgr-notification-banner"
-      role="region"
-    >
-      hello
-    </div>
-  </ForwardRef(Base)>
-</ForwardRef(NotificationBannerContainer)>
-`;
-
-exports[`renders the NotificationBannerContainer with success=true 1`] = `
-<ForwardRef(NotificationBannerContainer)
-  success={true}
+  variant="success"
 >
   <ForwardRef(Base)
     aria-labelledby="govgr-notification-banner-title"

package/src/NotificationBannerContainer/index.test.tsx

@@ -9,22 +9,13 @@ it('renders the NotificationBannerContainer with no props', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the NotificationBannerContainer with success=true', () => {
+it('renders the NotificationBannerContainer with variant=success', () => {
   expect(
     mount(
-      <NotificationBannerContainer success={true}>
+      <NotificationBannerContainer variant={'success'}>
         hello
       </NotificationBannerContainer>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the NotificationBannerContainer with success=false', () => {
-  expect(
-    mount(
-      <NotificationBannerContainer success={false}>
-        hello
-      </NotificationBannerContainer>
-    )
-  ).toMatchSnapshot();
-});

package/src/NotificationBannerContainer/index.tsx

@@ -4,14 +4,19 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface NotificationBannerContainerProps extends BaseProps<'div'> {
   /**
-   * success is optional.
+   * variant is optional.
+   * variant is used to change the color of the NotificationBannerContainer.
+   * @value 'info'
+   * @value 'success'
+   * @value 'error'
+   * @default 'info'.
    */
-  success?: boolean;
+  variant?: 'info' | 'success' | 'error';
 }
 /**
  * Details for the NotificationBannerContainer.
- * NotificationBannerContainer componenent informs users about something they need to know about
- * NotificationBannerContainer componenent must be placed at the top of the page.
+ * NotificationBannerContainer component informs users about something they need to know about
+ * NotificationBannerContainer component must be placed at the top of the page.
  * NotificationBannerContainer wraps NotificationBannerContainerHeader, NotificationBannerContainerContent,NotificationBannerContainerHeading
  * and NotificationBannerContainerLink components as children
  */
@@ -19,7 +24,7 @@ export const NotificationBannerContainer = React.forwardRef<
   HTMLDivElement,
   NotificationBannerContainerProps
 >(function NotificationBannerContainer(
-  { success, className, children, ...props },
+  { variant = 'info', className, children, ...props },
   ref
 ) {
   return (
@@ -31,7 +36,7 @@ export const NotificationBannerContainer = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'govgr-notification-banner': true,
-        'govgr-notification-banner--success': success,
+        [`govgr-notification-banner--${variant}`]: variant !== undefined,
       })}
       {...props}
     >

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

@@ -9,11 +9,24 @@ exports[`renders the NotificationBannerHeader with no props 1`] = `
     <div
       className="govgr-notification-banner__header"
     >
-      <h2
+      <ForwardRef(Heading)
         className="govgr-notification-banner__title"
+        element="h2"
+        marginBottom={0}
+        size="sm"
       >
-        hello
-      </h2>
+        <ForwardRef(Base)
+          as="h2"
+          className="govgr-notification-banner__title govgr-heading-sm"
+          marginBottom={0}
+        >
+          <h2
+            className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+          >
+            hello
+          </h2>
+        </ForwardRef(Base)>
+      </ForwardRef(Heading)>
     </div>
   </ForwardRef(Base)>
 </ForwardRef(NotificationBannerHeader)>

package/src/NotificationBannerHeader/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import Heading from '@digigov/react-core/Heading';
 
 export interface NotificationBannerHeaderProps extends BaseProps<'div'> {}
 /**
@@ -21,13 +22,16 @@ export const NotificationBannerHeader = React.forwardRef<
       })}
       {...props}
     >
-      <h2
+      <Heading
+        element="h2"
+        size="sm"
+        marginBottom={0}
         className={clsx({
           'govgr-notification-banner__title': true,
         })}
       >
         {children}
-      </h2>
+      </Heading>
     </Base>
   );
 });

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

@@ -2,15 +2,21 @@
 
 exports[`renders the NotificationBannerHeading with no props 1`] = `
 <ForwardRef(NotificationBannerHeading)>
-  <ForwardRef(Base)
-    as="h3"
+  <ForwardRef(Heading)
     className="govgr-notification-banner__heading"
+    element="h3"
+    size="md"
   >
-    <h3
-      className="govgr-notification-banner__heading"
+    <ForwardRef(Base)
+      as="h3"
+      className="govgr-notification-banner__heading govgr-heading-md"
     >
-      hello
-    </h3>
-  </ForwardRef(Base)>
+      <h3
+        className="govgr-notification-banner__heading govgr-heading-md"
+      >
+        hello
+      </h3>
+    </ForwardRef(Base)>
+  </ForwardRef(Heading)>
 </ForwardRef(NotificationBannerHeading)>
 `;

package/src/NotificationBannerHeading/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Heading, { HeadingProps } from '@digigov/react-core/Heading';
 
-export interface NotificationBannerHeadingProps extends BaseProps<'h3'> {}
+export interface NotificationBannerHeadingProps extends HeadingProps {}
 /**
  * Details for the NotificationBannerHeading.
  * NotificationBannerHeading component is used for placing text content to NotificationBanner component.
@@ -13,8 +13,9 @@ export const NotificationBannerHeading = React.forwardRef<
   NotificationBannerHeadingProps
 >(function NotificationBannerHeading({ className, children, ...props }, ref) {
   return (
-    <Base
-      as="h3"
+    <Heading
+      element="h3"
+      size='md'
       ref={ref}
       className={clsx(className, {
         'govgr-notification-banner__heading': true,
@@ -22,7 +23,7 @@ export const NotificationBannerHeading = React.forwardRef<
       {...props}
     >
       {children}
-    </Base>
+    </Heading>
   );
 });
 

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

@@ -4,34 +4,41 @@ exports[`renders the NotificationBannerLink with href prop props 1`] = `
 <ForwardRef(NotificationBannerLink)
   href="https://www.w3schools.com/html/html_links.asp"
 >
-  <ForwardRef(Base)
-    as="a"
+  <ForwardRef(LinkBase)
     className="govgr-notification-banner__link"
     href="https://www.w3schools.com/html/html_links.asp"
   >
-    <a
-      className="govgr-notification-banner__link"
+    <ForwardRef(Base)
+      as="a"
+      className="govgr-notification-banner__link govgr-link"
       href="https://www.w3schools.com/html/html_links.asp"
     >
-      hello
-    </a>
-  </ForwardRef(Base)>
+      <a
+        className="govgr-notification-banner__link govgr-link"
+        href="https://www.w3schools.com/html/html_links.asp"
+      >
+        hello
+      </a>
+    </ForwardRef(Base)>
+  </ForwardRef(LinkBase)>
 </ForwardRef(NotificationBannerLink)>
 `;
 
 exports[`renders the NotificationBannerLink with no props 1`] = `
 <ForwardRef(NotificationBannerLink)>
-  <ForwardRef(Base)
-    as="a"
+  <ForwardRef(LinkBase)
     className="govgr-notification-banner__link"
-    href="#"
   >
-    <a
-      className="govgr-notification-banner__link"
-      href="#"
+    <ForwardRef(Base)
+      as="a"
+      className="govgr-notification-banner__link govgr-link"
     >
-      hello
-    </a>
-  </ForwardRef(Base)>
+      <a
+        className="govgr-notification-banner__link govgr-link"
+      >
+        hello
+      </a>
+    </ForwardRef(Base)>
+  </ForwardRef(LinkBase)>
 </ForwardRef(NotificationBannerLink)>
 `;

package/src/NotificationBannerLink/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
 
-export interface NotificationBannerLinkProps extends BaseProps<'a'> {}
+export interface NotificationBannerLinkProps extends LinkBaseProps {}
 /**
  * Details for the NotificationBannerLink.
  * NotificationBannerLink allow users to click their way from page to page.
@@ -12,21 +12,19 @@ export const NotificationBannerLink = React.forwardRef<
   HTMLAnchorElement,
   NotificationBannerLinkProps
 >(function NotificationBannerLink(
-  { className, href = '#', children, ...props },
+  { className, children, ...props },
   ref
 ) {
   return (
-    <Base
-      as="a"
+    <LinkBase
       ref={ref}
-      href={href}
       className={clsx(className, {
         'govgr-notification-banner__link': true,
       })}
       {...props}
     >
       {children}
-    </Base>
+    </LinkBase>
   );
 });
 

package/src/PageTitleHeading/index.tsx

@@ -1,37 +1,19 @@
 import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Heading, { HeadingProps } from '@digigov/react-core/Heading';
 
-export interface PageTitleHeadingProps extends BaseProps<'h1'> {
-  /**
-   * size is optional.
-   */
-  size?: 'xl' | 'lg' | 'md' | 'sm';
-}
+export interface PageTitleHeadingProps extends HeadingProps { }
 /**
  * Details for the PageTitleHeading.
+ * Use PageTitleHeading for the main page title.
  */
 export const PageTitleHeading = React.forwardRef<
   HTMLHeadingElement,
   PageTitleHeadingProps
->(function PageTitleHeading(
-  { size = 'xl', className, children, ...props },
-  ref
-) {
+>(function PageTitleHeading({ size, className, children, ...props }, ref) {
   return (
-    <Base
-      as="h1"
-      ref={ref}
-      className={clsx(className, {
-        'govgr-heading-xl': size === 'xl',
-        'govgr-heading-lg': size === 'lg',
-        'govgr-heading-md': size === 'md',
-        'govgr-heading-sm': size === 'sm',
-      })}
-      {...props}
-    >
+    <Heading size={size} className={className} ref={ref} {...props}>
       {children}
-    </Base>
+    </Heading>
   );
 });
 

package/src/Pagination/index.tsx

@@ -4,9 +4,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface PaginationProps extends BaseProps<'nav'> {
   /**
-   * fontSize is optional.
-   * You can add this fontSize override prop in order to change the font size.
-   */
+  * fontSize is optional.
+  * You can add this fontSize override prop in order to change the font size.
+  * @value 'sm'
+  * @value 'md'
+  * @default 'md'
+  */
   fontSize?: 'sm' | 'md';
 }
 /**