@digigov/ui 2.0.0-7d9a8d86 → 2.0.0-834daea4

package/src/navigation/Tabs/doc.mdx

@@ -0,0 +1,47 @@
+---
+id: tabs
+title: Tabs
+---
+
+import PhaseBanner, { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
+
+# Tabs
+
+## How to use
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/Default.tsx" />
+
+### With dense style
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/Dense.tsx" />
+
+### Using Accordion
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+
+### Auto
+
+This is an implementation of the Tabs collection, encapsulated within a `TabsContext` provider, designed to facilitate and manage Tabs functionality effectively.
+
+<PhaseBanner>
+    <PhaseBannerTag>EXPERIMENTAL</PhaseBannerTag>
+</PhaseBanner>
+
+<code src="@digigov/ui/navigation/Tabs/__stories__/UsingAccordion.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Tabs
+implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/) section.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  ["Tabs",
+  "TabsHeading",
+  "TabsList",
+  "TabsListItem",
+  "TabsPanel",]} /> 
+

package/src/navigation/Tabs/hooks.ts

@@ -1,3 +1,4 @@
+import { useScreenSize } from '@digigov/ui/utils/hooks/useScreen';
 import React, { useState, useRef, useCallback } from 'react';
 
 export type TabId = string | number | null;
@@ -40,6 +41,7 @@ export const useTabs = ({
   const tabsRef = useRef<Map<TabId, React.RefObject<HTMLAnchorElement>>>(
     new Map()
   );
+  const { screenSize } = useScreenSize();
 
   const open = useCallback((id: TabId) => {
     setCurrentOpen(id);
@@ -77,7 +79,12 @@ export const useTabs = ({
         'aria-controls': `panel-${id}`,
         tabIndex: currentOpen === id ? 0 : -1,
         onClick: (e) => {
-          e.preventDefault();
+
+          // If the screen is mobile, we don't want to prevent the default behavior of the anchor tag,
+          // which is to navigate to the href.
+          if (screenSize != 'xs' && screenSize !='sm') {
+            e.preventDefault();
+          }        
           open(id);
         },
         onKeyDown: (e: React.KeyboardEvent) => {

package/src/navigation/Tabs/index.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Auto } from '@digigov/ui/navigation/Tabs/__stories__/Auto';
+import { Default } from '@digigov/ui/navigation/Tabs/__stories__/Default';
+import { Dense } from '@digigov/ui/navigation/Tabs/__stories__/Dense';
+import { UsingAccordion } from '@digigov/ui/navigation/Tabs/__stories__/UsingAccordion';
+
+test('renders the All Tabs variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Auto">
+      <Auto />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Dense">
+      <Dense />
+    </TestVariant>
+    <TestVariant title="UsingAccordion">
+      <UsingAccordion />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/Tabs/index.tsx

@@ -6,6 +6,5 @@ export * from '@digigov/react-core/TabsList';
 export * from '@digigov/react-core/TabsListItemBase';
 export * from '@digigov/react-core/TabsPanelBase';
 export * from '@digigov/react-core/TabsHeading';
-export * from '@digigov/ui/navigation/Tabs/auto';
 
 export default Tabs;

package/src/navigation/Tabs/interaction.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { Default } from '@digigov/ui/navigation/Tabs/__stories__/Default';
+
+test('renders the Default Click second tab', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>div>ul>li:nth-child(2)>a").hover();
+ await page.locator("#root>div>ul>li:nth-child(2)>a").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/registry.js

@@ -1,12 +1,4 @@
 
-import * as _digigov_ui_api_APIErrors from '@digigov/ui/api/APIErrors';
-import * as _digigov_ui_api_APIProvider from '@digigov/ui/api/APIProvider';
-import * as _digigov_ui_api_fetchAPI from '@digigov/ui/api/fetchAPI';
-import * as _digigov_ui_api from '@digigov/ui/api';
-import * as _digigov_ui_api_useResource from '@digigov/ui/api/useResource';
-import * as _digigov_ui_api_useResourceAction from '@digigov/ui/api/useResourceAction';
-import * as _digigov_ui_api_useResourceQuery from '@digigov/ui/api/useResourceQuery';
-import * as _digigov_ui_api_utils from '@digigov/ui/api/utils';
 import * as _digigov_ui_app_App from '@digigov/ui/app/App';
 import * as _digigov_ui_app_BannerContainer from '@digigov/ui/app/BannerContainer';
 import * as _digigov_ui_app_BottomInfo from '@digigov/ui/app/BottomInfo';
@@ -28,10 +20,12 @@ import * as _digigov_ui_app_hooks_useTheme from '@digigov/ui/app/hooks/useTheme'
 import * as _digigov_ui_app_hooks_useVariantVars from '@digigov/ui/app/hooks/useVariantVars';
 import * as _digigov_ui_app from '@digigov/ui/app';
 import * as _digigov_ui_app_Loader from '@digigov/ui/app/Loader';
+import * as _digigov_ui_app_Loader_index_web from '@digigov/ui/app/Loader/index.web';
 import * as _digigov_ui_app_Masthead from '@digigov/ui/app/Masthead';
 import * as _digigov_ui_app_Modal_auto from '@digigov/ui/app/Modal/auto';
 import * as _digigov_ui_app_Modal_hooks from '@digigov/ui/app/Modal/hooks';
 import * as _digigov_ui_app_Modal from '@digigov/ui/app/Modal';
+import * as _digigov_ui_app_Modal_index_web from '@digigov/ui/app/Modal/index.web';
 import * as _digigov_ui_app_NotFound from '@digigov/ui/app/NotFound';
 import * as _digigov_ui_app_OutdatedBrowserBanner_hooks_evaluateBrowserVersion from '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion';
 import * as _digigov_ui_app_OutdatedBrowserBanner_hooks_useOutdatedBrowserCheck from '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck';
@@ -44,6 +38,7 @@ import * as _digigov_ui_app_QrCodeViewer from '@digigov/ui/app/QrCodeViewer';
 import * as _digigov_ui_app_QrCodeViewer_qrcodegen from '@digigov/ui/app/QrCodeViewer/qrcodegen';
 import * as _digigov_ui_app_QrCodeViewer_types from '@digigov/ui/app/QrCodeViewer/types';
 import * as _digigov_ui_app_QrCodeViewer_utils from '@digigov/ui/app/QrCodeViewer/utils';
+import * as _digigov_ui_app_Skeleton from '@digigov/ui/app/Skeleton';
 import * as _digigov_ui_app_ThemeOptions from '@digigov/ui/app/ThemeOptions';
 import * as _digigov_ui_content_Accordion_auto from '@digigov/ui/content/Accordion/auto';
 import * as _digigov_ui_content_Accordion_hooks from '@digigov/ui/content/Accordion/hooks';
@@ -138,7 +133,11 @@ import * as _digigov_ui_layouts_SectionBreak from '@digigov/ui/layouts/SectionBr
 import * as _digigov_ui_layouts_Stack from '@digigov/ui/layouts/Stack';
 import * as _digigov_ui_navigation_BackLink from '@digigov/ui/navigation/BackLink';
 import * as _digigov_ui_navigation_BackToTopLink from '@digigov/ui/navigation/BackToTopLink';
+import * as _digigov_ui_navigation_Breadcrumbs_auto from '@digigov/ui/navigation/Breadcrumbs/auto';
+import * as _digigov_ui_navigation_Breadcrumbs_hooks from '@digigov/ui/navigation/Breadcrumbs/hooks';
 import * as _digigov_ui_navigation_Breadcrumbs from '@digigov/ui/navigation/Breadcrumbs';
+import * as _digigov_ui_navigation_Breadcrumbs_slug from '@digigov/ui/navigation/Breadcrumbs/slug';
+import * as _digigov_ui_navigation_Breadcrumbs_utils from '@digigov/ui/navigation/Breadcrumbs/utils';
 import * as _digigov_ui_navigation_Drawer_auto from '@digigov/ui/navigation/Drawer/auto';
 import * as _digigov_ui_navigation_Drawer_hooks from '@digigov/ui/navigation/Drawer/hooks';
 import * as _digigov_ui_navigation_Drawer from '@digigov/ui/navigation/Drawer';
@@ -156,6 +155,7 @@ import * as _digigov_ui_navigation_NavList_types from '@digigov/ui/navigation/Na
 import * as _digigov_ui_navigation_Pagination_auto from '@digigov/ui/navigation/Pagination/auto';
 import * as _digigov_ui_navigation_Pagination_hooks from '@digigov/ui/navigation/Pagination/hooks';
 import * as _digigov_ui_navigation_Pagination from '@digigov/ui/navigation/Pagination';
+import * as _digigov_ui_navigation_Pagination_Pagination from '@digigov/ui/navigation/Pagination/Pagination';
 import * as _digigov_ui_navigation_SkipLink from '@digigov/ui/navigation/SkipLink';
 import * as _digigov_ui_navigation_Tabs_auto from '@digigov/ui/navigation/Tabs/auto';
 import * as _digigov_ui_navigation_Tabs_hooks from '@digigov/ui/navigation/Tabs/hooks';
@@ -178,6 +178,7 @@ import * as _digigov_ui_utils_hooks_useSearch from '@digigov/ui/utils/hooks/useS
 import * as _digigov_ui_utils_hooks_useTogglableTab from '@digigov/ui/utils/hooks/useTogglableTab';
 import * as _digigov_ui_utils from '@digigov/ui/utils';
 import * as _digigov_ui_utils_SvgIcon from '@digigov/ui/utils/SvgIcon';
+import * as _digigov_ui_utils_TestVariant from '@digigov/ui/utils/TestVariant';
 import * as _digigov_ui_utils_Typography from '@digigov/ui/utils/Typography';
 import * as _digigov_ui_utils_VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 import * as _digigov_ui_utils_withDeprecation from '@digigov/ui/utils/withDeprecation'
@@ -201,14 +202,6 @@ function lazyImport(pkgImport) {
   )
 }
 export default {
-  '@digigov/ui/api/APIErrors': lazyImport(_digigov_ui_api_APIErrors),
-  '@digigov/ui/api/APIProvider': lazyImport(_digigov_ui_api_APIProvider),
-  '@digigov/ui/api/fetchAPI': lazyImport(_digigov_ui_api_fetchAPI),
-  '@digigov/ui/api': lazyImport(_digigov_ui_api),
-  '@digigov/ui/api/useResource': lazyImport(_digigov_ui_api_useResource),
-  '@digigov/ui/api/useResourceAction': lazyImport(_digigov_ui_api_useResourceAction),
-  '@digigov/ui/api/useResourceQuery': lazyImport(_digigov_ui_api_useResourceQuery),
-  '@digigov/ui/api/utils': lazyImport(_digigov_ui_api_utils),
   '@digigov/ui/app/App': lazyImport(_digigov_ui_app_App),
   '@digigov/ui/app/BannerContainer': lazyImport(_digigov_ui_app_BannerContainer),
   '@digigov/ui/app/BottomInfo': lazyImport(_digigov_ui_app_BottomInfo),
@@ -230,10 +223,12 @@ export default {
   '@digigov/ui/app/hooks/useVariantVars': lazyImport(_digigov_ui_app_hooks_useVariantVars),
   '@digigov/ui/app': lazyImport(_digigov_ui_app),
   '@digigov/ui/app/Loader': lazyImport(_digigov_ui_app_Loader),
+  '@digigov/ui/app/Loader/index.web': lazyImport(_digigov_ui_app_Loader_index_web),
   '@digigov/ui/app/Masthead': lazyImport(_digigov_ui_app_Masthead),
   '@digigov/ui/app/Modal/auto': lazyImport(_digigov_ui_app_Modal_auto),
   '@digigov/ui/app/Modal/hooks': lazyImport(_digigov_ui_app_Modal_hooks),
   '@digigov/ui/app/Modal': lazyImport(_digigov_ui_app_Modal),
+  '@digigov/ui/app/Modal/index.web': lazyImport(_digigov_ui_app_Modal_index_web),
   '@digigov/ui/app/NotFound': lazyImport(_digigov_ui_app_NotFound),
   '@digigov/ui/app/OutdatedBrowserBanner/hooks/evaluateBrowserVersion': lazyImport(_digigov_ui_app_OutdatedBrowserBanner_hooks_evaluateBrowserVersion),
   '@digigov/ui/app/OutdatedBrowserBanner/hooks/useOutdatedBrowserCheck': lazyImport(_digigov_ui_app_OutdatedBrowserBanner_hooks_useOutdatedBrowserCheck),
@@ -246,6 +241,7 @@ export default {
   '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(_digigov_ui_app_QrCodeViewer_qrcodegen),
   '@digigov/ui/app/QrCodeViewer/types': lazyImport(_digigov_ui_app_QrCodeViewer_types),
   '@digigov/ui/app/QrCodeViewer/utils': lazyImport(_digigov_ui_app_QrCodeViewer_utils),
+  '@digigov/ui/app/Skeleton': lazyImport(_digigov_ui_app_Skeleton),
   '@digigov/ui/app/ThemeOptions': lazyImport(_digigov_ui_app_ThemeOptions),
   '@digigov/ui/content/Accordion/auto': lazyImport(_digigov_ui_content_Accordion_auto),
   '@digigov/ui/content/Accordion/hooks': lazyImport(_digigov_ui_content_Accordion_hooks),
@@ -340,7 +336,11 @@ export default {
   '@digigov/ui/layouts/Stack': lazyImport(_digigov_ui_layouts_Stack),
   '@digigov/ui/navigation/BackLink': lazyImport(_digigov_ui_navigation_BackLink),
   '@digigov/ui/navigation/BackToTopLink': lazyImport(_digigov_ui_navigation_BackToTopLink),
+  '@digigov/ui/navigation/Breadcrumbs/auto': lazyImport(_digigov_ui_navigation_Breadcrumbs_auto),
+  '@digigov/ui/navigation/Breadcrumbs/hooks': lazyImport(_digigov_ui_navigation_Breadcrumbs_hooks),
   '@digigov/ui/navigation/Breadcrumbs': lazyImport(_digigov_ui_navigation_Breadcrumbs),
+  '@digigov/ui/navigation/Breadcrumbs/slug': lazyImport(_digigov_ui_navigation_Breadcrumbs_slug),
+  '@digigov/ui/navigation/Breadcrumbs/utils': lazyImport(_digigov_ui_navigation_Breadcrumbs_utils),
   '@digigov/ui/navigation/Drawer/auto': lazyImport(_digigov_ui_navigation_Drawer_auto),
   '@digigov/ui/navigation/Drawer/hooks': lazyImport(_digigov_ui_navigation_Drawer_hooks),
   '@digigov/ui/navigation/Drawer': lazyImport(_digigov_ui_navigation_Drawer),
@@ -358,6 +358,7 @@ export default {
   '@digigov/ui/navigation/Pagination/auto': lazyImport(_digigov_ui_navigation_Pagination_auto),
   '@digigov/ui/navigation/Pagination/hooks': lazyImport(_digigov_ui_navigation_Pagination_hooks),
   '@digigov/ui/navigation/Pagination': lazyImport(_digigov_ui_navigation_Pagination),
+  '@digigov/ui/navigation/Pagination/Pagination': lazyImport(_digigov_ui_navigation_Pagination_Pagination),
   '@digigov/ui/navigation/SkipLink': lazyImport(_digigov_ui_navigation_SkipLink),
   '@digigov/ui/navigation/Tabs/auto': lazyImport(_digigov_ui_navigation_Tabs_auto),
   '@digigov/ui/navigation/Tabs/hooks': lazyImport(_digigov_ui_navigation_Tabs_hooks),
@@ -380,6 +381,7 @@ export default {
   '@digigov/ui/utils/hooks/useTogglableTab': lazyImport(_digigov_ui_utils_hooks_useTogglableTab),
   '@digigov/ui/utils': lazyImport(_digigov_ui_utils),
   '@digigov/ui/utils/SvgIcon': lazyImport(_digigov_ui_utils_SvgIcon),
+  '@digigov/ui/utils/TestVariant': lazyImport(_digigov_ui_utils_TestVariant),
   '@digigov/ui/utils/Typography': lazyImport(_digigov_ui_utils_Typography),
   '@digigov/ui/utils/VisuallyHidden': lazyImport(_digigov_ui_utils_VisuallyHidden),
   '@digigov/ui/utils/withDeprecation': lazyImport(_digigov_ui_utils_withDeprecation)
@@ -395,12 +397,15 @@ import * as _digigov_ui_app_Panel_Panel_stories from '@digigov/ui/app/Panel/Pane
 import * as _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories from '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories';
 import * as _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories from '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories';
 import * as _digigov_ui_app_QrCodeViewer_QRCode_stories from '@digigov/ui/app/QrCodeViewer/QRCode.stories';
+import * as _digigov_ui_app_Skeleton_Skeleton_stories from '@digigov/ui/app/Skeleton/Skeleton.stories';
 import * as _digigov_ui_content_Accordion_Accordion_stories from '@digigov/ui/content/Accordion/Accordion.stories';
 import * as _digigov_ui_content_Blockquote_Blockquote_stories from '@digigov/ui/content/Blockquote/Blockquote.stories';
 import * as _digigov_ui_content_Card_Card_stories from '@digigov/ui/content/Card/Card.stories';
 import * as _digigov_ui_content_Chip_Chip_stories from '@digigov/ui/content/Chip/Chip.stories';
 import * as _digigov_ui_content_Details_Details_stories from '@digigov/ui/content/Details/Details.stories';
 import * as _digigov_ui_content_List_List_stories from '@digigov/ui/content/List/List.stories';
+import * as _digigov_ui_content_Markdown_Markdown_stories from '@digigov/ui/content/Markdown/Markdown.stories';
+import * as _digigov_ui_content_SafeHTML_SafeHTML_stories from '@digigov/ui/content/SafeHTML/SafeHTML.stories';
 import * as _digigov_ui_content_StepNav_StepNav_stories from '@digigov/ui/content/StepNav/StepNav.stories';
 import * as _digigov_ui_content_SummaryList_SummaryList_stories from '@digigov/ui/content/SummaryList/SummaryList.stories';
 import * as _digigov_ui_content_Table_Table_stories from '@digigov/ui/content/Table/Table.stories';
@@ -418,6 +423,7 @@ import * as _digigov_ui_form_DateInputContainer_DateInputContainer_stories from
 import * as _digigov_ui_form_ErrorMessage_ErrorMessage_stories from '@digigov/ui/form/ErrorMessage/ErrorMessage.stories';
 import * as _digigov_ui_form_FileUpload_FileUpload_stories from '@digigov/ui/form/FileUpload/FileUpload.stories';
 import * as _digigov_ui_form_RadioContainer_RadioContainer_stories from '@digigov/ui/form/RadioContainer/RadioContainer.stories';
+import * as _digigov_ui_form_SearchContainer_SearchContainer_stories from '@digigov/ui/form/SearchContainer/SearchContainer.stories';
 import * as _digigov_ui_form_SelectContainer_SelectContainer_stories from '@digigov/ui/form/SelectContainer/SelectContainer.stories';
 import * as _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories from '@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories';
 import * as _digigov_ui_form_TextArea_TextArea_stories from '@digigov/ui/form/TextArea/TextArea.stories';
@@ -436,6 +442,7 @@ import * as _digigov_ui_navigation_NavList_NavList_stories from '@digigov/ui/nav
 import * as _digigov_ui_navigation_Pagination_Pagination_stories from '@digigov/ui/navigation/Pagination/Pagination.stories';
 import * as _digigov_ui_navigation_SkipLink_SkipLink_stories from '@digigov/ui/navigation/SkipLink/SkipLink.stories';
 import * as _digigov_ui_navigation_Tabs_Tabs_stories from '@digigov/ui/navigation/Tabs/Tabs.stories';
+import * as _digigov_ui_typography_CodeBlock_CodeBlock_stories from '@digigov/ui/typography/CodeBlock/CodeBlock.stories';
 import * as _digigov_ui_typography_Heading_Heading_stories from '@digigov/ui/typography/Heading/Heading.stories';
 import * as _digigov_ui_typography_HeadingCaption_HeadingCaption_stories from '@digigov/ui/typography/HeadingCaption/HeadingCaption.stories';
 import * as _digigov_ui_typography_Hint_Hint_stories from '@digigov/ui/typography/Hint/Hint.stories';
@@ -455,12 +462,15 @@ import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digig
   '@digigov/ui/app/PhaseBannerHeader/PhaseBannerHeader.stories': _digigov_ui_app_PhaseBannerHeader_PhaseBannerHeader_stories,
   '@digigov/ui/app/QrCodeScanner/QrCodeScanner.stories': _digigov_ui_app_QrCodeScanner_QrCodeScanner_stories,
   '@digigov/ui/app/QrCodeViewer/QRCode.stories': _digigov_ui_app_QrCodeViewer_QRCode_stories,
+  '@digigov/ui/app/Skeleton/Skeleton.stories': _digigov_ui_app_Skeleton_Skeleton_stories,
   '@digigov/ui/content/Accordion/Accordion.stories': _digigov_ui_content_Accordion_Accordion_stories,
   '@digigov/ui/content/Blockquote/Blockquote.stories': _digigov_ui_content_Blockquote_Blockquote_stories,
   '@digigov/ui/content/Card/Card.stories': _digigov_ui_content_Card_Card_stories,
   '@digigov/ui/content/Chip/Chip.stories': _digigov_ui_content_Chip_Chip_stories,
   '@digigov/ui/content/Details/Details.stories': _digigov_ui_content_Details_Details_stories,
   '@digigov/ui/content/List/List.stories': _digigov_ui_content_List_List_stories,
+  '@digigov/ui/content/Markdown/Markdown.stories': _digigov_ui_content_Markdown_Markdown_stories,
+  '@digigov/ui/content/SafeHTML/SafeHTML.stories': _digigov_ui_content_SafeHTML_SafeHTML_stories,
   '@digigov/ui/content/StepNav/StepNav.stories': _digigov_ui_content_StepNav_StepNav_stories,
   '@digigov/ui/content/SummaryList/SummaryList.stories': _digigov_ui_content_SummaryList_SummaryList_stories,
   '@digigov/ui/content/Table/Table.stories': _digigov_ui_content_Table_Table_stories,
@@ -478,6 +488,7 @@ import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digig
   '@digigov/ui/form/ErrorMessage/ErrorMessage.stories': _digigov_ui_form_ErrorMessage_ErrorMessage_stories,
   '@digigov/ui/form/FileUpload/FileUpload.stories': _digigov_ui_form_FileUpload_FileUpload_stories,
   '@digigov/ui/form/RadioContainer/RadioContainer.stories': _digigov_ui_form_RadioContainer_RadioContainer_stories,
+  '@digigov/ui/form/SearchContainer/SearchContainer.stories': _digigov_ui_form_SearchContainer_SearchContainer_stories,
   '@digigov/ui/form/SelectContainer/SelectContainer.stories': _digigov_ui_form_SelectContainer_SelectContainer_stories,
   '@digigov/ui/form/SingleCharacterInputs/SingleCharacterInput.stories': _digigov_ui_form_SingleCharacterInputs_SingleCharacterInput_stories,
   '@digigov/ui/form/TextArea/TextArea.stories': _digigov_ui_form_TextArea_TextArea_stories,
@@ -496,6 +507,7 @@ import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digig
   '@digigov/ui/navigation/Pagination/Pagination.stories': _digigov_ui_navigation_Pagination_Pagination_stories,
   '@digigov/ui/navigation/SkipLink/SkipLink.stories': _digigov_ui_navigation_SkipLink_SkipLink_stories,
   '@digigov/ui/navigation/Tabs/Tabs.stories': _digigov_ui_navigation_Tabs_Tabs_stories,
+  '@digigov/ui/typography/CodeBlock/CodeBlock.stories': _digigov_ui_typography_CodeBlock_CodeBlock_stories,
   '@digigov/ui/typography/Heading/Heading.stories': _digigov_ui_typography_Heading_Heading_stories,
   '@digigov/ui/typography/HeadingCaption/HeadingCaption.stories': _digigov_ui_typography_HeadingCaption_HeadingCaption_stories,
   '@digigov/ui/typography/Hint/Hint.stories': _digigov_ui_typography_Hint_Hint_stories,

package/src/typography/CodeBlock/CodeBlock.stories.js

@@ -0,0 +1,10 @@
+import CodeBlock from '@digigov/ui/typography/CodeBlock';
+export default {
+  title: 'Digigov UI/typography/CodeBlock',
+  component: CodeBlock,
+  displayName: 'CodeBlock',
+};
+export { Default } from '@digigov/ui/typography/CodeBlock/__stories__/Default';
+export { Highlighted } from '@digigov/ui/typography/CodeBlock/__stories__/Highlighted';
+export { WithCopyToClipboard } from '@digigov/ui/typography/CodeBlock/__stories__/WithCopyToClipboard';
+export { WithPhaseBanner } from '@digigov/ui/typography/CodeBlock/__stories__/WithPhaseBanner';

package/src/typography/CodeBlock/__stories__/Default.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import CodeBlock from '@digigov/ui/typography/CodeBlock';
+
+const bashExample = `{
+  "random": random(1, 100),
+  "random float": randomFloat(1, 100, 3),
+  "bool": randomBool(),
+  "date": date('Y-m-d', '1980-01-01', '2000-01-15'),
+  "regEx": regex(/hello+ (world|to you)/),
+  "enum": choice('json', 'generator', 'online'),
+  "firstname": firstname(),
+  "lastname": lastname(),
+  "city": city(),
+  "country": country(),
+  "countryCode": countryCode()
+}`;
+
+export const Default = () => {
+  return <CodeBlock>{bashExample}</CodeBlock>;
+};
+
+export default Default;

package/src/typography/CodeBlock/__stories__/Highlighted.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import CodeBlock from '@digigov/ui/typography/CodeBlock';
+
+const bashExample = `{
+  "random": random(1, 100),
+  "random float": randomFloat(1, 100, 3),
+  "bool": randomBool(),
+  "date": date('Y-m-d', '1980-01-01', '2000-01-15'),
+  "regEx": regex(/hello+ (world|to you)/),
+  "enum": choice('json', 'generator', 'online'),
+  "firstname": firstname(),
+  "lastname": lastname(),
+  "city": city(),
+  "country": country(),
+  "countryCode": countryCode()
+}`;
+
+export const Highlighted = () => {
+  return (
+    <CodeBlock language="bash" highlighted>
+      {bashExample}
+    </CodeBlock>
+  );
+};
+
+export default Highlighted;

package/src/typography/CodeBlock/__stories__/WithCopyToClipboard.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import CodeBlock from '@digigov/ui/typography/CodeBlock';
+
+const bashExample = `{
+  "random": random(1, 100),
+  "random float": randomFloat(1, 100, 3),
+  "bool": randomBool(),
+  "date": date('Y-m-d', '1980-01-01', '2000-01-15'),
+  "regEx": regex(/hello+ (world|to you)/),
+  "enum": choice('json', 'generator', 'online'),
+  "firstname": firstname(),
+  "lastname": lastname(),
+  "city": city(),
+  "country": country(),
+  "countryCode": countryCode()
+}`;
+
+export const WithCopyToClipboard = () => {
+  return (
+    <CodeBlock highlighted language="bash" copyToClipboard>
+      {bashExample}
+    </CodeBlock>
+  );
+};
+
+export default WithCopyToClipboard;

package/src/typography/CodeBlock/__stories__/WithPhaseBanner.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import CodeBlock from '@digigov/ui/typography/CodeBlock';
+
+const bashExample = `{
+  "random": random(1, 100),
+  "random float": randomFloat(1, 100, 3),
+  "bool": randomBool(),
+  "date": date('Y-m-d', '1980-01-01', '2000-01-15'),
+  "regEx": regex(/hello+ (world|to you)/),
+  "enum": choice('json', 'generator', 'online'),
+  "firstname": firstname(),
+  "lastname": lastname(),
+  "city": city(),
+  "country": country(),
+  "countryCode": countryCode()
+}`;
+
+export const WithPhaseBanner = () => {
+  return (
+    <CodeBlock
+      highlighted
+      language="bash"
+      copyToClipboard
+      phaseBannerTagName="json"
+    >
+      {bashExample}
+    </CodeBlock>
+  );
+};
+
+export default WithPhaseBanner;

package/src/typography/CodeBlock/doc.mdx

@@ -0,0 +1,30 @@
+---
+id: code-block
+title: CodeBlock
+---
+
+# CodeBlock
+
+Use the CodeBlock component to display code.
+
+## How to use
+
+<code src="@digigov/ui/typography/CodeBlock/__stories__/Default.tsx" />
+
+### Highlighted
+
+<code src="@digigov/ui/typography/CodeBlock/__stories__/Highlighted.tsx" />
+
+### With copy to clipboard
+
+<code src="@digigov/ui/typography/CodeBlock/__stories__/WithCopyToClipboard.tsx" />
+
+### With phase banner
+
+<code src="@digigov/ui/typography/CodeBlock/__stories__/WithPhaseBanner.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["CodeBlock"]} /> 

package/src/typography/CodeBlock/index.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import TestVariant from '@digigov/ui/utils/TestVariant'
+import { Default } from '@digigov/ui/typography/CodeBlock/__stories__/Default';
+import { Highlighted } from '@digigov/ui/typography/CodeBlock/__stories__/Highlighted';
+import { WithCopyToClipboard } from '@digigov/ui/typography/CodeBlock/__stories__/WithCopyToClipboard';
+import { WithPhaseBanner } from '@digigov/ui/typography/CodeBlock/__stories__/WithPhaseBanner';
+
+test('renders the All CodeBlock variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="Highlighted">
+      <Highlighted />
+    </TestVariant>
+    <TestVariant title="WithCopyToClipboard">
+      <WithCopyToClipboard />
+    </TestVariant>
+    <TestVariant title="WithPhaseBanner">
+      <WithPhaseBanner />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/typography/CodeBlock/index.tsx

@@ -1,4 +1,124 @@
-export * from '@digigov/react-core/CodeBlock';
+import React from 'react';
 
-import CodeBlock from '@digigov/react-core/CodeBlock';
-export default CodeBlock;
+import hljs from 'highlight.js/lib/core';
+import bash from 'highlight.js/lib/languages/bash';
+import js from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
+import markdown from 'highlight.js/lib/languages/markdown';
+import python from 'highlight.js/lib/languages/python';
+import xml from 'highlight.js/lib/languages/xml';
+import { BaseProps } from '@digigov/react-core/Base';
+import CodeBlockContainer from '@digigov/react-core/CodeBlockContainer';
+import CodeBlockContent from '@digigov/react-core/CodeBlockContent';
+import CodeBlockHeader from '@digigov/react-core/CodeBlockHeader';
+import { CopyToClipboard } from '@digigov/ui/feedback';
+import { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
+import { Button } from '@digigov/ui/form/Button';
+
+export interface CodeBlockProps extends BaseProps<'div'> {
+  language?: 'javascript' | 'bash' | 'xml' | 'python' | 'markdown' | 'json';
+  copyToClipboard?: boolean;
+  highlighted?: boolean;
+  showLineNumbers?: boolean;
+  phaseBannerTagName?: string;
+  highlightLines?: number[];
+}
+
+const languageMap = {
+  javascript: js,
+  python: python,
+  bash: bash,
+  xml: xml,
+  markdown: markdown,
+  json: json,
+};
+
+const addLineNumbers = (code: string, highlightLines: number[]): string => {
+  return code
+    .split('\n')
+    .map((line, index) => {
+      const isHighlighted = highlightLines.includes(index + 1);
+      const lineClass = isHighlighted ? 'ds-code--highlighted-line' : '';
+      return `<span class="ds-code--line-number">${index + 1}</span> <span class="${lineClass}">${line}</span>`;
+    })
+    .join('\n');
+};
+
+export const CodeBlock: React.FC<CodeBlockProps> = React.forwardRef(
+  function CodeBlock({
+    children,
+    language,
+    copyToClipboard,
+    highlighted,
+    showLineNumbers,
+    phaseBannerTagName,
+    highlightLines,
+    ref,
+    ...props
+  }) {
+    const Tag = 'span';
+    const codeString = typeof children === 'string' ? children : '';
+    let displayingCode = codeString;
+
+    if (highlighted && codeString) {
+      try {
+        hljs.configure({ classPrefix: 'ds-code--' });
+        let highlightedCode = hljs.highlightAuto(codeString).value;
+        if (language) {
+          hljs.registerLanguage(language, languageMap[language]);
+          highlightedCode = hljs.highlight(codeString, {
+            language: language,
+          }).value;
+        }
+        displayingCode = showLineNumbers
+          ? addLineNumbers(highlightedCode, highlightLines || [])
+          : highlightedCode;
+      } catch (error) {
+        console.error('Highlighting failed:', error);
+      }
+    }
+
+    return (
+      <CodeBlockContainer ref={ref} {...props}>
+        <CodeBlockHeader
+          justify={
+            phaseBannerTagName && copyToClipboard ? 'space-between' : 'end'
+          }
+        >
+          {phaseBannerTagName && (
+            <PhaseBannerTag>{phaseBannerTagName}</PhaseBannerTag>
+          )}
+          {copyToClipboard && (
+            <CopyToClipboard
+              dense
+              text={codeString}
+              variant="tooltip"
+              tooltipAlign="right"
+              message="Copied!"
+            >
+              <Button dense color="secondary">
+                Copy
+              </Button>
+            </CopyToClipboard>
+          )}
+        </CodeBlockHeader>
+        <CodeBlockContent className={`language-${language}`}>
+          {highlighted && codeString ? (
+            <Tag
+              dangerouslySetInnerHTML={{
+                __html: displayingCode,
+              }}
+            />
+          ) : (
+            children
+          )}
+        </CodeBlockContent>
+      </CodeBlockContainer>
+    );
+  }
+);
+
+export * from '@digigov/react-core/CodeBlockContent';
+export * from '@digigov/react-core/CodeBlockHeader';
+export * from '@digigov/react-core/CodeBlockContainer';
+export default CodeBlock;

package/src/typography/Heading/Heading.stories.js

@@ -4,4 +4,4 @@ export default {
   component: Heading,
   displayName: 'Heading',
 };
-export * from '@digigov/ui/typography/Heading/__stories__/Default';
+export { Default } from '@digigov/ui/typography/Heading/__stories__/Default';