Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[META] - Converted EuiCardGraphic to TS + tests #1751

Merged
merged 5 commits into from
Mar 21, 2019
Merged

[META] - Converted EuiCardGraphic to TS + tests #1751

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
e838217
[Pagination] - Updated Changelog
Mar 19, 2019
0153f68
Code Review - Moved Changelog entry to current master
Mar 19, 2019
2772032
[META] - Converted to TS + tests
Mar 21, 2019
ed27f6a
Updated Changelog
Mar 21, 2019
d9f6433
Added Non-null assertion operator before graphicColors
Mar 21, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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)
Expand Down
181 changes: 181 additions & 0 deletions src/components/card/__snapshots__/card_graphic.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,181 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`EuiCardGraphic is rendered 1`] = `
<svg
height="40"
preserveAspectRatio="none"
viewBox="0 0 300 40"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
id="wave-blue"
x1="0%"
y1="50%"
y2="50%"
>
<stop
offset="0%"
stop-color="#0079A5"
/>
<stop
offset="40%"
stop-color="#3185FC"
/>
</linearGradient>
</defs>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="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"
fill="#C4C4C4"
fill-opacity=".13"
fill-rule="evenodd"
/>
<path
d="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"
fill="url(#wave-blue)"
fill-opacity=".83"
fill-rule="evenodd"
/>
</g>
</svg>
`;

exports[`EuiCardGraphic props colors blue is rendered 1`] = `
<svg
height="40"
preserveAspectRatio="none"
viewBox="0 0 300 40"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
id="wave-blue"
x1="0%"
y1="50%"
y2="50%"
>
<stop
offset="0%"
stop-color="#0079A5"
/>
<stop
offset="40%"
stop-color="#3185FC"
/>
</linearGradient>
</defs>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="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"
fill="#C4C4C4"
fill-opacity=".13"
fill-rule="evenodd"
/>
<path
d="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"
fill="url(#wave-blue)"
fill-opacity=".83"
fill-rule="evenodd"
/>
</g>
</svg>
`;

exports[`EuiCardGraphic props colors green is rendered 1`] = `
<svg
height="40"
preserveAspectRatio="none"
viewBox="0 0 300 40"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
id="wave-green"
x1="0%"
y1="50%"
y2="50%"
>
<stop
offset="0%"
stop-color="#017F75"
/>
<stop
offset="40%"
stop-color="#00B3A4"
/>
</linearGradient>
</defs>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="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"
fill="#C4C4C4"
fill-opacity=".13"
fill-rule="evenodd"
/>
<path
d="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"
fill="url(#wave-green)"
fill-opacity=".83"
fill-rule="evenodd"
/>
</g>
</svg>
`;

exports[`EuiCardGraphic props colors purple is rendered 1`] = `
<svg
height="40"
preserveAspectRatio="none"
viewBox="0 0 300 40"
width="100%"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<linearGradient
id="wave-purple"
x1="0%"
y1="50%"
y2="50%"
>
<stop
offset="0%"
stop-color="#490092"
/>
<stop
offset="40%"
stop-color="#DD0A73"
/>
</linearGradient>
</defs>
<g
fill="none"
fill-rule="evenodd"
>
<path
d="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"
fill="#C4C4C4"
fill-opacity=".13"
fill-rule="evenodd"
/>
<path
d="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"
fill="url(#wave-purple)"
fill-opacity=".83"
fill-rule="evenodd"
/>
</g>
</svg>
`;
51 changes: 0 additions & 51 deletions src/components/card/card_graphic.js
View file
Open in desktop

This file was deleted.

24 changes: 24 additions & 0 deletions src/components/card/card_graphic.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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(<EuiCardGraphic />);

expect(component).toMatchSnapshot();
});

describe('props', () => {
describe('colors', () => {
GRAPHIC_COLORS.forEach(color => {
it(`${color} is rendered`, () => {
const component = render(<EuiCardGraphic color={color} />);

expect(component).toMatchSnapshot();
});
});
});
});
});
100 changes: 100 additions & 0 deletions src/components/card/card_graphic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
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<SVGElement> &
CommonProps & {
/**
* Determines the brand-driven color codes used in the SVG
*/
color?: EuiCardGraphicColor;
};

export const EuiCardGraphic: FunctionComponent<EuiCardGraphicProps> = ({
color = 'blue',
}) => {
// Set the svg gradient colors
const graphicStartColor: string = graphicColorsToCodes.find(
w => w.color === color
)!.start;
const graphicEndColor: string = graphicColorsToCodes.find(
x => x.color === color
)!.end;
const graphicSVGPath: string = graphicColorsToCodes.find(
y => y.color === color
)!.path;
const graphicSVGPathLight: string = graphicColorsToCodes.find(
z => z.color === color
)!.pathLight;

return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="40"
viewBox="0 0 300 40"
preserveAspectRatio="none">
<defs>
<linearGradient id={`wave-${color}`} x1="0%" y1="50%" y2="50%">
<stop offset="0%" stopColor={graphicStartColor} />
<stop offset="40%" stopColor={graphicEndColor} />
</linearGradient>
</defs>
<g fill="none" fillRule="evenodd">
<path
fill="#C4C4C4"
fillOpacity=".13"
fillRule="evenodd"
d={graphicSVGPathLight}
/>
<path
fill={`url(#wave-${color})`}
fillOpacity=".83"
fillRule="evenodd"
d={graphicSVGPath}
/>
</g>
</svg>
);
};
1 change: 1 addition & 0 deletions src/components/card/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { EuiCardGraphic } from './card_graphic';
2 changes: 1 addition & 1 deletion src/components/index.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
/// <reference path="./button/index.d.ts" />
/// <reference path="./call_out/index.d.ts" />
/// <reference path="./code/index.d.ts" />
/// <reference path="./combo_box/index.d.ts" />
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

combo_box was referenced twice here

/// <reference path="./card/index.d.ts" />
/// <reference path="./combo_box/index.d.ts" />
/// <reference path="./context_menu/index.d.ts" />
/// <reference path="./date_picker/index.d.ts" />
Expand Down