@digigov/ui 0.28.3 → 0.29.0

package/src/admin/AutoComplete/utils.ts

@@ -0,0 +1,301 @@
+export const keyCodes = {
+  13: 'enter',
+  27: 'escape',
+  32: 'space',
+  38: 'up',
+  40: 'down',
+};
+export function isIosDevice(): boolean | undefined {
+  return (
+    typeof navigator !== 'undefined' &&
+    !!(
+      navigator.userAgent.match(/(iPod|iPhone|iPad)/g) &&
+      navigator.userAgent.match(/AppleWebKit/g)
+    )
+  );
+}
+export function isPrintableKeyCode(keyCode: number): boolean {
+  return (
+    (keyCode > 47 && keyCode < 58) || // number keys
+    keyCode === 32 ||
+    keyCode === 8 || // spacebar or backspace
+    (keyCode > 64 && keyCode < 91) || // letter keys
+    (keyCode > 95 && keyCode < 112) || // numpad keys
+    (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
+    (keyCode > 218 && keyCode < 223) // [\]' (in order)
+  );
+}
+
+/* Helper Utils for __stories__ */
+export const results = [
+  'Afghanistan',
+  'Akrotiri',
+  'Albania',
+  'Algeria',
+  'American Samoa',
+  'Andorra',
+  'Angola',
+  'Anguilla',
+  'Antarctica',
+  'Antigua and Barbuda',
+  'Argentina',
+  'Armenia',
+  'Aruba',
+  'Ashmore and Cartier Islands',
+  'Australia',
+  'Austria',
+  'Azerbaijan',
+  'Bahamas, The',
+  'Bahrain',
+  'Bangladesh',
+  'Barbados',
+  'Bassas da India',
+  'Belarus',
+  'Belgium',
+  'Belize',
+  'Benin',
+  'Bermuda',
+  'Bhutan',
+  'Bolivia',
+  'Bosnia and Herzegovina',
+  'Botswana',
+  'Bouvet Island',
+  'Brazil',
+  'British Indian Ocean Territory',
+  'British Virgin Islands',
+  'Brunei',
+  'Bulgaria',
+  'Burkina Faso',
+  'Burma',
+  'Burundi',
+  'Cambodia',
+  'Cameroon',
+  'Canada',
+  'Cape Verde',
+  'Cayman Islands',
+  'Central African Republic',
+  'Chad',
+  'Chile',
+  'China',
+  'Christmas Island',
+  'Clipperton Island',
+  'Cocos (Keeling) Islands',
+  'Colombia',
+  'Comoros',
+  'Congo',
+  'Cook Islands',
+  'Coral Sea Islands',
+  'Costa Rica',
+  "Cote d'Ivoire",
+  'Croatia',
+  'Cuba',
+  'Cyprus',
+  'Czech Republic',
+  'Denmark',
+  'Dhekelia',
+  'Djibouti',
+  'Dominica',
+  'Dominican Republic',
+  'Ecuador',
+  'Egypt',
+  'El Salvador',
+  'Equatorial Guinea',
+  'Eritrea',
+  'Estonia',
+  'Ethiopia',
+  'Europa Island',
+  'Falkland Islands',
+  'Faroe Islands',
+  'Fiji',
+  'Finland',
+  'France',
+  'French Guiana',
+  'French Polynesia',
+  'French Southern and Antarctic Lands',
+  'Gabon',
+  'Gambia,',
+  'Gaza Strip',
+  'Georgia',
+  'Germany',
+  'Ghana',
+  'Gibraltar',
+  'Glorioso Islands',
+  'Greece',
+  'Greenland',
+  'Grenada',
+  'Guadeloupe',
+  'Guam',
+  'Guatemala',
+  'Guernsey',
+  'Guinea',
+  'Guinea-Bissau',
+  'Guyana',
+  'Haiti',
+  'Heard Island and McDonald Islands',
+  'Holy See (Vatican City)',
+  'Honduras',
+  'Hong Kong',
+  'Hungary',
+  'Iceland',
+  'India',
+  'Indonesia',
+  'Iran',
+  'Iraq',
+  'Ireland',
+  'Isle of Man',
+  'Israel',
+  'Italy',
+  'Jamaica',
+  'Jan Mayen',
+  'Japan',
+  'Jersey',
+  'Jordan',
+  'Juan de Nova Island',
+  'Kazakhstan',
+  'Kenya',
+  'Kiribati',
+  'Korea, North',
+  'Korea, South',
+  'Kuwait',
+  'Kyrgyzstan',
+  'Laos',
+  'Latvia',
+  'Lebanon',
+  'Lesotho',
+  'Liberia',
+  'Libya',
+  'Liechtenstein',
+  'Lithuania',
+  'Luxembourg',
+  'Macau',
+  'Macedonia',
+  'Madagascar',
+  'Malawi',
+  'Malaysia',
+  'Maldives',
+  'Mali',
+  'Malta',
+  'Marshall Islands',
+  'Martinique',
+  'Mauritania',
+  'Mauritius',
+  'Mayotte',
+  'Mexico',
+  'Micronesia, Federated States of',
+  'Moldova',
+  'Monaco',
+  'Mongolia',
+  'Montserrat',
+  'Morocco',
+  'Mozambique',
+  'Namibia',
+  'Nauru',
+  'Navassa Island',
+  'Nepal',
+  'Netherlands',
+  'Netherlands Antilles',
+  'New Caledonia',
+  'New Zealand',
+  'Nicaragua',
+  'Niger',
+  'Nigeria',
+  'Niue',
+  'Norfolk Island',
+  'Northern Mariana Islands',
+  'Norway',
+  'Oman',
+  'Pakistan',
+  'Palau',
+  'Panama',
+  'Papua New Guinea',
+  'Paracel Islands',
+  'Paraguay',
+  'Peru',
+  'Philippines',
+  'Pitcairn Islands',
+  'Poland',
+  'Portugal',
+  'Puerto Rico',
+  'Qatar',
+  'Reunion',
+  'Romania',
+  'Russia',
+  'Rwanda',
+  'Saint Helena',
+  'Saint Kitts and Nevis',
+  'Saint Lucia',
+  'Saint Pierre and Miquelon',
+  'Saint Vincent and the Grenadines',
+  'Samoa',
+  'San Marino',
+  'Sao Tome and Principe',
+  'Saudi Arabia',
+  'Senegal',
+  'Serbia and Montenegro',
+  'Seychelles',
+  'Sierra Leone',
+  'Singapore',
+  'Slovakia',
+  'Slovenia',
+  'Solomon Islands',
+  'Somalia',
+  'South Africa',
+  'South Georgia and the South Sandwich Islands',
+  'Spain',
+  'Spratly Islands',
+  'Sri Lanka',
+  'Sudan',
+  'Suriname',
+  'Svalbard',
+  'Swaziland',
+  'Sweden',
+  'Switzerland',
+  'Syria',
+  'Taiwan',
+  'Tajikistan',
+  'Tanzania',
+  'Thailand',
+  'Timor-Leste',
+  'Togo',
+  'Tokelau',
+  'Tonga',
+  'Trinidad and Tobago',
+  'Tromelin Island',
+  'Tunisia',
+  'Turkey',
+  'Turkmenistan',
+  'Turks and Caicos Islands',
+  'Tuvalu',
+  'Uganda',
+  'Ukraine',
+  'United Arab Emirates',
+  'United Kingdom',
+  'United States',
+  'Uruguay',
+  'Uzbekistan',
+  'Vanuatu',
+  'Venezuela',
+  'Vietnam',
+  'Virgin Islands',
+  'Wake Island',
+  'Wallis and Futuna',
+  'West Bank',
+  'Western Sahara',
+  'Yemen',
+  'Zambia',
+  'Zimbabwe',
+];
+
+export function suggest(
+  query: string,
+  syncResults: (options: string[]) => void
+): void {
+  syncResults(
+    query
+      ? results.filter(function (result) {
+          return result.toLowerCase().indexOf(query.toLowerCase()) !== -1;
+        })
+      : []
+  );
+}
+/* end Helpers Utils __stories__ */

package/src/admin/Chip/index.tsx

@@ -0,0 +1,8 @@
+export * from '@digigov/react-extensions/admin/Chip';
+export * from '@digigov/react-extensions/admin/ChipHeading';
+export * from '@digigov/react-extensions/admin/ChipSection';
+export * from '@digigov/react-extensions/admin/ChipSectionHorizontal';
+export * from '@digigov/react-extensions/admin/ChipSectionWrapper';
+
+import Chip from '@digigov/react-extensions/admin/Chip';
+export default Chip;

package/src/admin/CircularProgress/CircularProgress.stories.js

@@ -0,0 +1,7 @@
+import CircularProgress from '@digigov/ui/admin/CircularProgress';
+export default {
+  title: 'Digigov UI/admin/CircularProgress',
+  component: CircularProgress,
+  displayName: 'CircularProgress',
+};
+export * from '@digigov/ui/admin/CircularProgress/__stories__/Default';

package/src/admin/CircularProgress/__stories__/Default.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LoaderContainer } from '@digigov/ui/admin/LoaderContainer';
+import { CircularProgress } from '@digigov/ui/admin/CircularProgress';
+
+export const Default = () => {
+  return (
+    <LoaderContainer>
+      <CircularProgress />
+    </LoaderContainer>
+  );
+};
+export default Default;

