@digigov/ui 1.0.0-079f34f3d → 1.0.0-23c81d9f

package/src/content/Blockquote/Blockquote.stories.js

@@ -8,3 +8,4 @@ export default {
   displayName: 'Blockquote',
 };
 export * from '@digigov/ui/content/Blockquote/__stories__/Default';
+export * from '@digigov/ui/content/Blockquote/__stories__/Dense';

package/src/content/Blockquote/__stories__/Dense.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Blockquote } from '@digigov/ui/content/Blockquote';
+
+export const Dense = () => (
+  <Blockquote dense>
+    Η διαδικασία έκδοσης του διαβατηρίου σας μπορεί να διαρκέσει εώς 10 μέρες,
+    εφόσον η αίτηση σας δεν περιέχει λάθη.
+  </Blockquote>
+);
+
+export default Dense;

package/src/content/Card/Card.stories.js

@@ -17,3 +17,5 @@ export * from '@digigov/ui/content/Card/__stories__/WithDivider';
 export * from '@digigov/ui/content/Card/__stories__/WithClickableContent';
 export * from '@digigov/ui/content/Card/__stories__/WithClickableLink';
 export * from '@digigov/ui/content/Card/__stories__/WithGroupButton';
+export * from '@digigov/ui/content/Card/__stories__/WithLink';
+export * from '@digigov/ui/content/Card/__stories__/Dense';

package/src/content/Card/__stories__/Default.tsx

@@ -16,7 +16,7 @@ export const Default = () => (
       αλιευτική σας δραστηριότητα.
     </CardContent>
     <CardAction>
-      <Button>Συνέχεια</Button>
+      <Button>Είσοδος</Button>
     </CardAction>
   </Card>
 );

package/src/content/Card/__stories__/Dense.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import {
+  Card,
+  CardAction,
+  CardHeading,
+  CardContent,
+} from '@digigov/ui/content/Card';
+import { Button } from '@digigov/ui/form/Button';
+
+export const Dense = () => (
+  <Card variant="border" borderColor="dark" dense>
+    <CardHeading>Γεωργία και κτηνοτροφία</CardHeading>
+    <CardContent>
+      Διαδικασίες, επιδοτήσεις και αποζημιώσεις για την γεωργική, κτηνοτροφική ή
+      αλιευτική σας δραστηριότητα.
+    </CardContent>
+    <CardAction>
+      <Button>Συνέχεια</Button>
+    </CardAction>
+  </Card>
+);
+
+export default Dense;

package/src/content/Card/__stories__/WithLink.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import {
+  Card,
+  CardHeading,
+  CardContent,
+  CardAction,
+} from '@digigov/ui/content/Card';
+
+import { Link } from '@digigov/ui/navigation/Link';
+
+export const WithLink = () => (
+  <Card>
+    <CardHeading>Γεωργία και κτηνοτροφία</CardHeading>
+    <CardContent>
+      Διαδικασίες, επιδοτήσεις και αποζημιώσεις για την γεωργική, κτηνοτροφική ή
+      αλιευτική σας δραστηριότητα.
+    </CardContent>
+    <CardAction>
+      <Link>Είσοδος</Link>
+    </CardAction>
+  </Card>
+);
+
+export default WithLink;

package/src/content/Details/__snapshots__/index.spec.tsx.snap

@@ -24,10 +24,10 @@ exports[`renders the closed Details component 1`] = `
       <ForwardRef(DetailsContent)>
         <ForwardRef(Base)
           as="div"
-          className="govgr-details__summary-text"
+          className="govgr-details__content"
         >
           <div
-            className="govgr-details__summary-text"
+            className="govgr-details__content"
           >
             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>
@@ -66,10 +66,10 @@ exports[`renders the open Details component 1`] = `
       <ForwardRef(DetailsContent)>
         <ForwardRef(Base)
           as="div"
-          className="govgr-details__summary-text"
+          className="govgr-details__content"
         >
           <div
-            className="govgr-details__summary-text"
+            className="govgr-details__content"
           >
             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>

package/src/content/Markdown/index.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import SafeHTML from '@digigov/ui/content/SafeHTML';
+import { useMarkdownToHTML } from '@digigov/ui/content/Markdown/useMarkdownToHTML';
+
+export const Markdown = (children, props) => {
+  let content = props.content || children;
+
+  const html = useMarkdownToHTML(content.content);
+  return <SafeHTML content={html} />;
+}
+
+export default Markdown;

package/src/content/Markdown/useMarkdownToHTML.ts

