diff --git a/__tests__/components/__snapshots__/HeaderAuthentication.test.js.snap b/__tests__/components/__snapshots__/HeaderAuthentication.test.js.snap index 71dc8dc..383dbe8 100644 --- a/__tests__/components/__snapshots__/HeaderAuthentication.test.js.snap +++ b/__tests__/components/__snapshots__/HeaderAuthentication.test.js.snap @@ -6,23 +6,16 @@ exports[`HeaderAuthentication Rendering Render HeaderAuthentication component wi className="HeaderAuthentication__authentication" > - + BAM -   - -   - + : + + BAM-9.5.0 - - + + @@ -34,23 +27,16 @@ exports[`HeaderAuthentication Rendering Render HeaderAuthentication component wi className="HeaderAuthentication__authentication varClassName" > - + BAM -   - -   - + : + + BAM-9.5.0 - - + + @@ -62,23 +48,16 @@ exports[`HeaderAuthentication Rendering Render HeaderAuthentication component wi className="HeaderAuthentication__authentication" > - + Micetro -   - -   - + : + + Micetro-10 - - + + diff --git a/__tests__/components/__snapshots__/HeaderLogo.test.js.snap b/__tests__/components/__snapshots__/HeaderLogo.test.js.snap index 666684c..5a36a17 100644 --- a/__tests__/components/__snapshots__/HeaderLogo.test.js.snap +++ b/__tests__/components/__snapshots__/HeaderLogo.test.js.snap @@ -1,35 +1,39 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`HeaderLogo Rendering Render HeaderLogo component with default props 1`] = ` - - Gateway logo + + + Gateway logo + - Gateway + Gateway - + `; exports[`HeaderLogo Rendering Render HeaderLogo component with props 1`] = ` - - Gateway logo + + + Gateway logo + - Gateway + Gateway - + `; diff --git a/src/header/Header.less b/src/header/Header.less index ceae3b0..cc25f2d 100644 --- a/src/header/Header.less +++ b/src/header/Header.less @@ -19,6 +19,7 @@ // SOFTWARE. @import '~@bluecateng/pelagos/less/spacing'; @import '~@bluecateng/pelagos/less/colors'; +@import '~@bluecateng/pelagos/less/breakpoints'; .SideNavMenu__hamburgerIcon { .Hamburger { @@ -55,8 +56,9 @@ gap: @sp-16; &__info { - display: flex; flex-direction: row; + display: none; + .breakpoint(md, {display: flex}); } } diff --git a/src/header/HeaderAuthentication.js b/src/header/HeaderAuthentication.js index 75d1e15..274b7df 100644 --- a/src/header/HeaderAuthentication.js +++ b/src/header/HeaderAuthentication.js @@ -19,7 +19,6 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. */ -import { Link } from '@carbon/icons-react'; import PropTypes from 'prop-types'; import usePlatformData from '../hooks/usePlatformData'; @@ -46,22 +45,10 @@ const HeaderAuthentication = ({ className }) => { }`}> {authenticationAlias ? ( - <> - {authenticationService}   - -   - - {authenticationAlias} - - + + {authenticationService}:{' '} + {authenticationAlias} + ) : ( authenticationService )} diff --git a/src/header/HeaderAuthentication.less b/src/header/HeaderAuthentication.less index cd72867..2108228 100644 --- a/src/header/HeaderAuthentication.less +++ b/src/header/HeaderAuthentication.less @@ -35,13 +35,11 @@ a { text-decoration: none; - color: var(--tag-color-teal); - padding-left: @sp-02; - max-width: @sp-160; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + color: var(--link-primary); } } diff --git a/src/header/HeaderLogo.js b/src/header/HeaderLogo.js index 893dde2..48f8fba 100644 --- a/src/header/HeaderLogo.js +++ b/src/header/HeaderLogo.js @@ -25,15 +25,24 @@ import usePlatformData from '../hooks/usePlatformData'; const HeaderLogo = ({ className }) => { const { data } = usePlatformData(); - const headerLogoPath = data?.platform?.header_logo_path; + const { + header_logo_path: headerLogoPath, + gateway_version: gatewayVersion, + } = data?.platform ?? {}; return ( - - Gateway logo - Gateway - + <> + + Gateway logo + + + Gateway {gatewayVersion} + + ); }; diff --git a/stories/Header.stories.js b/stories/Header.stories.js index 3c937f2..e23bfb8 100644 --- a/stories/Header.stories.js +++ b/stories/Header.stories.js @@ -33,6 +33,7 @@ const platformMockValue = { header_logo_path: 'https://cdn.pixabay.com/photo/2017/05/09/03/46/alberta-2297204_1280.jpg', language: 'en', + gateway_version: '25.2.1', }, user: { authentication_info: { diff --git a/stories/SimplePage.stories.js b/stories/SimplePage.stories.js index 8c2d66a..0b10872 100644 --- a/stories/SimplePage.stories.js +++ b/stories/SimplePage.stories.js @@ -30,6 +30,7 @@ const platformMockValue = { header_logo_path: 'https://cdn.pixabay.com/photo/2017/05/09/03/46/alberta-2297204_1280.jpg', language: 'en', + gateway_version: '25.2.1', }, user: { authentication_info: {