Skip to content

Commit

Permalink
fix(footer): ensure IBM logo icon is visible (#4226)
Browse files Browse the repository at this point in the history 
### Related Ticket(s)

Refs #4224.

### Description

Fixes the rendering issue of IBM logo icon in footer by fixing wrong `width` and `height` attributes.

Also fixes wrong content in the `<title>` 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.

### Changelog

**Changed**

- Fixes to IBM logo icon:
  - Add right `width` and `height` attributes
  - Omit `<title>` and some attributes from `lit-html` SVG template
  • Loading branch information
@asudoh
asudoh authored Oct 15, 2020
1 parent 9988866 commit 81c7018
Show file tree
Hide file tree
Showing 6 changed files with 107 additions and 10 deletions.
60 changes: 60 additions & 0 deletions packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37959,11 +37959,17 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down Expand Up @@ -43971,11 +43977,17 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down Expand Up @@ -49746,11 +49758,17 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down Expand Up @@ -66989,11 +67007,17 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down Expand Up @@ -73038,11 +73062,17 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down Expand Up @@ -79093,11 +79123,17 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down Expand Up @@ -80379,11 +80415,17 @@ exports[`Storyshots Components|Footer Default 1`] = `
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down Expand Up @@ -80860,11 +80902,17 @@ exports[`Storyshots Components|Footer Default Language Only 1`] = `
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down Expand Up @@ -82147,11 +82195,17 @@ exports[`Storyshots Components|Footer Short 1`] = `
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down Expand Up @@ -82641,11 +82695,17 @@ exports[`Storyshots Components|Footer Short Language Only 1`] = `
>
<FooterLogo
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<svg
className="bx--footer-logo__logo"
height="65"
viewBox="0 0 157 65"
width="157"
xmlns="http://www.w3.org/2000/svg"
>
<title>
IBM Logo
Expand Down
5 changes: 5 additions & 0 deletions packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
14 changes: 10 additions & 4 deletions packages/web-components/src/components/footer/footer-logo.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -48,9 +48,15 @@ class DDSFooterLogo extends StableSelectorMixin(FocusMixin(LitElement)) {
render() {
const { href } = this;
return html`
<a class="${prefix}--footer-logo__link" aria-label="IBM logo" href="${ifNonNull(href)}"
>${IBM8BarLogoH65White()}<slot></slot
></a>
<a class="${prefix}--footer-logo__link" aria-label="IBM logo" href="${ifNonNull(href)}">
${IBM8BarLogoH65White({
class: `${prefix}--footer-logo__logo`,
role: 'img',
'aria-labelledby': 'footer-logo',
children: svg`<title id="footer-logo">IBM Logo</title>`,
})}
<slot></slot>
</a>
`;
}

Expand Down
4 changes: 2 additions & 2 deletions packages/web-components/tools/descriptor-from-svg.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,12 +69,12 @@ function svg2JSAsync(data) {
* @param {string} svg A `<svg>` string.
* @returns {object} The JSON version of the given `<svg>` 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}`);
}
return convertAttrs(svgNode);
}

module.exports = svgResultCarbonIconLoader;
module.exports = descriptorFromSVG;
30 changes: 28 additions & 2 deletions packages/web-components/tools/svg-result-from-icon-descriptor.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -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 `<title>`
if (item.elem !== 'title') {
acc.push(item);
}
return acc;
},
['${children}'] // eslint-disable-line no-template-curly-in-string
);
return `({ children, ...attrs } = {}) => svg\`${toString(descriptor)}\``;
};

Expand Down
4 changes: 2 additions & 2 deletions packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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;
`
);
Expand Down

0 comments on commit 81c7018

Please sign in to comment.