+
+
+
+## [Elements](!/uilib/elements)
+
+Elements are basicity ready to use styled HTML elements.
+
+
+
+## [Patterns](!/uilib/patterns)
+
+Patterns are larger components, less strictly defined, but with a more flexible outcome.
---
-[Next - Usage of Components and Patterns](/uilib/intro/11-usage-of-components-elements?fullscreen)
+Dynamic content alert message
+
+Section
+ ... +Article
+ ... +{''}
- I'm a {``}
in an Article, and have the defualt
+ I'm a {``}
in an Article, and have the default
spacing!
diff --git a/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md b/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md
index e301a5a3afc..e4e298529ac 100644
--- a/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md
+++ b/packages/dnb-design-system-portal/src/pages/uilib/usage/layout.md
@@ -10,7 +10,9 @@ To not overcomplicate the Eufemia - and limit the creativity and possibilities,
## Spacing
-Eufemia has a [Spatial System](/quickguide-designer/spatial-system) with a grid of **8px**. This is simply a guide grid which helps with making design decisions about the sizes of components, elements, margins, paddings etc.
+Eufemia has a [Spatial System](/quickguide-designer/spatial-system) with a grid of **8px** (0.5rem). This is simply a guide grid which helps with making design decisions about the sizes of components, elements, margins, paddings etc.
+
+
### Responsiveness
diff --git a/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js b/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js
index 08b5c054ec2..77a7b4295ab 100644
--- a/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js
+++ b/packages/dnb-design-system-portal/src/shared/menu/MainMenu.js
@@ -186,6 +186,7 @@ export default class MainMenu extends PureComponent {
static defaultProps = {
enableOverlay: false
}
+ static contextType = MainMenuContext
constructor(props) {
super(props)
setPageFocusElement('.close-button', 'mainmenu')
@@ -196,7 +197,6 @@ export default class MainMenu extends PureComponent {
}
}
componentWillUnmount() {
- this.closeMenuHandler = null
if (typeof document !== 'undefined') {
document.removeEventListener('keydown', this.onKeyDownHandler)
}
@@ -204,112 +204,103 @@ export default class MainMenu extends PureComponent {
onKeyDownHandler = e => {
switch (keycode(e)) {
case 'esc':
- if (this.closeMenuHandler) {
- this.closeMenuHandler()
+ if (this.context.isOpen) {
+ this.context.closeMenu()
}
break
}
}
+
render() {
+ const { closeMenu, isOpen, isClosing, isActive } = this.context
const { enableOverlay } = this.props
return (
-
- {({ closeMenu, isOpen, isClosing, isActive }) => {
- this.closeMenuHandler = isOpen ? closeMenu : null
- return (
- (isActive || !enableOverlay) && (
-
+ {
+ <>
+
+ {isOpen && !isClosing && (
+
+ )}
+
+ )) ||
+ (!enableOverlay && (
+
+
+ ))}
+
- {
- <>
-
- {isOpen && !isClosing && (
-
- )}
-
- )) ||
- (!enableOverlay && (
-
-
- ))}
-
-
- Change log, contact, etc.
-
- Updated: {buildVersion}
-
-
- }
- icon={DesignSystemSvg}
- />
-
-
- }
-
- )
- )
- }}
-
+
+ Change log, contact, etc.
+
+ Updated: {buildVersion}
+
+
+ }
+ icon={DesignSystemSvg}
+ />
+
- {({ isOpen, isClosing, toggleMenu }) => {
- this.isOpen = isOpen
- this.toggleMenu = toggleMenu
- if (isOpen && !isClosing) {
- setTimeout(() => {
- this.scrollToActiveItem()
- applyPageFocus('sidebar')
- }, 300) // after animation is done
- } else if (isClosing) {
- setTimeout(() => {
- applyPageFocus('content')
- }, 300) // after animation is done - to make sure we can get the focus on h1
- }
- return (
-
- {nav}
- {isOpen && (
-
- )
- }}
-
+
+ {nav}
+ {isOpen && (
+
)
}}
diff --git a/packages/dnb-design-system-portal/src/shared/parts/Link.js b/packages/dnb-design-system-portal/src/shared/parts/Link.js
index 6e6a911f22f..f208a4cc00e 100644
--- a/packages/dnb-design-system-portal/src/shared/parts/Link.js
+++ b/packages/dnb-design-system-portal/src/shared/parts/Link.js
@@ -9,12 +9,16 @@ import PropTypes from 'prop-types'
import isAbsoluteUrl from 'is-absolute-url'
/* eslint-disable jsx-a11y/anchor-has-content */
-const Link = ({ to, ...props }) =>
- isAbsoluteUrl(to) ? (
+const Link = ({ to, ...props }) => {
+ if (!/^\//.test(to)) {
+ to = `/${to}`
+ }
+ return isAbsoluteUrl(to) ? (
) : (
- {children}
+ {children}
)
}
@@ -49,6 +51,29 @@ Intro.propTypes = {
}
Intro.defaultProps = {}
+export const IntroFooter = ({ href, text }) => (
+
+)
+IntroFooter.propTypes = {
+ href: PropTypes.string.isRequired,
+ text: PropTypes.string.isRequired
+}
+IntroFooter.defaultProps = {}
+
+const Footer = styled.div`
+ display: flex;
+ justify-content: space-between;
+`
+
const Wrapper = styled.div`
margin: 10vh 10vw;
diff --git a/packages/dnb-design-system-portal/src/shared/tags/index.js b/packages/dnb-design-system-portal/src/shared/tags/index.js
index 7fa9a9b03d8..af0cf785f09 100644
--- a/packages/dnb-design-system-portal/src/shared/tags/index.js
+++ b/packages/dnb-design-system-portal/src/shared/tags/index.js
@@ -8,11 +8,12 @@ import Table from './Table'
// import Img from './Img'
import Tag from './Tag'
import Anchor from './Anchor'
-import Intro from './Intro'
+import Intro, { IntroFooter } from './Intro'
import Header from './AutoLinkHeader'
export default {
Intro,
+ IntroFooter,
// Img,
// img: Img
h1: props => {
})
it('have to match checkbox in error state', async () => {
const screenshot = await testPageScreenshot({
- selector: '[data-dnb-test="checkbox-error"] .dnb-checkbox'
+ selector: '[data-dnb-test="checkbox-error"] span:first-of-type'
})
expect(screenshot).toMatchImageSnapshot()
})
diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
index 53efe8e183a..4b26221f9a5 100644
--- a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
+++ b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap
@@ -12,6 +12,7 @@ exports[`Checkbox component have to match snapshot 1`] = `
disabled="disabled"
id="id"
label="label"
+ label_position="label_position"
on_change={[Function]}
on_state_update={[Function]}
readOnly={false}
@@ -21,72 +22,76 @@ exports[`Checkbox component have to match snapshot 1`] = `
title="title"
value="value"
>
-
-
-
-
-
-
+ htmlFor="id"
+ id="id-label"
+ >
+ label
+
+
+
-
-
-
-
-
+
+
+
+
+
@@ -106,6 +111,14 @@ exports[`Checkbox scss have to match default theme snapshot 1`] = `
* Utilities
*/
.dnb-checkbox {
+ /*
+ * When checkbox is OFF
+ * aka when the checkbox is not :checked
+ */
+ /*
+ * When checkbox is ON
+ * aka when the checkbox is :checked
+ */
/*
* When checkboxed OFF
* aka when the checkbox is not :checked
@@ -138,6 +151,16 @@ exports[`Checkbox scss have to match default theme snapshot 1`] = `
* On error state
*
*/ }
+ .dnb-checkbox__input {
+ opacity: 0; }
+ .dnb-checkbox__gfx {
+ transition: opacity 200ms ease-out, transform 200ms ease-out; }
+ .dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__gfx {
+ opacity: 0;
+ transform: scale(0.8); }
+ .dnb-checkbox__input:checked ~ .dnb-checkbox__gfx {
+ opacity: 1;
+ transform: scale(1); }
.dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__button {
background-color: var(--color-white);
border-color: var(--color-sea-green-alt); }
@@ -262,8 +285,7 @@ exports[`Checkbox scss have to match snapshot 1`] = `
vertical-align: baseline;
cursor: pointer;
color: inherit;
- width: auto;
- white-space: nowrap; }
+ width: auto; }
.dnb-form-label--vertical {
margin-right: 0;
margin-top: 0; }
@@ -408,15 +430,7 @@ exports[`Checkbox scss have to match snapshot 1`] = `
width: auto;
margin: 0;
padding: 0;
- color: var(--color-white);
- /*
- * When checkbox is OFF
- * aka when the checkbox is not :checked
- */
- /*
- * When checkbox is ON
- * aka when the checkbox is :checked
- */ }
+ color: var(--color-white); }
.dnb-checkbox__shell {
position: relative;
display: flex;
@@ -446,17 +460,9 @@ exports[`Checkbox scss have to match snapshot 1`] = `
position: absolute;
width: var(--checkbox-height);
height: var(--checkbox-height);
- transition: opacity 200ms ease-out, transform 200ms ease-out;
fill: currentColor;
shape-rendering: geometricPrecision; }
- .dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__gfx {
- opacity: 0;
- transform: scale(0.8); }
- .dnb-checkbox__input:checked ~ .dnb-checkbox__gfx {
- opacity: 1;
- transform: scale(1); }
.dnb-checkbox__input {
- opacity: 0;
position: absolute;
top: 0;
left: 0;
@@ -468,7 +474,34 @@ exports[`Checkbox scss have to match snapshot 1`] = `
border: 0; }
.dnb-checkbox__input:not([disabled]) {
cursor: pointer; }
- .dnb-checkbox > .dnb-form-status {
- margin-top: 0.125rem; }
+ .dnb-checkbox--label-position-left, .dnb-checkbox--label-position-right {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: flex-start;
+ flex-wrap: wrap; }
+ .dnb-checkbox--label-position-left .dnb-form-label, .dnb-checkbox--label-position-right .dnb-form-label {
+ flex: 1 1 33%; }
+ .dnb-checkbox--label-position-left .dnb-form-status, .dnb-checkbox--label-position-right .dnb-form-status {
+ order: 3;
+ flex: 1 1 1;
+ margin-top: 0.125rem; }
+ .dnb-checkbox--label-position-left .dnb-checkbox {
+ order: 2; }
+ .dnb-checkbox--label-position-left label {
+ order: 1; }
+ .dnb-checkbox--label-position-left .dnb-form-label {
+ flex: 0 1 auto;
+ margin-left: 0;
+ margin-right: 0.5rem; }
+ .dnb-checkbox--label-position-right .dnb-checkbox {
+ order: 1; }
+ .dnb-checkbox--label-position-right label {
+ order: 2; }
+ .dnb-checkbox--label-position-right .dnb-form-label {
+ margin-right: 0;
+ margin-left: 0.5rem; }
+ .dnb-form-label ~ .dnb-checkbox--label-position-left,
+ .dnb-form-label ~ .dnb-checkbox--label-position-right {
+ display: inline; }
"
`;
diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-error-state-1-e6684.snap.png b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-error-state-1-e6684.snap.png
index 3a6ad5d0b41..6381e2893c5 100644
Binary files a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-error-state-1-e6684.snap.png and b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-error-state-1-e6684.snap.png differ
diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss b/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
index 69331cf1a04..afcb9dda2b1 100644
--- a/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
+++ b/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss
@@ -68,32 +68,11 @@
width: var(--checkbox-height);
height: var(--checkbox-height);
- transition: opacity 200ms ease-out, transform 200ms ease-out;
fill: currentColor;
shape-rendering: geometricPrecision;
}
- /*
- * When checkbox is OFF
- * aka when the checkbox is not :checked
- */
- &__input:not(:checked) ~ &__gfx {
- opacity: 0;
- transform: scale(0.8);
- }
-
- /*
- * When checkbox is ON
- * aka when the checkbox is :checked
- */
- &__input:checked ~ &__gfx {
- opacity: 1;
- transform: scale(1);
- }
-
&__input {
- opacity: 0;
-
position: absolute;
top: 0;
left: 0;
@@ -112,7 +91,54 @@
cursor: pointer;
}
- > .dnb-form-status {
- margin-top: 0.125rem;
+ &--label-position-left,
+ &--label-position-right {
+ display: inline-flex;
+ flex-direction: row;
+ align-items: flex-start;
+ flex-wrap: wrap;
+
+ .dnb-form-label {
+ flex: 1 1 33%;
+ }
+ .dnb-form-status {
+ order: 3;
+ flex: 1 1 1;
+ margin-top: 0.125rem;
+ }
+ }
+
+ &--label-position-left {
+ .dnb-checkbox {
+ order: 2;
+ }
+ label {
+ order: 1;
+ }
+ .dnb-form-label {
+ flex: 0 1 auto;
+ margin-left: 0;
+ margin-right: 0.5rem;
+ }
+ }
+
+ &--label-position-right {
+ .dnb-checkbox {
+ order: 1;
+ }
+ label {
+ order: 2;
+ }
+ .dnb-form-label {
+ margin-right: 0;
+ margin-left: 0.5rem;
+ }
+ }
+
+ // in case we don't define a wrapping group
+ // and have a custom label component before the radio (and not inside)
+ .dnb-form-label ~ &--label-position-left,
+ .dnb-form-label ~ &--label-position-right {
+ display: inline;
}
}
diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss b/packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss
index 2dad6ffc9da..7a2068520e3 100644
--- a/packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss
+++ b/packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss
@@ -6,6 +6,31 @@
@import '../../../../style/themes/imports.scss';
.dnb-checkbox {
+ &__input {
+ opacity: 0;
+ }
+ &__gfx {
+ transition: opacity 200ms ease-out, transform 200ms ease-out;
+ }
+
+ /*
+ * When checkbox is OFF
+ * aka when the checkbox is not :checked
+ */
+ &__input:not(:checked) ~ &__gfx {
+ opacity: 0;
+ transform: scale(0.8);
+ }
+
+ /*
+ * When checkbox is ON
+ * aka when the checkbox is :checked
+ */
+ &__input:checked ~ &__gfx {
+ opacity: 1;
+ transform: scale(1);
+ }
+
/*
* When checkboxed OFF
* aka when the checkbox is not :checked
diff --git a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
index 3b7e65b7ad4..e989978edc4 100644
--- a/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
+++ b/packages/dnb-ui-lib/src/components/date-picker/DatePicker.js
@@ -295,6 +295,7 @@ export default class DatePicker extends PureComponent {
}
}
document.addEventListener('mousedown', this.handleClickOutside)
+ document.addEventListener('touchstart', this.handleClickOutside)
this.keydownCallback = event => {
const keyCode = keycode(event)
@@ -325,6 +326,7 @@ export default class DatePicker extends PureComponent {
removeOutsideClickHandler() {
if (this.handleClickOutside && typeof document !== 'undefined') {
document.removeEventListener('mousedown', this.handleClickOutside)
+ document.removeEventListener('touchstart', this.handleClickOutside)
this.handleClickOutside = null
}
if (this.keydownCallback) {
@@ -591,6 +593,8 @@ export default class DatePicker extends PureComponent {
opened && 'dnb-date-picker--opened',
hidden && 'dnb-date-picker--hidden',
showInput && 'dnb-date-picker--show-input',
+ showStatus && 'dnb-date-picker__form-status',
+ status && `dnb-date-picker__status--${status_state}`,
(isTrue(show_submit_button) || isTrue(show_cancel_button)) &&
'dnb-date-picker--show-footer'
@@ -608,17 +612,22 @@ export default class DatePicker extends PureComponent {
maskOrder={mask_order}
maskPlaceholder={mask_placeholder}
range={isTrue(range)}
- onChange={this.onInputChange}
- onFocus={this.showPicker}
- onSubmit={this.togglePicker}
startDate={startDate}
endDate={endDate}
minDate={minDate}
maxDate={maxDate}
showInput={showInput}
- onSubmitButtonFocus={this.onSubmitButtonFocus}
+ opened={opened}
+ status={status ? 'error' : null}
+ status_state={status_state}
+ // status_animation={status_animation}
{...inputParams}
+ onChange={this.onInputChange}
+ onFocus={this.showPicker}
+ onSubmit={this.togglePicker}
+ onSubmitButtonFocus={this.onSubmitButtonFocus}
/>
+
{showStatus && (