@royaloperahouse/harmonic 0.18.3-e → 0.18.3-experiment-2

package/README.md

@@ -22,7 +22,7 @@ The Storybook for the latest version of the library is hosted at [Storybook - Ha
 
   * You can find these values at:
   
-    *AWS 'Your Applications' page -> 'Royal Opera House' -> 'Developer Access' -> 'Command line or programmatic access'*
+    *AWS access portal/ Accounts tab -> 'Royal Opera House' -> 'Access keys' -> 'Option 2: Add a profile to your AWS credentials file'*
 
 * **To deploy a preview** for demo / QA you will need:
 
@@ -151,8 +151,7 @@ To publish a snapshot use:
 ```bash
 NPM_ROH_TOKEN={NPM_TOKEN} RELEASE_VERSION={RELEASE_VERSION} yarn publish-snapshot
 ```
-
-The version published to NPM will be named, e.g. `1.42.0-a-harmonic-development`, use this to install the snapshot package in the frontend repos.
+Use the version name to install the package in a frontend repo.
 
 ### **2. To release a stable version**
 

package/dist/components/molecules/Select2/Select2.d.ts

@@ -2,7 +2,7 @@ import React, { FunctionComponent } from 'react';
 import { DropdownIndicatorProps } from 'react-select';
 import { ISelect2Props } from '../../../types/formTypes';
 export declare const DropdownIndicator: (props: DropdownIndicatorProps) => React.JSX.Element;
-interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode' | 'className'> {
+interface IWrapperProps extends Pick<ISelect2Props, 'label' | 'error' | 'width' | 'darkMode'> {
     children: React.ReactNode;
 }
 export declare const WrapperComponent: FunctionComponent<IWrapperProps>;

package/dist/components/molecules/SkipToMain/SkipToMain.style.d.ts

@@ -1,6 +1,6 @@
 interface FocusableTabProps {
     hide?: boolean;
 }
-export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
+export declare const FocusableTab: import("styled-components").StyledComponent<({ title, titleLink, onClick, onFocus, onReset, selected, iconName, iconDirection, withIcon, withTextInMobile, trimText, className, role, ariaLabel, tabLinkId, color, dataTestId, isOpen, }: import("../../../types/types").ITabProps) => import("react").JSX.Element, any, FocusableTabProps, never>;
 export declare const HiddenBlock: import("styled-components").StyledComponent<"div", any, {}, never>;
 export {};

package/dist/harmonic.cjs.development.js

@@ -5902,43 +5902,21 @@ var Accordion = function Accordion(_ref) {
   var content = React.useRef(null);
   var timeoutRef = React.useRef(null);
   var rafRef = React.useRef(null);
-  var resizeObserverRef = React.useRef(null);
   React.useEffect(function () {
-    if (content.current && initOpen) {
+    if (content != null && content.current && initOpen) {
       setTextHeight(content.current.scrollHeight + "px");
     }
-  }, [initOpen]);
+  }, [content, initOpen]);
   React.useEffect(function () {
-    var el = content.current;
-    if (!el) return;
-    if (!openAccordion) {
+    if (openAccordion && content != null && content.current) {
+      rafRef.current = window.requestAnimationFrame(function () {
+        var _content$current$scro, _content$current;
+        setTextHeight(((_content$current$scro = (_content$current = content.current) == null ? void 0 : _content$current.scrollHeight) != null ? _content$current$scro : 0) + "px");
+      });
+    } else if (!openAccordion) {
       setTextHeight('0px');
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
-      return;
     }
-    var updateHeight = function updateHeight() {
-      setTextHeight(el.scrollHeight + "px");
-    };
-    rafRef.current = window.requestAnimationFrame(updateHeight);
-    if ('ResizeObserver' in window) {
-      var ro = new ResizeObserver(updateHeight);
-      ro.observe(el);
-      resizeObserverRef.current = ro;
-      return function () {
-        ro.disconnect();
-        resizeObserverRef.current = null;
-      };
-    }
-    return function () {
-      if (rafRef.current) {
-        window.cancelAnimationFrame(rafRef.current);
-        rafRef.current = null;
-      }
-    };
-  }, [openAccordion, childrenVisibility, children]);
+  }, [openAccordion, childrenVisibility, content]);
   React.useEffect(function () {
     return function () {
       if (timeoutRef.current) {
@@ -5949,10 +5927,6 @@ var Accordion = function Accordion(_ref) {
         window.cancelAnimationFrame(rafRef.current);
         rafRef.current = null;
       }
-      if (resizeObserverRef.current) {
-        resizeObserverRef.current.disconnect();
-        resizeObserverRef.current = null;
-      }
     };
   }, []);
   var toggleAccordion = function toggleAccordion() {
@@ -6001,9 +5975,9 @@ var Accordion = function Accordion(_ref) {
     "aria-live": openAccordion ? 'polite' : 'off',
     tag: "div",
     size: "large"
-  }, childrenVisibility && (/*#__PURE__*/React__default.createElement(ChildrenContainer, {
+  }, childrenVisibility && /*#__PURE__*/React__default.createElement(ChildrenContainer, {
     isVisible: childrenVisibility
-  }, children))));
+  }, children)));
 };
 
 var _templateObject$E;
