From e8382172dcfcfe310bc64e45bc9c9d6a03b848a3 Mon Sep 17 00:00:00 2001 From: Theo Date: Tue, 19 Mar 2019 14:24:21 +0000 Subject: [PATCH 1/5] [Pagination] - Updated Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bc2a9dce629..1d3639cc2bf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,6 +28,7 @@ - Adds missing type and fixes closure-scope problem for `SuperDatePicker`'s `onRefresh` callback ([#1732](https://github.com/elastic/eui/pull/1732)) - Changed `EuiBottomBar` to refer to the end of document ([#1727](https://github.com/elastic/eui/pull/1727)) - Fixed `EuiComboBox`'s calls to its `onBlur` prop ([#1739](https://github.com/elastic/eui/pull/1739)) +- Added documentation entry in `EuiPagination` for `activePage` prop. ([#1740](https://github.com/elastic/eui/pull/1740)) ## [`9.4.0`](https://github.com/elastic/eui/tree/v9.4.0) From 0153f68514e328b7bc1e51e315a2fb65c929339a Mon Sep 17 00:00:00 2001 From: Theo Date: Tue, 19 Mar 2019 21:05:34 +0000 Subject: [PATCH 2/5] Code Review - Moved Changelog entry to current master --- CHANGELOG.md | 1 - 1 file changed, 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 1d3639cc2bf..bc2a9dce629 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,6 @@ - Adds missing type and fixes closure-scope problem for `SuperDatePicker`'s `onRefresh` callback ([#1732](https://github.com/elastic/eui/pull/1732)) - Changed `EuiBottomBar` to refer to the end of document ([#1727](https://github.com/elastic/eui/pull/1727)) - Fixed `EuiComboBox`'s calls to its `onBlur` prop ([#1739](https://github.com/elastic/eui/pull/1739)) -- Added documentation entry in `EuiPagination` for `activePage` prop. ([#1740](https://github.com/elastic/eui/pull/1740)) ## [`9.4.0`](https://github.com/elastic/eui/tree/v9.4.0) From 2772032db65c330c4cd68fae179aa0e76e9819cf Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 21 Mar 2019 11:08:50 +0000 Subject: [PATCH 3/5] [META] - Converted to TS + tests --- .../__snapshots__/card_graphic.test.tsx.snap | 181 ++++++++++++++++++ src/components/card/card_graphic.js | 51 ----- src/components/card/card_graphic.test.tsx | 24 +++ src/components/card/card_graphic.tsx | 104 ++++++++++ src/components/card/index.d.ts | 1 + src/components/index.d.ts | 2 +- 6 files changed, 311 insertions(+), 52 deletions(-) create mode 100644 src/components/card/__snapshots__/card_graphic.test.tsx.snap delete mode 100644 src/components/card/card_graphic.js create mode 100644 src/components/card/card_graphic.test.tsx create mode 100644 src/components/card/card_graphic.tsx create mode 100644 src/components/card/index.d.ts diff --git a/src/components/card/__snapshots__/card_graphic.test.tsx.snap b/src/components/card/__snapshots__/card_graphic.test.tsx.snap new file mode 100644 index 00000000000..664e86fcf80 --- /dev/null +++ b/src/components/card/__snapshots__/card_graphic.test.tsx.snap @@ -0,0 +1,181 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`EuiCardGraphic is rendered 1`] = ` + + + + + + + + + + + + +`; + +exports[`EuiCardGraphic props colors blue is rendered 1`] = ` + + + + + + + + + + + + +`; + +exports[`EuiCardGraphic props colors green is rendered 1`] = ` + + + + + + + + + + + + +`; + +exports[`EuiCardGraphic props colors purple is rendered 1`] = ` + + + + + + + + + + + + +`; diff --git a/src/components/card/card_graphic.js b/src/components/card/card_graphic.js deleted file mode 100644 index 4734566d225..00000000000 --- a/src/components/card/card_graphic.js +++ /dev/null @@ -1,51 +0,0 @@ -import React from 'react'; -import PropTypes from 'prop-types'; - -const graphicColorsToCodes = [ - { color: 'blue', start: '#0079A5', end: '#3185FC', path: 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 159.656579,4 213.348797,4 C267.041016,4 288.265625,13.4882812 700,17.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', pathLight: 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z' }, // eslint-disable-line max-len - { color: 'green', start: '#017F75', end: '#00B3A4', path: 'M3.14689825e-06,13.6239758 C26.8316503,17.6239758 55.6152344,25 116.542969,25 C177.470703,25 263.972656,4 297.017578,4 C330.0625,4 348.589288,7.23392617 700.000003,9 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,13.6239758 Z', pathLight: 'M3.1372994e-06,24.4746094 C127.450326,24.4746094 108.698941,3 180.25,3 C251.801058,3 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.1372994e-06,24.4746094 Z' }, // eslint-disable-line max-len - { color: 'purple', start: '#490092', end: '#DD0A73', path: 'M0,5 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,5 Z', pathLight: 'M700,21.4746094 L700,40 L1.76214598e-12,40 L1.12746648e-08,18.4941406 C9.35694419,18.5359805 41.1418261,21.0181774 102.519531,21.4746094 C163.897236,21.9310414 216.210205,5 260.105102,5 C304,5 339.77443,21.6752984 700,21.4746094 Z' }, // eslint-disable-line max-len -]; - -export const GRAPHIC_COLORS = graphicColorsToCodes.map(({ color }) => color); - -export const EuiCardGraphic = ({ - color, -}) => { - // Set the svg gradient colors - const graphicStartColor = graphicColorsToCodes.find(w => w.color === color).start; - const graphicEndColor = graphicColorsToCodes.find(x => x.color === color).end; - const graphicSVGPath = graphicColorsToCodes.find(y => y.color === color).path; - const graphicSVGPathLight = graphicColorsToCodes.find(z => z.color === color).pathLight; - - return ( - - - - - - - - - - - - - ); -}; - -EuiCardGraphic.propTypes = { - /** - * Determines the brand-driven color codes used in the SVG - */ - color: PropTypes.oneOf(GRAPHIC_COLORS), -}; - -EuiCardGraphic.defaultProps = { - color: 'blue', -}; diff --git a/src/components/card/card_graphic.test.tsx b/src/components/card/card_graphic.test.tsx new file mode 100644 index 00000000000..be6183cbd6f --- /dev/null +++ b/src/components/card/card_graphic.test.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import { render } from 'enzyme'; + +import { EuiCardGraphic, GRAPHIC_COLORS } from './card_graphic'; + +describe('EuiCardGraphic', () => { + test('is rendered', () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + + describe('props', () => { + describe('colors', () => { + GRAPHIC_COLORS.forEach(color => { + it(`${color} is rendered`, () => { + const component = render(); + + expect(component).toMatchSnapshot(); + }); + }); + }); + }); +}); diff --git a/src/components/card/card_graphic.tsx b/src/components/card/card_graphic.tsx new file mode 100644 index 00000000000..b5da7b1ab0b --- /dev/null +++ b/src/components/card/card_graphic.tsx @@ -0,0 +1,104 @@ +import React, { HTMLAttributes, FunctionComponent } from 'react'; +import { CommonProps } from '../common'; + +export type EuiCardGraphicColor = 'blue' | 'green' | 'purple'; +interface EuiCardGraphicColorsToCode { + color: EuiCardGraphicColor; + start: string; + end: string; + path: string; + pathLight: string; +} +const graphicColorsToCodes: EuiCardGraphicColorsToCode[] = [ + { + color: 'blue', + start: '#0079A5', + end: '#3185FC', + path: + 'M3.79856147e-10,22.9906998 C127.450324,22.9906998 159.656579,4 213.348797,4 C267.041016,4 288.265625,13.4882812 700,17.0470661 L700,40 L108.569037,40 L0,40 L3.79856147e-10,22.9906998 Z', + pathLight: + 'M1.35371469e-08,7.95601173 C127.450324,7.95601173 102.647209,17.9667644 174.198268,17.9667644 C245.749327,17.9667644 298.768469,2.23349117e-13 700,1.42108547e-14 L700,37 C700,38.6568542 358.656854,40 357,40 L108.569037,40 L3,40 C1.34314575,40 -3.74826549e-09,38.6568543 -4.14273948e-09,37 L1.35371469e-08,7.95601173 Z', + }, // eslint-disable-line max-len + { + color: 'green', + start: '#017F75', + end: '#00B3A4', + path: + 'M3.14689825e-06,13.6239758 C26.8316503,17.6239758 55.6152344,25 116.542969,25 C177.470703,25 263.972656,4 297.017578,4 C330.0625,4 348.589288,7.23392617 700.000003,9 L700.000003,40 L108.56904,40 L3.14689058e-06,40 L3.14689825e-06,13.6239758 Z', + pathLight: + 'M3.1372994e-06,24.4746094 C127.450326,24.4746094 108.698941,3 180.25,3 C251.801058,3 298.76847,17.4941406 700,17.4941406 L700.000003,40 L108.569039,39.5058594 L3.01365718,39.9862837 C1.35682009,39.9938246 0.00757513054,38.6568059 3.42096185e-05,36.9999688 C1.34947659e-05,36.9954175 3.13729938e-06,36.9908661 3.13729938e-06,36.9863147 L3.1372994e-06,24.4746094 Z', + }, // eslint-disable-line max-len + { + color: 'purple', + start: '#490092', + end: '#DD0A73', + path: + 'M0,5 C85.1894531,9 157.96592,25.9853066 223.281971,25.9853638 C288.598022,25.9854211 306.490234,12.5448566 700,12.5448566 L700,40 L108.569037,40 L0,40 L0,5 Z', + pathLight: + 'M700,21.4746094 L700,40 L1.76214598e-12,40 L1.12746648e-08,18.4941406 C9.35694419,18.5359805 41.1418261,21.0181774 102.519531,21.4746094 C163.897236,21.9310414 216.210205,5 260.105102,5 C304,5 339.77443,21.6752984 700,21.4746094 Z', + }, // eslint-disable-line max-len +]; + +export const GRAPHIC_COLORS: EuiCardGraphicColor[] = graphicColorsToCodes.map( + ({ color }) => color +); + +export type EuiCardGraphicProps = HTMLAttributes & + CommonProps & { + /** + * Determines the brand-driven color codes used in the SVG + */ + color?: EuiCardGraphicColor; + }; + +export const EuiCardGraphic: FunctionComponent = ({ + color = 'blue', +}) => { + // Set the svg gradient colors + // @ts-ignore + const graphicStartColor: string = graphicColorsToCodes.find( + w => w.color === color + ).start; + // @ts-ignore + const graphicEndColor: string = graphicColorsToCodes.find( + x => x.color === color + ).end; + // @ts-ignore + const graphicSVGPath: string = graphicColorsToCodes.find( + y => y.color === color + ).path; + // @ts-ignore + const graphicSVGPathLight: string = graphicColorsToCodes.find( + z => z.color === color + ).pathLight; + + return ( + + + + + + + + + + + + + ); +}; diff --git a/src/components/card/index.d.ts b/src/components/card/index.d.ts new file mode 100644 index 00000000000..042e5b9d97c --- /dev/null +++ b/src/components/card/index.d.ts @@ -0,0 +1 @@ +export { EuiCardGraphic } from './card_graphic'; diff --git a/src/components/index.d.ts b/src/components/index.d.ts index 7897027fc80..4e934c8344f 100644 --- a/src/components/index.d.ts +++ b/src/components/index.d.ts @@ -3,7 +3,7 @@ /// /// /// -/// +/// /// /// /// From ed27f6a79fa983f70cc189ea988a0758d7a4fc12 Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 21 Mar 2019 11:26:47 +0000 Subject: [PATCH 4/5] Updated Changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index bc2a9dce629..5a9a610820c 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) +- Converted `EuiCardGraphic` to TS ([#1751](https://github.com/elastic/eui/pull/1751)) - Enhanced the build process to emit TypeScript types for the variables extracted from the themes ([#1750](https://github.com/elastic/eui/pull/1750)) ## [`9.5.0`](https://github.com/elastic/eui/tree/v9.5.0) From d9f6433cc19b3c889134737507f655942f925bd8 Mon Sep 17 00:00:00 2001 From: Theo Date: Thu, 21 Mar 2019 20:50:05 +0000 Subject: [PATCH 5/5] Added Non-null assertion operator before graphicColors --- src/components/card/card_graphic.tsx | 12 ++++-------- 1 file changed, 4 insertions(+), 8 deletions(-) diff --git a/src/components/card/card_graphic.tsx b/src/components/card/card_graphic.tsx index b5da7b1ab0b..9f28387ce13 100644 --- a/src/components/card/card_graphic.tsx +++ b/src/components/card/card_graphic.tsx @@ -55,22 +55,18 @@ export const EuiCardGraphic: FunctionComponent = ({ color = 'blue', }) => { // Set the svg gradient colors - // @ts-ignore const graphicStartColor: string = graphicColorsToCodes.find( w => w.color === color - ).start; - // @ts-ignore + )!.start; const graphicEndColor: string = graphicColorsToCodes.find( x => x.color === color - ).end; - // @ts-ignore + )!.end; const graphicSVGPath: string = graphicColorsToCodes.find( y => y.color === color - ).path; - // @ts-ignore + )!.path; const graphicSVGPathLight: string = graphicColorsToCodes.find( z => z.color === color - ).pathLight; + )!.pathLight; return (