-
-
Notifications
You must be signed in to change notification settings - Fork 9.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #57 from storybooks/56-homepage-logos
Featured storybook users
- Loading branch information
Showing
25 changed files
with
651 additions
and
11 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -28,7 +28,6 @@ const MainLinks = () => ( | |
| </div> | ||
| </div> | ||
| </div> | ||
| <hr /> | ||
| </div> | ||
| </div> | ||
| ); | ||
|
|
||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import PropTypes from 'prop-types'; | ||
| import React from 'react'; | ||
| import { Link } from 'react-router'; | ||
| import './style.css'; | ||
|
|
||
| const UsedByBg = ({ color }) => ( | ||
| <div className="used-by-bg"> | ||
| <svg | ||
| width="100%" | ||
| height="100%" | ||
| preserveAspectRatio="none" | ||
| viewBox="0 0 1440 380" | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| xmlnsXlink="http://www.w3.org/1999/xlink" | ||
| > | ||
| <g id="Canvas" transform="translate(618 -3261)"> | ||
| <use | ||
| xlinkHref="#path0_fill" | ||
| transform="translate(-618 3261.5)" | ||
| fill={color} | ||
| id="used-by-bg" | ||
| /> | ||
| </g> | ||
| <defs> | ||
| <path id="path0_fill" d="M 43.5 300.5L 0 35L 1440 0L 1371.5 379.5L 43.5 300.5Z" /> | ||
| </defs> | ||
| </svg> | ||
| </div> | ||
| ); | ||
|
|
||
| const User = ({ logo, demo, site, title }) => ( | ||
| <a className="used-by-user" href={demo || site} target="_blank" rel="nofollow"> | ||
| <img className="used-by-user-image" src={logo} alt={title} /> | ||
| </a> | ||
| ); | ||
|
|
||
| const UsedBy = ({ users }) => ( | ||
| <div className="used-by-wrapper"> | ||
| <div className="used-by"> | ||
| <UsedByBg color="#E7F6D8" /> | ||
| <div className="used-by-contents"> | ||
| <h2 className="used-by-title">Used by these fine folks:</h2> | ||
| <div className="used-by-users"> | ||
| {users.map((user, idx) => <User key={idx} {...user} />)} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <Link to="/examples/" className="used-by-more-examples"> | ||
| See more examples… | ||
| </Link> | ||
| </div> | ||
| ); | ||
|
|
||
| UsedBy.propTypes = { | ||
| users: PropTypes.array, | ||
| }; | ||
|
|
||
| export default UsedBy; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,67 @@ | ||
| .used-by-wrapper { | ||
| margin-bottom: 60px; | ||
| } | ||
|
|
||
| .used-by { | ||
| max-width: 1000px; | ||
| margin: 0 auto; | ||
| position: relative; | ||
| } | ||
|
|
||
| .used-by-bg { | ||
| position: absolute; | ||
| top: 0px; | ||
| left: 0px; | ||
| right: 0px; | ||
| bottom: 0px; | ||
| } | ||
|
|
||
| .used-by-bg svg { | ||
| height: 100%; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .used-by-contents { | ||
| padding: 40px 20px; | ||
| position: relative; | ||
| z-index: 1; | ||
| } | ||
|
|
||
| .used-by-title { | ||
| text-align: center; | ||
| margin: 0 0 30px 0; | ||
| opacity: 0.5; | ||
| color: #468c07; | ||
| } | ||
|
|
||
|
|
||
| .used-by-users { | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: space-around; | ||
| } | ||
|
|
||
| .used-by-user { | ||
| /*flex: 1;*/ | ||
| margin-right: 30px; | ||
| max-width: 100px; | ||
| filter: grayscale(100%); | ||
| opacity: 0.8; | ||
| } | ||
| .used-by-user:last-child { | ||
| margin-right: 0; | ||
| } | ||
| .used-by-user:hover { | ||
| filter: none; | ||
| opacity: 1; | ||
| } | ||
| .used-by-user-image { | ||
| display: block; | ||
| width: 100%; | ||
| } | ||
|
|
||
| .used-by-more-examples { | ||
| text-align: center; | ||
| display: block; | ||
| margin-top: 10px; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| airbnb: | ||
| logo: ./logos/airbnb.svg | ||
| title: Airbnb Dates | ||
| description: An internationalizable, mobile-friendly datepicker library for the web. | ||
| source: https://github.com/airbnb/react-dates | ||
| demo: http://airbnb.io/react-dates/ | ||
| site: http://airbnb.com | ||
| slack: | ||
| logo: ./logos/slack.svg | ||
| title: Slack Emoji Picker | ||
| description: Slack improves performance and maintainability with Storybook! | ||
| demo: https://slack.engineering/rebuilding-slacks-emoji-picker-in-react-bfbd8ce6fbfe | ||
| site: http://slack.com | ||
| lonelyplanet: | ||
| logo: ./logos/lonelyplanet.svg | ||
| title: Lonely Planet | ||
| description: All the tools you need to build the Lonely Planet UI experience. | ||
| source: https://github.com/lonelyplanet/backpack-ui | ||
| demo: https://lonelyplanet.github.io/backpack-ui/ | ||
| site: https://www.lonelyplanet.com/ | ||
| squarespace: | ||
| logo: ./logos/squarespace.png | ||
| title: Squarespace | ||
| description: Component design and development at Squarespace | ||
| site: http://squarespace.com | ||
| coursera: | ||
| logo: ./logos/coursera.svg | ||
| title: Coursera | ||
| site: https://coursera.org | ||
| # buffer: | ||
| # logo: ./logos/buffer.svg | ||
| # title: Buffer Components | ||
| # description: A collection of Buffer UI React components. | ||
| # source: https://github.com/bufferapp/buffer-components | ||
| # demo: https://bufferapp.github.io/buffer-components/ | ||
| # site: https://buffer.com | ||
| # wix: | ||
| # logo: ./logos/wix.svg | ||
| # title: Wix | ||
| # description: React component library for all Wix verticals | ||
| # demo: https://wix.github.io/wix-style-react/ | ||
| # source: https://github.com/wix/wix-style-react | ||
| # source2: https://github.com/wix/react-native-storybook-example/ | ||
| # algolia: | ||
| # logo: ./logos/algolia.svg | ||
| # title: Algolia Instantsearch | ||
| # description: Lightning-fast, hyper-configurable search. | ||
| # source: https://github.com/algolia/react-instantsearch/ | ||
| # demo: https://community.algolia.com/react-instantsearch/storybook/ | ||
| # mozilla: | ||
| # logo: ./logos/mozilla.svg | ||
| # title: Mozilla Foundation | ||
| # site: https://mozilla.org | ||
| # remitly: | ||
| # logo: ./logos/remitly.svg | ||
| # title: Remitly | ||
| # site: https://remitly.com | ||
| # nulogy: | ||
| # logo: ./logos/nulogy.png | ||
| # title: Nulogy | ||
| # description: SaaS for Supply Chain | ||
| # site: https://nulogy.com | ||
| # postmates: | ||
| # logo: ./logos/postmates.png | ||
| # title: Quran.com | ||
| # site: https://postmates.com | ||
| # appbase: | ||
| # logo: ./logos/appbase.svg | ||
| # title: Appbase Maps | ||
| # description: A storybook playground for ReactiveMaps and ReactiveSearch. | ||
| # source: https://github.com/appbaseio/playground | ||
| # demo: https://opensource.appbase.io/playground/ | ||
| # site: https://appbase.io | ||
| # quran: | ||
| # logo: ./logos/quran.svg | ||
| # title: Quran.com | ||
| # description: Component library for Quran.com, Quranicaudio.com and Salah.com. | ||
| # source: https://github.com/quran/common-components | ||
| # demo: https://quran.github.io/common-components/ | ||
| # site: https://quran.com/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,6 @@ | ||
| import Homepage from 'components/Homepage' | ||
| import React from 'react'; | ||
| import { values } from 'lodash'; | ||
| import Homepage from 'components/Homepage'; | ||
| import users from './_users.yml'; | ||
|
|
||
| export default Homepage | ||
| export default () => <Homepage users={values(users)} />; |
Oops, something went wrong.