frontend / toolbox-reader Goto Github PK

View Code? Open in Web Editor NEW

0.0 0.0 3.0 14.06 MB

Toolbox Reader (styleguide renderer) —

Home Page: https://frontend.github.io/toolbox/

JavaScript 86.06% SCSS 13.94%

styleguide

toolbox-reader's People

Contributors

Watchers

Forkers

dmrty stelch1234 epfl-si

toolbox-reader's Issues

Add component full view

Basically, add new route for component only (check Page) and add the link in the doc

SVG icons id should be prefixed

We should prefix Toolbox icons to avoid duplicated ids with the custom icons from the project.

Not like this:

<symbol id="icon-code" viewbox="0 0 114 102">

Like this:

<symbol id="tlbx-icon-code" viewbox="0 0 114 102">

toolbox-reader/src/components/Icon/Icons.js

Lines 5 to 39 in ed1eabf

  <svg xmlns="http://www.w3.org/2000/svg" style="display:none"> 

  <symbol id="icon-code" viewbox="0 0 114 102"> 

  <title>code</title> 

  <g fill="currentColor" fill-rule="evenodd"> 

  <path d="M24.884 23L0 51l24.884 28L32 72.815 12.612 51 32 29.186zM89.116 23L82 29.185 101.388 51 82 72.815 89.116 79 114 51zM30 98.032L75.528 0 84 3.968 38.472 102z" 

  /> 

  </g> 

  </symbol> 

  <symbol id="icon-search" viewbox="0 0 97 97"> 

  <title>search</title> 

  <path d="M96.61 90.8L72.075 66.267c12.785-15.891 11.812-39.262-2.93-54.008C61.493 4.609 51.325.395 40.504.395c-10.816 0-20.988 4.21-28.637 11.863C4.215 19.91 0 30.082 0 40.898 0 51.716 4.21 61.888 11.863 69.54c7.648 7.648 17.82 11.863 28.637 11.863 9.344 0 18.199-3.149 25.371-8.934L90.402 97l6.208-6.2zM40.505 72.63c-8.473 0-16.441-3.305-22.434-9.293-5.993-5.993-9.293-13.961-9.293-22.438 0-8.477 3.3-16.441 9.293-22.438 5.992-5.993 13.96-9.293 22.434-9.293 8.476 0 16.445 3.3 22.438 9.293 12.367 12.37 12.367 32.5 0 44.875-5.993 5.992-13.961 9.293-22.438 9.293z" 

  fill="currentColor" fill-rule="evenodd" /> 

  </symbol> 

  <symbol id="icon-menu" viewbox="0 0 100 76"> 

  <title>menu</title> 

  <g fill="currentColor"> 

  <rect x="0" y="0" width="100" height="10"></rect> 

  <rect x="0" y="33" width="100" height="10"></rect> 

  <rect x="0" y="66" width="100" height="10"></rect> 

  </g> 

  </symbol> 

  ${ window.theme && window.theme.brand ? window.theme.brand : ` 

  <symbol id="icon-toolbox" viewbox="0 0 117 98"> 

  <title>toolbox</title> 

  <g fill="currentColor" fill-rule="evenodd"> 

  <path d="M101.983 21h-6.325c.045 0 .256.178.297.256.379.666.75 1.474.75 2.25v3.984c0 2.497-2.36 4.245-4.854 4.245H80.67c-2.5 0-4.264-1.748-4.264-4.245v-6.485h-37.01v6.485c0 2.497-1.787 4.245-4.292 4.245h-11.17c-2.5 0-4.835-1.748-4.835-4.245v-3.984c0-.772.347-1.575.722-2.237.046-.077.247-.264.297-.264h-4.982L0 37.55V52h50.14v-3.222c0-2.09 1.847-3.93 3.94-3.93h7.797c2.098 0 3.78 1.84 3.78 3.93V52H117V37.55L101.983 21z" 

  /> 

  <path d="M24.244 29h11.1c.659 0 .709 0 .709-.675V8.228c0-1.115 1.376-2.188 2.47-2.188h38.931c1.1 0 2.498 1.073 2.498 2.188l-.005 13.191v6.906c0 .675.028.675.677.675h11.109c.645 0 1.267 0 1.267-.675v-4.038c0-.204-.086-.453-.19-.63-.205-.383-.641-.698-1.077-.698h-4.678c-.817 0-2.357 0-2.357-1.896l-.005-17.354C84.693 1.744 83.1 0 81.183 0L34.795.005c-1.926 0-3.488 1.743-3.488 3.709v17.349c0 .12.059.689 0 .689-.3 1.207-1.563 1.207-2.371 1.207h-4.692c-.445 0-.862.315-1.071.699-.1.175-.173.425-.173.629v4.038c0 .675.59.675 1.244.675zM65.526 59.381v3.344c0 2.109-1.672 4.08-3.757 4.08h-7.751c-2.081 0-3.916-1.971-3.916-4.075v-6.725L5 56v36.933C5 95.533 6.731 98 9.303 98h99c2.575 0 4.665-2.288 4.665-4.888l.032-3.298V56H65.527v3.381z" 

  /> 

  <path d="M61.994 54.998v-6.65c0-.25.057-.348-.192-.348h-7.457c-.244 0-.345.098-.345.348v13.188c0 .254.096.464.345.464h7.457c.25 0 .192-.214.192-.464v-6.538z" 

  /> 

  </g> 

  </symbol> 

  `} 

  </svg>

