@digigov/ui 0.28.2 → 0.28.3

package/src/core/PhaseBanner/__stories__/Underlined.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import PhaseBanner, {
-  PhaseBannerTag,
-  PhaseBannerText,
-} from '@digigov/ui/core/PhaseBanner';
-import Link from '@digigov/ui/core/Link';
-
-export const Underlined = () => (
-  <PhaseBanner underline>
-    <PhaseBannerTag>ALPHA</PhaseBannerTag>
-    <PhaseBannerText>
-      Αυτή είναι μία νέα υπηρεσία – τα <Link href="#feedback">σχόλιά</Link> σας
-      θα μας βοηθήσουν να τη βελτιώσουμε.
-    </PhaseBannerText>
-  </PhaseBanner>
-);
-
-export default Underlined;

package/src/core/PhaseBanner/index.mdx

@@ -1,24 +0,0 @@
----
-id: phase-banner
-title: PhaseBanner
----
-
-# PhaseBanner
-
-Use the phase banner component to show users your service is still being worked on.
- 
-
-
-```bash
-import PhaseBanner from '@digigov/ui/core/PhaseBanner';
-``` 
-
-## How to use
-
-Your banner must be directly under the blue GOV.GR header and colour bar.
-
-<Story packageName="@digigov/ui" component="core/PhaseBanner" story="Default.tsx" />
-
-### Underlined
-
-<Story packageName="@digigov/ui" component="core/PhaseBanner" story="Underlined.tsx" />

package/src/core/Radios/Radios.stories.js

@@ -1,12 +0,0 @@
-import Radios from '@digigov/ui/core/Radios';
-export default {
-  title: 'Digigov UI/core/Radios',
-  component: Radios,
-};
-export * from '@digigov/ui/core/Radios/__stories__/Default';
-export * from '@digigov/ui/core/Radios/__stories__/MultipleQuestions';
-export * from '@digigov/ui/core/Radios/__stories__/Inline';
-export * from '@digigov/ui/core/Radios/__stories__/WithHints';
-export * from '@digigov/ui/core/Radios/__stories__/NoneAnswer';
-export * from '@digigov/ui/core/Radios/__stories__/WithErrorMessage';
-export * from '@digigov/ui/core/Radios/__stories__/ConditionalReveal';

package/src/core/Radios/__stories__/ConditionalReveal.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import Radios, { RadioItem, RadioConditional } from '@digigov/ui/core/Radios';
-import TextInput from '@digigov/ui/core/TextInput';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import Hint from '@digigov/ui/typography/Hint';
-
-export const ConditionalReveal = () => (
-  <Field>
-    <Fieldset aria-describedby="contact-hint">
-      <FieldsetLegend>Πως θέλετε να επικοινωνήσουμε μαζί σας;</FieldsetLegend>
-      <Hint id="contact-hint">Επιλέξτε ό,τι ισχύει στην περίπτωση σας.</Hint>
-      <Radios>
-        <RadioItem checked name="contact" value="email">
-          Email
-        </RadioItem>
-        <RadioConditional>
-          Email address
-          <TextInput name="email" cellWidth="one-third" />
-        </RadioConditional>
-        <RadioItem name="contact" value="phone">
-          Τηλέφωνο
-        </RadioItem>
-      </Radios>
-    </Fieldset>
-  </Field>
-);
-
-export default ConditionalReveal;

package/src/core/Radios/__stories__/Default.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import Radios, { RadioItem } from '@digigov/ui/core/Radios';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-
-export const Default = () => (
-  <Field>
-    <Fieldset>
-      <FieldsetLegend>Ποια ειναι η χώρα της διαμονής σας;</FieldsetLegend>
-      <Radios>
-        <RadioItem name="country" value="greece">
-          Ελλάδα
-        </RadioItem>
-        <RadioItem name="country" value="cyprus">
-          Κύπρος
-        </RadioItem>
-        <RadioItem name="country" value="eu">
-          Χώρα της Ευρωπαϊκής Ένωσης
-        </RadioItem>
-        <RadioItem name="country" value="usa">
-          Hνωμένες Πολιτείες της Αμερικής
-        </RadioItem>
-      </Radios>
-    </Fieldset>
-  </Field>
-);
-
-export default Default;

