@digigov/react-core 2.0.0-d0adc9fb → 2.0.0-d2ffc726

package/registry/index.js

@@ -1,10 +1,12 @@
 
 import * as _digigov_react_core from "@digigov/react-core";
 import * as _digigov_react_core_Accordion from "@digigov/react-core/Accordion";
+import * as _digigov_react_core_Accordion_index_web from "@digigov/react-core/Accordion/index.web";
 import * as _digigov_react_core_AccordionControls from "@digigov/react-core/AccordionControls";
+import * as _digigov_react_core_AccordionSection from "@digigov/react-core/AccordionSection";
+import * as _digigov_react_core_AccordionSection_index_web from "@digigov/react-core/AccordionSection/index.web";
 import * as _digigov_react_core_AccordionSectionContent from "@digigov/react-core/AccordionSectionContent";
 import * as _digigov_react_core_AccordionSectionSummary from "@digigov/react-core/AccordionSectionSummary";
-import * as _digigov_react_core_AccordionSection from "@digigov/react-core/AccordionSection";
 import * as _digigov_react_core_AccordionSectionSummaryHeading from "@digigov/react-core/AccordionSectionSummaryHeading";
 import * as _digigov_react_core_AdminAside from "@digigov/react-core/AdminAside";
 import * as _digigov_react_core_AdminContainer from "@digigov/react-core/AdminContainer";
@@ -17,14 +19,13 @@ import * as _digigov_react_core_Aside from "@digigov/react-core/Aside";
 import * as _digigov_react_core_AutoCompleteAssistiveHint from "@digigov/react-core/AutoCompleteAssistiveHint";
 import * as _digigov_react_core_AutoCompleteContainer from "@digigov/react-core/AutoCompleteContainer";
 import * as _digigov_react_core_AutoCompleteInputBase from "@digigov/react-core/AutoCompleteInputBase";
-import * as _digigov_react_core_AutoCompleteInputTypeahead from "@digigov/react-core/AutoCompleteInputTypeahead";
 import * as _digigov_react_core_AutoCompleteMultipleInput from "@digigov/react-core/AutoCompleteMultipleInput";
 import * as _digigov_react_core_AutoCompleteMultipleInputContainer from "@digigov/react-core/AutoCompleteMultipleInputContainer";
 import * as _digigov_react_core_AutoCompleteResultList from "@digigov/react-core/AutoCompleteResultList";
 import * as _digigov_react_core_AutoCompleteResultListItem from "@digigov/react-core/AutoCompleteResultListItem";
 import * as _digigov_react_core_AutoCompleteStatus from "@digigov/react-core/AutoCompleteStatus";
 import * as _digigov_react_core_AutoCompleteStatusContainer from "@digigov/react-core/AutoCompleteStatusContainer";
-import * as _digigov_react_core_BackLink from "@digigov/react-core/BackLink";
+import * as _digigov_react_core_BackLinkBase from "@digigov/react-core/BackLinkBase";
 import * as _digigov_react_core_BackToTopContainer from "@digigov/react-core/BackToTopContainer";
 import * as _digigov_react_core_BackToTopLimit from "@digigov/react-core/BackToTopLimit";
 import * as _digigov_react_core_BackToTopLink from "@digigov/react-core/BackToTopLink";
@@ -39,12 +40,12 @@ import * as _digigov_react_core_BottomInfoContainer from "@digigov/react-core/Bo
 import * as _digigov_react_core_BottomInfoContent from "@digigov/react-core/BottomInfoContent";
 import * as _digigov_react_core_Breadcrumbs from "@digigov/react-core/Breadcrumbs";
 import * as _digigov_react_core_BreadcrumbsList from "@digigov/react-core/BreadcrumbsList";
-import * as _digigov_react_core_BreadcrumbsListItem from "@digigov/react-core/BreadcrumbsListItem";
-import * as _digigov_react_core_BreadcrumbsListItemLink from "@digigov/react-core/BreadcrumbsListItemLink";
+import * as _digigov_react_core_BreadcrumbsListItemLinkBase from "@digigov/react-core/BreadcrumbsListItemLinkBase";
+import * as _digigov_react_core_BreadcrumbsListItemWrapper from "@digigov/react-core/BreadcrumbsListItemWrapper";
 import * as _digigov_react_core_Button from "@digigov/react-core/Button";
 import * as _digigov_react_core_ButtonGroup from "@digigov/react-core/ButtonGroup";
