@digigov/react-core 2.0.0-6c42d5eb → 2.0.0-6e3977bc

package/src/CopyToClipboardContainer/index.tsx

@@ -1,74 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface CopyToClipboardContainerProps extends BaseProps<'div'> {
-  /**
-   * @value 'tooltip' is used when you want to show the message inside a tooltip.
-   * @value 'banner' is used when you want to show the message inside a banner.
-   * @default 'tooltip'
-   */
-  variant?: 'tooltip' | 'banner';
-  /**
-   * tooltipAlign is optional.
-   * tooltipAlign prop adds tooltip right or left and is used only if variant is tooltip.
-   * @value 'right'
-   * @value 'left'
-   * @default 'right'
-   */
-  tooltipAlign?: 'right' | 'left';
-  /**
-   * dense is optional.
-   * affects only the density of the tooltip.
-   * @value true tooltip will be dense.
-   * @value false
-   * @default false
-   * */
-  dense?: boolean;
-}
-/**
- * CopyToClipboardContainer is a wrapper component for CopyToClipboardMessage
- */
-export const CopyToClipboardContainer = React.forwardRef<
-  HTMLDivElement,
-  CopyToClipboardContainerProps
->(function CopyToClipboardContainer(
-  {
-    variant = 'tooltip',
-    tooltipAlign = 'right',
-    className,
-    dense,
-    children,
-    ...props
-  },
-  ref
-) {
-  return (
-    <Base
-      as="div"
-      ref={ref}
-      {...props}
-      className={clsx(className, {
-        'ds-copy-to-clipboard': true,
-      })}
-      {...props}
-    >
-      <div
-        className={clsx(className, {
-          'ds-copy-to-clipboard__tooltip': variant === 'tooltip',
-          'ds-copy-to-clipboard__tooltip--dense':
-            variant === 'tooltip' && dense,
-          'ds-copy-to-clipboard__tooltip--left':
-            variant === 'tooltip' && tooltipAlign === 'left',
-          'ds-copy-to-clipboard__tooltip--right':
-            variant === 'tooltip' && tooltipAlign === 'right',
-          'ds-copy-to-clipboard__banner': variant === 'banner',
-        })}
-      >
-        {children}
-      </div>
-    </Base>
-  );
-});
-
-export default CopyToClipboardContainer;
+export * from '@digigov/react-core/CopyToClipboardContainer/index.web';
+export { default as default } from '@digigov/react-core/CopyToClipboardContainer/index.web';

package/src/CopyToClipboardContainer/index.web.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface CopyToClipboardContainerProps extends BaseProps<'div'> {
+  /**
+   * @value 'tooltip' is used when you want to show the message inside a tooltip.
+   * @value 'banner' is used when you want to show the message inside a banner.
+   * @default 'tooltip'
+   */
+  variant?: 'tooltip' | 'banner';
+  /**
+   * tooltipAlign is optional.
+   * tooltipAlign prop adds tooltip right or left and is used only if variant is tooltip.
+   * @value 'right'
+   * @value 'left'
+   * @default 'right'
+   */
+  tooltipAlign?: 'right' | 'left';
+  /**
+   * dense is optional.
+   * affects only the density of the tooltip.
+   * @value true tooltip will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
+}
+/**
+ * CopyToClipboardContainer is a wrapper component for CopyToClipboardMessage
+ */
+export const CopyToClipboardContainer = React.forwardRef<
+  HTMLDivElement,
+  CopyToClipboardContainerProps
+>(function CopyToClipboardContainer(
+  {
+    variant = 'tooltip',
+    tooltipAlign = 'right',
+    className,
+    dense,
+    children,
+    ...props
+  },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      {...props}
+      className={clsx(className, {
+        'ds-copy-to-clipboard': true,
+      })}
+      {...props}
+    >
+      <Base
+        as="div"
+        className={clsx(className, {
+          'ds-copy-to-clipboard__tooltip': variant === 'tooltip',
+          'ds-copy-to-clipboard__tooltip--dense':
+            variant === 'tooltip' && dense,
+          'ds-copy-to-clipboard__tooltip--left':
+            variant === 'tooltip' && tooltipAlign === 'left',
+          'ds-copy-to-clipboard__tooltip--right':
+            variant === 'tooltip' && tooltipAlign === 'right',
+          'ds-copy-to-clipboard__banner': variant === 'banner',
+        })}
+      >
+        {children}
+      </Base>
+    </Base>
+  );
+});
+
+export default CopyToClipboardContainer;

package/src/CopyToClipboardMessage/index.native.tsx

