diff --git a/CODEOWNERS b/CODEOWNERS new file mode 100644 index 0000000..672cc2f --- /dev/null +++ b/CODEOWNERS @@ -0,0 +1 @@ +* @navikt/teampam diff --git a/src/packages/arbeidsplassen-css/footer.css b/src/packages/arbeidsplassen-css/footer.css index ae4095c..421d797 100644 --- a/src/packages/arbeidsplassen-css/footer.css +++ b/src/packages/arbeidsplassen-css/footer.css @@ -73,7 +73,7 @@ .arb-footer-section ul li a:focus { text-decoration: none; outline: none; - color: var(--a-text-on-action); + color: var(--arb-footer-focus-text); background: var(--a-border-focus); } diff --git a/src/packages/arbeidsplassen-theme/common.css b/src/packages/arbeidsplassen-theme/common.css index 69e6189..9160e6f 100644 --- a/src/packages/arbeidsplassen-theme/common.css +++ b/src/packages/arbeidsplassen-theme/common.css @@ -123,6 +123,13 @@ border-bottom-right-radius: 0 !important; } +/****************************************************** + * Combobox overrides + ******************************************************/ +.navds-combobox__input { + background-color: var(--a-surface-default); + } + /****************************************************** * Tag overrides ******************************************************/ diff --git a/src/packages/arbeidsplassen-theme/dark.css b/src/packages/arbeidsplassen-theme/dark.css index 0d1268b..e47f4d4 100644 --- a/src/packages/arbeidsplassen-theme/dark.css +++ b/src/packages/arbeidsplassen-theme/dark.css @@ -17,21 +17,21 @@ --a-surface-default: var(--arb-green-900); --a-surface-hover: var(--arb-whitealpha-50); --a-surface-active: var(--arb-whitealpha-100); - --a-surface-selected: var(--arb-blue-50); + --a-surface-selected: var(--arb-green-700); --a-surface-subtle: var(--arb-dark-mode-shade-100); --a-surface-transparent: var(--arb-transparent); --a-surface-backdrop: var(--arb-grayalpha-700); - --a-surface-inverted: var(--arb-dark-mode-shade-400); + --a-surface-inverted: var(--arb-dark-mode-shade-300); --a-surface-inverted-hover: var(--arb-dark-mode-shade-300); --a-surface-inverted-active: var(--arb-dark-mode-shade-300); --a-surface-action: var(--arb-blue-200); --a-surface-action-hover: var(--arb-blue-300); - --a-surface-action-active: var(--arb-green-500); + --a-surface-action-active: var(--arb-green-700); --a-surface-action-subtle: var(--arb-whitealpha-50); --a-surface-action-subtle-hover: var(--arb-whitealpha-50); - --a-surface-action-selected: var(--arb-green-500); - --a-surface-action-selected-hover: var(--arb-green-400); + --a-surface-action-selected: var(--arb-green-700); + --a-surface-action-selected-hover: var(--arb-green-600); --a-surface-neutral: var(--arb-dark-mode-shade-200); --a-surface-neutral-moderate: var(--arb-dark-mode-shade-400); @@ -81,14 +81,17 @@ ******************************************************/ --a-text-default: var(--arb-dark-mode-shade-900); --a-text-subtle: var(--arb-dark-mode-shade-600); - --a-text-visited: var(--arb-blue-900); + --a-text-visited: var(--a-purple-300); --a-text-danger: var(--arb-red-300); + --a-text-action: var(--arb-blue-200); + --a-text-action-hover: var(--arb-white); --a-text-action-selected: var(--arb-green-500); - --a-text-action-on-action-subtle: var(--arb-blue-100); + --a-text-action-on-action-subtle: var(--arb-white); + --a-text-on-inverted: var(--arb-white); --a-text-on-neutral: var(--arb-white); - --a-text-on-action: var(--arb-green-900); + --a-text-on-action: var(--arb-white); --a-text-on-info: var(--arb-white); --a-text-on-success: var(--arb-green-800); --a-text-on-warning: var(--arb-green-800); @@ -103,19 +106,24 @@ --a-border-default: var(--arb-dark-mode-shade-700); --a-border-strong: var(--arb-dark-mode-shade-900); --a-border-divider: var(--arb-dark-mode-shade-200); - --a-border-subtle: var(--arb-dark-mode-shade-300); - --a-border-subtle-hover: var(--arb-dark-mode-shade-300); + --a-border-subtle: var(--arb-whitealpha-100); + --a-border-subtle-hover: var(--arb-whitealpha-50); + --a-border-on-inverted: var(--arb-gray-200); + --a-border-on-inverted-subtle: var(--arb-gray-700); + --a-border-action: var(--arb-blue-200); - --a-border-action-selected: var(--arb-blue-600); - --a-border-selected: var(--arb-blue-600); + --a-border-action-hover: var(--arb-blue-200); + --a-border-action-selected: var(--a-border-default); + --a-border-selected: var(--a-border-default); + --a-border-success: var(--arb-green-400); --a-border-danger: var(--arb-red-300); --a-border-warning: var(--arb-orange-400); --a-border-info: var(--arb-blue-300); - --a-border-on-inverted: var(--arb-gray-200); - --a-border-on-inverted-subtle: var(--arb-gray-700); + --a-border-focus: var(--arb-dark-mode-shade-900); --a-border-focus-on-inverted: var(--arb-blue-200); + --a-border-alt-1: var(--arb-dark-mode-shade-700); --a-border-alt-2: var(--arb-dark-mode-shade-700); --a-border-alt-3: var(--arb-dark-mode-shade-700); @@ -139,17 +147,42 @@ --a-icon-alt-3: var(--arb-peach-200); --a-icon-action: var(--arb-blue-200); - --a-icon-action-selected: var(--arb-blue-700); - --a-icon-action-on-action-subtle: var(--arb-blue-200); + --a-icon-action-hover: var(--arb-white); + --a-icon-action-selected: var(--arb-green-500); + --a-icon-action-on-action-subtle: var(--arb-white); --a-icon-on-neutral: var(--arb-white); - --a-icon-on-action: var(--arb-green-900); + --a-icon-on-action: var(--arb-white); --a-icon-on-success: var(--arb-green-800); --a-icon-on-danger: var(--arb-white); --a-icon-on-warning: var(--arb-green-800); --a-icon-on-info: var(--arb-white); --a-icon-on-inverted: var(--arb-white); + /***************************************************** + * Shadows + ******************************************************/ + --a-shadow-xlarge: 0px 10px 24px 0px rgba(0, 0, 0, 0.45), + 0px 3px 5px 0px rgba(0, 0, 0, 0.35), + 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, + 0px 0px 1px 0px rgba(255, 255, 255, 0.35) inset; + --a-shadow-large: 0px 10px 16px 0px rgba(0, 0, 0, 0.35), + 0px 2px 5px 0px rgba(0, 0, 0, 0.35), + 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, + 0px 0px 1px 0px rgba(255, 255, 255, 0.35) inset; + --a-shadow-medium: 0px 5px 12px 0px rgba(0, 0, 0, 0.35), + 0px 1px 3px 0px rgba(0, 0, 0, 0.5), + 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, + 0px 0px 1px 0px rgba(255, 255, 255, 0.3) inset; + --a-shadow-small: 0px 3px 8px 0px rgba(0, 0, 0, 0.35), + 0px 1px 3px 0px rgba(0, 0, 0, 0.5), + 0px 1px 0px 0px rgba(255, 255, 255, 0.08) inset, + 0px 0px 1px 0px rgba(255, 255, 255, 0.3) inset; + --a-shadow-xsmall: 0px 0px 0.5px 0px rgba(0, 0, 0, 0.5), + 0px 1px 3px 0px rgba(0, 0, 0, 0.5), + 0px 1px 0px 0px rgba(255, 255, 255, 0.1) inset, + 0px 0px 1px 0px rgba(255, 255, 255, 0.3) inset; + /***************************************************** * Custom components variables ******************************************************/ @@ -170,12 +203,18 @@ --ac-alert-success-border: var(--arb-green-800); --ac-alert-success-bg: var(--arb-green-800); + /* Button */ + --ac-button-primary-bg: var(--arb-blue-600); + --ac-button-primary-hover-bg: var(--arb-blue-500); + --ac-button-tertiary-neutral-hover-text: var(--arb-white); + --ac-button-tertiary-focus-border: transparent; + --ac-button-tertiary-neutral-focus-border: transparent; + /* Chip */ - --ac-chip-toggle-border: var(--a-border-action); --ac-chip-toggle-bg: var(--arb-transparent); --ac-chip-toggle-text: var(--a-text-action); - --ac-chip-toggle-hover-border: var(--a-text-action-on-action-subtle); --ac-chip-toggle-hover-bg: var(--a-surface-action-subtle); + --ac-chip-toggle-neutral-border: var(--arb-transparent); --ac-chip-removable-neutral-border: var(--a-border-action); --ac-chip-removable-neutral-bg: var(--arb-transparent); @@ -185,26 +224,54 @@ ); --ac-chip-removable-neutral-hover-bg: var(--a-surface-action-subtle); - /* Button */ - --ac-button-secondary-text: var(--arb-dark-mode-shade-900); - --ac-button-secondary-hover-text: var(--arb-dark-mode-shade-900); - --ac-button-secondary-border: var(--arb-dark-mode-shade-800); - --ac-button-tertiary-text: var(--arb-dark-mode-shade-900); - --ac-button-tertiary-hover-text: var(--arb-dark-mode-shade-900); - --ac-button-secondary-focus-border: var(--ac-button-secondary-border); - --ac-button-secondary-neutral-focus-border: var( - --ac-button-secondary-border - ); - --ac-button-tertiary-focus-border: transparent; - --ac-button-tertiary-neutral-focus-border: transparent; + /* Combobox */ + --ac-combobox-list-item-hover-bg: var(--arb-dark-mode-shade-100); + --ac-combobox-list-item-selected-bg: var(--arb-dark-mode-shade-200); + --ac-combobox-list-item-selected-hover-bg: var(--arb-dark-mode-shade-300); + --ac-combobox-list-item-hover-border-left: var(--a-border-default); + --ac-combobox-list-item-selected-hover-border-left: var(--arb-green-400); - /* Tabs */ - --ac-tabs-selected-border: var(--arb-green-400); + /* Link */ + --ac-link-active-bg: var(--a-border-focus); + --ac-link-active-text: var(--arb-green-800); + --ac-link-focus-text: var(--arb-green-800); + + /* Popover */ + --ac-popover-bg: var(--arb-dark-mode-shade-100); + --ac-modal-bg: var(--arb-dark-mode-shade-100); + --ac-modal-backdrop: var(--a-surface-backdrop); /* ReadMore */ --ac-read-more-hover-bg: var(--arb-whitealpha-50); --ac-read-more-line: var(--arb-green-400); + /* Stepper */ + --ac-stepper-non-interactive-line-completed: var(--arb-dark-mode-shade-600); + --ac-stepper-line: var(--a-border-subtle); + --ac-stepper-line-completed: var(--arb-blue-300); + --ac-stepper-active-border: var(--a-surface-action-selected); + --ac-stepper-text: var(--arb-blue-600); + + /* Progress bar */ + --ac-progress-bar-fg: var(--arb-green-600); + + /* Switch */ + --ac-switch-action: var(--a-text-action); + --ac-switch-bg: var(--a-surface-neutral); + --ac-switch-hover-bg: var(--a-surface-neutral); + --ac-switch-checked-bg: var(--arb-green-600); + --ac-switch-checked-hover-bg: var(--arb-green-600); + --ac-switch-thumb-bg: var(--arb-dark-mode-shade-900); + --ac-switch-thumb-icon: var(--arb-grayalpha-500); + --ac-switch-thumb-icon-checked: var(--arb-green-600); + + /* Table */ + --a-table-sort-button-sorted-text: var(--a-text-on-action); + + /* Tabs */ + --ac-tabs-selected-border: var(--arb-green-400); + --ac-tabs-hover-border: var(--a-border-subtle); + /* Tag */ --ac-tag-info-moderate-text: var(--arb-green-900); --ac-tag-success-moderate-text: var(--arb-green-900); @@ -223,27 +290,6 @@ --ac-tag-alt-3-moderate-bg: var(--arb-whitealpha-50); --ac-tag-alt-3-filled-bg: var(--arb-whitealpha-100); - /* Stepper */ - --ac-stepper-non-interactive-line-completed: var(--arb-dark-mode-shade-600); - --ac-stepper-line: var(--a-border-subtle); - --ac-stepper-line-completed: var(--arb-blue-300); - --ac-stepper-active-border: var(--a-surface-action-selected); - - /* Table */ - --a-table-sort-button-sorted-text: var(--a-text-on-action); - - /* Popover */ - --ac-popover-bg: var(--arb-dark-mode-shade-100); - --ac-modal-bg: var(--arb-dark-mode-shade-100); - --ac-modal-backdrop: var(--a-surface-backdrop); - - /* Switch */ - --ac-switch-bg: var(--arb-dark-mode-shade-400); - --ac-switch-hover-bg: var(--arb-dark-mode-shade-500); - - /* Combobox */ - --ac-combobox-list-bg: var(--arb-dark-mode-shade-100); - /***************************************************** * Arbeidsplassen specific variables ******************************************************/ @@ -253,12 +299,18 @@ --arb-footer-bg: var(--arb-dark-mode-shade-100); --arb-footer-text: var(--a-text-default); + --arb-footer-focus-text: var(--arb-green-800); + + --arb-illustration-arms-and-legs: var(--arb-green-600); + --arb-illustration-face: var(--arb-green-700); + --arb-illustration-items: var(--arb-green-600); + --arb-illustration-shadow: var(--arb-whitealpha-50); --arb-link-panel-description-on-color: var(--a-text-default); --arb-link-panel-primary-bg: var(--arb-dark-mode-shade-100); --arb-link-panel-primary-text: var(--arb-green-200); --arb-link-panel-secondary-bg: var(--arb-dark-mode-shade-100); - --arb-link-panel-secondary-text: var(--a-blue-100); + --arb-link-panel-secondary-text: var(--arb-blue-100); --arb-link-panel-tertiary-bg: var(--arb-dark-mode-shade-100); --arb-link-panel-tertiary-text: var(--arb-peach-200); @@ -266,10 +318,5 @@ --arb-logo-letters: var(--arb-green-200); --arb-logo-inverted-bg: var(--arb-green-200); --arb-logo-inverted-letters: var(--arb-green-800); - - --arb-illustration-arms-and-legs: var(--arb-green-600); - --arb-illustration-face: var(--arb-green-700); - --arb-illustration-items: var(--arb-green-600); - --arb-illustration-shadow: var(--arb-whitealpha-50); } } diff --git a/src/packages/arbeidsplassen-theme/light.css b/src/packages/arbeidsplassen-theme/light.css index afe152e..ccdcb43 100644 --- a/src/packages/arbeidsplassen-theme/light.css +++ b/src/packages/arbeidsplassen-theme/light.css @@ -23,7 +23,7 @@ --a-surface-action: var(--arb-blue-500); --a-surface-action-hover: var(--arb-blue-600); - --a-surface-action-active: var(--arb-blue-800); + --a-surface-action-active: var(--arb-green-700); --a-surface-action-subtle: var(--arb-blue-50); --a-surface-action-subtle-hover: var(--arb-blue-50); --a-surface-action-selected: var(--arb-green-700); @@ -77,11 +77,14 @@ ******************************************************/ --a-text-default: var(--arb-green-800); --a-text-subtle: var(--arb-grayalpha-700); - --a-text-visited: var(--arb-blue-900); + --a-text-visited: var(--a-purple-500); --a-text-danger: var(--arb-red-500); + --a-text-action: var(--arb-blue-500); + --a-text-action-hover: var(--arb-blue-600); --a-text-action-selected: var(--arb-green-700); --a-text-action-on-action-subtle: var(--arb-blue-600); + --a-text-on-inverted: var(--arb-white); --a-text-on-neutral: var(--arb-white); --a-text-on-action: var(--arb-white); @@ -101,18 +104,22 @@ --a-border-divider: var(--arb-grayalpha-200); --a-border-subtle: var(--arb-grayalpha-200); --a-border-subtle-hover: var(--arb-grayalpha-300); + --a-border-on-inverted: var(--arb-gray-200); + --a-border-on-inverted-subtle: var(--arb-gray-700); + --a-border-action: var(--arb-blue-500); --a-border-action-hover: var(--arb-blue-500); --a-border-action-selected: var(--arb-blue-600); --a-border-selected: var(--arb-blue-600); + --a-border-success: var(--arb-green-400); --a-border-danger: var(--arb-red-500); --a-border-warning: var(--arb-orange-400); --a-border-info: var(--arb-blue-300); - --a-border-on-inverted: var(--arb-gray-200); - --a-border-on-inverted-subtle: var(--arb-gray-700); - --a-border-focus: var(--arb-blue-900); + + --a-border-focus: var(--arb-green-700); --a-border-focus-on-inverted: var(--arb-blue-200); + --a-border-alt-1: var(--arb-green-400); --a-border-alt-2: var(--arb-blue-300); --a-border-alt-3: var(--arb-peach-300); @@ -137,6 +144,7 @@ --a-icon-action: var(--arb-blue-500); --a-icon-action-selected: var(--arb-blue-700); + --a-icon-action-hover: var(--arb-blue-600); --a-icon-action-on-action-subtle: var(--arb-blue-600); --a-icon-on-neutral: var(--arb-white); @@ -167,6 +175,10 @@ --ac-alert-success-border: var(--arb-green-200); --ac-alert-success-bg: var(--arb-green-200); + /* Button */ + --ac-button-tertiary-focus-border: transparent; + --ac-button-tertiary-neutral-focus-border: transparent; + /* Chip */ --ac-chip-toggle-border: var(--a-border-action); --ac-chip-toggle-bg: var(--arb-transparent); @@ -175,6 +187,8 @@ --ac-chip-toggle-hover-bg: var(--a-surface-action-subtle); --ac-chip-toggle-circle-border: var(--a-border-action); + --ac-chip-toggle-neutral-border: var(--a-border-subtle); + --ac-chip-removable-neutral-border: var(--a-border-action); --ac-chip-removable-neutral-bg: var(--arb-transparent); --ac-chip-removable-neutral-text: var(--a-text-action); @@ -183,37 +197,56 @@ ); --ac-chip-removable-neutral-hover-bg: var(--a-surface-action-subtle); - /* Button */ - --ac-button-secondary-text: var(--arb-blue-500); - --ac-button-secondary-hover-text: var(--arb-blue-600); - --ac-button-secondary-border: var(--arb-blue-500); - --ac-button-tertiary-text: var(--arb-blue-500); - --ac-button-tertiary-hover-text: var(--arb-blue-600); - --ac-button-tertiary-focus-border: transparent; - --ac-button-tertiary-neutral-focus-border: transparent; + /* Combobox */ + --ac-combobox-list-item-selected-bg: var(--a-surface-alt-1-moderate); + --ac-combobox-list-item-selected-hover-bg: var(--a-surface-alt-1); + --ac-combobox-list-item-hover-border-left: var(--a-border-subtle-hover); + --ac-combobox-list-item-selected-hover-border-left: var(--a-border-focus); - /* Tabs */ - --ac-tabs-selected-border: var(--arb-green-400); + /* Dropdown */ + --ac-dropdown-item-active-bg: var(--a-surface-action-selected); + + /* Link */ + --ac-link-active-bg: var(--a-surface-action-selected); + + /* Modal */ + --ac-modal-bg: var(--a-surface-default); + --ac-modal-backdrop: var(--a-surface-backdrop); + + /* Popover */ + --ac-popover-bg: var(--a-surface-default); + --ac-popover-border: var(--a-border-divider); /* ReadMore */ --ac-read-more-hover-bg: var(--arb-blue-50); --ac-read-more-line: var(--arb-green-200); + /* Radio and Checkbox */ + --ac-radio-checkbox-action: var(--a-surface-action); + /* Stepper */ --ac-stepper-non-interactive-line-completed: var(--arb-grayalpha-600); --ac-stepper-line: var(--a-border-subtle); --ac-stepper-line-completed: var(--arb-blue-300); --ac-stepper-active-border: var(--a-surface-action-selected); - /* Popover */ - --ac-popover-bg: var(--a-surface-default); - --ac-popover-border: var(--a-border-divider); + /* Switch */ + --ac-switch-action: var(--a-text-action); + --ac-switch-bg: var(--a-surface-neutral); + --ac-switch-hover-bg: var(--a-surface-neutral); + --ac-switch-checked-bg: var(--a-surface-success); + --ac-switch-checked-hover-bg: var(--a-surface-success); + --ac-switch-thumb-bg: var(--a-surface-default); + --ac-switch-thumb-icon: var(--arb-grayalpha-500); + --ac-switch-thumb-icon-checked: var(--a-icon-success); - /* Dropdown */ - --ac-dropdown-item-active-bg: var(--a-text-action-selected); + /* Progress bar */ + --ac-progress-bar-fg: var(--arb-green-300); - /* Tag */ + /* Tabs */ + --ac-tabs-selected-border: var(--arb-green-400); + /* Tag */ --ac-tag-alt-1-bg: var(--a-surface-alt-1-subtle); --ac-tag-alt-1-moderate-bg: var(--a-surface-alt-1-moderate); --ac-tag-alt-1-filled-bg: var(--a-surface-alt-1); @@ -226,23 +259,6 @@ --ac-tag-alt-3-moderate-bg: var(--a-surface-alt-3-moderate); --ac-tag-alt-3-filled-bg: var(--a-surface-alt-3); - /* ComboBox */ - --ac-combobox-list-bg: var(--a-surface-action-subtle); - --ac-combobox-list-item-bg: var(--a-surface-action-subtle); - --ac-combobox-list-item-hover-bg: var(--arb-blue-100); - --ac-combobox-list-item-hover-border-left: var(--a-surface-action-active); - - /* Modal */ - --ac-modal-bg: var(--a-surface-default); - --ac-modal-backdrop: var(--a-surface-backdrop); - - /* Switch */ - --ac-switch-bg: var(--a-surface-neutral); - --ac-switch-hover-bg: var(--a-surface-neutral-hover); - - /* Radio and Checkbox */ - --ac-radio-checkbox-action: var(--a-surface-action); - /***************************************************** * Arbeidsplassen specific variables ******************************************************/ @@ -252,6 +268,12 @@ --arb-footer-bg: var(--a-surface-alt-1); --arb-footer-text: var(--arb-green-700); + --arb-footer-focus-text: var(--arb-white); + + --arb-illustration-arms-and-legs: var(--arb-green-700); + --arb-illustration-face: var(--arb-green-700); + --arb-illustration-shadow: var(--arb-blue-50); + --arb-illustration-items: var(--arb-green-700); --arb-link-panel-description-on-color: var(--arb-green-700); --arb-link-panel-primary-bg: var(--a-surface-alt-1); @@ -265,9 +287,4 @@ --arb-logo-letters: var(--arb-green-800); --arb-logo-inverted-bg: var(--arb-green-800); --arb-logo-inverted-letters: var(--arb-green-200); - - --arb-illustration-arms-and-legs: var(--arb-green-700); - --arb-illustration-face: var(--arb-green-700); - --arb-illustration-shadow: var(--arb-blue-50); - --arb-illustration-items: var(--arb-green-700); } diff --git a/src/packages/arbeidsplassen-theme/package.json b/src/packages/arbeidsplassen-theme/package.json index ef9e089..44bb217 100644 --- a/src/packages/arbeidsplassen-theme/package.json +++ b/src/packages/arbeidsplassen-theme/package.json @@ -1,6 +1,6 @@ { "name": "@navikt/arbeidsplassen-theme", - "version": "6.0.2", + "version": "6.0.5", "main": "index.css", "private": false, "scripts": { diff --git a/src/pages/Link.js b/src/pages/Link.js index 328ec39..b8172be 100644 --- a/src/pages/Link.js +++ b/src/pages/Link.js @@ -1,20 +1,28 @@ -import { BodyLong, Link } from "@navikt/ds-react"; +import { BodyLong, Link, VStack } from "@navikt/ds-react"; import Layout from "../examples/Layout"; const LinkExample = () => { return ( - Gå til jobbtreff - - - - Jobbtreff er en ny tjeneste på arbeidsplassen.no. + Jobbtreff er en ny tjeneste på arbeidsplassen.no. Nå kan du som er jobbsøker bli kjent med en bedrift som trenger folk. De forteller om hva slags kompetanse de trenger og om jobbmulighetene. Vi har forenklet søkeprosessen slik at du med noen få klikk kan vise hvorfor du er rett person for jobben. + + + + Action variant (default) + + + Neutral variant + + + Subtle variant + + ); }; diff --git a/src/pages/Switch.js b/src/pages/Switch.js index 7b3cec5..fa6ce17 100644 --- a/src/pages/Switch.js +++ b/src/pages/Switch.js @@ -1,10 +1,28 @@ -import { Switch } from "@navikt/ds-react"; +import { Switch, Heading } from "@navikt/ds-react"; import Layout from "../examples/Layout"; +function Template({ title, ...args }) { + return ( +
+ + {title} + + Motta beskjed på e-post ved nye treff + Motta beskjed på e-post ved nye treff +
+ ); +} + const SwitchExample = () => { return ( - Slå på notifikasjoner +
+ Standard + Motta beskjed på e-post ved nye treff +
+