@digigov/ui 1.2.0-dcbd7ded → 2.0.0-113e6661

package/src/navigation/Tabs/__stories__/UsingAccordion.tsx

@@ -0,0 +1,190 @@
+import React from 'react';
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  SummaryListItemAction,
+} from '@digigov/ui/content/SummaryList';
+import { Link } from '@digigov/ui/navigation/Link';
+import {
+  Tabs,
+  TabsHeading,
+  TabsList,
+  useTabs,
+} from '@digigov/ui/navigation/Tabs';
+import {
+  TabsListItem,
+  TabsPanel,
+} from '@digigov/ui/navigation/Tabs/auto';
+import { Heading } from '@digigov/ui/typography/Heading';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import { Hidden } from '@digigov/ui/layouts/Hidden';
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+
+export function UsingAccordion() {
+  const { register, panel } = useTabs({ defaultOpen: 'a' });
+
+  const StoixeiaContent = () => {
+    return (
+      <>
+        <Heading size="md" element="h3">
+          Στοιχεία πολίτη
+        </Heading>
+        <SummaryList>
+          <SummaryListItem>
+            <SummaryListItemKey>Όνομα</SummaryListItemKey>
+            <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
+            <SummaryListItemAction>
+              <Link href="#">
+                Αλλαγή <VisuallyHidden> ονόματος </VisuallyHidden>
+              </Link>
+            </SummaryListItemAction>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Ημ. Γέννησης</SummaryListItemKey>
+            <SummaryListItemValue>11 Μαϊου 1990</SummaryListItemValue>
+          </SummaryListItem>
+          <SummaryListItem>
+            <SummaryListItemKey>Τηλέφωνο επικοινωνίας</SummaryListItemKey>
+            <SummaryListItemValue>6941234567</SummaryListItemValue>
+            <SummaryListItemAction>
+              <Link>
+                Αλλαγή <VisuallyHidden> τηλεφώνου </VisuallyHidden>
+              </Link>
+            </SummaryListItemAction>
+          </SummaryListItem>
+        </SummaryList>
+      </>
+    );
+  };
+  const YpotheseisContent = () => {
+    return (
+      <>
+        <Heading size="md" element="h3">
+          Yποθέσεις
+        </Heading>
+        Περιεχόμενα υποθέσεων
+      </>
+    );
+  };
+
+  const MhnumataContent = () => {
+    return (
+      <>
+        <Heading size="md" element="h3">
+          Μηνύματα
+        </Heading>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Paragraph>{' '}
+      </>
+    );
+  };
+
+  const IstorikoContent = () => {
+    return (
+      <>
+        <Heading size="md" element="h3">
+          Ιστορικό
+        </Heading>
+        <Paragraph>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat. Duis aute irure dolor in
+          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
+          culpa qui officia deserunt mollit anim id est laborum.
+        </Paragraph>
+      </>
+    );
+  };
+
+  return (
+    <>
+      <Hidden xs sm>
+        <Tabs>
+          <TabsHeading size="md">Περιεχόμενα</TabsHeading>
+          <TabsList>
+            <TabsListItem {...register('a')}>Στοιχεία πολίτη</TabsListItem>
+            <TabsListItem {...register('b')}>Yποθέσεις</TabsListItem>
+            <TabsListItem {...register('c')}>Μηνύματα</TabsListItem>
+            <TabsListItem {...register('d')}>Ιστορικό</TabsListItem>
+          </TabsList>
+          <TabsPanel {...panel('a')}>
+            <StoixeiaContent />
+          </TabsPanel>
+          <TabsPanel {...panel('b')}>
+            <YpotheseisContent />
+          </TabsPanel>
+          <TabsPanel {...panel('c')}>
+            <MhnumataContent />
+          </TabsPanel>
+          <TabsPanel {...panel('d')}>
+            <IstorikoContent />
+          </TabsPanel>
+        </Tabs>
+      </Hidden>
+      <Hidden mdUp>
+        <Accordion summaryColor='secondary' dense>
+          <AccordionSection open>
+            <AccordionSectionSummary>
+              <AccordionSectionSummaryHeading aria-controls="content1">
+                Στοιχεία πολίτη
+              </AccordionSectionSummaryHeading>
+            </AccordionSectionSummary>
+            <AccordionSectionContent id="content1">
+              <StoixeiaContent />
+            </AccordionSectionContent>
+          </AccordionSection>
+          <AccordionSection>
+            <AccordionSectionSummary>
+              <AccordionSectionSummaryHeading aria-controls="content2">
+                Yποθέσεις
+              </AccordionSectionSummaryHeading>
+            </AccordionSectionSummary>
+            <AccordionSectionContent id="content2">
+              <YpotheseisContent />
+            </AccordionSectionContent>
+          </AccordionSection>
+          <AccordionSection>
+            <AccordionSectionSummary>
+              <AccordionSectionSummaryHeading aria-controls="content3">
+                Μηνύματα
+              </AccordionSectionSummaryHeading>
+            </AccordionSectionSummary>
+            <AccordionSectionContent id="content3">
+              <MhnumataContent />
+            </AccordionSectionContent>
+          </AccordionSection>
+          <AccordionSection>
+            <AccordionSectionSummary>
+              <AccordionSectionSummaryHeading aria-controls="content4">
+                Ιστορικό
+              </AccordionSectionSummaryHeading>
+            </AccordionSectionSummary>
+            <AccordionSectionContent id="content4">
+              <IstorikoContent />
+            </AccordionSectionContent>
+          </AccordionSection>
+        </Accordion>
+      </Hidden>
+    </>
+  );
+}
+
+export default UsingAccordion;