package/src/core/Radios/__stories__/Inline.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import Radios, { RadioItem } from '@digigov/ui/core/Radios';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import Hint from '@digigov/ui/typography/Hint';
-
-export const Inline = () => (
-  <Field>
-    <Fieldset aria-describedby="name-hint">
-      <FieldsetLegend>Έχετε αλλάξει το όνομα σας;</FieldsetLegend>
-      <Hint id="name-hint">
-        Συμπεριλαμβάνεται αλλαγή του επίθετου σας ή αλλαγή του τρόπου που
-        γράφετε το όνομα σας.
-      </Hint>
-      <Radios inline>
-        <RadioItem name="changed_name" value="yes">
-          Ναι
-        </RadioItem>
-        <RadioItem name="changed_name" value="no">
-          Όχι
-        </RadioItem>
-      </Radios>
-    </Fieldset>
-  </Field>
-);
-
-export default Inline;

package/src/core/Radios/__stories__/MultipleQuestions.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import Radios, { RadioItem } from '@digigov/ui/core/Radios';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import Hint from '@digigov/ui/typography/Hint';
-
-export const MultipleQuestions = () => (
-  <Field>
-    <Fieldset aria-describedby="country-hint">
-      <FieldsetLegend size="s">
-        Ποια ειναι η χώρα της διαμονής σας;
-      </FieldsetLegend>
-      <Hint id="country-hint">Πείτε μας σχετικά με πρόσφατες αλλαγές. Επιλέξτε ό,τι ισχύει.</Hint>
-      <Radios>
-        <RadioItem name="country" value="greece">
-          Ελλάδα
-        </RadioItem>
-        <RadioItem name="country" value="cyprus">
-          Κύπρος
-        </RadioItem>
-        <RadioItem name="country" value="eu">
-          Χώρα της Ευρωπαϊκής Ένωσης
-        </RadioItem>
-        <RadioItem name="country" value="usa">
-          Hνωμένες Πολιτείες της Αμερικής
-        </RadioItem>
-      </Radios>
-    </Fieldset>
-  </Field>
-);
-
-export default MultipleQuestions;

package/src/core/Radios/__stories__/NoneAnswer.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import Radios, { RadioItem } from '@digigov/ui/core/Radios';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-
-export const NoneAnswer = () => (
-  <Field>
-    <Fieldset>
-      <FieldsetLegend>Πόσα παιδιά έχετε;</FieldsetLegend>
-      <Radios>
-        <RadioItem name="cold" value="cold">
-          1-2 παιδιά
-        </RadioItem>
-        <RadioItem name="fever" value="fever">
-          3 ή περισσότερα παιδιά
-        </RadioItem>
-        <div className="govgr-radios__divider">ή</div>
-        <RadioItem name="fatigue" value="fatigue">
-          Κανένα παιδί
-        </RadioItem>
-      </Radios>
-    </Fieldset>
-  </Field>
-);
-
-export default NoneAnswer;

package/src/core/Radios/__stories__/WithErrorMessage.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import Radios, { RadioItem } from '@digigov/ui/core/Radios';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import ErrorMessage from '@digigov/ui/core/ErrorMessage';
-import Hint from '@digigov/ui/typography/Hint';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-
-export const WithErrorMessage = () => (
-  <Field error>
-    <Fieldset aria-describedby="travel-hint travel-error">
-      <FieldsetLegend>
-        Θα ταξιδέψετε σε κάποια από αυτές τις χώρες;
-      </FieldsetLegend>
-      <Hint id="travel-hint">Μπορείτε να επιλέξετε μόνο μία επιλογή.</Hint>
-      <ErrorMessage id="travel-error">
-        <VisuallyHidden>Λάθος:</VisuallyHidden> Πρέπει να επιλέξετε μια
-        απάντηση.
-      </ErrorMessage>
-      <Radios>
-        <RadioItem name="cold" value="cold">
-          Αγγλία
-        </RadioItem>
-        <RadioItem name="fever" value="fever">
-          Γαλλία
-        </RadioItem>
-      </Radios>
-    </Fieldset>
-  </Field>
-);
-
-export default WithErrorMessage;

