@royaloperahouse/harmonic 0.18.3-h → 0.18.3-i

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/components/molecules/PeopleListing/PeopleListing.d.ts +1 -1
  2. package/dist/components/molecules/Select2/Select2.d.ts +1 -1
  3. package/dist/harmonic.cjs.development.js +54 -106
  4. package/dist/harmonic.cjs.development.js.map +1 -1
  5. package/dist/harmonic.cjs.production.min.js +1 -1
  6. package/dist/harmonic.cjs.production.min.js.map +1 -1
  7. package/dist/harmonic.esm.js +54 -106
  8. package/dist/harmonic.esm.js.map +1 -1
  9. package/dist/types/card.d.ts +2 -0
  10. package/dist/types/types.d.ts +2 -0
  11. package/package.json +1 -1
package/dist/components/molecules/PeopleListing/PeopleListing.d.ts CHANGED
@@ -1,4 +1,4 @@
1
1
  import React from 'react';
2
2
  import { IPeopleListing } from '../../../types/types';
3
- declare const PeopleListing: ({ roles, className }: IPeopleListing) => React.JSX.Element;
3
+ declare const PeopleListing: ({ roles, className, defaultHeadshot }: IPeopleListing) => React.JSX.Element;
4
4
  export default PeopleListing;
package/dist/components/molecules/Select2/Select2.d.ts CHANGED
@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
2
2
  import { DropdownIndicatorProps } from 'react-select';
3
3
  import { ISelect2Props } from '../../../types/formTypes';
4
4
  export declare const DropdownIndicator: (props: DropdownIndicatorProps) => React.JSX.Element;
5
- interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode' | 'className'> {
5
+ interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode'> {
6
6
  children: React.ReactNode;
7
7
  }
8
8
  export declare const WrapperComponent: FunctionComponent<IWrapperProps>;
