@digigov/ui 2.0.0-b4cd6916 → 2.0.0-d0adc9fb

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

@@ -7,21 +7,13 @@ title: FileUpload
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/FileUpload"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/FileUpload/__stories__/Default.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/FileUpload"
-  story="WithErrorMessage.tsx"
-/>
+<code src="@digigov/ui/form/FileUpload/__stories__/WithErrorMessage.tsx" />
 
 ## API
 

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

@@ -7,48 +7,30 @@ title: RadioContainer
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/Default.tsx" />
 
-### If you’re asking more than one question on the page
+### For multiple questions
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="MultipleQuestions.tsx"
-/>
+If you’re asking more than one question on the page, you can display the question's title using `<FieldsetLegend size="sm">`.
+
+<code src="@digigov/ui/form/RadioContainer/__stories__/MultipleQuestions.tsx" />
 
 ### Inline radios
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="Inline.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/Inline.tsx" />
 
 ### Checkbox items with hints
 
 You can add hints to checkbox items to provide additional information about the options.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithHints.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/WithHints.tsx" />
 
 ### RadioContainer items with a text divider
 
 If one or more of your radio options is different from the others, it can help users if you separate them using a text divider.
 The text is usually the word ‘or’.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="NoneAnswer.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/NoneAnswer.tsx" />
 
 ## Conditionally revealing a related question
 
@@ -56,21 +38,13 @@ You can ask the user a related question when they select a particular checkbox,
 
 This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="ConditionalReveal.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/ConditionalReveal.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/RadioContainer"
-  story="WithErrorMessage.tsx"
-/>
+<code src="@digigov/ui/form/RadioContainer/__stories__/WithErrorMessage.tsx" />
 
 ## Accessibility
 

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,20 @@
+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/SearchContainer/__stories__/Default';
+
+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/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/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/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';
 

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

@@ -7,19 +7,13 @@ title: TextInput
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/Default.tsx" />
 
-### If you’re asking more than one question on the page
+### For multiple questions
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="MultipleQuestions.tsx"
-/>
+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/TextInput/__stories__/MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -29,59 +23,33 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FixedWidths.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FluidWidths.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/FluidWidths.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.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithHint.tsx"
-/>
-
-## Numbers
+<code src="@digigov/ui/form/TextInput/__stories__/WithHint.tsx" />
 
-### Asking for whole numbers
+### Asking for numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="AskingForNumbers.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/AskingForNumbers.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithErrorMessage.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="DisabledInput.tsx"
-/>
+<code src="@digigov/ui/form/TextInput/__stories__/DisabledInput.tsx" />
 
 ## API
 

package/src/i18n/index.tsx

@@ -10,6 +10,9 @@ export const defaultTranslate = (
   key: string,
   context?: Record<string, any>
 ): string => {
+  if (typeof key !== 'string') {
+    return key;
+  }
   try {
     if (key.split('.').length > 0) {
       return key.split('.').reduce((locale, path) => {
@@ -33,7 +36,7 @@ export const defaultTranslate = (
     } else {
       return key;
     }
-  } catch (err) {
+  } catch {
     console.error(`Translation key \`${key}\` not found`);
     return key;
   }
@@ -48,7 +51,17 @@ export const I18NProvider: React.FC<I18NContextProps> = ({
   ...props
 }: I18NContextProps) => {
   return (
-    <I18NContext.Provider value={{ t, ...props }}>
+    <I18NContext.Provider
+      value={{
+        t: (...args) => {
+          if (typeof args[0] !== 'string') {
+            return args[0];
+          }
+          return t(...args);
+        },
+        ...props,
+      }}
+    >
       {children}
     </I18NContext.Provider>
   );