@digigov/ui 2.0.0-85c27c19 → 2.0.0-8e254888

package/src/layouts/Basic/Bottom/__stories__/Default.tsx

@@ -1,28 +1,32 @@
-
 import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
 import { GovGRFooter } from '@digigov/ui/govgr/Footer';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Layout } from '@digigov/ui/layouts/Basic';
+import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
 import { Heading, Paragraph } from '@digigov/ui/typography';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
-import Bottom from '@digigov/ui/layouts/Basic/Bottom';
 
 export const Default = () => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Τίτλος σελίδας</Heading>
         <Paragraph>
-          Σε αυτό το παράδειγμα το Footer εσωκλείεται μέσα στο
-          Bottom component
+          Σε αυτό το παράδειγμα το Footer εσωκλείεται μέσα στο Bottom component
         </Paragraph>
       </Main>
     </Container>
@@ -32,4 +36,4 @@ export const Default = () => (
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Bottom/{index.mdx → doc.mdx}

@@ -9,11 +9,7 @@ Use the Bottom component in order to wrap the Footer's components.
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Bottom"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/Bottom/__stories__/Default.tsx" />
 
 ## API
 

package/src/layouts/Basic/Container/__stories__/Default.tsx

@@ -1,30 +1,37 @@
 import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Layout } from '@digigov/ui/layouts/Basic';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
 import { Heading, Paragraph } from '@digigov/ui/typography';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
 
 export const Default = () => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Περιεχόμενο μέσα σε Container</Heading>
         <Paragraph>
-          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών,
-          Μελών Ειδικού Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
-          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν διδακτικό έργο.
+          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών, Μελών Ειδικού
+          Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
+          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν
+          διδακτικό έργο.
         </Paragraph>
       </Main>
     </Container>
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Container/{index.mdx → doc.mdx}

@@ -9,12 +9,7 @@ Container compoment wraps around other elements, grouping them together. Contain
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Container"
-  story="Default.tsx"
-/>
-
+<code src="@digigov/ui/layouts/Basic/Container/__stories__/Default.tsx" />
 
 ## API
 

package/src/layouts/Basic/Main/__stories__/Default.tsx

@@ -1,30 +1,37 @@
 import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Layout } from '@digigov/ui/layouts/Basic';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
 import { Heading, Paragraph } from '@digigov/ui/typography';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
 
 export const Default = () => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Τίτλος Main</Heading>
         <Paragraph>
-          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών,
-          Μελών Ειδικού Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
-          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν διδακτικό έργο.
+          Η εφαρμογή αφορά στην Ατομική Αξιολόγηση Εκπαιδευτικών, Μελών Ειδικού
+          Εκπαιδευτικού και Ειδικού Βοηθητικού Προσωπικού, Διευθυντών,
+          Προϊσταμένων σχολικής μονάδας ή Εργαστηριακού Κέντρου που παρέχουν
+          διδακτικό έργο.
         </Paragraph>
       </Main>
     </Container>
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Main/{index.mdx → doc.mdx}

@@ -3,16 +3,14 @@ id: main
 title: Main
 ---
 
+# Main
+
 # How to use
 
 The Main component is used to include tha main information of the page,
 spanning two-thirds of the page width.
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic/Main"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/Main/__stories__/Default.tsx" />
 
 ## API
 

package/src/layouts/Basic/Top/__stories__/Default.tsx

@@ -1,28 +1,35 @@
 import React from 'react';
+import { Header } from '@digigov/ui/app/Header';
+import { HeaderContent } from '@digigov/ui/app/Header/HeaderContent';
+import { HeaderSection } from '@digigov/ui/app/Header/HeaderSection';
+import { GovGRLogo } from '@digigov/ui/govgr/GovGRLogo';
 import { Layout } from '@digigov/ui/layouts/Basic';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