package/dist/harmonic.cjs.development.js CHANGED
@@ -5990,69 +5990,21 @@ var Accordion = function Accordion(_ref) {
5990
5990
  var content = React.useRef(null);
5991
5991
  var timeoutRef = React.useRef(null);
5992
5992
  var rafRef = React.useRef(null);
5993
- var resizeObserverRef = React.useRef(null);
5994
- var intervalRef = React.useRef(null);
5995
5993
  React.useEffect(function () {
5996
- if (content.current && initOpen) {
5994
+ if (content != null && content.current && initOpen) {
5997
5995
  setTextHeight(content.current.scrollHeight + "px");
5998
5996
  }
5999
- }, [initOpen]);
5997
+ }, [content, initOpen]);
6000
5998
  React.useEffect(function () {
6001
- var cleanup = function cleanup() {
6002
- return undefined;
6003
- };
6004
- var el = content.current;
6005
- if (!el) return cleanup;
6006
- if (!openAccordion) {
5999
+ if (openAccordion && content != null && content.current) {
6000
+ rafRef.current = window.requestAnimationFrame(function () {
6001
+ var _content$current$scro, _content$current;
6002
+ setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
6003
+ });
6004
+ } else if (!openAccordion) {
6007
6005
  setTextHeight('0px');
6008
- if (resizeObserverRef.current) {
6009
- resizeObserverRef.current.disconnect();
6010
- resizeObserverRef.current = null;
6011
- }
6012
- if (intervalRef.current) {
6013
- window.clearInterval(intervalRef.current);
6014
- intervalRef.current = null;
6015
- }
6016
- if (rafRef.current) {
6017
- window.cancelAnimationFrame(rafRef.current);
6018
- rafRef.current = null;
6019
- }
6020
- return cleanup;
6021
- }
6022
- var updateHeight = function updateHeight() {
6023
- setTextHeight(el.scrollHeight + "px");
6024
- };
6025
- rafRef.current = window.requestAnimationFrame(updateHeight);
6026
- if (typeof ResizeObserver !== 'undefined') {
6027
- var ro = new ResizeObserver(updateHeight);
6028
- ro.observe(el);
6029
- resizeObserverRef.current = ro;
6030
- intervalRef.current = window.setInterval(updateHeight, 200);
6031
- return function () {
6032
- ro.disconnect();
6033
- resizeObserverRef.current = null;
6034
- if (intervalRef.current) {
6035
- window.clearInterval(intervalRef.current);
6036
- intervalRef.current = null;
6037
- }
6038
- if (rafRef.current) {
6039
- window.cancelAnimationFrame(rafRef.current);
6040
- rafRef.current = null;
6041
- }
6042
- };
6043
6006
  }
6044
- intervalRef.current = window.setInterval(updateHeight, 200);
6045
- return function () {
6046
- if (intervalRef.current) {
6047
- window.clearInterval(intervalRef.current);
6048
- intervalRef.current = null;
6049
- }
6050
- if (rafRef.current) {
6051
- window.cancelAnimationFrame(rafRef.current);
6052
- rafRef.current = null;
6053
- }
6054
- };
6055
- }, [openAccordion, childrenVisibility, children]);
6007
+ }, [openAccordion, childrenVisibility, content]);
6056
6008
  React.useEffect(function () {
6057
6009
  return function () {
6058
6010
  if (timeoutRef.current) {
@@ -6063,14 +6015,6 @@ var Accordion = function Accordion(_ref) {
6063
6015
  window.cancelAnimationFrame(rafRef.current);
6064
6016
  rafRef.current = null;
6065
6017
  }
6066
- if (resizeObserverRef.current) {
6067
- resizeObserverRef.current.disconnect();
6068
- resizeObserverRef.current = null;
6069
- }
6070
- if (intervalRef.current) {
6071
- window.clearInterval(intervalRef.current);
6072
- intervalRef.current = null;
6073
- }
6074
6018
  };
6075
6019
  }, []);
6076
6020
  var toggleAccordion = function toggleAccordion() {
@@ -8744,25 +8688,31 @@ var PersonDetails = function PersonDetails(_ref) {
8744
8688
  };
8745
8689
 
8746
8690
  var _templateObject$$, _templateObject2$O;
8747
- var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n"])));
8691
+ var PersonWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject$$ || (_templateObject$$ = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: grid;\n grid-template-columns: 82px 1fr;\n grid-template-areas: 'headshot role-person';\n grid-column-gap: 16px;\n\n &.person-headshot-grayscale img {\n filter: grayscale(100%);\n }\n"])));
8748
8692
  var HeadshotWrapper = /*#__PURE__*/styled__default.div(_templateObject2$O || (_templateObject2$O = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n grid-area: headshot;\n img {\n width: 82px;\n height: 82px;\n }\n"])));
8749
8693
 
8750
8694
  var PersonCard = function PersonCard(_ref) {
8751
8695
  var role = _ref.role,
8752
- className = _ref.className;
8696
+ className = _ref.className,
8697
+ defaultHeadshot = _ref.defaultHeadshot;
8753
8698
  var hasHeadshot = React__default.useMemo(function () {
8754
- var _role$people;
8699
+ var _role$people, _firstPerson$headshot;
8755
8700
  var firstPerson = (_role$people = role.people) == null ? void 0 : _role$people[0];
8756
- return Boolean((firstPerson == null ? void 0 : firstPerson.headshot) && firstPerson.useHeadshot);
8701
+ var roleHeadshot = (_firstPerson$headshot = firstPerson == null ? void 0 : firstPerson.headshot) != null ? _firstPerson$headshot : defaultHeadshot;
8702
+ return Boolean(roleHeadshot && (firstPerson == null ? void 0 : firstPerson.useHeadshot));
8757
8703
  }, [role]);
8758
- if (hasHeadshot) return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
8759
- className: className
8760
- }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
8761
- src: role.people[0].headshot,
8762
- alt: role.people[0].name
8763
- })), /*#__PURE__*/React__default.createElement(PersonDetails, {
8764
- role: role
8765
- }));
8704
+ if (hasHeadshot) {
8705
+ var _role$people$0$headsh;
8706
+ var headshot = (_role$people$0$headsh = role.people[0].headshot) != null ? _role$people$0$headsh : defaultHeadshot;
8707
+ return /*#__PURE__*/React__default.createElement(PersonWrapper$1, {
8708
+ className: className
8709
+ }, /*#__PURE__*/React__default.createElement(HeadshotWrapper, null, /*#__PURE__*/React__default.createElement("img", {
8710
+ src: headshot,
8711
+ alt: role.people[0].name
8712
+ })), /*#__PURE__*/React__default.createElement(PersonDetails, {
8713
+ role: role
8714
+ }));
8715
+ }
8766
8716
  return /*#__PURE__*/React__default.createElement(PersonDetails, {
8767
8717
  role: role,
8768
8718
  className: className
@@ -8771,14 +8721,17 @@ var PersonCard = function PersonCard(_ref) {
8771
8721
 
8772
8722
  var PeopleListing = function PeopleListing(_ref) {
8773
8723
  var roles = _ref.roles,
8774
- className = _ref.className;
8724
+ className = _ref.className,
8725
+ defaultHeadshot = _ref.defaultHeadshot;
8775
8726
  return /*#__PURE__*/React__default.createElement(PeopleListingGrid, {
8776
8727
  className: className
8777
8728
  }, roles.map(function (role, index) {
8778
8729
  return /*#__PURE__*/React__default.createElement(GridItem, {
8779
8730
  key: role.name + "-" + index
8780
8731
  }, /*#__PURE__*/React__default.createElement(PersonCard, {
8781
- role: role
8732
+ role: role,
8733
+ className: className,
8734
+ defaultHeadshot: defaultHeadshot
8782
8735
  }));
8783
8736
  }));
8784
8737
  };
@@ -10062,35 +10015,35 @@ function Select(_ref3) {
10062
10015
 
10063
10016
  var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
10064
10017
  var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: column;\n"])));
10065
- var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n\n .harmonic-select__control--is-focused {\n border-color: var(--color-base-dark-grey);\n box-shadow: ", ";\n }\n\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n\n .harmonic-select__indicator {\n font-size: 25px;\n padding: 0;\n margin-right: 12px;\n color: var(--color-base-black);\n svg {\n height: 1em;\n width: 1em;\n color: inherit;\n path {\n fill: currentColor;\n color: inherit;\n }\n }\n }\n\n .harmonic-select__single-value,\n .harmonic-select__placeholder {\n margin-left: 0;\n margin-right: 0;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n\n @media ", " {\n font-size: 17px;\n }\n }\n\n .harmonic-select__placeholder {\n color: var(--color-base-dark-grey);\n }\n\n .harmonic-select__single-value {\n color: var(--color-base-black);\n }\n\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--color-base-light-grey);\n background: var(--color-base-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--color-base-dark-grey);\n }\n }\n\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--color-base-dark-grey);\n background: var(--color-base-light-grey);\n }\n\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n\n .harmonic-select__option {\n padding: 10px 20px;\n font-family: var(--font-family-sans);\n font-weight: 400;\n font-size: 19px;\n line-height: 26px;\n letter-spacing: -0.5px;\n color: var(--color-base-black);\n\n @media ", " {\n font-size: 17px;\n }\n\n &:active,\n &.harmonic-select__option--is-focused {\n background: var(--color-base-mid-grey);\n }\n }\n\n .harmonic-select__option--is-selected {\n color: var(--color-base-black);\n background: none;\n }\n\n .harmonic-select__input-container {\n margin: 0;\n padding-top: 0;\n padding-bottom: 0;\n color: var(--color-base-black);\n }\n\n .harmonic-select__menu-notice {\n color: var(--color-base-black);\n padding: 20px 20px;\n text-align: left;\n }\n\n .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
10018
+ var SelectWrapper$1 = /*#__PURE__*/styled__default.div(_templateObject2$U || (_templateObject2$U = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n position: relative;\n width: auto;\n max-width: ", ";\n\n .harmonic-select__control {\n min-height: 48px;\n border-radius: 0;\n transition: none;\n border: ", ";\n &:hover {\n border-color: ", ";\n }\n }\n .harmonic-select__control--is-focused {\n border-color: var(--base-color-dark-grey);\n box-shadow: ", ";\n }\n .harmonic-select__control--menu-is-open {\n .harmonic-select__indicator {\n svg {\n transform: rotate(180deg);\n }\n }\n }\n .harmonic-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 .harmonic-select__single-value,\n .harmonic-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 .harmonic-select__placeholder {\n color: var(--base-color-dark-grey);\n }\n .harmonic-select__single-value {\n color: var(--base-color-black);\n }\n .harmonic-select__value-container {\n padding-left: 20px;\n padding-right: 20px;\n padding-top: 1px;\n padding-bottom: 0px;\n }\n .harmonic-select--is-disabled {\n .harmonic-select__control {\n border: 1px solid var(--base-color-light-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__indicator,\n .harmonic-select__single-value {\n color: var(--base-color-dark-grey);\n }\n }\n .harmonic-select__menu {\n margin-top: -1px;\n box-shadow: none;\n border-radius: 0;\n border: 1px solid var(--base-color-dark-grey);\n background: var(--base-color-light-grey);\n }\n .harmonic-select__menu-list {\n padding-top: 0;\n padding-bottom: 0;\n }\n .harmonic-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 &.harmonic-select__option--is-focused {\n background: var(--base-color-mid-grey);\n }\n }\n .harmonic-select__option--is-selected {\n color: var(--base-color-black);\n background: none;\n }\n .harmonic-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 .harmonic-select__menu-notice {\n padding: 20px 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 .harmonic-select__menu-notice--loading {\n font-style: italic;\n }\n"])), function (_ref) {
10066
10019
  var width = _ref.width;
10067
10020
  if (!width) return 'none';
10068
10021
  return width + "px";
10069
10022
  }, function (_ref2) {
10070
10023
  var error = _ref2.error;
10071
- if (error !== undefined) return "1px solid var(--color-base-errorstate)";
10072
- return "1px solid var(--color-base-dark-grey)";
10024
+ if (error !== undefined) return "1px solid var(--base-color-errorstate)";
10025
+ return "1px solid var(--base-color-dark-grey)";
10073
10026
  }, function (_ref3) {
10074
10027
  var error = _ref3.error;
10075
- if (error !== undefined) return "var(--color-base-errorstate)";
10076
- return "var(--color-base-dark-grey)";
10028
+ if (error !== undefined) return "var(--base-color-errorstate)";
10029
+ return "var(--base-color-dark-grey)";
10077
10030
  }, function (_ref4) {
10078
10031
  var darkMode = _ref4.darkMode;
10079
- if (darkMode) return "0 0 0 1px var(--color-state-medium)";
10080
- return "0 0 0 1px var(--color-state-focused)";
10081
- }, devices.mobile, devices.mobile);
10082
- var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 24px;\n color: ", ";\n\n @media ", " {\n margin: 0 0 12px;\n }\n"])), function (_ref5) {
10032
+ if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
10033
+ return "0 0 0 3px var(--base-color-lapislazuli)";
10034
+ });
10035
+ var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 0 0 20px;\n color: ", ";\n"])), function (_ref5) {
10083
10036
  var darkMode = _ref5.darkMode;
