npm - @digigov/ui - Versions diffs - 2.0.0-2445d5cb → 2.0.0-254f7786 - Mend

@digigov/ui 2.0.0-2445d5cb → 2.0.0-254f7786

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 (1163) hide show

package/src/layouts/Basic/__snapshots__/index.spec.tsx.snap CHANGED Viewed

@@ -1,109 +1,37 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside
-children  1`] = `
-<ForwardRef(Layout)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-layout--full-height ds-layout"
-  >
+exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside children 1`] = `
+<body>
+  <div>
     <div
-      className="ds-layout--full-height ds-layout"
+      class="ds-layout ds-layout--full-height"
     >
-      <ForwardRef(Top)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-top"
+      <div
+        class="ds-top"
+      >
+        Header content
+      </div>
+      <div
+        class="ds-container ds-grid ds-gap-sm-12"
+      >
+        <main
+          class="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
+          id="main-content"
         >
-          <div
-            className="ds-top"
-          >
-            Header content
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(Top)>
-      <withDeprecationComponent>
-        <ForwardRef(Container)>
-          <ForwardRef(Grid)
-            className="ds-container"
-            container={true}
-            spacing={
-              Object {
-                "sm": 12,
-              }
-            }
-          >
-            <ForwardRef(Base)
-              as="div"
-              className="ds-container ds-gap-sm-12 ds-grid"
-            >
-              <div
-                className="ds-container ds-gap-sm-12 ds-grid"
-              >
-                <ForwardRef(Main)>
-                  <ForwardRef(Grid)
-                    as="main"
-                    className="ds-main"
-                    id="main-content"
-                    item={true}
-                    md={8}
-                    xs={12}
-                  >
-                    <ForwardRef(Base)
-                      as="main"
-                      className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
-                      id="main-content"
-                    >
-                      <main
-                        className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
-                        id="main-content"
-                      >
-                        Main content
-                      </main>
-                    </ForwardRef(Base)>
-                  </ForwardRef(Grid)>
-                </ForwardRef(Main)>
-                <withDeprecationComponent>
-                  <ForwardRef(Aside)>
-                    <ForwardRef(Grid)
-                      as="aside"
-                      className="ds-aside"
-                      item={true}
-                      md={4}
-                      spacing={4}
-                      xs={12}
-                    >
-                      <ForwardRef(Base)
-                        as="aside"
-                        className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
-                      >
-                        <aside
-                          className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
-                        >
-                          Side content
-                        </aside>
-                      </ForwardRef(Base)>
-                    </ForwardRef(Grid)>
-                  </ForwardRef(Aside)>
-                </withDeprecationComponent>
-              </div>
-            </ForwardRef(Base)>
-          </ForwardRef(Grid)>
-        </ForwardRef(Container)>
-      </withDeprecationComponent>
-      <ForwardRef(Bottom)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-bottom"
+          Main content
+        </main>
+        <aside
+          class="ds-aside ds-aside--sticky xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
         >
