Feat: Forkme ribbon option #647
Conversation
Codecov Report
|
src/rsg-components/Ribbon/Ribbon.js
Outdated
| padding: '5px 15px', | ||
| textAlign: 'center', | ||
| fontSize: 14, | ||
| background: '#f9970d', |
There was a problem hiding this comment.
It would be better to define default colors and text in config schema. Probably you’ll need to use process function for that.
src/rsg-components/Ribbon/Ribbon.js
Outdated
| height: '149px', | ||
| zIndex: 999, | ||
| }, | ||
| forkmeIcon: { |
There was a problem hiding this comment.
It’s not really an icon, I’d call it link.
src/rsg-components/Ribbon/Ribbon.js
Outdated
| import Styled from 'rsg-components/Styled'; | ||
|
|
||
| export const styles = ({ fontFamily }) => ({ | ||
| forkme: { |
There was a problem hiding this comment.
root or ribbon would be more in line with other components.
| @@ -0,0 +1,50 @@ | |||
| import React from 'react'; | |||
There was a problem hiding this comment.
Please take a look at https://react-styleguidist.js.org/docs/development.html This component should be split into two: Ribbon that will read config for a React context and RibbonRenderer — this component that prints actual HTML.
There was a problem hiding this comment.
Ok, please take a look now and see if it's correct now.
| @@ -73,6 +73,7 @@ export default class StyleGuide extends Component { | |||
| homepageUrl={HOMEPAGE} | |||
| toc={<TableOfContents sections={sections} />} | |||
| hasSidebar={config.showSidebar && !isolatedComponent} | |||
| ribbon={config.ribbon} | |||
There was a problem hiding this comment.
You don’t need this because all config is accessible in the context.
There was a problem hiding this comment.
I think we still need this here as we're passing it down to the component to check if we need to render a ribbon (just like hasSidebar).
There was a problem hiding this comment.
No if you’ll read config from the context as I’m suggesting ;-)
|
And please revert lock file changes, you don’t have any changes in |
wkwiatek
force-pushed
the
feature/forkme-ribbon
branch
from
ec0e0b9 to
746f69d
Compare
wkwiatek
force-pushed
the
feature/forkme-ribbon
branch
from
746f69d to
eb33049
Compare
|
It’s closer now but a few things are still missed:
You’re still passing it down via props.
You’re using a theme now. It may be a, actually, good idea but in that case you don’t need colors inside the |
👋 **[Support Styleguidist](https://opencollective.com/styleguidist) on Open Collective** 👋 ## New features ### Page per section 🚧 This is a huge improvement for large style guides: now you can show only one component at a page instead of all components.  To enable: ```js module.exports = { pagePerSection: true }; ``` This is an experimental feature and we need your feedback to make it better and really useful. For example, right now there’s no isolated mode. So feel free to share your ideas [in issues](https://github.com/styleguidist/react-styleguidist/issues). (#835 by @bitionaire and @stepancar, closes #494 and #768) ### “Fork me” ribbon One more step to make Styleguidist usable for documenting open source projects:  New config option to enable the ribbon, define the URL and change the label: ```js module.exports = { ribbon: { url: 'http://example.com/', text: 'Fork me on GitHub' } }; ``` And two new [theme variables](https://github.com/styleguidist/react-styleguidist/blob/master/src/styles/theme.js) to change colors: `color.ribbonBackground` and `color.ribbonText`. (#861 by @glebez and @wkwiatek, part of #195, closes #647) ### Options to change CLI output on server start and build Two new options, `printServerInstructions` and `printBuildInstructions`: ```js module.exports = { printBuildInstructions(config) { console.log( `Style guide published to ${ config.styleguideDir }. Something else interesting.` ); } }; ``` (#878 by @roblevintennis, closes #876) ### Option to modify props A new option, `updateDocs` to modify props before rendering. For example, you can load a component version number from a JSON file: ```js module.exports = { updateDocs(docs) { if (docs.doclets.version) { const versionFilePath = path.resolve( path.dirname(file), docs.doclets.version ); const version = require(versionFilePath).version; docs.doclets.version = version; docs.tags.version[0].description = version; } return docs; } }; ``` (#868 by @ryanoglesby08) ### Limited support for named exports Styleguidist used to require default exports for components. Now you can use named exports too, though Styleguidist still supports only one component per file. I hope this change will make some users happier, see more details [in the docs](https://react-styleguidist.js.org/docs/components.html#loading-and-exposing-components). (#825 by @marcdavi-es, closes #820 and #633) ### Allow arrays of component paths in sections More flexibility in structuring your style guide: ```js module.exports = { sections: [ { name: 'Forms', components: [ 'lib/components/ui/Button.js', 'lib/components/ui/Input.js' ] } ] }; ``` (#794 by @glebez, closes #774) ### Sort properties by `required` and `name` attributes This change should make props tables more predictable for the users. Instead of relying on developers to sort props in a meaningful way, Styleguidist will show required props first, and sort props in each group alphabetically. To disable sorting, use the identity function: ```javascript module.exports = { sortProps: props => props }; ``` (#784 by @dotcs) ## Bug fixes * Allow `Immutable` state in examples (#870 by @nicoffee, closes #864) * Change template container ID to prevent clashes (#859 by @glebez, closes #753) * Better props definitions with Flow types (#781 by @nanot1m)
|
🎉 This issue has been resolved in version 6.5.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Adds 'Fork me' ribbon from #195.