@digigov/ui 2.0.0-555d1027 → 2.0.0-5e7a6790

package/src/feedback/NotificationBanner/NotificationBanner.stories.js

@@ -15,16 +15,23 @@ export default {
 
 export const WithControls = {
   args: {
+    variant: 'info',
+    dense: false,
     title: 'Ειδοποίηση',
     children: ' Σε 7 ημέρες θα μπορείτε να υποβάλετε την αίτηση.',
     link: {
       label: 'Προβολή αίτησης',
       href: '#',
     },
-    variant: 'info',
-    dense: false,
   },
   argTypes: {
+    variant: {
+      options: ['info', 'success', 'error'],
+      control: { type: 'select' },
+    },
+    dense: {
+      control: { type: 'boolean' },
+    },
     title: {
       control: { type: 'text' },
     },
@@ -34,13 +41,6 @@ export const WithControls = {
     link: {
       control: { type: 'object' },
     },
-    variant: {
-      options: ['info', 'success', 'error'],
-      control: { type: 'select' },
-    },
-    dense: {
-      control: { type: 'boolean' },
-    },
   },
   parameters: {
     controls: { exclude: ['ref'] },

package/src/feedback/NotificationBanner/doc.mdx

@@ -13,9 +13,6 @@ Use a notification banner to tell the user about something they need to know abo
 
 Use a ‘neutral’ blue notification banner if the user needs to know about a problem with the service as a whole.
 
-Use a ‘neutral’ notification banner if the user needs to know about something that’s happening elsewhere in the service.
-
-## How to use
 
 <code src="@digigov/ui/feedback/NotificationBanner/__stories__/Default.tsx" />
 
@@ -45,4 +42,4 @@ See below for a complete reference to all of the props available to the componen
     'NotificationBannerHeading',
     'NotificationBannerLink',
   ]}
-/>{' '}
+/>

package/src/feedback/PhaseBanner/PhaseBanner.stories.jsx

@@ -31,8 +31,8 @@ export const WithControls = {
     );
   },
   args: {
-    tag: 'ALPHA',
     underline: true,
+    tag: 'ALPHA',
   },
   argTypes: {
     underline: {

package/src/form/AutoComplete/doc.mdx

@@ -30,7 +30,7 @@ through, select from large collections of options and help services get more con
 
 ### 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)
+This is the minimum number of characters that should be entered before the AutoComplete will attempt to suggest options(in above example is 2).
 
 <code src="@digigov/ui/form/AutoComplete/__stories__/WithMinLength.tsx" />
 
@@ -48,4 +48,4 @@ See below for a complete reference to all of the props available to the componen
     'AutoCompleteResultListItem',
     'AutoCompleteAssistiveHint',
   ]}
-/>{' '}
+/>

package/src/form/Button/doc.mdx

@@ -10,36 +10,47 @@ application or saving their information.
 
 ## How to use
 
-### Default buttons
 
 Use a default button for the main call to action on a page.
 
 <code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
 
-### Start buttons
+Avoid using multiple default buttons on a single page. Having more than on main
+call to action reduces their impact, and makes it harder for users to know what
+to do next.
+
+### Start button - Call To Action
 
 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.
 
 <code src="@digigov/ui/form/Button/__stories__/CallToActionButton.tsx" />
 
-### Secondary buttons
+### Secondary color
 
 Use secondary buttons for secondary calls to action on a page.
 
 <code src="@digigov/ui/form/Button/__stories__/Secondary.tsx" />
 
-### Warning buttons
+### Warning color
 
 Warning buttons are designed to make users think carefully before they use them. They only work if used very sparingly. Most services should not need one.
 
 <code src="@digigov/ui/form/Button/__stories__/Warning.tsx" />
 
-### Disable buttons
+### Link variant
+
+<code src="@digigov/ui/form/Button/__stories__/WithVariantLink.tsx" />
+
+### Disabled
 
 Disabled buttons have poor contrast and can confuse some users, so avoid them if possible.
 
 <code src="@digigov/ui/form/Button/__stories__/Disabled.tsx" />
 
+### Dense 
+
+<code src="@digigov/ui/form/Button/__stories__/Dense.tsx" />
+
 ### Grouping buttons
 
 Use a button group when two or more buttons are placed together.
@@ -71,15 +82,17 @@ For example, `Add another address` and `Accept and claim a tax refund`.
 
 Align the primary action button to the left edge of your form.
 
-## Default buttons
+## More buttons
 
-Use a default button for the main call to action on a page.
+### Back link button
 
-<code src="@digigov/ui/form/Button/__stories__/Primary.tsx" />
+<code src="@digigov/ui/form/Button/__stories__/Back.tsx" />
+
+
+### Theme toggle button
+
+<code src="@digigov/ui/form/Button/__stories__/ThemeToggle.tsx" />
 
-Avoid using multiple default buttons on a single page. Having more than on main
-call to action reduces their impact, and makes it harder for users to know what
-to do next.
 
 ## Accessibility
 
@@ -88,9 +101,7 @@ implementation in the ARIA Authoring Practices Guide (APG) at [button](https://w
 
 ## API
 
-Read more about [how to use the React types](/docs/api/Button).
-
-See below for a complete reference to all of the props  available to the components mentioned here.
+See below for a complete reference to all of the props available to the components mentioned here.
 
 <ComponentProps componentName={["Button","ButtonLink","CallToAction","ButtonGroup"]} /> 
 

package/src/form/Checkbox/doc.mdx

@@ -37,7 +37,7 @@ Error messages should be styled like this:
 
 <code src="@digigov/ui/form/Checkbox/__stories__/WithErrorMessage.tsx" />
 
-## Conditionally revealing a related question
+### Conditionally revealing a related question
 
 You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
 

package/src/form/RadioContainer/doc.mdx

@@ -19,20 +19,20 @@ If you’re asking more than one question on the page, you can display the quest
 
 <code src="@digigov/ui/form/RadioContainer/__stories__/Inline.tsx" />
 
-### Checkbox items with hints
+### Radio items with hints
 
-You can add hints to checkbox items to provide additional information about the options.
+You can add hints to radio items to provide additional information about the options.
 
 <code src="@digigov/ui/form/RadioContainer/__stories__/WithHints.tsx" />
 
-### RadioContainer items with a text divider
+### Radio 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’.
 
 <code src="@digigov/ui/form/RadioContainer/__stories__/NoneAnswer.tsx" />
 
-## Conditionally revealing a related question
+### Conditionally revealing a related question
 
 You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
 

package/src/i18n/locales/el.ts

@@ -35,14 +35,14 @@ export default {
       date: {
         invalid: 'Η ημερομηνία πρέπει να είναι έγκυρη.',
         invalid_month_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα και το έτος.',
         invalid_day_year:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει την ημέρα και το έτος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και το έτος.',
         invalid_day_month:
-          'Η ημερομηνία πρέπει να συμπεριλαμβάνει την ημέρα και τον μήνα.',
-        invalid_day: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει την ημέρα',
-        invalid_month: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει τον μήνα.',
-        invalid_year: 'Η ημερομηνία πρέπει να συμπεριλαμβάνει το ετος.',
+          'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα και τον μήνα.',
+        invalid_day: 'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα.',
+        invalid_month: 'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα.',
+        invalid_year: 'Η ημερομηνία πρέπει να περιλαμβάνει το ετος.',
         earlier_than: 'Συμπληρώστε μια ημερομηνία προγενέστερη της {{maxDate}}',
         later_than: 'Συμπληρώστε μια ημερομηνία μεταγενέστερη της {{minDate}}',
         invalid_day_range: 'Η ημέρα πρέπει να είναι μεταξύ 1 και {{maxDay}}.',
@@ -64,7 +64,7 @@ export default {
           'Η ημερομηνία πρέπει να περιλαμβάνει την ημέρα, την ώρα και τα λεπτά.',
         invalid__hours_minutes:
           'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα και τα λεπτά.',
-        invalid_minutes: 'Η ημερομηνία πρέπει να πελαμβάνει τα λεπτά.',
+        invalid_minutes: 'Η ημερομηνία πρέπει να περιλαμβάνει τα λεπτά.',
         invalid_hours: 'Η ημερομηνία πρέπει να περιλαμβάνει την ώρα.',
         invalid_month_year_minutes:
           'Η ημερομηνία πρέπει να περιλαμβάνει τον μήνα, το έτος και τα λεπτά.',

package/src/layouts/Basic/doc.mdx

@@ -10,8 +10,6 @@ Content and Bottom components.
 
 ## How to use
 
-### Default layout
-
 <code src="@digigov/ui/layouts/Basic/__stories__/Default.tsx" />
 
 ### Two thirds one third columns layout

package/src/layouts/Grid/Grid.stories.jsx

@@ -0,0 +1,143 @@
+import React from 'react';
+import Grid from '@digigov/ui/layouts/Grid';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/layouts/Grid',
+  component: Grid,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Grid',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Grid
+        role="grid"
+        aria-label="grid-example"
+        container
+        spacing={args.spacing}
+        inline={args.inline}
+      >
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.1
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.2
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.3
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.4
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.5
+        </Grid>
+        <Grid
+          role="row"
+          xs={args.xs}
+          sm={args.sm}
+          md={args.md}
+          lg={args.lg}
+          xl={args.xl}
+        >
+          grid item no.6
+        </Grid>
+      </Grid>
+    );
+  },
+  args: {
+    inline: false,
+    spacing: 4,
+    xs: 12,
+    sm: 6,
+    md: 4,
+    lg: 3,
+    xl: 2,
+  },
+  argsTypes: {
+    inline: {
+      control: 'boolean',
+    },
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    xs: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    sm: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    md: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    lg: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    xl: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/layouts/Grid/__stories__/Default';
+export { ResponsiveSpacing } from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
+export { Inline } from '@digigov/ui/layouts/Grid/__stories__/Inline';

package/src/layouts/Hidden/Hidden.stories.jsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Hidden from '@digigov/ui/layouts/Hidden';
+
+export default {
+  title: 'Digigov UI/layouts/Hidden',
+  component: Hidden,
+  displayName: 'Hidden',
+};
+
+export const WithControls = {
+  args: {
+    children: 'Περιεχόμενο μέσα σε Hidden.',
+    xsUpHidden: false,
+    smUpHidden: false,
+    mdUpHidden: false,
+    lgUpHidden: false,
+    xlUpHidden: false,
+    xsHidden: false,
+    smHidden: false,
+    mdHidden: false,
+    lgHidden: false,
+    xlHidden: false,
+  },
+  argTypes: {
+    children: {
+      control: { type: 'text' },
+    },
+    xsUpHidden: {
+      control: { type: 'boolean' },
+    },
+    smUpHidden: {
+      control: { type: 'boolean' },
+    },
+    mdUpHidden: {
+      control: { type: 'boolean' },
+    },
+    lgUpHidden: {
+      control: { type: 'boolean' },
+    },
+    xlUpHidden: {
+      control: { type: 'boolean' },
+    },
+    xsHidden: {
+      control: { type: 'boolean' },
+    },
+    smHidden: {
+      control: { type: 'boolean' },
+    },
+    mdHidden: {
+      control: { type: 'boolean' },
+    },
+    lgHidden: {
+      control: { type: 'boolean' },
+    },
+    xlHidden: {
+      control: { type: 'boolean' },
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};

package/src/layouts/Hidden/index.tsx

@@ -1 +1,4 @@
 export * from '@digigov/react-core/Hidden';
+import Hidden from '@digigov/react-core/Hidden';
+
+export default Hidden;

package/src/layouts/Stack/Stack.stories.jsx

@@ -0,0 +1,104 @@
+import React from 'react';
+import Stack from '@digigov/ui/layouts/Stack';
+import Card from '@digigov/ui/content/Card';
+import doc from './doc.mdx?raw';
+
+export default {
+  title: 'Digigov UI/layouts/Stack',
+  component: Stack,
+  tags: ['autodocs'],
+  markdown: doc,
+  displayName: 'Stack',
+};
+
+export const WithControls = {
+  render: (args) => {
+    return (
+      <Stack
+        spacing={args.spacing}
+        alignItems={args.alignItems}
+        direction={args.direction}
+        justifyContent={args.justifyContent}
+        alignContent={args.alignContent}
+        flexWrap={args.flexWrap}
+      >
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border"> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+        <Card variant="border"> Item 4 </Card>
+        <Card variant="border"> Item 5 </Card>
+        <Card variant="border"> Item 6 </Card>
+      </Stack>
+    );
+  },
+  args: {
+    spacing: 4,
+    direction: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    alignContent: 'center',
+    flexWrap: 'nowrap',
+  },
+  argsTypes: {
+    spacing: {
+      control: {
+        type: 'select',
+      },
+      options: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
+    },
+    direction: {
+      control: {
+        type: 'select',
+      },
+      options: ['row', 'row-reverse', 'column', 'column-reverse'],
+    },
+    justifyContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+        'space-evenly',
+      ],
+    },
+    alignItems: {
+      control: {
+        type: 'select',
+      },
+      options: ['stretch', 'flex-start', 'flex-end', 'center', 'baseline'],
+    },
+    alignContent: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'stretch',
+        'flex-start',
+        'flex-end',
+        'center',
+        'space-between',
+        'space-around',
+      ],
+    },
+    flexWrap: {
+      control: {
+        type: 'select',
+      },
+      options: ['nowrap', 'wrap'],
+    },
+  },
+  parameters: {
+    controls: { exclude: ['ref'] },
+  },
+};
+
+export { Default } from '@digigov/ui/layouts/Stack/__stories__/Default';
+export { Spacing } from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+export { Row } from '@digigov/ui/layouts/Stack/__stories__/Row';
+export { NoWrap } from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+export { JustifyContent } from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+export { AlignItems } from '@digigov/ui/layouts/Stack/__stories__/AlignItems';

package/src/lazy.js

@@ -301,8 +301,8 @@ export default {
   'AccordionSectionAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module) => ({ default: module['AccordionSectionAuto'] }))),
   'AccordionOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module) => ({ default: module['AccordionOpenAllButtonAuto'] }))),
   'AccordionCloseAllButtonAuto': lazy(() => import('@digigov/ui/content/Accordion/auto').then((module) => ({ default: module['AccordionCloseAllButtonAuto'] }))),
-  'Markdown': lazy(() => import('@digigov/ui/content/Markdown').then((module) => ({ default: module['Markdown'] }))),
   'SafeHTML': lazy(() => import('@digigov/ui/content/SafeHTML').then((module) => ({ default: module['SafeHTML'] }))),
+  'Markdown': lazy(() => import('@digigov/ui/content/Markdown').then((module) => ({ default: module['Markdown'] }))),
   'StepNavAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module) => ({ default: module['StepNavAuto'] }))),
   'StepNavAccordionAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module) => ({ default: module['StepNavAccordionAuto'] }))),
   'StepNavOpenAllButtonAuto': lazy(() => import('@digigov/ui/content/StepNav/auto').then((module) => ({ default: module['StepNavOpenAllButtonAuto'] }))),

package/src/navigation/BackToTopLink/BackToTopLink.stories.js

@@ -1,8 +1,12 @@
 import BackToTopLink from '@digigov/ui/navigation/BackToTopLink';
+import doc from './doc.mdx?raw';
+
 export default {
   title: 'Digigov UI/navigation/BackToTopLink',
   component: BackToTopLink,
   displayName: 'BackToTopLink',
+  tags: ['autodocs'],
+  markdown: doc,
 };
 export { Default } from '@digigov/ui/navigation/BackToTopLink/__stories__/Default';
 export { InMain } from '@digigov/ui/navigation/BackToTopLink/__stories__/InMain';

package/src/navigation/BackToTopLink/doc.mdx

@@ -0,0 +1,22 @@
+---
+id: back-to-top
+title: BackToTop
+---
+
+# BackToTop
+
+Use the BackToTopLink component to allow users to quickly navigate to the top of the page.
+
+## How to use
+
+<code src="@digigov/ui/navigation/BackToTopLink/__stories__/Default.tsx" />
+
+### Display in main content
+
+<code src="@digigov/ui/navigation/BackToTopLink/__stories__/InMain.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["BackToTopLink", "BackToTopContainer"]} /> 

package/src/navigation/Breadcrumbs/doc.mdx

@@ -17,6 +17,10 @@ The Breadcrumbs component lets users show and hide sections of related content o
 
 <code src="@digigov/ui/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.tsx" />
 
+### With hook
+
+<code src="@digigov/ui/navigation/Breadcrumbs/__stories__/WithHook.tsx" />
+
 ## Accessibility
 
 You can read more about the accessibility patterns used in our Breadcrumbs