@transferwise/components 0.0.0-experimental-dc27817 → 0.0.0-experimental-d675045

package/build/main.css

@@ -4637,15 +4637,15 @@ html:not([dir="rtl"]) .np-navigation-option {
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
   justify-content: center;
   align-items: center;
   background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
-  padding: 4px;
-  padding: var(--size-4);
   border-radius: 24px;
   border-radius: var(--size-24);
-  width: 100%;
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -4654,16 +4654,16 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .segmented-control__segments::after {
   content: "";
-  background: #ffffff;
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
   position: absolute;
+  width: var(--segment-highlight-width);
   top: 4px;
   top: var(--size-4);
   bottom: 4px;
   bottom: var(--size-4);
   left: var(--segment-highlight-x);
   z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
   transition: left 300ms;
@@ -4675,19 +4675,21 @@ html:not([dir="rtl"]) .np-navigation-option {
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
-  min-width: 0;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
   margin: 0 0 0 4px;
   margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
   border-radius: 24px;
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
   transition: font-weight 300ms, background 300ms;
+  color: var(--color-interactive-primary);
 }
 .segmented-control__segment:first-child {
   margin-left: 0;
@@ -4702,16 +4704,15 @@ html:not([dir="rtl"]) .np-navigation-option {
   pointer-events: none;
 }
 .segmented-control__button {
+  width: 100%;
+  height: 100%;
   background: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   border: none;
   outline: none;
-  width: 100%;
-  height: 100%;
   font: inherit;
-  padding: none;
   outline: 2px solid transparent;
 }
 .segmented-control__button:focus {

package/build/styles/main.css

@@ -4637,15 +4637,15 @@ html:not([dir="rtl"]) .np-navigation-option {
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
   justify-content: center;
   align-items: center;
   background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
-  padding: 4px;
-  padding: var(--size-4);
   border-radius: 24px;
   border-radius: var(--size-24);
-  width: 100%;
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -4654,16 +4654,16 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .segmented-control__segments::after {
   content: "";
-  background: #ffffff;
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
   position: absolute;
+  width: var(--segment-highlight-width);
   top: 4px;
   top: var(--size-4);
   bottom: 4px;
   bottom: var(--size-4);
   left: var(--segment-highlight-x);
   z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
   transition: left 300ms;
@@ -4675,19 +4675,21 @@ html:not([dir="rtl"]) .np-navigation-option {
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
-  min-width: 0;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
   margin: 0 0 0 4px;
   margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
   border-radius: 24px;
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
   transition: font-weight 300ms, background 300ms;
+  color: var(--color-interactive-primary);
 }
 .segmented-control__segment:first-child {
   margin-left: 0;
@@ -4702,16 +4704,15 @@ html:not([dir="rtl"]) .np-navigation-option {
   pointer-events: none;
 }
 .segmented-control__button {
+  width: 100%;
+  height: 100%;
   background: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   border: none;
   outline: none;
-  width: 100%;
-  height: 100%;
   font: inherit;
-  padding: none;
   outline: 2px solid transparent;
 }
 .segmented-control__button:focus {

package/build/styles/segmentedControl/SegmentedControl.css

@@ -6,15 +6,15 @@
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
   justify-content: center;
   align-items: center;
   background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
-  padding: 4px;
-  padding: var(--size-4);
   border-radius: 24px;
   border-radius: var(--size-24);
-  width: 100%;
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -23,16 +23,16 @@
 }
 .segmented-control__segments::after {
   content: "";
-  background: #ffffff;
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
   position: absolute;
+  width: var(--segment-highlight-width);
   top: 4px;
   top: var(--size-4);
   bottom: 4px;
   bottom: var(--size-4);
   left: var(--segment-highlight-x);
   z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
   transition: left 300ms;
@@ -44,19 +44,21 @@
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
-  min-width: 0;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
   margin: 0 0 0 4px;
   margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
   border-radius: 24px;
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
   transition: font-weight 300ms, background 300ms;
+  color: var(--color-interactive-primary);
 }
 .segmented-control__segment:first-child {
   margin-left: 0;
@@ -71,16 +73,15 @@
   pointer-events: none;
 }
 .segmented-control__button {
+  width: 100%;
+  height: 100%;
   background: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   border: none;
   outline: none;
-  width: 100%;
-  height: 100%;
   font: inherit;
-  padding: none;
   outline: 2px solid transparent;
 }
 .segmented-control__button:focus {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@transferwise/components",
-  "version": "0.0.0-experimental-dc27817",
+  "version": "0.0.0-experimental-d675045",
   "description": "Neptune React components",
   "license": "Apache-2.0",
   "repository": {

package/src/main.css

@@ -4637,15 +4637,15 @@ html:not([dir="rtl"]) .np-navigation-option {
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
   justify-content: center;
   align-items: center;
   background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
-  padding: 4px;
-  padding: var(--size-4);
   border-radius: 24px;
   border-radius: var(--size-24);
-  width: 100%;
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -4654,16 +4654,16 @@ html:not([dir="rtl"]) .np-navigation-option {
 }
 .segmented-control__segments::after {
   content: "";
-  background: #ffffff;
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
   position: absolute;
+  width: var(--segment-highlight-width);
   top: 4px;
   top: var(--size-4);
   bottom: 4px;
   bottom: var(--size-4);
   left: var(--segment-highlight-x);
   z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
   transition: left 300ms;
@@ -4675,19 +4675,21 @@ html:not([dir="rtl"]) .np-navigation-option {
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
-  min-width: 0;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
   margin: 0 0 0 4px;
   margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
   border-radius: 24px;
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
   transition: font-weight 300ms, background 300ms;
+  color: var(--color-interactive-primary);
 }
 .segmented-control__segment:first-child {
   margin-left: 0;
@@ -4702,16 +4704,15 @@ html:not([dir="rtl"]) .np-navigation-option {
   pointer-events: none;
 }
 .segmented-control__button {
+  width: 100%;
+  height: 100%;
   background: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   border: none;
   outline: none;
-  width: 100%;
-  height: 100%;
   font: inherit;
-  padding: none;
   outline: 2px solid transparent;
 }
 .segmented-control__button:focus {

package/src/segmentedControl/SegmentedControl.css

@@ -6,15 +6,15 @@
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
+  padding: 4px;
+  padding: var(--size-4);
+  width: 100%;
   justify-content: center;
   align-items: center;
   background: rgba(134,167,189,0.10196);
   background: var(--color-background-neutral);
-  padding: 4px;
-  padding: var(--size-4);
   border-radius: 24px;
   border-radius: var(--size-24);
-  width: 100%;
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -23,16 +23,16 @@
 }
 .segmented-control__segments::after {
   content: "";
-  background: #ffffff;
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
   position: absolute;
+  width: var(--segment-highlight-width);
   top: 4px;
   top: var(--size-4);
   bottom: 4px;
   bottom: var(--size-4);
   left: var(--segment-highlight-x);
   z-index: 0;
+  background: #ffffff;
+  background: var(--color-background-screen);
   border-radius: 24px;
   border-radius: var(--size-24);
   transition: left 300ms;
@@ -44,19 +44,21 @@
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
-  min-width: 0;
-  align-items: center;
-  text-align: center;
-  vertical-align: middle;
   padding: 8px 16px;
   padding: var(--size-8) var(--size-16);
   margin: 0 0 0 4px;
   margin: 0 0 0 var(--size-4);
+  min-width: 0;
+  line-height: inherit;
+  align-items: center;
+  text-align: center;
+  vertical-align: middle;
   border-radius: 24px;
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
   transition: font-weight 300ms, background 300ms;
+  color: var(--color-interactive-primary);
 }
 .segmented-control__segment:first-child {
   margin-left: 0;
@@ -71,16 +73,15 @@
   pointer-events: none;
 }
 .segmented-control__button {
+  width: 100%;
+  height: 100%;
   background: none;
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
   border: none;
   outline: none;
-  width: 100%;
-  height: 100%;
   font: inherit;
-  padding: none;
   outline: 2px solid transparent;
 }
 .segmented-control__button:focus {

package/src/segmentedControl/SegmentedControl.less

@@ -7,12 +7,12 @@
 .segmented-control__segments {
   display: inline-flex;
   position: relative;
+  padding: var(--size-4);
+  width: 100%;
   justify-content: center;
   align-items: center;
   background: var(--color-background-neutral);
-  padding: var(--size-4);
-  border-radius: var(--size-24);
-  width: 100%;
+  border-radius: var(--size-24);  
   transition: outline 300ms;
   outline: 2px solid transparent;
 }
@@ -23,13 +23,13 @@
 
 .segmented-control__segments::after {
   content: "";
-  background: var(--color-background-screen);
-  width: var(--segment-highlight-width);
   position: absolute;
+  width: var(--segment-highlight-width);
   top: var(--size-4);
   bottom: var(--size-4);
   left: var(--segment-highlight-x);
   z-index: 0;
+  background: var(--color-background-screen);
   border-radius: var(--size-24);
   transition: left 300ms;
 }
@@ -42,16 +42,18 @@
   position: relative;
   flex: 1 1 100%;
   flex-flow: column;
+  padding: var(--size-8) var(--size-16);
+  margin: 0 0 0 var(--size-4);
   min-width: 0;
+  line-height: inherit;
   align-items: center;
   text-align: center;
   vertical-align: middle;
-  padding: var(--size-8) var(--size-16);
-  margin: 0 0 0 var(--size-4);
   border-radius: var(--size-24);
   z-index: 1;
   cursor: pointer;
   transition: font-weight 300ms, background 300ms;
+  color: var(--color-interactive-primary);
 }
 
 .segmented-control__segment:first-child {
@@ -69,14 +71,13 @@
 }
 
 .segmented-control__button {
+  width: 100%;
+  height: 100%;
   background: none;
   appearance: none;
   border: none;
   outline: none;
-  width: 100%;
-  height: 100%;
   font: inherit;
-  padding: none;
   outline: 2px solid transparent;
 }
 

package/src/segmentedControl/SegmentedControl.spec.tsx

@@ -61,6 +61,13 @@ describe('SegmentedControl', () => {
     );
   });
 
+  it('default value is selected', () => {
+    renderSegmentedControl({ mode: 'view', segments: defaultSegmentsWithControls });
+
+    const accountingTab = screen.getByRole('tab', { name: 'Accounting' });
+    expect(accountingTab).toHaveAttribute('aria-selected', 'true');
+  });
+
   it('lets the user pick through the segments when it is set to input', () => {
     renderSegmentedControl();