Full render should wrap the component in the correct class

If we define a wrapper and/or background setting in the component settings, it should be applied in the full render.

Styleguides will break after Toolbox updates

In the current state, it's not possible to avoid ALL the deployed styleguides to break after we update the reader: we are currently fetching a static build, like https://rawgit.com/frontend/toolbox-reader/master/build/static/js/main.f84f379e.js.

Add indent/beautifier to code preview in toolbox-reader

Open to discussion @Yago @tonifisler

Requested when twig logic change indentation

Add Toolbar

Able to :

Display by default the Toolbox identity and any define brand
toggle the menu, the search and other future features.

Markdown table rendering not working

Tried to use the markdown syntax to rendre tables in documentation… And it doesn't work (yet)!

Tested:

with and without linebreak before
with and without
before
with regular markdown syntax (with and without columns alignments)
with GitHub markdown syntax

Tables	Are	Cool
col 3 is	right-aligned	$1600
col 2 is	centered	$12
zebra stripes	are neat	$1

Styleguide styles (config + css)

Hey mates I faced an issue when I want to override some css only for the styleguide.

My website use html { font-size: 48px; } but I want to keep the default size on the Styleguide.
I try to use the assets/config/styleguide.scss file with html { font-size: 16px !important; } but it seems this file is not used anywhere.

How could I achieve my goal ?

Toolbox and Twig errors, crash and CPU burning

When you mess up an @include in Twig, Toolbox Reader becomes unresponsive, crashes the browser tab (latest Chrome) and eats up all the CPU power as it tries to indefinitely reload the components.

Add collapsable menu sub-titles

All “guidelines”, “atoms”, “molecules”, “organisms” and “pages” titles will be collapsed by default to offer a more usable sidenav.

Who's Conor?

Joke aside, I have weird console.log('Conor') from my console, that triggers my code debugger. It's quite painful.

hotfix:

close inspector
refresh
disable the code preview with the left bar link
open inspector
refresh

Make sure app doesn't crash if index.html is missing window objects

We changed the content of the window.sources object and it can crash the app. It shouldn't crash and bring an info on how to upgrade to fix.

Prevent all link

add some event.preventDefault(); to all previewed links.

Add includes polyfill for IE11

Add the following Polyfill for String.includes :

if ( !String.prototype.includes ) {
  String.prototype.includes = function(search, start) {
    'use strict';
    if (typeof start !== 'number') {
      start = 0;
    } 

    if (start + search.length > this.length) {
      return false;
    } else {
      return this.indexOf(search,start) !== -1;
    }
  };
}

Code block global toggle

Add a toolbar toggle to show/hide all code block

Yellow banner still display after following update procedure

after following http://frontend.github.io/toolbox/updates.html on a fresh project, The banner stilly displays as follows:

SVG Icons - Not that easy to implement the svg sprite files in the CMS

It could be nice to be able to add some markup before or after the rendered styleguide.

For example, with my issue with the svg sprite, I could add

{{ source('build/icons/icons.svg') }}

just after the <body> tag & it will be the same for the CMS implementation

Product homepage

