Skip to content

Commit

Permalink
Merge pull request #837 from shopgate/PWA-2159-a11y-filter-button
Browse files Browse the repository at this point in the history
Enabled a11y in the filter feature
  • Loading branch information
alexbridge authored Oct 2, 2019
2 parents 0740ede + dded62b commit b1413f4
Show file tree
Hide file tree
Showing 169 changed files with 3,770 additions and 3,101 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -10,22 +10,20 @@ exports[`<FormatDate /> Given the component was mounted to the DOM should match
format="medium"
timestamp={123456789000}
>
<span>
Nov 29, 1973
</span>
Nov 29, 1973
</FormatDate>
</span>
<span
className="text-with-date"
>
<Translate
className=""
className={null}
params={Object {}}
role={null}
string="greeting"
>
<span
className=""
className={null}
role={null}
>
Hello
Expand All @@ -35,9 +33,7 @@ exports[`<FormatDate /> Given the component was mounted to the DOM should match
key=".0"
timestamp={123456789000}
>
<span>
Nov 29, 1973
</span>
Nov 29, 1973
</FormatDate>
</span>
</Translate>
Expand Down
25 changes: 14 additions & 11 deletions libraries/common/components/I18n/components/FormatDate/index.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment, memo } from 'react';
import PropTypes from 'prop-types';
import { i18n } from '@shopgate/engage/core';

