@digigov/ui 0.12.2 → 0.14.0

package/esm/core/NotificationBanner/index.js

@@ -0,0 +1,35 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["variant", "title", "link", "children"];
+import React from 'react';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+import CoreNotificationBanner from '@digigov/react-core/NotificationBanner';
+import NotificationBannerHeader from '@digigov/react-core/NotificationBannerHeader';
+import NotificationBannerHeading from '@digigov/react-core/NotificationBannerHeading';
+import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
+import NotificationBannerLink from '@digigov/react-core/NotificationBannerLink';
+export var NotificationBanner = withDeprecation(function (_ref) {
+  var _ref$variant = _ref.variant,
+      variant = _ref$variant === void 0 ? 'important' : _ref$variant,
+      title = _ref.title,
+      link = _ref.link,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  var success = variant === 'success';
+  title = title ? title : success ? 'Success' : 'Important';
+  return /*#__PURE__*/React.createElement(CoreNotificationBanner, _extends({
+    success: success
+  }, props), /*#__PURE__*/React.createElement(NotificationBannerHeader, null, title), /*#__PURE__*/React.createElement(NotificationBannerContent, null, /*#__PURE__*/React.createElement(NotificationBannerHeading, null, children), link && /*#__PURE__*/React.createElement(NotificationBannerLink, {
+    href: link.url
+  }, link.label)));
+}, {
+  name: 'NotificationBanner',
+  props: {
+    variant: {
+      warning: 'variant prop will be deprecated. Use success:boolean instead'
+    }
+  }
+});
+export { NotificationBannerHeader, NotificationBannerContent, NotificationBannerHeading, NotificationBannerLink };
+export default NotificationBanner;

package/esm/core/NotificationBanner/index.mdx

@@ -0,0 +1,77 @@
+---
+title: NotificationBanner
+parent: docs/ui/components
+---
+
+# NotificationBanner
+
+import { NotificationBanner } from '@digigov/ui/core';
+import PropsDoc from '@docs-components/propsDoc';
+import StylesDoc from '@docs-components/stylesDoc';
+
+### Example for "Important"
+
+```jsx live path=layouts/Basic/index.tsx
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+
+function NotificationBanner{
+ return (
+      <NotificationBanner>
+      This is important !
+     </NotificationBanner>
+ )
+}
+export NotificationBanner
+
+```
+
+<br />
+
+### Example for "NotificationBanner"
+
+```jsx live path=layouts/Basic/index.tsx
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+
+
+function NotificationBanner{
+ return (
+      <NotificationBanner variant="success">
+        Training outcome recorded and trainee withdrawn
+      </NotificationBanner>
+ )
+}
+export NotificationBanner
+
+```
+
+<br />
+
+## When to use this component
+
+A notification banner lets you tell the user about something that’s not directly relevant to the thing they’re trying to do on that page of the service. For example:
+
+- telling the user about a problem that’s affecting the service as a whole (for example, delays in processing applications because of an emergency)
+- telling the user about something that affects them in particular (for example, an approaching deadline they need to meet)
+- telling the user about the outcome of something they’ve just done on a previous page (for example, confirming that an email has been sent)
+
+## When not to use this component
+
+Use notification banners sparingly. There’s evidence that people often miss them, and using them too often is likely to make this problem worse.
+
+If the information is directly relevant to the thing the user is doing on that page, put the information in the main page content instead. Use inset text or warning text if it needs to stand out.
+
+Don’t use a notification banner to tell the user about validation errors (use an error message and error summary instead).
+
+### API
+
+### Properties
+
+<PropsDoc data={NotificationBanner.__doc__} />
+
+<br />
+
+### Styles
+
+<StylesDoc data={NotificationBanner.__doc__} />

package/esm/core/NotificationBanner/index.spec.js

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import mountWithTheme from '@digigov/ui/test-utils/mountWithTheme';
+import NotificationBanner from '@digigov/ui/core/NotificationBanner';
+
+var _ref = /*#__PURE__*/React.createElement(NotificationBanner, {
+  title: "Notification Banner Example"
+}, "this is a notification");
+
+it('renders the notification banner', function () {
+  expect(mountWithTheme(_ref)).toMatchSnapshot();
+});
+it('renders the notification banner with title and link', function () {
+  expect(mountWithTheme( /*#__PURE__*/React.createElement(NotificationBanner, {
+    title: "Notification Banner Example",
+    link: {
+      url: '/',
+      label: 'This is a label'
+    }
+  }, "this is a notification"))).toMatchSnapshot();
+});

