diff --git a/.babelrc b/.babelrc index af0f0c3d35..002b4aa0d5 100644 --- a/.babelrc +++ b/.babelrc @@ -1,3 +1,3 @@ { - "presets": ["es2015"] -} \ No newline at end of file + "presets": ["env"] +} diff --git a/.bowerrc b/.bowerrc deleted file mode 100755 index 69fad35801..0000000000 --- a/.bowerrc +++ /dev/null @@ -1,3 +0,0 @@ -{ - "directory": "bower_components" -} diff --git a/.editorconfig b/.editorconfig index cf0dff6536..9bf4a1c81f 100755 --- a/.editorconfig +++ b/.editorconfig @@ -2,4 +2,11 @@ [*] indent_style = space indent_size = 2 +tab_width = 2 +end_of_line = lf insert_final_newline = true +trim_trailing_whitespace = true +charset = utf-8 + +[composer.{json,lock}] +indent_size = 4 diff --git a/.eslintignore b/.eslintignore index 3494daf01f..482b40c435 100644 --- a/.eslintignore +++ b/.eslintignore @@ -1,2 +1,7 @@ # Ignore any path/file using .gitignore syntax, ie: # js/vendor + +dist/ +apps/pl/pattern-lab +# Ignore yeoman new-component for now +tools/new-component diff --git a/.eslintrc.js b/.eslintrc.js index c7e9e450fc..538cfd558c 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -1,19 +1,26 @@ -// rule reference: http://eslint.org/docs/rules -// individual rule reference: http://eslint.org/docs/rules/NAME-OF-RULE +// Rule reference: http://eslint.org/docs/rules +// Individual rule reference: http://eslint.org/docs/rules/NAME-OF-RULE module.exports = { extends: "airbnb", globals: { Drupal: true, jQuery: true, _: true, - domready: true, + BUILD_TARGET: true, + }, + env: { + "browser": true, }, rules: { - 'no-comma-dangle': [0], - 'strict': [0], - 'no-param-reassign': [1, { - props: false, - }], + 'no-console': [0], // turned off for now while we are console.logging everywhere. 'react/require-extension': [0], + 'import/no-extraneous-dependencies': ["error", {"devDependencies": true}], + }, + settings: { + 'import/resolver': { + webpack: { + config: 'webpack.shared.config.js' + } + } } }; diff --git a/.gitignore b/.gitignore index 7319a19a21..52a80079e4 100755 --- a/.gitignore +++ b/.gitignore @@ -1,17 +1,22 @@ # Compiled files -dest/ -source/_patterns/01-atoms/images/_icons-settings.scss +dist/ +source/_patterns/01-atoms/icon/font/ +source/_patterns/01-atoms/icon/scss/_icon-map-generated.scss # OS generated files .DS_Store .DS_Store? +._.DS_Store +._.DS_Store? # Dependencies -bower_components node_modules +vendor # Generated files *.sass-cache/ +.eslintcache +*unison.* #IDE plugins .idea diff --git a/.stylelintignore b/.stylelintignore deleted file mode 100644 index 012e13443e..0000000000 --- a/.stylelintignore +++ /dev/null @@ -1,2 +0,0 @@ -# Ignore any path/file using .gitignore syntax, ie: -# scss/vendor diff --git a/.stylelintrc.js b/.stylelintrc similarity index 63% rename from .stylelintrc.js rename to .stylelintrc index 7eb92b9bac..67ba6e3687 100644 --- a/.stylelintrc.js +++ b/.stylelintrc @@ -1,25 +1,23 @@ -'use strict'; -// Docs: http://stylelint.io -// Style lint rule detail: https://github.com/stylelint/stylelint/tree/master/src/rules/RULE-NAME - -module.exports = { - plugins: [ +{ + "plugins": [ "stylelint-scss", ], - ignoreFiles: [], - rules: { + "ignoreFiles": [ + "apps/pl/pattern-lab/**/*" + ], + "rules": { "declaration-colon-space-after": "always", "declaration-no-important": true, "indentation": 2, "max-nesting-depth": 3, "selector-max-specificity": "0,3,3", - "selector-no-id": true, + "selector-max-id": 0, "scss/at-extend-no-missing-placeholder": true, "scss/selector-no-redundant-nesting-selector": true, "at-rule-no-vendor-prefix": true, "media-feature-name-no-vendor-prefix": true, "property-no-vendor-prefix": true, "selector-no-vendor-prefix": true, - "value-no-vendor-prefix": true, - }, -}; + "value-no-vendor-prefix": true + } +} diff --git a/.travis.yml b/.travis.yml index 716f7bdefd..2edee6e5fe 100644 --- a/.travis.yml +++ b/.travis.yml @@ -1,25 +1,35 @@ language: php -# Tests will be for each version in `php` combined with each node version in `env` php: - - 5.5 - - 7.0 +- 5.6 +- 7.1 env: - - TRAVIS_NODE_VERSION="4" - - TRAVIS_NODE_VERSION="6" + matrix: + - CXX=g++-4.8 TRAVIS_NODE_VERSION="8" +addons: + apt: + sources: + - ubuntu-toolchain-r-test + packages: + - g++-4.8 before_install: -# - composer clear-cache - - rm -rf ~/.nvm && git clone https://github.com/creationix/nvm.git ~/.nvm && (cd ~/.nvm && git checkout `git describe --abbrev=0 --tags`) && source ~/.nvm/nvm.sh && nvm install $TRAVIS_NODE_VERSION +- composer self-update +- . $HOME/.nvm/nvm.sh +- nvm install $TRAVIS_NODE_VERSION +- nvm use $TRAVIS_NODE_VERSION +- npm install -g npm5 install: - - npm install - - npm run setup +- composer clear-cache +- npm install +- npm run setup before_script: - - php --version - - node --version - - npm --version -script: 'npm run compile && npm test' +- php --version +- composer --version +- node --version +- npm --version +script: npm run lint && npm run compile:pl notifications: email: - on_success: never + on_success: always on_failure: always flowdock: - secure: RBLFcGBNV8iBA3pBGqGzq5o2Kt+X0IESDtuWnamGurhXItdd0Qh8LZwGmbcZdBuncJQ/WvC5/umCZykf0BeMOiu5TnhJKH3ett0qQT8dxJI9aykwbk/+xyCX09tQJ6jejhcDmu394SUlXYb8DBPnlmE345EVbtjFt9Wxo+ZskCo= + secure: dE853wBiC+WZkrB1IWks/pALiBu/CjCVgulay9A7ptW2uWuv2Y4Wr+pLcELVUl0AYBMTBc20mwWilDO0nf0vnwBrX7oXkCRkAwlDcNt+u/ZR3dykCaDlUq88+2XBBFLBDGriCI1bZ2eTS14ED7QbfnHf71caYKJjrUa2nXwBGc0= diff --git a/LICENSE b/LICENSE new file mode 100644 index 0000000000..23cb790338 --- /dev/null +++ b/LICENSE @@ -0,0 +1,339 @@ + GNU GENERAL PUBLIC LICENSE + Version 2, June 1991 + + Copyright (C) 1989, 1991 Free Software Foundation, Inc., + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA + Everyone is permitted to copy and distribute verbatim copies + of this license document, but changing it is not allowed. + + Preamble + + The licenses for most software are designed to take away your +freedom to share and change it. By contrast, the GNU General Public +License is intended to guarantee your freedom to share and change free +software--to make sure the software is free for all its users. This +General Public License applies to most of the Free Software +Foundation's software and to any other program whose authors commit to +using it. (Some other Free Software Foundation software is covered by +the GNU Lesser General Public License instead.) You can apply it to +your programs, too. + + When we speak of free software, we are referring to freedom, not +price. Our General Public Licenses are designed to make sure that you +have the freedom to distribute copies of free software (and charge for +this service if you wish), that you receive source code or can get it +if you want it, that you can change the software or use pieces of it +in new free programs; and that you know you can do these things. + + To protect your rights, we need to make restrictions that forbid +anyone to deny you these rights or to ask you to surrender the rights. +These restrictions translate to certain responsibilities for you if you +distribute copies of the software, or if you modify it. + + For example, if you distribute copies of such a program, whether +gratis or for a fee, you must give the recipients all the rights that +you have. You must make sure that they, too, receive or can get the +source code. And you must show them these terms so they know their +rights. + + We protect your rights with two steps: (1) copyright the software, and +(2) offer you this license which gives you legal permission to copy, +distribute and/or modify the software. + + Also, for each author's protection and ours, we want to make certain +that everyone understands that there is no warranty for this free +software. If the software is modified by someone else and passed on, we +want its recipients to know that what they have is not the original, so +that any problems introduced by others will not reflect on the original +authors' reputations. + + Finally, any free program is threatened constantly by software +patents. We wish to avoid the danger that redistributors of a free +program will individually obtain patent licenses, in effect making the +program proprietary. To prevent this, we have made it clear that any +patent must be licensed for everyone's free use or not licensed at all. + + The precise terms and conditions for copying, distribution and +modification follow. + + GNU GENERAL PUBLIC LICENSE + TERMS AND CONDITIONS FOR COPYING, DISTRIBUTION AND MODIFICATION + + 0. This License applies to any program or other work which contains +a notice placed by the copyright holder saying it may be distributed +under the terms of this General Public License. The "Program", below, +refers to any such program or work, and a "work based on the Program" +means either the Program or any derivative work under copyright law: +that is to say, a work containing the Program or a portion of it, +either verbatim or with modifications and/or translated into another +language. (Hereinafter, translation is included without limitation in +the term "modification".) Each licensee is addressed as "you". + +Activities other than copying, distribution and modification are not +covered by this License; they are outside its scope. The act of +running the Program is not restricted, and the output from the Program +is covered only if its contents constitute a work based on the +Program (independent of having been made by running the Program). +Whether that is true depends on what the Program does. + + 1. You may copy and distribute verbatim copies of the Program's +source code as you receive it, in any medium, provided that you +conspicuously and appropriately publish on each copy an appropriate +copyright notice and disclaimer of warranty; keep intact all the +notices that refer to this License and to the absence of any warranty; +and give any other recipients of the Program a copy of this License +along with the Program. + +You may charge a fee for the physical act of transferring a copy, and +you may at your option offer warranty protection in exchange for a fee. + + 2. You may modify your copy or copies of the Program or any portion +of it, thus forming a work based on the Program, and copy and +distribute such modifications or work under the terms of Section 1 +above, provided that you also meet all of these conditions: + + a) You must cause the modified files to carry prominent notices + stating that you changed the files and the date of any change. + + b) You must cause any work that you distribute or publish, that in + whole or in part contains or is derived from the Program or any + part thereof, to be licensed as a whole at no charge to all third + parties under the terms of this License. + + c) If the modified program normally reads commands interactively + when run, you must cause it, when started running for such + interactive use in the most ordinary way, to print or display an + announcement including an appropriate copyright notice and a + notice that there is no warranty (or else, saying that you provide + a warranty) and that users may redistribute the program under + these conditions, and telling the user how to view a copy of this + License. (Exception: if the Program itself is interactive but + does not normally print such an announcement, your work based on + the Program is not required to print an announcement.) + +These requirements apply to the modified work as a whole. If +identifiable sections of that work are not derived from the Program, +and can be reasonably considered independent and separate works in +themselves, then this License, and its terms, do not apply to those +sections when you distribute them as separate works. But when you +distribute the same sections as part of a whole which is a work based +on the Program, the distribution of the whole must be on the terms of +this License, whose permissions for other licensees extend to the +entire whole, and thus to each and every part regardless of who wrote it. + +Thus, it is not the intent of this section to claim rights or contest +your rights to work written entirely by you; rather, the intent is to +exercise the right to control the distribution of derivative or +collective works based on the Program. + +In addition, mere aggregation of another work not based on the Program +with the Program (or with a work based on the Program) on a volume of +a storage or distribution medium does not bring the other work under +the scope of this License. + + 3. You may copy and distribute the Program (or a work based on it, +under Section 2) in object code or executable form under the terms of +Sections 1 and 2 above provided that you also do one of the following: + + a) Accompany it with the complete corresponding machine-readable + source code, which must be distributed under the terms of Sections + 1 and 2 above on a medium customarily used for software interchange; or, + + b) Accompany it with a written offer, valid for at least three + years, to give any third party, for a charge no more than your + cost of physically performing source distribution, a complete + machine-readable copy of the corresponding source code, to be + distributed under the terms of Sections 1 and 2 above on a medium + customarily used for software interchange; or, + + c) Accompany it with the information you received as to the offer + to distribute corresponding source code. (This alternative is + allowed only for noncommercial distribution and only if you + received the program in object code or executable form with such + an offer, in accord with Subsection b above.) + +The source code for a work means the preferred form of the work for +making modifications to it. For an executable work, complete source +code means all the source code for all modules it contains, plus any +associated interface definition files, plus the scripts used to +control compilation and installation of the executable. However, as a +special exception, the source code distributed need not include +anything that is normally distributed (in either source or binary +form) with the major components (compiler, kernel, and so on) of the +operating system on which the executable runs, unless that component +itself accompanies the executable. + +If distribution of executable or object code is made by offering +access to copy from a designated place, then offering equivalent +access to copy the source code from the same place counts as +distribution of the source code, even though third parties are not +compelled to copy the source along with the object code. + + 4. You may not copy, modify, sublicense, or distribute the Program +except as expressly provided under this License. Any attempt +otherwise to copy, modify, sublicense or distribute the Program is +void, and will automatically terminate your rights under this License. +However, parties who have received copies, or rights, from you under +this License will not have their licenses terminated so long as such +parties remain in full compliance. + + 5. You are not required to accept this License, since you have not +signed it. However, nothing else grants you permission to modify or +distribute the Program or its derivative works. These actions are +prohibited by law if you do not accept this License. Therefore, by +modifying or distributing the Program (or any work based on the +Program), you indicate your acceptance of this License to do so, and +all its terms and conditions for copying, distributing or modifying +the Program or works based on it. + + 6. Each time you redistribute the Program (or any work based on the +Program), the recipient automatically receives a license from the +original licensor to copy, distribute or modify the Program subject to +these terms and conditions. You may not impose any further +restrictions on the recipients' exercise of the rights granted herein. +You are not responsible for enforcing compliance by third parties to +this License. + + 7. If, as a consequence of a court judgment or allegation of patent +infringement or for any other reason (not limited to patent issues), +conditions are imposed on you (whether by court order, agreement or +otherwise) that contradict the conditions of this License, they do not +excuse you from the conditions of this License. If you cannot +distribute so as to satisfy simultaneously your obligations under this +License and any other pertinent obligations, then as a consequence you +may not distribute the Program at all. For example, if a patent +license would not permit royalty-free redistribution of the Program by +all those who receive copies directly or indirectly through you, then +the only way you could satisfy both it and this License would be to +refrain entirely from distribution of the Program. + +If any portion of this section is held invalid or unenforceable under +any particular circumstance, the balance of the section is intended to +apply and the section as a whole is intended to apply in other +circumstances. + +It is not the purpose of this section to induce you to infringe any +patents or other property right claims or to contest validity of any +such claims; this section has the sole purpose of protecting the +integrity of the free software distribution system, which is +implemented by public license practices. Many people have made +generous contributions to the wide range of software distributed +through that system in reliance on consistent application of that +system; it is up to the author/donor to decide if he or she is willing +to distribute software through any other system and a licensee cannot +impose that choice. + +This section is intended to make thoroughly clear what is believed to +be a consequence of the rest of this License. + + 8. If the distribution and/or use of the Program is restricted in +certain countries either by patents or by copyrighted interfaces, the +original copyright holder who places the Program under this License +may add an explicit geographical distribution limitation excluding +those countries, so that distribution is permitted only in or among +countries not thus excluded. In such case, this License incorporates +the limitation as if written in the body of this License. + + 9. The Free Software Foundation may publish revised and/or new versions +of the General Public License from time to time. Such new versions will +be similar in spirit to the present version, but may differ in detail to +address new problems or concerns. + +Each version is given a distinguishing version number. If the Program +specifies a version number of this License which applies to it and "any +later version", you have the option of following the terms and conditions +either of that version or of any later version published by the Free +Software Foundation. If the Program does not specify a version number of +this License, you may choose any version ever published by the Free Software +Foundation. + + 10. If you wish to incorporate parts of the Program into other free +programs whose distribution conditions are different, write to the author +to ask for permission. For software which is copyrighted by the Free +Software Foundation, write to the Free Software Foundation; we sometimes +make exceptions for this. Our decision will be guided by the two goals +of preserving the free status of all derivatives of our free software and +of promoting the sharing and reuse of software generally. + + NO WARRANTY + + 11. BECAUSE THE PROGRAM IS LICENSED FREE OF CHARGE, THERE IS NO WARRANTY +FOR THE PROGRAM, TO THE EXTENT PERMITTED BY APPLICABLE LAW. EXCEPT WHEN +OTHERWISE STATED IN WRITING THE COPYRIGHT HOLDERS AND/OR OTHER PARTIES +PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESSED +OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF +MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE. THE ENTIRE RISK AS +TO THE QUALITY AND PERFORMANCE OF THE PROGRAM IS WITH YOU. SHOULD THE +PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF ALL NECESSARY SERVICING, +REPAIR OR CORRECTION. + + 12. IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING +WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MAY MODIFY AND/OR +REDISTRIBUTE THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, +INCLUDING ANY GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING +OUT OF THE USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED +TO LOSS OF DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY +YOU OR THIRD PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER +PROGRAMS), EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE +POSSIBILITY OF SUCH DAMAGES. + + END OF TERMS AND CONDITIONS + + How to Apply These Terms to Your New Programs + + If you develop a new program, and you want it to be of the greatest +possible use to the public, the best way to achieve this is to make it +free software which everyone can redistribute and change under these terms. + + To do so, attach the following notices to the program. It is safest +to attach them to the start of each source file to most effectively +convey the exclusion of warranty; and each file should have at least +the "copyright" line and a pointer to where the full notice is found. + + {description} + Copyright (C) {year} {fullname} + + This program is free software; you can redistribute it and/or modify + it under the terms of the GNU General Public License as published by + the Free Software Foundation; either version 2 of the License, or + (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU General Public License for more details. + + You should have received a copy of the GNU General Public License along + with this program; if not, write to the Free Software Foundation, Inc., + 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA. + +Also add information on how to contact you by electronic and paper mail. + +If the program is interactive, make it output a short notice like this +when it starts in an interactive mode: + + Gnomovision version 69, Copyright (C) year name of author + Gnomovision comes with ABSOLUTELY NO WARRANTY; for details type `show w'. + This is free software, and you are welcome to redistribute it + under certain conditions; type `show c' for details. + +The hypothetical commands `show w' and `show c' should show the appropriate +parts of the General Public License. Of course, the commands you use may +be called something other than `show w' and `show c'; they could even be +mouse-clicks or menu items--whatever suits your program. + +You should also get your employer (if you work as a programmer) or your +school, if any, to sign a "copyright disclaimer" for the program, if +necessary. Here is a sample; alter the names: + + Yoyodyne, Inc., hereby disclaims all copyright interest in the program + `Gnomovision' (which makes passes at compilers) written by James Hacker. + + {signature of Ty Coon}, 1 April 1989 + Ty Coon, President of Vice + +This General Public License does not permit incorporating your program into +proprietary programs. If your program is a subroutine library, you may +consider it more useful to permit linking proprietary applications with the +library. If this is what you want to do, use the GNU Lesser General +Public License instead of this License. diff --git a/README.md b/README.md index ccf9c8cc9e..a54132deb4 100644 --- a/README.md +++ b/README.md @@ -1,266 +1,540 @@ -[![Build Status](https://travis-ci.org/phase2/pattern-lab-starter.svg?branch=master)](https://travis-ci.org/phase2/pattern-lab-starter) +# Particle: A design system integrating to Pattern Lab and a Drupal 8 theme -# Prerequisites +[![Build Status](https://travis-ci.org/phase2/particle.svg?branch=master)](https://travis-ci.org/phase2/particle) [![Greenkeeper badge](https://badges.greenkeeper.io/phase2/pattern-lab-starter.svg)](https://greenkeeper.io/) -[![Greenkeeper badge](https://badges.greenkeeper.io/phase2/pattern-lab-starter.svg)](https://greenkeeper.io/) +Particle is an opinionated set of tools and examples to: -- [Node](https://nodejs.org) v6 + (v4 might work, no promises) -- PHP 5.4, 5.5, 5.6, OR 7 (5.3 might work, no promises) -- [`composer`](https://getcomposer.org) +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 **Drupal theme** -# QuickStart +In depth documentation about frontend approach using this project at [Phase2 Frontend Docs](https://phase2.github.io/frontend-docs/) -[Download this repo](https://github.com/phase2/pattern-lab-starter/archive/master.zip), rename folder to `patternlab` and place in themes directory if integrating with Drupal 8, and then `cd` into folder before running below commands. To name it something else, see [docs/setup.md](docs/setup.md). +## Prerequisites + +- [Node `^8.0.0`](https://nodejs.org) +- [PHP `5.6`, `^7.0.0`](https://php.net) +- [Composer `^1.0.0`](https://getcomposer.org) + +## Provides + +- Drupal 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 and Pattern Lab) +- Webpack Dev Server for local hosting and auto asset injection into Pattern Lab and Drupal +- [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 +- Bootstrap 4 integration, used for all starting example components +- Auto-linting against the [AirBnB JavaScript Style Guide](https://github.com/airbnb/javascript) and sane Sass standards +- All Webpack and Gulp files are fully configurable + +## Quickstart + +Particle can be run from anywhere to work with Pattern Lab. It also provides a theme to a Drupal website. + +### Quickstart anywhere + +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. Within the extracted folder run: ```bash -npm install # or `yarn install` if you want 3x the speed +npm install npm run setup npm start ``` -If you're using Drupal 8, get the [Component Libraries module](https://www.drupal.org/project/components): +Simply wait until the webpack bundle output appears then visit [http://0.0.0.0/pl](http://0.0.0.0/pl) (or [http://localhost/pl](http://localhost/pl)) and start working. + +### Quickstart with Drupal 8 + +Particle provides a Drupal 8 theme, the starting steps are slightly different: + +1. [Download the latest release](https://github.com/phase2/particle/releases) +1. Extract to `themes/` at the root of your Drupal 8 install. (i.e. this readme should be at `drupal-root/themes/particle/README.md`) +1. Download and install the [Component Libraries module](https://www.drupal.org/project/components): ```bash drush dl components drush en components -y ``` -That's it. +1. Within `drupal-root/themes/particle/` run: + +```bash +npm install +npm run setup +npm run compile:drupal +``` + +This will compile all assets and provide all namespaced Twig paths to the Drupal theme. Make sure to choose this theme in Drupal Appearance settings and `drush cr` to clear cache. + +For subsequent recompile and Drupal cache clear, run: + +```bash +npm run compile:drupal && drush cr +``` + +Working rapidly in Pattern Lab is still available, simply run: + +```bash +npm start +``` + +Just like in the regular Quickstart, when Webpack output appears, visit [http://0.0.0.0/pl](http://0.0.0.0/pl) (or [http://localhost/pl](http://localhost/pl)) to immediately start building and previewing your design system in Pattern Lab. + +That's it. For **much** greater detail on the frontend approach using this project, check out the [Phase2 Frontend Docs](https://phase2.github.io/frontend-docs/). ## Commands -Compile everything: +Quick compile Pattern Lab: + +```bash +npm run compile:pl +``` + +Quick compile Drupal ```bash -npm run compile +npm run compile:drupal ``` -Start up watches and local server after compiling: +Start up watches and local server: ```bash -npm run start # or `npm start` +npm start ``` -> Protip: any config option from `gulpconfig.yml` can be overwritten with `npm start -- --js.enabled=''`, or by including options in your own `~/.p2-theme-corerc` file. See [`rc`](https://www.npmjs.com/package/rc) for more details. +Run all linters: -Run Tests: +```bash +npm run lint +``` + +Run all tests: ```bash -npm run test # or `npm test` +npm test ``` -Create a new component folder in Pattern Lab with scss, twig, md, & yml/json by running: +Run accessibility testing on Pattern Lab rendered output: ```bash -npm run new +npm run test:accessibility ``` -To update node and composer dependencies (if you see messages about Pattern Lab wanting to Merge or Replace files, merge them): +To update node and composer dependencies (**merge** if offered the option): ```bash npm run update ``` -## Assets +## Structure + +The following are significant items at the root level: + + # ./ + . + ├── apps # Things that use the compiled design system. Drupal theme & PL + ├── dist # Bundled output: CSS, js, images, app artifacts (like PL html) + ├── source # The design system. All assets compiled to dist/ + ├── tools # Gulp plugins and node tools + ├── gulpfile.js # Defines the few tasks required in the workflow + ├── webpack.drupal.config.js # Entry point for the Drupal theme bundle + ├── webpack.pl.config.js # Entry point for the Pattern Lab bundle + ├── webpack.shared.config.js # Shared bundle configuration for all entry points + └── ... # Mostly just config + +`source/` holds all assets for the design system and looks like this: + + # ./source/ + . + ├── _patterns # All assets live within an Atomic "pattern" + │ ├── 01-atoms # Twig namespace: @atoms, JS/Sass namespace: atoms + │ │ ├── button # For instance, the button atom + │ │ │ ├── demo # Patterns feature a demo folder to show implementation + │ │ │ │ ├── buttons.twig # Demonstrate with a plural name, visible to PL since no underscore + │ │ │ │ └── buttons.yml # Data provided to the demo pattern + │ │ │ ├── _button.scss # Most components require styles, underscore required + │ │ │ ├── _button.twig # The pure component template, underscore required + │ │ │ └── index.js # Component entry point (See "Anatomy of a Component below) + │ │ └── ... # Other @atoms + │ └── ... # @protons, @atoms, @molecules, @organisms, @templates, @pages + └── design-system.js # The ultimate importer/exporter of the design system pieces + +>The design system is *consumed by* "apps". The two apps included are a Drupal theme and a Pattern Lab installation. + +`app/pl/` holds the *entry point* for all Pattern Lab assets, as well as the PHP engine: + + # ./app/pl/ + . + ├── pattern-lab/ # Holds the Pattern Lab installation + │ ├── ... # composer.json, config, console php, ... + ├── scss # PL-only Sass; styles that shoudln't junk up the design system + │ ├── _scss2json.scss # Output certain Sass variables into json for demo in PL + │ └── _styleguide.scss # Custom PL UI styles + └── index.js # Imports and applies the design system to a bundle for PL + +`app/drupal/` holds the *entry point* for all Drupal 8 theme assets, as well as templates, yml, etc: + + # ./app/drupal/ + . + ├── scss/ # Theme-only Sass, tweaks to Drupalisms that need not be in the DS + │ └── _drupal-styles.scss # Add more drupal styles here, like _views.scss, _field.scss etc + ├── templates # Templates integrate Drupal data with design system patterns + │ ├── block.html.twig # Example Drupal template integrating, say @molecules/_card.twig + │ └── ... # There wil be many Drupal templates + ├── index.js # Imports and applies the design system to a bundle for Drupal + ├── particle.info.yml # Theme information. DS namespaces are auto-injected! + ├── particle.libraries.yml # The output js and css bundles are included here + ├── particle.theme # Drupal preprocess functions + └── index.js # Imports and applies the design system to a bundle for Drupal + +## Anatomy of a Component + +All components require a set of files: + + # ./source/_patterns/01-atoms/button/ + . + ├── demo # Demo implementations, can be removed on deploy to prod + │ ├── buttons.md # Markdown with extra notes, visible in PL UI + │ ├── buttons.twig # Demonstrate with a plural name, visible to PL since no underscore + │ └── buttons.yml # Data provided to the demo pattern + ├── _button.scss # Most components require styles, underscore required + ├── _button.twig # The pure component template, "_" required to hide from PL UI + └── index.js # Component entry point + +With the power of [Webpack](https://webpack.js.org/), all static assets a component needs are `import`ed right into the `index.js` **entry point** alongside the javascript methods: + +```javascript +// source/_patterns/01-atoms/button/index.js + +// Import *EVERY* NPM dependency. +import $ from 'jquery'; +// Import specific plugins this component may need +import 'bootstrap/js/src/button'; + +// source/_patterns/01-atoms/00-protons/index.js +import 'protons'; + +// Import local Sass (which in turn imports Bootstrap Sass) +import './_button.scss'; + +// Req. 1 of a component: name +export const name = 'button'; + +// Req. 2 of a component: disable function +export function disable() {} + +// Req. 3 of a component: enable function. `$context` is `$(document)` in PL, and `context` in Drupal +export function enable($context) { + + // `.button()` is only available because of `import 'bootstrap/js/src/button';` above + $('#blah', $context).button('toggle'); +} -Get front end libraries downloaded with Bower like so: +// Req. 4 of a component: default export is the enable function +export default enable; +``` - bower install {project-name} --save +See the Sass and Twig sections below for more -Afterwards, you'll need to add them to Drupal and Pattern Lab: +## Sass -1. Pattern Lab: Go to `source/_meta/` and in `_00-head.twig` or `01-foot.twig`, add the `` or `#} - - {# Relative paths should prepend `../../` on top of what you think is necessary to get from the location of the `publicDir` to the root of the theme. #} - {# If the public directory is at `pattern-lab/public/` then you'll `../../../../` to get the root of the theme. #} - {# If the public directory is at `pattern-lab-public/` then you'll `../../../` to get the root of the theme. #} - - - - - - - - - - - - - - {# Gulp tools will auto-inject what is compiled into the `dest/` directory (usually just aggregated JS & CSS), and anything in `config.patternLab.injectFiles` here: #} - - - + + diff --git a/source/_patterns/00-base/05-colors/_color-vars.scss b/source/_patterns/00-base/05-colors/_color-vars.scss deleted file mode 100644 index 6a777a6512..0000000000 --- a/source/_patterns/00-base/05-colors/_color-vars.scss +++ /dev/null @@ -1,12 +0,0 @@ -$c-red: hsl(352, 92%, 38%); // Primary Color. Used for links -$c-blue: hsl(208, 100%, 50%); - -$c-white: white; -$c-gray--lightest: hsl(0, 0%, 89%); -$c-gray--lighter: hsl(0, 0%, 80%); -$c-gray--light: hsl(0, 0%, 60%); -$c-gray: hsl(0, 0%, 48%); -$c-gray--dark: hsl(0, 0%, 40%); -$c-gray--darker: hsl(0, 0%, 20%); -$c-gray--darkest: hsl(0, 0%, 16.1%); -$c-black: black; diff --git a/source/_patterns/00-base/05-colors/_colors-used.scss b/source/_patterns/00-base/05-colors/_colors-used.scss deleted file mode 100644 index 44163a708f..0000000000 --- a/source/_patterns/00-base/05-colors/_colors-used.scss +++ /dev/null @@ -1,9 +0,0 @@ -$c-primary: $c-blue; -$c-secondary: $c-red; - -$c-border: $c-gray; -$c-links: $c-gray--darker; -$c-links--hover: $c-blue; - -$c-header-text: $c-gray; -$c-secondary-nav-links: $c-gray--dark; diff --git a/source/_patterns/00-base/05-colors/colors.json b/source/_patterns/00-base/05-colors/colors.json deleted file mode 100644 index 6dec7dba4b..0000000000 --- a/source/_patterns/00-base/05-colors/colors.json +++ /dev/null @@ -1,62 +0,0 @@ -{ - "items": [ - { - "name": "$c-red", - "value": "hsl(352, 92%, 38%)", - "comment": "Primary Color. Used for links" - }, - { - "name": "$c-blue", - "value": "hsl(208, 100%, 50%)", - "comment": "" - }, - { - "name": "$c-white", - "value": "white", - "comment": "" - }, - { - "name": "$c-gray--lightest", - "value": "hsl(0, 0%, 89%)", - "comment": "" - }, - { - "name": "$c-gray--lighter", - "value": "hsl(0, 0%, 80%)", - "comment": "" - }, - { - "name": "$c-gray--light", - "value": "hsl(0, 0%, 60%)", - "comment": "" - }, - { - "name": "$c-gray", - "value": "hsl(0, 0%, 48%)", - "comment": "" - }, - { - "name": "$c-gray--dark", - "value": "hsl(0, 0%, 40%)", - "comment": "" - }, - { - "name": "$c-gray--darker", - "value": "hsl(0, 0%, 20%)", - "comment": "" - }, - { - "name": "$c-gray--darkest", - "value": "hsl(0, 0%, 16.1%)", - "comment": "" - }, - { - "name": "$c-black", - "value": "black", - "comment": "" - } - ], - "meta": { - "description": "To add to these items, use Sass variables that start with $c- in source/_patterns/00-base/05-colors/_color-vars.scss" - } -} \ No newline at end of file diff --git a/source/_patterns/00-base/05-colors/colors.md b/source/_patterns/00-base/05-colors/colors.md deleted file mode 100644 index 07695fb22e..0000000000 --- a/source/_patterns/00-base/05-colors/colors.md +++ /dev/null @@ -1,10 +0,0 @@ ---- -title: Colors ---- -Colors below are automatically pulled from `_color-vars.scss` if they are prefixed with `$c-` and can be used like so: - -```scss -.class { - color: $c-red; -} -``` diff --git a/source/_patterns/00-base/05-colors/colors.twig b/source/_patterns/00-base/05-colors/colors.twig deleted file mode 100644 index 2f8370cb43..0000000000 --- a/source/_patterns/00-base/05-colors/colors.twig +++ /dev/null @@ -1,15 +0,0 @@ - -{% if meta %} -