@@ -0,0 +1,100 @@
+/**
+ * nano-markdown - a minimal markdown to html converter
+ * Copyright (c) 2015, Vladimir Antonov. (MIT Licensed)
+ * https://github.com/Holixus/nano-markdown
+ */
+
+// Removed IIFE
+
+"use strict";
+
+import { useMemo } from "react";
+
+const escapes = '\\[!]#{()}*+-._';
+const esc_ofs = 16;
+
+function lex(a) {
+    return a.replace(/\\([(){}[\]#*+\-.!_\\])/g, function (_, ch) {
+        return String.fromCharCode(1, escapes.indexOf(ch) + esc_ofs);
+    }).replace(/(\*\*|__|~~)(.*?)\1/g, function (_, delim, text) {
+        return (delim === '~~') ? '<del>' + text + '</del>' : '<b>' + text + '</b>';
+    // @ts-ignore
+    }).replace(/(\n|^|\W)([_\*])(.*?)\2(\W|$|\n)/g, function (_, l, di, ital, r) {
+        return l + '<i>' + ital + '</i>' + r;
+    }).replace(/(!?)\[([^\]<>]+)\]\((\+?)([^ \)<>]+)(?: "([^\(\)\"]+)")?\)/g, function (_, is_img, text, new_tab, ref, title) {
+        let attrs = title ? ' title="' + title + '"' : '';
+        if (is_img)
+            return '<img src="' + nmd.href(ref) + '" alt="' + text + '"' + attrs + '/>';
+        if (new_tab)
+            attrs += ' target="_blank" rel="noopener"';
+        return '<a href="' + nmd.href(ref) + '"' + attrs + '>' + text + '</a>';
+    });
+}
+
+function unesc(a) {
+    return a.replace(/\x01([\x0f-\x1c])/g, function (_, c) {
+        return escapes.charAt(c.charCodeAt(0) - esc_ofs);
+    });
+}
+
+const nmd = function (md) {
+    return md.replace(/.+(?:\n.+)*/g, function (m) {
+        const code = /^\s{4}([^]*)$/.exec(m);
+        if (code)
+            return '<pre><code>' + code[1].replace(/\n    /g, '\n') + '</code></pre>';
+        const ps:any[] = []
+        let cur:any = null
+        const rows = lex(m).split('\n');
+        for (let i = 0, l = rows.length; i < l; ++i) {
+            const row = rows[i],
+                head = /^\s{0,3}(\#{1,6})\s+(.*?)\s*#*\s*$/.exec(row);
+            if (head) {
+                ps.push(cur = [head[2], 'h', head[1].length]);
+                continue;
+            }
+            const list = /^(\s*)(?:[-*]|(\d[.)])) (.+)$/.exec(row);
+            if (list)
+                ps.push(cur = [list[3], list[2] ? 'ol' : 'ul', list[1].length]);
+            else if (/^\s{0,3}([-])(\s*\1){2,}\s*$/.test(row))
+                ps.push(cur = ['', 'hr']);
+            else if (cur && cur[1] !== 'hr' && cur[1] !== 'h')
+                cur[0] += '\n' + row;
+            else
+                ps.push(cur = [row, 'span', '']);
+        }
+        let out = '', lists:any = [];
+        for (let i = 0, l = ps.length; i < l; ++i) {
+            cur = ps[i];
+            const text = cur[0], tag = cur[1], lvl = cur[2];
+            if (tag === 'ul' || tag === 'ol') {
+                if (!lists.length || lvl > lists[0][1]) {
+                    lists.unshift([tag, lvl]);
+                    out += '<' + lists[0][0] + '><li>' + text;
+                } else if (lists.length > 1 && lvl <= lists[1][1]) {
+                    out += '</li></' + lists.shift()[0] + '>';
+                    --i;
+                } else
+                    out += '</li><li>' + text;
+            } else {
+                while (lists.length)
+                    out += '</li></' + lists.shift()[0] + '>';
+                out += (tag === 'hr') ? '<hr/>' : '<' + tag + lvl + nmd.headAttrs() + '>' + text + '</' + tag + lvl + '>';
+            }
+        }
+        while (lists.length)
+            out += '</li></' + lists.shift()[0] + '>';
+        return unesc(out);
+    });
+};
+
+nmd.href = function (ref) {
+    return ref;
+};
+
+nmd.headAttrs = function () {
+    return '';
+};
+
+export function useMarkdownToHTML(markdown) {
+    return useMemo(() => nmd(markdown), [markdown]);
+}

package/src/content/SafeHTML/index.tsx

