@digigov/ui 0.28.0 → 0.28.2

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,8 @@
+
+import CircularProgress from "@digigov/ui/admin"
+export default {
+  title: 'Digigov UI/admin/CircularProgress',
+  component: CircularProgress,
+}
+export * from './__stories__/Default';
+  

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

@@ -0,0 +1,15 @@
+import React from 'react';
+import FullPageBackground from '@digigov/ui/admin/FullPageBackground';
+import LoaderContainer from '@digigov/ui/admin/LoaderContainer';
+import CircularProgress from '@digigov/ui/admin/CircularProgress';
+
+export const Default = () => {
+  return (
+    <FullPageBackground>
+      <LoaderContainer>
+        <CircularProgress />
+      </LoaderContainer>
+    </FullPageBackground>
+  );
+};
+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,
+};
+export * from '@digigov/ui/admin/CopyToClipboard/__stories__/Default';
+export * from '@digigov/ui/admin/CopyToClipboard/__stories__/Banner';
+export * from '@digigov/ui/admin/CopyToClipboard/__stories__/MultipleCopies';

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

@@ -0,0 +1,18 @@
+import React from 'react';
+import {CopyToClipboard} from '@digigov/ui/admin';
+import {
+  Button,
+} from '@digigov/ui';
+
+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';
+
+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/__stories__/MultipleCopies.tsx

