@royaloperahouse/chord 1.7.0-a-chord-development → 1.7.0-b-chord-development

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## [1.7.0-b] DEVELOPMENT
+- SearchBar: Disable input and fix overflow
+
+## [1.6.2]
+- ImpactHeader: add alt text for sponsors logo custom image 
+
 ## [1.6.1]
 - PageHeadingHighlight component: update exports
 

package/dist/chord.cjs.development.js

@@ -2661,6 +2661,7 @@ var SponsorshipStyledIframe = /*#__PURE__*/styled__default.div(_templateObject2$
 var DEFAULT_SPONSORSHIP_IFRAME = 'https://static.roh.org.uk/rolex/v3/rolex.html?size=80';
 var DEFAULT_SPONSORSHIP_TITLE = 'rolex';
 var DEFAULT_DATA_ROH = 'ImgAdvert';
+var DEFAULT_SPONSORSHIP_ALT_TEXT = "Sponsor's logo";
 
 var Sponsorship = function Sponsorship(_ref) {
   var _ref$src = _ref.src,
@@ -2669,10 +2670,12 @@ var Sponsorship = function Sponsorship(_ref) {
       dataRoh = _ref$dataRoh === void 0 ? DEFAULT_DATA_ROH : _ref$dataRoh,
       _ref$title = _ref.title,
       title = _ref$title === void 0 ? DEFAULT_SPONSORSHIP_TITLE : _ref$title,
+      _ref$altText = _ref.altText,
+      altText = _ref$altText === void 0 ? DEFAULT_SPONSORSHIP_ALT_TEXT : _ref$altText,
       isCustomImage = _ref.isCustomImage;
   if (isCustomImage) return /*#__PURE__*/React__default.createElement(CustomImage, {
     src: src,
-    alt: title,
+    alt: altText,
     "data-roh": dataRoh,
     "data-testid": "custom-sponsor"
   });
@@ -3722,10 +3725,10 @@ var Tabs = function Tabs(_ref) {
 };
 
 var _templateObject$t, _templateObject2$e, _templateObject3$7, _templateObject4$4, _templateObject5$1, _templateObject6$1;
-var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100px;\n  background-color: var(--base-color-white);\n\n  @media ", " {\n    column-gap: 12px;\n    height: 80px;\n  }\n"])), devices.mobile);
+var SearchBarContainer = /*#__PURE__*/styled__default.div(_templateObject$t || (_templateObject$t = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: row;\n  column-gap: 64px;\n  justify-content: space-between;\n  align-items: center;\n  height: 100%;\n  background-color: var(--base-color-white);\n\n  @media ", " {\n    column-gap: 12px;\n  }\n"])), devices.mobile);
 var SvgContainerSearch = /*#__PURE__*/styled__default.div(_templateObject2$e || (_templateObject2$e = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-xlarge-gap);\n    height: var(--navigation-xlarge-gap);\n  }\n"])));
 var SvgContainerClose = /*#__PURE__*/styled__default.div(_templateObject3$7 || (_templateObject3$7 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  svg {\n    width: var(--navigation-large-gap);\n    height: var(--navigation-large-gap);\n  }\n\n  :hover {\n    cursor: pointer;\n    && svg path {\n      fill: var(--base-color-navigation);\n    }\n  }\n"])));
-var InputContainer = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-search);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--base-color-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n"])), devices.mobile);
+var InputContainer = /*#__PURE__*/styled__default.div(_templateObject4$4 || (_templateObject4$4 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: blue;\n  width: 100%;\n\n  input {\n    font-size: var(--font-size-search);\n    font-family: var(--font-family-search);\n    border: none;\n    border-radius: 0;\n    outline: none;\n    outline-color: var(--base-color-white);\n    height: 48px;\n    box-sizing: border-box;\n    width: 100%;\n    -webkit-appearance: none;\n\n    &.search-input {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n    }\n\n    @media ", " {\n      column-gap: 24px;\n    }\n  }\n\n  input:disabled {\n    background-color: var(--base-color-white)\n  }\n"])), devices.mobile);
 var SearchLinkContainer = /*#__PURE__*/styled__default.div(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  @media ", " {\n    display: none;\n  }\n"])), devices.mobile);
 var SearchArrowContainer = /*#__PURE__*/styled__default.a(_templateObject6$1 || (_templateObject6$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: none;\n  height: 24px;\n  width: 24px;\n\n  @media ", " {\n    display: block;\n  }\n"])), devices.mobile);
 
@@ -3792,14 +3795,15 @@ var SearchBar = function SearchBar(_ref) {
     "data-testid": "input-html",
     ref: inputRef,
     className: "search-input",
-    placeholder: "Search for anything ROH...",
+    placeholder: "Our search tool is currently unavailable due to necessary maintenance.",
     type: "text",
     onChange: function onChange(e) {
       onChangeHandler(e);
     },
     onKeyPress: function onKeyPress(e) {
       return handleKeypress(e, searchValue);
-    }
+    },
+    disabled: true
   })), showSearchLink && /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(SearchLinkContainer, {
     "data-testid": "search-button"
   }, /*#__PURE__*/React__default.createElement(TextLink, {