@digigov/ui 1.1.3 → 1.1.4-mobile

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';
@@ -136,7 +137,6 @@ import * as _digigov_ui_layouts_Screen from '@digigov/ui/layouts/Screen';
 import * as _digigov_ui_layouts_Section from '@digigov/ui/layouts/Section';
 import * as _digigov_ui_layouts_SectionBreak from '@digigov/ui/layouts/SectionBreak';
 import * as _digigov_ui_layouts_Stack from '@digigov/ui/layouts/Stack';
-import * as _digigov_ui_misc_KitchenSink from '@digigov/ui/misc/KitchenSink';
 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 from '@digigov/ui/navigation/Breadcrumbs';
@@ -161,6 +161,9 @@ 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 from '@digigov/ui/patterns/FilteredResults';
+import * as _digigov_ui_patterns_FilteredResults_utils from '@digigov/ui/patterns/FilteredResults/utils';
+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';
@@ -169,6 +172,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,12 +181,8 @@ import * as _digigov_ui_utils_hooks_useScreen from '@digigov/ui/utils/hooks/useS
 import * as _digigov_ui_utils_hooks_useSearch from '@digigov/ui/utils/hooks/useSearch';
 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_Kitchensink_AllComponents from '@digigov/ui/utils/Kitchensink/AllComponents';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkByCategory from '@digigov/ui/utils/Kitchensink/KitchensinkByCategory';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkByLetter from '@digigov/ui/utils/Kitchensink/KitchensinkByLetter';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkComponent from '@digigov/ui/utils/Kitchensink/KitchensinkComponent';
-import * as _digigov_ui_utils_Kitchensink_KitchensinkDashboard from '@digigov/ui/utils/Kitchensink/KitchensinkDashboard';
 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'
@@ -251,6 +251,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),
@@ -343,7 +344,6 @@ export default {
   '@digigov/ui/layouts/Section': lazyImport(_digigov_ui_layouts_Section),
   '@digigov/ui/layouts/SectionBreak': lazyImport(_digigov_ui_layouts_SectionBreak),
   '@digigov/ui/layouts/Stack': lazyImport(_digigov_ui_layouts_Stack),
-  '@digigov/ui/misc/KitchenSink': lazyImport(_digigov_ui_misc_KitchenSink),
   '@digigov/ui/navigation/BackLink': lazyImport(_digigov_ui_navigation_BackLink),
   '@digigov/ui/navigation/BackToTopLink': lazyImport(_digigov_ui_navigation_BackToTopLink),
   '@digigov/ui/navigation/Breadcrumbs': lazyImport(_digigov_ui_navigation_Breadcrumbs),
@@ -368,6 +368,9 @@ 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': lazyImport(_digigov_ui_patterns_FilteredResults),
+  '@digigov/ui/patterns/FilteredResults/utils': lazyImport(_digigov_ui_patterns_FilteredResults_utils),
+  '@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),
@@ -376,6 +379,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),
@@ -384,12 +388,8 @@ export default {
   '@digigov/ui/utils/hooks/useSearch': lazyImport(_digigov_ui_utils_hooks_useSearch),
   '@digigov/ui/utils/hooks/useTogglableTab': lazyImport(_digigov_ui_utils_hooks_useTogglableTab),
   '@digigov/ui/utils': lazyImport(_digigov_ui_utils),
-  '@digigov/ui/utils/Kitchensink/AllComponents': lazyImport(_digigov_ui_utils_Kitchensink_AllComponents),
-  '@digigov/ui/utils/Kitchensink/KitchensinkByCategory': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkByCategory),
-  '@digigov/ui/utils/Kitchensink/KitchensinkByLetter': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkByLetter),
-  '@digigov/ui/utils/Kitchensink/KitchensinkComponent': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkComponent),
-  '@digigov/ui/utils/Kitchensink/KitchensinkDashboard': lazyImport(_digigov_ui_utils_Kitchensink_KitchensinkDashboard),
   '@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)
@@ -405,6 +405,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';
@@ -446,6 +447,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_patterns_FilteredResults_FilteredResults_stories from '@digigov/ui/patterns/FilteredResults/FilteredResults.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';
@@ -465,6 +467,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,
@@ -506,6 +509,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/patterns/FilteredResults/FilteredResults.stories': _digigov_ui_patterns_FilteredResults_FilteredResults_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/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';

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

@@ -3,18 +3,18 @@ import { Heading } from '@digigov/ui/typography/Heading';
 
 export const Default = () => (
   <>
-    <Heading> govgr-heading-xl </Heading>
+    <Heading> ds-heading-xl </Heading>
     <Heading size="lg" element="h2">
-      govgr-heading-lg
+      ds-heading-lg
     </Heading>
     <Heading size="md" element="h3">
-      govgr-heading-md
+      ds-heading-md
     </Heading>
     <Heading size="sm" element="h4">
-      govgr-heading-sm
+      ds-heading-sm
     </Heading>
     <Heading size="xs" element="h5">
-      govgr-heading-xs
+      ds-heading-xs
     </Heading>
   </>
 );

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/HeadingCaption.stories.js

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

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