package/src/core/Radios/__stories__/WithHints.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import Radios, { RadioItem } from '@digigov/ui/core/Radios';
-import Field, { Fieldset, FieldsetLegend } from '@digigov/ui/core/Field';
-import Hint from '@digigov/ui/typography/Hint';
-
-export const WithHints = () => (
-  <Field>
-    <Fieldset aria-describedby="login-hint">
-      <FieldsetLegend size="m">Πώς θέλετε να συνδεθείτε;</FieldsetLegend>
-      <Hint id="login-hint">
-        Θα χρειαστείτε έναν λογαριασμό με τον οποίο θα αποδείξετε την ταύτοτητα
-        σας ώστε να προχωρήσετε.
-      </Hint>
-      <Radios>
-        <RadioItem name="login" value="gsis" aria-describedby="gsis-hint">
-          Σύνδεση με Taxisnet
-          <Hint id="gsis-hint">Θα πρέπει να έχετε τους κωδικούς Taxisnet για να συνθείτε</Hint>
-        </RadioItem>
-        <RadioItem name="login" value="ebanking" aria-describedby="ebanking-hint">
-          Σύνδεση με λογαρισμό e-banking
-          <Hint id="ebanking-hint">
-            Θα πρέπει να έχετε τους κωδικούς του e-banking της τράπεζας για να
-            συνδεθείτε.
-          </Hint>
-        </RadioItem>
-      </Radios>
-    </Fieldset>
-  </Field>
-);
-
-export default WithHints;

package/src/core/Radios/index.mdx

@@ -1,56 +0,0 @@
----
-id: radios
-title: Radios
----
-
-
-# Radios
-
- 
-
-
-```bash
-import Radios from '@digigov/ui/core/Radios';
-``` 
-
-## How to use
-
-<Story packageName="@digigov/ui" component="core/Radios" story="Default.tsx" />
-
-### If you’re asking more than one question on the page
-
-<Story packageName="@digigov/ui" component="core/Radios" story="MultipleQuestions.tsx" />
-
-### Inline radios
-
-<Story packageName="@digigov/ui" component="core/Radios" story="Inline.tsx" />
-
-### Checkbox items with hints
-
-You can add hints to checkbox items to provide additional information about the options.
-
-<Story packageName="@digigov/ui" component="core/Radios" story="WithHints.tsx" />
-
-### Radio items with a text divider
-
-If one or more of your radio options is different from the others, it can help users if you separate them using a text divider. 
-The text is usually the word ‘or’.
-
-<Story packageName="@digigov/ui" component="core/Radios" story="NoneAnswer.tsx" />
-
-## Conditionally revealing a related question
-
-You can ask the user a related question when they select a particular checkbox, so they only see the question when it’s relevant to them.
-
-This might make 2 related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.
-
-<Story packageName="@digigov/ui" component="core/Radios" story="ConditionalReveal.tsx" />
-
-### Error messages
-
-Error messages should be styled like this:
-
-<Story packageName="@digigov/ui" component="core/Radios" story="WithErrorMessage.tsx" />
-
-
-

package/src/core/SectionBreak/index.tsx

@@ -1,4 +0,0 @@
-import SectionBreak from '@digigov/react-core/SectionBreak';
-
-export * from '@digigov/react-core/SectionBreak';
-export default SectionBreak;

package/src/core/Select/Select.stories.js

@@ -1,10 +0,0 @@
-
-import Select from "@digigov/ui/core/Select";
-export default {
-  title: 'Digigov UI/core/Select',
-  component: Select,
-}
-export * from './__stories__/Default';
-export * from './__stories__/DisabledInput';
-export * from './__stories__/WithHint';
-  

package/src/core/Select/__stories__/Default.tsx

