Skip to content
Permalink
Browse files

feat(triangle): add ability to use float values for triangle width/he…

…ight
  • Loading branch information...
lifeiscontent authored and bhough committed Oct 20, 2018
1 parent 43f071c commit 5634c642795c464349b8a0efcb9d666ca8df57a8
Showing with 1,484 additions and 7 deletions.
  1. +3 −2 docs/assets/polished.js
  2. +13 −0 src/mixins/test/__snapshots__/triangle.test.js.snap
  3. +21 −3 src/mixins/test/triangle.test.js
  4. +3 −2 src/mixins/triangle.js
  5. +1,444 −0 yarn.lock
@@ -1279,6 +1279,7 @@


var reverseDirection = ['bottom', 'left', 'top', 'right'];
var NUMBER_AND_FLOAT = /(\d*\.?\d*)/;
/**
* CSS to represent triangle with any pointing direction with an optional background color. Accepts number or px values for height and width.
*
@@ -1314,8 +1315,8 @@
foregroundColor = _ref.foregroundColor,
_ref$backgroundColor = _ref.backgroundColor,
backgroundColor = _ref$backgroundColor === void 0 ? 'transparent' : _ref$backgroundColor;
var widthAndUnit = [parseFloat(width), String(width).replace(/\d+/g, '') || 'px'];
var heightAndUnit = [parseFloat(height), String(height).replace(/\d+/g, '') || 'px'];
var widthAndUnit = [parseFloat(width), String(width).replace(NUMBER_AND_FLOAT, '') || 'px'];
var heightAndUnit = [parseFloat(height), String(height).replace(NUMBER_AND_FLOAT, '') || 'px'];

if (isNaN(heightAndUnit[0]) || isNaN(widthAndUnit[0])) {
throw new Error('Passed an invalid value to `height` or `width`. Please provide a pixel based unit');
@@ -39,6 +39,19 @@ Object {
}
`;

exports[`triangle should generate a proper triangle when passed all parameters with units on width/height with float values 1`] = `
Object {
"borderBottomColor": "black",
"borderLeftColor": "red",
"borderRightColor": "black",
"borderStyle": "solid",
"borderTopColor": "black",
"borderWidth": "5.25em 0 5.25em 20.5em",
"height": "0",
"width": "0",
}
`;

exports[`triangle should generate a proper triangle when passed string values for height and width 1`] = `
Object {
"borderBottomColor": "black",
@@ -26,6 +26,18 @@ describe('triangle', () => {
}).toMatchSnapshot()
})

it('should generate a proper triangle when passed all parameters with units on width/height with float values', () => {
expect({
...triangle({
foregroundColor: 'red',
backgroundColor: 'black',
pointingDirection: 'right',
height: '10.5em',
width: '20.5em',
}),
}).toMatchSnapshot()
})

it('should default to a transparent background when not passed a backgroundColor', () => {
expect({
...triangle({
@@ -113,7 +125,9 @@ describe('triangle', () => {
height: 20,
width: 10,
})
}).toThrow("Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.")
}).toThrow(
"Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.",
)
})

it('should throw an error when pointingDirection does not match corresponding options', () => {
@@ -125,7 +139,9 @@ describe('triangle', () => {
width: 10,
pointingDirection: false,
})
}).toThrow("Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.")
}).toThrow(
"Passed invalid argument to triangle, please pass correct pointingDirection e.g. 'right'.",
)
})

it('should throw an error when height or width is not a unit based value.', () => {
@@ -136,6 +152,8 @@ describe('triangle', () => {
width: 'inherit',
pointingDirection: 'bottom',
})
}).toThrow('Passed an invalid value to `height` or `width`. Please provide a pixel based unit')
}).toThrow(
'Passed an invalid value to `height` or `width`. Please provide a pixel based unit',
)
})
})
@@ -34,6 +34,7 @@ const getBorderWidth = (

// needed for border-color
const reverseDirection = ['bottom', 'left', 'top', 'right']
const NUMBER_AND_FLOAT = /(\d*\.?\d*)/

/**
* CSS to represent triangle with any pointing direction with an optional background color. Accepts number or px values for height and width.
@@ -71,11 +72,11 @@ function triangle({
}: TriangleConfiguration): Styles {
const widthAndUnit = [
parseFloat(width),
String(width).replace(/\d+/g, '') || 'px',
String(width).replace(NUMBER_AND_FLOAT, '') || 'px',
]
const heightAndUnit = [
parseFloat(height),
String(height).replace(/\d+/g, '') || 'px',
String(height).replace(NUMBER_AND_FLOAT, '') || 'px',
]
if (isNaN(heightAndUnit[0]) || isNaN(widthAndUnit[0])) {
throw new Error(

0 comments on commit 5634c64

Please sign in to comment.
You can’t perform that action at this time.