Merge release/1.32.0 into main branch (#660)

* remove required id from FormGroup (#645)

* Fix cypress tests (#647)

* Add data-testid to LoadingOverlay (#652)

* add Link variant to Button component (#659)

* upgrade react-select v5 (#658)

* Add Accordion to DS (#656)

Author: github-actions[bot]

cypress/integration/accordion_spec.js

@@ -0,0 +1,49 @@
+const accordions = [
+  {
+    name: 'Default',
+    path: 'components-accordion--default',
+    class: '.AccordionToggle__title',
+    match: 'Accordion Toggle #1',
+  },
+  {
+    name: 'Default Open',
+    path: 'components-accordion--default-open',
+    class: '.AccordionToggle__title',
+    match: 'Accordion Toggle #1',
+  },
+  {
+    name: 'Chevron Left',
+    path: 'components-accordion--chevron-left',
+    class: '.AccordionToggle__title',
+    match: 'Accordion Toggle #1',
+  },
+  {
+    name: 'Flush',
+    path: 'components-accordion--flush',
+    class: '.AccordionToggle__title',
+    match: 'Accordion Toggle #1',
+  },
+  {
+    name: 'Separate',
+    path: 'components-accordion--separate',
+    class: '.AccordionToggle__title',
+    match: 'Accordion Toggle #1',
+  },
+  {
+    name: 'Disabled',
+    path: 'components-accordion--disabled',
+    class: '.AccordionToggle__title',
+    match: 'Accordion Toggle -- Disabled',
+  },
+];
+
+describe('Accordion', () => {
+  accordions.forEach((test) => {
+    it(test.name, () => {
+      cy.visit(test.path);
+      const match = test.match ? test.match : test.name;
+      cy.get('#storybook-preview-iframe').iframe().find(test.class).should('contain', match);
+      cy.takePercySnapshot(test.path);
+    });
+  });
+});

cypress/integration/button_spec.js

@@ -23,6 +23,12 @@ const buttons = [
     class: '.Button',
     match: 'Skip',
   },
+  {
+    name: 'Link',
+    path: 'components-button--link',
+    class: '.Button',
+    match: 'Send',
+  },
   {
     name: 'Brands',
     path: 'components-button--brands',

cypress/integration/form_elements/checkbox_button_group_spec.js

@@ -2,35 +2,40 @@ const checkboxButtonGroups = [
   {
     name: 'Default',
     path: 'components-form-elements-checkboxbuttongroup--default',
-    class: '.InputLabel',
+    class: '.FormControlLabel__label',
+    value: 'Value',
   },
   {
     name: 'Default Row',
     path: 'components-form-elements-checkboxbuttongroup--default-row',
-    class: '.InputLabel',
+    class: '.FormControlLabel__label',
+    value: 'Label',
   },
   {
     name: 'Bordered Row',
     path: 'components-form-elements-checkboxbuttongroup--bordered-row',
-    class: '.InputLabel',
+    class: '.FormControlLabel__label',
+    value: 'Label',
   },
   {
     name: 'Description',
     path: 'components-form-elements-checkboxbuttongroup--description',
-    class: '.InputLabel',
+    class: '.FormControlLabel__label',
+    value: 'Label',
   },
   {
     name: 'Description Row',
     path: 'components-form-elements-checkboxbuttongroup--description-row',
-    class: '.InputLabel',
+    class: '.FormControlLabel__label',
+    value: 'Label',
   },
 ];
 
 describe('Form Elements -> CheckboxButtonGroup', () => {
   checkboxButtonGroups.forEach((test) => {
     it(test.name, () => {
       cy.visit(test.path);
-      cy.get('#storybook-preview-iframe').iframe().find(test.class).should('contain', 'Label');
+      cy.get('#storybook-preview-iframe').iframe().find(test.class).should('contain', test.value);
       cy.takePercySnapshot(test.path);
     });
   });

package.json

@@ -1,10 +1,10 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "1.31.1",
+  "version": "1.32.0",
   "dependencies": {
     "react-bootstrap": "^2.0.2",
     "react-router-dom": "^5.2.0",
-    "react-select": "^3.0.8",
+    "react-select": "^5.0.0",
     "react-transition-group": "^4.3.0",
     "uuid": "^7.0.2"
   },

scss/buttons.scss

@@ -436,3 +436,46 @@ $warning: $ux-yellow-400;
     }
   }
 
+  @mixin btn-link {
+    $btn-link-background: transparent;
+    $btn-link-border: transparent;
+    $btn-link-color: $ux-blue;
+    
+    $btn-link-hover-background: transparent;
+    $btn-link-hover-border: transparent;
+    $btn-link-hover-color: $ux-blue-600;
+    
+    $btn-link-active-background: transparent;
+    $btn-link-active-border: transparent;
+    $btn-link-active-color: $ux-blue-600;
+  
+    @include button-variant(
+      $btn-link-background, 
+      $btn-link-border,
+      $btn-link-color,
+      
+      $btn-link-hover-background,
+      $btn-link-hover-border,
+      $btn-link-hover-color,
+      
+      $btn-link-active-background,
+      $btn-link-active-border,
+      $btn-link-active-color,
+    );
+
+    text-decoration: none;
+
+    &:disabled {
+      color: $ux-blue;
+      opacity: 0.5;
+    }
+
+    &:hover {
+      text-decoration: underline;
+    }
+
+    &:focus, &:active {
+      @include btn-focus-outline;
+    }
+  }
+

scss/colors/inputs.scss

@@ -1,7 +1,7 @@
 @import './palette';
 
 $input-border-color: $ux-gray-400; // Override bootstrap default
-$input-box-shadow: inset 0px 2px 2px rgb(225 228 232 / 65%);
+$input-box-shadow: inset 0px 2px 2px rgba(225, 228, 232, 0.65);
 $input-disabled-bg: $ux-gray-300; // Override bootstrap default
 $input-focus-border-color: $ux-blue-500;
 $input-btn-focus-color: $ux-blue-300;

scss/theme.scss

@@ -11,6 +11,7 @@
 @import './navbar';
 @import './spacing';
 @import './timing.scss';
+@import './transitions.scss';
 @import './typography';
 @import './z_stack';
 

scss/transitions.scss

@@ -0,0 +1,3 @@
+$focus-state-transition-time: 0.1s;
+
+$chevron-rotation-transition-time: 0.2s;