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 @@ _svg--icon.twig partial SVGs - are rendered utilizing their filename as a variable. - FontAwesome icons can also be used through an HTML class.' diff --git a/apps/node-pl/.eslintrc.js b/apps/pl-default/.eslintrc.js similarity index 100% rename from apps/node-pl/.eslintrc.js rename to apps/pl-default/.eslintrc.js diff --git a/apps/node-pl/__tests__/pl.test.js b/apps/pl-default/__tests__/pl.test.js similarity index 100% rename from apps/node-pl/__tests__/pl.test.js rename to apps/pl-default/__tests__/pl.test.js diff --git a/apps/node-pl/glob.js b/apps/pl-default/glob.js similarity index 100% rename from apps/node-pl/glob.js rename to apps/pl-default/glob.js diff --git a/apps/node-pl/index.js b/apps/pl-default/index.js similarity index 100% rename from apps/node-pl/index.js rename to apps/pl-default/index.js diff --git a/apps/node-pl/particle.app.config.js b/apps/pl-default/particle.app.config.js similarity index 96% rename from apps/node-pl/particle.app.config.js rename to apps/pl-default/particle.app.config.js index fe966a46b4..bdf135a23e 100644 --- a/apps/node-pl/particle.app.config.js +++ b/apps/pl-default/particle.app.config.js @@ -10,7 +10,7 @@ const { } = require('../../particle.root.config'); // Used as folder name within PATH_DIST, does not have to be folder name of app -const APP_NAME = 'app-node-pl'; +const APP_NAME = 'app-pl'; // Full path to app const APP_PATH = path.resolve(__dirname); // Full path to design system used in this app diff --git a/apps/node-pl/pattern-lab/.gitignore b/apps/pl-default/pattern-lab/.gitignore similarity index 100% rename from apps/node-pl/pattern-lab/.gitignore rename to apps/pl-default/pattern-lab/.gitignore diff --git a/apps/node-pl/pattern-lab/_annotations/annotations.json b/apps/pl-default/pattern-lab/_annotations/annotations.json similarity index 100% rename from apps/node-pl/pattern-lab/_annotations/annotations.json rename to apps/pl-default/pattern-lab/_annotations/annotations.json diff --git a/apps/node-pl/pattern-lab/_data/components.yml b/apps/pl-default/pattern-lab/_data/components.yml similarity index 100% rename from apps/node-pl/pattern-lab/_data/components.yml rename to apps/pl-default/pattern-lab/_data/components.yml diff --git a/apps/node-pl/pattern-lab/_data/data.yml b/apps/pl-default/pattern-lab/_data/data.yml similarity index 97% rename from apps/node-pl/pattern-lab/_data/data.yml rename to apps/pl-default/pattern-lab/_data/data.yml index bcd5c26160..93b0be12d4 100644 --- a/apps/node-pl/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/node-pl/pattern-lab/_data/imageStyles.yml b/apps/pl-default/pattern-lab/_data/imageStyles.yml similarity index 100% rename from apps/node-pl/pattern-lab/_data/imageStyles.yml rename to apps/pl-default/pattern-lab/_data/imageStyles.yml diff --git a/apps/node-pl/pattern-lab/_meta/_00-head.mustache b/apps/pl-default/pattern-lab/_meta/_00-head.mustache similarity index 100% rename from apps/node-pl/pattern-lab/_meta/_00-head.mustache rename to apps/pl-default/pattern-lab/_meta/_00-head.mustache diff --git a/apps/node-pl/pattern-lab/_meta/_00-head.twig b/apps/pl-default/pattern-lab/_meta/_00-head.twig similarity index 100% rename from apps/node-pl/pattern-lab/_meta/_00-head.twig rename to apps/pl-default/pattern-lab/_meta/_00-head.twig diff --git a/apps/node-pl/pattern-lab/_meta/_01-foot.mustache b/apps/pl-default/pattern-lab/_meta/_01-foot.mustache similarity index 100% rename from apps/node-pl/pattern-lab/_meta/_01-foot.mustache rename to apps/pl-default/pattern-lab/_meta/_01-foot.mustache diff --git a/apps/node-pl/pattern-lab/_meta/_01-foot.twig b/apps/pl-default/pattern-lab/_meta/_01-foot.twig similarity index 100% rename from apps/node-pl/pattern-lab/_meta/_01-foot.twig rename to apps/pl-default/pattern-lab/_meta/_01-foot.twig diff --git a/apps/node-pl/pattern-lab/_patterns/00-protons-demo/_demo-block.twig b/apps/pl-default/pattern-lab/_patterns/00-protons-demo/_demo-block.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/00-protons-demo/_demo-block.twig rename to apps/pl-default/pattern-lab/_patterns/00-protons-demo/_demo-block.twig diff --git a/apps/node-pl/pattern-lab/_patterns/00-protons-demo/borders.twig b/apps/pl-default/pattern-lab/_patterns/00-protons-demo/borders.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/00-protons-demo/borders.twig rename to apps/pl-default/pattern-lab/_patterns/00-protons-demo/borders.twig diff --git a/apps/node-pl/pattern-lab/_patterns/00-protons-demo/breakpoints.twig b/apps/pl-default/pattern-lab/_patterns/00-protons-demo/breakpoints.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/00-protons-demo/breakpoints.twig rename to apps/pl-default/pattern-lab/_patterns/00-protons-demo/breakpoints.twig diff --git a/apps/node-pl/pattern-lab/_patterns/00-protons-demo/colors.twig b/apps/pl-default/pattern-lab/_patterns/00-protons-demo/colors.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/00-protons-demo/colors.twig rename to apps/pl-default/pattern-lab/_patterns/00-protons-demo/colors.twig diff --git a/apps/node-pl/pattern-lab/_patterns/00-protons-demo/index.js b/apps/pl-default/pattern-lab/_patterns/00-protons-demo/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/00-protons-demo/index.js rename to apps/pl-default/pattern-lab/_patterns/00-protons-demo/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/00-protons-demo/spacing.twig b/apps/pl-default/pattern-lab/_patterns/00-protons-demo/spacing.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/00-protons-demo/spacing.twig rename to apps/pl-default/pattern-lab/_patterns/00-protons-demo/spacing.twig diff --git a/apps/node-pl/pattern-lab/_patterns/00-protons-demo/tables.twig b/apps/pl-default/pattern-lab/_patterns/00-protons-demo/tables.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/00-protons-demo/tables.twig rename to apps/pl-default/pattern-lab/_patterns/00-protons-demo/tables.twig diff --git a/apps/node-pl/pattern-lab/_patterns/00-protons-demo/typography.twig b/apps/pl-default/pattern-lab/_patterns/00-protons-demo/typography.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/00-protons-demo/typography.twig rename to apps/pl-default/pattern-lab/_patterns/00-protons-demo/typography.twig diff --git a/apps/node-pl/pattern-lab/_patterns/00-protons-demo/welcome.twig b/apps/pl-default/pattern-lab/_patterns/00-protons-demo/welcome.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/00-protons-demo/welcome.twig rename to apps/pl-default/pattern-lab/_patterns/00-protons-demo/welcome.twig diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/alert/alerts.twig b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/alert/alerts.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/alert/alerts.twig rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/alert/alerts.twig diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/alert/alerts.yml b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/alert/alerts.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/alert/alerts.yml rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/alert/alerts.yml diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/alert/index.js b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/alert/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/alert/index.js rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/alert/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/branding/brandings.twig b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/branding/brandings.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/branding/brandings.twig rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/branding/brandings.twig diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/branding/brandings.yml b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/branding/brandings.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/branding/brandings.yml rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/branding/brandings.yml diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/branding/index.js b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/branding/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/branding/index.js rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/branding/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.twig b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.twig rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.twig diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.yml b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.yml rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/breadcrumb/breadcrumbs.yml diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/breadcrumb/index.js b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/breadcrumb/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/breadcrumb/index.js rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/breadcrumb/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/button/buttons.twig b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/button/buttons.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/button/buttons.twig rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/button/buttons.twig diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/button/buttons.yml b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/button/buttons.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/button/buttons.yml rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/button/buttons.yml diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/button/index.js b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/button/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/button/index.js rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/button/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/grid/grids.twig b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/grid/grids.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/grid/grids.twig rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/grid/grids.twig diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/grid/grids.yml b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/grid/grids.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/grid/grids.yml rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/grid/grids.yml diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/grid/index.js b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/grid/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/grid/index.js rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/grid/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/astrogoat.png b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/astrogoat.png similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/astrogoat.png rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/astrogoat.png diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/images.md b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/images.md similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/images.md rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/images.md diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/images.twig b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/images.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/images.twig rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/images.twig diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/images.yml b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/images.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/images.yml rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/images.yml diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/index.js b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/image/index.js rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/image/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/01-atoms-demo/svg/index.js b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/01-atoms-demo/svg/index.js rename to apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/index.js 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 new file mode 100644 index 0000000000..71fc68b1c7 --- /dev/null +++ b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.twig @@ -0,0 +1,107 @@ +{% embed '@demo/_demo-block.twig' with { + demo: svg_demo_block +} %} + + {% block content %} + +

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 new file mode 100644 index 0000000000..81b4799169 --- /dev/null +++ b/apps/pl-default/pattern-lab/_patterns/01-atoms-demo/svg/svgs.yml @@ -0,0 +1,7 @@ +svg_demo_block: + title: 'SVG Component' + content: + lead: 'Implements our SVG and SVG Icons.' + 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/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/card/cards.twig b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/card/cards.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/card/cards.twig rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/card/cards.twig diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/card/cards.yml b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/card/cards.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/card/cards.yml rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/card/cards.yml diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/card/index.js b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/card/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/card/index.js rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/card/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/pagination/index.js b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/pagination/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/pagination/index.js rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/pagination/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.twig b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.twig rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.twig diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.yml b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.yml rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/pagination/paginations.yml diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/tabs/index.js b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/tabs/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/tabs/index.js rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/tabs/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/tabs/tabss.twig b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/tabs/tabss.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/tabs/tabss.twig rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/tabs/tabss.twig diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/tabs/tabss.yml b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/tabs/tabss.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/tabs/tabss.yml rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/tabs/tabss.yml diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/vue-widget/index.js b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/vue-widget/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/vue-widget/index.js rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/vue-widget/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-html-example.vue b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-html-example.vue similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-html-example.vue rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-html-example.vue diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.twig b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.twig rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.twig diff --git a/apps/node-pl/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.yml b/apps/pl-default/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.yml rename to apps/pl-default/pattern-lab/_patterns/02-molecules-demo/vue-widget/vue-widgets.yml diff --git a/apps/node-pl/pattern-lab/_patterns/03-organisms-demo/article/articles.twig b/apps/pl-default/pattern-lab/_patterns/03-organisms-demo/article/articles.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/03-organisms-demo/article/articles.twig rename to apps/pl-default/pattern-lab/_patterns/03-organisms-demo/article/articles.twig diff --git a/apps/node-pl/pattern-lab/_patterns/03-organisms-demo/article/index.js b/apps/pl-default/pattern-lab/_patterns/03-organisms-demo/article/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/03-organisms-demo/article/index.js rename to apps/pl-default/pattern-lab/_patterns/03-organisms-demo/article/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.twig b/apps/pl-default/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.twig rename to apps/pl-default/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.twig diff --git a/apps/node-pl/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.yml b/apps/pl-default/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.yml rename to apps/pl-default/pattern-lab/_patterns/03-organisms-demo/card-grid/card-grids.yml diff --git a/apps/node-pl/pattern-lab/_patterns/03-organisms-demo/card-grid/index.js b/apps/pl-default/pattern-lab/_patterns/03-organisms-demo/card-grid/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/03-organisms-demo/card-grid/index.js rename to apps/pl-default/pattern-lab/_patterns/03-organisms-demo/card-grid/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/03-organisms-demo/footer/footers.twig b/apps/pl-default/pattern-lab/_patterns/03-organisms-demo/footer/footers.twig similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/03-organisms-demo/footer/footers.twig rename to apps/pl-default/pattern-lab/_patterns/03-organisms-demo/footer/footers.twig diff --git a/apps/node-pl/pattern-lab/_patterns/03-organisms-demo/footer/footers.yml b/apps/pl-default/pattern-lab/_patterns/03-organisms-demo/footer/footers.yml similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/03-organisms-demo/footer/footers.yml rename to apps/pl-default/pattern-lab/_patterns/03-organisms-demo/footer/footers.yml diff --git a/apps/node-pl/pattern-lab/_patterns/03-organisms-demo/footer/index.js b/apps/pl-default/pattern-lab/_patterns/03-organisms-demo/footer/index.js similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/03-organisms-demo/footer/index.js rename to apps/pl-default/pattern-lab/_patterns/03-organisms-demo/footer/index.js diff --git a/apps/node-pl/pattern-lab/_patterns/04-templates-demo/.gitkeep b/apps/pl-default/pattern-lab/_patterns/04-templates-demo/.gitkeep similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/04-templates-demo/.gitkeep rename to apps/pl-default/pattern-lab/_patterns/04-templates-demo/.gitkeep diff --git a/apps/node-pl/pattern-lab/_patterns/05-pages-demo/.gitkeep b/apps/pl-default/pattern-lab/_patterns/05-pages-demo/.gitkeep similarity index 100% rename from apps/node-pl/pattern-lab/_patterns/05-pages-demo/.gitkeep rename to apps/pl-default/pattern-lab/_patterns/05-pages-demo/.gitkeep diff --git a/apps/node-pl/pattern-lab/alter-twig.php b/apps/pl-default/pattern-lab/alter-twig.php similarity index 100% rename from apps/node-pl/pattern-lab/alter-twig.php rename to apps/pl-default/pattern-lab/alter-twig.php diff --git a/apps/node-pl/pattern-lab/favicon.ico b/apps/pl-default/pattern-lab/favicon.ico similarity index 100% rename from apps/node-pl/pattern-lab/favicon.ico rename to apps/pl-default/pattern-lab/favicon.ico diff --git a/apps/node-pl/pattern_exports/.gitkeep b/apps/pl-default/pattern_exports/.gitkeep similarity index 100% rename from apps/node-pl/pattern_exports/.gitkeep rename to apps/pl-default/pattern_exports/.gitkeep diff --git a/apps/node-pl/patternlab-config.json b/apps/pl-default/patternlab-config.json similarity index 83% rename from apps/node-pl/patternlab-config.json rename to apps/pl-default/patternlab-config.json index 5190044f80..dadf8885b6 100644 --- a/apps/node-pl/patternlab-config.json +++ b/apps/pl-default/patternlab-config.json @@ -54,11 +54,11 @@ }, "paths": { "source": { - "root": "./apps/node-pl/pattern-lab/", - "patterns": "./apps/node-pl/pattern-lab/_patterns/", - "data": "./apps/node-pl/pattern-lab/_data/", - "meta": "./apps/node-pl/pattern-lab/_meta/", - "annotations": "./apps/node-pl/pattern-lab/_annotations/", + "root": "./apps/pl-default/pattern-lab/", + "patterns": "./apps/pl-default/pattern-lab/_patterns/", + "data": "./apps/pl-default/pattern-lab/_data/", + "meta": "./apps/pl-default/pattern-lab/_meta/", + "annotations": "./apps/pl-default/pattern-lab/_annotations/", "styleguide": "dist/", "patternlabFiles": { "general-header": "views/partials/general-header.mustache", @@ -69,11 +69,11 @@ } }, "public": { - "root": "dist/app-node-pl/pl", - "patterns": "dist/app-node-pl/pl/patterns/", - "data": "dist/app-node-pl/pl/styleguide/data/", - "annotations": "dist/app-node-pl/pl/annotations/", - "styleguide": "dist/app-node-pl/pl/styleguide/" + "root": "dist/app-pl/pl", + "patterns": "dist/app-pl/pl/patterns/", + "data": "dist/app-pl/pl/styleguide/data/", + "annotations": "dist/app-pl/pl/annotations/", + "styleguide": "dist/app-pl/pl/styleguide/" } }, "patternExtension": "twig", @@ -88,7 +88,7 @@ "inreview", "complete" ], - "patternExportDirectory": "apps/node-pl/pattern_exports/", + "patternExportDirectory": "apps/pl-default/pattern_exports/", "patternExportPatternPartials": [], "serverOptions": { "wait": 1000 @@ -165,7 +165,7 @@ "id": "demo", "recursive": true, "paths": [ - "./apps/node-pl/pattern-lab/_patterns/00-protons-demo" + "./apps/pl-default/pattern-lab/_patterns/00-protons-demo" ] }, { @@ -178,7 +178,7 @@ ], "alterTwigEnv": [ { - "file": "./apps/node-pl/pattern-lab/alter-twig.php", + "file": "./apps/pl-default/pattern-lab/alter-twig.php", "functions": [ "addFilters", "addFunctions", diff --git a/apps/node-pl/pl-app.js b/apps/pl-default/pl-app.js similarity index 100% rename from apps/node-pl/pl-app.js rename to apps/pl-default/pl-app.js diff --git a/apps/node-pl/webpack.config.js b/apps/pl-default/webpack.config.js similarity index 95% rename from apps/node-pl/webpack.config.js rename to apps/pl-default/webpack.config.js index e7a65191b5..91b9cbf1ed 100644 --- a/apps/node-pl/webpack.config.js +++ b/apps/pl-default/webpack.config.js @@ -62,9 +62,9 @@ const dev = { // Refresh devServer when dist/ changes (Pattern Lab) watchContentBase: true, watchOptions: { - // Ignore all folders inside dist/app-node-pl so pl rebuilds refresh. + // Ignore all folders inside dist/app-pl so pl rebuilds refresh. // Note: prevents Webpack from watching many pl files, - ignored: /app-node-pl/, + ignored: /app-pl/, }, // Open browser immediately open: true, @@ -102,7 +102,7 @@ const dev = { // Recompile PL on any globed PL file (see glob.js) new RunScriptOnFiletypeChange({ test: /\.(twig|yml|md|json)$/, - exec: [`npm run pl-node`], + exec: [`npm run pl`], }), ], }; diff --git a/contributing.md b/contributing.md index 6870557072..c11dffb270 100644 --- a/contributing.md +++ b/contributing.md @@ -1,5 +1,9 @@ # Contributing -Before contributing, please ensure your IDE or text editor is using the `.editorconfig` at the root of this project. To achieve this easily, see the docs section titled ["IDE/text editor setup"](https://phase2.gitbook.io/frontend/particle/development/coding-and-linting#ide-text-editor-setup) +Before contributing, please ensure your IDE or text editor is using the +`.editorconfig` at the root of this project. To achieve this easily, see the +docs section titled +["IDE/text editor setup"](https://phase2.gitbook.io/frontend/particle/development/coding-and-linting#ide-text-editor-setup) -Then to contribute to these tools, just fork this repo, modify as you see fit and push up a pull request! +Then to contribute to these tools, just fork this repo, modify as you see fit +and push up a pull request! diff --git a/docs/PATCHING.md b/docs/PATCHING.md index b449f1b2d3..7b9c2500ad 100644 --- a/docs/PATCHING.md +++ b/docs/PATCHING.md @@ -1,20 +1,20 @@ # Patching Particle -It is possible to patch `node_modules` in use by Particle. This is particularly -useful for Node Pattern Lab 3, which at the time of writing is still in Beta. +It is possible to patch `node_modules` in use by Particle. ## Requirements -* [patch package](https://www.npmjs.com/package/patch-package) adds the ability -to patch packages directly. +- [patch package](https://www.npmjs.com/package/patch-package) adds the ability + to patch packages directly. ## Installation -* `npm i patch-package --save-dev` +- `npm i patch-package --save-dev` ## Usage Add the following to your `package.json` file ins Particle: + ``` "scripts": { "postinstall": "patch-package" @@ -29,6 +29,5 @@ root of Particle. When you run `npm install`, the `patch-package` module will run with the postinstall script above, patching your `npm` package with the source from the -`patches` directory. -Make sure to monitor these patches for any stale patches and prune as projects -are updated. +`patches` directory. Make sure to monitor these patches for any stale patches +and prune as projects are updated. diff --git a/package.json b/package.json index 729ce5ac6d..a4f5b29aee 100644 --- a/package.json +++ b/package.json @@ -17,21 +17,22 @@ "prototyping" ], "scripts": { - "start": "npm run dev:pl-node", - "pl-node": "node ./apps/node-pl/pl-app.js", - "setup": "patternlab install --config ./apps/node-pl/patternlab-config.json && patternlab build --config ./apps/node-pl/patternlab-config.json", - "export:pl": "patternlab export --config ./apps/node-pl/patternlab-config.json", - "dev:pl-node": "cross-env-shell NODE_ENV=development \"npm run pl-node & webpack-dev-server --config ./apps/node-pl/webpack.config.js --hot\"", - "build:pl": "cross-env-shell NODE_ENV=production \"npm run pl-node && webpack --config ./apps/node-pl/webpack.config.js\"", - "dev:drupal": "cross-env-shell NODE_ENV=development \"webpack --watch --config ./apps/drupal/webpack.config.js\"", - "build:drupal": "cross-env-shell NODE_ENV=production \"webpack --hide-modules --config ./apps/drupal/webpack.config.js\"", + "start": "npm run dev:pl", + "pl": "node ./apps/pl-default/pl-app.js", + "setup": "patternlab install --config ./apps/pl-default/patternlab-config.json && patternlab build --config ./apps/pl-default/patternlab-config.json", + "export:pl": "patternlab export --config ./apps/pl-default/patternlab-config.json", + "dev:pl": "cross-env-shell NODE_ENV=development \"npm run pl & webpack-dev-server --config ./apps/pl-default/webpack.config.js --hot\"", + "build:pl": "cross-env-shell NODE_ENV=production \"npm run pl && webpack --config ./apps/pl-default/webpack.config.js\"", + "dev:drupal": "cross-env-shell NODE_ENV=development \"webpack --watch --config ./apps/drupal-default/webpack.config.js\"", + "build:drupal": "cross-env-shell NODE_ENV=production \"webpack --hide-modules --config ./apps/drupal-default/webpack.config.js\"", "lint:js": "eslint --ext .js,.vue ./", "lint:css": "stylelint '**/*.css'", "lint": "npm run lint:js; npm run lint:css;", "fmt:js": "npm run lint:js -- --fix", "fmt:css": "npm run lint:css -- --fix && prettier --loglevel warn --write '**/*.css'", "fmt:svg": "svgo -f ./source/default/_patterns/01-atoms/svg/icons --config=./.svgo.yml", - "fmt": "npm run fmt:svg; npm run fmt:js; npm run fmt:css", + "fmt:md": "prettier --prose-wrap always --write '**/*.md'", + "fmt": "npm run fmt:svg; npm run fmt:js; npm run fmt:css; npm run fmt:md;", "test:backstop:ref": "node tools/tests/vrt/backstop-example-reference.js", "test:backstop:test": "node tools/tests/vrt/backstop-example-test.js", "test:pa11y": "pa11y-ci --config tools/tests/accessibility/pa11y.js", diff --git a/source/default/_patterns/01-atoms/svg/README.md b/source/default/_patterns/01-atoms/svg/README.md index 072ee4fc85..d3a4feeec1 100644 --- a/source/default/_patterns/01-atoms/svg/README.md +++ b/source/default/_patterns/01-atoms/svg/README.md @@ -1,4 +1,5 @@ # SVG Pattern + The SVG is a special pattern in Particle that is designed to allow us to include SVG files as CSS or inline. Furthermore, this pattern contains an `icons` sub-directory that is optimized automatically via @@ -6,33 +7,12 @@ sub-directory that is optimized automatically via by running `npm run fmt:svg` or `npm run fmt`. ## Adding Icons SVG + To add an Icon SVG to the system, simply add it to `@atoms/svg/icons/` directory and run the format command. This format 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 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/_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 3bbe70c052..b0c356050d 100644 --- a/source/default/_patterns/01-atoms/svg/icons/README.md +++ b/source/default/_patterns/01-atoms/svg/icons/README.md @@ -1,36 +1,16 @@ # 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 + +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 files. You can adjust the configuration at Particle's root in `/.svgo.yml`. 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/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/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/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/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 + 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. 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]',