package/src/navigation/Tabs/auto.tsx

@@ -1,15 +1,19 @@
 import React, { useContext } from 'react';
 
+import Tabs from '@digigov/react-core/Tabs';
 import {
-  Tabs,
   TabsListItemBase,
-  TabsPanelBase,
-  UseTabsReturn,
-  useTabs,
   TabsListItemBaseProps,
+} from '@digigov/react-core/TabsListItemBase';
+import {
+  TabsPanelBase,
   TabsPanelBaseProps,
-} from '@digigov/ui/navigation/Tabs';
-import { TabId } from '@digigov/ui/navigation/Tabs';
+} from '@digigov/react-core/TabsPanelBase';
+import {
+  useTabs,
+  UseTabsReturn,
+  TabId,
+} from '@digigov/ui/navigation/Tabs/hooks';
 
 export interface TabsListItemProps extends TabsListItemBaseProps {
   id: string;

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.mdx

@@ -5,10 +5,6 @@ title: Tabs
 
 # Tabs
 
-```bash
-import Tabs from '@digigov/ui/navigation/Tabs';
-```
-
 ## How to use
 
 <Story
@@ -24,4 +20,12 @@ implementation in the ARIA Authoring Practices Guide (APG) at [Tabs](https://www
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Tabs" />
+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/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

@@ -32,6 +32,7 @@ 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_Modal from '@digigov/ui/app/Modal/Modal';
 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 +45,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 +140,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 +162,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';
@@ -168,6 +175,7 @@ import * as _digigov_ui_typography_Hint from '@digigov/ui/typography/Hint';
 import * as _digigov_ui_typography from '@digigov/ui/typography';
 import * as _digigov_ui_typography_NormalText from '@digigov/ui/typography/NormalText';
 import * as _digigov_ui_typography_Paragraph from '@digigov/ui/typography/Paragraph';
+import * as _digigov_ui_typography_Typography from '@digigov/ui/typography/Typography';
 import * as _digigov_ui_utils_Base from '@digigov/ui/utils/Base';
 import * as _digigov_ui_utils_hooks_useDebounce from '@digigov/ui/utils/hooks/useDebounce';
 import * as _digigov_ui_utils_hooks_useKeypress from '@digigov/ui/utils/hooks/useKeypress';
@@ -177,6 +185,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'
@@ -188,7 +197,7 @@ function lazyImport(pkgImport) {
       get: (_target, name) => {
         if (name === '__esModule' || name === 'default') {
           return pkgImport.default;
-        } else if(
+        } else if (
           name === '*'
         ) {
           return pkgImport;
@@ -233,6 +242,7 @@ export default {
   '@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/Modal': lazyImport(_digigov_ui_app_Modal_Modal),
   '@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),
@@ -245,6 +255,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),
@@ -339,7 +350,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),
@@ -357,6 +372,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),
@@ -369,6 +385,7 @@ export default {
   '@digigov/ui/typography': lazyImport(_digigov_ui_typography),
   '@digigov/ui/typography/NormalText': lazyImport(_digigov_ui_typography_NormalText),
   '@digigov/ui/typography/Paragraph': lazyImport(_digigov_ui_typography_Paragraph),
+  '@digigov/ui/typography/Typography': lazyImport(_digigov_ui_typography_Typography),
   '@digigov/ui/utils/Base': lazyImport(_digigov_ui_utils_Base),
   '@digigov/ui/utils/hooks/useDebounce': lazyImport(_digigov_ui_utils_hooks_useDebounce),
   '@digigov/ui/utils/hooks/useKeypress': lazyImport(_digigov_ui_utils_hooks_useKeypress),
@@ -378,11 +395,12 @@ 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)
 };
-  import * as _digigov_ui_app_BannerContainer_BannerContainer_stories from '@digigov/ui/app/BannerContainer/BannerContainer.stories';
+import * as _digigov_ui_app_BannerContainer_BannerContainer_stories from '@digigov/ui/app/BannerContainer/BannerContainer.stories';
 import * as _digigov_ui_app_Footer_Footer_stories from '@digigov/ui/app/Footer/Footer.stories';
 import * as _digigov_ui_app_Header_Header_stories from '@digigov/ui/app/Header/Header.stories';
 import * as _digigov_ui_app_Loader_Loader_stories from '@digigov/ui/app/Loader/Loader.stories';
@@ -393,12 +411,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';
@@ -434,6 +455,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';
@@ -441,8 +463,8 @@ import * as _digigov_ui_typography_NormalText_NormalText_stories from '@digigov/
 import * as _digigov_ui_typography_Paragraph_Paragraph_stories from '@digigov/ui/typography/Paragraph/Paragraph.stories';
 import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digigov/ui/utils/VisuallyHidden/VisuallyHidden.stories'
 
-  export const stories = {
-      '@digigov/ui/app/BannerContainer/BannerContainer.stories': _digigov_ui_app_BannerContainer_BannerContainer_stories,
+export const stories = {
+  '@digigov/ui/app/BannerContainer/BannerContainer.stories': _digigov_ui_app_BannerContainer_BannerContainer_stories,
   '@digigov/ui/app/Footer/Footer.stories': _digigov_ui_app_Footer_Footer_stories,
   '@digigov/ui/app/Header/Header.stories': _digigov_ui_app_Header_Header_stories,
   '@digigov/ui/app/Loader/Loader.stories': _digigov_ui_app_Loader_Loader_stories,
@@ -453,12 +475,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,
@@ -494,12 +519,12 @@ 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,
   '@digigov/ui/typography/NormalText/NormalText.stories': _digigov_ui_typography_NormalText_NormalText_stories,
   '@digigov/ui/typography/Paragraph/Paragraph.stories': _digigov_ui_typography_Paragraph_Paragraph_stories,
   '@digigov/ui/utils/VisuallyHidden/VisuallyHidden.stories': _digigov_ui_utils_VisuallyHidden_VisuallyHidden_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;