lastcallmedia / mannequin

Mannequin Component Theming Tool

Mannequin

Welcome to the main repository for Mannequin, a component theming tool for the web. This repository is primarily used for development on Mannequin itself - see the "Quick Start" section below if you are here to install Mannequin.

Quick Start

# Pick one or more of the "flavors" below:
composer require lastcall/mannequin-html
composer require lastcall/mannequin-twig
composer require lastcall/mannequin-drupal

# Create your .mannequin.php file for
# HTML - https://mannequin.io/extensions/html/#usage
# Twig - https://mannequin.io/extensions/twig/#usage
# Drupal - https://mannequin.io/extensions/drupal/#usage

vendor/bin/mannequin start

• Documentation
• Extensions
• Report a Bug

mannequin's Issues

Changing all dividers and buttons to #55626d

Changing color offsets the difference in border type in designs and make them less "harsh".

Old Color

New Color

Mannequin logo inconsistency

Logos across screen sizes and pages in design inconsistent. Make appropriate adjustments and versions.

No gutter for logo at widths less than 1280px and about section (below hero area) too close to edge

Current

Design
logo margin: 15px
about section margin: 90px

Collapsing Drawer Bug

If you open the navigation drawer, then decide to click a quick link on the homepage while the drawer is still open, the drawer doesn't collapse.

UI Homepage Overhaul

Is it possible (Probably not) to get this set up before @rbayliss's presentation on Friday?

Invision Links
WIDE: https://invis.io/HPC8UEX2T#/239885367_Landing_Page
MED: https://invis.io/M9CGDVAT7#/241734385_Landing_Page_-_Med
THIN: https://invis.io/3RCE1PVPW#/241526238_Landing_Page_-_Thin

npm-run-all dependency

did i miss something in the installation, but looks like there s a npm-run-all dependency ?

$ yarn start
yarn start v1.0.1
$ npm-run-all -p watch-css start-js
/bin/sh: npm-run-all: command not found
error Command failed with exit code 127.

quick fix

yarn add npm-run-all --dev

Info Site General

This issue exists to for posting non-issue specific comments, and for logging time for general meetings, calls, etc.

Allow configurable branding to be used

As a developer, I want to be able to specify a name for my project and a small logo to be displayed on the splash page for the UI. I want to be able to configure this in .mannequin.php.

Rename CLI commands for better comprehensibility

The commands should be:
start: Starts the development server
snapshot: Renders the HTML and saves it to directory.

So the task is to rename ServerCommand -> StartCommand and RenderCommand -> SnapshotCommand, then update any documentation pointing to these commands.

"View Demo" Button

Button should be blue regardless if inactive or not.

Fix margin on HomepageHero for wide.

On wide display, the margin should be 1 col of margin of the left, and two on the right.
It them becomes centered for tablet and mobile.

Make favicon retina

Setup demo site

Already published to https://lastcallmedia.github.io/Mannequin, but we may want to use this URL for the documentation?

Add explanatory text to web server startup message

It would be great if we explained that you need to have a port exposed when the development server starts up. This would be especially nice inside docker.

Twig templates that are not loadable stop all other twig components from being loaded

If we have a twig template that throws a Twig_Loader_Exception when being parsed, the discovery process stops immediately. We should note this issue in the console (log a message) and add the template as a broken component.

Hero area height auto adjusts to browser window height

Is it possible to make the hero area height auto adjust to the height of the browser, while always having the scrolling mouse icon 50 or so pixels from the bottom?

Variant switcher missing from UI

The variant switcher seems to have disappeared from the UI. This is a select box that should show the current variants that are available and let you hop between them. It should be appearing in the PatternTopBar (white space, just to the right of the word "Callout" in this screenshot).

Output message if config has no extensions

When running a mannequin command on a config that doesn’t use any extensions, we should print a warning message to alert the user. A config without extensions isn’t really usable.

Start error when no config file exists is not helpful

This error is not helpful:

www-data@470e8fdde572:/var/www# vendor/bin/mannequin snapshot

Fatal error: Uncaught RuntimeException: Expected config in , but the file does not exist. in /var/www/vendor/lastcall/mannequin-core/Mannequin.php:100
Stack trace:
#0 /var/www/vendor/pimple/pimple/src/Pimple/Container.php(118): LastCall\Mannequin\Core\Mannequin->LastCall\Mannequin\Core\{closure}(Object(LastCall\Mannequin\Core\Mannequin))
#1 /var/www/vendor/lastcall/mannequin-core/Mannequin.php(289): Pimple\Container->offsetGet('config')
#2 /var/www/vendor/lastcall/mannequin-core/Mannequin.php(224): LastCall\Mannequin\Core\Mannequin->getExtensions()
#3 /var/www/vendor/lastcall/mannequin-core/bin/mannequin(54): LastCall\Mannequin\Core\Mannequin->boot()
#4 {main}
  thrown in /var/www/vendor/lastcall/mannequin-core/Mannequin.php on line 100