package/esm/core/PaginationLabel/index.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import CorePaginationLabel from '@digigov/react-extensions/admin/PaginationLabel';
+import { useTranslation } from '@digigov/ui/app';
+
+/**
+ * PaginationLabel component is used for placing the pagination results label.
+ */
+export var PaginationLabel = /*#__PURE__*/React.forwardRef(function PaginationLabel(_ref, ref) {
+  var start = _ref.start,
+      end = _ref.end,
+      total = _ref.total;
+
+  var _useTranslation = useTranslation(),
+      t = _useTranslation.t;
+
+  return /*#__PURE__*/React.createElement(CorePaginationLabel, {
+    ref: ref
+  }, t('pagination.show'), " ", /*#__PURE__*/React.createElement("b", null, start), " ", t('pagination.to'), " ", /*#__PURE__*/React.createElement("b", null, end), ' ', t('pagination.of'), " ", /*#__PURE__*/React.createElement("b", null, total), " ", t('pagination.results'));
+});
+export default PaginationLabel;

package/esm/core/ServiceBadge/index.js

@@ -0,0 +1,20 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "text", "children"];
+import React from 'react';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+import PhaseBanner from '@digigov/react-core/PhaseBanner';
+import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
+import PhaseBannerText from '@digigov/react-core/PhaseBannerText';
+export var ServiceBadge = withDeprecation(function (_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'BETA' : _ref$label,
+      text = _ref.text,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(PhaseBanner, props, children ? children : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PhaseBannerTag, null, label), text && /*#__PURE__*/React.createElement(PhaseBannerText, null, text)));
+}, {
+  name: 'ServiceBadge',
+  rename: 'PhaseBanner'
+});
+export default ServiceBadge;

package/esm/core/ServiceBadge/index.mdx

@@ -0,0 +1,42 @@
+---
+parent: docs/ui/component
+title: ServiceBadge
+---
+
+import ServiceBadge from '@digigov/ui/core/ServiceBadge';
+import Header, { HeaderTitle } from '@digigov/ui/app/Header';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+
+## Example
+
+<Header>
+  <GovGRLogo />
+  <HeaderTitle>
+    Service Name <ServiceBadge label="ALPHA" />
+  </HeaderTitle>
+</Header>
+
+## How to use
+
+```jsx
+import ServieBadge from '@digigov/ui/core/ServiceBadge';
+
+<ServiceBadge label="ALPHA" />;
+```
+
+## When to use this component
+
+Use ServiceBadge to indicate the current release cycle of your service. Use
+an alpha badge when your service is in alpha, and a beta badge if your
+service is in private or public beta.
+
+## How it works
+
+Communicating early release service status can improve the perception of the
+user regarding the overall experience of the service. It also acts as a hint
+that service is in active development and user feedback is needed and
+welcomed by your team.
+
+## References
+
+- https://designnotes.blog.gov.uk/2014/01/20/why-and-how-were-explaining-beta-to-users/

