@digigov/ui 2.0.0-d57821ba → 2.0.0-daaf7bdf

package/src/navigation/Breadcrumbs/slug.ts

@@ -0,0 +1,141 @@
+export function slug(text: string, maxWidth = 50): string {
+  // Greek to Latin character mapping
+  const greekToLatinMap: { [key: string]: string } = {
+    α: 'a',
+    β: 'b',
+    γ: 'g',
+    δ: 'd',
+    ε: 'e',
+    ζ: 'z',
+    η: 'i',
+    θ: 'th',
+    ι: 'i',
+    κ: 'k',
+    λ: 'l',
+    μ: 'm',
+    ν: 'n',
+    ξ: 'x',
+    ο: 'o',
+    π: 'p',
+    ρ: 'r',
+    σ: 's',
+    τ: 't',
+    υ: 'y',
+    φ: 'f',
+    χ: 'ch',
+    ψ: 'ps',
+    ω: 'o',
+    ά: 'a',
+    έ: 'e',
+    ί: 'i',
+    ό: 'o',
+    ύ: 'y',
+    ή: 'i',
+    ώ: 'o',
+    ς: 's',
+    ϊ: 'i',
+    ΰ: 'y',
+    ϋ: 'y',
+    ΐ: 'i',
+    Α: 'A',
+    Β: 'B',
+    Γ: 'G',
+    Δ: 'D',
+    Ε: 'E',
+    Ζ: 'Z',
+    Η: 'I',
+    Θ: 'TH',
+    Ι: 'I',
+    Κ: 'K',
+    Λ: 'L',
+    Μ: 'M',
+    Ν: 'N',
+    Ξ: 'X',
+    Ο: 'O',
+    Π: 'P',
+    Ρ: 'R',
+    Σ: 'S',
+    Τ: 'T',
+    Υ: 'Y',
+    Φ: 'F',
+    Χ: 'CH',
+    Ψ: 'PS',
+    Ω: 'O',
+    Ά: 'A',
+    Έ: 'E',
+    Ί: 'I',
+    Ό: 'O',
+    Ύ: 'Y',
+    Ή: 'I',
+    Ώ: 'O',
+    Ϊ: 'I',
+    Ϋ: 'Y',
+  };
+
+  // Convert Greek characters to Latin
+  const latinText = text
+    .split('')
+    .map((char) => greekToLatinMap[char] || char)
+    .join('');
+
+  // Convert to lowercase, replace spaces with hyphens, remove special characters
+  const processedText = latinText
+    .toLowerCase()
+    .replace(/\s+/g, '-')
+    .replace(/[^\w\-]+/g, '')
+    .replace(/\-\-+/g, '-')
+    .replace(/^-+/, '')
+    .replace(/-+$/, '');
+
+  // Calculate the available width for the slug (subtracting 1 for the hyphen and at least 8 for the ID)
+  // const availableWidth = Math.max(0, maxWidth - 9);
+
+  // Split the processed text into slug and remaining text for ID
+  let slug = processedText.substring(0, maxWidth);
+  const remainingText = processedText.substring(maxWidth);
+
+  // Remove trailing hyphens from the slug
+  slug = slug.replace(/-+$/, '');
+
+  // Generate ID from the remaining text
+  const id = generateIDFromText(remainingText);
+
+  // Combine the slug and ID
+  return `${slug}${id && '-'}${id}`;
+}
+
+function generateIDFromText(text: string): string {
+  // If text is empty or maxLength is 0 or less, return a default ID
+  if (!text) return '';
+
+  // Remove hyphens and take only alphanumeric characters
+  let processedText = text.replace(/-/g, '').replace(/[^a-z0-9]/g, '');
+
+  // If processed text is empty, use a default base
+  if (!processedText) processedText = 'default';
+
+  // Calculate a simple hash of the processed text
+  let hash = 0;
+  for (let i = 0; i < processedText.length; i++) {
+    const char = processedText.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash = hash & hash; // Convert to 32-bit integer
+  }
+
+  // Convert hash to a positive number and then to base 36 (0-9 and a-z)
+  const id = Math.abs(hash).toString(36);
+
+  // Ensure the ID is at least 8 characters long, padding with '0' if necessary
+  return id;
+  // return id.padEnd(8, '0').substring(0, maxLength);
+}
+
+// Test the function
+// console.log(createSlugWithID('Καλημέρα κόσμε! Hello world!', 10));
+// console.log(createSlugWithID('Ελληνικά και English mixed', 80));
+// console.log(
+//   createSlugWithID(
+//     'Αυτό είναι ένα πολύ μεγάλο κείμενο για να δοκιμάσουμε το όριο πλάτους',
+//     90
+//   )
+// );