package/src/admin/CircularProgress/index.tsx

@@ -0,0 +1,4 @@
+export * from '@digigov/react-extensions/admin/CircularProgress';
+
+import CircularProgress from '@digigov/react-extensions/admin/CircularProgress';
+export default CircularProgress;

package/src/admin/CopyToClipboard/CopyToClipboard.stories.js

@@ -0,0 +1,8 @@
+import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
+export default {
+  title: 'Digigov UI/admin/CopyToClipboard',
+  component: CopyToClipboard,
+  displayName: 'CopyToClipboard',
+};
+export * from '@digigov/ui/admin/CopyToClipboard/__stories__/Default';
+export * from '@digigov/ui/admin/CopyToClipboard/__stories__/Banner';

package/src/admin/CopyToClipboard/CopyToClipboard.stories.playwright.json

@@ -0,0 +1,37 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-admin-copytoclipboard--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>button"
+              }
+            }
+          ],
+          "id": "BSaIJR2CMZJU",
+          "title": "Click button"
+        }
+      ]
+    },
+    "digigov-ui-admin-copytoclipboard--banner": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>div>button"
+              }
+            }
+          ],
+          "id": "T50MBtHpfRog",
+          "title": "Click button"
+        }
+      ]
+    }
+  }
+}

package/src/admin/CopyToClipboard/__stories__/Banner.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/admin/CopyToClipboard';
+import { Button } from '@digigov/ui/core/Button';
+
+export const Banner = () => {
+  return (
+    <CopyToClipboard
+      text="copied-text"
+      variant="banner"
+      message="text successfuly copied!"
+    >
+      <Button color="secondary">Banner example</Button>
+    </CopyToClipboard>
+  );
+};
+export default Banner;

