New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

pcln-design-system

Package Overview
Dependencies
Maintainers
2
Versions
544
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

pcln-design-system - npm Package Compare versions

Comparing version 1.0.0-23 to 1.0.0-24

.storybook/Flag.js
.storybook/RatingBadge.js
dist/Flag.js
dist/RatingBadge.js

143

.storybook/Card.js

@@ -5,10 +5,45 @@ import React from 'react'

storiesOf('Card', module)
.add('Box Shadows with default border', () => (
<Box>
<Card boxShadowSize='sm' mb={5} p={3} width={200} color='black' bg='white'>Small Shadow</Card>
<Card boxShadowSize='md' mb={5} p={3} width={200} color='black' bg='white'>Medium Shadow</Card>
<Card boxShadowSize='lg' mb={5} p={3} width={200} color='black' bg='white'>Large Shadow</Card>
<Card boxShadowSize='xl' mb={5} p={3} width={200} color='black' bg='white'>XLarge Shadow</Card>
<Card
boxShadowSize="sm"
mb={5}
p={3}
width={200}
color="black"
bg="white"
>
Small Shadow
</Card>
<Card
boxShadowSize="md"
mb={5}
p={3}
width={200}
color="black"
bg="white"
>
Medium Shadow
</Card>
<Card
boxShadowSize="lg"
mb={5}
p={3}
width={200}
color="black"
bg="white"
>
Large Shadow
</Card>
<Card
boxShadowSize="xl"
mb={5}
p={3}
width={200}
color="black"
bg="white"
>
XLarge Shadow
</Card>
</Box>

@@ -18,7 +53,95 @@ ))

<Box>
<Card boxShadowSize='sm' mb={5} p={3} width={200} color='black' bg='white' borderWidth={2}>Small Shadow</Card>
<Card boxShadowSize='md' mb={5} p={3} width={200} color='black' bg='white' borderWidth={2}>Medium Shadow</Card>
<Card boxShadowSize='lg' mb={5} p={3} width={200} color='black' bg='white' borderWidth={2}>Large Shadow</Card>
<Card boxShadowSize='xl' mb={5} p={3} width={200} color='black' bg='white' borderWidth={2}>XLarge Shadow</Card>
<Card
boxShadowSize="sm"
mb={5}
p={3}
width={200}
color="black"
bg="white"
borderWidth={2}
>
Small Shadow
</Card>
<Card
boxShadowSize="md"
mb={5}
p={3}
width={200}
color="black"
bg="white"
borderWidth={2}
>
Medium Shadow
</Card>
<Card
boxShadowSize="lg"
mb={5}
p={3}
width={200}
color="black"
bg="white"
borderWidth={2}
>
Large Shadow
</Card>
<Card
boxShadowSize="xl"
mb={5}
p={3}
width={200}
color="black"
bg="white"
borderWidth={2}
>
XLarge Shadow
</Card>
</Box>
))
))
.add('Box Shadows with varying border radii', () => (
<Box>
<Card
boxShadowSize="sm"
mb={5}
p={3}
width={200}
color="black"
bg="white"
borderRadius={0}
>
Small Shadow
</Card>
<Card
boxShadowSize="md"
mb={5}
p={3}
width={200}
color="black"
bg="white"
borderRadius={10}
>
Medium Shadow
</Card>
<Card
boxShadowSize="lg"
mb={5}
p={3}
width={200}
color="black"
bg="white"
borderRadius={20}
>
Large Shadow
</Card>
<Card
boxShadowSize="xl"
mb={5}
p={3}
width={200}
color="black"
bg="white"
borderRadius="30px"
>
XLarge Shadow
</Card>
</Box>
))

33

.storybook/Hug.js
import React from 'react'
import { storiesOf } from '@storybook/react'
import { Hug, Card, Text } from '../src'
import { Hug, Hide, Card, Text } from '../src'

