@digigov/ui 1.0.0-002c630d → 1.0.0-00643e1d

package/src/feedback/WarningText/WarningText.stories.js

@@ -8,3 +8,5 @@ export default {
   displayName: 'WarningText',
 };
 export * from '@digigov/ui/feedback/WarningText/__stories__/Default';
+export * from '@digigov/ui/feedback/WarningText/__stories__/AssistiveText';
+export * from '@digigov/ui/feedback/WarningText/__stories__/Dense';

package/src/feedback/WarningText/__stories__/AssistiveText.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { WarningText } from '@digigov/ui/feedback/WarningText';
+
+export const AssistiveText = () => (
+  <WarningText assistiveText='Σημαντικό'>
+    Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.
+  </WarningText>
+);
+
+export default AssistiveText;

package/src/feedback/WarningText/__stories__/Dense.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { WarningText } from '@digigov/ui/feedback/WarningText';
+
+export const Dense = () => (
+  <WarningText dense>
+    Μπορεί να σας επιβληθεί πρόστιμο έως και 5.000 ευρώ εάν δεν εγγραφείτε.
+  </WarningText>
+);
+
+export default Dense;

package/src/feedback/WarningText/index.mdx

@@ -14,11 +14,7 @@ import WarningText from '@digigov/ui/feedback/WarningText';
 You might need to rewrite the hidden text ("Προσοχή" in the example) to make it appropriate for your context.
 This will be used by screen-readers.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/WarningText"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/WarningText" story="Default.tsx" />
 
 ## API
 

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