-import * as _digigov_react_core_ButtonLink from "@digigov/react-core/ButtonLink";
-import * as _digigov_react_core_CallToAction from "@digigov/react-core/CallToAction";
+import * as _digigov_react_core_ButtonLinkBase from "@digigov/react-core/ButtonLinkBase";
+import * as _digigov_react_core_CallToActionBase from "@digigov/react-core/CallToActionBase";
 import * as _digigov_react_core_Card from "@digigov/react-core/Card";
 import * as _digigov_react_core_CardAction from "@digigov/react-core/CardAction";
 import * as _digigov_react_core_CardContent from "@digigov/react-core/CardContent";
@@ -59,7 +60,7 @@ import * as _digigov_react_core_ChipContainer from "@digigov/react-core/ChipCont
 import * as _digigov_react_core_ChipHeading from "@digigov/react-core/ChipHeading";
 import * as _digigov_react_core_ChipKeyValue from "@digigov/react-core/ChipKeyValue";
 import * as _digigov_react_core_ChoiceDividerText from "@digigov/react-core/ChoiceDividerText";
-import * as _digigov_react_core_CircularProgress from "@digigov/react-core/CircularProgress";
+import * as _digigov_react_core_CircularProgressBase from "@digigov/react-core/CircularProgressBase";
 import * as _digigov_react_core_CloseButton from "@digigov/react-core/CloseButton";
 import * as _digigov_react_core_Code from "@digigov/react-core/Code";
 import * as _digigov_react_core_CodeBlockContainer from "@digigov/react-core/CodeBlockContainer";
@@ -105,24 +106,24 @@ import * as _digigov_react_core_FooterHeading from "@digigov/react-core/FooterHe
 import * as _digigov_react_core_FooterImage from "@digigov/react-core/FooterImage";
 import * as _digigov_react_core_FooterInfo from "@digigov/react-core/FooterInfo";
 import * as _digigov_react_core_FooterInfoSection from "@digigov/react-core/FooterInfoSection";
-import * as _digigov_react_core_FooterLink from "@digigov/react-core/FooterLink";
+import * as _digigov_react_core_FooterLinkBase from "@digigov/react-core/FooterLinkBase";
 import * as _digigov_react_core_FooterList from "@digigov/react-core/FooterList";
 import * as _digigov_react_core_FooterListItem from "@digigov/react-core/FooterListItem";
 import * as _digigov_react_core_FooterNavigation from "@digigov/react-core/FooterNavigation";
 import * as _digigov_react_core_FooterNavigationSection from "@digigov/react-core/FooterNavigationSection";
 import * as _digigov_react_core_Form from "@digigov/react-core/Form";
 import * as _digigov_react_core_FullPageBackground from "@digigov/react-core/FullPageBackground";
-import * as _digigov_react_core_GovGRLogo_govgr_logo_base64 from "@digigov/react-core/GovGRLogo/govgr-logo-base64";
-import * as _digigov_react_core_GovGRLogo_govgr_logo_blue_base64 from "@digigov/react-core/GovGRLogo/govgr-logo-blue-base64";
-import * as _digigov_react_core_GovGRLogo from "@digigov/react-core/GovGRLogo";
+import * as _digigov_react_core_GovGRLogoBase_govgr_logo_base64 from "@digigov/react-core/GovGRLogoBase/govgr-logo-base64";
+import * as _digigov_react_core_GovGRLogoBase_govgr_logo_blue_base64 from "@digigov/react-core/GovGRLogoBase/govgr-logo-blue-base64";
+import * as _digigov_react_core_GovGRLogoBase from "@digigov/react-core/GovGRLogoBase";
 import * as _digigov_react_core_Grid from "@digigov/react-core/Grid";
 import * as _digigov_react_core_Header from "@digigov/react-core/Header";
 import * as _digigov_react_core_HeaderContent from "@digigov/react-core/HeaderContent";
-import * as _digigov_react_core_HeaderLogo from "@digigov/react-core/HeaderLogo";
+import * as _digigov_react_core_HeaderLogoBase from "@digigov/react-core/HeaderLogoBase";
 import * as _digigov_react_core_HeaderNavMenuContent from "@digigov/react-core/HeaderNavMenuContent";
-import * as _digigov_react_core_HeaderSecondaryLogo from "@digigov/react-core/HeaderSecondaryLogo";
+import * as _digigov_react_core_HeaderSecondaryLogoBase from "@digigov/react-core/HeaderSecondaryLogoBase";
 import * as _digigov_react_core_HeaderSection from "@digigov/react-core/HeaderSection";