Bubble Update

Button sizes in hero area are off (Border style also seems slightly off)

Current
Border seems to bright and lines are too long

Design

Height: 61px
width: 291px
border-color: #7E92A5;
Unsure of border style

Improved font style in "Introduction Section" (Below hero area).

Invision: https://projects.invisionapp.com/d/main#/console/11613483/245220583/preview

Use "description", "group" instead of "_description", "_group" in metadata

This will affect the YamlParser. Currently, any key prefixed with "_" is parsed into component metadata. We want to keep this, but we also want unknown, unprefixed keys like "description" and "group" to be parsed into metadata. This will let us write YAML without needing an underscore for description and group. Docs also need to be updated.

Allow configurable stylesheet to be used for UI

As a developer, I would like to be able to override some of Mannequin's UI branding to personalize my snapshots. I want to be able to configure this through .mannequin.php.

Add icons to buttons.

We need to find these three icons for buttons on the homepage. Screenshot of what they need to look like below. We are going to use an icon font to get them. http://fontello.com/
For now let's just download the config file for them. That way if we need to add more icons it will be super easy.

Footer divider should be browser width

Hero Layout

originally wanted first layout. @rbayliss suggested we use an easier alternative. Colin pushed back so checking to see what @jaymejohnson thinks.

Expand About product section to screen-width. Replace Component Illustration and fix layout.

New Illustration

Works like the image on this site: http://perfecthq.com/

Button dimensions are off.

We're using "shift+cmd+4" instead of the values on invision inspect. Apologies.

Design corrections

Height: it's 64px on live (according to shift+cmd+4) while on the invision it's 50px.
Width: it's 300px on live (according to shift+cmd+4) while on the invision it's 234px.

Buttons off center on thin

Drupal/Composer workflow

Is there a way to use Mannequin with a composer workflow that has Drupal root inside a subfolder of the project root? If I put the .mannequin.php file in the project root I get:

PHP Fatal error:  Uncaught InvalidArgumentException: Directory /Users/josh/Sites/SITE_NAME does not look like a Drupal installation in /Users/josh/Sites/sod/vendor/lastcall/mannequin-drupal/Driver/DrupalTwigDriver.php:43

If I put it in Drupal root I get a bunch of:

[error] Twig error in : Unable to find template "" (looked into: .).

as well as

[critical] RuntimeException: Duplicate component detected: d41d8cd98f00b204e9800998ecf8427e (uncaught exception) at /Users/josh/Sites/sod/vendor/lastcall/mannequin-core/Component/ComponentCollection.php line 50

but only when I refresh the page the first time.

Max-width for Extension CTAs should be 312px

Overlapping line items

On https://mannequin.io/extensions/drupal the list items with < code > look bad because they overlap.

Hero Areas Buttons are the only buttons that have fade in transition.

All buttons should have transitions too.

Demo is broken

Hello guys,
I noticed some errors trying the demo you provided in the demo directory.
There is a missing semicolor i fixed in #65, but still, after this fix the demo does not work, the command ./vendor/bin/mannequin gives these errors:

PHP Fatal error:  Uncaught Error: Cannot call constructor in /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-twig/TwigExtension.php:68
Stack trace:
#0 /Users/mrosati/Downloads/Mannequin-master/demo/.mannequin.php(31): LastCall\Mannequin\Twig\TwigExtension->__construct(Array)
#1 /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-core/Mannequin.php(108): require('/Users/mrosati/...')
#2 /Users/mrosati/Downloads/Mannequin-master/demo/vendor/pimple/pimple/src/Pimple/Container.php(118): LastCall\Mannequin\Core\Mannequin->LastCall\Mannequin\Core\{closure}(Object(LastCall\Mannequin\Core\Mannequin))
#3 /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-core/Mannequin.php(300): Pimple\Container->offsetGet('config')
#4 /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-core/Mannequin.php(235): LastCall\Mannequin\Core\Mannequin->getExtensions()
#5 /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-core/bin/mannequin(47): LastC in /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-twig/TwigExtension.php on line 68

Fatal error: Uncaught Error: Cannot call constructor in /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-twig/TwigExtension.php on line 68

Error: Cannot call constructor in /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-twig/TwigExtension.php on line 68