@@ -12,2 +12,11 @@ const text = (

Hide.span = Hide.withComponent('span')
const responsiveText = (
<Text.span>
Today‘s best deal! You save <Text.span bold>$300</Text.span>
<Hide.span xs> for your party of 2</Hide.span>.&nbsp;
</Text.span>
)
storiesOf('Hug', module)

@@ -28,2 +37,11 @@ .add('With a card inside', () => (

))
.add('With a card in a card', () => (
<Hug text={text}>
<Card p={3} bg="white" color="text">
<Card p={3} bg="white" color="text">
I‘m a card within a card within a hug!
</Card>
</Card>
</Hug>
))
.add('With plain text instead of component', () => (

@@ -43,1 +61,14 @@ <Hug text="I am plain ol' text">

))
.add('With a responsive hug', () => (
<Hug
text={responsiveText}
p={2}
fontSize={[0, 1]}
icon="thumbsUp"
iconDisplay={['none', 'unset']}
>
<Card p={3} bg="white" color="text">
I‘m a card within a hug!
</Card>
</Hug>
))

30

.storybook/Input.js

@@ -7,15 +7,17 @@ import React from 'react'

storiesOf('Input', module)
.add('Input component', withInfo({
inline: true,
text: 'Simple styled input component that accepts a color and whether or not to show an error container.'
})(() => (
<Input my={3}/>
)))
.add(
'Input component',
withInfo({
inline: true,
text:
'Simple styled input component that accepts a color and whether or not to show an error container.'
})(() => <Input my={3} />)
)
.add('Colors', () => (
<Box width={400}>
<Input mb={3} id="input-colors-1" placeholder="No color"/>
<Input mb={3} id="input-colors-2" color='red' placeholder="Red"/>
<Input mb={3} id="input-colors-3" color='green' placeholder="Green"/>
<Input mb={3} id="input-colors-4" color='orange' placeholder="Orange"/>
<Input mb={3} id="input-colors-5" color='blue' placeholder="Blue"/>
<Input mb={3} id="input-colors-1" placeholder="No color" />
<Input mb={3} id="input-colors-2" color="red" placeholder="Red" />
<Input mb={3} id="input-colors-3" color="green" placeholder="Green" />
<Input mb={3} id="input-colors-4" color="orange" placeholder="Orange" />
<Input mb={3} id="input-colors-5" color="blue" placeholder="Blue" />
</Box>

@@ -25,5 +27,7 @@ ))

<Box width={400}>
<Label fontSize={4} htmlFor="sample-input">Label!</Label>
<Input id="sample-input" placeholder="Click the label"/>
<Label fontSize={4} htmlFor="sample-input">
Label!
</Label>
<Input id="sample-input" placeholder="Click the label" />
</Box>
))

214

.storybook/InputField.js

@@ -8,91 +8,112 @@ import React from 'react'

