@digigov/react-core 2.0.0-0c4be34e → 2.0.0-107d908d

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/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.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/AccordionSectionSummaryHeading/index.tsx

@@ -23,13 +23,14 @@ export const AccordionSectionSummaryHeading = React.forwardRef<
       {...props}
       role="button"
     >
-      <span
+      <Base
+        as="span"
         className={clsx({
           'ds-accordion__section-button': true,
         })}
       >
         {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/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/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/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/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/{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

package/src/BackLinkBase/index.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import BackLinkBase from '@digigov/react-core/BackLinkBase';
+
+it('renders the BackLinkBase with no props', () => {
+  expect(
+    render(<BackLinkBase>hello</BackLinkBase>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the BackLinkBase with href="#"', () => {
+  expect(
+    render(<BackLinkBase href="#">hello</BackLinkBase>).baseElement
+  ).toMatchSnapshot();
+});

package/src/BackLinkBase/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import clsx from 'clsx';
+import { LinkBase, LinkBaseProps } from '@digigov/react-core/LinkBase';
+import { CaretIcon } from '@digigov/react-icons';
+
+export interface BackLinkBaseProps extends LinkBaseProps {}
+/**
+ * Use BackLinkBase component to help users go back to the previous page in a multi-page transaction.
+ */
+export const BackLinkBase = React.forwardRef<
+  HTMLAnchorElement,
+  BackLinkBaseProps
+>(function BackLinkBase(
+  { href, printHidden = true, className, children, ...props },
+  ref
+) {
+  return (
+    <LinkBase
+      href={href}
+      printHidden={printHidden}
+      defaultStyle={false}
+      onClick={() => !href && window.history.back()}
+      ref={ref}
+      className={clsx(className, {
+        'ds-back-link': true,
+      })}
+      tabIndex={0}
+      {...props}
+    >
+      <CaretIcon direction={'left'} />
+      {children}
+    </LinkBase>
+  );
+});
+
+export default BackLinkBase;

package/src/Base/compat/Input/CheckboxInput.native.tsx

@@ -1,8 +1,4 @@
-import React, {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  LegacyRef,
-} from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 export type CheckboxInputProps = Omit<
@@ -28,7 +24,7 @@ export const CheckboxInput = React.forwardRef<
   return (
     // @ts-ignore
     <TouchableOpacity
-      ref={ref as LegacyRef<TouchableOpacity>}
+      ref={ref as Ref<TouchableOpacity>}
       onPress={handlePress}
       {...props}
     >

package/src/Base/compat/Input/RadioInput.native.tsx

@@ -1,8 +1,4 @@
-import React, {
-  DetailedHTMLProps,
-  InputHTMLAttributes,
-  LegacyRef,
-} from 'react';
+import React, { DetailedHTMLProps, InputHTMLAttributes, Ref } from 'react';
 import { TouchableOpacity, View } from 'react-native';
 
 export type RadioInputProps = Omit<
@@ -26,7 +22,7 @@ export const RadioInput = React.forwardRef<HTMLInputElement, RadioInputProps>(
 
     return (
       <TouchableOpacity
-        ref={ref as LegacyRef<typeof TouchableOpacity>}
+        ref={ref as Ref<typeof TouchableOpacity>}
         onPress={handlePress}
         {...(props as any)}
       >

package/src/Base/compat/details.native.tsx

@@ -16,6 +16,7 @@ type HTMLElementProps = Omit<
 > & {
   closeIcon?: string;
   openIcon?: string;
+  iconClassName?: string;
   placement?: 'before' | 'after';
 };
 
@@ -25,6 +26,7 @@ const CompatDetails = ({
   placement,
   closeIcon,
   openIcon,
+  iconClassName,
   ...props
 }: HTMLElementProps) => {
   const [isExpanded, setIsExpanded] = useState(open);
@@ -41,7 +43,7 @@ const CompatDetails = ({
 
   const toggleIcon =
     closeIcon && openIcon ? (
-      <Text>{isExpanded ? openIcon : closeIcon}</Text>
+      <Text className={iconClassName}>{isExpanded ? openIcon : closeIcon}</Text>
     ) : null;
 
   return (

package/src/Base/index.native.tsx

@@ -1,4 +1,4 @@
-import React, { useMemo } from 'react';
+import React, { useMemo, type JSX } from 'react';
 import { Text, View, ViewProps } from 'react-native';
 import { BaseProps as CoreBaseProps } from '@digigov/react-core/Base/index.web';
 import { mapping } from '@digigov/react-core/Base/mapping.native';
@@ -22,7 +22,7 @@ const BooleanMapper = {
 const textHtmlTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'];
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+  C extends React.ElementType,
 >(
   {
     as,

package/src/Base/index.web.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import { basePropGenerator } from '@digigov/react-core/Base/utils';
 interface AsProp<C extends React.ElementType> {
-  as?: C;
+  as?: C | React.ElementType<any>;
 }
 
 type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
@@ -162,7 +162,7 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
 ) => React.ReactNode | null;
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span',
+  C extends React.ElementType,
 >(
   {
     as,

package/src/Base/mapping.native.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { type JSX } from 'react';
 import { Link } from 'expo-router';
 import { cssInterop } from 'nativewind';
 import { Image, View } from 'react-native';

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

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

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

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

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

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

package/src/{BreadcrumbsListItemLink → BreadcrumbsListItemLinkBase}/__snapshots__/index.test.tsx.snap

@@ -1,10 +1,10 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the BreadcrumbsListItemLink with href 1`] = `
+exports[`renders the BreadcrumbsListItemLinkBase with href 1`] = `
 <body>
   <div>
     <a
-      class="ds-breadcrumbs__link"
+      class="ds-breadcrumbs__link ds-link"
       href="#"
     >
       hello
@@ -13,11 +13,11 @@ exports[`renders the BreadcrumbsListItemLink with href 1`] = `
 </body>
 `;
 
-exports[`renders the BreadcrumbsListItemLink with no props 1`] = `
+exports[`renders the BreadcrumbsListItemLinkBase with no props 1`] = `
 <body>
   <div>
     <a
-      class="ds-breadcrumbs__link ds-breadcrumbs__link--inactive"
+      class="ds-breadcrumbs__link ds-breadcrumbs__link--inactive ds-link"
     >
       hello
     </a>

package/src/BreadcrumbsListItemLinkBase/index.test.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import { BreadcrumbsListItemLinkBase } from '@digigov/react-core/BreadcrumbsListItemLinkBase';
+
+it('renders the BreadcrumbsListItemLinkBase with no props', () => {
+  expect(
+    render(<BreadcrumbsListItemLinkBase>hello</BreadcrumbsListItemLinkBase>)
+      .baseElement
+  ).toMatchSnapshot();
+});
+it('renders the BreadcrumbsListItemLinkBase with href', () => {
+  expect(
+    render(
+      <BreadcrumbsListItemLinkBase href="#">hello</BreadcrumbsListItemLinkBase>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/{BreadcrumbsListItemLink → BreadcrumbsListItemLinkBase}/index.tsx

@@ -1,24 +1,23 @@
 import React from 'react';
 import clsx from 'clsx';
-import Link, { LinkBaseProps } from '@digigov/react-core/LinkBase';
+import { LinkBase, LinkBaseProps } from '@digigov/react-core/LinkBase';
 
-export interface BreadcrumbsListItemLinkProps extends LinkBaseProps {}
+export interface BreadcrumbsListItemLinkBaseProps extends LinkBaseProps {}
 /**
- * BreadcrumbsListItemLink creates an anchor link to navigate in different
+ * BreadcrumbsListItemLinkBase creates an anchor link to navigate in different
  * parts of the breadcrumbs.
  * It should be used inside BreadcrumbsListItem as children component. This is
  * the default link component for the BreadcrumbsListItem and it uses the LinkBase
  * component from `@digigov/react-core`. In case you need to use a different Link
- * component from a framework or a custom router, use `@digigov/ui/navigation/BreadcrumbsListItemLink` instead.
+ * component from a framework or a custom router, use `@digigov/ui/navigation/BreadcrumbsListItemLinkBase` instead.
  */
-export const BreadcrumbsListItemLink = React.forwardRef<
+export const BreadcrumbsListItemLinkBase = React.forwardRef<
   HTMLAnchorElement,
-  BreadcrumbsListItemLinkProps
->(function BreadcrumbsListItemLink({ href, className, children }, ref) {
+  BreadcrumbsListItemLinkBaseProps
+>(function BreadcrumbsListItemLinkBase({ href, className, children }, ref) {
   return (
-    <Link
+    <LinkBase
       href={href}
-      defaultStyle={false}
       className={clsx(className, {
         'ds-breadcrumbs__link': true,
         'ds-breadcrumbs__link--inactive': href === undefined,
@@ -26,8 +25,8 @@ export const BreadcrumbsListItemLink = React.forwardRef<
       ref={ref}
     >
       {children}
-    </Link>
+    </LinkBase>
   );
 });
 
-export default BreadcrumbsListItemLink;
+export default BreadcrumbsListItemLinkBase;

package/src/{BreadcrumbsListItem → BreadcrumbsListItemWrapper}/index.test.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import BreadcrumbsListItem from '@digigov/react-core/BreadcrumbsListItem';
+import BreadcrumbsListItem from '@digigov/react-core/BreadcrumbsListItemWrapper';
 
 it('renders the BreadcrumbsListItem with no props', () => {
   expect(

package/src/{BreadcrumbsListItem → BreadcrumbsListItemWrapper}/index.tsx

@@ -2,15 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface BreadcrumbsListItemBaseProps extends BaseProps<'li'> {}
+export interface BreadcrumbsListItemWrapperProps extends BaseProps<'li'> {}
 /**
  * BreadcrumbsListItem creates a list of items with the possibility of navigation.
  * It should be used inside BreadcrumbsList as children component
  */
-export const BreadcrumbsListItemBase = React.forwardRef<
+export const BreadcrumbsListItemWrapper = React.forwardRef<
   HTMLLIElement,
-  BreadcrumbsListItemBaseProps
->(function BreadcrumbsListItemBase({ className, children, ...props }, ref) {
+  BreadcrumbsListItemWrapperProps
+>(function BreadcrumbsListItemWrapper({ className, children, ...props }, ref) {
   return (
     <Base
       as="li"
@@ -25,4 +25,4 @@ export const BreadcrumbsListItemBase = React.forwardRef<
   );
 });
 
-export default BreadcrumbsListItemBase;
+export default BreadcrumbsListItemWrapper;

package/src/Button/index.tsx

@@ -55,6 +55,8 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         ref={ref}
         className={clsx(className, {
           'ds-link': variant === 'link',
+          'ds-link-warning': variant === 'link' && color === 'warning',
+          'ds-link--disabled': variant === 'link' && disabled,
           'ds-btn': variant === 'button',
           'ds-btn--dense': dense,
           'ds-btn-primary': variant === 'button' && color === 'primary',