feat(Card): add new Card component (beta) (#2744)

Move it out from Layout.
dnbexperience · Oct 12, 2023 · cf0d5b6 · cf0d5b6
1 parent 41bd72e
commit cf0d5b6
Show file tree

Hide file tree

Showing 44 changed files with 202 additions and 160 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/card.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/card.mdx
@@ -0,0 +1,19 @@
+---
+title: 'Card'
+description: '`Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.'
+showTabs: true
+status: 'beta'
+tabs:
+  - title: Info
+    key: '/info'
+  - title: Demos
+    key: '/demos'
+  - title: Properties
+    key: '/properties'
+---
+
+import Info from 'Docs/uilib/components/card/info'
+import Demos from 'Docs/uilib/components/card/demos'
+
+<Info />
+<Demos />
diff --git a/...uilib/components/layout/Card/Examples.tsx → ...c/docs/uilib/components/card/Examples.tsx b/...uilib/components/layout/Card/Examples.tsx → ...c/docs/uilib/components/card/Examples.tsx
@@ -1,11 +1,11 @@
-import { Layout, P } from '@dnb/eufemia/src'
-import ComponentBox from '../../../../../shared/tags/ComponentBox'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+import { Card, Layout, P } from '@dnb/eufemia/src'
 import { Field, Form } from '@dnb/eufemia/src/extensions/forms'
 
 export const Default = () => {
   return (
     <ComponentBox>
-      <Layout.Card data-visual-test="layout-card-border">
+      <Card data-visual-test="layout-card-border">
         <P>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
           cursus pharetra elit in bibendum.
@@ -14,44 +14,44 @@ export const Default = () => {
           Praesent nunc ipsum, convallis eget convallis gravida, vehicula
           vitae metus.
         </P>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
 
 export const Stack = () => {
   return (
     <ComponentBox scope={{ Field }} data-visual-test="layout-card-stack">
-      <Layout.Card stack>
+      <Card stack>
         <Field.String label="Label" value="Value" />
         <Field.String label="Label" value="Value" />
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
 
 export const VerticalFields = () => {
   return (
     <ComponentBox scope={{ Field }}>
-      <Layout.Card>
+      <Card>
         <Layout.Vertical>
           <Field.String label="Label" value="Value" />
           <Field.String label="Label" value="Value" />
         </Layout.Vertical>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
 
 export const WithHeadingsAndAriaLabel = () => {
   return (
     <ComponentBox scope={{ Form }} hidePreview>
-      <Layout.Card aria-labelledby="unique-id">
+      <Card aria-labelledby="unique-id">
         <Form.SubHeading id="unique-id" space={0}>
           Heading
         </Form.SubHeading>
         <P>Content inside a landmark ...</P>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
diff --git a/...cs/uilib/components/layout/Card/demos.mdx → .../src/docs/uilib/components/card/demos.mdx b/...cs/uilib/components/layout/Card/demos.mdx → .../src/docs/uilib/components/card/demos.mdx
diff --git a/...ocs/uilib/components/layout/Card/info.mdx → ...l/src/docs/uilib/components/card/info.mdx b/...ocs/uilib/components/layout/Card/info.mdx → ...l/src/docs/uilib/components/card/info.mdx
@@ -6,7 +6,7 @@ import * as Examples from './Examples'
 
 ## Description
 
-`Layout.Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.
+`Card` is a block section element showing the white box with rounded gray borders, adding spacing automatically.
 
 It uses [Layout.FlexItem](/uilib/components/layout/FlexItem) under the hood. When one of these props where given, `stack`, `direction` or `spacing` – the [Layout.FlexContainer](/uilib/components/layout/FlexContainer) will be used.
 

diff --git a/...lib/components/layout/Card/properties.mdx → ...docs/uilib/components/card/properties.mdx b/...lib/components/layout/Card/properties.mdx → ...docs/uilib/components/card/properties.mdx
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card.mdx
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import styled from '@emotion/styled'
 import ComponentBox from '../../../../shared/tags/ComponentBox'
 import MediaQuery from '@dnb/eufemia/src/shared/MediaQuery'
-import { Layout, Slider, Code, Button } from '@dnb/eufemia/src'
+import { Layout, Slider, Code, Button, Card } from '@dnb/eufemia/src'
 import {
   TestElement,
   Field,
@@ -24,20 +24,20 @@ export const LayoutComponents = () => {
       <Layout.Stack>
         <Form.MainHeading>Profile</Form.MainHeading>
 
-        <Layout.Card stack>
+        <Card stack>
           <Form.SubHeading>Name</Form.SubHeading>
 
           <Field.String label="Fornavn" value="John" />
           <Field.String label="Etternavn" value="Smith" />
-        </Layout.Card>
+        </Card>
 
-        <Layout.Card stack>
+        <Card stack>
           <Form.SubHeading>More information</Form.SubHeading>
 
           <Field.NationalIdentityNumber value="20058512345" />
           <Field.Email value="[email protected]" />
           <Field.PhoneNumber value="+47 98765432" />
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )

diff --git a/...ages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx b/...ages/dnb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/Examples.tsx
@@ -1,5 +1,5 @@
 import ComponentBox from '../../../../../shared/tags/ComponentBox'
-import { Layout } from '@dnb/eufemia/src'
+import { Card, Layout } from '@dnb/eufemia/src'
 import { TestElement, Field } from '@dnb/eufemia/src/extensions/forms'
 
 export const Default = () => {
@@ -125,9 +125,9 @@ export const VerticalWithCard = () => {
   return (
     <ComponentBox scope={{ TestElement }}>
       <Layout.FlexContainer direction="vertical">
-        <Layout.Card>Card contents</Layout.Card>
-        <Layout.Card>Card contents</Layout.Card>
-        <Layout.Card>Card contents</Layout.Card>
+        <Card>Card contents</Card>
+        <Card>Card contents</Card>
+        <Card>Card contents</Card>
       </Layout.FlexContainer>
     </ComponentBox>
   )
@@ -136,12 +136,12 @@ export const VerticalWithCard = () => {
 export const VerticalWithFieldString = () => {
   return (
     <ComponentBox scope={{ TestElement, Field }}>
-      <Layout.Card>
+      <Card>
         <Layout.FlexContainer direction="vertical">
           <Field.String label="Label" value="Foo" />
           <Field.String label="Label" value="Foo" />
         </Layout.FlexContainer>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -152,12 +152,12 @@ export const VerticalSpaceDivider = () => {
       scope={{ TestElement, Field }}
       data-visual-test="layout-flex-container-divider"
     >
-      <Layout.Card>
+      <Card>
         <Layout.FlexContainer direction="vertical" divider="space">
           <Field.String label="Label" value="Value" />
           <Field.String label="Label" value="Value" />
         </Layout.FlexContainer>
-      </Layout.Card>
+      </Card>
     </ComponentBox>
   )
 }
@@ -167,22 +167,22 @@ export const LayoutHorizontalFlexGrowItems = () => {
     <ComponentBox>
       <Layout.Horizontal>
         <Layout.FlexItem size={3}>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem size={4}>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem size={5}>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem grow>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem grow>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
         <Layout.FlexItem grow>
-          <Layout.Card>Card contents</Layout.Card>
+          <Card>Card contents</Card>
         </Layout.FlexItem>
       </Layout.Horizontal>
     </ComponentBox>

diff --git a/...nb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx b/...nb-design-system-portal/src/docs/uilib/components/layout/FlexContainer/info.mdx
@@ -6,7 +6,7 @@ showTabs: true
 
 `Layout.FlexContainer` is a building block for [CSS flexbox](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout) based layout of contents and components.
 
-Ideally, use [Layout.FlexItem](/uilib/components/layout/FlexItem) or [Layout.Card](/uilib/components/layout/Card) for you inner wrappers.
+Ideally, use [Layout.FlexItem](/uilib/components/layout/FlexItem) or [Card](/uilib/components/card) for you inner wrappers.
 
 ## How spacing is applied
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/Examples.tsx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/Stack/Examples.tsx
@@ -1,6 +1,6 @@
 import { Form } from '@dnb/eufemia/src/extensions/forms'
 import ComponentBox from '../../../../../shared/tags/ComponentBox'
-import { Layout, P } from '@dnb/eufemia/src'
+import { Card, Layout, P } from '@dnb/eufemia/src'
 
 export const Default = () => {
   return (
@@ -56,14 +56,14 @@ export const WithCard = () => {
   return (
     <ComponentBox>
       <Layout.Stack>
-        <Layout.Card>
+        <Card>
           <P>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
             cursus pharetra elit in bibendum. Vivamus tincidunt eleifend
             tellus at tempus. Aliquam at felis rutrum, luctus dui at,
             bibendum ipsum.
           </P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
@@ -74,14 +74,14 @@ export const WithCardAndHeading = () => {
     <ComponentBox scope={{ Form }}>
       <Layout.Stack>
         <Form.MainHeading>Main heading</Form.MainHeading>
-        <Layout.Card>
+        <Card>
           <P>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
             cursus pharetra elit in bibendum. Vivamus tincidunt eleifend
             tellus at tempus. Aliquam at felis rutrum, luctus dui at,
             bibendum ipsum.
           </P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
@@ -93,14 +93,14 @@ export const WithCardAndHeadings = () => {
       <Layout.Stack>
         <Form.MainHeading>Main heading</Form.MainHeading>
         <Form.SubHeading>Sub heading</Form.SubHeading>
-        <Layout.Card>
+        <Card>
           <P>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi
             cursus pharetra elit in bibendum. Vivamus tincidunt eleifend
             tellus at tempus. Aliquam at felis rutrum, luctus dui at,
             bibendum ipsum.
           </P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )
@@ -111,9 +111,9 @@ export const WithHeadingsAndAriaLabel = () => {
     <ComponentBox hidePreview scope={{ Form }}>
       <Layout.Stack aria-labelledby="unique-id">
         <Form.SubHeading id="unique-id">Heading</Form.SubHeading>
-        <Layout.Card>
+        <Card>
           <P>Content inside a landmark ...</P>
-        </Layout.Card>
+        </Card>
       </Layout.Stack>
     </ComponentBox>
   )

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/layout/info.mdx
@@ -8,7 +8,7 @@ To make it easier to build application layout and [form](/uilib/extensions/forms
 
 ### Wrappers
 
-- **[Card](/uilib/components/layout/Card)** is a block section element showing the white box with rounded gray borders, adding spacing automatically.
+- **[Card](/uilib/components/card)** is a block section element showing the white box with rounded gray borders, adding spacing automatically.
 
 - **[Stack](/uilib/components/layout/Stack)** is an outer block element for wrapping content to get the correct layout and spacing between region and region headings.
 

diff --git a/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx b/packages/dnb-design-system-portal/src/docs/uilib/extensions/forms.mdx
@@ -38,15 +38,15 @@ The goal of the Forms extension is to make it easy to build forms and other data
 
 ### Layout
 
-When building your application forms, preferably use the [Layout](/uilib/components/layout) component. It seamlessly places all the fields and components of Eufemia Forms correctly into place.
+When building your application forms, preferably use the following layout components. They seamlessly places all the fields and components of Eufemia Forms correctly into place.
 
-- [Layout](/uilib/components/layout) for easy to outline and consistent application forms.
+- [Layout](/uilib/components/layout) for easy and consistent application forms.
+- [Card](/uilib/components/card) for the default card outline of forms.
 
 ### Additional features
 
 - [Feature fields](/uilib/extensions/forms/feature-fields) such as Email and PhoneNumber.
 - [Extended features](/uilib/extensions/forms/extended-features) such as the main [Form.Handler](/uilib/extensions/forms/extended-features/Form/Handler) and [StepsLayout](/uilib/extensions/forms/extended-features/StepsLayout) for creating stepped forms.
-- [Layout](/uilib/components/layout) to apply default styles for application forms.
 
 ### Value components
 
@@ -81,7 +81,7 @@ render(
     onChange={...}
     onSubmit={...}
   >
-    <Layout.Card spacing="medium">
+    <Card spacing="medium">
       <Field.OrganizationNumber
         path="/companyOrganizationNumber"
         required
@@ -98,7 +98,7 @@ render(
         />
         <Field.Option value="other" title="Annet" />
       </Field.Selection>
-    </Layout.Card>
+    </Card>
   </Form.Handler>,
 )
 ```
@@ -110,9 +110,9 @@ import '@dnb/eufemia/extensions/forms/style'
 import { Form, Field } from '@dnb/eufemia/extensions/forms'
 render(
   <Form.Handler data={existingData} onSubmit={...}>
-    <Layout.Card spacing="medium">
+    <Card spacing="medium">
       <MyCustomComponent path="/companyName" required />
-    </Layout.Card>
+    </Card>
   </Form.Handler>,
 )
 ```