@@ -0,0 +1,82 @@
+import React, { useMemo } from 'react';
+import DomPurify from 'dompurify';
+
+const defaultTags = ['b', 'strong', 'sub', 'sup', 'br', 'a', 'p', 'ul', 'li', 'ol'];
+
+const elementClassNameMapping = {
+  a: 'govgr-link',
+  p: 'govgr-body',
+  b: 'govgr-bold',
+  strong: 'govgr-bold',
+  sub: 'govgr-sub',
+  ul: 'govgr-list govgr-list--bullet',
+  ol: 'govgr-list govgr-list--number',
+  li: 'govgr-list__item',
+}
+
+if (typeof window !== 'undefined') {
+  DomPurify.addHook('afterSanitizeAttributes', function(node) {
+    if (node.tagName.toLowerCase() in elementClassNameMapping) {
+      node.setAttribute('class', elementClassNameMapping[node.tagName.toLowerCase()]);
+    }
+    // set all elements owning target to target=_blank
+    if ('target' in node) {
+      node.setAttribute('target', '_blank');
+      node.setAttribute('rel', 'noopener');
+    }
+  });
+}
+
+export const getClosingTags = (htmlString) => {
+  const tags = htmlString.match(/<[^>]+\/?>/g);
+  const stack: Array<string> = [];
+  if (!tags) {
+    return stack;
+  }
+  for (const tag of tags) {
+    if (tag.startsWith('</') && tag.endsWith('>')) {
+      const tagName = tag.replace('</', '<');
+      // @ts-ignore
+      const openingTag = stack.findLastIndex((element) => element === tagName);
+      if (openingTag !== -1) {
+        stack.splice(openingTag, 1);
+      }
+    } else {
+      stack.push(tag.split(' ').length > 1 ? `${tag.split(' ')[0]}>` : tag);
+    }
+  }
+  return stack;
+}
+
+interface SafeHTMLProps {
+  content: string;
+  tags?: Array<string>;
+  Tag?: string;
+  style?: React.CSSProperties;
+}
+
+export const SafeHTML = ({ content, tags, Tag = 'span', style = {} }: SafeHTMLProps) => {
+  if (tags) {
+    tags.push(...defaultTags);
+  } else {
+    tags = defaultTags;
+  }
+  const parsedHTML = useMemo(
+    () => {
+      return DomPurify.sanitize(content, { ALLOWED_TAGS: tags, ADD_ATTR: ['target'] })
+    },
+    [content]
+  );
+  return (
+    <Tag
+      // @ts-ignore
+      style={{ whiteSpace: 'break-spaces', ...style }}
+      className="govgr-body"
+      dangerouslySetInnerHTML={{
+        __html: parsedHTML,
+      }}
+    />
+  );
+}
+
+export default SafeHTML;

package/src/content/StepNav/StepNav.stories.js

@@ -10,3 +10,6 @@ export default {
 };
 export * from './__stories__/Default';
 export * from './__stories__/WithHints';
+export * from './__stories__/WithHook';
+export * from './__stories__/Dense';
+export * from './__stories__/Auto';

package/src/content/StepNav/__stories__/Auto.tsx

