diff --git a/.editorconfig b/.editorconfig index 9bf4a1c81f..1066149bf8 100755 --- a/.editorconfig +++ b/.editorconfig @@ -7,6 +7,3 @@ end_of_line = lf insert_final_newline = true trim_trailing_whitespace = true charset = utf-8 - -[composer.{json,lock}] -indent_size = 4 diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index fdd475049e..52879978ed 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -5,11 +5,11 @@ Closes Issue #X ## Issue Description diff --git a/.gitignore b/.gitignore index d61bfe6934..d6072ccafb 100755 --- a/.gitignore +++ b/.gitignore @@ -1,7 +1,6 @@ -# Compiled files -dist/ -dependencyGraph.json -patterns.zip +# Dependencies +node_modules +vendor # OS generated files *.swp @@ -10,17 +9,18 @@ patterns.zip ._.DS_Store ._.DS_Store? -# Dependencies -node_modules -vendor - # Generated files .eslintcache *unison.* -#IDE plugins +# IDE plugins .idea # Errors npm-debug.log php_errors.log + +# Particle +dist/ +dependencyGraph.json +patterns.zip diff --git a/.nvmrc b/.nvmrc index f599e28b8a..48082f72f0 100644 --- a/.nvmrc +++ b/.nvmrc @@ -1 +1 @@ -10 +12 diff --git a/.prettierignore b/.prettierignore index 93fbbc2184..2f8ef498ab 100644 --- a/.prettierignore +++ b/.prettierignore @@ -1,11 +1,17 @@ -# Ignore any path/file using .gitignore syntax, ie: +# Ignore any path/file using .gitignore syntax -node_modules/ -vendor/ +# Dependencies +node_modules +vendor +# Particle dist/ -pattern-lab/ +dependencyGraph.json tools/new-component/templates/ - -package.json package-lock.json +*.inc +# Ignore head|foot.twig due to closing and tags with no openers +_00-head.twig +_01-foot.twig +# Ignore _button.twig while prettier-twig fails to recognize dynamic elements +_button.twig diff --git a/.prettierrc.js b/.prettierrc.js index a425d3f761..002c7d762d 100644 --- a/.prettierrc.js +++ b/.prettierrc.js @@ -1,4 +1,8 @@ module.exports = { + plugins: ['./node_modules/prettier-plugin-twig-melody'], + proseWrap: 'always', singleQuote: true, - trailingComma: 'es5', + twigAlwaysBreakObjects: true, + twigOutputEndblockName: true, + twigPrintWidth: 120, }; diff --git a/apps/drupal-default/particle_helper/particle_helper.info.yml b/apps/drupal-default/particle_helper/particle_helper.info.yml index 7f554c0467..8e26d2aa43 100644 --- a/apps/drupal-default/particle_helper/particle_helper.info.yml +++ b/apps/drupal-default/particle_helper/particle_helper.info.yml @@ -1,5 +1,7 @@ name: 'Particle Helper' type: module -description: 'Particle Components and Particle Tools. Theme utilities to integrate Drupal with Particle themes.' +description: + 'Particle Components and Particle Tools. Theme utilities to integrate Drupal + with Particle themes.' core: 8.x package: 'Particle' diff --git a/apps/drupal-default/particle_helper/particle_helper.services.yml b/apps/drupal-default/particle_helper/particle_helper.services.yml index 37f3c62a21..860b323d97 100644 --- a/apps/drupal-default/particle_helper/particle_helper.services.yml +++ b/apps/drupal-default/particle_helper/particle_helper.services.yml @@ -1,6 +1,6 @@ services: particle_helper.twig_extension: - arguments: ["@renderer"] + arguments: ['@renderer'] class: Drupal\particle_helper\TwigExtension\ParticleHelperTwig tags: - { name: twig.extension } diff --git a/apps/drupal-default/particle_helper/src/Plugin/Layout/ParticleLayout.php b/apps/drupal-default/particle_helper/src/Plugin/Layout/ParticleLayout.php new file mode 100644 index 0000000000..7e0645a649 --- /dev/null +++ b/apps/drupal-default/particle_helper/src/Plugin/Layout/ParticleLayout.php @@ -0,0 +1,62 @@ + '', + ]; + } + + /** + * {@inheritdoc} + */ + public function buildConfigurationForm(array $form, FormStateInterface $form_state) { + $form = parent::buildConfigurationForm($form, $form_state); + $configuration = $this->getConfiguration(); + + $spacings = Particle::SPACING; + $spacer_bottom_options = []; + foreach ($spacings as $key => $value) { + $spacer_bottom_options['mb-' . $key] = $value; + } + $spacer_bottom_options = array_merge(['_none' => $this->t('-None-')], $spacer_bottom_options); + + $form['spacer_bottom'] = [ + '#type' => 'select', + '#options' => $spacer_bottom_options, + '#title' => $this->t('Additional Bottom Spacing'), + '#description' => $this->t('Select a value for additional bottom spacing. These are based on design spacers.'), + '#default_value' => $configuration['spacer_bottom'], + ]; + + return $form; + } + + /** + * {@inheritdoc} + */ + public function submitConfigurationForm(array &$form, FormStateInterface $form_state) { + parent::submitConfigurationForm($form, $form_state); + $this->configuration['spacer_bottom'] = ($form_state->getValue('spacer_bottom') != '_none') ? $form_state->getValue('spacer_bottom') : ''; + } + +} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_breadcrumbs.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_breadcrumbs.yml index 3a3d851fce..e507d30fa7 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_breadcrumbs.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_breadcrumbs.yml @@ -16,4 +16,4 @@ settings: label: Breadcrumbs provider: system label_display: '0' -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_content.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_content.yml index 5ed6bf4d3f..d9094340c0 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_content.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_content.yml @@ -16,4 +16,4 @@ settings: label: 'Main page content' provider: system label_display: '0' -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_footer.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_footer.yml index f4faab9d48..0c7f437e19 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_footer.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_footer.yml @@ -20,4 +20,4 @@ settings: label_display: '0' level: 1 depth: 0 -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_help.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_help.yml index cbd5ecb9a3..eb736b334f 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_help.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_help.yml @@ -16,4 +16,4 @@ settings: label: Help provider: help label_display: '0' -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_local_actions.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_local_actions.yml index 20870da0b6..6d93c8115a 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_local_actions.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_local_actions.yml @@ -14,4 +14,4 @@ settings: label: 'Primary admin actions' provider: core label_display: '0' -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_local_tasks.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_local_tasks.yml index 1798237838..cb38e059e8 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_local_tasks.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_local_tasks.yml @@ -16,4 +16,4 @@ settings: label_display: '0' primary: true secondary: true -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_mainnavigation.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_mainnavigation.yml index 3c781f5edc..3d7073b695 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_mainnavigation.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_mainnavigation.yml @@ -20,4 +20,4 @@ settings: label_display: '0' level: 1 depth: 2 -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_messages.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_messages.yml index 5e932b37dd..1329a3861c 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_messages.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_messages.yml @@ -16,4 +16,4 @@ settings: label: 'Status messages' provider: system label_display: '0' -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_page_title.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_page_title.yml index a9c6c9ce05..f6e5dd9b0e 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_page_title.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_page_title.yml @@ -14,4 +14,4 @@ settings: label: 'Page title' provider: core label_display: '0' -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_powered.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_powered.yml index 90b796275b..e703bba2a4 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_powered.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_powered.yml @@ -16,4 +16,4 @@ settings: label: 'Powered by Drupal' provider: system label_display: '0' -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_searchform.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_searchform.yml index fb752f09eb..599280d84e 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_searchform.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_searchform.yml @@ -16,4 +16,4 @@ settings: label: 'Search form' provider: search label_display: '0' -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_sitebranding.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_sitebranding.yml index 273fe71ab8..e1fd0644cf 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_sitebranding.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_sitebranding.yml @@ -19,4 +19,4 @@ settings: use_site_logo: true use_site_name: true use_site_slogan: true -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_useraccountmenu.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_useraccountmenu.yml index 3d6b2fc1fa..23f229d1a7 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_useraccountmenu.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_useraccountmenu.yml @@ -20,4 +20,4 @@ settings: label_display: '0' level: 1 depth: 2 -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/config/optional/block.block.particle_views_search.yml b/apps/drupal-default/particle_theme/config/optional/block.block.particle_views_search.yml index 6a2ed62b6a..84e46f9a50 100644 --- a/apps/drupal-default/particle_theme/config/optional/block.block.particle_views_search.yml +++ b/apps/drupal-default/particle_theme/config/optional/block.block.particle_views_search.yml @@ -20,4 +20,4 @@ settings: provider: views label_display: '0' views_label: visible -visibility: { } +visibility: {} diff --git a/apps/drupal-default/particle_theme/includes/admin.theme.inc b/apps/drupal-default/particle_theme/includes/admin.theme.inc index 332d6cbfd5..a062390713 100644 --- a/apps/drupal-default/particle_theme/includes/admin.theme.inc +++ b/apps/drupal-default/particle_theme/includes/admin.theme.inc @@ -1,6 +1,6 @@ '0px', + 'sm' => '640px', + 'md' => '768px', + 'lg' => '1024px', + 'xl' => '1280px', + ]; + + /** + * Provides spacing based on Tailwind Config. + */ + const SPACING = [ + 'px' => '1px', + '0' => '0', + '1' => '0.25rem', + '2' => '0.5rem', + '3' => '0.75rem', + '4' => '1rem', + '5' => '1.25rem', + '6' => '1.5rem', + '8' => '2rem', + '10' => '2.5rem', + '12' => '3rem', + '16' => '4rem', + '20' => '5rem', + '24' => '6rem', + '32' => '8rem', + '40' => '10rem', + '48' => '12rem', + '56' => '14rem', + '64' => '16rem', + ]; + } diff --git a/apps/drupal-default/particle_theme/templates/block/block--system-branding-block.html.twig b/apps/drupal-default/particle_theme/templates/block/block--system-branding-block.html.twig index 534165a436..30a7516185 100644 --- a/apps/drupal-default/particle_theme/templates/block/block--system-branding-block.html.twig +++ b/apps/drupal-default/particle_theme/templates/block/block--system-branding-block.html.twig @@ -1,4 +1,4 @@ -{% extends "block.html.twig" %} +{% extends 'block.html.twig' %} {# /** * @file @@ -23,5 +23,5 @@ logo_svg_inline: logo_svg_inline, logo_img_src: logo_img_src } %} - {% include "@atoms/branding/_branding.twig" with logo %} -{% endblock %} + {% include '@atoms/branding/_branding.twig' with logo %} +{% endblock content %} diff --git a/apps/drupal-default/particle_theme/templates/field/image--article.html.twig b/apps/drupal-default/particle_theme/templates/field/image--article.html.twig index 84f3015349..1e1d56e1b9 100644 --- a/apps/drupal-default/particle_theme/templates/field/image--article.html.twig +++ b/apps/drupal-default/particle_theme/templates/field/image--article.html.twig @@ -12,10 +12,6 @@ */ #} -{% set image_classes = [ - 'm-3', - 'img', - style_name|clean_class, -] | join(' ') | trim %} +{% set image_classes = ['m-3', 'img', style_name|clean_class]|join(' ')|trim %} - + diff --git a/apps/drupal-default/particle_theme/templates/form/container.html.twig b/apps/drupal-default/particle_theme/templates/form/container.html.twig index dd473d3663..36e36a83c9 100644 --- a/apps/drupal-default/particle_theme/templates/form/container.html.twig +++ b/apps/drupal-default/particle_theme/templates/form/container.html.twig @@ -20,10 +20,7 @@ */ #} {# Update the classes for grouped form items. This adds form-group to our button group for Search. #} -{% - set classes = [ - 'form-group', - 'mx-3', - ] -%} -{{ children }} +{% set classes = ['form-group', 'mx-3'] %} +
+ {{ children }} +
diff --git a/apps/drupal-default/particle_theme/templates/form/details.html.twig b/apps/drupal-default/particle_theme/templates/form/details.html.twig new file mode 100644 index 0000000000..12cfd1e06b --- /dev/null +++ b/apps/drupal-default/particle_theme/templates/form/details.html.twig @@ -0,0 +1,35 @@ +{# +/** + * @file + * Theme override for a details element. + * + * Available variables + * - attributes: A list of HTML attributes for the details element. + * - errors: (optional) Any errors for this details element, may not be set. + * - title: (optional) The title of the element, may not be set. + * - summary_attributes: A list of HTML attributes for the summary element. + * - description: (optional) The description of the element, may not be set. + * - children: (optional) The children of the element, may not be set. + * - value: (optional) The value of the element, may not be set. + * + * @see template_preprocess_details() + */ +#} +
+ {% set summary_classes = ['summary', required ? 'js-form-required', required ? 'form-required'] %} + {%- if title -%} + + {{ title }} + + {%- endif -%} + + {% if errors %} +
+ {{ errors }} +
+ {% endif %} + + {{ description }} + {{ children }} + {{ value }} +
diff --git a/apps/drupal-default/particle_theme/templates/form/form--particle-search.html.twig b/apps/drupal-default/particle_theme/templates/form/form--particle-search.html.twig index 77392900a4..9085d90128 100644 --- a/apps/drupal-default/particle_theme/templates/form/form--particle-search.html.twig +++ b/apps/drupal-default/particle_theme/templates/form/form--particle-search.html.twig @@ -11,10 +11,8 @@ */ #} -{% set classes = [ - 'form-inline', -] %} +{% set classes = ['form-inline'] %} - +
{{ children }}
diff --git a/apps/drupal-default/particle_theme/templates/form/input.html.twig b/apps/drupal-default/particle_theme/templates/form/input.html.twig new file mode 100644 index 0000000000..2316a2fa4e --- /dev/null +++ b/apps/drupal-default/particle_theme/templates/form/input.html.twig @@ -0,0 +1,20 @@ +{# +/** + * @file + * Theme override for an 'input' #type form element. + * + * Available variables: + * - attributes: A list of HTML attributes for the input element. + * - children: Optional additional rendered elements. + * + * @see template_preprocess_input() + */ +#} + +{% include '@atoms/form-element/_input.twig' with { + input: { + attributes: attributes + } +} %} + +{{ children }} diff --git a/apps/drupal-default/particle_theme/templates/form/select.html.twig b/apps/drupal-default/particle_theme/templates/form/select.html.twig new file mode 100644 index 0000000000..47cb112f17 --- /dev/null +++ b/apps/drupal-default/particle_theme/templates/form/select.html.twig @@ -0,0 +1,19 @@ +{# +/** + * @file + * Theme override for a select element. + * + * Available variables: + * - attributes: HTML attributes for the - {% if show_label %}{% endif %} - + +{% macro textarea(label, placeholder, rows, classes, required) %} +
+ {% set required_title %} + {% if required %} + * + {% endif %} + {% endset %} + + + + +
{% endmacro %} diff --git a/source/default/_patterns/00-protons/tailwind.tokens.css b/source/default/_patterns/00-protons/tailwind.tokens.css index dbe2eb9579..ae6e3f2679 100644 --- a/source/default/_patterns/00-protons/tailwind.tokens.css +++ b/source/default/_patterns/00-protons/tailwind.tokens.css @@ -1,19 +1,47 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +/** + * @file + * Root CSS file to add Tailwind Configuration. + * + * This file adds Tailwind to the project via the @tailwind directive. + * Custom rules and overrides for each section are applied between. + */ + +/** + * Font Imports + * + * Serif - Google Fonts - Oswald + * Sans-Serif - Google Fonts - Open Sans + * Monospace - Google Fonts - Source Code Pro + * +*/ +@import url('https://fonts.googleapis.com/css?family=OpenSans|Oswald|SourceCodePro&display=swap'); -/* -Example: Google Remote Fonts -Serif - Google Fonts - Oswald -Sans-Serif - Google Fonts - Open Sans -Monospace - Google Fonts - Source Code Pro +/** + * Tailwind Base + * + * This injects Tailwind's base styles and any base styles registered by + * plugins. */ +@tailwind base; -@import url(https://fonts.googleapis.com/css?family=OpenSans|Oswald|SourceCodePro&display=swap); +/** + * Custom Base + * + * Add extra base styles. + */ body { - @apply font-sans; + @apply text-base font-sans; +} + +code { + @apply font-mono text-pink-500; +} + +hr { + @apply border-gray-600; } + h1, h2, h3, @@ -22,24 +50,143 @@ h5, h6 { @apply font-serif; } + h1 { - @apply text-3xl; + @apply text-4xl; } + h2 { - @apply text-2xl; + @apply text-3xl; } + h3 { - @apply text-xl; + @apply text-2xl; } + h4 { + @apply text-xl; +} + +h5 { @apply text-lg; } + +h6 { + @apply text-base; +} + a { @apply text-blue-500; } -code { - @apply text-pink-500; -} + tr { @apply text-left; } + +/** + * Tailwind Components + * + * This injects Tailwind's component classes and any component classes + * registered by plugins. + */ +@tailwind components; + +/** + * Tailwind Utilities + * + * This injects Tailwind's utility classes and any utility classes registered + * by plugins. + */ +@tailwind utilities; + +/** + * Custom Utilities + * + * Add extra token level utility classes to the design. + */ + +/** + * Text Styles + */ + +/* Provide Body Reset Utility Class */ +.body { + @apply text-base font-sans; +} + +/* Headings 1 - 6 Default */ +.heading-1 { + @apply text-4xl font-sans; +} + +.heading-2 { + @apply text-3xl font-sans; +} + +.heading-3 { + @apply text-2xl font-sans; +} + +.heading-4 { + @apply text-xl font-sans; +} + +.heading-5 { + @apply text-lg font-sans; +} + +.heading-6 { + @apply text-base font-sans; +} + +.small { + @apply text-sm font-sans; +} + +/* Text Style Media Queries */ +@screen lg { + .heading-1 { + @apply text-5xl; + } + .heading-2 { + @apply text-4xl; + } + .heading-3 { + @apply text-3xl; + } + .heading-4 { + @apply text-2xl; + } + .heading-5 { + @apply text-xl; + } + .heading-6 { + @apply text-lg; + } +} + +/** + * Misc Utils + */ + +/* Width Breakout for Full-Width Inside .container */ +.w-breakout { + width: 100vw; + max-width: 100vw; + position: relative; + left: 50%; + right: 50%; + margin-left: -50vw; + margin-right: -50vw; +} + +/* Consistent Block Spacing for All Components */ +.component-wrapper { + @apply w-full pb-12; +} + +@screen md { + .component-wrapper { + @apply pb-16; + } +} diff --git a/source/default/_patterns/01-atoms/alert/_alert.twig b/source/default/_patterns/01-atoms/alert/_alert.twig index 5aabe47d91..f08e55a741 100644 --- a/source/default/_patterns/01-atoms/alert/_alert.twig +++ b/source/default/_patterns/01-atoms/alert/_alert.twig @@ -37,7 +37,6 @@ 'relative', alert_other_classes ] - |sort |join(' ') |trim %} @@ -51,12 +50,12 @@ {% endif %} - {% endblock %} + {% endblock alert_header %} {% block alert_content %}

{{ alert_primary }}

- {% endblock %} + {% endblock alert_content %} {% block alert_footer %} {% if alert_secondary %}
@@ -64,5 +63,5 @@ {{ alert_secondary }}

{% endif %} - {% endblock %} + {% endblock alert_footer %} diff --git a/source/default/_patterns/01-atoms/branding/_branding.twig b/source/default/_patterns/01-atoms/branding/_branding.twig index 307d82711e..ebf2f972cf 100644 --- a/source/default/_patterns/01-atoms/branding/_branding.twig +++ b/source/default/_patterns/01-atoms/branding/_branding.twig @@ -36,9 +36,7 @@ {% if site_name %}

- - {{ site_name }} - + {{ site_name }}

{% endif %} {% if site_slogan %} @@ -46,5 +44,4 @@ {{ site_slogan }}

{% endif %} - diff --git a/source/default/_patterns/01-atoms/breadcrumb/_breadcrumb.twig b/source/default/_patterns/01-atoms/breadcrumb/_breadcrumb.twig index e8f48d1175..2eb3273d3f 100644 --- a/source/default/_patterns/01-atoms/breadcrumb/_breadcrumb.twig +++ b/source/default/_patterns/01-atoms/breadcrumb/_breadcrumb.twig @@ -14,14 +14,9 @@
    {% for item in breadcrumb %} {% if loop.last %} -
  1. - {{ item.text }} -
    2. +
  2. {{ item.text }}
    3. {% else %} -
  3. - {{ item.text }} -
    4. +
  4. {{ item.text }}
    5. {% endif %} {% endfor %}
diff --git a/source/default/_patterns/01-atoms/button/_button.twig b/source/default/_patterns/01-atoms/button/_button.twig index 452cadafe4..a8ae571eb1 100644 --- a/source/default/_patterns/01-atoms/button/_button.twig +++ b/source/default/_patterns/01-atoms/button/_button.twig @@ -14,23 +14,33 @@ */ #} -{% set button_element = button.element | default('button') %} +{% set button_element = button.element|default('button') %} -{% set button_attributes = button_attributes|default({})|merge({ - type: (button_element != 'a') ? 'button' : 'link', -}) %} +{% set button_attributes = + button_attributes + |default({}) + |merge({ + type: button_element != 'a' ? 'button' : 'link' + }) +%} -{% set button_classes = button_classes|default([])|merge([ - 'py-2', - 'px-4', - 'text-white', - 'font-bold', - 'rounded', - button.color ? button.color : 'bg-blue-500', - button.hoverColor ? 'hover:' ~ button.hoverColor : 'hover:bg-blue-700', -]) | sort | join(' ') | trim %} +{% set button_classes = + [ + 'py-2', + 'px-4', + 'text-white', + 'font-bold', + 'rounded', + button.color ? button.color : 'bg-blue-500', + button.hoverColor ? 'hover:' ~ button.hoverColor : 'hover:bg-blue-700' + ] + |merge(button_classes|default([])) + |join(' ') + |trim +%} -<{{button_element}} {{ button_attributes | attributify }} class="{{ button_classes }}"> - {{ button.text }} - {% block right %}{% endblock right %} +<{{button_element}} {{ button_attributes|attributify }} class="{{ button_classes }}"> + {{ button.text }} + {% block right %} + {% endblock right %} diff --git a/source/default/_patterns/01-atoms/form-element/__tests__/form-element.test.js b/source/default/_patterns/01-atoms/form-element/__tests__/form-element.test.js new file mode 100644 index 0000000000..458584b417 --- /dev/null +++ b/source/default/_patterns/01-atoms/form-element/__tests__/form-element.test.js @@ -0,0 +1,5 @@ +import { name } from '..'; + +test('form-element component is registered', () => { + expect(name).toBe('form-element'); +}); diff --git a/source/default/_patterns/01-atoms/form-element/_input.twig b/source/default/_patterns/01-atoms/form-element/_input.twig new file mode 100644 index 0000000000..4842c4f2bf --- /dev/null +++ b/source/default/_patterns/01-atoms/form-element/_input.twig @@ -0,0 +1,60 @@ +{# +/** + * @file + * input + * + * Available variables for input: + * - input.attributes [array]: Any set of valid HTML Attributes. + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input + */ +#} + +{# Default Input settings, overridden by incoming Input object #} +{% set input = + { + attributes: { + type: 'text' + } + }|merge(input|default({})) +%} + +{# Set the Variant for CSS Class by Attribute Value of Type #} +{% set input_variant = input.attributes.type ? input.attributes.type : 'text' %} + +{# Non-Input Form Types #} +{% set form_type_classes = { + input: 'form-input', + checkbox: 'form-checkbox', + color: 'form-color', + radio: 'form-radio', + range: 'form-range' +} %} + +{# Update Classes with Design System Values #} +{% set input_classes = + input_classes + |default([]) + |merge( + [ + 'input', + 'input--' ~ input_variant, + input_variant in (form_type_classes|keys) ? form_type_classes[input_variant] : form_type_classes.input, + input.attributes.class ? input.attributes.class|join(' ')|trim : '' + ] + ) + |join(' ') + |trim +%} + +{# Update Attributes with New Classes + Supplemental Data #} +{% set input_attributes = + input.attributes + |default({}) + |merge({ + class: input_classes + }) +%} + +{% block input_content %} + +{% endblock input_content %} diff --git a/source/default/_patterns/01-atoms/form-element/_select.twig b/source/default/_patterns/01-atoms/form-element/_select.twig new file mode 100644 index 0000000000..9482a0e7a0 --- /dev/null +++ b/source/default/_patterns/01-atoms/form-element/_select.twig @@ -0,0 +1,61 @@ +{# +/** + * @file + * select + * + * Available variables for select: + * - select.options [array]: Collection of items to display. + * - select.attributes [array]: Any set of valid HTML Attributes. + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select + */ +#} + +{# Update Classes with Design System Values #} +{% set select_classes = + select_classes + |default([]) + |merge( + [ + 'select', + select.attributes.multiple ? 'form-multiselect' : 'form-select', + select.attributes.class ? select.attributes.class|join(' ')|trim + ] + ) + |join(' ') + |trim +%} + +{# Update Attributes with New Classes + Supplemental Data #} +{% set select_attributes = + select.attributes + |default({}) + |merge({ + class: select_classes + }) +%} + +{% spaceless %} + +{% endspaceless %} diff --git a/source/default/_patterns/01-atoms/form-element/_textarea.twig b/source/default/_patterns/01-atoms/form-element/_textarea.twig new file mode 100644 index 0000000000..fba9c61e7e --- /dev/null +++ b/source/default/_patterns/01-atoms/form-element/_textarea.twig @@ -0,0 +1,35 @@ +{# +/** + * @file + * textarea + * + * Available variables for textarea: + * - textarea.variant [string]: The type of textarea (defaults to attribute of type). + * - textarea.attributes [array]: Any set of valid HTML Attributes. + * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea + */ +#} + +{# Update Classes with Design System Values #} +{% set textarea_classes = + textarea_classes + |default([]) + |merge(['textarea', 'form-textarea', textarea.attributes.class ? textarea.attributes.class|join(' ')|trim]) + |join(' ') + |trim +%} + +{# Update Attributes with New Classes + Supplemental Data #} +{% set textarea_attributes = + textarea.attributes + |default({}) + |merge({ + class: textarea_classes + }) +%} + + diff --git a/source/default/_patterns/01-atoms/form-element/index.js b/source/default/_patterns/01-atoms/form-element/index.js new file mode 100644 index 0000000000..84af8f6a3f --- /dev/null +++ b/source/default/_patterns/01-atoms/form-element/index.js @@ -0,0 +1,23 @@ +/** + * form-element + */ + +// eslint-disable-next-line +import $ from 'jquery'; + +// Module dependencies +import 'protons'; + +// Module template +import './_input.twig'; +import './_select.twig'; +import './_textarea.twig'; + +export const name = 'form-element'; + +export function disable() {} + +// eslint-disable-next-line +export function enable($context) {} + +export default enable; diff --git a/source/default/_patterns/01-atoms/grid/_grid--1-up.twig b/source/default/_patterns/01-atoms/grid/_grid--1-up.twig index 585acdbab1..104681bc46 100644 --- a/source/default/_patterns/01-atoms/grid/_grid--1-up.twig +++ b/source/default/_patterns/01-atoms/grid/_grid--1-up.twig @@ -11,14 +11,14 @@ {% extends '@atoms/grid/_grid.twig' %} -{% set grid_classes = grid_classes|default([])|merge([ - 'grid--1-up', -]) %} +{% set grid_classes = grid_classes|default([])|merge(['grid--1-up']) %} {% block grid_content %}
{% block column_1 %} -

Content

+

+ Content +

{% endblock column_1 %}
{% endblock grid_content %} diff --git a/source/default/_patterns/01-atoms/grid/_grid--2-up.twig b/source/default/_patterns/01-atoms/grid/_grid--2-up.twig index 723ba8a2d1..8ba2116393 100644 --- a/source/default/_patterns/01-atoms/grid/_grid--2-up.twig +++ b/source/default/_patterns/01-atoms/grid/_grid--2-up.twig @@ -11,9 +11,7 @@ {% extends '@atoms/grid/_grid.twig' %} -{% set grid_classes = grid_classes|default([])|merge([ - 'grid--2-up', -]) %} +{% set grid_classes = grid_classes|default([])|merge(['grid--2-up']) %} {% block grid_content %}
diff --git a/source/default/_patterns/01-atoms/grid/_grid--3-up.twig b/source/default/_patterns/01-atoms/grid/_grid--3-up.twig index fcb2717f77..e901cd3a9d 100644 --- a/source/default/_patterns/01-atoms/grid/_grid--3-up.twig +++ b/source/default/_patterns/01-atoms/grid/_grid--3-up.twig @@ -11,9 +11,7 @@ {% extends '@atoms/grid/_grid.twig' %} -{% set grid_classes = grid_classes|default([])|merge([ - 'grid--3-up', -]) %} +{% set grid_classes = grid_classes|default([])|merge(['grid--3-up']) %} {% block grid_content %}
diff --git a/source/default/_patterns/01-atoms/grid/_grid--4-up.twig b/source/default/_patterns/01-atoms/grid/_grid--4-up.twig index 2ac1acf86a..91a80e08de 100644 --- a/source/default/_patterns/01-atoms/grid/_grid--4-up.twig +++ b/source/default/_patterns/01-atoms/grid/_grid--4-up.twig @@ -11,9 +11,7 @@ {% extends '@atoms/grid/_grid.twig' %} -{% set grid_classes = grid_classes|default([])|merge([ - 'grid--4-up', -]) %} +{% set grid_classes = grid_classes|default([])|merge(['grid--4-up']) %} {% block grid_content %}
diff --git a/source/default/_patterns/01-atoms/grid/_grid.twig b/source/default/_patterns/01-atoms/grid/_grid.twig index 90ffa4c66c..cae953e850 100644 --- a/source/default/_patterns/01-atoms/grid/_grid.twig +++ b/source/default/_patterns/01-atoms/grid/_grid.twig @@ -14,19 +14,18 @@ */ #} -{% set grid_classes = grid_classes|default([])|merge([ - 'grid', - grid.container ? 'container' : '', - grid.center ? 'mx-auto' : '' -]) %} +{% set grid_classes = + grid_classes|default([])|merge(['grid', grid.container ? 'container' : '', grid.center ? 'mx-auto' : '']) +%} -{% set column_classes = column_classes|default([])|merge([ - 'flex', - (grid.wrap is same as (false)) ? '' : 'flex-wrap', -]) | sort | join(' ') | trim %} +{% set column_classes = + column_classes|default([])|merge(['flex', grid.wrap is same as(false) ? '' : 'flex-wrap'])|join(' ')|trim +%} -
+
- {% block grid_content %}{% endblock grid_content %} + {% block grid_content %} + + {% endblock grid_content %}
diff --git a/source/default/_patterns/01-atoms/image/_image--bg.twig b/source/default/_patterns/01-atoms/image/_image--bg.twig index 9d02e25a9d..2b86ee2ea7 100644 --- a/source/default/_patterns/01-atoms/image/_image--bg.twig +++ b/source/default/_patterns/01-atoms/image/_image--bg.twig @@ -9,4 +9,5 @@ * - image.repeat [string]: Background repeat value for image. */ #} - + diff --git a/source/default/_patterns/01-atoms/image/_image--picture.twig b/source/default/_patterns/01-atoms/image/_image--picture.twig index fac3a1ce3d..0b9fa46e19 100644 --- a/source/default/_patterns/01-atoms/image/_image--picture.twig +++ b/source/default/_patterns/01-atoms/image/_image--picture.twig @@ -16,7 +16,7 @@ {% for item in image.srcset %} {% set key = bp[loop.index]|default('xl') %} - + {% endfor %} {% include '@atoms/image/_image--primary.twig' with { image: image, diff --git a/source/default/_patterns/01-atoms/image/_image--placeholder.twig b/source/default/_patterns/01-atoms/image/_image--placeholder.twig index edb21ca25f..f2c6ad050e 100644 --- a/source/default/_patterns/01-atoms/image/_image--placeholder.twig +++ b/source/default/_patterns/01-atoms/image/_image--placeholder.twig @@ -19,7 +19,11 @@ {# if there's no height, let's randomly get one somewhere between .75 and 1.25 times the width, in increments of 10 #} {% if not placeholderStyle.height %} {% set height = random(range(placeholderStyle.width * 0.75, placeholderStyle.width * 1.25, 10)) %} - {% set placeholderStyle = placeholderStyle|merge({height: height}) %} + {% set placeholderStyle = + placeholderStyle|merge({ + height: height + }) + %} {% set placeholderText = placeholderStyle.width ~ 'wide, height varies' %} {% endif %} @@ -29,13 +33,15 @@ auto: 'yes', size: '8', lineWrap: '.9', - text: placeholderStyleName ~ ' \n (' ~ placeholderText ~ ')', + text: placeholderStyleName ~ ' \n (' ~ placeholderText ~ ')' } %} -{% set imgSrc = 'holder.js/' ~ placeholderStyle.width ~ 'x' ~ placeholderStyle.height|round ~ '?' ~ options|url_encode %} +{% set imgSrc = 'holder.js/' ~ placeholderStyle.width ~ 'x' ~ (placeholderStyle.height|round) ~ '?' + ~ (options|url_encode) +%} -{% if image.variant == 'primary'%} - A placeholder image +{% if image.variant == 'primary' %} + A placeholder image {% elseif image.variant == 'bg' %}
{% endif %} diff --git a/source/default/_patterns/01-atoms/image/_image.twig b/source/default/_patterns/01-atoms/image/_image.twig index a0b6241f6e..405c46251c 100644 --- a/source/default/_patterns/01-atoms/image/_image.twig +++ b/source/default/_patterns/01-atoms/image/_image.twig @@ -12,11 +12,15 @@ */ #} -{% set image_classes = image_classes|default([])|merge([ - 'image', - image.style ? 'image--' ~ image.style : '', - image.variant ? 'image--' ~ image.variant : '', -]) | sort | join(' ') | trim %} +{% set image_classes = + image_classes + |default([]) + |merge( + ['image', 'img-fluid', image.style ? 'image--' ~ image.style : '', image.variant ? 'image--' ~ image.variant : ''] + ) + |join(' ') + |trim +%} {% if image.placeholder %} {% include '@atoms/image/_image--placeholder.twig' with { diff --git a/source/default/_patterns/01-atoms/svg/_svg--embed.twig b/source/default/_patterns/01-atoms/svg/_svg--embed.twig index f15e3ab5f1..8aaf162cc8 100644 --- a/source/default/_patterns/01-atoms/svg/_svg--embed.twig +++ b/source/default/_patterns/01-atoms/svg/_svg--embed.twig @@ -9,8 +9,10 @@ */ #} -{% set svg = { - path: '@atoms/svg/icons/person.svg', -} | merge(svg) %} +{% set svg = + { + path: '@atoms/svg/icons/person.svg' + }|merge(svg) +%} {{ source(svg.path) }} diff --git a/source/default/_patterns/01-atoms/svg/_svg--sprite.twig b/source/default/_patterns/01-atoms/svg/_svg--sprite.twig index b56d388ee4..02c54390d4 100644 --- a/source/default/_patterns/01-atoms/svg/_svg--sprite.twig +++ b/source/default/_patterns/01-atoms/svg/_svg--sprite.twig @@ -10,9 +10,11 @@ */ #} -{% set svg = { - name: 'person', -} | merge(svg) %} +{% set svg = + { + name: 'person' + }|merge(svg) +%} diff --git a/source/default/_patterns/01-atoms/svg/_svg.twig b/source/default/_patterns/01-atoms/svg/_svg.twig index 409ed998c7..53b6c56c16 100644 --- a/source/default/_patterns/01-atoms/svg/_svg.twig +++ b/source/default/_patterns/01-atoms/svg/_svg.twig @@ -16,30 +16,31 @@ #} {# Default SVG settings, overridden by incoming svg object #} -{% set svg = { - fillCurrent: true, - variant: 'embed', -} | merge(svg) %} +{% set svg = + { + fillCurrent: true, + variant: 'embed' + }|merge(svg) +%} {# Default SVG classes, overridden by incoming array #} -{% set svg_classes = [ - 'svg', - 'svg--' ~ svg.variant, - svg.fillCurrent ? 'fill-current' : '', - svg.strokeCurrent ? 'stroke-current' : '', -] | merge(svg_classes|default([])) | filter(c => c is not empty) | join(' ') %} +{% set svg_classes = + ['svg', 'svg--' ~ svg.variant, svg.fillCurrent ? 'fill-current' : '', svg.strokeCurrent ? 'stroke-current' : ''] + |merge(svg_classes|default([])) + |join(' ') + |trim +%} - - -{% if svg.variant == 'embed' %} - {% include '@atoms/svg/_svg--embed.twig' with { - svg: svg, - svg_classes: svg_classes - } %} -{% elseif svg.variant == 'sprite' %} - {% include '@atoms/svg/_svg--sprite.twig' with { - svg: svg, - svg_classes: svg_classes - } %} -{% endif %} + + {% if svg.variant == 'embed' %} + {% include '@atoms/svg/_svg--embed.twig' with { + svg: svg, + svg_classes: svg_classes + } %} + {% elseif svg.variant == 'sprite' %} + {% include '@atoms/svg/_svg--sprite.twig' with { + svg: svg, + svg_classes: svg_classes + } %} + {% endif %} diff --git a/source/default/_patterns/01-atoms/svg/index.js b/source/default/_patterns/01-atoms/svg/index.js index c18141b651..a687dc6fa9 100644 --- a/source/default/_patterns/01-atoms/svg/index.js +++ b/source/default/_patterns/01-atoms/svg/index.js @@ -14,6 +14,7 @@ import 'svg-spritemap-webpack-plugin/svg-icons.css'; import './sprite-svg.css'; // Module template +import './_svg.twig'; import './_svg--embed.twig'; import './_svg--sprite.twig'; diff --git a/source/default/_patterns/02-molecules/card/_card.twig b/source/default/_patterns/02-molecules/card/_card.twig index 3bbafd3fe9..733cd24fe4 100644 --- a/source/default/_patterns/02-molecules/card/_card.twig +++ b/source/default/_patterns/02-molecules/card/_card.twig @@ -12,14 +12,14 @@ */ #} -{% set card_classes = card_classes|default([])|merge([ - 'card', - card.variant ? 'card--' ~ card.variant : '', - 'max-w-sm', - 'rounded', - 'overflow-hidden', - 'shadow-lg' -]) | sort | join(' ') | trim %} +{% set card_classes = + card_classes + |default([]) + |merge(['card', card.variant ? 'card--' ~ card.variant : '', 'max-w-sm', 'rounded', 'overflow-hidden', 'shadow-lg']) + |sort + |join(' ') + |trim +%}
{% block card_header %} @@ -34,10 +34,14 @@ {% block card_content %}
{% if card.title %} -

{{ card.title }}

+

+ {{ card.title }} +

{% endif %} {% if card.body %} -

{{ card.body }}

+

+ {{ card.body }} +

{% endif %}
{% endblock card_content %} @@ -46,7 +50,9 @@ {% if card.list %}
{% for item in card.list %} - {{ item }} + + {{ item }} + {% endfor %}
{% endif %} diff --git a/source/default/_patterns/02-molecules/pagination/_pagination.twig b/source/default/_patterns/02-molecules/pagination/_pagination.twig index 345de0483e..ec10ddc75a 100644 --- a/source/default/_patterns/02-molecules/pagination/_pagination.twig +++ b/source/default/_patterns/02-molecules/pagination/_pagination.twig @@ -12,31 +12,38 @@ */ #} -{% set pagination_classes = pagination_classes|default([])|merge([ - 'pagination', - pagination.variant ? 'pagination--' ~ pagination.variant : '', - 'flex', - 'list-reset', - 'rounded', - 'w-auto', - 'font-sans' -]) | sort | join(' ') | trim %} +{% set pagination_classes = + pagination_classes + |default([]) + |merge( + [ + 'pagination', + pagination.variant ? 'pagination--' ~ pagination.variant : '', + 'flex', + 'list-reset', + 'rounded', + 'w-auto', + 'font-sans' + ] + ) + |join(' ') + |trim +%} diff --git a/source/default/_patterns/02-molecules/vue-widget/_vue-cryptos.twig b/source/default/_patterns/02-molecules/vue-widget/_vue-cryptos.twig deleted file mode 100644 index 558ee0e588..0000000000 --- a/source/default/_patterns/02-molecules/vue-widget/_vue-cryptos.twig +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/source/default/_patterns/02-molecules/vue-widget/_vuex-cryptos.twig b/source/default/_patterns/02-molecules/vue-widget/_vuex-cryptos.twig deleted file mode 100644 index e8f53ed67f..0000000000 --- a/source/default/_patterns/02-molecules/vue-widget/_vuex-cryptos.twig +++ /dev/null @@ -1 +0,0 @@ -
diff --git a/source/default/_patterns/02-molecules/vue-widget/index.js b/source/default/_patterns/02-molecules/vue-widget/index.js index 9fa60b27c7..9d9b396cb2 100644 --- a/source/default/_patterns/02-molecules/vue-widget/index.js +++ b/source/default/_patterns/02-molecules/vue-widget/index.js @@ -8,26 +8,14 @@ import 'protons'; import 'molecules/card'; // Module template -import './_vuex-cryptos.twig'; -import './_vue-cryptos.twig'; import './_vue-cards.twig'; import './_vue-clock.twig'; // All Vue widgets only execute on existence of DOM -import FacetTableVue from 'lib/vue-widget/src/vue-cryptos'; -import FacetTableVueX from 'lib/vue-widget/src/vuex-cryptos'; import VueCards from 'lib/vue-widget/src/vue-cards'; import VueClock from 'lib/vue-widget/src/vue-clock'; // Render Vue elements as soon as possible -if (document.getElementById('vue-cryptos')) { - FacetTableVue('#vue-cryptos'); -} - -if (document.getElementById('vuex-cryptos')) { - FacetTableVueX('#vuex-cryptos'); -} - if (document.getElementById('vue-cards')) { VueCards('#vue-cards'); } diff --git a/source/default/_patterns/03-organisms/article/_article.twig b/source/default/_patterns/03-organisms/article/_article.twig index 2d3be38fa5..bb07523b36 100644 --- a/source/default/_patterns/03-organisms/article/_article.twig +++ b/source/default/_patterns/03-organisms/article/_article.twig @@ -12,29 +12,28 @@ */ #} -{% set article_classes = article_classes|default([])|merge([ - 'article', - article.variant ? 'article--' ~ article.variant : '', - 'pb-3' -]) | sort | join(' ') | trim %} +{% set article_classes = + article_classes + |default([]) + |merge(['article', article.variant ? 'article--' ~ article.variant : '', 'pb-3']) + |join(' ') + |trim +%} -{% set image_classes = [ - 'm-3', - 'rounded-full', - 'float-right' -] | sort %} +{% set image_classes = ['m-3', 'rounded-full', 'float-right']|sort %}
- {% block article_header %} -

{{ article.title }}

+

+ {{ article.title }} +

{% endblock article_header %} {% block article_content %}
{% include '@atoms/image/_image.twig' with { image: article.image, - image_classes: image_classes, + image_classes: image_classes } %} {{ article.body }}
@@ -44,7 +43,7 @@
Tags:
    - {% for tag in article.tags %} + {% for tag in article.tags %}
  • {{ tag.word }}
    • {% endfor %}
@@ -56,5 +55,4 @@ {% endblock article_footer %} -
diff --git a/source/default/_patterns/03-organisms/card-grid/_card-grid.twig b/source/default/_patterns/03-organisms/card-grid/_card-grid.twig index 104fe2adc3..da0f9f3d5a 100644 --- a/source/default/_patterns/03-organisms/card-grid/_card-grid.twig +++ b/source/default/_patterns/03-organisms/card-grid/_card-grid.twig @@ -8,14 +8,14 @@ */ #} -{% set card_grid_classes = card_grid_classes|default([])|merge([ - 'card-grid', -]) | sort | join(' ') | trim %} +{% set card_grid_classes = card_grid_classes|default([])|merge(['card-grid'])|join(' ')|trim %}
{% block card_grid_title %} {% if card_grid.title %} -

{{ card_grid.title }}

+

+ {{ card_grid.title }} +

{% endif %} {% endblock card_grid_title %} @@ -25,7 +25,7 @@ {% for item in card_grid.items %} {% include '@molecules/card/_card.twig' with { card: item, - card_classes: ['w-full','sm:w-1/3','m-3'], + card_classes: ['w-full', 'sm:w-1/3', 'm-3'] } %} {% endfor %}
diff --git a/source/default/lib/vue-widget/__tests__/vue-cryptos.test.js b/source/default/lib/vue-widget/__tests__/vue-cryptos.test.js deleted file mode 100644 index 415703b6eb..0000000000 --- a/source/default/lib/vue-widget/__tests__/vue-cryptos.test.js +++ /dev/null @@ -1,68 +0,0 @@ -import { render, cleanup, fireEvent } from 'vue-testing-library'; -import FacetTable from '../src/vue-cryptos/facet-table.vue'; -import FacetTableRow from '../src/vue-cryptos/components/facet-table-row.vue'; -import mockData from './mock-data.json'; - -afterEach(cleanup); - -describe('vue-cryptos.vue', () => { - fetch.mockResponse(JSON.stringify(mockData)); - - it('renders the component title', () => { - const { getByText } = render(FacetTable); - expect(getByText('Cryptos')).toBeTruthy(); - }); - - it('renders the default component filter', () => { - const { getByText } = render(FacetTable); - const filterElement = getByText('Filter:', { exact: false }); - expect(filterElement.textContent).toContain('all'); - }); - - it('facet button becomes active on click and unselected buttons remain nonactive', async () => { - const { getByTestId } = render(FacetTable); - - const winnersButton = getByTestId('facet-button-winners'); - const allButton = getByTestId('facet-button-all'); - const losersButton = getByTestId('facet-button-losers'); - - await fireEvent.click(winnersButton); - - expect(winnersButton.className).toBe( - 'btn btn-secondary text-uppercase active' - ); - expect(allButton.className).toBe('btn btn-secondary text-uppercase'); - expect(losersButton.className).toBe('btn btn-secondary text-uppercase'); - }); -}); - -describe('facet-table-row.vue', () => { - const props = { - name: 'Bitcoin', - symbol: 'BTC', - rank: 1, - price_usd: 15015.0, - change: 1.11, - }; - - it('renders name property', () => { - const { getByText } = render(FacetTableRow, { props }); - const nameElement = getByText('Bitcoin', { exact: false }); - - expect(nameElement.textContent).toContain('Bitcoin'); - }); - - it('renders price property', () => { - const { getByText } = render(FacetTableRow, { props }); - const priceElement = getByText('15015', { exact: false }); - - expect(priceElement.textContent).toContain('15015'); - }); - - it('renders symbol property', () => { - const { getByText } = render(FacetTableRow, { props }); - const symbolElement = getByText('BTC', { exact: false }); - - expect(symbolElement.textContent).toContain('BTC'); - }); -}); diff --git a/source/default/lib/vue-widget/src/vue-cards/components/card.vue b/source/default/lib/vue-widget/src/vue-cards/components/card.vue index 31d6c5ec52..e8442b33bb 100644 --- a/source/default/lib/vue-widget/src/vue-cards/components/card.vue +++ b/source/default/lib/vue-widget/src/vue-cards/components/card.vue @@ -1,13 +1,13 @@