@navikt/ds-css 4.1.6 → 4.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (19) hide show
  1. package/CHANGELOG.md +18 -0
  2. package/chat.css +30 -16
  3. package/dist/component/chat.css +30 -16
  4. package/dist/component/chat.min.css +1 -1
  5. package/dist/component/helptext.css +1 -1
  6. package/dist/component/helptext.min.css +1 -1
  7. package/dist/component/index.css +32 -17
  8. package/dist/component/index.min.css +2 -2
  9. package/dist/component/timeline.css +4 -0
  10. package/dist/component/timeline.min.css +1 -1
  11. package/dist/components.css +31 -16
  12. package/dist/components.min.css +2 -2
  13. package/dist/global/tokens.css +1 -1
  14. package/dist/index.css +32 -17
  15. package/dist/index.min.css +2 -2
  16. package/help-text.css +1 -1
  17. package/package.json +2 -2
  18. package/timeline.css +4 -0
  19. package/tokens.json +3 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,23 @@
1
1
  # @navikt/ds-css
2
2
 
3
+ ## 4.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#2048](https://github.com/navikt/aksel/pull/2048) [`b1625ba38`](https://github.com/navikt/aksel/commit/b1625ba3882b430d678d0623922d7fb56aa724b3) Thanks [@HalvorHaugan](https://github.com/HalvorHaugan)! - Oppdatert Chat
8
+
9
+ - :sparkles: Ny prop `size` som kan settes til "small" for en mer kompakt layout
10
+ - :sparkles: Ny prop `variant` som erstatter `backgroundColor` og `avatarBgColor`
11
+ - :sparkles: `avatar` er nå valgfritt
12
+ - :wheelchair: Forbedret UU
13
+ - :lipstick: Oppdatert utseende
14
+
15
+ ## 4.1.7
16
+
17
+ ### Patch Changes
18
+
19
+ - [`42b5af64a`](https://github.com/navikt/aksel/commit/42b5af64ab35d0f2d126d41f8fc3e61fe2834b36) Thanks [@KenAJoh](https://github.com/KenAJoh)! - Fikset jsdom-problemer ved rendring av Timeline
20
+
3
21
  ## 4.1.6
4
22
 
5
23
  ## 4.1.5
package/chat.css CHANGED
@@ -1,14 +1,12 @@
1
1
  .navds-chat {
2
2
  display: flex;
3
3
  align-items: flex-end;
4
- gap: var(--a-spacing-4);
5
- padding-right: var(--a-spacing-16);
4
+ gap: var(--a-spacing-3);
5
+ max-width: 40.75rem;
6
6
  }
7
7
 
8
8
  .navds-chat--right {
9
9
  flex-direction: row-reverse;
10
- padding-right: 0;
11
- padding-left: var(--a-spacing-16);
12
10
  }
13
11
 
14
12
  .navds-chat__bubble-wrapper {
@@ -26,15 +24,19 @@
26
24
 
27
25
  .navds-chat__avatar {
28
26
  align-items: center;
29
- background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
30
- color: var(--ac-chat-avatar-color, var(--a-text-default));
27
+ box-shadow: var(--a-shadow-xsmall);
28
+ background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
29
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
31
30
  border-radius: var(--a-border-radius-full);
31
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
32
32
  display: flex;
33
33
  flex-shrink: 0;
34
34
  justify-content: center;
35
35
  overflow: hidden;
36
- height: 3rem;
37
- width: 3rem;
36
+ height: 2.5rem;
37
+ width: 2.5rem;
38
+ font-size: 1.06rem;
39
+ letter-spacing: 0.024rem;
38
40
  }
39
41
 
40
42
  .navds-chat__avatar svg {
@@ -44,11 +46,11 @@
44
46
  }
45
47
 
46
48
  .navds-chat__bubble {
47
- padding: 1rem;
48
- box-shadow: var(--a-shadow-small);
49
+ padding: var(--a-spacing-4);
50
+ box-shadow: var(--a-shadow-xsmall);
49
51
  width: fit-content;
50
- max-width: 37.5rem;
51
- background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
52
+ background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
53
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
52
54
  border-radius: var(--a-border-radius-xlarge);
53
55
  border-bottom-left-radius: 2px;
54
56
  display: flex;
@@ -61,11 +63,27 @@
61
63
  border-bottom-right-radius: 2px;
62
64
  }
63
65
 
66
+ .navds-chat--small .navds-chat__bubble {
67
+ padding: var(--a-spacing-3);
68
+ }
69
+
70
+ .navds-chat--info .navds-chat__bubble,
71
+ .navds-chat--info .navds-chat__avatar {
72
+ background-color: var(--a-surface-info-subtle);
73
+ }
74
+
75
+ .navds-chat--neutral .navds-chat__bubble,
76
+ .navds-chat--neutral .navds-chat__avatar {
77
+ background-color: var(--a-surface-default);
78
+ }
79
+
64
80
  .navds-chat__top-text {
65
81
  color: var(--ac-chat-top-text, var(--a-text-default));
66
82
  display: flex;
67
83
  gap: var(--a-spacing-2);
68
84
  align-items: baseline;
85
+ font-weight: normal;
86
+ margin: 0;
69
87
  }
70
88
 
71
89
  .navds-chat--right .navds-chat__top-text {
@@ -87,7 +105,3 @@
87
105
  .navds-chat--right .navds-chat__top-text--left {
88
106
  align-self: flex-start;
89
107
  }
90
-
91
- .navds-chat__name {
92
- font-weight: var(--a-font-weight-bold);
93
- }
package/dist/component/chat.css CHANGED
@@ -1,14 +1,12 @@
1
1
  .navds-chat {
2
2
  display: flex;
3
3
  align-items: flex-end;
4
- gap: var(--a-spacing-4);
5
- padding-right: var(--a-spacing-16);
4
+ gap: var(--a-spacing-3);
5
+ max-width: 40.75rem;
6
6
  }
7
7
 
8
8
  .navds-chat--right {
9
9
  flex-direction: row-reverse;
10
- padding-right: 0;
11
- padding-left: var(--a-spacing-16);
12
10
  }
13
11
 
14
12
  .navds-chat__bubble-wrapper {
@@ -26,15 +24,19 @@
26
24
 
27
25
  .navds-chat__avatar {
28
26
  align-items: center;
29
- background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
30
- color: var(--ac-chat-avatar-color, var(--a-text-default));
27
+ box-shadow: var(--a-shadow-xsmall);
28
+ background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
29
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
31
30
  border-radius: var(--a-border-radius-full);
31
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
32
32
  display: flex;
33
33
  flex-shrink: 0;
34
34
  justify-content: center;
35
35
  overflow: hidden;
36
- height: 3rem;
37
- width: 3rem;
36
+ height: 2.5rem;
37
+ width: 2.5rem;
38
+ font-size: 1.06rem;
39
+ letter-spacing: 0.024rem;
38
40
  }
39
41
 
40
42
  .navds-chat__avatar svg {
@@ -44,11 +46,11 @@
44
46
  }
45
47
 
46
48
  .navds-chat__bubble {
47
- padding: 1rem;
48
- box-shadow: var(--a-shadow-small);
49
+ padding: var(--a-spacing-4);
50
+ box-shadow: var(--a-shadow-xsmall);
49
51
  width: fit-content;
50
- max-width: 37.5rem;
51
- background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
52
+ background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
53
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
52
54
  border-radius: var(--a-border-radius-xlarge);
53
55
  border-bottom-left-radius: 2px;
54
56
  display: flex;
@@ -61,11 +63,27 @@
61
63
  border-bottom-right-radius: 2px;
62
64
  }
63
65
 
66
+ .navds-chat--small .navds-chat__bubble {
67
+ padding: var(--a-spacing-3);
68
+ }
69
+
70
+ .navds-chat--info .navds-chat__bubble,
71
+ .navds-chat--info .navds-chat__avatar {
72
+ background-color: var(--a-surface-info-subtle);
73
+ }
74
+
75
+ .navds-chat--neutral .navds-chat__bubble,
76
+ .navds-chat--neutral .navds-chat__avatar {
77
+ background-color: var(--a-surface-default);
78
+ }
79
+
64
80
  .navds-chat__top-text {
65
81
  color: var(--ac-chat-top-text, var(--a-text-default));
66
82
  display: flex;
67
83
  gap: var(--a-spacing-2);
68
84
  align-items: baseline;
85
+ font-weight: normal;
86
+ margin: 0;
69
87
  }
70
88
 
71
89
  .navds-chat--right .navds-chat__top-text {
@@ -87,7 +105,3 @@
87
105
  .navds-chat--right .navds-chat__top-text--left {
88
106
  align-self: flex-start;
89
107
  }
90
-
91
- .navds-chat__name {
92
- font-weight: var(--a-font-weight-bold);
93
- }
package/dist/component/chat.min.css CHANGED
@@ -1 +1 @@
1
- .navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-4);padding-right:var(--a-spacing-16)}.navds-chat--right{flex-direction:row-reverse;padding-left:var(--a-spacing-16);padding-right:0}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3);list-style:none;margin:0;padding:0}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background:var(--ac-chat-avatar-bg,var(--a-bg-subtle));border-radius:var(--a-border-radius-full);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;height:3rem;justify-content:center;overflow:hidden;width:3rem}.navds-chat__avatar svg{align-self:center;height:100%;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-bg-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-small);display:flex;flex-direction:column;gap:var(--a-spacing-2);max-width:37.5rem;padding:1rem;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;gap:var(--a-spacing-2)}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}.navds-chat__name{font-weight:var(--a-font-weight-bold)}
1
+ .navds-chat{align-items:flex-end;display:flex;gap:var(--a-spacing-3);max-width:40.75rem}.navds-chat--right{flex-direction:row-reverse}.navds-chat__bubble-wrapper{display:flex;flex-direction:column;gap:var(--a-spacing-3);list-style:none;margin:0;padding:0}.navds-chat--right .navds-chat__bubble-wrapper{align-items:flex-end}.navds-chat__avatar{align-items:center;background-color:var(--ac-chat-avatar-bg,var(--a-surface-neutral-subtle));border:1px solid var(--ac-chat-border-color,var(--a-border-subtle));border-radius:var(--a-border-radius-full);box-shadow:var(--a-shadow-xsmall);color:var(--ac-chat-avatar-color,var(--a-text-default));display:flex;flex-shrink:0;font-size:1.06rem;height:2.5rem;justify-content:center;letter-spacing:.024rem;overflow:hidden;width:2.5rem}.navds-chat__avatar svg{align-self:center;height:100%;width:100%}.navds-chat__bubble{background-color:var(--ac-chat-bubble-bg,var(--a-surface-neutral-subtle));border:1px solid var(--ac-chat-border-color,var(--a-border-subtle));border-radius:var(--a-border-radius-xlarge);border-bottom-left-radius:2px;box-shadow:var(--a-shadow-xsmall);display:flex;flex-direction:column;gap:var(--a-spacing-2);padding:var(--a-spacing-4);width:-webkit-fit-content;width:-moz-fit-content;width:fit-content}.navds-chat--right .navds-chat__bubble{border-radius:var(--a-border-radius-xlarge);border-bottom-right-radius:2px}.navds-chat--small .navds-chat__bubble{padding:var(--a-spacing-3)}.navds-chat--info .navds-chat__avatar,.navds-chat--info .navds-chat__bubble{background-color:var(--a-surface-info-subtle)}.navds-chat--neutral .navds-chat__avatar,.navds-chat--neutral .navds-chat__bubble{background-color:var(--a-surface-default)}.navds-chat__top-text{align-items:baseline;color:var(--ac-chat-top-text,var(--a-text-default));display:flex;font-weight:400;gap:var(--a-spacing-2);margin:0}.navds-chat--right .navds-chat__top-text{align-self:flex-end}.navds-chat--top-text-left .navds-chat__top-text{align-self:flex-start}.navds-chat--left .navds-chat__top-text--right,.navds-chat--top-text-right .navds-chat__top-text{align-self:flex-end}.navds-chat--right .navds-chat__top-text--left{align-self:flex-start}
package/dist/component/helptext.css CHANGED
@@ -33,7 +33,7 @@
33
33
 