storiesOf('InputField', module)
.add('InputField component', withInfo({
inline: true,
text: 'This component renders an input element with a built-in label and optional icon. It makes use of the Input and Label components.'
})(() => (
<Box width={500} pr={3}>
<Text bold pt={4} pb={2}>Hey, ya turkey! Enter a word that has 5 characters in it.</Text>
<InputController>
<InputField
icon='amenityPool'
label='A 5 Letter Word'
id='form-field-3'
placeholder='e.g. Berry'
/>
</InputController>
</Box>
)))
.add('Sample States', withInfo('Renders a styled Input element')(() => (
<div>
<Flex width={900}>
<Box width={1 / 2} pr={3}>
<Text bold pt={4} pb={2}>Credit Card</Text>
.add(
'InputField component',
withInfo({
inline: true,
text:
'This component renders an input element with a built-in label and optional icon. It makes use of the Input and Label components.'
})(() => (
<Box width={500} pr={3}>
<Text bold pt={4} pb={2}>
Hey, ya turkey! Enter a word that has 5 characters in it.
</Text>
<InputController>
<InputField
icon='locked'
label='Card number'
id='form-field-3'
placeholder='0000 0000 0000 0000'
icon="amenityPool"
label="A 5 Letter Word"
id="form-field-3"
placeholder="e.g. Berry"
/>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>Credit Card Number</Text>
<InputField
icon='locked'
id='form-field-4'
label='Card number'
placeholder='0000 0000 0000 0000'
defaultValue='4193 8827 0316 3529'
/>
</Box>
</Flex>
</InputController>
</Box>
))
)
.add(
'Sample States',
withInfo('Renders a styled Input element')(() => (
<div>
<Flex width={900}>
<Box width={1 / 2} pr={3}>
<Text bold pt={4} pb={2}>
Credit Card
</Text>
<InputField
icon="locked"
label="Card number"
id="form-field-3"
placeholder="0000 0000 0000 0000"
/>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Credit Card Number
</Text>
<InputField
icon="locked"
id="form-field-4"
label="Card number"
placeholder="0000 0000 0000 0000"
defaultValue="4193 8827 0316 3529"
/>
</Box>
</Flex>
<Flex width={900}>
<Box width={1 / 2} pr={3}>
<Text bold pt={4} pb={2}>Unfocused Field</Text>
<InputField
id='form-field-1'
label='First name'
defaultValue='Oliver'
placeholder='e.g. Oliver'
/>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>Focused Field or Passed Blue</Text>
<InputField
id='form-field-2'
label='Last name'
defaultValue='Dumoulin'
placeholder='e.g. Dumoulin'
color='blue'
/>
</Box>
</Flex>
<Flex width={900}>
<Box width={1 / 2} pr={3}>
<Text bold pt={4} pb={2}>
Unfocused Field
</Text>
<InputField
id="form-field-1"
label="First name"
defaultValue="Oliver"
placeholder="e.g. Oliver"
/>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Focused Field or Passed Blue
</Text>
<InputField
id="form-field-2"
label="Last name"
defaultValue="Dumoulin"
placeholder="e.g. Dumoulin"
color="blue"
/>
</Box>
</Flex>
<Flex width={900}>
<Box width={1 / 2} pr={3}>
<Text bold pt={4} pb={2}>Validation Error</Text>
<InputField
icon='circleInfo'
color='red'
info='Please enter a valid email address'
label='Email Address'
defaultValue='oliver.dumoulin@priceline.c'
id='form-field-3'
placeholder='example@test.com'
/>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>Validation Success</Text>
<InputField
icon='checkLight'
color='darkGreen'
label='Email Address'
defaultValue='oliver.dumoulin@priceline.com'
id='form-field-3'
placeholder='example@test.com'
/>
</Box>
</Flex>
</div>
)))
<Flex width={900}>
<Box width={1 / 2} pr={3}>
<Text bold pt={4} pb={2}>
Validation Error
</Text>
<InputField
icon="circleInfo"
color="red"
info="Please enter a valid email address"
label="Email Address"
defaultValue="oliver.dumoulin@priceline.c"
id="form-field-3"
placeholder="example@test.com"
/>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Validation Success
</Text>
<InputField
icon="checkLight"
color="darkGreen"
label="Email Address"
defaultValue="oliver.dumoulin@priceline.com"
id="form-field-3"
placeholder="example@test.com"
/>
</Box>
</Flex>
</div>
))
)

