codelabs-react - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

dist/components.js

@@ -16,3 +16,3 @@ "use strict";
 exports.H6 = H6;
-exports.Parapgraph = Parapgraph;
+exports.Paragraph = Paragraph;
 exports.ListItem = ListItem;
@@ -31,2 +31,4 @@ exports.ButtonLink = ButtonLink;
 
+var _copytoclipboard = require("./components/copytoclipboard");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -117,3 +119,3 @@
 
-function Parapgraph(_ref11) {
+function Paragraph(_ref11) {
   var children = _ref11.children;
@@ -168,3 +170,9 @@ return /*#__PURE__*/_react["default"].createElement("p", null, children);
   var children = _ref16.children;
-  return /*#__PURE__*/_react["default"].createElement("pre", null, /*#__PURE__*/_react["default"].createElement("code", null, children));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_copytoclipboard.CopyToClipboard, {
+    copyContent: children
+  }), /*#__PURE__*/_react["default"].createElement("pre", null, /*#__PURE__*/_react["default"].createElement("code", null, children)));
 }
@@ -174,3 +182,9 @@
   var children = _ref17.children;
-  return /*#__PURE__*/_react["default"].createElement("pre", null, /*#__PURE__*/_react["default"].createElement("code", null, children));
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    style: {
+      position: "relative"
+    }
+  }, /*#__PURE__*/_react["default"].createElement(_copytoclipboard.CopyToClipboard, {
+    copyContent: children
+  }), /*#__PURE__*/_react["default"].createElement("pre", null, /*#__PURE__*/_react["default"].createElement("code", null, children)));
 }
@@ -177,0 +191,0 @@

dist/core.test.js

@@ -60,3 +60,3 @@ "use strict";
 })));
-test("Page can be navigated using the buttons at the bottom of the page", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+test("Copy component displays on hover and is clickable", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
   var button;
@@ -67,2 +67,31 @@ return regeneratorRuntime.wrap(function _callee3$(_context3) {
         case 0:
+          (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Codelabs.BaseWeb, null));
+          button = _react2.screen.getByRole("button", {
+            name: "Copy"
+          });
+          expect(button).not.toBeVisible(); // test hovering the snippet container
+
+          (0, _react2.fireEvent)(_react2.screen.getByText("https://api.darksky.net/forecast/DARKSKY_API_KEY/40.7720232,-73.9732319"), new MouseEvent("mouseover", {
+            bubbles: true,
+            cancelable: true
+          }));
+          expect(button).toBeVisible(); // test copying
+
+          _react2.fireEvent.click(button);
+
+          expect(button.textContent).toBe("Copied");
+
+        case 7:
+        case "end":
+          return _context3.stop();
+      }
+    }
+  }, _callee3);
+})));
+test("Page can be navigated using the buttons at the bottom of the page", /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
+  var button;
+  return regeneratorRuntime.wrap(function _callee4$(_context4) {
+    while (1) {
+      switch (_context4.prev = _context4.next) {
+        case 0:
           (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Codelabs.Default, null)); // navigate to the next page
@@ -89,6 +118,6 @@
         case "end":
-          return _context3.stop();
+          return _context4.stop();
       }
     }
-  }, _callee3);
+  }, _callee4);
 })));

dist/index.js

@@ -65,3 +65,3 @@ "use strict";
   var H6Component = overrides.H6 || _components.H6;
-  var ParapgraphComponent = overrides.Parapgraph || _components.Parapgraph;
+  var ParagraphComponent = overrides.Paragraph || _components.Paragraph;
   var ListItemComponent = overrides.ListItem || _components.ListItem;
@@ -82,3 +82,3 @@ var ButtonLinkComponent = overrides.ButtonLink || _components.ButtonLink;
     p: function p(props) {
-      return /*#__PURE__*/_react["default"].createElement(ParapgraphComponent, null, props.children);
+      return /*#__PURE__*/_react["default"].createElement(ParagraphComponent, null, props.children);
     },
