portal: docs and example updates

dnbexperience · Sep 18, 2019 · ce33a01 · ce33a01
1 parent 96eb981
commit ce33a01
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 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
@@ -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
@@ -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
@@ -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``