@digigov/ui 1.2.0-dcbd7ded → 2.0.0-0edebf87

package/src/navigation/NavList/index.mdx

@@ -3,10 +3,6 @@ id: nav-list
 title: NavList
 ---
 
-```bash
-import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
-```
-
 ## How to use
 
 ### Horizontal NavList
@@ -25,12 +21,20 @@ import NavList, { NavListItem } from '@digigov/ui/navigation/NavList';
   story="Vertical.tsx"
 />
 
-### NavListAuto
+### Horizontal NavList with submenu
+
+<Story
+  packageName="@digigov/ui"
+  component="navigation/NavList"
+  story="HorizontalWithoutDrawer.tsx"
+/>
+
+### Vertical NavList with submenu
 
 <Story
   packageName="@digigov/ui"
   component="navigation/NavList"
-  story="UsingNavListAuto.tsx"
+  story="VerticalWithoutDrawer.tsx"
 />
 
 ## Accessibility
@@ -41,4 +45,16 @@ implementation in the ARIA Authoring Practices Guide (APG) at
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NavList" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [ "Nav",
+    "NavList",
+    "NavListAction",
+    "NavListItemActionContainer",
+    "NavListItemButton",
+    "NavListItemLink",
+    "NavMenuContainer",
+    "NavMenuContentListBase",
+    "NavMenuContentListItem",
+    "NavMenuTitle",]} /> 

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

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

package/src/navigation/NavList/types.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 import { NavProps } from '@digigov/ui/navigation/NavList';
 
 export type NavListLayout = 'horizontal' | 'vertical';
@@ -26,7 +25,7 @@ export interface NavListAutoProps extends NavProps {
   floating?: boolean;
   subMenu?: boolean;
   links?: NavLinkInterface[];
-  style?: BaseCSSProperties;
+  style?: React.CSSProperties;
 }
 
 export interface NavListHeaderItemType {

package/src/navigation/Pagination/index.mdx

@@ -3,10 +3,6 @@ id: pagination
 title: Pagination
 ---
 
-```bash
-import Pagination from '@digigov/ui/app/Pagination';
-```
-
 ## How to use
 
 <Story
@@ -41,4 +37,12 @@ import Pagination from '@digigov/ui/app/Pagination';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Pagination" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={
+  [
+  "Pagination",
+  "PaginationLabel",
+  "PaginationList",
+  "PaginationListItem",
+  ]} /> 

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

@@ -0,0 +1,44 @@
+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/Pagination/__stories__/Auto';
+import { Default } from '@digigov/ui/navigation/Pagination/__stories__/Default';
+import { PaginationSmall } from '@digigov/ui/navigation/Pagination/__stories__/PaginationSmall';
+import { PaginationWithSmallFont } from '@digigov/ui/navigation/Pagination/__stories__/PaginationWithSmallFont';
+import { WithHook } from '@digigov/ui/navigation/Pagination/__stories__/WithHook';
+import { WithInactiveValues } from '@digigov/ui/navigation/Pagination/__stories__/WithInactiveValues';
+import { WithResultsPerPage } from '@digigov/ui/navigation/Pagination/__stories__/WithResultsPerPage';
+
+test('renders the All Pagination variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Auto">
+      <Auto />
+    </TestVariant>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="PaginationSmall">
+      <PaginationSmall />
+    </TestVariant>
+    <TestVariant title="PaginationWithSmallFont">
+      <PaginationWithSmallFont />
+    </TestVariant>
+    <TestVariant title="WithHook">
+      <WithHook />
+    </TestVariant>
+    <TestVariant title="WithInactiveValues">
+      <WithInactiveValues />
+    </TestVariant>
+    <TestVariant title="WithResultsPerPage">
+      <WithResultsPerPage />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/navigation/Pagination/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/Pagination/__stories__/Default';
+
+test('renders the Default Hover and click no3', async ({ mount, page }) => {
+  await mount(
+    <Default />
+  )
+  await page.evaluate(() => document.fonts.ready);
+ await page.locator("#root>nav:nth-child(1)>ul>li:nth-child(4)>a").hover();
+ await page.locator("#root>nav:nth-child(1)>ul>li:nth-child(4)>a").click();
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

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

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

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

@@ -44,6 +44,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';
@@ -168,6 +169,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 +179,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'
@@ -245,6 +248,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),
@@ -369,6 +373,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,6 +383,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)
@@ -393,6 +399,7 @@ 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';
@@ -453,6 +460,7 @@ 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,

package/src/typography/Heading/index.mdx

@@ -3,10 +3,6 @@ id: heading
 title: Heading
 ---
 
-```bash
-import Heading from '@digigov/ui/typography/Heading';
-```
-
 ## How to use
 
 <Story
@@ -17,4 +13,6 @@ import Heading from '@digigov/ui/typography/Heading';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Heading" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Heading"]} /> 

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

