by

Where communities thrive


  • Join over 1.5M+ people
  • Join over 100K+ communities
  • Free without limits
  • Create your own community
People
Repo info
Activity
Emmanuel Pire
@lipsumar
great examples, it's not only about the component itself but what surrounds it
your second example has a dark bg
it's not that simple because we want to have a very clean template
in this case something like
<button class="ns-btn" type="{{type}}">{{text}}</button>
now you need to be able to produce different kind of buttons
a primary, a secondary, etc
here i believe you have 2 options:
  1. make a new template for a primary button
.2. add a variable to the base template
Emmanuel Pire
@lipsumar
that means either:
<button class="ns-btn ns-btn--primary" type="{{type}}">{{text}}</button>
or
<button class="ns-btn {{className}}" type="{{type}}">{{text}}</button>
it's repetition over complexity
sometimes it's better to duplicate some code in order to keep things readable
sometimes it's not worth duplicating because adding 1 var is really manageable
so that's my take on that, wdyt ?
Emmanuel Pire
@lipsumar

But let's say we go with the simplest option: n°2 (simplest because we don't handle multiple HTML files for 1 component yet).
You still have to show it in the UI at the same time. It has always been the point: to show (and work on) all modifiers_ and/or _states to make testing easier.

For that I think all you need is a document. A document (currently PreviewDocument) is how you put component(s) on a page. Something like this:

{{> Atom/Button text="Default button"}}
{{> Atom/Button text="Primary button" className="ns-btn--primary"}}
That document would only be used by the UI, so you can do stuff like:
<h2>Normal background</h2>
{{> Atom/Button text="Default button"}}
{{> Atom/Button text="Primary button" className="ns-btn--primary"}}

<h2>Dark background</h2>
<div style="background-color:#333">
  {{> Atom/Button text="Default button"}}
  {{> Atom/Button text="Primary button" className="ns-btn--primary"}}
</div>
The only issue is that it's currently unusable because not ready yet. But maybe i can squeeze that in 0.5
but more to the point: does that answer your question ?
Emmanuel Pire
@lipsumar
No, that's too much to change. will not be in 0.5
BUT!
you can already do tests displaying many times the same component
by simply creating a component called Test/Button containing this:
<h2>Normal background</h2>
{{> Atom/Button text="Default button"}}
{{> Atom/Button text="Primary button" className="ns-btn--primary"}}

<h2>Dark background</h2>
<div style="background-color:#333">
  {{> Atom/Button text="Default button"}}
  {{> Atom/Button text="Primary button" className="ns-btn--primary"}}
</div>
it's obviously not a "real" component, it's only going to be used in the UI, but it's a decent workaround for the time being.
Maxime Laforet
@Macxim
I see.
Yes, it’s helpful. Thanks!
Emmanuel Pire
@lipsumar
To go further (and to be faster) i think a plugin should be creating the Test/ components
but that must be based on the way you want to work, not what a tools allows you to
a plugin for instance could detect states from your css classes and compose itself the Test/ component
would that make sense to you ?
Maxime Laforet
@Macxim

a plugin for instance could detect states from your css classes and compose itself the Test/ component

That would be awesome!

Emmanuel Pire
@lipsumar
it's not that hard
the easiest to read for a plugin i think would be javadoc
stuff like
/** 
* i am a javadoc
* @foo bar
*/
Emmanuel Pire
@lipsumar
Lots of bugfixes, get 0.5.4
npm i --save design-system-framework@0.5.4
Emmanuel Pire
@lipsumar
5.5 and fix for dsf-export-static also out
Emmanuel Pire
@lipsumar
i have gregorian.io :sparkles:
Maxime Laforet
@Macxim
You’re on fire :fire: :clap:
Emmanuel Pire
@lipsumar
This https://www.smashingmagazine.com/2016/05/content-first-prototyping/#systems-thinking-beyond-the-web I strongly believe in this (that's a core idea of Gregorian actually)
Maxime Laforet
@Macxim
The second paragraph is very accurate.
Emmanuel Pire
@lipsumar

New feature: variations
you can have multiple html file per component

Atom/Button/Button.hbs
Atom/Button/primary.hbs
Atom/Button/fancyplusplus.hbs

you just need

    dsf.onLoad(function(){
        dsf.getComponents().forEach(function(component){
            var componentName = component.id.split('/').pop();

            component.getResourcePaths('html', function(err, files){

                if(files.length > 1){
                    files.forEach(function(f){
                        var lastPart = f.split('/').pop();
                        if(lastPart === componentName+'.hbs'){
                            // index.html
                            component.registerVariation('html', 'index', f);
                        }else{
                            // variation
                            var name = lastPart.replace('.hbs', '');
                            component.registerVariation('html', name, f);
                        }
                    });
                    component.cacheHtml(); // won't be needed soon
                }
            });
        });
    });

and use

{{> Atom/Button}}
{{> Atom/Button/primary}}
{{> Atom/Button/fancyplusplus}}

the server can also serve variations
http://localhost:3000/build/Atom/Button/?__variation=primary

Maxime Laforet
@Macxim
Nice feature :) thanks!
Emmanuel Pire
@lipsumar
Its in the air!
Maxime Laforet
@Macxim
@lipsumar Definitely http://atomicdocs.io/
Emmanuel Pire
@lipsumar
PHP hah. So 2010
Maxime Laforet
@Macxim
Surprising choice, isn’t it?
Emmanuel Pire
@lipsumar
Gregor beats that by being static
The docs