@digigov/ui 0.12.2 → 0.13.0

package/esm/core/Accordion/index.mdx

@@ -0,0 +1,104 @@
+---
+title: Accordion
+parent: docs/ui/components
+---
+
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemDetails,
+  AccordionItemSummary,
+} from '@digigov/ui/core/Accordion';
+
+import PropsDoc from '@docs-components/propsDoc';
+import StylesDoc from '@docs-components/stylesDoc';
+
+## Example
+
+<Accordion>
+  <AccordionItem>
+    <AccordionItemSummary>Βασικες Ρυθμισεις</AccordionItemSummary>
+    <AccordionItemDetails>Περιεχομενο Βασικων Ρυθμισεων</AccordionItemDetails>
+  </AccordionItem>
+  <AccordionItem>
+    <AccordionItemSummary>Υπολοιπες Ρυθμισεις</AccordionItemSummary>
+    <AccordionItemDetails>Περιεχομενο Υπολοιπων Ρυθμισεων</AccordionItemDetails>
+  </AccordionItem>
+</Accordion>
+
+## How to use
+
+```jsx live path=core/Accordion/index.tsx
+import {
+  Accordion,
+  AccordionItem,
+  AccordionItemDetails,
+  AccordionItemSummary,
+} from 'govgr/components/Accordion';
+
+function CustomAccordion() {
+  return (
+    <Accordion>
+      <AccordionItem>
+        <AccordionItemSummary>Βασικες Ρυθμισεις</AccordionItemSummary>
+        <AccordionItemDetails>
+          Περιεχομενο Βασικων Ρυθμισεων
+        </AccordionItemDetails>
+      </AccordionItem>
+      <AccordionItem>
+        <AccordionItemSummary>Υπολοιπες Ρυθμισεις</AccordionItemSummary>
+        <AccordionItemDetails>
+          Περιεχομενο Υπολοιπων Ρυθμισεων
+        </AccordionItemDetails>
+      </AccordionItem>
+    </Accordion>
+  );
+}
+```
+
+## When to use this component
+
+Only use an accordion if there’s evidence it’s helpful for users to:
+
+- see an overview of multiple, related sections of content
+- show and hide those sections as needed
+
+Accordions can work well for people who use a service regularly, for example users of caseworking systems who need to perform familiar tasks quickly.
+
+## When not to use this component
+
+Accordions hide content from users and not everyone will notice them or understand how they work. For this reason do not use an accordion for content which is essential to all users.
+
+Test your content without an accordion first. Consider if it’s better to:
+
+- simplify and reduce the amount of content
+- split the content across multiple pages
+- keep the content on a single page, separated by headings
+- use a list of links to let users navigate quickly to specific sections of content
+
+Do not use the accordion component if the amount of content it would need to contain will make the page slow to load.
+
+Accordions work best for simple content and links. Do not use accordions to split up a series of questions into sections. Use separate pages instead.
+
+## API
+
+### Properties
+
+<PropsDoc data={Accordion.__doc__} />
+<br />
+<PropsDoc data={AccordionItem.__doc__} />
+<br />
+<PropsDoc data={AccordionItemSummary.__doc__} />
+<br />
+<PropsDoc data={AccordionItemDetails.__doc__} />
+
+### Styles
+
+<StylesDoc data={Accordion.__doc__} />
+<br />
+<StylesDoc data={AccordionItem.__doc__} />
+<br />
+<StylesDoc data={AccordionItemSummary.__doc__} />
+<br />
+<StylesDoc data={AccordionItemDetails.__doc__} />
+<br />

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { Accordion, AccordionItem, AccordionItemDetails, AccordionItemSummary } from '@digigov/ui/core/Accordion';
+
+var _ref = /*#__PURE__*/React.createElement(Accordion, null, /*#__PURE__*/React.createElement(AccordionItem, null, /*#__PURE__*/React.createElement(AccordionItemSummary, null, "\u0392\u03B1\u03C3\u03B9\u03BA\u03B5\u03C2 \u03A1\u03C5\u03B8\u03BC\u03B9\u03C3\u03B5\u03B9\u03C2"), /*#__PURE__*/React.createElement(AccordionItemDetails, null, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03BF\u03BC\u03B5\u03BD\u03BF \u0392\u03B1\u03C3\u03B9\u03BA\u03C9\u03BD \u03A1\u03C5\u03B8\u03BC\u03B9\u03C3\u03B5\u03C9\u03BD")), /*#__PURE__*/React.createElement(AccordionItem, null, /*#__PURE__*/React.createElement(AccordionItemSummary, null, "\u03A5\u03C0\u03BF\u03BB\u03BF\u03B9\u03C0\u03B5\u03C2 \u03A1\u03C5\u03B8\u03BC\u03B9\u03C3\u03B5\u03B9\u03C2"), /*#__PURE__*/React.createElement(AccordionItemDetails, null, "\u03A0\u03B5\u03C1\u03B9\u03B5\u03C7\u03BF\u03BC\u03B5\u03BD\u03BF \u03A5\u03C0\u03BF\u03BB\u03BF\u03B9\u03C0\u03C9\u03BD \u03A1\u03C5\u03B8\u03BC\u03B9\u03C3\u03B5\u03C9\u03BD")));
+
+it('renders the Accordion', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Blockquote with sample data 1`] = `
+<withDeprecationComponent>
+  <ForwardRef(Blockquote)>
+    <blockquote
+      className="govgr-blockquote"
+    >
+      this is some random data
+    </blockquote>
+  </ForwardRef(Blockquote)>
+</withDeprecationComponent>
+`;

package/esm/core/Blockquote/index.js

@@ -0,0 +1,16 @@
+import CoreBlockquote from '@digigov/react-core/Blockquote';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Blockquote = withDeprecation(CoreBlockquote, {
+  name: 'Blockquote',
+  props: {
+    variant: {
+      values: {
+        info: {
+          warning: true
+        }
+      },
+      error: true
+    }
+  }
+});
+export default Blockquote;

package/esm/core/Blockquote/index.mdx

@@ -0,0 +1,61 @@
+---
+parent: docs/ui/components
+title: Blockquote
+---
+
+import Blockquote from '@digigov/ui/core/Blockquote';
+
+## Example
+
+<Blockquote>
+  It can take up to 8 weeks to register a lasting power of attorney if there are
+  no mistakes in the application.
+</Blockquote>
+<Blockquote variant="warning">
+  It can take up to 8 weeks to register a lasting power of attorney if there are
+  no mistakes in the application.
+</Blockquote>
+<Blockquote variant="error">
+  It can take up to 8 weeks to register a lasting power of attorney if there are
+  no mistakes in the application.
+</Blockquote>
+
+## How to use
+
+```jsx
+import Blockquote from 'govgr/components/Blockquote';
+
+<Blockquote>
+  It can take up to 8 weeks to register a lasting power of attorney if there are
+  no mistakes in the application.
+</Blockquote>
+
+<Blockquote variant="warning">
+  It can take up to 8 weeks to register a lasting power of attorney if there are
+  no mistakes in the application.
+</Blockquote>
+
+<Blockquote variant="error">
+  It can take up to 8 weeks to register a lasting power of attorney if there are
+  no mistakes in the application.
+</Blockquote>
+
+```
+
+## When to use this component
+
+Use the inset text component to differentiate a block of text from the content that surrounds it, for example:
+
+quotes
+examples
+additional information about the page
+
+## When not to use this component
+
+Some users do not notice inset text if it’s used on complex pages or near to other visually prominent elements. For this reason, avoid using inset text as a way of highlighting very important information that users need to see.
+
+If you need to draw attention to very important content, like legal information, use the warning text component instead.
+
+## How it works
+
+Use inset text very sparingly - it’s less effective if it’s overused.

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import Component from '@digigov/ui/core/Blockquote';
+
+var _ref = /*#__PURE__*/React.createElement(Component, null, "this is some random data");
+
+it('renders the Blockquote with sample data', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/esm/core/Breadcrumbs/index.js

@@ -0,0 +1,3 @@
+export * from '@digigov/react-core/Breadcrumbs';
+export * from '@digigov/react-core/BreadcrumbsList';
+export * from '@digigov/react-core/BreadcrumbsListItem';

package/esm/core/Button/BackButton.js

@@ -0,0 +1,21 @@
+import BackLink from '@digigov/react-core/BackLink';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var BackButton = withDeprecation(BackLink, {
+  name: 'BackButton',
+  rename: 'BackLink',
+  props: {
+    variant: {
+      error: true
+    },
+    size: {
+      error: true
+    },
+    xsFullWidth: {
+      error: true
+    },
+    startIcon: {
+      error: true
+    }
+  }
+});
+export default BackButton;

package/esm/core/Button/ButtonLink.js

@@ -0,0 +1,16 @@
+import CoreButtonLink from '@digigov/react-core/ButtonLink';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var ButtonLink = withDeprecation(CoreButtonLink, {
+  name: 'ButtonLink',
+  props: {
+    variant: {
+      error: true
+    },
+    size: {
+      error: true
+    },
+    xsFullWidth: {
+      error: true
+    }
+  }
+});

package/esm/core/Button/CallToAction.js

@@ -0,0 +1,27 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "children"];
+import React from 'react';
+import CoreCallToAction from '@digigov/react-core/CallToAction';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var CallToAction = withDeprecation(function (_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Start here' : _ref$label,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(CoreCallToAction, props, children || label);
+}, {
+  name: 'CallToAction',
+  props: {
+    variant: {
+      error: true
+    },
+    size: {
+      error: true
+    },
+    xsFullWidth: {
+      error: true
+    }
+  }
+});
+export default CallToAction;

package/esm/core/Button/Icon.js

@@ -0,0 +1,7 @@
+import withDeprecation from '@digigov/ui/utils/withDeprecation'; // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+export var ButtonIcon = withDeprecation(function () {}, {
+  name: 'ButtonIcon',
+  error: true
+});
+export default ButtonIcon;

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

@@ -0,0 +1,13 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the button 1`] = `
+<withDeprecationComponent>
+  <ForwardRef(Button)>
+    <button
+      className="govgr-btn-primary govgr-btn"
+    >
+      hello
+    </button>
+  </ForwardRef(Button)>
+</withDeprecationComponent>
+`;

package/esm/core/Button/index.js

@@ -0,0 +1,37 @@
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["label", "children"];
+import React from 'react';
+import CoreButton from '@digigov/react-core/Button';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var Button = withDeprecation(CoreButton, {
+  name: 'Button',
+  props: {
+    href: {
+      error: 'To use a button with a link import ButtonLink instead'
+    },
+
+    /* variant: {
+      error: true,
+    }, */
+    size: {
+      error: true
+    },
+    xsFullWidth: {
+      error: true
+    }
+  }
+});
+export default Button;
+export var ContinueButton = function ContinueButton(_ref) {
+  var _ref$label = _ref.label,
+      label = _ref$label === void 0 ? 'Continue' : _ref$label,
+      children = _ref.children,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return /*#__PURE__*/React.createElement(Button, props, label || children);
+};
+export * from '@digigov/ui/core/Button/BackButton';
+export * from '@digigov/ui/core/Button/CallToAction';
+export * from '@digigov/ui/core/Button/ButtonLink';
+export * from '@digigov/ui/core/Button/Icon';
+export * from '@digigov/react-core/ButtonGroup';

package/esm/core/Button/index.mdx

@@ -0,0 +1,65 @@
+---
+title: Button
+parent: docs/ui/components
+---
+
+# Button
+
+import Button from '@digigov/ui/core/Button';
+import PropsDoc from '@docs-components/propsDoc';
+import StylesDoc from '@docs-components/stylesDoc';
+
+Use the button component to help users carry out an action like starting an
+application or saving their information.
+
+```jsx live path=core/Button/index.tsx
+import Button from '@digigov/ui/core/Button';
+function CustomButton (props){
+ return (
+  <Button>Action Label</Button>
+ )
+}
+export CustomButton
+
+```
+
+## How it works
+
+Write button text in sentence case, describing the action it performs. For
+example:'
+
+- `Start now` at the [start of the service](patterns/start-pages.md)
+- `Sign in` to an account a user has already created
+- `Continue` when the service does not save a user's information
+- `Save and continue` when the service does save a user's information
+- `Save and come back later` when a user can save their information and come back later
+- `Add another` to add another item to a list or group
+- `Pay` to make a payment
+- `Confirm and send` on a check answers page that does not have any legal
+  content a user must agree to
+- `Accept and send` on a check answers page that has legal content a user
+  must agree to
+- `Sign out` when a user is signed in to an account
+
+You may need to include more or different words to better describe the action.
+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
+
+Use a default button for the main call to action on a page.
+
+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.
+
+## API
+
+### Properties
+
+<PropsDoc data={Button.__doc__} />
+
+### Styles
+
+<StylesDoc data={Button.__doc__} />

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import Component from '@digigov/ui/core/Button';
+
+var _ref = /*#__PURE__*/React.createElement(Component, null, "hello");
+
+it('renders the button', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});

package/esm/core/Card/index.js

@@ -0,0 +1,4 @@
+export * from '@digigov/react-core/Card';
+export * from '@digigov/react-core/CardAction';
+export * from '@digigov/react-core/CardHeading';
+export * from '@digigov/react-core/CardText';

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the closed Details component 1`] = `
+<ForwardRef(Details)>
+  <details
+    className="govgr-details"
+  >
+    <ForwardRef(DetailsSummary)>
+      <summary
+        className="govgr-details__summary"
+      >
+        Help with nationality
+      </summary>
+    </ForwardRef(DetailsSummary)>
+    <ForwardRef(DetailsContent)>
+      <div
+        className="govgr-details__summary-text"
+      >
+        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
+      </div>
+    </ForwardRef(DetailsContent)>
+  </details>
+</ForwardRef(Details)>
+`;
+
+exports[`renders the open Details component 1`] = `
+<ForwardRef(Details)
+  open={true}
+>
+  <details
+    className="govgr-details"
+    open={true}
+  >
+    <ForwardRef(DetailsSummary)>
+      <summary
+        className="govgr-details__summary"
+      >
+        Help with nationality
+      </summary>
+    </ForwardRef(DetailsSummary)>
+    <ForwardRef(DetailsContent)>
+      <div
+        className="govgr-details__summary-text"
+      >
+        We need to know your nationality so we can work out which elections you’re entitled to vote in. If you cannot provide your nationality, you’ll have to send copies of identity documents through the post.
+      </div>
+    </ForwardRef(DetailsContent)>
+  </details>
+</ForwardRef(Details)>
+`;

package/esm/core/Details/index.js

@@ -0,0 +1,5 @@
+import Details from '@digigov/react-core/Details';
+import DetailsContent from '@digigov/react-core/DetailsContent';
+import DetailsSummary from '@digigov/react-core/DetailsSummary';
+export { Details, DetailsContent, DetailsSummary };
+export default Details;

package/esm/core/Details/index.mdx

@@ -0,0 +1,34 @@
+---
+parent: docs/ui/components
+title: Details
+---
+
+## Example
+
+```jsx live
+<Details>
+  <DetailsSummary>Help with nationality</DetailsSummary>
+  <DetailsContent>
+    We need to know your nationality so we can work out which elections you’re
+    entitled to vote in. If you cannot provide your nationality, you’ll have to
+    send copies of identity documents through the post.
+  </DetailsContent>
+</Details>
+```
+
+<br />
+
+## When to use this component
+
+Use the Details component to make a page easier to scan when it contains
+information that only some users will need.
+
+## When not to use this component
+
+Do not use the Details component to hide information that the majority of
+your users should see.
+
+## How it works
+
+The Details component is a short link that expands into a text including some
+extra information, when a user clicks on it.

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

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+import { Details, DetailsContent, DetailsSummary } from '@digigov/ui/core/Details';
+
+var _ref = /*#__PURE__*/React.createElement(Details, null, /*#__PURE__*/React.createElement(DetailsSummary, null, "Help with nationality"), /*#__PURE__*/React.createElement(DetailsContent, null, "We need to know your nationality so we can work out which elections you\u2019re entitled to vote in. If you cannot provide your nationality, you\u2019ll have to send copies of identity documents through the post."));
+
+it('renders the closed Details component', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+
+var _ref2 = /*#__PURE__*/React.createElement(Details, {
+  open: true
+}, /*#__PURE__*/React.createElement(DetailsSummary, null, "Help with nationality"), /*#__PURE__*/React.createElement(DetailsContent, null, "We need to know your nationality so we can work out which elections you\u2019re entitled to vote in. If you cannot provide your nationality, you\u2019ll have to send copies of identity documents through the post."));
+
+it('renders the open Details component', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});

package/esm/core/Divider/index.js

@@ -0,0 +1,7 @@
+import CoreSectionBreak from '@digigov/react-core/SectionBreak';
+import withDeprecation from '@digigov/ui/utils/withDeprecation';
+export var SectionBreak = withDeprecation(CoreSectionBreak, {
+  name: 'Divider',
+  rename: 'SectionBreak'
+});
+export default SectionBreak;