@@ -9943,35 +9917,35 @@ function Select(_ref3) {
 
 var _templateObject$1a, _templateObject2$U, _templateObject3$G, _templateObject4$y;
 var Container$4 = /*#__PURE__*/styled__default.div(_templateObject$1a || (_templateObject$1a = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  display: flex;\n  flex-direction: column;\n"])));
-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) {
+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) {
   var width = _ref.width;
   if (!width) return 'none';
   return width + "px";
 }, function (_ref2) {
   var error = _ref2.error;
-  if (error !== undefined) return "1px solid var(--color-base-errorstate)";
-  return "1px solid var(--color-base-dark-grey)";
+  if (error !== undefined) return "1px solid var(--base-color-errorstate)";
+  return "1px solid var(--base-color-dark-grey)";
 }, function (_ref3) {
   var error = _ref3.error;
-  if (error !== undefined) return "var(--color-base-errorstate)";
-  return "var(--color-base-dark-grey)";
+  if (error !== undefined) return "var(--base-color-errorstate)";
+  return "var(--base-color-dark-grey)";
 }, function (_ref4) {
   var darkMode = _ref4.darkMode;
-  if (darkMode) return "0 0 0 4px var(--color-base-lemonchiffon)";
-  return "0 0 0 3px var(--color-base-lapislazuli)";
-}, devices.mobile, devices.mobile);
-var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 24px;\n  color: ", ";\n"])), function (_ref5) {
+  if (darkMode) return "0 0 0 4px var(--base-color-lemonchiffon)";
+  return "0 0 0 3px var(--base-color-lapislazuli)";
+});
+var TextLabel$4 = /*#__PURE__*/styled__default.div(_templateObject3$G || (_templateObject3$G = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 0 0 20px;\n  color: ", ";\n"])), function (_ref5) {
   var darkMode = _ref5.darkMode;
-  if (darkMode) return "var(--color-base-white)";
-  return "var(--color-base-black)";
+  if (darkMode) return "var(--base-color-white)";
+  return "var(--base-color-black)";
 });
 var ErrorLabel$5 = /*#__PURE__*/styled__default.div(_templateObject4$y || (_templateObject4$y = /*#__PURE__*/_taggedTemplateLiteralLoose(["\n  margin: 20px 0 0;\n  color: ", ";\n"])), function (_ref6) {
   var darkMode = _ref6.darkMode;
-  if (darkMode) return "var(--color-base-white)";
-  return "var(--color-base-errorstate)";
+  if (darkMode) return "var(--base-color-white)";
+  return "var(--base-color-errorstate)";
 });
 
-var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components", "className"];
+var _excluded$o = ["label", "error", "width", "darkMode", "isSearchable", "components"];
 var DropdownIndicator = function DropdownIndicator(props) {
   return /*#__PURE__*/React__default.createElement(Select$1.components.DropdownIndicator, Object.assign({}, props), /*#__PURE__*/React__default.createElement(Icon, {
     iconName: "DropdownArrow"
@@ -9982,15 +9956,12 @@ var WrapperComponent = function WrapperComponent(_ref) {
     error = _ref.error,
     width = _ref.width,
     darkMode = _ref.darkMode,
-    children = _ref.children,
-    className = _ref.className;
-  return /*#__PURE__*/React__default.createElement(Container$4, {
-    className: className
-  }, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
+    children = _ref.children;
+  return /*#__PURE__*/React__default.createElement(Container$4, null, /*#__PURE__*/React__default.createElement("label", null, !!label && (/*#__PURE__*/React__default.createElement(TextLabel$4, {
     darkMode: darkMode,
     "data-testid": "select2-text-label"
-  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    size: 'large'
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
   }, label))), /*#__PURE__*/React__default.createElement(SelectWrapper$1, {
     width: width,
     error: error,
@@ -9998,8 +9969,8 @@ var WrapperComponent = function WrapperComponent(_ref) {
   }, children)), !!error && (/*#__PURE__*/React__default.createElement(ErrorLabel$5, {
     darkMode: darkMode,
     "data-testid": "select2-error-label"
-  }, /*#__PURE__*/React__default.createElement(BodyCopyHarmonic, {
-    size: 'medium'
+  }, /*#__PURE__*/React__default.createElement(AltHeader, {
+    level: 6
   }, error))));
 };
 /**
@@ -10025,14 +9996,12 @@ var SelectComponent = function SelectComponent(_ref2) {
     _ref2$isSearchable = _ref2.isSearchable,
     isSearchable = _ref2$isSearchable === void 0 ? false : _ref2$isSearchable,
     components = _ref2.components,
-    className = _ref2.className,
     selectProps = _objectWithoutPropertiesLoose(_ref2, _excluded$o);
   return /*#__PURE__*/React__default.createElement(WrapperComponent, {
     label: label,
     error: error,
     width: width,
-    darkMode: darkMode,
-    className: className
+    darkMode: darkMode
   }, /*#__PURE__*/React__default.createElement(Select$1__default, Object.assign({}, selectProps, {
     components: _extends({
       DropdownIndicator: DropdownIndicator,