{{ meta.description }}

-{% endif %} diff --git a/source/_patterns/00-base/10-spacing/_spacing.scss b/source/_patterns/00-base/10-spacing/_spacing.scss deleted file mode 100644 index e6fe1c1c1e..0000000000 --- a/source/_patterns/00-base/10-spacing/_spacing.scss +++ /dev/null @@ -1,19 +0,0 @@ -$spacing--s: 5px; -$spacing--m: 10px; -$spacing--l: 20px; - -.u-spacing-down { - margin-bottom: $spacing--l; -} - -.u-spacing-up { - margin-top: $spacing--l; -} - -.u-gap-down { - margin-bottom: $spacing--s; -} - -.u-gap-up { - margin-top: $spacing--s; -} diff --git a/source/_patterns/00-base/10-spacing/spacing.json b/source/_patterns/00-base/10-spacing/spacing.json deleted file mode 100644 index 9eb1a171b2..0000000000 --- a/source/_patterns/00-base/10-spacing/spacing.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "items": [ - { - "name": "$spacing--s", - "value": "5px", - "comment": "" - }, - { - "name": "$spacing--m", - "value": "10px", - "comment": "" - }, - { - "name": "$spacing--l", - "value": "20px", - "comment": "" - } - ], - "meta": { - "description": "To add to these items, use Sass variables that start with $spacing-- in source/_patterns/00-base/10-spacing/_spacing.scss" - } -} \ No newline at end of file diff --git a/source/_patterns/00-base/10-spacing/spacing.twig b/source/_patterns/00-base/10-spacing/spacing.twig deleted file mode 100644 index a7c3e59289..0000000000 --- a/source/_patterns/00-base/10-spacing/spacing.twig +++ /dev/null @@ -1,10 +0,0 @@ -{% for item in items %} -
-
- {{ item.value }} : {{ item.name }} -
-{% endfor %} - -{% if meta %} -

{{ meta.description }}

-{% endif %} diff --git a/source/_patterns/00-base/15-typography/fonts/_fonts.scss b/source/_patterns/00-base/15-typography/fonts/_fonts.scss deleted file mode 100644 index dcaed0742b..0000000000 --- a/source/_patterns/00-base/15-typography/fonts/_fonts.scss +++ /dev/null @@ -1,51 +0,0 @@ -$fw--100: 100; // thin/hairline -$fw--200: 200; // extra-light/ultra-light -$fw--300: 300; // light* -$fw--400: 400; // normal/regular/book/roman* -$fw--500: 500; // medium -$fw--600: 600; // semi-bold/demi-bold -$fw--700: 700; // bold* -$fw--800: 800; // extra-bold/ultra-bold -$fw--900: 900; // black/heavy - -// Place a `.ttf`, `.woff`, & `.woff2` in `$font-directory` -$font-faces: ( - //( - // "name": "LatoRegular", - // "filename": "Lato-Regular" - //), -) !default; - -// Child themes can add to Fonts with `$extra-font-faces` -@if variable-exists(extra-font-faces) { - $font-faces: join($font-faces, $extra-font-faces); -} - -$font-directory: "../fonts/" !default; - -@each $font-face in $font-faces { - $filename: map-get($font-face, "filename"); - @font-face { - font-family: map-get($font-face, "name"); - src: url("#{$font-directory}#{$filename}.woff2") format("woff2"), - url("#{$font-directory}#{$filename}.woff") format("woff"), - url("#{$font-directory}#{$filename}.ttf") format("truetype"); - font-weight: normal; - font-style: normal; - } -} - -$ff--lato: 'LatoRegular', sans-serif; -$ff--helvetica: 'Helvetica', sans-serif; - -$ff--heading: $ff--lato !default; -$ff--body: $ff--helvetica !default; - -// font Sizes -$fs--xxl: 36px; -$fs--xl: 20px; -$fs--l: 18px; -$fs--m: 16px; -$fs--s: 14px; -$fs--xs: 12px; -$fs--xxs: 10px; diff --git a/source/_patterns/00-base/15-typography/fonts/font-families.json b/source/_patterns/00-base/15-typography/fonts/font-families.json deleted file mode 100644 index 32e27109c0..0000000000 --- a/source/_patterns/00-base/15-typography/fonts/font-families.json +++ /dev/null @@ -1,17 +0,0 @@ -{ - "items": [ - { - "name": "$ff--lato", - "value": "'LatoRegular', sans-serif", - "comment": "" - }, - { - "name": "$ff--helvetica", - "value": "'Helvetica', sans-serif", - "comment": "" - } - ], - "meta": { - "description": "To add to these items, use Sass variables that start with $ff-- in source/_patterns/00-base/15-typography/fonts/_fonts.scss" - } -} \ No newline at end of file diff --git a/source/_patterns/00-base/15-typography/fonts/font-families.twig b/source/_patterns/00-base/15-typography/fonts/font-families.twig deleted file mode 100644 index 8804d3447b..0000000000 --- a/source/_patterns/00-base/15-typography/fonts/font-families.twig +++ /dev/null @@ -1,23 +0,0 @@ -{% for item in items %} -
-
{{ item.value }}
-
- 