34
34
  .navds-help-text__popover.navds-popover {
35
35
  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
36
- max-width: 65ch;
36
+ max-width: min(65ch, 90vw);
37
37
 
38
38
  --ac-popover-border: var(--a-border-info);
39
39
  }
package/dist/component/helptext.min.css CHANGED
@@ -1 +1 @@
1
- .navds-help-text__button{align-items:center;background-color:transparent;border:0;border-radius:var(--a-border-radius-full);color:var(--ac-help-text-button-color,var(--a-surface-action));cursor:pointer;display:flex;font-size:1.5rem;justify-content:center;margin:0;padding:0}.navds-help-text__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-help-text__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:none}}.navds-help-text__icon{border-radius:var(--a-border-radius-full)}.navds-help-text__popover.navds-popover,.navds-help-text__popover>.navds-popover__arrow{background-color:var(--ac-help-text-popover-bg,var(--a-surface-info-subtle))}.navds-help-text__popover.navds-popover{--ac-popover-border:var(--a-border-info);max-width:65ch}.navds-help-text__icon--filled{display:none}.navds-help-text__button:where(:hover,:focus-visible,[aria-expanded=true])>.navds-help-text__icon{display:none}.navds-help-text__button:where(:hover,:focus-visible,[aria-expanded=true])>.navds-help-text__icon--filled{display:inherit}@supports not selector(:focus-visible){.navds-help-text__button:where(:focus)>.navds-help-text__icon{display:none}.navds-help-text__button:where(:focus)>.navds-help-text__icon--filled{display:inherit}}
1
+ .navds-help-text__button{align-items:center;background-color:transparent;border:0;border-radius:var(--a-border-radius-full);color:var(--ac-help-text-button-color,var(--a-surface-action));cursor:pointer;display:flex;font-size:1.5rem;justify-content:center;margin:0;padding:0}.navds-help-text__button:focus-visible{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus)}@supports not selector(:focus-visible){.navds-help-text__button:focus{box-shadow:0 0 0 1px var(--a-surface-default),0 0 0 4px var(--a-border-focus);outline:none}}.navds-help-text__icon{border-radius:var(--a-border-radius-full)}.navds-help-text__popover.navds-popover,.navds-help-text__popover>.navds-popover__arrow{background-color:var(--ac-help-text-popover-bg,var(--a-surface-info-subtle))}.navds-help-text__popover.navds-popover{--ac-popover-border:var(--a-border-info);max-width:min(65ch,90vw)}.navds-help-text__icon--filled{display:none}.navds-help-text__button:where(:hover,:focus-visible,[aria-expanded=true])>.navds-help-text__icon{display:none}.navds-help-text__button:where(:hover,:focus-visible,[aria-expanded=true])>.navds-help-text__icon--filled{display:inherit}@supports not selector(:focus-visible){.navds-help-text__button:where(:focus)>.navds-help-text__icon{display:none}.navds-help-text__button:where(:focus)>.navds-help-text__icon--filled{display:inherit}}
package/dist/component/index.css CHANGED
@@ -1,7 +1,7 @@
1
1
  @charset "UTF-8";