@@ -106,3 +127,3 @@ class InputController extends React.PureComponent {

onChange = (event) => {
onChange = event => {
const value = event.target.value

@@ -126,12 +147,13 @@ const isValid = value.length === 5

render () {
return (
React.cloneElement(React.Children.only(this.props.children), {
onChange: this.onChange,
color: this.getBorderColor(),
info: (!this.state.isValid && this.state.isDirty) ? 'That\'s not 5 letters!' : null,
...this.state
})
)
render() {
return React.cloneElement(React.Children.only(this.props.children), {
onChange: this.onChange,
color: this.getBorderColor(),
info:
!this.state.isValid && this.state.isDirty
? "That's not 5 letters!"
: null,
...this.state
})
}
}
}

30

.storybook/Label.js

@@ -7,10 +7,10 @@ import React from 'react'

storiesOf('Label', module)
.add('Label component', withInfo({
inline: true,
text: 'Simple styled label component that supports a number of the styled-system props.'
})(() => (
<Label m={3}>
Label Component
</Label>
)))
.add(
'Label component',
withInfo({
inline: true,
text:
'Simple styled label component that supports a number of the styled-system props.'
})(() => <Label m={3}>Label Component</Label>)
)
.add('Using fontSize', () => (

@@ -29,3 +29,5 @@ <div>

<div>
<Label mt={4} mb={2}>A tish of margin</Label>
<Label mt={4} mb={2}>
A tish of margin
</Label>
<Label pl={3}>A dash of padding</Label>

@@ -36,4 +38,4 @@ </div>

<div>
<Label color='blue'>A blue label</Label>
<Label color='green'>a green label</Label>
<Label color="blue">A blue label</Label>
<Label color="green">a green label</Label>
</div>

@@ -43,3 +45,7 @@ ))

<div>
Clicking <Label fontSize={4} htmlFor="sample-input">here</Label> should focus on the input element.
Clicking{' '}
<Label fontSize={4} htmlFor="sample-input">
here
</Label>{' '}
should focus on the input element.
<br />

@@ -46,0 +52,0 @@ <Input id="sample-input" />

20

dist/Card.js

@@ -7,4 +7,6 @@ 'use strict';

var _templateObject = _taggedTemplateLiteral(['\n ', ' ', ';\n'], ['\n ', ' ', ';\n']);
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _templateObject = _taggedTemplateLiteral(['\n ', ' ', ' ', ';\n'], ['\n ', ' ', ' ', ';\n']);
var _styledComponents = require('styled-components');

@@ -22,2 +24,4 @@

var _styledSystem = require('styled-system');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

@@ -45,18 +49,20 @@

function boxBorder(props) {
var boxBorder = function boxBorder(props) {
return {
border: props.borderWidth + 'px solid ' + props.theme.colors[props.borderColor]
};
}
};
var Card = (0, _styledComponents2.default)(_Box2.default)(_templateObject, boxShadow, boxBorder);
var Card = (0, _styledComponents2.default)(_Box2.default)(_templateObject, boxShadow, boxBorder, _styledSystem.borderRadius);
Card.propTypes = {
Card.propTypes = _extends({
boxShadowSize: _propTypes2.default.oneOf(['sm', 'md', 'lg', 'xl']),
borderColor: _propTypes2.default.string,
borderColor: _propTypes2.default.string
}, _styledSystem.propTypes.borderRadius, {
borderWidth: _propTypes2.default.oneOf([1, 2])
};
});
Card.defaultProps = {
borderColor: 'borderGray',
borderRadius: 1,
borderWidth: 1

@@ -63,0 +69,0 @@ };

63

dist/Hug.js

@@ -9,3 +9,5 @@ 'use strict';

var _templateObject = _taggedTemplateLiteral(['\n border-radius: ', ';\n'], ['\n border-radius: ', ';\n']);
var _templateObject = _taggedTemplateLiteral(['\n border-top-left-radius: ', ';\n border-top-right-radius: ', ';\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n overflow: hidden;\n'], ['\n border-top-left-radius: ', ';\n border-top-right-radius: ', ';\n border-bottom-right-radius: 0;\n border-bottom-left-radius: 0;\n overflow: hidden;\n']),
_templateObject2 = _taggedTemplateLiteral(['\n & > * {\n border: 0;\n }\n'], ['\n & > * {\n border: 0;\n }\n']),
_templateObject3 = _taggedTemplateLiteral(['\n ', ';\n'], ['\n ', ';\n']);

@@ -16,2 +18,6 @@ var _react = require('react');

var _Box = require('./Box');
var _Box2 = _interopRequireDefault(_Box);
var _Card = require('./Card');

@@ -37,2 +43,4 @@

var _styledSystem = require('styled-system');
var _propTypes = require('prop-types');

@@ -44,23 +52,55 @@

function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var StyledCard = (0, _styledComponents2.default)(_Card2.default)(_templateObject, function (props) {
var display = (0, _styledSystem.responsiveStyle)({
prop: 'display',
cssProperty: 'display'
});
var HugCard = (0, _styledComponents2.default)(_Card2.default)(_templateObject, function (props) {
return props.theme.radius;
}, function (props) {
return props.theme.radius;
});
var Hug = function Hug(props) {
var BorderConcealer = (0, _styledComponents2.default)(_Box2.default)(_templateObject2);
var HideableIcon = (0, _styledComponents2.default)(_Icon2.default)(_templateObject3, display);
var Hug = function Hug(_ref) {
var bg = _ref.bg,
color = _ref.color,
p = _ref.p,
fontSize = _ref.fontSize,
icon = _ref.icon,
iconDisplay = _ref.iconDisplay,
props = _objectWithoutProperties(_ref, ['bg', 'color', 'p', 'fontSize', 'icon', 'iconDisplay']);
return _react2.default.createElement(
StyledCard,
_extends({}, props, { borderColor: props.bg }),
HugCard,
_extends({}, props, { borderColor: bg }),
_react2.default.createElement(
_Flex2.default,
{ p: 3, align: 'center' },
!!props.icon && _react2.default.createElement(_Icon2.default, { mr: 3, name: props.icon, size: 16 }),
{ bg: bg, color: color, p: p, align: 'center' },
!!icon && _react2.default.createElement(HideableIcon, {
mr: 2,
mt: '-2px',
mb: '2px',
name: icon,
size: 24,
display: iconDisplay
}),
_react2.default.createElement(
_Text2.default.span,
{ fontSize: 1 },
{ fontSize: fontSize },
props.text
)
),
props.children
_react2.default.createElement(
BorderConcealer,
null,
props.children
)
);

@@ -72,6 +112,9 @@ };

borderWidth: 1,
color: 'white'
color: 'white',
fontSize: 1,
p: 2
};
Hug.propTypes = {
iconDisplay: _propTypes2.default.arrayOf(_propTypes2.default.string),
icon: _propTypes2.default.string,

@@ -78,0 +121,0 @@ text: _propTypes2.default.oneOfType([_propTypes2.default.node, _propTypes2.default.arrayOf(_propTypes2.default.node), _propTypes2.default.string])

2

dist/Icon.js

@@ -9,3 +9,3 @@ 'use strict';

var _templateObject = _taggedTemplateLiteral(['\n ', ' ', ';\n'], ['\n ', ' ', ';\n']);
var _templateObject = _taggedTemplateLiteral(['\n flex: none;\n ', ' ', ';\n'], ['\n flex: none;\n ', ' ', ';\n']);

@@ -12,0 +12,0 @@ var _react = require('react');

18

dist/index.js

@@ -88,2 +88,11 @@ 'use strict';

var _Flag = require('./Flag');
Object.defineProperty(exports, 'Flag', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_Flag).default;
}
});
var _Flex = require('./Flex');

@@ -206,2 +215,11 @@

var _RatingBadge = require('./RatingBadge');
Object.defineProperty(exports, 'RatingBadge', {
enumerable: true,
get: function get() {
return _interopRequireDefault(_RatingBadge).default;
}
});
var _RedButton = require('./RedButton');

@@ -208,0 +226,0 @@

2

dist/Input.js

@@ -9,3 +9,3 @@ 'use strict';

var _templateObject = _taggedTemplateLiteral(['\n appearance: none;\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: ', 'px;\n background-color: transparent;\n border-radius: ', ';\n border-width: 1px;\n border-style: solid;\n border-color: ', ';\n\n padding-top: 14px;\n padding-bottom: 14px;\n padding-left: 12px;\n padding-right: 12px;\n\n ::placeholder {\n color: ', ';\n }\n\n ::-ms-clear {\n display: none;\n }\n\n ', '\n ', '\n'], ['\n appearance: none;\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: ', 'px;\n background-color: transparent;\n border-radius: ', ';\n border-width: 1px;\n border-style: solid;\n border-color: ', ';\n\n padding-top: 14px;\n padding-bottom: 14px;\n padding-left: 12px;\n padding-right: 12px;\n\n ::placeholder {\n color: ', ';\n }\n\n ::-ms-clear {\n display: none;\n }\n\n ', '\n ', '\n']);
var _templateObject = _taggedTemplateLiteral(['\n appearance: none;\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: ', 'px;\n background-color: transparent;\n border-radius: ', ';\n border-width: 1px;\n border-style: solid;\n border-color: ', ';\n\n padding-top: 14px;\n padding-bottom: 14px;\n padding-left: 12px;\n padding-right: 12px;\n\n ::placeholder {\n color: ', ';\n }\n\n ::-ms-clear {\n display: none;\n }\n\n ', ' ', ';\n'], ['\n appearance: none;\n display: block;\n width: 100%;\n font-family: inherit;\n font-size: ', 'px;\n background-color: transparent;\n border-radius: ', ';\n border-width: 1px;\n border-style: solid;\n border-color: ', ';\n\n padding-top: 14px;\n padding-bottom: 14px;\n padding-left: 12px;\n padding-right: 12px;\n\n ::placeholder {\n color: ', ';\n }\n\n ::-ms-clear {\n display: none;\n }\n\n ', ' ', ';\n']);

@@ -12,0 +12,0 @@ var _styledComponents = require('styled-components');

2

dist/Label.js

@@ -9,3 +9,3 @@ 'use strict';

var _templateObject = _taggedTemplateLiteral(['\n font-size: 10px;\n display: block;\n width: 100%;\n\n ', '\n ', '\n ', '\n'], ['\n font-size: 10px;\n display: block;\n width: 100%;\n\n ', '\n ', '\n ', '\n']);
var _templateObject = _taggedTemplateLiteral(['\n font-size: 10px;\n display: block;\n width: 100%;\n\n ', ' ', ' ', ';\n'], ['\n font-size: 10px;\n display: block;\n width: 100%;\n\n ', ' ', ' ', ';\n']);

@@ -12,0 +12,0 @@ var _styledComponents = require('styled-components');

24

dist/theme.js

@@ -7,2 +7,4 @@ 'use strict';

var _theme;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

@@ -45,4 +47,9 @@

// color palette
var black = '#000';
// styled-system's `fontWeight` function can hook into the `fontWeights` object
var fontWeights = exports.fontWeights = {
regular: regular,
bold: bold
// color palette
};var black = '#000';
var white = '#fff';

@@ -115,3 +122,6 @@ var text = '#001833';

// styled-system's `borderRadius` function can hook into the `radii` object/array
var radii = exports.radii = [0, 2, 6];
var radius = exports.radius = '2px';
var maxContainerWidth = exports.maxContainerWidth = '1280px';

@@ -122,3 +132,3 @@

var theme = {
var theme = (_theme = {
breakpoints: breakpoints,

@@ -129,10 +139,10 @@ mediaQueries: mediaQueries,

fontSizes: fontSizes,
fontWeights: fontWeights,
regular: regular,
bold: bold,
colors: colors,
radius: radius,
boxShadows: boxShadows,
maxContainerWidth: maxContainerWidth
};
radii: radii,
radius: radius
}, _defineProperty(_theme, 'radii', radii), _defineProperty(_theme, 'boxShadows', boxShadows), _defineProperty(_theme, 'maxContainerWidth', maxContainerWidth), _theme);
exports.default = theme;

2

package.json
{
"name": "pcln-design-system",
"version": "1.0.0-23",
"version": "1.0.0-24",
"description": "Priceline Design System",

@@ -5,0 +5,0 @@ "main": "dist/index.js",

2

README.md

@@ -40,2 +40,3 @@

- [`<Card />`](docs/Card.md)
- [`<Flag />`](docs/Flag.md)
- [`<Heading />`](docs/Heading.md)

@@ -51,2 +52,3 @@ - [`<Hide />`](docs/Hide.md)

- [`<Truncate />`](docs/Truncate.md)
- [`<RatingBadge />`](docs/RatingBadge.md)

@@ -53,0 +55,0 @@ 

coverage/design-system/index.html

Sorry, the diff of this file is not supported yet

coverage/design-system/test-setup.js.html

Sorry, the diff of this file is not supported yet

coverage/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/design-system/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/design-system/test-setup.js.html

Sorry, the diff of this file is not supported yet

coverage/lcov-report/index.html

Sorry, the diff of this file is not supported yet

coverage/lcov.info

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc