Merge 79901f5 into e15d71a

src/components/ArticleCard/ArticleCard.css.js

@@ -24,7 +24,7 @@ export const ContentUI = styled('div')`
 
 export const TitleUI = styled('div')`
   color: ${getColor('link.base')};
-  line-height: 1.5;
+  line-height: 1.3;
   margin-bottom: 7px;
   transition: all 200ms linear;
 `

src/components/Frame/Frame.jsx

@@ -3,25 +3,60 @@
 import React, { useContext } from 'react'
 import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import Frame, { FrameContext } from 'react-frame-component'
-import { StyleSheetManager, withTheme, ThemeProvider } from 'styled-components'
+
+import {
+  StyleSheetManager,
+  withTheme,
+  ThemeProvider,
+  StyleSheetContext,
+} from 'styled-components'
 
 const FrameContent = ({ children, theme }) => {
   const frameContext = useContext(FrameContext)
 
+  // TODO: The following code is to fix an issue with styled-component.
+  // The underlying issue is that when using StyleSheetManager with a new target, the current global stylesheet is recreated with a new options,
+  // but the cached "names" are keep around within the new stylesheet, causing an issue that block
+  // the previous rendered components to be recreated in the new StyleSheet
+  //
+  // This issue was fixed in styled-component:
+  // https://github.com/styled-components/styled-components/pull/3159
+  // https://github.com/styled-components/styled-components/blob/master/CHANGELOG.md#unreleased
+  // it's just not released yet. Once it's is released and we upgraded styled-components everywhere, we can go back to use target="frameContext.document.head"
+  const shContext = useContext(StyleSheetContext)
+  const ssmProps = {}
+  if (shContext) {
+    const sheet = shContext.reconstructWithOptions({
+      target: frameContext.document.head,
+    })
+    sheet.names = new Map()
+    sheet.tag = null
+    ssmProps.sheet = sheet
+  } else {
+    ssmProps.target = frameContext.document.head
+  }
+
   return (
-    <StyleSheetManager target={frameContext.document.head}>
+    <StyleSheetManager {...ssmProps}>
       {theme ? (
         <ThemeProvider theme={theme}>
-          <>{children}</>
+          <React.Fragment>{children}</React.Fragment>
         </ThemeProvider>
       ) : (
-        <>{children}</>
+        <React.Fragment>{children}</React.Fragment>
       )}
     </StyleSheetManager>
   )
 }
 
-export const FrameComponent = ({ style = {}, theme, children, ...rest }) => {
+export const FrameComponent = ({
+  style = {},
+  theme,
+  children,
+  initialContent,
+  contentDidMount,
+  ...rest
+}) => {
   return (
     <div className="HSDS-FrameProvider">
       <Frame
@@ -31,6 +66,8 @@ export const FrameComponent = ({ style = {}, theme, children, ...rest }) => {
           border: 0,
           ...style,
         }}
+        initialContent={initialContent}
+        contentDidMount={contentDidMount}
         {...getValidProps(rest)}
       >
         <FrameContent theme={theme}>{children}</FrameContent>

src/components/Icon/icons.embed.js

@@ -24,37 +24,37 @@ import TickLarge from '../../icons/tick-large.svg'
 import User from '../../icons/user.svg'
 
 const ICONS = {
-  Alert,
+  alert: Alert,
   'alert-small': AlertSmall,
   'arrow-left': ArrowLeft,
   'arrow-left-small': ArrowLeftSmall,
-  Attach,
+  attach: Attach,
   attachment: Attach,
   'caret-down': CaretDown,
   chat: ChatSquare,
   'chat-square': ChatSquare,
-  Checkmark,
-  Copy,
+  checkmark: Checkmark,
+  copy: Copy,
   'cross-large': CrossLarge,
   'cross-small': CrossSmall,
   cross: CrossLarge,
-  Emoji,
-  Fullscreen,
+  emoji: Emoji,
+  fullscreen: Fullscreen,
   'helpscout-logo': HsLogo,
   'hs-logo': HsLogo,
   'image-add': ImagePlus,
-  Image,
-  Info,
+  image: Image,
+  info: Info,
   information: Info,
   meatball: Ellipsis,
-  Minimize,
-  Search,
+  minimize: Minimize,
+  search: Search,
   'search-medium': SearchMedium,
-  Spinner,
+  spinner: Spinner,
   'tick-large': TickLarge,
   'tick-small': Checkmark,
   tick: TickLarge,
-  User,
+  user: User,
 }
 
 export default ICONS

src/components/Input/Input.jsx

@@ -418,7 +418,13 @@ export class Input extends React.PureComponent {
   }
 
   getErrorMarkup() {
-    const { errorIcon, errorMessage, state, tabIndex = 0 } = this.props
+    const {
+      errorIcon,
+      errorMessage,
+      state,
+      tabIndex = 0,
+      tooltipAppendTo,
+    } = this.props
     const shouldRenderError = state === STATES.error
 
     if (!shouldRenderError) return null
@@ -433,7 +439,7 @@ export class Input extends React.PureComponent {
         <Tooltip
           animationDelay={0}
           animationDuration={0}
-          appendTo={document.body}
+          appendTo={tooltipAppendTo}
           closeOnContentClick={true}
           display="block"
           placement="top-end"
@@ -744,6 +750,7 @@ Input.defaultProps = {
   scrollLock: false,
   seamless: false,
   style: {},
+  tooltipAppendTo: document.body,
   type: 'text',
   typingThrottleInterval: 500,
   typingTimeoutDelay: 5000,
@@ -844,6 +851,8 @@ Input.propTypes = {
   suffix: PropTypes.any,
   /** Determines the input type. */
   inputType: PropTypes.string,
+  /** The parent node where to mount the error message Tooltip component. */
+  tooltipAppendTo: PropTypes.object,
   /** Determines the rate limiting interval for firing `onStartTyping`. */
   typingThrottleInterval: PropTypes.number,
   /** Determines the delay of when `onStopTyping` fires after typing stops. */

src/components/Input/Input.stories.mdx

@@ -74,7 +74,12 @@ An Input component is an enhanced version of the default HTML `<input>`. Input c
 <Preview>
   <Story name="States">
     <div>
-      <Input autoComplete="off" state="error" placeholder="Error" />
+      <Input
+        autoComplete="off"
+        state="error"
+        placeholder="Error"
+        errorMessage="Something went wrong"
+      />
       <br />
       <Input autoComplete="off" state="success" placeholder="Success" />
       <br />

src/components/MessageCard/MessageCard.Button.jsx

@@ -1,6 +1,5 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
 import { ActionButtonUI } from './MessageCard.css'
 import { noop } from '../../utilities/other'
 import Truncate from '../Truncate'
@@ -10,7 +9,7 @@ export class MessageCardButton extends React.PureComponent {
     const { children, ...rest } = this.props
 
     return (
-      <ActionButtonUI {...getValidProps(rest)}>
+      <ActionButtonUI {...rest}>
         <Truncate>{children}</Truncate>
       </ActionButtonUI>
     )

src/components/MessageCard/MessageCard.css.js

@@ -4,6 +4,7 @@ import Button from '../Button'
 import Heading from '../Heading'
 import { makeFontFamily, setFontSize } from '../../styles/utilities/font'
 import { getColor } from '../../styles/utilities/color'
+import { FONT_FAMILY } from '../../styles/configs/constants'
 const fontFamily = makeFontFamily('Barlow')
 
 export const MessageCardUI = styled(Card)`
@@ -258,5 +259,7 @@ export const ActionUI = styled('div')`
 
 export const ActionButtonUI = styled(Button)`
   ${setFontSize(14)};
+  font-family: ${FONT_FAMILY};
+  height: 54px !important;
   line-height: normal !important;
 `

src/components/MessageCard/MessageCard.stories.mdx

@@ -37,6 +37,7 @@ This component renders a Message Card Notification with (optional) Title, Subtit
         'Body',
         '<p>This <i>sentence</i> has five <u>words</u>. has five more <code class="inline-code">words</code></p><ul> <li>Point one</li><li>Somewhat unimaginatively , I&#39;ve <s>compartmentalized</s> my incomprehensibilities. Furthermore, announcements of such long-windedness are likely un-copyrightable!</li><li>Text</li></ul><p>Hol’ up, here comes a blockquote. Thanks,</p><blockquote> <p>This sentence has five words. Here are five more words. Five-word sentences are fine. But several together become monotonous. Listen to what is happening. The writing is getting boring. The sound of it drones. It’s like a stuck record. The ear demands some variety. Now listen. I vary the sentence length, and I create music. Music. The writing sings. It has a pleasant rhythm, a lilt, a harmony. I use short sentences</p></blockquote><p><b>Bold text</b> is charcoal.800 whist links are <a href="https://www.google.com/">blue.600</a></p><ol> <li>Point one</li><li>Point two is made up of two lines, of course list items can extend well beyond this, but still respect the grid</li><li>Text</li></ol><pre><code><p>let settings = HSBeaconSettings(beaconId: "cac8be08-60a3 -46e8-b22e-ed50bfcaa0aa"); HSBeacon.open(settings);</p></code></pre><p>The J&amp;G Support Team are always happy.</p>'
       )}
+      action={() => <MessageCard.Button>Click here</MessageCard.Button>}
     />
   </Story>
 </Preview>

src/components/Portal/Portal.jsx

@@ -22,6 +22,7 @@ const getMountSelector = (renderTo, body) => {
   // 2- is inside an iframe, but not the one created by storybook/cypress
   if (
     !mountSelector &&
+    !body &&
     window.parent &&
     !window.STORYBOOK_ENV &&
     !window.Cypress