2
2
  /**
3
3
  * Do not edit directly
4
- * Generated on Thu, 15 Jun 2023 14:41:04 GMT
4
+ * Generated on Wed, 21 Jun 2023 10:02:14 GMT
5
5
  */
6
6
  :root, :host {
7
7
  --a-spacing-05: 0.125rem;
@@ -1697,13 +1697,11 @@ body,
1697
1697
  .navds-chat {
1698
1698
  display: flex;
1699
1699
  align-items: flex-end;
1700
- gap: var(--a-spacing-4);
1701
- padding-right: var(--a-spacing-16);
1700
+ gap: var(--a-spacing-3);
1701
+ max-width: 40.75rem;
1702
1702
  }
1703
1703
  .navds-chat--right {
1704
1704
  flex-direction: row-reverse;
1705
- padding-right: 0;
1706
- padding-left: var(--a-spacing-16);
1707
1705
  }
1708
1706
  .navds-chat__bubble-wrapper {
1709
1707
  list-style: none;
@@ -1718,15 +1716,19 @@ body,
1718
1716
  }
1719
1717
  .navds-chat__avatar {
1720
1718
  align-items: center;
1721
- background: var(--ac-chat-avatar-bg, var(--a-bg-subtle));
1722
- color: var(--ac-chat-avatar-color, var(--a-text-default));
1719
+ box-shadow: var(--a-shadow-xsmall);
1720
+ background-color: var(--ac-chat-avatar-bg, var(--a-surface-neutral-subtle));
1721
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
1723
1722
  border-radius: var(--a-border-radius-full);
1723
+ color: var(--ac-chat-avatar-color, var(--a-text-default));
1724
1724
  display: flex;
1725
1725
  flex-shrink: 0;
1726
1726
  justify-content: center;
1727
1727
  overflow: hidden;
1728
- height: 3rem;
1729
- width: 3rem;
1728
+ height: 2.5rem;
1729
+ width: 2.5rem;
1730
+ font-size: 1.06rem;
1731
+ letter-spacing: 0.024rem;
1730
1732
  }
1731
1733
  .navds-chat__avatar svg {
1732
1734
  align-self: center;
@@ -1734,11 +1736,11 @@ body,
1734
1736
  width: 100%;
1735
1737
  }
1736
1738
  .navds-chat__bubble {
1737
- padding: 1rem;
1738
- box-shadow: var(--a-shadow-small);
1739
+ padding: var(--a-spacing-4);
1740
+ box-shadow: var(--a-shadow-xsmall);
1739
1741
  width: fit-content;
1740
- max-width: 37.5rem;
1741
- background-color: var(--ac-chat-bubble-bg, var(--a-bg-subtle));
1742
+ background-color: var(--ac-chat-bubble-bg, var(--a-surface-neutral-subtle));
1743
+ border: 1px solid var(--ac-chat-border-color, var(--a-border-subtle));
1742
1744
  border-radius: var(--a-border-radius-xlarge);
1743
1745
  border-bottom-left-radius: 2px;
1744
1746
  display: flex;
@@ -1749,11 +1751,24 @@ body,
1749
1751
  border-radius: var(--a-border-radius-xlarge);
1750
1752
  border-bottom-right-radius: 2px;
1751
1753
  }
1754
+ .navds-chat--small .navds-chat__bubble {
1755
+ padding: var(--a-spacing-3);
1756
+ }
1757
+ .navds-chat--info .navds-chat__bubble,
1758
+ .navds-chat--info .navds-chat__avatar {
1759
+ background-color: var(--a-surface-info-subtle);
1760
+ }
1761
+ .navds-chat--neutral .navds-chat__bubble,
1762
+ .navds-chat--neutral .navds-chat__avatar {
1763
+ background-color: var(--a-surface-default);
1764
+ }
1752
1765
  .navds-chat__top-text {
1753
1766
  color: var(--ac-chat-top-text, var(--a-text-default));
1754
1767
  display: flex;
1755
1768
  gap: var(--a-spacing-2);
1756
1769
  align-items: baseline;
1770
+ font-weight: normal;
1771
+ margin: 0;
1757
1772
  }
1758
1773
  .navds-chat--right .navds-chat__top-text {
1759
1774
  align-self: flex-end;
@@ -1770,9 +1785,6 @@ body,
1770
1785
  .navds-chat--right .navds-chat__top-text--left {
1771
1786
  align-self: flex-start;
1772
1787
  }
1773
- .navds-chat__name {
1774
- font-weight: var(--a-font-weight-bold);
1775
- }
1776
1788
  .navds-chips {
1777
1789
  display: flex;
1778
1790
  gap: var(--a-spacing-2);
@@ -3219,7 +3231,7 @@ body,
3219
3231
  }
3220
3232
  .navds-help-text__popover.navds-popover {
3221
3233
  background-color: var(--ac-help-text-popover-bg, var(--a-surface-info-subtle));
3222
- max-width: 65ch;
3234
+ max-width: min(65ch, 90vw);
3223
3235
 
3224
3236
  --ac-popover-border: var(--a-border-info);
3225
3237
  }
@@ -4046,6 +4058,9 @@ button.navds-internalheader__title:active,
4046
4058
  .navds-timeline__row-periods > li {
4047
4059
  list-style-type: none;
4048
4060
  }
4061
+ .navds-timeline__row-periods:focus {
4062
+ outline: none;
4063
+ }
4049
4064
  .navds-timeline__period {
4050
4065
  height: 100%;
4051
4066
  border-radius: var(--a-border-radius-full);