10084
- if (darkMode) return "var(--color-base-white)";
10085
- return "var(--color-base-black)";
10086
- }, devices.mobile);
10037
+ if (darkMode) return "var(--base-color-white)";
10038
+ return "var(--base-color-black)";
10039
+ });
10087
10040
  var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n margin: 20px 0 0;\n color: ", ";\n"])), function (_ref6) {
10088
10041
  var darkMode = _ref6.darkMode;
10089
- if (darkMode) return "var(--color-base-white)";
10090
- return "var(--color-base-errorstate)";
10042
+ if (darkMode) return "var(--base-color-white)";
10043
+ return "var(--base-color-errorstate)";
10091
10044
  });
10092
10045
 
10093
- var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
10046
+ var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
10094
10047
  var DropdownIndicator = function DropdownIndicator(props) {
10095
10048
  return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
10096
10049
  iconName: "DropdownArrow"
@@ -10101,15 +10054,12 @@ var WrapperComponent = function WrapperComponent(_ref) {
10101
10054
  error = _ref.error,
10102
10055
  width = _ref.width,
10103
10056
  darkMode = _ref.darkMode,
10104
- children = _ref.children,
10105
- className = _ref.className;
10106
- return /*#__PURE__*/React__default.createElement(Container$4, {
10107
- className: className
10108
- }, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
10057
+ children = _ref.children;
10058
+ return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
10109
10059
  darkMode: darkMode,
10110
10060
  "data-testid": "select2-text-label"
10111
- }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
10112
- size: "large"
10061
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
10062
+ level: 6
10113
10063
  }, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
10114
10064
  width: width,
10115
10065
  error: error,
@@ -10117,8 +10067,8 @@ var WrapperComponent = function WrapperComponent(_ref) {
10117
10067
  }, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
10118
10068
  darkMode: darkMode,
10119
10069
  "data-testid": "select2-error-label"
10120
- }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
10121
- size: "medium"
10070
+ }, /*#__PURE__*/React__default.createElement(AltHeader, {
10071
+ level: 6
10122
10072
  }, error))));
10123
10073
  };
10124
10074
  /**
@@ -10144,14 +10094,12 @@ var SelectComponent = function SelectComponent(_ref2) {
10144
10094
  _ref2$isSearchable = _ref2.isSearchable,
10145
10095
  isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
10146
10096
  components = _ref2.components,
10147
- className = _ref2.className,
10148
10097
  selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
10149
10098
  return /*#__PURE__*/React__default.createElement(WrapperComponent, {
10150
10099
  label: label,
10151
10100
  error: error,
10152
10101
  width: width,
10153
- darkMode: darkMode,
10154
- className: className
10102
+ darkMode: darkMode
10155
10103
  }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
10156
10104
  components: _extends({
10157
10105
  DropdownIndicator: DropdownIndicator,