+import { Top } from '@digigov/ui/layouts/Basic/Top';
 import { Heading, Paragraph } from '@digigov/ui/typography';
-import Header from '@digigov/ui/app/Header';
-import GovGRLogo from '@digigov/ui/govgr/GovGRLogo';
-import Top from '@digigov/ui/layouts/Basic/Top';
 
 export const Default = () => (
   <Layout>
     <Top>
       <Header>
-        <GovGRLogo />
+        <HeaderContent>
+          <HeaderSection>
+            <GovGRLogo />
+          </HeaderSection>
+        </HeaderContent>
       </Header>
     </Top>
     <Container>
       <Main>
         <Heading>Τίτλος σελίδας</Heading>
         <Paragraph>
-          Σε αυτό το παράδειγμα το περιεχόμενο του Header εσωκλείεται μέσα στο Top component
+          Σε αυτό το παράδειγμα το περιεχόμενο του Header εσωκλείεται μέσα στο
+          Top component
         </Paragraph>
       </Main>
     </Container>
   </Layout>
 );
 
-export default Default;
+export default Default;

package/src/layouts/Basic/Top/doc.mdx

@@ -0,0 +1,19 @@
+---
+id: top
+title: Top
+parent: docs/ui/components
+---
+
+# Top
+
+The Top component is used to group the Header components.
+
+## How to use
+
+<code src="@digigov/ui/layouts/Basic/Top/__stories__/Default.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["Top"]} /> 

package/src/layouts/Basic/__snapshots__/index.spec.tsx.snap

@@ -1,109 +1,37 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside
-children  1`] = `
-<ForwardRef(Layout)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-layout--full-height ds-layout"
-  >
+exports[`renders the BasicLayout with Top, Container, Bottom, Main and Aside children 1`] = `
+<body>
+  <div>
     <div
-      className="ds-layout--full-height ds-layout"
+      class="ds-layout ds-layout--full-height"
     >
-      <ForwardRef(Top)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-top"
+      <div
+        class="ds-top"
+      >
+        Header content
+      </div>
+      <div
+        class="ds-container ds-grid ds-gap-sm-12"
+      >
+        <main
+          class="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
+          id="main-content"
         >
-          <div
-            className="ds-top"
-          >
-            Header content
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(Top)>
-      <withDeprecationComponent>
-        <ForwardRef(Container)>
-          <ForwardRef(Grid)
-            className="ds-container"
-            container={true}
-            spacing={
-              Object {
-                "sm": 12,
-              }
-            }
-          >
-            <ForwardRef(Base)
-              as="div"
-              className="ds-container ds-gap-sm-12 ds-grid"
-            >
-              <div
-                className="ds-container ds-gap-sm-12 ds-grid"
-              >
-                <ForwardRef(Main)>
-                  <ForwardRef(Grid)
-                    as="main"
-                    className="ds-main"
-                    id="main-content"
-                    item={true}
-                    md={8}
-                    xs={12}
-                  >
-                    <ForwardRef(Base)
-                      as="main"
-                      className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
-                      id="main-content"
-                    >
-                      <main
-                        className="ds-main xs:ds-grid__col-span-12 md:ds-grid__col-span-8"
-                        id="main-content"
-                      >
-                        Main content
-                      </main>
-                    </ForwardRef(Base)>
-                  </ForwardRef(Grid)>
-                </ForwardRef(Main)>
-                <withDeprecationComponent>
-                  <ForwardRef(Aside)>
-                    <ForwardRef(Grid)
-                      as="aside"
-                      className="ds-aside"
-                      item={true}
-                      md={4}
-                      spacing={4}
-                      xs={12}
-                    >
-                      <ForwardRef(Base)
-                        as="aside"
-                        className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
-                      >
-                        <aside
-                          className="ds-aside xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
-                        >
-                          Side content
-                        </aside>
-                      </ForwardRef(Base)>
-                    </ForwardRef(Grid)>
-                  </ForwardRef(Aside)>
-                </withDeprecationComponent>
-              </div>
-            </ForwardRef(Base)>
-          </ForwardRef(Grid)>
-        </ForwardRef(Container)>
-      </withDeprecationComponent>
-      <ForwardRef(Bottom)>
-        <ForwardRef(Base)
-          as="div"
-          className="ds-bottom"
+          Main content
+        </main>
+        <aside
+          class="ds-aside ds-aside--sticky xs:ds-grid__col-span-12 md:ds-grid__col-span-4"
         >
-          <div
-            className="ds-bottom"
-          >
-            Bottom content
-          </div>
-        </ForwardRef(Base)>
-      </ForwardRef(Bottom)>
+          Side content
+        </aside>
+      </div>
+      <div
+        class="ds-bottom"
+      >
+        Bottom content
+      </div>
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(Layout)>
+  </div>
+</body>
 `;