@@ -4,20 +4,20 @@ import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
 
 export const Default = () => (
   <>
-    <HeadingCaption size="xl">caption for govgr-heading-xl </HeadingCaption>
+    <HeadingCaption size="xl">caption for ds-heading-xl </HeadingCaption>
     <Heading size="lg" element="h2">
       {' '}
-      govgr-heading-xl{' '}
+      ds-heading-xl{' '}
     </Heading>
-    <HeadingCaption size="lg">caption for govgr-heading-lg </HeadingCaption>
+    <HeadingCaption size="lg">caption for ds-heading-lg </HeadingCaption>
     <Heading size="lg" element="h2">
       {' '}
-      govgr-heading-lg{' '}
+      ds-heading-lg{' '}
     </Heading>
-    <HeadingCaption size="md">caption for govgr-heading-md </HeadingCaption>
+    <HeadingCaption size="md">caption for ds-heading-md </HeadingCaption>
     <Heading size="md" element="h3">
       {' '}
-      govgr-heading-md{' '}
+      ds-heading-md{' '}
     </Heading>
   </>
 );

package/src/typography/HeadingCaption/__stories__/NestedToTitle.tsx

@@ -4,8 +4,8 @@ import { HeadingCaption } from '@digigov/ui/typography/HeadingCaption';
 
 export const NestedToTitle = () => (
   <Heading size="lg" element="h2">
-    <HeadingCaption size="xl">caption for govgr-heading-xl </HeadingCaption>
-    govgr-heading-xl
+    <HeadingCaption size="xl">caption for ds-heading-xl </HeadingCaption>
+    ds-heading-xl
   </Heading>
 );
 

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/Hint.stories.js

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

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Hint } from '@digigov/ui/typography/Hint';
 
-export const Default = () => <Hint> govgr-hint </Hint>;
+export const Default = () => <Hint> ds-hint </Hint>;
 
 export default Default;

package/src/typography/Hint/__stories__/FontSizes.tsx

@@ -3,10 +3,10 @@ import { Hint } from '@digigov/ui/typography/Hint';
 
 export const FontSizes = () => (
   <>
-    <Hint fontSize={14}> govgr-hint </Hint>
-    <Hint fontSize={16}> govgr-hint </Hint>
-    <Hint> govgr-hint </Hint>
-    <Hint fontSize={24}> govgr-hint </Hint>
+    <Hint fontSize={14}> ds-hint </Hint>
+    <Hint fontSize={16}> ds-hint </Hint>
+    <Hint> ds-hint </Hint>
+    <Hint fontSize={24}> ds-hint </Hint>
   </>
 );
 

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/NormalText.stories.js

@@ -4,7 +4,7 @@ export default {
   component: NormalText,
   displayName: 'NormalText',
 };
-export * from '@digigov/ui/typography/NormalText/__stories__/Default';
-export * from '@digigov/ui/typography/NormalText/__stories__/FontSizes';
-export * from '@digigov/ui/typography/NormalText/__stories__/FontWeight';
-export * from '@digigov/ui/typography/NormalText/__stories__/Variants';
+export { Default } from '@digigov/ui/typography/NormalText/__stories__/Default';
+export { FontSizes } from '@digigov/ui/typography/NormalText/__stories__/FontSizes';
+export { FontWeight } from '@digigov/ui/typography/NormalText/__stories__/FontWeight';
+export { Variants } from '@digigov/ui/typography/NormalText/__stories__/Variants';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { NormalText } from '@digigov/ui/typography/NormalText';
 
-export const Default = () => <NormalText>govgr-normal-text</NormalText>;
+export const Default = () => <NormalText>ds-normal-text</NormalText>;
 
 export default Default;

package/src/typography/NormalText/__stories__/FontSizes.tsx

@@ -4,19 +4,19 @@ import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export const FontSizes = () => (
   <>
-    <NormalText fontSize={14}> govgr-!-font-size-14 </NormalText>
+    <NormalText fontSize={14}> ds-!-font-size-14 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize={16}> govgr-!-font-size-16 </NormalText>
+    <NormalText fontSize={16}> ds-!-font-size-16 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize={19}> govgr-!-font-size-19 </NormalText>
+    <NormalText fontSize={19}> ds-!-font-size-19 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize={24}> govgr-!-font-size-24 </NormalText>
+    <NormalText fontSize={24}> ds-!-font-size-24 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize={30}> govgr-!-font-size-30 </NormalText>
+    <NormalText fontSize={30}> ds-!-font-size-30 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize={48}> govgr-!-font-size-48 </NormalText>
+    <NormalText fontSize={48}> ds-!-font-size-48 </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontSize={72}> govgr-!-font-size-72 </NormalText>
+    <NormalText fontSize={72}> ds-!-font-size-72 </NormalText>
   </>
 );
 

package/src/typography/NormalText/__stories__/FontWeight.tsx

