Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
00259c629b | ||
|
|
6124812ba8 | ||
|
|
5f6bd160d6 | ||
|
|
b876ffb607 | ||
|
|
6886cf7a67 | ||
|
|
a9e58e7bb2 | ||
|
|
861803f5ae | ||
|
|
5d383b754f | ||
|
|
a8dc377870 | ||
|
|
ead0378644 | ||
|
|
10a6bc18c4 | ||
|
|
68d4b60f0e | ||
|
|
106e37bc54 | ||
|
|
78080293d3 | ||
|
|
d511210582 | ||
|
|
78b103bb3e | ||
|
|
9c78338164 | ||
|
|
08c9069879 | ||
|
|
3ab1645994 | ||
|
|
a64fc8905d | ||
|
|
5d83818c1b | ||
|
|
1148825a99 | ||
|
|
778b1a4932 | ||
|
|
74b77c0bba | ||
|
|
5fc4ea483d | ||
|
|
d002c03647 | ||
|
|
da1ffe8318 |
No files matched your search
@@ -2,6 +2,7 @@
|
||||
--navds-radio-checkbox-color-background: var(
|
||||
--navds-semantic-color-component-background-light
|
||||
);
|
||||
--navds-radio-checkbox-color-text: var(--navds-semantic-color-text);
|
||||
--navds-radio-checkbox-color-background-hover: var(
|
||||
--navds-semantic-color-interaction-primary-hover-subtle
|
||||
);
|
||||
@@ -73,7 +74,7 @@
|
||||
|
||||
.navds-checkbox__description,
|
||||
.navds-radio__description {
|
||||
color: var(--navds-color-text-primary);
|
||||
color: var(--navds-radio-checkbox-color-text);
|
||||
}
|
||||
|
||||
.navds-checkbox--small > .navds-checkbox__input,
|
||||
@@ -167,9 +168,15 @@
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked):not(:indeterminate):not(:focus)
|
||||
.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);
|
||||
}
|
||||
|
||||
.navds-checkbox__input:hover:not(:disabled):not(:checked):not(:indeterminate)
|
||||
+ .navds-checkbox__label::before,
|
||||
.navds-radio__input:hover:not(:disabled):not(:checked)
|
||||
+ .navds-radio__label::before {
|
||||
background-color: var(--navds-radio-checkbox-color-background-hover);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-css",
|
||||
"version": "0.14.1",
|
||||
"version": "0.15.3",
|
||||
"private": false,
|
||||
"description": "Css for NAV Designsystem components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -21,7 +21,7 @@
|
||||
"watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^0.8.0",
|
||||
"@navikt/ds-tokens": "^0.8.1",
|
||||
"normalize.css": "^8.0.1",
|
||||
"postcss": "^8.3.6",
|
||||
"postcss-cli": "^8.3.1",
|
||||
|
||||
@@ -4,34 +4,47 @@
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.navds-heading--2xlarge {
|
||||
.navds-heading--xlarge {
|
||||
font-size: var(--navds-font-size-heading-2xlarge);
|
||||
letter-spacing: -0.01em;
|
||||
line-height: var(--navds-font-line-height-heading-2xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--2xlarge.navds-typo--spacing {
|
||||
.navds-heading--xlarge.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-5);
|
||||
}
|
||||
|
||||
.navds-heading--xlarge {
|
||||
.navds-heading--large {
|
||||
font-size: var(--navds-font-size-heading-xlarge);
|
||||
letter-spacing: -0.008em;
|
||||
line-height: var(--navds-font-line-height-heading-xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--xlarge.navds-typo--spacing {
|
||||
.navds-heading--large.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-heading--large {
|
||||
font-size: var(--navds-font-size-heading-large);
|
||||
letter-spacing: -0.004em;
|
||||
line-height: var(--navds-font-line-height-heading-large);
|
||||
}
|
||||
/* Mobile scale */
|
||||
@media (max-width: 480px) {
|
||||
.navds-heading--xlarge {
|
||||
font-size: var(--navds-font-size-heading-xlarge);
|
||||
letter-spacing: -0.008em;
|
||||
line-height: var(--navds-font-line-height-heading-xlarge);
|
||||
}
|
||||
|
||||
.navds-heading--large.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
.navds-heading--xlarge.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-4);
|
||||
}
|
||||
|
||||
.navds-heading--large {
|
||||
font-size: var(--navds-font-size-heading-large);
|
||||
letter-spacing: -0.004em;
|
||||
line-height: var(--navds-font-line-height-heading-large);
|
||||
}
|
||||
|
||||
.navds-heading--large.navds-typo--spacing {
|
||||
margin-bottom: var(--navds-spacing-3);
|
||||
}
|
||||
}
|
||||
|
||||
.navds-heading--medium {
|
||||
|
||||
@@ -743,6 +743,18 @@
|
||||
"created_at": "2021-01-11T13:37:55.499Z",
|
||||
"pageName": "Status"
|
||||
},
|
||||
{
|
||||
"name": "Eu",
|
||||
"description": "",
|
||||
"created_at": "2022-02-08T11:45:47.104Z",
|
||||
"pageName": "International"
|
||||
},
|
||||
{
|
||||
"name": "EuFilled",
|
||||
"description": "",
|
||||
"created_at": "2022-02-08T11:45:47.109Z",
|
||||
"pageName": "International"
|
||||
},
|
||||
{
|
||||
"name": "Expand",
|
||||
"description": "",
|
||||
@@ -1007,6 +1019,30 @@
|
||||
"created_at": "2021-01-28T14:00:38.520Z",
|
||||
"pageName": "Fyrstikkalleen"
|
||||
},
|
||||
{
|
||||
"name": "FullscreenEnter",
|
||||
"description": "",
|
||||
"created_at": "2022-02-10T15:01:12.614Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "FullscreenEnterFilled",
|
||||
"description": "",
|
||||
"created_at": "2022-02-10T15:01:12.604Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "FullscreenExit",
|
||||
"description": "",
|
||||
"created_at": "2022-02-10T15:01:12.597Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "FullscreenExitFilled",
|
||||
"description": "",
|
||||
"created_at": "2022-02-10T15:01:12.608Z",
|
||||
"pageName": "Interface"
|
||||
},
|
||||
{
|
||||
"name": "Glass",
|
||||
"description": "",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-icons",
|
||||
"version": "0.8.1",
|
||||
"version": "0.8.4",
|
||||
"private": false,
|
||||
"description": "NAVs egne ikoner i SVG og React format",
|
||||
"repository": {
|
||||
|
||||
@@ -0,0 +1,10 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M11.6836 0.585361C11.7435 0.401105 12.0041 0.401105 12.064 0.585362L12.5383 2.04506C12.5651 2.12746 12.6419 2.18325 12.7286 2.18325H14.2632C14.4569 2.18325 14.5375 2.43117 14.3807 2.54505L13.1391 3.44712C13.069 3.49805 13.0397 3.58833 13.0664 3.67074L13.5407 5.13034C13.6006 5.3146 13.3897 5.46783 13.233 5.35394L11.9914 4.45183C11.9213 4.4009 11.8263 4.4009 11.7563 4.45183L10.5146 5.35397C10.3578 5.46785 10.1469 5.31462 10.2068 5.13036L10.6811 3.67074C10.7079 3.58833 10.6785 3.49805 10.6084 3.44712L9.36682 2.54505C9.21008 2.43117 9.29063 2.18325 9.48438 2.18325H11.0191C11.1057 2.18325 11.1825 2.12746 11.2093 2.04506L11.6836 0.585361Z" fill="#262626"/>
|
||||
<path d="M3.72187 3.991C3.63391 3.81837 3.81823 3.63404 3.99086 3.72199L5.38403 4.43175C5.46122 4.47108 5.55497 4.45623 5.61623 4.39497L6.72162 3.28964C6.85862 3.15264 7.09089 3.271 7.06057 3.46236L6.81595 5.00634C6.80239 5.09192 6.84548 5.1765 6.92269 5.21584L8.31573 5.92562C8.48835 6.01358 8.44758 6.27105 8.25622 6.30136L6.71211 6.54594C6.62654 6.55949 6.55942 6.62661 6.54587 6.71219L6.30129 8.25637C6.27098 8.44773 6.01351 8.48851 5.92555 8.31588L5.21577 6.92284C5.17643 6.84564 5.09185 6.80254 5.00627 6.8161L3.46232 7.06072C3.27095 7.09104 3.1526 6.85877 3.2896 6.72177L4.39497 5.61639C4.45624 5.55513 4.47109 5.46137 4.43175 5.38417L3.72187 3.991Z" fill="#262626"/>
|
||||
<path d="M0.585361 12.2186C0.401105 12.1587 0.401105 11.898 0.585362 11.8381L2.15739 11.3273C2.23979 11.3005 2.29558 11.2238 2.29558 11.1371V9.48437C2.29558 9.29062 2.54351 9.21007 2.65739 9.36682L3.62879 10.704C3.67971 10.7741 3.76999 10.8034 3.8524 10.7767L5.42439 10.2659C5.60866 10.206 5.76189 10.4169 5.64799 10.5737L4.6764 11.9108C4.62546 11.9809 4.62546 12.0758 4.6764 12.1459L5.64802 13.4831C5.76191 13.6398 5.60869 13.8507 5.42442 13.7909L3.85239 13.2801C3.76999 13.2533 3.67971 13.2827 3.62879 13.3528L2.65739 14.6899C2.54351 14.8467 2.29558 14.7661 2.29558 14.5724V12.9196C2.29558 12.8329 2.23979 12.7562 2.15739 12.7294L0.585361 12.2186Z" fill="#262626"/>
|
||||
<path d="M3.99086 20.0891C3.81823 20.177 3.63391 19.9927 3.72186 19.8201L4.43169 18.4269C4.47103 18.3497 4.45618 18.2559 4.39492 18.1947L3.28959 17.0893C3.15259 16.9523 3.27096 16.72 3.46232 16.7503L5.00638 16.995C5.09197 17.0086 5.17655 16.9655 5.21589 16.8883L5.92553 15.4953C6.01348 15.3226 6.27096 15.3634 6.30128 15.5548L6.54591 17.0989C6.55947 17.1845 6.62659 17.2516 6.71216 17.2651L8.25628 17.5097C8.44763 17.54 8.48841 17.7975 8.31579 17.8854L6.92289 18.5952C6.8457 18.6346 6.80261 18.7191 6.81616 18.8047L7.06069 20.3488C7.09099 20.5401 6.85872 20.6585 6.72173 20.5215L5.61627 19.416C5.55501 19.3548 5.46126 19.3399 5.38406 19.3793L3.99086 20.0891Z" fill="#262626"/>
|
||||
<path d="M12.064 23.1204C12.0041 23.3047 11.7435 23.3047 11.6836 23.1205L11.2092 21.6608C11.1824 21.5784 11.1056 21.5226 11.019 21.5226H9.4844C9.29066 21.5226 9.2101 21.2746 9.36685 21.1608L10.6085 20.2587C10.6786 20.2078 10.7079 20.1175 10.6812 20.0351L10.2068 18.5756C10.1469 18.3914 10.3578 18.2381 10.5146 18.352L11.7563 19.254C11.8264 19.3049 11.9213 19.3049 11.9914 19.254L13.233 18.352C13.3897 18.2381 13.6006 18.3914 13.5407 18.5756L13.0665 20.0351C13.0397 20.1175 13.069 20.2078 13.1391 20.2587L14.3807 21.1608C14.5375 21.2746 14.4569 21.5226 14.2632 21.5226H12.7285C12.6418 21.5226 12.565 21.5784 12.5383 21.6608L12.064 23.1204Z" fill="#262626"/>
|
||||
<path d="M20.0891 19.8201C20.177 19.9928 19.9927 20.1771 19.8201 20.0892L18.427 19.3794C18.3498 19.3401 18.2561 19.3549 18.1948 19.4162L17.0893 20.5217C16.9523 20.6587 16.72 20.5403 16.7503 20.3489L16.995 18.8047C17.0085 18.7191 16.9654 18.6345 16.8882 18.5952L15.4953 17.8855C15.3227 17.7975 15.3634 17.54 15.5548 17.5097L17.0989 17.2652C17.1845 17.2516 17.2516 17.1845 17.2651 17.0989L17.5097 15.5548C17.54 15.3634 17.7975 15.3226 17.8854 15.4953L18.5952 16.8883C18.6345 16.9655 18.7191 17.0086 18.8047 16.9951L20.3487 16.7504C20.5401 16.72 20.6584 16.9523 20.5214 17.0893L19.416 18.1949C19.3547 18.2562 19.3399 18.3499 19.3792 18.4271L20.0891 19.8201Z" fill="#262626"/>
|
||||
<path d="M23.4144 11.8382C23.5987 11.8981 23.5987 12.1588 23.4145 12.2187L21.8424 12.7295C21.76 12.7563 21.7042 12.8331 21.7042 12.9197V14.5726C21.7042 14.7663 21.4563 14.8469 21.3424 14.6901L20.3709 13.3528C20.3199 13.2827 20.2297 13.2534 20.1473 13.2802L18.5754 13.791C18.3912 13.8508 18.2379 13.64 18.3518 13.4832L19.3233 12.146C19.3743 12.0759 19.3743 11.981 19.3233 11.9109L18.3518 10.5737C18.2379 10.4169 18.3912 10.206 18.5754 10.2659L20.1473 10.7767C20.2297 10.8035 20.32 10.7742 20.371 10.7041L21.3424 9.36682C21.4563 9.21007 21.7042 9.29062 21.7042 9.48437V11.1373C21.7042 11.2239 21.76 11.3007 21.8424 11.3275L23.4144 11.8382Z" fill="#262626"/>
|
||||
<path d="M19.82 3.72203C19.9927 3.63407 20.177 3.8184 20.089 3.99102L19.3792 5.38419C19.3399 5.46139 19.3547 5.55514 19.416 5.61641L20.5214 6.72179C20.6584 6.85879 20.54 7.09107 20.3487 7.06075L18.8045 6.81606C18.719 6.8025 18.6344 6.8456 18.595 6.92281L17.8854 8.31578C17.7975 8.48842 17.54 8.44765 17.5097 8.25629L17.2651 6.71221C17.2515 6.62664 17.1844 6.55952 17.0988 6.54596L15.5547 6.30132C15.3634 6.271 15.3226 6.01354 15.4952 5.92558L16.8882 5.21585C16.9654 5.17652 17.0085 5.09194 16.9949 5.00635L16.7503 3.46238C16.72 3.27102 16.9522 3.15266 17.0892 3.28965L18.1948 4.39506C18.2561 4.45632 18.3498 4.47116 18.427 4.43183L19.82 3.72203Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.89543 0.895431 0 2 0H22C23.1046 0 24 0.895431 24 2V22C24 23.1046 23.1046 24 22 24H2C0.89543 24 0 23.1046 0 22V2ZM11.6942 1.58536C11.754 1.4011 12.0147 1.40111 12.0746 1.58536L12.4898 2.86313C12.5166 2.94553 12.5934 3.00132 12.68 3.00132H14.0233C14.2171 3.00132 14.2976 3.24925 14.1409 3.36313L13.054 4.15276C12.9839 4.20369 12.9546 4.29397 12.9814 4.37637L13.3966 5.65405C13.4564 5.83831 13.2455 5.99154 13.0888 5.87766L12.0019 5.08798C11.9318 5.03705 11.8369 5.03705 11.7668 5.08798L10.6799 5.87768C10.5231 5.99156 10.3123 5.83833 10.3721 5.65407L10.7873 4.37637C10.8141 4.29397 10.7848 4.20369 10.7147 4.15276L9.6278 3.36313C9.47105 3.24925 9.55161 3.00132 9.74535 3.00132H11.0888C11.1754 3.00132 11.2522 2.94553 11.279 2.86313L11.6942 1.58536ZM4.704 4.43512C4.53138 4.34717 4.34706 4.5315 4.43502 4.70413L5.05696 5.92473C5.0963 6.00193 5.08145 6.09568 5.02018 6.15695L4.05175 7.12538C3.91475 7.26238 4.03311 7.49465 4.22447 7.46433L5.57715 7.25002C5.66273 7.23646 5.74731 7.27955 5.78664 7.35676L6.40849 8.57722C6.49645 8.74985 6.75392 8.70907 6.78423 8.51772L6.99851 7.16483C7.01207 7.07925 7.07919 7.01213 7.16476 6.99858L8.51758 6.7843C8.70894 6.75399 8.74972 6.49652 8.57709 6.40856L7.35662 5.78671C7.27941 5.74737 7.23632 5.66279 7.24988 5.57721L7.4642 4.22451C7.49452 4.03315 7.26225 3.91479 7.12524 4.05178L6.1568 5.02018C6.09553 5.08144 6.00179 5.09629 5.92459 5.05696L4.704 4.43512ZM1.58536 12.2163C1.40111 12.1564 1.40111 11.8957 1.58536 11.8358L2.9661 11.3872C3.0485 11.3604 3.10429 11.2836 3.10429 11.197V9.74534C3.10429 9.55159 3.35223 9.47104 3.4661 9.6278L4.31929 10.8023C4.37021 10.8724 4.46049 10.9017 4.5429 10.8749L5.9236 10.4263C6.10787 10.3664 6.26109 10.5773 6.1472 10.7341L5.29384 11.9085C5.24291 11.9786 5.24291 12.0735 5.29384 12.1436L6.14722 13.3181C6.26111 13.4748 6.10789 13.6857 5.92363 13.6258L4.5429 13.1772C4.46049 13.1505 4.37022 13.1798 4.31929 13.2499L3.4661 14.4243C3.35222 14.5811 3.10429 14.5005 3.10429 14.3068V12.8551C3.10429 12.7685 3.0485 12.6917 2.9661 12.6649L1.58536 12.2163ZM4.43501 19.1228C4.34705 19.2954 4.53138 19.4798 4.704 19.3918L5.92462 18.7699C6.00182 18.7306 6.09557 18.7454 6.15684 18.8067L7.12535 19.7752C7.26234 19.9122 7.49461 19.7938 7.46431 19.6025L7.25008 18.2497C7.23652 18.1641 7.27961 18.0796 7.35681 18.0402L8.57716 17.4184C8.74977 17.3304 8.70899 17.0729 8.51764 17.0426L7.1648 16.8283C7.07923 16.8148 7.01212 16.7477 6.99856 16.6621L6.78423 15.3093C6.75391 15.1179 6.49643 15.0771 6.40848 15.2498L5.78675 16.4702C5.74742 16.5474 5.66283 16.5905 5.57724 16.577L4.22447 16.3626C4.03311 16.3323 3.91475 16.5645 4.05174 16.7015L5.02013 17.67C5.0814 17.7312 5.09624 17.825 5.05691 17.9022L4.43501 19.1228ZM12.0746 22.1451C12.0147 22.3293 11.754 22.3293 11.6942 22.1451L11.2789 20.8673C11.2521 20.7849 11.1753 20.7291 11.0887 20.7291H9.74537C9.55163 20.7291 9.47107 20.4812 9.62782 20.3673L10.7147 19.5777C10.7848 19.5268 10.8142 19.4365 10.7874 19.3541L10.3722 18.0765C10.3123 17.8923 10.5232 17.739 10.6799 17.8529L11.7668 18.6425C11.8369 18.6934 11.9318 18.6934 12.0019 18.6425L13.0888 17.8529C13.2455 17.739 13.4564 17.8923 13.3965 18.0765L12.9814 19.3541C12.9546 19.4365 12.9839 19.5268 13.054 19.5777L14.1409 20.3673C14.2976 20.4812 14.2171 20.7291 14.0233 20.7291H12.6799C12.5933 20.7291 12.5165 20.7849 12.4897 20.8673L12.0746 22.1451ZM19.1228 19.3919C19.2954 19.4798 19.4798 19.2955 19.3918 19.1229L18.7699 17.9024C18.7305 17.8252 18.7454 17.7314 18.8066 17.6702L19.7752 16.7016C19.9121 16.5646 19.7938 16.3323 19.6024 16.3626L18.2497 16.577C18.1641 16.5905 18.0795 16.5475 18.0402 16.4702L17.4184 15.2498C17.3304 15.0771 17.0729 15.1179 17.0426 15.3093L16.8283 16.6621C16.8148 16.7477 16.7477 16.8148 16.6621 16.8284L15.3093 17.0426C15.1179 17.073 15.0772 17.3304 15.2498 17.4184L16.4702 18.0402C16.5474 18.0795 16.5905 18.1641 16.5769 18.2497L16.3626 19.6026C16.3322 19.794 16.5645 19.9123 16.7015 19.7753L17.6701 18.8068C17.7313 18.7456 17.8251 18.7307 17.9023 18.77L19.1228 19.3919ZM22.4146 11.8359C22.5988 11.8958 22.5988 12.1565 22.4146 12.2164L21.0338 12.665C20.9514 12.6918 20.8956 12.7686 20.8956 12.8552V14.3069C20.8956 14.5007 20.6477 14.5812 20.5338 14.4245L19.6805 13.25C19.6296 13.1798 19.5393 13.1505 19.4569 13.1773L18.0763 13.6259C17.8921 13.6858 17.7389 13.4749 17.8527 13.3182L18.706 12.1437C18.757 12.0736 18.757 11.9787 18.706 11.9086L17.8527 10.7341C17.7388 10.5773 17.8921 10.3664 18.0763 10.4263L19.457 10.875C19.5394 10.9017 19.6297 10.8724 19.6806 10.8023L20.5338 9.6278C20.6477 9.47104 20.8956 9.55159 20.8956 9.74534V11.1971C20.8956 11.2838 20.9514 11.3605 21.0338 11.3873L22.4146 11.8359ZM19.3918 4.70416C19.4797 4.53153 19.2954 4.34721 19.1228 4.43517L17.9023 5.05703C17.8251 5.09637 17.7314 5.08152 17.6701 5.02027L16.7015 4.05179C16.5645 3.9148 16.3322 4.03316 16.3625 4.22452L16.5769 5.57722C16.5904 5.6628 16.5473 5.74738 16.4701 5.78672L15.2497 6.40853C15.0771 6.49648 15.1179 6.75395 15.3092 6.78427L16.6621 6.9986C16.7476 7.01216Line truncated
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.3 KiB |
@@ -1,4 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2 23V10C2 9.44772 2.44772 9 3 9H11.5556C12.1078 9 12.5556 9.44772 12.5556 10V12H21C21.5523 12 22 12.4477 22 13V23C22 23.5523 21.5523 24 21 24H3C2.44772 24 2 23.5523 2 23Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M4 0H20V10H14V9C14 7.89543 13.1046 7 12 7H4V0ZM8 5H16V3H8V5Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M20 0H4V7H12C13.1046 7 14 7.89543 14 9V10H20V0ZM16 5H8V3H16V5ZM2 10V23C2 23.5523 2.44772 24 3 24H21C21.5523 24 22 23.5523 22 23V13C22 12.4477 21.5523 12 21 12H12.5556V10C12.5556 9.44772 12.1078 9 11.5556 9H3C2.44772 9 2 9.44772 2 10Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 430 B After Width: | Height: | Size: 404 B |
@@ -1,4 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M13 1V6H18" stroke="#262626" stroke-width="2"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4142 0H2V22H11V20H4V2H13.5858L17 5.41421V16H19V4.58579L14.4142 0ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M2 0H14.4142L19 4.58579V16H17V7H12V2H4V20H11V22H2V0ZM14 2.41421L16.5858 5H14V2.41421ZM22.2689 14.3177L16.0317 21.0004L13.7593 18.3492L12.2407 19.6508L15.9683 23.9996L23.7311 15.6823L22.2689 14.3177Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 410 B After Width: | Height: | Size: 369 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.5857 5L12.2928 10.2929L13.707 11.7071L19 6.41412V11H21V3H13V5L17.5857 5ZM5 13V17.5859L10.293 12.2929L11.7072 13.7071L6.4143 19H11V21H3V13H5Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 315 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM12.2928 10.2929L17.5857 5L13 5V3H21V11H19V6.41412L13.707 11.7071L12.2928 10.2929ZM5 17.5859V13H3V21H11V19H6.4143L11.7072 13.7071L10.293 12.2929L5 17.5859Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 449 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.414 8.99999L21.7068 3.7071L20.2926 2.29288L14.9999 7.58561V2.99999H12.9999V11H20.9999V8.99999H16.414ZM7.58562 15L2.29272 20.2929L3.70694 21.7071L8.99991 16.4141L8.99991 21H10.9999L10.9999 13L2.99991 13L2.99991 15L7.58562 15Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 399 B |
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447716 0 1V23C0 23.5523 0.447716 24 1 24H23C23.5523 24 24 23.5523 24 23V1C24 0.447715 23.5523 0 23 0H1ZM21.7068 3.70709L16.414 8.99998H20.9999V11H12.9999V2.99998H14.9999V7.5856L20.2926 2.29288L21.7068 3.70709ZM2.29272 20.2929L7.58562 15L2.99991 15L2.99991 13L10.9999 13L10.9999 21H8.99991V16.4141L3.70694 21.7071L2.29272 20.2929Z" fill="#262626"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 520 B |
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react",
|
||||
"version": "0.15.2",
|
||||
"version": "0.16.7",
|
||||
"private": false,
|
||||
"description": "NAV designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -35,7 +35,7 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@material-ui/core": "^4.12.3",
|
||||
"@navikt/ds-icons": "^0.8.1",
|
||||
"@navikt/ds-icons": "^0.8.4",
|
||||
"@popperjs/core": "^2.10.1",
|
||||
"classnames": "^2.2.6",
|
||||
"react-collapse": "^5.1.0",
|
||||
|
||||
@@ -36,13 +36,13 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
|
||||
const Icon = ({ variant, ...props }) => {
|
||||
switch (variant) {
|
||||
case "error":
|
||||
return <ErrorFilled {...props} />;
|
||||
return <ErrorFilled title="Feil" {...props} />;
|
||||
case "warning":
|
||||
return <WarningFilled {...props} />;
|
||||
return <WarningFilled title="Advarsel" {...props} />;
|
||||
case "info":
|
||||
return <InformationFilled {...props} />;
|
||||
return <InformationFilled title="Informasjon" {...props} />;
|
||||
case "success":
|
||||
return <SuccessFilled {...props} />;
|
||||
return <SuccessFilled title="Suksess" {...props} />;
|
||||
default:
|
||||
return null;
|
||||
}
|
||||
@@ -76,11 +76,7 @@ const Alert = forwardRef<HTMLDivElement, AlertProps>(
|
||||
{ "navds-alert--full-width": fullWidth, "navds-alert--inline": inline }
|
||||
)}
|
||||
>
|
||||
<Icon
|
||||
title={`${variant}-ikon`}
|
||||
variant={variant}
|
||||
className="navds-alert__icon"
|
||||
/>
|
||||
<Icon variant={variant} className="navds-alert__icon" />
|
||||
<BodyLong as="div" size={size} className="navds-alert__wrapper">
|
||||
{children}
|
||||
</BodyLong>
|
||||
|
||||
@@ -5,6 +5,9 @@ import { Success } from "@navikt/ds-icons";
|
||||
export default {
|
||||
title: "ds-react/button",
|
||||
component: Button,
|
||||
parameters: {
|
||||
chromatic: { delay: 300 },
|
||||
},
|
||||
};
|
||||
|
||||
const Section = ({ children }) => (
|
||||
|
||||
@@ -27,14 +27,14 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
|
||||
) => {
|
||||
const buttonRef = useRef<HTMLButtonElement | null>(null);
|
||||
const mergedRef = mergeRefs([buttonRef, ref]);
|
||||
const popoverRef = useRef<HTMLDivElement | null>(null);
|
||||
const [popoverRef, setPopoverRef] = useState<HTMLDivElement | null>(null);
|
||||
const wrapperRef = useRef<HTMLDivElement | null>(null);
|
||||
|
||||
const [open, setOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
open && popoverRef.current?.focus();
|
||||
}, [open]);
|
||||
open && popoverRef?.focus?.();
|
||||
}, [open, popoverRef]);
|
||||
|
||||
const handleClick = (
|
||||
e: React.MouseEvent<HTMLButtonElement, MouseEvent>
|
||||
@@ -42,7 +42,6 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
|
||||
setOpen((x) => !x);
|
||||
rest.onClick && rest.onClick(e);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="navds-help-text" ref={wrapperRef}>
|
||||
<button
|
||||
@@ -59,7 +58,7 @@ const HelpText = forwardRef<HTMLButtonElement, HelpTextProps>(
|
||||
<span className="navds-sr-only">{title}</span>
|
||||
</button>
|
||||
<Popover
|
||||
ref={popoverRef}
|
||||
ref={setPopoverRef}
|
||||
onClose={() => setOpen(false)}
|
||||
className="navds-help-text__popover"
|
||||
open={open}
|
||||
|
||||
@@ -33,6 +33,9 @@ export interface ModalProps {
|
||||
* @default true
|
||||
*/
|
||||
closeButton?: boolean;
|
||||
"aria-labelledby"?: string;
|
||||
"aria-describedby"?: string;
|
||||
"aria-modal"?: boolean;
|
||||
}
|
||||
|
||||
interface ModalComponent
|
||||
@@ -56,6 +59,9 @@ const Modal = forwardRef<ReactModal, ModalProps>(
|
||||
className,
|
||||
shouldCloseOnOverlayClick = true,
|
||||
closeButton = true,
|
||||
"aria-describedby": ariaDescribedBy,
|
||||
"aria-labelledby": ariaLabelledBy,
|
||||
"aria-modal": ariaModal,
|
||||
...rest
|
||||
},
|
||||
ref
|
||||
@@ -81,6 +87,11 @@ const Modal = forwardRef<ReactModal, ModalProps>(
|
||||
overlayClassName="navds-modal__overlay"
|
||||
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick}
|
||||
onRequestClose={(e) => onModalCloseRequest(e)}
|
||||
aria={{
|
||||
describedby: ariaDescribedBy,
|
||||
labelledby: ariaLabelledBy,
|
||||
modal: ariaModal,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
{closeButton && (
|
||||
|
||||
@@ -55,11 +55,7 @@ const PageHeader = forwardRef<HTMLDivElement, PageHeaderProps>(
|
||||
<div className="navds-page-header__illustration">{illustration}</div>
|
||||
)}
|
||||
<div className="navds-page-header__wrapper">
|
||||
<Heading
|
||||
className="navds-page-header__title"
|
||||
size="2xlarge"
|
||||
level="1"
|
||||
>
|
||||
<Heading className="navds-page-header__title" size="xlarge" level="1">
|
||||
{children}
|
||||
</Heading>
|
||||
{description && (
|
||||
|
||||
@@ -3,7 +3,7 @@ import cl from "classnames";
|
||||
import { BodyShort } from "..";
|
||||
import { TableContext } from ".";
|
||||
|
||||
interface DataCellProps extends React.HTMLAttributes<HTMLTableCellElement> {}
|
||||
interface DataCellProps extends React.TdHTMLAttributes<HTMLTableCellElement> {}
|
||||
|
||||
export interface DataCellType
|
||||
extends React.ForwardRefExoticComponent<
|
||||
|
||||
@@ -2,7 +2,7 @@ import React, { forwardRef, useContext } from "react";
|
||||
import cl from "classnames";
|
||||
import { Label, TableContext } from "..";
|
||||
|
||||
interface HeaderCellProps extends React.HTMLAttributes<HTMLTableCellElement> {
|
||||
interface HeaderCellProps extends React.ThHTMLAttributes<HTMLTableCellElement> {
|
||||
scope?: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -6,7 +6,8 @@ import Row, { RowType } from "./Row";
|
||||
import HeaderCell, { HeaderCellType } from "./HeaderCell";
|
||||
import DataCell, { DataCellType } from "./DataCell";
|
||||
|
||||
export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
|
||||
export interface TableProps
|
||||
extends React.TableHTMLAttributes<HTMLTableElement> {
|
||||
/**
|
||||
* Changes padding
|
||||
* @default "medium"
|
||||
|
||||
@@ -11,7 +11,7 @@ export interface HeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
||||
/**
|
||||
* Sizes from largest "2xl" to smallest "s"
|
||||
*/
|
||||
size: "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";
|
||||
size: "xlarge" | "large" | "medium" | "small" | "xsmall";
|
||||
/**
|
||||
* Heading text
|
||||
*/
|
||||
|
||||
@@ -1,3 +0,0 @@
|
||||
.typo-story > div:nth-child(even) {
|
||||
background: var(--navds-global-color-gray-200);
|
||||
}
|
||||
@@ -1,83 +0,0 @@
|
||||
import { Meta } from "@storybook/addon-docs";
|
||||
import { Alert, Heading, BodyLong } from "@navikt/ds-react";
|
||||
|
||||
<Meta title="ds-react/Typography/intro" />
|
||||
|
||||
# Hvordan ta i bruk typografien
|
||||
|
||||
Typografien kan tas i bruk som React komponenter eller ved å ta i bruk css-stilene.
|
||||
Se eksemplene under ds-react tabben her i storybook for å se hvordan man tar i bruk både react og stilpakken for dette oppsettet.
|
||||
|
||||
Oppsettet er forbedret med blandt annet letter-spacing og line-height.
|
||||
I tillegg kan man nå sette `spacing` proppen og man får da automatisk margin-bottom på typo-elementet.
|
||||
Da kan man lett sikre riktig spacing mellom tekst i en artikkel.
|
||||
|
||||
Font-size er skrevet med REM, men basert på 16px root font size.
|
||||
Dette vil si at de som har forstørret font-size på root vil ende opp med større font enn forventet.
|
||||
For de som har satt root font size til 18px (1.125rem) kan da "fikse" dette ved å endre tilbake til 16px,
|
||||
da det nye typo-oppsettet fikser større font, eller man ta i bruk css-en under.
|
||||
|
||||
Denne stylingen vil overskrive default variablene og tilpasse font-size.
|
||||
|
||||
```css
|
||||
/* autogenerated fix for 18px root-font-size*/
|
||||
:root {
|
||||
--navds-font-size-heading-2xlarge: 2.2222222222222223rem;
|
||||
--navds-font-size-heading-xlarge: 1.7777777777777777rem;
|
||||
--navds-font-size-heading-large: 1.5555555555555556rem;
|
||||
--navds-font-size-heading-medium: 1.3333333333333333rem;
|
||||
--navds-font-size-heading-small: 1.1111111111111112rem;
|
||||
--navds-font-size-xlarge: 1.1111111111111112rem;
|
||||
--navds-font-size-large: 1rem;
|
||||
--navds-font-size-medium: 0.8888888888888888rem;
|
||||
--navds-font-size-small: 0.7777777777777778rem;
|
||||
}
|
||||
```
|
||||
|
||||
Vi anbefaler å før eller siden endre tilbake til default root font size da designsystemet sine nye
|
||||
komponenter og design-tokens er basert på dette. Endringen til 18px root font size var i grunn for å teste en løsning for å
|
||||
forstørre font, noe som er fikset ved nye typo-løsningen. Vi vil derfor unngå å måtte ha midlertidge patcher/fikser
|
||||
for å tilpasse systemet for alle de forskjellige variantene av font size på root.
|
||||
|
||||
## Migrasjonsguide fra `nav-frontend-typografi` til `@navikt/ds-react`
|
||||
|
||||
De nye typografi-komponentene er ikke helt en-til-en med de gamle, så det kan hende du må trekke på en designer om du er usikker på hvilken komponent du skal velge. Eller du kan spørre en av oss i designsystemet.
|
||||
|
||||
### Overskrifter
|
||||
|
||||
Overskrifters tekststørrelse er nå uavhengig heading-nivå. Det betyr at du står fritt til å sørge for at overskrift-hierarkiet stemmer for din side, uavhengig av visuelt hierarki. Før kunne det være trøblete om men f.eks. ønsket seg en h1, men `<Sidetittel>` opplevdes som for stor.
|
||||
|
||||
En direkte en-til-en oversettelse av gamle komponenter til nye, hvor man bevarer størrelsene, ser sånn ut:
|
||||
|
||||
`<Sidetittel> -> <Heading size="2xlarge">`
|
||||
|
||||
`<Innholdstittel> -> <Heading size="xlarge">`
|
||||
|
||||
`<Systemtittel> -> <Heading size="medium">`
|
||||
|
||||
`<Undertittel> -> <Heading size="small">`
|
||||
|
||||
<Alert variant="warning">
|
||||
Pass på å sette riktig `level` i hver Heading-komponent for å ivareta
|
||||
hierarkiet (h1-h6).
|
||||
</Alert>
|
||||
|
||||
### Brødtekst
|
||||
|
||||
De nye komponentene for brødtekst heter `<BodyLong>` og `<BodyShort>`. `<BodyLong>` er ment å brukes der det er snakk om løpende tekst, f.eks. i en artikkel. I komponent-tekst som med fordel kan være mer kompakt skal `<BodyShort>` brukes, for den har en lavere linjehøyde.
|
||||
|
||||
Ny brødtekst-størrelse er 18px. Om du bygger grensesnitt med kompakt design (les; interne flater) der du ønsker å fortsette å bruke 16px brødtekst så finnes det en `<BodyLong size="small">` og `<BodyShort size="small">` som er til for deg.
|
||||
|
||||
`<Normaltekst> ->` `<BodyLong>`/`<BodyShort>` (muligens med `size=small`)
|
||||
|
||||
### Andre komponenter
|
||||
|
||||
`<Ingress> -> <Ingress>`
|
||||
|
||||
`<Element> -> <Label>`
|
||||
|
||||
`<UndertekstBold> -> <Detail>`
|
||||
|
||||
`<Undertekst> -> <Detail size="small">`
|
||||
|
||||
`<Feilmelding>` Denne har vi valgt å ikke videreføre, for vi er usikre på om det er behov for en egen komponent. Skriv gjerne en melding på #designsystem eller send en PM til @andreas.nordahl eller @ken.aleksander.johansen om du savner den.
|
||||
@@ -1,6 +1,5 @@
|
||||
import React from "react";
|
||||
import { Heading, BodyShort, BodyLong, Detail, Ingress, Label } from "../index";
|
||||
import "./index.css";
|
||||
|
||||
export default {
|
||||
title: "ds-react/typography",
|
||||
@@ -16,7 +15,7 @@ const TitleTemplate = ({ level, size, spacing }) => (
|
||||
);
|
||||
|
||||
export const HeadingStory = TitleTemplate.bind({});
|
||||
HeadingStory.args = { level: 1, size: "2xlarge", spacing: false };
|
||||
HeadingStory.args = { level: 1, size: "xlarge", spacing: false };
|
||||
|
||||
const IngressTemplate = ({ spacing }) => (
|
||||
<Ingress spacing={spacing}>{lorem()}</Ingress>
|
||||
@@ -64,8 +63,8 @@ DetailStory.args = { spacing: false, size: "medium" };
|
||||
export const SideInnholdEksempel = () => {
|
||||
return (
|
||||
<div style={{ maxWidth: 600 }}>
|
||||
<Heading level={"1"} size="2xlarge" spacing>
|
||||
Title lvl 1 2xlarge
|
||||
<Heading level={"1"} size="xlarge" spacing>
|
||||
Title lvl 1 xlarge
|
||||
</Heading>
|
||||
<BodyLong spacing>
|
||||
BodyLong: Aliqua ad et nisi commodo sit excepteur in commodo proident
|
||||
@@ -87,7 +86,7 @@ export const SideInnholdEksempel = () => {
|
||||
sunt proident irure consectetur excepteur.
|
||||
</BodyLong>
|
||||
<Heading level={"2"} size="xlarge" spacing>
|
||||
Title lvl 2 xlarge
|
||||
Title lvl 2 large
|
||||
</Heading>
|
||||
<Ingress spacing>
|
||||
Ingress: Mollit incididunt incididunt officia amet est et non aliqua
|
||||
@@ -0,0 +1,2 @@
|
||||
src/tokens.ts
|
||||
tailwind.config.js
|
||||
@@ -0,0 +1,5 @@
|
||||
module.exports = {
|
||||
transform: {
|
||||
"^.+\\.ts?$": "ts-jest",
|
||||
},
|
||||
};
|
||||
@@ -0,0 +1,33 @@
|
||||
{
|
||||
"name": "@navikt/ds-tailwind",
|
||||
"version": "0.1.2",
|
||||
"private": false,
|
||||
"description": "Auto-generated tailwind config based on @navikt/ds-tokens",
|
||||
"author": "NAV Designsystem team",
|
||||
"keywords": [
|
||||
"tailwind",
|
||||
"design-tokens"
|
||||
],
|
||||
"main": "tailwind.config.js",
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"tailwind.config.js"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "ts-node ./src",
|
||||
"test": "jest"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/navikt/nav-frontend-moduler.git",
|
||||
"directory": "@navikt/core/tailwind"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@navikt/ds-tokens": "^0.8.1",
|
||||
"@types/jest": "^27.0.1",
|
||||
"jest": "^27.2.0",
|
||||
"lodash": "^4.17.21",
|
||||
"ts-jest": "^27.0.5",
|
||||
"ts-node": "^10.3.0"
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,34 @@
|
||||
// @ts-ignore
|
||||
import * as TokensBuild from "@navikt/ds-tokens/dist/tokens";
|
||||
import { writeFileSync } from "fs";
|
||||
import { kebabCase } from "lodash";
|
||||
import Reducer from "./reducer";
|
||||
|
||||
const tokens = Object.entries(TokensBuild).reduce(
|
||||
(old, [key, val]) => ({
|
||||
...old,
|
||||
[kebabCase(key).replace("navds-", "")]: val,
|
||||
}),
|
||||
{}
|
||||
);
|
||||
|
||||
const config = {
|
||||
theme: {
|
||||
colors: Reducer(tokens, ["semantic-color", "global-color"]),
|
||||
extend: {
|
||||
spacing: Reducer(tokens, ["spacing"]),
|
||||
zIndex: Reducer(tokens, ["z-index"]),
|
||||
boxShadow: Reducer(tokens, ["shadow"]),
|
||||
fontWeight: Reducer(tokens, ["font-weight"]),
|
||||
fontSize: Reducer(tokens, ["font-size"]),
|
||||
lineHeight: Reducer(tokens, ["font-line-height"]),
|
||||
fontFamily: Reducer(tokens, ["font-family"]),
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
const outputString = `module.exports = ${JSON.stringify(config, null, 2)};`;
|
||||
|
||||
writeFileSync("tailwind.config.js", outputString);
|
||||
|
||||
console.log("Success: Tailwind config ");
|
||||
@@ -0,0 +1,20 @@
|
||||
const replaceKey = (s: string, keys: string[]) => {
|
||||
let key = s;
|
||||
keys.forEach((k) => {
|
||||
key = key.replace(`${k}-`, "");
|
||||
});
|
||||
return key;
|
||||
};
|
||||
|
||||
/* Cherry-picks object keys we want */
|
||||
const Reducer = (
|
||||
tokens: { [key: string]: string | number },
|
||||
replace: string[]
|
||||
) =>
|
||||
Object.entries(tokens).reduce((old, [key, value]) => {
|
||||
return replace.find((v) => key.startsWith(v))
|
||||
? { ...old, [replaceKey(key, replace)]: value }
|
||||
: { ...old };
|
||||
}, {});
|
||||
|
||||
export default Reducer;
|
||||
@@ -0,0 +1,42 @@
|
||||
import Reducer from "../reducer";
|
||||
|
||||
describe("Check correct parsing of tailind tokens", () => {
|
||||
test("Check reducer function", () => {
|
||||
expect(
|
||||
Reducer(
|
||||
{
|
||||
"shadow-focus-inverted":
|
||||
"0 0 0 3px var(navds-semantic-color-focus-inverted)",
|
||||
"z-index-focus": 10,
|
||||
"global-color-blue-300": "rgba(102, 165, 244, 1)",
|
||||
"semantic-color-interaction-primary":
|
||||
"var(--navds-gloab-color-blue-300)",
|
||||
},
|
||||
["shadow"]
|
||||
)
|
||||
).toEqual({
|
||||
"focus-inverted": "0 0 0 3px var(navds-semantic-color-focus-inverted)",
|
||||
});
|
||||
});
|
||||
test("Check reducer function with multiple keys", () => {
|
||||
expect(
|
||||
Reducer(
|
||||
{
|
||||
"shadow-focus-inverted":
|
||||
"0 0 0 3px var(navds-semantic-color-focus-inverted)",
|
||||
"z-index-focus": 10,
|
||||
"global-color-transparent": "rgba(255, 255, 255, 0)",
|
||||
"global-color-white": "rgba(255, 255, 255, 1)",
|
||||
"semantic-color-border-inverted": "var(navds-global-color-gray-200)",
|
||||
"semantic-color-border-muted": "var(navds-global-color-gray-400)",
|
||||
},
|
||||
["global-color", "semantic-color"]
|
||||
)
|
||||
).toEqual({
|
||||
transparent: "rgba(255, 255, 255, 0)",
|
||||
white: "rgba(255, 255, 255, 1)",
|
||||
"border-inverted": "var(navds-global-color-gray-200)",
|
||||
"border-muted": "var(navds-global-color-gray-400)",
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"esModuleInterop": true,
|
||||
"allowJs": true
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@@ -9,6 +9,7 @@ StyleDictionary.registerTransform({
|
||||
});
|
||||
|
||||
const StyleDictionaryExtended = StyleDictionary.extend(
|
||||
__dirname + "/config.json"
|
||||
__dirname + "/config.js"
|
||||
);
|
||||
|
||||
StyleDictionaryExtended.buildAllPlatforms();
|
||||
@@ -0,0 +1,52 @@
|
||||
module.exports = {
|
||||
source: ["src/index.js", "src/**/*.json"],
|
||||
platforms: {
|
||||
scss: {
|
||||
transformGroup: "scss",
|
||||
buildPath: "dist/",
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.scss",
|
||||
format: "scss/variables",
|
||||
},
|
||||
],
|
||||
},
|
||||
less: {
|
||||
transformGroup: "less",
|
||||
buildPath: "dist/",
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.less",
|
||||
format: "less/variables",
|
||||
},
|
||||
],
|
||||
},
|
||||
css: {
|
||||
transformGroup: "css",
|
||||
buildPath: "dist/",
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.css",
|
||||
format: "css/variables",
|
||||
options: {
|
||||
outputReferences: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
js: {
|
||||
transformGroup: "js",
|
||||
buildPath: "dist/",
|
||||
files: [
|
||||
{
|
||||
destination: "tokens.js",
|
||||
format: "javascript/es6",
|
||||
},
|
||||
{
|
||||
destination: "tokens-cjs.js",
|
||||
format: "javascript/module-flat",
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -1,52 +0,0 @@
|
||||
{
|
||||
"source": ["src/index.js", "src/**/*.json"],
|
||||
"platforms": {
|
||||
"scss": {
|
||||
"transformGroup": "scss",
|
||||
"buildPath": "dist/",
|
||||
"files": [
|
||||
{
|
||||
"destination": "tokens.scss",
|
||||
"format": "scss/variables"
|
||||
}
|
||||
]
|
||||
},
|
||||
"less": {
|
||||
"transformGroup": "less",
|
||||
"buildPath": "dist/",
|
||||
"files": [
|
||||
{
|
||||
"destination": "tokens.less",
|
||||
"format": "less/variables"
|
||||
}
|
||||
]
|
||||
},
|
||||
"css": {
|
||||
"transformGroup": "css",
|
||||
"buildPath": "dist/",
|
||||
"files": [
|
||||
{
|
||||
"destination": "tokens.css",
|
||||
"format": "css/variables",
|
||||
"options": {
|
||||
"outputReferences": true
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
"js": {
|
||||
"transformGroup": "js",
|
||||
"buildPath": "dist/",
|
||||
"files": [
|
||||
{
|
||||
"destination": "tokens.js",
|
||||
"format": "javascript/es6"
|
||||
},
|
||||
{
|
||||
"destination": "tokens-cjs.js",
|
||||
"format": "javascript/module-flat"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-tokens",
|
||||
"version": "0.8.0",
|
||||
"version": "0.8.1",
|
||||
"private": false,
|
||||
"description": "Auto-generated design-tokens for NAV design-systems framework",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -14,7 +14,8 @@
|
||||
"license": "MIT",
|
||||
"files": [
|
||||
"/dist",
|
||||
"/src"
|
||||
"/src",
|
||||
"/tailwind"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "node ./build.js",
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@navikt/ds-react-internal",
|
||||
"version": "0.10.2",
|
||||
"version": "0.11.7",
|
||||
"private": false,
|
||||
"description": "NAV internal designsystem react components",
|
||||
"author": "NAV Designsystem team",
|
||||
@@ -33,8 +33,8 @@
|
||||
"watch": "tsc --watch -p tsconfig.esm.json"
|
||||
},
|
||||
"dependencies": {
|
||||
"@navikt/ds-icons": "^0.8.1",
|
||||
"@navikt/ds-react": "^0.15.2",
|
||||
"@navikt/ds-icons": "^0.8.4",
|
||||
"@navikt/ds-react": "^0.16.7",
|
||||
"@popperjs/core": "^2.10.1",
|
||||
"classnames": "^2.3.1",
|
||||
"copy-to-clipboard": "^3.3.1",
|
||||
|
||||
@@ -17,6 +17,7 @@
|
||||
"@navikt/core/react",
|
||||
"@navikt/core/icons",
|
||||
"@navikt/core/tokens",
|
||||
"@navikt/core/tailwind",
|
||||
"@navikt/internal/css",
|
||||
"@navikt/internal/react"
|
||||
]
|
||||
|
||||
@@ -8,8 +8,9 @@
|
||||
"postinstall": "husky install",
|
||||
"boot": "yarn clean:lib && yarn build:packages --stream",
|
||||
"storybook": "start-storybook -p 6006",
|
||||
"build:packages": "yarn run --silent lerna run build",
|
||||
"build:packages": "yarn build:tokens && yarn run --silent lerna run build",
|
||||
"build:storybook": "build-storybook",
|
||||
"build:tokens": "yarn workspace @navikt/ds-tokens build",
|
||||
"chromatic": "npx chromatic --project-token x3xqdfgkujg",
|
||||
"lerna:watch": "yarn run lerna run watch --stream",
|
||||
"update:icons": "yarn workspace @navikt/ds-icons update",
|
||||
|
||||