make use of styled-components .attrs extension method to define static attributes on various components that were spreading global defined objects

Author: based-ghost

__stories__/helpers/components/PackageLink.tsx

@@ -23,7 +23,7 @@ const Link = styled.a`
   transform: translate3d(0px, 0px, 0px);
 
   :hover {
-    transform: translate3d(0px, -2px, 0px);
+    transform: translate3d(0px, -1.5px, 0px);
   }
 `;
 

__tests__/IndicatorIcons.test.tsx

@@ -38,7 +38,7 @@ const createIndicatorIconsProps = () => {
 
 const customIconFn = (props: Partial<IndicatorIconsProps>): ReactNode => {
   const { menuOpen, isLoading, isInvalid, isDisabled } = props;
-  const testIdText = `${menuOpen}_${isLoading}_${isInvalid}_${isDisabled}`;
+  const testIdText = `${menuOpen}-${isLoading}-${isInvalid}-${isDisabled}`;
 
   return (
     <span data-testid={testIdText}>
@@ -115,12 +115,15 @@ test('clear icon can render as a ReactNode', async () => {
 });
 
 test('clear icon can render as a callback function with return type of ReactNode - callback accepts forwarded state props from wrapping component.', async () => {
-  const customIconTestIdText = 'true_false_false_false';
   const { props } = createIndicatorIconsProps();
   const mergedProps = { ...props, menuOpen: true, clearIcon: customIconFn };
   const { getByTestId } = renderIndicatorIcons(mergedProps);
 
-  expect(getByTestId(customIconTestIdText)).toBeInTheDocument();
+  // Build test-id from forwarded state javascript object payload
+  const { menuOpen, isLoading, isInvalid, isDisabled } = mergedProps;
+  const forwardedStateId = `${menuOpen}-${isLoading}-${isInvalid}-${isDisabled}`
+
+  expect(getByTestId(forwardedStateId)).toBeInTheDocument();
 });
 
 test('caret icon can render as a ReactNode', async () => {
@@ -135,10 +138,13 @@ test('caret icon can render as a ReactNode', async () => {
 });
 
 test('caret icon can render as a callback function with return type of ReactNode - callback accepts forwarded state props from wrapping component.', async () => {
-  const customIconTestIdText = 'true_false_false_false';
   const { props } = createIndicatorIconsProps();
   const mergedProps = { ...props, menuOpen: true, caretIcon: customIconFn };
   const { getByTestId } = renderIndicatorIcons(mergedProps);
 
-  expect(getByTestId(customIconTestIdText)).toBeInTheDocument();
+  // Build test-id from forwarded state javascript object payload
+  const { menuOpen, isLoading, isInvalid, isDisabled } = mergedProps;
+  const forwardedStateId = `${menuOpen}-${isLoading}-${isInvalid}-${isDisabled}`
+
+  expect(getByTestId(forwardedStateId)).toBeInTheDocument();
 });

docs/asset-manifest.json

@@ -1,15 +1,15 @@
 {
   "files": {
-    "main.js": "./main.2b2021dd.iframe.bundle.js",
+    "main.js": "./main.dc92d9cb.iframe.bundle.js",
     "runtime~main.js": "./runtime~main.f398e60b.iframe.bundle.js",
-    "vendors~main.js": "./vendors~main.dacc63da.iframe.bundle.js",
-    "vendors~main.js.map": "./vendors~main.dacc63da.iframe.bundle.js.map",
+    "vendors~main.js": "./vendors~main.7e0302cf.iframe.bundle.js",
+    "vendors~main.js.map": "./vendors~main.7e0302cf.iframe.bundle.js.map",
     "iframe.html": "./iframe.html",
-    "vendors~main.dacc63da.iframe.bundle.js.LICENSE.txt": "./vendors~main.dacc63da.iframe.bundle.js.LICENSE.txt"
+    "vendors~main.7e0302cf.iframe.bundle.js.LICENSE.txt": "./vendors~main.7e0302cf.iframe.bundle.js.LICENSE.txt"
   },
   "entrypoints": [
     "runtime~main.f398e60b.iframe.bundle.js",
-    "vendors~main.dacc63da.iframe.bundle.js",
-    "main.2b2021dd.iframe.bundle.js"
+    "vendors~main.7e0302cf.iframe.bundle.js",
+    "main.dc92d9cb.iframe.bundle.js"
   ]
 }

docs/iframe.html

@@ -130,4 +130,4 @@
 
 
 
-              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.dacc63da.iframe.bundle.js"></script><script src="main.2b2021dd.iframe.bundle.js"></script></body></html>
+              window['FRAMEWORK_OPTIONS'] = {};</script><script src="runtime~main.f398e60b.iframe.bundle.js"></script><script src="vendors~main.7e0302cf.iframe.bundle.js"></script><script src="main.dc92d9cb.iframe.bundle.js"></script></body></html>

docs/index.html

@@ -135,4 +135,4 @@
 
 
 
-              window['DOCS_MODE'] = false;</script><script src="runtime~main.0823b7e43ff705590cc9.manager.bundle.js"></script><script src="vendors~main.751039d5a199589f8853.manager.bundle.js"></script><script src="main.f593d086f4784443a29f.manager.bundle.js"></script></body></html>
+              window['DOCS_MODE'] = false;</script><script src="runtime~main.0823b7e43ff705590cc9.manager.bundle.js"></script><script src="vendors~main.163b9d3809bb608345c7.manager.bundle.js"></script><script src="main.f593d086f4784443a29f.manager.bundle.js"></script></body></html>