package/esm/core/SummaryList/__snapshots__/index.spec.tsx.snap

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SummaryList with sample data 1`] = `
+<ForwardRef(SummaryList)>
+  <dl
+    className="govgr-summary-list"
+  >
+    <ForwardRef(SummaryListItem)>
+      <div
+        className="govgr-summary-list__row"
+      >
+        <ForwardRef(SummaryListItemKey)>
+          <dt
+            className="govgr-summary-list__key"
+          >
+            Όνομα
+          </dt>
+        </ForwardRef(SummaryListItemKey)>
+        <ForwardRef(SummaryListItemValue)>
+          <dd
+            className="govgr-summary-list__value"
+          >
+             Μάριος
+          </dd>
+        </ForwardRef(SummaryListItemValue)>
+        <ForwardRef(SummaryListItemAction)>
+          <dd
+            className="govgr-summary-list__actions"
+          >
+             Αλλαγή
+          </dd>
+        </ForwardRef(SummaryListItemAction)>
+      </div>
+    </ForwardRef(SummaryListItem)>
+    <ForwardRef(SummaryListItem)>
+      <div
+        className="govgr-summary-list__row"
+      >
+        <ForwardRef(SummaryListItemKey)>
+          <dt
+            className="govgr-summary-list__key"
+          >
+            Επώνυμο
+          </dt>
+        </ForwardRef(SummaryListItemKey)>
+        <ForwardRef(SummaryListItemValue)>
+          <dd
+            className="govgr-summary-list__value"
+          >
+            Μενεξές
+          </dd>
+        </ForwardRef(SummaryListItemValue)>
+      </div>
+    </ForwardRef(SummaryListItem)>
+  </dl>
+</ForwardRef(SummaryList)>
+`;

package/esm/core/SummaryList/index.js

@@ -0,0 +1,7 @@
+import { SummaryList } from '@digigov/react-core/SummaryList';
+export * from '@digigov/react-core/SummaryList';
+export * from '@digigov/react-core/SummaryListItemAction';
+export * from '@digigov/react-core/SummaryListItem';
+export * from '@digigov/react-core/SummaryListItemKey';
+export * from '@digigov/react-core/SummaryListItemValue';
+export default SummaryList;

package/esm/core/SummaryList/index.mdx

@@ -0,0 +1,82 @@
+---
+title: Summary List
+parent: docs/ui/components
+---
+
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  SummaryListItemAction,
+} from '@digigov/ui/core/SummaryList';
+import PropsDoc from '@docs-components/propsDoc';
+import StylesDoc from '@docs-components/stylesDoc';
+
+## Example
+
+```jsx live path=core/SummaryList/index.tsx
+<SummaryList>
+  <SummaryListItem>
+    <SummaryListItemKey>Όνομα</SummaryListItemKey>
+    <SummaryListItemValue> Μάριος</SummaryListItemValue>
+    <SummaryListItemAction> Αλλαγή</SummaryListItemAction>
+  </SummaryListItem>
+  <SummaryListItem>
+    <SummaryListItemKey>Επώνυμο</SummaryListItemKey>
+    <SummaryListItemValue>Μενεξές</SummaryListItemValue>
+  </SummaryListItem>
+</SummaryList>
+```
+
+<br />
+
+## When to use this component
+
+Use the SummaryList component to present pairs of related information, known
+as key-value pairs, in a list.
+
+> The key is a description or label of a piece of
+> information, like `Name`, and the value is the piece of information itself,
+> like `John Smith`.
+
+## When not to use this component
+
+Only use it to present information that has a key and at least one value.
+
+Do not use it for tabular data or a simple list of information or tasks, like
+a task list.
+
+## How it works
+
+### Summary list with actions
+
+You can add actions to a summary list, like a ‘Change’ link to let users go
+back and edit their answer.
+
+For sighted users, the actions get their context from the other content in the
+row they appear in.
+
+Assistive technology users, like those who use a screen reader, may hear the
+links out of context and not know what they do. To give more context, add
+visually hidden text to the links. This means a screen reader user will hear
+a meaningful action, like `Change name` or `Change date of birth`.
+
+## API
+
+### Properties
+
+<PropsDoc data={SummaryList.__doc__} />
+<PropsDoc data={SummaryListItem.__doc__} />
+<PropsDoc data={SummaryListItemKey.__doc__} />
+<PropsDoc data={SummaryListItemValue.__doc__} />
+<PropsDoc data={SummaryListItemAction.__doc__} />
+<br />
+
+### Styles
+
+<StylesDoc data={SummaryList.__doc__} />
+<StylesDoc data={SummaryListItem.__doc__} />
+<StylesDoc data={SummaryListItemKey.__doc__} />
+<StylesDoc data={SummaryListItemValue.__doc__} />
+<StylesDoc data={SummaryListItemAction.__doc__} />

package/esm/core/SummaryList/index.spec.js

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { SummaryList, SummaryListItem, SummaryListItemKey, SummaryListItemValue, SummaryListItemAction } from '@digigov/ui/core/SummaryList';
+
+var _ref = /*#__PURE__*/React.createElement(SummaryList, null, /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u038C\u03BD\u03BF\u03BC\u03B1"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, " \u039C\u03AC\u03C1\u03B9\u03BF\u03C2"), /*#__PURE__*/React.createElement(SummaryListItemAction, null, " \u0391\u03BB\u03BB\u03B1\u03B3\u03AE")), /*#__PURE__*/React.createElement(SummaryListItem, null, /*#__PURE__*/React.createElement(SummaryListItemKey, null, "\u0395\u03C0\u03CE\u03BD\u03C5\u03BC\u03BF"), /*#__PURE__*/React.createElement(SummaryListItemValue, null, "\u039C\u03B5\u03BD\u03B5\u03BE\u03AD\u03C2")));
+
+it('renders the SummaryList with sample data', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/esm/core/Table/index.js

@@ -0,0 +1,7 @@
+export * from '@digigov/react-core/Table';
+export * from '@digigov/react-core/TableBody';
+export * from '@digigov/react-core/TableCaption';
+export * from '@digigov/react-core/TableDataCell';
+export * from '@digigov/react-core/TableHead';
+export * from '@digigov/react-core/TableHeaderCell';
+export * from '@digigov/react-core/TableRow';

package/esm/core/Tabs/index.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["register", "opened"];
+import { useCallback } from 'react';
+import Tabs from '@digigov/react-core/Tabs';
+import TabsList from '@digigov/react-core/TabsList';
+import TabsListItem from '@digigov/react-core/TabsListItem';
+import TabsPanel from '@digigov/react-core/TabsPanel';
+import TabsHeading from '@digigov/react-core/TabsHeading';
+import { useTogglableSections } from '@digigov/ui/hooks/useTogglableSections';
+export { Tabs, TabsList, TabsListItem, TabsPanel, TabsHeading };
+export var useTabs = function useTabs() {
+  var _useTogglableSections = useTogglableSections({
+    singleOpen: true,
+    toggleProperty: 'selected',
+    onToggleProperty: 'onClick',
+    firstOpen: true,
+    ariaNavigation: true
+  }),
+      register = _useTogglableSections.register,
+      opened = _useTogglableSections.opened,
+      rest = _objectWithoutProperties(_useTogglableSections, _excluded);
+
+  var panel = useCallback(function (key) {
+    return {
+      active: opened[key],
+      id: key,
+      tabIndex: opened[key] ? 1 : -1
+    };
+  }, [opened]);
+  return _extends({
+    register: register,
+    opened: opened,
+    panel: panel
+  }, rest);
+};
+export default Tabs;

package/esm/core/Tabs/index.mdx

@@ -0,0 +1,54 @@
+---
+title: Tabs
+parent: docs/ui/components
+---
+
+import Tabs from '@digigov/ui/core/Tabs';
+import PropsDoc from '@docs-components/propsDoc';
+
+## Examples
+
+```jsx live path=core/Tabs
+() => {
+  const [value, setValue] = React.useState(0);
+  const handleChange = (event, nextValue) => {
+    setValue(nextValue);
+  };
+  const tabs = [
+    {
+      title: 'Home',
+      component: <>Home et al</>,
+    },
+    {
+      title: 'About',
+      component: <>About et al</>,
+    },
+    {
+      title: 'Contact',
+      component: <>Contact et al</>,
+    },
+  ];
+  return (
+    <>
+      <Tabs value={value} onChange={handleChange}>
+        {tabs.map(({ title }, index) => (
+          <Tab label={title} {...getA11yProps(index)} />
+        ))}
+      </Tabs>
+      {tabs.map(({ component }, index) => (
+        <TabPanel value={value} index={index}>
+          {component}
+        </TabPanel>
+      ))}
+    </>
+  );
+};
+```
+
+<br />
+
+## API
+
+### Properties
+
+<PropsDoc data={Tabs.__doc__} />

package/esm/core/VisuallyHidden/index.js

@@ -0,0 +1 @@
+export * from '@digigov/react-core/VisuallyHidden';