@transferwise/components 0.0.0-experimental-799b843 → 0.0.0-experimental-025f0d7

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 (14) hide show
  1. package/build/index.esm.js +27 -30
  2. package/build/index.esm.js.map +1 -1
  3. package/build/index.js +27 -30
  4. package/build/index.js.map +1 -1
  5. package/build/main.css +6 -82
  6. package/build/styles/decision/Decision.css +6 -82
  7. package/build/styles/main.css +6 -82
  8. package/build/types/decision/Decision.d.ts.map +1 -1
  9. package/package.json +1 -1
  10. package/src/decision/Decision.css +6 -82
  11. package/src/decision/Decision.less +2 -40
  12. package/src/decision/Decision.spec.js +3 -2
  13. package/src/decision/Decision.tsx +32 -35
  14. package/src/main.css +6 -82
package/build/main.css CHANGED
@@ -1598,95 +1598,19 @@ button.np-option {
1598
1598
  .np-decision .decision {
1599
1599
  display: flex;
1600
1600
  }
1601
- .np-decision__tile--small + .np-decision__tile--small {
1602
- margin-left: 16px;
1603
- margin-left: var(--size-16);
1604
- }
1605
- [dir="rtl"] .np-decision__tile--small + .np-decision__tile--small {
1606
- margin-right: 16px;
1607
- margin-right: var(--size-16);
1608
- margin-left: 0;
1609
- margin-left: initial;
1610
- }
1611
- .np-decision.np-decision--grid .np-decision__tile--small {
1612
- margin-left: 0;
1613
- margin-bottom: 16px !important;
1614
- margin-bottom: var(--size-16) !important;
1615
- }
1616
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small {
1617
- margin-right: 0;
1618
- margin-left: 0;
1619
- margin-left: initial;
1620
- }
1621
- .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
1622
- margin-right: 16px;
1623
- margin-right: var(--size-16);
1624
- }
1625
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
1626
- margin-left: 16px;
1627
- margin-left: var(--size-16);
1628
- margin-right: 0;
1629
- margin-right: initial;
1630
- }
1631
- .np-decision__tile + .np-decision__tile {
1632
- margin-left: 24px;
1633
- margin-left: var(--size-24);
1634
- }
1635
- [dir="rtl"] .np-decision__tile + .np-decision__tile {
1636
- margin-right: 24px;
1637
- margin-right: var(--size-24);
1638
- margin-left: 0;
1639
- margin-left: initial;
1640
- }
1641
- .np-decision .np-text-title-subsection {
1642
- margin-bottom: 0;
1643
- }
1644
1601
  .np-decision__tile--small .np-text-title-subsection {
1645
1602
  font-size: 1rem;
1646
1603
  font-size: var(--font-size-16);
1647
1604
  line-height: 1.2;
1648
1605
  line-height: var(--line-height-title);
1649
- margin-bottom: 0;
1650
- }
1651
- .np-decision.np-decision--grid .np-decision__tile {
1652
- margin-left: 0;
1653
- margin-bottom: 24px !important;
1654
- margin-bottom: var(--size-24) !important;
1655
- }
1656
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile {
1657
- margin-right: 0;
1658
- margin-left: 0;
1659
- margin-left: initial;
1660
- }
1661
- .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
1662
- margin-right: 24px;
1663
- margin-right: var(--size-24);
1664
1606
  }
1665
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
1666
- margin-left: 24px;
1667
- margin-left: var(--size-24);
1668
- margin-right: 0;
1669
- margin-right: initial;
1670
- }
1671
- .np-decision.np-decision--grid .np-size-swapper {
1672
- margin-right: calc(0 - 24px);
1673
- margin-right: calc(0 - var(--size-24));
1674
- }
1675
- [dir="rtl"] .np-decision.np-decision--grid .np-size-swapper {
1676
- margin-left: calc(0 - 24px);
1677
- margin-left: calc(0 - var(--size-24));
1678
- margin-right: 0;
1679
- margin-right: initial;
1680
- }
1681
- .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
1682
- margin-right: calc(0 - 16px);
1683
- margin-right: calc(0 - var(--size-16));
1607
+ .np-decision.np-decision--grid {
1608
+ gap: 24px;
1609
+ gap: var(--size-24);
1684
1610
  }
1685
- [dir="rtl"] .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
1686
- margin-left: calc(0 - 16px);
1687
- margin-left: calc(0 - var(--size-16));
1688
- margin-right: 0;
1689
- margin-right: initial;
1611
+ .np-decision.np-decision--grid.np-decision--small {
1612
+ gap: 16px;
1613
+ gap: var(--size-16);
1690
1614
  }
