diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap index fa2d2b98016..bc6e6e3a2f5 100644 --- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap +++ b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap @@ -38185,6 +38185,7 @@ exports[`Storyshots Components|Dotcom Shell Default (footer language only) 1`] = }, ] } + labelText="Choose a language" >
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + @@ -64471,6 +65090,7 @@ exports[`Storyshots Components|Dotcom Shell With micro footer (language only) 1` }, ] } + labelText="Choose a language" /> } links={Array []} @@ -81821,6 +82441,7 @@ exports[`Storyshots Components|Dotcom Shell With short footer (language only) 1` }, ] } + labelText="Choose a language" >
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + @@ -89687,6 +90926,7 @@ exports[`Storyshots Components|Footer Default Language Only 1`] = ` }, ] } + labelText="Choose a language" >
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + @@ -90701,6 +92559,7 @@ exports[`Storyshots Components|Footer Micro Language Only 1`] = ` }, ] } + labelText="Choose a language" /> } links={Array []} @@ -91477,6 +93336,7 @@ exports[`Storyshots Components|Footer Short Language Only 1`] = ` }, ] } + labelText="Choose a language" >
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ + + diff --git a/packages/react/src/components/Footer/Footer.js b/packages/react/src/components/Footer/Footer.js index e2e29b549a5..23c92d325b2 100644 --- a/packages/react/src/components/Footer/Footer.js +++ b/packages/react/src/components/Footer/Footer.js @@ -30,6 +30,7 @@ const Footer = ({ langCode, disableLocaleButton, languageOnly, + labelText, languageItems, languageInitialItem, languageCallback, @@ -112,6 +113,7 @@ const Footer = ({ localeButtonAria, displayLang, languageOnly, + labelText, languageItems, languageInitialItem, languageCallback @@ -128,6 +130,7 @@ const Footer = ({ localeButtonAria, displayLang, languageOnly, + labelText, languageItems, languageInitialItem, languageCallback @@ -146,6 +149,7 @@ const Footer = ({ * @param {string} localeButtonAria String for the aria label * @param {string} displayLang display language for locale button * @param {boolean} languageOnly Switches to the language selector + * @param {string} labelText Label text for locale/language selector * @param {Array} languageItems Array of language data for the dropdown * @param {object} languageInitialItem Initial language selected * @param {Function} languageCallback Callback function when language is selected @@ -157,6 +161,7 @@ function _loadLocaleLanguage( localeButtonAria, displayLang, languageOnly, + labelText, languageItems, languageInitialItem, languageCallback @@ -167,6 +172,7 @@ function _loadLocaleLanguage( items={languageItems} initialSelectedItem={languageInitialItem} callback={languageCallback} + labelText={labelText} /> ); } else if (!disableLocaleButton) { @@ -225,18 +231,24 @@ Footer.propTypes = { disableLocaleButton: PropTypes.bool, /** - * `true` to switch the locale button with a language dropdown. + * `true` to switch the locale button with a language selector. */ languageOnly: PropTypes.bool, /** - * Array of items for the language dropdown, - * utilizes the [Carbon ComboBox](https://react.carbondesignsystem.com/?path=/story/combobox--default). + * Label text for combobox/select + */ + labelText: PropTypes.string, + + /** + * Array of items for the language selector, + * uses [Carbon ComboBox](https://react.carbondesignsystem.com/?path=/story/combobox--combobox) for desktop, + * and [Carbon Select](https://react.carbondesignsystem.com/?path=/story/select--default) for tablet/mobile. */ languageItems: PropTypes.arrayOf(PropTypes.object), /** - * Sets the initial language dropdown value when the component is loaded. + * Sets the initial language selector value when the component is loaded. * The default is the first item. */ languageInitialItem: PropTypes.shape({ @@ -245,7 +257,7 @@ Footer.propTypes = { }), /** - * Callback function onChange of the language dropdown. + * Callback function onChange of the language selector. */ languageCallback: PropTypes.func, }; diff --git a/packages/react/src/components/Footer/LanguageSelector.js b/packages/react/src/components/Footer/LanguageSelector.js index a10a92e6197..91e9f92eb54 100644 --- a/packages/react/src/components/Footer/LanguageSelector.js +++ b/packages/react/src/components/Footer/LanguageSelector.js @@ -4,12 +4,13 @@ * This source code is licensed under the Apache-2.0 license found in the * LICENSE file in the root directory of this source tree. */ - import React, { useState, useEffect, useRef } from 'react'; import ComboBox from '../../internal/vendor/carbon-components-react/components/ComboBox/ComboBox'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings'; import PropTypes from 'prop-types'; import root from 'window-or-global'; +import Select from '../../internal/vendor/carbon-components-react/components/Select/Select'; +import SelectItem from '../../internal/vendor/carbon-components-react/components/SelectItem/SelectItem'; import settings from 'carbon-components/es/globals/js/settings'; const { stablePrefix } = ddsSettings; @@ -18,7 +19,12 @@ const { prefix } = settings; /** * Footer language selector component. */ -const LanguageSelector = ({ items, initialSelectedItem, callback }) => { +const LanguageSelector = ({ + items, + initialSelectedItem, + callback, + labelText, +}) => { const { ref } = useClickOutside(); const [selectedItem, setSelectedItem] = useState( @@ -78,14 +84,39 @@ const LanguageSelector = ({ items, initialSelectedItem, callback }) => { selectedItem={selectedItem} direction="top" placeholder="" + titleText={labelText} /> + ); }; +/** + * Iterate through and render a list of select items + * + * @param {Array} items A list of items to be rendered + * @returns {object} JSX object + */ + +function renderSelectItems(items) { + const selectItems = []; + items.map(item => { + selectItems.push(); + }); + return selectItems; +} + LanguageSelector.propTypes = { /** - * Array of items to pass into ComboBox. + * Array of items to pass into Select. */ items: PropTypes.arrayOf( PropTypes.shape({ @@ -95,7 +126,7 @@ LanguageSelector.propTypes = { ), /** - * Initial selected item for the ComboBox. + * Initial selected item for the Select. */ initialSelectedItem: PropTypes.shape({ id: PropTypes.string, @@ -106,12 +137,18 @@ LanguageSelector.propTypes = { * Callback function when an item is selected. */ callback: PropTypes.func, + + /** + * Label text + */ + labelText: PropTypes.string, }; LanguageSelector.defaultProps = { items: null, initialSelectedItem: null, callback: () => {}, + labelText: 'Choose a language', }; export default LanguageSelector; diff --git a/packages/react/src/components/Footer/README.stories.mdx b/packages/react/src/components/Footer/README.stories.mdx index 10f2e966e53..6e6fe0995e1 100644 --- a/packages/react/src/components/Footer/README.stories.mdx +++ b/packages/react/src/components/Footer/README.stories.mdx @@ -70,9 +70,9 @@ type: - [Tall](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/master/packages/react/src/components/Footer/__data__/footer-menu.json) - [Short](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/master/packages/react/src/components/Footer/__data__/footer-thin.json) -### Language Dropdown +### Language selector -The option to use a language dropdown is available in lieu of the locale +The option to use a language selector is available in lieu of the locale button/selector. Example implementation: diff --git a/packages/styles/scss/components/footer/_language-selector.scss b/packages/styles/scss/components/footer/_language-selector.scss index 28037ab4f31..53fc5c271e9 100644 --- a/packages/styles/scss/components/footer/_language-selector.scss +++ b/packages/styles/scss/components/footer/_language-selector.scss @@ -7,6 +7,7 @@ @import 'carbon-components/scss/components/combo-box/combo-box'; @import 'carbon-components/scss/components/list-box/list-box'; +@import 'carbon-components/scss/components/select/select'; @import 'carbon-components/scss/components/text-input/text-input'; @import '../../themes/expressive/components/combo-box'; @import '../../themes/expressive/components/list-box'; @@ -24,9 +25,11 @@ ) { @include combo-box; @include listbox; + @include select; @include text-input; @include combo-box-expressive; @include list-box-expressive; + @include select-expressive; @include text-input-expressive; @include carbon--make-col-ready; @include carbon--make-col(4, 4); @@ -39,6 +42,7 @@ .#{$prefix}--language-selector { max-width: 100%; width: 100%; + height: 3rem; @include carbon--breakpoint('md') { min-width: carbon--mini-units(27); @@ -92,6 +96,42 @@ .#{$prefix}--list-box__menu { z-index: 1; } + + .#{$prefix}--select-input__wrapper { + width: 100%; + + .#{$prefix}--select-input { + width: 100%; + max-width: 100%; + height: $layout-04; + } + } + + // Toggle views depending on breakpoint + //