@@ -4,9 +4,9 @@ import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export const FontWeight = () => (
   <>
-    <NormalText fontWeight="regular"> govgr-!-font-weight-regular </NormalText>
+    <NormalText fontWeight="regular"> ds-!-font-weight-regular </NormalText>
     <SectionBreak visible={false} />
-    <NormalText fontWeight="bold"> govgr-!-font-weight-bold </NormalText>
+    <NormalText fontWeight="bold"> ds-!-font-weight-bold </NormalText>
   </>
 );
 

package/src/typography/NormalText/__stories__/Variants.tsx

@@ -4,9 +4,9 @@ import { NormalText } from '@digigov/ui/typography/NormalText';
 
 export const Variants = () => (
   <>
-    <NormalText size={'sm'}> govgr-size-small </NormalText>
+    <NormalText size={'sm'}> ds-size-small </NormalText>
     <SectionBreak visible={false} />
-    <NormalText size={'lg'}> govgr-size-large </NormalText>
+    <NormalText size={'lg'}> ds-size-large </NormalText>
   </>
 );
 

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/Paragraph.stories.js

@@ -4,8 +4,8 @@ export default {
   component: Paragraph,
   displayName: 'Paragraph',
 };
-export * from '@digigov/ui/typography/Paragraph/__stories__/Default';
-export * from '@digigov/ui/typography/Paragraph/__stories__/LeadVariant';
-export * from '@digigov/ui/typography/Paragraph/__stories__/SmallVariant';
-export * from '@digigov/ui/typography/Paragraph/__stories__/FontSizes';
-export * from '@digigov/ui/typography/Paragraph/__stories__/FontWeight';
+export { Default } from '@digigov/ui/typography/Paragraph/__stories__/Default';
+export { LeadVariant } from '@digigov/ui/typography/Paragraph/__stories__/LeadVariant';
+export { SmallVariant } from '@digigov/ui/typography/Paragraph/__stories__/SmallVariant';
+export { FontSizes } from '@digigov/ui/typography/Paragraph/__stories__/FontSizes';
+export { FontWeight } from '@digigov/ui/typography/Paragraph/__stories__/FontWeight';

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
-export const Default = () => <Paragraph>govgr-body</Paragraph>;
+export const Default = () => <Paragraph>ds-body</Paragraph>;
 
 export default Default;

package/src/typography/Paragraph/__stories__/FontSizes.tsx

@@ -3,13 +3,13 @@ import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const FontSizes = () => (
   <>
-    <Paragraph fontSize={14}> govgr-!-font-size-14 </Paragraph>
-    <Paragraph fontSize={16}> govgr-!-font-size-16 </Paragraph>
-    <Paragraph fontSize={19}> govgr-!-font-size-19 </Paragraph>
-    <Paragraph fontSize={24}> govgr-!-font-size-24 </Paragraph>
-    <Paragraph fontSize={30}> govgr-!-font-size-30 </Paragraph>
-    <Paragraph fontSize={48}> govgr-!-font-size-48 </Paragraph>
-    <Paragraph fontSize={72}> govgr-!-font-size-72 </Paragraph>
+    <Paragraph fontSize={14}> ds-!-font-size-14 </Paragraph>
+    <Paragraph fontSize={16}> ds-!-font-size-16 </Paragraph>
+    <Paragraph fontSize={19}> ds-!-font-size-19 </Paragraph>
+    <Paragraph fontSize={24}> ds-!-font-size-24 </Paragraph>
+    <Paragraph fontSize={30}> ds-!-font-size-30 </Paragraph>
+    <Paragraph fontSize={48}> ds-!-font-size-48 </Paragraph>
+    <Paragraph fontSize={72}> ds-!-font-size-72 </Paragraph>
   </>
 );
 

package/src/typography/Paragraph/__stories__/FontWeight.tsx

@@ -3,8 +3,8 @@ import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
 export const FontWeight = () => (
   <>
-    <Paragraph fontWeight="regular"> govgr-!-font-weight-regular </Paragraph>
-    <Paragraph fontWeight="bold"> govgr-!-font-weight-bold </Paragraph>
+    <Paragraph fontWeight="regular"> ds-!-font-weight-regular </Paragraph>
+    <Paragraph fontWeight="bold"> ds-!-font-weight-bold </Paragraph>
   </>
 );
 

package/src/typography/Paragraph/__stories__/LeadVariant.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
-export const LeadVariant = () => <Paragraph size={'lg'}>govgr-body</Paragraph>;
+export const LeadVariant = () => <Paragraph size={'lg'}>ds-body</Paragraph>;
 
 export default LeadVariant;

package/src/typography/Paragraph/__stories__/SmallVariant.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Paragraph } from '@digigov/ui/typography/Paragraph';
 
-export const SmallVariant = () => <Paragraph size={'sm'}>govgr-body</Paragraph>;
+export const SmallVariant = () => <Paragraph size={'sm'}>ds-body</Paragraph>;
 
 export default SmallVariant;