1691
1615
  .tw-definition-list__item dd {
1692
1616
  word-break: break-all;
package/build/styles/decision/Decision.css CHANGED
@@ -1,93 +1,17 @@
1
1
  .np-decision .decision {
2
2
  display: flex;
3
3
  }
4
- .np-decision__tile--small + .np-decision__tile--small {
5
- margin-left: 16px;
6
- margin-left: var(--size-16);
7
- }
8
- [dir="rtl"] .np-decision__tile--small + .np-decision__tile--small {
9
- margin-right: 16px;
10
- margin-right: var(--size-16);
11
- margin-left: 0;
12
- margin-left: initial;
13
- }
14
- .np-decision.np-decision--grid .np-decision__tile--small {
15
- margin-left: 0;
16
- margin-bottom: 16px !important;
17
- margin-bottom: var(--size-16) !important;
18
- }
19
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small {
20
- margin-right: 0;
21
- margin-left: 0;
22
- margin-left: initial;
23
- }
24
- .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
25
- margin-right: 16px;
26
- margin-right: var(--size-16);
27
- }
28
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
29
- margin-left: 16px;
30
- margin-left: var(--size-16);
31
- margin-right: 0;
32
- margin-right: initial;
33
- }
34
- .np-decision__tile + .np-decision__tile {
35
- margin-left: 24px;
36
- margin-left: var(--size-24);
37
- }
38
- [dir="rtl"] .np-decision__tile + .np-decision__tile {
39
- margin-right: 24px;
40
- margin-right: var(--size-24);
41
- margin-left: 0;
42
- margin-left: initial;
43
- }
44
- .np-decision .np-text-title-subsection {
45
- margin-bottom: 0;
46
- }
47
4
  .np-decision__tile--small .np-text-title-subsection {
48
5
  font-size: 1rem;
49
6
  font-size: var(--font-size-16);
50
7
  line-height: 1.2;
51
8
  line-height: var(--line-height-title);
52
- margin-bottom: 0;
53
- }
54
- .np-decision.np-decision--grid .np-decision__tile {
55
- margin-left: 0;
56
- margin-bottom: 24px !important;
57
- margin-bottom: var(--size-24) !important;
58
- }
59
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile {
60
- margin-right: 0;
61
- margin-left: 0;
62
- margin-left: initial;
63
- }
64
- .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
65
- margin-right: 24px;
66
- margin-right: var(--size-24);
67
- }
68
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
69
- margin-left: 24px;
70
- margin-left: var(--size-24);
71
- margin-right: 0;
72
- margin-right: initial;
73
- }
74
- .np-decision.np-decision--grid .np-size-swapper {
75
- margin-right: calc(0 - 24px);
76
- margin-right: calc(0 - var(--size-24));
77
- }
78
- [dir="rtl"] .np-decision.np-decision--grid .np-size-swapper {
79
- margin-left: calc(0 - 24px);
80
- margin-left: calc(0 - var(--size-24));
81
- margin-right: 0;
82
- margin-right: initial;
83
9
  }
84
- .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
85
- margin-right: calc(0 - 16px);
86
- margin-right: calc(0 - var(--size-16));
10
+ .np-decision.np-decision--grid {
11
+ gap: 24px;
12
+ gap: var(--size-24);
87
13
  }
88
- [dir="rtl"] .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
89
- margin-left: calc(0 - 16px);
90
- margin-left: calc(0 - var(--size-16));
91
- margin-right: 0;
92
- margin-right: initial;
14
+ .np-decision.np-decision--grid.np-decision--small {
15
+ gap: 16px;
16
+ gap: var(--size-16);
93
17
  }
