Skip to content

Commit

Permalink
Merge branch 'master' into fix/footer-language-combo-to-select
Browse files Browse the repository at this point in the history
  • Loading branch information
kodiakhq[bot] authored Oct 29, 2020
2 parents f61152f + 2044c6e commit d75f8d7
Show file tree
Hide file tree
Showing 14 changed files with 512 additions and 42 deletions.
26 changes: 26 additions & 0 deletions packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -32579,6 +32579,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -32610,6 +32611,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] =
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -39385,6 +39387,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -39416,6 +39419,7 @@ exports[`Storyshots Components|Dotcom Shell Default 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -45018,6 +45022,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -45049,6 +45054,7 @@ exports[`Storyshots Components|Dotcom Shell Search open 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -53819,6 +53825,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -53850,6 +53857,7 @@ exports[`Storyshots Components|Dotcom Shell With L1 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -59510,6 +59518,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -59541,6 +59550,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1`
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -65338,6 +65348,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -65369,6 +65380,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -70897,6 +70909,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -70928,6 +70941,7 @@ exports[`Storyshots Components|Dotcom Shell With platform 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -76823,6 +76837,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -76854,6 +76869,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1`
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -83673,6 +83689,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -83704,6 +83721,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -103031,6 +103049,7 @@ exports[`Storyshots Components|Masthead Default 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -103062,6 +103081,7 @@ exports[`Storyshots Components|Masthead Default 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -103507,6 +103527,7 @@ exports[`Storyshots Components|Masthead Search open by default 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -103538,6 +103559,7 @@ exports[`Storyshots Components|Masthead Search open by default 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -106898,6 +106920,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -106929,6 +106952,7 @@ exports[`Storyshots Components|Masthead With L 1 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down Expand Up @@ -107212,6 +107236,7 @@ exports[`Storyshots Components|Masthead With Platform 1`] = `
<button
aria-label="Masthead left caret"
className="bx--header__nav-caret-left"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretLeft20)>
Expand Down Expand Up @@ -107243,6 +107268,7 @@ exports[`Storyshots Components|Masthead With Platform 1`] = `
<button
aria-label="Masthead right caret"
className="bx--header__nav-caret-right"
hidden={true}
onClick={[Function]}
>
<ForwardRef(CaretRight20)>
Expand Down
77 changes: 67 additions & 10 deletions packages/react/src/components/Masthead/HeaderNavContainer.js
Original file line number Diff line number Diff line change
Expand Up @@ -25,20 +25,75 @@ const HeaderNavContainer = ({ children }) => {
const caretRightRef = useRef(null);
const [io, setIO] = useState(null);
const [position, setPosition] = useState(0);
const buttonSize = 48; // 40px(width) + 8px(gradient)

const paginateLeft = useCallback(() => {
const moveLeft = Math.min(position + containerRef.current.offsetWidth, 0);
contentRef.current.style.left = String(moveLeft) + 'px';
setPosition(moveLeft);
let menuItems = contentRef.current.querySelectorAll(
'.bx--header__menu-bar li'
);
for (let i = 0; i < menuItems.length; i++) {
// checks if first visible item is partially hidden
if (
menuItems[i].offsetLeft + menuItems[i].offsetWidth + position >=
buttonSize
) {
// checks if there is space for remaining menuItems
if (
menuItems[i].offsetLeft + menuItems[i].offsetWidth >
containerRef.current.offsetWidth - buttonSize
) {
setPosition(
containerRef.current.offsetWidth -
menuItems[i].offsetLeft -
menuItems[i].offsetWidth -
buttonSize
);
contentRef.current.style.left =
String(
containerRef.current.offsetWidth -
menuItems[i].offsetLeft -
menuItems[i].offsetWidth -
buttonSize
) + 'px';
} else {
setPosition(0);
contentRef.current.style.left = '0px';
}
break;
}
}
}, [position]);

const paginateRight = useCallback(() => {
const moveRight = -Math.min(
-position + containerRef.current.offsetWidth,
contentRef.current.offsetWidth - containerRef.current.offsetWidth
let menuItems = contentRef.current.querySelectorAll(
'.bx--header__menu-bar li'
);
contentRef.current.style.left = String(moveRight) + 'px';
setPosition(moveRight);
for (let i = 0; i < menuItems.length; i++) {
// checks if the right most visible element is partially hidden
if (
menuItems[i].offsetLeft + menuItems[i].offsetWidth + position >
containerRef.current.offsetWidth - buttonSize
) {
// checks if there is space for remaining menuItems
if (
contentRef.current.offsetWidth - menuItems[i].offsetLeft <
containerRef.current.offsetWidth - buttonSize
) {
setPosition(
containerRef.current.offsetWidth - contentRef.current.offsetWidth
);
contentRef.current.style.left =
String(
containerRef.current.offsetWidth - contentRef.current.offsetWidth
) + 'px';
} else {
setPosition(buttonSize - menuItems[i].offsetLeft);
contentRef.current.style.left =
String(buttonSize - menuItems[i].offsetLeft) + 'px';
}
break;
}
}
}, [position]);

useEffect(() => {
Expand Down Expand Up @@ -100,14 +155,16 @@ const HeaderNavContainer = ({ children }) => {
className={`${prefix}--header__nav-caret-left`}
aria-label="Masthead left caret"
onClick={paginateLeft}
ref={caretLeftRef}>
ref={caretLeftRef}
hidden>
<CaretLeft20 />
</button>
<button
className={`${prefix}--header__nav-caret-right`}
aria-label="Masthead right caret"
onClick={paginateRight}
ref={caretRightRef}>
ref={caretRightRef}
hidden>
<CaretRight20 />
</button>
</div>
Expand Down
4 changes: 0 additions & 4 deletions packages/styles/scss/components/masthead/_masthead.scss
Original file line number Diff line number Diff line change
Expand Up @@ -390,10 +390,6 @@ $search-transition-timing: 95ms;
height: rem(24px);
width: rem(1px);
background-color: #dcdcdc;
&:focus,
&:active {
display: none;
}
}
&::after {
content: '';
Expand Down
8 changes: 8 additions & 0 deletions packages/web-components/docs/enable-rtl.md
Original file line number Diff line number Diff line change
Expand Up @@ -26,3 +26,11 @@ module.exports = {
> example implementation.
[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/examples/codesandbox/usage/rtl)

While we recommend using a module bundler by yourself for creating a RTL version of bundle optimized fully for your application (it's what above example does), you can use our pre-built version e.g. for evaluation purpose. The pre-built version can be found at `https://www.ibm.com/common/carbon-for-ibm-dotcom/latest/ibmdotcom-web-components-dotcom-shell.rtl.min.js`.

> 💡 Check our
> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/examples/codesandbox/usage/bundle-rtl)
> example implementation.
[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components/examples/codesandbox/usage/bundle-rtl)
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ LICENSE file in the root directory of this source tree.
<link rel="alternate" hreflang="{{locale}}" href="{{href}}">
{{/each}}
<script type="module">
import 'https://www.ibm.com/common/carbon-for-ibm-dotcom/v0.5.0/ibmdotcom-web-components-dotcom-shell.min.js';
import 'https://www.ibm.com/common/carbon-for-ibm-dotcom/latest/ibmdotcom-web-components-dotcom-shell.min.js';
document.addEventListener('click', event => {
if (event.target.matches('dds-locale-button')) {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,50 @@
/**
* @license
*
* Copyright IBM Corp. 2020
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

'use strict';

const fs = require('fs');
const path = require('path');
const { promisify } = require('util');
const acceptLanguageParser = require('accept-language-parser');
const express = require('express');
const Handlebars = require('handlebars');
const rtlDetect = require('rtl-detect');

const readFile = promisify(fs.readFile);
const templateCache = {};
const templateFile = path.resolve(__dirname, 'index.hbs');

const app = express();

app.get('/', async function topRoute(req, res) {
// Determins user's preferred language
const { code, region } = acceptLanguageParser.parse(req.headers['accept-language'])[0];
const dir = !rtlDetect.isRtlLang(code) ? 'ltr' : 'rtl';
// Renders the Handlebars template from the data
if (!templateCache[templateFile]) {
templateCache[templateFile] = Handlebars.compile(await readFile(templateFile, 'utf8'));
}
res.setHeader('Content-Type', 'text/html');
res.setHeader('Cache-Control', 'public, max-age=0');
res.send(
templateCache[templateFile]({
dir,
dirSuffix: dir !== 'rtl' ? '' : '.rtl',
lang: !region ? code : `${code}-${region}`,
})
);
res.end();
});

const PORT = 3000;

app.listen(PORT, () => {
console.log(`Server listening on port ${PORT}.`);
});
Loading

0 comments on commit d75f8d7

Please sign in to comment.