Showing preview only (1,511K chars total). Download the full file or copy to clipboard to get everything.
Repository: SaraVieira/react-social-sharing
Branch: master
Commit: 3cd8ea11823c
Files: 91
Total size: 1.4 MB
Directory structure:
gitextract_5n3bp_xz/
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── License.md
├── README.md
├── __tests__/
│ ├── __snapshots__/
│ │ ├── facebook.js.snap
│ │ ├── google.js.snap
│ │ ├── hacker.js.snap
│ │ ├── linkedin.js.snap
│ │ ├── mail.js.snap
│ │ ├── pinterest.js.snap
│ │ ├── reddit.js.snap
│ │ ├── telegram.js.snap
│ │ ├── tumblr.js.snap
│ │ ├── twitter.js.snap
│ │ ├── vk.js.snap
│ │ ├── whatsapp.js.snap
│ │ └── xing.js.snap
│ ├── facebook.js
│ ├── google.js
│ ├── hacker.js
│ ├── linkedin.js
│ ├── mail.js
│ ├── pinterest.js
│ ├── reddit.js
│ ├── telegram.js
│ ├── tumblr.js
│ ├── twitter.js
│ ├── vk.js
│ ├── whatsapp.js
│ └── xing.js
├── docs/
│ ├── facebook.md
│ ├── google.md
│ ├── hacker.md
│ ├── index.html
│ ├── index.js
│ ├── linkedin.md
│ ├── mail.md
│ ├── main.css
│ ├── pinterest.md
│ ├── reddit.md
│ ├── telegram.md
│ ├── tumblr.md
│ ├── twitter.md
│ ├── vk.md
│ ├── whatsapp.md
│ ├── x.md
│ └── xing.md
├── lib/
│ └── jestsetup.js
├── package.json
└── src/
├── buttons/
│ ├── facebook.js
│ ├── factory.js
│ ├── google.js
│ ├── hacker.js
│ ├── linkedin.js
│ ├── mail.js
│ ├── pinterest.js
│ ├── reddit.js
│ ├── telegram.js
│ ├── tumblr.js
│ ├── twitter.js
│ ├── vk.js
│ ├── whatsapp.js
│ ├── wrapper.js
│ ├── x.js
│ └── xing.js
├── common.js
├── consts.js
├── index.js
└── svg/
├── X.js
├── facebook.js
├── google.js
├── hacker.js
├── linkedin.js
├── mail.js
├── pinterest.js
├── reddit.js
├── telegram.js
├── tumblr.js
├── twitter.js
├── vk.js
├── whatsapp.js
└── xing.js
================================================
FILE CONTENTS
================================================
================================================
FILE: .babelrc
================================================
{
"presets": [
"env",
"react"
],
"plugins": [
"syntax-dynamic-import",
[
"transform-object-rest-spread",
"transform-react-remove-prop-types",
{
"mode": "wrap"
}
]
]
}
================================================
FILE: .editorconfig
================================================
# EditorConfig helps developers define and maintain consistent
# coding styles between different editors and IDEs
# editorconfig.org
root = true
[*]
# Change these settings to your own preference
indent_style = space
indent_size = 2
# We recommend you to keep these unchanged
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
[*.md]
trim_trailing_whitespace = false
================================================
FILE: .eslintrc.js
================================================
module.exports = {
extends: 'plugin:prettier/recommended',
parser: 'babel-eslint',
env: {
browser: true,
jasmine: true,
node: true
},
plugins: ['react', 'jsx-a11y'],
rules: {
'comma-dangle': ['error', 'never'],
'global-require': 0,
'prefer-arrow-callback': 0,
'func-names': 0,
'import/no-extraneous-dependencies': 0,
'no-underscore-dangle': 0,
'no-unused-expressions': 0,
'no-use-before-define': 0,
'react/jsx-filename-extension': 0,
'react/sort-comp': 0,
'react/no-multi-comp': 0,
'react/require-extension': 0
}
}
================================================
FILE: .gitattributes
================================================
* text=auto
bin/* eol=lf
================================================
FILE: .gitignore
================================================
docs/build/
dist-es6/
dist-modules/
node_modules/
coverage/
npm-debug.log
.eslintcache
# Logs
*.log
================================================
FILE: .npmignore
================================================
demo/
dist/
tests/
src/
docs/
coverage/
__tests__/
.*
================================================
FILE: .prettierignore
================================================
docs
coverage
dist-es6
dist-modules
================================================
FILE: .prettierrc
================================================
{
"semi": false,
"singleQuote": true,
"overrides": [
{
"files": "*.md",
"options": {
"printWidth": 70,
"useTabs": false,
"trailingComma": "none",
"proseWrap": "never"
}
}
]
}
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- "8"
- "10"
before_install:
- curl -o- -L https://yarnpkg.com/install.sh | bash -s
- export PATH="$HOME/.yarn/bin:$PATH"
before_script:
- npm run dist
script:
- npm run test:lint
- npm run test:coverage
after_success:
- bash <(curl -s https://codecov.io/bash)
================================================
FILE: CONTRIBUTING.md
================================================
# Contributing
## Set up instructions
First of all, this is a JavaScript project that's distributed on [npmjs.org](https://npmjs.org) and therefore uses JavaScript tooling based on [Node.js](https://nodejs.org/) with dependencies from npm. You're going to need to have those things installed to contribute to this project.
1. Fork the repo
2. Clone your fork
3. Create a branch
4. Run `npm install`
5. Run `npm start`. If everything works, then you're ready to make changes.
6. Make your changes and try to make the tests pass. If you can't or need help then commit what you have with `--no-verify` and make a PR
7. If you get things working, add your changed files with `git add` and run `npm run commit` to get an interactive prompt for creating a commit message that follows [our standards](https://github.com/stevemao/conventional-changelog-angular/blob/master/convention.md). You'll notice that there are git hooks in place which will run testing, linting, etc. (unless you commit with `--no-verify`).
8. Push your changes to your fork with `git push`
9. Create a pull request.
10. Iterate on the solution.
11. Get merged! 🎉 🎊
================================================
FILE: LICENSE
================================================
Copyright (c) 2016 Juho Vepsalainen
Permission is hereby granted, free of charge, to any person obtaining
a copy of this software and associated documentation files (the
"Software"), to deal in the Software without restriction, including
without limitation the rights to use, copy, modify, merge, publish,
distribute, sublicense, and/or sell copies of the Software, and to
permit persons to whom the Software is furnished to do so, subject to
the following conditions:
The above copyright notice and this permission notice shall be
included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: License.md
================================================
# The MIT License
Copyright 2018 Sara Vieira, contributors
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the 'Software'), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED 'AS IS', WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
================================================
FILE: README.md
================================================
[](https://www.npmjs.com/package/react-social-sharing)
# React Sharing Buttons
React Implementation of @mxstbr [sharingbuttons.io](http://sharingbuttons.io/) No Extra Javascript Imports. No Tracking. Just Links, SVG and CSS
## Basic Usage
```
yarn add react-social-sharing
```
```js
import React from 'react'
import { Twitter } from 'react-social-sharing'
export default () => <Twitter link="https://github.com" />
```
## Localization
To any button for localization of the `aria-label` you can pass a function like so:
```js
<Twitter
link="https://github.com"
label={serviceName => localise('share_label', { serviceName })}
/>
```
This function receives the name of the service and the return value is the `aria-label` and `title` used in the anchor.
This name is automatically filled by the package but you can override this with the name prop.
## License
react-social-sharing is available under MIT. See LICENSE for more details.
## Acknowledgements
- Thank you to [bebraw](https://github.com/bebraw) for creating [react-component-boilerplate](https://github.com/survivejs/react-component-boilerplate)
- Thank you to [mxstbr](https://github.com/mxstbr) for creating [sharingbuttons.io](https://github.com/mxstbr/sharingbuttons.io)
- Icons by [Streamline](http://streamlineicons.com/).
================================================
FILE: __tests__/__snapshots__/facebook.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Facebook 1 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1 svg path {
fill: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
big={true}
link="http://sharingbuttons.io"
message="I am so cool"
solidcircle={true}
>
<ButtonFactory
big={true}
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
message="I am so cool"
name="Facebook"
solidcircle={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
message="I am so cool"
solidcircle={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
message="I am so cool"
solidcircle={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solidcircle={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="11.5"
/>
<path
d="M15.84 9.5H13.5V8.48c0-.53.35-.65.6-.65h1.4v-2.3h-2.35c-2.3 0-2.65 1.7-2.65 2.8V9.5h-2v2h2v7h3v-7h2.1l.24-2z"
/>
</svg>
<span>
Share on Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 2 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1 svg path {
fill: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
link="http://sharingbuttons.io"
medium={true}
message="I am so cool"
solidcircle={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
medium={true}
message="I am so cool"
name="Facebook"
solidcircle={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
message="I am so cool"
solidcircle={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
message="I am so cool"
solidcircle={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solidcircle={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="11.5"
/>
<path
d="M15.84 9.5H13.5V8.48c0-.53.35-.65.6-.65h1.4v-2.3h-2.35c-2.3 0-2.65 1.7-2.65 2.8V9.5h-2v2h2v7h3v-7h2.1l.24-2z"
/>
</svg>
<span>
Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 3 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1 svg path {
fill: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
link="http://sharingbuttons.io"
message="I am so cool"
small={true}
solidcircle={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
message="I am so cool"
name="Facebook"
small={true}
solidcircle={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
message="I am so cool"
small={true}
solidcircle={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
message="I am so cool"
small={true}
solidcircle={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solidcircle={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="11.5"
/>
<path
d="M15.84 9.5H13.5V8.48c0-.53.35-.65.6-.65h1.4v-2.3h-2.35c-2.3 0-2.65 1.7-2.65 2.8V9.5h-2v2h2v7h3v-7h2.1l.24-2z"
/>
</svg>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 4 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
big={true}
circle={true}
link="http://sharingbuttons.io"
message="I am so cool"
>
<ButtonFactory
big={true}
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
circle={true}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
message="I am so cool"
name="Facebook"
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
message="I am so cool"
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
message="I am so cool"
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="11.5"
/>
<path
d="M15.84 9.5H13.5V8.48c0-.53.35-.65.6-.65h1.4v-2.3h-2.35c-2.3 0-2.65 1.7-2.65 2.8V9.5h-2v2h2v7h3v-7h2.1l.24-2z"
/>
</svg>
<span>
Share on Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 5 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
circle={true}
link="http://sharingbuttons.io"
medium={true}
message="I am so cool"
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
circle={true}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
medium={true}
message="I am so cool"
name="Facebook"
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
message="I am so cool"
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
message="I am so cool"
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="11.5"
/>
<path
d="M15.84 9.5H13.5V8.48c0-.53.35-.65.6-.65h1.4v-2.3h-2.35c-2.3 0-2.65 1.7-2.65 2.8V9.5h-2v2h2v7h3v-7h2.1l.24-2z"
/>
</svg>
<span>
Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 6 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
circle={true}
link="http://sharingbuttons.io"
message="I am so cool"
small={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
circle={true}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
message="I am so cool"
name="Facebook"
small={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
message="I am so cool"
small={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
message="I am so cool"
small={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="11.5"
/>
<path
d="M15.84 9.5H13.5V8.48c0-.53.35-.65.6-.65h1.4v-2.3h-2.35c-2.3 0-2.65 1.7-2.65 2.8V9.5h-2v2h2v7h3v-7h2.1l.24-2z"
/>
</svg>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 7 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
big={true}
link="http://sharingbuttons.io"
message="I am so cool"
solid={true}
>
<ButtonFactory
big={true}
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
message="I am so cool"
name="Facebook"
solid={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
message="I am so cool"
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
message="I am so cool"
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solid={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solid={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
/>
</svg>
<span>
Share on Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 8 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
link="http://sharingbuttons.io"
medium={true}
message="I am so cool"
solid={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
medium={true}
message="I am so cool"
name="Facebook"
solid={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
message="I am so cool"
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
message="I am so cool"
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solid={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solid={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
/>
</svg>
<span>
Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 9 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
link="http://sharingbuttons.io"
message="I am so cool"
small={true}
solid={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
message="I am so cool"
name="Facebook"
small={true}
solid={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
message="I am so cool"
small={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
message="I am so cool"
small={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solid={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solid={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
/>
</svg>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 10 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
solid={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=undefined"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Facebook"
solid={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solid={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solid={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
/>
</svg>
<span>
Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 11 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
circle={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
circle={true}
href="https://facebook.com/sharer/sharer.php?u=undefined"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Facebook"
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="11.5"
/>
<path
d="M15.84 9.5H13.5V8.48c0-.53.35-.65.6-.65h1.4v-2.3h-2.35c-2.3 0-2.65 1.7-2.65 2.8V9.5h-2v2h2v7h3v-7h2.1l.24-2z"
/>
</svg>
<span>
Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 11 2`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1 svg path {
fill: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component
solidcircle={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=undefined"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Facebook"
solidcircle={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)
solidcircle={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solidcircle={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<circle
cx="12"
cy="12"
r="11.5"
/>
<path
d="M15.84 9.5H13.5V8.48c0-.53.35-.65.6-.65h1.4v-2.3h-2.35c-2.3 0-2.65 1.7-2.65 2.8V9.5h-2v2h2v7h3v-7h2.1l.24-2z"
/>
</svg>
<span>
Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 12 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #3b5998;
border-color: #3b5998;
}
.c1:hover,
.c1:active {
background-color: #2d4373;
border-color: #2d4373;
}
<Component>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=undefined"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Facebook"
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<Styled(styled.div)>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solid={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solid={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
/>
</svg>
<span>
Facebook
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 13 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c0 svg {
stroke: #232323;
fill: none;
}
<Component
simple={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "ksIwnZ",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=undefined"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Facebook"
simple={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
simple={true}
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
simple={true}
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<FacebookIconFill>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
/>
</svg>
</FacebookIconFill>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 14 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c0 svg {
stroke: #fff;
fill: none;
}
<Component
simpleReverse={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "ksIwnZ",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=undefined"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Facebook"
simpleReverse={true}
>
<styled.a
aria-label="Share on Facebook"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
simpleReverse={true}
target="_blank"
title="Share on Facebook"
>
<StyledComponent
aria-label="Share on Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
simpleReverse={true}
target="_blank"
title="Share on Facebook"
>
<a
aria-label="Share on Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Facebook"
>
<FacebookIconFill>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
/>
</svg>
</FacebookIconFill>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Facebook 15 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c0 svg {
stroke: #fff;
fill: none;
}
<Component
label={[Function]}
simpleReverse={true}
>
<ButtonFactory
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-ifAKCX",
"isStatic": false,
"lastClassName": "ksIwnZ",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #3b5998;
border-color: #3b5998;
",
[Function],
";
&:hover,
&:active {
background-color: #2d4373;
border-color: #2d4373;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-ifAKCX",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://facebook.com/sharer/sharer.php?u=undefined"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
label={[Function]}
name="Facebook"
simpleReverse={true}
>
<styled.a
aria-label="Dope ass Facebook"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
simpleReverse={true}
target="_blank"
title="Dope ass Facebook"
>
<StyledComponent
aria-label="Dope ass Facebook"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
simpleReverse={true}
target="_blank"
title="Dope ass Facebook"
>
<a
aria-label="Dope ass Facebook"
className="c0"
href="https://facebook.com/sharer/sharer.php?u=undefined"
rel="noreferrer noopener"
target="_blank"
title="Dope ass Facebook"
>
<FacebookIconFill>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M18.77 7.46H14.5v-1.9c0-.9.6-1.1 1-1.1h3V.5h-4.33C10.24.5 9.5 3.44 9.5 5.32v2.15h-3v4h3v12h5v-12h3.85l.42-4z"
/>
</svg>
</FacebookIconFill>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
================================================
FILE: __tests__/__snapshots__/google.js.snap
================================================
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Google 1 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
big={true}
link="http://sharingbuttons.io"
message="I am so cool"
solidcircle={true}
>
<ButtonFactory
ariaName="Google Plus"
big={true}
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Google +"
solidcircle={true}
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)
solidcircle={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solidcircle={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.65 8.6c-.02-.66-.3-1.3-.8-1.8S10.67 6 9.98 6c-.63 0-1.2.25-1.64.68-.45.44-.68 1.05-.66 1.7.02.68.3 1.32.8 1.8.96.97 2.6 1.04 3.5.14.45-.45.7-1.05.67-1.7zm-2.5 5.63c-2.14 0-3.96.95-3.96 2.1 0 1.12 1.8 2.08 3.94 2.08s3.98-.93 3.98-2.06c0-1.14-1.82-2.1-3.98-2.1z"
/>
<path
d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm-1.84 19.4c-2.8 0-4.97-1.35-4.97-3.08s2.15-3.1 4.94-3.1c.84 0 1.6.14 2.28.36-.57-.4-1.25-.86-1.3-1.7-.26.06-.52.1-.8.1-.95 0-1.87-.38-2.57-1.08-.67-.68-1.06-1.55-1.1-2.48-.02-.94.32-1.8.96-2.45.65-.63 1.5-.93 2.4-.92V5h3.95v1h-1.53l.12.1c.67.67 1.06 1.55 1.1 2.48.02.93-.32 1.8-.97 2.45-.16.15-.33.3-.5.4-.2.6.05.8.83 1.33.9.6 2.1 1.42 2.1 3.56 0 1.73-2.17 3.1-4.96 3.1zM20 10h-2v2h-1v-2h-2V9h2V7h1v2h2v1z"
/>
</svg>
<span>
Share on Google +
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Google 2 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
link="http://sharingbuttons.io"
medium={true}
message="I am so cool"
solidcircle={true}
>
<ButtonFactory
ariaName="Google Plus"
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
medium={true}
name="Google +"
solidcircle={true}
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)
solidcircle={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solidcircle={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.65 8.6c-.02-.66-.3-1.3-.8-1.8S10.67 6 9.98 6c-.63 0-1.2.25-1.64.68-.45.44-.68 1.05-.66 1.7.02.68.3 1.32.8 1.8.96.97 2.6 1.04 3.5.14.45-.45.7-1.05.67-1.7zm-2.5 5.63c-2.14 0-3.96.95-3.96 2.1 0 1.12 1.8 2.08 3.94 2.08s3.98-.93 3.98-2.06c0-1.14-1.82-2.1-3.98-2.1z"
/>
<path
d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm-1.84 19.4c-2.8 0-4.97-1.35-4.97-3.08s2.15-3.1 4.94-3.1c.84 0 1.6.14 2.28.36-.57-.4-1.25-.86-1.3-1.7-.26.06-.52.1-.8.1-.95 0-1.87-.38-2.57-1.08-.67-.68-1.06-1.55-1.1-2.48-.02-.94.32-1.8.96-2.45.65-.63 1.5-.93 2.4-.92V5h3.95v1h-1.53l.12.1c.67.67 1.06 1.55 1.1 2.48.02.93-.32 1.8-.97 2.45-.16.15-.33.3-.5.4-.2.6.05.8.83 1.33.9.6 2.1 1.42 2.1 3.56 0 1.73-2.17 3.1-4.96 3.1zM20 10h-2v2h-1v-2h-2V9h2V7h1v2h2v1z"
/>
</svg>
<span>
Google +
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Google 3 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
link="http://sharingbuttons.io"
message="I am so cool"
small={true}
solidcircle={true}
>
<ButtonFactory
ariaName="Google Plus"
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Google +"
small={true}
solidcircle={true}
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)
small={true}
solidcircle={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
small={true}
solidcircle={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solidcircle={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solidcircle={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.65 8.6c-.02-.66-.3-1.3-.8-1.8S10.67 6 9.98 6c-.63 0-1.2.25-1.64.68-.45.44-.68 1.05-.66 1.7.02.68.3 1.32.8 1.8.96.97 2.6 1.04 3.5.14.45-.45.7-1.05.67-1.7zm-2.5 5.63c-2.14 0-3.96.95-3.96 2.1 0 1.12 1.8 2.08 3.94 2.08s3.98-.93 3.98-2.06c0-1.14-1.82-2.1-3.98-2.1z"
/>
<path
d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm-1.84 19.4c-2.8 0-4.97-1.35-4.97-3.08s2.15-3.1 4.94-3.1c.84 0 1.6.14 2.28.36-.57-.4-1.25-.86-1.3-1.7-.26.06-.52.1-.8.1-.95 0-1.87-.38-2.57-1.08-.67-.68-1.06-1.55-1.1-2.48-.02-.94.32-1.8.96-2.45.65-.63 1.5-.93 2.4-.92V5h3.95v1h-1.53l.12.1c.67.67 1.06 1.55 1.1 2.48.02.93-.32 1.8-.97 2.45-.16.15-.33.3-.5.4-.2.6.05.8.83 1.33.9.6 2.1 1.42 2.1 3.56 0 1.73-2.17 3.1-4.96 3.1zM20 10h-2v2h-1v-2h-2V9h2V7h1v2h2v1z"
/>
</svg>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Google 4 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
big={true}
circle={true}
link="http://sharingbuttons.io"
message="I am so cool"
>
<ButtonFactory
ariaName="Google Plus"
big={true}
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
circle={true}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Google +"
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.65 8.6c-.02-.66-.3-1.3-.8-1.8S10.67 6 9.98 6c-.63 0-1.2.25-1.64.68-.45.44-.68 1.05-.66 1.7.02.68.3 1.32.8 1.8.96.97 2.6 1.04 3.5.14.45-.45.7-1.05.67-1.7zm-2.5 5.63c-2.14 0-3.96.95-3.96 2.1 0 1.12 1.8 2.08 3.94 2.08s3.98-.93 3.98-2.06c0-1.14-1.82-2.1-3.98-2.1z"
/>
<path
d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm-1.84 19.4c-2.8 0-4.97-1.35-4.97-3.08s2.15-3.1 4.94-3.1c.84 0 1.6.14 2.28.36-.57-.4-1.25-.86-1.3-1.7-.26.06-.52.1-.8.1-.95 0-1.87-.38-2.57-1.08-.67-.68-1.06-1.55-1.1-2.48-.02-.94.32-1.8.96-2.45.65-.63 1.5-.93 2.4-.92V5h3.95v1h-1.53l.12.1c.67.67 1.06 1.55 1.1 2.48.02.93-.32 1.8-.97 2.45-.16.15-.33.3-.5.4-.2.6.05.8.83 1.33.9.6 2.1 1.42 2.1 3.56 0 1.73-2.17 3.1-4.96 3.1zM20 10h-2v2h-1v-2h-2V9h2V7h1v2h2v1z"
/>
</svg>
<span>
Share on Google +
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Google 5 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
circle={true}
link="http://sharingbuttons.io"
medium={true}
message="I am so cool"
>
<ButtonFactory
ariaName="Google Plus"
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
circle={true}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
medium={true}
name="Google +"
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.65 8.6c-.02-.66-.3-1.3-.8-1.8S10.67 6 9.98 6c-.63 0-1.2.25-1.64.68-.45.44-.68 1.05-.66 1.7.02.68.3 1.32.8 1.8.96.97 2.6 1.04 3.5.14.45-.45.7-1.05.67-1.7zm-2.5 5.63c-2.14 0-3.96.95-3.96 2.1 0 1.12 1.8 2.08 3.94 2.08s3.98-.93 3.98-2.06c0-1.14-1.82-2.1-3.98-2.1z"
/>
<path
d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm-1.84 19.4c-2.8 0-4.97-1.35-4.97-3.08s2.15-3.1 4.94-3.1c.84 0 1.6.14 2.28.36-.57-.4-1.25-.86-1.3-1.7-.26.06-.52.1-.8.1-.95 0-1.87-.38-2.57-1.08-.67-.68-1.06-1.55-1.1-2.48-.02-.94.32-1.8.96-2.45.65-.63 1.5-.93 2.4-.92V5h3.95v1h-1.53l.12.1c.67.67 1.06 1.55 1.1 2.48.02.93-.32 1.8-.97 2.45-.16.15-.33.3-.5.4-.2.6.05.8.83 1.33.9.6 2.1 1.42 2.1 3.56 0 1.73-2.17 3.1-4.96 3.1zM20 10h-2v2h-1v-2h-2V9h2V7h1v2h2v1z"
/>
</svg>
<span>
Google +
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Google 6 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
circle={true}
link="http://sharingbuttons.io"
message="I am so cool"
small={true}
>
<ButtonFactory
ariaName="Google Plus"
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
circle={true}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Google +"
small={true}
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)
small={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
small={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.65 8.6c-.02-.66-.3-1.3-.8-1.8S10.67 6 9.98 6c-.63 0-1.2.25-1.64.68-.45.44-.68 1.05-.66 1.7.02.68.3 1.32.8 1.8.96.97 2.6 1.04 3.5.14.45-.45.7-1.05.67-1.7zm-2.5 5.63c-2.14 0-3.96.95-3.96 2.1 0 1.12 1.8 2.08 3.94 2.08s3.98-.93 3.98-2.06c0-1.14-1.82-2.1-3.98-2.1z"
/>
<path
d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm-1.84 19.4c-2.8 0-4.97-1.35-4.97-3.08s2.15-3.1 4.94-3.1c.84 0 1.6.14 2.28.36-.57-.4-1.25-.86-1.3-1.7-.26.06-.52.1-.8.1-.95 0-1.87-.38-2.57-1.08-.67-.68-1.06-1.55-1.1-2.48-.02-.94.32-1.8.96-2.45.65-.63 1.5-.93 2.4-.92V5h3.95v1h-1.53l.12.1c.67.67 1.06 1.55 1.1 2.48.02.93-.32 1.8-.97 2.45-.16.15-.33.3-.5.4-.2.6.05.8.83 1.33.9.6 2.1 1.42 2.1 3.56 0 1.73-2.17 3.1-4.96 3.1zM20 10h-2v2h-1v-2h-2V9h2V7h1v2h2v1z"
/>
</svg>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Google 7 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
big={true}
link="http://sharingbuttons.io"
message="I am so cool"
solid={true}
>
<ButtonFactory
ariaName="Google Plus"
big={true}
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Google +"
solid={true}
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solid={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solid={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.37 12.93c-.73-.52-1.4-1.27-1.4-1.5 0-.43.03-.63.98-1.37 1.23-.97 1.9-2.23 1.9-3.57 0-1.22-.36-2.3-1-3.05h.5c.1 0 .2-.04.28-.1l1.36-.98c.16-.12.23-.34.17-.54-.07-.2-.25-.33-.46-.33H7.6c-.66 0-1.34.12-2 .35-2.23.76-3.78 2.66-3.78 4.6 0 2.76 2.13 4.85 5 4.9-.07.23-.1.45-.1.66 0 .43.1.83.33 1.22h-.08c-2.72 0-5.17 1.34-6.1 3.32-.25.52-.37 1.04-.37 1.56 0 .5.13.98.38 1.44.6 1.04 1.84 1.86 3.55 2.28.87.23 1.82.34 2.8.34.88 0 1.7-.1 2.5-.34 2.4-.7 3.97-2.48 3.97-4.54 0-1.97-.63-3.15-2.33-4.35zm-7.7 4.5c0-1.42 1.8-2.68 3.9-2.68h.05c.45 0 .9.07 1.3.2l.42.28c.96.66 1.6 1.1 1.77 1.8.05.16.07.33.07.5 0 1.8-1.33 2.7-3.96 2.7-1.98 0-3.54-1.23-3.54-2.8zM5.54 3.9c.33-.38.75-.58 1.23-.58h.05c1.35.05 2.64 1.55 2.88 3.35.14 1.02-.08 1.97-.6 2.55-.32.37-.74.56-1.23.56h-.03c-1.32-.04-2.63-1.6-2.87-3.4-.13-1 .08-1.92.58-2.5zM23.5 9.5h-3v-3h-2v3h-3v2h3v3h2v-3h3"
/>
</svg>
<span>
Share on Google +
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Google 8 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
link="http://sharingbuttons.io"
medium={true}
message="I am so cool"
solid={true}
>
<ButtonFactory
ariaName="Google Plus"
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
medium={true}
name="Google +"
solid={true}
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solid={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solid={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.37 12.93c-.73-.52-1.4-1.27-1.4-1.5 0-.43.03-.63.98-1.37 1.23-.97 1.9-2.23 1.9-3.57 0-1.22-.36-2.3-1-3.05h.5c.1 0 .2-.04.28-.1l1.36-.98c.16-.12.23-.34.17-.54-.07-.2-.25-.33-.46-.33H7.6c-.66 0-1.34.12-2 .35-2.23.76-3.78 2.66-3.78 4.6 0 2.76 2.13 4.85 5 4.9-.07.23-.1.45-.1.66 0 .43.1.83.33 1.22h-.08c-2.72 0-5.17 1.34-6.1 3.32-.25.52-.37 1.04-.37 1.56 0 .5.13.98.38 1.44.6 1.04 1.84 1.86 3.55 2.28.87.23 1.82.34 2.8.34.88 0 1.7-.1 2.5-.34 2.4-.7 3.97-2.48 3.97-4.54 0-1.97-.63-3.15-2.33-4.35zm-7.7 4.5c0-1.42 1.8-2.68 3.9-2.68h.05c.45 0 .9.07 1.3.2l.42.28c.96.66 1.6 1.1 1.77 1.8.05.16.07.33.07.5 0 1.8-1.33 2.7-3.96 2.7-1.98 0-3.54-1.23-3.54-2.8zM5.54 3.9c.33-.38.75-.58 1.23-.58h.05c1.35.05 2.64 1.55 2.88 3.35.14 1.02-.08 1.97-.6 2.55-.32.37-.74.56-1.23.56h-.03c-1.32-.04-2.63-1.6-2.87-3.4-.13-1 .08-1.92.58-2.5zM23.5 9.5h-3v-3h-2v3h-3v2h3v3h2v-3h3"
/>
</svg>
<span>
Google +
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Google 9 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
link="http://sharingbuttons.io"
message="I am so cool"
small={true}
solid={true}
>
<ButtonFactory
ariaName="Google Plus"
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Google +"
small={true}
solid={true}
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=http%3A%2F%2Fsharingbuttons.io"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)
small={true}
>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
small={true}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
solid={true}
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
solid={true}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M11.37 12.93c-.73-.52-1.4-1.27-1.4-1.5 0-.43.03-.63.98-1.37 1.23-.97 1.9-2.23 1.9-3.57 0-1.22-.36-2.3-1-3.05h.5c.1 0 .2-.04.28-.1l1.36-.98c.16-.12.23-.34.17-.54-.07-.2-.25-.33-.46-.33H7.6c-.66 0-1.34.12-2 .35-2.23.76-3.78 2.66-3.78 4.6 0 2.76 2.13 4.85 5 4.9-.07.23-.1.45-.1.66 0 .43.1.83.33 1.22h-.08c-2.72 0-5.17 1.34-6.1 3.32-.25.52-.37 1.04-.37 1.56 0 .5.13.98.38 1.44.6 1.04 1.84 1.86 3.55 2.28.87.23 1.82.34 2.8.34.88 0 1.7-.1 2.5-.34 2.4-.7 3.97-2.48 3.97-4.54 0-1.97-.63-3.15-2.33-4.35zm-7.7 4.5c0-1.42 1.8-2.68 3.9-2.68h.05c.45 0 .9.07 1.3.2l.42.28c.96.66 1.6 1.1 1.77 1.8.05.16.07.33.07.5 0 1.8-1.33 2.7-3.96 2.7-1.98 0-3.54-1.23-3.54-2.8zM5.54 3.9c.33-.38.75-.58 1.23-.58h.05c1.35.05 2.64 1.55 2.88 3.35.14 1.02-.08 1.97-.6 2.55-.32.37-.74.56-1.23.56h-.03c-1.32-.04-2.63-1.6-2.87-3.4-.13-1 .08-1.92.58-2.5zM23.5 9.5h-3v-3h-2v3h-3v2h3v3h2v-3h3"
/>
</svg>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
</Styled(styled.div)>
</a>
</StyledComponent>
</styled.a>
</ButtonFactory>
</Component>
`;
exports[`Google 11 1`] = `
.c0 {
-webkit-text-decoration: none;
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
}
.c0 svg {
width: 1em;
height: 1em;
vertical-align: top;
}
.c0 svg:not(:only-child) {
margin-right: 0.4em;
}
.c2 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
fill: #fff;
stroke: none;
}
.c1 {
border-radius: 5px;
-webkit-transition: 25ms ease-out;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
background-color: #dd4b39;
border-color: #dd4b39;
}
.c1:hover,
.c1:active {
background-color: #c23321;
border-color: #c23321;
}
<Component
circle={true}
>
<ButtonFactory
ariaName="Google Plus"
buttonComponent={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
circle={true}
href="https://plus.google.com/share?url=undefined"
iconCircle={[Function]}
iconCircleSolid={[Function]}
iconFill={[Function]}
name="Google +"
>
<styled.a
aria-label="Share on Google Plus"
href="https://plus.google.com/share?url=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<StyledComponent
aria-label="Share on Google Plus"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-bwzfXH",
"isStatic": false,
"lastClassName": "c0",
"rules": Array [
"
text-decoration: none;
color: #fff;
margin: 0.5em;
display: inline-block;
svg {
width: 1em;
height: 1em;
vertical-align: top;
&:not(:only-child) {
margin-right: 0.4em;
}
}
",
[Function],
";
",
[Function],
";
",
[Function],
";
",
],
},
"displayName": "styled.a",
"render": [Function],
"styledComponentId": "sc-bwzfXH",
"target": "a",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
href="https://plus.google.com/share?url=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<a
aria-label="Share on Google Plus"
className="c0"
href="https://plus.google.com/share?url=undefined"
rel="noreferrer noopener"
target="_blank"
title="Share on Google Plus"
>
<Styled(styled.div)>
<StyledComponent
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-EHOje",
"isStatic": true,
"lastClassName": "c1",
"rules": Array [
"
border-radius: 5px;
transition: 25ms ease-out;
padding: 0.5em 0.75em;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
",
"
background-color: #dd4b39;
border-color: #dd4b39;
&:hover,
&:active {
background-color: #c23321;
border-color: #c23321;
}
",
],
},
"displayName": "Styled(styled.div)",
"render": [Function],
"styledComponentId": "sc-EHOje",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
className="c1"
>
<styled.div
aria-hidden="true"
>
<StyledComponent
aria-hidden="true"
forwardedClass={
Object {
"$$typeof": Symbol(react.forward_ref),
"attrs": Array [],
"componentStyle": ComponentStyle {
"componentId": "sc-htpNat",
"isStatic": false,
"lastClassName": "c2",
"rules": Array [
"
display: flex;
align-items: center;
fill: #fff;
stroke: none;
",
[Function],
";
",
],
},
"displayName": "styled.div",
"render": [Function],
"styledComponentId": "sc-htpNat",
"target": "div",
"toString": [Function],
"warnTooManyClasses": [Function],
"withComponent": [Function],
}
}
forwardedRef={null}
>
<div
aria-hidden="true"
className="c2"
>
<svg
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12.65 8.6c-.02-.66-.3-1.3-.8-1.8S10.67 6 9.98 6c-.63 0-1.2.25-1.64.68-.45.44-.68 1.05-.66 1.7.02.68.3 1.32.8 1.8.96.97 2.6 1.04 3.5.14.45-.45.7-1.05.67-1.7zm-2.5 5.63c-2.14 0-3.96.95-3.96 2.1 0 1.12 1.8 2.08 3.94 2.08s3.98-.93 3.98-2.06c0-1.14-1.82-2.1-3.98-2.1z"
/>
<path
d="M12 0C5.38 0 0 5.38 0 12s5.38 12 12 12 12-5.38 12-12S18.62 0 12 0zm-1.84 19.4c-2.8 0-4.97-1.35-4.97-3.08s2.15-3.1 4.94-3.1c.84 0 1.6.14 2.28.36-.57-.4-1.25-.86-1.3-1.7-.26.06-.52.1-.8.1-.95 0-1.87-.38-2.57-1.08-.67-.68-1.06-1.55-1.1-2.48-.02-.94.32-1.8.96-2.45.65-.63 1.5-.93 2.4-.92V5h3.95v1h-1.53l.12.1c.67.67 1.06 1.55 1.1 2.48.02.93-.32 1.8-.97 2.45-.16.15-.33.3-.5.4-.2.6.05.8.83 1.33.9.6 2.1 1.42 2.1 3.56 0 1.73-2.17 3.1-4.96 3.1zM20 10h-2v2h-1v-2h-2V9h2V7h1v2h2v1z"
/>
</svg>
<span>
Google +
</span>
</div>
</StyledComponent>
</styled.div>
</div>
</StyledComponent>
gitextract_5n3bp_xz/
├── .babelrc
├── .editorconfig
├── .eslintrc.js
├── .gitattributes
├── .gitignore
├── .npmignore
├── .prettierignore
├── .prettierrc
├── .travis.yml
├── CONTRIBUTING.md
├── LICENSE
├── License.md
├── README.md
├── __tests__/
│ ├── __snapshots__/
│ │ ├── facebook.js.snap
│ │ ├── google.js.snap
│ │ ├── hacker.js.snap
│ │ ├── linkedin.js.snap
│ │ ├── mail.js.snap
│ │ ├── pinterest.js.snap
│ │ ├── reddit.js.snap
│ │ ├── telegram.js.snap
│ │ ├── tumblr.js.snap
│ │ ├── twitter.js.snap
│ │ ├── vk.js.snap
│ │ ├── whatsapp.js.snap
│ │ └── xing.js.snap
│ ├── facebook.js
│ ├── google.js
│ ├── hacker.js
│ ├── linkedin.js
│ ├── mail.js
│ ├── pinterest.js
│ ├── reddit.js
│ ├── telegram.js
│ ├── tumblr.js
│ ├── twitter.js
│ ├── vk.js
│ ├── whatsapp.js
│ └── xing.js
├── docs/
│ ├── facebook.md
│ ├── google.md
│ ├── hacker.md
│ ├── index.html
│ ├── index.js
│ ├── linkedin.md
│ ├── mail.md
│ ├── main.css
│ ├── pinterest.md
│ ├── reddit.md
│ ├── telegram.md
│ ├── tumblr.md
│ ├── twitter.md
│ ├── vk.md
│ ├── whatsapp.md
│ ├── x.md
│ └── xing.md
├── lib/
│ └── jestsetup.js
├── package.json
└── src/
├── buttons/
│ ├── facebook.js
│ ├── factory.js
│ ├── google.js
│ ├── hacker.js
│ ├── linkedin.js
│ ├── mail.js
│ ├── pinterest.js
│ ├── reddit.js
│ ├── telegram.js
│ ├── tumblr.js
│ ├── twitter.js
│ ├── vk.js
│ ├── whatsapp.js
│ ├── wrapper.js
│ ├── x.js
│ └── xing.js
├── common.js
├── consts.js
├── index.js
└── svg/
├── X.js
├── facebook.js
├── google.js
├── hacker.js
├── linkedin.js
├── mail.js
├── pinterest.js
├── reddit.js
├── telegram.js
├── tumblr.js
├── twitter.js
├── vk.js
├── whatsapp.js
└── xing.js
Condensed preview — 91 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,600K chars).
[
{
"path": ".babelrc",
"chars": 227,
"preview": "{\n \"presets\": [\n \"env\",\n \"react\"\n ],\n \"plugins\": [\n \"syntax-dynamic-import\",\n [\n \"transform-object-r"
},
{
"path": ".editorconfig",
"chars": 414,
"preview": "# EditorConfig helps developers define and maintain consistent\n# coding styles between different editors and IDEs\n# edit"
},
{
"path": ".eslintrc.js",
"chars": 589,
"preview": "module.exports = {\n extends: 'plugin:prettier/recommended',\n parser: 'babel-eslint',\n env: {\n browser: true,\n j"
},
{
"path": ".gitattributes",
"chars": 24,
"preview": "* text=auto\nbin/* eol=lf"
},
{
"path": ".gitignore",
"chars": 101,
"preview": "docs/build/\ndist-es6/\ndist-modules/\nnode_modules/\ncoverage/\nnpm-debug.log\n.eslintcache\n\n# Logs\n*.log\n"
},
{
"path": ".npmignore",
"chars": 55,
"preview": "demo/\ndist/\ntests/\nsrc/\ndocs/\ncoverage/\n__tests__/\n.*\n\n"
},
{
"path": ".prettierignore",
"chars": 36,
"preview": "docs\ncoverage\ndist-es6\ndist-modules\n"
},
{
"path": ".prettierrc",
"chars": 241,
"preview": "{\n \"semi\": false,\n \"singleQuote\": true,\n \"overrides\": [\n {\n \"files\": \"*.md\",\n \"options\": {\n \"prin"
},
{
"path": ".travis.yml",
"chars": 304,
"preview": "language: node_js\nnode_js:\n - \"8\"\n - \"10\"\nbefore_install:\n - curl -o- -L https://yarnpkg.com/install.sh | bash -s\n -"
},
{
"path": "CONTRIBUTING.md",
"chars": 1135,
"preview": "# Contributing\n\n## Set up instructions\n\nFirst of all, this is a JavaScript project that's distributed on [npmjs.org](htt"
},
{
"path": "LICENSE",
"chars": 1060,
"preview": "Copyright (c) 2016 Juho Vepsalainen\n\nPermission is hereby granted, free of charge, to any person obtaining\na copy of thi"
},
{
"path": "License.md",
"chars": 1084,
"preview": "# The MIT License\n\nCopyright 2018 Sara Vieira, contributors\n\nPermission is hereby granted, free of charge, to any person"
},
{
"path": "README.md",
"chars": 1367,
"preview": "[](https://www.npmjs.com/package/react-social-sharing)\n\n# R"
},
{
"path": "__tests__/__snapshots__/facebook.js.snap",
"chars": 110571,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Facebook 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-de"
},
{
"path": "__tests__/__snapshots__/google.js.snap",
"chars": 110473,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Google 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-deco"
},
{
"path": "__tests__/__snapshots__/hacker.js.snap",
"chars": 105808,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`HackerNews 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-"
},
{
"path": "__tests__/__snapshots__/linkedin.js.snap",
"chars": 107514,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Linkedin 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-de"
},
{
"path": "__tests__/__snapshots__/mail.js.snap",
"chars": 103937,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Mail 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-decora"
},
{
"path": "__tests__/__snapshots__/pinterest.js.snap",
"chars": 108708,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Pinterest 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-d"
},
{
"path": "__tests__/__snapshots__/reddit.js.snap",
"chars": 114448,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Reddit 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-deco"
},
{
"path": "__tests__/__snapshots__/telegram.js.snap",
"chars": 103270,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Telegram 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-de"
},
{
"path": "__tests__/__snapshots__/tumblr.js.snap",
"chars": 104003,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Tumblr 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-deco"
},
{
"path": "__tests__/__snapshots__/twitter.js.snap",
"chars": 104926,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Twitter 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-dec"
},
{
"path": "__tests__/__snapshots__/vk.js.snap",
"chars": 108004,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`VK 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-decorati"
},
{
"path": "__tests__/__snapshots__/whatsapp.js.snap",
"chars": 109025,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Whatsapp 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-de"
},
{
"path": "__tests__/__snapshots__/xing.js.snap",
"chars": 101286,
"preview": "// Jest Snapshot v1, https://goo.gl/fbAQLP\n\nexports[`Xing 1 1`] = `\n.c0 {\n -webkit-text-decoration: none;\n text-decora"
},
{
"path": "__tests__/facebook.js",
"chars": 2975,
"preview": "import React from 'react'\nimport { Facebook } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Facebook', "
},
{
"path": "__tests__/google.js",
"chars": 2830,
"preview": "import React from 'react'\nimport { Google } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Google', func"
},
{
"path": "__tests__/hacker.js",
"chars": 2898,
"preview": "import React from 'react'\nimport { HackerNews } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('HackerNew"
},
{
"path": "__tests__/linkedin.js",
"chars": 2864,
"preview": "import React from 'react'\nimport { Linkedin } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Linkedin', "
},
{
"path": "__tests__/mail.js",
"chars": 2993,
"preview": "import React from 'react'\nimport { Mail } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Mail', function"
},
{
"path": "__tests__/pinterest.js",
"chars": 2881,
"preview": "import React from 'react'\nimport { Pinterest } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Pinterest'"
},
{
"path": "__tests__/reddit.js",
"chars": 2257,
"preview": "import React from 'react'\nimport { Reddit } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Reddit', func"
},
{
"path": "__tests__/telegram.js",
"chars": 2864,
"preview": "import React from 'react'\nimport { Telegram } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Telegram', "
},
{
"path": "__tests__/tumblr.js",
"chars": 2830,
"preview": "import React from 'react'\nimport { Tumblr } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Tumblr', func"
},
{
"path": "__tests__/twitter.js",
"chars": 2847,
"preview": "import React from 'react'\nimport { Twitter } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Twitter', fu"
},
{
"path": "__tests__/vk.js",
"chars": 2572,
"preview": "import React from 'react'\nimport { VK } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('VK', function() {"
},
{
"path": "__tests__/whatsapp.js",
"chars": 2864,
"preview": "import React from 'react'\nimport { Whatsapp } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Whatsapp', "
},
{
"path": "__tests__/xing.js",
"chars": 2720,
"preview": "import React from 'react'\nimport { Xing } from '../src/index'\nimport 'jest-styled-components'\n\ndescribe('Xing', function"
},
{
"path": "docs/facebook.md",
"chars": 1047,
"preview": "# Import\n\n```\nimport { Facebook } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Facebook link=\""
},
{
"path": "docs/google.md",
"chars": 1025,
"preview": "# Import\n\n```\nimport { Google } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Google link=\"http"
},
{
"path": "docs/hacker.md",
"chars": 1249,
"preview": "# Import\n\n```\nimport { HackerNews } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<HackerNews li"
},
{
"path": "docs/index.html",
"chars": 296,
"preview": "<!doctype html>\n<html lang=\"en\">\n<head>\n <meta charset=\"utf-8\">\n <meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">"
},
{
"path": "docs/index.js",
"chars": 3387,
"preview": "/* eslint-disable global-require, import/no-unresolved, react/no-multi-comp */\nimport React from 'react'\nimport ReactDOM"
},
{
"path": "docs/linkedin.md",
"chars": 1303,
"preview": "# Import\n\n```\nimport { Linkedin } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Linkedin link=\""
},
{
"path": "docs/mail.md",
"chars": 1275,
"preview": "# Import\n\n```\nimport { Mail } from 'react-social-sharing'\n```\n\n# Use\n\nYou can change the subject by the `subject` prop a"
},
{
"path": "docs/main.css",
"chars": 90,
"preview": ".github-corner svg {\n z-index: 1000;\n}\n\n/* TODO: insert main styles of your demo here */\n"
},
{
"path": "docs/pinterest.md",
"chars": 1196,
"preview": "# Import\n\n```\nimport { Pinterest } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Pinterest link"
},
{
"path": "docs/reddit.md",
"chars": 1025,
"preview": "# Import\n\n```\nimport { Reddit } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Reddit link=\"http"
},
{
"path": "docs/telegram.md",
"chars": 1215,
"preview": "# Import\n\n```\nimport { Telegram } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Telegram link=\""
},
{
"path": "docs/tumblr.md",
"chars": 1025,
"preview": "# Import\n\n```\nimport { Tumblr } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Tumblr link=\"http"
},
{
"path": "docs/twitter.md",
"chars": 1174,
"preview": "# Import\n\n```\nimport { Twitter } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Twitter link=\"ht"
},
{
"path": "docs/vk.md",
"chars": 1113,
"preview": "# Import\n\n```\nimport { VK } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<VK link=\"http://shari"
},
{
"path": "docs/whatsapp.md",
"chars": 1215,
"preview": "# Import\n\n```\nimport { Whatsapp } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Whatsapp link=\""
},
{
"path": "docs/x.md",
"chars": 1011,
"preview": "# Import\n\n```\nimport { X } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<X link=\"http://sharing"
},
{
"path": "docs/xing.md",
"chars": 1147,
"preview": "# Import\n\n```\nimport { Xing } from 'react-social-sharing'\n```\n\n# Use\n\n```react\nshowSource: true\n---\n<Xing link=\"http://s"
},
{
"path": "lib/jestsetup.js",
"chars": 301,
"preview": "import Enzyme, { mount, render } from 'enzyme'\nimport Adapter from 'enzyme-adapter-react-16'\n// React 16 Enzyme adapter\n"
},
{
"path": "package.json",
"chars": 2794,
"preview": "{\n \"name\": \"react-social-sharing\",\n \"description\": \"React Social Sharing Components ( No extra JS )\",\n \"author\": \"Sar"
},
{
"path": "src/buttons/facebook.js",
"chars": 811,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport is from 'styled-is'\nimport ButtonFactory from '."
},
{
"path": "src/buttons/factory.js",
"chars": 1416,
"preview": "import React, { Fragment } from 'react'\nimport { Link, Icon } from '../common'\nimport wrapper from './wrapper'\n\nconst Bu"
},
{
"path": "src/buttons/google.js",
"chars": 759,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport { GoogleIc"
},
{
"path": "src/buttons/hacker.js",
"chars": 758,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport {\n Hacker"
},
{
"path": "src/buttons/linkedin.js",
"chars": 776,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport {\n Linked"
},
{
"path": "src/buttons/mail.js",
"chars": 773,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport {\n EmailI"
},
{
"path": "src/buttons/pinterest.js",
"chars": 787,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport {\n Pinter"
},
{
"path": "src/buttons/reddit.js",
"chars": 751,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport {\n Reddit"
},
{
"path": "src/buttons/telegram.js",
"chars": 776,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport {\n Telegr"
},
{
"path": "src/buttons/tumblr.js",
"chars": 702,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport { TumblrIc"
},
{
"path": "src/buttons/twitter.js",
"chars": 730,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport { TwitterI"
},
{
"path": "src/buttons/vk.js",
"chars": 704,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport { VKIconFi"
},
{
"path": "src/buttons/whatsapp.js",
"chars": 776,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport {\n Whatsa"
},
{
"path": "src/buttons/wrapper.js",
"chars": 670,
"preview": "import React, { Fragment } from 'react'\n\nexport default (\n small,\n solid,\n medium,\n big,\n circle,\n solidcircle,\n "
},
{
"path": "src/buttons/x.js",
"chars": 696,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory.js'\nimport { Shari"
},
{
"path": "src/buttons/xing.js",
"chars": 732,
"preview": "import React from 'react'\nimport styled from 'styled-components'\nimport ButtonFactory from './factory'\nimport {\n XingIc"
},
{
"path": "src/common.js",
"chars": 928,
"preview": "import styled, { css } from 'styled-components'\nimport is, { isOr } from 'styled-is'\n\nexport const SharingButton = style"
},
{
"path": "src/consts.js",
"chars": 2128,
"preview": "export default {\n twitter: (link = '', message = '') =>\n `https://twitter.com/intent/tweet/?text=${encodeURIComponen"
},
{
"path": "src/index.js",
"chars": 730,
"preview": "// this should be the entry point to your library\nmodule.exports = {\n Twitter: require('./buttons/twitter').default,\n "
},
{
"path": "src/svg/X.js",
"chars": 797,
"preview": "import React from 'react'\n\nexport const XIconFill = () => (\n <svg role=\"img\" viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.o"
},
{
"path": "src/svg/facebook.js",
"chars": 550,
"preview": "import React from 'react'\n\nexport const FacebookIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 "
},
{
"path": "src/svg/google.js",
"chars": 1896,
"preview": "import React from 'react'\n\nexport const GoogleIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 "
},
{
"path": "src/svg/hacker.js",
"chars": 1789,
"preview": "import React from 'react'\n\nexport const HackerIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 "
},
{
"path": "src/svg/linkedin.js",
"chars": 1310,
"preview": "import React from 'react'\n\nexport const LinkedinIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 "
},
{
"path": "src/svg/mail.js",
"chars": 1590,
"preview": "import React from 'react'\n\nexport const EmailIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 2"
},
{
"path": "src/svg/pinterest.js",
"chars": 1904,
"preview": "import React from 'react'\n\nexport const PinterestIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0"
},
{
"path": "src/svg/reddit.js",
"chars": 3036,
"preview": "import React from 'react'\n\nexport const RedditIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 "
},
{
"path": "src/svg/telegram.js",
"chars": 1329,
"preview": "import React from 'react'\n\nexport const TelegramIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 "
},
{
"path": "src/svg/tumblr.js",
"chars": 827,
"preview": "import React from 'react'\n\nexport const TumblrIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 "
},
{
"path": "src/svg/twitter.js",
"chars": 1184,
"preview": "import React from 'react'\n\nexport const TwitterIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0"
},
{
"path": "src/svg/vk.js",
"chars": 2579,
"preview": "import React from 'react'\n\nexport const VKIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24 2"
},
{
"path": "src/svg/whatsapp.js",
"chars": 2702,
"preview": "import React from 'react'\n\nexport const WhatsappIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 "
},
{
"path": "src/svg/xing.js",
"chars": 899,
"preview": "import React from 'react'\n\nexport const XingIconFill = () => (\n <svg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 24"
}
]
About this extraction
This page contains the full source code of the SaraVieira/react-social-sharing GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 91 files (1.4 MB), approximately 405.8k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.