@digigov/ui 1.0.0-6b93ebf2 → 1.0.0-77ee23d9

package/src/content/Table/__stories__/WithFloatingScroll.tsx

@@ -15,8 +15,7 @@ import {
   DropdownButton,
   DropdownContent,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 const labels = {
   name: 'Ονοματεπώνυμο',
@@ -75,17 +74,16 @@ export const WithFloatingScroll = () => {
                     {Object.keys(dt).map((key) => (
                       <TableDataCell key={key}>{dt[key]}</TableDataCell>
                     ))}
-
                     <TableDataCell>
                       <Dropdown float align="right" placement="bottom">
                         <DropdownButton variant="link">
                           Ενέργειες
                         </DropdownButton>
                         <DropdownContent>
-                          <NavVertical>
-                            <NavVerticalItem href="#">Επεξεργασία</NavVerticalItem>
-                            <NavVerticalItem href="#">Διαγραφή</NavVerticalItem>
-                          </NavVertical>
+                          <NavList layout='vertical'>
+                            <NavListItemAction href="#">Επεξεργασία</NavListItemAction>
+                            <NavListItemAction href="#">Διαγραφή</NavListItemAction>
+                          </NavList>
                         </DropdownContent>
                       </Dropdown>
                     </TableDataCell>

package/src/content/Table/index.mdx

@@ -69,7 +69,7 @@ The prop `color='primary'` or `color='secondary'` is only functional when Table
 ## Accessibility
 
 You can read more about the accessibility patterns used in our Table
-implementation in the ARIA Authoring Practices Guide (APG) at
+implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.
 
 ## API
 

package/src/content/Table/index.tsx

@@ -8,8 +8,7 @@ import {
   DropdownContent,
   DropdownProps,
 } from '@digigov/ui/navigation/Dropdown';
-import { NavVertical } from '@digigov/ui/navigation/NavList/NavVertical';
-import { NavVerticalItem } from '@digigov/ui/navigation/NavList/NavVerticalItem';
+import { NavList, NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 export type SortDirection = 1 | -1 | 0;
 
@@ -48,21 +47,22 @@ export const TableSortLabel = React.forwardRef<
         <TableSortIconContainer marginLeft={1}>
           <CaretIcon
             direction={'up'}
-            size="md"
+            size="sm"
             variant={direction === 1 ? 'dark' : 'gray'}
           />
           <CaretIcon
             direction={'down'}
-            size="md"
+            size="sm"
             variant={direction === -1 ? 'dark' : 'gray'}
           />
         </TableSortIconContainer>
       </DropdownButton>
       <DropdownContent>
-        <NavVertical>
-          <NavVerticalItem
+        <NavList layout='vertical'>
+          <NavListItemAction
             active={direction === 1}
             tabIndex={0}
+            arrow={false}
             onClick={() => {
               onSort(1);
               dropdownRef.current && (dropdownRef.current.open = false);
@@ -78,13 +78,14 @@ export const TableSortLabel = React.forwardRef<
               direction={'up'}
               marginRight={1}
               marginTop={1}
-              size="md"
+              size="sm"
             />
             {labels.asc}
-          </NavVerticalItem>
-          <NavVerticalItem
+          </NavListItemAction>
+          <NavListItemAction
             active={direction === -1}
             tabIndex={0}
+            arrow={false}
             onClick={() => {
               onSort(-1);
               dropdownRef.current && (dropdownRef.current.open = false);
@@ -100,11 +101,11 @@ export const TableSortLabel = React.forwardRef<
               direction={'down'}
               marginRight={1}
               marginTop={1}
-              size="md"
+              size="sm"
             />
             {labels.desc}
-          </NavVerticalItem>
-        </NavVertical>
+          </NavListItemAction>
+        </NavList>
       </DropdownContent>
     </Dropdown>
   );

package/src/content/TaskList/__stories__/Default.tsx

@@ -82,16 +82,16 @@ export const Default = () => (
                     let tagColor;
                     switch (task.status) {
                       case 'Ολοκληρωθηκε':
-                        tagColor = 'completed';
+                        tagColor = 'info';
                         break;
                       case 'Σε εξελιξη':
-                        tagColor = 'in-progress';
+                        tagColor = 'primary';
                         break;
                       case 'Δεν εχει ξεκινησει':
-                        tagColor = 'not-started';
+                        tagColor = 'secondary';
                         break;
                       case 'Σε αναμονη':
-                        tagColor = 'not-started';
+                        tagColor = 'secondary';
                         break;
                     }
                     return (
@@ -100,7 +100,7 @@ export const Default = () => (
                           <LinkBase>{task.text}</LinkBase>
                         </SummaryListItemKey>
                         <SummaryListItemAction>
-                          <TaskListItemTag status={tagColor}>
+                          <TaskListItemTag color={tagColor}>
                             {task.status}
                           </TaskListItemTag>
                         </SummaryListItemAction>

package/src/content/TaskList/index.mdx

@@ -0,0 +1,21 @@
+---
+id: task-list
+title: TaskList
+---
+
+# TaskList
+ TaskList is a component that displays number of steps required to complete a process inside your application.
+
+```bash
+import TaskList from '@digigov/ui/content/TaskList';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/TaskList" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="TaskList" />

package/src/content/Timeline/__stories__/Default.tsx

@@ -132,64 +132,62 @@ export const Default = () => (
     {data &&
       data.map((field, index) => {
         return (
-          <>
-            <TimelineItem key={index} marginBottom={10}>
-              <TimelineHeading size="md" marginBottom={2}>
-                {field.title}
-                {field.codename && (
-                  <>
-                    {' - '} {field.codename}
-                  </>
-                )}
-              </TimelineHeading>
-              <Hint>{field.date}</Hint>
-              <TimelineContent>
-                {field.details && (
-                  <SummaryList>
-                    {field.details.map((field, index) => {
-                      return (
-                        <SummaryListItem key={index}>
-                          <SummaryListItemKey>{field.name}</SummaryListItemKey>
-                          <SummaryListItemValue>
-                            {field.value}
-                          </SummaryListItemValue>
-                          {field.actions && (
-                            <SummaryListItemAction>
-                              <ButtonGroup>
-                                {field.actions &&
-                                  field.actions.map((action, subIndex) => {
-                                    return (
-                                      <Button key={subIndex} variant="link">
-                                        {action}
-                                      </Button>
-                                    );
-                                  })}
-                              </ButtonGroup>
-                            </SummaryListItemAction>
-                          )}
-                        </SummaryListItem>
-                      );
-                    })}
-                  </SummaryList>
-                )}
-              </TimelineContent>
-              <TimelineActions>
-                <ButtonGroup>
-                  {(field.actions || []).map((action, subIndex) => (
-                    <Button key={subIndex} variant="link">
-                      {action.label}
-                    </Button>
-                  ))}
-                  <Button color="secondary" variant="link">
-                    Προβολή εγγράφου
+          <TimelineItem key={index} marginBottom={10}>
+            <TimelineHeading size="md" marginBottom={2}>
+              {field.title}
+              {field.codename && (
+                <>
+                  {' - '} {field.codename}
+                </>
+              )}
+            </TimelineHeading>
+            <Hint>{field.date}</Hint>
+            <TimelineContent>
+              {field.details && (
+                <SummaryList>
+                  {field.details.map((field, index) => {
+                    return (
+                      <SummaryListItem key={index}>
+                        <SummaryListItemKey>{field.name}</SummaryListItemKey>
+                        <SummaryListItemValue>
+                          {field.value}
+                        </SummaryListItemValue>
+                        {field.actions && (
+                          <SummaryListItemAction>
+                            <ButtonGroup>
+                              {field.actions &&
+                                field.actions.map((action, subIndex) => {
+                                  return (
+                                    <Button key={subIndex} variant="link">
+                                      {action}
+                                    </Button>
+                                  );
+                                })}
+                            </ButtonGroup>
+                          </SummaryListItemAction>
+                        )}
+                      </SummaryListItem>
+                    );
+                  })}
+                </SummaryList>
+              )}
+            </TimelineContent>
+            <TimelineActions>
+              <ButtonGroup>
+                {(field.actions || []).map((action, subIndex) => (
+                  <Button key={subIndex} variant="link">
+                    {action.label}
                   </Button>
-                  <Button color="secondary" variant="link">
-                    Λήψη PDF
-                  </Button>
-                </ButtonGroup>
-              </TimelineActions>
-            </TimelineItem>
-          </>
+                ))}
+                <Button color="secondary" variant="link">
+                  Προβολή εγγράφου
+                </Button>
+                <Button color="secondary" variant="link">
+                  Λήψη PDF
+                </Button>
+              </ButtonGroup>
+            </TimelineActions>
+          </TimelineItem>
         );
       })}
   </Timeline>

package/src/content/Timeline/index.mdx

@@ -0,0 +1,23 @@
+---
+id: timeline
+title: Timeline
+---
+
+# Timeline
+A timeline is a useful way to display a whole range of information and/or data points to a user.
+Keeping things organized in logical sequence timeline helps to keep track of what’s happening. 
+User can better understand what has happened and also understand what the next steps should be.
+
+```bash
+import Timeline from '@digigov/ui/content/Timeline';
+```
+
+## How to use
+
+### Default
+
+<Story packageName="@digigov/ui" component="content/Timeline" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Timeline" />

package/src/feedback/CopyToClipboard/index.mdx

@@ -11,19 +11,11 @@ import CopyToClipboard from '@digigov/ui/feedback/CopyToClipboard';
 
 ### Default
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/CopyToClipboard" story="Default.tsx" />
 
 ### Banner
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/CopyToClipboard"
-  story="Banner.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/CopyToClipboard" story="Banner.tsx" />
 
 ## API
 

package/src/feedback/ErrorSummary/index.mdx

@@ -15,11 +15,7 @@ import ErrorSummary from '@digigov/ui/feedback/ErrorSummary';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="Default.tsx" />
 
 ### Linking from the error summary to each answer
 
@@ -27,29 +23,17 @@ You must link the errors in the error summary to the answer they relate to.
 
 For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="LinkedToInput.tsx" />
 
 When a user has to enter their answer into multiple fields, such as the day, month and year fields in the date input component, link to the first field that contains an error.
 
 If you do not know which field contains an error, link to the first field.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToField.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="LinkedToField.tsx" />
 
 For questions that require a user to select one or more options from a list using radios or checkboxes, link to the first radio or checkbox.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/ErrorSummary"
-  story="LinkedToCheckbox.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/ErrorSummary" story="LinkedToCheckbox.tsx" />
 
 ## API
 

package/src/feedback/NotificationBanner/index.mdx

@@ -19,19 +19,11 @@ Use a ‘neutral’ blue notification banner if the user needs to know about a p
 
 Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/NotificationBanner" story="Default.tsx" />
 
 You can also use a notification banner to tell the user about the outcome of something they’ve just done - but they have not finished using the service, so it does not make sense to use a confirmation page.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/NotificationBanner"
-  story="Success.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/NotificationBanner" story="Success.tsx" />
 
 ## API
 

package/src/feedback/PhaseBanner/index.mdx

@@ -15,19 +15,11 @@ import PhaseBanner from '@digigov/ui/feedback/PhaseBanner';
 
 Your banner must be directly under the blue GOV.GR header and colour bar.
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/PhaseBanner" story="Default.tsx" />
 
 ### Underlined
 
-<Story
-  packageName="@digigov/ui"
-  component="feedback/PhaseBanner"
-  story="Underlined.tsx"
-/>
+<Story packageName="@digigov/ui" component="feedback/PhaseBanner"story="Underlined.tsx" />
 
 ## API
 

package/src/feedback/ServiceBadge/index.mdx

@@ -5,17 +5,21 @@ parent: docs/ui/component
 ---
 
 import ServiceBadge from '@digigov/ui/feedback/ServiceBadge';
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import Header, { HeaderContent, HeaderSection, HeaderTitle } from '@digigov/ui/app/Header';
 import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
 
 ## Example
 
 <Header>
-  <GovGRLogo />
-  <HeaderTitle>
-    Service Name <ServiceBadge label="ALPHA" />
-  </HeaderTitle>
+  <HeaderContent>
+    <HeaderSection>
+      <GovGRLogo />
+      <HeaderTitle>Service Name </HeaderTitle>
+      <ServiceBadge label="ALPHA" />
+    </HeaderSection>
+  </HeaderContent>
 </Header>
+<br/>
 
 ## How to use
 

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

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

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/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}