@digigov/ui 1.0.0-290a96e2 → 1.0.0-3bfc7d37

package/src/app/Footer/__stories__/Default.tsx

@@ -2,6 +2,6 @@ import React from 'react';
 
 import { GovGRFooter } from '@digigov/ui/govgr/Footer';
 
-export const Default = () => <GovGRFooter />;
+export const Default = () => <GovGRFooter />
 
 export default Default;

package/src/app/Footer/__stories__/FooterAllInclusive.tsx

@@ -16,8 +16,8 @@ import {
 } from '@digigov/ui/app/Footer';
 import Copyright from '@digigov/ui/govgr/Footer/Copyright';
 import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-import logo1 from '@digigov/ui/govgr/images/greek-government-base64';
-import logo2 from '@digigov/ui/govgr/images/grnet-logo-base64';
+import govgrBlueLogo from '@digigov/ui/govgr/images/govgr-logo-blue-base64';
+import mineduBlackLogo from '@digigov/ui/govgr/images/minedu-logo-black-base64';
 import SectionBreak from '@digigov/ui/layouts/SectionBreak';
 import Link from '@digigov/ui/navigation/Link';
 import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
@@ -46,7 +46,7 @@ export const FooterAllInclusive = () => {
                 <FooterLink href="#">Όροι χρήσης</FooterLink>
               </FooterListItem>
               <FooterListItem>
-                <FooterLink href="#">Ιδιωτικό απόρρητο </FooterLink>
+                <FooterLink href="#">Ιδιωτικό απόρρητο</FooterLink>
               </FooterListItem>
             </FooterList>
           </FooterNavigationSection>
@@ -76,40 +76,36 @@ export const FooterAllInclusive = () => {
                 </FooterListItem>
               </FooterList>
               <FooterContentLogos>
-                <FooterImage src={logo1} />
-                <FooterImage src={logo2} />
+                <FooterImage src={govgrBlueLogo} />
+                <FooterImage src={mineduBlackLogo} />
               </FooterContentLogos>
               <Copyright>
-                Υλοποίηση από το{' '}
+                {`Υλοποίηση από το `}
                 <Link href="https://grnet.gr/" target="_blank">
                   ΕΔΥΤΕ
                   <VisuallyHidden>
-                    {' '}
-                    (ανοίγει σε καινούρια καρτέλα)
+                    {` (ανοίγει σε καινούρια καρτέλα)`}
                   </VisuallyHidden>
-                </Link>{' '}
-                για το{' '}
+                </Link>
+                {` για το `}
                 <Link href="https://mindigital.gr/" target="_blank">
-                  {' '}
                   Υπουργείο Ψηφιακής Διακυβέρνησης
                   <VisuallyHidden>
-                    {' '}
-                    (ανοίγει σε καινούρια καρτέλα)
+                    {` (ανοίγει σε καινούρια καρτέλα)`}
                   </VisuallyHidden>
-                </Link>{' '}
-                και για το{' '}
+                </Link>
+                {` και για το `}
                 <Link href="https://www.minedu.gov.gr/" target="_blank">
                   Υπουργείο Παιδείας και Θρησκευμάτων
                   <VisuallyHidden>
-                    {' '}
-                    (ανοίγει σε καινούρια καρτέλα)
+                    {` (ανοίγει σε καινούρια καρτέλα)`}
                   </VisuallyHidden>
                 </Link>
               </Copyright>
             </FooterContent>
           </FooterInfoSection>
           <FooterInfoSection>
-            <HellenicRepublicLogo></HellenicRepublicLogo>
+            <HellenicRepublicLogo />
           </FooterInfoSection>
         </FooterInfo>
       </FooterContainer>

package/src/app/Footer/__stories__/FooterWithLink.tsx

@@ -31,20 +31,18 @@ export const FooterWithLink = () => {
                 </FooterListItem>
               </FooterList>
               <Copyright>
-                Υλοποίηση από το{' '}
+                {`Υλοποίηση από το `}
                 <Link href="https://grnet.gr/" target="_blank">
                   ΕΔΥΤΕ
                   <VisuallyHidden>
-                    {' '}
-                    (ανοίγει σε καινούρια καρτέλα)
+                    {` (ανοίγει σε καινούρια καρτέλα)`}
                   </VisuallyHidden>
-                </Link>{' '}
-                για το{' '}
+                </Link>
+                {` για το `}
                 <Link href="https://mindigital.gr/" target="_blank">
                   Υπουργείο Ψηφιακής Διακυβέρνησης
                   <VisuallyHidden>
-                    {' '}
-                    (ανοίγει σε καινούρια καρτέλα)
+                    {` (ανοίγει σε καινούρια καρτέλα)`}
                   </VisuallyHidden>
                 </Link>
               </Copyright>

package/src/app/Footer/__stories__/FooterWithLogo.tsx

@@ -10,8 +10,8 @@ import {
 } from '@digigov/ui/app/Footer';
 import Copyright from '@digigov/ui/govgr/Footer/Copyright';
 import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
-import logo1 from '@digigov/ui/govgr/images/greek-government-base64';
-import logo2 from '@digigov/ui/govgr/images/grnet-logo-base64';
+import govgrBlueLogo from '@digigov/ui/govgr/images/govgr-logo-blue-base64';
+import mineduBlackLogo from '@digigov/ui/govgr/images/minedu-logo-black-base64';
 import Link from '@digigov/ui/navigation/Link';
 import VisuallyHidden from '@digigov/ui/utils/VisuallyHidden';
 
@@ -23,31 +23,29 @@ export const FooterWithLogo = () => {
           <FooterInfoSection aria-label='footer info section'>
             <FooterContent>
               <FooterContentLogos>
-                <FooterImage src={logo1}></FooterImage>
-                <FooterImage src={logo2}></FooterImage>
+                <FooterImage src={govgrBlueLogo}></FooterImage>
+                <FooterImage src={mineduBlackLogo}></FooterImage>
               </FooterContentLogos>
               <Copyright>
-                Υλοποίηση από το{' '}
+                {`Υλοποίηση από το `}
                 <Link href="https://grnet.gr/" target="_blank">
                   ΕΔΥΤΕ
                   <VisuallyHidden>
-                    {' '}
-                    (ανοίγει σε καινούρια καρτέλα)
+                    {` (ανοίγει σε καινούρια καρτέλα)`}
                   </VisuallyHidden>
-                </Link>{' '}
-                για το{' '}
+                </Link>
+                {` για το `}
                 <Link href="https://mindigital.gr/" target="_blank">
-                  Υπουργείο Ψηφιακής Διακυβέρνησης
+                  Υπουργείο Παιδείας και Θρησκευμάτων
                   <VisuallyHidden>
-                    {' '}
-                    (ανοίγει σε καινούρια καρτέλα)
+                    {` (ανοίγει σε καινούρια καρτέλα)`}
                   </VisuallyHidden>
                 </Link>
               </Copyright>
             </FooterContent>
           </FooterInfoSection>
           <FooterInfoSection>
-            <HellenicRepublicLogo></HellenicRepublicLogo>
+            <HellenicRepublicLogo />
           </FooterInfoSection>
         </FooterInfo>
       </FooterContainer>

package/src/app/Footer/__stories__/FooterWithSecondaryNavigation.tsx

@@ -22,64 +22,64 @@ export const FooterWithSecondaryNavigation = () => {
   return (
     <Footer>
       <FooterContainer>
-      <FooterNavigation>
-        <FooterNavigationSection aria-label='footer navigation section'>
-          <FooterHeading>Επιλογές</FooterHeading>
-          <FooterList columns={2}>
-            <FooterListItem>
-              <FooterLink href="#">Υπηρεσίες</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Φορείς</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Αρχές</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Όροι χρήσης</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">Ιδιωτικό απόρρητο </FooterLink>
-            </FooterListItem>
-          </FooterList>
-        </FooterNavigationSection>
-        <FooterNavigationSection aria-label='footer navigation section'>
-          <FooterHeading>Εξωτερικές Υπηρεσίες</FooterHeading>
-          <FooterList>
-            <FooterListItem>
-              <FooterLink href="#">ΕΜΔΔ - ΜΙΤΟΣ</FooterLink>
-            </FooterListItem>
-            <FooterListItem>
-              <FooterLink href="#">EUGO</FooterLink>
-            </FooterListItem>
-          </FooterList>
-        </FooterNavigationSection>
-      </FooterNavigation>
-      <SectionBreak visible={false} size="md" />
-      <FooterInfo>
-        <FooterInfoSection grow aria-label='footer info section'>
-          <FooterContent>
-            <Copyright>
-              Υλοποίηση από το{' '}
-              <Link href="https://grnet.gr/" target="_blank">
-                ΕΔΥΤΕ
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>{' '}
-              για το{' '}
-              <Link href="https://mindigital.gr/" target="_blank">
-                Υπουργείο Ψηφιακής Διακυβέρνησης
-                <VisuallyHidden>{' '}(ανοίγει σε καινούρια καρτέλα)</VisuallyHidden>
-              </Link>
-            </Copyright>
-          </FooterContent>
-        </FooterInfoSection>
-        <FooterInfoSection>
-          <HellenicRepublicLogo></HellenicRepublicLogo>
-        </FooterInfoSection>
-      </FooterInfo>
+        <FooterNavigation>
+          <FooterNavigationSection aria-label='footer navigation section'>
+            <FooterHeading>Επιλογές</FooterHeading>
+            <FooterList columns={2}>
+              <FooterListItem>
+                <FooterLink href="#">Υπηρεσίες</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Φορείς</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Αρχές</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Σχετικά με το gov.gr</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Όροι χρήσης</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">Ιδιωτικό απόρρητο</FooterLink>
+              </FooterListItem>
+            </FooterList>
+          </FooterNavigationSection>
+          <FooterNavigationSection aria-label='footer navigation section'>
+            <FooterHeading>Εξωτερικές Υπηρεσίες</FooterHeading>
+            <FooterList>
+              <FooterListItem>
+                <FooterLink href="#">ΕΜΔΔ - ΜΙΤΟΣ</FooterLink>
+              </FooterListItem>
+              <FooterListItem>
+                <FooterLink href="#">EUGO</FooterLink>
+              </FooterListItem>
+            </FooterList>
+          </FooterNavigationSection>
+        </FooterNavigation>
+        <SectionBreak visible={false} size="md" />
+        <FooterInfo>
+          <FooterInfoSection grow aria-label='footer info section'>
+            <FooterContent>
+              <Copyright>
+                {`Υλοποίηση από το `}
+                <Link href="https://grnet.gr/" target="_blank">
+                  ΕΔΥΤΕ
+                  <VisuallyHidden>{` (ανοίγει σε καινούρια καρτέλα)`}</VisuallyHidden>
+                </Link>
+                {` για το `}
+                <Link href="https://mindigital.gr/" target="_blank">
+                  Υπουργείο Ψηφιακής Διακυβέρνησης
+                  <VisuallyHidden>{` (ανοίγει σε καινούρια καρτέλα)`}</VisuallyHidden>
+                </Link>
+              </Copyright>
+            </FooterContent>
+          </FooterInfoSection>
+          <FooterInfoSection>
+            <HellenicRepublicLogo></HellenicRepublicLogo>
+          </FooterInfoSection>
+        </FooterInfo>
       </FooterContainer>
     </Footer>
   );

package/src/app/Masthead/Masthead.stories.js

@@ -9,3 +9,5 @@ export default {
   displayName: 'Masthead',
 };
 export * from '@digigov/ui/app/Masthead/__stories__/Default';
+export * from '@digigov/ui/app/Masthead/__stories__/WithLogo';
+export * from '@digigov/ui/app/Masthead/__stories__/WithElements';

package/src/app/Masthead/__stories__/WithElements.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Masthead, MastheadBody, MastheadLogo } from '@digigov/ui/layouts/Basic/Masthead';
+import { Heading } from '@digigov/ui/typography/Heading';
+import Hint from '@digigov/ui/typography/Hint';
+import mineduLogo from '@digigov/ui/govgr/images/minedu-logo-base64';
+import Link from '@digigov/ui/navigation/Link';
+
+export const WithElements = () => (
+  <Masthead>
+    <Container>
+      <Main>
+        <MastheadLogo src={mineduLogo} alt="minedu logo" />
+        <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
+        <MastheadBody>
+          Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία συνεπή
+          στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και την
+          εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που έχουν
+          ήδη γίνει. <Link>Προτείνετε βελτιώσεις.</Link>
+        </MastheadBody>
+        <Hint>Τελευταία ενημέρωση: 08/12/2021</Hint>
+        <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
+      </Main>
+    </Container>
+  </Masthead>
+);
+
+export default WithElements;

package/src/app/Masthead/__stories__/WithLogo.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
+import { Container } from '@digigov/ui/layouts/Basic/Container';
+import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Masthead, MastheadBody, MastheadLogo } from '@digigov/ui/layouts/Basic/Masthead';
+import { Heading } from '@digigov/ui/typography/Heading';
+import logo3 from '@digigov/ui/govgr/images/minedu-logo-base64';
+
+export const WithLogo = () => (
+  <Masthead>
+    <Container>
+      <Main>
+        <MastheadLogo src={logo3} alt="minedu logo" />
+        <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
+        <MastheadBody>
+          Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία συνεπή
+          στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και την
+          εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που έχουν
+          ήδη γίνει.
+        </MastheadBody>
+        <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
+      </Main>
+    </Container>
+  </Masthead>
+);
+
+export default WithLogo;

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/StepNav/StepNav.stories.js

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