package/src/layouts/Basic/__stories__/WithBasicLayout.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
+import BasicLayout from '@digigov/ui/layouts/Basic';
 import { Aside } from '@digigov/ui/layouts/Basic/Aside';
+import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 import { Container } from '@digigov/ui/layouts/Basic/Container';
 import { Main } from '@digigov/ui/layouts/Basic/Main';
-import BasicLayout from '@digigov/ui/layouts/Basic';
 import { Top } from '@digigov/ui/layouts/Basic/Top';
-import { Bottom } from '@digigov/ui/layouts/Basic/Bottom';
 
 export const WithBasicLayout = () => (
   <BasicLayout>

package/src/layouts/Basic/{index.mdx → doc.mdx}

@@ -12,26 +12,15 @@ Content and Bottom components.
 
 ### Default layout
 
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="Default.tsx"
-/>
+<code src="@digigov/ui/layouts/Basic/__stories__/Default.tsx" />
 
 ### Two thirds one third columns layout
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="TwoThirdsOneThirdColumns.tsx"
-/>
-
-  ### Multiple rows lyout
-
-<Story
-  packageName="@digigov/ui"
-  component="layouts/Basic"
-  story="MultipleRowsLayout.tsx"
-/>
+
+<code src="@digigov/ui/layouts/Basic/__stories__/TwoThirdsOneThirdColumns.tsx" />
+
+### Multiple rows layout
+
+<code src="@digigov/ui/layouts/Basic/__stories__/MultipleRowsLayout.tsx" />
 
 ## API
 

package/src/layouts/Basic/index.spec.tsx

@@ -9,7 +9,7 @@ import BasicLayout, {
   Bottom,
 } from '@digigov/ui/layouts/Basic';
 
-it('renders the BasicLayout with Top, Container, Bottom, Main and Aside children ', () => {
+it('renders the BasicLayout with Top, Container, Bottom, Main and Aside children', () => {
   const jsx = (
     <BasicLayout>
       <Top>Header content</Top>

package/src/layouts/Basic/index.tsx

@@ -4,7 +4,6 @@ export * from '@digigov/ui/layouts/Basic/Aside';
 export * from '@digigov/ui/layouts/Basic/Main';
 export * from '@digigov/ui/layouts/Basic/Container';
 export * from '@digigov/ui/layouts/Basic/Bottom';
-export * from '@digigov/ui/layouts/Basic/Masthead';
 
 import Layout from '@digigov/react-core/Layout';
 export default Layout;

package/src/layouts/Grid/doc.mdx

@@ -0,0 +1,26 @@
+---
+id: grid
+title: Grid
+---
+
+# Grid
+
+## How to use
+
+Grid component is a  layout system that allows you to design complex web page layouts with rows and columns.
+
+<code src="@digigov/ui/layouts/Grid/__stories__/Default.tsx" />
+
+### Responsive spacing Grid
+
+<code src="@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing.tsx" />
+
+### Inline Grid
+
+<code src="@digigov/ui/layouts/Grid/__stories__/Inline.tsx" />
+
+## API
+
+See below for a complete reference to all of the props  available to the components mentioned here.
+
+<ComponentProps componentName={["Grid"]} /> 

package/src/layouts/Screen/Screen.stories.js

@@ -7,4 +7,4 @@ export default {
 export { Default } from '@digigov/ui/layouts/Screen/__stories__/Default';
 export { SpecificScreenSize } from '@digigov/ui/layouts/Screen/__stories__/SpecificScreenSize';
 export { ScreenDown } from '@digigov/ui/layouts/Screen/__stories__/ScreenDown';
-export { ScreenUp } from '@digigov/ui/layouts/Screen/__stories__/ScreenUp';
+export { ScreenUp } from '@digigov/ui/layouts/Screen/__stories__/ScreenUp';

package/src/layouts/Screen/__stories__/Default.tsx

@@ -4,16 +4,16 @@ import { Screen } from '@digigov/ui/layouts/Screen';
 export const Default = () => {
   return (
     <>
-      <Screen size='mdUp'>
+      <Screen size="mdUp">
         <div>This is a mdUp screen</div>
       </Screen>
-      <Screen size='mdDown'>
+      <Screen size="mdDown">
         <div>This is a mdDown screen</div>
       </Screen>
-      <Screen size='xs'>
+      <Screen size="xs">
         <div>This is a xs screen</div>
       </Screen>
-      <Screen size='sm'>
+      <Screen size="sm">
         <div>This is a sm screen</div>
       </Screen>
     </>

package/src/layouts/Screen/__stories__/ScreenDown.tsx

@@ -3,7 +3,7 @@ import { Screen } from '@digigov/ui/layouts/Screen';
 
 export const ScreenDown = () => {
   return (
-    <Screen size='mdDown'>
+    <Screen size="mdDown">
       <div>This is a mdDown screen</div>
     </Screen>
   );

package/src/layouts/Screen/__stories__/ScreenUp.tsx

@@ -3,7 +3,7 @@ import { Screen } from '@digigov/ui/layouts/Screen';
 
 export const ScreenUp = () => {
   return (
-    <Screen size='mdUp'>
+    <Screen size="mdUp">
       <div>This is a mdUp screen</div>
     </Screen>
   );

package/src/layouts/Screen/__stories__/SpecificScreenSize.tsx

@@ -3,7 +3,7 @@ import { Screen } from '@digigov/ui/layouts/Screen';
 
 export const SpecificScreenSize = () => {
   return (
-    <Screen size='md'>
+    <Screen size="md">
       <div>This is a md screen</div>
     </Screen>
   );

package/src/layouts/Screen/index.tsx

@@ -52,4 +52,3 @@ export const Screen: React.FC<ScreenProps> = ({ size, children }) => {
 };
 
 export default Screen;
-

package/src/layouts/Stack/doc.mdx

@@ -0,0 +1,38 @@
+---
+id: stack
+title: Stack
+---
+
+# Stack
+
+Use the Stack component in order to arrange elements vertically or horizontally.
+
+## How to use
+
+<code src="@digigov/ui/layouts/Stack/__stories__/Default.tsx" />
+
+### With align items
+
+<code src="@digigov/ui/layouts/Stack/__stories__/AlignItems.tsx" />
+
+### With justify content
+
+<code src="@digigov/ui/layouts/Stack/__stories__/JustifyContent.tsx" />
+
+### With no wrap
+
+<code src="@digigov/ui/layouts/Stack/__stories__/NoWrap.tsx" />
+
+### In row
+
+<code src="@digigov/ui/layouts/Stack/__stories__/Row.tsx" />
+
+### With spacing
+
+<code src="@digigov/ui/layouts/Stack/__stories__/Spacing.tsx" />
+
+## API
+
+See below for a complete reference to all of the props available to the components mentioned here.
+
+<ComponentProps componentName={["Stack"]} />