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

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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

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

package/src/layouts/Stack/doc.mdx

@@ -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

@@ -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();
 });
-