@zohodesk/components 1.0.0-temp-256.1 → 1.0.0-temp-259.1

package/es/v1/Button/README.md

@@ -62,8 +62,9 @@ import Button from '@zohodesk/components/es/v1/Button/Button';
 | `customId` | `string` | — | `data-id` attribute for automation |
 | `testId` | `string` | — | `data-test-id` attribute for testing |
 | `palette` | `oneOf: default, primary, secondary, danger, success` | `default` | Color palette |
-| `bgAppearance` | `oneOf: filled, onHover, none` | `filled` | Background behavior |
-| `borderAppearance` | `oneOf: default, onHover, none` | `default` | Border behavior |
+| `appearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored at rest |
+| `hoverAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored on hover/focus/active |
+| `selectedAppearance` | `array of: border, text, bg` | `['bg', 'border']` | Which treatments are colored when `isSelected` |
 | `variant` | `oneOf: text, icon, iconWithText` | `text` | Display variant |
 | `size` | `oneOf: small, medium, large, full` | `medium` | Size variant |
 | `status` | `oneOf: default, loading, success` | `default` | Status state |

package/es/v1/Button/__tests__/Button.spec.js

@@ -28,21 +28,29 @@ describe('Button - Component', () => {
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const bgAppearance = ['default', 'onHover', 'none'];
-  test.each(bgAppearance)('Should render bgAppearance of buttons - %s', bg => {
+  const appearanceCombos = [['bg'], ['border'], ['text'], ['bg', 'border'], []];
+  test.each(appearanceCombos.map(combo => [combo]))('Should render appearance of buttons - %s', appearance => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
-      bgAppearance: bg
+      appearance: appearance
     }));
     expect(asFragment()).toMatchSnapshot();
   });
-  const borderAppearance = ['default', 'onHover', 'none'];
-  test.each(borderAppearance)('Should render borderAppearance of buttons - %s', border => {
+  test.each(appearanceCombos.map(combo => [combo]))('Should render hoverAppearance of buttons - %s', appearance => {
     const {
       asFragment
     } = render( /*#__PURE__*/React.createElement(Button, {
-      borderAppearance: border
+      hoverAppearance: appearance
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(appearanceCombos.map(combo => [combo]))('Should render selectedAppearance of buttons - %s', appearance => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(Button, {
+      isSelected: true,
+      selectedAppearance: appearance
     }));
     expect(asFragment()).toMatchSnapshot();
   });