From ce33a016c2dd33fc9d2ae9aa6f9c5b28cadff1c6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tobias=20H=C3=B8egh?= <tobias@tujo.no>
Date: Wed, 18 Sep 2019 20:04:00 +0200
Subject: [PATCH] portal: docs and example updates

---
 .../docs/uilib/components/input/Examples.js   |  1 +
 .../uilib/demos/eufemia-demo/form-demo-01.js  | 20 +++++++++++++------
 .../src/docs/uilib/demos/layout/Layout.js     |  5 ++---
 3 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.js
index 345f9a2555d..4ad300896e9 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/components/input/Examples.js
@@ -167,6 +167,7 @@ class Example extends PureComponent {
         console.log('onChange:', value)
       }}
       right="small"
+      bottom="x-small"
     />
     <Button text="Submit" type="submit" />
   </FormRow>
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js b/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js
index 972727a58cf..d1465c12c59 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js
@@ -211,7 +211,8 @@ const MainForm = () => {
 
           <Attachment>
             <Attachment.FileRow>
-              <Icon icon={AttachmentIcon} /> <span>filname_01.jpg</span>
+              <Icon icon={AttachmentIcon} aria-hidden />
+              {' filname_01.jpg'}
             </Attachment.FileRow>
             <Button
               text="Delete"
@@ -221,7 +222,7 @@ const MainForm = () => {
             />
           </Attachment>
 
-          <Attachment.Add top="x-small">
+          <Attachment.Add>
             <Button
               text="Upload attachment"
               variant="tertiary"
@@ -312,15 +313,17 @@ const Ingress = props => (
 // Attachment area
 const Attachment = styled(Space)`
   .dnb-button {
-    margin-left: 1.75rem;
+    margin-left: 1rem;
   }
 `
 Attachment.FileRow = styled.span`
+  margin-right: 0.75rem;
   .dnb-icon {
     margin-right: 0.5rem;
   }
 `
 Attachment.Add = styled(Space)`
+  margin-top: 0.5rem;
   .dnb-button {
     margin-left: -0.5rem;
   }
@@ -333,9 +336,14 @@ const DividerSection = styled(Section)`
   .dnb-button + .dnb-button {
     margin-left: 1rem;
   }
-  @media (max-width: 40em) {
-    .dnb-button + .dnb-button {
-      margin-left: 0.5rem;
+  @media (max-width: 30rem) {
+    display: block;
+    .dnb-button {
+      display: flex;
+      margin-top: 0.5rem;
+      & + .dnb-button {
+        margin-left: 0;
+      }
     }
   }
 `
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/demos/layout/Layout.js b/packages/dnb-design-system-portal/src/docs/uilib/demos/layout/Layout.js
index c8b4d7ab3f5..bac84fdf32a 100644
--- a/packages/dnb-design-system-portal/src/docs/uilib/demos/layout/Layout.js
+++ b/packages/dnb-design-system-portal/src/docs/uilib/demos/layout/Layout.js
@@ -19,14 +19,13 @@ const Wrapper = styled.div`
 `
 const WrapperInner = styled.div`
   /* for large screesn */
-  width: 84vw; /* apr. the same as 60rem */
+  width: 100%; /* 84vw ~ 60rem */
   max-width: 60rem;
   padding: 0 1rem;
 
   /* for small screesn */
   @media (max-width: 40em) {
-    width: 95vw;
-    padding: 0;
+    padding: 0 0.5rem;
   }
 `
 const Main = styled.main``