Merge release/1.28.0 into main branch (#563)

* updates Dropdown documentation, adds Figma addon for illustrations (#554)

* add transparent Button variant & update DropdownIconToggle (#560)

Adding the transparent and outline transparent variant to the Button component. Uses transparent button variant in ModalFooter actions for closing. Updates DropdownToggle to support icon-only dropdown. Removes DropdownIconToggle in favor of using DropdownToggle to better support flexible styling.

* Prepare release 1.28.0

Co-authored-by: Jason Basuil <[email protected]>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

cypress/integration/button_spec.js

@@ -17,6 +17,12 @@ const buttons = [
     class: '.Button',
     match: 'Edit',
   },
+  {
+    name: 'Transparent',
+    path: 'components-button--transparent',
+    class: '.Button',
+    match: 'Skip',
+  },
 ];
 
 describe('Button', () => {

cypress/integration/dropdown_spec.js

@@ -10,8 +10,13 @@ const dropdowns = [
     class: '.Dropdown',
   },
   {
-    name: 'Icon',
-    path: 'components-dropdown--icon',
+    name: 'Icon Default',
+    path: 'components-dropdown--icon-default',
+    class: '.Dropdown',
+  },
+  {
+    name: 'Icon Swap',
+    path: 'components-dropdown--icon-swap',
     class: '.Dropdown',
   },
 ];

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@user-interviews/ui-design-system",
-  "version": "1.27.0",
+  "version": "1.28.0",
   "dependencies": {
     "react-bootstrap": "^2.0.2",
     "react-router-dom": "^5.2.0",
@@ -117,6 +117,7 @@
     "react-test-renderer": "^16.12.0",
     "react-tracking": "8.1.0",
     "sass-loader": "^8.0.2",
+    "storybook-addon-designs": "^6.2.1",
     "style-loader": "^1.1.3",
     "styled-components": "^5.3.3"
   },

scss/buttons.scss

@@ -192,3 +192,65 @@ $warning: $ux-yellow-400;
     border-color: $btn-outline-warning-active-border-color;
   }
 }
+
+@mixin btn-transparent {
+  $btn-transparent-background: transparent;
+  $btn-transparent-border: transparent;
+  $btn-transparent-color: $ux-gray-700;
+  
+  $btn-transparent-hover-background: $ux-gray-300;
+  $btn-transparent-hover-border: transparent;
+  $btn-transparent-hover-color: $ux-gray-900;
+  
+  $btn-transparent-active-background: transparent;
+  $btn-transparent-active-border: $ux-gray-400;
+  $btn-transparent-active-color: $ux-gray-900;
+
+  @include button-variant(
+    $btn-transparent-background, 
+    $btn-transparent-border,
+    $btn-transparent-color,
+    
+    $btn-transparent-hover-background,
+    $btn-transparent-hover-border,
+    $btn-transparent-hover-color,
+    
+    $btn-transparent-active-background,
+    $btn-transparent-active-border,
+    $btn-transparent-active-color,
+  );
+
+  &:disabled {
+    color: $ux-gray-500;
+  }
+}
+
+@mixin btn-outline-transparent {
+  $btn-outline-transparent-color: $ux-gray-900;
+  $btn-outline-transparent-color-hover: $ux-gray-900;
+
+  $btn-outline-transparent-hover-background: $ux-gray-300;
+  $btn-outline-transparent-hover-border: $ux-gray-300;
+  $btn-outline-transparent-hover-color: $ux-gray-900;
+
+  $btn-outline-transparent-border: $ux-gray-400;
+
+  $btn-outline-transparent-active-background: $ux-gray-400;
+  $btn-outline-transparent-active-border-color: $ux-gray-400;
+  
+  @include button-outline-variant(
+    $btn-outline-transparent-color, 
+    $btn-outline-transparent-color-hover,
+
+    $btn-outline-transparent-hover-background,
+    $btn-outline-transparent-hover-border,
+    $btn-outline-transparent-hover-color,
+  );
+  border-color: $btn-outline-transparent-border;
+
+  &:active {
+    background-color: $btn-outline-transparent-active-background;
+    border-color: $btn-outline-transparent-active-border-color;
+  }
+}
+