@@ -7,7 +7,7 @@ import { FieldContainer } from '@digigov/ui/form/FieldContainer';
 export const Default = () => (
   <div>
     <FieldContainer>
-      <AutoComplete source={suggest} cellWidth="one-third" id="govgr" />
+      <AutoComplete source={suggest} width='33.3%' id="govgr" />
     </FieldContainer>
     <Button>Υποβολή</Button>
   </div>

package/src/form/AutoComplete/index.mdx

@@ -16,61 +16,33 @@ import AutoComplete from '@digigov/ui/form/AutoComplete';
 
 ### AutoComplete
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="Default.tsx" />
 
 ### AutoComplete with auto select
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithAutoSelect.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithAutoSelect.tsx" />
 
 ### AutoComplete with inline style
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithInLine.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithInLine.tsx" />
 
 ### AutoComplete with default value
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithDefaultValue.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithDefaultValue.tsx" />
 
 ### AutoComplete with placeholder
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithPlaceHolder.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithPlaceHolder.tsx" />
 
 ### AutoComplete with all option's values
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithShowAllValues.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete"story="WithShowAllValues.tsx" />
 
 ### AutoComplete with min length
 
 This is the minimum number of characters that should be entered before the autocomplete will attempt to suggest options(in above example is 2)
 
-<Story
-  packageName="@digigov/ui"
-  component="form/AutoComplete"
-  story="WithMinLength.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/AutoComplete" story="WithMinLength.tsx" />
 
 ## API
 

package/src/form/AutoComplete/index.tsx

@@ -7,13 +7,13 @@ import AutoCompleteResultList from '@digigov/react-core/AutoCompleteResultList';
 import AutoCompleteResultListItem from '@digigov/react-core/AutoCompleteResultListItem';
 import AutoCompleteWrapper from '@digigov/react-core/AutoCompleteWrapper';
 
-import DropdownArrowDown from '@digigov/react-core/DropdownArrowDown';
 import Status from '@digigov/ui/form/AutoComplete/Status';
 import {
   isIosDevice,
   keyCodes,
   isPrintableKeyCode,
 } from '@digigov/ui/form/AutoComplete/utils';
+import { CaretIcon } from '@digigov/react-icons/CaretIcon';
 
 export interface AutoCompleteProps {
   source: (query: string, syncResults: (options: string[]) => void) => void;
@@ -28,13 +28,7 @@ export interface AutoCompleteProps {
     suggestion?: (value: any) => any;
     inputValue?: (value: any) => string;
   };
-  cellWidth?:
-    | 'one-third'
-    | 'one-quarter'
-    | 'one-half'
-    | 'two-thirds'
-    | 'three-quarters'
-    | 'full';
+  width?: '25%' | '33.3%' | '50%' |  '66.6%' | '75%' | '100%' | 'full';
   autoselect?: boolean;
   defaultValue?: string;
   displayMenu?: 'overlay' | 'inline';
@@ -64,7 +58,7 @@ export type NewQueryProps = { menuOpen?: boolean; query?: string };
 
 export default class AutoComplete extends Component<AutoCompleteProps, State> {
   static defaultProps = {
-    cellWidth: 'one-third',
+    width: '33.3%',
     autoselect: false,
     defaultValue: '',
     displayMenu: 'overlay',
@@ -81,7 +75,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
     tNoResults: (): string => 'No results found',
     tAssistiveHint: (): string =>
       'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
-    dropdownArrow: DropdownArrowDown as React.ElementType,
+    dropdownArrow: (props) => (<CaretIcon direction="down" size="sm" {...props} />),
   };
 
   elementReferences = {};
@@ -469,7 +463,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
   render(): JSX.Element {
     const {
       id,
-      cellWidth,
+      width,
       displayMenu,
       minLength,
       name,
@@ -527,7 +521,7 @@ export default class AutoComplete extends Component<AutoCompleteProps, State> {
       : null;
 
     return (
-      <AutoCompleteWrapper onKeyDown={this.handleKeyDown} cellWidth={cellWidth}>
+      <AutoCompleteWrapper onKeyDown={this.handleKeyDown} width={width}>
         <Status
           id={id}
           length={options.length}

package/src/form/Button/Button.stories.js

@@ -16,6 +16,7 @@ export * from './__stories__/GroupingButtons';
 export * from './__stories__/GroupingButtonsAndLinks';
 export * from './__stories__/CallToActionButton';
 export * from './__stories__/Disabled';
+export * from './__stories__/Dense';
 export * from './__stories__/ButtonLinkButton';
 export * from './__stories__/Back';
 export * from './__stories__/WithVariantLink';

package/src/form/Button/__stories__/CallToActionButton.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
 
-/**
- * My primary descrition is the best description that was described
- */
 export const CallToActionButton = () => (
   <CallToAction
     href="#"
@@ -11,7 +8,7 @@ export const CallToActionButton = () => (
     aria-label="Είσοδος στην υπηρεσία"
     tabIndex={0}
   >
-    Είσοδος
+    Είσοδος στην υπηρεσία
   </CallToAction>
 );
 export default CallToActionButton;

package/src/form/Button/__stories__/Dense.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+
+import { Button } from '@digigov/ui/form/Button';
+
+export const Dense = () => (
+  <Button dense aria-label="Προβολή αρχείου">Προβολή αρχείου</Button>
+);
+export default Dense;

package/src/form/Button/__stories__/GroupingButtons.tsx

@@ -2,9 +2,6 @@ import React from 'react';
 
 import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 
-/**
- * My deescrition is the best description that was described
- */
 export const GroupingButtons = () => (
   <ButtonGroup>
     <Button>Οριστική υποβολή</Button>

package/src/form/Button/__stories__/GroupingButtonsAndLinks.tsx

@@ -4,9 +4,6 @@ import { Button, ButtonGroup } from '@digigov/ui/form/Button';
 
 import { Link } from '@digigov/ui/navigation/Link';
 
-/**
- * My deescrition is the best description that was described
- */
 export const GroupingButtonsAndLinks = () => (
   <ButtonGroup>
     <Button aria-label="Συνεχίστε στην επόμενη σελίδα">Συνέχεια</Button>

package/src/form/Button/__stories__/Primary.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
+
 import { Button } from '@digigov/ui/form/Button';
 
-/**
- * My primary descrition is the best description that was described
- */
 export const Primary = () => (
   <Button aria-label="Συνεχίστε στην επόμενη σελίδα">Συνέχεια</Button>
 );

package/src/form/Button/__stories__/Secondary.tsx

@@ -1,9 +1,6 @@
 import React from 'react';
 import { Button } from '@digigov/ui/form/Button';
 
-/**
- * My primary descrition is the best description that was described
- */
 export const Secondary = () => (
   <Button color="secondary" aria-label="Συνεχίστε στην επόμενη σελίδα">
     Συνέχεια

package/src/form/Button/__stories__/WithVariantLink.tsx

@@ -1,9 +1,7 @@
 import React from 'react';
+
 import { Button } from '@digigov/ui/form/Button';
 
-/**
- * My primary descrition is the best description that was described
- */
 export const WithVariantLink = () => (
   <Button
     onClick={() => {

package/src/form/Button/index.mdx

@@ -24,21 +24,13 @@ Use a default button for the main call to action on a page.
 
 Use a start button for the main call to action on your service’s start page. Start buttons do not submit form data, so they use a link tag rather than a button tag.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="CallToActionButton.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="CallToActionButton.tsx" />
 
 ### Secondary buttons
 
 Use secondary buttons for secondary calls to action on a page.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="Secondary.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="Secondary.tsx" />
 
 ### Warning buttons
 
@@ -56,22 +48,14 @@ Disabled buttons have poor contrast and can confuse some users, so avoid them if
 
 Use a button group when two or more buttons are placed together.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtons.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="GroupingButtons.tsx" />
 
 Any links within a button group will automatically align with the buttons.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Button"
-  story="GroupingButtonsAndLinks.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Button" story="GroupingButtonsAndLinks.tsx" />
 
 Write button text in sentence case, describing the action it performs. For
-example:'
+example:
 
 - `Start now` at the [start of the service](https://guide.services.gov.gr/docs/start-pages)
 - `Sign in` to an account a user has already created
@@ -101,12 +85,12 @@ to do next.
 
 ## API Docs
 
-Read more about [how to use the React types](/docs/api/Button)
+Read more about [how to use the React types](/docs/api/Button).
 
 ## Accessibility
 
-You can read more about the accessibility patterns used in our Select
-implementation in the ARIA Authoring Practices Guide (APG) at
+You can read more about the accessibility patterns used in our Button
+implementation in the ARIA Authoring Practices Guide (APG) at [button](https://www.w3.org/WAI/ARIA/apg/patterns/button/) section.
 
 ## API
 

package/src/form/Checkbox/Checkbox.stories.js

@@ -8,9 +8,12 @@ export default {
   displayName: 'Checkbox',
 };
 export * from '@digigov/ui/form/Checkbox/__stories__/Default';
+export * from '@digigov/ui/form/Checkbox/__stories__/Inline';
+export * from '@digigov/ui/form/Checkbox/__stories__/InlineWithDivider';
 export * from '@digigov/ui/form/Checkbox/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/Checkbox/__stories__/WithHint';
 export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswer';
 export * from '@digigov/ui/form/Checkbox/__stories__/NoneAnswerWithError';
 export * from '@digigov/ui/form/Checkbox/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/Checkbox/__stories__/ConditionalReveal';
+export * from '@digigov/ui/form/Checkbox/__stories__/Dense';

package/src/form/Checkbox/__stories__/ConditionalReveal.tsx

@@ -26,7 +26,7 @@ export const ConditionalReveal = () => (
         </CheckboxItem>
         <CheckboxConditional>
           Email address
-          <TextInput name="email-address" cellWidth="one-third" />
+          <TextInput name="email-address" width="33.3%" />
         </CheckboxConditional>
         <CheckboxItem name="email" value="phone">
           Τηλέφωνο

package/src/form/Checkbox/__stories__/Dense.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const Dense = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="feeling-hint">
+      <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
+      <Hint id="feeling-hint">
+        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox dense>
+        <CheckboxItem name="feeling" value="cold">
+          Έχω συνάχι
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fever">
+          Έχω πυρετό
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fatigue">
+          Αισθάνομαι κούραση
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Dense;

package/src/form/Checkbox/__stories__/Inline.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const Inline = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="feeling-hint">
+      <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
+      <Hint id="feeling-hint">
+        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox layout='horizontal'>
+        <CheckboxItem name="feeling" value="cold">
+          Έχω συνάχι
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fever">
+          Έχω πυρετό
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Inline;

package/src/form/Checkbox/__stories__/InlineWithDivider.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { Checkbox, CheckboxItem } from '@digigov/ui/form/Checkbox';
+
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+import { Hint } from '@digigov/ui/typography/Hint';
+
+export const InlineWithDivider = () => (
+  <FieldContainer>
+    <Fieldset aria-describedby="feeling-hint">
+      <FieldsetLegend>Πώς αισθάνεται αυτή τη στιγμή;</FieldsetLegend>
+      <Hint id="feeling-hint">
+        Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.
+      </Hint>
+      <Checkbox layout='horizontal'>
+        <CheckboxItem name="feeling" value="cold">
+          Έχω συνάχι
+        </CheckboxItem>
+        <CheckboxItem name="feeling" value="fever" dividerText='ή'>
+          Έχω πυρετό
+        </CheckboxItem>
+      </Checkbox>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default InlineWithDivider;

package/src/form/Checkbox/__stories__/NoneAnswer.tsx

@@ -19,7 +19,7 @@ export const NoneAnswer = () => (
         <CheckboxItem name="fever" value="fever">
           Γαλλία
         </CheckboxItem>
-        <CheckboxItem name="fatigue" value="fatigue" divider="ή">
+        <CheckboxItem name="fatigue" value="fatigue" dividerText="ή">
           Όχι, δεν θα ταξιδέψω σε καμία από αυτές τις χώρες
         </CheckboxItem>
       </Checkbox>

package/src/form/Checkbox/__stories__/NoneAnswerWithError.tsx

@@ -26,7 +26,7 @@ export const NoneAnswerWithError = () => (
         <CheckboxItem name="country" value="fr">
           Γαλλία
         </CheckboxItem>
-        <CheckboxItem divider="ή" name="country" value="none">
+        <CheckboxItem dividerText="ή" name="country" value="none">
           Όχι, δεν θα ταξιδέψω σε καμία από αυτές τις χώρες
         </CheckboxItem>
       </Checkbox>

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

@@ -13,7 +13,7 @@ import { Hint } from '@digigov/ui/typography/Hint';
 export const WithHint = () => (
   <FieldContainer>
     <Fieldset aria-describedby="nationality-hint">
-      <FieldsetLegend>Ποια είναι η υπηκοότητα σας;</FieldsetLegend>
+      <FieldsetLegend>Ποιά είναι η υπηκοότητα σας;</FieldsetLegend>
       <Hint id="nationality-hint">
         Αν έχετε πολλαπλή υπηκοότητα, επιλέξτε ό,τι ισχύει.
       </Hint>

package/src/form/Checkbox/index.mdx

@@ -11,57 +11,33 @@ import Checkbox from '@digigov/ui/form/Checkbox';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="MultipleQuestions.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/Checkbox"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="WithHint.tsx" />
 
 ### Add an option for ‘none’
 
 When ‘none’ would be a valid answer, give users the option to check a box to say none of the other options apply to them — without this option, users would have to leave all of the boxes unchecked. Giving users this option also makes sure they do not skip the question by accident.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswer.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="NoneAnswer.tsx" />
 
 If JavaScript is unavailable, and a user selects both the ‘none’ checkbox and another checkbox, display an error message.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="NoneAnswerWithError.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="NoneAnswerWithError.tsx" />
 
 ### Error messages
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/Checkbox"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox"story="WithErrorMessage.tsx" />
 
 ## Conditionally revealing a related question
 
@@ -69,11 +45,12 @@ 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/Checkbox"
-  story="ConditionalReveal.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/Checkbox" story="ConditionalReveal.tsx" />
+
+## Accessibility
+
+You can read more about the accessibility patterns used in our Checkbox
+implementation in the ARIA Authoring Practices Guide (APG) at [Checkbox](https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/) section.
 
 ## API
 

package/src/form/DateInputContainer/DateInputContainer.stories.js

@@ -11,3 +11,4 @@ export * from '@digigov/ui/form/DateInputContainer/__stories__/Default';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/MultipleQuestions';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessage';
 export * from '@digigov/ui/form/DateInputContainer/__stories__/WithErrorMessageForSingleField';
+export * from '@digigov/ui/form/DateInputContainer/__stories__/Dense';

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

@@ -22,7 +22,7 @@ export const Default = () => (
         <DateInputItem name="day">Ημέρα</DateInputItem>
         <DateInputItem name="month">Μήνας</DateInputItem>
         <DateInputItem width={4} name="year">
-          Χρόνος
+          Έτος
         </DateInputItem>
       </DateInputContainer>
     </Fieldset>

package/src/form/DateInputContainer/__stories__/Dense.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import {
+  DateInputContainer,
+  DateInputItem,
+} from '@digigov/ui/form/DateInputContainer';
+import {
+  FieldContainer,
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+
+
+export const Dense = () => (
+  <FieldContainer aria-describedby='passport-hint'>
+    <Fieldset>
+      <FieldsetLegend size="md">
+        Πότε εκδόθηκε το διαβατήριό σας;
+      </FieldsetLegend>
+      <DateInputContainer dense>
+        <DateInputItem name="day">Ημέρα</DateInputItem>
+        <DateInputItem name="month">Μήνας</DateInputItem>
+        <DateInputItem width={4} name="year">
+          Έτος
+        </DateInputItem>
+      </DateInputContainer>
+    </Fieldset>
+  </FieldContainer>
+);
+
+export default Dense;

package/src/form/DateInputContainer/__stories__/MultipleQuestions.tsx

@@ -17,14 +17,14 @@ export const MultipleQuestions = () => (
   <FieldContainer aria-describedby='passport-hint'>
     <Fieldset>
       <FieldsetLegend size="md">
-        Πότε εκδόθηκε το διαβατήριο;
+        Πότε εκδόθηκε το διαβατήριό σας;
       </FieldsetLegend>
       <Hint id='passport-hint'>Για παράδειγμα, 05 11 2020</Hint>
       <DateInputContainer>
         <DateInputItem name="day">Ημέρα</DateInputItem>
         <DateInputItem name="month">Μήνας</DateInputItem>
         <DateInputItem width={4} name="year">
-          Χρόνος
+          Έτος
         </DateInputItem>
       </DateInputContainer>
     </Fieldset>