@@ -0,0 +1,21 @@
+import CoreCopyToClipboardMessage, {
+  CopyToClipboardMessageProps,
+} from '@digigov/react-core/CopyToClipboardMessage/index.web';
+import { CopyToClipboardContainerProps } from '@digigov/react-core/CopyToClipboardContainer';
+import { extend } from '@digigov/react-core/utils/extend.native';
+import clsx from 'clsx';
+
+export const CopyToClipboardMessage = extend<
+  CopyToClipboardMessageProps,
+  CopyToClipboardContainerProps
+>(CoreCopyToClipboardMessage, ({ dense, className, ...props }) => {
+  return {
+    className: clsx(className, {
+      'ds-copy-to-clipboard__before': true,
+      'ds-copy-to-clipboard__message--dense': dense,
+    }),
+    ...props,
+  };
+});
+
+export default CopyToClipboardMessage;

package/src/CopyToClipboardMessage/index.tsx

@@ -1,41 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface CopyToClipboardMessageProps extends BaseProps<'div'> {
-  /**
-   * enabled is a boolean prop passed from the CopyToClipboard component.
-   * When it's true it shows the CopyToClipboardMessage component and it activates the animation that hides the component after 3s.
-   * When it's false it resets the animations of the CopyToClipboardMessage.
-   * @value true
-   * @value false
-   */
-  enabled?: boolean;
-}
-/**
- * CopyToClipboardMessage is used to show a message that a text is being copied.
- * This component is used inside the CopyToClipboard component that lies inside the digigov/ui library
- */
-export const CopyToClipboardMessage = React.forwardRef<
-  HTMLDivElement,
-  CopyToClipboardMessageProps
->(function CopyToClipboardMessage(
-  { enabled, className, children, ...props },
-  ref
-) {
-  return (
-    <Base
-      as="div"
-      ref={ref}
-      className={clsx(className, {
-        'ds-copy-to-clipboard__message': true,
-        'ds-copy-to-clipboard--hidden': !enabled,
-      })}
-      {...props}
-    >
-      {children}
-    </Base>
-  );
-});
-
-export default CopyToClipboardMessage;
+export * from '@digigov/react-core/CopyToClipboardMessage/index.web';
+export { default as default } from '@digigov/react-core/CopyToClipboardMessage/index.web';