package/build/styles/main.css CHANGED
@@ -1598,95 +1598,19 @@ button.np-option {
1598
1598
  .np-decision .decision {
1599
1599
  display: flex;
1600
1600
  }
1601
- .np-decision__tile--small + .np-decision__tile--small {
1602
- margin-left: 16px;
1603
- margin-left: var(--size-16);
1604
- }
1605
- [dir="rtl"] .np-decision__tile--small + .np-decision__tile--small {
1606
- margin-right: 16px;
1607
- margin-right: var(--size-16);
1608
- margin-left: 0;
1609
- margin-left: initial;
1610
- }
1611
- .np-decision.np-decision--grid .np-decision__tile--small {
1612
- margin-left: 0;
1613
- margin-bottom: 16px !important;
1614
- margin-bottom: var(--size-16) !important;
1615
- }
1616
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small {
1617
- margin-right: 0;
1618
- margin-left: 0;
1619
- margin-left: initial;
1620
- }
1621
- .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
1622
- margin-right: 16px;
1623
- margin-right: var(--size-16);
1624
- }
1625
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
1626
- margin-left: 16px;
1627
- margin-left: var(--size-16);
1628
- margin-right: 0;
1629
- margin-right: initial;
1630
- }
1631
- .np-decision__tile + .np-decision__tile {
1632
- margin-left: 24px;
1633
- margin-left: var(--size-24);
1634
- }
1635
- [dir="rtl"] .np-decision__tile + .np-decision__tile {
1636
- margin-right: 24px;
1637
- margin-right: var(--size-24);
1638
- margin-left: 0;
1639
- margin-left: initial;
1640
- }
1641
- .np-decision .np-text-title-subsection {
1642
- margin-bottom: 0;
1643
- }
1644
1601
  .np-decision__tile--small .np-text-title-subsection {
1645
1602
  font-size: 1rem;
1646
1603
  font-size: var(--font-size-16);
1647
1604
  line-height: 1.2;
1648
1605
  line-height: var(--line-height-title);
1649
- margin-bottom: 0;
1650
- }
1651
- .np-decision.np-decision--grid .np-decision__tile {
1652
- margin-left: 0;
1653
- margin-bottom: 24px !important;
1654
- margin-bottom: var(--size-24) !important;
1655
- }
1656
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile {
1657
- margin-right: 0;
1658
- margin-left: 0;
1659
- margin-left: initial;
1660
- }
1661
- .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
1662
- margin-right: 24px;
1663
- margin-right: var(--size-24);
1664
1606
  }
1665
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
1666
- margin-left: 24px;
1667
- margin-left: var(--size-24);
1668
- margin-right: 0;
1669
- margin-right: initial;
1670
- }
1671
- .np-decision.np-decision--grid .np-size-swapper {
1672
- margin-right: calc(0 - 24px);
1673
- margin-right: calc(0 - var(--size-24));
1674
- }
1675
- [dir="rtl"] .np-decision.np-decision--grid .np-size-swapper {
1676
- margin-left: calc(0 - 24px);
1677
- margin-left: calc(0 - var(--size-24));
1678
- margin-right: 0;
1679
- margin-right: initial;
1680
- }
1681
- .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
1682
- margin-right: calc(0 - 16px);
1683
- margin-right: calc(0 - var(--size-16));
1607
+ .np-decision.np-decision--grid {
1608
+ gap: 24px;
1609
+ gap: var(--size-24);
1684
1610
  }
1685
- [dir="rtl"] .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
1686
- margin-left: calc(0 - 16px);
1687
- margin-left: calc(0 - var(--size-16));
1688
- margin-right: 0;
1689
- margin-right: initial;
1611
+ .np-decision.np-decision--grid.np-decision--small {
1612
+ gap: 16px;
1613
+ gap: var(--size-16);
1690
1614
  }
