diff --git a/README.md b/README.md index 2047a05..ce0169d 100644 --- a/README.md +++ b/README.md @@ -32,10 +32,4 @@ lando php web/core/scripts/drupal generate-theme --starterkit starter_theme my_n lando drush cr ``` -## Remove these lines from your custom theme info file -``` -hidden: true -starterkit: true -``` - ## Install the theme dependencies and set your custom theme as the default diff --git a/bixaluswds.info.yml b/bixaluswds.info.yml index 4315f14..7268fc6 100644 --- a/bixaluswds.info.yml +++ b/bixaluswds.info.yml @@ -3,7 +3,7 @@ type: theme description: "Drupal base theme for use with USWDS. Check the README for further instructions." core_version_requirement: "^10" base theme: false -version: '0.0.0' +version: '1.0.0' hidden: true dependencies: - drupal:twig_tweak diff --git a/bixaluswds.theme b/bixaluswds.theme index 5f37537..eb843fa 100644 --- a/bixaluswds.theme +++ b/bixaluswds.theme @@ -6,6 +6,7 @@ */ require_once dirname(__FILE__) . '/preprocess/global.inc'; +require_once dirname(__FILE__) . '/preprocess/block.inc'; require_once dirname(__FILE__) . '/preprocess/form.inc'; require_once dirname(__FILE__) . '/preprocess/navigation.inc'; require_once dirname(__FILE__) . '/preprocess/taxonomy.inc'; diff --git a/logo.svg b/logo.svg deleted file mode 100644 index 7a96faa..0000000 --- a/logo.svg +++ /dev/null @@ -1,41 +0,0 @@ - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/preprocess/block.inc b/preprocess/block.inc new file mode 100644 index 0000000..0c004a8 --- /dev/null +++ b/preprocess/block.inc @@ -0,0 +1,13 @@ +getCurrentLanguage(); $variables['language'] = $language->getId(); $variables['uswds_img_path'] = '/themes/custom/bixaluswds/dist/img'; + $variables['class_prefix'] = 'bx-'; } diff --git a/starter_theme/config/install/block.block.bixaluswds_main_menu.yml b/starter_theme/config/install/block.block.bixaluswds_main_menu.yml new file mode 100644 index 0000000..91bce50 --- /dev/null +++ b/starter_theme/config/install/block.block.bixaluswds_main_menu.yml @@ -0,0 +1,24 @@ +langcode: en +status: true +dependencies: + config: + - system.menu.main + module: + - system + theme: + - starter_theme +id: bixaluswds_main_menu +theme: starter_theme +region: header +weight: 0 +provider: null +plugin: 'system_menu_block:main' +settings: + id: 'system_menu_block:main' + label: 'Main navigation' + label_display: '0' + provider: system + level: 1 + depth: 2 + expand_all_items: true +visibility: { } diff --git a/starter_theme/config/install/block.block.bixaluswds_sitebranding.yml b/starter_theme/config/install/block.block.bixaluswds_sitebranding.yml new file mode 100644 index 0000000..390b47b --- /dev/null +++ b/starter_theme/config/install/block.block.bixaluswds_sitebranding.yml @@ -0,0 +1,22 @@ +langcode: en +status: true +dependencies: + module: + - system + theme: + - starter_theme +id: bixaluswds_sitebranding +theme: starter_theme +region: header +weight: -2 +provider: null +plugin: system_branding_block +settings: + id: system_branding_block + label: 'Site branding' + label_display: '0' + provider: system + use_site_logo: true + use_site_name: true + use_site_slogan: false +visibility: { } diff --git a/starter_theme/config/install/block.block.starter_theme_content.yml b/starter_theme/config/install/block.block.starter_theme_content.yml new file mode 100644 index 0000000..4c954e9 --- /dev/null +++ b/starter_theme/config/install/block.block.starter_theme_content.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + module: + - system + theme: + - starter_theme +id: starter_theme_content +theme: starter_theme +region: content +weight: -3 +provider: null +plugin: system_main_block +settings: + id: system_main_block + label: 'Main page content' + label_display: '0' + provider: system +visibility: { } diff --git a/starter_theme/config/install/block.block.starter_theme_messages.yml b/starter_theme/config/install/block.block.starter_theme_messages.yml new file mode 100644 index 0000000..86fb5bd --- /dev/null +++ b/starter_theme/config/install/block.block.starter_theme_messages.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + module: + - system + theme: + - starter_theme +id: starter_theme_messages +theme: starter_theme +region: admin +weight: -3 +provider: null +plugin: system_messages_block +settings: + id: system_messages_block + label: 'Status messages' + label_display: '0' + provider: system +visibility: { } diff --git a/starter_theme/config/install/block.block.starter_theme_page_title.yml b/starter_theme/config/install/block.block.starter_theme_page_title.yml new file mode 100644 index 0000000..e18205f --- /dev/null +++ b/starter_theme/config/install/block.block.starter_theme_page_title.yml @@ -0,0 +1,17 @@ +langcode: en +status: true +dependencies: + theme: + - starter_theme +id: starter_theme_page_title +theme: starter_theme +region: content +weight: -4 +provider: null +plugin: page_title_block +settings: + id: page_title_block + label: 'Page title' + label_display: '0' + provider: core +visibility: { } diff --git a/starter_theme/config/install/block.block.starter_theme_primary_local_tasks.yml b/starter_theme/config/install/block.block.starter_theme_primary_local_tasks.yml new file mode 100644 index 0000000..13229d3 --- /dev/null +++ b/starter_theme/config/install/block.block.starter_theme_primary_local_tasks.yml @@ -0,0 +1,19 @@ +langcode: en +status: true +dependencies: + theme: + - starter_theme +id: starter_theme_primary_local_tasks +theme: starter_theme +region: admin +weight: -4 +provider: null +plugin: local_tasks_block +settings: + id: local_tasks_block + label: 'Primary tabs' + label_display: '0' + provider: core + primary: true + secondary: false +visibility: { } diff --git a/starter_theme/gulpfile.js b/starter_theme/gulpfile.js index a4a38f1..c63c04c 100644 --- a/starter_theme/gulpfile.js +++ b/starter_theme/gulpfile.js @@ -1,6 +1,65 @@ const uswds = require("@uswds/compile"); const {parallel, watch, series, src} = require("gulp"); const gulp = require("gulp"); +const uglifyes = require('uglify-es'); +const composer = require('gulp-uglify/composer'); +const uglify = composer(uglifyes, console); + +const settings = { + sass: { + src: ['./src/sass/**/*.scss'] + }, + js: { + dest: './dist/js', + minDest: './dist/js/min', + minSrc: './src/js/**/*.js', + src: './src/js/**/*.js', + } +} + +// JS build function. +function buildJS() { + return src(settings.js.src) + .pipe(uglify()) + .pipe(gulp.dest(settings.js.dest)); +} + +// Watch changes on JS files and trigger functions at the end. +function watchJSFiles() { + watch( + [ + './src/js/**/*.js' + ], + { + events: 'all', + ignoreInitial: false + }, + series( + buildJS + ) + ); +} + +// Compile CSS from scss. +function buildCompStyles() { + return src(settings.sass.src); +} + +// Watch changes on sass files and trigger functions at the end. +function watchCompFiles() { + watch( + [ + './src/sass/**/*.scss', + ], + { + events: 'all', + ignoreInitial: false + }, + series( + buildCompStyles + ) + ); +} /** * USWDS version @@ -15,11 +74,11 @@ uswds.settings.version = 3; */ uswds.paths.dist.theme = './src/sass'; -uswds.paths.src.projectSass = './src/sass'; uswds.paths.dist.css = './dist/css'; -uswds.paths.dist.img = './dist/img'; -uswds.paths.dist.fonts = './dist/fonts'; +uswds.paths.dist.img = './dist/assets/img'; +uswds.paths.dist.fonts = './dist/assets/fonts'; uswds.paths.dist.js = './dist/js'; +uswds.paths.src.projectSass = './src/sass'; /** * Exports @@ -27,8 +86,8 @@ uswds.paths.dist.js = './dist/js'; */ // Various compile functions. -exports.default = series(uswds.copyAssets, uswds.compile); -exports.init = uswds.init; +exports.build = series(uswds.copyAssets, buildJS, uswds.compile); exports.compile = uswds.compile; +exports.default = exports.watch = parallel(watchCompFiles, uswds.watch, watchJSFiles); exports.update = uswds.updateUswds; exports.copyAssets = uswds.copyAssets; diff --git a/starter_theme/logo.svg b/starter_theme/logo.svg new file mode 100644 index 0000000..058a6f7 --- /dev/null +++ b/starter_theme/logo.svg @@ -0,0 +1,3 @@ + + + diff --git a/starter_theme/package.json b/starter_theme/package.json index 98e09d2..5624016 100644 --- a/starter_theme/package.json +++ b/starter_theme/package.json @@ -4,13 +4,21 @@ "description": "", "main": "index.js", "scripts": { - "build": "npx gulp", - "postinstall": "npx gulp" + "postinstall": "npx gulp build", + "build": "npx gulp build", + "dev": "npx gulp" }, "author": "", "license": "ISC", "devDependencies": { - "@uswds/compile": "^1.0.0", - "@uswds/uswds": "^3.6.1" + "@uswds/compile": "^1.1.0", + "@uswds/uswds": "^3.8.1", + "gulp": "^5.0.0", + "gulp-uglify": "^3.0.2", + "uglify-es": "^3.3.9" + }, + "overrides": { + "glob-parent": "6.0.2", + "postcss": "^8.4.31" } } diff --git a/starter_theme/src/js/external-links.js b/starter_theme/src/js/external-links.js new file mode 100644 index 0000000..4252e50 --- /dev/null +++ b/starter_theme/src/js/external-links.js @@ -0,0 +1,24 @@ +/* + Processing External Links + */ + +(() => { + + // Enable external links behavior. + // `extlinkjs-ignore` attribute should be added to all icons in order to not render the uswds external links icon + const externalLinks = document.querySelectorAll('a[href^="https"]:not([extlinkjs-ignore])'); + const title_translated = Drupal.t('External link opens in new window'); + + // Process external links. + if (externalLinks.length) { + for (let i = 0; i < externalLinks.length; i++) { + externalLinks[i].classList.add('usa-link--external'); + externalLinks[i].setAttribute('target', '_blank'); + externalLinks[i].setAttribute('title', title_translated); + if (!new URL(externalLinks[i].href).hostname.endsWith(".gov")) { + externalLinks[i].setAttribute('rel', 'noreferrer'); + } + } + } + +})(); diff --git a/starter_theme/src/js/theme-switcher.js b/starter_theme/src/js/theme-switcher.js new file mode 100644 index 0000000..50046b2 --- /dev/null +++ b/starter_theme/src/js/theme-switcher.js @@ -0,0 +1,46 @@ +/* + * Theme UI data attribute switcher + * Example: + * + */ + +(() => { + const switchBtn = document.querySelectorAll("button[data-ui-switch-id]"); + const targetContainer = document.documentElement; + + function switchInit(item) { + const id = item.getAttribute('data-ui-switch-id'); + let values = item.getAttribute('data-values'); + let currentIndex = 0; + + if (id && values) { + const storedSwitch = sessionStorage.getItem(id); + const attr = `data-${id}`; + // Split the string value into an array of values + values = values.trim().split(/,\s*/); + + function switchTrigger() { + // once function is called move to the next item in themes array and then loop back at the end of the list + currentIndex = (currentIndex + 1) % values.length; + targetContainer.setAttribute(attr, values[currentIndex]); + // set theme selection in local storage + sessionStorage.setItem(id, values[currentIndex]); + } + + if (storedSwitch) { + // Set the current theme index based on the stored value + let storedValue = currentIndex = values.indexOf(storedSwitch); + targetContainer.setAttribute(attr, values[storedValue]); + } + + item.addEventListener('click', switchTrigger); + } + } + + switchBtn.forEach(switchInit); +})(); diff --git a/starter_theme/src/sass/_uswds-settings.scss b/starter_theme/src/sass/_uswds-settings.scss new file mode 100644 index 0000000..6a5f1ad --- /dev/null +++ b/starter_theme/src/sass/_uswds-settings.scss @@ -0,0 +1,217 @@ +/* + ***** Do not write any custom CSS on this file, this is for USWDS settings only. + ***** For all possible overrides, see https://designsystem.digital.gov/documentation/settings/ +---------------------------------------- +USWDS theme settings overrides +---------------------------------------- +// Grid settings reference +---------------------------------------- +Grid container max-width +---------------------------------------- +mobile +mobile-lg +tablet +tablet-lg +desktop +desktop-lg +widescreen +---------------------------------------- +// Units available for usage. +example with USWDS units: +.element { + padding-bottom: units('first value in the key pairs below') +} + +Or a USWDS mixin... + +.element { + @include u-padding-bottom('3'); +} + +"1px": 1px, +"2px": 2px, +"05": 0.25rem, +1: 0.5rem, +"105": 0.75rem, +2: 1rem, +"205": 1.25rem, +3: 1.5rem, +"neg-1px": -1px, +"neg-2px": -2px, +"neg-05": -0.25rem, +"neg-1": -0.5rem, +"neg-105": -0.75rem, +"neg-2": -1rem, +"neg-205": -1.25rem, +"neg-3": -1.5rem, +4: 2rem, +5: 2.5rem, +6: 3rem, +7: 3.5rem, +8: 4rem, +9: 4.5rem, +10: 5rem, +15: 7.5rem, +"neg-4": -2rem, +"neg-5": -2.5rem, +"neg-6": -3rem, +"neg-7": -3.5rem, +"neg-8": -4rem, +"neg-9": -4.5rem, +"neg-10": -5rem, +"neg-15": -7.5rem, +"card": 10rem, +"card-lg": 15rem, +"mobile": 20rem, +"mobile-lg": 30rem, +"tablet": 40rem, +"tablet-lg": 55rem, +"desktop": 64rem, +"desktop-lg": 75rem, +"widescreen": 87.5rem, +0: 0, +"auto": auto +*/ + +// ****** Do not write any custom CSS on this file ****** // +/* Theme setting documentation --------------------------------------------------------------- +https://designsystem.digital.gov/documentation/settings/ + */ +@use "uswds-core" with ( + // General settings. + $theme-image-path: "../assets/img", + $theme-font-path: "../assets/fonts", + $theme-show-notifications: false, + //$theme-global-content-styles: true, + + // Component container max-widths. + $theme-grid-container-max-width: "widescreen", + $theme-banner-max-width: "widescreen", + $theme-header-max-width: "widescreen", + $theme-identifier-max-width: "widescreen", + $theme-footer-max-width: "widescreen", + $theme-site-alert-max-width: "widescreen", + $max-width-settings: ( + output: true, + responsive: true, // Max width settings, set responsive to true. + ), + + /* Color token documentation: + https://designsystem.digital.gov/design-tokens/color/theme-tokens/ + https://designsystem.digital.gov/design-tokens/color/overview/ + */ + // Color settings --------------------------------------------------------------- + //$test-system-color-tokens: false, // Debug output for system colors. + + // -- Primary + // -- Secondary + // -- Accent cool + // -- Accent warm + // -- Info + + // Component settings --------------------------------------------------------------- + // -- Accordion + // -- Alert + // -- Banner + // -- Breadcrumb + // -- Button + // -- Card + // -- Checkbox + // -- Collection + // -- Footer + // -- Form + // -- Header + // -- Hero + // -- Icon list + // -- Identifier + // -- In-page navigation + // -- Input + // -- Link + // -- Modal + // -- Navigation + $theme-header-min-width: 'tablet-lg', + // -- Pagination + // -- Process list + // -- Radio buttons + // -- Search + // -- Sidenav + // -- Site Alert + // -- Step indicator + // -- Summary box + // -- Tables + // -- Tooltip + // **** End Components **** + + // Spacing settings --------------------------------------------------------------- + $theme-column-gap-sm: 3, + $theme-column-gap-md: 4, + $theme-column-gap-lg: 6, + $theme-column-gap-mobile: 5, + //$theme-column-gap-desktop: 7, + //$theme-site-margins-width: 10, + //$theme-site-margins-mobile-width: 3, + //$theme-site-margins-breakpoint: 'tablet', + + // Typography settings --------------------------------------------------------------- + /* Typography settings and token documentation: + https://designsystem.digital.gov/documentation/settings/#typography-settings + https://designsystem.digital.gov/design-tokens/typesetting/overview/ + https://designsystem.digital.gov/utilities/font-size-and-family/ + https://designsystem.digital.gov/design-tokens/typesetting/font-family/ + */ + // Set some reasonable typography defaults. + //$theme-font-type-sans: "roboto", + //$theme-font-type-serif: "merriweather", + //$theme-font-role-ui: "sans", + //$theme-font-role-heading: "sans", + //$theme-font-role-body: "sans", + //$theme-font-role-alt: "sans", + $theme-text-measure: none, // Set standard line-length to 100% + $theme-lead-measure: none, + $theme-lead-line-height: 5, + $theme-lead-font-size: 8, + //$theme-body-font-family: "sans", + $theme-body-line-height: 5, + $theme-body-font-size: 5, + $theme-style-body-element: "true", + + // https://designsystem.digital.gov/design-tokens/typesetting/font-size/ + $theme-h1-font-size: 15, + $theme-h2-font-size: 11, + $theme-h3-font-size: 10, + $theme-h4-font-size: 9, + $theme-h5-font-size: 8, + $theme-h6-font-size: 7, + + // $theme-typeface-tokens: ( + // "roboto": ( + // "display-name": "Roboto", // or other font + // "cap-height": 364px, // the default, leave it for now + // "stack": "Helvetica, Arial, sans-serif", // or whatever stack you want + // ), + //), + + // Utilities settings --------------------------------------------------------------- + // Example of a custom utility class + // compiles as .bottom-100 { bottom:100px!important } + //$bottom-manual-values: ("80": 80px), + //$top-manual-values: ("6": 6px), + + // Turn on or off breakpoints + $theme-utility-breakpoints: ( + 'card': false, // 160px + 'card-lg': false, // 240px + 'mobile': false, // 320px + 'mobile-lg': false, // 480px + 'tablet': true, // 640px + 'tablet-lg': true, // 880px + 'desktop': true, // 1024px + 'desktop-lg': true, // 1200px + 'widescreen': false, // 1400px + ), + $flex-direction-settings: ( + output: true, + responsive: true, + ), +); +// ****** Do not write any custom CSS on this file ****** // diff --git a/starter_theme/src/sass/_uswds-theme-custom-styles.scss b/starter_theme/src/sass/_uswds-theme-custom-styles.scss deleted file mode 100644 index 8411eec..0000000 --- a/starter_theme/src/sass/_uswds-theme-custom-styles.scss +++ /dev/null @@ -1,23 +0,0 @@ -/* -* * * * * ============================== -* * * * * ============================== -* * * * * ============================== -* * * * * ============================== -======================================== -======================================== -======================================== ----------------------------------------- -USWDS THEME CUSTOM STYLES ----------------------------------------- -!! Copy this file to your project's - sass root. Don't edit the version - in node_modules. ----------------------------------------- -Custom project SASS goes here. - -i.e. -@include u-padding-right('05'); ----------------------------------------- -*/ - -@use "uswds-core" as *; diff --git a/starter_theme/src/sass/_uswds-theme.scss b/starter_theme/src/sass/_uswds-theme.scss deleted file mode 100644 index eead761..0000000 --- a/starter_theme/src/sass/_uswds-theme.scss +++ /dev/null @@ -1,15 +0,0 @@ -/* ----------------------------------------- -USWDS with settings overrides ----------------------------------------- -Uncomment the following lines and add a list of changed settings -in the form $setting: value, ----------------------------------------- -*/ - -// -// @use "uswds-core" with ( -// $setting: value, -// $setting: value -// ); -// diff --git a/starter_theme/src/sass/styles.scss b/starter_theme/src/sass/styles.scss index 6897863..8f53b80 100644 --- a/starter_theme/src/sass/styles.scss +++ b/starter_theme/src/sass/styles.scss @@ -1,3 +1,13 @@ -@forward "uswds-theme"; +// ****** Do not write any custom CSS on this file ****** // + +// Theme settings overrides. +@forward "uswds-settings"; + +// USWDS individual components +// to include everything, just code it as @forward "uswds"; @forward "uswds"; -@forward "uswds-theme-custom-styles"; + +// Custom styles +//@use "uswds-overrides"; + +// ****** Do not write any custom CSS on this file ****** // diff --git a/starter_theme/starter_theme.info.yml b/starter_theme/starter_theme.info.yml index 4a62b2d..e51ba17 100644 --- a/starter_theme/starter_theme.info.yml +++ b/starter_theme/starter_theme.info.yml @@ -3,7 +3,6 @@ type: theme description: "Drupal theme for use with USWDS." core_version_requirement: "^10" base theme: bixaluswds -starterkit: true version: '0.0.0' hidden: true diff --git a/starter_theme/starter_theme.libraries.yml b/starter_theme/starter_theme.libraries.yml index ce2db37..8fc96e1 100644 --- a/starter_theme/starter_theme.libraries.yml +++ b/starter_theme/starter_theme.libraries.yml @@ -2,6 +2,7 @@ base: version: VERSION dependencies: - starter_theme/uswds + - starter_theme/external_links uswds: version: VERSION @@ -11,3 +12,13 @@ uswds: js: dist/js/uswds-init.js: {} dist/js/uswds.js: {} + +external_links: + version: VERSION + js: + dist/js/external-links.js: { minified: true } + +#theme_switcher: +# version: VERSION +# js: +# dist/js/theme-switcher.js: { minified: true } diff --git a/starter_theme/starter_theme.starterkit.yml b/starter_theme/starter_theme.starterkit.yml new file mode 100644 index 0000000..68bce45 --- /dev/null +++ b/starter_theme/starter_theme.starterkit.yml @@ -0,0 +1,2 @@ +info: + version: VERSION diff --git a/starter_theme/starter_theme.theme b/starter_theme/starter_theme.theme index fed14b7..4d4e58e 100644 --- a/starter_theme/starter_theme.theme +++ b/starter_theme/starter_theme.theme @@ -9,5 +9,5 @@ * Implements hook_preprocess(). */ function starter_theme_preprocess(&$variables) { - $variables['uswds_img_path'] = '/themes/custom/starter_theme/dist/img'; + $variables['uswds_img_path'] = '/themes/custom/starter_theme/dist/assets/img'; } diff --git a/templates/_components/uswds/usa-footer.html.twig b/templates/_components/uswds/usa-footer.html.twig index 7d182e9..8702c5c 100644 --- a/templates/_components/uswds/usa-footer.html.twig +++ b/templates/_components/uswds/usa-footer.html.twig @@ -77,7 +77,7 @@ {% for item in social_icons %} {% if item.url %}
- + {% if phone %}
- {{ phone }} + {{ phone }}
{% endif %} {% if email %} diff --git a/templates/_components/uswds/usa-identifier.html.twig b/templates/_components/uswds/usa-identifier.html.twig index c9bee4e..13d7ae9 100644 --- a/templates/_components/uswds/usa-identifier.html.twig +++ b/templates/_components/uswds/usa-identifier.html.twig @@ -32,7 +32,7 @@
- +{% endblock %} diff --git a/templates/block/block--system-menu-block.html.twig b/templates/block/block--system-menu-block.html.twig index d44d842..9f3de41 100644 --- a/templates/block/block--system-menu-block.html.twig +++ b/templates/block/block--system-menu-block.html.twig @@ -2,33 +2,6 @@ /** * @file * Theme override for a menu block. - * - * Available variables: - * - plugin_id: The ID of the block implementation. - * - label: The configured label of the block if visible. - * - configuration: A list of the block's configuration values. - * - label: The configured label for the block. - * - label_display: The display settings for the label. - * - provider: The module or other provider that provided this block plugin. - * - Block plugin specific settings will also be stored here. - * - content: The content of this block. - * - attributes: HTML attributes for the containing element. - * - id: A valid HTML ID and guaranteed unique. - * - title_attributes: HTML attributes for the title element. - * - content_attributes: HTML attributes for the content element. - * - title_prefix: Additional output populated by modules, intended to be - * displayed in front of the main title tag that appears in the template. - * - title_suffix: Additional output populated by modules, intended to be - * displayed after the main title tag that appears in the template. - * - * Headings should be used on navigation menus that consistently appear on - * multiple pages. When this menu block's label is configured to not be - * displayed, it is automatically made invisible using the 'visually-hidden' CSS - * class, which still keeps it visible for screen-readers and assistive - * technology. Headings allow screen-reader and keyboard only users to navigate - * to or skip the links. - * See http://juicystudio.com/article/screen-readers-display-none.php and - * http://www.w3.org/TR/WCAG-TECHS/H42.html for more information. */ #} {{ content }} diff --git a/templates/block/block.html.twig b/templates/block/block.html.twig index 0f2c047..63399e7 100644 --- a/templates/block/block.html.twig +++ b/templates/block/block.html.twig @@ -26,21 +26,18 @@ */ #} {% set classes = [ - 'block', - 'block--' ~ configuration.provider|clean_class, - 'block--' ~ plugin_id|clean_class, + class_prefix ~ 'block', + class_prefix ~ 'block--' ~ plugin_id|clean_class, ] %} - {{ title_prefix }} {% if label %} - {{ label }} + {{ label }} {% endif %} {{ title_suffix }} {% block content %} {{ content }} {% endblock %} -
diff --git a/templates/block/block_content.html.twig b/templates/block/block_content.html.twig index c19b962..f1d1383 100644 --- a/templates/block/block_content.html.twig +++ b/templates/block/block_content.html.twig @@ -10,19 +10,14 @@ #} {% set classes = [ - 'block-content', - 'block-content--type-' ~ bundle|clean_class, - 'block-content--view-mode-' ~ view_mode|clean_class + class_prefix ~ 'block-content', + class_prefix ~ 'block-content--' ~ bundle|clean_class, + class_prefix ~ 'block-content--' ~ view_mode|clean_class ] %} - - {{ title_prefix }} - {{ title_suffix }} - {% block content %} {{ content }} {% endblock %} -
diff --git a/templates/content/page-title.html.twig b/templates/content/page-title.html.twig index 02f926c..a66be1b 100644 --- a/templates/content/page-title.html.twig +++ b/templates/content/page-title.html.twig @@ -14,8 +14,6 @@ #} {% set title = drupal_title() %} -{{ title_prefix }} {% if title %} -

{{ title }}

+

{{ title }}

{% endif %} -{{ title_suffix }} diff --git a/templates/field/field--entity-reference-revisions.html.twig b/templates/field/field--entity-reference-revisions.html.twig index 7033b72..53c3316 100644 --- a/templates/field/field--entity-reference-revisions.html.twig +++ b/templates/field/field--entity-reference-revisions.html.twig @@ -1,59 +1,16 @@ {# /** * @file - * Theme override for a field. - * - * To override output, copy the "field.html.twig" from the templates directory - * to your theme's directory and customize it, just like customizing other - * Drupal templates such as page.html.twig or node.html.twig. - * - * Instead of overriding the theming for all fields, you can also just override - * theming for a subset of fields using - * @link themeable Theme hook suggestions. @endlink For example, - * here are some theme hook suggestions that can be used for a field_foo field - * on an article node type: - * - field--node--field-foo--article.html.twig - * - field--node--field-foo.html.twig - * - field--node--article.html.twig - * - field--field-foo.html.twig - * - field--text-with-summary.html.twig - * - field.html.twig - * - * Available variables: - * - attributes: HTML attributes for the containing element. - * - label_hidden: Whether to show the field label or not. - * - title_attributes: HTML attributes for the title. - * - label: The label for the field. - * - multiple: TRUE if a field can contain multiple items. - * - items: List of all the field items. Each item contains: - * - attributes: List of HTML attributes for each item. - * - content: The field item's content. - * - entity_type: The entity type to which the field belongs. - * - field_name: The name of the field. - * - field_type: The type of the field. - * - label_display: The display settings for the label. - * - * - * @see template_preprocess_field() + * Theme override for a field: entity reference revisions. */ #} -{% set classes = [ - 'field', - 'field--name-' ~ field_name|clean_class, - 'field--type-' ~ field_type|clean_class, - 'field--label-' ~ label_display, -] %} +{% extends 'field.html.twig' %} -{% set title_classes = [ - 'field__label', - label_display == 'visually_hidden' ? 'usa-sr-only', -] %} - - +{% block content %} {% if not label_hidden %} {{ label }}
{% endif %} {% for item in items %} {{ item.content }} {% endfor %} - +{% endblock %} diff --git a/templates/field/field--text-long.html.twig b/templates/field/field--text-long.html.twig new file mode 100644 index 0000000..07ce721 --- /dev/null +++ b/templates/field/field--text-long.html.twig @@ -0,0 +1 @@ +{% extends "field--text.html.twig" %} diff --git a/templates/field/field--text-with-summary.html.twig b/templates/field/field--text-with-summary.html.twig new file mode 100644 index 0000000..07ce721 --- /dev/null +++ b/templates/field/field--text-with-summary.html.twig @@ -0,0 +1 @@ +{% extends "field--text.html.twig" %} diff --git a/templates/field/field--text.html.twig b/templates/field/field--text.html.twig new file mode 100644 index 0000000..e4027b0 --- /dev/null +++ b/templates/field/field--text.html.twig @@ -0,0 +1,28 @@ +{% extends "field.html.twig" %} +{# +/** + * @file + * Default theme implementation for a text field. + * + * A 'clearfix' class is added, because 'text' fields have a 'format' property + * that allows a Text Format to be associated with the entered text, which then + * applies filtering on output. A common use case is to align images to the left + * or right, and without this 'clearfix' class, such aligned images may be + * rendered outside of the 'text' field formatter's boundaries, and hence + * overlap with other fields. By setting the 'clearfix' class on all 'text' + * fields, we prevent that. + * + * @see https://www.drupal.org/node/2358529 + * + * A 'text-formatted' class is added to assist with default styling of base + * elements such as paragraphs and lists that may not have classes assigned to + * them. This allows user entered content to have default styling without + * interfering with the styles of other UI components such as system generated + * lists or other dynamic content. + * + * @see https://www.drupal.org/node/2539860 + * + * @ingroup themeable + */ +#} +{% set attributes = attributes.addClass('clearfix', class_prefix ~ 'text--formatted') %} diff --git a/templates/field/field.html.twig b/templates/field/field.html.twig index 8348d50..fc0bcee 100644 --- a/templates/field/field.html.twig +++ b/templates/field/field.html.twig @@ -38,22 +38,24 @@ */ #} {% set classes = [ - 'field', - 'field--name-' ~ field_name|clean_class, - 'field--type-' ~ field_type|clean_class, - 'field--label-' ~ label_display, + class_prefix ~ 'field', + class_prefix ~ 'field--' ~ field_name|clean_class, + class_prefix ~ 'field--' ~ field_type|clean_class, + class_prefix ~ 'field--label-' ~ label_display|clean_class ] %} {% set title_classes = [ - 'field__label', + class_prefix ~ 'field__label', label_display == 'visually_hidden' ? 'usa-sr-only', ] %} - {% if not label_hidden %} - {{ label }} - {% endif %} - {% for item in items %} - {{ item.content }} - {% endfor %} + {% block content %} + {% if not label_hidden %} + {{ label }} + {% endif %} + {% for item in items %} + {{ item.content }} + {% endfor %} + {% endblock %} diff --git a/templates/field/file-audio.html.twig b/templates/field/file-audio.html.twig new file mode 100644 index 0000000..ba5eda5 --- /dev/null +++ b/templates/field/file-audio.html.twig @@ -0,0 +1,22 @@ +{# +/** +* @file +* Default theme implementation to display the file entity as an audio tag. +* +* Available variables: +* - attributes: An array of HTML attributes, intended to be added to the +* audio tag. +* - files: And array of files to be added as sources for the audio tag. Each +* element is an array with the following elements: +* - file: The full file object. +* - source_attributes: An array of HTML attributes for to be added to the +* source tag. +* +* @ingroup themeable +*/ +#} + diff --git a/templates/field/file-link.html.twig b/templates/field/file-link.html.twig new file mode 100644 index 0000000..bdfeb13 --- /dev/null +++ b/templates/field/file-link.html.twig @@ -0,0 +1,15 @@ +{# +/** + * @file + * Theme override for a link to a file. + * + * Available variables: + * - attributes: The HTML attributes for the containing element. + * - link: A link to the file. + * - icon: The icon image representing the file type. + * - file_size: The size of the file. + * + * @see template_preprocess_file_link() + */ +#} +{{ icon }} {{ link }} diff --git a/templates/field/file-video.html.twig b/templates/field/file-video.html.twig new file mode 100644 index 0000000..5d6f4cc --- /dev/null +++ b/templates/field/file-video.html.twig @@ -0,0 +1,22 @@ +{# +/** +* @file +* Default theme implementation to display the file entity as a video tag. +* +* Available variables: +* - attributes: An array of HTML attributes, intended to be added to the +* video tag. +* - files: And array of files to be added as sources for the video tag. Each +* element is an array with the following elements: +* - file: The full file object. +* - source_attributes: An array of HTML attributes for to be added to the +* source tag. +* +* @ingroup themeable +*/ +#} + diff --git a/templates/field/image-formatter.html.twig b/templates/field/image-formatter.html.twig new file mode 100644 index 0000000..512d758 --- /dev/null +++ b/templates/field/image-formatter.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Theme override to display a formatted image field. + * + * Available variables: + * - image: A collection of image data. + * - image_style: An optional image style. + * - url: An optional URL the image can be linked to. + * + * @see template_preprocess_image_formatter() + */ +#} +{% if url %} + {{ link(image, url) }} +{% else %} + {{ image }} +{% endif %} diff --git a/templates/field/image-style.html.twig b/templates/field/image-style.html.twig new file mode 100644 index 0000000..039089a --- /dev/null +++ b/templates/field/image-style.html.twig @@ -0,0 +1,18 @@ +{# +/** + * @file + * Theme override for an image using a specific image style. + * + * Available variables: + * - attributes: HTML attributes for the image, including the following: + * - src: Full URL or relative path to the image file. + * - class: One or more classes to be applied to the image. + * - width: The width of the image (if known). + * - height: The height of the image (if known). + * - title: The title of the image. + * - alt: The alternative text for the image. + * + * @see template_preprocess_image_style() + */ +#} +{{ image }} diff --git a/templates/field/image.html.twig b/templates/field/image.html.twig new file mode 100644 index 0000000..c4bce52 --- /dev/null +++ b/templates/field/image.html.twig @@ -0,0 +1,19 @@ +{# +/** + * @file + * Theme override of an image. + * + * Available variables: + * - attributes: HTML attributes for the img tag. + * - style_name: (optional) The name of the image style applied. + * + * @see template_preprocess_image() + */ +#} +{% +set classes = [ + class_prefix ~ 'image', + style_name ? class_prefix ~ style_name|clean_class, +] +%} + diff --git a/templates/field/link-formatter-link-separate.html.twig b/templates/field/link-formatter-link-separate.html.twig new file mode 100644 index 0000000..80e25d9 --- /dev/null +++ b/templates/field/link-formatter-link-separate.html.twig @@ -0,0 +1,22 @@ +{# +/** + * @file + * Theme override of a link with separate title and URL elements. + * + * Available variables: + * - link: The link that has already been formatted by l(). + * - title: (optional) A descriptive or alternate title for the link, which may + * be different than the actual link text. + * + * @see template_preprocess() + * @see template_preprocess_link_formatter_link_separate() + */ +#} +{% apply spaceless %} +
+ {% if title %} +
{{ title }}
+ {% endif %} +
{{ link }}
+
+{% endapply %} diff --git a/templates/field/time.html.twig b/templates/field/time.html.twig new file mode 100644 index 0000000..a4dd433 --- /dev/null +++ b/templates/field/time.html.twig @@ -0,0 +1,22 @@ +{# +/** + * @file + * Theme override for a date / time element. + * + * Available variables + * - timestamp: (optional) A UNIX timestamp for the datetime attribute. If the + * datetime cannot be represented as a UNIX timestamp, use a valid datetime + * attribute value in attributes.datetime. + * - text: (optional) The content to display within the