From 1096e9a10bcb1ae38ef7b6e28d27af5c53ae9e4b Mon Sep 17 00:00:00 2001 From: Tobias Date: Mon, 22 Jul 2019 10:26:08 +0200 Subject: [PATCH] portal: fix #space example page, second attempt --- .../docs/uilib/components/space/Examples.js | 128 ++++++++++++++++- .../uilib/components/space/VisualHelpers.js | 133 ------------------ .../uilib/demos/eufemia-demo/form-demo-01.js | 5 + 3 files changed, 131 insertions(+), 135 deletions(-) delete mode 100644 packages/dnb-design-system-portal/src/docs/uilib/components/space/VisualHelpers.js diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js index a4c1e97f255..4d6bc2aa3a7 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/Examples.js +++ b/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 ( + + + + + ) +} +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 ( + + + {children} + + + + + + ) +} +VisualSpace.propTypes = { + label: PropTypes.string, + children: PropTypes.node +} +VisualSpace.defaultProps = { + label: null, + children: null +} + +export { MagicBox, VisualSpace } diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/space/VisualHelpers.js b/packages/dnb-design-system-portal/src/docs/uilib/components/space/VisualHelpers.js deleted file mode 100644 index f86ba0b17e8..00000000000 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/space/VisualHelpers.js +++ /dev/null @@ -1,133 +0,0 @@ -/** - * Visual helper to show spacing - * - */ - -import React, { useEffect, useState } from 'react' -import PropTypes from 'prop-types' -import styled from '@emotion/styled' -import { Space } from 'dnb-ui-lib/src/components' - -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 ( - - - - - ) -} -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 ( - - - {children} - - - - - - ) -} -VisualSpace.propTypes = { - label: PropTypes.string, - children: PropTypes.node -} -VisualSpace.defaultProps = { - label: null, - children: null -} - -export { MagicBox, VisualSpace } 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 bd26c58ccf5..07480d540fe 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 @@ -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