From 71c3c8a81d70477fda85ab873fcd236b6dd85e37 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Wed, 14 Oct 2020 20:46:24 +0900 Subject: [PATCH 1/2] fix(footer): ensure IBM logo icon is visible Fixes the rendering issue of IBM logo icon in footer by fixing wrong `width` and `height` attributes. Also fixes wrong content in the `` attribute in corresponding SVG, by avoiding to bake it in the `lit-html` SVG template for the IBM logo icon. The approach is taken because the `<title>` content is not the design asset, and may have to be translated in future. Due to such reason, omitted some other attributes from the `lit-html` SVG template for the IBM logo icon, too. Refs #4224. --- .../icons/svg/IBM-8bar-logo--h65-white.svg | 5 ++++ .../src/components/footer/footer-logo.ts | 14 ++++++--- .../tools/descriptor-from-svg.js | 4 +-- .../tools/svg-result-from-icon-descriptor.js | 30 +++++++++++++++++-- .../tools/svg-result-ibmdotcom-icon-loader.js | 4 +-- 5 files changed, 47 insertions(+), 10 deletions(-) diff --git a/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg b/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg index 8c1a6bb631f..e5356c2af2c 100644 --- a/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg +++ b/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg @@ -1,7 +1,12 @@ <?xml version="1.0" encoding="UTF-8"?> <svg + width="157" + height="65" class="bx--footer-logo__logo" viewBox="0 0 157 65" + version="1.1" + xmlns="http://www.w3.org/2000/svg" + xmlns:xlink="http://www.w3.org/1999/xlink" role="img" aria-labelledby="footer-logo"> <title id="footer-logo">IBM Logo diff --git a/packages/web-components/src/components/footer/footer-logo.ts b/packages/web-components/src/components/footer/footer-logo.ts index c9bc2afcb78..8f6fa3c2e8c 100644 --- a/packages/web-components/src/components/footer/footer-logo.ts +++ b/packages/web-components/src/components/footer/footer-logo.ts @@ -7,7 +7,7 @@ * LICENSE file in the root directory of this source tree. */ -import { html, property, customElement, LitElement } from 'lit-element'; +import { html, svg, property, customElement, LitElement } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import FocusMixin from 'carbon-web-components/es/globals/mixins/focus.js'; @@ -48,9 +48,15 @@ class DDSFooterLogo extends StableSelectorMixin(FocusMixin(LitElement)) { render() { const { href } = this; return html` - ${IBM8BarLogoH65White()} + + ${IBM8BarLogoH65White({ + class: `${prefix}--footer-logo__logo`, + role: 'img', + 'aria-labelledby': 'footer-logo', + children: svg``, + })} + + `; } diff --git a/packages/web-components/tools/descriptor-from-svg.js b/packages/web-components/tools/descriptor-from-svg.js index b37d75c5f95..1aa336e8118 100644 --- a/packages/web-components/tools/descriptor-from-svg.js +++ b/packages/web-components/tools/descriptor-from-svg.js @@ -69,7 +69,7 @@ function svg2JSAsync(data) { * @param {string} svg A `` string. * @returns {object} The JSON version of the given `` string. */ -async function svgResultCarbonIconLoader(svg) { +async function descriptorFromSVG(svg) { const svgNode = findRootNode(await svg2JSAsync(svg)); if (!svgNode) { throw new Error(`Wrong SVG2JS result found in: ${svg}`); @@ -77,4 +77,4 @@ async function svgResultCarbonIconLoader(svg) { return convertAttrs(svgNode); } -module.exports = svgResultCarbonIconLoader; +module.exports = descriptorFromSVG; diff --git a/packages/web-components/tools/svg-result-from-icon-descriptor.js b/packages/web-components/tools/svg-result-from-icon-descriptor.js index 28dc1a5779c..5c75d5f0efb 100644 --- a/packages/web-components/tools/svg-result-from-icon-descriptor.js +++ b/packages/web-components/tools/svg-result-from-icon-descriptor.js @@ -11,6 +11,13 @@ const { getAttributes, formatAttributes } = require('@carbon/icon-helpers'); +// For `@carbon/ibmdotcom-web-components`, we let our consumers set those attributes +const omitAttrs = { + class: true, + role: true, + 'aria-labelledby': true, +}; + /** * @param {object} descriptor Object representation of an SVG icon as generated by @carbon/icons * @returns {string} The `lit-html` template string version of the given SVG icon descriptor. @@ -33,12 +40,31 @@ const toString = descriptor => { * @param {object} descriptor Object representation of an SVG icon as generated by @carbon/icons */ const icon = descriptor => { - descriptor.attrs = getAttributes( + const attrs = getAttributes( Object.assign(descriptor.attrs, { '...': '${spread(attrs)}', // eslint-disable-line no-template-curly-in-string }) ); - descriptor.content.unshift('${children}'); // eslint-disable-line no-template-curly-in-string + descriptor.attrs = Object.keys(attrs).reduce( + (acc, attr) => + typeof attrs[attr] === 'undefined' || omitAttrs[attr] + ? acc + : { + ...acc, + [attr]: attrs[attr], + }, + {} + ); + descriptor.content = descriptor.content.reduce( + (acc, item) => { + // For `@carbon/ibmdotcom-web-components`, we let our consumers set the `` + if (item.elem !== 'title') { + acc.push(item); + } + return acc; + }, + ['${children}'] // eslint-disable-line no-template-curly-in-string + ); return `({ children, ...attrs } = {}) => svg\`${toString(descriptor)}\``; }; diff --git a/packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js b/packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js index 5e7607d0fb6..f20346c5a8f 100644 --- a/packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js +++ b/packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js @@ -10,7 +10,7 @@ 'use strict'; const svg2js = require('svgo/lib/svgo/svg2js'); -const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon'); +const createSVGResultFromIconDescriptor = require('./svg-result-from-icon-descriptor'); /** * @param {object} node The node in SVG2JS result. @@ -68,7 +68,7 @@ function svgResultIBMDotcomIconLoader(content) { ` import { svg } from 'lit-html'; import spread from 'carbon-web-components/es/globals/directives/spread'; - const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon(convertAttrs(svgNode))}; + const svgResultCarbonIcon = ${createSVGResultFromIconDescriptor(convertAttrs(svgNode))}; export default svgResultCarbonIcon; ` ); From f22c7c7f7c30e8c80baa4ba66b47771faf1589c8 Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Thu, 15 Oct 2020 11:06:47 +0900 Subject: [PATCH 2/2] test(Footer): update snapshot --- .../__snapshots__/storyshots.test.js.snap | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index 9f62c8fcb08..55e35fe4660 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -37959,11 +37959,17 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = > IBM Logo @@ -43971,11 +43977,17 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = ` > IBM Logo @@ -49746,11 +49758,17 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = ` > IBM Logo @@ -66989,11 +67007,17 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = ` > IBM Logo @@ -73038,11 +73062,17 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1` > IBM Logo @@ -79093,11 +79123,17 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = ` > IBM Logo @@ -80379,11 +80415,17 @@ exports[`Storyshots Components|Footer Default 1`] = ` > IBM Logo @@ -80860,11 +80902,17 @@ exports[`Storyshots Components|Footer Default Language Only 1`] = ` > IBM Logo @@ -82147,11 +82195,17 @@ exports[`Storyshots Components|Footer Short 1`] = ` > IBM Logo @@ -82641,11 +82695,17 @@ exports[`Storyshots Components|Footer Short Language Only 1`] = ` > IBM Logo