From 6bdffd9823b3dc19fb8a24c31c1e069d5d7c50a3 Mon Sep 17 00:00:00 2001 From: tbradsha <32492176+tbradsha@users.noreply.github.com> Date: Thu, 2 May 2024 14:19:00 -0600 Subject: [PATCH] Don't ignore React files --- projects/js-packages/social-logos/.gitignore | 3 +- .../social-logos/build/react/example.css | 135 ++++ .../social-logos/build/react/example.jsx | 74 +++ .../social-logos/build/react/index.jsx | 5 + .../build/react/social-logo-data.jsx | 583 ++++++++++++++++++ .../social-logos/build/react/social-logo.jsx | 39 ++ 6 files changed, 838 insertions(+), 1 deletion(-) create mode 100644 projects/js-packages/social-logos/build/react/example.css create mode 100644 projects/js-packages/social-logos/build/react/example.jsx create mode 100644 projects/js-packages/social-logos/build/react/index.jsx create mode 100644 projects/js-packages/social-logos/build/react/social-logo-data.jsx create mode 100644 projects/js-packages/social-logos/build/react/social-logo.jsx diff --git a/projects/js-packages/social-logos/.gitignore b/projects/js-packages/social-logos/.gitignore index 3eebe7b0d4ff8..2e00c9d4e404f 100644 --- a/projects/js-packages/social-logos/.gitignore +++ b/projects/js-packages/social-logos/.gitignore @@ -1,3 +1,4 @@ vendor/ node_modules/ -build/ +build/* +!build/react diff --git a/projects/js-packages/social-logos/build/react/example.css b/projects/js-packages/social-logos/build/react/example.css new file mode 100644 index 0000000000000..c08ffce4a4323 --- /dev/null +++ b/projects/js-packages/social-logos/build/react/example.css @@ -0,0 +1,135 @@ +html { + color: #767676; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen-Sans", "Ubuntu", "Cantarell", "Helvetica Neue", sans-serif; + line-height: 1.15; +} + +a:link, a:visited { + color: #999; +} + +a:active { + color: #1fc1ad; +} + +h1 { + text-align: center; + font-size: 24pt; +} + +.social-logos-example > p { + text-align: center; + margin-bottom: 2em; +} + +.social-logos-example { + max-width: 900px; + margin: 100px auto; +} + +[type=checkbox] { + margin: 0; +} + +.icons { + padding: 0 20px; + overflow: hidden; + margin-bottom: 50px; + display: flex; + flex-wrap: wrap; + justify-content: center; +} + +.icons div { + width: 64px; + height: 64px; + float: left; + padding: 6px 2px; + position: relative; + font-size: 7pt; + cursor: pointer; + text-align: center; +} + +.icons div p { + margin: 0; + color: #767676; + text-align: center; + overflow: hidden; + max-height: 2.2em; + word-break: break-word; +} + +.icons div p.is-hidden { + display: none; +} + + +.icons div:hover svg { + fill: #1fc1ad; +} + +.display-control-group { + display: flex; + justify-content: space-around; + margin-bottom: 20px; +} + +.display-control { + display: flex; +} + +.display-control h4 { + margin: 0 10px 0 0; +} + +.switch { + position: relative; + display: inline-block; + width: 40px; + height: 20px; +} + +.switch input { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +.handle { + position: absolute; + cursor: pointer; + top: 0; + left: 0; + right: 0; + bottom: 0; + border: 2px solid gray; + border-radius: 10px; + transition: .4s; + box-sizing: border-box; +} + +.handle:before { + position: absolute; + content: ""; + height: 12px; + width: 12px; + left: 2px; + bottom: 2px; + background: gray; + border-radius: 50%; + transition: .4s; +} + +input:checked + .handle { + border-color: #3AA662; +} + +input:checked + .handle:before { + background: #3AA662; + transform: translateX(20px); +} + +input:focus + .handle { + box-shadow: 0 0 3px #2196F3; +} diff --git a/projects/js-packages/social-logos/build/react/example.jsx b/projects/js-packages/social-logos/build/react/example.jsx new file mode 100644 index 0000000000000..815faf04873da --- /dev/null +++ b/projects/js-packages/social-logos/build/react/example.jsx @@ -0,0 +1,74 @@ +import React, { useState } from 'react'; +import SocialLogo from './social-logo'; +import { SocialLogoData } from './social-logo-data'; +import './example.css'; + +/** + * An example React component that displays all the social logos. + * + * @returns {React.Component} The `SocialLogosExample` component. + */ +function SocialLogosExample() { + const [ useSmallIcons, setUseSmallIcons ] = useState( false ); + const [ showIconNames, setShowIconNames ] = useState( true ); + + const iconSize = useSmallIcons ? 24 : 48; + + const handleClick = name => { + const code = ``; + window.prompt( 'Copy component code:', code ); + }; + + const handleSmallIconsToggle = e => { + setUseSmallIcons( e.target.checked ); + }; + + const handleIconNamesToggle = e => { + setShowIconNames( e.target.checked ); + }; + + const allSocialLogos = SocialLogoData.map( logo => { + return ( +
+ + { showIconNames &&

{ logo.name }

} +
+ ); + } ); + + return ( +
+

Social Logos

+ +
+
+

Small icons

+ +
+
+

Icon names

+ +
+
+ +
{ allSocialLogos }
+ +

+ GitHub +

+
+ ); +} + +export default SocialLogosExample; diff --git a/projects/js-packages/social-logos/build/react/index.jsx b/projects/js-packages/social-logos/build/react/index.jsx new file mode 100644 index 0000000000000..e985e5c4a725f --- /dev/null +++ b/projects/js-packages/social-logos/build/react/index.jsx @@ -0,0 +1,5 @@ +/** + * Export components. + */ +export { default } from './social-logo'; +export { SocialLogoData } from './social-logo-data'; diff --git a/projects/js-packages/social-logos/build/react/social-logo-data.jsx b/projects/js-packages/social-logos/build/react/social-logo-data.jsx new file mode 100644 index 0000000000000..81549bc561f82 --- /dev/null +++ b/projects/js-packages/social-logos/build/react/social-logo-data.jsx @@ -0,0 +1,583 @@ +/** This is a generated file. Do not edit. */ +export const SocialLogoData = [ + { + name: 'amazon', + svg: ( + + + + + + ), + }, + { + name: 'behance', + svg: ( + + + + + + ), + }, + { + name: 'blogger-alt', + svg: ( + + + + + + ), + }, + { + name: 'blogger', + svg: ( + + + + + + ), + }, + { + name: 'bluesky', + svg: ( + + + + + + ), + }, + { + name: 'codepen', + svg: ( + + + + + + ), + }, + { + name: 'dribbble', + svg: ( + + + + + + ), + }, + { + name: 'dropbox', + svg: ( + + + + + + ), + }, + { + name: 'eventbrite', + svg: ( + + + + + + ), + }, + { + name: 'facebook', + svg: ( + + + + + + ), + }, + { + name: 'fediverse', + svg: ( + + + + + + + ), + }, + { + name: 'feed', + svg: ( + + + + + + ), + }, + { + name: 'flickr', + svg: ( + + + + + + ), + }, + { + name: 'foursquare', + svg: ( + + + + + + ), + }, + { + name: 'ghost', + svg: ( + + + + + + ), + }, + { + name: 'github', + svg: ( + + + + + + ), + }, + { + name: 'google-alt', + svg: ( + + + + + + ), + }, + { + name: 'google-plus-alt', + svg: ( + + + + + + ), + }, + { + name: 'google-plus', + svg: ( + + + + + + ), + }, + { + name: 'google', + svg: ( + + + + + + ), + }, + { + name: 'instagram', + svg: ( + + + + + + ), + }, + { + name: 'link', + svg: ( + + + + + + ), + }, + { + name: 'linkedin', + svg: ( + + + + + + ), + }, + { + name: 'mail', + svg: ( + + + + + + ), + }, + { + name: 'mastodon', + svg: ( + + + + + + ), + }, + { + name: 'medium-alt', + svg: ( + + + + + + ), + }, + { + name: 'medium', + svg: ( + + + + + + ), + }, + { + name: 'nextdoor', + svg: ( + + + + + + ), + }, + { + name: 'patreon', + svg: ( + + + + + + ), + }, + { + name: 'pinterest-alt', + svg: ( + + + + + + ), + }, + { + name: 'pinterest', + svg: ( + + + + + + ), + }, + { + name: 'pocket', + svg: ( + + + + + + ), + }, + { + name: 'polldaddy', + svg: ( + + + + + + ), + }, + { + name: 'print', + svg: ( + + + + + + ), + }, + { + name: 'reddit', + svg: ( + + + + + + ), + }, + { + name: 'share', + svg: ( + + + + + + ), + }, + { + name: 'skype', + svg: ( + + + + + + ), + }, + { + name: 'sms', + svg: ( + + + + + + ), + }, + { + name: 'spotify', + svg: ( + + + + + + ), + }, + { + name: 'squarespace', + svg: ( + + + + + + ), + }, + { + name: 'stumbleupon', + svg: ( + + + + + + ), + }, + { + name: 'telegram', + svg: ( + + + + + + ), + }, + { + name: 'threads', + svg: ( + + + + + + ), + }, + { + name: 'tiktok-alt', + svg: ( + + + + + + ), + }, + { + name: 'tiktok', + svg: ( + + + + + + ), + }, + { + name: 'tumblr-alt', + svg: ( + + + + + + ), + }, + { + name: 'tumblr', + svg: ( + + + + + + ), + }, + { + name: 'twitch', + svg: ( + + + + + + ), + }, + { + name: 'twitter-alt', + svg: ( + + + + + + ), + }, + { + name: 'twitter', + svg: ( + + + + + + ), + }, + { + name: 'vimeo', + svg: ( + + + + + + ), + }, + { + name: 'whatsapp', + svg: ( + + + + + + ), + }, + { + name: 'woocommerce', + svg: ( + + + + + + ), + }, + { + name: 'wordpress', + svg: ( + + + + + + ), + }, + { + name: 'x', + svg: ( + + + + + + ), + }, + { + name: 'xanga', + svg: ( + + + + + + ), + }, + { + name: 'youtube', + svg: ( + + + + + + ), + }, +]; diff --git a/projects/js-packages/social-logos/build/react/social-logo.jsx b/projects/js-packages/social-logos/build/react/social-logo.jsx new file mode 100644 index 0000000000000..37f2ad5af4d75 --- /dev/null +++ b/projects/js-packages/social-logos/build/react/social-logo.jsx @@ -0,0 +1,39 @@ +import PropTypes from 'prop-types'; +import React, { PureComponent } from 'react'; +import { SocialLogoData } from './social-logo-data'; + +export default class SocialLogo extends PureComponent { + static defaultProps = { + size: 24, + }; + + static propTypes = { + icon: PropTypes.string.isRequired, + size: PropTypes.number, + onClick: PropTypes.func, + className: PropTypes.string, + }; + + render() { + const { size, onClick, icon, className, ...otherProps } = this.props; + + const iconClass = [ 'social-logo', 'social-logo-' + icon, className ] + .filter( Boolean ) + .join( ' ' ); + + const logoData = SocialLogoData.find( logo => logo.name === icon ); + + if ( ! logoData ) { + return ; + } + + const svg = React.cloneElement( logoData.svg, { + className: iconClass, + height: size, + width: size, + onClick: onClick, + ...otherProps, + } ); + return svg; + } +}