-import * as _digigov_react_core_HeaderTitle from "@digigov/react-core/HeaderTitle";
+import * as _digigov_react_core_HeaderTitleBase from "@digigov/react-core/HeaderTitleBase";
 import * as _digigov_react_core_Heading from "@digigov/react-core/Heading";
 import * as _digigov_react_core_HeadingCaption from "@digigov/react-core/HeadingCaption";
 import * as _digigov_react_core_HellenicRepublicLogo from "@digigov/react-core/HellenicRepublicLogo";
@@ -160,12 +161,12 @@ import * as _digigov_react_core_ModalContent from "@digigov/react-core/ModalCont
 import * as _digigov_react_core_ModalHeading from "@digigov/react-core/ModalHeading";
 import * as _digigov_react_core_Nav from "@digigov/react-core/Nav";
 import * as _digigov_react_core_NavList from "@digigov/react-core/NavList";
-import * as _digigov_react_core_NavListItemAction from "@digigov/react-core/NavListItemAction";
+import * as _digigov_react_core_NavListItemActionBase from "@digigov/react-core/NavListItemActionBase";
 import * as _digigov_react_core_NavListItemActionContainer from "@digigov/react-core/NavListItemActionContainer";
 import * as _digigov_react_core_NavListItemActionContainer_index_web from "@digigov/react-core/NavListItemActionContainer/index.web";
 import * as _digigov_react_core_NavListItemBadge from "@digigov/react-core/NavListItemBadge";
 import * as _digigov_react_core_NavListItemButton from "@digigov/react-core/NavListItemButton";
-import * as _digigov_react_core_NavListItemLink from "@digigov/react-core/NavListItemLink";
+import * as _digigov_react_core_NavListItemLinkBase from "@digigov/react-core/NavListItemLinkBase";
 import * as _digigov_react_core_NavMenuContainer from "@digigov/react-core/NavMenuContainer";
 import * as _digigov_react_core_NavMenuContent from "@digigov/react-core/NavMenuContent";
 import * as _digigov_react_core_NavMenuContentListBase from "@digigov/react-core/NavMenuContentListBase";
