@digigov/ui 2.0.0-113e6661 → 2.0.0-2177f152

package/src/form/RadioContainer/interaction.test.tsx

@@ -5,27 +5,28 @@ import { Default } from '@digigov/ui/form/RadioContainer/__stories__/Default';
 import { WithHints } from '@digigov/ui/form/RadioContainer/__stories__/WithHints';
 
 test('renders the Default Navigate with keyboard', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.keyboard.press("Tab");
- await page.keyboard.press("Space");
- await page.keyboard.press("ArrowDown");
+  await page.keyboard.press('Tab');
+  await page.keyboard.press('Space');
+  await page.keyboard.press('ArrowDown');
 
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  
-
 
 test('renders the WithHints Click first', async ({ mount, page }) => {
-  await mount(
-    <WithHints />
-  )
+  await mount(<WithHints />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>fieldset>div>div:nth-child(1)>label>input").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page
+    .locator('#root>div>fieldset>div>div:nth-child(1)>label>input')
+    .click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/form/SearchContainer/SearchContainer.stories.js

@@ -0,0 +1,9 @@
+import SearchContainer from '@digigov/ui/form/SearchContainer';
+export default {
+  title: 'Digigov UI/form/SearchContainer',
+  description:
+    'The SearchContainer component encapsulates the TextInput and SearchButton, providing a comprehensive search functionality.',
+  component: SearchContainer,
+  displayName: 'SearchContainer',
+};
+export { Default } from '@digigov/ui/form/SearchContainer/__stories__/Default';

package/src/form/SearchContainer/__stories__/Default.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import {
+  SearchContainer,
+  SearchButton,
+} from '@digigov/ui/form/SearchContainer';
+import { TextInput } from '@digigov/ui/form/TextInput';
+
+export const Default = () => (
+  <SearchContainer>
+    <TextInput />
+    <SearchButton />
+  </SearchContainer>
+);
+
+export default Default;

package/src/form/SearchContainer/doc.mdx

@@ -0,0 +1,16 @@
+---
+id: search-container
+title: SearchContainer
+---
+
+# SearchContainer
+
+## How to use
+
+<code src="@digigov/ui/form/SearchContainer/__stories__/Default.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["SearchContainer","SearchButton"]} /> 

package/src/form/SearchContainer/index.test.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { test, expect } from '@playwright/experimental-ct-react';
+import { Default } from '@digigov/ui/form/SearchContainer/__stories__/Default';
+import TestVariant from '@digigov/ui/utils/TestVariant';
+
+test('renders the All SearchContainer 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/form/SelectContainer/{index.mdx → doc.mdx}

@@ -5,37 +5,21 @@ title: SelectContainer
 
 # SelectContainer
 
-```bash
-import SelectContainer from '@digigov/ui/form/SelectContainer';
-```
-
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/SelectContainer/__stories__/Default.tsx" />
 
 ### SelectContainer with hints
 
 You can add hints to select items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="WithHint.tsx"
-/>
+<code src="@digigov/ui/form/SelectContainer/__stories__/WithHint.tsx" />
 
 ### Disabled input
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SelectContainer"
-  story="DisabledInput.tsx"
-/>
+<code src="@digigov/ui/form/SelectContainer/__stories__/DisabledInput.tsx" />
 
 ## Accessibility
 

package/src/form/SelectContainer/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/form/SelectContainer/__stories__/Default';
 import { Dense } from '@digigov/ui/form/SelectContainer/__stories__/Dense';
 import { DisabledInput } from '@digigov/ui/form/SelectContainer/__stories__/DisabledInput';
 import { WithHint } from '@digigov/ui/form/SelectContainer/__stories__/WithHint';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All SelectContainer variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="DisabledInput">
-      <DisabledInput />
-    </TestVariant>
-    <TestVariant title="WithHint">
-      <WithHint />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="DisabledInput">
+        <DisabledInput />
+      </TestVariant>
+      <TestVariant title="WithHint">
+        <WithHint />
+      </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/form/SelectContainer/interaction.test.tsx

@@ -3,13 +3,16 @@ import { test, expect } from '@playwright/experimental-ct-react';
 
 import { Default } from '@digigov/ui/form/SelectContainer/__stories__/Default';
 
-test('renders the Default SelectContainer with mouse', async ({ mount, page }) => {
-  await mount(
-    <Default />
-  )
+test('renders the Default SelectContainer with mouse', async ({
+  mount,
+  page,
+}) => {
+  await mount(<Default />);
   await page.evaluate(() => document.fonts.ready);
- await page.locator("#root>div>label>select").click();
-  const screenshot = await page.screenshot({ fullPage: true, animations: 'disabled' });
+  await page.locator('#root>div>label>select').click();
+  const screenshot = await page.screenshot({
+    fullPage: true,
+    animations: 'disabled',
+  });
   expect(screenshot).toMatchSnapshot();
 });
-  

package/src/form/SingleCharacterInputs/{index.mdx → doc.mdx}

@@ -7,21 +7,13 @@ title: SingleCharacterInputs
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SingleCharacterInputs"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/Default.tsx" />
 
 ### Error message
 
-If you’re highlighting the whole date, style all the fields like this:
+If you’re highlighting all the digits of the password, style the fields like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/SingleCharacterInputs"
-  story="WithDefaultError.tsx"
-/>
+<code src="@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError.tsx" />
 
 ## API
 

package/src/form/SingleCharacterInputs/index.test.tsx

@@ -1,32 +1,36 @@
 import React from 'react';
 import { test, expect } from '@playwright/experimental-ct-react';
-import TestVariant from '@digigov/ui/utils/TestVariant'
 import { Default } from '@digigov/ui/form/SingleCharacterInputs/__stories__/Default';
 import { WithDefaultError } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithDefaultError';
 import { WithErrorMessageInvalidCode } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageInvalidCode';
 import { WithErrorMessageLessDigit } from '@digigov/ui/form/SingleCharacterInputs/__stories__/WithErrorMessageLessDigit';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
-test('renders the All SingleCharacterInputs variants', async ({ mount, page }) => {
+test('renders the All SingleCharacterInputs variants', async ({
+  mount,
+  page,
+}) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="WithDefaultError">
-      <WithDefaultError />
-    </TestVariant>
-    <TestVariant title="WithErrorMessageInvalidCode">
-      <WithErrorMessageInvalidCode />
-    </TestVariant>
-    <TestVariant title="WithErrorMessageLessDigit">
-      <WithErrorMessageLessDigit />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="WithDefaultError">
+        <WithDefaultError />
+      </TestVariant>
+      <TestVariant title="WithErrorMessageInvalidCode">
+        <WithErrorMessageInvalidCode />
+      </TestVariant>
+      <TestVariant title="WithErrorMessageLessDigit">
+        <WithErrorMessageLessDigit />
+      </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/form/TextArea/__stories__/Default.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 
 export const Default = () => (

package/src/form/TextArea/__stories__/DisabledInput.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextArea/__stories__/LimitedCharacters.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextArea/__stories__/WithDeclaredRows.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextArea/__stories__/WithErrorMessage.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextArea/__stories__/WithHint.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextArea } from '@digigov/ui/form/TextArea';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextArea/doc.mdx

@@ -0,0 +1,48 @@
+---
+id: text-area
+title: TextArea
+---
+
+# TextArea
+
+## How to use
+
+<code src="@digigov/ui/form/TextArea/__stories__/Default.tsx" />
+
+### Use appropriately-sized textarea inputs
+
+<code src="@digigov/ui/form/TextArea/__stories__/WithDeclaredRows.tsx" />
+
+### For multiple questions
+
+If you’re asking more than one question on the page, you can display directly the question's title without using the component `LabelTitle`.
+
+<code src="@digigov/ui/form/TextArea/__stories__/MultipleQuestions.tsx" />
+
+### Limiting the number of characters
+
+If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
+
+<code src="@digigov/ui/form/TextArea/__stories__/LimitedCharacters.tsx" />
+
+### Hint text
+
+Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
+
+<code src="@digigov/ui/form/TextArea/__stories__/WithHint.tsx" />
+
+### Error message
+
+Error messages should be styled like this:
+
+<code src="@digigov/ui/form/TextArea/__stories__/WithErrorMessage.tsx" />
+
+### Disabled input
+
+<code src="@digigov/ui/form/TextArea/__stories__/DisabledInput.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["TextArea"]} /> 

package/src/form/TextArea/index.test.tsx

@@ -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/form/TextArea/__stories__/Default';
 import { Dense } from '@digigov/ui/form/TextArea/__stories__/Dense';
 import { DisabledInput } from '@digigov/ui/form/TextArea/__stories__/DisabledInput';
@@ -9,40 +8,42 @@ import { MultipleQuestions } from '@digigov/ui/form/TextArea/__stories__/Multipl
 import { WithDeclaredRows } from '@digigov/ui/form/TextArea/__stories__/WithDeclaredRows';
 import { WithErrorMessage } from '@digigov/ui/form/TextArea/__stories__/WithErrorMessage';
 import { WithHint } from '@digigov/ui/form/TextArea/__stories__/WithHint';
+import TestVariant from '@digigov/ui/utils/TestVariant';
 
 test('renders the All TextArea variants', async ({ mount, page }) => {
   await mount(
-    
-  <div>
-    <TestVariant title="Default">
-      <Default />
-    </TestVariant>
-    <TestVariant title="Dense">
-      <Dense />
-    </TestVariant>
-    <TestVariant title="DisabledInput">
-      <DisabledInput />
-    </TestVariant>
-    <TestVariant title="LimitedCharacters">
-      <LimitedCharacters />
-    </TestVariant>
-    <TestVariant title="MultipleQuestions">
-      <MultipleQuestions />
-    </TestVariant>
-    <TestVariant title="WithDeclaredRows">
-      <WithDeclaredRows />
-    </TestVariant>
-    <TestVariant title="WithErrorMessage">
-      <WithErrorMessage />
-    </TestVariant>
-    <TestVariant title="WithHint">
-      <WithHint />
-    </TestVariant>
-  </div>
-  )
+    <div>
+      <TestVariant title="Default">
+        <Default />
+      </TestVariant>
+      <TestVariant title="Dense">
+        <Dense />
+      </TestVariant>
+      <TestVariant title="DisabledInput">
+        <DisabledInput />
+      </TestVariant>
+      <TestVariant title="LimitedCharacters">
+        <LimitedCharacters />
+      </TestVariant>
+      <TestVariant title="MultipleQuestions">
+        <MultipleQuestions />
+      </TestVariant>
+      <TestVariant title="WithDeclaredRows">
+        <WithDeclaredRows />
+      </TestVariant>
+      <TestVariant title="WithErrorMessage">
+        <WithErrorMessage />
+      </TestVariant>
+      <TestVariant title="WithHint">
+        <WithHint />
+      </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/form/TextInput/__stories__/AskingForNumbers.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextInput/__stories__/Default.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const Default = () => (

package/src/form/TextInput/__stories__/DisabledInput.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextInput/__stories__/DisabledInputWithValue.tsx

@@ -1,10 +1,9 @@
 import React from 'react';
+import { LockIcon } from '@digigov/react-icons';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
-import { LockIcon } from '@digigov/react-icons';
 
 export const DisabledInputWithValue = () => (
   <FieldContainer>
@@ -16,9 +15,9 @@ export const DisabledInputWithValue = () => (
         value={'Μάριος'}
         disabled
       ></TextInput>
-      <Hint id="input-hint" size='sm'>
+      <Hint id="input-hint" size="sm">
         <LockIcon mr={1} mb={1} />
-       Πεδίο μόνο για προβολή
+        Πεδίο μόνο για προβολή
       </Hint>
     </LabelContainer>
   </FieldContainer>

package/src/form/TextInput/__stories__/FixedWidths.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FixedWidths = () => (

package/src/form/TextInput/__stories__/FluidWidths.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 
 export const FluidWidths = () => (

package/src/form/TextInput/__stories__/WithErrorMessage.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
 import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';
 

package/src/form/TextInput/__stories__/WithHint.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { FieldContainer } from '@digigov/ui/form/FieldContainer';
-import { LabelContainer } from '@digigov/ui/form/LabelContainer';
-import { LabelTitle } from '@digigov/ui/form/LabelContainer';
+import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
 import { TextInput } from '@digigov/ui/form/TextInput';
 import { Hint } from '@digigov/ui/typography/Hint';