@digigov/ui 0.35.4 → 1.0.0-rc

package/src/app/ThemeOptions/index.tsx

@@ -0,0 +1,287 @@
+import React, { useState } from 'react';
+import clsx from 'clsx';
+import { BaseProps } from '@digigov/react-core';
+import useFontSize, {
+  FontSizeOptions,
+} from '@digigov/ui/app/hooks/useFontSize';
+import useHighlightLinks, {
+  HighlightLinksOptions,
+} from '@digigov/ui/app/hooks/useHighlightLinks';
+import useLetterSpacing, {
+  LetterSpacingOptions,
+} from '@digigov/ui/app/hooks/useLetterSpacing';
+import useLineHeight, {
+  LineHeightOptions,
+} from '@digigov/ui/app/hooks/useLineHeight';
+import useTheme, { ThemeSelectOptions } from '@digigov/ui/app/hooks/useTheme';
+import Button from '@digigov/ui/form/Button';
+import FieldContainer, {
+  Fieldset,
+  FieldsetLegend,
+} from '@digigov/ui/form/FieldContainer';
+import Form from '@digigov/ui/form/Form';
+import { RadioContainer, RadioItem } from '@digigov/ui/form/RadioContainer';
+import SectionBreak from '@digigov/ui/layouts/SectionBreak';
+
+import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
+
+export interface ThemeOptionsProps extends BaseProps<'form'> {
+  colorsOption?: boolean;
+  fontSizeOption?: boolean;
+  lineHeightOption?: boolean;
+  letterSpacingOption?: boolean;
+  highlightLinksOption?: boolean;
+
+  colorsOptionTitleSize?: TitleSize;
+  fontSizeOptionTitleSize?: TitleSize;
+  lineHeightOptionTitleSize?: TitleSize;
+  letterSpacingOptionTitleSize?: TitleSize;
+  highlightLinksOptionTitleSize?: TitleSize;
+}
+
+type TitleSize = 'xl' | 'lg' | 'md' | 'sm' | 'hidden';
+
+const FieldsetLegendTitle = ({ titleSize, titleValue }) => {
+  return (
+    <>
+      {titleSize === 'hidden' ? (
+        <FieldsetLegend>
+          <VisuallyHidden>{titleValue}</VisuallyHidden>
+        </FieldsetLegend>
+      ) : (
+        <FieldsetLegend size={titleSize}>{titleValue}</FieldsetLegend>
+      )}
+    </>
+  );
+};
+
+// export const ThemeOptions = () => {
+export const ThemeOptions = React.forwardRef<
+  HTMLFormElement,
+  ThemeOptionsProps
+>(function ThemeOptions(
+  {
+    colorsOption = true,
+    fontSizeOption = true,
+    lineHeightOption = true,
+    letterSpacingOption = true,
+    highlightLinksOption = true,
+
+    colorsOptionTitleSize = 'sm',
+    fontSizeOptionTitleSize = 'sm',
+    lineHeightOptionTitleSize = 'sm',
+    letterSpacingOptionTitleSize = 'sm',
+    highlightLinksOptionTitleSize = 'sm',
+
+    className,
+    ...props
+  },
+  ref
+) {
+  const [theme, changeTheme] = useTheme();
+  const [selectedTheme, setSelectedTheme] = useState<ThemeSelectOptions>(
+    theme || 'auto'
+  );
+  const [fontSize, changeFontSize] = useFontSize();
+  const [selectedFontSize, setSelectedFontSize] = useState<FontSizeOptions>(
+    fontSize || 'default'
+  );
+  const [lineHeight, changeLineHeight] = useLineHeight();
+  const [selectedLineHeight, setSelectedLineHeight] = useState<
+    LineHeightOptions
+  >(lineHeight || 'default');
+  const [letterSpacing, changeLetterSpacing] = useLetterSpacing();
+  const [selectedLetterSpacing, setSelectedLetterSpacing] = useState<
+    LetterSpacingOptions
+  >(letterSpacing || 'default');
+
+  const [highlightLinks, changeHighlightLinks] = useHighlightLinks();
+  const [selectedHighlightLinks, setSelectedHighlightLinks] = useState<
+    HighlightLinksOptions
+  >(highlightLinks || 'default');
+
+  function handleOptions() {
+    changeTheme(selectedTheme);
+    changeFontSize(selectedFontSize);
+    changeLineHeight(selectedLineHeight);
+    changeLetterSpacing(selectedLetterSpacing);
+    changeHighlightLinks(selectedHighlightLinks);
+  }
+  function resetOptions() {
+    setSelectedTheme('light');
+    setSelectedFontSize('default');
+    setSelectedLineHeight('default');
+    setSelectedLetterSpacing('default');
+    setSelectedHighlightLinks('default');
+  }
+  function optionsHasChanged() {
+    if (
+      theme != selectedTheme ||
+      fontSize != selectedFontSize ||
+      lineHeight != selectedLineHeight ||
+      letterSpacing != selectedLetterSpacing ||
+      highlightLinks != selectedHighlightLinks
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  }
+
+  return (
+    <Form {...props} ref={ref} className={clsx(className)}>
+      {colorsOption && (
+        <FieldContainer marginBottom={4}>
+          <Fieldset>
+            <FieldsetLegendTitle
+              titleSize={colorsOptionTitleSize}
+              titleValue="Επιλογή θέματος"
+            />
+            <RadioContainer>
+              <RadioItem
+                name="theme_mode"
+                value="light"
+                onChange={() => setSelectedTheme('light')}
+                checked={selectedTheme === 'light'}
+              >
+                Φωτεινό θέμα
+              </RadioItem>
+              <RadioItem
+                name="theme_mode"
+                value="dark"
+                onChange={() => setSelectedTheme('dark')}
+                checked={selectedTheme === 'dark'}
+              >
+                Σκούρο θέμα
+              </RadioItem>
+              <RadioItem
+                name="theme_mode"
+                value="auto"
+                onChange={() => setSelectedTheme('auto')}
+                checked={selectedTheme === 'auto'}
+              >
+                Επιλογή συστήματος
+              </RadioItem>
+            </RadioContainer>
+          </Fieldset>
+        </FieldContainer>
+      )}
+      {fontSizeOption && (
+        <FieldContainer marginBottom={4}>
+          <Fieldset>
+            <FieldsetLegend size="sm">Μέγεθος γραμμάτων</FieldsetLegend>
+            <RadioContainer inline>
+              <RadioItem
+                name="font-size"
+                value="no"
+                onChange={() => setSelectedFontSize('default')}
+                checked={selectedFontSize === 'default'}
+              >
+                Κανονικό (προεπιλογή)
+              </RadioItem>
+              <RadioItem
+                name="font-size"
+                value="yes"
+                onChange={() => {
+                  setSelectedFontSize('large');
+                }}
+                checked={selectedFontSize === 'large'}
+              >
+                Μεγαλύτερο
+              </RadioItem>
+            </RadioContainer>
+          </Fieldset>
+        </FieldContainer>
+      )}
+      {lineHeightOption && (
+        <FieldContainer marginBottom={4}>
+          <Fieldset>
+            <FieldsetLegend size="sm">Ύψος γραμμής κειμένων</FieldsetLegend>
+            <RadioContainer inline>
+              <RadioItem
+                name="line-height"
+                value="no"
+                onChange={() => setSelectedLineHeight('default')}
+                checked={selectedLineHeight === 'default'}
+              >
+                Κανονικό (προεπιλογή)
+              </RadioItem>
+              <RadioItem
+                name="line-height"
+                value="yes"
+                onChange={() => {
+                  setSelectedLineHeight('large');
+                }}
+                checked={selectedLineHeight === 'large'}
+              >
+                Μεγαλύτερο
+              </RadioItem>
+            </RadioContainer>
+          </Fieldset>
+        </FieldContainer>
+      )}
+      {letterSpacingOption && (
+        <FieldContainer marginBottom={4}>
+          <Fieldset>
+            <FieldsetLegend size="sm">Απόσταση γραμμάτων</FieldsetLegend>
+            <RadioContainer inline>
+              <RadioItem
+                name="letter-spacing"
+                value="no"
+                onChange={() => setSelectedLetterSpacing('default')}
+                checked={selectedLetterSpacing === 'default'}
+              >
+                Κανονική (προεπιλογή)
+              </RadioItem>
+              <RadioItem
+                name="letter-spacing"
+                value="yes"
+                onChange={() => {
+                  setSelectedLetterSpacing('extra');
+                }}
+                checked={selectedLetterSpacing === 'extra'}
+              >
+                Μεγαλύτερη
+              </RadioItem>
+            </RadioContainer>
+          </Fieldset>
+        </FieldContainer>
+      )}
+      {highlightLinksOption && (
+        <FieldContainer marginBottom={4}>
+          <Fieldset>
+            <FieldsetLegend size="sm">Έντονη εμφάνιση συνδέσμων</FieldsetLegend>
+            <RadioContainer inline>
+              <RadioItem
+                name="highlight-links"
+                value="no"
+                onChange={() => setSelectedHighlightLinks('default')}
+                checked={selectedHighlightLinks === 'default'}
+              >
+                Όχι (προεπιλογή)
+              </RadioItem>
+              <RadioItem
+                name="highlight-links"
+                value="yes"
+                onChange={() => {
+                  setSelectedHighlightLinks('highlight');
+                }}
+                checked={selectedHighlightLinks === 'highlight'}
+              >
+                Ναι
+              </RadioItem>
+            </RadioContainer>
+            <Button onClick={resetOptions} variant="link">
+              Επαναφορά όλων των επιλογών
+            </Button>
+          </Fieldset>
+        </FieldContainer>
+      )}
+      <SectionBreak visible={false} />
+      <Button onClick={handleOptions} disabled={!optionsHasChanged()}>
+        Εφαρμογή
+      </Button>
+    </Form>
+  );
+});
+export default ThemeOptions;

package/src/app/hooks/useFontSize.ts

@@ -0,0 +1,28 @@
+import useVariantVars, {
+  UseVariantVarsResult,
+} from '@digigov/ui/app/hooks/useVariantVars';
+
+export type FontSizeOptions = 'default' | 'large';
+export type StoredFontSizeOptions = FontSizeOptions | null;
+
+export type UseFontSizeResult = UseVariantVarsResult<FontSizeOptions>;
+
+export const useFontSize = (): UseFontSizeResult => {
+  const config = {
+    name: 'font-size',
+    variables: [
+      'text-sm',
+      'text-base',
+      'text-lg',
+      'text-xl',
+      'text-2xl',
+      'text-3xl',
+      'text-4xl',
+      'text-5xl',
+    ],
+    variants: ['default', 'large'],
+  };
+  return useVariantVars(config);
+};
+
+export default useFontSize;

package/src/app/hooks/useLetterSpacing.ts

@@ -0,0 +1,25 @@
+import useVariantVars, {
+  UseVariantVarsResult,
+} from '@digigov/ui/app/hooks/useVariantVars';
+
+export type LetterSpacingOptions = 'default' | 'extra';
+export type StoredLetterSpacingOptions = LetterSpacingOptions | null;
+
+export type UseLetterSpacingResult = UseVariantVarsResult<LetterSpacingOptions>;
+
+export const useLetterSpacing = (): UseLetterSpacingResult => {
+  const config = {
+    name: 'letter-spacing',
+    variables: [
+      'letter-spacing-normal',
+      'letter-spacing-wide',
+      'letter-spacing-wider',
+      'letter-spacing-widest',
+    ],
+    variants: ['default', 'extra'],
+  };
+
+  return useVariantVars(config);
+};
+
+export default useLetterSpacing;

package/src/app/hooks/useLineHeight.ts

@@ -0,0 +1,28 @@
+import useVariantVars, {
+  UseVariantVarsResult,
+} from '@digigov/ui/app/hooks/useVariantVars';
+
+export type LineHeightOptions = 'default' | 'large';
+export type StoredLineHeightOptions = LineHeightOptions | null;
+
+export type UseLineHeightResult = UseVariantVarsResult<LineHeightOptions>;
+
+export const useLineHeight = (): UseLineHeightResult => {
+  const config = {
+    name: 'line-height',
+    variables: [
+      'line-h-sm',
+      'line-h-base',
+      'line-h-lg',
+      'line-h-xl',
+      'line-h-2xl',
+      'line-h-3xl',
+      'line-h-4xl',
+      'line-h-5xl',
+    ],
+    variants: ['default', 'large'],
+  };
+  return useVariantVars(config);
+};
+
+export default useLineHeight;

package/src/app/index.ts

@@ -1,14 +1,18 @@
 export * from '@digigov/ui/app/App';
+export * from '@digigov/ui/app/AccessibilityMenu';
+export * from '@digigov/ui/app/BannerContainer';
+export * from '@digigov/ui/app/BottomInfo';
 export * from '@digigov/ui/app/Confirmation';
-export * from '@digigov/ui/app/BottomInfoContainer';
-export * from '@digigov/ui/app/BottomInfoContent';
+export * from '@digigov/ui/app/FilterSection';
 export * from '@digigov/ui/app/Footer';
+export * from '@digigov/ui/app/Header';
+export * from '@digigov/ui/app/Loader';
+export * from '@digigov/ui/app/Masthead';
+export * from '@digigov/ui/app/Modal';
+export * from '@digigov/ui/app/NotFound';
 export * from '@digigov/ui/app/PageTitle';
+export * from '@digigov/ui/app/PhaseBannerHeader';
 export * from '@digigov/ui/app/QrCodeScanner';
 export * from '@digigov/ui/app/QrCodeViewer';
-export * from '@digigov/ui/app/Header';
-export * from '@digigov/ui/app/i18n';
-export * from '@digigov/ui/app/I18nText';
-export * from '@digigov/ui/app/PhaseBannerHeader';
-export * from '@digigov/ui/app/ThemePaletteForm';
-export * from '@digigov/ui/app/ThemeOptionsForm';
+export * from '@digigov/ui/app/ThemeOptions';
+export * from '@digigov/ui/app/PageTitle';

package/src/content/Accordion/Accordion.stories.js

@@ -0,0 +1,12 @@
+import Accordion from '@digigov/ui/content/Accordion';
+export default {
+  title: 'Digigov UI/content/Accordion',
+  tags: ['Experimental'],
+  description:
+    'The accordion component lets users show and hide sections of related content on a page.',
+  link: 'https://guide.services.gov.gr/docs/components/accordion',
+  component: Accordion,
+  displayName: 'Accordion',
+};
+export * from '@digigov/ui/content/Accordion/__stories__/Default';
+export * from '@digigov/ui/content/Accordion/__stories__/WithHints';

package/src/content/Accordion/Accordion.stories.playwright.json

@@ -0,0 +1,21 @@
+{
+  "version": "4",
+  "stories": {
+    "digigov-ui-content-accordion--default": {
+      "actionSets": [
+        {
+          "actions": [
+            {
+              "name": "click",
+              "args": {
+                "selector": "html>body>div:nth-child(5)>div>details:nth-child(2)>summary"
+              }
+            }
+          ],
+          "id": "ZB3bfJynL-CN",
+          "title": "Mouse navigation"
+        }
+      ]
+    }
+  }
+}

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

@@ -0,0 +1,110 @@
+import React from 'react';
+
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+
+import { List } from '@digigov/ui/content/List/List';
+import { ListItem } from '@digigov/ui/content/List/ListItem';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const Default = () => (
+  <Accordion>
+    <AccordionSection open>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content1">
+          Διαφορές με το δημόσιο
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content1">
+        <Paragraph>
+          Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά
+          το επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>
+              Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης
+              διαφορών με το Δημόσιο
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content2">
+          Δικαστήρια
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content2">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Ηλεκτρονικές δικαστικές αποφάσεις</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Πιστοποιητικά δικαστηρίων</Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content3">
+          Δικόγραφα
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content3">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Αντίγραφο πρακτικών υπόθεσης</Link>
+          </ListItem>
+          <ListItem>
+            <Link>
+              Ηλεκτρονική κατάθεση δικογράφων (Πολιτικά / Ποινικά Δικαστήρια)
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content4">
+          Καταστήματα κράτησης
+        </AccordionSectionSummaryHeading>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content4">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Εκπαίδευση αποφυλακισμένων</Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+  </Accordion>
+);
+
+export default Default;

package/src/content/Accordion/__stories__/WithHints.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+
+import {
+  Accordion,
+  AccordionSection,
+  AccordionSectionContent,
+  AccordionSectionSummary,
+  AccordionSectionSummaryHeading,
+} from '@digigov/ui/content/Accordion';
+
+import { List } from '@digigov/ui/content/List/List';
+import { ListItem } from '@digigov/ui/content/List/ListItem';
+import { Link } from '@digigov/ui/navigation/Link';
+import { Hint } from '@digigov/ui/typography/Hint';
+import { Paragraph } from '@digigov/ui/typography/Paragraph';
+
+export const WithHints = () => (
+  <Accordion>
+    <AccordionSection open>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content1">
+          Διαφορές με το δημόσιο
+        </AccordionSectionSummaryHeading>
+        <Hint>
+          Δικαστικές και εξωδικαστικές διαφορές με το Δημόσιο, εκκαθάριση
+          δικαστικών δαπανών κ.ά.
+        </Hint>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content1">
+        <Paragraph>
+          Παρακάτω μπορείτε να δείτε την διαθέσιμη και ενεργή υπηρεσία που αφορά
+          το επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>
+              Αίτηση εξώδικης αναγνώρισης απαιτήσεων / συμβιβαστικής επίλυσης
+              διαφορών με το Δημόσιο
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content2">
+          Δικαστήρια
+        </AccordionSectionSummaryHeading>
+        <Hint>Πιστοποιητικά δικαστηρίων, παρακολούθηση υποθέσεων κ.ά.</Hint>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content2">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής, κατηγοριοποιημένες σε ομάδες υπηρεσιών.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Ενιαίο πιστοποιητικό δικαστικής φερεγγυότητας</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Ηλεκτρονικές δικαστικές αποφάσεις</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Πιστοποιητικά δικαστηρίων</Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content3">
+          Δικόγραφα
+        </AccordionSectionSummaryHeading>
+        <Hint>Διαδικασίες για την κατάθεση δικογράφων</Hint>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content3">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Αντίγραφο πρακτικών υπόθεσης</Link>
+          </ListItem>
+          <ListItem>
+            <Link>
+              Ηλεκτρονική κατάθεση δικογράφων (Πολιτικά / Ποινικά Δικαστήρια)
+            </Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+    <AccordionSection>
+      <AccordionSectionSummary>
+        <AccordionSectionSummaryHeading aria-controls="content4">
+          Καταστήματα κράτησης
+        </AccordionSectionSummaryHeading>
+        <Hint>
+          Επανένταξη αποφυλακισμένων, πιστοποιητικά, επισκεπτήρια κ.ά.
+        </Hint>
+      </AccordionSectionSummary>
+      <AccordionSectionContent id="content4">
+        <Paragraph>
+          Στη λίστα παρακάτω μπορείτε να δείτε τις υπηρεσίες που αφορούν το
+          επιλεγμένο γεγονός ζωής.
+        </Paragraph>
+        <List>
+          <ListItem>
+            <Link>Βεβαίωση ηθικού / πειθαρχικού ελέγχου αποφυλακισμένων</Link>
+          </ListItem>
+          <ListItem>
+            <Link>Εκπαίδευση αποφυλακισμένων</Link>
+          </ListItem>
+        </List>
+      </AccordionSectionContent>
+    </AccordionSection>
+  </Accordion>
+);
+
+export default WithHints;