1691
1615
  .tw-definition-list__item dd {
1692
1616
  word-break: break-all;
package/build/types/decision/Decision.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Decision.d.ts","sourceRoot":"","sources":["../../../src/decision/Decision.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAoB,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKpE,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,eAAe,oBAAoB;CACpC;AAED,oBAAY,YAAY;IACtB,UAAU,eAAe;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACzC,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,+HAA+H;IAC/H,IAAI,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAEzB,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,sFAOX,aAAa,uCA+Ef,CAAC;AAEF,eAAe,QAAQ,CAAC"}
1
+ {"version":3,"file":"Decision.d.ts","sourceRoot":"","sources":["../../../src/decision/Decision.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAoB,SAAS,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKpE,UAAU,cAAc;IACtB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,MAAM,CAAC,EAAE,KAAK,CAAC,yBAAyB,CAAC;IACzC,KAAK,EAAE;QACL,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;QACvB,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;KACvB,CAAC;IACF,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAC;IAC/C,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;CACxB;AAED,oBAAY,oBAAoB;IAC9B,IAAI,SAAS;IACb,UAAU,eAAe;IACzB,eAAe,oBAAoB;CACpC;AAED,oBAAY,YAAY;IACtB,UAAU,eAAe;CAC1B;AAED,MAAM,WAAW,aAAa;IAC5B,yCAAyC;IACzC,OAAO,EAAE,cAAc,EAAE,CAAC;IAC1B,iDAAiD;IACjD,YAAY,CAAC,EAAE,GAAG,oBAAoB,EAAE,CAAC;IACzC,iDAAiD;IACjD,IAAI,CAAC,EAAE,SAAS,GAAG,UAAU,CAAC;IAC9B,+HAA+H;IAC/H,IAAI,CAAC,EAAE,GAAG,YAAY,EAAE,CAAC;IAEzB,qDAAqD;IACrD,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,sEAAsE;IACtE,kBAAkB,CAAC,EAAE,OAAO,CAAC;CAC9B;AAED,QAAA,MAAM,QAAQ,sFAOX,aAAa,uCA4Ef,CAAC;AAEF,eAAe,QAAQ,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-799b843",
3
+ "version": "0.0.0-experimental-025f0d7",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
package/src/decision/Decision.css CHANGED
@@ -1,93 +1,17 @@
1
1
  .np-decision .decision {
2
2
  display: flex;
3
3
  }
4
- .np-decision__tile--small + .np-decision__tile--small {
5
- margin-left: 16px;
6
- margin-left: var(--size-16);
7
- }
8
- [dir="rtl"] .np-decision__tile--small + .np-decision__tile--small {
9
- margin-right: 16px;
10
- margin-right: var(--size-16);
11
- margin-left: 0;
12
- margin-left: initial;
13
- }
14
- .np-decision.np-decision--grid .np-decision__tile--small {
15
- margin-left: 0;
16
- margin-bottom: 16px !important;
17
- margin-bottom: var(--size-16) !important;
18
- }
19
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small {
20
- margin-right: 0;
21
- margin-left: 0;
22
- margin-left: initial;
23
- }
24
- .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
25
- margin-right: 16px;
26
- margin-right: var(--size-16);
27
- }
28
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
29
- margin-left: 16px;
30
- margin-left: var(--size-16);
31
- margin-right: 0;
32
- margin-right: initial;
33
- }
34
- .np-decision__tile + .np-decision__tile {
35
- margin-left: 24px;
36
- margin-left: var(--size-24);
37
- }
38
- [dir="rtl"] .np-decision__tile + .np-decision__tile {
39
- margin-right: 24px;
40
- margin-right: var(--size-24);
41
- margin-left: 0;
42
- margin-left: initial;
43
- }
44
- .np-decision .np-text-title-subsection {
45
- margin-bottom: 0;
46
- }
47
4
  .np-decision__tile--small .np-text-title-subsection {
48
5
  font-size: 1rem;
49
6
  font-size: var(--font-size-16);
50
7
  line-height: 1.2;
51
8
  line-height: var(--line-height-title);
52
- margin-bottom: 0;
53
- }
54
- .np-decision.np-decision--grid .np-decision__tile {
55
- margin-left: 0;
56
- margin-bottom: 24px !important;
57
- margin-bottom: var(--size-24) !important;
58
- }
59
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile {
60
- margin-right: 0;
61
- margin-left: 0;
62
- margin-left: initial;
63
- }
64
- .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
65
- margin-right: 24px;
66
- margin-right: var(--size-24);
67
- }
68
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
69
- margin-left: 24px;
70
- margin-left: var(--size-24);
71
- margin-right: 0;
72
- margin-right: initial;
73
- }
74
- .np-decision.np-decision--grid .np-size-swapper {
75
- margin-right: calc(0 - 24px);
76
- margin-right: calc(0 - var(--size-24));
77
- }
78
- [dir="rtl"] .np-decision.np-decision--grid .np-size-swapper {
79
- margin-left: calc(0 - 24px);
80
- margin-left: calc(0 - var(--size-24));
81
- margin-right: 0;
82
- margin-right: initial;
83
9
  }
84
- .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
85
- margin-right: calc(0 - 16px);
86
- margin-right: calc(0 - var(--size-16));
10
+ .np-decision.np-decision--grid {
11
+ gap: 24px;
12
+ gap: var(--size-24);
87
13
  }
88
- [dir="rtl"] .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
89
- margin-left: calc(0 - 16px);
90
- margin-left: calc(0 - var(--size-16));
91
- margin-right: 0;
92
- margin-right: initial;
14
+ .np-decision.np-decision--grid.np-decision--small {
15
+ gap: 16px;
16
+ gap: var(--size-16);
93
17
  }