-.class {
-  font-family: {{ item.name }};
-}
-
-
- -
Normal
-
{{ excerpt.short }}
- -
Bold
-
{{ excerpt.short }}
- -
Italic
-
{{ excerpt.short }}
- -
-
-{% endfor %} diff --git a/source/_patterns/00-base/15-typography/fonts/font-sizes.json b/source/_patterns/00-base/15-typography/fonts/font-sizes.json deleted file mode 100644 index 871849eda0..0000000000 --- a/source/_patterns/00-base/15-typography/fonts/font-sizes.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "items": [ - { - "name": "$fs--xxl", - "value": "36px", - "comment": "" - }, - { - "name": "$fs--xl", - "value": "20px", - "comment": "" - }, - { - "name": "$fs--l", - "value": "18px", - "comment": "" - }, - { - "name": "$fs--m", - "value": "16px", - "comment": "" - }, - { - "name": "$fs--s", - "value": "14px", - "comment": "" - }, - { - "name": "$fs--xs", - "value": "12px", - "comment": "" - }, - { - "name": "$fs--xxs", - "value": "10px", - "comment": "" - } - ], - "meta": { - "description": "To add to these items, use Sass variables that start with $fs-- in source/_patterns/00-base/15-typography/fonts/_fonts.scss" - } -} \ No newline at end of file diff --git a/source/_patterns/00-base/15-typography/fonts/font-sizes.twig b/source/_patterns/00-base/15-typography/fonts/font-sizes.twig deleted file mode 100644 index 21d2205f16..0000000000 --- a/source/_patterns/00-base/15-typography/fonts/font-sizes.twig +++ /dev/null @@ -1,9 +0,0 @@ - diff --git a/source/_patterns/00-base/15-typography/headings/_headings.scss b/source/_patterns/00-base/15-typography/headings/_headings.scss deleted file mode 100644 index ab2458bf85..0000000000 --- a/source/_patterns/00-base/15-typography/headings/_headings.scss +++ /dev/null @@ -1,65 +0,0 @@ -$fs--h1: 52px !default; -$fs--h2: $fs--xxl !default; -$fs--h3: $fs--xl !default; -$fs--h4: $fs--l !default; -$fs--h5: $fs--m !default; -$fs--h6: $fs--s !default; - -@mixin heading() { - font-family: $ff--heading; -} - -@mixin h1() { - @include heading(); - font-size: $fs--h1; -} - -@mixin h2() { - @include heading(); - font-size: $fs--h2; -} - -@mixin h3() { - @include heading(); - font-size: $fs--h3; -} - -@mixin h4() { - @include heading(); - font-size: $fs--h4; -} - -@mixin h5() { - @include heading(); - font-size: $fs--h5; -} - -@mixin h6() { - @include heading(); - font-size: $fs--h6; -} - -h1, .h1 { - @include h1(); - color: $c-red; -} - -h2, .h2 { - @include h2(); -} - -h3, .h3 { - @include h3(); -} - -h4, .h4 { - @include h4(); -} - -h5, .h5 { - @include h5(); -} - -h6, .h6 { - @include h6(); -} diff --git a/source/_patterns/00-base/15-typography/headings/headings.md b/source/_patterns/00-base/15-typography/headings/headings.md deleted file mode 100644 index 14d45d9333..0000000000 --- a/source/_patterns/00-base/15-typography/headings/headings.md +++ /dev/null @@ -1,5 +0,0 @@ ---- -title: Headings ---- - -All heading styles can be attained by a few methods; for example, Header 2 styling can be given by using an element (`

), a class (`.h2`), or a Sass mixin (`@include h2()`). diff --git a/source/_patterns/00-base/15-typography/headings/headings.twig b/source/_patterns/00-base/15-typography/headings/headings.twig deleted file mode 100644 index 96196f1869..0000000000 --- a/source/_patterns/00-base/15-typography/headings/headings.twig +++ /dev/null @@ -1,6 +0,0 @@ -

h1 {{ headline.short }}

-

h2 {{ headline.short }}

-

h3 {{ headline.short }}

-

h4 {{ headline.short }}

-
h5 {{ headline.short }}
-
h6 {{ headline.short }}
diff --git a/source/_patterns/00-base/15-typography/lists/_lists.scss b/source/_patterns/00-base/15-typography/lists/_lists.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/source/_patterns/00-base/15-typography/lists/lists.twig b/source/_patterns/00-base/15-typography/lists/lists.twig deleted file mode 100644 index f46492c6ef..0000000000 --- a/source/_patterns/00-base/15-typography/lists/lists.twig +++ /dev/null @@ -1,42 +0,0 @@ -
- -
- -
-
    -
  1. This is a list item in an Ordered List
    2. -
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
    3. -
  3. - Lists can be nested inside of each other -
      -
    1. This is a nested list item
      2. -
    2. This is another nested list item in an ordered list
      3. -
    -
    4. -
  4. This is the last list item
    5. -
-
- -
-
-
Definition List
-
A number of connected items or names written or printed consecutively, typically one below the other.
-
This is a term.
-
This is the definition of that term, which both live in a dl.
-
Here is another term.
-
And it gets a definition too, which is this line.
-
Here is term that shares a definition with the term below.
-
And it gets a definition too, which is this line.
-
-
diff --git a/source/_patterns/00-base/15-typography/text/_text.scss b/source/_patterns/00-base/15-typography/text/_text.scss deleted file mode 100644 index cf4d245c4a..0000000000 --- a/source/_patterns/00-base/15-typography/text/_text.scss +++ /dev/null @@ -1,71 +0,0 @@ -/// Mixin - Set Link Colors & Decoration -/// @param $link -/// @param $hover -/// @param $deco -/// @param $deco--hover -@mixin a-link($link: $c-red, $hover: $c-red, $deco: none, $deco--hover: underline) { - &:link, - &:visited { - color: $link; - text-decoration: $deco; - } - &:hover, - &:focus, - &:active { - color: $hover; - text-decoration: $deco--hover; - } -} - -// This will adjust the base HTML font size fluidly between the xsmall and -// xxlarge breakpoints to a font size between 14px minimum to 18px maximum. -html { - // @include fluid-type(font-size, $bp--xsmall, $bp--xxlarge, 14px, 18px); -} - -body { - font-family: $ff--body; -} - -p { - margin: 0 0 $spacing--s; -} - -a { - @include a-link; -} - -blockquote { - font-style: italic; - border-left: solid 3px $c-border; - margin-left: $spacing--l; - padding-left: $spacing--l; -} - -img { - max-width: 100%; - height: auto; -} - -hr { - border-style: solid; - border-width: 1px 0 0; - color: currentColor; -} - -// inline code wrappers, Markdown style -code { - &:before { - content: '`'; - } - &:after { - content: '`'; - } - // don't show it when in a block of code - pre & { - &:after, - &:before { - content: ''; - } - } -} diff --git a/source/_patterns/00-base/15-typography/text/text.twig b/source/_patterns/00-base/15-typography/text/text.twig deleted file mode 100644 index dc8685207c..0000000000 --- a/source/_patterns/00-base/15-typography/text/text.twig +++ /dev/null @@ -1,39 +0,0 @@ -

Paragraph One {{ excerpt.short }}

-
-

Paragraph Two after an hr {{ excerpt.medium }}

- -

Header 1

-

Paragraph following an h1 {{ description }}

- -

Header 2

-

Paragraph following an h2 {{ description }}

- -

Header 3

-

Paragraph following an h3 {{ description }}

- -

Header 4

-

Paragraph following an h4 {{ description }}

- -
Header 5
-

Paragraph following an h5 {{ description }}

- -
Header 6
-

Paragraph following an h6 {{ description }}

- -

This is a text link.

- -

Italic text is used for stylistic purposes in i

- -

This text has added emphasis in em

- -

Bolded text is used for stylistic purposes in b

- -

Strong is used to indicate strong importance in strong

- -

This text is superscript

- -

This text is subscript

- -
-

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

-
diff --git a/source/_patterns/00-base/animations/01-transitions/_transitions.scss b/source/_patterns/00-base/animations/01-transitions/_transitions.scss deleted file mode 100644 index 4744c99db4..0000000000 --- a/source/_patterns/00-base/animations/01-transitions/_transitions.scss +++ /dev/null @@ -1,20 +0,0 @@ -$trans-opacity__time: 0.3s; -$trans-opacity__function: ease-in; -/// @example -/// transition: opacity $trans-opacity; -$trans-opacity: $trans-opacity__time $trans-opacity__function; // convenience variable for using both - -$trans-move__time: 0.3s; -$trans-move__function: ease-in; -/// @example -/// transition: left $trans-move; -$trans-move: $trans-opacity__time $trans-move__function; // convenience variable for using both - -.demo-transition { - &.transition-opacity { - transition: opacity $trans-opacity; - } - &.transition-move:after { - transition: left $trans-move; - } -} diff --git a/source/_patterns/00-base/animations/01-transitions/transitions.json b/source/_patterns/00-base/animations/01-transitions/transitions.json deleted file mode 100644 index 53274b1c54..0000000000 --- a/source/_patterns/00-base/animations/01-transitions/transitions.json +++ /dev/null @@ -1,37 +0,0 @@ -{ - "items": [ - { - "name": "$trans-opacity__time", - "value": "0.3s", - "comment": "" - }, - { - "name": "$trans-opacity__function", - "value": "ease-in", - "comment": "" - }, - { - "name": "$trans-opacity", - "value": "$trans-opacity__time $trans-opacity__function", - "comment": "convenience variable for using both" - }, - { - "name": "$trans-move__time", - "value": "0.3s", - "comment": "" - }, - { - "name": "$trans-move__function", - "value": "ease-in", - "comment": "" - }, - { - "name": "$trans-move", - "value": "$trans-opacity__time $trans-move__function", - "comment": "convenience variable for using both" - } - ], - "meta": { - "description": "To add to these items, use Sass variables that start with $trans- in source/_patterns/00-base/animations/01-transitions/_transitions.scss" - } -} \ No newline at end of file diff --git a/source/_patterns/00-base/animations/01-transitions/transitions.md b/source/_patterns/00-base/animations/01-transitions/transitions.md deleted file mode 100644 index 67464aaac2..0000000000 --- a/source/_patterns/00-base/animations/01-transitions/transitions.md +++ /dev/null @@ -1,16 +0,0 @@ -```scss -.class { - transition: opacity $trans-opacity; - &:hover { - opacity: 0; - } -} - -.class { - transition: left $trans-move; - left: 0; - &:hover { - left: 100%; - } -} -``` diff --git a/source/_patterns/00-base/animations/01-transitions/transitions.twig b/source/_patterns/00-base/animations/01-transitions/transitions.twig deleted file mode 100644 index 9a2ae88363..0000000000 --- a/source/_patterns/00-base/animations/01-transitions/transitions.twig +++ /dev/null @@ -1,40 +0,0 @@ -
Opacity (Hover to see effect)
-
Move (Hover to see effect)
- -Values: - - - diff --git a/source/_patterns/00-base/breakpoints/_breakpoints.scss b/source/_patterns/00-base/breakpoints/_breakpoints.scss deleted file mode 100644 index b49b609582..0000000000 --- a/source/_patterns/00-base/breakpoints/_breakpoints.scss +++ /dev/null @@ -1,22 +0,0 @@ -/** - * Breakpoint Configuration - * @see https://github.com/Team-Sass/breakpoint/wiki - * - * Usage: - * display: none; // hidden for mobile - * @include breakpoint($bp--small-up) { - * display: block; // shown above 400 - * } - */ - -// Breakpoint will output fallback selectors in this stylesheet -@include breakpoint-set("no query fallbacks", true); - -// Sign posts -$bp--xsmall: 380px; -$bp--small: 500px; -$bp--medium: 700px; -$bp--large: 900px; -$bp--xlarge: 1100px; -$bp--xxlarge: 1300px; -$bp--xxxlarge: 1600px; diff --git a/source/_patterns/00-base/breakpoints/breakpoints.json b/source/_patterns/00-base/breakpoints/breakpoints.json deleted file mode 100644 index c98c52d052..0000000000 --- a/source/_patterns/00-base/breakpoints/breakpoints.json +++ /dev/null @@ -1,42 +0,0 @@ -{ - "items": [ - { - "name": "$bp--xsmall", - "value": "380px", - "comment": "" - }, - { - "name": "$bp--small", - "value": "500px", - "comment": "" - }, - { - "name": "$bp--medium", - "value": "700px", - "comment": "" - }, - { - "name": "$bp--large", - "value": "900px", - "comment": "" - }, - { - "name": "$bp--xlarge", - "value": "1100px", - "comment": "" - }, - { - "name": "$bp--xxlarge", - "value": "1300px", - "comment": "" - }, - { - "name": "$bp--xxxlarge", - "value": "1600px", - "comment": "" - } - ], - "meta": { - "description": "To add to these items, use Sass variables that start with $bp-- in source/_patterns/00-base/breakpoints/_breakpoints.scss" - } -} \ No newline at end of file diff --git a/source/_patterns/00-base/breakpoints/breakpoints.twig b/source/_patterns/00-base/breakpoints/breakpoints.twig deleted file mode 100755 index 0d14741fc2..0000000000 --- a/source/_patterns/00-base/breakpoints/breakpoints.twig +++ /dev/null @@ -1,20 +0,0 @@ -
- - -
-
-{% if meta %} -

{{ meta.description }}

-{% endif %} diff --git a/source/_patterns/00-base/grids/_grids.scss b/source/_patterns/00-base/grids/_grids.scss deleted file mode 100644 index 2e5ba9f1b5..0000000000 --- a/source/_patterns/00-base/grids/_grids.scss +++ /dev/null @@ -1,159 +0,0 @@ -@include add-grid(12); -@include add-gutter(0); - -//// -/// @group layout -//// - -// % should not be used here as Firefox doesn't like it -$grid-gutter: $spacing--m; -/// -$grid-columns: 12; -$grid-sizes: 1, 2, 3, 4, 6; - -/// Get width of grid item -/// `calc()` is returned b/c you can use `px` gutters and `%` width. -/// @param $columns - How many columns from `$grid-columns` (i.e. 12) to get width for. Passing in 4 when 12 column would get you roughly 25% after accounting for gutters. -/// @returns {number} - a `calc()` value to use in `width` -/// @example scss -/// .class { -/// width: grid-width(4); // becomes `width: calc((50% + 1%) - 2%);` -/// } -@function grid-width($columns) { - $items: $grid-columns / $columns; - $column: 100% / $items; - $extra-space: $grid-gutter / $items; - @return calc((#{$column} + #{$extra-space}) - #{$grid-gutter}); -} - -/// Smart Grid -/// Include in a parent element to layout all children -/// @param $row-items [4] - How many items per row -/// @param $gutter [1rem] - Space between Items -@mixin smart-grid($row-items: 4, $gutter: $grid-gutter) { - display: flex; - flex-wrap: wrap; - > * { - margin-bottom: $gutter; - @if $row-items > 1 { - width: grid-width($grid-columns / $row-items); - } @else { - width: 100%; - } - &:last-child { - margin-bottom: $gutter; - } - &:nth-child(1n) { - margin-right: $gutter; - } - &:nth-child(#{$row-items}n) { - margin-right: 0; - } - } -} - -.u-grid-width { - @each $i in $grid-sizes { - &--#{$i} { - width: grid-width($i) !important; // stylelint-disable-line declaration-no-important - } - } -} - -.grid-demo { - counter-reset: grid-item; - > * { - counter-increment: grid-item; - &:after { - content: counter(grid-item); - margin-left: 3px; - } - &:nth-child(odd) { - border: dashed 1px red; - } - &:nth-child(even) { - border: dashed 1px orange; - } - } -} - -.full-grid-demo { - @include smart-grid($grid-columns); - background: $c-gray--lightest; - &__item { - background: $c-gray; - border: solid 1px $c-gray--lighter; - height: 200px; - } -} - -.smart-grid { - > * { - margin-bottom: $spacing--m; - &:last-child { - margin-bottom: $spacing--m; - } - &[class]:last-child { - margin-bottom: $spacing--m; - } - } - @each $size in $grid-sizes { - @include breakpoint($bp--xsmall) { - &[data-row-items-xsmall="#{$size}"] { - @include smart-grid($row-items: $size); - } - } - } - @each $size in $grid-sizes { - @include breakpoint($bp--small) { - &[data-row-items-small="#{$size}"] { - @include smart-grid($row-items: $size); - } - } - } - @each $size in $grid-sizes { - @include breakpoint($bp--medium) { - &[data-row-items-medium="#{$size}"] { - @include smart-grid($row-items: $size); - } - } - } - @each $size in $grid-sizes { - @include breakpoint($bp--large) { - &[data-row-items-large="#{$size}"] { - @include smart-grid($row-items: $size); - } - } - } - @each $size in $grid-sizes { - @include breakpoint($bp--xlarge) { - &[data-row-items-xlarge="#{$size}"] { - @include smart-grid($row-items: $size); - } - } - } -} - -/// -.u-row { - display: flex; - justify-content: space-between; - align-items: center; -} - -.grid--2-1 { - @include breakpoint($bp--medium) { - display: flex; - justify-content: space-between; - } - > * { - @include breakpoint($bp--medium) { - &:nth-child(odd) { - width: calc(66.66% - (#{$grid-gutter} / 2)); - } - &:nth-child(even) { - width: calc(33.33% - (#{$grid-gutter} / 2)); - } - } - } -} diff --git a/source/_patterns/00-base/grids/_smart-grid.twig b/source/_patterns/00-base/grids/_smart-grid.twig deleted file mode 100644 index 77d9ae0701..0000000000 --- a/source/_patterns/00-base/grids/_smart-grid.twig +++ /dev/null @@ -1,17 +0,0 @@ -
- {% block gridItems %} - {% if demoItems %} - {% set items = 1..demoItems %} - {% endif %} - {% for item in items %} -
- {% endfor %} - {% endblock %} -
diff --git a/source/_patterns/00-base/grids/grid--2-1.json b/source/_patterns/00-base/grids/grid--2-1.json deleted file mode 100644 index 46ba42ac33..0000000000 --- a/source/_patterns/00-base/grids/grid--2-1.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "demoItems": "2" - -} diff --git a/source/_patterns/00-base/grids/grid--2-1.twig b/source/_patterns/00-base/grids/grid--2-1.twig deleted file mode 100644 index 81ed7d0859..0000000000 --- a/source/_patterns/00-base/grids/grid--2-1.twig +++ /dev/null @@ -1,14 +0,0 @@ -
- {% block gridItems %} - {% if demoItems %} - {% set items = 1..demoItems %} - {% endif %} - {% for item in items %} -
- {% endfor %} - {% endblock %} - -
diff --git a/source/_patterns/00-base/grids/grid-demo.twig b/source/_patterns/00-base/grids/grid-demo.twig deleted file mode 100644 index 2b29ff4d14..0000000000 --- a/source/_patterns/00-base/grids/grid-demo.twig +++ /dev/null @@ -1,38 +0,0 @@ -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
diff --git a/source/_patterns/00-base/grids/pyramid-grid.twig b/source/_patterns/00-base/grids/pyramid-grid.twig deleted file mode 100644 index f3e6d5189c..0000000000 --- a/source/_patterns/00-base/grids/pyramid-grid.twig +++ /dev/null @@ -1,21 +0,0 @@ -{% embed '@base/_smart-grid.twig' with { - rowItems: { - small: 2, - large: 3, - xlarge: 4, - } -} %} - {% block gridItems %} -
-
-
-
-
-
-
-
-
-
-
- {% endblock %} -{% endembed %} diff --git a/source/_patterns/00-base/grids/smart-grid.md b/source/_patterns/00-base/grids/smart-grid.md deleted file mode 100644 index e753a76413..0000000000 --- a/source/_patterns/00-base/grids/smart-grid.md +++ /dev/null @@ -1,3 +0,0 @@ ---- -title: grids ---- diff --git a/source/_patterns/00-base/grids/smart-grid~pyramid.json b/source/_patterns/00-base/grids/smart-grid~pyramid.json deleted file mode 100644 index de3480b433..0000000000 --- a/source/_patterns/00-base/grids/smart-grid~pyramid.json +++ /dev/null @@ -1,8 +0,0 @@ -{ - "demoItems": "12", - "rowItems": { - "small": "2", - "medium": "3", - "large": "4" - } -} diff --git a/source/_patterns/00-base/grids/smart-grid~three-up.json b/source/_patterns/00-base/grids/smart-grid~three-up.json deleted file mode 100644 index 4347a344c7..0000000000 --- a/source/_patterns/00-base/grids/smart-grid~three-up.json +++ /dev/null @@ -1,6 +0,0 @@ -{ - "demoItems": "9", - "rowItems": { - "medium": "3" - } -} diff --git a/source/_patterns/00-base/utilities/_floats.scss b/source/_patterns/00-base/utilities/_floats.scss deleted file mode 100644 index 11c08d8ac6..0000000000 --- a/source/_patterns/00-base/utilities/_floats.scss +++ /dev/null @@ -1,11 +0,0 @@ -.float-left { - float: left; -} - -.float-right { - float: right; -} - -.clear-both { - clear: both; -} diff --git a/source/_patterns/00-base/utilities/_site-container.scss b/source/_patterns/00-base/utilities/_site-container.scss deleted file mode 100644 index d8d6d29e98..0000000000 --- a/source/_patterns/00-base/utilities/_site-container.scss +++ /dev/null @@ -1,53 +0,0 @@ -$site-max-width: $bp--xxlarge; -$site-padding: $spacing--s; - -/// Site container -/// @param {bool} $padding [true] - Add left and right padding. -/// @param {bool} $center [true] - Center using `margin: 0 auto`. -/// @param {bool} $useWidth [false] - Use `width` instead of `max-width`. -@mixin site-container($padding: true, $useWidth: false, $center: true) { - @if $center { - margin-left: auto; - margin-right: auto; - } - @if $padding { - padding-left: $site-padding; - padding-right: $site-padding; - } - @include breakpoint($site-max-width + ($site-padding * 2)) { - @if $useWidth { - width: $site-max-width; - } @else { - max-width: $site-max-width; - } - } -} - - -/// Mixin - Full Width, even outside container -/// @param {bool} $undo [false] -/// @link https://css-tricks.com/full-width-containers-limited-width-parents/ Source -@mixin full-width($undo: false) { - @if $undo { - margin-left: 0; - margin-right: 0; - position: static; - left: auto; - right: auto; - width: auto; - max-width: 100%; - } @else { - width: 100vw; - max-width: 100vw; - position: relative; - left: 50%; - right: 50%; - margin-left: -50vw; - margin-right: -50vw; - } -} - -/// @group utilities -.u-full-width { - @include full-width(); -} diff --git a/source/_patterns/00-base/utilities/_z-index.scss b/source/_patterns/00-base/utilities/_z-index.scss deleted file mode 100644 index 33eabeeb10..0000000000 --- a/source/_patterns/00-base/utilities/_z-index.scss +++ /dev/null @@ -1,18 +0,0 @@ -$z-index: ( - modal: 100, - modalBG: 90, - navFixed: 80, - tooltip: 70, - popover: 60, - dropdown: 50, - nav: 50, - contentTop: 40, - content: 30, - contentBottom: 20, -); - -// useage: -// .class { z-index: z("modal"); } -@function z($key) { - @return map-get($z-index, $key) -} diff --git a/source/_patterns/00-base/utilities/borders/_borders.scss b/source/_patterns/00-base/utilities/borders/_borders.scss deleted file mode 100644 index ec730e3d60..0000000000 --- a/source/_patterns/00-base/utilities/borders/_borders.scss +++ /dev/null @@ -1,3 +0,0 @@ -.u-border { - border: solid 1px $c-border; -} diff --git a/source/_patterns/00-base/utilities/borders/borders.twig b/source/_patterns/00-base/utilities/borders/borders.twig deleted file mode 100644 index a973843713..0000000000 --- a/source/_patterns/00-base/utilities/borders/borders.twig +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/source/_patterns/00-protons/_base.scss b/source/_patterns/00-protons/_base.scss new file mode 100644 index 0000000000..00ccdd1da6 --- /dev/null +++ b/source/_patterns/00-protons/_base.scss @@ -0,0 +1,32 @@ +/// +/// Base **GENERATED** styles +/// +// WARNING: Do NOT include this file in other .scss files. It WILL duplicate output +/// Instead, import as a dependency in a component's .js file. From @molecules/card: +/// @example +/// ```js +/// import base from '../../00-protons'; +/// import button from '../../01-atoms/button'; +/// ``` +/// This guarantees both de-duplication and existence of required, generated CSS. +/// + +@import 'variables'; + +// Bootstrap CSS-generating output +@import '~bootstrap/scss/root'; +@import '~bootstrap/scss/print'; +@import '~bootstrap/scss/reboot'; +@import '~bootstrap/scss/utilities'; +@import '~bootstrap/scss/code'; + +// Font Awesome icons +$fa-font-path: '~font-awesome/fonts/'; +@import '~font-awesome/scss/font-awesome'; + +// Custom CSS-generating output +@import 'printing/type'; +@import 'printing/forms'; +@import 'printing/tables'; +@import 'printing/transitions'; +@import 'printing/html-elements'; diff --git a/source/_patterns/00-protons/_variables.scss b/source/_patterns/00-protons/_variables.scss new file mode 100644 index 0000000000..5d82ae9599 --- /dev/null +++ b/source/_patterns/00-protons/_variables.scss @@ -0,0 +1,40 @@ +/// +/// Global VARIABLES and HELPERS +/// +/// Place global config here like Bootstrap's _variables.scss. +/// This kind of config is often required prior to importing any libraries (ie Bootstrap Sass), and +/// does not produce any CSS, just variables and maps. +/// +/// All .scss files NEED TO INCLUDE this file as the top import to ensure consistent settings. +/// Particle does not glob Sass! Because there is no printing CSS output in this file, webpack will +/// safely squash any duplication. +/// +/// @example +/// ```scss +/// @import '../../00-protons/variables'; +/// ``` +/// This guarantees every component is styled with the same presets. +/// + +// Custom non-printing tools +@import 'non-printing/functions'; +@import 'non-printing/colors'; +@import 'non-printing/mixins'; + +// (Other non-printing .scss), ie font families, spacing, etc +$spacing: ( + s: 5px, + m: 25px, + l: 50px, +); + +// This is a good place to globally override bootstrap variables that aren't +// just overridden in a component later on. + +// Bootstrap non-printing tools +@import "~bootstrap/scss/functions"; +@import "~bootstrap/scss/variables"; +@import "~bootstrap/scss/mixins"; + +// import anything else non-printing that may depend on variables in this file! +// @import 'non-printing/project-specific-mixins' diff --git a/source/_patterns/00-protons/demo/borders.twig b/source/_patterns/00-protons/demo/borders.twig new file mode 100644 index 0000000000..3a751d92af --- /dev/null +++ b/source/_patterns/00-protons/demo/borders.twig @@ -0,0 +1,90 @@ +{# + Borders! + + Documenting Border Examples from Bootstrap. These are Bootstrap Utilities we gain via Base. + + All our Bootstrap Utilities are Belong to Base. + + border_classes: Array: Used to demonstrate available border utility classes. + radius_classes: Array: Used to demonstrate available boder-radius utility classes. + + see https://getbootstrap.com/docs/4.0/utilities/borders/ +#} + +{% set border_classes = [ + '', + '-0', + '-top-0', + '-right-0', + '-bottom-0', + '-left-0', +] %} + +{% set radius_classes = [ + '', + '-top', + '-right', + '-bottom', + '-left', + '-circle', + '-0', +] %} + + {% embed '@atoms/grid/_grid-1-up.twig' with { container: true } %} + {% block column_1 %} + +

Borders

+

Use border utilities to quickly style the border and + border-radius of an element. Great for images, buttons, or any other + element.

+ +

Border

+

Add classes to an element to remove all borders or some borders.

+
+ {% for class in border_classes %} + + {% endfor %} + 
+          
+{% for class in border_classes %}
+  <span class="border{{ class }}"></span>
+{% endfor %}
+
+
+ +

Border color

+

Change the border color using utilities built on our theme colors.

+
+ {% for colorName, colorValue in scssColors %} + + {% endfor %} + + 
+          
+{% for colorName, colorValue in scssColors %}
+  <span class="border border-{{ colorName }}"></span>
+{% endfor %}
+
+
+ +

Border-radius

+

Add classes to an element to easily round its corners.

+
+ {% for class in radius_classes %} + {% include '@atoms/image/_image.twig' with { + imageStyleName: 'thumbnail', + class: 'm-2 rounded' ~ class, + } %} + {% endfor %} + 
+          
+{% for class in radius_classes %}
+  <img src="..." alt="..." class="rounded{{ class }}">
+{% endfor %}
+
+
+ + {% endblock column_1 %} + {% endembed %} diff --git a/source/_patterns/00-protons/demo/breakpoints.twig b/source/_patterns/00-protons/demo/breakpoints.twig new file mode 100755 index 0000000000..bceb12a102 --- /dev/null +++ b/source/_patterns/00-protons/demo/breakpoints.twig @@ -0,0 +1,21 @@ +

Breakpoints

+ +
+ + +
+ +

To add or change these items, override Bootstrap's $grid-breakpoints inside _variables.scss

+

See Bootstrap's docs for more.

diff --git a/source/_patterns/00-protons/demo/colors.twig b/source/_patterns/00-protons/demo/colors.twig new file mode 100644 index 0000000000..e9cfe9ebb3 --- /dev/null +++ b/source/_patterns/00-protons/demo/colors.twig @@ -0,0 +1,68 @@ +{% embed '@atoms/grid/_grid-1-up.twig' with { container: true } %} + {% block column_1 %} + +

Colors

+

To add to these items, add and override colors in _colors.scss:$theme-colors(). + See Bootstrap's docs for more.

+ +
+ {% for colorName, colorValue in scssColors %} + {# The custom Twig filters `rgba_string` and `luma` are found in _twig-components/filters/. + Feel free to add filters, but ensure that your implementing system is provided them. #} + {% set luma = colorValue|rgba_string|luma %} + +
+
+
{{ colorValue }}
+
+

{{ colorName }}

+

Usage:

+ 
$theme-colors({{ colorName }});
+

Luminance: {{ luma }}

+
+
+
+ {% endfor %} +
+ +

Text Color

+

Colors can also be used with text classes. _colors.scss:$theme-colors() + is again the go-to here. text-white and + text-black are available by default.

+ +
+
+ {% for colorName, colorValue in scssColors %} + {% set luma = colorValue|rgba_string|luma %} +

+ text-{{ colorName }}: <p class="text-{{ colorName }}">text-{{ colorName }} + </p>

+ {% endfor %} +
+
+ +

Background Colors

+

Similar to the contextual text color classes, easily set the background of an element to any contextual class. + Anchor components will darken on hover, just like the text classes. + Background utilities do not set color, so in some cases you’ll want to use + .text-* utilities.

+ +
+
+
+
+ {% for colorName, colorValue in scssColors %} + {% set luma = colorValue|rgba_string|luma %} +
+ bg-{{ colorName }}:
<div class="bg-{{ colorName }}"></div> +
+
+ {% endfor %} +
+
+
+ + {% endblock column_1 %} +{% endembed %} diff --git a/source/_patterns/00-protons/demo/spacing.twig b/source/_patterns/00-protons/demo/spacing.twig new file mode 100644 index 0000000000..bda20df597 --- /dev/null +++ b/source/_patterns/00-protons/demo/spacing.twig @@ -0,0 +1,14 @@ +{% embed '@atoms/grid/_grid-1-up.twig' with { container: true } %} + {% block column_1 %} + +

Spacing

+

To add to these items, adjust $spacing() in _variables.scss

+ {% for spacing, value in scssSpacing %} +
+
+ {{ value }} : $spacing({{ spacing }}) +
+ {% endfor %} + + {% endblock %} +{% endembed %} diff --git a/source/_patterns/00-protons/demo/tables.twig b/source/_patterns/00-protons/demo/tables.twig new file mode 100644 index 0000000000..a61b719456 --- /dev/null +++ b/source/_patterns/00-protons/demo/tables.twig @@ -0,0 +1,355 @@ +{# + Tables! + table_header: Array: A list of table headers from _data/tables.yaml + table_content: Array: A list of table content from _data/tables.yaml + see https://getbootstrap.com/docs/4.0/content/tables/ +#} + +{% embed '@atoms/grid/_grid-1-up.twig' with { container: true } %} + {% block column_1 %} +

Tables

+

Documentation and examples for opt-in styling of tables (given their prevelant use in JavaScript plugins) with Bootstrap.

+

Examples

+

Basic

+

Quickly create a table style with the .table class as <table class="table">.

+
+ + + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
This caption example was created with <caption></caption>.
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+
+ +

Dark Basic

+

As easy as adding the table-dark class to the table as <table class="table-dark">!

+
+ + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+
+ +

Table Head Options

+

+ Similar to tables and dark tables, use the modifier classes .thead-light or .thead-dark in your <thead> for a light or dark gray appearance. + For example, <thead class="thead-dark"> or <thead class="thead-light">. +

+
+ + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+
+ +
+ + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+
+ +

Striped Rows

+

+ Use the .table-striped class with basic or dark tables to add zebra-striping to any table. + <table class="table table-striped"> or <table class="table table-dark table-striped"> +

+
+ + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+ + + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+
+ +

Bordered table

+

+ Add .table-bordered for borders on all sides of the table and cells. Available for both basic and dark tables. + <table class="table table-bordered"> or <table class="table table-dark table-bordered"> +

+
+ + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+ + + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+
+ +

Hoverable rows

+

+ Add .table-hover to enable a hover state on table rows within a <tbody>. + <table class="table table-hover"> or <table class="table table-dark table-hover"> +

+
+ + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+ + + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+
+ +

Small table

+

+ Add .table-sm to make tables more compact by cutting cell padding in half. + <table class="table table-sm"> or <table class="table table-dark table-sm"> +

+
+ + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+ + + + + + {% for header in table_header %} + + {% endfor %} + + + + {% for content in table_content %} + + + + + + + {% endfor %} + +
#{{ header }}
{{ loop.index }}{{ content.first_name }}{{ content.last_name }}@{{ content.username }}
+
+ +

Contextual classes

+

Use contextual classes to color table rows or individual cells.

+
+ + + + + + + + + + {% for colorName, colorValue in scssColors %} + + + + + + {% endfor %} + +
TypeRow CodeCell Code
{{ colorName }}<tr class="table-{{ colorName }}">...</tr><td class="table-{{ colorName }}">...</td>
+

Regular table background variants are not available with the dark table, however, you may use text or background utilities to achieve similar styles.

+ + + + + + + + + + {% for colorName, colorValue in scssColors %} + {% set luma = colorValue|rgba_string|luma %} + + + + + + {% endfor %} + +
TypeRow CodeCell Code
{{ colorName }}<tr class="bg-{{ colorName }}">...</tr><td class="bg-{{ colorName }}">...</td>
+
+ + {% endblock column_1 %} +{% endembed %} diff --git a/source/_patterns/00-protons/demo/type.twig b/source/_patterns/00-protons/demo/type.twig new file mode 100644 index 0000000000..03c7686f8c --- /dev/null +++ b/source/_patterns/00-protons/demo/type.twig @@ -0,0 +1,211 @@ +{# + Typography! + + This is a demo file for our typography. + + See https://getbootstrap.com/docs/4.0/content/typography/ for more! + +#} + +
+ {% embed '@atoms/grid/_grid-1-up.twig' %} + {% block column_1 %} + +

Font Families

+

+ Font families can be added via _type.scss and imported to this list via styleguide/_scss2json.scss. +

+ {% for key, family in fontFamilies %} + {% set family_value = family|join(', ') %} +
+
+

Family: {{ key }}

+

Fonts: {{ family_value }}

+
+ 
+            
+  .class {
+    font-family: {{ key }};
+  }
+
+
+

Regular

+
{{ excerpt.short }}
+ +

Bold

+
{{ excerpt.short }}
+ +

Italic

+
{{ excerpt.short }}
+
+
+ {% endfor %} + +

Font Sizes

+

+ Font sizes can be added via _type.scss and imported to this list via styleguide/_scss2json.scss. +

+
    + {% for key, size in fontSizes|sort %} +
    {{ key|capitalize }}: {{ size }}
    +

    {{ headline.medium }}

    + {% endfor %} +
+
+ +

Headings

+

+ These are heading styles, including both element and classed version. + Use the element version in markup following Accessibility guidelines. + Use the class version to match font styling of heading. + See WebAim for details. +

+ + + + + + + + + {% for i in range(1, 6) %} + + + + + {% endfor %} + +
HeaderCode
{{ headline.short }}<h{{ i }} contenteditable>h1. {{ headline.short }}</h{{ i }}>
+

You can use these as either the element or as a class. For example:

+ + + + + + + + + {% for i in range(1, 6) %} + + + + + {% endfor %} + +
ParagraphCode

{{ headline.short }}

<p class="h{{ i }}">p{{ i }}. {{ headline.short }}</p>
+
+ +

Display headings

+

Bootstrap style for larger headlines. For example:

+ + + + + + + + + + {% for i in range(1, 4) %} + + + + + {% endfor %} + +
Display HeadingCode

{{ headline.two }}

<h1 class="display-{{ i }}">{{ headline.two }}</h1>
+
+ +

Text Styles

+ + {# Paragraph Lead from Bootstrap#} +

Lead

+
+

A paragraph p class to help text standout. {{ excerpt.medium }}

+ 
+          
+  <p class="lead">
+    {{ excerpt.short }}
+  </p>
+
+
+ +

Paragraphs

+

Paragraph One {{ description }}

+
+

Paragraph Two after an hr {{ description }}

+ +

Header + Paragraphs

+ {% for i in range(1, 6) %} + Header {{ i }} +

Paragraph following an h{{ i }}{{ description }}

+ {% endfor %} + +

Misc

+

This is a text link.

+ +

Italic text is used for stylistic purposes in i

+ +

This text has added emphasis in em

+ +

Bolded text is used for stylistic purposes in b

+ +

Strong is used to indicate strong importance in strong

+ +

This text is superscript

+ +

This text is subscript

+ +
+

A block quotation (also known as a long quotation or extract) is a quotation in a written document, that is set off from the main text as a paragraph, or block of text, and typically distinguished visually using indentation and a different typeface or smaller size quotation.

+
+ +

Lists

+
+
    +
  • This is a list item in an Unordered List
    • +
  • An unordered list is a list in which the sequence of items is not important. Sometimes, an unordered list is a bulleted list. And this is a long list item in an unordered list that can wrap onto a new line.
    • +
  • + Lists can be nested inside of each other +
      +
    • This is a nested list item
      • +
    • This is another nested list item in an unordered list
      • +
    +
    • +
  • This is the last list item
    • +
+
+
+ +
+
    +
  1. This is a list item in an Ordered List
    2. +
  2. An ordered list is a list in which the sequence of items is important. An ordered list does not necessarily contain sequence characters.
    3. +
  3. + Lists can be nested inside of each other +
      +
    1. This is a nested list item
      2. +
    2. This is another nested list item in an ordered list
      3. +
    +
    4. +
  4. This is the last list item
    5. +
+
+ +
+
+
Definition List
+
A number of connected items or names written or printed consecutively, typically one below the other.
+
This is a term.
+
This is the definition of that term, which both live in a dl.
+
Here is another term.
+
And it gets a definition too, which is this line.
+
Here is term that shares a definition with the term below.
+
And it gets a definition too, which is this line.
+
+
+ + + {% endblock column_1 %} + {% endembed %} +
diff --git a/source/_patterns/00-protons/index.js b/source/_patterns/00-protons/index.js new file mode 100644 index 0000000000..17a57b0653 --- /dev/null +++ b/source/_patterns/00-protons/index.js @@ -0,0 +1,9 @@ +/** + * Base css generation and global js logic + */ + +import './_base.scss'; + +export default { + GLOBAL_CONSTANT: 'blerp', +}; diff --git a/source/_patterns/00-protons/non-printing/_colors.scss b/source/_patterns/00-protons/non-printing/_colors.scss new file mode 100644 index 0000000000..9dfd2b24ab --- /dev/null +++ b/source/_patterns/00-protons/non-printing/_colors.scss @@ -0,0 +1,9 @@ +// Custom colors + +// Bootstrap overrides +// Add colors to $theme-colors var here. Find other vars to override at ~bootstrap/scss/_variables.scss +// Be sure to add new colors in quotes. +$theme-colors: ( + 'test': pink, + 'new': green, +); diff --git a/source/_patterns/00-protons/non-printing/_functions.scss b/source/_patterns/00-protons/non-printing/_functions.scss new file mode 100644 index 0000000000..754e33e77b --- /dev/null +++ b/source/_patterns/00-protons/non-printing/_functions.scss @@ -0,0 +1 @@ +// Custom functions diff --git a/source/_patterns/00-base/utilities/_utilities.scss b/source/_patterns/00-protons/non-printing/_mixins.scss similarity index 71% rename from source/_patterns/00-base/utilities/_utilities.scss rename to source/_patterns/00-protons/non-printing/_mixins.scss index ff1c5c8e1b..17c5fc5408 100644 --- a/source/_patterns/00-base/utilities/_utilities.scss +++ b/source/_patterns/00-protons/non-printing/_mixins.scss @@ -1,3 +1,17 @@ +/// Mixins + +/// Export Sass Data to JSON in `path/to/export/folder/` folder +/// @param {String} $filename - ie `mystuff.json` +/// @param $var - What to turn into JSON +/// @example scss +/// @include export-data-to-lib('filename.json', $sass-map); +@mixin export-data($filename, $var, $options: ()) { + //@debug 'export-data called'; + // The `export_data` function is a custom function added to Sass. + // The `$data` var is weird, but needed. + $data: export_data($filename, $var, $options); +}; + /// Mixin - Fluid Type /// PRECISE CONTROL OVER RESPONSIVE TYPOGRAPHY FOR SASS /// Indrek Paas @indrekpaas @@ -8,6 +22,7 @@ /// @param $max-vw /// @param $min-value /// @param $max-value + @mixin fluid-type ($properties, $min-vw, $max-vw, $min-value, $max-value) { @each $property in $properties { #{$property}: $min-value; @@ -68,17 +83,6 @@ } } -/// Mixin - Local Base -/// Set HTML font sizing base for global/local sizing (rem/em). -/// @link https://css-tricks.com/rem-global-em-local/ -@mixin local-base() { - font-size: 1rem; // 16px (default) -} - -.local-base { - @include local-base(); -} - /// Word Wrap fix for long spaceless strings /// @link https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/ @mixin word-wrap() { @@ -95,3 +99,26 @@ white-space: nowrap; text-overflow: ellipsis; } + +/// Mixin - Full Width, even outside container +/// @param {bool} $undo [false] +/// @link https://css-tricks.com/full-width-containers-limited-width-parents/ Source +@mixin full-width($undo: false) { + @if $undo { + margin-left: 0; + margin-right: 0; + position: static; + left: auto; + right: auto; + width: auto; + max-width: 100%; + } @else { + width: 100vw; + max-width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; + } +} diff --git a/source/_patterns/00-protons/printing/_forms.scss b/source/_patterns/00-protons/printing/_forms.scss new file mode 100644 index 0000000000..8f24bda147 --- /dev/null +++ b/source/_patterns/00-protons/printing/_forms.scss @@ -0,0 +1,9 @@ +@import '../variables'; + +// Bootstrap override variables go here. +// See available vars in ~bootstrap/scss/_variables.scss, i.e. +//$input-bg +//$form-text-margin-top +@import '~bootstrap/scss/forms'; + +// Custom forms rules go here diff --git a/source/_patterns/00-protons/printing/_html-elements.scss b/source/_patterns/00-protons/printing/_html-elements.scss new file mode 100644 index 0000000000..428cf659bf --- /dev/null +++ b/source/_patterns/00-protons/printing/_html-elements.scss @@ -0,0 +1,7 @@ +@import '../variables'; + +// Use this file for any global layout rules you want applied after +// Bootstrap's Reboot does it's thing, but don't necessarily fit into +// another pattern here. +// +// @see https://v4-alpha.getbootstrap.com/content/reboot/ diff --git a/source/_patterns/00-protons/printing/_tables.scss b/source/_patterns/00-protons/printing/_tables.scss new file mode 100644 index 0000000000..3ad788ed7f --- /dev/null +++ b/source/_patterns/00-protons/printing/_tables.scss @@ -0,0 +1,9 @@ +@import '../variables'; + +// Bootstrap override variables go here. +// See available vars in ~bootstrap/scss/_variables.scss, i.e. +// $table-border-width +// $table-border-color +@import '~bootstrap/scss/tables'; + +// Custom tables rules go here diff --git a/source/_patterns/00-protons/printing/_transitions.scss b/source/_patterns/00-protons/printing/_transitions.scss new file mode 100644 index 0000000000..328f8224c9 --- /dev/null +++ b/source/_patterns/00-protons/printing/_transitions.scss @@ -0,0 +1,10 @@ +@import '../variables'; + +// Bootstrap override variables go here. +// See available vars in ~bootstrap/scss/_variables.scss, i.e. +//$enable-transitions +//$transition-fade +//$btn-transition +@import '~bootstrap/scss/transitions'; + +// Custom transitions rules go here diff --git a/source/_patterns/00-protons/printing/_type.scss b/source/_patterns/00-protons/printing/_type.scss new file mode 100644 index 0000000000..78893d9f08 --- /dev/null +++ b/source/_patterns/00-protons/printing/_type.scss @@ -0,0 +1,10 @@ +@import '../variables'; + +// Bootstrap override variables go here. +// See available vars in ~bootstrap/scss/_variables.scss, i.e. +//$font-family-sans-serif +//$font-weight-light +//$h1-font-size +@import '~bootstrap/scss/type'; + +// Custom type rules here diff --git a/source/_patterns/01-atoms/_html-elements.scss b/source/_patterns/01-atoms/_html-elements.scss deleted file mode 100644 index fa01064cfc..0000000000 --- a/source/_patterns/01-atoms/_html-elements.scss +++ /dev/null @@ -1,25 +0,0 @@ -* { - box-sizing: border-box; -} - -img { - max-width: 100%; - height: auto; - vertical-align: middle; -} - -// IE 11 fix ~ http://stackoverflow.com/a/26207036 -main { - display: block; -} - -// All last children -:last-child { - margin-bottom: 0; -} - -// all last children with a class -[class]:last-child { - margin-bottom: 0; -} - diff --git a/source/_patterns/01-atoms/alert/_alert.scss b/source/_patterns/01-atoms/alert/_alert.scss new file mode 100644 index 0000000000..b78fb01ec2 --- /dev/null +++ b/source/_patterns/01-atoms/alert/_alert.scss @@ -0,0 +1,9 @@ +// All component Sass needs non-printing base config +@import '../../00-protons/variables'; + +// To change default bootstrap alert variables, SEE ~bootstrap/scss/variables +// Add bootstrap variables here + +@import '~bootstrap/scss/alert'; + +// Add custom code here diff --git a/source/_patterns/01-atoms/alert/_alert.twig b/source/_patterns/01-atoms/alert/_alert.twig new file mode 100644 index 0000000000..eb4b992189 --- /dev/null +++ b/source/_patterns/01-atoms/alert/_alert.twig @@ -0,0 +1,47 @@ +{# + Alert! + + type: String: status | warning | error: The type of error to display. + alert_degree: String (optional): The degree of error. Set via Type for Accessibility. + alert_title: String: The heading value of the Alert. + alert_primary: String: The paragraph value of the Alert. + alert_secondary: String (optional): The value of the footer. + + see https://getbootstrap.com/docs/4.0/components/alerts/ +#} + +{% set status_classes = { + 'status': 'success', + 'error': 'danger', + 'warning': 'warning', + 'info': 'info', + } +%} + +{% set alert_classes = [ + 'mb-0', + 'alert', + 'alert-' ~ status_classes[type], + 'alert-dismissible', + 'fade', + 'show', + alert_other_classes, +] | sort | join(' ') | trim %} + +{% set alert_degree = ( type == 'error' ? 'role=alert' : 'aria-live=polite' ) %} + +
+ {% block alert_header %} + +

{{ alert_title }}

+ {% endblock alert_header %} + {% block alert_content %} +

{{ alert_primary }}

+ {% endblock alert_content %} + {% block alert_footer %} + {% if alert_secondary %} +
+

{{ alert_secondary }}

+ {% endif %} + {% endblock alert_footer %} +
diff --git a/source/_patterns/01-atoms/alert/demo/alerts.twig b/source/_patterns/01-atoms/alert/demo/alerts.twig new file mode 100644 index 0000000000..8b88a35550 --- /dev/null +++ b/source/_patterns/01-atoms/alert/demo/alerts.twig @@ -0,0 +1,15 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + + {% include '@atoms/alert/_alert.twig' with alert_status %} + + {% include '@atoms/alert/_alert.twig' with alert_warning %} + + {% include '@atoms/alert/_alert.twig' with alert_error %} + + {% include '@atoms/alert/_alert.twig' with alert_info %} + + {% endblock %} + diff --git a/source/_patterns/01-atoms/alert/demo/alerts.yml b/source/_patterns/01-atoms/alert/demo/alerts.yml new file mode 100644 index 0000000000..7187cfaf5c --- /dev/null +++ b/source/_patterns/01-atoms/alert/demo/alerts.yml @@ -0,0 +1,21 @@ +alert_status: + type: 'status' + alert_title: 'Success!' + alert_primary: 'These alerts are a useful way to call attention to pieces of content you want to highlight. The type is altered in the component match for Bootstrap. For example, this is a status message that gets success styling!' + alert_secondary: 'They even have useful footer areas for more info! Footers can be overridden if you don''t want them!' + +alert_warning: + type: 'warning' + alert_title: 'Warning!' + alert_primary: 'A nice little warning message. We''re not too serious. By default our messages set aria-live="polite"' + +alert_error: + type: 'error' + alert_title: 'Error! Danger!' + alert_primary: 'Okay, not really any big deal because we planned it. We''re setting role="alert" to get some extra attention!' + +alert_info: + type: 'info' + alert_title: 'Informational message!' + alert_primary: 'We can add messages of several kinds! We''re not limited to what Drupal provides. See the background classes for additional ideas!' + alert_secondary: 'Did you know you can click the x to dismiss these messages?' diff --git a/source/_patterns/01-atoms/alert/index.js b/source/_patterns/01-atoms/alert/index.js new file mode 100644 index 0000000000..85614eb4c1 --- /dev/null +++ b/source/_patterns/01-atoms/alert/index.js @@ -0,0 +1,20 @@ +/** + * Alert + */ + +// JS from Bootstrap +import 'bootstrap/js/src/alert'; + +// Module Dependencies +import 'protons'; + +// Module styles +import './_alert.scss'; + +export const name = 'alert'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/01-atoms/badge/_badge.scss b/source/_patterns/01-atoms/badge/_badge.scss new file mode 100644 index 0000000000..88f8fbfc26 --- /dev/null +++ b/source/_patterns/01-atoms/badge/_badge.scss @@ -0,0 +1,8 @@ +@import '../../00-protons/variables'; + +// To change default bootstrap list-item variables, +// copy from ~bootstrap/scss/variables to here + +@import "~bootstrap/scss/badge"; + +// Add custom code here diff --git a/source/_patterns/01-atoms/badge/_badge.twig b/source/_patterns/01-atoms/badge/_badge.twig new file mode 100644 index 0000000000..101d1b0487 --- /dev/null +++ b/source/_patterns/01-atoms/badge/_badge.twig @@ -0,0 +1,27 @@ +{# + Badge! + + badge_element: String: span|a Choose the element type for your badge. If you use an tag make sure to enter a value for badge_link. + badge_pill: Boolean: TRUE|FALSE Make badges more rounded. + badge_color: String: primary|secondary|success|danger|warning|info|light|dark The color of the badge. + badge_link: String: The URL the badge will lead to. Make sure to set badge_element to 'a'. + badge_text: String: Display text on the badge. +#} + +{% set badge_element = badge_element | default('span') %} +{% set badge_color = badge_color | default('primary') %} + +{% set badge_classes = [ + 'badge', + badge_pill ? 'badge-pill', + badge_color ? 'badge-' ~ badge_color, + badge_other_classes, +] | sort | join(' ') | trim %} + +{% if badge_link %} + {% set badge_link = 'href="' ~ badge_link ~ '"' %} +{% endif %} + +<{{ badge_element }} {{ badge_link }} class="{{ badge_classes }}"> + {{ badge_text }} + diff --git a/source/_patterns/01-atoms/badge/demo/badges.md b/source/_patterns/01-atoms/badge/demo/badges.md new file mode 100644 index 0000000000..a8eb04e3aa --- /dev/null +++ b/source/_patterns/01-atoms/badge/demo/badges.md @@ -0,0 +1,9 @@ +## Variables + +| Name | Type | Options | Description +| --- | --- | --- | --- +| badge_element | string | span, a | choose the element type for your badge. If you use a link tag make sure to enter a value for badge_link +| badge_pill | boolean | TRUE, FALSE | make badges more rounded +| badge_color | string | scssColors.(selected_color) | the color of the badge +| badge_link | string | any | the URL the badge will lead to. Make sure to set badge_element to a link tag +| badge_text | string | any | display text on the badge diff --git a/source/_patterns/01-atoms/badge/demo/badges.twig b/source/_patterns/01-atoms/badge/demo/badges.twig new file mode 100644 index 0000000000..4af032bce4 --- /dev/null +++ b/source/_patterns/01-atoms/badge/demo/badges.twig @@ -0,0 +1,86 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} +

Badges

+ {% include '@molecules/card/_card-helper.twig' with { + card_text: badges_helper, + card_background: 'secondary', + text_color: 'light', + button: { + button_link: 'https://getbootstrap.com/docs/4.0/components/badge/', + }, + } %} +
+

Badge Sizes

+

Note: Badges scale to match the size of the immediate parent element

+ {% for i in 1..5 %} + + {% include '@atoms/badge/_badge.twig' with { + badge_text: 'Badge', + badge_color: 'primary', + } %} + + {% endfor %} +
+ +
+

Badge Button

+ {% embed '@atoms/button/_button.twig' with { + button_color: 'primary', + button_text: 'Notifications', + } %} + {% block right %} + {% include '@atoms/badge/_badge.twig' with { + badge_text: '4', + badge_color: 'light', + } %} + {% endblock right %} + {% endembed %} + + {% embed '@atoms/button/_button-outline.twig' with { + button_color: 'primary', + button_text: 'Notifications', + } %} + {% block right %} + {% include '@atoms/badge/_badge.twig' with { + badge_text: '4', + badge_color: 'primary', + } %} + {% endblock right %} + {% endembed %} +
+ +
+

Badge Colors

+ {% for name, rgb in scssColors %} + {% include '@atoms/badge/_badge.twig' with { + badge_color: name, + badge_text: name, + } %} + {% endfor %} +
+ +
+

Pill Badges

+ {% for name, rgb in scssColors %} + {% include '@atoms/badge/_badge.twig' with { + badge_color: name, + badge_text: name, + badge_pill: TRUE, + } %} + {% endfor %} +
+ +
+

Badge Links

+ {% for name, rgb in scssColors %} + {% include '@atoms/badge/_badge.twig' with { + badge_color: name, + badge_text: name, + badge_element: 'a', + badge_link: 'https://github.com/phase2/particle', + } %} + {% endfor %} +
+ {% endblock column_1 %} diff --git a/source/_patterns/01-atoms/badge/demo/badges.yml b/source/_patterns/01-atoms/badge/demo/badges.yml new file mode 100644 index 0000000000..22f687600d --- /dev/null +++ b/source/_patterns/01-atoms/badge/demo/badges.yml @@ -0,0 +1,5 @@ +badges_helper: Documentation and examples for badges, our small count and labeling component. + +button_badge: + button_color: secondary + button_text: Notifications diff --git a/source/_patterns/01-atoms/badge/index.js b/source/_patterns/01-atoms/badge/index.js new file mode 100644 index 0000000000..334f81fe13 --- /dev/null +++ b/source/_patterns/01-atoms/badge/index.js @@ -0,0 +1,17 @@ +/** + * Badge + */ + +// Module Dependencies +import 'protons'; + +// Module styles +import './_badge.scss'; + +export const name = 'badge'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/01-atoms/branding/_branding.scss b/source/_patterns/01-atoms/branding/_branding.scss new file mode 100644 index 0000000000..24754b79b2 --- /dev/null +++ b/source/_patterns/01-atoms/branding/_branding.scss @@ -0,0 +1,8 @@ +// All component Sass needs non-printing base config +@import '../../00-protons/variables'; + +// To change default bootstrap card variables, SEE ~bootstrap/scss/variables +// Add bootstrap variables here + + +// Add custom code here diff --git a/source/_patterns/01-atoms/branding/_branding.twig b/source/_patterns/01-atoms/branding/_branding.twig new file mode 100644 index 0000000000..4f0f781e03 --- /dev/null +++ b/source/_patterns/01-atoms/branding/_branding.twig @@ -0,0 +1,42 @@ +{# +/** + * Block - Branding. + * Designed to be added inside a Jumbotron. + * + * url: String: the url the block directs to. + * logo_svg_inline: String: The SVG path. + * logo_img_src: String: The IMG path. + * site_name: String: the site name provided by the app. + * site_slogan: String: the site slogan provided by the app. + * + */ +#} + + diff --git a/source/_patterns/01-atoms/branding/demo/brandings.twig b/source/_patterns/01-atoms/branding/demo/brandings.twig new file mode 100644 index 0000000000..5de2229d79 --- /dev/null +++ b/source/_patterns/01-atoms/branding/demo/brandings.twig @@ -0,0 +1,29 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} +

Branding Examples

+

Different applications of a branding block.

+ + {% embed '@atoms/grid/_grid-2-up.twig' with { container: false } %} + + {% block column_1 %} + {% include "@atoms/_branding.twig" with { + url: '#', + logo_svg_inline: '@atoms/image/logo.svg', + site_name: 'Particle', + site_slogan: 'Site Slogan that Describes the Logo Above with Inline SVG' + } %} + {% endblock column_1 %} + + {% block column_2 %} + {% include "@atoms/_branding.twig" with { + url: '#', + logo_img_src: paths.assets ~ '/logo.svg', + site_name: 'Particle', + site_slogan: 'Site Slogan that Describes the Logo Above with Src SVG' + } %} + {% endblock column_2 %} + + {% endembed %} + {% endblock column_1 %} diff --git a/source/_patterns/01-atoms/branding/index.js b/source/_patterns/01-atoms/branding/index.js new file mode 100644 index 0000000000..89974d1a82 --- /dev/null +++ b/source/_patterns/01-atoms/branding/index.js @@ -0,0 +1,18 @@ +/** + * Branding + */ + +// Module dependencies +import 'protons'; +import 'atoms/image'; + +// Module styles +import './_branding.scss'; + +export const name = 'branding'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/01-atoms/breadcrumb/_breadcrumb.scss b/source/_patterns/01-atoms/breadcrumb/_breadcrumb.scss new file mode 100644 index 0000000000..7590adf4c7 --- /dev/null +++ b/source/_patterns/01-atoms/breadcrumb/_breadcrumb.scss @@ -0,0 +1,18 @@ +// All component Sass needs non-printing base config +@import '../../00-protons/variables'; + +// To change default bootstrap breadcrumb variables, SEE ~bootstrap/scss/variables +// Add bootstrap variables here + +//$breadcrumb-padding-y; +//$breadcrumb-padding-x; +//$breadcrumb-bg; +//$breadcrumb-item-padding; +//$breadcrumb-item-padding; +//$breadcrumb-divider-color; +//$breadcrumb-divider; +//$breadcrumb-active-color; + +@import '~bootstrap/scss/breadcrumb'; + +// Add custom code here diff --git a/source/_patterns/01-atoms/breadcrumb/_breadcrumb.twig b/source/_patterns/01-atoms/breadcrumb/_breadcrumb.twig new file mode 100644 index 0000000000..7b0e4b6659 --- /dev/null +++ b/source/_patterns/01-atoms/breadcrumb/_breadcrumb.twig @@ -0,0 +1,23 @@ +{# + Breadcrumb! + + breadcrumb_items: Array: A list of breadcrumbs to render. + breadcrumb_title: String: The title of the breadcrumb + breadcrumb_link: String: The URL of the breadcrumb + + see https://www.w3.org/TR/wai-aria-practices/#breadcrumb + + see https://getbootstrap.com/docs/4.0/components/breadcrumb/ for more details +#} + + diff --git a/source/_patterns/01-atoms/breadcrumb/demo/breadcrumbs.twig b/source/_patterns/01-atoms/breadcrumb/demo/breadcrumbs.twig new file mode 100644 index 0000000000..b84c0d1c15 --- /dev/null +++ b/source/_patterns/01-atoms/breadcrumb/demo/breadcrumbs.twig @@ -0,0 +1,16 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + +

Breadcrumbs

+

Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS. Breadcrumbs take an array and render each as a list item. You can set the items in breadcrumbs.yml. + Separators are automatically added in CSS through ::before and ::content.

+ + {% include '@atoms/breadcrumb/_breadcrumb.twig' with demo_1 %} + + {% include '@atoms/breadcrumb/_breadcrumb.twig' with demo_2 %} + + {% include '@atoms/breadcrumb/_breadcrumb.twig' with demo_3 %} + + {% endblock column_1 %} diff --git a/source/_patterns/01-atoms/breadcrumb/demo/breadcrumbs.yml b/source/_patterns/01-atoms/breadcrumb/demo/breadcrumbs.yml new file mode 100644 index 0000000000..6531e767d5 --- /dev/null +++ b/source/_patterns/01-atoms/breadcrumb/demo/breadcrumbs.yml @@ -0,0 +1,18 @@ +demo_1: + breadcrumb: + - text: 'Home' + url: '/home' +demo_2: + breadcrumb: + - text: 'Home' + url: '/home' + - text: 'First' + url: '/first' +demo_3: + breadcrumb: + - text: 'Home' + url: '/home' + - text: 'First' + url: '/first' + - text: 'Second' + url: '/second' diff --git a/source/_patterns/01-atoms/breadcrumb/index.js b/source/_patterns/01-atoms/breadcrumb/index.js new file mode 100644 index 0000000000..4177023739 --- /dev/null +++ b/source/_patterns/01-atoms/breadcrumb/index.js @@ -0,0 +1,17 @@ +/** + * Breadcrumb + */ + +// Custom +import 'protons'; + +// Module styles +import './_breadcrumb.scss'; + +export const name = 'breadcrumb'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/01-atoms/button/_button-dropdown-split.twig b/source/_patterns/01-atoms/button/_button-dropdown-split.twig new file mode 100644 index 0000000000..57bbba64aa --- /dev/null +++ b/source/_patterns/01-atoms/button/_button-dropdown-split.twig @@ -0,0 +1,18 @@ +{# + Split Button Dropdown! +#} + + {% include '@atoms/button/_button.twig' with { + button_color: dropdown_color, + button_text: dropdown_text, + } %} + + {% embed '@atoms/button/_button.twig' with { + button_other_classes: 'dropdown-toggle dropdown-toggle-split', + button_other_attributes: 'data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"', + button_color: dropdown_color, + } %} + {% block right %} + Toggle Dropdown + {% endblock right %} + {% endembed %} diff --git a/source/_patterns/01-atoms/button/_button-dropdown.twig b/source/_patterns/01-atoms/button/_button-dropdown.twig new file mode 100644 index 0000000000..7641d96cc3 --- /dev/null +++ b/source/_patterns/01-atoms/button/_button-dropdown.twig @@ -0,0 +1,7 @@ +{# + Button Dropdown! +#} + +{% extends '@atoms/button/_button.twig' %} +{% set button_other_classes = 'dropdown-toggle ' ~ unique_classes %} +{% set button_other_attributes = 'data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"' ~ unique_attributes %} diff --git a/source/_patterns/01-atoms/button/_button-outline.twig b/source/_patterns/01-atoms/button/_button-outline.twig new file mode 100644 index 0000000000..f31f92cc12 --- /dev/null +++ b/source/_patterns/01-atoms/button/_button-outline.twig @@ -0,0 +1,9 @@ +{# + Button Outline! + + This is a simple example of extending an existing template to make a new template +#} + +{% extends '@atoms/button/_button.twig' %} +{# In this context we're hard-coding the only thing we need to override for an outline button. #} +{% set button_outline = true %} diff --git a/source/_patterns/01-atoms/button/_button.scss b/source/_patterns/01-atoms/button/_button.scss new file mode 100644 index 0000000000..118a6afc0e --- /dev/null +++ b/source/_patterns/01-atoms/button/_button.scss @@ -0,0 +1,9 @@ +@import '../../00-protons/variables'; + +// To change default bootstrap card variables, +// copy from ~bootstrap/scss/variables to here + +$btn-border-radius: 0.25rem; +@import "~bootstrap/scss/buttons"; + +// Add custom code here diff --git a/source/_patterns/01-atoms/button/_button.twig b/source/_patterns/01-atoms/button/_button.twig new file mode 100644 index 0000000000..cb4c6cb4bb --- /dev/null +++ b/source/_patterns/01-atoms/button/_button.twig @@ -0,0 +1,53 @@ +{# + Button! + + button_element: String: button|a|input choose the element type for your button. + button_type: String: the html 'type' attribute. + button_outline: Boolean: True|False, remove all background colors and images from a button. + buttonless_dropdown: Boolean: True|False, toggle `btn` base class for dropdowns. + button_color: String: primary|secondary|success|danger|warning|info|light|dark the color of the button. + button_size: String: lg|sm set whether the button is large or small. + button_block: Boolean: True|False set button to occupy the full width the parent element. + button_active: Boolean: True|False set button to appear pressed. + button_other_classes: Other classes not specified in the template. + button_toggle: String: button|collapse set button's data-toggle html value. + button_link: String: the URL the button will lead to. + button_value: String: the html 'value' attribute. + button_id: String: The button's html 'id' attribute. + button_disabled: Boolean: True|False set button to appear disabled. + button_other_attributes: String: Other attributes not specified in the template. + button_text: String: Display text on the button. + + See https://getbootstrap.com/docs/4.0/components/buttons/ for more details +#} + +{% set button_element = button_element | default ('button') %} + +{% if button_element != 'a' %} + {% set button_type = 'type="' ~ button_type | default('button') ~ '"' %} +{% endif %} + +{% set button_classes = [ + buttonless_dropdown ? '' : 'btn', + button_color ? 'btn-' ~ button_color, + button_outline ? 'btn-outline-' ~ button_color, + button_size ? 'btn-' ~ button_size, + button_block ? 'btn-block', + button_active ? 'active', + button_other_classes, +] | sort | join(' ') | trim %} + +{% set button_attributes = [ + button_active ? 'aria-pressed="true"', + button_toggle ? 'data-toggle="' ~ button_toggle ~ '"', + button_link ? 'href=' ~ button_link, + button_value ? 'value="' ~ button_value ~ '"', + button_id ? 'id="' ~ button_id ~ '"', + button_disabled ? 'disabled', + button_other_attributes, +] | sort | join(' ') | trim %} + +<{{ button_element }} {{ button_type }} class="{{ button_classes }}" {{ button_attributes }}> + {{ button_text }} + {% block right %}{% endblock right %} + diff --git a/source/_patterns/01-atoms/button/demo/buttons.md b/source/_patterns/01-atoms/button/demo/buttons.md new file mode 100644 index 0000000000..0d97b9cf76 --- /dev/null +++ b/source/_patterns/01-atoms/button/demo/buttons.md @@ -0,0 +1,17 @@ +## Variables +| Name | Type | Options | Description | +|-------------------------|---------|-----------------------------|--------------------------------------------------------| +| button_element | string | button, a, input | the html element of the button | +| button_type | string | any | the html 'type' attribute | +| button_outline | boolean | TRUE, FALSE | remove all background colors and images from a button | +| button_color | string | scssColors.(selected_color) | set the color of the button | +| button_size | string | lg, sm | set whether the button is large or small | +| button_block | boolean | TRUE, FALSE | set button to occupy the full width the parent element | +| button_active | boolean | TRUE, FALSE | set button to appear pressed | +| button_other_classes | string | any | Other classes not specified in the template | +| button_toggle | string | button, collapse | set button's data-toggle html value | +| button_link | string | any | the URL the button will lead to | +| button_value | string | any | the html 'value' attribute | +| button_disabled | boolean | TRUE, FALSE | set button to appear disabled | +| button_other_attributes | string | any | Other attributes specified in the template | +| button_text | string | any | Display text on the button | diff --git a/source/_patterns/01-atoms/button/demo/buttons.twig b/source/_patterns/01-atoms/button/demo/buttons.twig new file mode 100644 index 0000000000..54e7cb3cee --- /dev/null +++ b/source/_patterns/01-atoms/button/demo/buttons.twig @@ -0,0 +1,75 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} +

Buttons

+ {% include '@molecules/card/_card-helper.twig' with { + card_text: buttons_helper, + card_background: 'secondary', + text_color: 'light', + button: { + button_link: 'https://getbootstrap.com/docs/4.0/components/buttons/', + } + } %} +

Button colors

+
+ {% for name, rgb in scssColors %} + {% include '@atoms/button/_button.twig' with { + button_color: name, + button_text: name|capitalize, + } %} + {% endfor %} +
+ +

Button outline

+
+ {% for name, rgb in scssColors %} + {% include '@atoms/button/_button-outline.twig' with { + button_color: name, + button_text: name|capitalize, + } %} + {% endfor %} +
+ +

Button elements

+
+ {% for alternate_button in alternate_buttons %} + {% set buttonElement = alternate_button|merge({ button_color: 'success', }) %} + {% include '@atoms/button/_button.twig' with buttonElement %} + {% endfor %} +
+ +

Button size

+
+ {% for size in sizes %} + {% include '@atoms/button/_button.twig' with size %} + {% endfor %} +
+ +

Button block

+
+ {% embed '@atoms/grid/_grid-3-up.twig' with { container: false } %} + {% block column_1 %} + {% include '@atoms/button/_button.twig' with block_level_1 %} + {% endblock column_1 %} + {% block column_2 %} + {% include '@atoms/button/_button.twig' with block_level_2 %} + {% endblock column_2 %} + {% block column_3 %} + {% include '@atoms/button/_button.twig' with block_level_3 %} + {% endblock column_3 %} + {% endembed %} +
+ +

Button state

+
+ {% for state in states %} + {% include '@atoms/button/_button.twig' with state %} + {% endfor %} +
+ +

Button toggle

+
+ {% include '@atoms/button/_button.twig' with toggleable %} +
+ {% endblock column_1 %} diff --git a/source/_patterns/01-atoms/button/demo/buttons.yml b/source/_patterns/01-atoms/button/demo/buttons.yml new file mode 100644 index 0000000000..c1bf4eae33 --- /dev/null +++ b/source/_patterns/01-atoms/button/demo/buttons.yml @@ -0,0 +1,59 @@ +buttons_helper: Use Bootstrap's custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more. + +alternate_buttons: + - button_element: a + button_link: http://getbootstrap.com/docs/4.0/components/buttons/ + button_text: Link + - button_element: button + button_type: submit + button_text: Button + - button_element: input + button_type: button + button_value: Input + - button_element: input + button_type: submit + button_value: Submit + - button_element: input + button_type: reset + button_value: Reset + +sizes: + - button_size: lg + button_text: Large Button + button_color: secondary + - button_size: sm + button_text: Small Button + button_color: secondary + +block_level_1: + button_block: TRUE + button_text: Block level button + button_color: danger +block_level_2: + button_block: TRUE + button_text: Block level button + button_color: success +block_level_3: + button_block: TRUE + button_text: Block level button + button_color: info + +states: + - button_active: FALSE + button_text: Inactive State + button_color: info + - button_active: TRUE + button_text: Active state + button_color: info + - button_disabled: FALSE + button_text: Enabled state + button_color: warning + - button_disabled: TRUE + button_text: Disabled state + button_color: warning + +toggleable: + button_toggle: button + button_text: Toggleable button + button_color: dark + button_link: herpderp.com diff --git a/source/_patterns/01-atoms/button/index.js b/source/_patterns/01-atoms/button/index.js new file mode 100644 index 0000000000..d35160f9ff --- /dev/null +++ b/source/_patterns/01-atoms/button/index.js @@ -0,0 +1,22 @@ +/** + * Button + */ + +import $ from 'jquery'; +import 'bootstrap/js/src/button'; + +// Custom +import 'protons'; + +// Import custom sass, includes Bootstrap sass +import './_button.scss'; + +export const name = 'button'; + +export function disable() {} + +export function enable($context) { + $('#blah', $context).button('toggle'); +} + +export default enable; diff --git a/source/_patterns/01-atoms/buttons/_buttons.scss b/source/_patterns/01-atoms/buttons/_buttons.scss deleted file mode 100644 index a9982fd57c..0000000000 --- a/source/_patterns/01-atoms/buttons/_buttons.scss +++ /dev/null @@ -1,35 +0,0 @@ -@mixin button($alt: false) { - @include a-link($link: $c-white, $hover: $c-white, $deco--hover: "none"); - background-color: $c-red; - border-radius: $spacing--s; - font-weight: $fw--700; - padding: ($spacing--s * 3) ($spacing--l * 3); - display: inline-block; - text-decoration: none; - text-align: center; - @if $alt { - background: $c-gray--light; - color: $c-red; - } -} - -.button { - @include button(); - &--alt { - @include button($alt: true); - } -} - -a.button { - // needed to override base theme CSS - // stylelint-disable property-no-vendor-prefix - -moz-appearance: none; - -webkit-appearance: none; - // stylelint-enable property-no-vendor-prefix -} - -input[type="submit"], -.form-submit { - @include button(); - border: 0; -} diff --git a/source/_patterns/01-atoms/buttons/button-alt.twig b/source/_patterns/01-atoms/buttons/button-alt.twig deleted file mode 100644 index 1708794603..0000000000 --- a/source/_patterns/01-atoms/buttons/button-alt.twig +++ /dev/null @@ -1 +0,0 @@ -{{ text }} diff --git a/source/_patterns/01-atoms/buttons/button.twig b/source/_patterns/01-atoms/buttons/button.twig deleted file mode 100644 index 3d5064f6f3..0000000000 --- a/source/_patterns/01-atoms/buttons/button.twig +++ /dev/null @@ -1 +0,0 @@ -{{ text }} diff --git a/source/_patterns/01-atoms/dropdown/_dropdown.scss b/source/_patterns/01-atoms/dropdown/_dropdown.scss new file mode 100644 index 0000000000..565bce8d63 --- /dev/null +++ b/source/_patterns/01-atoms/dropdown/_dropdown.scss @@ -0,0 +1,11 @@ +@import '../../00-protons/variables'; + +// To change default bootstrap nav variables, +// copy from ~bootstrap/scss/variables to here + +$dropdown-link-color: $gray-900; +@import "~bootstrap/scss/dropdown"; +@import "~bootstrap/scss/button-group"; + +// Add custom code here + diff --git a/source/_patterns/01-atoms/dropdown/_dropdown.twig b/source/_patterns/01-atoms/dropdown/_dropdown.twig new file mode 100644 index 0000000000..5535003420 --- /dev/null +++ b/source/_patterns/01-atoms/dropdown/_dropdown.twig @@ -0,0 +1,58 @@ +{# + Dropdown! + + dropdown_element: String: div|li|ul: Choose the html element of the dropdown. + dropdown_button: Boolean: True|False: Choose whether the dropdown will be a button element or not. + dropdown_other_classes: String: Allows use of other bootstrap utility classes. + dropup: Boolean: True|False: Set the dropdown to dropup instead. + dropdown_color: String: primary|secondary|success|danger|warning|info|light|dark: The color of the dropdown. + dropdown_split: Boolean: True|False: Set the dropdown button to split between text and the arrow. + dropdown_text: String: Set the dropdown's text. + dropdown_menu_right: Boolean: True| False: Set the menu to drop on the right side. + dropdown_menu_element: String: a|button: Set the element of the menu items + dropdown_menu_aria_label: Do not set: Will set automatically if you assign an button_id + dropdown_menu_content: Block: Set content that will be within the dropdown menu. + dropdown_menu_items: Array: An array of menu items. + dropdown_menu_item_disabled: Boolean: True|False: Set an individual menu option as disabled. + dropdown_menu_item_text: String: Set the text of an individual menu item. + + See https://getbootstrap.com/docs/4.0/components/dropdowns/ fro more details +#} + +{% set dropdown_element = dropdown_element | default('div') %} + +{% if dropdown_button %} + {% set dropdown_class = 'btn-group' %} +{% else %} + {% set dropdown_class = 'dropdown' %} +{% endif %} + +{% set dropdown_classes = [ + dropdown_class, + dropup ? 'dropup', + dropdown_other_classes, +] | sort | join(' ') | trim %} + +{% set dropdown_menu_element = dropdown_menu_element | default('a') %} +{% set dropdown_menu_aria_label = button_id ? 'aria-labelledby="' ~ button_id ~ '"' %} + +<{{ dropdown_element }} class="{{ dropdown_classes }}"> + {% if dropdown_split %} + {% include '@atoms/button/_button-dropdown-split.twig' %} + {% else %} + {% include '@atoms/button/_button-dropdown.twig' with { + button_text: dropdown_text, + button_color: dropdown_color, + } %} + {% endif %} + +
+ {% block dropdown_menu_content%} + {% for dropdown_menu_item in dropdown_menu_items %} + <{{ dropdown_menu_element }} class="dropdown-item {{ dropdown_menu_item.dropdown_menu_item_disabled }}" href="#" > + {{ dropdown_menu_item.dropdown_menu_item_text }} + + {% endfor %} + {% endblock dropdown_menu_content%} +
+ diff --git a/source/_patterns/01-atoms/dropdown/demo/dropdowns.md b/source/_patterns/01-atoms/dropdown/demo/dropdowns.md new file mode 100644 index 0000000000..10b7fe87e6 --- /dev/null +++ b/source/_patterns/01-atoms/dropdown/demo/dropdowns.md @@ -0,0 +1,17 @@ +## Variables +| Name | Type | Options | Description | +|-----------------------------|---------|-----------------------------|--------------------------------------------------------------| +| dropdown_element | string | div, li, ul | Choose the html element of the dropdown. | +| dropdown_button | boolean | true, false | Choose whether the dropdown will be a button element or not. | +| dropdown_other_classes | string | any | Allows use of other bootstrap utility classes. | +| dropup | boolean | true,false | Set the dropdown to dropup instead. | +| dropdown_color | string | scssColors.(selected_color) | set The color of the dropdown. | +| dropdown_split | boolean | true, false | Set the dropdown button to split between text and the arrow. | +| dropdown_text | string | any | Set the dropdown's text. | +| dropdown_menu_right | boolean | true, false | Set the menu to drop on the right side. | +| dropdown_element | string | a, button | Set the element of the menu items | +| dropdown_menu_aria_label | string | DO NOT SET | DO NOT SET | +| dropdown_menu_content | block | any | Set content that will be within the dropdown menu. | +| dropdown_menu_items | array | any | An array of menu items. | +| dropdown_menu_item_disabled | boolean | true, false | Set an individual menu option as disabled. | +| dropdown_menu_item_text | string | any | Set the text of an individual menu item. | diff --git a/source/_patterns/01-atoms/dropdown/demo/dropdowns.twig b/source/_patterns/01-atoms/dropdown/demo/dropdowns.twig new file mode 100644 index 0000000000..d6fcbbb3c7 --- /dev/null +++ b/source/_patterns/01-atoms/dropdown/demo/dropdowns.twig @@ -0,0 +1,201 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + +

Dropdowns

+ {% include '@molecules/card/_card-helper.twig' with { + card_text: dropdowns_helper, + card_background: 'secondary', + text_color: 'light', + button: { + button_link: 'https://getbootstrap.com/docs/4.0/components/dropdowns/', + } + } %} + +
+

Basic Dropdown

+ {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_text: 'Dropdown button', + button_id: 'dropdownMenuButton', + } %} +
+
+

<a> element dropdown

+ {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_text: 'Dropdown link', + button_id: 'dropdownMenuLink', + button_element: 'a', + unique_attributes: 'role="button" id="dropdownMenuLink"', + button_link: '#', + } %} +
+ +
+

Colors

+ {% for name, rgb in scssColors %} + {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_button: 'true', + dropdown_color: name, + dropdown_text: name|capitalize, + } %} + {% endfor %} +
+ +
+

Split Button Drop Down

+ {% for name, rgb in scssColors %} + {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_button: 'true', + dropdown_split: 'true', + dropdown_color: name, + dropdown_text: name|capitalize, + } %} + {% endfor %} +
+ +
+

Sizing

+ {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_button: 'true', + button_size: 'lg', + dropdown_text: 'Large Button', + } %} + + {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_button: 'true', + button_size: 'sm', + dropdown_text: 'Small Button', + } %} + + {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_button: 'true', + dropdown_split: 'true', + button_size: 'lg', + dropdown_text: 'Large Split Button', + } %} + + {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_button: 'true', + dropdown_split: 'true', + button_size: 'sm', + dropdown_text: 'Small Split Button', + } %} +
+ +
+