-          <div
-            className="ds-bottom"
-          >
-            Bottom content
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(Bottom)>
+          Side content
+        </aside>
+      </div>
+      <div
+        class="ds-bottom"
+      >
+        Bottom content
+      </div>
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(Layout)>
+  </div>
+</body>
 `;

package/src/layouts/Basic/__stories__/WithBasicLayout.tsx CHANGED Viewed

@@ -1,10 +1,10 @@
 import React from 'react';
+import BasicLayout from '@digigov/ui/layouts/Basic';
 import { Aside } from '@digigov/ui/layouts/Basic/Aside';
+import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
-import BasicLayout from '@digigov/ui/layouts/Basic';
 import { Top } from '@digigov/ui/layouts/Basic/Top';
-import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 export const WithBasicLayout = () => (
   <BasicLayout>

package/src/layouts/Basic/{index.mdx → doc.mdx} RENAMED Viewed

@@ -12,26 +12,15 @@ Content and Bottom components.
 ### Default layout
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/__stories__/Default.tsx" />
 ### Two thirds one third columns layout
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="TwoThirdsOneThirdColumns.tsx"
-/>
-  ### Multiple rows lyout
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="MultipleRowsLayout.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.tsx" />
+### Multiple rows layout
+<code src="@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout.tsx" />
 ## API

package/src/layouts/Basic/index.spec.tsx CHANGED Viewed

@@ -9,7 +9,7 @@ import BasicLayout, {
   Bottom,
 } from '@digigov/ui/layouts/Basic';
-it('renders the BasicLayout with Top, Container, Bottom, Main and Aside children ', () => {
+it('renders the BasicLayout with Top, Container, Bottom, Main and Aside children', () => {
   const jsx = (
     <BasicLayout>
       <Top>Header content</Top>

package/src/layouts/Basic/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 { Default } from '@digigov/ui/layouts/Basic/__stories__/Default';
 import { MultipleRowsLayout } from '@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout';
 import { TwoThirdsOneThirdColumns } from '@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns';
 import { WithBasicLayout } from '@digigov/ui/layouts/Basic/__stories__/WithBasicLayout';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 test('renders the All Basic variants', async ({ mount, page }) => {
   await mount(
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="MultipleRowsLayout">
-      <MultipleRowsLayout />
-    </TestVariant>
-    <TestVariant title="TwoThirdsOneThirdColumns">
-      <TwoThirdsOneThirdColumns />
-    </TestVariant>
-    <TestVariant title="WithBasicLayout">
-      <WithBasicLayout />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="MultipleRowsLayout">
+        <MultipleRowsLayout />
+      </TestVariant>
+      <TestVariant title="TwoThirdsOneThirdColumns">
+        <TwoThirdsOneThirdColumns />
+      </TestVariant>
+      <TestVariant title="WithBasicLayout">
+        <WithBasicLayout />
+      </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/layouts/Basic/index.tsx CHANGED Viewed

@@ -4,7 +4,6 @@ export * from '@digigov/ui/layouts/Basic/Aside';
 export * from '@digigov/ui/layouts/Basic/Main';
 export * from '@digigov/ui/layouts/Basic/Container';
 export * from '@digigov/ui/layouts/Basic/Bottom';
-export * from '@digigov/ui/layouts/Basic/Masthead';
 import Layout from '@digigov/react-core/Layout';
 export default Layout;

package/src/layouts/Grid/doc.mdx ADDED Viewed

@@ -0,0 +1,26 @@
+---
+id: grid
+title: Grid
+---
+# Grid
+## How to use
+Grid component is a  layout system that allows you to design complex web page layouts with rows and columns.
+<code src="@digigov/ui/layouts/Grid/__stories__/Default.tsx" />
+### Responsive spacing Grid
+<code src="@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing.tsx" />
+### Inline Grid
+<code src="@digigov/ui/layouts/Grid/__stories__/Inline.tsx" />
+## API
+See below for a complete reference to all of the props  available to the components mentioned here.
+<ComponentProps componentName={["Grid"]} />

package/src/layouts/Grid/index.test.tsx CHANGED Viewed

@@ -1,28 +1,29 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/layouts/Grid/__stories__/Default';
 import { Inline } from '@digigov/ui/layouts/Grid/__stories__/Inline';
 import { ResponsiveSpacing } from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 test('renders the All Grid variants', async ({ mount, page }) => {
   await mount(
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Inline">
-      <Inline />
-    </TestVariant>
-    <TestVariant title="ResponsiveSpacing">
-      <ResponsiveSpacing />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Inline">
+        <Inline />
+      </TestVariant>
+      <TestVariant title="ResponsiveSpacing">
+        <ResponsiveSpacing />
+      </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/layouts/Screen/Screen.stories.js CHANGED Viewed

@@ -7,4 +7,4 @@ export default {
 export { Default } from '@digigov/ui/layouts/Screen/__stories__/Default';
 export { SpecificScreenSize } from '@digigov/ui/layouts/Screen/__stories__/SpecificScreenSize';
 export { ScreenDown } from '@digigov/ui/layouts/Screen/__stories__/ScreenDown';
-export { ScreenUp } from '@digigov/ui/layouts/Screen/__stories__/ScreenUp';
+export { ScreenUp } from '@digigov/ui/layouts/Screen/__stories__/ScreenUp';

package/src/layouts/Screen/__stories__/Default.tsx CHANGED Viewed

@@ -4,16 +4,16 @@ import { Screen } from '@digigov/ui/layouts/Screen';
 export const Default = () => {
   return (
     <>
-      <Screen size='mdUp'>
+      <Screen size="mdUp">
         <div>This is a mdUp screen</div>
       </Screen>
-      <Screen size='mdDown'>
+      <Screen size="mdDown">
         <div>This is a mdDown screen</div>
       </Screen>
-      <Screen size='xs'>
+      <Screen size="xs">
         <div>This is a xs screen</div>
       </Screen>
-      <Screen size='sm'>
+      <Screen size="sm">
         <div>This is a sm screen</div>
       </Screen>
     </>

package/src/layouts/Screen/__stories__/ScreenDown.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { Screen } from '@digigov/ui/layouts/Screen';
 export const ScreenDown = () => {
   return (
-    <Screen size='mdDown'>
+    <Screen size="mdDown">
       <div>This is a mdDown screen</div>
     </Screen>
   );

package/src/layouts/Screen/__stories__/ScreenUp.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { Screen } from '@digigov/ui/layouts/Screen';
 export const ScreenUp = () => {
   return (
-    <Screen size='mdUp'>
+    <Screen size="mdUp">
       <div>This is a mdUp screen</div>
     </Screen>
   );

package/src/layouts/Screen/__stories__/SpecificScreenSize.tsx CHANGED Viewed

@@ -3,7 +3,7 @@ import { Screen } from '@digigov/ui/layouts/Screen';
 export const SpecificScreenSize = () => {
   return (
-    <Screen size='md'>
+    <Screen size="md">
       <div>This is a md screen</div>
     </Screen>
   );

package/src/layouts/Screen/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 { Default } from '@digigov/ui/layouts/Screen/__stories__/Default';
 import { ScreenDown } from '@digigov/ui/layouts/Screen/__stories__/ScreenDown';
 import { ScreenUp } from '@digigov/ui/layouts/Screen/__stories__/ScreenUp';
 import { SpecificScreenSize } from '@digigov/ui/layouts/Screen/__stories__/SpecificScreenSize';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 test('renders the All Screen variants', async ({ mount, page }) => {
   await mount(
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="ScreenDown">
-      <ScreenDown />
-    </TestVariant>
-    <TestVariant title="ScreenUp">
-      <ScreenUp />
-    </TestVariant>
-    <TestVariant title="SpecificScreenSize">
-      <SpecificScreenSize />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="ScreenDown">
+        <ScreenDown />
+      </TestVariant>
+      <TestVariant title="ScreenUp">
+        <ScreenUp />
+      </TestVariant>
+      <TestVariant title="SpecificScreenSize">
+        <SpecificScreenSize />
+      </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/layouts/Screen/index.tsx CHANGED Viewed

@@ -52,4 +52,3 @@ export const Screen: React.FC<ScreenProps> = ({ size, children }) => {
 };
 export default Screen;

package/src/layouts/Stack/doc.mdx ADDED Viewed

@@ -0,0 +1,38 @@
+---
+id: stack
+title: Stack
+---
+# Stack
+Use the Stack component in order to arrange elements vertically or horizontally.
+## How to use
+<code src="@digigov/ui/layouts/Stack/__stories__/Default.tsx" />
+### With align items
+<code src="@digigov/ui/layouts/Stack/__stories__/AlignItems.tsx" />
+### With justify content
+<code src="@digigov/ui/layouts/Stack/__stories__/JustifyContent.tsx" />
+### With no wrap
+<code src="@digigov/ui/layouts/Stack/__stories__/NoWrap.tsx" />
+### In row
+<code src="@digigov/ui/layouts/Stack/__stories__/Row.tsx" />
+### With spacing
+<code src="@digigov/ui/layouts/Stack/__stories__/Spacing.tsx" />
+## API
+See below for a complete reference to all of the props available to the components mentioned here.
+<ComponentProps componentName={["Stack"]} />

package/src/layouts/Stack/index.test.tsx CHANGED Viewed

@@ -1,40 +1,41 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { AlignItems } from '@digigov/ui/layouts/Stack/__stories__/AlignItems';
 import { Default } from '@digigov/ui/layouts/Stack/__stories__/Default';
 import { JustifyContent } from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
 import { NoWrap } from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
 import { Row } from '@digigov/ui/layouts/Stack/__stories__/Row';
 import { Spacing } from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 test('renders the All Stack variants', async ({ mount, page }) => {
   await mount(
-  <div>
-    <TestVariant title="AlignItems">
-      <AlignItems />
-    </TestVariant>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="JustifyContent">
-      <JustifyContent />
-    </TestVariant>
-    <TestVariant title="NoWrap">
-      <NoWrap />
-    </TestVariant>
-    <TestVariant title="Row">
-      <Row />
-    </TestVariant>
-    <TestVariant title="Spacing">
-      <Spacing />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="AlignItems">
+        <AlignItems />
+      </TestVariant>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="JustifyContent">
+        <JustifyContent />
+      </TestVariant>
+      <TestVariant title="NoWrap">
+        <NoWrap />
+      </TestVariant>
+      <TestVariant title="Row">
+        <Row />
+      </TestVariant>
+      <TestVariant title="Spacing">
+        <Spacing />
+      </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/navigation/BackLink/{index.mdx → doc.mdx} RENAMED Viewed

@@ -9,11 +9,7 @@ Use the back link component to help users go back to the previous page in a mult
 ## How to use
-<Story
-  packageName="@digigov/ui"
-  component="navigation/BackLink"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/navigation/BackLink/__stories__/Default.tsx" />
 ## API

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

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