package/src/decision/Decision.less CHANGED
@@ -5,56 +5,18 @@
5
5
  display: flex;
6
6
  }
7
7
 
8
- &__tile--small + &__tile--small {
9
- .margin(left, var(--size-16));
10
- }
11
-
12
- &.np-decision--grid &__tile--small {
13
- .margin(left, 0);
14
-
15
- margin-bottom: var(--size-16) !important;
16
-
17
- &:not(:last-of-type) {
18
- .margin(right, var(--size-16));
19
- }
20
- }
21
-
22
- &__tile + &__tile {
23
- .margin(left, var(--size-24));
24
- }
25
-
26
- .np-text-title-subsection {
27
- margin-bottom: 0;
28
- }
29
-
30
8
  &__tile--small {
31
9
  .np-text-title-subsection {
32
10
  font-size: var(--font-size-16);
33
11
  line-height: var(--line-height-title);
34
- margin-bottom: 0;
35
- }
36
- }
37
-
38
- &.np-decision--grid &__tile {
39
-
40
- .margin(left, 0);
41
-
42
- margin-bottom: var(--size-24) !important;
43
-
44
- &:not(:last-of-type) {
45
- .margin(right, var(--size-24));
46
12
  }
47
13
  }
48
14
 
49
15
  &.np-decision--grid {
50
- .np-size-swapper {
51
- .margin(right, calc(0 - var(--size-24)));
52
- }
16
+ gap: var(--size-24);
53
17
 
54
18
  &.np-decision--small {
55
- .np-size-swapper {
56
- .margin(right, calc(0 - var(--size-16)));
57
- }
19
+ gap: var(--size-16);
58
20
  }
59
21
  }
60
22
  }
package/src/decision/Decision.spec.js CHANGED
@@ -85,8 +85,9 @@ describe('Decision', () => {
85
85
  resetClientWidth(Breakpoint.SMALL);
86
86
  const { container } = render(<Decision {...props} />);
87
87
 
88
- expect(container.querySelector('.np-decision')).toHaveClass('np-decision--grid');
89
- expect(container.querySelector('.np-size-swapper')).toHaveClass('flex-wrap');
88
+ const decisionElement = container.querySelector('.np-decision');
89
+ expect(decisionElement).toHaveClass('np-decision--grid');
90
+ expect(decisionElement).toHaveClass('flex-wrap');
90
91
  });
91
92
  });
92
93
 
