@digigov/ui 2.0.0-85c27c19 → 2.0.0-aefd0709

package/src/typography/Code/index.tsx

@@ -1,4 +1,4 @@
 export * from '@digigov/react-core/Code';
 
 import Code from '@digigov/react-core/Code';
-export default Code;
+export default Code;

package/src/typography/CodeBlock/doc.mdx

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

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

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

package/src/typography/CodeBlock/index.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import hljs from 'highlight.js/lib/core';
 import bash from 'highlight.js/lib/languages/bash';
 import js from 'highlight.js/lib/languages/javascript';
+import json from 'highlight.js/lib/languages/json';
 import markdown from 'highlight.js/lib/languages/markdown';
 import python from 'highlight.js/lib/languages/python';
 import xml from 'highlight.js/lib/languages/xml';
@@ -15,10 +16,10 @@ import { PhaseBannerTag } from '@digigov/ui/feedback/PhaseBanner';
 import { Button } from '@digigov/ui/form/Button';
 
 export interface CodeBlockProps extends BaseProps<'div'> {
-  language?: 'javascript' | 'bash' | 'xml' | 'python' | 'markdown';
-  copyToClipboard?: true | false;
-  highlighted?: true | false;
-  showLineNumbers?: true | false;
+  language?: 'javascript' | 'bash' | 'xml' | 'python' | 'markdown' | 'json';
+  copyToClipboard?: boolean;
+  highlighted?: boolean;
+  showLineNumbers?: boolean;
   phaseBannerTagName?: string;
   highlightLines?: number[];
 }