package/src/navigation/Breadcrumbs/utils.ts

@@ -0,0 +1,39 @@
+// utility.ts
+import { slug } from '@digigov/ui/navigation/Breadcrumbs/slug';
+export const flattenRoutes = (
+  items,
+  maxLength: number = 15,
+  prepend: string = '',
+  parents: string[] = []
+) => {
+  let flattened = {};
+
+  items.forEach((value) => {
+    const { title, href, children, ...rest } = value;
+
+    const route = [prepend, href || slug(title, maxLength)].join('/');
+
+    const routeChildren = children
+      ? children.map((child) => ({
+        href: child.href || slug(child.title, maxLength),
+        ...child,
+      }))
+      : [];
+
+    flattened[route] = {
+      ...rest,
+      title,
+      children: routeChildren,
+      parents,
+    };
+
+    if (children) {
+      flattened = {
+        ...flattened,
+        ...flattenRoutes(children, maxLength, route, [...parents, title]),
+      };
+    }
+  });
+
+  return flattened;
+};

package/src/navigation/Drawer/__stories__/Auto.tsx

@@ -16,7 +16,7 @@ import {
   DrawerAuto,
   DrawerHeadingAuto,
   DrawerButtonAuto,
-} from '@digigov/ui/navigation/Drawer';
+} from '@digigov/ui/navigation/Drawer/auto';
 import { NavListAuto } from '@digigov/ui/navigation/NavList';
 import { Heading } from '@digigov/ui/typography/Heading';
 

package/src/navigation/Drawer/index.tsx

@@ -1,5 +1,4 @@
 export * from '@digigov/react-core/Drawer';
 export * from '@digigov/react-core/DrawerHeading';
-export * from '@digigov/ui/navigation/Drawer/auto';
 import Drawer from '@digigov/react-core/Drawer';
 export default Drawer;

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