@@ -1,20 +0,0 @@
-import React from 'react';
-import Select, { SelectOption } from '@digigov/ui/core/Select';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-
-export const Default = () => (
-  <Field>
-    <LabelContainer>
-      Ταξινόμηση
-      <Select name="select-list" aria-label="ταξινόμηση">
-        <SelectOption value="dim">Δημοφιλή</SelectOption>
-        <SelectOption value="kat">Πρόσφατα</SelectOption>
-        <SelectOption value="kat">Περισσότερες προβολές</SelectOption>
-        <SelectOption value="kat">Περισσότερα σχόλια</SelectOption>
-      </Select>
-    </LabelContainer>
-  </Field>
-);
-
-export default Default;

package/src/core/Select/__stories__/DisabledInput.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import Select, { SelectOption } from '@digigov/ui/core/Select';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-
-export const DisabledInput = () => (
-  <Field>
-    <LabelContainer>
-      Ταξινόμηση
-      <Select
-        name="select-list"
-        disabled
-        aria-disabled="true"
-        aria-label="ταξινόμηση"
-      >
-        <SelectOption value="dim">Δημοφιλή</SelectOption>
-        <SelectOption value="kat">Πρόσφατα</SelectOption>
-        <SelectOption value="kat">Περισσότερες προβολές</SelectOption>
-        <SelectOption value="kat">Περισσότερα σχόλια</SelectOption>
-      </Select>
-    </LabelContainer>
-  </Field>
-);
-
-export default DisabledInput;

package/src/core/Select/__stories__/WithHint.tsx

@@ -1,22 +0,0 @@
-import React from 'react';
-import Select, { SelectOption } from '@digigov/ui/core/Select';
-import Field from '@digigov/ui/core/Field';
-import LabelContainer from '@digigov/react-core/LabelContainer';
-import { Hint } from '@digigov/ui/typography';
-
-export const WithHint = () => (
-  <Field>
-    <LabelContainer>
-      Ταξινόμηση
-      <Hint>Επιλέξτε την ταξιμόνηση που θέλετε.</Hint>
-      <Select name="select-list" aria-label="ταξινόμηση">
-        <SelectOption value="dim">Δημοφιλή</SelectOption>
-        <SelectOption value="kat">Πρόσφατα</SelectOption>
-        <SelectOption value="kat">Περισσότερες προβολές</SelectOption>
-        <SelectOption value="kat">Περισσότερα σχόλια</SelectOption>
-      </Select>
-    </LabelContainer>
-  </Field>
-);
-
-export default WithHint;

package/src/core/Select/index.mdx

