Social logos | Add TypeScript support (#37528)

* Update components

* Remove unnecessary class prop from threads logo

* Update tools to handle TS

* Add changelog

* Fix typescript and glob version

* Sort generated icons list

* Sort the auto generated icons

* Fix up versions

* Move noEmit to CLI for project-structure constraints

Committed via a GitHub action: https://github.com/Automattic/jetpack/actions/runs/9229474530

Upstream-Ref: Automattic/jetpack@d557c9d

CHANGELOG.md

@@ -1,3 +1,10 @@
+## [3.0.1-alpha] - unreleased
+
+This is an alpha version! The changes listed here are not final.
+
+### Added
+- Social Logos | Added TypeScript support
+
 ## [3.0.0] - 2024-05-23
 ### Added
 - CSS file with encoded inline font is now automatically generated. [#36964]
@@ -21,61 +28,78 @@
 - Example files are rewritten. [#36964]
 
 ## 2.5.9 - 2024-03-05
+
 - New icon: `sms`
 
 ## 2.5.8 - 2023-12-20
+
 - New icon: `bluesky`
 
 ## 2.5.7 - 2023-12-11
+
 - Updated icon: `patreon`
 
 ## 2.5.6 - 2023-10-13
+
 - Updated icon: `x`
 - Removed unnecessary aria label attributes from Threads and X SVGs.
 
 ## 2.5.5 - 2023-09-15
+
 - New icon: `x`
 
 ## 2.5.4 - 2023-07-10
+
 - New icon: `threads`
 
 ## 2.5.3 - 2023-06-15
+
 - New icon: `fediverse`
 - New icon: `nextdoor`
 - Updated dev dependencies and build tools.
 - Updated icon font.
 
 ## 2.5.2 - 2023-02-01
+
 - New icon: `mastadon`
 
 ## 2.5.1 - 2023-01-13
+
 - React 18 support.
 
 ## 2.5.0 - 2022-02-01
+
 - Added copy post url button.
 
 ## 2.4.0 - 2021-09-01
+
 - Updated icon: `medium`
 - Updated icon: `facebook`
 - React 17 support.
 - Update dev dependencies and build tools.
 
 ## 2.3.0 - 2021-01-27
+
 - New icon: `medium-alt`
 - New icon: `tiktok`
 - New icon: `tiktok-alt`
 - Updated icon: `medium`
 
 ## 2.2.0 - 2021-01-19
+
 - New icon: `patreon`
 
 ## 2.1.2 - 2020-03-12
+
 - Built the package with updated dependencies.
 
 ## 2.1.1 - 2020-03-10
+
 - Build: Fixed bug where React component would render no icon at all (despite properly passed properties).
 
 ## 2.1.0 - 2018-01-31
+
 - Build: Refactored (aligned build system with Gridicons).
 
+[3.0.1-alpha]: https://github.com/Automattic/social-logos/compare/v3.0.0...v3.0.1-alpha
 [3.0.0]: https://github.com/Automattic/social-logos/compare/v2.5.9...v3.0.0

build/react/example.d.ts

@@ -0,0 +1,8 @@
+import './example.css';
+/**
+ * An example React component that displays all the social logos.
+ *
+ * @returns {React.Component} The `SocialLogosExample` component.
+ */
+declare function SocialLogosExample(): import("react/jsx-runtime").JSX.Element;
+export default SocialLogosExample;

build/react/example.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const social_logo_1 = require("./social-logo");
+const social_logo_data_1 = require("./social-logo-data");
+require("./example.css");
+/**
+ * An example React component that displays all the social logos.
+ *
+ * @returns {React.Component} The `SocialLogosExample` component.
+ */
+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 => {
+        setUseSmallIcons(e.target.checked);
+    };
+    const handleIconNamesToggle = 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));
+    });
+    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;

build/react/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Export components.
+ */
+export * from './social-logo';
+export { SocialLogo as default } from './social-logo';
+export { SocialLogoData } from './social-logo-data';

build/react/index.js

@@ -0,0 +1,25 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SocialLogoData = exports.default = void 0;
+/**
+ * Export components.
+ */
+__exportStar(require("./social-logo"), exports);
+var social_logo_1 = require("./social-logo");
+Object.defineProperty(exports, "default", { enumerable: true, get: function () { return social_logo_1.SocialLogo; } });
+var social_logo_data_1 = require("./social-logo-data");
+Object.defineProperty(exports, "SocialLogoData", { enumerable: true, get: function () { return social_logo_data_1.SocialLogoData; } });