mirror of
https://github.com/navikt/aksel.git
synced 2026-10-16 02:32:02 +00:00
Compare commits
4
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 github-actions[bot]
|
f6c4f853af | ||
|
KenandAndreas Nordahl
|
9a2cd06452 | ||
|
Ken
|
40ae4d9a20 | ||
|
Ken
|
3e835fc76c |
No files matched your search
@@ -1,13 +0,0 @@
|
||||
.navds-checkbox-group--small > .navds-checkboxes {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-checkbox-group--medium > .navds-checkboxes {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-checkbox-group--medium > .navds-fieldset__error {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -1,146 +0,0 @@
|
||||
:root {
|
||||
--navds-checkbox-color-background: var(--navds-color-white);
|
||||
--navds-checkbox-color-border: var(--navds-color-gray-60);
|
||||
--navds-checkbox-color-label-hover: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-checkbox-color-description: var(--navds-color-gray-80);
|
||||
--navds-checkbox-color-border-checked: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-background-checked: var(--navds-color-blue-50);
|
||||
--navds-checkbox-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-checkbox-color-border-error: var(--navds-color-red-50);
|
||||
|
||||
/* Disabled */
|
||||
--navds-checkbox-color-label-disabled: var(--navds-color-gray-40);
|
||||
--navds-checkbox-color-border-disabled: var(--navds-color-gray-60);
|
||||
--navds-checkbox-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-checkbox-color-border-checked-disabled: var(--navds-color-gray-40);
|
||||
--navds-checkbox-color-background-checked-disabled: var(
|
||||
--navds-color-gray-40
|
||||
);
|
||||
}
|
||||
|
||||
.navds-checkbox {
|
||||
position: relative;
|
||||
padding: var(--navds-spacing-3) 0;
|
||||
}
|
||||
|
||||
.navds-checkbox__input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: -12px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox__label {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
gap: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-checkbox__description {
|
||||
padding-left: calc(48px - 12px);
|
||||
color: var(--navds-checkbox-color-description);
|
||||
}
|
||||
|
||||
.navds-checkbox--with-description {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox .navds-error-message {
|
||||
margin-top: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-checkbox--with-description .navds-error-message {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--with-error-message {
|
||||
padding-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-checkbox__label::before {
|
||||
content: "";
|
||||
background-color: var(--navds-checkbox-color-background);
|
||||
border: 1px solid var(--navds-checkbox-color-border);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small {
|
||||
padding: var(--navds-spacing-1) 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__label::before {
|
||||
margin-top: -2px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover + .navds-checkbox__label {
|
||||
color: var(--navds-checkbox-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover + .navds-checkbox__label::before {
|
||||
border-color: var(--navds-checkbox-color-border-hover);
|
||||
background-color: var(--navds-checkbox-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked + .navds-checkbox__label::before {
|
||||
background-image: var(--navds-checkmark-image-white);
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 75%;
|
||||
border: 2px solid var(--navds-checkbox-color-border-checked);
|
||||
background-color: var(--navds-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
background-color: white;
|
||||
background-image: var(--navds-checkmark-image-blue);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:not(:hover):not(:focus):not(:disabled):not(:checked)
|
||||
+ .navds-checkbox__label::before {
|
||||
box-shadow: 0 0 0 1px var(--navds-checkbox-color-shadow-error);
|
||||
border-color: var(--navds-checkbox-color-border-error);
|
||||
}
|
||||
|
||||
.navds-checkbox--small .navds-error-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:disabled,
|
||||
.navds-checkbox__input:disabled + .navds-checkbox__label {
|
||||
color: var(--navds-checkbox-color-label-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:disabled + .navds-checkbox__label::before {
|
||||
background-color: var(--navds-checkbox-color-background-disabled);
|
||||
border-color: var(--navds-checkbox-color-border-disabled);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:disabled:checked + .navds-checkbox__label::before {
|
||||
background-color: var(--navds-checkbox-color-background-checked-disabled);
|
||||
border-color: var(--navds-checkbox-color-border-checked-disabled);
|
||||
}
|
||||
@@ -3,6 +3,11 @@
|
||||
}
|
||||
|
||||
.navds-error-message {
|
||||
display: block;
|
||||
color: var(--navds-error-message-color-text);
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-error-message::before {
|
||||
content: "•";
|
||||
}
|
||||
@@ -6,14 +6,19 @@
|
||||
}
|
||||
|
||||
.navds-fieldset > :not(:first-child):not(:empty) {
|
||||
margin-top: 8px;
|
||||
margin-top: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-fieldset--small > :not(:first-child):not(:empty) {
|
||||
margin-top: 4px;
|
||||
.navds-fieldset > .navds-fieldset__description:not(:empty) {
|
||||
margin-top: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
/* Applied when hideLegend is applied to fieldset */
|
||||
.navds-fieldset > .sr-only + :not(:first-child):not(:empty) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset:disabled > .navds-fieldset__legend,
|
||||
.navds-fieldset:disabled > .navds-fieldset__description {
|
||||
opacity: 0.3;
|
||||
}
|
||||
@@ -1,11 +1,6 @@
|
||||
.navds-form-field > :not(:first-child):not(:empty),
|
||||
.navds-form-field > input:not(:first-child) {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.navds-form-field--small > :not(:first-child):not(:empty),
|
||||
.navds-form-field--small > input:not(:first-child) {
|
||||
margin-top: 4px;
|
||||
margin-top: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
/* Applied when hideLabel is applied to form-element */
|
||||
|
||||
@@ -4,12 +4,9 @@
|
||||
@import "fieldset.css";
|
||||
@import "form.css";
|
||||
@import "error-summary.css";
|
||||
@import "checkbox.css";
|
||||
@import "checkbox-group.css";
|
||||
@import "confirmation-panel.css";
|
||||
@import "error-message.css";
|
||||
@import "radio.css";
|
||||
@import "radio-group.css";
|
||||
@import "radio-checkbox.css";
|
||||
@import "select.css";
|
||||
@import "text-field.css";
|
||||
@import "textarea.css";
|
||||
|
||||
@@ -0,0 +1,168 @@
|
||||
:root {
|
||||
--navds-radio-checkbox-color-background: var(--navds-color-white);
|
||||
--navds-radio-checkbox-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-radio-checkbox-color-background-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-checkbox-color-shadow: var(--navds-color-gray-60);
|
||||
--navds-radio-checkbox-color-shadow-hover: var(--navds-color-blue-50);
|
||||
--navds-radio-checkbox-color-shadow-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-checkbox-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-radio-checkbox-color-label-hover: var(--navds-color-blue-50);
|
||||
}
|
||||
|
||||
.navds-checkbox,
|
||||
.navds-radio {
|
||||
position: relative;
|
||||
width: fit-content;
|
||||
}
|
||||
|
||||
.navds-checkbox__input,
|
||||
.navds-radio__input {
|
||||
position: absolute;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
top: 0;
|
||||
left: -12px;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-checkbox__label,
|
||||
.navds-radio__label {
|
||||
padding: var(--navds-spacing-3) 0;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
gap: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-checkbox__label::before,
|
||||
.navds-radio__label::before {
|
||||
content: "";
|
||||
background-color: var(--navds-radio-checkbox-color-background);
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
border-radius: 4px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.navds-radio__label::before {
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.navds-checkbox__content,
|
||||
.navds-radio__content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-checkbox__description,
|
||||
.navds-radio__description {
|
||||
color: var(--navds-color-text-primary);
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input,
|
||||
.navds-radio--small > .navds-radio__input {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
top: 0;
|
||||
left: -6px;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__label,
|
||||
.navds-radio--small > .navds-radio__label {
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__label::before,
|
||||
.navds-radio--small > .navds-radio__label::before {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:focus + .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked + .navds-checkbox__label::before {
|
||||
background-image: var(--navds-checkmark-image-white);
|
||||
background-position: 6px center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 13px;
|
||||
box-shadow: none;
|
||||
background-color: var(--navds-radio-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-checkbox--small
|
||||
> .navds-checkbox__input:checked
|
||||
+ .navds-checkbox__label::before {
|
||||
background-position: 4px center;
|
||||
}
|
||||
|
||||
.navds-checkbox__input:checked:focus + .navds-checkbox__label::before {
|
||||
box-shadow: inset 0 0 0 1px white, var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-radio__input:checked + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
|
||||
inset 0 0 0 4px #fff;
|
||||
background-color: var(--navds-radio-checkbox-color-background-checked);
|
||||
}
|
||||
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-checked),
|
||||
inset 0 0 0 4px #fff, var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled) + .navds-checkbox__label,
|
||||
.navds-radio__input:hover:not(:disabled) + .navds-radio__label {
|
||||
color: var(--navds-radio-checkbox-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:focus)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:focus)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-hover);
|
||||
background-color: var(--navds-radio-checkbox-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:not(:hover):not(:disabled):not(:checked)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:not(:hover):not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error);
|
||||
}
|
||||
|
||||
.navds-checkbox--error
|
||||
> .navds-checkbox__input:focus:not(:hover):not(:disabled):not(:checked)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:focus:not(:hover):not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: inset 0 0 0 2px var(--navds-radio-checkbox-color-shadow-error),
|
||||
var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-checkbox--disabled,
|
||||
.navds-radio--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-checkbox--disabled > .navds-checkbox__input,
|
||||
.navds-checkbox--disabled > .navds-checkbox__label,
|
||||
.navds-radio--disabled > .navds-radio__input,
|
||||
.navds-radio--disabled > .navds-radio__label {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
.navds-radio-group--small > .navds-radio-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-radio-group--medium > .navds-radio-buttons {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-fieldset.navds-radio-group--medium > .navds-fieldset__error {
|
||||
margin-top: 0;
|
||||
}
|
||||
@@ -1,150 +0,0 @@
|
||||
:root {
|
||||
--navds-radio-color-description: var(--navds-color-gray-80);
|
||||
--navds-radio-color-background: var(--navds-color-white);
|
||||
--navds-radio-color-border: var(--navds-color-gray-60);
|
||||
--navds-radio-color-label-hover: var(--navds-color-blue-50);
|
||||
--navds-radio-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-radio-color-background-hover: var(--navds-color-blue-10);
|
||||
--navds-radio-color-border-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-color-shadow-checked: var(--navds-color-blue-50);
|
||||
--navds-radio-color-shadow-checked-focus: var(--navds-color-blue-80);
|
||||
--navds-radio-color-shadow-background-checked-focus: var(--navds-color-white);
|
||||
--navds-radio-color-shadow-dot-checked-focus: var(--navds-color-blue-50);
|
||||
--navds-radio-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-radio-color-border-error: var(--navds-color-red-50);
|
||||
|
||||
/* Disabled */
|
||||
--navds-radio-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-radio-color-border-disabled: var(--navds-color-gray-60);
|
||||
--navds-radio-color-label-disabled: var(--navds-color-gray-40);
|
||||
--navds-radio-color-background-disabled-checked: var(--navds-color-gray-40);
|
||||
--navds-radio-color-border-disabled-checked: var(--navds-color-gray-40);
|
||||
--navds-radio-color-shadow-disabled-checked: var(--navds-color-gray-40);
|
||||
}
|
||||
|
||||
.navds-radio {
|
||||
position: relative;
|
||||
padding: var(--navds-spacing-3) 0;
|
||||
}
|
||||
|
||||
.navds-radio--with-description .navds-error-message {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navds-radio .navds-error-message {
|
||||
margin-top: var(--navds-spacing-3);
|
||||
}
|
||||
|
||||
.navds-radio__input {
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
left: -12px;
|
||||
margin: 0;
|
||||
opacity: 0;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.navds-radio__label {
|
||||
display: flex;
|
||||
width: fit-content;
|
||||
gap: 12px;
|
||||
min-width: 48px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.navds-radio__description {
|
||||
padding-left: calc(48px - 12px);
|
||||
color: var(--navds-radio-color-description);
|
||||
}
|
||||
|
||||
.navds-radio--with-description {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
.navds-radio--with-error-message {
|
||||
padding-bottom: var(--navds-spacing-2);
|
||||
}
|
||||
|
||||
.navds-radio__label::before {
|
||||
content: "";
|
||||
background-color: var(--navds-radio-color-background);
|
||||
border: 1px solid var(--navds-radio-color-border);
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.navds-radio--small {
|
||||
padding: var(--navds-spacing-1) 0;
|
||||
}
|
||||
|
||||
.navds-radio--small > .navds-radio__input {
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
top: 2px;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.navds-radio--small > .navds-radio__label::before {
|
||||
margin-top: -2px;
|
||||
margin-bottom: -2px;
|
||||
}
|
||||
|
||||
.navds-radio__input:hover + .navds-radio__label {
|
||||
color: var(--navds-radio-color-label-hover);
|
||||
}
|
||||
|
||||
.navds-radio__input:hover + .navds-radio__label::before {
|
||||
border-color: var(--navds-radio-color-border-hover);
|
||||
background-color: var(--navds-radio-color-background-hover);
|
||||
}
|
||||
|
||||
.navds-radio__input:focus + .navds-radio__label::before {
|
||||
box-shadow: var(--navds-shadow-focus);
|
||||
}
|
||||
|
||||
.navds-radio__input:checked + .navds-radio__label::before {
|
||||
border: 2px solid var(--navds-radio-color-border-checked);
|
||||
box-shadow: 0 0 0 3px #fff inset,
|
||||
0 0 0 2rem var(--navds-radio-color-shadow-checked) inset;
|
||||
}
|
||||
|
||||
.navds-radio__input:checked:focus + .navds-radio__label::before {
|
||||
transition: box-shadow 200ms cubic-bezier(0.465, 0.183, 0.153, 0.946);
|
||||
box-shadow: 0 0 0 3px var(--navds-radio-color-shadow-checked-focus),
|
||||
0 0 0 3px var(--navds-radio-color-shadow-background-checked-focus) inset,
|
||||
0 0 0 2rem var(--navds-radio-color-shadow-dot-checked-focus) inset;
|
||||
}
|
||||
|
||||
.navds-radio--error
|
||||
> .navds-radio__input:not(:hover):not(:focus):not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
box-shadow: 0 0 0 1px var(--navds-radio-color-shadow-error);
|
||||
border-color: var(--navds-radio-color-border-error);
|
||||
}
|
||||
|
||||
.navds-radio--small .navds-error-message {
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.navds-radio__input:disabled,
|
||||
.navds-radio__input:disabled + .navds-radio__label {
|
||||
color: var(--navds-radio-color-label-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-radio__input:disabled + .navds-radio__label::before {
|
||||
background-color: var(--navds-radio-color-background-disabled);
|
||||
border-color: var(--navds-radio-color-border-disabled);
|
||||
}
|
||||
|
||||
.navds-radio__input:disabled:checked + .navds-radio__label::before {
|
||||
background-color: var(--navds-radio-color-background-disabled-checked);
|
||||
border-color: var(--navds-radio-color-border-disabled-checked);
|
||||
box-shadow: 0 0 0 3px #fff inset,
|
||||
0 0 0 2rem var(--navds-radio-color-shadow-disabled-checked) inset;
|
||||
}
|
||||
@@ -47,3 +47,7 @@
|
||||
box-shadow: 0 0 0 1px var(--navds-search-field-color-shadow-error) inset;
|
||||
border-color: var(--navds-search-field-color-border-error);
|
||||
}
|
||||
|
||||
.navds-search-field--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
@@ -4,9 +4,6 @@
|
||||
--navds-select-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-select-color-border-error: var(--navds-color-red-50);
|
||||
--navds-select-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-select-color-border-disabled: var(--navds-color-gray-40);
|
||||
--navds-select-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-select-color-text-disabled: var(--navds-color-darkgray);
|
||||
}
|
||||
|
||||
.navds-select__input {
|
||||
@@ -59,12 +56,16 @@
|
||||
border-color: var(--navds-select-color-border-error);
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-select__input:disabled,
|
||||
.navds-select__input[read-only] {
|
||||
background-color: var(--navds-select-color-background-disabled);
|
||||
border-color: var(--navds-select-color-border-disabled);
|
||||
/*
|
||||
Disabled handling
|
||||
*/
|
||||
.navds-select--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-select__input:disabled {
|
||||
background-color: var(--navds-select-color-background);
|
||||
border-color: var(--navds-select-color-border);
|
||||
box-shadow: none;
|
||||
color: var(--navds-select-color-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -4,9 +4,6 @@
|
||||
--navds-text-field-color-border-hover: var(--navds-color-blue-50);
|
||||
--navds-text-field-color-border-error: var(--navds-color-red-50);
|
||||
--navds-text-field-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-text-field-color-border-disabled: var(--navds-color-gray-40);
|
||||
--navds-text-field-color-background-disabled: var(--navds-color-gray-10);
|
||||
--navds-text-field-color-text-disabled: var(--navds-color-darkgray);
|
||||
}
|
||||
|
||||
.navds-text-field__input {
|
||||
@@ -14,16 +11,20 @@
|
||||
padding: 0.5rem;
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-radius: 4px;
|
||||
border: 1px solid var(--navds-text-field-color-border);
|
||||
border: 2px solid var(--navds-text-field-color-border);
|
||||
min-height: 48px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.navds-form-field--small > .navds-text-field__input {
|
||||
padding: 0.15rem;
|
||||
padding: 0 0.15rem;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.navds-form-field--small > .navds-text-field__description:not(:empty) {
|
||||
margin-top: var(--navds-spacing-1);
|
||||
}
|
||||
|
||||
.navds-text-field__input:hover {
|
||||
border-color: var(--navds-text-field-color-border-hover);
|
||||
}
|
||||
@@ -36,20 +37,29 @@
|
||||
/**
|
||||
Error handling
|
||||
*/
|
||||
.navds-text-field--error
|
||||
> .navds-text-field__input:not(:hover):not(:focus):not(:disabled) {
|
||||
box-shadow: 0 0 0 1px var(--navds-text-field-color-shadow-error);
|
||||
.navds-text-field--error > .navds-text-field__input:not(:hover):not(:disabled) {
|
||||
border-color: var(--navds-text-field-color-border-error);
|
||||
}
|
||||
|
||||
/* Disabled handling */
|
||||
.navds-text-field__input:disabled,
|
||||
.navds-text-field__input[readonly] {
|
||||
background-color: var(--navds-text-field-color-background-disabled);
|
||||
border-color: var(--navds-text-field-color-border-disabled);
|
||||
.navds-text-field__input:disabled {
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-color: var(--navds-text-field-color-border);
|
||||
box-shadow: none;
|
||||
color: var(--navds-text-field-color-text-disabled);
|
||||
cursor: not-allowed;
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-text-field__input[readonly] {
|
||||
background-color: var(--navds-text-field-color-background);
|
||||
border-color: var(--navds-text-field-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-text-field--disabled > .navds-text-field__label,
|
||||
.navds-text-field--disabled > .navds-text-field__description {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@@ -6,9 +6,6 @@
|
||||
--navds-textarea-color-shadow-error: var(--navds-color-red-50);
|
||||
--navds-textarea-color-counter-text: var(--navds-color-gray-40);
|
||||
--navds-textarea-color-counter-text-error: var(--navds-color-red-50);
|
||||
--navds-textarea-color-text-disabled: var(--navds-color-darkgray);
|
||||
--navds-textarea-color-border-disabled: var(--navds-color-gray-40);
|
||||
--navds-textarea-color-background-disabled: var(--navds-color-gray-10);
|
||||
}
|
||||
|
||||
.navds-textarea__wrapper {
|
||||
@@ -78,11 +75,20 @@
|
||||
/*
|
||||
Disabled handling
|
||||
*/
|
||||
.navds-textarea__input:disabled,
|
||||
.navds-textarea--disabled {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
.navds-textarea__input:disabled {
|
||||
background-color: var(--navds-textarea-color-background);
|
||||
border-color: var(--navds-textarea-color-border);
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.navds-textarea__input[readonly] {
|
||||
background-color: var(--navds-textarea-color-background-disabled);
|
||||
border-color: var(--navds-textarea-color-border-disabled);
|
||||
background-color: var(--navds-textarea-color-background);
|
||||
border-color: var(--navds-textarea-color-border);
|
||||
box-shadow: none;
|
||||
color: var(--navds-textarea-color-text-disabled);
|
||||
cursor: not-allowed;
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "0.11.4",
|
||||
"version": "0.11.5",
|
||||
"private": false,
|
||||
"description": "Css for NAV Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "0.13.2",
|
||||
"version": "0.13.3",
|
||||
"private": false,
|
||||
"description": "NAV designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import cl from "classnames";
|
||||
import React, { FieldsetHTMLAttributes, forwardRef, useContext } from "react";
|
||||
import { BodyShort, Label, omit } from "../..";
|
||||
import { BodyShort, Detail, Label, omit } from "../..";
|
||||
import ErrorMessage from "../ErrorMessage";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { useFieldset } from "./useFieldset";
|
||||
@@ -101,18 +101,30 @@ const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
|
||||
>
|
||||
{legend}
|
||||
</Label>
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-fieldset__description", {
|
||||
"sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
)}
|
||||
{!!description &&
|
||||
(size === "medium" ? (
|
||||
<BodyShort
|
||||
className={cl("navds-fieldset__description", {
|
||||
"sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</BodyShort>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-fieldset__description", {
|
||||
"sr-only": !!hideLegend,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{props.description}
|
||||
</Detail>
|
||||
))}
|
||||
{children}
|
||||
<div
|
||||
id={errorId}
|
||||
|
||||
@@ -52,7 +52,10 @@ const Select = forwardRef<HTMLSelectElement, SelectProps>((props, ref) => {
|
||||
className,
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size}`,
|
||||
{ "navds-select--error": hasError }
|
||||
{
|
||||
"navds-select--error": hasError,
|
||||
"navds-select--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Label
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import { BodyShort, Label, omit } from "..";
|
||||
import { BodyShort, Detail, Label, omit } from "..";
|
||||
import ErrorMessage from "./ErrorMessage";
|
||||
import { FormFieldProps, useFormField } from "./useFormField";
|
||||
|
||||
@@ -52,7 +52,10 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
|
||||
className,
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size}`,
|
||||
{ "navds-text-field--error": hasError }
|
||||
{
|
||||
"navds-text-field--error": hasError,
|
||||
"navds-text-field--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Label
|
||||
@@ -65,16 +68,31 @@ const TextField = forwardRef<HTMLInputElement, TextFieldProps>((props, ref) => {
|
||||
</Label>
|
||||
|
||||
{!!description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
className={cl("navds-text-field__description", {
|
||||
"sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size={size}
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
<>
|
||||
{size === "medium" ? (
|
||||
<BodyShort
|
||||
className={cl("navds-text-field__description", {
|
||||
"sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</BodyShort>
|
||||
) : (
|
||||
<Detail
|
||||
className={cl("navds-text-field__description", {
|
||||
"sr-only": hideLabel,
|
||||
})}
|
||||
id={inputDescriptionId}
|
||||
size="small"
|
||||
as="div"
|
||||
>
|
||||
{description}
|
||||
</Detail>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
<input
|
||||
{...omit(rest, ["error", "errorId", "size"])}
|
||||
|
||||
@@ -66,7 +66,10 @@ const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
|
||||
className,
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size}`,
|
||||
{ "navds-textarea--error": hasError }
|
||||
{
|
||||
"navds-textarea--error": hasError,
|
||||
"navds-textarea--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Label
|
||||
|
||||
@@ -1,13 +1,17 @@
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import useCheckbox from "./useCheckbox";
|
||||
import ErrorMessage from "../ErrorMessage";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { BodyShort, omit } from "../..";
|
||||
import { BodyShort, Detail, omit } from "../..";
|
||||
|
||||
export interface CheckboxProps
|
||||
extends FormFieldProps,
|
||||
extends Omit<FormFieldProps, "errorId">,
|
||||
Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
||||
/**
|
||||
* Checkbox has error
|
||||
* @default false
|
||||
*/
|
||||
error?: boolean;
|
||||
/**
|
||||
* Label for checkbox
|
||||
*/
|
||||
@@ -23,14 +27,9 @@ export interface CheckboxProps
|
||||
}
|
||||
|
||||
const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
|
||||
const {
|
||||
inputProps,
|
||||
errorId,
|
||||
showErrorMsg,
|
||||
hasError,
|
||||
size,
|
||||
inputDescriptionId,
|
||||
} = useCheckbox(props);
|
||||
const { inputProps, hasError, size } = useCheckbox(props);
|
||||
|
||||
const Description = size === "medium" ? BodyShort : Detail;
|
||||
|
||||
return (
|
||||
<div
|
||||
@@ -40,8 +39,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
|
||||
`navds-checkbox--${size}`,
|
||||
{
|
||||
"navds-checkbox--error": hasError,
|
||||
"navds-checkbox--with-error-message": showErrorMsg,
|
||||
"navds-checkbox--with-description": !!props.description,
|
||||
"navds-checkbox--disabled": inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
@@ -50,7 +48,6 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
|
||||
"children",
|
||||
"size",
|
||||
"error",
|
||||
"errorId",
|
||||
"description",
|
||||
"hideLabel",
|
||||
])}
|
||||
@@ -58,31 +55,26 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>((props, ref) => {
|
||||
className="navds-checkbox__input"
|
||||
ref={ref}
|
||||
/>
|
||||
<BodyShort
|
||||
as="label"
|
||||
htmlFor={inputProps.id}
|
||||
size={size}
|
||||
className="navds-checkbox__label"
|
||||
>
|
||||
{props.hideLabel ? (
|
||||
<span className="sr-only">{props.children}</span>
|
||||
) : (
|
||||
props.children
|
||||
)}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
size={size}
|
||||
id={inputDescriptionId}
|
||||
className="navds-checkbox__description"
|
||||
<label htmlFor={inputProps.id} className="navds-checkbox__label">
|
||||
<div
|
||||
className={cl("navds-checkbox__content", {
|
||||
"sr-only": props.hideLabel,
|
||||
})}
|
||||
>
|
||||
{props.description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
||||
{showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
|
||||
</div>
|
||||
<BodyShort as="div" size={size}>
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<Description
|
||||
as="div"
|
||||
size="small"
|
||||
className="navds-checkbox__description"
|
||||
>
|
||||
{props.description}
|
||||
</Description>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -12,7 +12,8 @@ export const CheckboxGroupContext = createContext<CheckboxGroupState | null>(
|
||||
null
|
||||
);
|
||||
|
||||
export interface CheckboxGroupProps extends Omit<FieldsetProps, "onChange"> {
|
||||
export interface CheckboxGroupProps
|
||||
extends Omit<FieldsetProps, "onChange" | "errorPropagation"> {
|
||||
/**
|
||||
* Checkboxes
|
||||
*/
|
||||
|
||||
@@ -49,6 +49,8 @@ Man kan både sette en description på CheckboxGroup og selve checkbox
|
||||
|
||||
## Errors
|
||||
|
||||
Feilmeldinger kan bare settes på gruppa
|
||||
|
||||
```jsx
|
||||
<CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
@@ -65,37 +67,23 @@ Man kan både sette en description på CheckboxGroup og selve checkbox
|
||||
</CheckboxGroup>
|
||||
</Canvas>
|
||||
|
||||
## Errors uten errorPropagation
|
||||
Enkelt-checkboxer tar en `boolean` error prop
|
||||
|
||||
```jsx
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<Checkbox value="Apple" error>
|
||||
Apple
|
||||
</Checkbox>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange" error="Boksen må være valgt">
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<Checkbox value="Apple" error>
|
||||
Apple
|
||||
</Checkbox>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
Checkboxer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
|
||||
Checkboxer har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
|
||||
|
||||
```jsx
|
||||
<CheckboxGroup
|
||||
@@ -166,31 +154,15 @@ Ved bruk av `hideLegend` på CheckboxGroup kan man gjøre slik at legend/descrip
|
||||
Ved bruk av `hideLabel` kan man lettere ta i bruk checkbox internt i eks tabeller.
|
||||
|
||||
```jsx
|
||||
<CheckboxGroup legend="Mollit eiusmod" hideLegend>
|
||||
<Checkbox value="Apple" hideLabel>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon" hideLabel>
|
||||
Melon
|
||||
</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<CheckboxGroup legend="Mollit eiusmod" hideLegend>
|
||||
<Checkbox value="Apple" hideLabel>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon" hideLabel>
|
||||
Melon
|
||||
</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
</Canvas>
|
||||
|
||||
## Disabled
|
||||
@@ -206,7 +178,7 @@ NOTE: Husk at disabled bør unngås!
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
|
||||
<CheckboxGroup legend="Mollit eiusmod" >
|
||||
<CheckboxGroup legend="Mollit eiusmod">
|
||||
<Checkbox value="Apple" disabled>Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
|
||||
@@ -7,90 +7,63 @@ export default {
|
||||
} as Meta;
|
||||
|
||||
export const All = () => {
|
||||
const Checkboxes = (props) => (
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
description="Exercitation do labore"
|
||||
{...props}
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange" description="Laborum ad">
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Banana" description={<div>Laborum ad</div>}>
|
||||
Banana
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Checkboxes</h1>
|
||||
<CheckboxGroup legend="Mollit eiusmod">
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>description</h2>
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
description="Exercitation do labore"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange" description={<div>Laborum ad</div>}>
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>error</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>error uten errorPropagation</h2>
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange" error="Boksen må være valgt">
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>Sizing</h2>
|
||||
<CheckboxGroup
|
||||
legend="Mollit eiusmod"
|
||||
error="Boks nr 2 må være valgt"
|
||||
size="small"
|
||||
>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>defaultValue</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod" defaultValue={["Orange", "Melon"]}>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>hideLenged</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod" hideLegend>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>hideLabel</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod">
|
||||
<Checkbox value="Apple" hideLabel>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange" hideLabel>
|
||||
Orange
|
||||
</Checkbox>
|
||||
<Checkbox value="Melon" hideLabel>
|
||||
Melon
|
||||
</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h2>Disabled</h2>
|
||||
<CheckboxGroup legend="Mollit eiusmod" disabled>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<CheckboxGroup legend="Mollit eiusmod">
|
||||
<Checkbox value="Apple" disabled>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange">Orange</Checkbox>
|
||||
<Checkbox value="Melon">Melon</Checkbox>
|
||||
</CheckboxGroup>
|
||||
<h1>Checkbox</h1>
|
||||
<h2>Single checkbox</h2>
|
||||
<Checkbox value="Apple">Apple</Checkbox>
|
||||
<h3>Desription</h3>
|
||||
<Checkbox value="Apple" description="Laborum ad" defaultChecked>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<h3>Error</h3>
|
||||
<Checkbox value="Apple" error>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Apple" error defaultChecked>
|
||||
Orange
|
||||
</Checkbox>
|
||||
<h3>Hide label</h3>
|
||||
<Checkbox value="Apple" hideLabel description="Laborum ad">
|
||||
Apple
|
||||
</Checkbox>
|
||||
<h3>Disabled</h3>
|
||||
<Checkbox value="Apple" disabled>
|
||||
Apple
|
||||
</Checkbox>
|
||||
<Checkbox value="Orange" description="Laborum ad" disabled defaultChecked>
|
||||
Orange
|
||||
</Checkbox>
|
||||
|
||||
<h2>Checkbox group</h2>
|
||||
<Checkboxes />
|
||||
<h3>Error</h3>
|
||||
<Checkboxes error="Dette er en feilmelding" />
|
||||
<h3>Small</h3>
|
||||
<Checkboxes size="small" />
|
||||
<h3>Small + error</h3>
|
||||
<Checkboxes size="small" error="Dette er en feilmelding" />
|
||||
<h3>Default value</h3>
|
||||
<Checkboxes defaultValue={["Orange", "Melon"]} />
|
||||
<h3>Disabled</h3>
|
||||
<Checkboxes disabled />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -2,6 +2,7 @@ import { useContext } from "react";
|
||||
import { CheckboxProps } from "../..";
|
||||
import { useFormField } from "../useFormField";
|
||||
import { CheckboxGroupContext } from "./CheckboxGroup";
|
||||
import { omit } from "../..";
|
||||
|
||||
/**
|
||||
* Handles props for Checkboxes in context with Fieldset and CheckboxGroup
|
||||
@@ -9,7 +10,10 @@ import { CheckboxGroupContext } from "./CheckboxGroup";
|
||||
const useCheckbox = ({ children, ...props }: CheckboxProps) => {
|
||||
const checkboxGroup = useContext(CheckboxGroupContext);
|
||||
|
||||
const { inputProps, ...rest } = useFormField(props, "checkbox");
|
||||
const { inputProps, ...rest } = useFormField(
|
||||
omit(props, ["description"]),
|
||||
"checkbox"
|
||||
);
|
||||
|
||||
if (checkboxGroup) {
|
||||
if (props.checked) {
|
||||
|
||||
@@ -1,71 +1,56 @@
|
||||
import React, { forwardRef, InputHTMLAttributes } from "react";
|
||||
import cl from "classnames";
|
||||
import { BodyShort, omit } from "../..";
|
||||
import ErrorMessage from "../ErrorMessage";
|
||||
import { BodyShort, Detail, omit } from "../..";
|
||||
import { FormFieldProps } from "../useFormField";
|
||||
import { useRadio } from "./useRadio";
|
||||
|
||||
export interface RadioProps
|
||||
extends FormFieldProps,
|
||||
extends Omit<FormFieldProps, "error" | "errorId">,
|
||||
Omit<InputHTMLAttributes<HTMLInputElement>, "size"> {
|
||||
/**
|
||||
* Label for radio
|
||||
*/
|
||||
children: React.ReactNode;
|
||||
/**
|
||||
* The value of the HTML element
|
||||
*/
|
||||
value: string;
|
||||
}
|
||||
|
||||
const Radio = forwardRef<HTMLInputElement, RadioProps>((props, ref) => {
|
||||
const {
|
||||
inputProps,
|
||||
errorId,
|
||||
showErrorMsg,
|
||||
size,
|
||||
hasError,
|
||||
inputDescriptionId,
|
||||
} = useRadio(props);
|
||||
const { inputProps, size, hasError } = useRadio(props);
|
||||
|
||||
const Description = size === "medium" ? BodyShort : Detail;
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cl(props.className, "navds-radio", `navds-radio--${size}`, {
|
||||
"navds-radio--error": hasError,
|
||||
"navds-radio--with-error-message": showErrorMsg,
|
||||
"navds-radio--with-description": !!props.description,
|
||||
"navds-radio--disabled": inputProps.disabled,
|
||||
})}
|
||||
>
|
||||
<input
|
||||
{...omit(props, [
|
||||
"children",
|
||||
"size",
|
||||
"error",
|
||||
"errorId",
|
||||
"description",
|
||||
])}
|
||||
{...omit(props, ["children", "size", "description"])}
|
||||
{...inputProps}
|
||||
className="navds-radio__input"
|
||||
ref={ref}
|
||||
/>
|
||||
<BodyShort
|
||||
as="label"
|
||||
htmlFor={inputProps.id}
|
||||
size={size}
|
||||
className="navds-radio__label"
|
||||
>
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<BodyShort
|
||||
as="div"
|
||||
size={size}
|
||||
id={inputDescriptionId}
|
||||
className="navds-radio__description"
|
||||
>
|
||||
{props.description}
|
||||
</BodyShort>
|
||||
)}
|
||||
<div id={errorId} aria-relevant="additions removals" aria-live="polite">
|
||||
{showErrorMsg && <ErrorMessage size={size}>{props.error}</ErrorMessage>}
|
||||
</div>
|
||||
<label htmlFor={inputProps.id} className="navds-radio__label">
|
||||
<div className="navds-radio__content">
|
||||
<BodyShort as="div" size={size}>
|
||||
{props.children}
|
||||
</BodyShort>
|
||||
{props.description && (
|
||||
<Description
|
||||
as="div"
|
||||
size="small"
|
||||
className="navds-radio__description"
|
||||
>
|
||||
{props.description}
|
||||
</Description>
|
||||
)}
|
||||
</div>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
@@ -15,7 +15,8 @@ export const RadioGroupContext = React.createContext<RadioGroupContextProps | nu
|
||||
null
|
||||
);
|
||||
|
||||
export interface RadioGroupProps extends Omit<FieldsetProps, "onChange"> {
|
||||
export interface RadioGroupProps
|
||||
extends Omit<FieldsetProps, "onChange" | "errorPropagation"> {
|
||||
/**
|
||||
* Collection of <Radio>-elements
|
||||
*/
|
||||
|
||||
@@ -49,6 +49,8 @@ Man kan både sette en description på RadioGroup og selve Radio
|
||||
|
||||
## Errors
|
||||
|
||||
Feilmeldinger kan bare settes på gruppa
|
||||
|
||||
```jsx
|
||||
<RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
@@ -65,37 +67,9 @@ Man kan både sette en description på RadioGroup og selve Radio
|
||||
</RadioGroup>
|
||||
</Canvas>
|
||||
|
||||
## Errors uten errorPropagation
|
||||
|
||||
```jsx
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
```
|
||||
|
||||
<Canvas>
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange" error="Boksen må være valgt">
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
</Canvas>
|
||||
|
||||
## Sizing
|
||||
|
||||
Radioer har default 44px høy klikkflate. Med size="small" blir denne til 24px slik som før
|
||||
Radioknapper har default 48px høy klikkflate. Med size="small" blir klikkflaten 32px
|
||||
|
||||
```jsx
|
||||
<RadioGroup
|
||||
|
||||
@@ -7,78 +7,47 @@ export default {
|
||||
} as Meta;
|
||||
|
||||
export const All = () => {
|
||||
const Radios = (props) => (
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
description={<div>"Exercitation do labore"</div>}
|
||||
{...props}
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange" description="Laborum ad">
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Orange" description={<div>Laborum ad</div>}>
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<h1>Radios</h1>
|
||||
<RadioGroup legend="Mollit eiusmod">
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>description</h2>
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
description={<div>Exercitation do labore</div>}
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange" description={<div>Laborum ad</div>}>
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>error</h2>
|
||||
<RadioGroup legend="Mollit eiusmod" error="Boks nr 2 må være valgt">
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>error uten errorPropagation</h2>
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
errorPropagation={false}
|
||||
error="Boks nr 2 må være valgt"
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange" error="Boksen må være valgt">
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>Sizing</h2>
|
||||
<RadioGroup
|
||||
legend="Mollit eiusmod"
|
||||
error="Boks nr 2 må være valgt"
|
||||
size="small"
|
||||
>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>defaultValue</h2>
|
||||
<RadioGroup legend="Mollit eiusmod" defaultValue="Orange">
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>hideLenged</h2>
|
||||
<RadioGroup legend="Mollit eiusmod" hideLegend>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h1>Radio group</h1>
|
||||
<Radios />
|
||||
<h2>Error</h2>
|
||||
<Radios error="Dette er en feilmelding" />
|
||||
<h2>Small</h2>
|
||||
<Radios size="small" />
|
||||
<h2>Small + error</h2>
|
||||
<Radios size="small" error="Dette er en feilmelding" />
|
||||
<h2>Default value</h2>
|
||||
<Radios defaultValue="Orange" />
|
||||
<h2>Disabled</h2>
|
||||
<RadioGroup legend="Mollit eiusmod" disabled>
|
||||
<Radio value="Apple">Apple</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<RadioGroup legend="Mollit eiusmod">
|
||||
<RadioGroup legend="Mollit eiusmod" description="Exercitation do labore">
|
||||
<Radio value="Apple" disabled>
|
||||
Apple
|
||||
</Radio>
|
||||
<Radio value="Orange">Orange</Radio>
|
||||
<Radio value="Orange" description="Laborum ad" disabled>
|
||||
Orange
|
||||
</Radio>
|
||||
<Radio value="Melon">Melon</Radio>
|
||||
</RadioGroup>
|
||||
<h2>Disabled group</h2>
|
||||
<Radios disabled />
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -2,6 +2,7 @@ import { useContext } from "react";
|
||||
import { useFormField } from "../useFormField";
|
||||
import { RadioProps } from "./Radio";
|
||||
import { RadioGroupContext } from "./RadioGroup";
|
||||
import { omit } from "../..";
|
||||
|
||||
/**
|
||||
* Handles props for Radios in context with Fieldset and RadioGroup
|
||||
@@ -9,7 +10,10 @@ import { RadioGroupContext } from "./RadioGroup";
|
||||
export const useRadio = (props: RadioProps) => {
|
||||
const radioGroup = useContext(RadioGroupContext);
|
||||
|
||||
const { inputProps, ...rest } = useFormField(props, "radio");
|
||||
const { inputProps, ...rest } = useFormField(
|
||||
omit(props, ["description"]),
|
||||
"radio"
|
||||
);
|
||||
|
||||
if (!radioGroup) {
|
||||
console.warn("<Radio> must be used inside <RadioGroup>.");
|
||||
|
||||
@@ -79,7 +79,10 @@ const SearchField = forwardRef<HTMLDivElement, SearchFieldProps>(
|
||||
"navds-form-field",
|
||||
`navds-form-field--${size ?? "medium"}`,
|
||||
"navds-search-field",
|
||||
{ "navds-search-field--error": hasError }
|
||||
{
|
||||
"navds-search-field--error": hasError,
|
||||
"navds-search-field--disabled": !!inputProps.disabled,
|
||||
}
|
||||
)}
|
||||
>
|
||||
<Label
|
||||
|
||||
@@ -170,6 +170,30 @@ export const All = () => {
|
||||
<SearchField.Input />
|
||||
</SearchField>
|
||||
</Fieldset>
|
||||
|
||||
<h2>Disabled </h2>
|
||||
<SearchField
|
||||
disabled
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
<Fieldset legend="Filter" disabled>
|
||||
<SearchField
|
||||
label="Mollit eiusmod"
|
||||
description="Ea cupidatat eu sunt commodo"
|
||||
error="Errormsg"
|
||||
>
|
||||
<SearchField.Input />
|
||||
<SearchField.Button>
|
||||
<Search /> Søk
|
||||
</SearchField.Button>
|
||||
</SearchField>
|
||||
</Fieldset>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -55,6 +55,25 @@ export const All = () => {
|
||||
description="Cillum mollit"
|
||||
disabled
|
||||
/>
|
||||
<TextField
|
||||
size="small"
|
||||
label="Laborum excepteur"
|
||||
description="Cillum mollit"
|
||||
disabled
|
||||
/>
|
||||
<h2>Readonly</h2>
|
||||
|
||||
<TextField
|
||||
label="Laborum excepteur"
|
||||
description="Cillum mollit"
|
||||
readOnly
|
||||
/>
|
||||
<TextField
|
||||
label="Laborum excepteur"
|
||||
description="Cillum mollit"
|
||||
size="small"
|
||||
readOnly
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -78,7 +78,17 @@ export const All = () => {
|
||||
description="Reprehenderit esse proident"
|
||||
maxLength={400}
|
||||
disabled
|
||||
value={value}
|
||||
value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
|
||||
onChange={handleChange}
|
||||
/>
|
||||
<h2>Readonly</h2>
|
||||
|
||||
<Textarea
|
||||
label="In anim elit"
|
||||
description="Reprehenderit esse proident"
|
||||
maxLength={400}
|
||||
readOnly
|
||||
value="Consectetur commodo mollit voluptate esse minim elit deserunt fugiat consectetur laboris."
|
||||
onChange={handleChange}
|
||||
/>
|
||||
</div>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "0.8.2",
|
||||
"version": "0.8.3",
|
||||
"private": false,
|
||||
"description": "NAV internal designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -34,7 +34,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^0.6.3",
|
||||
"@navikt/ds-react": "^0.13.2",
|
||||
"@navikt/ds-react": "^0.13.3",
|
||||
"@popperjs/core": "^2.10.1",
|
||||
"classnames": "^2.3.1",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
|
||||
@@ -23,7 +23,7 @@ Repoet inneholder følgende:
|
||||
- [Alle felleskomponenter](https://github.com/navikt/nav-frontend-moduler/tree/master/packages/) i NAVs frontend-rammeverk forvaltet av designsystemet
|
||||
- [Felleskomponenter V2 (WIP)](https://github.com/navikt/nav-frontend-moduler/tree/master/@navikt/) oppdaterte og scopede pakker for en bedre brukeropplevelse
|
||||
- [Kildekoden](https://github.com/navikt/nav-frontend-moduler/tree/master/website) til vår nettside; [design.nav.no](https://design.nav.no) som tilbyr dokumentasjon for komponentene og NAVs designsystem generelt
|
||||
- [Eksempler på forskjellige frontend-oppsett](https://github.com/navikt/nav-frontend-moduler/tree/master/examples) til applikasjoner som skal bruke komponentene
|
||||
- [Eksempler på forskjellige frontend-løsninger](https://github.com/navikt/nav-frontend-moduler/tree/master/examples) til applikasjoner som skal bruke komponentene
|
||||
- [Storybook](https://navikt.github.io/Designsystemet/?path=/story/ds-react-kom-i-gang--page) for v2 komponenter (wip) og eldre komponenter.
|
||||
|
||||
## Bidrag
|
||||
|
||||
@@ -10,6 +10,7 @@ import {
|
||||
Normaltekst,
|
||||
} from "nav-frontend-typografi";
|
||||
import Lenke from "nav-frontend-lenker";
|
||||
import { Accordion } from "@navikt/ds-react";
|
||||
let headlines = [];
|
||||
|
||||
const Img = ({ src, ...rest }) => {
|
||||
@@ -98,6 +99,16 @@ const renderAst = new rehypeReact({
|
||||
h4: (props) =>
|
||||
registerHeadline(props, (props) => <Undertittel tag="h4" {...props} />),
|
||||
inlineCode: (props) => <InlineCode {...props} />,
|
||||
accordion: (props) => {
|
||||
return (
|
||||
<Accordion>
|
||||
<Accordion.Item>
|
||||
<Accordion.Header>{props?.tittel}</Accordion.Header>
|
||||
<Accordion.Content>{props.children}</Accordion.Content>
|
||||
</Accordion.Item>
|
||||
</Accordion>
|
||||
);
|
||||
},
|
||||
},
|
||||
}).Compiler;
|
||||
|
||||
|
||||
Reference in new issue
Block a user