@@ -1,42 +0,0 @@
----
-id: select
-title: Select
----
-
-
-# Select
-
- 
-
-
-```bash
-import Select from '@digigov/ui/core/Select';
-``` 
-
-## How to use
-
-<Story packageName="@digigov/ui" component="core/Select" story="Default.tsx" />
-
-
-### Select with hints
-
-You can add hints to select items to provide additional information about the options.
-
-<Story packageName="@digigov/ui" component="core/Select" story="WithHint.tsx" />
-
-
-
-### Disabled input
-
-Error messages should be styled like this:
-
-<Story packageName="@digigov/ui" component="core/Select" story="DisabledInput.tsx" />
-
-
-
-You can read more about the accessibility patterns used in our Select
-implementation in the ARIA Authoring Practices Guide (APG) at 
-[Combobox](https://www.w3.org/WAI/ARIA/apg/patterns/combobox/) section.
-
-
-

package/src/core/Select/index.tsx

@@ -1,5 +0,0 @@
-export * from '@digigov/react-core/SelectContainer';
-export * from '@digigov/react-core/SelectOption';
-
-import Select from '@digigov/react-core/SelectContainer';
-export default Select;

package/src/core/ServiceBadge/index.mdx

@@ -1,42 +0,0 @@
----
-parent: docs/ui/component
-title: ServiceBadge
----
-
-import ServiceBadge from '@digigov/ui/core/ServiceBadge';
-import Header, { HeaderTitle } from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/Logo';
-
-## Example
-
-<Header>
-  <GovGRLogo />
-  <HeaderTitle>
-    Service Name <ServiceBadge label="ALPHA" />
-  </HeaderTitle>
-</Header>
-
-## How to use
-
-```jsx
-import ServieBadge from '@digigov/ui/core/ServiceBadge';
-
-<ServiceBadge label="ALPHA" />;
-```
-
-## When to use this component
-
-Use ServiceBadge to indicate the current release cycle of your service. Use
-an alpha badge when your service is in alpha, and a beta badge if your
-service is in private or public beta.
-
-## How it works
-
-Communicating early release service status can improve the perception of the
-user regarding the overall experience of the service. It also acts as a hint
-that service is in active development and user feedback is needed and
-welcomed by your team.
-
-## References
-
-- https://designnotes.blog.gov.uk/2014/01/20/why-and-how-were-explaining-beta-to-users/

package/src/core/ServiceBadge/index.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import withDeprecation from '@digigov/ui/utils/withDeprecation';
-import PhaseBanner, { PhaseBannerProps } from '@digigov/react-core/PhaseBanner';
-import PhaseBannerTag from '@digigov/react-core/PhaseBannerTag';
-import PhaseBannerText from '@digigov/react-core/PhaseBannerText';
-interface ServiceBadgeProps extends PhaseBannerProps {
-  // badge text, defaults to 'BETA'
-  label?: string;
-  ref?: React.Ref<HTMLDivElement>;
-}
-
-export const ServiceBadge: React.FC<ServiceBadgeProps> = withDeprecation(
-  ({ label = 'BETA', children, ...props }) => {
-    return (
-      <PhaseBanner {...props}>
-        <PhaseBannerTag>{label}</PhaseBannerTag>
-        <PhaseBannerText>{children}</PhaseBannerText>
-      </PhaseBanner>
-    );
-  },
-  {
-    name: 'ServiceBadge',
-    rename: 'PhaseBanner',
-  }
-);
-
-export default ServiceBadge;

package/src/core/SkipLink/index.tsx

@@ -1,4 +0,0 @@
-import SkipLink from '@digigov/react-core/SkipLink';
-
-export default SkipLink;
-export { SkipLink };

package/src/core/SummaryList/SummaryList.stories.js

@@ -1,12 +0,0 @@
-/* eslint-disable digigov/no-relative-imports */
-
-import SummaryList from '@digigov/ui/core';
-export default {
-  title: 'Digigov UI/core/SummaryList',
-  component: SummaryList,
-};
-export * from './__stories__/Default';
-export * from './__stories__/WithActions';
-export * from './__stories__/WithoutBorders';
-export * from './__stories__/WithKeyAndAction';
-export * from './__stories__/RowVariations';

package/src/core/SummaryList/__stories__/Default.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import SummaryList, {
-  SummaryListItem,
-  SummaryListItemAction,
-  SummaryListItemKey,
-  SummaryListItemValue,
-} from '@digigov/ui/core/SummaryList';
-import VisuallyHidden from '@digigov/ui/core/VisuallyHidden';
-import Link from '@digigov/ui/core/Link';
-export const Default = () => (
-  <>
-    <SummaryList>
-      <SummaryListItem>
-        <SummaryListItemKey>Όνομα</SummaryListItemKey>
-        <SummaryListItemValue>Γιώργος Παπαδόπουλος</SummaryListItemValue>
-      </SummaryListItem>
-      <SummaryListItem>
-        <SummaryListItemKey>Διεύθυνση</SummaryListItemKey>
-        <SummaryListItemValue>Τάδε 20, Πατήσια</SummaryListItemValue>
-        <SummaryListItemAction>
-          <Link href="#">
-            Αλλαγή<VisuallyHidden>Διεύθυνσης</VisuallyHidden>
-          </Link>
-        </SummaryListItemAction>
-      </SummaryListItem>
-      <SummaryListItem>
-        <SummaryListItemKey>Τηλέφωνο</SummaryListItemKey>
-        <SummaryListItemValue>6941234567</SummaryListItemValue>
-      </SummaryListItem>
-    </SummaryList>
-  </>
-);
-
-export default Default;