package/src/admin/CopyToClipboard/__stories__/Default.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/admin/CopyToClipboard';
+import { Button } from '@digigov/ui/core/Button';
+
+export const Default = () => {
+  return (
+    <CopyToClipboard
+      text="copied-text"
+      variant="tooltip-left"
+      message="text successfuly copied!"
+      id="copy-to-clipboard"
+    >
+      <Button color="secondary" aria-describedby="copy-to-clipboard">
+        Copy
+      </Button>
+    </CopyToClipboard>
+  );
+};
+export default Default;

package/src/admin/CopyToClipboard/index.mdx

@@ -0,0 +1,26 @@
+---
+id: copy-to-clipboard
+title: CopyToClipboard
+---
+
+```bash
+import CopyToClipboard from '@digigov/ui/admin/CopyToClipboard';
+```
+
+## How to use
+
+### Default
+
+<Story
+  packageName="@digigov/ui"
+  component="admin/CopyToClipboard"
+  story="Default.tsx"
+/>
+
+### Banner
+
+<Story packageName="@digigov/ui" component="admin/CopyToClipboard" story="Banner.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="CopyToClipboard" />

package/src/admin/CopyToClipboard/index.tsx

@@ -0,0 +1,60 @@
+import React, { useState, useEffect } from 'react';
+import CopyToClipboardContainer from '@digigov/react-extensions/admin/CopyToClipboardContainer';
+import CopyToClipboardMessage from '@digigov/react-extensions/admin/CopyToClipboardMessage';
+import NormalText from '@digigov/ui/typography/NormalText';
+import { useTranslation } from '@digigov/ui/app';
+
+type DivElementAttributes = JSX.IntrinsicElements['div'];
+export interface CopyToClipboardProps extends DivElementAttributes {
+  text: string;
+  variant?: 'tooltip-right' | 'tooltip-left' | 'banner';
+  message?: string;
+  timeout?: number;
+}
+
+export const CopyToClipboard = React.forwardRef<
+  HTMLDivElement,
+  CopyToClipboardProps
+>(function CopyToClipboard(
+  { text, variant = 'tooltip-right', message, timeout = 3000, children },
+  ref
+) {
+  const [enabled, setEnabled] = useState(false);
+  const { t } = useTranslation();
+
+  useEffect(() => {
+    const timeoutInstance = setTimeout(() => {
+      if (enabled) setEnabled(false);
+    }, timeout);
+
+    return () => clearTimeout(timeoutInstance);
+  }, [enabled]);
+
+  function copyToClipboard() {
+    navigator.clipboard.writeText(text);
+    setEnabled(true);
+  }
+
+  return (
+    <CopyToClipboardContainer
+      onClick={copyToClipboard}
+      variant={variant}
+      ref={ref}
+    >
+      {children}
+      {enabled && (
+        <CopyToClipboardMessage
+          variant={variant}
+          enabled={enabled}
+          role="tooltip"
+        >
+          <NormalText>{message || t('copy-to-clipboard.message')}</NormalText>
+        </CopyToClipboardMessage>
+      )}
+    </CopyToClipboardContainer>
+  );
+});
+
+export default CopyToClipboard;
+
+export { CopyToClipboardContainer, CopyToClipboardMessage };

