From ac2d0d4d76846bb0d4de22ddcedd9d68afd6ceb9 Mon Sep 17 00:00:00 2001 From: Mike Mai Date: Mon, 6 Aug 2018 12:17:53 -0400 Subject: [PATCH 1/5] fix: adding attributes to ratio wrapper --- .../02-components/video/50-video-w-external-title.twig | 5 ++++- packages/components/bolt-video/src/video.twig | 5 +++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/pattern-lab/src/_patterns/02-components/video/50-video-w-external-title.twig b/apps/pattern-lab/src/_patterns/02-components/video/50-video-w-external-title.twig index 749ebfae2f..063158283d 100644 --- a/apps/pattern-lab/src/_patterns/02-components/video/50-video-w-external-title.twig +++ b/apps/pattern-lab/src/_patterns/02-components/video/50-video-w-external-title.twig @@ -18,7 +18,10 @@ "accountId": "1900410236", "playerId": "r1CAdLzTW", "showMeta": true, - "showMetaTitle": false + "showMetaTitle": false, + "attributes": { + "class": "u-bolt-margin-bottom-small" + } } only %}
{% include "@bolt/text.twig" with { diff --git a/packages/components/bolt-video/src/video.twig b/packages/components/bolt-video/src/video.twig index dbfa5da097..9b0bed52f8 100644 --- a/packages/components/bolt-video/src/video.twig +++ b/packages/components/bolt-video/src/video.twig @@ -1,5 +1,5 @@ {% if enable_json_schema_validation %} - {{ validate_data_schema(bolt.data.components['@bolt-components-video'].schema, _self) | raw }} + {{ validate_data_schema(bolt.data.components["@bolt-components-video"].schema, _self) | raw }} {% endif %} {% set videoUuid = videoUuid | default("js-bolt-video-uuid--" ~ random()) %} @@ -27,7 +27,8 @@ {% include "@bolt/ratio.twig" with { aspectRatioHeight: aspectRatioHeight ?? 9, aspectRatioWidth: aspectRatioWidth ?? 16, - children: videoTag + children: videoTag, + attributes: attributes } only %} {% else %} {{ videoTag }} From ffc51c4c7adf525e9ab6021a022d08f16c71c57b Mon Sep 17 00:00:00 2001 From: Mike Mai Date: Fri, 10 Aug 2018 17:32:47 -0400 Subject: [PATCH 2/5] fix: separating util classes --- packages/components/bolt-video/src/video.twig | 29 ++++++++++++++----- 1 file changed, 22 insertions(+), 7 deletions(-) diff --git a/packages/components/bolt-video/src/video.twig b/packages/components/bolt-video/src/video.twig index 9b0bed52f8..6d1d7da429 100644 --- a/packages/components/bolt-video/src/video.twig +++ b/packages/components/bolt-video/src/video.twig @@ -12,24 +12,39 @@ {% set collapsed = collapsed | default(true) %} {% set ratio = ratio ?? true %} -{#@todo @salem Is this used anywhere?#} {% set classes = [ baseClass, collapsed is not null and collapsed == false ? "is-expanded" : "is-collapsed" ] %} - -{% set videoTag %} - {% include "@bolt/_video-tag.twig" %} +{% set utilClasses = utils | default([]) %} +{% set otherClasses = others | default([]) %} + +{% for class in attributes["class"] %} + {% if class starts with "u-" %} + {% set utilClasses = utilClasses|merge([class]) %} + {% else %} + {% set otherClasses = otherClasses|merge([class]) %} + {% endif %} +{% endfor %} + +{% set innerVideo %} + {% include "@bolt/_video-tag.twig" with { + attributes: { + class: otherClasses + } + } %} {% endset %} {% if ratio == true %} {% include "@bolt/ratio.twig" with { aspectRatioHeight: aspectRatioHeight ?? 9, aspectRatioWidth: aspectRatioWidth ?? 16, - children: videoTag, - attributes: attributes + children: innerVideo, + attributes: { + class: utilClasses + } } only %} {% else %} - {{ videoTag }} + {% include "@bolt/_video-tag.twig" %} {% endif %} From bac0ea52dbade177eba3a787f666298f8c9121c7 Mon Sep 17 00:00:00 2001 From: Mike Mai Date: Mon, 13 Aug 2018 11:41:44 -0400 Subject: [PATCH 3/5] chore: remove params --- packages/components/bolt-video/src/video.twig | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/components/bolt-video/src/video.twig b/packages/components/bolt-video/src/video.twig index 6d1d7da429..d6cfcbbedf 100644 --- a/packages/components/bolt-video/src/video.twig +++ b/packages/components/bolt-video/src/video.twig @@ -17,21 +17,21 @@ collapsed is not null and collapsed == false ? "is-expanded" : "is-collapsed" ] %} -{% set utilClasses = utils | default([]) %} -{% set otherClasses = others | default([]) %} +{% set utilClasses = [] %} +{% set videoClasses = [] %} {% for class in attributes["class"] %} {% if class starts with "u-" %} {% set utilClasses = utilClasses|merge([class]) %} {% else %} - {% set otherClasses = otherClasses|merge([class]) %} + {% set videoClasses = videoClasses|merge([class]) %} {% endif %} {% endfor %} {% set innerVideo %} {% include "@bolt/_video-tag.twig" with { attributes: { - class: otherClasses + class: videoClasses } } %} {% endset %} From 5c09fc8aa62f45c5bd4d2938bc2fc57eee9c54c4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Denton?= Date: Tue, 14 Aug 2018 11:49:56 -0700 Subject: [PATCH 4/5] chore: move video class logic inside conditional (BDS-336) A subtle change, but this improves performance (only run the class-sorting code for ratio if necessary) and I think readability (by making it more clear that the class sorting is only necessary if ratio is being used). --- packages/components/bolt-video/src/video.twig | 38 +++++++++---------- 1 file changed, 19 insertions(+), 19 deletions(-) diff --git a/packages/components/bolt-video/src/video.twig b/packages/components/bolt-video/src/video.twig index d6cfcbbedf..5fd9ab3354 100644 --- a/packages/components/bolt-video/src/video.twig +++ b/packages/components/bolt-video/src/video.twig @@ -17,26 +17,26 @@ collapsed is not null and collapsed == false ? "is-expanded" : "is-collapsed" ] %} -{% set utilClasses = [] %} -{% set videoClasses = [] %} - -{% for class in attributes["class"] %} - {% if class starts with "u-" %} - {% set utilClasses = utilClasses|merge([class]) %} - {% else %} - {% set videoClasses = videoClasses|merge([class]) %} - {% endif %} -{% endfor %} - -{% set innerVideo %} - {% include "@bolt/_video-tag.twig" with { - attributes: { - class: videoClasses - } - } %} -{% endset %} - {% if ratio == true %} + {% set utilClasses = [] %} + {% set videoClasses = [] %} + + {% for class in attributes["class"] %} + {% if class starts with "u-" %} + {% set utilClasses = utilClasses|merge([class]) %} + {% else %} + {% set videoClasses = videoClasses|merge([class]) %} + {% endif %} + {% endfor %} + + {% set innerVideo %} + {% include "@bolt/_video-tag.twig" with { + attributes: { + class: videoClasses + } + } %} + {% endset %} + {% include "@bolt/ratio.twig" with { aspectRatioHeight: aspectRatioHeight ?? 9, aspectRatioWidth: aspectRatioWidth ?? 16, From 0ec92daebfc16d79f7c6b48fb5c7c89e1d1bf4f9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?R=C3=A9my=20Denton?= Date: Tue, 14 Aug 2018 12:17:17 -0700 Subject: [PATCH 5/5] fix: rework logic for separating utility classes for video with ratio (BDS-336) - Replaces arrays and merges attributes objects and addClass/removeClass methods. - Most notably, allows other attributes besides class to be passed to _video-tag when using ratio. --- packages/components/bolt-video/src/video.twig | 20 ++++++------------- 1 file changed, 6 insertions(+), 14 deletions(-) diff --git a/packages/components/bolt-video/src/video.twig b/packages/components/bolt-video/src/video.twig index 5fd9ab3354..3dbb7e5a3c 100644 --- a/packages/components/bolt-video/src/video.twig +++ b/packages/components/bolt-video/src/video.twig @@ -18,32 +18,24 @@ ] %} {% if ratio == true %} - {% set utilClasses = [] %} - {% set videoClasses = [] %} - + {# Move utility classes to a separate attributes object so they can be added to the wrapping ratio object instead #} + {% set ratioAttributes = create_attribute({}) %} {% for class in attributes["class"] %} {% if class starts with "u-" %} - {% set utilClasses = utilClasses|merge([class]) %} - {% else %} - {% set videoClasses = videoClasses|merge([class]) %} + {% set ratioAttributes = ratioAttributes.addClass(class) %} + {% set attributes = attributes.removeClass(class) %} {% endif %} {% endfor %} {% set innerVideo %} - {% include "@bolt/_video-tag.twig" with { - attributes: { - class: videoClasses - } - } %} + {% include "@bolt/_video-tag.twig" %} {% endset %} {% include "@bolt/ratio.twig" with { aspectRatioHeight: aspectRatioHeight ?? 9, aspectRatioWidth: aspectRatioWidth ?? 16, children: innerVideo, - attributes: { - class: utilClasses - } + attributes: ratioAttributes } only %} {% else %} {% include "@bolt/_video-tag.twig" %}