From d8d652e222614830a1aa467e7af77a67648f8645 Mon Sep 17 00:00:00 2001 From: Jeff Wax Date: Wed, 3 Jun 2020 15:46:24 -0700 Subject: [PATCH 1/4] Issue/827 10.8.0 drupal docs (#828) * Move drupal theme to particle folder. * Issue 827: Add readme for drupal app installation. * Issue 827: remove extra newline. * Issue 827: update paths in particle theme. --- apps/drupal/README.md | 27 ++++++++++++++++++ .../config/install/particle.settings.yml | 0 .../block.block.particle_breadcrumbs.yml | 0 .../optional/block.block.particle_content.yml | 0 .../optional/block.block.particle_footer.yml | 0 .../optional/block.block.particle_help.yml | 0 .../block.block.particle_local_actions.yml | 0 .../block.block.particle_local_tasks.yml | 0 .../block.block.particle_mainnavigation.yml | 0 .../block.block.particle_messages.yml | 0 .../block.block.particle_page_title.yml | 0 .../optional/block.block.particle_powered.yml | 0 .../block.block.particle_searchform.yml | 0 .../block.block.particle_sitebranding.yml | 0 .../block.block.particle_useraccountmenu.yml | 0 .../block.block.particle_views_search.yml | 0 .../{ => particle}/includes/admin.theme.inc | 0 .../{ => particle}/includes/block.theme.inc | 0 .../{ => particle}/includes/content.theme.inc | 0 .../{ => particle}/includes/field.theme.inc | 0 .../{ => particle}/includes/form.theme.inc | 0 .../{ => particle}/includes/layout.theme.inc | 0 .../{ => particle}/includes/media.theme.inc | 0 .../{ => particle}/includes/misc.theme.inc | 0 .../includes/navigation.theme.inc | 0 .../{ => particle}/includes/node.theme.inc | 0 .../includes/suggestions.theme.inc | 0 .../{ => particle}/includes/user.theme.inc | 0 .../{ => particle}/includes/views.theme.inc | 0 apps/drupal/theme/{ => particle}/logo.svg | 0 .../{ => particle}/particle.breakpoints.yml | 0 .../theme/{ => particle}/particle.info.yml | 6 ++-- .../theme/{ => particle}/particle.layouts.yml | 0 .../{ => particle}/particle.libraries.yml | 6 ++-- .../theme/{ => particle}/particle.theme | 0 .../theme/{ => particle}/screenshot.png | Bin .../theme/{ => particle}/src/Particle.php | 0 .../block--system-branding-block.html.twig | 0 .../{ => particle}/templates/content/.gitkeep | 0 .../templates/field/image--article.html.twig | 0 .../templates/form/container.html.twig | 0 .../form/form--particle-search.html.twig | 0 .../templates/layout/layout.html.twig | 0 .../templates/layout/page.html.twig | 0 .../particle-fourcol.html.twig | 0 .../particle-onecol/particle-onecol.html.twig | 0 .../particle-threecol.html.twig | 0 .../particle-twocol/particle-twocol.html.twig | 0 .../misc/components--error-message.html.twig | 0 .../templates/misc/status-messages.html.twig | 0 .../templates/navigation/breadcrumb.html.twig | 0 .../navigation/menu-local-task.html.twig | 0 .../navigation/menu-local-tasks.html.twig | 0 ...iews-view-unformatted--frontpage.html.twig | 0 54 files changed, 33 insertions(+), 6 deletions(-) create mode 100644 apps/drupal/README.md rename apps/drupal/theme/{ => particle}/config/install/particle.settings.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_breadcrumbs.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_content.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_footer.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_help.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_local_actions.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_local_tasks.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_mainnavigation.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_messages.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_page_title.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_powered.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_searchform.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_sitebranding.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_useraccountmenu.yml (100%) rename apps/drupal/theme/{ => particle}/config/optional/block.block.particle_views_search.yml (100%) rename apps/drupal/theme/{ => particle}/includes/admin.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/block.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/content.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/field.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/form.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/layout.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/media.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/misc.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/navigation.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/node.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/suggestions.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/user.theme.inc (100%) rename apps/drupal/theme/{ => particle}/includes/views.theme.inc (100%) rename apps/drupal/theme/{ => particle}/logo.svg (100%) rename apps/drupal/theme/{ => particle}/particle.breakpoints.yml (100%) rename apps/drupal/theme/{ => particle}/particle.info.yml (79%) rename apps/drupal/theme/{ => particle}/particle.layouts.yml (100%) rename apps/drupal/theme/{ => particle}/particle.libraries.yml (79%) rename apps/drupal/theme/{ => particle}/particle.theme (100%) rename apps/drupal/theme/{ => particle}/screenshot.png (100%) rename apps/drupal/theme/{ => particle}/src/Particle.php (100%) rename apps/drupal/theme/{ => particle}/templates/block/block--system-branding-block.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/content/.gitkeep (100%) rename apps/drupal/theme/{ => particle}/templates/field/image--article.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/form/container.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/form/form--particle-search.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/layout/layout.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/layout/page.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/layout/particle-fourcol/particle-fourcol.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/layout/particle-onecol/particle-onecol.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/layout/particle-threecol/particle-threecol.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/layout/particle-twocol/particle-twocol.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/misc/components--error-message.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/misc/status-messages.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/navigation/breadcrumb.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/navigation/menu-local-task.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/navigation/menu-local-tasks.html.twig (100%) rename apps/drupal/theme/{ => particle}/templates/views/views-view-unformatted--frontpage.html.twig (100%) diff --git a/apps/drupal/README.md b/apps/drupal/README.md new file mode 100644 index 0000000000..dc8ea6d399 --- /dev/null +++ b/apps/drupal/README.md @@ -0,0 +1,27 @@ +# Drupal Theming with Particle + +**Note:** This readme assumes Particle is installed at the root of your Drupal +project and not within Drupal's theme structure as in previous versions of +Particle. Check [the Particle docs](https://phase2.gitbook.io/frontend/) for +assistance if your configuration does not match. + +## Setup + +This folder contains two additional directories: `module` and `theme`. Due to +the process by which Drupal loads services, several Particle-specific functions +are expected to exist within a module separate from the theme. This module can +then specify various requirements and dependencies, which Drupal 8 themes still +cannot declare. + +To prepare your Drupal installation to use Particle: + +1. Move the contents of the `module` folder to your Drupal `modules/contrib` directory. +1. Move the contents of the `theme` folder to your Drupal `theme/contrib` directory. +1. From the main root of the Particle application, open `particle.root.config.js` +1. Find the line that starts with `DRUPAL_DIST` +1. Update the `DRUPAL_DIST` line so that the path resolves to the theme created in step 2. + For example, if the Drupal installation is in a folder named `web`, your line might look like this: + `DRUPAL_DIST: path.resolve('../../web/themes/custom/particle/dist/'),` +1. Ensure the module is enabled: `drush en particle_theme`. +1. Ensure the theme is enabled: `drush theme:enable particle`. +1. Ensure the theme is set: `drush config-set system.theme default THEME_MACHINE_NAME`. diff --git a/apps/drupal/theme/config/install/particle.settings.yml b/apps/drupal/theme/particle/config/install/particle.settings.yml similarity index 100% rename from apps/drupal/theme/config/install/particle.settings.yml rename to apps/drupal/theme/particle/config/install/particle.settings.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_breadcrumbs.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_breadcrumbs.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_breadcrumbs.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_breadcrumbs.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_content.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_content.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_content.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_content.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_footer.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_footer.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_footer.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_footer.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_help.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_help.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_help.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_help.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_local_actions.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_local_actions.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_local_actions.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_local_actions.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_local_tasks.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_local_tasks.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_local_tasks.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_local_tasks.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_mainnavigation.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_mainnavigation.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_mainnavigation.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_mainnavigation.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_messages.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_messages.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_messages.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_messages.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_page_title.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_page_title.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_page_title.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_page_title.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_powered.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_powered.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_powered.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_powered.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_searchform.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_searchform.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_searchform.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_searchform.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_sitebranding.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_sitebranding.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_sitebranding.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_sitebranding.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_useraccountmenu.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_useraccountmenu.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_useraccountmenu.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_useraccountmenu.yml diff --git a/apps/drupal/theme/config/optional/block.block.particle_views_search.yml b/apps/drupal/theme/particle/config/optional/block.block.particle_views_search.yml similarity index 100% rename from apps/drupal/theme/config/optional/block.block.particle_views_search.yml rename to apps/drupal/theme/particle/config/optional/block.block.particle_views_search.yml diff --git a/apps/drupal/theme/includes/admin.theme.inc b/apps/drupal/theme/particle/includes/admin.theme.inc similarity index 100% rename from apps/drupal/theme/includes/admin.theme.inc rename to apps/drupal/theme/particle/includes/admin.theme.inc diff --git a/apps/drupal/theme/includes/block.theme.inc b/apps/drupal/theme/particle/includes/block.theme.inc similarity index 100% rename from apps/drupal/theme/includes/block.theme.inc rename to apps/drupal/theme/particle/includes/block.theme.inc diff --git a/apps/drupal/theme/includes/content.theme.inc b/apps/drupal/theme/particle/includes/content.theme.inc similarity index 100% rename from apps/drupal/theme/includes/content.theme.inc rename to apps/drupal/theme/particle/includes/content.theme.inc diff --git a/apps/drupal/theme/includes/field.theme.inc b/apps/drupal/theme/particle/includes/field.theme.inc similarity index 100% rename from apps/drupal/theme/includes/field.theme.inc rename to apps/drupal/theme/particle/includes/field.theme.inc diff --git a/apps/drupal/theme/includes/form.theme.inc b/apps/drupal/theme/particle/includes/form.theme.inc similarity index 100% rename from apps/drupal/theme/includes/form.theme.inc rename to apps/drupal/theme/particle/includes/form.theme.inc diff --git a/apps/drupal/theme/includes/layout.theme.inc b/apps/drupal/theme/particle/includes/layout.theme.inc similarity index 100% rename from apps/drupal/theme/includes/layout.theme.inc rename to apps/drupal/theme/particle/includes/layout.theme.inc diff --git a/apps/drupal/theme/includes/media.theme.inc b/apps/drupal/theme/particle/includes/media.theme.inc similarity index 100% rename from apps/drupal/theme/includes/media.theme.inc rename to apps/drupal/theme/particle/includes/media.theme.inc diff --git a/apps/drupal/theme/includes/misc.theme.inc b/apps/drupal/theme/particle/includes/misc.theme.inc similarity index 100% rename from apps/drupal/theme/includes/misc.theme.inc rename to apps/drupal/theme/particle/includes/misc.theme.inc diff --git a/apps/drupal/theme/includes/navigation.theme.inc b/apps/drupal/theme/particle/includes/navigation.theme.inc similarity index 100% rename from apps/drupal/theme/includes/navigation.theme.inc rename to apps/drupal/theme/particle/includes/navigation.theme.inc diff --git a/apps/drupal/theme/includes/node.theme.inc b/apps/drupal/theme/particle/includes/node.theme.inc similarity index 100% rename from apps/drupal/theme/includes/node.theme.inc rename to apps/drupal/theme/particle/includes/node.theme.inc diff --git a/apps/drupal/theme/includes/suggestions.theme.inc b/apps/drupal/theme/particle/includes/suggestions.theme.inc similarity index 100% rename from apps/drupal/theme/includes/suggestions.theme.inc rename to apps/drupal/theme/particle/includes/suggestions.theme.inc diff --git a/apps/drupal/theme/includes/user.theme.inc b/apps/drupal/theme/particle/includes/user.theme.inc similarity index 100% rename from apps/drupal/theme/includes/user.theme.inc rename to apps/drupal/theme/particle/includes/user.theme.inc diff --git a/apps/drupal/theme/includes/views.theme.inc b/apps/drupal/theme/particle/includes/views.theme.inc similarity index 100% rename from apps/drupal/theme/includes/views.theme.inc rename to apps/drupal/theme/particle/includes/views.theme.inc diff --git a/apps/drupal/theme/logo.svg b/apps/drupal/theme/particle/logo.svg similarity index 100% rename from apps/drupal/theme/logo.svg rename to apps/drupal/theme/particle/logo.svg diff --git a/apps/drupal/theme/particle.breakpoints.yml b/apps/drupal/theme/particle/particle.breakpoints.yml similarity index 100% rename from apps/drupal/theme/particle.breakpoints.yml rename to apps/drupal/theme/particle/particle.breakpoints.yml diff --git a/apps/drupal/theme/particle.info.yml b/apps/drupal/theme/particle/particle.info.yml similarity index 79% rename from apps/drupal/theme/particle.info.yml rename to apps/drupal/theme/particle/particle.info.yml index cd02f0d17b..10ff6cecf7 100644 --- a/apps/drupal/theme/particle.info.yml +++ b/apps/drupal/theme/particle/particle.info.yml @@ -27,13 +27,13 @@ component-libraries: paths: [] atoms: paths: - - ../../../dist/app-drupal/assets/atomic/_patterns/01-atoms + - /dist/app-drupal/assets/atomic/_patterns/01-atoms molecules: paths: - - ../../../dist/app-drupal/assets/atomic/_patterns/02-molecules + - /dist/app-drupal/assets/atomic/_patterns/02-molecules organisms: paths: - - ../../../dist/app-drupal/assets/atomic/_patterns/03-organisms + - /dist/app-drupal/assets/atomic/_patterns/03-organisms templates: paths: [] pages: diff --git a/apps/drupal/theme/particle.layouts.yml b/apps/drupal/theme/particle/particle.layouts.yml similarity index 100% rename from apps/drupal/theme/particle.layouts.yml rename to apps/drupal/theme/particle/particle.layouts.yml diff --git a/apps/drupal/theme/particle.libraries.yml b/apps/drupal/theme/particle/particle.libraries.yml similarity index 79% rename from apps/drupal/theme/particle.libraries.yml rename to apps/drupal/theme/particle/particle.libraries.yml index 0fa836c203..b54c467d00 100644 --- a/apps/drupal/theme/particle.libraries.yml +++ b/apps/drupal/theme/particle/particle.libraries.yml @@ -4,10 +4,10 @@ core: css: theme: - ../../../dist/app-drupal/assets/app.styles.css: + dist/app-drupal/assets/app.styles.css: minified: true js: - ../../../dist/app-drupal/assets/app.js: + dist/app-drupal/assets/app.js: preprocess: false # See all in Drupal's `core/core.libraries.yml` dependencies: @@ -18,6 +18,6 @@ core: # See `libraries-override` in particle.info.yml jquery: js: - ../../../dist/app-drupal/assets/drupal-jquery.js: + dist/app-drupal/assets/drupal-jquery.js: preprocess: false weight: -20 diff --git a/apps/drupal/theme/particle.theme b/apps/drupal/theme/particle/particle.theme similarity index 100% rename from apps/drupal/theme/particle.theme rename to apps/drupal/theme/particle/particle.theme diff --git a/apps/drupal/theme/screenshot.png b/apps/drupal/theme/particle/screenshot.png similarity index 100% rename from apps/drupal/theme/screenshot.png rename to apps/drupal/theme/particle/screenshot.png diff --git a/apps/drupal/theme/src/Particle.php b/apps/drupal/theme/particle/src/Particle.php similarity index 100% rename from apps/drupal/theme/src/Particle.php rename to apps/drupal/theme/particle/src/Particle.php diff --git a/apps/drupal/theme/templates/block/block--system-branding-block.html.twig b/apps/drupal/theme/particle/templates/block/block--system-branding-block.html.twig similarity index 100% rename from apps/drupal/theme/templates/block/block--system-branding-block.html.twig rename to apps/drupal/theme/particle/templates/block/block--system-branding-block.html.twig diff --git a/apps/drupal/theme/templates/content/.gitkeep b/apps/drupal/theme/particle/templates/content/.gitkeep similarity index 100% rename from apps/drupal/theme/templates/content/.gitkeep rename to apps/drupal/theme/particle/templates/content/.gitkeep diff --git a/apps/drupal/theme/templates/field/image--article.html.twig b/apps/drupal/theme/particle/templates/field/image--article.html.twig similarity index 100% rename from apps/drupal/theme/templates/field/image--article.html.twig rename to apps/drupal/theme/particle/templates/field/image--article.html.twig diff --git a/apps/drupal/theme/templates/form/container.html.twig b/apps/drupal/theme/particle/templates/form/container.html.twig similarity index 100% rename from apps/drupal/theme/templates/form/container.html.twig rename to apps/drupal/theme/particle/templates/form/container.html.twig diff --git a/apps/drupal/theme/templates/form/form--particle-search.html.twig b/apps/drupal/theme/particle/templates/form/form--particle-search.html.twig similarity index 100% rename from apps/drupal/theme/templates/form/form--particle-search.html.twig rename to apps/drupal/theme/particle/templates/form/form--particle-search.html.twig diff --git a/apps/drupal/theme/templates/layout/layout.html.twig b/apps/drupal/theme/particle/templates/layout/layout.html.twig similarity index 100% rename from apps/drupal/theme/templates/layout/layout.html.twig rename to apps/drupal/theme/particle/templates/layout/layout.html.twig diff --git a/apps/drupal/theme/templates/layout/page.html.twig b/apps/drupal/theme/particle/templates/layout/page.html.twig similarity index 100% rename from apps/drupal/theme/templates/layout/page.html.twig rename to apps/drupal/theme/particle/templates/layout/page.html.twig diff --git a/apps/drupal/theme/templates/layout/particle-fourcol/particle-fourcol.html.twig b/apps/drupal/theme/particle/templates/layout/particle-fourcol/particle-fourcol.html.twig similarity index 100% rename from apps/drupal/theme/templates/layout/particle-fourcol/particle-fourcol.html.twig rename to apps/drupal/theme/particle/templates/layout/particle-fourcol/particle-fourcol.html.twig diff --git a/apps/drupal/theme/templates/layout/particle-onecol/particle-onecol.html.twig b/apps/drupal/theme/particle/templates/layout/particle-onecol/particle-onecol.html.twig similarity index 100% rename from apps/drupal/theme/templates/layout/particle-onecol/particle-onecol.html.twig rename to apps/drupal/theme/particle/templates/layout/particle-onecol/particle-onecol.html.twig diff --git a/apps/drupal/theme/templates/layout/particle-threecol/particle-threecol.html.twig b/apps/drupal/theme/particle/templates/layout/particle-threecol/particle-threecol.html.twig similarity index 100% rename from apps/drupal/theme/templates/layout/particle-threecol/particle-threecol.html.twig rename to apps/drupal/theme/particle/templates/layout/particle-threecol/particle-threecol.html.twig diff --git a/apps/drupal/theme/templates/layout/particle-twocol/particle-twocol.html.twig b/apps/drupal/theme/particle/templates/layout/particle-twocol/particle-twocol.html.twig similarity index 100% rename from apps/drupal/theme/templates/layout/particle-twocol/particle-twocol.html.twig rename to apps/drupal/theme/particle/templates/layout/particle-twocol/particle-twocol.html.twig diff --git a/apps/drupal/theme/templates/misc/components--error-message.html.twig b/apps/drupal/theme/particle/templates/misc/components--error-message.html.twig similarity index 100% rename from apps/drupal/theme/templates/misc/components--error-message.html.twig rename to apps/drupal/theme/particle/templates/misc/components--error-message.html.twig diff --git a/apps/drupal/theme/templates/misc/status-messages.html.twig b/apps/drupal/theme/particle/templates/misc/status-messages.html.twig similarity index 100% rename from apps/drupal/theme/templates/misc/status-messages.html.twig rename to apps/drupal/theme/particle/templates/misc/status-messages.html.twig diff --git a/apps/drupal/theme/templates/navigation/breadcrumb.html.twig b/apps/drupal/theme/particle/templates/navigation/breadcrumb.html.twig similarity index 100% rename from apps/drupal/theme/templates/navigation/breadcrumb.html.twig rename to apps/drupal/theme/particle/templates/navigation/breadcrumb.html.twig diff --git a/apps/drupal/theme/templates/navigation/menu-local-task.html.twig b/apps/drupal/theme/particle/templates/navigation/menu-local-task.html.twig similarity index 100% rename from apps/drupal/theme/templates/navigation/menu-local-task.html.twig rename to apps/drupal/theme/particle/templates/navigation/menu-local-task.html.twig diff --git a/apps/drupal/theme/templates/navigation/menu-local-tasks.html.twig b/apps/drupal/theme/particle/templates/navigation/menu-local-tasks.html.twig similarity index 100% rename from apps/drupal/theme/templates/navigation/menu-local-tasks.html.twig rename to apps/drupal/theme/particle/templates/navigation/menu-local-tasks.html.twig diff --git a/apps/drupal/theme/templates/views/views-view-unformatted--frontpage.html.twig b/apps/drupal/theme/particle/templates/views/views-view-unformatted--frontpage.html.twig similarity index 100% rename from apps/drupal/theme/templates/views/views-view-unformatted--frontpage.html.twig rename to apps/drupal/theme/particle/templates/views/views-view-unformatted--frontpage.html.twig From 57a64ecb5d6a704b8fc42a8bd7088df248ef11ef Mon Sep 17 00:00:00 2001 From: "J. Ryan Conklin" Date: Sun, 7 Jun 2020 15:07:01 -0700 Subject: [PATCH 2/4] TASK :: Revise Drupal + Pattern Lab Directory Structure (#831) * Revise Drupal Theme and App Dirs * Update Module Name * Rename PL App and Path * Remove Node Prefix from Package * Add markdown formatter, format markdown * remove link from readme * Tune up on fmt and pl webpack Co-authored-by: Christopher Bloom --- .github/CODE_OF_CONDUCT.md | 55 +++++++++-------- .github/ISSUE_TEMPLATE/bug_report.md | 34 +++++------ .github/ISSUE_TEMPLATE/feature_request.md | 17 +++--- .github/PULL_REQUEST_TEMPLATE.md | 2 +- README.md | 56 +++++++++++++----- apps/{drupal => drupal-default}/.eslintrc.js | 0 apps/drupal-default/README.md | 50 ++++++++++++++++ .../drupal-jquery.js | 0 apps/{drupal => drupal-default}/index.js | 0 .../particle.app.config.js | 0 .../particle_helper/particle_helper.info.yml | 5 ++ .../particle_helper/particle_helper.module} | 8 +-- .../particle_helper.services.yml | 15 +++++ .../particle_helper}/src/Components/Atoms.php | 2 +- .../src/Components/Molecules.php | 2 +- .../src/ParticleTools/ParticleTools.php | 2 +- .../particle_helper}/src/README.md | 24 ++++---- .../src/TwigExtension/ParticleHelperTwig.php} | 6 +- .../config/install/particle.settings.yml | 0 .../block.block.particle_breadcrumbs.yml | 0 .../optional/block.block.particle_content.yml | 0 .../optional/block.block.particle_footer.yml | 0 .../optional/block.block.particle_help.yml | 0 .../block.block.particle_local_actions.yml | 0 .../block.block.particle_local_tasks.yml | 0 .../block.block.particle_mainnavigation.yml | 0 .../block.block.particle_messages.yml | 0 .../block.block.particle_page_title.yml | 0 .../optional/block.block.particle_powered.yml | 0 .../block.block.particle_searchform.yml | 0 .../block.block.particle_sitebranding.yml | 0 .../block.block.particle_useraccountmenu.yml | 0 .../block.block.particle_views_search.yml | 0 .../particle_theme}/includes/admin.theme.inc | 0 .../particle_theme}/includes/block.theme.inc | 0 .../includes/content.theme.inc | 0 .../particle_theme}/includes/field.theme.inc | 0 .../particle_theme}/includes/form.theme.inc | 0 .../particle_theme}/includes/layout.theme.inc | 0 .../particle_theme}/includes/media.theme.inc | 0 .../particle_theme}/includes/misc.theme.inc | 0 .../includes/navigation.theme.inc | 0 .../particle_theme}/includes/node.theme.inc | 0 .../includes/suggestions.theme.inc | 2 +- .../particle_theme}/includes/user.theme.inc | 0 .../particle_theme}/includes/views.theme.inc | 0 .../particle_theme}/logo.svg | 0 .../particle_theme}/particle.breakpoints.yml | 0 .../particle_theme}/particle.info.yml | 6 +- .../particle_theme}/particle.layouts.yml | 0 .../particle_theme}/particle.libraries.yml | 6 +- .../particle_theme}/particle.theme | 0 .../particle_theme}/screenshot.png | Bin .../particle_theme}/src/Particle.php | 0 .../block--system-branding-block.html.twig | 0 .../templates/content/.gitkeep | 0 .../templates/field/image--article.html.twig | 0 .../templates/form/container.html.twig | 0 .../form/form--particle-search.html.twig | 0 .../templates/layout/layout.html.twig | 0 .../templates/layout/page.html.twig | 0 .../particle-fourcol.html.twig | 0 .../particle-onecol/particle-onecol.html.twig | 0 .../particle-threecol.html.twig | 0 .../particle-twocol/particle-twocol.html.twig | 0 .../misc/components--error-message.html.twig | 0 .../templates/misc/status-messages.html.twig | 0 .../templates/navigation/breadcrumb.html.twig | 0 .../navigation/menu-local-task.html.twig | 0 .../navigation/menu-local-tasks.html.twig | 0 ...iews-view-unformatted--frontpage.html.twig | 0 .../webpack.config.js | 7 ++- apps/drupal/README.md | 27 --------- .../particle_theme/particle_theme.info.yml | 5 -- .../particle_theme.services.yml | 15 ----- apps/{node-pl => pl-default}/.eslintrc.js | 0 .../__tests__/pl.test.js | 0 apps/{node-pl => pl-default}/glob.js | 0 apps/{node-pl => pl-default}/index.js | 0 .../particle.app.config.js | 2 +- .../pattern-lab/.gitignore | 0 .../pattern-lab/_annotations/annotations.json | 0 .../pattern-lab/_data/components.yml | 0 .../pattern-lab/_data/data.yml | 0 .../pattern-lab/_data/imageStyles.yml | 0 .../pattern-lab/_meta/_00-head.mustache | 0 .../pattern-lab/_meta/_00-head.twig | 0 .../pattern-lab/_meta/_01-foot.mustache | 0 .../pattern-lab/_meta/_01-foot.twig | 0 .../00-protons-demo/_demo-block.twig | 0 .../_patterns/00-protons-demo/borders.twig | 0 .../00-protons-demo/breakpoints.twig | 0 .../_patterns/00-protons-demo/colors.twig | 0 .../_patterns/00-protons-demo/index.js | 0 .../_patterns/00-protons-demo/spacing.twig | 0 .../_patterns/00-protons-demo/tables.twig | 0 .../_patterns/00-protons-demo/typography.twig | 0 .../_patterns/00-protons-demo/welcome.twig | 0 .../_patterns/01-atoms-demo/alert/alerts.twig | 0 .../_patterns/01-atoms-demo/alert/alerts.yml | 0 .../_patterns/01-atoms-demo/alert/index.js | 0 .../01-atoms-demo/branding/brandings.twig | 0 .../01-atoms-demo/branding/brandings.yml | 0 .../_patterns/01-atoms-demo/branding/index.js | 0 .../01-atoms-demo/breadcrumb/breadcrumbs.twig | 0 .../01-atoms-demo/breadcrumb/breadcrumbs.yml | 0 .../01-atoms-demo/breadcrumb/index.js | 0 .../01-atoms-demo/button/buttons.twig | 0 .../01-atoms-demo/button/buttons.yml | 0 .../_patterns/01-atoms-demo/button/index.js | 0 .../_patterns/01-atoms-demo/grid/grids.twig | 0 .../_patterns/01-atoms-demo/grid/grids.yml | 0 .../_patterns/01-atoms-demo/grid/index.js | 0 .../01-atoms-demo/image/astrogoat.png | Bin .../_patterns/01-atoms-demo/image/images.md | 0 .../_patterns/01-atoms-demo/image/images.twig | 0 .../_patterns/01-atoms-demo/image/images.yml | 0 .../_patterns/01-atoms-demo/image/index.js | 0 .../_patterns/01-atoms-demo/svg/index.js | 0 .../_patterns/01-atoms-demo/svg/svgs.twig | 0 .../_patterns/01-atoms-demo/svg/svgs.yml | 0 .../02-molecules-demo/card/cards.twig | 0 .../02-molecules-demo/card/cards.yml | 0 .../_patterns/02-molecules-demo/card/index.js | 0 .../02-molecules-demo/pagination/index.js | 0 .../pagination/paginations.twig | 0 .../pagination/paginations.yml | 0 .../02-molecules-demo/vue-widget/index.js | 0 .../vue-widget/vue-html-example.vue | 0 .../vue-widget/vue-widgets.twig | 0 .../vue-widget/vue-widgets.yml | 0 .../03-organisms-demo/article/articles.twig | 0 .../03-organisms-demo/article/index.js | 0 .../card-grid/card-grids.twig | 0 .../card-grid/card-grids.yml | 0 .../03-organisms-demo/card-grid/index.js | 0 .../03-organisms-demo/footer/footers.twig | 0 .../03-organisms-demo/footer/footers.yml | 0 .../03-organisms-demo/footer/index.js | 0 .../_patterns/04-templates-demo/.gitkeep | 0 .../_patterns/05-pages-demo/.gitkeep | 0 .../pattern-lab/alter-twig.php | 0 .../pattern-lab/favicon.ico | Bin .../pattern_exports/.gitkeep | 0 .../patternlab-config.json | 26 ++++---- apps/{node-pl => pl-default}/pl-app.js | 0 .../{node-pl => pl-default}/webpack.config.js | 6 +- contributing.md | 8 ++- docs/PATCHING.md | 15 +++-- package.json | 19 +++--- .../default/_patterns/01-atoms/svg/README.md | 26 +------- .../_patterns/01-atoms/svg/icons/README.md | 3 + source/default/lib/README.md | 1 - .../__tests__/new-component.test.js | 2 +- tools/pl-paths.js | 2 +- tools/tests/accessibility/pa11y.js | 2 +- tools/tests/vrt/backstop-example-settings.js | 2 +- 157 files changed, 248 insertions(+), 212 deletions(-) rename apps/{drupal => drupal-default}/.eslintrc.js (100%) create mode 100644 apps/drupal-default/README.md rename apps/{drupal => drupal-default}/drupal-jquery.js (100%) rename apps/{drupal => drupal-default}/index.js (100%) rename apps/{drupal => drupal-default}/particle.app.config.js (100%) create mode 100644 apps/drupal-default/particle_helper/particle_helper.info.yml rename apps/{drupal/module/particle_theme/particle_theme.module => drupal-default/particle_helper/particle_helper.module} (60%) create mode 100644 apps/drupal-default/particle_helper/particle_helper.services.yml rename apps/{drupal/module/particle_theme => drupal-default/particle_helper}/src/Components/Atoms.php (64%) rename apps/{drupal/module/particle_theme => drupal-default/particle_helper}/src/Components/Molecules.php (66%) rename apps/{drupal/module/particle_theme => drupal-default/particle_helper}/src/ParticleTools/ParticleTools.php (92%) rename apps/{drupal/module/particle_theme => drupal-default/particle_helper}/src/README.md (76%) rename apps/{drupal/module/particle_theme/src/TwigExtension/ParticleThemeTwig.php => drupal-default/particle_helper/src/TwigExtension/ParticleHelperTwig.php} (81%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/install/particle.settings.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_breadcrumbs.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_content.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_footer.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_help.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_local_actions.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_local_tasks.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_mainnavigation.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_messages.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_page_title.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_powered.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_searchform.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_sitebranding.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_useraccountmenu.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/config/optional/block.block.particle_views_search.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/admin.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/block.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/content.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/field.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/form.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/layout.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/media.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/misc.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/navigation.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/node.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/suggestions.theme.inc (96%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/user.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/includes/views.theme.inc (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/logo.svg (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/particle.breakpoints.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/particle.info.yml (79%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/particle.layouts.yml (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/particle.libraries.yml (79%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/particle.theme (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/screenshot.png (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/src/Particle.php (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/block/block--system-branding-block.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/content/.gitkeep (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/field/image--article.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/form/container.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/form/form--particle-search.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/layout/layout.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/layout/page.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/layout/particle-fourcol/particle-fourcol.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/layout/particle-onecol/particle-onecol.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/layout/particle-threecol/particle-threecol.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/layout/particle-twocol/particle-twocol.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/misc/components--error-message.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/misc/status-messages.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/navigation/breadcrumb.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/navigation/menu-local-task.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/navigation/menu-local-tasks.html.twig (100%) rename apps/{drupal/theme/particle => drupal-default/particle_theme}/templates/views/views-view-unformatted--frontpage.html.twig (100%) rename apps/{drupal => drupal-default}/webpack.config.js (87%) delete mode 100644 apps/drupal/README.md delete mode 100644 apps/drupal/module/particle_theme/particle_theme.info.yml delete mode 100644 apps/drupal/module/particle_theme/particle_theme.services.yml rename apps/{node-pl => pl-default}/.eslintrc.js (100%) rename apps/{node-pl => pl-default}/__tests__/pl.test.js (100%) rename apps/{node-pl => pl-default}/glob.js (100%) rename apps/{node-pl => pl-default}/index.js (100%) rename apps/{node-pl => pl-default}/particle.app.config.js (96%) rename apps/{node-pl => pl-default}/pattern-lab/.gitignore (100%) rename apps/{node-pl => pl-default}/pattern-lab/_annotations/annotations.json (100%) rename apps/{node-pl => pl-default}/pattern-lab/_data/components.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_data/data.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_data/imageStyles.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_meta/_00-head.mustache (100%) rename apps/{node-pl => pl-default}/pattern-lab/_meta/_00-head.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_meta/_01-foot.mustache (100%) rename apps/{node-pl => pl-default}/pattern-lab/_meta/_01-foot.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/00-protons-demo/_demo-block.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/00-protons-demo/borders.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/00-protons-demo/breakpoints.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/00-protons-demo/colors.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/00-protons-demo/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/00-protons-demo/spacing.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/00-protons-demo/tables.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/00-protons-demo/typography.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/00-protons-demo/welcome.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/alert/alerts.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/alert/alerts.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/alert/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/branding/brandings.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/branding/brandings.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/branding/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/breadcrumb/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/button/buttons.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/button/buttons.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/button/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/grid/grids.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/grid/grids.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/grid/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/image/astrogoat.png (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/image/images.md (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/image/images.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/image/images.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/image/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/svg/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/card/cards.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/card/cards.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/card/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/pagination/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/vue-widget/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-html-example.vue (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/03-organisms-demo/article/articles.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/03-organisms-demo/article/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/03-organisms-demo/card-grid/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/03-organisms-demo/footer/footers.twig (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/03-organisms-demo/footer/footers.yml (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/03-organisms-demo/footer/index.js (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/04-templates-demo/.gitkeep (100%) rename apps/{node-pl => pl-default}/pattern-lab/_patterns/05-pages-demo/.gitkeep (100%) rename apps/{node-pl => pl-default}/pattern-lab/alter-twig.php (100%) rename apps/{node-pl => pl-default}/pattern-lab/favicon.ico (100%) rename apps/{node-pl => pl-default}/pattern_exports/.gitkeep (100%) rename apps/{node-pl => pl-default}/patternlab-config.json (83%) rename apps/{node-pl => pl-default}/pl-app.js (100%) rename apps/{node-pl => pl-default}/webpack.config.js (95%) diff --git a/.github/CODE_OF_CONDUCT.md b/.github/CODE_OF_CONDUCT.md index abae83dd79..7c0fd77fa1 100644 --- a/.github/CODE_OF_CONDUCT.md +++ b/.github/CODE_OF_CONDUCT.md @@ -5,31 +5,31 @@ In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body -size, disability, ethnicity, sex characteristics, gender identity and expression, -level of experience, education, socio-economic status, nationality, personal -appearance, race, religion, or sexual identity and orientation. +size, disability, ethnicity, sex characteristics, gender identity and +expression, level of experience, education, socio-economic status, nationality, +personal appearance, race, religion, or sexual identity and orientation. ## Our Standards Examples of behavior that contributes to creating a positive environment include: -* Using welcoming and inclusive language -* Being respectful of differing viewpoints and experiences -* Gracefully accepting constructive criticism -* Focusing on what is best for the community -* Showing empathy towards other community members +- Using welcoming and inclusive language +- Being respectful of differing viewpoints and experiences +- Gracefully accepting constructive criticism +- Focusing on what is best for the community +- Showing empathy towards other community members Examples of unacceptable behavior by participants include: -* The use of sexualized language or imagery and unwelcome sexual attention or - advances -* Trolling, insulting/derogatory comments, and personal or political attacks -* Public or private harassment -* Publishing others' private information, such as a physical or electronic - address, without explicit permission -* Other conduct which could reasonably be considered inappropriate in a - professional setting +- The use of sexualized language or imagery and unwelcome sexual attention or + advances +- Trolling, insulting/derogatory comments, and personal or political attacks +- Public or private harassment +- Publishing others' private information, such as a physical or electronic + address, without explicit permission +- Other conduct which could reasonably be considered inappropriate in a + professional setting ## Our Responsibilities @@ -37,11 +37,11 @@ Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. -Project maintainers have the right and responsibility to remove, edit, or -reject comments, commits, code, wiki edits, issues, and other contributions -that are not aligned to this Code of Conduct, or to ban temporarily or -permanently any contributor for other behaviors that they deem inappropriate, -threatening, offensive, or harmful. +Project maintainers have the right and responsibility to remove, edit, or reject +comments, commits, code, wiki edits, issues, and other contributions that are +not aligned to this Code of Conduct, or to ban temporarily or permanently any +contributor for other behaviors that they deem inappropriate, threatening, +offensive, or harmful. ## Scope @@ -55,11 +55,13 @@ further defined and clarified by project maintainers. ## Enforcement Instances of abusive, harassing, or otherwise unacceptable behavior may be -reported by contacting the project team at [frontend@phase2technology.com](mailto:frontend@phase2technology.com). All +reported by contacting the project team at +[frontend@phase2technology.com](mailto:frontend@phase2technology.com). All complaints will be reviewed and investigated and will result in a response that is deemed necessary and appropriate to the circumstances. The project team is -obligated to maintain confidentiality with regard to the reporter of an incident. -Further details of specific enforcement policies may be posted separately. +obligated to maintain confidentiality with regard to the reporter of an +incident. Further details of specific enforcement policies may be posted +separately. Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other @@ -67,8 +69,9 @@ members of the project's leadership. ## Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, -available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html +This Code of Conduct is adapted from the [Contributor Covenant][homepage], +version 1.4, available at +https://www.contributor-covenant.org/version/1/4/code-of-conduct.html [homepage]: https://www.contributor-covenant.org diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index dd84ea7824..8bc4a7ed86 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -4,35 +4,33 @@ about: Create a report to help us improve title: '' labels: '' assignees: '' - --- -**Describe the bug** -A clear and concise description of what the bug is. +**Describe the bug** A clear and concise description of what the bug is. + +**To Reproduce** Steps to reproduce the behavior: -**To Reproduce** -Steps to reproduce the behavior: 1. Go to '...' 2. Click on '....' 3. Scroll down to '....' 4. See error -**Expected behavior** -A clear and concise description of what you expected to happen. +**Expected behavior** A clear and concise description of what you expected to +happen. -**Screenshots** -If applicable, add screenshots to help explain your problem. +**Screenshots** If applicable, add screenshots to help explain your problem. **Desktop (please complete the following information):** - - OS: [e.g. iOS] - - Browser [e.g. chrome, safari] - - Version [e.g. 22] + +- OS: [e.g. iOS] +- Browser [e.g. chrome, safari] +- Version [e.g. 22] **Smartphone (please complete the following information):** - - Device: [e.g. iPhone6] - - OS: [e.g. iOS8.1] - - Browser [e.g. stock browser, safari] - - Version [e.g. 22] -**Additional context** -Add any other context about the problem here. +- Device: [e.g. iPhone6] +- OS: [e.g. iOS8.1] +- Browser [e.g. stock browser, safari] +- Version [e.g. 22] + +**Additional context** Add any other context about the problem here. diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index bbcbbe7d61..2866f790fa 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -4,17 +4,16 @@ about: Suggest an idea for this project title: '' labels: '' assignees: '' - --- -**Is your feature request related to a problem? Please describe.** -A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] +**Is your feature request related to a problem? Please describe.** A clear and +concise description of what the problem is. Ex. I'm always frustrated when [...] -**Describe the solution you'd like** -A clear and concise description of what you want to happen. +**Describe the solution you'd like** A clear and concise description of what you +want to happen. -**Describe alternatives you've considered** -A clear and concise description of any alternative solutions or features you've considered. +**Describe alternatives you've considered** A clear and concise description of +any alternative solutions or features you've considered. -**Additional context** -Add any other context or screenshots about the feature request here. +**Additional context** Add any other context or screenshots about the feature +request here. diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index e9aed7b24d..fdd475049e 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -21,5 +21,5 @@ Describe what problem you're solving. Link the issue from the issues tab. ## Summary of Changes diff --git a/README.md b/README.md index 261c87ed6f..5bb0b02129 100644 --- a/README.md +++ b/README.md @@ -1,22 +1,26 @@ # Particle: A design system integrating to Pattern Lab and a Drupal 8 theme -[![GitHub (pre-)release](https://img.shields.io/github/release/phase2/particle/all.svg)](https://github.com/phase2/particle/releases) [![Build Status](https://travis-ci.org/phase2/particle.svg?branch=master)](https://travis-ci.org/phase2/particle) [![Greenkeeper badge](https://badges.greenkeeper.io/phase2/particle.svg)](https://greenkeeper.io/) +[![GitHub (pre-)release](https://img.shields.io/github/release/phase2/particle/all.svg)](https://github.com/phase2/particle/releases) +[![Build Status](https://travis-ci.org/phase2/particle.svg?branch=master)](https://travis-ci.org/phase2/particle) +[![Greenkeeper badge](https://badges.greenkeeper.io/phase2/particle.svg)](https://greenkeeper.io/) -![Particle mascot: Astrogoat](apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/astrogoat.png?raw=true 'Astrogoat') +![Particle mascot: Astrogoat](apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/astrogoat.png?raw=true 'Astrogoat') Particle is an opinionated set of tools and examples to: 1. Build an application-agnostic **design system** -1. Apply that design system to a locally-served **Pattern Lab** for rapid prototyping +1. Apply that design system to a locally-served **Pattern Lab** for rapid + prototyping 1. Apply that design system to a **Drupal theme** -In depth documentation about frontend approach using this project at [Phase2 Frontend Docs](https://phase2.gitbook.io/frontend/) +In depth documentation about frontend approach using this project at +[Phase2 Frontend Docs](https://phase2.gitbook.io/frontend/) ## Prerequisites -- [Node `^8`, `^10`](https://nodejs.org) +- [Node `^8`, `^10`, `^12`](https://nodejs.org) - [NPM `^5`, `^6`](https://www.npmjs.com/) -- [PHP `^7.0.0`](https://php.net) +- [PHP `^7`](https://php.net) [Step-by-step instructions to install all dependencies for OSX can be found in this Gist.](https://gist.github.com/illepic/efd6ab9f452af2a99b7ade78257e6b96) @@ -24,17 +28,25 @@ In depth documentation about frontend approach using this project at [Phase2 Fro - Drupal theme, Grav theme, and Pattern Lab app - Strict [Atomic Design](http://atomicdesign.bradfrost.com/) component structure -- Webpack bundling of all CSS, javascript, font, and static image assets for multiple targets (Drupal theme, Grav theme, Pattern Lab) -- [Webpack Dev Server](https://github.com/webpack/webpack-dev-server) for local hosting and hot reloading of assets into Pattern Lab -- [Twig namespaced paths](https://symfony.com/doc/current/templating/namespaced_paths.html) automatically added into Drupal theme and Pattern Lab config. Within any twig file, `@atoms/thing.twig` means the same thing to Drupal theme and Pattern Lab. +- Webpack bundling of all CSS, javascript, font, and static image assets for + multiple targets (Drupal theme, Grav theme, Pattern Lab) +- [Webpack Dev Server](https://github.com/webpack/webpack-dev-server) for local + hosting and hot reloading of assets into Pattern Lab +- [Twig namespaced paths](https://symfony.com/doc/current/templating/namespaced_paths.html) + automatically added into Drupal theme and Pattern Lab config. Within any twig + file, `@atoms/thing.twig` means the same thing to Drupal theme and Pattern + Lab. - Iconfont auto-generation -- Auto-linting against the [AirBnB JavaScript Style Guide](https://github.com/airbnb/javascript) +- Auto-linting against the + [AirBnB JavaScript Style Guide](https://github.com/airbnb/javascript) - All Webpack files are fully configurable -- Simple [Yeoman](http://yeoman.io/) generator for Design System component creation +- Simple [Yeoman](http://yeoman.io/) generator for Design System component + creation ## Quickstart -Particle builds design systems in dev mode for local hosting, or production mode for optimized asset generation. +Particle builds design systems in dev mode for local hosting, or production mode +for optimized asset generation. ### Quickstart A @@ -53,7 +65,8 @@ Particle builds design systems in dev mode for local hosting, or production mode ### Quickstart B 1. [Download the latest release](https://github.com/phase2/particle/releases) -1. Extract anywhere (i.e. this readme should be at `any/where/particle/README.md`) +1. Extract anywhere (i.e. this readme should be at + `any/where/particle/README.md`) 1. Within the extracted folder run: ```bash @@ -62,6 +75,19 @@ npm run setup npm start ``` -Simply wait until the webpack bundle output appears then visit [http://0.0.0.0:8080/app-node-pl/pl/](http://0.0.0.0:8080/app-node-pl/pl/) (or [http://localhost:8080/app-node-pl/pl/](http://localhost:8080/app-node-pl/pl/)) and start working. +Simply wait until the webpack bundle output appears then visit +[http://0.0.0.0:8080/app-pl/pl/](http://0.0.0.0:8080/app-pl/pl/) (or +[http://localhost:8080/app-pl/pl/](http://localhost:8080/app-pl/pl/)) and start +working. -That's it. For **much** greater detail on the frontend approach using this project, check out the [Phase2 Frontend Docs](https://phase2.gitbook.io/frontend/). +That's it. For **much** greater detail on the frontend approach using this +project, check out the +[Phase2 Frontend Docs](https://phase2.gitbook.io/frontend/). + +## Design System Naming + +The Design System Source folder is named default `./source/default`. It's handy +in multi-design setups to name this per design system and post-fix `apps` with +that design system name. For example, `apps/drupal-default/` contains the +implementation of the `default` source directory. These are intended to be +updated by the needs of your project. diff --git a/apps/drupal/.eslintrc.js b/apps/drupal-default/.eslintrc.js similarity index 100% rename from apps/drupal/.eslintrc.js rename to apps/drupal-default/.eslintrc.js diff --git a/apps/drupal-default/README.md b/apps/drupal-default/README.md new file mode 100644 index 0000000000..0441db75b0 --- /dev/null +++ b/apps/drupal-default/README.md @@ -0,0 +1,50 @@ +# Particle Drupal + +This directory contains Webpack config for Drupal apps within Particle. In +addition it contains a Drupal theme integration and optional helpers module. +This readme assumes Particle is installed inside your Drupal theme. Check +[the Particle docs](https://phase2.gitbook.io/frontend/) for complete details. + +If you'd like to separate your Particle tooling from Drupal's theme, see +[Decoupled Drupal Installation](#decoupling) below. + +## Drupal Integration + +This folder contains two additional directories: `particle_helper` and +`particle_theme`. Due to the process by which Drupal loads services, several +optional Particle-specific functions are expected to exist within a module +separate from the theme. This module can then specify various requirements and +dependencies, which Drupal 8 themes still cannot declare. + +**Important**! The Drupal `particle_helper` module is optional template for +additional integration work you may wish to do. However its Twig extension is +required if you are making use of the `attributify` twig filter. This is needed +to manage the separate requirements of Pattern Lab and Drupal's Twig +environments for common HTML attributes. + +### Standard Drupal Installation: + +1. Move the contents of the `particle_helper` folder to your Drupal + `modules/contrib` directory (optional). +1. Ensure the module is enabled: `drush en particle_helper` (optional). +1. Ensure the theme is enabled: `drush theme:enable particle`. +1. Ensure the theme is set: + `drush config-set system.theme default THEME_MACHINE_NAME`. + +### Decoupled Drupal Installation + +1. Move the contents of the `particle_helper` folder to your Drupal + `modules/contrib` directory. +1. Move the contents of the `particle_theme` folder to your Drupal + `theme/contrib` directory. +1. From the main root of the Particle application, open + `particle.root.config.js` +1. Find the line that starts with `DRUPAL_DIST` +1. Update the `DRUPAL_DIST` line so that the path resolves to the theme created + in step 2. For example, if the Drupal installation is in a folder named + `web`, your line might look like this: + `DRUPAL_DIST: path.resolve('../../web/themes/custom/particle/dist/'),` +1. Ensure the module is enabled: `drush en particle_helper` (optional). +1. Ensure the theme is enabled: `drush theme:enable particle`. +1. Ensure the theme is set: + `drush config-set system.theme default THEME_MACHINE_NAME`. diff --git a/apps/drupal/drupal-jquery.js b/apps/drupal-default/drupal-jquery.js similarity index 100% rename from apps/drupal/drupal-jquery.js rename to apps/drupal-default/drupal-jquery.js diff --git a/apps/drupal/index.js b/apps/drupal-default/index.js similarity index 100% rename from apps/drupal/index.js rename to apps/drupal-default/index.js diff --git a/apps/drupal/particle.app.config.js b/apps/drupal-default/particle.app.config.js similarity index 100% rename from apps/drupal/particle.app.config.js rename to apps/drupal-default/particle.app.config.js diff --git a/apps/drupal-default/particle_helper/particle_helper.info.yml b/apps/drupal-default/particle_helper/particle_helper.info.yml new file mode 100644 index 0000000000..7f554c0467 --- /dev/null +++ b/apps/drupal-default/particle_helper/particle_helper.info.yml @@ -0,0 +1,5 @@ +name: 'Particle Helper' +type: module +description: 'Particle Components and Particle Tools. Theme utilities to integrate Drupal with Particle themes.' +core: 8.x +package: 'Particle' diff --git a/apps/drupal/module/particle_theme/particle_theme.module b/apps/drupal-default/particle_helper/particle_helper.module similarity index 60% rename from apps/drupal/module/particle_theme/particle_theme.module rename to apps/drupal-default/particle_helper/particle_helper.module index 816268e021..63d5bde7c6 100644 --- a/apps/drupal/module/particle_theme/particle_theme.module +++ b/apps/drupal-default/particle_helper/particle_helper.module @@ -2,7 +2,7 @@ /** * @file - * Contains particle_theme.module. + * Contains particle_helper.module. */ use Drupal\Core\Routing\RouteMatchInterface; @@ -10,10 +10,10 @@ use Drupal\Core\Routing\RouteMatchInterface; /** * Implements hook_help(). */ -function particle_theme_help($route_name, RouteMatchInterface $route_match) { +function particle_helper_help($route_name, RouteMatchInterface $route_match) { switch ($route_name) { - // Main module help for the particle_theme module. - case 'help.page.particle_theme': + // Main module help for the particle_helper module. + case 'help.page.particle_helper': $output = ''; $output .= '

' . t('About') . '

'; $output .= '

' . t('Particle and Particle theme utilities') . '

'; diff --git a/apps/drupal-default/particle_helper/particle_helper.services.yml b/apps/drupal-default/particle_helper/particle_helper.services.yml new file mode 100644 index 0000000000..37f3c62a21 --- /dev/null +++ b/apps/drupal-default/particle_helper/particle_helper.services.yml @@ -0,0 +1,15 @@ +services: + particle_helper.twig_extension: + arguments: ["@renderer"] + class: Drupal\particle_helper\TwigExtension\ParticleHelperTwig + tags: + - { name: twig.extension } + + particle_helper.particle_tools: + class: Drupal\particle_helper\Tools\ParticleTools + + particle_helper.atoms: + class: Drupal\particle_helper\Components\Atoms + + particle_helper.molecules: + class: Drupal\particle_helper\Components\Molecules diff --git a/apps/drupal/module/particle_theme/src/Components/Atoms.php b/apps/drupal-default/particle_helper/src/Components/Atoms.php similarity index 64% rename from apps/drupal/module/particle_theme/src/Components/Atoms.php rename to apps/drupal-default/particle_helper/src/Components/Atoms.php index 7933956a19..413f5c3184 100644 --- a/apps/drupal/module/particle_theme/src/Components/Atoms.php +++ b/apps/drupal-default/particle_helper/src/Components/Atoms.php @@ -1,6 +1,6 @@ makeHeader('My Cool Header'); ``` @@ -52,9 +52,9 @@ All custom Twig Extensions specific to Particle can be added here. ### Particle Tools Similar to _Components_, ParticleTools provide helper functions for theme -development. However, rather than return particle arrays these functions -are helpers for interacting with Drupal. For example, you may want to get the -theme path from a defined theme constant: +development. However, rather than return particle arrays these functions are +helpers for interacting with Drupal. For example, you may want to get the theme +path from a defined theme constant: ```php /** @@ -73,8 +73,8 @@ theme path from a defined theme constant: To use the Tools library in any php file again use Drupal's class resolver: ```php -/** @var \Drupal\particle_theme\ParticleTools\ParticleTools */ -$tools = \Drupal::service('particle_theme.particle_tools'); +/** @var \Drupal\particle_helper\ParticleTools\ParticleTools */ +$tools = \Drupal::service('particle_helper.particle_tools'); $theme_path = $tools->getThemePath(); ``` diff --git a/apps/drupal/module/particle_theme/src/TwigExtension/ParticleThemeTwig.php b/apps/drupal-default/particle_helper/src/TwigExtension/ParticleHelperTwig.php similarity index 81% rename from apps/drupal/module/particle_theme/src/TwigExtension/ParticleThemeTwig.php rename to apps/drupal-default/particle_helper/src/TwigExtension/ParticleHelperTwig.php index 62fa277d89..70e20309fc 100644 --- a/apps/drupal/module/particle_theme/src/TwigExtension/ParticleThemeTwig.php +++ b/apps/drupal-default/particle_helper/src/TwigExtension/ParticleHelperTwig.php @@ -1,19 +1,19 @@ - - - icon/other/arrow/reverse - Created with Sketch. - - - - - - -``` - -This allows you to use the color vars `var:color.fill="#000"` on path in SVGs. - ## Adjusting Formatting Configuration + This pattern uses [SVGO](https://github.com/svg/svgo) to format and optimize SVG files. You can adjust the configuration at Particle's root in `/.svgo.yml`. diff --git a/source/default/_patterns/01-atoms/svg/icons/README.md b/source/default/_patterns/01-atoms/svg/icons/README.md index 3bbe70c052..86c434d6c3 100644 --- a/source/default/_patterns/01-atoms/svg/icons/README.md +++ b/source/default/_patterns/01-atoms/svg/icons/README.md @@ -1,9 +1,11 @@ # SVG Pattern + The SVG is a special pattern in Particle that is designed to allow us to include SVG as CSS or inline. Furthermore, this pattern is setup to be optimized as a developer step via `npm run fmt:svg` or `npm run fmt`. ## Adding SVG + To add an SVG to the system, simply add it to `@atoms/svg/svg/` directory and run the format command. This step is **destructive**, so be aware of using source control to revert unintended changes. @@ -32,5 +34,6 @@ This allows you to place color variables on path, for example: This allows you to use the color variables `var:color.fill="#000"` on path. ## Adjusting Formatting Configuration + This pattern uses [SVGO](https://github.com/svg/svgo) to format and optimize SVG files. You can adjust the configuration at Particle's root in `/.svgo.yml`. diff --git a/source/default/lib/README.md b/source/default/lib/README.md index d971a17cf9..808fb5115b 100644 --- a/source/default/lib/README.md +++ b/source/default/lib/README.md @@ -1,4 +1,3 @@ # Design System Apps Create and store standalone applications within the Design System. - diff --git a/tools/generators/new-component/__tests__/new-component.test.js b/tools/generators/new-component/__tests__/new-component.test.js index 15b0a4a8f2..3c24287bc6 100644 --- a/tools/generators/new-component/__tests__/new-component.test.js +++ b/tools/generators/new-component/__tests__/new-component.test.js @@ -12,7 +12,7 @@ // return helpers // .run(join(__dirname, '../generators/app')) // .withPrompts({ -// chooseApp: 'app-node-pl', +// chooseApp: 'app-pl', // patternType: '02-molecules', // name: 'New Component Test', // }) diff --git a/tools/pl-paths.js b/tools/pl-paths.js index c8b134d5e5..230dff080f 100644 --- a/tools/pl-paths.js +++ b/tools/pl-paths.js @@ -6,7 +6,7 @@ const { patternPaths, navItems, // eslint-disable-next-line import/no-unresolved -} = require('../dist/app-node-pl/pl/styleguide/data/patternlab-data.cjs.js'); +} = require('../dist/app-pl/pl/styleguide/data/patternlab-data.cjs.js'); // Shape of patternPaths data: // diff --git a/tools/tests/accessibility/pa11y.js b/tools/tests/accessibility/pa11y.js index 196f87c529..58d7006960 100644 --- a/tools/tests/accessibility/pa11y.js +++ b/tools/tests/accessibility/pa11y.js @@ -5,7 +5,7 @@ const { PL_BASE_DOMAIN } = process.env; // The PL_BASE_DOMAIN environment variable should be set to override the default. const plRootDomain = PL_BASE_DOMAIN || '0.0.0.0:8080'; -const plRoot = `http://${plRootDomain}/app-node-pl/pl`; +const plRoot = `http://${plRootDomain}/app-pl/pl`; // urls comes from particle, includes all demo paths from atoms+ let urls = componentPaths.map((partial) => `${plRoot}/${partial}`); diff --git a/tools/tests/vrt/backstop-example-settings.js b/tools/tests/vrt/backstop-example-settings.js index 87b07446a4..851612ead5 100644 --- a/tools/tests/vrt/backstop-example-settings.js +++ b/tools/tests/vrt/backstop-example-settings.js @@ -6,7 +6,7 @@ const { partials } = require('../../pl-paths.js'); -const plRoot = 'http://0.0.0.0:8080/app-node-pl/pl'; +const plRoot = 'http://0.0.0.0:8080/app-pl/pl'; module.exports = () => { // Set which resolutions to take screenshots at. From e00f9f499515567939f8555fac15a689b4b20289 Mon Sep 17 00:00:00 2001 From: Christopher Bloom Date: Sun, 7 Jun 2020 15:44:19 -0700 Subject: [PATCH 3/4] SVG with Tailwind. (#829) * Moving SVG to atomic dist folder * SVG + css handling * Remove unused config * Better comment docs * Use tailwind inline-block style * Make CSS sprites easier to resize --- .../particle_theme/includes/misc.theme.inc | 3 + .../particle_theme/src/Particle.php | 3 + apps/pl-default/pattern-lab/_data/data.yml | 1 + .../_patterns/01-atoms-demo/svg/svgs.twig | 103 +++++++++++++++++- .../_patterns/01-atoms-demo/svg/svgs.yml | 9 +- .../_patterns/01-atoms/svg/_svg--embed.twig | 21 +--- .../_patterns/01-atoms/svg/_svg--sprite.twig | 19 ++-- .../default/_patterns/01-atoms/svg/_svg.twig | 32 ++++-- .../_patterns/01-atoms/svg/icons/README.md | 25 +---- .../01-atoms/svg/icons/chevron-down.svg | 4 +- .../01-atoms/svg/icons/chevron-left.svg | 4 +- .../01-atoms/svg/icons/chevron-right.svg | 4 +- .../01-atoms/svg/icons/chevron-up.svg | 4 +- .../_patterns/01-atoms/svg/icons/close.svg | 4 +- .../_patterns/01-atoms/svg/icons/menu.svg | 4 +- .../_patterns/01-atoms/svg/icons/person.svg | 4 +- .../_patterns/01-atoms/svg/icons/search.svg | 4 +- .../default/_patterns/01-atoms/svg/index.js | 21 ++-- .../_patterns/01-atoms/svg/sprite-svg.css | 4 + source/default/webpack.config.js | 16 +++ webpack.particle.js | 2 +- 21 files changed, 193 insertions(+), 98 deletions(-) create mode 100644 source/default/_patterns/01-atoms/svg/sprite-svg.css diff --git a/apps/drupal-default/particle_theme/includes/misc.theme.inc b/apps/drupal-default/particle_theme/includes/misc.theme.inc index 90c9b5e147..b3d452738f 100644 --- a/apps/drupal-default/particle_theme/includes/misc.theme.inc +++ b/apps/drupal-default/particle_theme/includes/misc.theme.inc @@ -14,6 +14,9 @@ function particle_preprocess(&$variables) { // Set the paths.assets variable globally, so that drupal can // find webpack-compiled assets. $variables['paths']['assets'] = Particle::ASSETS_PATH; + $variables['paths']['images'] = Particle::IMAGES_PATH; + $variables['paths']['fonts'] = Particle::FONTS_PATH; + $variables['paths']['svgs'] = Particle::SVGS_PATH; } /** diff --git a/apps/drupal-default/particle_theme/src/Particle.php b/apps/drupal-default/particle_theme/src/Particle.php index 3143c13e13..140663ab61 100644 --- a/apps/drupal-default/particle_theme/src/Particle.php +++ b/apps/drupal-default/particle_theme/src/Particle.php @@ -16,6 +16,9 @@ class Particle { * Provides the path for compiled Drupal assets in build system. */ const ASSETS_PATH = 'themes/particle/dist/app-drupal/assets'; + const IMAGES_PATH = 'themes/particle/dist/app-drupal/assets/images'; + const FONTS_PATH = 'themes/particle/dist/app-drupal/assets/fonts'; + const SVGS_PATH = 'themes/particle/dist/app-drupal/assets/atomic/_patterns/01-atoms/svg/icons'; /** * Provides the frontend docs for reference. diff --git a/apps/pl-default/pattern-lab/_data/data.yml b/apps/pl-default/pattern-lab/_data/data.yml index bcd5c26160..93b0be12d4 100644 --- a/apps/pl-default/pattern-lab/_data/data.yml +++ b/apps/pl-default/pattern-lab/_data/data.yml @@ -13,6 +13,7 @@ paths: assets: '../../../assets' images: '../../../assets/images' fonts: '../../../assets/fonts' + svgs: '../../../assets/atomic/_patterns/01-atoms/svg/icons' bodyClass: 'pl pl-loading' # Generic Starter Template Data diff --git a/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig index 5488eb5edb..71fc68b1c7 100644 --- a/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig +++ b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig @@ -2,9 +2,106 @@ demo: svg_demo_block } %} - {% block content %} - TO BE CREATED + {% block content %} - {% endblock %} +

Embed

+

Includes the entire SVG markup within the DOM. This is the preferred method.

+
+ +
+ {% include '@atoms/svg/_svg.twig' with { + svg: { + path: '@atoms/svg/icons/person.svg', + } + } %} +
+ +
+ {% include '@atoms/svg/_svg.twig' with { + svg: { + path: '@atoms/svg/icons/close.svg', + } + } %} +
+ + {% include '@atoms/svg/_svg.twig' with { + svg: { + path: '@atoms/svg/icons/search.svg', + }, + svg_classes: ['text-red-500', 'w-4'], + } %} + +
+ +

Sprite map

+

Sprite maps combine all SVGs into a single "sheet" and only let the named SVG "peak" through the masked square.

+
+ +
+ {% include '@atoms/svg/_svg.twig' with { + svg: { + variant: 'sprite', + name: 'person', + } + } %} +
+ +
+ {% include '@atoms/svg/_svg.twig' with { + svg: { + variant: 'sprite', + name: 'close', + } + } %} +
+ + {% include '@atoms/svg/_svg.twig' with { + svg: { + variant: 'sprite', + name: 'search', + }, + svg_classes: ['text-red-500', 'w-4'], + } %} + +
+ +

img src

+

If you need to reference these SVGs as src for an img tag.

+ + + +

CSS classes

+

Pure CSS classes

+ + + + + {% endblock %} {% endembed %} diff --git a/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml index 03fe680039..81b4799169 100644 --- a/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml +++ b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml @@ -1,8 +1,7 @@ svg_demo_block: title: 'SVG Component' - text: + content: lead: 'Implements our SVG and SVG Icons.' - summary: 'Store your SVG files in the SVG subdirectory to have them - made available via the _svg--icon.twig partial SVGs - are rendered utilizing their filename as a variable. - FontAwesome icons can also be used through an HTML class.' + summary: 'Store your SVG files in the icons/ subdirectory to have them + made available via the _svg.twig. See this svgs.twig + demo file code comments for implmentation details and examples.' diff --git a/source/default/_patterns/01-atoms/svg/_svg--embed.twig b/source/default/_patterns/01-atoms/svg/_svg--embed.twig index 506b4106ad..f15e3ab5f1 100644 --- a/source/default/_patterns/01-atoms/svg/_svg--embed.twig +++ b/source/default/_patterns/01-atoms/svg/_svg--embed.twig @@ -4,24 +4,13 @@ * svg--embed * * Available variables for svg--embed: - * - svg.path [string]: Generic element to define shape of svg. - * Example: '@atoms/svg/svg/person.svg' - * - svg.fillCurrent [bool]: Use the tailwind's fill-current utility class. - * - svg.strokeCurrent [bool]: Use the tailwind's stroke-current utility class. - * - svg_classes [array]: Array of string classes to add - * Example: 'svg-custom-class icon-big' + * - svg.path [string]: Atomic path to SVG file. + * Example: '@atoms/svg/icons/person.svg' */ #} -{# Starter defaults #} -{% set svg = svg|default({ +{% set svg = { path: '@atoms/svg/icons/person.svg', - fillCurrent: true, -}) %} +} | merge(svg) %} -{% set svg_classes = svg_classes|default([])|merge([ - svg.fillCurrent ? 'fill-current' : '', - svg.strokeCurrent ? 'stroke-current' : '', -]) | sort | join(' ') | trim %} - -{{ source(svg.path) }} +{{ source(svg.path) }} diff --git a/source/default/_patterns/01-atoms/svg/_svg--sprite.twig b/source/default/_patterns/01-atoms/svg/_svg--sprite.twig index 1b46fc6ad6..b56d388ee4 100644 --- a/source/default/_patterns/01-atoms/svg/_svg--sprite.twig +++ b/source/default/_patterns/01-atoms/svg/_svg--sprite.twig @@ -4,19 +4,16 @@ * svg--sprite * * Available variables for svg--sprite: - * - svg.name [string]: String filename of the SVG to use from svg/ - * - svg.fillCurrent [bool]: Use the tailwind's fill-current utility class. - * - svg.strokeCurrent [bool]: Use the tailwind's stroke-current utility class. - * - svg_classes [array]: Array of string classes to add - * Example: 'svg-custom-class icon-big' + * - svg.name [string]: SVG file name, minus the extension + * Example: 'person' + * */ #} -{% set svg_classes = svg_classes|default([])|merge([ - svg.fillCurrent ? 'fill-current' : '', - svg.strokeCurrent ? 'stroke-current' : '', -]) | sort | join(' ') | trim %} +{% set svg = { + name: 'person', +} | merge(svg) %} - - + + diff --git a/source/default/_patterns/01-atoms/svg/_svg.twig b/source/default/_patterns/01-atoms/svg/_svg.twig index 810b815f75..409ed998c7 100644 --- a/source/default/_patterns/01-atoms/svg/_svg.twig +++ b/source/default/_patterns/01-atoms/svg/_svg.twig @@ -3,29 +3,43 @@ * @file * svg * + * See _svg--embed.twig and _svg-sprite.twig for variables specific to those + * variants. + * * Available variables for svg: * - svg.variant [string]: Indicates which svg pattern to use. + * - svg.fillCurrent [bool]: Use the tailwind's fill-current utility class. + * - svg.strokeCurrent [bool]: Use the tailwind's stroke-current utility class. + * - svg_classes [array]: Array of string classes to add + * Example: ['text-red-500', 'w-10'] */ #} -{% set svg_variant = svg.variant|default('embed') %} +{# Default SVG settings, overridden by incoming svg object #} +{% set svg = { + fillCurrent: true, + variant: 'embed', +} | merge(svg) %} -{# Classes Merge Handled by Variant Files #} -{% set svg_classes = svg_classes|default([])|merge([ +{# Default SVG classes, overridden by incoming array #} +{% set svg_classes = [ 'svg', - svg_variant, -]) %} + 'svg--' ~ svg.variant, + svg.fillCurrent ? 'fill-current' : '', + svg.strokeCurrent ? 'stroke-current' : '', +] | merge(svg_classes|default([])) | filter(c => c is not empty) | join(' ') %} + -{% if svg_variant == 'embed' %} + +{% if svg.variant == 'embed' %} {% include '@atoms/svg/_svg--embed.twig' with { svg: svg, svg_classes: svg_classes } %} -{% endif %} - -{% if svg_variant == 'sprite' %} +{% elseif svg.variant == 'sprite' %} {% include '@atoms/svg/_svg--sprite.twig' with { svg: svg, svg_classes: svg_classes } %} {% endif %} + diff --git a/source/default/_patterns/01-atoms/svg/icons/README.md b/source/default/_patterns/01-atoms/svg/icons/README.md index 86c434d6c3..b0c356050d 100644 --- a/source/default/_patterns/01-atoms/svg/icons/README.md +++ b/source/default/_patterns/01-atoms/svg/icons/README.md @@ -6,33 +6,10 @@ developer step via `npm run fmt:svg` or `npm run fmt`. ## Adding SVG -To add an SVG to the system, simply add it to `@atoms/svg/svg/` directory and +To add an SVG to the system, simply add it to `@atoms/svg/icons/` directory and run the format command. This step is **destructive**, so be aware of using source control to revert unintended changes. -### XMLS - -Each colorable svg which declares a variable needs the following on the svg tag: -`xmlns:var="https://github.com/cascornelissen/svg-spritemap-webpack-plugin/"` - -This allows you to place color variables on path, for example: - -```svg - - - - icon/other/arrow/reverse - Created with Sketch. - - - - - - -``` - -This allows you to use the color variables `var:color.fill="#000"` on path. - ## Adjusting Formatting Configuration This pattern uses [SVGO](https://github.com/svg/svgo) to format and optimize SVG diff --git a/source/default/_patterns/01-atoms/svg/icons/chevron-down.svg b/source/default/_patterns/01-atoms/svg/icons/chevron-down.svg index 7b4e95178b..51e9e65dbc 100644 --- a/source/default/_patterns/01-atoms/svg/icons/chevron-down.svg +++ b/source/default/_patterns/01-atoms/svg/icons/chevron-down.svg @@ -1,3 +1,3 @@ - - + + diff --git a/source/default/_patterns/01-atoms/svg/icons/chevron-left.svg b/source/default/_patterns/01-atoms/svg/icons/chevron-left.svg index 65f6faa498..1e24512565 100644 --- a/source/default/_patterns/01-atoms/svg/icons/chevron-left.svg +++ b/source/default/_patterns/01-atoms/svg/icons/chevron-left.svg @@ -1,3 +1,3 @@ - - + + diff --git a/source/default/_patterns/01-atoms/svg/icons/chevron-right.svg b/source/default/_patterns/01-atoms/svg/icons/chevron-right.svg index eeb28c15a1..10f1e58df2 100644 --- a/source/default/_patterns/01-atoms/svg/icons/chevron-right.svg +++ b/source/default/_patterns/01-atoms/svg/icons/chevron-right.svg @@ -1,3 +1,3 @@ - - + + diff --git a/source/default/_patterns/01-atoms/svg/icons/chevron-up.svg b/source/default/_patterns/01-atoms/svg/icons/chevron-up.svg index d47516b147..6b6f3a7b1c 100644 --- a/source/default/_patterns/01-atoms/svg/icons/chevron-up.svg +++ b/source/default/_patterns/01-atoms/svg/icons/chevron-up.svg @@ -1,3 +1,3 @@ - - + + diff --git a/source/default/_patterns/01-atoms/svg/icons/close.svg b/source/default/_patterns/01-atoms/svg/icons/close.svg index 5150933e71..c7b5a4256d 100644 --- a/source/default/_patterns/01-atoms/svg/icons/close.svg +++ b/source/default/_patterns/01-atoms/svg/icons/close.svg @@ -1,3 +1,3 @@ - - + + diff --git a/source/default/_patterns/01-atoms/svg/icons/menu.svg b/source/default/_patterns/01-atoms/svg/icons/menu.svg index 9b708eaf95..d701054c62 100644 --- a/source/default/_patterns/01-atoms/svg/icons/menu.svg +++ b/source/default/_patterns/01-atoms/svg/icons/menu.svg @@ -1,3 +1,3 @@ - - + + diff --git a/source/default/_patterns/01-atoms/svg/icons/person.svg b/source/default/_patterns/01-atoms/svg/icons/person.svg index dd1385549d..1f1b2de60f 100644 --- a/source/default/_patterns/01-atoms/svg/icons/person.svg +++ b/source/default/_patterns/01-atoms/svg/icons/person.svg @@ -1,3 +1,3 @@ - - + + diff --git a/source/default/_patterns/01-atoms/svg/icons/search.svg b/source/default/_patterns/01-atoms/svg/icons/search.svg index 7894cf9b65..2e4066a44c 100644 --- a/source/default/_patterns/01-atoms/svg/icons/search.svg +++ b/source/default/_patterns/01-atoms/svg/icons/search.svg @@ -1,3 +1,3 @@ - - + + diff --git a/source/default/_patterns/01-atoms/svg/index.js b/source/default/_patterns/01-atoms/svg/index.js index ef1e490346..c18141b651 100644 --- a/source/default/_patterns/01-atoms/svg/index.js +++ b/source/default/_patterns/01-atoms/svg/index.js @@ -9,22 +9,22 @@ import svg4everybody from 'svg4everybody'; import 'protons'; import fontawesome from './fontawesome'; +// The autogenerated SVG icons from svg-spritemap-webpack-plugin +import 'svg-spritemap-webpack-plugin/svg-icons.css'; +import './sprite-svg.css'; + // Module template import './_svg--embed.twig'; import './_svg--sprite.twig'; -// Module svg assets -require.context('./icons', true, /\.svg$/); +// Import all SVGs into assets/images for reference in CSS/JS bundle +require.context('./icons', false, /\.svg$/); -// Enable Fontawesome immediately +// Enable Fontawesome immediately, comment this out if not using FontAwesome fontawesome(); export const name = 'svg'; -export const defaults = { - dummyClass: 'js-svg-exists', -}; - /** * Components may need to run clean-up tasks if they are removed from DOM. * @@ -43,7 +43,7 @@ export function disable($context, settings) {} * @param {jQuery} $context - A piece of DOM * @param {Object} settings - Settings object */ -export function enable($context, { svg = {} }) { +export function enable($context) { // Find our component within the DOM const $svg = $('.svg', $context); // Bail if component does not exist @@ -53,11 +53,6 @@ export function enable($context, { svg = {} }) { // Enable svg4everybody. svg4everybody(); - - // Merge defaults with incoming settings - const settings = Object.assign(defaults, svg); - // An example of what could be done with this component - $svg.addClass(settings.dummyClass); } export default enable; diff --git a/source/default/_patterns/01-atoms/svg/sprite-svg.css b/source/default/_patterns/01-atoms/svg/sprite-svg.css new file mode 100644 index 0000000000..c7a9303f8c --- /dev/null +++ b/source/default/_patterns/01-atoms/svg/sprite-svg.css @@ -0,0 +1,4 @@ +[class^='sprite-'] { + /* Every implmentation of the pure CSS icon MUST set it's height and width. */ + @apply inline-block; +} diff --git a/source/default/webpack.config.js b/source/default/webpack.config.js index 356410d54d..32aa4eb78b 100644 --- a/source/default/webpack.config.js +++ b/source/default/webpack.config.js @@ -8,6 +8,9 @@ const SVGSpritemapPlugin = require('svg-spritemap-webpack-plugin'); const namespaces = require('./namespaces'); +// Constants: root +const { ASSETS_ATOMIC_FOLDER } = require('../../particle.root.config'); + module.exports = { module: { rules: [ @@ -28,6 +31,16 @@ module.exports = { }, ], }, + { + test: /\.svg$/, + loader: 'file-loader', + options: { + name: '[path][name].[ext]', + outputPath: ASSETS_ATOMIC_FOLDER, + context: path.resolve(__dirname), + emit: true, + }, + }, ], }, plugins: [ @@ -40,6 +53,9 @@ module.exports = { svg4everybody: true, svgo: true, }, + styles: { + filename: '~svg-icons.css', + }, } ), ], diff --git a/webpack.particle.js b/webpack.particle.js index 337fbefbbe..97239f3a67 100644 --- a/webpack.particle.js +++ b/webpack.particle.js @@ -89,7 +89,7 @@ module.exports = { }, }, { - test: /\.(png|jpg|gif|svg)$/, + test: /\.(png|jpg|gif)$/, loader: 'file-loader', options: { name: 'images/[name].[ext]?[hash]', From 23eb18a7bf96b93cf29a385e4541fc55df6906a9 Mon Sep 17 00:00:00 2001 From: Chris Clark Date: Sun, 7 Jun 2020 19:12:29 -0700 Subject: [PATCH 4/4] Update generator demo yml files to have Demo info above content. (#825) --- .../generators/new-component/generators/app/index.js | 3 ++- .../generators/app/templates/app/patterns.yml.ejs | 11 ++++++----- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/tools/generators/new-component/generators/app/index.js b/tools/generators/new-component/generators/app/index.js index e3afd7500b..19bed5e1e0 100644 --- a/tools/generators/new-component/generators/app/index.js +++ b/tools/generators/new-component/generators/app/index.js @@ -11,7 +11,7 @@ const { join, relative, extname } = require('path'); const { readdirSync } = require('fs'); const Generator = require('yeoman-generator'); -const { camelCase, kebabCase, snakeCase } = require('lodash'); +const { camelCase, kebabCase, snakeCase, startCase } = require('lodash'); const rename = require('gulp-rename'); const { PATH_APPS } = require('../../../../../particle.root.config'); @@ -132,6 +132,7 @@ module.exports = class extends Generator { this.props = { ...props, // 'name' already exists as kebab-case-name (dashes) + upperCaseName: startCase(props.name), underscoreName: snakeCase(props.name), camelCaseName: camelCase(props.name), cleanPatternType: props.patternType.replace(/([0-9])\w+-/g, ''), diff --git a/tools/generators/new-component/generators/app/templates/app/patterns.yml.ejs b/tools/generators/new-component/generators/app/templates/app/patterns.yml.ejs index 58ac6f9802..1d2323ebdd 100644 --- a/tools/generators/new-component/generators/app/templates/app/patterns.yml.ejs +++ b/tools/generators/new-component/generators/app/templates/app/patterns.yml.ejs @@ -1,8 +1,9 @@ -<%= underscoreName %>: - example_var: This is an example var - <%= underscoreName %>_demo_block: - title: <%= name %> Component - text: + title: <%= upperCaseName %> Component + content: lead: Add a quick description here. summary: Add code examples here using html code syntax + +<%= underscoreName %>: + example_var: This is an example var +