-
Notifications
You must be signed in to change notification settings - Fork 33
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(Layout): release new Layout component
- Loading branch information
1 parent
3c92cef
commit a12feac
Showing
140 changed files
with
3,170 additions
and
2,122 deletions.
There are no files selected for viewing
21 changes: 21 additions & 0 deletions
21
packages/dnb-design-system-portal/src/docs/uilib/components/layout.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| --- | ||
| title: 'Layout' | ||
| description: 'To make it easier to build application layout and form-views in line with defined design sketches, there are a number of components for layout.' | ||
| status: 'new' | ||
| theme: 'sbanken' | ||
| showTabs: true | ||
| tabs: | ||
| - title: Info | ||
| key: /info | ||
| - title: Demos | ||
| key: /demos | ||
| breadcrumb: | ||
| - text: Layout | ||
| href: /uilib/components/layout/ | ||
| --- | ||
|
|
||
| import LayoutInfo from 'Docs/uilib/components/layout/info' | ||
| import LayoutDemos from 'Docs/uilib/components/layout/demos' | ||
|
|
||
| <LayoutInfo /> | ||
| <LayoutDemos /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
31 changes: 31 additions & 0 deletions
31
packages/dnb-design-system-portal/src/docs/uilib/components/layout/Card/Examples.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import { Layout } from '@dnb/eufemia/src' | ||
| import ComponentBox from '../../../../../shared/tags/ComponentBox' | ||
| import { Field } from '@dnb/eufemia/src/extensions/forms' | ||
|
|
||
| export const Default = () => { | ||
| return ( | ||
| <ComponentBox> | ||
| <Layout.Card> | ||
| Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi | ||
| cursus pharetra elit in bibendum. | ||
| <br /> | ||
| <br /> | ||
| Praesent nunc ipsum, convallis eget convallis gravida, vehicula | ||
| vitae metus.. | ||
| </Layout.Card> | ||
| </ComponentBox> | ||
| ) | ||
| } | ||
|
|
||
| export const VerticalFields = () => { | ||
| return ( | ||
| <ComponentBox scope={{ Field }}> | ||
| <Layout.Card> | ||
| <Layout.Vertical> | ||
| <Field.String label="Label" value="Value" /> | ||
| <Field.String label="Label" value="Value" /> | ||
| </Layout.Vertical> | ||
| </Layout.Card> | ||
| </ComponentBox> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
101 changes: 101 additions & 0 deletions
101
packages/dnb-design-system-portal/src/docs/uilib/components/layout/Examples.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,101 @@ | ||
| import ComponentBox from '../../../../shared/tags/ComponentBox' | ||
| import { Layout } from '@dnb/eufemia/src' | ||
| import { TestElement, Field } from '@dnb/eufemia/src/extensions/forms' | ||
| import { defaultBreakpoints } from '@dnb/eufemia/src/shared/MediaQueryUtils' | ||
| import { defaultQueries } from '@dnb/eufemia/src/shared/useMedia' | ||
| import styled from '@emotion/styled' | ||
|
|
||
| export const colors = [ | ||
| { background: '#babeee' } as React.CSSProperties, | ||
| { background: '#dfe0ee' } as React.CSSProperties, | ||
| { background: '#90d2c3' } as React.CSSProperties, | ||
| { background: '#ecf4be' } as React.CSSProperties, | ||
| ] | ||
|
|
||
| export const HorizontalWithResponsiveFlexItem = () => { | ||
| return ( | ||
| <ComponentBox scope={{ colors, TestElement, Field }}> | ||
| <Layout.FlexContainer direction="horizontal" wrap> | ||
| <Layout.FlexItem size={8}> | ||
| <TestElement style={colors[0]}>FlexItem (8)</TestElement> | ||
| </Layout.FlexItem> | ||
| <Layout.FlexItem size={4}> | ||
| <TestElement style={colors[1]}>FlexItem (4)</TestElement> | ||
| </Layout.FlexItem> | ||
| <Layout.FlexItem size={{ small: 12, medium: 4 }}> | ||
| <TestElement style={colors[2]}> | ||
| FlexItem (small: 8, medium: 4) | ||
| </TestElement> | ||
| </Layout.FlexItem> | ||
| <Layout.FlexItem size={{ small: 12, medium: 8 }}> | ||
| <TestElement style={colors[3]}> | ||
| FlexItem (small: 4, medium: 8) | ||
| </TestElement> | ||
| </Layout.FlexItem> | ||
| </Layout.FlexContainer> | ||
| </ComponentBox> | ||
| ) | ||
| } | ||
|
|
||
| export const HorizontalWithResponsiveFlexItemCustomColumns = () => { | ||
| return ( | ||
| <ComponentBox | ||
| scope={{ | ||
| colors, | ||
| TestElement, | ||
| Field, | ||
| defaultBreakpoints, | ||
| defaultQueries, | ||
| }} | ||
| > | ||
| {() => { | ||
| const breakpoints = { | ||
| ...defaultBreakpoints, | ||
| xsmall: '30em', | ||
| } | ||
|
|
||
| const queries = { | ||
| ...defaultQueries, | ||
| xsmall: { min: 0, max: 'xsmall' }, | ||
| small: { min: 'xsmall', max: 'small' }, | ||
| } | ||
|
|
||
| const CustomMediaQuery = styled.div` | ||
| .dnb-layout__flex-container[data-media-key='xsmall'] | ||
| .dnb-layout__flex-item--responsive { | ||
| --size: var(--xsmall); | ||
| } | ||
| ` | ||
|
|
||
| return ( | ||
| <CustomMediaQuery> | ||
| <Layout.FlexContainer | ||
| direction="horizontal" | ||
| wrap | ||
| columns={4} | ||
| breakpoints={breakpoints} | ||
| queries={queries} | ||
| > | ||
| <Layout.FlexItem size={{ small: 2, medium: 3, large: 1 }}> | ||
| <TestElement style={colors[0]}>FlexItem</TestElement> | ||
| </Layout.FlexItem> | ||
| <Layout.FlexItem size={{ small: 2, medium: 1, large: 2 }}> | ||
| <TestElement style={colors[1]}>FlexItem</TestElement> | ||
| </Layout.FlexItem> | ||
| <Layout.FlexItem | ||
| size={{ xsmall: 4, small: 2, medium: 1, large: 1 }} | ||
| > | ||
| <TestElement style={colors[2]}>FlexItem</TestElement> | ||
| </Layout.FlexItem> | ||
| <Layout.FlexItem | ||
| size={{ xsmall: 4, small: 2, medium: 3, large: 4 }} | ||
| > | ||
| <TestElement style={colors[3]}>FlexItem</TestElement> | ||
| </Layout.FlexItem> | ||
| </Layout.FlexContainer> | ||
| </CustomMediaQuery> | ||
| ) | ||
| }} | ||
| </ComponentBox> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.