element.
+ *
+ * @param text {String} text to replace variables within (if any)
+ * @param variables {Array<{id: String, display: String}>} list of variables to replace
+ */
+export const replaceMessageVariables = (text = '', variables = []) => {
+ if (variables.length === 0) {
+ return text
+ }
+
+ // Regex to match the following cases:
+ // 1) {%variableName,fallback=Fallback%}
+ // 2) {%variableName,fallback=%}
+ // 3) {%variableName%}
+ // There are 3 groups, from left: variable name, fallback presence (optional), fallback value (optional)
+ const regex = /{%([^,%]+)(,fallback=([^%]*)?)?%}/g
+
+ const replacer = (match, variableId, fallbackConfig, fallback) => {
+ const variable = variables.find(variable => variable.id === variableId)
+ if (variable) {
+ const variableText = !fallback ? variable.display : fallback
+ return `${variableText}`
+ }
+ return match
+ }
+
+ return text.replace(regex, replacer)
+}
diff --git a/src/components/MessageCard/utils/MessageCard.utils.test.js b/src/components/MessageCard/utils/MessageCard.utils.test.js
new file mode 100644
index 000000000..31696ecc7
--- /dev/null
+++ b/src/components/MessageCard/utils/MessageCard.utils.test.js
@@ -0,0 +1,56 @@
+import { replaceMessageVariables } from './MessageCard.utils'
+
+describe('MessageCard.utils', () => {
+ const variables = [
+ {
+ id: 'customer.firstName',
+ display: 'First Name',
+ },
+ {
+ id: 'customer.lastName',
+ display: 'Last Name',
+ },
+ {
+ id: 'customVariable',
+ display: 'Custom Variable',
+ },
+ ]
+
+ it('should replace variables in provided text with fallback value', () => {
+ const text = `Hi {%customer.firstName,fallback=there%} {%customer.lastName,fallback=you%}
`
+
+ const result = replaceMessageVariables(text, variables)
+
+ expect(result).toEqual(
+ `Hi there you
`
+ )
+ })
+
+ it('should replace variables in provided text with variable label when it has not fallback', () => {
+ const text = `Hi {%customer.firstName,fallback=there%} {%customVariable%}
`
+
+ const result = replaceMessageVariables(text, variables)
+
+ expect(result).toEqual(
+ `Hi there Custom Variable
`
+ )
+ })
+
+ it('should replace variables in provided text with variable label when empty fallback', () => {
+ const text = `Hi {%customer.firstName,fallback=%}
`
+
+ const result = replaceMessageVariables(text, variables)
+
+ expect(result).toEqual(
+ `Hi First Name
`
+ )
+ })
+
+ it('should NOT replace unknown variable', () => {
+ const text = `Hi {%customer.unknown,fallback=Test%}
`
+
+ const result = replaceMessageVariables(text, variables)
+
+ expect(result).toEqual(text)
+ })
+})
diff --git a/src/components/Modal/Modal.ActionFooter.css.js b/src/components/Modal/Modal.ActionFooter.css.js
index 1c99f7418..03cdbe541 100644
--- a/src/components/Modal/Modal.ActionFooter.css.js
+++ b/src/components/Modal/Modal.ActionFooter.css.js
@@ -29,6 +29,10 @@ export const ActionFooterUI = styled(Toolbar)`
export const CancelButtonUI = styled(Button)`
margin-right: auto;
+
+ &.is-theme-grey {
+ --buttonFontWeight: normal;
+ }
`
export const SecondaryButtonUI = styled(Button)`
diff --git a/src/components/Modal/Modal.ActionFooter.jsx b/src/components/Modal/Modal.ActionFooter.jsx
index 7e9781853..ac0e4fa6e 100644
--- a/src/components/Modal/Modal.ActionFooter.jsx
+++ b/src/components/Modal/Modal.ActionFooter.jsx
@@ -11,6 +11,12 @@ import {
SecondaryAlertButtonUI,
SecondaryButtonUI,
} from './Modal.ActionFooter.css'
+import {
+ THEME_GREEN,
+ THEME_BLUE,
+ THEME_RED,
+ THEME_GREY,
+} from '../Button/Button.utils'
class ModalActionFooter extends React.PureComponent {
handleCancel = e => {
@@ -32,14 +38,22 @@ class ModalActionFooter extends React.PureComponent {
}
renderPrimaryButton() {
- const { primaryButtonText, state, primaryButtonDisabled } = this.props
+ const {
+ primaryButtonText,
+ primaryButtonProps,
+ state,
+ primaryButtonDisabled,
+ } = this.props
+ let theme = THEME_BLUE
+ if (state === 'success') theme = THEME_GREEN
+ if (state === 'danger') theme = THEME_RED
+
return (
@@ -49,7 +63,12 @@ class ModalActionFooter extends React.PureComponent {
}
renderSecondaryButton() {
- const { kind, secondaryButtonText, secondaryButtonDisabled } = this.props
+ const {
+ kind,
+ secondaryButtonText,
+ secondaryButtonProps,
+ secondaryButtonDisabled,
+ } = this.props
if (!secondaryButtonText) {
return null
@@ -60,10 +79,11 @@ class ModalActionFooter extends React.PureComponent {
return (
@@ -73,7 +93,7 @@ class ModalActionFooter extends React.PureComponent {
}
renderCancelButton() {
- const { cancelText, showDefaultCancel } = this.props
+ const { cancelText, cancelProps, showDefaultCancel } = this.props
if (!(showDefaultCancel && cancelText)) {
return null
@@ -81,10 +101,12 @@ class ModalActionFooter extends React.PureComponent {
return (
{cancelText}
@@ -123,14 +145,17 @@ class ModalActionFooter extends React.PureComponent {
ModalActionFooter.defaultProps = {
cancelText: 'Cancel',
+ cancelProps: {},
'data-cy': 'ModalActionFooter',
kind: MODAL_KIND.DEFAULT,
onCancel: noop,
onPrimaryClick: noop,
onSecondaryClick: noop,
primaryButtonText: 'Save',
+ primaryButtonProps: {},
primaryButtonDisabled: false,
secondaryButtonText: null,
+ secondaryButtonProps: {},
secondaryButtonDisabled: false,
showDefaultCancel: true,
state: '',
@@ -139,6 +164,8 @@ ModalActionFooter.defaultProps = {
ModalActionFooter.propTypes = {
/** Text on cancel button */
cancelText: PropTypes.string,
+ /** Extra props on cancel button */
+ cancelProps: PropTypes.object,
/** The kind of version 2 Modal style to apply. */
kind: PropTypes.oneOf(['alert', 'default', 'branded', 'sequence']),
/** Callback on cancel button click */
@@ -149,12 +176,16 @@ ModalActionFooter.propTypes = {
onSecondaryClick: PropTypes.func,
/** Text on primary button */
primaryButtonText: PropTypes.string,
+ /** Extra props on primary button */
+ primaryButtonProps: PropTypes.object,
/** Whether the button is disabled */
primaryButtonDisabled: PropTypes.bool,
/** Text on secondary button */
secondaryButtonText: PropTypes.string,
/** Whether the button is disabled */
secondaryButtonDisabled: PropTypes.bool,
+ /** Extra props on secondary button */
+ secondaryButtonProps: PropTypes.object,
/** Show cancel button */
showDefaultCancel: PropTypes.bool,
/** State to use when styling a version 2 Modal (currently only `danger` state is custom styled). */
diff --git a/src/components/Modal/Modal.stories.mdx b/src/components/Modal/Modal.stories.mdx
index 068541a66..11a53f6ad 100644
--- a/src/components/Modal/Modal.stories.mdx
+++ b/src/components/Modal/Modal.stories.mdx
@@ -70,6 +70,7 @@ There are two versions of the Modal component, version 2 is the new standard (ve
secondaryButtonText={text('secondaryButtonText', 'Secondary')}
secondaryButtonDisabled={boolean('secondaryButtonDisabled', false)}
primaryButtonDisabled={boolean('primaryButtonDisabled', false)}
+ cancelProps={{ 'data-cy': 'NewValue' }}
state={select(
'State',
{
diff --git a/src/components/Modal/__tests__/Modal.ActionFooter.test.js b/src/components/Modal/__tests__/Modal.ActionFooter.test.js
index f0eb8fd1f..a5c84412a 100644
--- a/src/components/Modal/__tests__/Modal.ActionFooter.test.js
+++ b/src/components/Modal/__tests__/Modal.ActionFooter.test.js
@@ -86,7 +86,7 @@ describe('Buttons', () => {
const wrapper = mount(
)
- const o = wrapper.find('.c-Button.is-primary').first()
+ const o = wrapper.find('.c-Button.is-theme-blue').first()
expect(o.length).toBe(1)
expect(o.text()).toBe(buttonText)
@@ -98,7 +98,7 @@ describe('Buttons', () => {
test('Renders Primary Button', () => {
const buttonText = 'Primary'
const wrapper = mount()
- const o = wrapper.find('.c-Button.is-primary').first()
+ const o = wrapper.find('.c-Button.is-theme-blue').first()
expect(o.length).toBe(1)
expect(o.text()).toBe(buttonText)
@@ -113,7 +113,7 @@ describe('Buttons', () => {
onSecondaryClick={clickSpy}
/>
)
- const o = wrapper.find('.c-Button.is-secondary').first()
+ const o = wrapper.find('.c-Button.is-theme-grey.is-style-outlined').first()
expect(o.length).toBe(1)
expect(o.text()).toBe(buttonText)
@@ -125,7 +125,7 @@ describe('Buttons', () => {
test('Renders Secondary Button', () => {
const buttonText = 'Secondary'
const wrapper = mount()
- const o = wrapper.find('.c-Button.is-secondary').first()
+ const o = wrapper.find('.c-Button.is-theme-grey.is-style-outlined').first()
expect(o.length).toBe(1)
expect(o.text()).toBe(buttonText)
@@ -141,7 +141,7 @@ describe('Buttons', () => {
onSecondaryClick={clickSpy}
/>
)
- const o = wrapper.find('.c-Button.is-secondary').first()
+ const o = wrapper.find('.c-Button.is-theme-grey.is-style-outlined').first()
expect(o.length).toBe(1)
expect(o.text()).toBe(buttonText)
@@ -156,7 +156,7 @@ describe('Buttons', () => {
const wrapper = mount(
)
- const o = wrapper.find('.c-Button.is-default').first()
+ const o = wrapper.find('.c-Button.is-style-link').first()
expect(o.length).toBe(1)
expect(o.text()).toBe(buttonText)
@@ -168,7 +168,7 @@ describe('Buttons', () => {
test('Renders default Cancel Button', () => {
const buttonText = 'Nevermind'
const wrapper = mount()
- const o = wrapper.find('.c-Button.is-default').first()
+ const o = wrapper.find('.c-Button.is-style-link').first()
expect(o.length).toBe(1)
expect(o.text()).toBe(buttonText)
@@ -177,7 +177,7 @@ describe('Buttons', () => {
test('Hides default Cancel Button if specified', () => {
const wrapper = mount()
- const o = wrapper.find('.c-Button.is-default').first()
+ const o = wrapper.find('.c-Button.is-style-link').first()
expect(o.length).toBeFalsy()
})
diff --git a/src/components/Nav/Nav.Item.jsx b/src/components/Nav/Nav.Item.jsx
index c321e7670..da9895a8c 100644
--- a/src/components/Nav/Nav.Item.jsx
+++ b/src/components/Nav/Nav.Item.jsx
@@ -4,7 +4,6 @@ import getValidProps from '@helpscout/react-utils/dist/getValidProps'
import Flexy from '../Flexy'
import Icon from '../Icon'
import Tooltip from '../Tooltip'
-import NavLink from '../NavLink'
import classNames from 'classnames'
import { noop } from '../../utilities/other'
import {
@@ -16,6 +15,8 @@ import {
ErrorWrapperUI,
} from './Nav.css'
+import { NavLink } from 'react-router-dom'
+
export class NavItem extends React.Component {
static className = 'c-NavItem'
static contentClassName = 'c-NavItemContent'
@@ -69,23 +70,15 @@ export class NavItem extends React.Component {
)
}
- renderContent = ({ isActive }) => {
+ renderContent = () => {
const { children } = this.props
- const componentClassName = classNames(
- NavItem.contentClassName,
- isActive && 'is-active'
- )
+ const componentClassName = classNames(NavItem.contentClassName)
return (
-
+
{children}
{this.renderError()}
-
+
)
}
@@ -115,9 +108,12 @@ export class NavItem extends React.Component {
>
+ isActive={this.props.isActive || null}
+ >
+ {this.renderContent()}
+
)
}
diff --git a/src/components/Nav/Nav.css.js b/src/components/Nav/Nav.css.js
index 4e6208a2c..eb5aed11e 100644
--- a/src/components/Nav/Nav.css.js
+++ b/src/components/Nav/Nav.css.js
@@ -22,6 +22,23 @@ export const ListUI = styled('ul')`
padding: 0;
`
+export const TitleUI = styled(Text)`
+ display: block;
+ min-height: 14px;
+`
+export const IndicatorUI = styled('div')`
+ background: ${getColor('blue.500')};
+ border-radius: 9999px;
+ bottom: -1px;
+ height: 2px;
+ opacity: 0;
+ left: 0;
+ right: 0;
+ position: absolute;
+ transition: ${config.indicatorTransition};
+ will-change: opacity;
+`
+
export const ItemUI = styled('li')`
padding: 0;
transform: translateZ(0);
@@ -43,6 +60,13 @@ export const ItemUI = styled('li')`
&.is-active {
color: ${getColor('charcoal.500')};
+
+ ${TitleUI} {
+ font-weight: 500;
+ }
+ ${IndicatorUI} {
+ opacity: 1;
+ }
}
}
`
@@ -53,17 +77,6 @@ export const ContentUI = styled('div')`
text-align: center;
`
-export const TitleUI = styled(Text)`
- display: block;
- min-height: 14px;
-
- ${({ isActive }) =>
- isActive &&
- `
- font-weight: 500;
- `};
-`
-
export const GhostTitleUI = styled(Text)`
display: block;
font-weight: 500;
@@ -77,22 +90,3 @@ export const ErrorWrapperUI = styled(Flexy.Item)`
top: -10px;
width: 20px;
`
-
-export const IndicatorUI = styled('div')`
- background: ${getColor('blue.500')};
- border-radius: 9999px;
- bottom: -1px;
- height: 2px;
- opacity: 0;
- left: 0;
- right: 0;
- position: absolute;
- transition: ${config.indicatorTransition};
- will-change: opacity;
-
- ${({ isActive }) =>
- isActive &&
- `
- opacity: 1;
- `};
-`
diff --git a/src/components/Nav/Nav.test.js b/src/components/Nav/Nav.test.js
index 1ad57e874..5cc9b8414 100644
--- a/src/components/Nav/Nav.test.js
+++ b/src/components/Nav/Nav.test.js
@@ -2,7 +2,9 @@ import React from 'react'
import { mount, render } from 'enzyme'
import { Nav } from './Nav'
import Item from './Nav.Item'
+import { Link } from 'react-router-dom'
import { MemoryRouter as Router } from 'react-router-dom'
+import { NavItem } from './Nav.Item'
const wrap = fn => Component => fn({Component})
const renderWithRouter = wrap(render)
@@ -39,14 +41,16 @@ describe('Nav Sub-components', () => {
describe('Nav.Item className', () => {
test('Has default className', () => {
- const wrapper = renderWithRouter({Component}
-
- )
-}
-
-describe('className', () => {
- test('Has default className', () => {
- const wrapper = wrap()
- const el = wrapper.find('a')
-
- expect(el.hasClass('c-NavLink')).toBeTruthy()
- })
-
- test('Can render custom className', () => {
- const customClassName = 'blue'
- const wrapper = wrap()
- const el = wrapper.find('a')
-
- expect(el.hasClass(customClassName)).toBeTruthy()
- })
-
- test('Can render a custom active className', () => {
- const customClassName = 'yup'
- const isActive = () => true
- const wrapper = wrap(
-
- )
- const el = wrapper.find('a')
-
- expect(el.hasClass(customClassName)).toBeTruthy()
- })
-})
-
-describe('HTML props', () => {
- test('Can render default HTML props', () => {
- const wrapper = wrap()
- const el = wrapper.find('a')
-
- expect(el.prop('data-cy')).toBe('blue')
- })
-
- test('Does not render aria-current when inactive', () => {
- const wrapper = wrap( false} />)
-
- expect(wrapper.find('a').prop('aria-current')).toBeFalsy()
- })
-
- test('Renders aria-current when active', () => {
- const wrapper = wrap( true} />)
-
- expect(wrapper.find('a').prop('aria-current')).toBe('blue')
- })
-})
-
-describe('Style', () => {
- test('Can render custom styles', () => {
- const wrapper = wrap()
- const el = wrapper.find('a')
-
- expect(el.prop('style')).toEqual({ background: 'red' })
- })
-
- test('Can render custom styles + custom active styles', () => {
- const isActive = () => true
- const wrapper = wrap(
-
- )
- const el = wrapper.find('a')
-
- expect(el.prop('style')).toEqual({ background: 'red', display: 'flex' })
- })
-})
-
-describe('Route', () => {
- test('Passes appropriate props to Route', () => {
- const props = {
- strict: true,
- location: {},
- exact: true,
- }
- const wrapper = wrap()
- const el = wrapper.find('Route')
-
- expect(el.prop('strict')).toBe(props.strict)
- expect(el.prop('location')).toBe(props.location)
- expect(el.prop('exact')).toBe(props.exact)
- })
-
- test('Parses a to object', () => {
- const props = {
- to: { pathname: '/blue' },
- }
- const wrapper = wrap()
- const el = wrapper.find('Route')
-
- expect(el.prop('path')).toContain('/blue')
- })
-})
-
-describe('Link', () => {
- test('Renders a Link', () => {
- const wrapper = wrap()
- const el = wrapper.find('Link')
-
- expect(el.length).toBeTruthy()
- })
-
- test('Can pass an href to Link', () => {
- const wrapper = wrap()
- const el = wrapper.find('Link')
-
- expect(el.prop('href')).toBe('/blue')
- })
-})
diff --git a/src/components/NavLink/index.js b/src/components/NavLink/index.js
deleted file mode 100644
index 97e19508d..000000000
--- a/src/components/NavLink/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import NavLink from './NavLink'
-
-export default NavLink
diff --git a/src/components/Page/Page.stories.mdx b/src/components/Page/Page.stories.mdx
index c5d0a858f..7b6fa9c62 100644
--- a/src/components/Page/Page.stories.mdx
+++ b/src/components/Page/Page.stories.mdx
@@ -226,9 +226,13 @@ This component is a presentational wrapper used to render form actions.
{ left: 'left', right: 'right' },
'left'
)}
- primary={}
- secondary={}
- serious={}
+ primary={}
+ secondary={
+
+ }
+ serious={}
/>
diff --git a/src/components/Pagination/Pagination.css.js b/src/components/Pagination/Pagination.css.js
index ca1c63236..d85bd4abb 100644
--- a/src/components/Pagination/Pagination.css.js
+++ b/src/components/Pagination/Pagination.css.js
@@ -1,8 +1,6 @@
import styled from 'styled-components'
import { getColor } from '../../styles/utilities/color'
import Button from '../Button'
-import config from '../Button/Button.config'
-import { focusRing } from '../../styles/mixins/focusRing.css'
export const PaginationUI = styled.nav`
padding: 0 10px;
@@ -32,14 +30,21 @@ export const RangeUI = styled('span')`
`
export const ButtonIconUI = styled(Button)`
- ${focusRing}
- &.is-default {
- width: 26px;
+ &.is-theme-grey {
+ --focusRingOffset: -2px;
+ --buttonPadding: 0;
+ --buttonHeight: 26px;
+ --buttonMinWidth: 0;
height: 26px;
- }
- &.is-default:focus,
- &.is-default.is-focused {
- color: ${config.default.colorActive};
+
+ &.is-style-outlined {
+ --buttonTextColorHover: ${getColor('charcoal.700')};
+ --buttonBorderColorHover: transparent;
+ --buttonBorderColor: transparent;
+ }
+ &[disabled] {
+ border-color: transparent !important;
+ }
}
& + & {
diff --git a/src/components/Pagination/Pagination.jsx b/src/components/Pagination/Pagination.jsx
index 2eaf7032e..31f6c0112 100644
--- a/src/components/Pagination/Pagination.jsx
+++ b/src/components/Pagination/Pagination.jsx
@@ -114,6 +114,8 @@ const PaginationNavigation = props => {
{isNotFirstPage && (
<>
{
{
{!isLastPage && (
<>
{
-
+
}
/>
diff --git a/src/components/ScrollableContainer/ScrollableContainer.storiesHelpers.js b/src/components/ScrollableContainer/ScrollableContainer.storiesHelpers.js
index fb8b927cb..70554970a 100644
--- a/src/components/ScrollableContainer/ScrollableContainer.storiesHelpers.js
+++ b/src/components/ScrollableContainer/ScrollableContainer.storiesHelpers.js
@@ -344,7 +344,7 @@ export const SimpleBarExample = function () {
}
footer={
-
+
}
/>
diff --git a/src/components/SidePanel/SidePanel.layouts.jsx b/src/components/SidePanel/SidePanel.layouts.jsx
index 01982a368..256ed08f5 100644
--- a/src/components/SidePanel/SidePanel.layouts.jsx
+++ b/src/components/SidePanel/SidePanel.layouts.jsx
@@ -46,12 +46,12 @@ export function HeaderAndFooter({
diff --git a/src/components/SidePanel/SidePanel.storiesHelpers.js b/src/components/SidePanel/SidePanel.storiesHelpers.js
index ba22d7cad..0df42d0ad 100644
--- a/src/components/SidePanel/SidePanel.storiesHelpers.js
+++ b/src/components/SidePanel/SidePanel.storiesHelpers.js
@@ -118,7 +118,7 @@ export default function SidePanelApp() {
-