@digigov/ui 1.0.0-002c630d → 1.0.0-290a96e2

package/src/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/Default.tsx

@@ -6,9 +6,9 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 import {
-  SingleCharacterInputContainer,
-  SingleCharacterInputItem,
-} from '@digigov/ui/form/SingleCharacterInputContainer';
+  SingleCharacterInputs,
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
 
 import { Hint } from '@digigov/ui/typography/Hint';
 
@@ -19,14 +19,14 @@ export const Default = () => (
       <Hint id='code-hint'>
         Εισάγετε τον μοναδικό κωδικό που λάβατε στο ηλεκτρονικό σας ταχυδρομείο.
       </Hint>
-      <SingleCharacterInputContainer>
-        <SingleCharacterInputItem name="first-digit" value={4} />
-        <SingleCharacterInputItem name="second-digit" value={4} />
-        <SingleCharacterInputItem name="third-digit" value={5} />
-        <SingleCharacterInputItem name="forth-digit" value={1} />
-        <SingleCharacterInputItem name="fifth-digit" value={2} />
-        <SingleCharacterInputItem name="sixth-digit" value={3} />
-      </SingleCharacterInputContainer>
+      <SingleCharacterInputs>
+        <SingleCharacterInput name="first-digit" defaultValue={4} />
+        <SingleCharacterInput name="second-digit" defaultValue={4} />
+        <SingleCharacterInput name="third-digit" defaultValue={5} />
+        <SingleCharacterInput name="forth-digit" defaultValue={1} />
+        <SingleCharacterInput name="fifth-digit" defaultValue={2} />
+        <SingleCharacterInput name="sixth-digit" defaultValue={3} />
+      </SingleCharacterInputs>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/WithDefaultError.tsx

@@ -6,9 +6,9 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 import {
-  SingleCharacterInputContainer,
-  SingleCharacterInputItem,
-} from '@digigov/ui/form/SingleCharacterInputContainer';
+  SingleCharacterInputs,
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -23,14 +23,14 @@ export const WithDefaultError = () => (
         <VisuallyHidden>Λάθος:</VisuallyHidden>
         Το πεδίο είναι υποχρεωτικό.
       </ErrorMessage>
-      <SingleCharacterInputContainer>
-        <SingleCharacterInputItem name="first-digit" error />
-        <SingleCharacterInputItem name="second-digit" error />
-        <SingleCharacterInputItem name="third-digit" error />
-        <SingleCharacterInputItem name="forth-digit" error />
-        <SingleCharacterInputItem name="fifth-digit" error />
-        <SingleCharacterInputItem name="sixth-digit" error />
-      </SingleCharacterInputContainer>
+      <SingleCharacterInputs>
+        <SingleCharacterInput name="first-digit" error />
+        <SingleCharacterInput name="second-digit" error />
+        <SingleCharacterInput name="third-digit" error />
+        <SingleCharacterInput name="forth-digit" error />
+        <SingleCharacterInput name="fifth-digit" error />
+        <SingleCharacterInput name="sixth-digit" error />
+      </SingleCharacterInputs>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/WithErrorMessageInvalidCode.tsx

@@ -6,9 +6,9 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 import {
-  SingleCharacterInputContainer,
-  SingleCharacterInputItem,
-} from '@digigov/ui/form/SingleCharacterInputContainer';
+  SingleCharacterInputs,
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -23,14 +23,14 @@ export const WithErrorMessageInvalidCode = () => (
         <VisuallyHidden>Λάθος:</VisuallyHidden>
         Έχετε εισάγει λάθος κωδικό.
       </ErrorMessage>
-      <SingleCharacterInputContainer aria-describedby='code-error'>
-        <SingleCharacterInputItem name="first-digit" value={4} error />
-        <SingleCharacterInputItem name="second-digit" value={4} error />
-        <SingleCharacterInputItem name="third-digit" value={5} error />
-        <SingleCharacterInputItem name="forth-digit" value={1} error />
-        <SingleCharacterInputItem name="fifth-digit" value={2} error />
-        <SingleCharacterInputItem name="sixth-digit" value={3} error />
-      </SingleCharacterInputContainer>
+      <SingleCharacterInputs aria-describedby='code-error'>
+        <SingleCharacterInput name="first-digit" defaultValue={4} error />
+        <SingleCharacterInput name="second-digit" defaultValue={4} error />
+        <SingleCharacterInput name="third-digit" defaultValue={5} error />
+        <SingleCharacterInput name="forth-digit" defaultValue={1} error />
+        <SingleCharacterInput name="fifth-digit" defaultValue={2} error />
+        <SingleCharacterInput name="sixth-digit" defaultValue={3} error />
+      </SingleCharacterInputs>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/{SingleCharacterInputContainer → SingleCharacterInputs}/__stories__/WithErrorMessageLessDigit.tsx

@@ -6,9 +6,9 @@ import {
   FieldsetLegend,
 } from '@digigov/ui/form/FieldContainer';
 import {
-  SingleCharacterInputContainer,
-  SingleCharacterInputItem,
-} from '@digigov/ui/form/SingleCharacterInputContainer';
+  SingleCharacterInputs,
+  SingleCharacterInput,
+} from '@digigov/ui/form/SingleCharacterInputs';
 import { Hint } from '@digigov/ui/typography/Hint';
 import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';
 
@@ -23,14 +23,14 @@ export const WithErrorMessageLessDigit = () => (
         <VisuallyHidden>Λάθος:</VisuallyHidden>
         Έχετε συμπληρώσει λιγότερα από 6 ψηφία.
       </ErrorMessage>
-      <SingleCharacterInputContainer aria-describedby='code-error'>
-        <SingleCharacterInputItem name="first-digit" value="6" />
-        <SingleCharacterInputItem name="second-digit" value="4" />
-        <SingleCharacterInputItem name="third-digit" value="5" />
-        <SingleCharacterInputItem name="forth-digit" error />
-        <SingleCharacterInputItem name="fifth-digit" error />
-        <SingleCharacterInputItem name="sixth-digit" error />
-      </SingleCharacterInputContainer>
+      <SingleCharacterInputs aria-describedby='code-error'>
+        <SingleCharacterInput name="first-digit" defaultValue="6" />
+        <SingleCharacterInput name="second-digit" defaultValue="4" />
+        <SingleCharacterInput name="third-digit" defaultValue="5" />
+        <SingleCharacterInput name="forth-digit" error />
+        <SingleCharacterInput name="fifth-digit" error />
+        <SingleCharacterInput name="sixth-digit" error />
+      </SingleCharacterInputs>
     </Fieldset>
   </FieldContainer>
 );

package/src/form/SingleCharacterInputs/index.mdx

@@ -0,0 +1,24 @@
+---
+id: single-character-inputs
+title: SingleCharacterInputs
+---
+
+# SingleCharacterInput
+
+```bash
+import SingleCharacterInputs from '@digigov/ui/form/SingleCharacterInputs';
+```
+
+## How to use
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="Default.tsx" />
+
+### Error message
+
+If you’re highlighting the whole date, style all the fields like this:
+
+<Story packageName="@digigov/ui" component="form/SingleCharacterInputs" story="WithDefaultError.tsx" />
+
+## API
+
+<PropTypes packageName="@digigov/ui" component="SingleCharacterInputs" />

package/src/form/SingleCharacterInputs/index.tsx

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

package/src/form/TextArea/index.mdx

@@ -11,65 +11,37 @@ import TextArea from '@digigov/ui/form/TextArea';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="Default.tsx" />
 
 ### Use appropriately-sized textareas
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithDeclaredRows.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithDeclaredRows.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="MultipleQuestions.tsx" />
 
 ### Limiting the number of characters
 
 If there’s a good reason to limit the number of characters users can enter, you can use the character count component.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="LimitedCharacters.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="LimitedCharacters.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithHint.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextArea"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextArea" story="DisabledInput.tsx" />
 
 ## API
 

package/src/form/TextInput/__stories__/FixedWidths.tsx

@@ -9,37 +9,37 @@ export const FixedWidths = () => (
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 20 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={20}></TextInput>
+         <TextInput name="inputext" maxWidth={'20-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 10 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={10}></TextInput>
+         <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 5 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={5}></TextInput>
+         <TextInput name="inputext" maxWidth={'5-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 4 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={4}></TextInput>
+         <TextInput name="inputext" maxWidth={'4-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 3 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={3}></TextInput>
+         <TextInput name="inputext" maxWidth={'3-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πεδίο 2 χαρακτήρων</LabelTitle>
-         <TextInput name="inputext" characterWidth={2}></TextInput>
+         <TextInput name="inputext" maxWidth={'2-char'}></TextInput>
       </LabelContainer>
     </FieldContainer>
   </>

package/src/form/TextInput/__stories__/FluidWidths.tsx

@@ -9,37 +9,37 @@ export const FluidWidths = () => (
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Μέγιστο πλάτος</LabelTitle>
-        <TextInput name="inputext" cellWidth="full"></TextInput>
+        <TextInput name="inputext" width='full'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στα τρία-τέταρτα</LabelTitle>
-        <TextInput name="inputext" cellWidth="three-quarters"></TextInput>
+        <TextInput name="inputext" width='75%'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στα δύο-τρίτα</LabelTitle>
-        <TextInput name="inputext" cellWidth="two-thirds"></TextInput>
+        <TextInput name="inputext" width='66.6%'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στο μισό</LabelTitle>
-        <TextInput name="inputext" cellWidth="one-half"></TextInput>
+        <TextInput name="inputext" width='50%'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στο ένα-τρίτο</LabelTitle>
-        <TextInput name="inputext" cellWidth="one-third"></TextInput>
+        <TextInput name="inputext" width='33.3%'></TextInput>
       </LabelContainer>
     </FieldContainer>
     <FieldContainer>
       <LabelContainer>
         <LabelTitle size="sm">Πλάτος στο ένα-τέταρτο</LabelTitle>
-        <TextInput name="inputext" cellWidth="one-quarter"></TextInput>
+        <TextInput name="inputext" width='25%'></TextInput>
       </LabelContainer>
     </FieldContainer>
   </>

package/src/form/TextInput/index.mdx

@@ -11,19 +11,11 @@ import TextInput from '@digigov/ui/form/TextInput';
 
 ## How to use
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="Default.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="Default.tsx" />
 
 ### If you’re asking more than one question on the page
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="MultipleQuestions.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="MultipleQuestions.tsx" />
 
 ### Fixed width inputs
 
@@ -33,59 +25,35 @@ The widths are designed for specific character lengths and to be consistent acro
 
 On fixed width inputs, the width will remain fixed on all screens unless it is wider than the viewport, in which case it will shrink to fit.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FixedWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="FixedWidths.tsx" />
 
 ### Fluid width inputs
 
 Fluid width inputs will resize with the viewport.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="FluidWidths.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="FluidWidths.tsx" />
 
 ### Hint text
 
 Use hint text for help that’s relevant to the majority of users, like how their information will be used, or where to find it.
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithHint.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="WithHint.tsx" />
 
 ## Numbers
 
 ### Asking for whole numbers
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="AskingForNumbers.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="AskingForNumbers.tsx" />
 
 ### Error message
 
 Error messages should be styled like this:
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="WithErrorMessage.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="WithErrorMessage.tsx" />
 
 ### Disabled input
 
-<Story
-  packageName="@digigov/ui"
-  component="form/TextInput"
-  story="DisabledInput.tsx"
-/>
+<Story packageName="@digigov/ui" component="form/TextInput" story="DisabledInput.tsx" />
 
 ## API
 

package/src/form/index.ts

@@ -8,8 +8,8 @@ export * from '@digigov/ui/form/FileUpload';
 export * from '@digigov/ui/form/Form';
 export * from '@digigov/ui/form/LabelContainer';
 export * from '@digigov/ui/form/RadioContainer';
-export * from '@digigov/ui/form/SearchSection';
+export * from '@digigov/ui/form/SearchContainer';
 export * from '@digigov/ui/form/SelectContainer';
-export * from '@digigov/ui/form/SingleCharacterInputContainer';
+export * from '@digigov/ui/form/SingleCharacterInputs';
 export * from '@digigov/ui/form/TextArea';
 export * from '@digigov/ui/form/TextInput';

package/src/govgr/Footer/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import Footer, { FooterProps } from '@digigov/react-core/Footer';
 import FooterContainer from '@digigov/react-core/FooterContainer';
-import FooterMeta from '@digigov/react-core/FooterMeta';
-import FooterMetaItem from '@digigov/react-core/FooterMetaItem';
+import FooterInfo from '@digigov/react-core/FooterInfo';
+import FooterInfoSection from '@digigov/react-core/FooterInfoSection';
 import Copyright from '@digigov/ui/govgr/Footer/Copyright';
 import HellenicRepublicLogo from '@digigov/ui/govgr/Footer/HellenicRepublicLogo';
 
@@ -25,8 +25,8 @@ export const GovGRFooter: React.FC<GovGRFooterProps> = ({
     <Footer>
       <FooterContainer>
         {children || (
-          <FooterMeta>
-            <FooterMetaItem>
+          <FooterInfo>
+            <FooterInfoSection>
               {copyright ? (
                 copyright
               ) : (
@@ -35,11 +35,11 @@ export const GovGRFooter: React.FC<GovGRFooterProps> = ({
                   minDigitalCopyright={minDigitalCopyright}
                 />
               )}
-            </FooterMetaItem>
-            <FooterMetaItem>
+            </FooterInfoSection>
+            <FooterInfoSection>
               <HellenicRepublicLogo />
-            </FooterMetaItem>
-          </FooterMeta>
+            </FooterInfoSection>
+          </FooterInfo>
         )}
       </FooterContainer>
     </Footer>

package/src/icons/Icon/index.tsx

@@ -1,6 +1,6 @@
-export * from '@digigov/react-core/Icon';
+export * from '@digigov/react-icons/Icon';
 export * from '@digigov/react-icons';
 export * from '@digigov/react-icons/icons';
 
-import Icon from '@digigov/react-core/Icon';
+import Icon from '@digigov/react-icons/Icon';
 export default Icon;

package/src/layouts/Admin/index.tsx

@@ -4,7 +4,7 @@ export * from '@digigov/react-core/AdminMain';
 export * from '@digigov/react-core/AdminAside';
 export * from '@digigov/react-core/AdminTopSection';
 export * from '@digigov/react-core/AdminHeader';
-export * from '@digigov/react-core/AdminHeaderSection';
+export * from '@digigov/react-core/AdminHeaderContent';
 
 import AdminLayout from '@digigov/react-core/AdminLayout';
 export default AdminLayout;

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

@@ -4,10 +4,10 @@ exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side childr
 <ForwardRef(Layout)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+    className="govgr-layout--full-height govgr-layout"
   >
     <div
-      className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+      className="govgr-layout--full-height govgr-layout"
     >
       <ForwardRef(Top)>
         <ForwardRef(Base)
@@ -25,10 +25,10 @@ exports[`renders the BasicLayout with Top, Content, Bottom, Main and Side childr
         <ForwardRef(Container)>
           <ForwardRef(Base)
             as="div"
-            className="govgr-width-container"
+            className="govgr-container"
           >
             <div
-              className="govgr-width-container"
+              className="govgr-container"
             >
               <ForwardRef(Base)
                 as="div"

package/src/layouts/Divider/index.tsx

@@ -2,7 +2,7 @@ import CoreSectionBreak, {
   SectionBreakProps as CoreSectionBreakProps,
 } from '@digigov/react-core/SectionBreak';
 import withDeprecation from '@digigov/ui/utils/withDeprecation';
-export * from '@digigov/react-core/ChoiceDivider';
+export * from '@digigov/react-core/ChoiceDividerText';
 
 export type DividerProps = CoreSectionBreakProps;
 

package/src/layouts/Grid/Grid.stories.js

@@ -5,4 +5,5 @@ export default {
   displayName: 'Grid',
 };
 export * from '@digigov/ui/layouts/Grid/__stories__/Default';
+export * from '@digigov/ui/layouts/Grid/__stories__/ResponsiveSpacing';
 export * from '@digigov/ui/layouts/Grid/__stories__/Inline';

package/src/layouts/Grid/__stories__/ResponsiveSpacing.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Card } from '@digigov/ui/content/Card';
+import { Grid } from '@digigov/ui/layouts/Grid';
+
+export const ResponsiveSpacing = () => {
+  return (
+    <>
+      <Grid role="grid" aria-label="grid-example" container spacing={{xs:1, sm:4, md:6, lg:8, xl:12}}>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+        <Grid role="row" xs={12} sm={6} md={4}>
+          <Card variant="border" role="gridcell">
+            1
+          </Card>
+        </Grid>
+      </Grid>
+    </>
+  );
+};
+export default ResponsiveSpacing;

package/src/layouts/Section/index.tsx

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

package/src/layouts/Stack/Stack.stories.js

@@ -0,0 +1,12 @@
+import Stack from '@digigov/ui/layouts/Stack';
+export default {
+  title: 'Digigov UI/layouts/Stack',
+  component: Stack,
+  displayName: 'Stack',
+};
+export * from '@digigov/ui/layouts/Stack/__stories__/Default';
+export * from '@digigov/ui/layouts/Stack/__stories__/Spacing';
+export * from '@digigov/ui/layouts/Stack/__stories__/Row';
+export * from '@digigov/ui/layouts/Stack/__stories__/NoWrap';
+export * from '@digigov/ui/layouts/Stack/__stories__/JustifyContent';
+export * from '@digigov/ui/layouts/Stack/__stories__/AlignItems';

package/src/layouts/Stack/__stories__/AlignItems.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Card from '@digigov/ui/content/Card';
+import Stack from '@digigov/ui/layouts/Stack';
+
+export const AlignItems = () => {
+  return (
+    <Stack spacing={4}>
+      <Stack direction="row" spacing={2} alignItems='flex-start'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} alignItems='center'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} alignItems='flex-end'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} alignItems='baseline'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+      <Stack direction="row" spacing={2} alignItems='stretch'>
+        <Card variant="border"> Item 1 </Card>
+        <Card variant="border" padding={8}> Item 2 </Card>
+        <Card variant="border"> Item 3 </Card>
+      </Stack>
+    </Stack>
+  );
+};
+export default AlignItems;