@@ -0,0 +1,45 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+
+import { HorizontalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/HorizontalWithoutDrawer';
+import { UsingHeaderButton } from '@digigov/ui/navigation/NavList/__stories__/UsingHeaderButton';
+import { VerticalWithoutDrawer } from '@digigov/ui/navigation/NavList/__stories__/VerticalWithoutDrawer';
+
+test('renders the HorizontalWithoutDrawer Open submenu', async ({
+  mount,
+  page,
+}) => {
+  await mount(<HorizontalWithoutDrawer />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>nav>ul>li:nth-child(2)>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the VerticalWithoutDrawer Open submenu', async ({
+  mount,
+  page,
+}) => {
+  await mount(<VerticalWithoutDrawer />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>nav>ul>li:nth-child(2)>button').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});
+
+test('renders the UsingHeaderButton menu', async ({ mount, page }) => {
+  await mount(<UsingHeaderButton />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('button:text("Επιλογές")').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/navigation/Pagination/__stories__/Auto.tsx

@@ -5,12 +5,14 @@ import Main from '@digigov/ui/layouts/Basic';
 import Grid from '@digigov/ui/layouts/Grid';
 import {
   Pagination,
+} from '@digigov/ui/navigation/Pagination';
+import {
   PaginationContextAuto,
   PaginationLabelAuto,
   PaginationListAuto,
   PaginationResultsPerPageSelectAuto,
   usePaginationContext,
-} from '@digigov/ui/navigation/Pagination';
+} from '@digigov/ui/navigation/Pagination/auto';
 
 const fetchedData: { id: number }[] = [];
 

package/src/navigation/Pagination/index.tsx

@@ -6,5 +6,4 @@ export * from '@digigov/react-core/Pagination';
 export * from '@digigov/react-core/PaginationList';
 export * from '@digigov/react-core/PaginationListItem';
 export * from '@digigov/ui/navigation/Pagination/hooks';
-export * from '@digigov/ui/navigation/Pagination/auto';
 export { PaginationLabelContainer } from '@digigov/react-core/PaginationLabelContainer';

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

@@ -9,13 +9,15 @@ import {
 } from '@digigov/ui/content/SummaryList';
 import { Link } from '@digigov/ui/navigation/Link';
 import {
-  TabsAuto,
   TabsHeading,
   TabsList,
+
+} from '@digigov/ui/navigation/Tabs';
+import {
+  TabsAuto,
   TabsListItem,
   TabsPanel,
-} from '@digigov/ui/navigation/Tabs';
-
+} from '@digigov/ui/navigation/Tabs/auto';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 

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

@@ -11,10 +11,12 @@ import {
   Tabs,
   TabsHeading,
   TabsList,
-  TabsListItem,
-  TabsPanel,
   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';

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

@@ -12,11 +12,12 @@ import {
   Tabs,
   TabsHeading,
   TabsList,
-  TabsListItem,
-  TabsPanel,
   useTabs,
 } from '@digigov/ui/navigation/Tabs';
-
+import {
+  TabsListItem,
+  TabsPanel,
+} from '@digigov/ui/navigation/Tabs/auto';
 import { Heading } from '@digigov/ui/typography/Heading';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 

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

@@ -11,10 +11,12 @@ import {
   Tabs,
   TabsHeading,
   TabsList,
-  TabsListItem,
-  TabsPanel,
   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';

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/registry.js

@@ -140,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';
@@ -163,12 +167,6 @@ import * as _digigov_ui_navigation_SkipLink from '@digigov/ui/navigation/SkipLin
 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';
 import * as _digigov_ui_navigation_Tabs from '@digigov/ui/navigation/Tabs';
-import * as _digigov_ui_patterns_FilteredResults_DataTable from '@digigov/ui/patterns/FilteredResults/DataTable';
-import * as _digigov_ui_patterns_FilteredResults_FilterChips from '@digigov/ui/patterns/FilteredResults/FilterChips';
-import * as _digigov_ui_patterns_FilteredResults_FilterFields from '@digigov/ui/patterns/FilteredResults/FilterFields';
-import * as _digigov_ui_patterns_FilteredResults_hooks from '@digigov/ui/patterns/FilteredResults/hooks';
-import * as _digigov_ui_patterns_FilteredResults from '@digigov/ui/patterns/FilteredResults';
-import * as _digigov_ui_patterns from '@digigov/ui/patterns';
 import * as _digigov_ui_typography_Code from '@digigov/ui/typography/Code';
 import * as _digigov_ui_typography_CodeBlock from '@digigov/ui/typography/CodeBlock';
 import * as _digigov_ui_typography_Heading from '@digigov/ui/typography/Heading';
@@ -199,7 +197,7 @@ function lazyImport(pkgImport) {
       get: (_target, name) => {
         if (name === '__esModule' || name === 'default') {
           return pkgImport.default;
-        } else if(
+        } else if (
           name === '*'
         ) {
           return pkgImport;
@@ -352,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),
@@ -375,12 +377,6 @@ export default {
   '@digigov/ui/navigation/Tabs/auto': lazyImport(_digigov_ui_navigation_Tabs_auto),
   '@digigov/ui/navigation/Tabs/hooks': lazyImport(_digigov_ui_navigation_Tabs_hooks),
   '@digigov/ui/navigation/Tabs': lazyImport(_digigov_ui_navigation_Tabs),
-  '@digigov/ui/patterns/FilteredResults/DataTable': lazyImport(_digigov_ui_patterns_FilteredResults_DataTable),
-  '@digigov/ui/patterns/FilteredResults/FilterChips': lazyImport(_digigov_ui_patterns_FilteredResults_FilterChips),
-  '@digigov/ui/patterns/FilteredResults/FilterFields': lazyImport(_digigov_ui_patterns_FilteredResults_FilterFields),
-  '@digigov/ui/patterns/FilteredResults/hooks': lazyImport(_digigov_ui_patterns_FilteredResults_hooks),
-  '@digigov/ui/patterns/FilteredResults': lazyImport(_digigov_ui_patterns_FilteredResults),
-  '@digigov/ui/patterns': lazyImport(_digigov_ui_patterns),
   '@digigov/ui/typography/Code': lazyImport(_digigov_ui_typography_Code),
   '@digigov/ui/typography/CodeBlock': lazyImport(_digigov_ui_typography_CodeBlock),
   '@digigov/ui/typography/Heading': lazyImport(_digigov_ui_typography_Heading),
@@ -404,7 +400,7 @@ export default {
   '@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';
@@ -422,6 +418,8 @@ import * as _digigov_ui_content_Card_Card_stories from '@digigov/ui/content/Card
 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';
@@ -457,7 +455,6 @@ 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_patterns_FilteredResults_FilteredResults_stories from '@digigov/ui/patterns/FilteredResults/FilteredResults.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';
@@ -466,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,
@@ -485,6 +482,8 @@ import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digig
   '@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,
@@ -520,7 +519,6 @@ 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/patterns/FilteredResults/FilteredResults.stories': _digigov_ui_patterns_FilteredResults_FilteredResults_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,
@@ -528,6 +526,5 @@ import * as _digigov_ui_utils_VisuallyHidden_VisuallyHidden_stories from '@digig
   '@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

@@ -5,3 +5,6 @@ export default {
   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

@@ -1,108 +1,23 @@
 import React from 'react';
 
 import CodeBlock from '@digigov/ui/typography/CodeBlock';
-import Base from '@digigov/ui/utils/Base';
 
-const bashExample = `POST https://ked.gsis.gr
-  {
-    "gateCreatePostDocumentInputRecord": {
-      "gate": "USER",
-      "source": {
-        # σχόλια
-          "gateCreatePostDocumentInputRecord": {
-          "gate": "USER",
-          "source": {
-            # σχόλια
-          }
-        }
-        "auditRecord": "..."
-      }
-    }
-    "auditRecord": "..."
-  }`;
-
-const htmlExample = `<details>
-  <summary>Epcot Center</summary>
-  <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
-</details>`;
-
-const jsExample = `
-export const DashboardRegistry = registry;
-function TextNode(props) {
-  return <>{props.text}</>;
-}
-
-TextNode.propTypes = {
-  text: PropTypes.any,
-};
-
-registry.register({ TextNode });`;
-
-const pythonExample = `# Program to check if a number is prime or not
-
-num = 29
-
-# To take input from the user
-#num = int(input("Enter a number: "))
-
-# define a flag variable
-flag = False
-
-if num == 1:
-    print(num, "is not a prime number")
-elif num > 1:
-    # check for factors
-    for i in range(2, num):
-        if (num % i) == 0:
-            # if factor is found, set flag to True
-            flag = True
-            # break out of loop
-            break
-
-    # check if flag is True
-    if flag:
-        print(num, "is not a prime number")
-    else:
-        print(num, "is a prime number")`;
+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 (
-    <Base>
-      <CodeBlock highlighted copyToClipboard>
-        {bashExample}
-      </CodeBlock>
-      <CodeBlock
-        mt={10}
-        highlighted
-        copyToClipboard
-        showLineNumbers
-        language="python"
-        phaseBannerTagName="python"
-        highlightLines={[11, 12]}
-      >
-        {pythonExample}
-      </CodeBlock>
-      <CodeBlock
-        mt={10}
-        highlighted
-        copyToClipboard
-        language="js"
-        phaseBannerTagName="JS"
-      >
-        {jsExample}
-      </CodeBlock>
-      <CodeBlock
-        mt={10}
-        highlighted
-        copyToClipboard
-        showLineNumbers
-        language="xml"
-        phaseBannerTagName="html"
-      >
-        {htmlExample}
-      </CodeBlock>
-    </Base>
-  );
+  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;