feat(Form.Visibility): add pathValue and whenValue

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Visibility/Examples.tsx

@@ -13,9 +13,9 @@ export const BooleanExample = () => {
       <Form.Handler>
         <Flex.Stack>
           <Field.Boolean
+            label="Show content"
             variant="buttons"
             path="/toggleValue"
-            label="Show content"
             value={false}
           />
           <Form.Visibility pathTrue="/toggleValue">
@@ -28,6 +28,26 @@ export const BooleanExample = () => {
   )
 }
 
+export const PathValue = () => {
+  return (
+    <ComponentBox>
+      <Form.Handler>
+        <Field.Toggle
+          label="Show content"
+          valueOn="checked"
+          valueOff="unchecked"
+          variant="buttons"
+          path="/toggleValue"
+          value="unchecked"
+        />
+        <Form.Visibility pathValue="/toggleValue" whenValue="checked">
+          <P>This is visible</P>
+        </Form.Visibility>
+      </Form.Handler>
+    </ComponentBox>
+  )
+}
+
 export const InferData = () => {
   return (
     <ComponentBox>

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Visibility/demos.mdx

@@ -10,6 +10,10 @@ import * as Examples from './Examples'
 
 <Examples.BooleanExample />
 
+### Matching value
+
+<Examples.PathValue />
+
 ### Direct properties
 
 <Examples.BasedOnBooleanTrue />

packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features/Form/Visibility/properties.mdx

@@ -13,5 +13,7 @@ showTabs: true
 | `pathFalsy`     | `string`     | _(optional)_ Given data context path must be falsy to show children.                                       |
 | `pathTrue`      | `string`     | _(optional)_ Given data context path must be true to show children.                                        |
 | `pathFalse`     | `string`     | _(optional)_ Given data context path must be false to show children.                                       |
+| `pathValue`     | `string`     | _(optional)_ Given data context path must match, as well as the `whenValue` value.                         |
+| `whenValue`     | `string`     | _(optional)_ The value to match. Should be used together with `pathValue`.                                 |
 | `inferData`     | `function`   | _(optional)_ Will be called to decide by external logic, and show/hide contents based on the return value. |
 | `children`      | `React.Node` | _(required)_ Contents.                                                                                     |

packages/dnb-eufemia/src/extensions/forms/Form/Visibility/Visibility.tsx

@@ -16,6 +16,9 @@ export type Props = {
   pathTrue?: string
   /** Given data context path must be false to show children */
   pathFalse?: string
+  /** Given data context path must match, as well as the "whenValue" value */
+  pathValue?: string
+  whenValue?: unknown
   /** Infer visibility calling given derivative function with the whole data set. Should return true/false for visibility.   */
   inferData?: (data: unknown) => boolean
   children: React.ReactNode
@@ -29,11 +32,20 @@ function Visibility({
   pathFalsy,
   pathTrue,
   pathFalse,
+  pathValue,
+  whenValue,
   inferData,
   children,
 }: Props) {
   const dataContext = useContext(DataContext.Context)
 
+  console.log(
+    'val',
+    pointer.has(dataContext.data, pathValue) &&
+      pointer.get(dataContext.data, pathValue),
+    whenValue
+  )
+
   if (visible === false) {
     return null
   }
@@ -75,6 +87,16 @@ function Visibility({
     return null
   }
 
+  if (
+    pathValue &&
+    !(
+      pointer.has(dataContext.data, pathValue) &&
+      pointer.get(dataContext.data, pathValue) === whenValue
+    )
+  ) {
+    return null
+  }
+
   if (inferData && !inferData(dataContext.data)) {
     return null
   }

packages/dnb-eufemia/src/extensions/forms/Form/Visibility/__tests__/Visibility.test.tsx

@@ -13,7 +13,7 @@ describe('Visibility', () => {
     expect(Visibility._supportsSpacingProps).toBe('children')
   })
 
-  describe('visibility-prop', () => {
+  describe('visibility', () => {
     it('renders children when visible is true', () => {
       render(<Visibility visible={true}>Child</Visibility>)
       expect(screen.getByText('Child')).toBeInTheDocument()
@@ -25,7 +25,7 @@ describe('Visibility', () => {
     })
   })
 
-  describe('pathDefined-prop', () => {
+  describe('pathDefined', () => {
     it('renders children when target path is defined', () => {
       render(
         <Provider data={{ isDefined: 'foo' }}>
@@ -45,7 +45,7 @@ describe('Visibility', () => {
     })
   })
 
-  describe('pathUndefined-prop', () => {
+  describe('pathUndefined', () => {
     it('renders children when target path is defined', () => {
       render(
         <Provider data={{ isDefined: 'foo' }}>
@@ -65,7 +65,7 @@ describe('Visibility', () => {
     })
   })
 
-  describe('pathTruthy-prop', () => {
+  describe('pathTruthy', () => {
     it('renders children when target path is truthy', () => {
       render(
         <Provider data={{ isTrue: true }}>
@@ -94,7 +94,7 @@ describe('Visibility', () => {
     })
   })
 
-  describe('pathFalsy-prop', () => {
+  describe('pathFalsy', () => {
     it('renders children when target path is falsy', () => {
       render(
         <Provider data={{ isFalse: false }}>
@@ -123,8 +123,8 @@ describe('Visibility', () => {
     })
   })
 
-  describe('inferData-prop', () => {
-    it('renders children when infer-function return true', () => {
+  describe('inferData', () => {
+    it('renders children when infer-function returns true', () => {
       // eslint-disable-next-line no-unused-vars
       const inferData = jest.fn((data) => true)
       render(
@@ -148,4 +148,28 @@ describe('Visibility', () => {
       expect(inferData.mock.calls[0][0]).toEqual({ foo: 'bar' })
     })
   })
+
+  describe('pathValue', () => {
+    it('renders children when target path and value matches', () => {
+      render(
+        <Provider data={{ myPath: 'checked' }}>
+          <Visibility pathValue="/myPath" whenValue="checked">
+            Child
+          </Visibility>
+        </Provider>
+      )
+      expect(screen.getByText('Child')).toBeInTheDocument()
+    })
+
+    it('does not render children when target path not not value matches', () => {
+      render(
+        <Provider data={{ myPath: 'checked' }}>
+          <Visibility pathValue="/myPath" whenValue="not-checked">
+            Child
+          </Visibility>
+        </Provider>
+      )
+      expect(screen.queryByText('Child')).toBeNull()
+    })
+  })
 })