@digigov/ui 0.21.1 → 0.22.0

package/esm/core/TextInput/index.mdx

@@ -0,0 +1,59 @@
+---
+id: text-input
+title: TextInput
+---
+
+
+# TextInput
+ 
+
+
+```bash
+import TextInput from '@digigov/ui/core/TextInput';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="Default.tsx" />
+
+### If you’re asking more than one question on the page
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="MultipleQuestions.tsx" />
+
+### Fixed width inputs
+
+Use fixed width inputs for content that has a specific, known length. Postcode inputs should be postcode-sized, telephone number inputs should be telephone number-sized.
+
+The widths are designed for specific character lengths and to be consistent across a range of browsers. They include extra padding to fit icons that some browsers might insert into the input (for example to show or generate a password).
+
+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="core/TextInput" story="FixedWidths.tsx" />
+
+### Fluid width inputs
+
+Fluid width inputs will resize with the viewport.
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="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="core/TextInput" story="WithHint.tsx" />
+
+## Numbers
+
+### Asking for whole numbers
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="AskingForNumbers.tsx" />
+
+### Error message
+
+Error messages should be styled like this:
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="WithErrorMessage.tsx" />
+
+### Disabled input
+
+<Story packageName="@digigov/ui" component="core/TextInput" story="DisabledInput.tsx" />

package/esm/core/VisuallyHidden/VisuallyHidden.stories.js

@@ -0,0 +1,6 @@
+import VisuallyHidden from "@digigov/ui/core/VisuallyHidden";
+export default {
+  title: 'Digigov UI/core/VisuallyHidden',
+  component: VisuallyHidden
+};
+export * from './__stories__/Default';

package/esm/core/VisuallyHidden/__stories__/Default.js

@@ -0,0 +1,16 @@
+import React from 'react';
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+import { Paragraph } from '@digigov/ui/typography';
+import Button, { ButtonGroup } from '@digigov/ui/core/Button';
+import Link from '@digigov/ui/core/Link';
+
+var _ref = /*#__PURE__*/React.createElement(Paragraph, null, "Some element below is visually hidden. It's only accessible for screen readers and any tools parsing the DOM.");
+
+var _ref2 = /*#__PURE__*/React.createElement(ButtonGroup, null, /*#__PURE__*/React.createElement(Button, null, " \u0394\u03BF\u03BA\u03B9\u03BC\u03AE"), /*#__PURE__*/React.createElement(Link, {
+  href: "#"
+}, "\u0391\u03BB\u03BB\u03B1\u03B3\u03AE", /*#__PURE__*/React.createElement(VisuallyHidden, null, " \u0394\u03B9\u03B5\u03CD\u03B8\u03C5\u03BD\u03C3\u03B7\u03C2")));
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2);
+};
+export default Default;

package/esm/core/VisuallyHidden/index.js

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

package/esm/core/VisuallyHidden/index.mdx

@@ -0,0 +1,17 @@
+---
+id: visually-hidden
+title: VisuallyHidden
+---
+
+Use this component to convey meaning to people using screen readers, helping
+them access information and context.
+
+VisuallyHidden is a web accessibility technique used to hide content from the visual client, but keep it readable for screen readers.
+
+```bash
+import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
+``` 
+
+## How to use
+
+<Story packageName="@digigov/ui" component="core/VisuallyHidden" story="Default.tsx" />

package/esm/core/WarningText/WarningText.stories.js

@@ -0,0 +1,6 @@
+import WarningText from "@digigov/ui/core";
+export default {
+  title: 'Digigov UI/core/WarningText',
+  component: WarningText
+};
+export * from './__stories__/Default';

package/esm/core/WarningText/__stories__/Default.js

@@ -0,0 +1,9 @@
+import React from 'react';
+import WarningText from '@digigov/ui/core/WarningText';
+
+var _ref = /*#__PURE__*/React.createElement(WarningText, null, "\u039C\u03C0\u03BF\u03C1\u03B5\u03AF \u03BD\u03B1 \u03C3\u03B1\u03C2 \u03B5\u03C0\u03B9\u03B2\u03BB\u03B7\u03B8\u03B5\u03AF \u03C0\u03C1\u03CC\u03C3\u03C4\u03B9\u03BC\u03BF \u03AD\u03C9\u03C2 \u03BA\u03B1\u03B9 5.000 \u03B5\u03C5\u03C1\u03CE \u03B5\u03AC\u03BD \u03B4\u03B5\u03BD \u03B5\u03B3\u03B3\u03C1\u03B1\u03C6\u03B5\u03AF\u03C4\u03B5.");
+
+export var Default = function Default() {
+  return _ref;
+};
+export default Default;

package/esm/core/WarningText/index.mdx

@@ -1,44 +1,19 @@
 ---
-title: Warning Text
-parent: docs/ui/components
+id: warning-text
+title: WarningText
 ---
 
-# Warning Text
+# WarningText
+ 
 
-import WarningText from '@digigov/ui/core/WarningText';
 
-```jsx live path=core/WarningText/index.tsx
+```bash
 import WarningText from '@digigov/ui/core/WarningText';
-import Paragraph from '@digigov/ui/typography/Paragraph';
-function CustomWarning (props){
- return (
-  <WarningText><Paragraph>Action Label</Paragraph></WarningText>
- )
-}
-export CustomWarningText
-
-```
-
-<br />
-
-## When to use this component
-
-Use the warning text component when you need to warn users about something
-important, such as legal consequences of an action, or lack of action that
-they might take.
-
-## How it works
-
-Write a descriptive message for the users that warns them about the possible
-complications of the current action.
-
-## API
-
-### Properties
+``` 
 
-<PropsDoc data={WarningText.__doc__} />
-<br />
+## How to use
 
-### Styles
+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.
 
-<StylesDoc data={WarningText.__doc__} />
+<Story packageName="@digigov/ui" component="core/WarningText" story="Default.tsx" />

package/esm/core/index.js

@@ -1,22 +1,28 @@
 export { default as Button } from '@digigov/ui/core/Button';
+export * from '@digigov/ui/core/BackLink';
 export * from '@digigov/ui/core/Button';
 export * from '@digigov/ui/core/Accordion';
 export * from '@digigov/ui/core/Blockquote';
 export * from '@digigov/ui/core/Breadcrumbs';
 export * from '@digigov/ui/core/Card';
+export * from '@digigov/ui/core/Confirmation';
 export * from '@digigov/ui/core/Details';
 export * from '@digigov/ui/core/Divider';
 export * from '@digigov/ui/core/ErrorSummary';
+export * from '@digigov/ui/core/FileUpload';
 export * from '@digigov/ui/core/Hidden';
 export * from '@digigov/ui/core/Link';
 export * from '@digigov/ui/core/List';
 export * from '@digigov/ui/core/NavList';
-export * from '@digigov/ui/core/ServiceBadge';
+export * from '@digigov/ui/core/NavList';
+export * from '@digigov/ui/core/PhaseBanner';
 export * from '@digigov/ui/core/NotificationBanner';
 export * from '@digigov/ui/core/SummaryList';
+export * from '@digigov/ui/core/ServiceBadge';
 export * from '@digigov/ui/core/Table';
 export * from '@digigov/ui/core/Tabs';
+export * from '@digigov/ui/core/TextArea';
+export * from '@digigov/ui/core/TextInput';
 export * from '@digigov/ui/core/VisuallyHidden';
 export { default as WarningText } from '@digigov/ui/core/WarningText';
-export * from '@digigov/ui/core/SvgIcon';
-export * from '@digigov/ui/core/FileUpload';
+export * from '@digigov/ui/core/SvgIcon';

package/esm/govgr/Footer/index.mdx

@@ -5,7 +5,7 @@ parent: docs/ui/components
 
 ## Default Footer
 
-### How to import
+#
 
 ```jsx
 import Bottom from '@digigov/ui/layouts/Basic';
