npm - @digigov/ui - Versions diffs - 2.0.0-85c27c19 → 2.0.0-aefd0709 - Mend

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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1100) hide show

package/src/content/Accordion/index.test.tsx CHANGED Viewed

@@ -1,32 +1,33 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Auto } from '@digigov/ui/content/Accordion/__stories__/Auto';
 import { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
 import { WithHints } from '@digigov/ui/content/Accordion/__stories__/WithHints';
 import { WithHook } from '@digigov/ui/content/Accordion/__stories__/WithHook';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 test('renders the All Accordion variants', async ({ mount, page }) => {
   await mount(
-  <div>
-    <TestVariant title="Auto">
-      <Auto />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="WithHints">
-      <WithHints />
-    </TestVariant>
-    <TestVariant title="WithHook">
-      <WithHook />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Auto">
+        <Auto />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="WithHints">
+        <WithHints />
+      </TestVariant>
+      <TestVariant title="WithHook">
+        <WithHook />
+      </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/content/Accordion/index.tsx CHANGED Viewed

@@ -1,4 +1,3 @@
-/* eslint-disable react-hooks/exhaustive-deps */
 import Accordion from '@digigov/react-core/Accordion';
 export * from '@digigov/react-core/Accordion';
@@ -8,6 +7,5 @@ export * from '@digigov/react-core/AccordionSectionContent';
 export * from '@digigov/react-core/AccordionSectionSummary';
 export * from '@digigov/react-core/AccordionSectionSummaryHeading';
 export * from '@digigov/ui/content/Accordion/hooks';
-export * from '@digigov/ui/content/Accordion/auto';
 export default Accordion;

package/src/content/Accordion/interaction.test.tsx CHANGED Viewed

@@ -4,12 +4,12 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/content/Accordion/__stories__/Default';
 test('renders the Default Mouse navigation', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>details:nth-child(2)>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>div>details:nth-child(2)>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });

package/src/content/Blockquote/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -1,16 +1,13 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Blockquote with sample data 1`] = `
-<ForwardRef(Blockquote)>
-  <ForwardRef(Base)
-    as="blockquote"
-    className="ds-blockquote"
-  >
+<body>
+  <div>
     <blockquote
-      className="ds-blockquote"
+      class="ds-blockquote"
     >
       this is some random data
     </blockquote>
-  </ForwardRef(Base)>
-</ForwardRef(Blockquote)>
+  </div>
+</body>
 `;

package/src/content/Blockquote/{index.mdx → doc.mdx} RENAMED Viewed

@@ -11,11 +11,11 @@ The Blockquote component lets users show and hide sections of related content on
 ## How to use
-<Story
-  packageName="@digigov/ui"
-  component="content/Blockquote"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/content/Blockquote/__stories__/Default.tsx" />
+### With dense style
+<code src="@digigov/ui/content/Blockquote/__stories__/Dense.tsx" />
 ## API

package/src/content/Blockquote/index.test.tsx CHANGED Viewed

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

package/src/content/Card/doc.mdx ADDED Viewed

@@ -0,0 +1,71 @@
+---
+id: card
+title: Card
+---
+# Card
+Cards can be used to divide and organize interface content for better understandability and readability.
+When used correctly, Cards can help users to scan through vast amounts of information quicker.
+## How to use
+<code src="@digigov/ui/content/Card/__stories__/Default.tsx" />
+#### Card with gray border color
+<code src="@digigov/ui/content/Card/__stories__/WithGrayBorder.tsx" />
+#### Card with dark border color
+<code src="@digigov/ui/content/Card/__stories__/WithDarkBorder.tsx" />
+### Card with top border
+You can set the color of the Card's top border. You can choose between dark and grey color respectively. By default the top border color is grey.
+<code src="@digigov/ui/content/Card/__stories__/WithDarkBorder.tsx" />
+#### Card with grey top border
+<code src="@digigov/ui/content/Card/__stories__/WithGrayTopBorder.tsx" />
+#### Card with dark top border
+<code src="@digigov/ui/content/Card/__stories__/WithDarkTopBorder.tsx" />
+### Card with divider
+<code src="@digigov/ui/content/Card/__stories__/WithDivider.tsx" />
+### Card with actions
+<code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
+#### Card with title link
+Cards can be used without an action button, but with a clickable title.
+<code src="@digigov/ui/content/Card/__stories__/WithLink.tsx" />
+#### Card with clickable content
+You can expand the clickable area of the link to fill Card's content.
+<code src="@digigov/ui/content/Card/__stories__/WithClickableContent.tsx" />
+#### Card with button or link
+Cards also provides styles for actionable elements such as Buttons or Links.
+<code src="@digigov/ui/content/Card/__stories__/WithClickableLink.tsx" />
+#### Card with a group of actions
+<code src="@digigov/ui/content/Card/__stories__/WithGroupButton.tsx" />
+## API
+See below for a complete reference to all of the props  available to the components mentioned here.
+<ComponentProps componentName={["Card", "CardHeading", "CardContent", "CardAction"]} />

package/src/content/Card/index.test.tsx CHANGED Viewed

@@ -1,6 +1,5 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/content/Card/__stories__/Default';
 import { Dense } from '@digigov/ui/content/Card/__stories__/Dense';
 import { WithClickableContent } from '@digigov/ui/content/Card/__stories__/WithClickableContent';
@@ -12,49 +11,51 @@ import { WithGrayBorder } from '@digigov/ui/content/Card/__stories__/WithGrayBor
 import { WithGrayTopBorder } from '@digigov/ui/content/Card/__stories__/WithGrayTopBorder';
 import { WithGroupButton } from '@digigov/ui/content/Card/__stories__/WithGroupButton';
 import { WithLink } from '@digigov/ui/content/Card/__stories__/WithLink';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 test('renders the All Card variants', async ({ mount, page }) => {
   await mount(
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="WithClickableContent">
-      <WithClickableContent />
-    </TestVariant>
-    <TestVariant title="WithClickableLink">
-      <WithClickableLink />
-    </TestVariant>
-    <TestVariant title="WithDarkBorder">
-      <WithDarkBorder />
-    </TestVariant>
-    <TestVariant title="WithDarkTopBorder">
-      <WithDarkTopBorder />
-    </TestVariant>
-    <TestVariant title="WithDivider">
-      <WithDivider />
-    </TestVariant>
-    <TestVariant title="WithGrayBorder">
-      <WithGrayBorder />
-    </TestVariant>
-    <TestVariant title="WithGrayTopBorder">
-      <WithGrayTopBorder />
-    </TestVariant>
-    <TestVariant title="WithGroupButton">
-      <WithGroupButton />
-    </TestVariant>
-    <TestVariant title="WithLink">
-      <WithLink />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="WithClickableContent">
+        <WithClickableContent />
+      </TestVariant>
+      <TestVariant title="WithClickableLink">
+        <WithClickableLink />
+      </TestVariant>
+      <TestVariant title="WithDarkBorder">
+        <WithDarkBorder />
+      </TestVariant>
+      <TestVariant title="WithDarkTopBorder">
+        <WithDarkTopBorder />
+      </TestVariant>
+      <TestVariant title="WithDivider">
+        <WithDivider />
+      </TestVariant>
+      <TestVariant title="WithGrayBorder">
+        <WithGrayBorder />
+      </TestVariant>
+      <TestVariant title="WithGrayTopBorder">
+        <WithGrayTopBorder />
+      </TestVariant>
+      <TestVariant title="WithGroupButton">
+        <WithGroupButton />
+      </TestVariant>
+      <TestVariant title="WithLink">
+        <WithLink />
+      </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/content/Card/interaction.test.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { WithClickableContent } from '@digigov/ui/content/Card/__stories__/WithClickableContent';
+test('renders the WithClickableContent Click card', async ({ mount, page }) => {
+  await mount(<WithClickableContent />);
+  await page.evaluate(() => document.fonts.ready);
+  await page.locator('#root>div>div>div:nth-child(1)>a').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
+  expect(screenshot).toMatchSnapshot();
+});

package/src/content/Chip/doc.mdx ADDED Viewed

@@ -0,0 +1,34 @@
+---
+id: chip
+title: Chip
+---
+# Chip
+The Chip component can be used to represent small blocks of information.
+## How to use
+<code src="@digigov/ui/content/Chip/__stories__/Default.tsx" />
+### ClickableChip
+<code src="@digigov/ui/content/Chip/__stories__/ClickableChip.tsx" />
+### ClickableDeletableChip
+<code src="@digigov/ui/content/Chip/__stories__/ClickableDeletableChip.tsx" />
+### DeletableChip
+<code src="@digigov/ui/content/Chip/__stories__/DeletableChip.tsx" />
+### GroupOfChips
+<code src="@digigov/ui/content/Chip/__stories__/GroupOfChips.tsx" />
+## API
+See below for a complete reference to all of the props  available to the components mentioned here.
+<ComponentProps componentName={["Chip", "ChipContainer", "ChipHeading", "ChipKeyValue"]} />

package/src/content/Chip/index.test.tsx CHANGED Viewed

@@ -1,36 +1,37 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { ClickableChip } from '@digigov/ui/content/Chip/__stories__/ClickableChip';
 import { ClickableDeletableChip } from '@digigov/ui/content/Chip/__stories__/ClickableDeletableChip';
 import { Default } from '@digigov/ui/content/Chip/__stories__/Default';
 import { DeletableChip } from '@digigov/ui/content/Chip/__stories__/DeletableChip';
 import { GroupOfChips } from '@digigov/ui/content/Chip/__stories__/GroupOfChips';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 test('renders the All Chip variants', async ({ mount, page }) => {
   await mount(
-  <div>
-    <TestVariant title="ClickableChip">
-      <ClickableChip />
-    </TestVariant>
-    <TestVariant title="ClickableDeletableChip">
-      <ClickableDeletableChip />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="DeletableChip">
-      <DeletableChip />
-    </TestVariant>
-    <TestVariant title="GroupOfChips">
-      <GroupOfChips />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="ClickableChip">
+        <ClickableChip />
+      </TestVariant>
+      <TestVariant title="ClickableDeletableChip">
+        <ClickableDeletableChip />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="DeletableChip">
+        <DeletableChip />
+      </TestVariant>
+      <TestVariant title="GroupOfChips">
+        <GroupOfChips />
+      </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/content/Details/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -1,81 +1,44 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the closed Details component 1`] = `
-<ForwardRef(Details)>
-  <ForwardRef(Base)
-    as="details"
-    className="ds-details"
-  >
+<body>
+  <div>
     <details
-      className="ds-details"
+      class="ds-details"
     >
-      <ForwardRef(DetailsSummary)>
-        <ForwardRef(Base)
-          as="summary"
-          className="ds-details__summary"
-        >
-          <summary
-            className="ds-details__summary"
-          >
-            Help with nationality
-          </summary>
-        </ForwardRef(Base)>
-      </ForwardRef(DetailsSummary)>
-      <ForwardRef(DetailsContent)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-details__content"
-        >
-          <div
-            className="ds-details__content"
-          >
-            We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(DetailsContent)>
+      <summary
+        class="ds-details__summary"
+      >
+        Help with nationality
+      </summary>
+      <div
+        class="ds-details__content"
+      >
+        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
+      </div>
     </details>
-  </ForwardRef(Base)>
-</ForwardRef(Details)>
+  </div>
+</body>
 `;
 exports[`renders the open Details component 1`] = `
-<ForwardRef(Details)
-  open={true}
->
-  <ForwardRef(Base)
-    as="details"
-    className="ds-details"
-    open={true}
-  >
+<body>
+  <div>
     <details
-      className="ds-details"
-      open={true}
+      class="ds-details"
+      open=""
     >
-      <ForwardRef(DetailsSummary)>
-        <ForwardRef(Base)
-          as="summary"
-          className="ds-details__summary"
-        >
-          <summary
-            className="ds-details__summary"
-          >
-            Help with nationality
-          </summary>
-        </ForwardRef(Base)>
-      </ForwardRef(DetailsSummary)>
-      <ForwardRef(DetailsContent)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-details__content"
-        >
-          <div
-            className="ds-details__content"
-          >
-            We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(DetailsContent)>
+      <summary
+        class="ds-details__summary"
+      >
+        Help with nationality
+      </summary>
+      <div
+        class="ds-details__content"
+      >
+        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
+      </div>
     </details>
-  </ForwardRef(Base)>
-</ForwardRef(Details)>
+  </div>
+</body>
 `;

package/src/content/Details/{index.mdx → doc.mdx} RENAMED Viewed

@@ -9,11 +9,7 @@ The details component is a short link that shows more detailed help text when a
 ## How to use
-<Story
-  packageName="@digigov/ui"
-  component="content/Details"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/content/Details/__stories__/Default.tsx" />
 ## Accessibility

package/src/content/Details/index.test.tsx CHANGED Viewed

@@ -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/content/Details/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 test('renders the All Details 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/content/Details/interaction.test.tsx CHANGED Viewed

@@ -4,12 +4,12 @@ import { test, expect } from '@playwright/experimental-ct-react';
 import { Default } from '@digigov/ui/content/Details/__stories__/Default';
 test('renders the Default Open Details', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>details>summary").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>details>summary').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });

package/src/content/List/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -1,7 +1,7 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the ErrorSummary with sample data 1`] = `
-<ForwardRef(List)>
+<ForwardRef(List2)>
   this is some random warning text
-</ForwardRef(List)>
+</ForwardRef(List2)>
 `;