@@ -29,6 +30,7 @@ const languageMap = {
   bash: bash,
   xml: xml,
   markdown: markdown,
+  json: json,
 };
 
 const addLineNumbers = (code: string, highlightLines: number[]): string => {
@@ -80,7 +82,7 @@ export const CodeBlock: React.FC<CodeBlockProps> = React.forwardRef(
       <CodeBlockContainer ref={ref} {...props}>
         <CodeBlockHeader
           justify={
-            phaseBannerTagName && copyToClipboard ? 'spaceBetween' : 'end'
+            phaseBannerTagName && copyToClipboard ? 'space-between' : 'end'
           }
         >
           {phaseBannerTagName && (

package/src/typography/Heading/{index.mdx → doc.mdx}

@@ -3,13 +3,11 @@ id: heading
 title: Heading
 ---
 
+# Heading
+
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Heading"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/typography/Heading/__stories__/Default.tsx" />
 
 ## API
 

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

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

package/src/typography/HeadingCaption/{index.mdx → doc.mdx}

@@ -3,16 +3,16 @@ id: heading-caption
 title: HeadingCaption
 ---
 
+# HeadingCaption
+
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/HeadingCaption"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/typography/HeadingCaption/__stories__/Default.tsx" />
 
 ### Nested caption to title
 
+<code src="@digigov/ui/typography/HeadingCaption/__stories__/NestedToTitle.tsx" />
+
 ## API
 
 See below for a complete reference to all of the props  available to the components mentioned here.

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

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

package/src/typography/Hint/{index.mdx → doc.mdx}

@@ -3,21 +3,15 @@ id: hint
 title: Hint
 ---
 
+# Hint
+
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Hint"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/typography/Hint/__stories__/Default.tsx" />
 
 ### Font sizes
 
-<Story
-  packageName="@digigov/ui"
-  component="typography/Hint"
-  story="FontSizes.tsx"
-/>
+<code src="@digigov/ui/typography/NormalText/__stories__/FontSizes.tsx" />
 
 ## API
 

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

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

package/src/typography/NormalText/doc.mdx

@@ -0,0 +1,30 @@
+---
+id: normal-text
+title: NormalText
+---
+
+# NormalText
+
+## How to use
+
+<code src="@digigov/ui/typography/NormalText/__stories__/Default.tsx" />
+
+### Variants
+
+<code src="@digigov/ui/typography/NormalText/__stories__/Variants.tsx" />
+
+## Font override classes
+
+### Font size
+
+<code src="@digigov/ui/typography/NormalText/__stories__/FontSizes.tsx" />
+
+### Font weight
+
+<code src="@digigov/ui/typography/NormalText/__stories__/FontWeight.tsx" />
+
+## API
+
+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

@@ -1,32 +1,33 @@
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 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>
-  )
+    <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' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/typography/Paragraph/doc.mdx

@@ -0,0 +1,34 @@
+---
+id: paragraph
+title: Paragraph
+---
+
+# Paragraph
+
+## How to use
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/Default.tsx" />
+
+### Lead paragraph
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/LeadVariant.tsx" />
+
+### Small paragraph
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/SmallVariant.tsx" />
+
+## Font override classes
+
+### Font size
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/FontSizes.tsx" />
+
+### Font weight
+
+<code src="@digigov/ui/typography/Paragraph/__stories__/FontWeight.tsx" />
+
+## API
+
+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

@@ -1,36 +1,37 @@
 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';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 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>
-  )
+    <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' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/typography/Typography/doc.mdx

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

package/src/typography/Typography/index.tsx

@@ -1,4 +1,4 @@
 import Typography from '@digigov/react-core/Typography';
 
 export * from '@digigov/react-core/Typography';
-export default Typography;
+export default Typography;

package/src/utils/Base/index.tsx

@@ -1,4 +1,5 @@
 export * from '@digigov/react-core/Base';
 import Base from '@digigov/react-core/Base';
+export { basePropGenerator } from '@digigov/react-core/Base/utils';
 
 export default Base;

package/src/utils/VisuallyHidden/{index.mdx → doc.mdx}

@@ -3,6 +3,8 @@ id: visually-hidden
 title: VisuallyHidden
 ---
 
+# VisuallyHidden
+
 Use this component to convey meaning to people using screen readers, helping
 them access information and context.
 
@@ -10,12 +12,7 @@ VisuallyHidden is a web accessibility technique used to hide content from the vi
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="utils/VisuallyHidden"
-  story="Default.tsx"
-/>
-
+<code src="@digigov/ui/utils/VisuallyHidden/__stories__/Default.tsx" />
 
 ## API
 

package/src/utils/VisuallyHidden/index.test.tsx

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

package/src/utils/hooks/useDebounce.ts

@@ -12,7 +12,7 @@ export const useDebounceCallback = <CallbackArgs extends any[]>(
   // Cleans up pending timeouts when the deps change
   React.useEffect(
     () => () => {
-      timeout.current && clearTimeout(timeout.current);
+      if (timeout.current) clearTimeout(timeout.current);
       timeout.current = void 0;
     },
     deps
@@ -27,11 +27,11 @@ export const useDebounceCallback = <CallbackArgs extends any[]>(
       timeout.current = setTimeout(() => {
         timeout.current = void 0;
       }, wait);
-      // eslint-disable-next-line prefer-spread
+
       return storedCallback.current.apply(null, args as any);
     }
     // Clear the timeout every call and start waiting again
-    current && clearTimeout(current);
+    if (current) clearTimeout(current);
     // Waits for `wait` before invoking the callback
     timeout.current = setTimeout(() => {
       timeout.current = void 0;
@@ -40,7 +40,7 @@ export const useDebounceCallback = <CallbackArgs extends any[]>(
   }, deps);
 };
 
-export const useDebounce = <State extends any>(
+export const useDebounce = <State>(
   initialState: State | (() => State),
   wait?: number,
   leading?: boolean

package/src/utils/hooks/useLatest.ts

@@ -1,7 +1,7 @@
 // copied from https://github.com/jaredLunde/react-hook/blob/master/packages/latest/src/index.tsx
 import * as React from 'react';
 
-const useLatest = <T extends any>(current: T) => {
+const useLatest = <T>(current: T) => {
   const storedValue = React.useRef(current);
   React.useEffect(() => {
     storedValue.current = current;