portal: fix #space example page, second attempt

packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js

@@ -3,12 +3,12 @@
  *
  */
 
-import React, { PureComponent } from 'react'
+import React, { PureComponent, useEffect, useState } from 'react'
 import PropTypes from 'prop-types'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 // import { Space } from 'dnb-ui-lib/src/components'
 import styled from '@emotion/styled'
-import { MagicBox, VisualSpace } from './VisualHelpers'
+import { Space } from 'dnb-ui-lib/src/components'
 
 const IS_TEST = typeof window !== 'undefined' && window.IS_TEST
 const TestStyles = styled.div`
@@ -183,3 +183,127 @@ RedBox.propTypes = {
 RedBox.defaultProps = {
   children: null
 }
+
+const Block = styled.div`
+  position: relative;
+
+  display: flex;
+  justify-content: center;
+
+  width: 1.5rem;
+  height: 1.5rem;
+
+  background-color: var(--color-mint-green);
+`
+const Line = styled.div`
+  position: absolute;
+  bottom: 100%;
+
+  display: flex;
+  align-items: center;
+
+  width: 0.0625rem;
+  height: 100%;
+
+  background-color: var(--color-cherry-red);
+  ${'' /* border-left: 0.0625rem dotted var(--color-cherry-red); */}
+`
+const MarginContainer = styled.div`
+  position: relative;
+`
+const Margin = styled.div`
+  position: absolute;
+  bottom: 100%;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: rgba(213, 30, 149, 0.25);
+  ${'' /* border-left: 0.0625rem dotted var(--color-cherry-red); */}
+`
+const Label = styled.label`
+  display: block;
+  width: 1rem;
+  margin-left: 0.25rem;
+  font-size: 0.5rem;
+  text-align: center;
+  color: var(--color-black-80);
+`
+
+const MagicBox = ({ label, ...rest }) => {
+  const ref = React.createRef()
+
+  const [spaceInRem, setLabel] = useState(label)
+  const [title, setTitle] = useState(null)
+
+  if (!label) {
+    useEffect(() => {
+      const spaceInPixels = window
+        .getComputedStyle(ref.current.parentElement)
+        .getPropertyValue('margin-top')
+      const spaceInRem = `${parseFloat(spaceInPixels) / 16}`
+      setLabel(spaceInRem)
+
+      const title = ref.current.parentElement.getAttribute('class')
+      setTitle(title)
+    })
+  }
+
+  return (
+    <Block {...rest} ref={ref} title={title}>
+      <Line style={{ height: `${spaceInRem}rem` }}></Line>
+      <Label>{spaceInRem}</Label>
+    </Block>
+  )
+}
+MagicBox.propTypes = {
+  label: PropTypes.string
+}
+MagicBox.defaultProps = {
+  label: null
+}
+
+const VisualSpace = ({ label, children, ...rest }) => {
+  const ref = React.createRef()
+
+  const [spaceInRem, setLabel] = useState(label)
+  const [title, setTitle] = useState(null)
+
+  if (!label) {
+    useEffect(() => {
+      const spaceInPixels = window
+        .getComputedStyle(ref.current.children[0])
+        .getPropertyValue('margin-top')
+      const spaceInRem = `${parseFloat(spaceInPixels) / 16}`
+      setLabel(spaceInRem)
+
+      const title = ref.current.parentElement.getAttribute('class')
+      setTitle(title)
+    })
+  }
+
+  return (
+    <Space {...rest} title={title}>
+      <MarginContainer ref={ref}>
+        {children}
+        <Margin style={{ height: `${spaceInRem}rem` }}>
+          <Label>{spaceInRem}</Label>
+        </Margin>
+      </MarginContainer>
+    </Space>
+  )
+}
+VisualSpace.propTypes = {
+  label: PropTypes.string,
+  children: PropTypes.node
+}
+VisualSpace.defaultProps = {
+  label: null,
+  children: null
+}
+
+export { MagicBox, VisualSpace }

packages/dnb-design-system-portal/src/docs/uilib/demos/eufemia-demo/form-demo-01.js

@@ -95,6 +95,11 @@ const DividerSection = styled(Section)`
   .dnb-button + .dnb-button {
     margin-left: 1rem;
   }
+  @media (max-width: 40em) {
+    .dnb-button + .dnb-button {
+      margin-left: 0.5rem;
+    }
+  }
 `
 
 // Default local states/values