package/src/decision/Decision.tsx CHANGED
@@ -88,42 +88,39 @@ const Decision = ({
88
88
 
89
89
  return (
90
90
  <div
91
- className={classNames('np-decision', {
92
- 'np-decision--small': isSmall,
93
- 'np-decision--grid': isGrid,
94
- })}
91
+ className={classNames(
92
+ 'np-decision d-flex',
93
+ {
94
+ 'np-decision--small': isSmall,
95
+ 'np-decision--grid': isGrid,
96
+ },
97
+ breakpoint ? isGrid && 'flex-wrap' : 'flex-column',
98
+ )}
95
99
  >
96
- <div
97
- className={classNames(
98
- 'np-size-swapper d-flex',
99
- breakpoint ? isGrid && 'flex-wrap' : 'flex-column',
100
- )}
101
- >
102
- {breakpoint
103
- ? options.map(
104
- (
105
- { description, disabled, href, target, media: { block }, onClick, title },
106
- key,
107
- ) => (
108
- <Tile
109
- // eslint-disable-next-line react/no-array-index-key
110
- key={`tile-${key}`}
111
- className={classNames(`np-decision__tile${isSmall ? '--small' : ''}`, {
112
- 'np-decision__tile--fixed-width': isGrid,
113
- })}
114
- description={description}
115
- disabled={disabled}
116
- href={href}
117
- target={target}
118
- media={block}
119
- size={isSmall ? Size.SMALL : Size.MEDIUM}
120
- title={title}
121
- onClick={onClick}
122
- />
123
- ),
124
- )
125
- : renderedOptions}
126
- </div>
100
+ {breakpoint
101
+ ? options.map(
102
+ (
103
+ { description, disabled, href, target, media: { block }, onClick, title },
104
+ key,
105
+ ) => (
106
+ <Tile
107
+ // eslint-disable-next-line react/no-array-index-key
108
+ key={`tile-${key}`}
109
+ className={classNames(`np-decision__tile${isSmall ? '--small' : ''}`, {
110
+ 'np-decision__tile--fixed-width': isGrid,
111
+ })}
112
+ description={description}
113
+ disabled={disabled}
114
+ href={href}
115
+ target={target}
116
+ media={block}
117
+ size={isSmall ? Size.SMALL : Size.MEDIUM}
118
+ title={title}
119
+ onClick={onClick}
120
+ />
121
+ ),
122
+ )
123
+ : renderedOptions}
127
124
  </div>
128
125
  );
129
126
  }
package/src/main.css CHANGED
@@ -1598,95 +1598,19 @@ button.np-option {
1598
1598
  .np-decision .decision {
1599
1599
  display: flex;
1600
1600
  }
1601
- .np-decision__tile--small + .np-decision__tile--small {
1602
- margin-left: 16px;
1603
- margin-left: var(--size-16);
1604
- }
1605
- [dir="rtl"] .np-decision__tile--small + .np-decision__tile--small {
1606
- margin-right: 16px;
1607
- margin-right: var(--size-16);
1608
- margin-left: 0;
1609
- margin-left: initial;
1610
- }
1611
- .np-decision.np-decision--grid .np-decision__tile--small {
1612
- margin-left: 0;
1613
- margin-bottom: 16px !important;
1614
- margin-bottom: var(--size-16) !important;
1615
- }
1616
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small {
1617
- margin-right: 0;
1618
- margin-left: 0;
1619
- margin-left: initial;
1620
- }
1621
- .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
1622
- margin-right: 16px;
1623
- margin-right: var(--size-16);
1624
- }
1625
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile--small:not(:last-of-type) {
1626
- margin-left: 16px;
1627
- margin-left: var(--size-16);
1628
- margin-right: 0;
1629
- margin-right: initial;
1630
- }
1631
- .np-decision__tile + .np-decision__tile {
1632
- margin-left: 24px;
1633
- margin-left: var(--size-24);
1634
- }
1635
- [dir="rtl"] .np-decision__tile + .np-decision__tile {
1636
- margin-right: 24px;
1637
- margin-right: var(--size-24);
1638
- margin-left: 0;
1639
- margin-left: initial;
1640
- }
1641
- .np-decision .np-text-title-subsection {
1642
- margin-bottom: 0;
1643
- }
1644
1601
  .np-decision__tile--small .np-text-title-subsection {
1645
1602
  font-size: 1rem;
1646
1603
  font-size: var(--font-size-16);
1647
1604
  line-height: 1.2;
1648
1605
  line-height: var(--line-height-title);
1649
- margin-bottom: 0;
1650
- }
1651
- .np-decision.np-decision--grid .np-decision__tile {
1652
- margin-left: 0;
1653
- margin-bottom: 24px !important;
1654
- margin-bottom: var(--size-24) !important;
1655
- }
1656
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile {
1657
- margin-right: 0;
1658
- margin-left: 0;
1659
- margin-left: initial;
1660
- }
1661
- .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
1662
- margin-right: 24px;
1663
- margin-right: var(--size-24);
1664
1606
  }
1665
- [dir="rtl"] .np-decision.np-decision--grid .np-decision__tile:not(:last-of-type) {
1666
- margin-left: 24px;
1667
- margin-left: var(--size-24);
1668
- margin-right: 0;
1669
- margin-right: initial;
1670
- }
1671
- .np-decision.np-decision--grid .np-size-swapper {
1672
- margin-right: calc(0 - 24px);
1673
- margin-right: calc(0 - var(--size-24));
1674
- }
1675
- [dir="rtl"] .np-decision.np-decision--grid .np-size-swapper {
1676
- margin-left: calc(0 - 24px);
1677
- margin-left: calc(0 - var(--size-24));
1678
- margin-right: 0;
1679
- margin-right: initial;
1680
- }
1681
- .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
1682
- margin-right: calc(0 - 16px);
1683
- margin-right: calc(0 - var(--size-16));
1607
+ .np-decision.np-decision--grid {
1608
+ gap: 24px;
1609
+ gap: var(--size-24);
1684
1610
  }
1685
- [dir="rtl"] .np-decision.np-decision--grid.np-decision--small .np-size-swapper {
1686
- margin-left: calc(0 - 16px);
1687
- margin-left: calc(0 - var(--size-16));
1688
- margin-right: 0;
1689
- margin-right: initial;
1611
+ .np-decision.np-decision--grid.np-decision--small {
1612
+ gap: 16px;
1613
+ gap: var(--size-16);
1690
1614
  }
1691
1615
  .tw-definition-list__item dd {
1692
1616
  word-break: break-all;