@@ -0,0 +1,20 @@
+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/Heading/__stories__/Default';
+
+test('renders the All Heading variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/typography/HeadingCaption/index.mdx

@@ -3,10 +3,6 @@ id: heading-caption
 title: HeadingCaption
 ---
 
-```bash
-import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
-```
-
 ## How to use
 
 <Story
@@ -19,4 +15,6 @@ import HeadingCaption from '@digigov/ui/typography/HeadingCaption';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="HeadingCaption" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["HeadingCaption"]} /> 

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

@@ -0,0 +1,24 @@
+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/HeadingCaption/__stories__/Default';
+import { NestedToTitle } from '@digigov/ui/typography/HeadingCaption/__stories__/NestedToTitle';
+
+test('renders the All HeadingCaption variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="NestedToTitle">
+      <NestedToTitle />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/typography/Hint/index.mdx

@@ -3,10 +3,6 @@ id: hint
 title: Hint
 ---
 
-```bash
-import Hint from '@digigov/ui/typography/Hint';
-```
-
 ## How to use
 
 <Story
@@ -25,4 +21,6 @@ import Hint from '@digigov/ui/typography/Hint';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Hint" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Hint"]} /> 

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

@@ -0,0 +1,24 @@
+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/Hint/__stories__/Default';
+import { FontSizes } from '@digigov/ui/typography/Hint/__stories__/FontSizes';
+
+test('renders the All Hint variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="FontSizes">
+      <FontSizes />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/typography/NormalText/index.mdx

@@ -3,10 +3,6 @@ id: normal-text
 title: NormalText
 ---
 
-```bash
-import NormalText from '@digigov/ui/typography/NormalText';
-```
-
 ## How to use
 
 <Story
@@ -43,4 +39,6 @@ import NormalText from '@digigov/ui/typography/NormalText';
 
 ## API
 
-<PropTypes packageName="@digigov/ui" component="NormalText" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["NormalText"]} /> 

package/src/typography/NormalText/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/NormalText/__stories__/Default';
+import { FontSizes } from '@digigov/ui/typography/NormalText/__stories__/FontSizes';
+import { FontWeight } from '@digigov/ui/typography/NormalText/__stories__/FontWeight';
+import { Variants } from '@digigov/ui/typography/NormalText/__stories__/Variants';
+
+test('renders the All NormalText variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="FontSizes">
+      <FontSizes />
+    </TestVariant>
+    <TestVariant title="FontWeight">
+      <FontWeight />
+    </TestVariant>
+    <TestVariant title="Variants">
+      <Variants />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/typography/Paragraph/index.mdx

@@ -3,51 +3,30 @@ id: paragraph
 title: Paragraph
 ---
 
-```bash
-import Paragraph from '@digigov/ui/typography/Paragraph';
-```
-
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="Default.tsx" />
 
 ### Lead paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="LeadVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="LeadVariant.tsx" />
 
 ### Small paragraph
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="SmallVariant.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="SmallVariant.tsx" />
 
 ## Font override classes
 
 ### Font size
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontSizes.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontSizes.tsx" />
 
 ### Font weight
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Paragraph"
-  story="FontWeight.tsx"
-/>
+<Story packageName="@digigov/ui" component="typography/Paragraph" story="FontWeight.tsx" />
+
 ## API
 
-<PropTypes packageName="@digigov/ui" component="Paragraph" />
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Paragraph"]} /> 

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

@@ -0,0 +1,36 @@
+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/Paragraph/__stories__/Default';
+import { FontSizes } from '@digigov/ui/typography/Paragraph/__stories__/FontSizes';
+import { FontWeight } from '@digigov/ui/typography/Paragraph/__stories__/FontWeight';
+import { LeadVariant } from '@digigov/ui/typography/Paragraph/__stories__/LeadVariant';
+import { SmallVariant } from '@digigov/ui/typography/Paragraph/__stories__/SmallVariant';
+
+test('renders the All Paragraph variants', async ({ mount, page }) => {
+  await mount(
+    
+  <div>
+    <TestVariant title="Default">
+      <Default />
+    </TestVariant>
+    <TestVariant title="FontSizes">
+      <FontSizes />
+    </TestVariant>
+    <TestVariant title="FontWeight">
+      <FontWeight />
+    </TestVariant>
+    <TestVariant title="LeadVariant">
+      <LeadVariant />
+    </TestVariant>
+    <TestVariant title="SmallVariant">
+      <SmallVariant />
+    </TestVariant>
+  </div>
+  )
+  await page.evaluate(() => document.fonts.ready);
+
+  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  expect(screenshot).toMatchSnapshot();
+});
+  

package/src/typography/Typography/index.mdx

@@ -0,0 +1,12 @@
+---
+id: typography
+title: Typography
+---
+
+Typography compoment is a HOC (Higher-Order Component) for typography components such as `NormalText` compoment.
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Typography"]} />