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

package/CHANGELOG.md

@@ -1,3 +1,6 @@
+## [2.2.10]
+- Add Highlight text for the Card component
+
 ## [2.2.9]
 - Add Auxiliary button component and extend cards with it
 

package/dist/chord.cjs.development.js

@@ -12,6 +12,7 @@ var moment = _interopDefault(require('moment'));
 var server = require('react-dom/server');
 var Select$1 = require('react-select');
 var Select$1__default = _interopDefault(Select$1);
+var Select$2 = _interopDefault(require('react-select/async'));
 var Modal = _interopDefault(require('react-modal'));
 var ScrollLock = _interopDefault(require('react-scrolllock'));
 
@@ -8697,7 +8698,7 @@ function Select(_ref3) {
 
 var _templateObject$19, _templateObject2$Q, _templateObject3$I, _templateObject4$y;
 var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$19 || (_templateObject$19 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .chord-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .chord-select__control--is-focused {\n    border-color: var(--base-color-darkgrey);\n    box-shadow: ", ";\n  }\n  .chord-select__indicator-separator {\n    display: none;\n  }\n  .chord-select__control--menu-is-open {\n    .chord-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .chord-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .chord-select__single-value,\n  .chord-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .chord-select__placeholder {\n    color: var(--base-color-darkgrey);\n  }\n  .chord-select__single-value {\n    color: var(--base-color-black);\n  }\n  .chord-select__value-container {\n    padding-left: 20px;\n    padding-right: 15px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .chord-select--is-disabled {\n    .chord-select__control {\n      border: 1px solid var(--base-color-lightgrey);\n      background: var(--base-color-lightgrey);\n    }\n    .chord-select__indicator,\n    .chord-select__single-value {\n      color: var(--base-color-darkgrey);\n    }\n  }\n  .chord-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-darkgrey);\n    background: var(--base-color-lightgrey);\n  }\n  .chord-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .chord-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.chord-select__option--is-focused {\n      background: var(--base-color-midgrey);\n    }\n  }\n  .chord-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .chord-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .chord-select__menu-notice {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-darkgrey);\n    text-align: left;\n  }\n"])), function (_ref) {
+var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$Q || (_templateObject2$Q = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  position: relative;\n  width: auto;\n  max-width: ", ";\n\n  .chord-select__control {\n    min-height: 48px;\n    border-radius: 0;\n    transition: none;\n    border: ", ";\n    &:hover {\n      border-color: ", ";\n    }\n  }\n  .chord-select__control--is-focused {\n    border-color: var(--base-color-darkgrey);\n    box-shadow: ", ";\n  }\n  .chord-select__control--menu-is-open {\n    .chord-select__indicator {\n      svg {\n        transform: rotate(180deg);\n      }\n    }\n  }\n  .chord-select__indicator {\n    font-size: 25px;\n    padding: 0;\n    margin-right: 12px;\n    color: var(--base-color-black);\n    svg {\n      height: 1em;\n      width: 1em;\n      color: inherit;\n      path {\n        fill: currentColor;\n        color: inherit;\n      }\n    }\n  }\n  .chord-select__single-value,\n  .chord-select__placeholder {\n    margin-left: 0;\n    margin-right: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n  }\n  .chord-select__placeholder {\n    color: var(--base-color-darkgrey);\n  }\n  .chord-select__single-value {\n    color: var(--base-color-black);\n  }\n  .chord-select__value-container {\n    padding-left: 20px;\n    padding-right: 15px;\n    padding-top: 1px;\n    padding-bottom: 0px;\n  }\n  .chord-select--is-disabled {\n    .chord-select__control {\n      border: 1px solid var(--base-color-lightgrey);\n      background: var(--base-color-lightgrey);\n    }\n    .chord-select__indicator,\n    .chord-select__single-value {\n      color: var(--base-color-darkgrey);\n    }\n  }\n  .chord-select__menu {\n    margin-top: -1px;\n    box-shadow: none;\n    border-radius: 0;\n    border: 1px solid var(--base-color-darkgrey);\n    background: var(--base-color-lightgrey);\n  }\n  .chord-select__menu-list {\n    padding-top: 0;\n    padding-bottom: 0;\n  }\n  .chord-select__option {\n    padding: 10px 20px;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n    &:active,\n    &.chord-select__option--is-focused {\n      background: var(--base-color-midgrey);\n    }\n  }\n  .chord-select__option--is-selected {\n    color: var(--base-color-black);\n    background: none;\n  }\n  .chord-select__input-container {\n    margin: 0;\n    padding-top: 0;\n    padding-bottom: 0;\n    font-family: var(--font-family-altHeader);\n    font-feature-settings: var(--font-feature-settings-altHeader);\n    font-size: var(--font-size-altHeader-6);\n    font-weight: var(--font-weight-altHeader-6);\n    letter-spacing: var(--letter-spacing-altHeader-6);\n    line-height: var(--line-height-altHeader-6);\n    text-transform: var(--text-transform-altHeader);\n    color: var(--base-color-black);\n  }\n  .chord-select__menu-notice {\n    padding: 10px 20px;\n    font-family: var(--font-family-body);\n    font-feature-settings: var(--font-feature-settings-body);\n    font-size: var(--font-size-body-1);\n    font-weight: var(--font-weight-body-1);\n    letter-spacing: var(--letter-spacing-body-1);\n    line-height: var(--line-height-body-1);\n    text-transform: var(--text-transform-body);\n    color: var(--base-color-black);\n    text-align: left;\n  }\n  .chord-select__menu-notice--loading {\n    font-style: italic;\n  }\n"])), function (_ref) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + 'px';
@@ -8730,6 +8731,28 @@ var DropdownIndicator = function DropdownIndicator(props) {
     iconName: "DropdownArrow"
   }));
 };
