social-logos 3.1.7 → 3.1.9

package/CHANGELOG.md

@@ -1,3 +1,11 @@
+## [3.1.9] - 2024-10-14
+### Fixed
+- Add `key` in React example to make it more correct. [#39709]
+
+## [3.1.8] - 2024-09-05
+### Fixed
+- Address React usage issues found by eslint in example.tsx. [#39214]
+
 ## [3.1.7] - 2024-08-23
 ### Changed
 - Internal updates.
@@ -149,6 +157,8 @@
 
 - Build: Refactored (aligned build system with Gridicons).
 
+[3.1.9]: https://github.com/Automattic/social-logos/compare/v3.1.8...v3.1.9
+[3.1.8]: https://github.com/Automattic/social-logos/compare/v3.1.7...v3.1.8
 [3.1.7]: https://github.com/Automattic/social-logos/compare/v3.1.6...v3.1.7
 [3.1.6]: https://github.com/Automattic/social-logos/compare/v3.1.5...v3.1.6
 [3.1.5]: https://github.com/Automattic/social-logos/compare/v3.1.4...v3.1.5

package/build/react/example.js

@@ -6,6 +6,22 @@ const react_1 = require("react");
 const social_logo_1 = require("./social-logo");
 const social_logo_data_1 = require("./social-logo-data");
 require("../css/example.css");
+/**
+ * An example React component that displays a single social logo.
+ *
+ * @param {object}  props               - The properties.
+ * @param {string}  props.name          - Logo name.
+ * @param {number}  props.iconSize      - Icon size.
+ * @param {boolean} props.showIconNames - Whether to show icon names.
+ * @return {React.Component} The `SocialLogoItemExample` component.
+ */
+function SocialLogoItemExample({ name, iconSize, showIconNames }) {
+    const handleClick = (0, react_1.useCallback)(() => {
+        const code = `<SocialLogo icon="${name}" size="${iconSize}" />`;
+        window.prompt('Copy component code:', code);
+    }, [iconSize, name]);
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(social_logo_1.SocialLogo, { icon: name, size: iconSize, onClick: handleClick }), showIconNames && (0, jsx_runtime_1.jsx)("p", { children: name })] }, name));
+}
 /**
  * An example React component that displays all the social logos.
  *
@@ -15,19 +31,13 @@ function SocialLogosExample() {
     const [useSmallIcons, setUseSmallIcons] = (0, react_1.useState)(false);
     const [showIconNames, setShowIconNames] = (0, react_1.useState)(true);
     const iconSize = useSmallIcons ? 24 : 48;
-    const handleClick = name => {
-        const code = `<SocialLogo icon="${name}" size="${iconSize}" />`;
-        window.prompt('Copy component code:', code);
-    };
-    const handleSmallIconsToggle = e => {
+    const handleSmallIconsToggle = (0, react_1.useCallback)(e => {
         setUseSmallIcons(e.target.checked);
-    };
-    const handleIconNamesToggle = e => {
+    }, [setUseSmallIcons]);
+    const handleIconNamesToggle = (0, react_1.useCallback)(e => {
         setShowIconNames(e.target.checked);
-    };
-    const allSocialLogos = social_logo_data_1.SocialLogoData.map(logo => {
-        return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(social_logo_1.SocialLogo, { icon: logo.name, size: iconSize, onClick: handleClick.bind(this, logo.name) }), showIconNames && (0, jsx_runtime_1.jsx)("p", { children: logo.name })] }, logo.name));
-    });
+    }, [setShowIconNames]);
+    const allSocialLogos = social_logo_data_1.SocialLogoData.map(logo => ((0, jsx_runtime_1.jsx)(SocialLogoItemExample, { name: logo.name, iconSize: iconSize, showIconNames: showIconNames }, logo.name)));
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "social-logos-example" }, { children: [(0, jsx_runtime_1.jsx)("h1", { children: "Social Logos" }), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "display-control-group" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "display-control" }, { children: [(0, jsx_runtime_1.jsx)("h4", { children: "Small icons" }), (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "switch" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", onChange: handleSmallIconsToggle, checked: useSmallIcons }), (0, jsx_runtime_1.jsx)("span", { className: "handle" })] }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "display-control" }, { children: [(0, jsx_runtime_1.jsx)("h4", { children: "Icon names" }), (0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "switch" }, { children: [(0, jsx_runtime_1.jsx)("input", { type: "checkbox", onChange: handleIconNamesToggle, checked: showIconNames }), (0, jsx_runtime_1.jsx)("span", { className: "handle" }), (0, jsx_runtime_1.jsx)("span", { className: "switch-label", "data-on": "On", "data-off": "Off" })] }))] }))] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "icons" }, { children: allSocialLogos })), (0, jsx_runtime_1.jsx)("p", { children: (0, jsx_runtime_1.jsx)("a", Object.assign({ href: "https://github.com/Automattic/social-logos" }, { children: "GitHub" })) })] })));
 }
 exports.default = SocialLogosExample;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "social-logos",
-	"version": "3.1.7",
+	"version": "3.1.9",
 	"description": "A repository of all the social logos used on WordPress.com.",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/social-logos/",
 	"bugs": {