@@ -283,10 +284,12 @@ function lazyImport(pkgImport) {
 export default {
   '@digigov/react-core': lazyImport(_digigov_react_core),
   '@digigov/react-core/Accordion': lazyImport(_digigov_react_core_Accordion),
+  '@digigov/react-core/Accordion/index.web': lazyImport(_digigov_react_core_Accordion_index_web),
   '@digigov/react-core/AccordionControls': lazyImport(_digigov_react_core_AccordionControls),
+  '@digigov/react-core/AccordionSection': lazyImport(_digigov_react_core_AccordionSection),
+  '@digigov/react-core/AccordionSection/index.web': lazyImport(_digigov_react_core_AccordionSection_index_web),
   '@digigov/react-core/AccordionSectionContent': lazyImport(_digigov_react_core_AccordionSectionContent),
   '@digigov/react-core/AccordionSectionSummary': lazyImport(_digigov_react_core_AccordionSectionSummary),
-  '@digigov/react-core/AccordionSection': lazyImport(_digigov_react_core_AccordionSection),
   '@digigov/react-core/AccordionSectionSummaryHeading': lazyImport(_digigov_react_core_AccordionSectionSummaryHeading),
   '@digigov/react-core/AdminAside': lazyImport(_digigov_react_core_AdminAside),
   '@digigov/react-core/AdminContainer': lazyImport(_digigov_react_core_AdminContainer),
@@ -299,14 +302,13 @@ export default {
   '@digigov/react-core/AutoCompleteAssistiveHint': lazyImport(_digigov_react_core_AutoCompleteAssistiveHint),
   '@digigov/react-core/AutoCompleteContainer': lazyImport(_digigov_react_core_AutoCompleteContainer),
   '@digigov/react-core/AutoCompleteInputBase': lazyImport(_digigov_react_core_AutoCompleteInputBase),
-  '@digigov/react-core/AutoCompleteInputTypeahead': lazyImport(_digigov_react_core_AutoCompleteInputTypeahead),
   '@digigov/react-core/AutoCompleteMultipleInput': lazyImport(_digigov_react_core_AutoCompleteMultipleInput),
   '@digigov/react-core/AutoCompleteMultipleInputContainer': lazyImport(_digigov_react_core_AutoCompleteMultipleInputContainer),
   '@digigov/react-core/AutoCompleteResultList': lazyImport(_digigov_react_core_AutoCompleteResultList),
   '@digigov/react-core/AutoCompleteResultListItem': lazyImport(_digigov_react_core_AutoCompleteResultListItem),
   '@digigov/react-core/AutoCompleteStatus': lazyImport(_digigov_react_core_AutoCompleteStatus),
   '@digigov/react-core/AutoCompleteStatusContainer': lazyImport(_digigov_react_core_AutoCompleteStatusContainer),
-  '@digigov/react-core/BackLink': lazyImport(_digigov_react_core_BackLink),
+  '@digigov/react-core/BackLinkBase': lazyImport(_digigov_react_core_BackLinkBase),
   '@digigov/react-core/BackToTopContainer': lazyImport(_digigov_react_core_BackToTopContainer),
   '@digigov/react-core/BackToTopLimit': lazyImport(_digigov_react_core_BackToTopLimit),
   '@digigov/react-core/BackToTopLink': lazyImport(_digigov_react_core_BackToTopLink),
@@ -321,12 +323,12 @@ export default {
   '@digigov/react-core/BottomInfoContent': lazyImport(_digigov_react_core_BottomInfoContent),
   '@digigov/react-core/Breadcrumbs': lazyImport(_digigov_react_core_Breadcrumbs),
   '@digigov/react-core/BreadcrumbsList': lazyImport(_digigov_react_core_BreadcrumbsList),
-  '@digigov/react-core/BreadcrumbsListItem': lazyImport(_digigov_react_core_BreadcrumbsListItem),
-  '@digigov/react-core/BreadcrumbsListItemLink': lazyImport(_digigov_react_core_BreadcrumbsListItemLink),
+  '@digigov/react-core/BreadcrumbsListItemLinkBase': lazyImport(_digigov_react_core_BreadcrumbsListItemLinkBase),
+  '@digigov/react-core/BreadcrumbsListItemWrapper': lazyImport(_digigov_react_core_BreadcrumbsListItemWrapper),
   '@digigov/react-core/Button': lazyImport(_digigov_react_core_Button),
   '@digigov/react-core/ButtonGroup': lazyImport(_digigov_react_core_ButtonGroup),
-  '@digigov/react-core/ButtonLink': lazyImport(_digigov_react_core_ButtonLink),
-  '@digigov/react-core/CallToAction': lazyImport(_digigov_react_core_CallToAction),
+  '@digigov/react-core/ButtonLinkBase': lazyImport(_digigov_react_core_ButtonLinkBase),
+  '@digigov/react-core/CallToActionBase': lazyImport(_digigov_react_core_CallToActionBase),
   '@digigov/react-core/Card': lazyImport(_digigov_react_core_Card),
   '@digigov/react-core/CardAction': lazyImport(_digigov_react_core_CardAction),
   '@digigov/react-core/CardContent': lazyImport(_digigov_react_core_CardContent),
@@ -341,7 +343,7 @@ export default {
   '@digigov/react-core/ChipHeading': lazyImport(_digigov_react_core_ChipHeading),
   '@digigov/react-core/ChipKeyValue': lazyImport(_digigov_react_core_ChipKeyValue),
   '@digigov/react-core/ChoiceDividerText': lazyImport(_digigov_react_core_ChoiceDividerText),
-  '@digigov/react-core/CircularProgress': lazyImport(_digigov_react_core_CircularProgress),
+  '@digigov/react-core/CircularProgressBase': lazyImport(_digigov_react_core_CircularProgressBase),
   '@digigov/react-core/CloseButton': lazyImport(_digigov_react_core_CloseButton),
   '@digigov/react-core/Code': lazyImport(_digigov_react_core_Code),
   '@digigov/react-core/CodeBlockContainer': lazyImport(_digigov_react_core_CodeBlockContainer),
@@ -387,24 +389,24 @@ export default {
   '@digigov/react-core/FooterImage': lazyImport(_digigov_react_core_FooterImage),
   '@digigov/react-core/FooterInfo': lazyImport(_digigov_react_core_FooterInfo),
   '@digigov/react-core/FooterInfoSection': lazyImport(_digigov_react_core_FooterInfoSection),
-  '@digigov/react-core/FooterLink': lazyImport(_digigov_react_core_FooterLink),
+  '@digigov/react-core/FooterLinkBase': lazyImport(_digigov_react_core_FooterLinkBase),
   '@digigov/react-core/FooterList': lazyImport(_digigov_react_core_FooterList),
   '@digigov/react-core/FooterListItem': lazyImport(_digigov_react_core_FooterListItem),
   '@digigov/react-core/FooterNavigation': lazyImport(_digigov_react_core_FooterNavigation),
   '@digigov/react-core/FooterNavigationSection': lazyImport(_digigov_react_core_FooterNavigationSection),
   '@digigov/react-core/Form': lazyImport(_digigov_react_core_Form),
   '@digigov/react-core/FullPageBackground': lazyImport(_digigov_react_core_FullPageBackground),
-  '@digigov/react-core/GovGRLogo/govgr-logo-base64': lazyImport(_digigov_react_core_GovGRLogo_govgr_logo_base64),
-  '@digigov/react-core/GovGRLogo/govgr-logo-blue-base64': lazyImport(_digigov_react_core_GovGRLogo_govgr_logo_blue_base64),
-  '@digigov/react-core/GovGRLogo': lazyImport(_digigov_react_core_GovGRLogo),
+  '@digigov/react-core/GovGRLogoBase/govgr-logo-base64': lazyImport(_digigov_react_core_GovGRLogoBase_govgr_logo_base64),
+  '@digigov/react-core/GovGRLogoBase/govgr-logo-blue-base64': lazyImport(_digigov_react_core_GovGRLogoBase_govgr_logo_blue_base64),
+  '@digigov/react-core/GovGRLogoBase': lazyImport(_digigov_react_core_GovGRLogoBase),
   '@digigov/react-core/Grid': lazyImport(_digigov_react_core_Grid),
   '@digigov/react-core/Header': lazyImport(_digigov_react_core_Header),
   '@digigov/react-core/HeaderContent': lazyImport(_digigov_react_core_HeaderContent),
-  '@digigov/react-core/HeaderLogo': lazyImport(_digigov_react_core_HeaderLogo),
+  '@digigov/react-core/HeaderLogoBase': lazyImport(_digigov_react_core_HeaderLogoBase),
   '@digigov/react-core/HeaderNavMenuContent': lazyImport(_digigov_react_core_HeaderNavMenuContent),
-  '@digigov/react-core/HeaderSecondaryLogo': lazyImport(_digigov_react_core_HeaderSecondaryLogo),
+  '@digigov/react-core/HeaderSecondaryLogoBase': lazyImport(_digigov_react_core_HeaderSecondaryLogoBase),
   '@digigov/react-core/HeaderSection': lazyImport(_digigov_react_core_HeaderSection),
-  '@digigov/react-core/HeaderTitle': lazyImport(_digigov_react_core_HeaderTitle),
+  '@digigov/react-core/HeaderTitleBase': lazyImport(_digigov_react_core_HeaderTitleBase),
   '@digigov/react-core/Heading': lazyImport(_digigov_react_core_Heading),
   '@digigov/react-core/HeadingCaption': lazyImport(_digigov_react_core_HeadingCaption),
   '@digigov/react-core/HellenicRepublicLogo': lazyImport(_digigov_react_core_HellenicRepublicLogo),
@@ -442,12 +444,12 @@ export default {
   '@digigov/react-core/ModalHeading': lazyImport(_digigov_react_core_ModalHeading),
   '@digigov/react-core/Nav': lazyImport(_digigov_react_core_Nav),
   '@digigov/react-core/NavList': lazyImport(_digigov_react_core_NavList),
-  '@digigov/react-core/NavListItemAction': lazyImport(_digigov_react_core_NavListItemAction),
+  '@digigov/react-core/NavListItemActionBase': lazyImport(_digigov_react_core_NavListItemActionBase),
   '@digigov/react-core/NavListItemActionContainer': lazyImport(_digigov_react_core_NavListItemActionContainer),
   '@digigov/react-core/NavListItemActionContainer/index.web': lazyImport(_digigov_react_core_NavListItemActionContainer_index_web),
   '@digigov/react-core/NavListItemBadge': lazyImport(_digigov_react_core_NavListItemBadge),
   '@digigov/react-core/NavListItemButton': lazyImport(_digigov_react_core_NavListItemButton),
-  '@digigov/react-core/NavListItemLink': lazyImport(_digigov_react_core_NavListItemLink),
+  '@digigov/react-core/NavListItemLinkBase': lazyImport(_digigov_react_core_NavListItemLinkBase),
   '@digigov/react-core/NavMenuContainer': lazyImport(_digigov_react_core_NavMenuContainer),
   '@digigov/react-core/NavMenuContent': lazyImport(_digigov_react_core_NavMenuContent),
   '@digigov/react-core/NavMenuContentListBase': lazyImport(_digigov_react_core_NavMenuContentListBase),

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

@@ -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/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/BannerContainer/__snapshots__/index.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`renders the BannerContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-cookie-banner"
+      class="ds-banner-container"
     >
       hello
     </div>

package/src/BannerContainer/index.tsx

@@ -13,7 +13,7 @@ export const BannerContainer = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'ds-cookie-banner': true,
+        'ds-banner-container': true,
       })}
       {...props}
     >