Merge pull request #20 from Bunlong/v0.6.0

Workplace Share Button and Icon

Author: Bunlong

README.md

@@ -24,6 +24,7 @@ Social media share buttons for your next React apps.
   * Linkedin
   * VKShare
   * Livejournal
+  * Workplace
 
 ## 🔧 Install
 
@@ -252,6 +253,22 @@ import {
 </LivejournalShareButton>
 ```
 
+### 🎀 Workplace
+
+```js
+import {
+  WorkplaceShareButton,
+  WorkplaceIcon,
+} from 'next-share'
+
+<WorkplaceShareButton
+  url={'https://github.com/next-share'}
+  quote={'Next Share'}
+>
+  <WorkplaceIcon size={32} round />
+</WorkplaceShareButton>
+```
+
 ## 📚 Icons Documentation
 
 ### 📖 Icons Props
@@ -1033,6 +1050,60 @@ import {
   </tr>
 </table>
 
+### 📖 LivejournalShareButton Props
+
+<table>
+  <tr>
+    <th>Props</th>
+    <th>Type</th>
+    <th>Default</th>
+    <th>Description</th>
+    <th>Required</th>
+  </tr>
+  <tr>
+    <td>children</td>
+    <td>React node</td>
+    <td></td>
+    <td>React component, HTML element or string.</td>
+    <td>✅</td>
+  </tr>
+  <tr>
+    <td>url</td>
+    <td>string</td>
+    <td></td>
+    <td>The URL of the shared page.</td>
+    <td>✅</td>
+  </tr>
+  <tr>
+    <td>quote</td>
+    <td>string</td>
+    <td></td>
+    <td>A quote to be shared along with the link.</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td>hashtag</td>
+    <td>string</td>
+    <td></td>
+    <td> A hashtag specified by the developer to be added to the shared content. People will still have the opportunity to remove this hashtag in the dialog. The hashtag should include the hash symbol.</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td>windowWidth</td>
+    <td>number</td>
+    <td>550</td>
+    <td>Opened window width.</td>
+    <td>❌</td>
+  </tr>
+  <tr>
+    <td>windowHeight</td>
+    <td>number</td>
+    <td>400</td>
+    <td>Opened window height.</td>
+    <td>❌</td>
+  </tr>
+</table>
+
 ## 💖 Wrap Up
 
 If you think any of the `next-share` can be improved, please do open a PR with any updates and submit any issues. Also, I will continue to improve this, so you might want to watch/star this repository to revisit.

examples/javascript/src/App.js

@@ -28,6 +28,8 @@ import {
   MailruIcon,
   LivejournalShareButton,
   LivejournalIcon,
+  WorkplaceShareButton,
+  WorkplaceIcon
 } from 'next-share'
 
 function App() {
@@ -153,6 +155,12 @@ function App() {
           <LivejournalIcon size={32} round />
         </div>
       </LivejournalShareButton>
+      <WorkplaceShareButton
+        url={'https://github.com/next-share'}
+        quote={'Next Share'}
+      >
+        <WorkplaceIcon size={32} round />
+      </WorkplaceShareButton>
     </div>
   )
 };

src/components/buttons/WorkplaceShareButton.ts

@@ -0,0 +1,34 @@
+import transformObjectToParams from '../../utils';
+import createShareButton from '../../hocs/createShareButton';
+
+function workplaceLink(
+  url: string,
+  { quote, hashtag }: { quote?: string; hashtag?: string },
+) {
+  return (
+    'https://work.facebook.com/sharer.php' +
+    transformObjectToParams({
+      u: url,
+      quote,
+      hashtag,
+    })
+  );
+}
+
+const WorkplaceShareButton = createShareButton<{
+  quote?: string;
+  hashtag?: string;
+}>(
+  'workplace',
+  workplaceLink,
+  (props) => ({
+    quote: props.quote,
+    hashtag: props.hashtag,
+  }),
+  {
+    windowWidth: 550,
+    windowHeight: 400,
+  },
+);
+
+export default WorkplaceShareButton;

src/icons/WorkplaceIcon.ts

@@ -0,0 +1,10 @@
+import createIcon from '../hocs/createIcon';
+
+const WorkplaceIcon = createIcon({
+  color: '#3b3d4a',
+  name: 'workplace',
+  path:
+    'M34.019,10.292c0.21,0.017,0.423,0.034,0.636,0.049 c3.657,0.262,6.976,1.464,9.929,3.635c3.331,2.448,5.635,5.65,6.914,9.584c0.699,2.152,0.983,4.365,0.885,6.623 c-0.136,3.171-1.008,6.13-2.619,8.867c-0.442,0.75-0.908,1.492-1.495,2.141c-0.588,0.651-1.29,1.141-2.146,1.383 c-1.496,0.426-3.247-0.283-3.961-1.642c-0.26-0.494-0.442-1.028-0.654-1.548c-1.156-2.838-2.311-5.679-3.465-8.519 c-0.017-0.042-0.037-0.082-0.065-0.145c-0.101,0.245-0.192,0.472-0.284,0.698c-1.237,3.051-2.475,6.103-3.711,9.155 c-0.466,1.153-1.351,1.815-2.538,2.045c-1.391,0.267-2.577-0.154-3.496-1.247c-0.174-0.209-0.31-0.464-0.415-0.717 c-2.128-5.22-4.248-10.442-6.37-15.665c-0.012-0.029-0.021-0.059-0.036-0.104c0.054-0.003,0.103-0.006,0.15-0.006 c1.498-0.001,2.997,0,4.495-0.004c0.12-0.001,0.176,0.03,0.222,0.146c1.557,3.846,3.117,7.691,4.679,11.536 c0.018,0.046,0.039,0.091,0.067,0.159c0.273-0.673,0.536-1.32,0.797-1.968c1.064-2.627,2.137-5.25,3.19-7.883 c0.482-1.208,1.376-1.917,2.621-2.135c1.454-0.255,2.644,0.257,3.522,1.449c0.133,0.18,0.229,0.393,0.313,0.603 c1.425,3.495,2.848,6.991,4.269,10.488c0.02,0.047,0.04,0.093,0.073,0.172c0.196-0.327,0.385-0.625,0.559-0.935 c0.783-1.397,1.323-2.886,1.614-4.461c0.242-1.312,0.304-2.634,0.187-3.962c-0.242-2.721-1.16-5.192-2.792-7.38 c-2.193-2.939-5.086-4.824-8.673-5.625c-1.553-0.346-3.124-0.405-4.705-0.257c-3.162,0.298-6.036,1.366-8.585,3.258 c-3.414,2.534-5.638,5.871-6.623,10.016c-0.417,1.76-0.546,3.547-0.384,5.348c0.417,4.601,2.359,8.444,5.804,11.517 c2.325,2.073,5.037,3.393,8.094,3.989c1.617,0.317,3.247,0.395,4.889,0.242c1-0.094,1.982-0.268,2.952-0.529 c0.04-0.01,0.081-0.018,0.128-0.028c0,1.526,0,3.047,0,4.586c-0.402,0.074-0.805,0.154-1.21,0.221 c-0.861,0.14-1.728,0.231-2.601,0.258c-0.035,0.002-0.071,0.013-0.108,0.021c-0.493,0-0.983,0-1.476,0 c-0.049-0.007-0.1-0.018-0.149-0.022c-0.315-0.019-0.629-0.033-0.945-0.058c-1.362-0.105-2.702-0.346-4.017-0.716 c-3.254-0.914-6.145-2.495-8.66-4.752c-2.195-1.971-3.926-4.29-5.176-6.963c-1.152-2.466-1.822-5.057-1.993-7.774 c-0.014-0.226-0.033-0.451-0.05-0.676c0-0.502,0-1.003,0-1.504c0.008-0.049,0.02-0.099,0.022-0.148 c0.036-1.025,0.152-2.043,0.338-3.052c0.481-2.616,1.409-5.066,2.8-7.331c2.226-3.625,5.25-6.386,9.074-8.254 c2.536-1.24,5.217-1.947,8.037-2.126c0.23-0.015,0.461-0.034,0.691-0.051C33.052,10.292,33.535,10.292,34.019,10.292z',
+});
+
+export default WorkplaceIcon;

src/next-share.ts

@@ -13,6 +13,7 @@ export { default as LinkedinIcon } from './icons/LinkedinIcon';
 export { default as VKIcon } from './icons/VKIcon';
 export { default as MailruIcon } from './icons/MailruIcon';
 export { default as LivejournalIcon } from './icons/LivejournalIcon';
+export { default as WorkplaceIcon } from './icons/WorkplaceIcon';
 
 // Buttons
 export { default as FacebookShareButton } from './components/buttons/FacebookShareButton';
@@ -29,3 +30,4 @@ export { default as LinkedinShareButton } from './components/buttons/LinkedinSha
 export { default as VKShareButton } from './components/buttons/VKShareButton';
 export { default as MailruShareButton } from './components/buttons/MailruShareButton';
 export { default as LivejournalShareButton } from './components/buttons/LivejournalShareButton';
+export { default as WorkplaceShareButton } from './components/buttons/WorkplaceShareButton';