thamas

How do you guys keep changes to ./config/config.yml if you’re pulling down the patternlab composer project?

4 replies philw_ [1 hour ago] I’ve added this to my pattern_lab.sh script:

philw_ [1 hour ago]

thamas

jsheffers [4:15 PM] I copied the code emulsify uses for the menus, but I’m having trouble with the actual link class. It’s pulling the base class from the item instead of adding __link

Obviously that should be __link (edited)

{% embed '@atoms/lists/_list-item.twig' with {
  "list_item_label": item_label,
  "li_base_class": item_base_class|default(menu_class ~ '__item'),
  "li_modifiers": item_modifiers,
  "li_blockname": item_blockname,

thamas

bjlewis2 [Oct 12th at 7:24 PM] Anybody ever successfully documented a pattern variation in PL? I have:

menu-block.twig
menu-block.yml
menu-block.md <-- works
menu-block~footer.yml <-- works
menu-block~footer.md <-- doesn't work :(

thamas

philw_ [Yesterday at 3:02 PM] Has anyone run into an Emulsify issue with adding libraries that contain external JS files? components/_twig-components/functions/pl_attach-library.function.php tries to attach all the library files as async script tags, but it prepends the src value with a /, so external srcs are broken, here’s an example:

<script async="" src="/https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

31 replies danny_englander [23 hours ago] There's a chance it might be related to this? drupal-pattern-lab/attach-library-twig-extension#1 GitHub

thamas

philw_ [Today at 5:08 PM] I’m trying to use a Drupal behaviour in Emulsify, I’ve got Emulsify correctly loading domready and drupal.js in my _01-foot.twig file, but my behaviour file is erroring with a ‘Uncaught ReferenceError: Drupal is not defined’ error, presumably because the component’s JS is being output before the script tag for drupal.js is output in the footer. Has anyone worked around this before? (edited)

16 replies jsheffers [21 hours ago] I’m doing the same thing and I don’t have any issues, and I have components using Drupal behaviors (edited)

philw_ [21 hours ago]

thamas

fafnirical [Oct 9th at 10:42 PM] I generally think of Drupal view modes ("teaser", "full page", "search result", etc.) as purely contextual, telling the components what context the display context is for the component. Layout is partially derived from that, but I think of it as more a filter on what gets displayed

For the question of how to display something (in the contexts where it's displayed), I'd generally use a non-rendered field on the component, usually a Boolean or List field (edited)

24 replies jsheffers [1 day ago] Meaning a select list that has options “Image left” “Image right”

thamas

philw_ [Oct 8th at 6:38 PM] I’m using https://www.npmjs.com/package/sass-export to extract this data (along with colours) from our Sass, write it to a JSON file in the PL _data directory, and then read it from some Twig files in PL - seems a decent workflow for demonstrating values stored in Sass/SCSS npm sass-export Exports Sass files to Json format, able to manage sections with annotations in comments.

18 replies danny_englander [3 days ago]

thamas

bjlewis2 [Oct 8th at 6:22 PM] My first thought was “We could easily add something like that to Emulsify”, but actually we use a lot of component-specific breakpoints as opposed to “global” breakpoints. So a featured event card might adjust at points that don’t line up with the “global” breaks so that it looks good at all sizes, and isn’t restricted to “it looks too stretched out here, but the next breakpoint isn’t for another 235px…” So, I’m not sure it’d actually get much use

9 replies jsheffers [1 day ago] Hey Brian, just curious. How are you handling component specific breakpoints?

bjlewis2 [1 day ago]

thamas

danny_englander [Oct 8th at 3:39 PM] Hey all, I have a question about JS in Emulsify. I see that in accordion-item.js for example, there is some commented text, UNCOMMENT IF DRUPAL and then below, REMOVE IF DRUPAL. I understand the notion of when attaching JS in drupal, since D6 or 7, you've had to use something like

Drupal.behaviors.accordion = {
//   attach: function (context, settings) {

. I am just trying to understand this in an Emulsify context. For example this script is located in /web/themes/custom/emulsify/components/_patterns/02-molecules/accordion-item/accordion-item.js So in this context, it's not Drupal, it's Pattern Lab so it makes sense with regard to the parts commented out. But what about when actually mapping this component over to Drupal at one point, what would one do with this script? Or does it get taken care of with aggregation on production but still only load when needed if an accordion is present? I do see in accrodion-item,twig on the Pattern Lab side `{{ attach

thamas

trzalica [Oct 5th at 12:37 AM] Hi all! I wrote an article about how I use Responsive images in PL/Drupal... Maybe it will be helpful to some of you who are using/planing to use Pattern Lab in your projects. mosaicwebsites.com/blog/responsive-images-emulsify-pl-theme-easy-way

64 replies danny_englander [6 days ago] @trzalica Excellent. So if I understand this correctly, your first block of code (which has things like "responsive_image_base_class": your_component_variable_name_image_base_class,) that defines everything would appear in a Pattern Lab Twig file, say card.twig for example. Then your second block of code i.e. {{ content.field_machine_name_of_responsive_image_field[0] }} would be part of an embed on the Drupal side in a drupal twig template?