package/src/CopyToClipboardMessage/index.web.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface CopyToClipboardMessageProps extends BaseProps<'div'> {
+  /**
+   * enabled is a boolean prop passed from the CopyToClipboard component.
+   * When it's true it shows the CopyToClipboardMessage component and it activates the animation that hides the component after 3s.
+   * When it's false it resets the animations of the CopyToClipboardMessage.
+   * @value true
+   * @value false
+   */
+  enabled?: boolean;
+}
+/**
+ * CopyToClipboardMessage is used to show a message that a text is being copied.
+ * This component is used inside the CopyToClipboard component that lies inside the digigov/ui library
+ */
+export const CopyToClipboardMessage = React.forwardRef<
+  HTMLDivElement,
+  CopyToClipboardMessageProps
+>(function CopyToClipboardMessage(
+  { enabled, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'ds-copy-to-clipboard__message': true,
+        'ds-copy-to-clipboard--hidden': !enabled,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default CopyToClipboardMessage;

package/src/DateInputItem/index.native.tsx

@@ -0,0 +1,12 @@
+import extend from '@digigov/react-core/utils/extend.native';
+import CoreDateInputItem from '@digigov/react-core/DateInputItem/index.web';
+export const DateInputItem = extend(
+  CoreDateInputItem,
+  ({ className, ...props }) => {
+    return {
+      ...props,
+      onChange: undefined,
+    };
+  }
+);
+export default DateInputItem;

package/src/DateInputItem/index.tsx

@@ -1,64 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface DateInputItemProps extends BaseProps<'input'> {
-  /**
-   * Width property is optional.
-   * Use this property for year field to grow width.
-   * @value 2
-   * @value 4
-   * @default 2
-   */
-  width?: 2 | 4;
-  /**
-   * error is optional. The default value is false.
-   * Use this prop when there is an error at the input.
-   * @value true
-   * @value false
-   */
-  error?: boolean;
-}
-/**
- * Details for the DateInputItem.
- * DateInputItem component is used for displaying date.
- * DateInputItem component must be included inside DateInput component as children component
- */
-export const DateInputItem = React.forwardRef<
-  HTMLInputElement,
-  DateInputItemProps
->(function DateInputItem(
-  { name, width = 2, error, className, children, ...props },
-  ref
-) {
-  return (
-    <div
-      className={clsx(className, {
-        'ds-date-input__item': true,
-      })}
-    >
-      <label
-        className={clsx({
-          'ds-label': true,
-        })}
-      >
-        {children}
-        <Base
-          as="input"
-          ref={ref}
-          type="text"
-          name={name}
-          className={clsx({
-            'ds-input': true,
-            'ds-input--width-2-char': width === 2,
-            'ds-input--width-4-char': width === 4,
-            'ds-input--error': error,
-          })}
-          {...props}
-        />
-      </label>
-    </div>
-  );
-});
-
-export default DateInputItem;
+export * from '@digigov/react-core/DateInputItem/index.web';
+export { default as default } from '@digigov/react-core/DateInputItem/index.web';

package/src/DateInputItem/index.web.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import { TextInput } from '@digigov/react-core/TextInput';
+
+export interface DateInputItemProps extends BaseProps<'input'> {
+  /**
+   * Width property is optional.
+   * Use this property for year field to grow width.
+   * @value 2
+   * @value 4
+   * @default 2
+   */
+  width?: 2 | 4;
+  /**
+   * error is optional. The default value is false.
+   * Use this prop when there is an error at the input.
+   * @value true
+   * @value false
+   */
+  error?: boolean;
+}
+/**
+ * Details for the DateInputItem.
+ * DateInputItem component is used for displaying date.
+ * DateInputItem component must be included inside DateInput component as children component
+ */
+export const DateInputItem = React.forwardRef<
+  HTMLInputElement,
+  DateInputItemProps
+>(function DateInputItem(
+  { name, width = 2, error, className, children, ...props },
+  ref
+) {
+  return (
+    <Base as='div'
+      className={clsx(className, {
+        'ds-date-input__item': true,
+      })}
+    >
+      <Base as='label'
+        className={clsx({
+          'ds-label': true,
+        })}
+      >
+        {children}
+        <TextInput ref={ref} type="text" name={name} maxWidth={`${width}-char`} error={error} {...props} />
+      </Base>
+    </Base>
+  );
+});
+
+export default DateInputItem;

package/src/Details/index.native.tsx

@@ -0,0 +1,14 @@
+import CoreDetails from '@digigov/react-core/Details/index.web';
+import { extend } from '@digigov/react-core/utils/extend.native';
+
+export const Details = extend(CoreDetails, ({ className, ...props }) => {
+  return {
+    className,
+    closeIcon: '▶',
+    openIcon: '▼',
+    placement: 'before',
+    ...props,
+  };
+});
+
+export default Details;

package/src/Details/index.tsx

@@ -1,27 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface DetailsProps extends BaseProps<'details'> { }
-/**
- * Details is used to make a page easier to scan when it contains information that only some users will need.
- * Details component wraps DetailsSummary and DetailsContent as children components
- */
-export const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(
-  function Details({ className, children, ...props }, ref) {
-    return (
-      <Base
-        as="details"
-        ref={ref}
-        className={clsx(className, {
-          'ds-details': true,
-        })}
-        {...props}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
-
-export default Details;
+export * from "@digigov/react-core/Details/index.web";
+export {default as default} from "@digigov/react-core/Details/index.web";

package/src/Details/index.web.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface DetailsProps extends BaseProps<'details'> { }
+/**
+ * Details is used to make a page easier to scan when it contains information that only some users will need.
+ * Details component wraps DetailsSummary and DetailsContent as children components
+ */
+export const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(
+  function Details({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="details"
+        ref={ref}
+        className={clsx(className, {
+          'ds-details': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Details;

package/src/FieldsetLegend/index.tsx

@@ -39,10 +39,7 @@ export const FieldsetLegend = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'ds-fieldset__legend': true,
-        'ds-heading-xl': size === 'xl',
-        'ds-heading-lg': size === 'lg',
-        'ds-heading-md': size === 'md',
-        'ds-heading-sm': size === 'sm',
+        [`ds-fieldset__legend--${size}`]: size !== undefined,
       })}
       {...(heading && { role: 'heading', 'aria-level': 1 })}
       {...props}

package/src/LabelTitle/index.tsx

@@ -34,10 +34,8 @@ export const LabelTitle = React.forwardRef<HTMLSpanElement, LabelFieldProps>(
         as="span"
         ref={ref}
         className={clsx(className, {
-          'ds-heading-xl': size === 'xl',
-          'ds-heading-lg': size === 'lg',
-          'ds-heading-md': size === 'md',
-          'ds-heading-sm': size === 'sm',
+          'ds-label__title': true,
+          [`ds-label__title--${size}`]: size !== undefined,
         })}
         {...(heading && { role: 'heading', 'aria-level': 1 })}
         {...props}

package/src/NavListItemActionContainer/index.native.tsx

@@ -0,0 +1,18 @@
+import clsx from 'clsx';
+import CoreNavListItemActionContainer, {
+  NavListItemActionContainerProps,
+} from '@digigov/react-core/NavListItemActionContainer/index.web';
+import extend from '@digigov/react-core/utils/extend.native';
+
+export const NavListItemActionContainer = extend<
+  NavListItemActionContainerProps,
+  { borderBottom?: boolean }
+>(CoreNavListItemActionContainer, ({ className, borderBottom, ...props }) => {
+  return {
+    ...props,
+    className: clsx(className, {
+      'ds-nav__list-item--border-bottom': borderBottom,
+    }),
+  };
+});
+export default NavListItemActionContainer;

package/src/NavListItemActionContainer/index.tsx

@@ -1,28 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface NavListItemActionContainerProps extends BaseProps<'li'> { }
-/**
- * NavListItemActionContainer must be inside the NavList.
- * This component has a items of NavListItemLink component inside.
- */
-export const NavListItemActionContainer = React.forwardRef<
-  HTMLLIElement,
-  NavListItemActionContainerProps
->(function NavListItemActionContainer({ className, children, ...props }, ref) {
-  return (
-    <Base
-      as="li"
-      ref={ref}
-      className={clsx(className, {
-        'ds-nav__list-item': true,
-      })}
-      {...props}
-    >
-      {children}
-    </Base>
-  );
-});
-
-export default NavListItemActionContainer;
+export * from '@digigov/react-core/NavListItemActionContainer/index.web';
+export { default as default } from '@digigov/react-core/NavListItemActionContainer/index.web';

package/src/NavListItemActionContainer/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 NavListItemActionContainerProps extends BaseProps<'li'> { }
+/**
+ * NavListItemActionContainer must be inside the NavList.
+ * This component has a items of NavListItemLink component inside.
+ */
+export const NavListItemActionContainer = React.forwardRef<
+  HTMLLIElement,
+  NavListItemActionContainerProps
+>(function NavListItemActionContainer({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="li"
+      ref={ref}
+      className={clsx(className, {
+        'ds-nav__list-item': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default NavListItemActionContainer;

package/src/NotificationBannerLink/index.native.tsx

@@ -0,0 +1,22 @@
+import CoreNotificationBannerLink, {
+  NotificationBannerLinkProps,
+} from '@digigov/react-core/NotificationBannerLink/index.web';
+import { extend } from '@digigov/react-core/utils/extend.native';
+import clsx from 'clsx';
+
+interface AdditionalProps {
+  variant?: 'error' | 'success';
+}
+
+export const NotificationBannerLink = extend<
+  NotificationBannerLinkProps,
+  AdditionalProps
+>(CoreNotificationBannerLink, ({ variant, className, ...props }) => ({
+  className: clsx(className, {
+    'ds-notification-banner__link--error': variant === 'error',
+    'ds-notification-banner__link--success': variant === 'success',
+  }),
+  ...props,
+}));
+
+export default NotificationBannerLink;

package/src/NotificationBannerLink/index.tsx

@@ -1,28 +1,2 @@
-import React from 'react';
-import clsx from 'clsx';
-import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
-
-export interface NotificationBannerLinkProps extends LinkBaseProps { }
-/**
- * Details for the NotificationBannerLink.
- * NotificationBannerLink allow users to click their way from page to page.
- * NotificationBannerLink must be wrapped inside NotificationContent component as children
- */
-export const NotificationBannerLink = React.forwardRef<
-  HTMLAnchorElement,
-  NotificationBannerLinkProps
->(function NotificationBannerLink({ className, children, ...props }, ref) {
-  return (
-    <LinkBase
-      ref={ref}
-      className={clsx(className, {
-        'ds-notification-banner__link': true,
-      })}
-      {...props}
-    >
-      {children}
-    </LinkBase>
-  );
-});
-
-export default NotificationBannerLink;
+export * from '@digigov/react-core/NotificationBannerLink/index.web';
+export {default as default} from '@digigov/react-core/NotificationBannerLink/index.web';

package/src/NotificationBannerLink/index.web.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import clsx from 'clsx';
+import LinkBase, { LinkBaseProps } from '@digigov/react-core/LinkBase';
+
+export interface NotificationBannerLinkProps extends LinkBaseProps { }
+/**
+ * Details for the NotificationBannerLink.
+ * NotificationBannerLink allow users to click their way from page to page.
+ * NotificationBannerLink must be wrapped inside NotificationContent component as children
+ */
+export const NotificationBannerLink = React.forwardRef<
+  HTMLAnchorElement,
+  NotificationBannerLinkProps
+>(function NotificationBannerLink({ className, children, ...props }, ref) {
+  return (
+    <LinkBase
+      ref={ref}
+      className={clsx(className, {
+        'ds-notification-banner__link': true,
+      })}
+      {...props}
+    >
+      {children}
+    </LinkBase>
+  );
+});
+
+export default NotificationBannerLink;

package/src/PhaseBanner/index.tsx

@@ -31,13 +31,13 @@ export const PhaseBanner = React.forwardRef<HTMLDivElement, PhaseBannerProps>(
         })}
         {...props}
       >
-        <p
+        <Base as="p"
           className={clsx({
             'ds-phase-banner__content': true,
           })}
         >
           {children}
-        </p>
+        </Base>
       </Base>
     );
   }