@@ -22,7 +22,7 @@ import GovGRFooter from '@digigov/ui/govgr/Footer';
 
 ## Customizable Footer
 
-### How to import
+#
 
 ```jsx
 import Copyright from '@digigov/ui/govgr/Footer/Copyright';
@@ -45,7 +45,7 @@ import LicenseCCSA from '@digigov/ui/govgr/Footer/LicenseCCSA';
 
 ## Using custom grid
 
-### How to import
+#
 
 ```jsx
 import Grid from '@material-ui/core/Grid';
@@ -72,7 +72,7 @@ import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo'
 
 ## Asking users for feedback
 
-### How to import
+#
 
 ```jsx
 import { Feedback } from '@digigov/ui/govgr/Footer';

package/esm/hooks/useTogglableSections.js

@@ -10,7 +10,8 @@ export function useTogglableSections(_ref) {
       onToggleProperty = _ref.onToggleProperty,
       initial = _ref.initial,
       firstOpen = _ref.firstOpen,
-      ariaNavigation = _ref.ariaNavigation;
+      ariaNavigation = _ref.ariaNavigation,
+      toggleHook = _ref.toggleHook;
 
   var _useState = useState(initial || {}),
       _useState2 = _slicedToArray(_useState, 2),
@@ -32,6 +33,11 @@ export function useTogglableSections(_ref) {
   }, []);
   var toggle = useCallback(function (e) {
     var key = e.currentTarget.getAttribute('aria-controls');
+
+    if (toggleHook) {
+      toggleHook(key);
+    }
+
     e.preventDefault();
 
     if (singleOpen) {

package/esm/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v0.21.1
+/** @license Digigov v0.22.0
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/esm/introduction.md

@@ -5,4 +5,7 @@ sidebar_label: Introduction
 slug: /
 ---
 
-TBD
+This section lists any React components & features implemented in `@digigov/ui`
+NPM package.
+
+Find what you need in the sidebar menu on the left.

package/esm/layouts/Basic/Basic.stories.js

@@ -0,0 +1,9 @@
+/* eslint-disable digigov/no-relative-imports */
+import Basic from '@digigov/ui/layouts/Basic';
+export default {
+  title: 'Digigov UI/layouts/Basic',
+  component: Basic
+};
+export * from './__stories__/Default';
+export * from './__stories__/TwoThirdsOneThirdColumns';
+export * from './__stories__/MultipleRowsLayout';

package/esm/layouts/Basic/__stories__/Default.js

@@ -0,0 +1,10 @@
+import React from 'react';
+import Layout, { Content, Main } from '@digigov/ui/layouts/Basic';
+import { Title, Paragraph } from '@digigov/ui/typography';
+
+var _ref = /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Title, null, "Two-thirds column"), /*#__PURE__*/React.createElement(Paragraph, null, "This is a paragraph inside a two-thirds wide column"))));
+
+export var TwoThirdsColumn = function TwoThirdsColumn() {
+  return _ref;
+};
+export default TwoThirdsColumn;

package/esm/layouts/Basic/__stories__/MultipleRowsLayout.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Layout, { Content, Main, Side } from '@digigov/ui/layouts/Basic';
+import { Title, Paragraph } from '@digigov/ui/typography';
+
+var _ref = /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Title, null, "Two-thirds column"), /*#__PURE__*/React.createElement(Paragraph, null, "This is a paragraph inside a two-thirds wide column"))), /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Title, null, "Two-thirds column"), /*#__PURE__*/React.createElement(Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/React.createElement(Side, null, /*#__PURE__*/React.createElement(Title, {
+  size: "md"
+}, "One-third-column"), /*#__PURE__*/React.createElement(Paragraph, null, "This is a paragraph inside a one-third wide column"))));
+
+export var MultipleRowsLayout = function MultipleRowsLayout() {
+  return _ref;
+};
+export default MultipleRowsLayout;

package/esm/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Layout, { Content, Main, Side } from '@digigov/ui/layouts/Basic';
+import { Title, Paragraph } from '@digigov/ui/typography';
+
+var _ref = /*#__PURE__*/React.createElement(Layout, null, /*#__PURE__*/React.createElement(Content, null, /*#__PURE__*/React.createElement(Main, null, /*#__PURE__*/React.createElement(Title, null, "Two-thirds column"), /*#__PURE__*/React.createElement(Paragraph, null, "This is a paragraph inside a two-thirds wide column")), /*#__PURE__*/React.createElement(Side, null, /*#__PURE__*/React.createElement(Title, {
+  size: "md"
+}, "One-third-column"), /*#__PURE__*/React.createElement(Paragraph, null, "This is a paragraph inside a one-third wide column"))));
+
+export var TwoThirdsOneThirdColumns = function TwoThirdsOneThirdColumns() {
+  return _ref;
+};
+export default TwoThirdsOneThirdColumns;

package/esm/layouts/Grid/Grid.stories.js

@@ -0,0 +1,7 @@
+import Grid from "@digigov/ui/layouts";
+export default {
+  title: 'Digigov UI/layouts/Grid',
+  component: Grid
+};
+export * from './__stories__/Default';
+export * from './__stories__/Inline';

package/esm/layouts/Grid/__stories__/Default.js

@@ -0,0 +1,58 @@
+import React from 'react';
+import Grid from '@digigov/react-core/Grid';
+
+var _ref = /*#__PURE__*/React.createElement("div", {
+  className: "govgr-btn govgr-btn-primary"
+}, "lalal");
+
+var _ref2 = /*#__PURE__*/React.createElement(Grid, {
+  container: true,
+  spacing: 4
+}, /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 8,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 4,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 8,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 4,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 8,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 4,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"));
+
+export var Default = function Default() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref, _ref2);
+};
+export default Default;

package/esm/layouts/Grid/__stories__/Inline.js

@@ -0,0 +1,55 @@
+import React from 'react';
+import Grid from '@digigov/react-core/Grid';
+
+var _ref = /*#__PURE__*/React.createElement(Grid, {
+  container: true,
+  spacing: 4,
+  inline: true
+}, /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 8,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 4,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 8,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 4,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 8,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"), /*#__PURE__*/React.createElement(Grid, {
+  xs: 12,
+  sm: 4,
+  md: 6,
+  lg: 4,
+  xl: 2,
+  className: "border border-black"
+}, "1"));
+
+export var Inline = function Inline() {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, _ref);
+};
+export default Inline;

package/esm/layouts/Grid/index.js

@@ -1,2 +1,3 @@
 import Grid from '@digigov/react-core/Grid';
+export { Grid };
 export default Grid;

package/esm/layouts/index.js

@@ -1,2 +1,4 @@
 export * from '@digigov/ui/layouts/Basic';
+export * from '@digigov/ui/layouts/Grid';
+export { default as Grid } from '@digigov/ui/layouts/Grid';
 export { default as BasicLayout } from '@digigov/ui/layouts/Basic';

package/esm/locales/el.js

@@ -41,6 +41,7 @@ export default {
   footer: {
     created_by: 'Υλοποίηση από το',
     grnet: 'ΕΔΥΤΕ',
+    created_for: 'για το',
     mindigital: 'Υπουργείο Ψηφιακής Διακυβέρνησης',
     using: 'με χρήση',
     open_source: 'Ανοιχτού Λογισμικού',

package/esm/locales/en.js

@@ -41,6 +41,7 @@ export default {
   footer: {
     created_by: 'Created by',
     grnet: 'GRNET',
+    created_for: 'for the',
     mindigital: 'Ministry of Digital Governance',
     using: 'using',
     open_source: 'Open Source Software',