@@ -0,0 +1,213 @@
+import React from 'react';
+import { CopyToClipboard } from '@digigov/ui/admin';
+import {
+  AdminAside,
+  AdminContainer,
+  AdminLayout,
+  AdminMain,
+  AdminTopSection,
+  AdminHeader,
+  AdminHeaderSection,
+  DropdownBase,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/react-extensions/admin';
+import {
+  MoreVertIcon,
+  NavVertical,
+  NavVerticalItem,
+} from '@digigov/react-core';
+import {
+  Accordion,
+  AccordionItem,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/core/Accordion';
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemKey,
+  SummaryListItemValue,
+  SummaryListItemAction,
+  Button,
+  BackButton,
+  ButtonGroup,
+} from '@digigov/ui';
+import {
+  HeaderContent,
+  HeaderTitle,
+  HeaderSubtitle,
+  SectionBreak,
+} from '@digigov/ui';
+import Title from '@digigov/ui/typography/Title';
+import Paragraph from '@digigov/ui/typography/Paragraph';
+import GovGRFooter from '@digigov/ui/govgr/Footer';
+import GovGRLogo from '@digigov/ui/govgr/Logo';
+import Grid from '@digigov/ui/layouts/Grid';
+
+const fields = [
+  {
+    name: 'Θέμα',
+    value: 'Αίτηση Ληξιαρχικής Πράξης Γάμου',
+  },
+  {
+    name: 'Ημερομηνία',
+    value: '09/03/2002 14:54:36',
+  },
+  {
+    name: 'Κωδικός επαλήθευσης',
+    value: 'NdH-EYREW1yd1LUhEOssx4A',
+    actions: ['Προβολή', 'Αντιγραφή συνδέσμου'],
+  },
+  {
+    name: 'Κατάσταση',
+    value: 'Εισερχόμενη',
+    actions: ['Αλλάγή'],
+  },
+  {
+    name: 'Χειριστής',
+    value: 'Δεν έχει οριστεί χειριστής',
+    actions: ['Ανάθεση'],
+  },
+];
+
+export const MultipleCopies = () => {
+  return (
+    <>
+      <AdminLayout>
+        <AdminHeader>
+          <AdminHeaderSection>
+            <HeaderContent>
+              <GovGRLogo />
+              <HeaderTitle>Θυρίδες</HeaderTitle>
+            </HeaderContent>
+            <HeaderSubtitle>
+              <DropdownBase align="right">
+                <DropdownButton variant="link">
+                  Έχετε συνδεθεί ως Καλλιόπη Παπαδοπούλου
+                  <MoreVertIcon />
+                </DropdownButton>
+                <DropdownContent>
+                  <NavVertical>
+                    <NavVerticalItem href="#">Επεξεργασία</NavVerticalItem>
+                    <NavVerticalItem href="#">Μετακίνηση</NavVerticalItem>
+                    <NavVerticalItem href="#">
+                      Οριστική διαγραφή
+                    </NavVerticalItem>
+                  </NavVertical>
+                </DropdownContent>
+              </DropdownBase>
+            </HeaderSubtitle>
+          </AdminHeaderSection>
+        </AdminHeader>
+        <AdminContainer>
+          <Grid item md={3} lg={2}>
+            <AdminAside>
+              <AdminTopSection>
+                <BackButton>Αλλαγή θυρίδας</BackButton>
+                <Title size="sm">ΚΕΠ/ΖΑΚΥΝΘΟΥ [ΖΑΚΥΝΘΙΩΝ]</Title>
+                <Paragraph>ΚΕΠ/ΖΑΚΥΝΘΟΥ [ΖΑΚΥΝΘΙΩΝ]</Paragraph>
+              </AdminTopSection>
+              <SectionBreak visible size="m" />
+              <Button>Νέα υπόθεση</Button>
+              <Accordion>
+                <AccordionItem>
+                  <AccordionSectionSummary>
+                    <AccordionSectionSummaryHeading>
+                      Υποθέσεις
+                    </AccordionSectionSummaryHeading>
+                  </AccordionSectionSummary>
+                </AccordionItem>
+                <AccordionItem>
+                  <AccordionSectionSummary>
+                    <AccordionSectionSummaryHeading>
+                      Διαχείριση
+                    </AccordionSectionSummaryHeading>
+                  </AccordionSectionSummary>
+                  <NavVertical>
+                    <NavVerticalItem>Χρήστες</NavVerticalItem>
+                    <NavVerticalItem>Αιτήματα</NavVerticalItem>
+                  </NavVertical>
+                </AccordionItem>
+              </Accordion>
+            </AdminAside>
+          </Grid>
+          <Grid item md={9} lg={10}>
+            <AdminMain>
+              <Grid container spacing={4}>
+                <Grid item xs={12}>
+                  <Title size="xl"># Υπόθεση 4</Title>
+
+                  <ButtonGroup>
+                    <CopyToClipboard
+                      text="AAABBBFFFLLL"
+                      variant="tooltip-left"
+                      message="text successfuly copied!"
+                    >
+                      <Button>Απάντηση</Button>
+                    </CopyToClipboard>
+                    <Button color="secondary">Αποστολή</Button>
+                    <Button color="secondary">Αποθήκευση</Button>
+                  </ButtonGroup>
+                  <SummaryList>
+                    {fields &&
+                      fields.map((field, index) => {
+                        return (
+                          <SummaryListItem key={index}>
+                            <SummaryListItemKey>
+                              {field.name}
+                            </SummaryListItemKey>
+                            <SummaryListItemValue>
+                              {field.value}
+                            </SummaryListItemValue>
+                            <SummaryListItemAction>
+                              <ButtonGroup>
+                                {field.actions &&
+                                  field.actions.map((action, subIndex) => {
+                                    return (
+                                      <CopyToClipboard
+                                        text="MMMNNNKKKO"
+                                        variant="tooltip-right"
+                                        key={subIndex}
+                                      >
+                                        <Button key={subIndex} variant="link">
+                                          {action}
+                                        </Button>
+                                      </CopyToClipboard>
+                                    );
+                                  })}
+                              </ButtonGroup>
+                            </SummaryListItemAction>
+                          </SummaryListItem>
+                        );
+                      })}
+                  </SummaryList>
+                </Grid>
+                <Grid item xs={12}>
+                  <CopyToClipboard
+                    text="AAABBBFFFLLL"
+                    variant="banner"
+                    message="text successfuly copied!"
+                  >
+                    <Button color="secondary">Banner example</Button>
+                  </CopyToClipboard>
+                </Grid>
+                <Grid item xs={12}>
+                  <CopyToClipboard
+                    text="AAABBBFFFLLL"
+                    variant="tooltip-left"
+                    message="text successfuly copied!"
+                  >
+                    <Button color="secondary">Tooltip example</Button>
+                  </CopyToClipboard>
+                </Grid>
+              </Grid>
+            </AdminMain>
+          </Grid>
+        </AdminContainer>
+        <GovGRFooter />
+      </AdminLayout>
+    </>
+  );
+};
+export default MultipleCopies;

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,4 @@
+export default {
+  title: 'Digigov UI/admin/Drawer',
+};
+// export * from '@digigov/ui/admin/Drawer/__stories__/Default';