Create a specific styleguide homepage template to provide something more sexy. The brand link in the toolbar (#12) should send to this page.

adjust styled-component

Some styles are too strong and override project's styles...

Type specimen?

Could be userful / relevant to have a text specimen, a page that displays/recaps:

p
H1 › H6
quotes
captions
lists (ul & ol)
links
≠ styles (strike-through, highlight, bold, etc.)

With some realistic content (so based on our client's content)

Make it downloadable

For offline purpose, add it in the package.json with a * version

💄 Make it pretty

Still bloody ugly, make it nice
f.ex: https://github.com/alexpate/awesome-design-systems

Add custom blocks in index.html

Hey guys,

Nice job about this amazing Styleguide.

I'm facing an issue, how could I add Typekit to my Styleguide and so use my fonts ?
Also, what about CDN or custom scripts?

View full render of variants fail

Describe the bug
View full render of variants fail.

To Reproduce
Steps to reproduce the behavior:

Go to https://epfl-idevelop.github.io/elements/#/organisms/header
Scroll down to Header light english
Click the "View full render" for Header light english
See error

Screenshot

CSS without B4

Make the styleguide work without (and with) Bootstrap 4.

Remove role="presentation" attributes

They actually remove the semantic meaning and have no point being around anything in the styleguide ;)

toolbox-reader/src/views/Single/SinglePage.js

Line 49 in 5a4b87f

 <div role="presentation" onClick={this.handlePageClick.bind(this)} dangerouslySetInnerHTML={{ __html: this.state.component.content }} /> 

toolbox-reader/src/components/Item/Item.js

Line 72 in 67054ea

role="presentation"

toolbox-reader/src/components/Item/Item.js

Line 80 in 67054ea

role="presentation"

Limit max width of content

On wide screens, reading some pages is kind of difficult.
What about adding a .container on .tlbx-content > div to limit the max width?

before:

after:

	<svg xmlns="http://www.w3.org/2000/svg" style="display:none">
	<symbol id="icon-code" viewbox="0 0 114 102">
	<title>code</title>
	<g fill="currentColor" fill-rule="evenodd">
	<path d="M24.884 23L0 51l24.884 28L32 72.815 12.612 51 32 29.186zM89.116 23L82 29.185 101.388 51 82 72.815 89.116 79 114 51zM30 98.032L75.528 0 84 3.968 38.472 102z"
	/>
	</g>
	</symbol>
	<symbol id="icon-search" viewbox="0 0 97 97">
	<title>search</title>
	<path d="M96.61 90.8L72.075 66.267c12.785-15.891 11.812-39.262-2.93-54.008C61.493 4.609 51.325.395 40.504.395c-10.816 0-20.988 4.21-28.637 11.863C4.215 19.91 0 30.082 0 40.898 0 51.716 4.21 61.888 11.863 69.54c7.648 7.648 17.82 11.863 28.637 11.863 9.344 0 18.199-3.149 25.371-8.934L90.402 97l6.208-6.2zM40.505 72.63c-8.473 0-16.441-3.305-22.434-9.293-5.993-5.993-9.293-13.961-9.293-22.438 0-8.477 3.3-16.441 9.293-22.438 5.992-5.993 13.96-9.293 22.434-9.293 8.476 0 16.445 3.3 22.438 9.293 12.367 12.37 12.367 32.5 0 44.875-5.993 5.992-13.961 9.293-22.438 9.293z"
	fill="currentColor" fill-rule="evenodd" />
	</symbol>
	<symbol id="icon-menu" viewbox="0 0 100 76">
	<title>menu</title>
	<g fill="currentColor">
	<rect x="0" y="0" width="100" height="10"></rect>
	<rect x="0" y="33" width="100" height="10"></rect>
	<rect x="0" y="66" width="100" height="10"></rect>
	</g>
	</symbol>
	${ window.theme && window.theme.brand ? window.theme.brand : `
	<symbol id="icon-toolbox" viewbox="0 0 117 98">
	<title>toolbox</title>
	<g fill="currentColor" fill-rule="evenodd">
	<path d="M101.983 21h-6.325c.045 0 .256.178.297.256.379.666.75 1.474.75 2.25v3.984c0 2.497-2.36 4.245-4.854 4.245H80.67c-2.5 0-4.264-1.748-4.264-4.245v-6.485h-37.01v6.485c0 2.497-1.787 4.245-4.292 4.245h-11.17c-2.5 0-4.835-1.748-4.835-4.245v-3.984c0-.772.347-1.575.722-2.237.046-.077.247-.264.297-.264h-4.982L0 37.55V52h50.14v-3.222c0-2.09 1.847-3.93 3.94-3.93h7.797c2.098 0 3.78 1.84 3.78 3.93V52H117V37.55L101.983 21z"
	/>
	<path d="M24.244 29h11.1c.659 0 .709 0 .709-.675V8.228c0-1.115 1.376-2.188 2.47-2.188h38.931c1.1 0 2.498 1.073 2.498 2.188l-.005 13.191v6.906c0 .675.028.675.677.675h11.109c.645 0 1.267 0 1.267-.675v-4.038c0-.204-.086-.453-.19-.63-.205-.383-.641-.698-1.077-.698h-4.678c-.817 0-2.357 0-2.357-1.896l-.005-17.354C84.693 1.744 83.1 0 81.183 0L34.795.005c-1.926 0-3.488 1.743-3.488 3.709v17.349c0 .12.059.689 0 .689-.3 1.207-1.563 1.207-2.371 1.207h-4.692c-.445 0-.862.315-1.071.699-.1.175-.173.425-.173.629v4.038c0 .675.59.675 1.244.675zM65.526 59.381v3.344c0 2.109-1.672 4.08-3.757 4.08h-7.751c-2.081 0-3.916-1.971-3.916-4.075v-6.725L5 56v36.933C5 95.533 6.731 98 9.303 98h99c2.575 0 4.665-2.288 4.665-4.888l.032-3.298V56H65.527v3.381z"
	/>
	<path d="M61.994 54.998v-6.65c0-.25.057-.348-.192-.348h-7.457c-.244 0-.345.098-.345.348v13.188c0 .254.096.464.345.464h7.457c.25 0 .192-.214.192-.464v-6.538z"
	/>
	</g>
	</symbol>
	`}
	</svg>

frontend / toolbox-reader Goto Github PK

toolbox-reader's People

Contributors

Watchers

Forkers

toolbox-reader's Issues

Recommend Projects

Recommend Topics

Recommend Org