Start sharing components as a team!Share components as a team!Join Bit to build your applications faster.Get Started Free

directional-property

v3.2.0arrow_drop_down
v3.2.0
STATUS
Passing
DOWNLOADS
0
VISIBILITY
Public
PUBLISHED
8 months ago
SIZE
843 B
Enables shorthand for direction-based properties.
1 contributor
Use directional-property in your project ?
Copied
npm i @bit/styled-components.polished.helpers.directional-property
Set Bit as a scoped registryLearn more
npm config set '@bit:registry' https://node.bit.dev
Component Example
React
React
Vue
Angular
Add dependency... help_outline
Just
import
any of the 1 million components
and packages in Bit or NPM to the example.
import Button from '@bit/grommet.grommet.button';
import Lodash from 'lodash';
toggle layout
modifieddraft
chevron_left
chevron_right
helpers/directionalProperty ()

Enables shorthand for direction-based properties. It accepts a property (hyphenated or camelCased) and up to four values that map to top, right, bottom, and left, respectively. You can optionally pass an empty string to get only the directional values as properties. You can also optionally pass a null argument for a directional value to ignore it.

Example
// Styles as object usage
const styles = {
  ...directionalProperty('padding', '12px', '24px', '36px', '48px')
}

// styled-components usage
const div = styled.div`
  ___CSS_0___
`

// CSS as JS Output

div {
  'paddingTop': '12px',
  'paddingRight': '24px',
  'paddingBottom': '36px',
  'paddingLeft': '48px'
}
Test Summary

properly generates properties when passed a hyphenated property

Pass

properly generates properties when passed a camelCased property

Pass

properly passes just the position when not given a property

Pass

properly sets unitless 0

Pass

properly applies a value when passed only one

Pass

properly applies a integer value when passed only one

Pass

properly applies values when passed two

Pass

properly applies values when passed two integers

Pass

properly applies values when passed a string and an integer

Pass

properly skips top and bottom properties when first value is null

Pass

properly skips left and right properties when second value is null

Pass

properly applies values when passed three

Pass

properly skips top property when first value is null

Pass

properly skips right and left properties when second value is null

Pass

properly skips bottom property when last value is null

Pass

properly applies values when passed a mixture of three value types

Pass

properly applies values when passed four

Pass

properly skips top property when first value is null

Pass

properly skips right property when second value is null

Pass

properly skips bottom property when third value is null

Pass

properly skips left property when fourth value is null

Pass

properly applies valuew when passed a mixture of four value types

Pass