package/src/admin/Drawer/Drawer.stories.js

@@ -0,0 +1,11 @@
+import Drawer from '@digigov/ui/admin/Drawer';
+
+export default {
+  title: 'Digigov UI/admin/Drawer',
+  description:
+    'Use this component when you want to add a mobile friendly menu in admin layouts.',
+  link: 'https://guide.services.gov.gr/docs/drawer-layout',
+  component: Drawer,
+  displayName: 'Drawer',
+};
+export * from '@digigov/ui/admin/Drawer/__stories__/Default';

package/src/admin/Drawer/__stories__/Default.tsx

@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import { Drawer } from '@digigov/ui/admin/Drawer';
+import { NavList, NavListItem } from '@digigov/ui/core/NavList';
+import { Title } from '@digigov/ui/typography/Title';
+import { DrawerHeading } from '@digigov/ui/admin/Drawer';
+
+function useDrawer() {
+  const [open, setOpen] = useState(true);
+  function toggleDrawer() {
+    setOpen(!open);
+  }
+  return [open, toggleDrawer] as const;
+}
+
+const links = [
+  { name: 'Nav1', href: '#', label: 'Nav list item 1' },
+  {
+    name: 'Nav2',
+    href: '#',
+    label: 'Nav list item 2',
+    subMenu: [
+      {
+        name: 'Nav2.1',
+        href: '#',
+        label: 'Nav list item 2.1',
+      },
+      {
+        name: 'Nav2.2',
+        href: '#',
+        label: 'Nav list item 2.2',
+      },
+      {
+        name: 'Nav2.3',
+        href: '#',
+        label: 'Nav list item 2.3',
+      },
+      {
+        name: 'Nav2.4',
+        href: '#',
+        label: 'Nav list item 2.4',
+      },
+    ],
+  },
+  { name: 'Nav3', href: '#', label: 'Nav list item 3' },
+];
+
+export const Default = () => {
+  const [open, toggleDrawer] = useDrawer();
+
+  return (
+    <Drawer direction="left" open={open}>
+      <DrawerHeading onClick={() => toggleDrawer()}>
+        <Title size="md">Menu</Title>
+      </DrawerHeading>
+      <NavList links={links} aria-label="Nav list" role="menu">
+        {links.map((link, key) => (
+          <NavListItem
+            key={key}
+            name={link.name}
+            aria-label={link.label}
+            role="menuitem"
+            aria-haspopup={link.subMenu ? 'true' : 'false'}
+          />
+        ))}
+      </NavList>
+    </Drawer>
+  );
+};
+export default Default;

