massgov / mayflower-patternlab Goto Github PK

As I'm going through v4 updates, I spotted this.

Hoping to start a conversation about decoupling drupal from the pattern lab style guide. I see two opportunities here:

1. project scaffolding: this current scaffolding seems to imply that our style guide will ship along with / inside of a drupal theme, which is not something that we want (as our goal is to use the style guide twig/css/js assets across the enterprise in other applications, also, perhaps pattern lab will outlive drupal)
2. pattern lab edition choice: I believe on our phone call last Thursday (with Velir-Palantir-MassIT) I heard that the drupal standard edition of pattern lab was going to be used. I wanted to suggest that we instead use the twig standard edition. This will ensure that pattern lab knows nothing about drupal (either in its js or twig filters/components). We don't want pattern lab to be making any environment assumptions.

I think the coupling will come in on the drupal theme's end, using its twig templates as a Presenter (as in MVP architecture) routing the drupal data model through to the pattern lab view twig template via embeds/includes/etc.

What do people think?

Also - FYI - here are some initiatives that we've been following in the drupal / components community:

• Wim’s patch: register components with Drupal
• John Albin’s Component Libraries modules: register namespaces
• D8 version of Zen
• Micah Godbolt's Pattern Builder module
• Drupal Twig Slack: A great place to learn from the above folks in the community - they have weekly wednesday meetings!

Please explain?

http://mayflower.digital.mass.gov/?p=all
http://mayflower.digital.mass.gov/?p=viewall-organisms-all
http://mayflower.digital.mass.gov/?p=viewall-templates-all
...
seems like a recent issue (I have only noticed it as of yesterday)

Jira ticket: https://jira.state.ma.us/browse/DP-4432

yesterday, I was trying to troubleshoot a pr but was having a problem updating the pattern locally. Here are my steps:

1. git pull dev
2. git checkout feature-branch
3. cd styleguide
4. gulp
5. edit source/_patterns/03-organisms/by-template/emergency-alerts.twig
6. Add random html to test editing the right file, <h2>Hello</h2> - save
7. Go to http://localhost:3000/?p=organisms-emergency-alerts and confirm Hello is there.

This failed for me several times. At first I was concerned that gulp wasn't listening to file changes but we confirmed that it was. Also, there was a possibility I was editing the wrong file but I grep'd the _patterns directory and there were no results suggesting that. Finally, I got @isaacchansky to test locally, and when he did the above steps, PL worked as expected.

What's the best way to handle this?

Sets the value of $ locally in the function scope, that way we use $

jQuery(function($) {
......
//# sourceMappingURL=index-generated.js.map
});

So we can get rid of TypeErrors and use your JS directly. There may be a better/different way to do this with your compression/aggregation tools. Please investigate and implement.

Please remove hardcoded paths. Add a JS global "directory" setting variable for paths. In this instance, use it for '/assets/'.

For example:
richText.js - fetch('/assets/images/svg-sprite/external-link.svg'

$.ajax({ url : '/assets/js/templates/' + name + '.html',

This should be in a separate file, maybe called 'settings.js' and not aggregated in.

Something like this

• create a new file called env.js
• add var themePath = '/assets';
• update code like so: fetch(themePath + "/images/svg-sprite/external-link.svg"
• include separately from index-generated.js and vendor-generated.js

Let's make Mayflower more consistent with our other Mass.gov projects by not versioning vendor/. We'll want to check circle, phing, and bash scripts to see if / when we should be running composer install prior to builds.

This will ease developer / reviewer processes by removing diff noise and also make dependency updates more efficient, as mentioned in #519

This "body" field needs to account for:

• description text

• and any links added

• So if we have just a description, this is styled one way

• So if we have a description and a few links, this is styled the same but includes the links.

Also with links, currently under "log in to..." shouldn't this account for two links?

Like this (in the aside.sidebar):

<div class="ma__contact-group">.....</div>
<div class="ma__contact-group">.....</div>
<div class="ma__contact-group ma__contact-us__extra js-accordion-content">.....</div>
<div class="ma__contact-group">.....</div>
<div class="ma__contact-group">.....</div>

-- and I need molecules/contact-group.twig to support a textarea address. In this instance we are using a simple textarea for the address.

251 Causeway Street
Suite 900
Boston, MA 02114-2104

If we don't have a link, we still see an js-clickable-link arrow.

We can't use paragraph attributes. Thoughts? Can we do something like this?

Version 5.12.2

Issue: In the readme file of the @atoms/input-text --> missing the prop 'hiddenLabel' in the json structure.

As you can see here, for search input, I need to be able to specify 'name' : 'q'.

'name': 'q',

      'inputText': {
        'labelText': 'Search',
        'required': false,
        'id': 'GUID138490237',
        'name': 'q',
        'placeholder': 'Search...'
      }

Does that make sense?

{%
set searchBanner = {
  'bgWide': search800x400_image_url,
  'bgNarrow': file_url(content.field_image['#items'].entity.uri.value),
  'imageName': content.field_name|field_value,
  'imageAuthor': content.field_caption|field_value,
  'form': {
    'path': '@molecules/search-banner-form.twig',
    'content': {
      'action': '/search',
      'buttonText': 'Search',
      'inputText': {
        'labelText': 'Search',
        'required': false,
        'id': 'GUID138490237',
        'placeholder': 'Search...'
      }
    }
  },
  'title': content.field_title|field_value ? content.field_title|field_value : title,
  'intro': content.field_description|field_value ? content.field_description|field_value : intro,
  'helpfulLinks': {
    'columns': 'true',
    'compHeading': {
      'title': content.field_link['#title'],
      'sub': 'true',
      'color': 'yellow',
      'centered': 'true'
    },
    'items': items
  }
}
%}
{% include '@organisms/by-author/search-banner.twig' %}

The "Minor Button" atom doesn't follow either variable names or internal/external styling patterns used nearly everywhere else.

See: https://github.com/massgov/mayflower/blob/dev/styleguide/source/_patterns/01-atoms/01-buttons/button-link2-sm.twig

I'd ask that this atom be refactored to use the variables type (for internal/external), href (instead of link) and text should remain unchanged.

I'm asking b/c this is different from our bgWide/bgNarrow approach.

Working on a linkList and noticed no href/url rendering.
Thoughts?

We need to be able to fit multiple Hours/Time Frame under sections. Maybe this is ok looking?

A table was added to the page via the Rich text editor and it was rendered unstyled.
https://pilot.mass.gov/guides/test-guide-page-lgm

Issue resolves around a type in the css targeting .rich-text table instead of .ma__rich-text table

@avrilpearl needs to update this

@molecules/illustrated-link

• the whole illustrated link card is not clickable - the a tag should be moved to the outside so that the whole card is clickable