@@ -0,0 +1,228 @@
+import React from 'react';
+import {
+  StepNavCircleNumber,
+  StepNavControls,
+  StepNavList,
+  StepNavListItem,
+  StepNavAccordionContent,
+  StepNavAccordionSummary,
+  StepNavAccordionSummaryHeading,
+  StepNavAccordionHeadingTitle,
+  StepNavAccordionHeadingText,
+  StepNavAuto,
+  StepNavAccordionAuto,
+  StepNavCloseAllButtonAuto,
+  StepNavOpenAllButtonAuto
+} from '@digigov/ui/content/StepNav';
+
+import { Button, ButtonGroup } from '@digigov/ui/form/Button';
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+import {
+  SummaryList,
+  SummaryListItem,
+  SummaryListItemAction,
+  SummaryListItemKey,
+  SummaryListItemValue,
+} from '@digigov/ui/content/SummaryList';
+
+const data = [
+  {
+    title: 'Απάντηση',
+    codename: '(KEP-APA)',
+    date: '7 Απριλίου 2023, 12:32μ.μ.',
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '7 Απριλίου 2023, 12:32μ.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Καλλιόπη Παπαδοπούλου',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '637283494',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+  {
+    title: 'Συμπληρωματικά έγγραφα ',
+    codename: '(MORE-DOCS)',
+    date: '5 Απριλίου 2023, 8:32π.μ.',
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '7 Απριλίου 2023, 12:32μ.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Μαρία Φλούπη',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '637283494',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+  {
+    title: 'Αίτηση για συμπληρωματικά έγγραφα',
+    codename: '(MORE-DOCS-REQUEST)',
+    date: '5 Απριλίου 2023, 8:32π.μ.',
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '5 Απριλίου 2023, 8:32π.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Μαρία Φλούπη',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '974256',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+  {
+    title: 'Αίτηση Βεβαίωσης Μόνιμης Κατοικίας',
+    codename: '(PERMRES-FOREIS)',
+    date: '3 Απριλίου 2023, 5:42μ.μ.',
+    actions: [
+      {
+        label: 'Απάντηση',
+      },
+      {
+        label: 'Αίτημα για συμπληρωματικά έγγραφα',
+      },
+    ],
+    details: [
+      {
+        name: 'Ημερομηνία',
+        value: '3 Απριλίου 2023, 5:42μ.μ.',
+      },
+      {
+        name: 'Χειριστής',
+        value: 'Μαρία Φλούπη',
+        actions: ['Ανάθεση'],
+      },
+      {
+        name: 'Κωδικός επαλήθευσης',
+        value: '475747',
+      },
+      {
+        name: 'Κατάσταση',
+        value: 'Εισερχόμενη',
+        actions: ['Αλλαγή'],
+      },
+    ],
+  },
+];
+
+export const Auto = () => {
+
+  return (
+    <StepNavAuto defaultOpen={'1'} singleOpen >
+      <StepNavControls>
+        <StepNavOpenAllButtonAuto>Εμφάνιση όλων</StepNavOpenAllButtonAuto>
+        <StepNavCloseAllButtonAuto>Απόκρυψη όλων</StepNavCloseAllButtonAuto>
+      </StepNavControls>
+      <StepNavList>
+        {data &&
+          data.map((field, index) => {
+            return (
+              <StepNavListItem key={index}>
+                <StepNavAccordionAuto id={`${index}`}>
+                  <StepNavAccordionSummary>
+                    <StepNavAccordionSummaryHeading aria-controls="content1">
+                      <StepNavCircleNumber border={false}></StepNavCircleNumber>
+                      {index === 1 ? (
+                        <StepNavCircleNumber border={false}>
+                          <VisuallyHidden>Βήμα</VisuallyHidden>
+                          και
+                        </StepNavCircleNumber>
+                      ) : (
+                        <StepNavCircleNumber>
+                          <VisuallyHidden>Βήμα</VisuallyHidden>
+                          {index > 1 ? index : index + 1}
+                        </StepNavCircleNumber>
+                      )}
+                      <StepNavAccordionHeadingTitle>
+                        <StepNavAccordionHeadingText>
+                          {field.title}
+                          {field.codename && (
+                            <>
+                              {' - '} {field.codename}
+                            </>
+                          )}
+                        </StepNavAccordionHeadingText>
+                      </StepNavAccordionHeadingTitle>
+                    </StepNavAccordionSummaryHeading>
+                  </StepNavAccordionSummary>
+                  <StepNavAccordionContent id="content1">
+                    <ButtonGroup>
+                      {(field.actions || []).map((action, subIndex) => (
+                        <Button color="primary" key={subIndex}>
+                          {action.label}
+                        </Button>
+                      ))}
+                      <Button color="secondary">Προβολή εγγράφου</Button>
+                    </ButtonGroup>
+                    {field.details && (
+                      <SummaryList>
+                        {field.details.map((field, index) => {
+                          return (
+                            <SummaryListItem key={index}>
+                              <SummaryListItemKey>
+                                {field.name}
+                              </SummaryListItemKey>
+                              <SummaryListItemValue>
+                                {field.value}
+                              </SummaryListItemValue>
+                              {field.actions && (
+                                <SummaryListItemAction>
+                                  <ButtonGroup>
+                                    {field.actions &&
+                                      field.actions.map((action, subIndex) => {
+                                        return (
+                                          <Button key={subIndex} variant="link">
+                                            {action}
+                                          </Button>
+                                        );
+                                      })}
+                                  </ButtonGroup>
+                                </SummaryListItemAction>
+                              )}
+                            </SummaryListItem>
+                          );
+                        })}
+                      </SummaryList>
+                    )}
+                  </StepNavAccordionContent>
+                </StepNavAccordionAuto>
+              </StepNavListItem>
+            );
+          })}
+      </StepNavList>
+    </StepNavAuto>
+  );
+};
+
+export default Auto;