From bfaa5a693fd89a57215715f79e7a13656339cad0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Tue, 7 Feb 2023 17:26:20 +0100 Subject: [PATCH 1/9] feat(FormRow): remove indent feature --- .../form-row/{Examples.js => Examples.tsx} | 585 +++++++++--------- 1 file changed, 290 insertions(+), 295 deletions(-) rename packages/dnb-design-system-portal/src/docs/uilib/components/form-row/{Examples.js => Examples.tsx} (50%) diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.tsx similarity index 50% rename from packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js rename to packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.tsx index dd08f80ad73..f314d62bf0e 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.js +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/form-row/Examples.tsx @@ -25,6 +25,7 @@ import { FormSet, FormRow, } from '@dnb/eufemia/src/components' +import { Ingress } from '@dnb/eufemia/src/elements' const TestStyles = styled.div` /* make sure our input gets an explicit width, because of mac/linux rendering differences */ @@ -70,35 +71,17 @@ const Box = styled(Space)` export const FormRowVerticalAlignedLabels = () => ( - { - /* jsx */ ` - - Custom legend: - - } - label_direction="vertical" -> - - - -` - } - - -) - -export const FormRowLegendIndentUsage = () => ( - - - { - /* jsx */ ` - - - -` - } + + Custom legend: + + } + label_direction="vertical" + > + + + ) @@ -106,77 +89,74 @@ export const FormRowLegendIndentUsage = () => ( export const FormRowSectionStyle = () => ( - { - /* jsx */ ` - - - -` - } + + + ) export const FormRowCombineVerticalAndHorizontal = () => ( - - { - /* jsx */ ` -// 1. In the nested FormRow we reset the layout to not be vertical -// 2. So we can use a different direction ("label_direction") -render( - - Custom vertical legend: - - } - vertical - > - - - - - - - - -) -` - } + + {() => { + // 1. In the nested FormRow we reset the layout to not be vertical + // 2. So we can use a different direction ("label_direction") + return ( + + Custom vertical legend: + + } + vertical + > + + + + + + + + + ) + }} ) export const FormRowCustomIndentLayout = () => ( - - { - /* jsx */ ` -const CustomRow = styled(FormRow)\` - align-items: flex-end; - > .dnb-form-label { - max-width: 12rem; - background: var(--color-white); - color: var(--color-fire-red); - } -\` -render( - - - -) -` - } + + {() => { + const CustomRow = styled(FormRow)` + align-items: flex-end; + > .dnb-form-label { + max-width: 12rem; + background: var(--color-white); + color: var(--color-fire-red); + } + ` + return ( + + + + ) + }} ) @@ -184,13 +164,12 @@ render( export const FormRowDefault = () => ( - { - /* jsx */ ` - - - -` - } + + + ) @@ -198,43 +177,51 @@ export const FormRowDefault = () => ( export const FormRowVertical = () => ( - { - /* jsx */ ` - - - - -` - } + + + + ) export const FormRowVerticalDirection = () => ( - - { - /* jsx */ ` -const CustomRow = styled(FormRow)\` - .dnb-form-row__content .dnb-button { - align-self: flex-end; - transform: translateY(0.25rem); /* 4px down */ - } -\` -render( -Legend } - label_direction="vertical" -> - -