Call Stack:
    0.0016     364120   1. {main}() /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-core/bin/mannequin:0
    0.0153    1702368   2. LastCall\Mannequin\Core\Mannequin->boot() /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-core/bin/mannequin:47
    0.0169    1796040   3. LastCall\Mannequin\Core\Mannequin->getExtensions() /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-core/Mannequin.php:235
    0.0169    1796040   4. LastCall\Mannequin\Core\Mannequin->offsetGet(???) /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-core/Mannequin.php:300
    0.0169    1796040   5. LastCall\Mannequin\Core\Mannequin->LastCall\Mannequin\Core\{closure}(???) /Users/mrosati/Downloads/Mannequin-master/demo/vendor/pimple/pimple/src/Pimple/Container.php:118
    0.0170    1804352   6. require('/Users/mrosati/Downloads/Mannequin-master/demo/.mannequin.php') /Users/mrosati/Downloads/Mannequin-master/demo/vendor/lastcall/mannequin-core/Mannequin.php:108
    0.0182    1912640   7. LastCall\Mannequin\Twig\TwigExtension->__construct(???) /Users/mrosati/Downloads/Mannequin-master/demo/.mannequin.php:31

Guarded Twig metadata in blocks cannot be used in a child template

Twig metadata that is kept in blocks, eg:

{% if _component %}{% block componentinfo %}
name: Foo
...
{%endblock %}{% endif %}
The rest of the template.

This metadata will cause parse errors if the template inherits from another template (Node "1" does not exist for Node "Twig_Node"). Because of this, I don't think we are going to be able to use inline blocks to contain that Twig metadata. Instead, we could parse the metadata out of a special comment, eg:

{# @Component
name: Foo
...
#}
The rest of the template.

I actually like this solution better anyway, since it will be completely ignored when the template is rendered outside of Mannequin.

This is a high priority fix because it affects our primary use case (Drupal), and will be a fairly common occurrence. I'm not sure how we got through the initial release without finding this.

Switching to rounded button style to better match bubble theme

Example: https://invis.io/XACPZRCDZ#/257679773_Homepage_-_Wide_Centered

No image in Intro section on thin

Quick Links Buttons

Last row of quick links should be attached to bottom of screen past browser height 768px.

Anything less than 768px should make the quick links scrollable.

Subtree Split/Publish Packages/CI setup

Before we go live, we need to figure out how to do a subtree split of this repository into the following components:

• lastcallmedia/mannequin (PHP /core dir published on Packagist)
• lastcallmedia/mannequin-twig (PHP /twig dir published on Packagist)
• lastcallmedia/mannequin-html (PHP /html dir published on Packagist)
• mannequin-ui (JS published on npm registry)

The CI build needs to manage the following things:

• Run tests
• A push to this repository should trigger a push to the others
• A tag push to this repository should trigger a tag push to the others
• Tags should trigger a publish to Packagist/NPM

Write Documentation for main package

README.md should include:

• What it is
• Installation/Setup Instructions
• Config file documentation
• Development procedure

Numbers 1,2 and 3 for steps in "Get Started" should overlap top-side edge of background.

The step numbers should sit slightly above the top edge of their boxes like below.

Write Documentation for Twig Package

README.md in Twig package should include:

• How to install the package
• How to use it in the mannequin config file.
• Various configuration options

Mannequin version cannot be determined from the command line

Need to fix this to help people report bugs effectively:

root@470e8fdde572:/var/www# vendor/bin/mannequin 
Mannequin 0.0.0

Documentation for UI

README.md for ui package should include:

• What it is
• Development process

Branding in Header and Footer break at widths smaller than around 325px

The fix for this is to revise the sizing at the small breakpoint.
Related to this issue is overflow that is causing a horizontal scrolling into whitespace on mobile as well.

Installation help

I’m probably doing something wrong in installation, any help appreciated.
Steps to reproduce:

1. I setup a fresh local Drupal 8.4.0 using composer, with folder structure:
   my_manaquin
   —vendor
   —web
   …etc.

2. I ran composer require lastcall/mannequin-drupal from within my_mannequin

3. I created a .mannequin.php file per this: https://mannequin.io/extensions/drupal/#usage and changed ->in(__DIR__.'/themes/mytheme') to ->in(__DIR__.'/themes/custom/myclassy’)

4. I ran vendor/bin/mannequin start (from within my_manaquin) - it did not return anything.

I am stuck at this point: “From the /ui directory, run: yarn start.” I cannot find a /ui directory. I searched my project and found only this: /my_mannequin/vendor/lastcall/mannequin-core/Ui

Is that the correct /ui ?
Thanks,
Rick

PHP 7.1.1
Composer version 1.5.1

Explore cta on homepage goes to 404

Add cache clear command

As a developer, I want to be able to clear Mannequin's various caches using a console command.

Change Font color of "Introduction" text to "#919DA8" to meet Accessibility Standards

Contrast Ration : http://leaverou.github.io/contrast-ratio/#%23919DA8-on-%23181D22