+var WrapperComponent = function WrapperComponent(_ref) {
+  var label = _ref.label,
+      error = _ref.error,
+      width = _ref.width,
+      darkMode = _ref.darkMode,
+      children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
+    darkMode: darkMode,
+    "data-testid": "select2-text-label"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
+    width: width,
+    error: error,
+    darkMode: darkMode
+  }, children)), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
+    darkMode: darkMode,
+    "data-testid": "select2-error-label"
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
+  }, error)));
+};
 /**
  * A Select2 component wraps react-select with Chord styling and additional elements like
  * text and error labels. This should be used just as usual react-select component.
@@ -8745,42 +8768,67 @@ var DropdownIndicator = function DropdownIndicator(props) {
  * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
  */
 
+var SelectComponent = function SelectComponent(_ref2) {
+  var label = _ref2.label,
+      error = _ref2.error,
+      width = _ref2.width,
+      _ref2$darkMode = _ref2.darkMode,
+      darkMode = _ref2$darkMode === void 0 ? false : _ref2$darkMode,
+      selectProps = _objectWithoutPropertiesLoose(_ref2, ["label", "error", "width", "darkMode"]);
+
+  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
+    label: label,
+    error: error,
+    width: width,
+    darkMode: darkMode
+  }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({
+    components: {
+      DropdownIndicator: DropdownIndicator,
+      LoadingIndicator: undefined,
+      IndicatorSeparator: undefined
+    },
+    className: "chord-select-container",
+    classNamePrefix: "chord-select"
+  }, selectProps)));
+};
+
+/**
+ * The Select2Async component is similar to Select 2, but uses react-select async
+ * component for select instead of regular react-select component. This can be used
+ * for selects with dynamically loaded options, live search components etc.
+ *
+ * # Error state
+ * An error label will be shown below the select if the `error` prop exists.
+ * Also select will be rendered with a red border. An empty string can be passed to
+ * render only error state without error message.
+ *
+ * # Light / Dark mode
+ * The component can also adapt its styles for light / dark mode. If you want this component
+ * to be rendered on a dark / coloured background, you can use the `darkMode` prop.
+ */
 
-var SelectComponent = function SelectComponent(_ref) {
+var SelectComponent$1 = function SelectComponent(_ref) {
   var label = _ref.label,
       error = _ref.error,
       width = _ref.width,
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
-      _ref$isSearchable = _ref.isSearchable,
-      isSearchable = _ref$isSearchable === void 0 ? false : _ref$isSearchable,
-      _ref$placeholder = _ref.placeholder,
-      placeholder = _ref$placeholder === void 0 ? 'Please select' : _ref$placeholder,
-      selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable", "placeholder"]);
+      selectProps = _objectWithoutPropertiesLoose(_ref, ["label", "error", "width", "darkMode", "isSearchable"]);
 
-  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && /*#__PURE__*/React__default.createElement(TextLabel$3, {
-    darkMode: darkMode,
-    "data-testid": "select2-text-label"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, label)), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
-    width: width,
+  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
+    label: label,
     error: error,
+    width: width,
     darkMode: darkMode
-  }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({
+  }, /*#__PURE__*/React__default.createElement(Select$2, Object.assign({
     components: {
-      DropdownIndicator: DropdownIndicator
+      DropdownIndicator: DropdownIndicator,
+      LoadingIndicator: undefined,
+      IndicatorSeparator: undefined
     },
-    isSearchable: isSearchable,
-    placeholder: placeholder,
     className: "chord-select-container",
     classNamePrefix: "chord-select"
-  }, selectProps)))), !!error && /*#__PURE__*/React__default.createElement(ErrorLabel$4, {
-    darkMode: darkMode,
-    "data-testid": "select2-error-label"
-  }, /*#__PURE__*/React__default.createElement(AltHeader, {
-    level: 6
-  }, error)));
+  }, selectProps)));
 };
 
 var _templateObject$1a;
@@ -10649,6 +10697,7 @@ exports.SectionSplitter = SectionSplitter;
 exports.SectionTitle = SectionTitle;
 exports.Select = Select;
 exports.Select2 = SelectComponent;
+exports.Select2Async = SelectComponent$1;
 exports.Sponsorship = Sponsorship;
 exports.StatusBanner = StatusBanner;
 exports.Stepper = Component;