Expand All @@ -7,27 +7,30 @@ import { i18n } from '@shopgate/engage/core';
* @param {Object} props The component props.
* @returns {JSX}
*/
const FormatDate = props => (
<span>
{FormatDate.format(props)}
</span>
const FormatDate = ({ timestamp, format }) => (
<Fragment>
{FormatDate.format({
timestamp,
format,
})}
</Fragment>
);

FormatDate.format = (props) => {
FormatDate.format = ({ timestamp, format }) => {
if (!i18n.ready) {
return props.timestamp;
return timestamp;
}

return i18n.date(props.timestamp, props.format);
return i18n.date(timestamp, format);
};

FormatDate.propTypes = {
timestamp: PropTypes.number.isRequired, // eslint-disable-line react/no-unused-prop-types
format: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
timestamp: PropTypes.number.isRequired,
format: PropTypes.string,
};

FormatDate.defaultProps = {
format: 'medium',
};

export default FormatDate;
export default memo(FormatDate);
Original file line number Diff line number Diff line change
Expand Up @@ -18,12 +18,12 @@ exports[`<FormatNumber> i18n ready should format 0.1 into 0.10 1`] = `
<I18nProvider>
<div>
<FormatNumber
className=""
className={null}
fractions={2}
number={0.1}
>
<span
className=""
className={null}
>
0.10
</span>
Expand All @@ -36,12 +36,12 @@ exports[`<FormatNumber> i18n ready should format 1 into 1 1`] = `
<I18nProvider>
<div>
<FormatNumber
className=""
className={null}
fractions={0}
number={1}
>
<span
className=""
className={null}
>
1
</span>
Expand All @@ -54,12 +54,12 @@ exports[`<FormatNumber> i18n ready should format 1 into 1.00 1`] = `
<I18nProvider>
<div>
<FormatNumber
className=""
className={null}
fractions={2}
number={1}
>
<span
className=""
className={null}
>
1.00
</span>
Expand All @@ -72,12 +72,12 @@ exports[`<FormatNumber> i18n ready should format 1 into 1.000 1`] = `
<I18nProvider>
<div>
<FormatNumber
className=""
className={null}
fractions={3}
number={1}
>
<span
className=""
className={null}
>
1.000
</span>
Expand Down
33 changes: 23 additions & 10 deletions libraries/common/components/I18n/components/FormatNumber/index.jsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,46 @@
import React from 'react';
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { i18n } from '@shopgate/engage/core';
/**
* Formats a number.
* @param {Object} props The component props.
* @returns {JSX}
*/
const FormatNumber = props => (
<span className={props.className}>
{FormatNumber.format(props)}
</span>
);
const FormatNumber = ({ className, number, fractions }) => {
if (!className) {
FormatNumber.format({
number,
fractions,
});
}

return (
<span className={className}>
{FormatNumber.format({
number,
fractions,
})}
</span>
);
};

FormatNumber.format = (props) => {
if (!i18n.ready) {
return props.number;
}

return i18n.number(props.number, props.fractions);
};

FormatNumber.propTypes = {
number: PropTypes.number.isRequired, // eslint-disable-line react/no-unused-prop-types
number: PropTypes.number.isRequired,
className: PropTypes.string,
fractions: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
fractions: PropTypes.number,
};

FormatNumber.defaultProps = {
className: '',
className: null,
fractions: 0,
};

export default FormatNumber;
export default memo(FormatNumber);
Original file line number Diff line number Diff line change
Expand Up @@ -7,45 +7,37 @@ exports[`<FormatPrice /> Given the component was mounted to the DOM should match
className="only-price"
>
<FormatPrice
className=""
className={null}
currency="EUR"
fractions={true}
price={1234.56}
>
<span
className=""
>
€1,234.56
</span>
€1,234.56
</FormatPrice>
</span>
<span
className="text-with-price"
>
<Translate
className=""
className={null}
params={Object {}}
role={null}
string="greeting"
>
<span
className=""
className={null}
role={null}
>
Hello
<FormatPrice
className=""
className={null}
currency="EUR"
forKey="price"
fractions={true}
key=".0"
price={1234.56}
>
<span
className=""
>
€1,234.56
</span>
€1,234.56
</FormatPrice>
</span>
</Translate>
Expand Down
36 changes: 22 additions & 14 deletions libraries/common/components/I18n/components/FormatPrice/index.jsx
Original file line number Diff line number Diff line change
@@ -1,35 +1,43 @@
import React from 'react';
import React, { memo } from 'react';
import PropTypes from 'prop-types';
import { i18n } from '@shopgate/engage/core';
/**
* Formats a price.
* @param {Object} props The component props.
* @returns {JSX}
*/
const FormatPrice = props => (
<span className={props.className}>
{FormatPrice.format(props)}
</span>
);
const FormatPrice = (props) => {
const { className, ...formatProps } = props;

FormatPrice.format = (props) => {
if (!className) {
return FormatPrice.format(formatProps);
}

return (
<span className={className}>
{FormatPrice.format(formatProps)}
</span>
);
};

FormatPrice.format = ({ price, currency, fractions }) => {
if (!i18n.ready) {
return props.price;
return price;
}

return i18n.price(props.price, props.currency, props.fractions);
return i18n.price(price, currency, fractions);
};

FormatPrice.propTypes = {
currency: PropTypes.string.isRequired, // eslint-disable-line react/no-unused-prop-types
price: PropTypes.number.isRequired, // eslint-disable-line react/no-unused-prop-types
currency: PropTypes.string.isRequired,
price: PropTypes.number.isRequired,
className: PropTypes.string,
fractions: PropTypes.bool, // eslint-disable-line react/no-unused-prop-types
fractions: PropTypes.bool,
};

FormatPrice.defaultProps = {
className: '',
className: null,
fractions: true,
};

export default FormatPrice;
export default memo(FormatPrice);
25 changes: 14 additions & 11 deletions libraries/common/components/I18n/components/FormatTime/index.jsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react';
import React, { Fragment, memo } from 'react';
import PropTypes from 'prop-types';
import { i18n } from '@shopgate/engage/core';

Expand All @@ -7,27 +7,30 @@ import { i18n } from '@shopgate/engage/core';
* @param {Object} props The component props.
* @returns {JSX}
*/
const FormatTime = props => (
<span>
{FormatTime.format(props)}
</span>
const FormatTime = ({ timestamp, format }) => (
<Fragment>
{FormatTime.format({
timestamp,
format,
})}
</Fragment>
);

FormatTime.format = (props) => {
FormatTime.format = ({ timestamp, format }) => {
if (!i18n.ready) {
return props.timestamp;
return timestamp;
}

return i18n.time(props.timestamp, props.format);
return i18n.time(timestamp, format);
};

FormatTime.propTypes = {
timestamp: PropTypes.number.isRequired, // eslint-disable-line react/no-unused-prop-types
format: PropTypes.string, // eslint-disable-line react/no-unused-prop-types
timestamp: PropTypes.number.isRequired,
format: PropTypes.string,
};

FormatTime.defaultProps = {
format: 'medium',
};

export default FormatTime;
export default memo(FormatTime);
Original file line number Diff line number Diff line change
Expand Up @@ -3,25 +3,23 @@
exports[`<Placeholder /> Given the component was mounted to the DOM should render 1`] = `
<I18nProvider>
<Translate
className=""
className={null}
params={Object {}}
role={null}
string="greeting"
>
<span
className=""
className={null}
role={null}
>
Hello
<Placeholder
forKey="world"
key=".0"
>
<span>
<strong>
WORLD
</strong>
</span>
<strong>
WORLD
</strong>
</Placeholder>
/
</span>
Expand Down
Loading

0 comments on commit b1413f4

Please sign in to comment.