@royaloperahouse/chord 2.1.0-d-development-sans-swiper → 2.1.0-e-chord-development

package/CHANGELOG.md

@@ -1,9 +1,16 @@
-
 ## [2.1.0]
 - Convert Pagination to href instead of React Router Link
 
 ## [2.0.0]
 - Remove swiper dependency
+## [1.28.0]
+- Add new RadioGroup component
+- Progress: add the steps
+- Compact header: hide CTA if the prop is undefined
+- Compact header: change highlight color for Stream variant
+
+## [1.27.1]
+- Fixed failing test on timer component
 
 ## [1.27.0]
 - ContentSummary component can now be configured to be fully clickable

package/dist/chord.cjs.development.js

@@ -2512,11 +2512,11 @@ var ElapsedProgressView = /*#__PURE__*/styled__default.div(_templateObject2$3 ||
   var progress = _ref3.progress;
   return progress;
 }, function (_ref4) {
-  var isFirstStep = _ref4.isFirstStep;
-  return isFirstStep ? '32px' : '0';
+  var isProgressWithSteps = _ref4.isProgressWithSteps;
+  return isProgressWithSteps ? '34px' : '0';
 }, devices.mobile, function (_ref5) {
-  var isFirstStep = _ref5.isFirstStep;
-  return isFirstStep ? '24px' : '0';
+  var isProgressWithSteps = _ref5.isProgressWithSteps;
+  return isProgressWithSteps ? '24px' : '0';
 });
 var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$2 || (_templateObject3$2 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  opacity: 0.5;\n  flex: ", ";\n"])), function (_ref6) {
   var color = _ref6.color;
@@ -2526,13 +2526,13 @@ var PendingProgressView = /*#__PURE__*/styled__default.div(_templateObject3$2 ||
   return progress;
 });
 var StepsWrapper = /*#__PURE__*/styled__default.div(_templateObject4$1 || (_templateObject4$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin-top: 10px;\n  display: flex;\n  justify-content: space-between;\n  font-family: var(--font-family-body);\n  font-feature-settings: var(--font-feature-settings-body);\n  text-transform: var(--text-transform-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\n  @media ", " {\n    font-size: var(--font-size-body-2);\n    font-weight: var(--font-weight-body-2);\n    letter-spacing: var(--letter-spacing-body-2);\n    line-height: var(--line-height-body-2);\n  }\n"])), devices.mobile);
-var StepWrapper = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  color: ", ";\n  margin-right: 32px;\n\n  @media ", " {\n    margin-right: 24px;\n  }\n\n  &:first-child,\n  &:last-child {\n    margin: 0;\n  }\n"])), function (_ref8) {
+var StepWrapper = /*#__PURE__*/styled__default.div(_templateObject5 || (_templateObject5 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  visibility: ", ";\n  color: ", ";\n"])), function (_ref8) {
   var isVisible = _ref8.isVisible;
   return isVisible ? "visible" : 'hidden';
 }, function (_ref9) {
   var isActive = _ref9.isActive;
   return isActive ? "var(--base-color-black)" : 'var(--base-color-midgrey)';
-}, devices.mobile);
+});
 
 var Progress = function Progress(_ref) {
   var _ref$progress = _ref.progress,
@@ -2542,23 +2542,25 @@ var Progress = function Progress(_ref) {
       elapsedLineColor = _ref.elapsedLineColor,
       pendingLineColor = _ref.pendingLineColor,
       steps = _ref.steps;
+  var stepsQuantity = steps != null && steps.quantity && steps.quantity <= 20 ? steps.quantity : 20;
+  var currentStep = steps != null && steps.current && steps.current <= 20 ? steps.current : 20;
 
   var renderSteps = function renderSteps() {
     if (!steps) return [];
-    return Array.from(Array(steps.quantity), function (_, index) {
+    return Array.from(Array(stepsQuantity), function (_, index) {
       return index + 1;
     }).map(function (step) {
       return /*#__PURE__*/React__default.createElement(StepWrapper, {
         key: "progress-step-" + step,
-        isVisible: step <= steps.current,
-        isActive: step === steps.current
-      }, step, " / ", steps.quantity);
+        isVisible: step <= currentStep,
+        isActive: step === currentStep
+      }, step, " / ", stepsQuantity);
     });
   };
 
   var getProgressValue = function getProgressValue() {
     if (steps) {
-      return 100 / (steps.quantity - 1) * (steps.current - 1);
+      return 100 / (stepsQuantity - 1) * (currentStep - 1);
     }
 
     return progress;
@@ -2570,7 +2572,7 @@ var Progress = function Progress(_ref) {
     "data-testid": "progress-container"
   }, /*#__PURE__*/React__default.createElement(ElapsedProgressView, {
     color: elapsedLineColor,
-    isFirstStep: (steps == null ? void 0 : steps.current) === 1,
+    isProgressWithSteps: !!steps,
     progress: progressValue,
     "data-testid": "elapsedprogress"
   }), /*#__PURE__*/React__default.createElement(PendingProgressView, {
@@ -3393,35 +3395,38 @@ var textStyles = /*#__PURE__*/styled.css(_templateObject2$b || (_templateObject2
   var theme = _ref3.theme;
   return theme.spacing[7];
 });
-var Input = /*#__PURE__*/styled__default.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  width: 196px;\n  height: 48px;\n  padding: 0px 20px;\n\n  border: 1px solid ", ";\n  outline: none;\n\n  ", "\n\n  :disabled {\n    background-color: ", ";\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  :focus {\n    outline: ", "};\n  }\n"])), textStyles, function (_ref4) {
-  var theme = _ref4.theme;
-  return theme.colors.darkgrey;
+var Input = /*#__PURE__*/styled__default.input(_templateObject3$6 || (_templateObject3$6 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", "\n\n  width: ", ";\n  height: 48px;\n  padding: 0px 20px;\n\n  border: 1px solid ", ";\n  outline: none;\n\n  ", "\n\n  :disabled {\n    background-color: ", ";\n    border: 1px solid transparent;\n    outline: none;\n  }\n\n  :focus {\n    outline: ", "};\n  }\n"])), textStyles, function (_ref4) {
+  var width = _ref4.width;
+  return width ? width + 'px' : '196px';
 }, function (_ref5) {
-  var error = _ref5.error,
-      theme = _ref5.theme;
+  var theme = _ref5.theme;
+  return theme.colors.darkgrey;
+}, function (_ref6) {
+  var error = _ref6.error,
+      theme = _ref6.theme;
   if (!error) return;
   return "\n      border: 1px solid " + theme.colors.error + ";\n    ";
-}, function (_ref6) {
-  var theme = _ref6.theme;
-  return theme.colors.lightgrey;
 }, function (_ref7) {
-  var darkMode = _ref7.darkMode,
-      theme = _ref7.theme;
-  if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
-  return "3px solid " + theme.colors.lapisLazuli;
-});
-var TextLabel = /*#__PURE__*/styled__default.p(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref8) {
+  var theme = _ref7.theme;
+  return theme.colors.lightgrey;
+}, function (_ref8) {
   var darkMode = _ref8.darkMode,
       theme = _ref8.theme;
-  return darkMode ? theme.colors.white : theme.colors.black;
+  if (darkMode) return "4px solid " + theme.colors.lemonChiffon;
+  return "3px solid " + theme.colors.lapisLazuli;
 });
-var ErrorLabel = /*#__PURE__*/styled__default.p(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref9) {
+var TextLabel = /*#__PURE__*/styled__default.p(_templateObject4$3 || (_templateObject4$3 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref9) {
   var darkMode = _ref9.darkMode,
       theme = _ref9.theme;
+  return darkMode ? theme.colors.white : theme.colors.black;
+});
+var ErrorLabel = /*#__PURE__*/styled__default.p(_templateObject5$1 || (_templateObject5$1 = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  ", ";\n\n  color: ", ";\n"])), textStyles, function (_ref10) {
+  var darkMode = _ref10.darkMode,
+      theme = _ref10.theme;
   return darkMode ? theme.colors.white : theme.colors.error;
 });
 
-var _excluded$6 = ["label", "error", "darkMode"];
+var _excluded$6 = ["label", "error", "darkMode", "width"];
 /**
  * A text field component, that wraps around the native `<input />` element
  * and adds some extra information around it (i.e. a text label and an error label).
@@ -3466,6 +3471,7 @@ var TextField = function TextField(_ref) {
       error = _ref.error,
       _ref$darkMode = _ref.darkMode,
       darkMode = _ref$darkMode === void 0 ? false : _ref$darkMode,
+      width = _ref.width,
       inputProps = _objectWithoutPropertiesLoose(_ref, _excluded$6);
 
   return /*#__PURE__*/React__default.createElement(TextFieldContainer, null, /*#__PURE__*/React__default.createElement("label", null, /*#__PURE__*/React__default.createElement(TextLabel, {
@@ -3475,7 +3481,8 @@ var TextField = function TextField(_ref) {
     type: "text",
     error: error,
     darkMode: darkMode,
-    "data-testid": "text-field-input"
+    "data-testid": "text-field-input",
+    width: width
   }, inputProps))), error ? /*#__PURE__*/React__default.createElement(ErrorLabel, {
     darkMode: darkMode,
     "data-testid": "text-field-error-label"