Dropup

+

Note: Menus will automatically dropup if there is not enough room at the bottom of the page for them to dropdown

+ {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_button: 'true', + dropup: 'true', + dropdown_text: 'Dropup', + } %} + + {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_button: 'true', + dropup: 'true', + dropdown_split: 'true', + dropdown_text: 'Dropup Split', + } %} +
+ +
+

Menu Items

+

Note: Historically dropdown menu contents had to be links, but that’s no longer the case with Bootstrap v4. Now you can optionally use <button> elements in your dropdowns instead of just <a>s.

+ {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_text: 'Dropdown', + dropdown_menu_element: 'button', + button_id: 'dropdownMenu2', + } %} +
+ +
+

Menu alignment

+ {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_text: "This dropdown's menu is right-aligned", + dropdown_menu_right: 'true', + } %} +
+ +
+

In-menu options

+ {% embed '@atoms/grid/_grid-3-up.twig' with { container: false } %} + {% block column_1 %} + {% embed '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_text: "Header", + } %} + {% block dropdown_menu_content %} +
Dropdown header
+ Action + Another action + {% endblock dropdown_menu_content %} + {% endembed %} + {% endblock column_1 %} + {% block column_2 %} + {% embed '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_text: "Divider", + } %} + {% block dropdown_menu_content %} + Action + Another action + Something else here +
+ Separated link + {% endblock dropdown_menu_content %} + {% endembed %} + {% endblock column_2 %} + {% block column_3 %} + {% include '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_text: 'Disabled Items', + dropdown_menu_items: dropdown_menu_disabled, + } %} + {% endblock column_3 %} + {% endembed %} +
+ +
+

Menu forms

+ {% embed '@atoms/dropdown/_dropdown.twig' with { + dropdown_color: 'secondary', + dropdown_text: "Menu form", + } %} + {% block dropdown_menu_content %} +
+
+ + +
+
+ + +
+
+ +
+ +
+
+ New around here? Sign up + Forgot password? + {% endblock dropdown_menu_content %} + {% endembed %} +
+ + {% endblock column_1 %} diff --git a/source/_patterns/01-atoms/dropdown/demo/dropdowns.yml b/source/_patterns/01-atoms/dropdown/demo/dropdowns.yml new file mode 100644 index 0000000000..0591b7767a --- /dev/null +++ b/source/_patterns/01-atoms/dropdown/demo/dropdowns.yml @@ -0,0 +1,12 @@ +dropdowns_helper: 'Toggle contextual overlays for displaying lists of links and more with the Bootstrap dropdown plugin.' + +dropdown_menu_items: + - dropdown_menu_item_text: Action + - dropdown_menu_item_text: Another Action + - dropdown_menu_item_text: Something else here + +dropdown_menu_disabled: + - dropdown_menu_item_text: This item is disabled + dropdown_menu_item_disabled: 'disabled' + - dropdown_menu_item_text: Action + - dropdown_menu_item_text: Another Action diff --git a/source/_patterns/01-atoms/dropdown/index.js b/source/_patterns/01-atoms/dropdown/index.js new file mode 100644 index 0000000000..8a0cb11f19 --- /dev/null +++ b/source/_patterns/01-atoms/dropdown/index.js @@ -0,0 +1,20 @@ +/** + * Dropdown + */ + +// Import dropdown js from bootstrap +import 'bootstrap/js/src/dropdown'; + +// Custom +import 'protons'; + +// Import custom sass, includes Bootstrap sass +import './_dropdown.scss'; + +export const name = 'dropdown'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/01-atoms/grid/_grid-1-up.twig b/source/_patterns/01-atoms/grid/_grid-1-up.twig new file mode 100644 index 0000000000..27a22ed73f --- /dev/null +++ b/source/_patterns/01-atoms/grid/_grid-1-up.twig @@ -0,0 +1,14 @@ +{# + NOTE: If this row is the very outer wrapper of a page, it *must* be wrapped + in a .container div. We leave this up to the implementor manually for flexibility. +#} + +{% set container_class = container ? 'container' : (container_fluid ? 'container-fluid') %} + +{% if container or container_fluid %}
{% endif %} +
+
+ {% block column_1 %}{% endblock column_1 %} +
+
+{% if container or container_fluid %}
{% endif %} diff --git a/source/_patterns/01-atoms/grid/_grid-2-up.twig b/source/_patterns/01-atoms/grid/_grid-2-up.twig new file mode 100644 index 0000000000..0d32d815e3 --- /dev/null +++ b/source/_patterns/01-atoms/grid/_grid-2-up.twig @@ -0,0 +1,22 @@ +{# + NOTE: If this row is the very outer wrapper of a page, it *must* be wrapped + in a .container div. We leave this up to the implementor manually for flexibility. +#} + +{% set container_class = container ? 'container' : (container_fluid ? 'container-fluid') %} + +{% if container or container_fluid %}
{% endif %} +
+
+ {% block column_1 %} + Column 1/2 + {% endblock column_1 %} +
+ +
+ {% block column_2 %} + Column 2/2 + {% endblock column_2 %} +
+
+{% if container or container_fluid %}
{% endif %} diff --git a/source/_patterns/01-atoms/grid/_grid-3-up.twig b/source/_patterns/01-atoms/grid/_grid-3-up.twig new file mode 100644 index 0000000000..a398ac6742 --- /dev/null +++ b/source/_patterns/01-atoms/grid/_grid-3-up.twig @@ -0,0 +1,28 @@ +{# + NOTE: If this row is the very outer wrapper of a page, it *must* be wrapped + in a .container div. We leave this up to the implementor manually for flexibility. +#} + +{% set container_class = container ? 'container' : (container_fluid ? 'container-fluid') %} + +{% if container or container_fluid %}
{% endif %} +
+
+ {% block column_1 %} + Column 1/3 + {% endblock column_1 %} +
+ +
+ {% block column_2 %} + Column 2/3 + {% endblock column_2 %} +
+ +
+ {% block column_3 %} + Column 3/3 + {% endblock column_3 %} +
+
+{% if container or container_fluid %}
{% endif %} diff --git a/source/_patterns/01-atoms/grid/_grid-4-up.twig b/source/_patterns/01-atoms/grid/_grid-4-up.twig new file mode 100644 index 0000000000..0bb1f7c07f --- /dev/null +++ b/source/_patterns/01-atoms/grid/_grid-4-up.twig @@ -0,0 +1,34 @@ +{# + NOTE: If this row is the very outer wrapper of a page, it *must* be wrapped + in a .container div. We leave this up to the implementor manually for flexibility. +#} + +{% set container_class = container ? 'container' : (container_fluid ? 'container-fluid') %} + +{% if container or container_fluid %}
{% endif %} +
+
+ {% block column_1 %} + Column 1/4 + {% endblock column_1 %} +
+ +
+ {% block column_2 %} + Column 2/4 + {% endblock column_2 %} +
+ +
+ {% block column_3 %} + Column 3/4 + {% endblock column_3 %} +
+ +
+ {% block column_4 %} + Column 4/4 + {% endblock column_4 %} +
+
+{% if container or container_fluid %}
{% endif %} diff --git a/source/_patterns/01-atoms/grid/_grid.scss b/source/_patterns/01-atoms/grid/_grid.scss new file mode 100644 index 0000000000..f663bdc7cf --- /dev/null +++ b/source/_patterns/01-atoms/grid/_grid.scss @@ -0,0 +1,7 @@ +@import '../../00-protons/variables'; + +// Bootstrap override variables go here. +// See available vars in ~bootstrap/scss/_variables.scss +@import '~bootstrap/scss/grid'; + +// Custom grid mixins/CSS-generating rules below diff --git a/source/_patterns/01-atoms/grid/demo/grid-demo.twig b/source/_patterns/01-atoms/grid/demo/grid-demo.twig new file mode 100644 index 0000000000..eb36a4f187 --- /dev/null +++ b/source/_patterns/01-atoms/grid/demo/grid-demo.twig @@ -0,0 +1,61 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + +

Grid Demo

+

+ Grids are exceptionally documented. Encourage reading the grid docs on Bootstrap. + Basics: Wrap content in a container. See Layout Demo for info on containers. + Rows are wrappers for columns via the .row class. + Use col- classes to size your columns between 1 - 12, ex. +

+ +

One column

+ {% embed '@atoms/grid/_grid-1-up.twig' with { container: false } %} + {% block column_1 %} +
+ {% endblock %} + {% endembed %} + +

Two columns

+ {% embed '@atoms/grid/_grid-2-up.twig' with { container: false } %} + {% block column_1 %} +
+ {% endblock %} + {% block column_2 %} +
+ {% endblock %} + {% endembed %} + +

Three columns

+ {% embed '@atoms/grid/_grid-3-up.twig' with { container: false } %} + {% block column_1 %} +
+ {% endblock %} + {% block column_2 %} +
+ {% endblock %} + {% block column_3 %} +
+ {% endblock %} + {% endembed %} + +

Four columns

+ {% embed '@atoms/grid/_grid-4-up.twig' with { container: false } %} + {% block column_1 %} +
+ {% endblock %} + {% block column_2 %} +
+ {% endblock %} + {% block column_3 %} +
+ {% endblock %} + {% block column_4 %} +
+ {% endblock %} + {% endembed %} + + {% endblock column_1 %} diff --git a/source/_patterns/01-atoms/grid/demo/layout-demo.twig b/source/_patterns/01-atoms/grid/demo/layout-demo.twig new file mode 100644 index 0000000000..b2b6c08f19 --- /dev/null +++ b/source/_patterns/01-atoms/grid/demo/layout-demo.twig @@ -0,0 +1,32 @@ +{# + Layout! + Demonstration of Containers from Bootstrap. + See https://getbootstrap.com/docs/4.0/layout/overview/ +#} + +
+

Layout Demo

+

Containers

+

+ Containers are the most basic layout element in Bootstrap and are required when using our default grid system. + Choose from a responsive, fixed-width container (meaning its max-width changes at each breakpoint) or fluid-width (meaning it’s 100% wide all the time). + While containers can be nested, most layouts do not require a nested container. +

+

+ While nesting containers is possible, it's not recommended. + See Bootstrap for usage details. +

+
+ +
+

Container Standard

+

Use .container for the standard version. + Padding is set as an expression of $grid-gutter-width / 2. +

+
+ +
+

Container Fluid

+

Use .container-fluid for a full width container, spanning the entire width of the viewport.

+
+
diff --git a/source/_patterns/01-atoms/grid/index.js b/source/_patterns/01-atoms/grid/index.js new file mode 100644 index 0000000000..05552e7c51 --- /dev/null +++ b/source/_patterns/01-atoms/grid/index.js @@ -0,0 +1,11 @@ +import 'protons'; + +import './_grid.scss'; + +export const name = 'grid'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/01-atoms/icon/_icon.twig b/source/_patterns/01-atoms/icon/_icon.twig new file mode 100644 index 0000000000..85b704b368 --- /dev/null +++ b/source/_patterns/01-atoms/icon/_icon.twig @@ -0,0 +1 @@ + diff --git a/source/_patterns/01-atoms/icon/demo/icons.twig b/source/_patterns/01-atoms/icon/demo/icons.twig new file mode 100644 index 0000000000..8586191629 --- /dev/null +++ b/source/_patterns/01-atoms/icon/demo/icons.twig @@ -0,0 +1,106 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + +

Icons

+ +
+
+

Use

+

An icon font is generated from all SVGs within + the folder @atoms/icon/svg/. Simply add the icon--name + class to any element to add an icon. For instance, if there is a + search.svg within the svg folder, you can add a search + icon like this: <i class="icon--search"></i> + which will result in: .

+

A Sass mixin is also provided that gives greater flexibility. To + add a search icon as a pseudo element to any element, simply @include + icon(search);. Besides icon name, this mixin includes + parameters for pseudo position, text-replacement, size, color, and + block display. See @atoms/icon/scss/_icon-mixins.scss + for more detail.

+

Considerations

+
    +
  • It is recommended that all SVGs be on the same size canvas (512px x 512px). All glyphs are scaled up to the size of the largest glyph otherwise.
    • +
  • Adding new SVGs to the folder requires restarting the webpack dev server.
    • +
  • Font icons inherit the color of their parent text.
    • +
  • The generated font named {{ scssIcons.fontname }} will be base64 inlined into the output CSS.
    • +
+
+
+ +
+ {% for icon in scssIcons.icons %} +
+ + + +

{{ icon }}

+
+ {% endfor %} +
+ + +
+
+

Font Awesome

+

Font Awesome icons are also available for use inside patterns.

+

These can be easily added to inline elements (we recommend using span or i tags) with two classes: fa and fa-icon-name.

+ +

Font awesome icons can also be implemented in Sass, in just two lines: + @include fa-icon(); + content: $fa-icon-name; +

+ +

See _icon.scss for an example of how the Sass approach works.

+ +

There are currently 675 icons available from Font Awesome, sky's the limit.

+
+
+ +
+
+ + + +

fa fa-battery-full

+
+ +
+ + + +

fa fa-moon-o

+
+ +
+ + + +

fa fa-medkit

+
+ +
+ + + +

@include fa-icon();content: $fa-var-train;

+
+ +
+ + + +

@include fa-icon();content: $fa-var-compass;

+
+ +
+ + + +

@include fa-icon();content: $fa-var-apple;

+
+
+ + {% endblock column_1 %} diff --git a/source/_patterns/01-atoms/images/icons.md b/source/_patterns/01-atoms/icon/icon.md similarity index 100% rename from source/_patterns/01-atoms/images/icons.md rename to source/_patterns/01-atoms/icon/icon.md diff --git a/source/_patterns/01-atoms/icon/index.js b/source/_patterns/01-atoms/icon/index.js new file mode 100644 index 0000000000..8bd086c60b --- /dev/null +++ b/source/_patterns/01-atoms/icon/index.js @@ -0,0 +1,17 @@ +/** + * Icon + * + * Relies on generated sass. + */ + +// Import custom sass +import 'protons'; +import './scss/_icon.scss'; + +export const name = 'icon'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/01-atoms/images/_icons.scss b/source/_patterns/01-atoms/icon/scss/_icon-mixins.scss similarity index 55% rename from source/_patterns/01-atoms/images/_icons.scss rename to source/_patterns/01-atoms/icon/scss/_icon-mixins.scss index a4fc1003d3..491805ae35 100644 --- a/source/_patterns/01-atoms/images/_icons.scss +++ b/source/_patterns/01-atoms/icon/scss/_icon-mixins.scss @@ -1,14 +1,13 @@ -@font-face { - font-family: $icon-font-base-name; - src: url("#{$icon-font-path}#{$icon-font-base-name}.eot?cachebust=#{random(99999)}"); - src: /* stylelint-disable-line declaration-colon-space-after */ - url("#{$icon-font-path}#{$icon-font-base-name}.eot?cachebust=#{random(99999)}#iefix") format("eot"), - url("#{$icon-font-path}#{$icon-font-base-name}.woff?cachebust=#{random(99999)}") format("woff"), - url("#{$icon-font-path}#{$icon-font-base-name}.ttf?cachebust=#{random(99999)}") format("truetype"), - url("#{$icon-font-path}#{$icon-font-base-name}.svg?cachebust=#{random(99999)}#icons") format("svg"); - font-weight: normal; - font-style: normal; -} +/// +/// Include this file for all non-printing vars involving icons +/// + +// $icon-font-base-name and $font-icons come from here: +@import 'icon-map-generated'; + +$icon-font-path: '../font/'; +$icon-font-class-prefix: 'icon--'; + @mixin font-icon-base() { font-family: $icon-font-base-name; @@ -20,7 +19,9 @@ speak: none; text-decoration: inherit; text-transform: none; - text-rendering: optimizeLegibility; + text-rendering: auto; + font-size: inherit; + transform: translate(0, 0); } @mixin font-icon-replace($pseudo) { @@ -74,27 +75,3 @@ display: block; } } - -/** - * Font application to generic DOM - */ - -//@font-face { -// font-family: $icon-font-base-name; -// src: $icon-font-source-1; -// src: $icon-font-source-2; -// font-weight: normal; -// font-style: normal; -//} - -// Everything with .icon--something has a base set of styles in order to view -[class*="#{$icon-font-class-prefix}--"] { - @include font-icon-base; -} - -// Print .icon--thingy classes using default :before for easy elements -@each $icon-name, $icon-symbol in $font-icons { - .#{$icon-font-class-prefix}--#{$icon-name}::before { - content: map-get($font-icons, $icon-name); - } -} diff --git a/source/_patterns/01-atoms/icon/scss/_icon.scss b/source/_patterns/01-atoms/icon/scss/_icon.scss new file mode 100644 index 0000000000..12fd78b65a --- /dev/null +++ b/source/_patterns/01-atoms/icon/scss/_icon.scss @@ -0,0 +1,68 @@ +/// +/// The printing output for icons, includes classes and font face. +/// + +@import 'icon-mixins'; +@import '~font-awesome/scss/mixins'; +@import '~font-awesome/scss/variables'; + + +@font-face { + font-family: $icon-font-base-name; + src: url("#{$icon-font-path}#{$icon-font-base-name}.eot?cachebust=#{random(99999)}"); + src: /* stylelint-disable-line declaration-colon-space-after */ + url("#{$icon-font-path}#{$icon-font-base-name}.eot#iefix") format("eot"), + url("#{$icon-font-path}#{$icon-font-base-name}.woff") format("woff"), + url("#{$icon-font-path}#{$icon-font-base-name}.ttf") format("truetype"); + // Leaving out svg for the time being + //url("#{$icon-font-path}#{$icon-font-base-name}.svg##{$icon-font-base-name}") format("svg"); + font-weight: normal; + font-style: normal; +} + +/** + * Font application to generic DOM + */ + +//@font-face { +// font-family: $icon-font-base-name; +// src: $icon-font-source-1; +// src: $icon-font-source-2; +// font-weight: normal; +// font-style: normal; +//} + +// Everything with .icon--something has a base set of styles in order to view +[class*="#{$icon-font-class-prefix}"] { + @include font-icon-base; +} + +// Print .icon--thingy classes using default :before for easy elements +@each $icon-name, $icon-symbol in $font-icons { + .#{$icon-font-class-prefix}#{$icon-name}::before { + content: map-get($font-icons, $icon-name); + } +} + + +// Font-Awesome Sass Examples +.fontawesome-example { + &:before { + @include fa-icon(); + content: $fa-var-train; + } +} + +.fontawesome-example2 { + &:after { + @include fa-icon(); + content: $fa-var-compass; + } +} + +.fontawesome-example3 { + &:after { + @include fa-icon(); + content: $fa-var-apple; + } +} diff --git a/source/_patterns/01-atoms/icon/svg/chevron-down.svg b/source/_patterns/01-atoms/icon/svg/chevron-down.svg new file mode 100644 index 0000000000..a344381ad9 --- /dev/null +++ b/source/_patterns/01-atoms/icon/svg/chevron-down.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_patterns/01-atoms/icon/svg/chevron-left.svg b/source/_patterns/01-atoms/icon/svg/chevron-left.svg new file mode 100644 index 0000000000..79a86adc6e --- /dev/null +++ b/source/_patterns/01-atoms/icon/svg/chevron-left.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_patterns/01-atoms/icon/svg/chevron-right.svg b/source/_patterns/01-atoms/icon/svg/chevron-right.svg new file mode 100644 index 0000000000..1ff108a8b4 --- /dev/null +++ b/source/_patterns/01-atoms/icon/svg/chevron-right.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_patterns/01-atoms/icon/svg/chevron-up.svg b/source/_patterns/01-atoms/icon/svg/chevron-up.svg new file mode 100644 index 0000000000..2b34f4de68 --- /dev/null +++ b/source/_patterns/01-atoms/icon/svg/chevron-up.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_patterns/01-atoms/icon/svg/close.svg b/source/_patterns/01-atoms/icon/svg/close.svg new file mode 100644 index 0000000000..4a0ee1e6a8 --- /dev/null +++ b/source/_patterns/01-atoms/icon/svg/close.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_patterns/01-atoms/icon/svg/menu.svg b/source/_patterns/01-atoms/icon/svg/menu.svg new file mode 100644 index 0000000000..378b7d5fb9 --- /dev/null +++ b/source/_patterns/01-atoms/icon/svg/menu.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_patterns/01-atoms/icon/svg/person.svg b/source/_patterns/01-atoms/icon/svg/person.svg new file mode 100644 index 0000000000..07e88c3102 --- /dev/null +++ b/source/_patterns/01-atoms/icon/svg/person.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_patterns/01-atoms/icon/svg/search.svg b/source/_patterns/01-atoms/icon/svg/search.svg new file mode 100644 index 0000000000..acd2120323 --- /dev/null +++ b/source/_patterns/01-atoms/icon/svg/search.svg @@ -0,0 +1 @@ + diff --git a/source/_patterns/01-atoms/icon/templates/template.icon-map-generated.njk b/source/_patterns/01-atoms/icon/templates/template.icon-map-generated.njk new file mode 100644 index 0000000000..bb9a338898 --- /dev/null +++ b/source/_patterns/01-atoms/icon/templates/template.icon-map-generated.njk @@ -0,0 +1,11 @@ +/// +/// GENERATED Sass variables from the webpack-iconfont-plugin: +/// https://github.com/artofrawr/webpack-iconfont-plugin +/// Do NOT edit this file. Instead, edit the template.icon-map-generated.njk + +$icon-font-base-name: {{ fontName }}; +$font-icons: ( +{%- for glyph in glyphs %} + {{ glyph.name }}: "\{{ glyph.unicode[0].charCodeAt(0).toString(16) }}", +{%- endfor %} +); diff --git a/source/_patterns/01-atoms/image/_image.scss b/source/_patterns/01-atoms/image/_image.scss new file mode 100644 index 0000000000..457e2f2684 --- /dev/null +++ b/source/_patterns/01-atoms/image/_image.scss @@ -0,0 +1,6 @@ +@import '../../00-protons/variables'; + +// Override any Bootstrap image vars here +@import '~bootstrap/scss/images'; + +// Custom general image behavior here diff --git a/source/_patterns/01-atoms/images/_img.twig b/source/_patterns/01-atoms/image/_image.twig similarity index 93% rename from source/_patterns/01-atoms/images/_img.twig rename to source/_patterns/01-atoms/image/_image.twig index 7d23b04956..5e1016cd70 100644 --- a/source/_patterns/01-atoms/images/_img.twig +++ b/source/_patterns/01-atoms/image/_image.twig @@ -1,5 +1,5 @@ {# if we're in pattern lab and there's no specific `img`, let's do a placeholder image #} -{% if pl and not img %} +{% if BUILD_TARGET == 'pl' and not img %} {# default image style is `medium` #} {% set imageStyleName = imageStyleName|default('medium') %} @@ -28,7 +28,7 @@ {% if bg %}
{% else %} - + A placeholder image {% endif %} {% else %} {# Is `img` an object or string? #} @@ -38,6 +38,6 @@ {% if bg %}
{% else %} - {{ imgAlt }} + {{ imgAlt }} {% endif %} {% endif %} diff --git a/source/_patterns/01-atoms/image/_svg.twig b/source/_patterns/01-atoms/image/_svg.twig new file mode 100644 index 0000000000..34ad3e0b76 --- /dev/null +++ b/source/_patterns/01-atoms/image/_svg.twig @@ -0,0 +1 @@ +{{ source(svgpath) }} diff --git a/source/_patterns/01-atoms/image/demo/cat.jpg b/source/_patterns/01-atoms/image/demo/cat.jpg new file mode 100755 index 0000000000..bd31679207 Binary files /dev/null and b/source/_patterns/01-atoms/image/demo/cat.jpg differ diff --git a/source/_patterns/01-atoms/image/demo/image-img.md b/source/_patterns/01-atoms/image/demo/image-img.md new file mode 100644 index 0000000000..7878757c56 --- /dev/null +++ b/source/_patterns/01-atoms/image/demo/image-img.md @@ -0,0 +1,19 @@ +# How to handle static assets! + +Please note how `@atoms/image/demo/logo.twig` contains this code: + +``` +{% include "@atoms/_image.twig" with { + img: { + src: paths.assets ~ '/logo.svg', + } +} %} +``` + +And also notice how `@atoms/image/index.js` contains this code: + +``` +import './logo.svg'; +``` + +All static assets (images, fonts) **must** be referenced within the javascript dependency chain to be moved to `dist/assets/`. These assets will be available to PL after running `npm run compile:pl`. diff --git a/source/_patterns/01-atoms/image/demo/image-img.twig b/source/_patterns/01-atoms/image/demo/image-img.twig new file mode 100644 index 0000000000..53324c6a6b --- /dev/null +++ b/source/_patterns/01-atoms/image/demo/image-img.twig @@ -0,0 +1,25 @@ +{# +All paths reference distributed OUTPUT, not local. Static assets are only +referencable post-build. +#} + +{% extends '@atoms/_grid-2-up.twig' %} + {% set container = true %} + + {% block column_1 %} +

SVG (in pattern)

+ {% include "@atoms/_image.twig" with { + img: { + src: paths.assets ~ '/logo.svg', + } + } %} + {% endblock column_1 %} + + {% block column_2 %} +

JPG (demo-only)

+ {% include '@atoms/_image.twig' with { + img: { + src: paths.assets ~ '/cat.jpg', + } + } %} + {% endblock column_2 %} diff --git a/source/_patterns/01-atoms/image/demo/image-inline.twig b/source/_patterns/01-atoms/image/demo/image-inline.twig new file mode 100644 index 0000000000..faae4887cb --- /dev/null +++ b/source/_patterns/01-atoms/image/demo/image-inline.twig @@ -0,0 +1,20 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + +

Inline SVG

+ +

Grab and inline any svg within source by passing its namespace'd path. For instance: @atoms/icon/svg/person.svg:

+ + {% include '@atoms/image/_svg.twig' with { + svgpath: '@atoms/icon/svg/person.svg', + } %} + +

Or @atoms/image/logo.svg:

+ + {% include '@atoms/image/_svg.twig' with { + svgpath: '@atoms/image/logo.svg', + } %} + + {% endblock column_1 %} diff --git a/source/_patterns/01-atoms/image/demo/image-styles.twig b/source/_patterns/01-atoms/image/demo/image-styles.twig new file mode 100644 index 0000000000..0b34bbf651 --- /dev/null +++ b/source/_patterns/01-atoms/image/demo/image-styles.twig @@ -0,0 +1,15 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + +

Image styles

+ {% for imageStyleName, imageStyleSetting in imageStyles %} +
+ {% include "@atoms/_image.twig" with { + imageStyleName: imageStyleName + } %} +
+ {% endfor %} + + {% endblock %} diff --git a/source/_patterns/01-atoms/image/demo/index.js b/source/_patterns/01-atoms/image/demo/index.js new file mode 100644 index 0000000000..8fd93f67bb --- /dev/null +++ b/source/_patterns/01-atoms/image/demo/index.js @@ -0,0 +1,9 @@ +/** + * Demo of Image. Pull in image assets, but provide demo-only assets. + */ + +// Ensure all image pattern deps are present +import 'atoms/image'; + +// Demo-only asset: cat.jpg +import './cat.jpg'; diff --git a/source/_patterns/01-atoms/image/index.js b/source/_patterns/01-atoms/image/index.js new file mode 100644 index 0000000000..131ffc801a --- /dev/null +++ b/source/_patterns/01-atoms/image/index.js @@ -0,0 +1,19 @@ +// Import custom sass, includes Bootstrap sass +import './_image.scss'; + +// Pull in system-wide images +import './logo.svg'; + +export const name = 'image'; + +export function disable() {} + +export function enable($context, { enableHolder }) { + // Holder is only provided to PL, not Drupal. Like jQuery it's an IIFE + // We can only conditionally import libraries using `require()` + if (enableHolder) { + require('holderjs'); // eslint-disable-line global-require + } +} + +export default enable; diff --git a/source/_patterns/01-atoms/image/logo.svg b/source/_patterns/01-atoms/image/logo.svg new file mode 100644 index 0000000000..38d535891d --- /dev/null +++ b/source/_patterns/01-atoms/image/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/source/_patterns/01-atoms/images/icons.twig b/source/_patterns/01-atoms/images/icons.twig deleted file mode 100644 index b92166cd20..0000000000 --- a/source/_patterns/01-atoms/images/icons.twig +++ /dev/null @@ -1,15 +0,0 @@ -
- -
- icon--close -
- -
- icon--menu -
- -
- icon--search -
- -
diff --git a/source/_patterns/01-atoms/images/image-styles.twig b/source/_patterns/01-atoms/images/image-styles.twig deleted file mode 100644 index 5c3d7188ba..0000000000 --- a/source/_patterns/01-atoms/images/image-styles.twig +++ /dev/null @@ -1,4 +0,0 @@ -{% for imageStyleName, imageStyleSetting in imageStyles %} - {% include "@atoms/_img.twig" with {imageStyleName: imageStyleName} %} -

-{% endfor %} diff --git a/source/_patterns/01-atoms/images/logo.twig b/source/_patterns/01-atoms/images/logo.twig deleted file mode 100644 index 75b8dd4771..0000000000 --- a/source/_patterns/01-atoms/images/logo.twig +++ /dev/null @@ -1 +0,0 @@ - diff --git a/source/_patterns/01-atoms/list-group/_list-group.scss b/source/_patterns/01-atoms/list-group/_list-group.scss new file mode 100644 index 0000000000..bfef0d2453 --- /dev/null +++ b/source/_patterns/01-atoms/list-group/_list-group.scss @@ -0,0 +1,9 @@ +@import '../../00-protons/variables'; + +// To change default bootstrap list-item variables, +// copy from ~bootstrap/scss/variables to here + +@import "~bootstrap/scss/list-group"; +//@import "~bootstrap/scss/transitions"; + +// Add custom code here diff --git a/source/_patterns/01-atoms/list-group/_list-group.twig b/source/_patterns/01-atoms/list-group/_list-group.twig new file mode 100644 index 0000000000..1ca5abc577 --- /dev/null +++ b/source/_patterns/01-atoms/list-group/_list-group.twig @@ -0,0 +1,46 @@ +{# + List-group: + + parent_element: String: ul|ol|div The html element that will contain the list. + list_id: String: a unique id for the list. + items: Object: The items you wish you put into a list. + item_element: String: li|a|div The html element that the item will use. + item_classes: Array: Accepts active, disabled, list-group-item-action, list-group-item-(color). See https://getbootstrap.com/docs/4.0/components/list-group/#with-badges for examples. See https://getbootstrap.com/docs/4.0/utilities/flex/ for flex options + item_text: String: The text of the list item. + item_badge: Array: See the documentation for badges in source/_patterns/01-atoms/badge/_badge.twig. + list_flush: Boolean: True|False Only use this variable if the list is on a card. this will make it align properly. + + see https://getbootstrap.com/docs/4.0/components/list-group/ +#} + +{% set parent_element = parent_element | default('ul') %} + +{% if list_flush %} + {% set list_flush = 'list-group-flush' %} +{% endif %} + +{% if list_id %} + {% set list_id = 'id="' ~ list_id ~ '"' %} +{% endif %} + +<{{ parent_element }} class="list-group {{ list_flush }}" {{ list_id }}> + {% for item in items %} + + {% set element = item.item_element | default('li') %} + + {% set classes = [ + 'list-group-item', + 'list-group-item-' ~ item.item_color, + ] | merge(item.item_classes | default([])) | join(' ') %} + + {% set attributes = [ + ] | merge(item.item_attributes | default([])) | join(' ')%} + + <{{element}} class="{{ classes }}" {{ item_id }}{{ attributes }}> + {{ item.item_text }} + {% if item.item_badge %} + {% include '@atoms/badge/_badge.twig' with item.item_badge %} + {% endif %} + + {% endfor %} + diff --git a/source/_patterns/01-atoms/list-group/demo/list-groups.md b/source/_patterns/01-atoms/list-group/demo/list-groups.md new file mode 100644 index 0000000000..8a0a0351c4 --- /dev/null +++ b/source/_patterns/01-atoms/list-group/demo/list-groups.md @@ -0,0 +1,11 @@ +## Variables + +| Name | Type | Options | Description +--- | --- | --- | --- +| parent_element | string | ul,ol,div | the html element that will contain the list +| list_id | string | any | a unique id for the list +| items | object | any | the items you wish you put into a list +| item_element | string | li,a,div | the html element that the item will use +| item_classes | array | any | accepts active, disabled, list-group-item-action, list-group-item-(color). See https://getbootstrap.com/docs/4.0/components/list-group/#with-badges for examples. +| item_text | string | any | the text of the list item +| list_flush | boolean | True, False | only use this variable if the list is on a card. this will make it align properly diff --git a/source/_patterns/01-atoms/list-group/demo/list-groups.twig b/source/_patterns/01-atoms/list-group/demo/list-groups.twig new file mode 100644 index 0000000000..cfc16b9e95 --- /dev/null +++ b/source/_patterns/01-atoms/list-group/demo/list-groups.twig @@ -0,0 +1,206 @@ +{# This function loops through the scssColors global variable to make an array of all the available colors. #} +{% set colors = [] %} +{% for name, rgb in scssColors %} + {% set colors = colors|merge([name]) %} +{% endfor %} + +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} +
+

List Group

+ {% include '@molecules/card/_card-helper.twig' with { + card_text: list_group_helper, + card_background: 'secondary', + text_color: 'light', + } %} +
+ + {# Basic examples #} +
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Basic Examples', + card_text: list_group_helper_basic, + } %} +
+
+
+ {% include '@atoms/list-group/_list-group.twig' with list_group_text %} +
+
+ {# This block of code is going to appear multiple times. It exists because the _list-group.twig + template ultimately needs an object to iterate through to generate the individual items. These code + blocks exist to pull data from multiple disperate places (the all_colors array, list-groups.yml, + etc.) and combine them into a single object that the template can then process. #} + {% set color_items = [] %} + {# Iterate over colors, since this is actually what we're demo'ing #} + {% for color in colors %} + {# Inline object merged into random text object #} + {% set temp_item = { item_color: color } | merge(random(list_group_text.items)) %} + {# Build up the color_items array #} + {% set color_items = color_items|merge([temp_item]) %} + {% endfor %} + {% include '@atoms/list-group/_list-group.twig' with { + items: color_items + } %} +
+
+ + {# Active and Disabled Items #} +
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Active and Disabled Items', + card_text: list_group_helper_active, + } %} +
+
+
+

Active Items

+ {% set active_items = [] %} + {% for item in list_group_active %} + {% set temp_item = item | merge(random(list_group_text.items)) %} + {% set active_items = active_items|merge([temp_item]) %} + {% endfor %} + {% include '@atoms/list-group/_list-group.twig' with { + items: active_items + } %} +
+
+

Disabled Items

+ {% set disabled_items = [] %} + {% for item in list_group_disabled %} + {% set temp_item = item | merge(random(list_group_text.items)) %} + {% set disabled_items = disabled_items|merge([temp_item]) %} + {% endfor %} + {% include '@atoms/list-group/_list-group.twig' with { + items: disabled_items + } %} +
+
+

Action

+ {% set action_items = [] %} + {% for item in list_group_text.items %} + {% set temp_item = item | merge({item_color: random(colors)}) | merge({item_classes: ['list-group-item-action']}) %} + {% set action_items = action_items|merge([temp_item]) %} + {% endfor %} + {% include '@atoms/list-group/_list-group.twig' with { + items: action_items + } %} +
+
+ + {# Other Elements #} +
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Other elements', + card_text: list_group_helper_elements, + } %} +
+
+
+

Link List

+ {% set link_items = [] %} + {% for item in list_group_text.items %} + {% set temp_item = item | merge({item_color: random(colors)}) | merge({item_element: 'a'}) %} + {% set link_items = link_items|merge([temp_item]) %} + {% endfor %} + {% include '@atoms/list-group/_list-group.twig' with { + items: link_items, + } %} +
+
+

Button

+ {% set button_items = [] %} + {% for item in list_group_text.items %} + {% set temp_item = item | merge({item_color: random(colors)}) | merge({item_element: 'button'}) %} + {% set button_items = button_items|merge([temp_item]) %} + {% endfor %} + {% include '@atoms/list-group/_list-group.twig' with { + items: button_items, + } %} +
+
+ + {# Adding Elements #} +
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Adding Elements', + card_text: list_group_helper_adding, + } %} +
+
+
+

Badges

+ {% set badge_data = { + badge_text: 'badge', + badge_pill: 'true', + } %} + {% set badge_classes = [ + 'list-group-item', + 'd-flex', + 'justify-content-between', + 'align-items-center', + ] %} + {% set badge_items = [] %} + {% for item in list_group_text.items %} + {% set temp_item = item | merge({item_color: random(colors)}) | merge({item_badge: badge_data}) | merge({item_classes: badge_classes}) %} + {% set badge_items = badge_items|merge([temp_item]) %} + {% endfor %} + {% include '@atoms/list-group/_list-group.twig' with { + items: badge_items, + } %} +
+
+

Custom HTML

+ {% set custom_items = [] %} + {% set custom_classes = [ + 'list-group-item', + 'list-group-item-action', + 'flex-column', + 'align-items-start', + ] %} + {% for item in list_group_custom_text.items %} + {% set temp_item = item | merge({item_classes: custom_classes}) %} + {% set custom_items = custom_items|merge([temp_item]) %} + {% endfor %} + {% include '@atoms/list-group/_list-group.twig' with { + items: custom_items, + } %} +
+
+ + {#Toggleable Items#} +
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Toggleable Items', + card_text: list_group_helper_toggleable, + button: { + button_link: 'https://getbootstrap.com/docs/4.0/components/list-group/#via-javascript', + }, + } %} +
+
+
+

Toggleable

+ {% set toggle_items = [] %} + {% for item in list_group_toggleable.items %} + {% set temp_item = item | merge({item_element: 'a'}) %} + {% set toggle_items = toggle_items|merge([temp_item]) %} + {% endfor %} + {% include '@atoms/list-group/_list-group.twig' with { + parent_element: 'div', + list_id: 'mylist', + items: toggle_items, + } %} +
+
+
+
This is home content!
+
This is profile content!
+
This is messages content!
+
This is settings content!
+
+
+
+ {% endblock column_1 %} diff --git a/source/_patterns/01-atoms/list-group/demo/list-groups.yml b/source/_patterns/01-atoms/list-group/demo/list-groups.yml new file mode 100644 index 0000000000..394b95eb5b --- /dev/null +++ b/source/_patterns/01-atoms/list-group/demo/list-groups.yml @@ -0,0 +1,102 @@ +list_group_helper: "

List groups are a flexible and powerful component for displaying a series of content. Modify and extend them to support just about any content within.

Every example is using at least the item_text variable. Because of how many classes can be applied to each list item, item_classes is an empty array for the user to put their classes in.

" + +list_group_helper_basic: "This shows a basic list group and how individual list items' color can be changed by adding list-group-item-(color) to the item_classes variable" + +list_group_helper_active: "Add the active class to a list-item to indicate the current active selection. Add the disabled class to a list-item to make it appear disabled. Add the action class to make the list-item change on hover" + +list_group_helper_elements: "Lists are usually made of li tags, but they can be made of div, a, and button tags as well" + +list_group_helper_adding: "List items can contain things like badges and custom html. The badges are using several utility classes to display correctly including list-group-item-warning, justify-content-between, d-flex, align-items-center" + +list_group_helper_toggleable: 'List items can use the tab Javascript plugin to allow list group to create tabbable panes of content. You can activate a list group navigation without writing any JavaScript by simply specifying data-toggle="list" or on an element. Use these data attributes on .list-group-item. +

To make tabs panel fade in, add .fade to each .tab-pane. The first tab pane must also have .show to make the initial content visible.

' + +list_group_text: + items: + - item_text: Cras justo odio + - item_text: Dapibus ac facilisis in + - item_text: Morbi leo risus + - item_text: Porta ac consectetur ac + - item_text: Vestibulum at eros + +list_group_active: + - item_classes: + - active + - item_classes: + - item_classes: + - active + - item_classes: + - item_classes: + - active + +list_group_disabled: + - item_classes: + - disabled + - item_classes: + - item_classes: + - disabled + - item_classes: + - item_classes: + - disabled + +list_group_custom_text: + items: + - item_text: '
+
List group item heading
+ 3 days ago +
+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

+ Donec id elit non mi porta.' + - item_text: '
+
List group item heading
+ 3 days ago +
+

Donec 8id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

+ Donec id elit non mi porta.' + - item_text: '
+
List group item heading
+ 3 days ago +
+

Donec id elit non mi porta gravida at eget metus. Maecenas sed diam eget risus varius blandit.

+ Donec id elit non mi porta.' + +list_group_toggleable: + parent_element: div + list_id: mylist + items: + - item_id: list-home-list + item_classes: + - list-group-item-action active + item_attributes: + - 'data-toggle="list"' + - 'href="#list-home"' + - 'role="tab"' + - 'aria-controls="home"' + item_text: Home + - item_id: list-profile-list + item_classes: + - list-group-item-action + item_attributes: + - 'data-toggle="list"' + - 'href="#list-profile"' + - 'role="tab"' + - 'aria-controls="profile"' + item_text: Profile + - item_id: list-messages-list + item_classes: + - list-group-item-action + item_attributes: + - 'data-toggle="list"' + - 'href="#list-messages"' + - 'role="tab"' + - 'aria-controls="messages"' + item_text: Messages + - item_id: list-settings-list + item_classes: + - list-group-item-action + item_attributes: + - 'data-toggle="list"' + - 'href="#list-settings"' + - 'role="tab"' + - 'aria-controls="settings"' + item_text: Settings diff --git a/source/_patterns/01-atoms/list-group/index.js b/source/_patterns/01-atoms/list-group/index.js new file mode 100644 index 0000000000..06092faa90 --- /dev/null +++ b/source/_patterns/01-atoms/list-group/index.js @@ -0,0 +1,19 @@ +/** + * List-group + */ +import 'bootstrap/js/src/tab'; + +// Module dependencies +import 'protons'; +import 'atoms/badge'; + +// Import custom sass, includes Bootstrap sass +import './_list-group.scss'; + +export const name = 'list-group'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/02-molecules/branding/_branding.scss b/source/_patterns/02-molecules/branding/_branding.scss deleted file mode 100644 index 645db86cfd..0000000000 --- a/source/_patterns/02-molecules/branding/_branding.scss +++ /dev/null @@ -1,11 +0,0 @@ -.branding { - &__logo { - - } - &__name { - - } - &__slogan { - - } -} diff --git a/source/_patterns/02-molecules/branding/branding.twig b/source/_patterns/02-molecules/branding/branding.twig deleted file mode 100644 index 0a0d8ef395..0000000000 --- a/source/_patterns/02-molecules/branding/branding.twig +++ /dev/null @@ -1,19 +0,0 @@ - diff --git a/source/_patterns/02-molecules/caption-block/_caption-block.scss b/source/_patterns/02-molecules/caption-block/_caption-block.scss deleted file mode 100644 index 5d4a63ad2c..0000000000 --- a/source/_patterns/02-molecules/caption-block/_caption-block.scss +++ /dev/null @@ -1,21 +0,0 @@ -.caption-block { - @include local-base(); - margin: 0; - - &__image { - - } - - &__title { - - } - - &__body { - font-size: 1em; // 16px (default) - line-height: 1.35em; - - @include breakpoint($bp--medium) { - line-height: 1.5em; - } - } -} diff --git a/source/_patterns/02-molecules/caption-block/caption-block.twig b/source/_patterns/02-molecules/caption-block/caption-block.twig deleted file mode 100644 index dad5d19bc9..0000000000 --- a/source/_patterns/02-molecules/caption-block/caption-block.twig +++ /dev/null @@ -1,13 +0,0 @@ -
-
- {% include "@atoms/_img.twig" %} -
-
- {% if title %}

{{ title }}

{% endif %} -
- {% block body %} -

{{ excerpt.medium }}

- {% endblock %} -
-
-
diff --git a/source/_patterns/02-molecules/card/_card-helper.twig b/source/_patterns/02-molecules/card/_card-helper.twig new file mode 100644 index 0000000000..a3a74b9d98 --- /dev/null +++ b/source/_patterns/02-molecules/card/_card-helper.twig @@ -0,0 +1,11 @@ +{# + Helper Card! + This is a simple example of extending an existing template to make a new template +#} + +{% extends '@molecules/card/_card.twig' %} +{# In this context we're hard-coding the only thing we need to override for a helper card. #} +{% set button_element = 'a' %} +{% set button_color = 'primary' %} +{% set button_text = 'More Info' | t %} +{% set card_border = 'none' %} diff --git a/source/_patterns/02-molecules/card/_card.scss b/source/_patterns/02-molecules/card/_card.scss new file mode 100644 index 0000000000..97d0d26f3f --- /dev/null +++ b/source/_patterns/02-molecules/card/_card.scss @@ -0,0 +1,14 @@ +// All component Sass needs non-printing base config +@import '../../00-protons/variables'; + +// To change default bootstrap card variables, SEE ~bootstrap/scss/variables +// Add bootstrap variables here +$card-border-width: 1px; + +@import '~bootstrap/scss/card'; + +// Add custom code here +.border-none { + border-style: none; +} + diff --git a/source/_patterns/02-molecules/card/_card.twig b/source/_patterns/02-molecules/card/_card.twig new file mode 100644 index 0000000000..67544db493 --- /dev/null +++ b/source/_patterns/02-molecules/card/_card.twig @@ -0,0 +1,110 @@ +{# + Card! + + card_element: String (optional): Element tag that defaults to div. + card_width: Integer: 25|50|75 If left empty the card will fill the width of it's parent element. + card_background: String: primary|secondary|succes|danger|warning|info|light|dark Background color. + card_border: String: primary|secondary|succes|danger|warning|info|light|dark Border color. + text_alignment: String: center|right|left|jusfify Text alignment. + card_header: String: The header on the card. + card_image_location: String: top|bottom Indicates where the image is. + card_image: Object: + src: String: Path to image + card_image_overlay: String: The text overlay for an image (may require additional utilities). + card_title: String: The title on the cared. + card_subtitle: String: The subtitle on the card. + card_text: String: The text on the card. + text_color: String: primary|secondary|succes|danger|warning|info|light|dark Text color. + card_link: String: The path to another URL. + card_link_text: String: The link's text. + card_list: Number: The number of items in the list. + list_item: Loop variable: Do not set. + card_footer: String: The text on the footer. + + see https://getbootstrap.com/docs/4.0/components/card/ for more details +#} + +{% set card_classes = [ + 'card', + card_width ? 'w-' ~ card_width, + card_cols ? card_cols : '', + text_alignment ? 'text-' ~ text_alignment, + text_color ? 'text-' ~ text_color, + card_background ? 'bg-' ~ card_background, + card_border ? 'border-' ~ card_border, + card_other_classes, +] | sort | join(' ') | trim %} + +
+ {% block card_header %} + {% if card_header %} +
+ {{ card_header }} +
+ {% endif %} + {% endblock card_header %} + + {% if card_image_location == 'top' %} + {% block card_image_top %} + {# if `card_image` is null, this falls back to a holderjs placeholder #} + {% include '@atoms/image/_image.twig' with { + imageStyleName: 'card', + class: 'card-img-top', + img: card_image, + } %} + {% endblock %} + {% endif %} + + {% if card_image_overlay %} +
+

{{ card_image_overlay }}

+
+ {% endif %} + + {% if card_flush %} + {# Note that 'p2card__flush__body' is not a bootstrap class. It only being used to designate the flush body#} + {% set body_class = 'p2card__flush--body' %} + {% else %} + {% set body_class = 'card-body' %} + {% endif %} + + {% block card_body %} +
+

{{ card_title }}

+ {% if card_subtitle %} +
{{ card_subtitle }}
+ {% endif %} + {% if card_text %} +

{{ card_text }}

+ {% endif %} + {% if card_link %} + {{ card_link_text }} + {% endif %} + {% if button %} + {% include "@atoms/button/_button.twig" with button %} + {% endif %} +
+ {% endblock %} + + {% if list %} + {% include '@atoms/list-group/_list-group.twig' with list %} + {% endif %} + + {% if card_footer %} +
+ {{ card_footer }} +
+ {% endif %} + + {% if card_image_location == 'bottom' %} + {% block card_image_bottom %} + {# if `card_image` is null, this falls back to a holderjs placeholder #} + {% include '@atoms/image/_image.twig' with { + imageStyleName: 'card', + class: 'card-img-bottom', + img: card_image, + } %} + {% endblock card_image_bottom %} + {% endif %} + +
diff --git a/source/_patterns/02-molecules/card/demo/cards.twig b/source/_patterns/02-molecules/card/demo/cards.twig new file mode 100644 index 0000000000..cc6a53e4f5 --- /dev/null +++ b/source/_patterns/02-molecules/card/demo/cards.twig @@ -0,0 +1,134 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} +

Cards

+
+ {% include '@molecules/card/_card-helper.twig' with { + card_text: helper_card_main, + card_background: 'secondary', + text_color: 'light', + } %} +
+
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Text', + card_text: helper_card_text, + button: { + button_link: 'https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works', + }, + } %} +
+
+
+ {% include '@molecules/card/_card.twig' with text_card_1 %} +
+
+ {% include '@molecules/card/_card.twig' with text_card_2 %} +
+
+ {% include '@molecules/card/_card.twig' with text_card_3 %} +
+
+ +
+ {% include '@molecules/card/_card-helper.twig' with { + card_text: helper_card_text_2, + } %} +
+
+ {% embed '@atoms/grid/_grid-3-up.twig' %} + {% block column_1 %} + {% include '@molecules/card/_card.twig' with text_card_1 %} + {% endblock column_1 %} + {% block column_2 %} + {% include '@molecules/card/_card.twig' with text_card_2 %} + {% endblock column_2 %} + {% block column_3 %} + {% include '@molecules/card/_card.twig' with text_card_3 %} + {% endblock column_3 %} + {% endembed %} +
+ +
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Width', + card_text: helper_card_width, + button: { + button_link: 'https://getbootstrap.com/docs/4.0/layout/grid/#how-it-works', + }, + } %} +
+
+
+ {% include '@molecules/card/_card.twig' with card_width_1 %} + {% include '@molecules/card/_card.twig' with card_width_2 %} + {% include '@molecules/card/_card.twig' with card_width_3 %} +
+
+ +
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Image', + card_text: helper_card_image, + button: { + button_link: 'https://getbootstrap.com/docs/4.0/components/card/#card-decks', + }, + } %} +
+
+ {% include '@molecules/card/_card.twig' with top_image %} + {% include '@molecules/card/_card.twig' with bottom_image %} + {% include '@molecules/card/_card.twig' with overlay_image %} +
+ +
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Structure', + card_text: helper_card_structure, + button: { + button_link: 'https://getbootstrap.com/docs/4.0/components/card/#header-and-footer', + }, + } %} +
+
+ {% include '@molecules/card/_card.twig' with header_card %} + {% include '@molecules/card/_card.twig' with footer_card %} + {% include '@molecules/card/_card.twig' with list_card %} +
+ +
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Background and Border', + card_text: helper_card_colors, + button: { + button_link: 'https://getbootstrap.com/docs/4.0/components/card/#card-columns', + }, + } %} +
+
+ {% include '@molecules/card/_card.twig' with card_background_1 %} + {% include '@molecules/card/_card.twig' with card_background_2 %} + {% include '@molecules/card/_card.twig' with card_background_3 %} + {% include '@molecules/card/_card.twig' with card_background_4 %} + {% include '@molecules/card/_card.twig' with card_border_1 %} + {% include '@molecules/card/_card.twig' with card_border_2 %} + {% include '@molecules/card/_card.twig' with card_border_3 %} + {% include '@molecules/card/_card.twig' with card_border_4 %} +
+
+ {% include '@molecules/card/_card-helper.twig' with { + card_title: 'Variation', + card_text: helper_card_blocks, + } %} +
+
+ {% embed '@molecules/card/_card.twig' %} + {% block card_body %} +

First Title

+

Second Title

+

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet facilisis erat. Suspendisse ultrices sed massa a faucibus.

+ {% endblock %} + {% endembed %} +
+ {% endblock column_1 %} diff --git a/source/_patterns/02-molecules/card/demo/cards.yml b/source/_patterns/02-molecules/card/demo/cards.yml new file mode 100644 index 0000000000..0faa7a49c7 --- /dev/null +++ b/source/_patterns/02-molecules/card/demo/cards.yml @@ -0,0 +1,141 @@ +helper_card_main: "

Bootstrap's cards provide a flexible and extensible content container with multiple variants and options.

Each card has at least the card_title and card_text variables in use and will have a card like this one above it explaining the other variables it is using. Also, each row is demonstrating a different feature of the bootstrap grid system.

" + +helper_card_text: 'Variables: card_subtitle, text_alignment, card_link, card_link_text, text_color, card_flush

Grid: This row is using the standard hand-coded class="col-sm" bootstrap system

' + +helper_card_text_2: 'Grid: This row uses the pattern lab "grid-3" atom located in source/_patterns/01-atoms/grid' + +helper_card_width: 'Variables: card_width

Grid: This row is occupying the whole container by using the col-sm-12 class.' + + +helper_card_image: 'Variables: card_image, card_image_location, card_image_overlay

Grid: This row is using the card-deck class which is unique to cards. It sets all of its cards to an equal width and height.

' + + +helper_card_structure: 'Variables: card_header, card_footer, button_text, button_color, card_list

Grid: This row is using the card-group class which is unique to cards. It renders cards as a single, attached element with equal width and height columns.

' + + +helper_card_colors: 'Variables: card_background, card_border

Grid: This row is using the card-columns class which is unique to cards. It renders cards in the optimal position based on vertical space.

' + +helper_card_blocks: "This example card uses twig's block system to override the provided default body template with new elements" + +text_card_1: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_subtitle: Card subtitle + +text_card_2: + text_alignment: center + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_subtitle: Card subtitle + card_link: 'https://github.com/phase2/particle' + card_link_text: 'Card link' + +text_card_3: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + text_color: danger + card_flush: true + +card_width_1: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_width: 25 + +card_width_2: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_width: 50 + +card_width_3: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_width: 75 + +top_image: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_image_location: top +# # card_image is commented out to allow holderjs placeholder + +bottom_image: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_image_location: bottom +# # card_image is commented out to allow holderjs placeholder + +overlay_image: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_image_overlay: Hi! I'm an overlay! + card_image_location: top +# # card_image is commented out to allow holderjs placeholder + +header_card: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_header: Header + +footer_card: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_footer: Footer + button: + button_text: click me! + button_color: danger + +list_card: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + list: + list_flush: True + items: + - item_text: Cras justo odio + - item_text: Dapibus ac facilisis in + - item_text: Vestibulum at eros + +card_background_1: + card_title: Card Title + card_text: These cards have variable body length + card_background: primary + text_color: white + +card_background_2: + card_title: Card Title + card_text: In order to show off bootstrap's column functionality + card_background: secondary + text_color: white + +card_background_3: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_background: success + text_color: white + +card_background_4: + card_title: Card Title + card_text: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sit amet facilisis erat. Suspendisse ultrices sed massa a faucibus. Vivamus scelerisque eleifend dui, ut consectetur tellus rutrum in. Nullam lobortis, ex vel rutrum volutpat, magna eros tristique nisi, quis bibendum urna erat consequat sapien. + card_background: danger + text_color: white + +card_border_1: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_border: warning + text_color: warning + +card_border_2: + card_title: Card Title + card_text: I'm using a lot of extra words and characters in this sentence to make sure it takes at least three lines! + card_border: info + text_color: info + +card_border_3: + card_title: Card Title + card_text: This card takes two lines. Oops, not quite enough characters, heres some more. + card_border: light + +card_border_4: + card_title: Card Title + card_text: Some quick example text to build on the card title and make up the bulk of the card's content. + card_border: dark + text_color: dark diff --git a/source/_patterns/02-molecules/card/index.js b/source/_patterns/02-molecules/card/index.js new file mode 100644 index 0000000000..38b0407d57 --- /dev/null +++ b/source/_patterns/02-molecules/card/index.js @@ -0,0 +1,19 @@ +/** + * Card + */ + +// Module dependencies +import 'protons'; +import 'atoms/image'; +import 'atoms/button'; + +// Module styles +import './_card.scss'; + +export const name = 'card'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/02-molecules/carousel/_carousel.scss b/source/_patterns/02-molecules/carousel/_carousel.scss new file mode 100644 index 0000000000..03585175a8 --- /dev/null +++ b/source/_patterns/02-molecules/carousel/_carousel.scss @@ -0,0 +1,11 @@ +// All component Sass needs non-printing base config +@import '../../00-protons/variables'; + +// To change default bootstrap carousel variables, SEE ~bootstrap/scss/variables +// Add bootstrap variables here + +//$carousel-control-color: $white; + +@import '~bootstrap/scss/carousel'; + +// Add custom code here diff --git a/source/_patterns/02-molecules/carousel/_carousel.twig b/source/_patterns/02-molecules/carousel/_carousel.twig new file mode 100644 index 0000000000..cee72cbcab --- /dev/null +++ b/source/_patterns/02-molecules/carousel/_carousel.twig @@ -0,0 +1,53 @@ +{# + Carousel + + carousel_id: Integer: The ID of the Carousel. + carousel_controls: Boolean: Adds controls for the Carousel. + carousel_caption: Boolean: Adds the Image Caption in the Carousel Images Array. + carousel_indicators: Array: The Indicators and Associated Data. + carousel_images: Array: The Images and Associated Data. + + see https://getbootstrap.com/docs/4.0/components/carousel/ for more details +#} + +{% set carousel_id = random() %} + + diff --git a/source/_patterns/02-molecules/carousel/demo/carousels.twig b/source/_patterns/02-molecules/carousel/demo/carousels.twig new file mode 100644 index 0000000000..ba5e805264 --- /dev/null +++ b/source/_patterns/02-molecules/carousel/demo/carousels.twig @@ -0,0 +1,31 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} +

Carousel

+ +

A slideshow component for cycling through elements—images or slides of text—like a carousel.

+ + {% include '@atoms/alert/_alert.twig' with alert %} + +

Slides Only

+

Here’s a carousel with slides only. The .active class must be on at least one item initially to show.

+ {% include '@molecules/carousel/_carousel.twig' with carousel_1 %} + +

With Controls

+

Adding in the previous and next controls:

+ {% include '@molecules/carousel/_carousel.twig' with carousel_2 %} + +

With Indicators

+

You can also add the indicators to the carousel, alongside the controls, too.

+ {% include '@molecules/carousel/_carousel.twig' with carousel_3 %} + +

With Captions

+

+ Add captions to your slides easily with the .carousel-caption element within any .carousel-item. + They can be easily hidden on smaller viewports, as shown below, with optional display utilities. + We hide them initially with .d-none and bring them back on medium-sized devices with .d-md-block. +

+ {% include '@molecules/carousel/_carousel.twig' with carousel_4 %} + + {% endblock %} diff --git a/source/_patterns/02-molecules/carousel/demo/carousels.yml b/source/_patterns/02-molecules/carousel/demo/carousels.yml new file mode 100644 index 0000000000..bb46e06e1e --- /dev/null +++ b/source/_patterns/02-molecules/carousel/demo/carousels.yml @@ -0,0 +1,58 @@ +carousel_1: + carousel_images: + - + active: TRUE + - + active: FALSE + - + active: FALSE + +carousel_2: + carousel_controls: TRUE + carousel_images: + - + active: TRUE + - + active: FALSE + - + active: FALSE + +carousel_3: + carousel_controls: TRUE + carousel_indicators: + - active: TRUE + - active: FALSE + - active: FALSE + carousel_images: + - + active: TRUE + - + active: FALSE + - + active: FALSE + +carousel_4: + carousel_controls: TRUE + carousel_caption: TRUE + carousel_indicators: + - active: TRUE + - active: FALSE + - active: FALSE + carousel_images: + - + active: TRUE + caption_title: 'First slide label' + caption_body: 'Nulla vitae elit libero, a pharetra augue mollis interdum.' + - + active: FALSE + caption_title: 'Second slide label' + caption_body: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.' + - + active: FALSE + caption_title: 'Third slide label' + caption_body: 'Praesent commodo cursus magna, vel scelerisque nisl consectetur.' + +alert: + type: 'info' + alert_title: 'Carousel in Pattern Lab' + alert_primary: 'Please note that clicking carousel control arrows skips page down to that element due to the Pattern Lab iFrame. To see the Carousel outside of the iFrame, either click the gear icon at the top right of the page and select "Open in New Window" or right-click the control and select "open in new tab."' diff --git a/source/_patterns/02-molecules/carousel/index.js b/source/_patterns/02-molecules/carousel/index.js new file mode 100644 index 0000000000..e3068c9e8f --- /dev/null +++ b/source/_patterns/02-molecules/carousel/index.js @@ -0,0 +1,26 @@ +/** + * Carousel + */ + +import $ from 'jquery'; +import 'bootstrap/js/src/util'; +import 'bootstrap/js/src/carousel'; + +// Module dependencies +import 'protons'; +import 'atoms/image'; + +// Module styles +import './_carousel.scss'; + +export const name = 'carousel'; + +export function disable() {} + +export function enable($context) { + $('.carousel', $context).carousel({ + interval: 3000, + }); +} + +export default enable; diff --git a/source/_patterns/02-molecules/jumbotron/_jumbotron.scss b/source/_patterns/02-molecules/jumbotron/_jumbotron.scss new file mode 100644 index 0000000000..e99b403be6 --- /dev/null +++ b/source/_patterns/02-molecules/jumbotron/_jumbotron.scss @@ -0,0 +1,12 @@ +// All component Sass needs non-printing base config +@import '../../00-protons/variables'; + +// To change default bootstrap jumbotron variables, SEE ~bootstrap/scss/variables +// Add bootstrap variables here + +//$jumbotron-padding: some_override_value; +//$jumbotron-bg: some_override_value; + +@import '~bootstrap/scss/jumbotron'; + +// Add custom code here diff --git a/source/_patterns/02-molecules/jumbotron/_jumbotron.twig b/source/_patterns/02-molecules/jumbotron/_jumbotron.twig new file mode 100644 index 0000000000..5c9570c6f2 --- /dev/null +++ b/source/_patterns/02-molecules/jumbotron/_jumbotron.twig @@ -0,0 +1,61 @@ +{# + Jumbotron + + jumbotron_fluid: Boolean: Removes rounded corners and sets full horizontal space of parent. + jumbotron_title: String: The title of the Jumbotron + jumbotron_subtitle: String: The Subtitle of the Jumbotron + jumbotron_text: String: The text of the Jumbotron. + jumbotron_link: String: the path to another URL + jumbotron_link_text: String: the link's text + + button vars see @atoms/button + button_text: String: Display text on the button + button_color: String: primary|secondary|success|danger|warning|info|light|dark + button_size: String: lg|sm set whether the button is large or small + + see https://getbootstrap.com/docs/4.0/components/jumbotron/ for more details +#} + +{% set jumbotron_classes = [ + 'jumbotron', + jumbotron_fluid ? 'jumbotron-fluid', + jumbotron_other_classes, +] | sort | join(' ') | trim %} + +
+ {% if jumbotron_fluid %} +
+ {% endif %} + + {% block jumbotron_branding %} + {% if jumbotron_title %} +

{{ jumbotron_title }}

+ {% endif %} + + {% if jumbotron_subtitle %} +

{{ jumbotron_subtitle }}

+ {% endif %} + {% endblock jumbotron_branding %} + + {% block header_cta %} + {% if jumbotron_text %} +
+

{{ jumbotron_text }}

+ {% endif %} + + {% if button_text %} +

+ {% include "@atoms/button/_button.twig" with { + button_text: button_text, + button_color: button_color, + button_size: button_size, + button_link: button_link, + } only %} +

+ {% endif %} + {% endblock header_cta %} + + {% if jumbotron_fluid %} +
+ {% endif %} +
diff --git a/source/_patterns/02-molecules/jumbotron/demo/jumbotrons.twig b/source/_patterns/02-molecules/jumbotron/demo/jumbotrons.twig new file mode 100644 index 0000000000..6998b376f3 --- /dev/null +++ b/source/_patterns/02-molecules/jumbotron/demo/jumbotrons.twig @@ -0,0 +1,19 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + + {% block jumbo_basic %} + {% include '@molecules/jumbotron/_jumbotron.twig' with basic_jumbotron %} + {% endblock %} + + {% block jumbo_fluid %} + {% include '@molecules/jumbotron/_jumbotron.twig' with fluid_jumbotron %} + {% endblock %} + +

+ The Jumbotron is fairly basic. Use the jumbotron_fluid boolean variable to manage the type. + You can adjust the default background color and padding via Bootstrap variables in the _jumbotron.scss file via $jumbotron-padding and $jumbotron-bg. +

+ + {% endblock %} diff --git a/source/_patterns/02-molecules/jumbotron/demo/jumbotrons.yml b/source/_patterns/02-molecules/jumbotron/demo/jumbotrons.yml new file mode 100644 index 0000000000..32c981de1c --- /dev/null +++ b/source/_patterns/02-molecules/jumbotron/demo/jumbotrons.yml @@ -0,0 +1,13 @@ +basic_jumbotron: + jumbotron_title: Hello, world! + jumbotron_subtitle: This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information. + jumbotron_text: It uses utility classes for typography and spacing to space content out within the larger container. + button_text: Learn more + button_color: primary + button_size: lg + button_link: 'https://github.com/phase2/particle' + +fluid_jumbotron: + jumbotron_title: Fluid Jumbotron + jumbotron_subtitle: This is a modified jumbotron that occupies the entire horizontal space of its parent. + jumbotron_fluid: TRUE diff --git a/source/_patterns/02-molecules/jumbotron/index.js b/source/_patterns/02-molecules/jumbotron/index.js new file mode 100644 index 0000000000..06ca0a86e2 --- /dev/null +++ b/source/_patterns/02-molecules/jumbotron/index.js @@ -0,0 +1,19 @@ +/** + * Jumbotron + */ + +// Module dependencies +import 'protons'; +import 'atoms/image'; +import 'atoms/button'; + +// Module styles +import './_jumbotron.scss'; + +export const name = 'jumbotron'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/02-molecules/nav/_nav-item.twig b/source/_patterns/02-molecules/nav/_nav-item.twig new file mode 100644 index 0000000000..50a8e7aa4a --- /dev/null +++ b/source/_patterns/02-molecules/nav/_nav-item.twig @@ -0,0 +1,45 @@ +{# + Nav Item! + + nav_item_link: String: The URL the nav item will lead to. + nav_item_element: String: The nav-item's html element. + nav_item_js: Boolean: True|False: Choose whether to use bootstrap's built-in nav javascript. + nav_item_aria: DO NOT SET + js_attributes: DO NOT SET + nav_item_id: String: The nav item's id html element. + nav_item_text: String: The nav item's text. + nav_item_link_classes: Array: The html classes for the nav-item. + nav_item_link_other_classes: Array: The classes from YAML to merge into nav_item_link_classes. +#} + +{% set nav_item_link = nav_item_link | default('#') %} +{% set nav_item_element = nav_item_element | default('li') %} + +{% set nav_item_classes = nav_item_classes|default([])|merge([ + 'nav-item', +]) | sort | join(' ') | trim %} + +{% set nav_item_link_classes = nav_item_link_other_classes|default([])|merge([ + 'nav-link', +]) | sort | join(' ') | trim %} + +{% if nav_item_js %} + + {% set nav_item_aria = (nav_item_link_classes == 'active') ? 'aria-selected="true"' : 'aria-selected="false"' %} + + {% set js_attributes = [ + 'id="' ~ nav_item_id ~ '"', + 'data-toggle="tab"', + 'role="tab"', + 'aria-controls="' ~ nav_item_text ~ '"', + ] | sort | join(' ') | trim %} + +{% endif %} + +{% if nav_item_element == 'li' %} +
  • + {{ nav_item_text }} +
    • +{% elseif nav_item_element == 'a' %} + {{ nav_item_text }} +{% endif %} diff --git a/source/_patterns/02-molecules/nav/_nav.scss b/source/_patterns/02-molecules/nav/_nav.scss new file mode 100644 index 0000000000..1fa689df12 --- /dev/null +++ b/source/_patterns/02-molecules/nav/_nav.scss @@ -0,0 +1,16 @@ +@import '../../00-protons/variables'; + +// To change default bootstrap nav variables, +// copy from ~bootstrap/scss/variables to here + +$nav-link-disabled-color: $gray-600; + +@import "~bootstrap/scss/nav"; + +// Add custom code here +.nav { + &--border { + border-color: $light; + border-style: solid; + } +} diff --git a/source/_patterns/02-molecules/nav/_nav.twig b/source/_patterns/02-molecules/nav/_nav.twig new file mode 100644 index 0000000000..37e3bd9795 --- /dev/null +++ b/source/_patterns/02-molecules/nav/_nav.twig @@ -0,0 +1,42 @@ +{# + Nav! + + nav_element: String: Choose the html element of the nav. + nav_id: String: Choose the html id of the nav. + nav_role: String: Choose the html role of the nav. + nav_alignment: String: Center|Right: Choose the nav's alignment. + nav_vertical: Boolean: True|False: Choose if the nav will be vertical. + nav_tabs: Boolean: True|False: Choose if nav will have tabs. + nav_pills: Boolean: True|False: Choose if nav items will be pills. + nav_fill: Boolean: True|False: Proportionately fill all available space the nav. + nav_justified: Boolean: True|False: Make sure all elements are of equal width. + nav_other_classes: String: Choose other classes, like bootstrap sizing, for the nav. + nav_element: String: Choose the html element of the nav. + nav_items: Array: A list of items to be in the nav. + item.nav_item_dropdown: Boolean: True | False: Set the selected nav.item as a dropdown menu. +#} + +{% set nav_element = nav_element | default('nav') %} +{% set nav_id = nav_id ? 'id="' ~ nav_id ~ '"' %} +{% set nav_role = nav_role ? 'role="' ~ nav_role ~ '"' %} + +{% set nav_classes = [ + 'nav', + nav_alignment ? 'justify-content-' ~ nav_alignment, + nav_vertical ? 'flex-column', + nav_tabs ? 'nav-tabs', + nav_pill ? 'nav-pills', + nav_fill ? 'nav-fill', + nav_justify ? 'nav-justified', + nav_other_classes +] | sort | join(' ') | trim %} + +<{{ nav_element }} class="{{ nav_classes }}" {{ nav_id }} {{ nav_role }}> + {% for item in nav_items %} + {% if item.nav_item_dropdown %} + {% include '@atoms/dropdown/_dropdown.twig' with item %} + {% else %} + {% include '@molecules/nav/_nav-item.twig' with item %} + {% endif %} + {% endfor %} + diff --git a/source/_patterns/02-molecules/nav/demo/navs.md b/source/_patterns/02-molecules/nav/demo/navs.md new file mode 100644 index 0000000000..7065d0892e --- /dev/null +++ b/source/_patterns/02-molecules/nav/demo/navs.md @@ -0,0 +1,31 @@ +## Nav Variables + +| Name | Type | Options | Description | +|------------------------|---------|-------------|-----------------------------------------------------------| +| nav_element | String | any | Choose the html element of the nav. | +| nav_id | String | any | Choose the html id of the nav. | +| nav_role | String | any | Choose the html role of the nav. | +| nav_alignment | String | center, end | Choose the nav's alignment. | +| nav_vertical | Boolean | true, false | Choose if the nav will be vertical. | +| nav_tabs | Boolean | true, false | Choose if nav will have tabs. | +| nav_pills | Boolean | true, false | Choose if nav items will be pills. | +| nav_fill | Boolean | true, false | Proportionately fill all available space the nav. | +| nav_justified | Boolean | true, false | Make sure all elements are of equal width. | +| nav_other_classes | String | any | Choose other classes, like bootstrap sizing, for the nav. | +| nav_element | String | any | Choose the html element of the nav. | +| nav_items | Array | any | A list of items to be in the nav. | +| item.nav_item_dropdown | Boolean | true, false | Set the selected nav.item as a dropdown menu. | + + +## Nav_item Variables + +| Name | Type | Options | Description | +|-----------------------|---------|-------------|------------------------------------------------------------| +| nav_item_link | String | any | The URL the nav item will lead to. | +| nav_item_element | String | any | The nav-item's html element. | +| nav_item_js | Boolean | true, false | Choose whether to use bootstrap's built-in nav javascript. | +| nav_item_aria | - | - | DO NOT SET | +| js_attributes | - | - | DO NOT SET | +| nav_item_id | String | any | The nav item's id html element. | +| nav_item_text | String | any | The nav item's text. | +| nav_item_link_classes | String | any | The html classes for the nav-item | diff --git a/source/_patterns/02-molecules/nav/demo/navs.twig b/source/_patterns/02-molecules/nav/demo/navs.twig new file mode 100644 index 0000000000..1d3f09f40e --- /dev/null +++ b/source/_patterns/02-molecules/nav/demo/navs.twig @@ -0,0 +1,112 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} +

    Navs

    + {% include '@molecules/card/_card-helper.twig' with { + card_text: navs_helper, + card_background: 'secondary', + text_color: 'light', + button: { + button_link: 'http://getbootstrap.com/docs/4.0/components/navs/', + }, + } %} + +
    +

    Horizontal Alignment

    +
    + {% include '@molecules/nav/_nav.twig' %} +
    +
    + {% include '@molecules/nav/_nav.twig' with { + nav_alignment: 'center', + } %} +
    +
    + {% include '@molecules/nav/_nav.twig' with { + nav_alignment: 'end', + } %} +
    + +
    +
    +

    Vertical Alignment

    + {% include '@molecules/nav/_nav.twig' with { + nav_vertical: true, + } %} +
    + +
    +

    Tabs

    + {% include '@molecules/nav/_nav.twig' with { + nav_tabs: true, + } %} +
    + +
    +

    Pills

    + {% include '@molecules/nav/_nav.twig' with { + nav_pill: true, + } %} +
    + +
    +

    Fill

    + {% include '@molecules/nav/_nav.twig' with { + nav_pill: true, + nav_fill: true, + } %} +
    + +
    +

    Justify

    + {% include '@molecules/nav/_nav.twig' with { + nav_pill: true, + nav_justify: true, + } %} +
    + +
    +

    Responsive nav

    + {% set responsive_items = [] %} + {% for item in nav_items_responsive %} + {% set temp_item = item | merge({nav_item_element: 'a'}) %} + {% set responsive_items = responsive_items|merge([temp_item]) %} + {% endfor %} + {% include '@molecules/nav/_nav.twig' with { + nav_pill: true, + nav_other_classes: 'flex-column flex-sm-row', + nav_items: responsive_items, + } %} +
    + +
    +

    Dropdown

    + {% include '@molecules/nav/_nav.twig' with { + nav_element: 'ul', + nav_tabs: 'true', + nav_items: nav_items_dropdown, + } %} +
    + +
    +

    Javascript Tabs

    + {% set javascript_items = [] %} + {% for item in nav_items_javascript %} + {% set temp_item = item | merge({nav_item_js: 'true'}) %} + {% set javascript_items = javascript_items|merge([temp_item]) %} + {% endfor %} + {% include '@molecules/nav/_nav.twig' with { + nav_element: 'ul', + nav_tabs: 'true', + nav_id: 'myTab', + nav_role: 'tablist', + nav_items: javascript_items, + } %} +
    +
    This is home content!
    +
    This is profile content!
    +
    This is contact content!
    +
    +
    + {% endblock column_1 %} diff --git a/source/_patterns/02-molecules/nav/demo/navs.yml b/source/_patterns/02-molecules/nav/demo/navs.yml new file mode 100644 index 0000000000..6907254297 --- /dev/null +++ b/source/_patterns/02-molecules/nav/demo/navs.yml @@ -0,0 +1,66 @@ +navs_helper: Documentation and examples for how to use Bootstrap's included navigation components. + +nav_items: + - nav_item_text: Menu + nav_item_link_other_classes: + - active + - nav_item_text: Menu 2 + - nav_item_text: Menu 3 + - nav_item_text: Menu 4 + nav_item_link_other_classes: + - disabled + +nav_items_responsive: + - nav_item_text: Menu + nav_item_link_other_classes: + - flex-sm-fill + - text-sm-center + - active + - nav_item_text: Menu 2 + nav_item_link_other_classes: + - flex-sm-fill + - text-sm-center + - nav_item_text: Menu 3 + nav_item_link_other_classes: + - flex-sm-fill + - text-sm-center + - nav_item_text: Menu 4 + nav_item_link_other_classes: + - flex-sm-fill + - text-sm-center + - disabled + +nav_items_dropdown: + - nav_item_text: Active + nav_item_link_other_classes: + - active + - nav_item_dropdown: true + dropdown_text: Dropdown + unique_classes: nav-link + unique_attributes: href="#" + button_element: a + buttonless_dropdown: true + dropdown_element: li + dropdown_other_classes: nav-item + dropdown_menu_items: + - dropdown_menu_item_text: Action + - dropdown_menu_item_text: Another Action + - dropdown_menu_item_text: Something else here + - nav_item_text: Link + nav_item_link_other_classes: + - nav_item_text: Disabled + nav_item_link_other_classes: + - disabled + +nav_items_javascript: + - nav_item_text: Home + nav_item_link_other_classes: + - active + nav_item_id: home-tab + nav_item_link: '#home' + - nav_item_text: Profile + nav_item_id: profile-tab + nav_item_link: '#profile' + - nav_item_text: Contact + nav_item_id: contact-tab + nav_item_link: '#contact' diff --git a/source/_patterns/02-molecules/nav/index.js b/source/_patterns/02-molecules/nav/index.js new file mode 100644 index 0000000000..7fa3304633 --- /dev/null +++ b/source/_patterns/02-molecules/nav/index.js @@ -0,0 +1,17 @@ +/** + * Nav + */ + +// Custom +import 'protons'; + +// Import custom sass, includes Bootstrap sass +import './_nav.scss'; + +export const name = 'nav'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/02-molecules/pagination/_pagination.scss b/source/_patterns/02-molecules/pagination/_pagination.scss new file mode 100644 index 0000000000..1762e396a6 --- /dev/null +++ b/source/_patterns/02-molecules/pagination/_pagination.scss @@ -0,0 +1,10 @@ +// All component Sass needs non-printing base config +@import '../../00-protons/variables'; + +// To change default bootstrap variables, SEE ~bootstrap/scss/variables +// Add bootstrap variables here +//$pagination-color: blue; + +@import "~bootstrap/scss/pagination"; + +// Add custom code here diff --git a/source/_patterns/02-molecules/pagination/_pagination.twig b/source/_patterns/02-molecules/pagination/_pagination.twig new file mode 100644 index 0000000000..f038b26525 --- /dev/null +++ b/source/_patterns/02-molecules/pagination/_pagination.twig @@ -0,0 +1,44 @@ +{# + Pagination! + + pagination_title: String: The name of the pagination item for screen readers. + pagination_size (optional): String: sm | lg: The size of the pagination + page_icon: Boolean: Pagination uses icons for Previous and Next links. + page_items: Array: The set if page links to display. + + see https://getbootstrap.com/docs/4.0/components/pagination/ for more details +#} + +{% set pagination_classes = [ + 'pagination', + pagination_size ? 'pagination-' ~ pagination_size, + pagination_other_classes, +] | sort | join(' ') | trim %} + + diff --git a/source/_patterns/02-molecules/pagination/demo/paginations.twig b/source/_patterns/02-molecules/pagination/demo/paginations.twig new file mode 100644 index 0000000000..fb4ca40cc3 --- /dev/null +++ b/source/_patterns/02-molecules/pagination/demo/paginations.twig @@ -0,0 +1,25 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + +

    Pagination

    +

    Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages.

    +

    Default

    +

    This is the default pagination. A list of links to the pages available.

    + {% include '@molecules/pagination/_pagination.twig' with pagination_1 %} + +

    Icons

    +

    Optionally use icons in place of Previous and Next. Be sure to provide proper screen reader support with aria attributes and the .sr-only utility.

    + {% include '@molecules/pagination/_pagination.twig' with pagination_2 %} + +

    Sizes

    +

    Optionally set the size with pagination_size to either sm or lg.

    + +

    Small

    + {% include '@molecules/pagination/_pagination.twig' with pagination_3 %} + +

    Large

    + {% include '@molecules/pagination/_pagination.twig' with pagination_4 %} + + {% endblock %} diff --git a/source/_patterns/02-molecules/pagination/demo/paginations.yml b/source/_patterns/02-molecules/pagination/demo/paginations.yml new file mode 100644 index 0000000000..df6c5b275d --- /dev/null +++ b/source/_patterns/02-molecules/pagination/demo/paginations.yml @@ -0,0 +1,45 @@ +pagination_1: + pagination_title: 'Page Navigation Example #1' + page_icon: FALSE + page_items: + - title: 1 + link: '#' + - title: 2 + link: '#' + - title: 3 + link: '#' + +pagination_2: + pagination_title: 'Page Navigation Example #2' + page_icon: TRUE + page_items: + - title: 1 + link: '#' + - title: 2 + link: '#' + - title: 3 + link: '#' + +pagination_3: + pagination_title: 'Page Navigation Example #2' + pagination_size: 'sm' + page_icon: TRUE + page_items: + - title: 1 + link: '#' + - title: 2 + link: '#' + - title: 3 + link: '#' + +pagination_4: + pagination_title: 'Page Navigation Example #2' + pagination_size: 'lg' + page_icon: TRUE + page_items: + - title: 1 + link: '#' + - title: 2 + link: '#' + - title: 3 + link: '#' diff --git a/source/_patterns/02-molecules/pagination/index.js b/source/_patterns/02-molecules/pagination/index.js new file mode 100644 index 0000000000..8c985719ba --- /dev/null +++ b/source/_patterns/02-molecules/pagination/index.js @@ -0,0 +1,18 @@ +/** + * Pagination + */ + +// Module dependencies +import 'protons'; +import 'atoms/icon'; + +// Module styles +import './_pagination.scss'; + +export const name = 'pagination'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/03-organisms/accordion/_accordion.scss b/source/_patterns/03-organisms/accordion/_accordion.scss new file mode 100644 index 0000000000..4b6c5973ce --- /dev/null +++ b/source/_patterns/03-organisms/accordion/_accordion.scss @@ -0,0 +1,9 @@ +// All component Sass needs non-printing base config +@import '../../00-protons/variables'; + +// Accordion contains both Bootstrap Card and Collapse. +// To change default bootstrap variables, SEE ~bootstrap/scss/variables +// Add bootstrap variables here +//$card-border-width: 1px; + +// Add custom code here diff --git a/source/_patterns/03-organisms/accordion/_accordion.twig b/source/_patterns/03-organisms/accordion/_accordion.twig new file mode 100644 index 0000000000..e62e638065 --- /dev/null +++ b/source/_patterns/03-organisms/accordion/_accordion.twig @@ -0,0 +1,40 @@ +{# + Accordion! + + accordion_id: Integer: A unique numerical ID for the accordion. + accordion_card_list: Array: A list of cards and their values. + + card_header: String: The header on the card. + card_text: String: The text on the card. + card_expanded: String: The default collapse state on the card. + + Accordions combine Bootstrap's Card and Collapse. See below for more details: + + * https://getbootstrap.com/docs/4.0/components/collapse/ + * https://getbootstrap.com/docs/4.0/components/card/ +#} + +{% set accordion_id = random() %} + +
    + {% for card in accordion_card_list %} + {% embed '@molecules/card/_card.twig' %} + {% block card_header %} + + {% endblock card_header %} + {% block card_body %} +
    +
    + {{ card.card_text }} +
    +
    + {% endblock card_body %} + {% endembed %} + {% endfor %} +
    diff --git a/source/_patterns/03-organisms/accordion/demo/accordions.twig b/source/_patterns/03-organisms/accordion/demo/accordions.twig new file mode 100644 index 0000000000..2a84106b03 --- /dev/null +++ b/source/_patterns/03-organisms/accordion/demo/accordions.twig @@ -0,0 +1,10 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + +

    Accordion

    +

    Accordions make usee of Bootstrap's Collapse with the card component. Default collapse behavior is extended to create an accordion.

    + {% include '@organisms/accordion/_accordion.twig' with accordion_1 %} + + {% endblock %} diff --git a/source/_patterns/03-organisms/accordion/demo/accordions.yml b/source/_patterns/03-organisms/accordion/demo/accordions.yml new file mode 100644 index 0000000000..93756945f7 --- /dev/null +++ b/source/_patterns/03-organisms/accordion/demo/accordions.yml @@ -0,0 +1,11 @@ +accordion_1: + accordion_card_list: + - card_header: 'Collapsible Group Item #1' + card_text: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.' + card_expanded: FALSE + - card_header: 'Collapsible Group Item #2' + card_text: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.' + card_expanded: FALSE + - card_header: 'Collapsible Group Item #3' + card_text: 'Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven''t heard of them accusamus labore sustainable VHS.' + card_expanded: FALSE diff --git a/source/_patterns/03-organisms/accordion/index.js b/source/_patterns/03-organisms/accordion/index.js new file mode 100644 index 0000000000..31b8194bbd --- /dev/null +++ b/source/_patterns/03-organisms/accordion/index.js @@ -0,0 +1,21 @@ +/** + * Accordion + */ + +import 'bootstrap/js/src/collapse'; + +// Module dependencies +import 'protons'; +import 'atoms/button'; +import 'molecules/card'; + +// Module styles +import './_accordion.scss'; + +export const name = 'accordion'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/03-organisms/article/_article.scss b/source/_patterns/03-organisms/article/_article.scss new file mode 100644 index 0000000000..138a4a1e59 --- /dev/null +++ b/source/_patterns/03-organisms/article/_article.scss @@ -0,0 +1,4 @@ +// All component Sass needs non-printing base config +@import '../../00-protons/variables'; + +// Add custom code here diff --git a/source/_patterns/03-organisms/article/_article.twig b/source/_patterns/03-organisms/article/_article.twig new file mode 100644 index 0000000000..71b9ffaaa0 --- /dev/null +++ b/source/_patterns/03-organisms/article/_article.twig @@ -0,0 +1,53 @@ +{# + Article! + + article_title: String: The title of the article. + article_body: String: Body content for a article. + article_author_name: String: The name of the author. + article_date: String: A simple string date. + article_tags: Array: An array of tags. + +#} + +{% set image_classes = [ + 'm-3', + 'img', + 'img-responsive', + 'rounded-circle', + 'float-right' +] | sort | join(' ') | trim %} + + + {% endblock article_content %} + + {% block article_footer %} +
    + Tags: + +
    +
    +
    + Submitted by {{ article_author_name }} on {{ article_date }} +
    +
    + {% endblock article_footer %} + + diff --git a/source/_patterns/03-organisms/article/demo/articles.twig b/source/_patterns/03-organisms/article/demo/articles.twig new file mode 100644 index 0000000000..bea469a269 --- /dev/null +++ b/source/_patterns/03-organisms/article/demo/articles.twig @@ -0,0 +1,12 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} + +

    Article Demonstration

    +

    A simple demonstration of an article within our grid and 1 column. It uses several Bootstrap components, such as an image floated right, a list of tags using list-inline-item and a blockquote footer to display author and date information.

    +
    + + {% include '@organisms/article/_article.twig' with article_1 %} + + {% endblock %} diff --git a/source/_patterns/03-organisms/article/demo/articles.yml b/source/_patterns/03-organisms/article/demo/articles.yml new file mode 100644 index 0000000000..a37a7641b4 --- /dev/null +++ b/source/_patterns/03-organisms/article/demo/articles.yml @@ -0,0 +1,26 @@ +article_1: + article_title: 'Lucidus' + article_body: '

    Cogo haero jus pala patria proprius turpis valde wisi. Eu feugiat laoreet si usitas valde vulputate. Bene dolus gilvus hos pala quibus ulciscor voco. Ad camur incassum ymo.

    +

    Caecus esca iustum lobortis nimis quibus uxor. Aliquip aptent conventio illum singularis turpis ullamcorper validus. Appellatio illum luptatum secundum suscipere. Amet dolor duis esca pecus plaga verto. Brevitas caecus huic melior modo nibh nunc. Aptent at bene exputo loquor os. Aliquam cui diam esse ideo melior minim premo quis vicis. Abdo accumsan autem. Cui jugis quia tincidunt. Appellatio nibh quidne uxor.

    +

    Cui incassum loquor paratus ratis refero uxor volutpat. Adipiscing consequat enim erat imputo magna neque probo rusticus secundum. Augue commodo consequat conventio dolor elit minim molior similis torqueo. Et gemino interdico nutus praesent probo scisco tamen utrum. Amet feugiat odio pneum quidem sagaciter voco. Hendrerit minim quibus si.

    +

    Haero lobortis odio proprius. Exputo incassum iriure. Similis validus vel. Acsi eligo eros eum exerci feugiat haero huic oppeto quadrum. Capto luctus ludus neo quis sit ulciscor.

    +

    Consequat dignissim genitus oppeto. Laoreet luctus os proprius sino sit tation utrum. Commoveo interdico melior oppeto ratis tincidunt. Capto minim natu ulciscor usitas. Molior sudo ut veniam. Abluo aliquip cogo gilvus modo quae ratis singularis ullamcorper vereor.

    +

    Blandit cui hos mauris. Causa elit esse et paulatim. Abdo cogo dolor enim inhibeo ludus mauris saluto vindico. Commoveo distineo esse gravis ille lobortis occuro oppeto ulciscor veniam.

    +

    Camur ea elit facilisis haero interdico loquor venio. Accumsan antehabeo decet imputo os. Aptent esse eu hos luctus nobis similis ullamcorper. Appellatio comis damnum ibidem praesent quia quis verto. Aptent damnum duis esca ibidem ludus nulla pneum velit venio. Abigo at eum meus pertineo ratis secundum ulciscor volutpat vulputate. Conventio cui ea exputo inhibeo iriure magna mauris neque ratis.

    +

    Conventio damnum eros pala pertineo velit verto. Adipiscing eum jus pertineo tum turpis ulciscor ullamcorper vereor volutpat. Genitus importunus lenis modo natu nimis nunc populus te.

    +

    Singularis sit torqueo tum validus. Fere quis vindico. Duis iusto occuro paratus qui scisco valetudo. Abdo decet dolor ea erat ex nulla ratis vel veniam. Blandit diam duis exerci proprius quidne tation venio vindico. Abbas aliquam commodo iaceo pagus quis sed tego. Feugiat pala sagaciter turpis ullamcorper vero. Ibidem neo ullamcorper vereor. Ad amet camur consectetuer dolor facilisis feugiat ideo quibus.

    +

    Dolore erat huic iusto melior pneum. Gemino quibus singularis. Bene comis obruo quis wisi. Hendrerit illum imputo lucidus olim os. Ex natu tamen. Diam dolor inhibeo lenis macto mauris validus. Acsi pagus pala paratus pecus quis sed sudo.

    +

    Brevitas commoveo jus. Accumsan commoveo hos imputo molior odio proprius te. Caecus luctus neque nutus paratus. Brevitas capto euismod ex jus ludus mauris mos tego wisi.

    +

    Antehabeo appellatio humo interdico olim os qui. Aptent dolor gravis melior oppeto si veniam vindico. Imputo secundum singularis sit voco. Acsi cui ille lucidus molior praemitto qui quidne tamen. Euismod nulla plaga virtus. Accumsan acsi dolore et euismod quis. Caecus et lobortis tamen. Abico blandit diam huic plaga ratis similis velit veniam. Cogo patria refero.

    ' + article_author_name: 'Joe P. Author' + article_date: '11/19/2017 - 08:30' + article_tags: + - + word: 'Lorem' + url: '#' + - + word: 'Ipsum' + url: '#' + - + word: 'Dolor' + url: '#' diff --git a/source/_patterns/03-organisms/article/index.js b/source/_patterns/03-organisms/article/index.js new file mode 100644 index 0000000000..614e515c9c --- /dev/null +++ b/source/_patterns/03-organisms/article/index.js @@ -0,0 +1,17 @@ +/** + * Article + */ + +// Module dependencies +import 'protons'; + +// Module styles +import './_article.scss'; + +export const name = 'article'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/03-organisms/card-grid/_card-grid.twig b/source/_patterns/03-organisms/card-grid/_card-grid.twig new file mode 100644 index 0000000000..1199379120 --- /dev/null +++ b/source/_patterns/03-organisms/card-grid/_card-grid.twig @@ -0,0 +1,37 @@ +{# + Card Grid! + + This is provided to show you an example of our Cards in grid in Pattern Lab. + Additional implementations are app-specific and should be handled on a case-by-case basis. + + see https://getbootstrap.com/docs/4.0/components/card/ for more details +#} + +{% set card_grid_classes = [ + 'col-sm-12', + 'col-md-6', + 'col-lg-4', + row_classes, +] | sort | join(' ') | trim %} + +{% if card_grid_title %} +

    {{ card_grid_title }}

    +{% endif %} +
    + {% for item_card in card_grid_rows %} + {% set item_card = { + card_border: 'none', + card_title: item_card.card_title, + card_text: item_card.card_text, + button: { + button_element: 'a', + button_color: 'secondary', + button_text: 'View details »'|t, + button_link: '#', + } + } %} +
    + {% include '@molecules/card/_card.twig' with item_card %} +
    + {% endfor %} +
    diff --git a/source/_patterns/03-organisms/card-grid/demo/card-grids.twig b/source/_patterns/03-organisms/card-grid/demo/card-grids.twig new file mode 100644 index 0000000000..4ee7bbdebb --- /dev/null +++ b/source/_patterns/03-organisms/card-grid/demo/card-grids.twig @@ -0,0 +1,7 @@ +
    +

    Card Grids Demonstration

    +

    This is for demonstration purposes only to show cards within a Grid. See code for usage examples within individual apps.

    +
    + + {% include '@organisms/card-grid/_card-grid.twig' %} +
    diff --git a/source/_patterns/03-organisms/card-grid/demo/card-grids.yml b/source/_patterns/03-organisms/card-grid/demo/card-grids.yml new file mode 100644 index 0000000000..054a8f309d --- /dev/null +++ b/source/_patterns/03-organisms/card-grid/demo/card-grids.yml @@ -0,0 +1,16 @@ +card_grid_rows: + - + card_title: 'Mos Nisl' + card_text: 'Augue decet meus os. Duis sino suscipit utinam. Caecus commoveo defui luptatum macto sagaciter uxor vereor vulputate. Aptent decet nunc torqueo turpis ut.' + - + card_title: 'Lucidus' + card_text: 'Cogo haero jus pala patria proprius turpis valde wisi. Eu feugiat laoreet si usitas valde vulputate. Bene dolus gilvus hos pala quibus ulciscor voco. Ad camur incassum ymo.' + - + card_title: 'Os' + card_text: 'Antehabeo eligo ille laoreet sit ulciscor utrum. Causa damnum dignissim ea patria. Diam enim hos jumentum pagus quis roto typicus usitas.' + - + card_title: 'Abbas Qui' + card_text: 'Aptent blandit dolore veniam. Ad commodo decet distineo eum feugiat magna nostrud ratis sit. Imputo inhibeo suscipit. Abbas gemino quis. Abdo cui hendrerit oppeto pneum quae quidem velit vindico.' + - + card_title: 'Interdico' + card_text: 'Fere loquor luptatum nunc secundum suscipit typicus vel vulpes. Nobis qui secundum tamen. Blandit defui fere gilvus pala plaga sit tamen utrum. Eum exputo illum imputo neque quadrum vereor.' diff --git a/source/_patterns/03-organisms/grids/caption-grid-block/_caption-grid-block.scss b/source/_patterns/03-organisms/grids/caption-grid-block/_caption-grid-block.scss deleted file mode 100644 index 666d68de64..0000000000 --- a/source/_patterns/03-organisms/grids/caption-grid-block/_caption-grid-block.scss +++ /dev/null @@ -1,3 +0,0 @@ -.caption-grid-block { - -} diff --git a/source/_patterns/03-organisms/grids/caption-grid-block/caption-grid-block.twig b/source/_patterns/03-organisms/grids/caption-grid-block/caption-grid-block.twig deleted file mode 100644 index 0ff1b661c6..0000000000 --- a/source/_patterns/03-organisms/grids/caption-grid-block/caption-grid-block.twig +++ /dev/null @@ -1,34 +0,0 @@ -{% embed "@base/grids/_smart-grid.twig" with { - rowItems: { - medium: 3 - } -} %} - {% block gridItems %} - - {% embed "@molecules/caption-block.twig" with { - title: "Block 1" - } %} - {% block body %} -

    {{ random(paragraphs) }}

    - {% endblock %} - {% endembed %} - - {% embed "@molecules/caption-block.twig" with { - title: "Block 2" - } %} - {% block body %} -

    {{ random(paragraphs) }}

    -

    {{ random(paragraphs) }}

    - {% endblock %} - {% endembed %} - - {% embed "@molecules/caption-block.twig" with { - title: "Block 3" - } %} - {% block body %} -

    {{ random(paragraphs) }}

    - {% endblock %} - {% endembed %} - - {% endblock %} -{% endembed %} diff --git a/source/_patterns/03-organisms/navbar/_navbar.scss b/source/_patterns/03-organisms/navbar/_navbar.scss new file mode 100644 index 0000000000..34f0feecc2 --- /dev/null +++ b/source/_patterns/03-organisms/navbar/_navbar.scss @@ -0,0 +1,10 @@ +@import '../../00-protons/variables'; + +// To change default bootstrap navbar variables, +// copy from ~bootstrap/scss/variables to here + +$navbar-brand-font-size: $font-size-lg; + +@import "~bootstrap/scss/navbar"; + +// Add custom code here diff --git a/source/_patterns/03-organisms/navbar/_navbar.twig b/source/_patterns/03-organisms/navbar/_navbar.twig new file mode 100644 index 0000000000..9de3576ab1 --- /dev/null +++ b/source/_patterns/03-organisms/navbar/_navbar.twig @@ -0,0 +1,52 @@ +{# + Navbar! + navbar_classes: Array: The html classes for the navbar. + navbar_other_classes: Array: The classes from YAML to merge into navbar_classes. + navbar_arialebelledby: String: The aria labelled by value. + navbar_attributes: Array: Attributes for the Navbar. + navbar_brand_link: String: The URL the brand text will link to. + navbar_brand_text: String: The text of the brand. + navbar_id: String: The html id for the navbar. +#} + +{% set navbar_classes = navbar_other_classes|default([])|merge([ + 'navbar', +]) | sort | join(' ') | trim %} + + diff --git a/source/_patterns/03-organisms/navbar/demo/navbars.md b/source/_patterns/03-organisms/navbar/demo/navbars.md new file mode 100644 index 0000000000..b23c739b1a --- /dev/null +++ b/source/_patterns/03-organisms/navbar/demo/navbars.md @@ -0,0 +1,6 @@ +| Name | Type | Options | Description | +|-------------------|--------|---------|--------------------------------------| +| navbar_classes | String | any | The html classes for the navbar. | +| navbar_brand_link | String | any | The URL the brand text will link to. | +| navbar_brand_text | String | any | The text of the brand. | +| navbar_id | String | any | The html id for the navbar | diff --git a/source/_patterns/03-organisms/navbar/demo/navbars.twig b/source/_patterns/03-organisms/navbar/demo/navbars.twig new file mode 100644 index 0000000000..42644c66e7 --- /dev/null +++ b/source/_patterns/03-organisms/navbar/demo/navbars.twig @@ -0,0 +1,18 @@ +{% extends '@atoms/grid/_grid-1-up.twig' %} + {% set container = true %} + + {% block column_1 %} +

    Navbar

    + {% include '@molecules/card/_card-helper.twig' with { + card_text: navbar_helper, + card_background: 'secondary', + text_color: 'light', + button: { + button_link: 'http://getbootstrap.com/docs/4.0/components/navbar/', + }, + } %} + +
    + {% include '@organisms/navbar/_navbar.twig' %} +
    + {% endblock column_1 %} diff --git a/source/_patterns/03-organisms/navbar/demo/navbars.yml b/source/_patterns/03-organisms/navbar/demo/navbars.yml new file mode 100644 index 0000000000..2bef0b35fb --- /dev/null +++ b/source/_patterns/03-organisms/navbar/demo/navbars.yml @@ -0,0 +1,29 @@ +navbar_helper: Documentation and examples for Bootstrap's powerful, responsive navigation header, the navbar. Includes support for branding, navigation, and more, including support for our collapse plugin. + +navbar_other_classes: + - navbar-expand-lg + - navbar-light + - bg-light +navbar_brand_link: # +navbar_brand_text: Navbar +navbar_id: navbarSupportedContent + +navbar_items: + - nav_item_text: Home + nav_item_link_classes: active + - nav_item_dropdown: true + buttonless_dropdown: true + dropdown_text: Dropdown + unique_classes: nav-link + unique_attributes: href="#" + button_element: a + dropdown_element: li + dropdown_other_classes: nav-item + dropdown_menu_items: + - dropdown_menu_item_text: Action + - dropdown_menu_item_text: Another Action + - dropdown_menu_item_text: Something else here + - nav_item_text: Link + nav_item_link_classes: + - nav_item_text: Disabled + nav_item_link_classes: disabled diff --git a/source/_patterns/03-organisms/navbar/index.js b/source/_patterns/03-organisms/navbar/index.js new file mode 100644 index 0000000000..6df852ece6 --- /dev/null +++ b/source/_patterns/03-organisms/navbar/index.js @@ -0,0 +1,20 @@ +/** + * Navbar + */ + +// Import dropdown js from bootstrap +import 'bootstrap/js/src/collapse'; + +// Custom +import 'protons'; + +// Import custom sass, includes Bootstrap sass +import './_navbar.scss'; + +export const name = 'navbar'; + +export function disable() {} + +export function enable() {} + +export default enable; diff --git a/source/_patterns/03-organisms/site/site-footer/_site-footer.scss b/source/_patterns/03-organisms/site/site-footer/_site-footer.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/source/_patterns/03-organisms/site/site-footer/site-footer.twig b/source/_patterns/03-organisms/site/site-footer/site-footer.twig deleted file mode 100644 index 0421cc2c19..0000000000 --- a/source/_patterns/03-organisms/site/site-footer/site-footer.twig +++ /dev/null @@ -1,3 +0,0 @@ -
    -

    Site Footer

    -
    diff --git a/source/_patterns/03-organisms/site/site-header/_site-header.scss b/source/_patterns/03-organisms/site/site-header/_site-header.scss deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/source/_patterns/03-organisms/site/site-header/site-header.twig b/source/_patterns/03-organisms/site/site-header/site-header.twig deleted file mode 100644 index adcb3c91a5..0000000000 --- a/source/_patterns/03-organisms/site/site-header/site-header.twig +++ /dev/null @@ -1,4 +0,0 @@ -
    - {% include "@molecules/branding.twig" %} -

    Site Header

    -
    diff --git a/source/_patterns/04-templates/00-site/_page.scss b/source/_patterns/04-templates/00-site/_page.scss deleted file mode 100644 index 823e0b6154..0000000000 --- a/source/_patterns/04-templates/00-site/_page.scss +++ /dev/null @@ -1,21 +0,0 @@ -.page { - display: block; // IE doesn't like `
    ` - &--has-sidebar { - @include breakpoint($bp--xlarge) { - display: flex; - justify-content: space-between; - .page__content { - width: calc(75% - #{$spacing--l / 2}); - } - .page__sidebar { - width: calc(25% - #{$spacing--l / 2}); - } - } - } - &__content { - - } - &__sidebar { - - } -} diff --git a/source/_patterns/04-templates/00-site/_site.scss b/source/_patterns/04-templates/00-site/_site.scss deleted file mode 100644 index 0cea1323cb..0000000000 --- a/source/_patterns/04-templates/00-site/_site.scss +++ /dev/null @@ -1,8 +0,0 @@ -.site { - @include site-container(); - &__header {} - &__page { - - } - &__footer {} -} diff --git a/source/_patterns/04-templates/00-site/_site.twig b/source/_patterns/04-templates/00-site/_site.twig deleted file mode 100644 index a731b3d5aa..0000000000 --- a/source/_patterns/04-templates/00-site/_site.twig +++ /dev/null @@ -1,12 +0,0 @@ -
    - {% include "@organisms/site-header.twig" %} -
    -
    - {{ content }} -
    - {% if sidebar %} -
    {{ sidebar|raw }}
    - {% endif %} -
    - {% include "@organisms/site-footer.twig" %} -
    diff --git a/source/_patterns/04-templates/00-site/site-demo-1-sidebar.twig b/source/_patterns/04-templates/00-site/site-demo-1-sidebar.twig deleted file mode 100644 index e869c2252c..0000000000 --- a/source/_patterns/04-templates/00-site/site-demo-1-sidebar.twig +++ /dev/null @@ -1,4 +0,0 @@ -{% include '_site.twig' with { - content: 'Site Content', - sidebar: 'Site Sidebar', -} %} diff --git a/source/_patterns/04-templates/00-site/site-demo-no-sidebar.twig b/source/_patterns/04-templates/00-site/site-demo-no-sidebar.twig deleted file mode 100644 index 0621472032..0000000000 --- a/source/_patterns/04-templates/00-site/site-demo-no-sidebar.twig +++ /dev/null @@ -1,3 +0,0 @@ -{% include '_site.twig' with { - content: 'Site Content', -} %} diff --git a/source/_patterns/04-templates/content-types/blog.twig b/source/_patterns/04-templates/content-types/blog.twig deleted file mode 100644 index 3daf5b78ff..0000000000 --- a/source/_patterns/04-templates/content-types/blog.twig +++ /dev/null @@ -1,5 +0,0 @@ -{% extends "@templates/site-layout.twig" %} -{% block content %} -

    Blog Page

    -

    Actual content goes here. (See pages)

    -{% endblock %} diff --git a/source/_patterns/04-templates/homepage/homepage.twig b/source/_patterns/04-templates/homepage/homepage.twig new file mode 100644 index 0000000000..51a900a20b --- /dev/null +++ b/source/_patterns/04-templates/homepage/homepage.twig @@ -0,0 +1,42 @@ +{# + Homepage Template + + This is the template to display our homepage! + +#} + +{% include '@atoms/alert/_alert.twig' with alert_info %} + +
    + {% block header %} + {% embed '@molecules/jumbotron/_jumbotron.twig' with { jumbotron_fluid: true } %} + {% block jumbotron_branding %} + {% include "@atoms/_branding.twig" with { + url: '#', + logo_svg_inline: '@atoms/image/logo.svg', + site_name: 'Site Name', + site_slogan: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.' + } %} + {% endblock jumbotron_branding %} + {% endembed %} + {% endblock header %} +
    + +
    + {% block content %} + {% embed '@atoms/grid/_grid-1-up.twig' with { container: true } %} + {% block column_1 %} + + {% include '@organisms/card-grid/_card-grid.twig' %} + + {% endblock %} + {% endembed %} + {% endblock content %} +
    + +
    + {% block footer %} +
    + {{ footer_content.slogan }} + {% endblock footer %} +
    diff --git a/source/_patterns/04-templates/homepage/homepage.yml b/source/_patterns/04-templates/homepage/homepage.yml new file mode 100644 index 0000000000..05e7afd5ce --- /dev/null +++ b/source/_patterns/04-templates/homepage/homepage.yml @@ -0,0 +1,23 @@ +alert_info: + type: 'info' + alert_primary: 'This is our homepage template!' + +card_grid_rows: + - + card_title: 'Mos Nisl' + card_text: 'Augue decet meus os. Duis sino suscipit utinam. Caecus commoveo defui luptatum macto sagaciter uxor vereor vulputate. Aptent decet nunc torqueo turpis ut.' + - + card_title: 'Lucidus' + card_text: 'Cogo haero jus pala patria proprius turpis valde wisi. Eu feugiat laoreet si usitas valde vulputate. Bene dolus gilvus hos pala quibus ulciscor voco. Ad camur incassum ymo.' + - + card_title: 'Os' + card_text: 'Antehabeo eligo ille laoreet sit ulciscor utrum. Causa damnum dignissim ea patria. Diam enim hos jumentum pagus quis roto typicus usitas.' + - + card_title: 'Abbas Qui' + card_text: 'Aptent blandit dolore veniam. Ad commodo decet distineo eum feugiat magna nostrud ratis sit. Imputo inhibeo suscipit. Abbas gemino quis. Abdo cui hendrerit oppeto pneum quae quidem velit vindico.' + - + card_title: 'Interdico' + card_text: 'Fere loquor luptatum nunc secundum suscipit typicus vel vulpes. Nobis qui secundum tamen. Blandit defui fere gilvus pala plaga sit tamen utrum. Eum exputo illum imputo neque quadrum vereor.' + +footer_content: + slogan: 'Powered by Pattern Lab' diff --git a/source/_patterns/04-templates/site-layout.twig b/source/_patterns/04-templates/site-layout.twig deleted file mode 100644 index 2c77277b68..0000000000 --- a/source/_patterns/04-templates/site-layout.twig +++ /dev/null @@ -1,7 +0,0 @@ -{% include "@organisms/site-header.twig" %} -
    - {% block content %} -

    Site Content Here

    - {% endblock %} -
    -{% include "@organisms/site-footer.twig" %} diff --git a/source/_patterns/05-pages/.gitkeep b/source/_patterns/05-pages/.gitkeep deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/source/_patterns/05-pages/homepage.twig b/source/_patterns/05-pages/homepage.twig deleted file mode 100644 index c998d1aa95..0000000000 --- a/source/_patterns/05-pages/homepage.twig +++ /dev/null @@ -1,6 +0,0 @@ -{% extends "@templates/site-layout.twig" %} -{% block content %} - - {% include "@organisms/caption-grid-block.twig" %} - -{% endblock %} diff --git a/source/_patterns/05-pages/homepage/homepage.twig b/source/_patterns/05-pages/homepage/homepage.twig new file mode 100644 index 0000000000..976d15c9dd --- /dev/null +++ b/source/_patterns/05-pages/homepage/homepage.twig @@ -0,0 +1,22 @@ +{% extends "@templates/homepage/homepage.twig" %} + + {% block header %} + {% embed '@molecules/jumbotron/_jumbotron.twig' with { jumbotron_fluid: true } %} + {% block jumbotron_branding %} + {% include "@atoms/_branding.twig" with { + url: '#', + logo_svg_inline: '@atoms/image/logo.svg', + site_name: 'Particle', + site_slogan: 'An opinionated front-end framework to create design systems.' + } %} + {% endblock jumbotron_branding %} + {% endembed %} + {% endblock header %} + + {% block content %} +
    I should fail pa11y
    + +

    this is a pattern lab only demo of the HOMEPAGE

    + +

    asdfafdsd blerp

    + {% endblock content %} diff --git a/source/_patterns/05-pages/homepage/homepage.yml b/source/_patterns/05-pages/homepage/homepage.yml new file mode 100644 index 0000000000..28a6bb86dd --- /dev/null +++ b/source/_patterns/05-pages/homepage/homepage.yml @@ -0,0 +1,6 @@ +alert_info: + type: 'status' + alert_primary: 'This is our homepage!' + +footer_content: + slogan: 'Powered by Pattern Lab' diff --git a/source/_patterns/05-pages/homepage/index.js b/source/_patterns/05-pages/homepage/index.js new file mode 100644 index 0000000000..d09c441ba3 --- /dev/null +++ b/source/_patterns/05-pages/homepage/index.js @@ -0,0 +1,14 @@ +import $ from 'jquery'; + +const defaultSettings = { color: 'orange' }; + +export const name = 'homepage'; + +export function disable() {} + +export function enable(context = $(document), settings = defaultSettings) { + $('.homepage__header', context).css('color', settings.color); + $('.homepage__text', context).html('overwritten from homepage js'); +} + +export default enable; diff --git a/source/_twig-components/filters/luma.filter.php b/source/_twig-components/filters/luma.filter.php new file mode 100644 index 0000000000..8c4bbce33d --- /dev/null +++ b/source/_twig-components/filters/luma.filter.php @@ -0,0 +1,19 @@ + int(0) + * ["g"] => int(123) + * ["b"] => int(255) + * ["a"] => int(1) + * } + * @return float + */ +$filter = new Twig_SimpleFilter('luma', function ($rgba) { + // Doesn't handle alpha, yet + return 0.2126 * $rgba['r'] + 0.7152 * $rgba['g'] + 0.0722 * $rgba['b']; +}); diff --git a/source/_twig-components/filters/rgba_string.filter.php b/source/_twig-components/filters/rgba_string.filter.php new file mode 100644 index 0000000000..4d27b0ea9e --- /dev/null +++ b/source/_twig-components/filters/rgba_string.filter.php @@ -0,0 +1,14 @@ +Script($, Drupal) { + Drupal.behaviors.<%= camelCaseName %> = { + attach(context) { + + }, + }; +}(jQuery, Drupal)); diff --git a/tools/new-component/templates/pattern.json b/tools/new-component/templates/pattern.json new file mode 100644 index 0000000000..a2087c9987 --- /dev/null +++ b/tools/new-component/templates/pattern.json @@ -0,0 +1,3 @@ +{ + "<%= underscoreName %>": {} +} diff --git a/tools/new-component/templates/pattern.md b/tools/new-component/templates/pattern.md new file mode 100644 index 0000000000..2dddf2d317 --- /dev/null +++ b/tools/new-component/templates/pattern.md @@ -0,0 +1,3 @@ +--- +title: <%= name %> +--- diff --git a/tools/new-component/templates/pattern.twig b/tools/new-component/templates/pattern.twig new file mode 100644 index 0000000000..6d7e3a57ff --- /dev/null +++ b/tools/new-component/templates/pattern.twig @@ -0,0 +1,14 @@ +{# +/** + * @file + * <%= name %> + * + * Available variables for <%= name %>: + * - <%= underscoreName %>.variable_name [variable_type]: Description of the variable. Example below. + * - <%= underscoreName %>.invert [bool]: When set, colors will be inverted for light display on dark background. + */ +#} + +
    + +
    diff --git a/tools/new-component/templates/pattern.yml b/tools/new-component/templates/pattern.yml new file mode 100644 index 0000000000..864ae94721 --- /dev/null +++ b/tools/new-component/templates/pattern.yml @@ -0,0 +1 @@ +<%= underscoreName %>: diff --git a/tools/tasks/gulp-pa11y.js b/tools/tasks/gulp-pa11y.js new file mode 100644 index 0000000000..245227e0c1 --- /dev/null +++ b/tools/tasks/gulp-pa11y.js @@ -0,0 +1,92 @@ +const fs = require('fs'); +const path = require('path'); + +const pa11y = require('pa11y'); +const reporter = require('pa11y-reporter-cli'); // As pa11y 5 stabilizes, we can pull this off pa11y +const _ = require('lodash'); +const through = require('through2'); + +// Grab project root pa11y.json as object +const pallyJson = JSON.parse(fs.readFileSync(path.join(process.cwd(), 'pa11y.json'))); +// Custom logging tools for pa11y +const logConfig = { + log: { + debug: console.log, + error: console.error, + info: console.log, + }, +}; +// Smash them together +const pa11yConfig = _.assign(pallyJson, logConfig); + +/** + * Run pa11y testing one after the next + * @returns {*} + */ +function pa11yConsecutive() { + function bufferContents(vinylFile, encoding, callback) { + // ignore empty files + if (vinylFile.isNull()) { + callback(); + return; + } + pa11y(vinylFile.path, pa11yConfig) + .then((result) => { + pa11yConfig.log.info(reporter.results(result)); + callback(); + }) + .catch((error) => { + pa11yConfig.log.error(error.message); + callback(); + }); + } + + function endStream(callback) { + callback(); + } + + return through.obj(bufferContents, endStream); +} + +/** + * Gather all paths and run all pa11y tests simultaneously. + * (Tends to run out of memory) + * @returns {*} + */ +function pa11yParallel() { + // All paths to test with pa11y + const filePaths = []; + + function bufferContents(vinylFile, encoding, callback) { + // ignore empty files + if (vinylFile.isNull()) { + callback(); + return; + } + // Simply add the path onto the array of paths to test + filePaths.push(vinylFile.path); + callback(); + } + + function endStream(callback) { + // Run tests against multiple URLs + Promise.all(_.map(filePaths, filePath => pa11y(filePath, pa11yConfig))) + .then((results) => { + results.forEach((result) => { + pa11yConfig.log.info(reporter.results(result)); + }); + callback(); + }) + .catch((error) => { + pa11yConfig.log.error(error.message); + callback(); + }); + } + + return through.obj(bufferContents, endStream); +} + +module.exports = { + pa11yConsecutive, + pa11yParallel, +}; diff --git a/tools/tasks/gulp-twig-namespaces.js b/tools/tasks/gulp-twig-namespaces.js new file mode 100644 index 0000000000..1b210c858d --- /dev/null +++ b/tools/tasks/gulp-twig-namespaces.js @@ -0,0 +1,122 @@ +const path = require('path'); +const through = require('through2'); +const _ = require('lodash'); +const yaml = require('js-yaml'); +const fs = require('fs'); + +/** + * Provide twig namespaces to any yaml file based on config + * See https://github.com/contra/gulp-concat/blob/master/index.js for inspiration + * @TODO: better docs about options here + * @param opt + * @returns {*} + */ +module.exports = function SassToJson(opt) { + // Options from caller + const options = opt || {}; + + // Start by pulling off the paths mentioned in config + // Will look like e.g. ['source/_patterns/00-protons', 'source/_patterns/01-atoms, 'etc] + const filefolders = _.map(options.sets, namePath => namePath.root); + + // Check last file modified + let latestFile; + let latestMod; + + // Return a `through2` stream for `pipe()` compatibility at the node level + // Note that any manipulation of files must be done at .clone(), see + // the gulp-concat repo mentioned above for notes + function bufferContents(vinylFile, encoding, callback) { + // ignore empty files + if (vinylFile.isNull()) { + callback(); + return; + } + + // Set latest file if not already set, or if the current file was modified more recently. + if (!latestMod || (vinylFile.stat && vinylFile.stat.mtime > latestMod)) { + latestFile = vinylFile; + latestMod = vinylFile.stat && vinylFile.stat.mtime; + } + + // Get the proper path of this file, given: + // cwd: /Users/illepic/dev/pattern-lab-starter + // base: /Users/illepic/dev/pattern-lab-starter/source/_patterns/ + // path: /Users/illepic/dev/pattern-lab-starter/source/_patterns/00-protons/demo/grid/_grid.twig + // + // Want output like: i.e. source/_patterns/00-protons/demo/type/text + filefolders.push(path.dirname(path.relative(vinylFile.cwd, vinylFile.path))); + + callback(); + } + + function endStream(callback) { + // Don't run any of this if there wasn't actually a file changed + if (!latestFile) { + callback(); + return; + } + + // Return an array of Buffer files from the "outputs" config + const bufferFiles = _.map(options.outputs, (output) => { + // Build the namespaces object that looks like: + // { + // atoms: { + // paths: ['source/_patterns/00-protons', 'source/_patterns/01-atoms, 'etc], + // molecules: ... + // } + const namespaces = _.reduce(options.sets, (result, namePath, name) => { + // Paths per namespace are unique to the ouput yaml files they will go into + const paths = _(filefolders) + // Only file paths in our namespace (ie atoms) path (ie source/_patterns/01-atoms) + .filter(folderPath => + folderPath.includes(namePath.root) && !folderPath.includes(namePath.ignore)) + // 01-atoms should come before 01-atoms/blerp + .sortBy(pathString => pathString.length) + // Remove dupes + .sortedUniq() + // Modify path to be relative to pathRelativeToDir for yaml config + .map(folderPath => path.relative(output.pathRelativeToDir, folderPath)) + // Break out of lodash object + .value(); + + // Each namespace object will be smashed into a result object, yaml format must be: + // atoms: + // paths: + // - path/to/include + // - another/path/to/include + const namespace = { + [name]: { + paths, + }, + }; + + // Continuously assign this back into the result object + return _.assign(result, namespace); + }, {}); + + + // Read the yaml right off the filesystem. Yes, it's sync. Makes this sane. + const configFile = yaml.safeLoad(fs.readFileSync(output.configFile, 'utf8')); + // The 'atKey' is in the lodash _.set() path format. + _.set(configFile, output.atKey, namespaces); + + // Make a new file using a clone of one we have lying around. + const outputFile = latestFile.clone({ contents: false }); + // Base appears to be removed when gulp.dest() runs. SO ADD IT. + outputFile.path = path.join(latestFile.base, output.configFile); + + // Write it out in buffer safe way + outputFile.contents = Buffer.from(yaml.safeDump(configFile)); + + return outputFile; + }); + + // Push these files on to the array used by gulp.dest() + bufferFiles.forEach(bufferFile => (this.push(bufferFile))); + + callback(); + } + + return through.obj(bufferContents, endStream); +}; diff --git a/tools/tasks/pl-compile.js b/tools/tasks/pl-compile.js new file mode 100644 index 0000000000..278e8a6dc0 --- /dev/null +++ b/tools/tasks/pl-compile.js @@ -0,0 +1,24 @@ +const { exec } = require('child_process'); + +/** + * Compile Pattern Lab + * @param plPath Full path to PL + * @returns {function(*)} A compile function that takes a callback + */ +module.exports = function plCompile(plPath) { + // Note returns a function with the plPath in closure + return (done) => { + exec(`php ${plPath}/core/console --generate`, (err, stdout, stderr) => { + console.log(stdout); + + if (err) { + console.log(stderr); + done(); + return false; + } + + done(); + return true; + }); + }; +}; diff --git a/tools/tasks/webpack-dev-server.js b/tools/tasks/webpack-dev-server.js new file mode 100644 index 0000000000..d83b716b13 --- /dev/null +++ b/tools/tasks/webpack-dev-server.js @@ -0,0 +1,81 @@ +const url = require('url'); +const webpack = require('webpack'); +const WebpackDevServer = require('webpack-dev-server'); +const crypto = require('crypto'); + +/** + * Starts up the Webpack Dev Server and does the config adjustments that this + * command does: + * webpack-dev-server --hot --inline --progress + * + * Note the absolute requirements for Hot Module Reloading in this Dev Server: + * - HotModuleReplacementPlugin + * - Added entry points + */ +function startWebpackDevServer(webpackConfig, devServerConfig) { + return (cb) => { + const localWebpackConfig = webpackConfig; + const { + entry: { 'app-pl': plEntry }, // ./apps/pl/index.js + output: { publicPath }, // /temp/ + } = localWebpackConfig; + + const localDevServerConfig = devServerConfig; + const { host, port } = localDevServerConfig; + const localHost = `http://${host}:${port}`; + // Ensure our public path is how we access these assets, ie http://localhost:8080/temp + localDevServerConfig.publicPath = url.resolve(localHost, publicPath); + + // Add HotModuleReplacementPlugin to the end of the webpack plugins + localWebpackConfig.plugins.push(new webpack.HotModuleReplacementPlugin()); + // Set these new entry points required for Hot Module replacement, prepended + // with the original entry point + localWebpackConfig.entry['app-pl'] = [ + ...plEntry, + ...['webpack/hot/dev-server', `webpack-dev-server/client?${localHost}`], + ]; + + // Make a new server and store a reference to it so we can interact with it later + const wpds = new WebpackDevServer(webpack(localWebpackConfig), localDevServerConfig); + wpds.disableHostCheck = true; + + wpds.listen(port, host, (err) => { + if (err) { + cb(err); + } + + console.info(`Listening at ${localHost}. PL located at ${localHost}/pl`); + cb(); + }); + + return wpds; + }; +} + +/** + * Take in config for webpack and webpack dev server, plus a call back, and set an active server + * on the object + * @param wpconfig + * @param serverconfig + * @param cb + */ +function start(wpconfig, serverconfig, cb) { + this.webpackdevserver = startWebpackDevServer(wpconfig, serverconfig)(cb); +} + +/** + * Reload the active server within the scope of this function. webpack dev server determines + * whether it needs to do a "hard reload" or "hot reload" based on comparing current state hash to + * new state hash. We just send over junk and webpack dev server goes "oh snap, hard reload time!" + * @param cb + */ +function reload(cb) { + this.webpackdevserver.sockWrite(this.webpackdevserver.sockets, 'hash', crypto.randomBytes(20).toString('hex')); + this.webpackdevserver.sockWrite(this.webpackdevserver.sockets, 'ok'); + cb(); +} + +module.exports = { + start, + reload, +}; diff --git a/webpack.drupal.config.js b/webpack.drupal.config.js new file mode 100644 index 0000000000..3ae2cb4e6c --- /dev/null +++ b/webpack.drupal.config.js @@ -0,0 +1,33 @@ +/** + * Drupal-specific webpack config + * This is merged over top of webpack.shared.config.js + */ + +// Library Imports +const path = require('path'); +const merge = require('webpack-merge'); +const webpack = require('webpack'); + +// Custom Imports +const shared = require('./webpack.shared.config'); +const { PATH_DRUPAL } = require('./config'); + +const drupal = { + entry: { + 'app-drupal': [ + path.resolve(__dirname, PATH_DRUPAL, 'index.js'), + ], + }, + // These will be explicitly be provided OUTSIDE the bundle via a