package/src/admin/Drawer/index.mdx

@@ -0,0 +1,16 @@
+---
+id: drawer
+title: Drawer
+---
+
+```bash
+import Drawer from '@digigov/ui/app/Drawer';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="admin/Drawer" story="Default.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="Drawer" />

package/src/admin/Drawer/index.tsx

@@ -0,0 +1,5 @@
+export * from '@digigov/react-extensions/admin/Drawer';
+export * from '@digigov/react-extensions/admin/DrawerHeading';
+
+import Drawer from '@digigov/react-extensions/admin/Drawer';
+export default Drawer;

package/src/admin/Dropdown/Dropdown.stories.js

@@ -0,0 +1,15 @@
+/* eslint-disable digigov/no-relative-imports */
+
+import Dropdown from '@digigov/ui/admin/Dropdown';
+export default {
+  title: 'Digigov UI/admin/Dropdown',
+  description:
+    'Use the dropdown component to provide more options to users in cases where there is not enough space such as tables, navbars, etc.',
+  link:
+    'https://guide.services.gov.gr/docs/patterns/admin-pages/components/dropdown',
+  component: Dropdown,
+  displayName: 'Dropdown',
+};
+export * from './__stories__/Default';
+export * from './__stories__/AlignRight';
+export * from './__stories__/PlacementTop';

package/src/admin/Dropdown/__stories__/AlignRight.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/admin/Dropdown';
+
+import { FieldContainer } from '@digigov/ui/core/FieldContainer';
+import { LabelContainer } from '@digigov/ui/core/LabelContainer';
+import { SectionBreak } from '@digigov/ui/core/SectionBreak';
+import { NavVertical } from '@digigov/ui/core/NavList/NavVertical';
+import { LabelTitle } from '@digigov/ui/core/LabelContainer';
+import { TextInput } from '@digigov/ui/core/TextInput';
+import { NavVerticalItem } from '@digigov/ui/core/NavList/NavVerticalItem';
+import { Button } from '@digigov/ui/core/Button';
+
+export const AlignRight = () => (
+  <div
+    style={{
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <Dropdown align="right" open>
+      <DropdownButton
+        role="button"
+        aria-haspopup="true"
+        aria-controls="menu2"
+        arrow
+      >
+        Αναζητηση
+      </DropdownButton>
+      <DropdownContent role="menu" id="menu2">
+        <FieldContainer role="menuitem">
+          <LabelContainer>
+            <LabelTitle>Όνομα πεδίου</LabelTitle>
+            <TextInput name="input-name" />
+          </LabelContainer>
+        </FieldContainer>
+        <SectionBreak visible role="separator" />
+        <NavVertical role="menu">
+          <NavVerticalItem role="menuitem" href="#">
+            Επεξεργασία
+          </NavVerticalItem>
+          <NavVerticalItem role="menuitem" href="#">
+            Μετακίνηση
+          </NavVerticalItem>
+          <NavVerticalItem role="menuitem" href="#">
+            Οριστική διαγραφή
+          </NavVerticalItem>
+        </NavVertical>
+        <SectionBreak visible role="separator" />
+        <Button role="menuitem">Ενέργεια</Button>
+      </DropdownContent>
+    </Dropdown>
+  </div>
+);
+
+export default AlignRight;