@digigov/react-core 2.0.0-298cfc51 → 2.0.0-30d44ed9

package/src/Accordion/index.native.tsx

@@ -0,0 +1,19 @@
+import CoreAccordion from '@digigov/react-core/Accordion/index.web';
+import extend, {
+  enablePseudoclass,
+} from '@digigov/react-core/utils/index.native';
+
+export const Accordion = enablePseudoclass(
+  extend(CoreAccordion, ({ className, ...props }) => ({
+    ...props,
+    multiline: true,
+    className,
+  })),
+  {
+    children: {
+      'first-child': ['ds-accordion__section__first-child'],
+    },
+  }
+);
+
+export default Accordion;

package/src/Accordion/index.tsx

@@ -1,71 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface AccordionProps extends BaseProps<'div'> {
-  /*
-   * horizontalBorders is optional.
-   * If 'none', Accordion will have no borders.
-   * If 'top', Accordion will have a border on top.
-   * If 'bottom', Accordion will have a border on bottom.
-   * @value none
-   * @value top
-   * @value bottom
-   * @default top
-   */
-  horizontalBorders?: 'none' | 'top' | 'bottom';
-  /**
-   * summaryColor is optional.
-   * 'primary' color gives AccordionSectionSummary the default color.
-   * 'secondary' color gives AccordionSectionSummary a gray background.
-   * @value primary
-   * @value secondary
-   * @default primary
-   * */
-  summaryColor?: 'primary' | 'secondary';
-  /**
-   * dense is optional.
-   * If true, AccordionSection will have a smaller padding.
-   * @value true
-   * @value false
-   * @default false
-   * */
-  dense?: boolean;
-}
-/**
- * Accordion is the main component for an accordion.
- * Inside this component must be a list of AccordionSection components.
- */
-export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
-  function Accordion(
-    {
-      className,
-      horizontalBorders = 'top',
-      summaryColor = 'primary',
-      dense,
-      children,
-      ...props
-    },
-    ref
-  ) {
-    return (
-      <Base
-        as="div"
-        ref={ref}
-        className={clsx(className, {
-          'ds-accordion': true,
-          'ds-accordion--no-border': horizontalBorders === 'none',
-          'ds-accordion--border-top': horizontalBorders === 'top',
-          'ds-accordion--border-bottom': horizontalBorders === 'bottom',
-          'ds-accordion--dense': dense,
-          'ds-accordion--secondary': summaryColor === 'secondary',
-        })}
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
-
-export default Accordion;
+export * from '@digigov/react-core/Accordion/index.web';
+export { default as default } from '@digigov/react-core/Accordion/index.web';

package/src/Accordion/index.web.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AccordionProps extends BaseProps<'div'> {
+  /*
+   * horizontalBorders is optional.
+   * If 'none', Accordion will have no borders.
+   * If 'top', Accordion will have a border on top.
+   * If 'bottom', Accordion will have a border on bottom.
+   * @value none
+   * @value top
+   * @value bottom
+   * @default top
+   */
+  horizontalBorders?: 'none' | 'top' | 'bottom';
+  /**
+   * summaryColor is optional.
+   * 'primary' color gives AccordionSectionSummary the default color.
+   * 'secondary' color gives AccordionSectionSummary a gray background.
+   * @value primary
+   * @value secondary
+   * @default primary
+   * */
+  summaryColor?: 'primary' | 'secondary';
+  /**
+   * dense is optional.
+   * If true, AccordionSection will have a smaller padding.
+   * @value true
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
+}
+/**
+ * Accordion is the main component for an accordion.
+ * Inside this component must be a list of AccordionSection components.
+ */
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  function Accordion(
+    {
+      className,
+      horizontalBorders = 'top',
+      summaryColor = 'primary',
+      dense,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'ds-accordion': true,
+          'ds-accordion--no-border': horizontalBorders === 'none',
+          'ds-accordion--border-top': horizontalBorders === 'top',
+          'ds-accordion--border-bottom': horizontalBorders === 'bottom',
+          'ds-accordion--dense': dense,
+          'ds-accordion--secondary': summaryColor === 'secondary',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Accordion;

package/src/AccordionControls/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AccordionControlsProps extends BaseProps<'div'> { }
+export interface AccordionControlsProps extends BaseProps<'div'> {}
 /**
  * AccordionControls is a component that provides controls for an accordion.
  */

package/src/AccordionSection/index.native.tsx

@@ -0,0 +1,18 @@
+import CoreAccordionSection from '@digigov/react-core/AccordionSection/index.web';
+import { extend } from '@digigov/react-core/utils/index.native';
+
+export const AccordionSection = extend(
+  CoreAccordionSection,
+  ({ className, ...props }) => {
+    return {
+      className: className,
+      iconClassName: 'ds-accordion__section-button-icon',
+      openIcon: '–',
+      closeIcon: '+',
+      placement: 'after',
+      ...props,
+    };
+  }
+);
+
+export default AccordionSection;

package/src/AccordionSection/index.test.tsx

@@ -4,7 +4,9 @@ import { render } from '@testing-library/react';
 import AccordionSection from '@digigov/react-core/AccordionSection';
 
 it('renders the AccordionSection with no props', () => {
-  expect(render(<AccordionSection>hello</AccordionSection>).baseElement).toMatchSnapshot();
+  expect(
+    render(<AccordionSection>hello</AccordionSection>).baseElement
+  ).toMatchSnapshot();
 });
 
 it('renders the AccordionSection with open=true', () => {

package/src/AccordionSection/index.tsx

@@ -1,28 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-export interface AccordionSectionProps extends BaseProps<'details'> { }
-/**
- * AccordionSection should be inside the Accordion component.
- *
- * Inside this component must place the Accordion and the AccordionSectionContent components.
- */
-export const AccordionSection = React.forwardRef<
-  HTMLDetailsElement,
-  AccordionSectionProps
->(function AccordionSection({ className, children, ...props }, ref) {
-  return (
-    <Base
-      as="details"
-      ref={ref}
-      className={clsx(className, {
-        'ds-accordion__section': true,
-      })}
-      {...props}
-    >
-      {children}
-    </Base>
-  );
-});
-
-export default AccordionSection;
+export * from '@digigov/react-core/AccordionSection/index.web';
+export { default as default } from '@digigov/react-core/AccordionSection/index.web';

package/src/AccordionSection/index.web.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+export interface AccordionSectionProps extends BaseProps<'details'> {}
+/**
+ * AccordionSection should be inside the Accordion component.
+ *
+ * Inside this component must place the Accordion and the AccordionSectionContent components.
+ */
+export const AccordionSection = React.forwardRef<
+  HTMLDetailsElement,
+  AccordionSectionProps
+>(function AccordionSection({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="details"
+      ref={ref}
+      className={clsx(className, {
+        'ds-accordion__section': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AccordionSection;

package/src/AccordionSectionContent/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AccordionSectionContentProps extends BaseProps<'div'> { }
+export interface AccordionSectionContentProps extends BaseProps<'div'> {}
 /**
  * AccordionSectionContent should be inside the AccordionSection and it is the content of the section.
  * The content is only visible when the AccordionSection is 'open'.

package/src/AccordionSectionSummary/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AccordionSectionSummaryProps extends BaseProps<'summary'> { }
+export interface AccordionSectionSummaryProps extends BaseProps<'summary'> {}
 /**
  * AccordionSectionSummary is used as a wrapper component for AccordionSectionSummaryHeading.
  */

package/src/AccordionSectionSummaryHeading/index.tsx

@@ -2,7 +2,13 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> { }
+export interface AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> {
+  /*
+   * The type of the icon to be displayed on the right side of the heading.
+   * @default 'default'
+   */
+  variant?: 'default' | 'arrows';
+}
 /**
  * AccordionSectionSummaryHeading should be placed inside AccordionSectionSummary.
  */
@@ -10,7 +16,7 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
   HTMLHeadingElement,
   AccordionSectionSummaryHeadingProps
 >(function AccordionSectionSummaryHeading(
-  { className, children, ...props },
+  { variant, className, children, ...props },
   ref
 ) {
   return (
@@ -23,13 +29,15 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
       {...props}
       role="button"
     >
-      <span
+      <Base
+        as="span"
         className={clsx({
           'ds-accordion__section-button': true,
+          'ds-accordion__section-button--arrows': variant === 'arrows',
         })}
       >
         {children}
-      </span>
+      </Base>
     </Base>
   );
 });

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

@@ -4,7 +4,7 @@ exports[`renders the AdminAside with no prop 1`] = `
 <body>
   <div>
     <aside
-      class="ds-admin-aside ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
+      class="ds-admin-aside ds-aside ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-4 lg:ds-grid__col-span-3"
     >
       hello
     </aside>

package/src/AdminAside/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Aside, { AsideProps } from '@digigov/react-core/Aside';
 
-export interface AdminAsideProps extends AsideProps { }
+export interface AdminAsideProps extends AsideProps {}
 
 /**
  * Use this inside AdminContainer component for placing the aside content of the page

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

@@ -4,7 +4,7 @@ exports[`renders the AdminContainer with no grid 1`] = `
 <body>
   <div>
     <div
-      class="ds-admin-container ds-container ds-container--full-width"
+      class="ds-admin-container ds-container ds-container--full-width ds-grid-item"
     >
       hello
     </div>
@@ -16,7 +16,7 @@ exports[`renders the AdminContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-admin-container ds-container ds-container--full-width ds-grid ds-gap-sm-12"
+      class="ds-admin-container ds-container ds-container--full-width ds-grid ds-grid-item ds-gap-sm-12"
     >
       hello
     </div>

package/src/AdminContainer/index.test.tsx

@@ -4,8 +4,12 @@ import { render } from '@testing-library/react';
 import AdminContainer from '@digigov/react-core/AdminContainer';
 
 it('renders the AdminContainer with no props', () => {
-  expect(render(<AdminContainer>hello</AdminContainer>).baseElement).toMatchSnapshot();
+  expect(
+    render(<AdminContainer>hello</AdminContainer>).baseElement
+  ).toMatchSnapshot();
 });
 it('renders the AdminContainer with no grid', () => {
-  expect(render(<AdminContainer grid={false}>hello</AdminContainer>).baseElement).toMatchSnapshot();
+  expect(
+    render(<AdminContainer grid={false}>hello</AdminContainer>).baseElement
+  ).toMatchSnapshot();
 });

package/src/AdminContainer/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import Container, { ContainerProps } from '@digigov/react-core/Container';
 import clsx from 'clsx';
+import Container, { ContainerProps } from '@digigov/react-core/Container';
 
 export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> {
   /**

package/src/AdminHeader/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import AdminHeader from '@digigov/react-core/AdminHeader';
 
 it('renders the AdminHeader with no props', () => {
-  expect(render(<AdminHeader>hello</AdminHeader>).baseElement).toMatchSnapshot();
+  expect(
+    render(<AdminHeader>hello</AdminHeader>).baseElement
+  ).toMatchSnapshot();
 });

package/src/AdminHeader/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Header, { HeaderProps } from '@digigov/react-core/Header';
 
-export interface AdminHeaderProps extends HeaderProps { }
+export interface AdminHeaderProps extends HeaderProps {}
 /**
  * AdminHeader represents a container for govgr header information.
  * This elements is placed at the top of the page.

package/src/AdminHeaderContent/index.tsx

@@ -1,8 +1,10 @@
 import React from 'react';
 import clsx from 'clsx';
-import HeaderContent, { HeaderContentProps } from '@digigov/react-core/HeaderContent';
+import HeaderContent, {
+  HeaderContentProps,
+} from '@digigov/react-core/HeaderContent';
 
-export interface AdminHeaderContentProps extends HeaderContentProps { }
+export interface AdminHeaderContentProps extends HeaderContentProps {}
 /**
  * AdminAdminHeaderContent is used inside AdminHeader as a container for its items.
  */

package/src/AdminLayout/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import AdminLayout from '@digigov/react-core/AdminLayout';
 
 it('renders the AdminLayout with no props', () => {
-  expect(render(<AdminLayout>hello</AdminLayout>).baseElement).toMatchSnapshot();
+  expect(
+    render(<AdminLayout>hello</AdminLayout>).baseElement
+  ).toMatchSnapshot();
 });

package/src/AdminLayout/index.tsx

@@ -2,8 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Layout, { LayoutProps } from '@digigov/react-core/Layout';
 
-export interface AdminLayoutProps extends LayoutProps {
-}
+export interface AdminLayoutProps extends LayoutProps {}
 /**
  * AdminLayout is the  wrapper component for the entire page except for the header and the footer.
  */

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

@@ -4,7 +4,7 @@ exports[`renders the AdminMain with no prop 1`] = `
 <body>
   <div>
     <main
-      class="ds-admin-main ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
+      class="ds-admin-main ds-main ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-8 lg:ds-grid__col-span-9"
       id="main-content"
     >
       hello

package/src/AdminMain/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Main, { MainProps } from '@digigov/react-core/Main';
 
-export interface AdminMainProps extends MainProps { }
+export interface AdminMainProps extends MainProps {}
 /**
  * Use this inside AdminContainer component for placing the main content of the page
  */

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

@@ -4,7 +4,7 @@ exports[`renders the AdminTopSection no prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-admin-top-section"
+      class="ds-admin-top-section ds-grid-item"
     >
       hello
     </div>

package/src/AdminTopSection/index.test.tsx

@@ -4,5 +4,7 @@ import { render } from '@testing-library/react';
 import AdminTopSection from '@digigov/react-core/AdminTopSection';
 
 it('renders the AdminTopSection no prop', () => {
-  expect(render(<AdminTopSection>hello</AdminTopSection>).baseElement).toMatchSnapshot();
+  expect(
+    render(<AdminTopSection>hello</AdminTopSection>).baseElement
+  ).toMatchSnapshot();
 });

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

@@ -4,7 +4,7 @@ exports[`renders the Aside with no props 1`] = `
 <body>
   <div>
     <aside
-      class="ds-aside ds-aside--sticky xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
+      class="ds-aside ds-aside--sticky ds-grid-item xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
     >
       hello
     </aside>

package/src/AutoCompleteAssistiveHint/index.test.tsx

@@ -5,6 +5,7 @@ import AutoCompleteAssistiveHint from '@digigov/react-core/AutoCompleteAssistive
 
 it('renders the AdminContainer with no props', () => {
   expect(
-    render(<AutoCompleteAssistiveHint>hello</AutoCompleteAssistiveHint>).baseElement
+    render(<AutoCompleteAssistiveHint>hello</AutoCompleteAssistiveHint>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/AutoCompleteAssistiveHint/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AutoCompleteAssistiveHintProps extends BaseProps<'span'> { }
+export interface AutoCompleteAssistiveHintProps extends BaseProps<'span'> {}
 /**
  * AutoCompleteAssistiveHint is a span element for displaying the autocomplete
  * assistive hint text.

package/src/AutoCompleteContainer/index.tsx

@@ -23,7 +23,10 @@ export interface AutoCompleteContainerProps extends BaseProps<'div'> {
 export const AutoCompleteContainer = React.forwardRef<
   HTMLDivElement,
   AutoCompleteContainerProps
->(function AutoCompleteContainer({ className, width, children, ...props }, ref) {
+>(function AutoCompleteContainer(
+  { className, width, children, ...props },
+  ref
+) {
   return (
     <Base
       as="div"

package/src/AutoCompleteInputBase/index.tsx

@@ -9,7 +9,6 @@ export interface AutoCompleteInputBaseProps extends BaseProps<'input'> {
    * @value false
    */
   isFocused?: boolean;
-
 }
 /**
  * AutoCompleteInputBase component is used to display the value that the user is typing.

package/src/AutoCompleteMultipleInputContainer/index.tsx

@@ -6,7 +6,7 @@ export interface AutoCompleteMultipleInputContainerProps
   extends BaseProps<'div'> {
   open?: boolean;
   isFocused?: boolean;
-  numberOfSelected?: 1 | 2 | 3 | 'all';  
+  numberOfSelected?: 1 | 2 | 3 | 'all';
 }
 /**
  * Use AutoCompleteMultipleInputContainer to accept multiple values input.
@@ -15,7 +15,7 @@ export const AutoCompleteMultipleInputContainer = React.forwardRef<
   HTMLDivElement,
   AutoCompleteMultipleInputContainerProps
 >(function AutoCompleteMultipleInputContainer(
-  { numberOfSelected = 'all', open, children, isFocused, className, ...props },
+  { numberOfSelected = 'all', children, isFocused, className, ...props },
   ref
 ) {
   return (
@@ -25,8 +25,8 @@ export const AutoCompleteMultipleInputContainer = React.forwardRef<
       className={clsx(className, {
         'ds-autocomplete__multi-input-container': true,
         'ds-autocomplete__multi-input-container--focused': isFocused,
-        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]: typeof(numberOfSelected) === 'number' 
-        
+        [`ds-autocomplete__multi-input-container--${numberOfSelected}`]:
+          typeof numberOfSelected === 'number',
       })}
       {...props}
     >

package/src/AutoCompleteResultList/index.test.tsx

@@ -11,6 +11,7 @@ it('renders the AutoCompleteResultList with no props', () => {
 
 it('renders the AutoCompleteResultList with isVisible props', () => {
   expect(
-    render(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>).baseElement
+    render(<AutoCompleteResultList isVisible>Hello</AutoCompleteResultList>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/AutoCompleteResultList/index.tsx

@@ -21,10 +21,7 @@ export interface AutoCompleteResultListProps extends BaseProps<'ul'> {
 export const AutoCompleteResultList = React.forwardRef<
   HTMLUListElement,
   AutoCompleteResultListProps
->(function List(
-  { isVisible = false, className, children, ...props },
-  ref
-) {
+>(function List({ isVisible = false, className, children, ...props }, ref) {
   return (
     <Base
       as="ul"

package/src/AutoCompleteResultListItem/index.test.tsx

@@ -5,7 +5,8 @@ import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultLi
 
 it('renders the AutoCompleteResultList with no props', () => {
   expect(
-    render(<AutoCompleteResultListItem>Hello</AutoCompleteResultListItem>).baseElement
+    render(<AutoCompleteResultListItem>Hello</AutoCompleteResultListItem>)
+      .baseElement
   ).toMatchSnapshot();
 });
 

package/src/AutoCompleteStatus/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface AutoCompleteStatusProps extends BaseProps<'div'> { }
+export interface AutoCompleteStatusProps extends BaseProps<'div'> {}
 /**
  * AutoCompleteStatus is a div element for displaying the autocomplete status.
  * Use AutoCompleteStatus inside AutoCompleteStatusContainer wrapper.

package/src/AutoCompleteStatusContainer/index.test.tsx

@@ -5,6 +5,7 @@ import AutoCompleteStatusContainer from '@digigov/react-core/AutoCompleteStatusC
 
 it('renders the AdminContainer with no props', () => {
   expect(
-    render(<AutoCompleteStatusContainer>hello</AutoCompleteStatusContainer>).baseElement
+    render(<AutoCompleteStatusContainer>hello</AutoCompleteStatusContainer>)
+      .baseElement
   ).toMatchSnapshot();
 });

package/src/{BackLink → BackLinkBase}/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the BackLink with href="#" 1`] = `
+exports[`renders the BackLinkBase with href="#" 1`] = `
 <body>
   <div>
     <a
@@ -27,7 +27,7 @@ exports[`renders the BackLink with href="#" 1`] = `
 </body>
 `;
 
-exports[`renders the BackLink with no props 1`] = `
+exports[`renders the BackLinkBase with no props 1`] = `
 <body>
   <div>
     <a