Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(Section): fix spacing + rewrite to TypeScript #1573

Merged
merged 1 commit into from
Sep 21, 2022
Merged

fix(Section): fix spacing + rewrite to TypeScript #1573

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 13 additions & 13 deletions packages/dnb-design-system-portal/src/docs/uilib/components/section/Examples.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ export const SectionDemo = () => (
{
/* jsx */ `
<Section>
<P>Visual DNB Section: <Anchor href="#">default</Anchor></P>
<P space={0}>Visual DNB Section: <Anchor href="#">default</Anchor></P>
</Section>
`
}
Expand All @@ -22,7 +22,7 @@ export const SectionDemoSpacing = () => (
<ComponentBox hideCode data-visual-test="section-spacing">
{
/* jsx */ `
<Section spacing="large">
<Section spacing>
<P space={0}>Visual DNB Section: <Anchor href="#">default with spacing</Anchor></P>
</Section>
`
Expand All @@ -34,7 +34,7 @@ export const SectionDemoWhite = () => (
<ComponentBox hideCode data-visual-test="section-white">
{
/* jsx */ `
<Section spacing="true" style_type="white">
<Section spacing="large" style_type="white">
<P space={0}>Visual DNB Section: <Anchor href="#">white</Anchor></P>
</Section>
`
Expand All @@ -46,7 +46,7 @@ export const SectionDemoDivider = () => (
<ComponentBox hideCode data-visual-test="section-divider">
{
/* jsx */ `
<Section spacing="true" style_type="divider">
<Section spacing="medium" style_type="divider">
<P space={0}>Visual DNB Section: <Anchor href="#">divider</Anchor></P>
</Section>
`
Expand All @@ -58,7 +58,7 @@ export const SectionDemoMintGreen = () => (
<ComponentBox hideCode data-visual-test="section-mint-green">
{
/* jsx */ `
<Section spacing="true" style_type="mint-green">
<Section spacing="small" style_type="mint-green">
<P space={0}>Visual DNB Section: <Anchor href="#">mint-green</Anchor></P>
</Section>
`
Expand All @@ -70,7 +70,7 @@ export const SectionDemoSeaGreen = () => (
<ComponentBox hideCode data-visual-test="section-sea-green">
{
/* jsx */ `
<Section spacing="true" style_type="sea-green">
<Section spacing="large" style_type="sea-green">
<P space={0}>Visual DNB Section: <Anchor href="#">sea-green</Anchor></P>
</Section>
`
Expand All @@ -82,7 +82,7 @@ export const SectionDemoEmeraldGreen = () => (
<ComponentBox hideCode data-visual-test="section-emerald-green">
{
/* jsx */ `
<Section spacing="true" style_type="emerald-green">
<Section spacing="medium" style_type="emerald-green">
<P space={0}>Visual DNB Section: <Anchor href="#">emerald-green</Anchor></P>
</Section>
`
Expand All @@ -94,7 +94,7 @@ export const SectionDemoLavender = () => (
<ComponentBox data-visual-test="section-lavender">
{
/* jsx */ `
<Section spacing="true" style_type="lavender">
<Section spacing="small" style_type="lavender">
<P space={0}>Visual DNB Section: <Anchor href="#">lavender</Anchor></P>
</Section>
`
Expand All @@ -106,7 +106,7 @@ export const SectionDemoBlack3 = () => (
<ComponentBox data-visual-test="section-black-3">
{
/* jsx */ `
<Section spacing="true" style_type="black-3">
<Section spacing style_type="black-3">
<P space={0}>Visual DNB Section: <Anchor href="#">black-3</Anchor></P>
</Section>
`
Expand All @@ -118,7 +118,7 @@ export const SectionDemoSandYellow = () => (
<ComponentBox data-visual-test="section-sand-yellow">
{
/* jsx */ `
<Section spacing="true" style_type="sand-yellow">
<Section spacing style_type="sand-yellow">
<P space={0}>Visual DNB Section: <Anchor href="#">sand-yellow</Anchor></P>
</Section>
`
Expand All @@ -130,7 +130,7 @@ export const SectionDemoPistachio = () => (
<ComponentBox data-visual-test="section-pistachio">
{
/* jsx */ `
<Section spacing="true" style_type="pistachio">
<Section spacing style_type="pistachio">
<P space={0}>Visual DNB Section: <Anchor href="#">pistachio</Anchor></P>
</Section>
`
Expand All @@ -142,7 +142,7 @@ export const SectionDemoFireRed = () => (
<ComponentBox data-visual-test="section-fire-red">
{
/* jsx */ `
<Section spacing="true" style_type="fire-red">
<Section spacing style_type="fire-red">
<P space={0}>Visual DNB Section: <Anchor href="#">fire-red</Anchor></P>
</Section>
`
Expand All @@ -154,7 +154,7 @@ export const SectionDemoFireRed8 = () => (
<ComponentBox data-visual-test="section-fire-red-8">
{
/* jsx */ `
<Section spacing="true" style_type="fire-red-8">
<Section spacing style_type="fire-red-8">
<P space={0}>Visual DNB Section: <Anchor href="#">fire-red-8</Anchor></P>
</Section>
`
Expand Down
13 changes: 7 additions & 6 deletions packages/dnb-design-system-portal/src/docs/uilib/components/section/properties.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,13 @@ showTabs: true

## Properties

| Properties | Description |
| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `style_type` | _(optional)_ to define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`. |
| `spacing` | _(optional)_ will add the default spacing around the wrapped content. Use `spacing-large`, `spacing-medium` or `spacing-small`. Defaults to `false`. If `true`, then `spacing-default` is used. Se the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). |
| `element` | _(optional)_ define what HTML element should be used. Defaults to `<section>`. |
| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |
| Properties | Description |
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `style_type` | _(optional)_ to define the style of the visual helper. Use and `Style ID` from below. Defaults to `mint-green-12`. |
| `spacing` | _(optional)_ will add the default spacing around the wrapped content. Use `large`, `medium` or `small`. Defaults to `false`. If `true`, then `large` is used. Se the [available sizes](/uilib/usage/layout/spacing#spacing-helpers). |
| `element` | _(optional)_ define what HTML element should be used. Defaults to `<section>`. |
| `inner_ref` | _(optional)_ by providing a React Ref we can get the internally used element (DOM). E.g. `inner_ref={myRef}` by using `React.createRef()` or `React.useRef()`. |
| [Space](/uilib/components/space/properties) | _(optional)_ spacing properties like `top` or `bottom` are supported. |

## Styles

Expand Down
6 changes: 3 additions & 3 deletions packages/dnb-design-system-portal/src/docs/uilib/components/step-indicator/info.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ If you are able to provide the `data` to the Sidebar as well, it will use it dur

The mode property is mandatory. It tells the component how it should behave.

- [`strict`](/uilib/components/step-indicator#strict-mode)
- [`loose`](/uilib/components/step-indicator#loose-mode)
- [`static`](/uilib/components/step-indicator#static-mode)
- [strict](/uilib/components/step-indicator#strict-mode)
- [loose](/uilib/components/step-indicator#loose-mode)
- [static](/uilib/components/step-indicator#static-mode)

### Strict mode

Expand Down
6 changes: 3 additions & 3 deletions packages/dnb-eufemia/src/components/breadcrumb/Breadcrumb.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import classnames from 'classnames'
// Components
import { createSkeletonClass } from '../skeleton/SkeletonHelper'
import { createSpacingClasses } from '../space/SpacingHelper'
import Section from '../section/Section'
import Section, { SectionStyleTypes } from '../section/Section'
import Button from '../button/Button'

// Shared
Expand Down Expand Up @@ -99,13 +99,13 @@ export interface BreadcrumbProps {
* Use one of the Section component style types (style_type)
* Default: transparent
*/
styleType?: string
styleType?: SectionStyleTypes

/**
* Use one of the Section component style types (style_type)
* Default: pistachio
*/
collapsedStyleType?: string
collapsedStyleType?: SectionStyleTypes

/**
* Spacing around the breadcrumb
Expand Down
7 changes: 0 additions & 7 deletions packages/dnb-eufemia/src/components/dialog/__tests__/__snapshots__/Dialog.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -918,9 +918,7 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
className="dnb-dialog__navigation"
>
<Section
class={null}
className="dnb-modal__header__bar dnb-dialog__navigation"
element="section"
inner_ref={
Object {
"current": <section
Expand Down Expand Up @@ -974,7 +972,6 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
</section>,
}
}
spacing={null}
style_type="white"
>
<section
Expand Down Expand Up @@ -1166,12 +1163,8 @@ exports[`Dialog component snapshot should match component snapshot 1`] = `
title_class="dnb-dialog__title"
>
<Section
class={null}
className="dnb-dialog__header"
element="section"
id="dnb-modal-dialog_id-title"
inner_ref={null}
spacing={null}
style_type="white"
>
<section
Expand Down
3 changes: 2 additions & 1 deletion packages/dnb-eufemia/src/components/dialog/parts/DialogBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import classnames from 'classnames'
import ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'
import { SectionStyleTypes } from '../../Section'

interface DialogBodyProps extends ModalInnerProps {
/**
Expand All @@ -11,7 +12,7 @@ interface DialogBodyProps extends ModalInnerProps {
/**
* Color/Style of the dialog body
*/
styleType?: string
styleType?: SectionStyleTypes
}

export default function DialogBody({
Expand Down
7 changes: 0 additions & 7 deletions packages/dnb-eufemia/src/components/drawer/__tests__/__snapshots__/Drawer.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -935,9 +935,7 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
shadow_class="dnb-drawer__navigation--sticky"
>
<Section
class={null}
className="dnb-modal__header__bar dnb-drawer__navigation"
element="section"
inner_ref={
Object {
"current": <section
Expand Down Expand Up @@ -991,7 +989,6 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
</section>,
}
}
spacing={null}
style_type="white"
>
<section
Expand Down Expand Up @@ -1182,12 +1179,8 @@ exports[`Drawer component snapshot should match component snapshot 1`] = `
title_class="dnb-drawer__title"
>
<Section
class={null}
className="dnb-drawer__header"
element="section"
id="dnb-modal-drawer_id-title"
inner_ref={null}
spacing={null}
style_type="white"
>
<section
Expand Down
3 changes: 2 additions & 1 deletion packages/dnb-eufemia/src/components/drawer/parts/DrawerBody.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import React from 'react'
import classnames from 'classnames'
import ModalInner, { ModalInnerProps } from '../../modal/parts/ModalInner'
import { SectionStyleTypes } from '../../Section'

interface DrawerBodyProps extends ModalInnerProps {
/**
Expand All @@ -11,7 +12,7 @@ interface DrawerBodyProps extends ModalInnerProps {
/**
* Color/Style of the drawer body
*/
styleType?: string
styleType?: SectionStyleTypes
}

export default function DrawerBody({
Expand Down
16 changes: 8 additions & 8 deletions packages/dnb-eufemia/src/components/form-row/FormRow.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ import AlignmentHelper from '../../shared/AlignmentHelper'

import Context from '../../shared/Context'
import FormLabel from '../form-label/FormLabel'
import Section from '../section/Section'
import {
spacingPropTypes,
createSpacingClasses,
Expand Down Expand Up @@ -216,12 +217,6 @@ export default class FormRow extends React.PureComponent {
`dnb-form-row__indent--${isTrue(indent) ? 'default' : indent}`,
centered && 'dnb-form-row--centered',
isNested && 'dnb-form-row--nested',
section_style ? `dnb-section dnb-section--${section_style}` : null,
section_spacing
? `dnb-section--spacing-${
isTrue(section_spacing) ? 'default' : section_spacing
}`
: null,
createSpacingClasses(props),
className,
_className
Expand Down Expand Up @@ -261,7 +256,12 @@ export default class FormRow extends React.PureComponent {
return (
<Context.Provider value={providerContext}>
<Fieldset useFieldset={useFieldset}>
<div {...params}>
<Section
style_type={section_style || 'transparent'}
spacing={section_spacing}
element="div"
{...params}
>
<AlignmentHelper />

{label && (
Expand Down Expand Up @@ -302,7 +302,7 @@ export default class FormRow extends React.PureComponent {
{children}
</div>
)}
</div>
</Section>
</Fieldset>
</Context.Provider>
)
Expand Down
6 changes: 4 additions & 2 deletions packages/dnb-eufemia/src/components/form-row/__tests__/FormRow.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,14 +34,16 @@ describe('FormRow component', () => {
it('should have vertical direction class', () => {
const Comp = mount(<Component {...props} direction="vertical" />)
expect(
Comp.find('.dnb-form-row').hasClass('dnb-form-row--vertical')
Comp.find('.dnb-form-row').last().hasClass('dnb-form-row--vertical')
).toBe(true)
})

it('should have correct indent class', () => {
const Comp = mount(<Component {...props} indent="large" />)
expect(
Comp.find('.dnb-form-row').hasClass('dnb-form-row__indent--large')
Comp.find('.dnb-form-row')
.last()
.hasClass('dnb-form-row__indent--large')
).toBe(true)
})

Expand Down
Loading