@@ -85,0 +85,0 @@ h2: function h2(props) {

package.json

 {
   "name": "codelabs-react",
-  "version": "2.1.0",
+  "version": "3.0.0",
   "description": "",
@@ -8,2 +8,3 @@ "main": "dist/index.js",
     "test": "jest",
+    "test:debug": "node --inspect-brk node_modules/.bin/jest --runInBand",
     "storybook": "start-storybook -p 6006",
@@ -10,0 +11,0 @@ "build-storybook": "build-storybook",

README.md

@@ -41,3 +41,3 @@ # codelabs-react
     // Text overrides
-    Parapgraph: ({ children }) => React.Component,
+    Paragraph: ({ children }) => React.Component,
     H1: ({ children }) => React.Component,
@@ -49,3 +49,3 @@ H2: ({ children }) => React.Component,
     H6: ({ children }) => React.Component,
-    Parapgraph: ({ children }) => React.Component,
+    Paragraph: ({ children }) => React.Component,
     ListItem: ({ children }) => React.Component,
@@ -52,0 +52,0 @@

src/components.js

 import React from "react";
 
+import { CopyToClipboard } from "./components/copytoclipboard";
+
 export function Header({ title }) {
@@ -97,3 +99,3 @@ return (
 
-export function Parapgraph({ children }) {
+export function Paragraph({ children }) {
   return <p>{children}</p>;
@@ -144,5 +146,8 @@ }
   return (
-    <pre>
-      <code>{children}</code>
-    </pre>
+    <div style={{ position: "relative" }}>
+      <CopyToClipboard copyContent={children} />
+      <pre>
+        <code>{children}</code>
+      </pre>
+    </div>
   );
@@ -153,5 +158,8 @@ }
   return (
-    <pre>
-      <code>{children}</code>
-    </pre>
+    <div style={{ position: "relative" }}>
+      <CopyToClipboard copyContent={children} />
+      <pre>
+        <code>{children}</code>
+      </pre>
+    </div>
   );
@@ -158,0 +166,0 @@ }

src/core.test.js

@@ -34,2 +34,25 @@ import React from "react";
 
+test("Copy component displays on hover and is clickable", async () => {
+  render(<BaseWeb />);
+
+  const button = screen.getByRole("button", { name: "Copy" });
+  expect(button).not.toBeVisible();
+
+  // test hovering the snippet container
+  fireEvent(
+    screen.getByText(
+      "https://api.darksky.net/forecast/DARKSKY_API_KEY/40.7720232,-73.9732319"
+    ),
+    new MouseEvent("mouseover", {
+      bubbles: true,
+      cancelable: true,
+    })
+  );
+  expect(button).toBeVisible();
+
+  // test copying
+  fireEvent.click(button);
+  expect(button.textContent).toBe("Copied");
+});
+
 test("Page can be navigated using the buttons at the bottom of the page", async () => {
@@ -36,0 +59,0 @@ render(<Default />);

src/index.js

@@ -21,3 +21,3 @@ import React, { useState } from "react";
   CodeBox,
-  Parapgraph,
+  Paragraph,
   ListItem,
@@ -54,3 +54,3 @@ Img,
   const H6Component = overrides.H6 || H6;
-  const ParapgraphComponent = overrides.Parapgraph || Parapgraph;
+  const ParagraphComponent = overrides.Paragraph || Paragraph;
   const ListItemComponent = overrides.ListItem || ListItem;
@@ -72,3 +72,3 @@
   const Mapper = {
-    p: (props) => <ParapgraphComponent>{props.children}</ParapgraphComponent>,
+    p: (props) => <ParagraphComponent>{props.children}</ParagraphComponent>,
     h2: (props) => <H2Component>{props.children}</H2Component>,
@@ -75,0 +75,0 @@ h3: (props) => <H3Component>{props.children}</H3Component>,

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

336961

increased by2.72%

Number of package files

16

increased by14.29%

Lines of code

1690

increased by10.53%

No dependency changes