fix(Visibility): move to Form.Visibility

dnbexperience · Jan 10, 2024 · 88dcc67 · 88dcc67
1 parent 7a72fa6
commit 88dcc67
Show file tree

Hide file tree

Showing 12 changed files with 43 additions and 36 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms/Examples.tsx
@@ -6,7 +6,6 @@ import {
   StepsLayout,
   Field,
   Value,
-  Visibility,
   FieldBlock,
   useDataValue,
   DataContext,
@@ -156,7 +155,6 @@ export const BaseFieldComponents = () => {
       scope={{
         StepsLayout,
         Value,
-        Visibility,
       }}
     >
       <Card stack>
@@ -186,7 +184,6 @@ export const FeatureFields = () => {
       scope={{
         StepsLayout,
         Value,
-        Visibility,
       }}
     >
       <Card stack>
@@ -206,7 +203,6 @@ export const LayoutComponents = () => {
       scope={{
         StepsLayout,
         Value,
-        Visibility,
       }}
     >
       <Flex.Stack>
@@ -237,7 +233,6 @@ export const VisibilityBasedOnData = () => {
       scope={{
         StepsLayout,
         Value,
-        Visibility,
       }}
     >
       <Form.Handler
@@ -270,7 +265,7 @@ export const VisibilityBasedOnData = () => {
           variant="checkbox-button"
           label="More fields"
         />
-        <Visibility pathTrue="/advanced">
+        <Form.Visibility pathTrue="/advanced">
           <Flex.Stack>
             <Card stack>
               <Form.SubHeading>More information</Form.SubHeading>
@@ -280,7 +275,7 @@ export const VisibilityBasedOnData = () => {
               <Field.PhoneNumber value="+47 98765432" />
             </Card>
           </Flex.Stack>
-        </Visibility>
+        </Form.Visibility>
       </Form.Handler>
     </ComponentBox>
   )
@@ -292,7 +287,6 @@ export const UsingFormHandler = () => {
       scope={{
         StepsLayout,
         Value,
-        Visibility,
       }}
     >
       <Form.Handler
@@ -333,7 +327,6 @@ export const Validation = () => {
       scope={{
         StepsLayout,
         Value,
-        Visibility,
       }}
     >
       <Form.Handler
@@ -370,7 +363,6 @@ export const WithSteps = () => {
       scope={{
         StepsLayout,
         Value,
-        Visibility,
       }}
     >
       <Form.Handler

diff --git a/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features.mdx b/.../dnb-design-system-portal/src/docs/uilib/extensions/forms/extended-features.mdx
@@ -61,7 +61,3 @@ Value components are in practice like a field component whose value cannot be ch
 ## [Iterate](/uilib/extensions/forms/extended-features/Iterate/)
 
 `Iterate` is components and functionality for traversing values and parts of data sets such as arrays, which contain a varying number of elements where the number of components on the screen depends on how many elements the data consists of.
-
-## [Visibility](/uilib/extensions/forms/extended-features/Visibility/)
-
-`Visibility` makes it possible to hide components and elements on the screen based on the dynamic state of data.
diff --git a/...ns/forms/extended-features/Visibility.mdx → ...rms/extended-features/Form/Visibility.mdx b/...ns/forms/extended-features/Visibility.mdx → ...rms/extended-features/Form/Visibility.mdx
@@ -16,10 +16,12 @@ breadcrumb:
     href: /uilib/extensions/forms/
   - text: Extended features
     href: /uilib/extensions/forms/extended-features/
+  - text: Form
+    href: /uilib/extensions/forms/extended-features/Form/
   - text: Visibility
-    href: /uilib/extensions/forms/extended-features/Visibility/
+    href: /uilib/extensions/forms/extended-features/Form/Visibility/
 ---
 
-import Info from 'Docs/uilib/extensions/forms/extended-features/Visibility/info'
+import Info from 'Docs/uilib/extensions/forms/extended-features/Form/Visibility/info'
 
 <Info />
diff --git a/...extended-features/Visibility/Examples.tsx → ...ded-features/Form/Visibility/Examples.tsx b/...extended-features/Visibility/Examples.tsx → ...ded-features/Form/Visibility/Examples.tsx
@@ -1,16 +1,15 @@
 import React from 'react'
-import ComponentBox from '../../../../../../shared/tags/ComponentBox'
+import ComponentBox from '../../../../../../../shared/tags/ComponentBox'
 import { Flex, P } from '@dnb/eufemia/src'
 import {
   Field,
   Form,
   TestElement,
-  Visibility,
 } from '@dnb/eufemia/src/extensions/forms'
 
 export const BooleanExample = () => {
   return (
-    <ComponentBox scope={{ Visibility, TestElement }}>
+    <ComponentBox scope={{ TestElement }}>
       <Form.Handler>
         <Flex.Stack>
           <Field.Boolean
@@ -19,10 +18,10 @@ export const BooleanExample = () => {
             label="Show content"
             value={false}
           />
-          <Visibility pathTrue="/toggleValue">
+          <Form.Visibility pathTrue="/toggleValue">
             <TestElement>Item 1</TestElement>
             <TestElement>Item 2</TestElement>
-          </Visibility>
+          </Form.Visibility>
         </Flex.Stack>
       </Form.Handler>
     </ComponentBox>
@@ -31,7 +30,7 @@ export const BooleanExample = () => {
 
 export const InferData = () => {
   return (
-    <ComponentBox scope={{ Visibility }}>
+    <ComponentBox>
       {() => {
         const MyComponent = () => {
           const [state, setState] = React.useState(false)
@@ -44,9 +43,9 @@ export const InferData = () => {
                 onChange={setState}
                 label="Check me"
               />
-              <Visibility inferData={inferData}>
+              <Form.Visibility inferData={inferData}>
                 <P>This is visible</P>
-              </Visibility>
+              </Form.Visibility>
             </Form.Handler>
           )
         }
@@ -59,29 +58,29 @@ export const InferData = () => {
 
 export const BasedOnBooleanTrue = () => {
   return (
-    <ComponentBox scope={{ Visibility }}>
-      <Visibility visible={true}>
+    <ComponentBox>
+      <Form.Visibility visible={true}>
         <P>This is visible</P>
-      </Visibility>
+      </Form.Visibility>
     </ComponentBox>
   )
 }
 
 export const BasedOnContext = () => {
   return (
-    <ComponentBox scope={{ Visibility }}>
+    <ComponentBox>
       <Form.Handler
         data={{
           toBe: true,
           notToBe: false,
         }}
       >
-        <Visibility pathTrue="/toBe">
+        <Form.Visibility pathTrue="/toBe">
           <P>This will show, as long as `toBe` is true.</P>
-        </Visibility>
-        <Visibility pathTrue="/notToBe">
+        </Form.Visibility>
+        <Form.Visibility pathTrue="/notToBe">
           <P>This will not show until `notToBe` is true.</P>
-        </Visibility>
+        </Form.Visibility>
       </Form.Handler>
     </ComponentBox>
   )

diff --git a/...ms/extended-features/Visibility/demos.mdx → ...tended-features/Form/Visibility/demos.mdx b/...ms/extended-features/Visibility/demos.mdx → ...tended-features/Form/Visibility/demos.mdx
diff --git a/...rms/extended-features/Visibility/info.mdx → ...xtended-features/Form/Visibility/info.mdx b/...rms/extended-features/Visibility/info.mdx → ...xtended-features/Form/Visibility/info.mdx
@@ -2,10 +2,19 @@
 showTabs: true
 ---
 
-import Demos from 'Docs/uilib/extensions/forms/extended-features/Visibility/demos'
+import Demos from 'Docs/uilib/extensions/forms/extended-features/Form/Visibility/demos'
 
 ## Description
 
 The `Visibility` component makes it possible to show or hide components on the screen based on the state of data. It can either be fed with the values directly via props, or it can read data from a surrounding [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler) and show or hide components based on the data it points to.
 
+```tsx
+import { Form } from '@dnb/eufemia/extensions/forms'
+render(
+  <Form.Visibility pathTruthy="/dataPath">
+    show me when the data path value is truthy
+  </Form.Visibility>,
+)
+```
+
 <Demos />
diff --git a/...tended-features/Visibility/properties.mdx → ...d-features/Form/Visibility/properties.mdx b/...tended-features/Visibility/properties.mdx → ...d-features/Form/Visibility/properties.mdx
diff --git a/...xtensions/forms/Visibility/Visibility.tsx → ...ions/forms/Form/Visibility/Visibility.tsx b/...xtensions/forms/Visibility/Visibility.tsx → ...ions/forms/Form/Visibility/Visibility.tsx
@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import pointer from 'json-pointer'
-import * as DataContext from '../DataContext'
+import * as DataContext from '../../DataContext'
 
 export type Props = {
   visible?: boolean

diff --git a/.../Visibility/__tests__/Visibility.test.tsx → .../Visibility/__tests__/Visibility.test.tsx b/.../Visibility/__tests__/Visibility.test.tsx → .../Visibility/__tests__/Visibility.test.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import { render, screen } from '@testing-library/react'
-import { Provider } from '../../DataContext'
+import { Provider } from '../../../DataContext'
 import Visibility from '../Visibility'
 
 describe('Visibility', () => {

diff --git a/.../src/extensions/forms/Visibility/index.ts → ...extensions/forms/Form/Visibility/index.ts b/.../src/extensions/forms/Visibility/index.ts → ...extensions/forms/Form/Visibility/index.ts
diff --git a/packages/dnb-eufemia/src/extensions/forms/Form/index.ts b/packages/dnb-eufemia/src/extensions/forms/Form/index.ts
@@ -4,3 +4,4 @@ export { default as SubmitButton } from './SubmitButton'
 export { default as ButtonRow } from './ButtonRow'
 export { default as MainHeading } from './MainHeading'
 export { default as SubHeading } from './SubHeading'
+export { default as Visibility } from './Visibility'
diff --git a/packages/dnb-eufemia/src/extensions/forms/index.ts b/packages/dnb-eufemia/src/extensions/forms/index.ts
@@ -8,5 +8,13 @@ export * as DataContext from './DataContext'
 export * as Iterate from './Iterate'
 export { default as FieldBlock } from './FieldBlock'
 export { default as ValueBlock } from './ValueBlock'
-export { default as Visibility } from './Visibility'
 export { default as StepsLayout, StepsContext } from './StepsLayout'
+
+/**
+ * Deprecated and will be removed in v11
+ *
+ * @deprecated use import { Field } from 'Form'	instead
+ */
+export function Visibility() {
+  console.error('Please import Visibility from "Form.Visibility"')
+}