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-38 to 1.0.0-39

304

.storybook/InputField.js

@@ -9,156 +9,159 @@ import React from 'react'

.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.
'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 onChange={() => {}}>
<Label>5 Letter Word</Label>
<Icon name="amenityPool" />
<Input id="form-field" placeholder="Enter a 5 letter word" />
<Icon name="fitness" />
</InputField>
</InputController>
</Box>
))
<InputFieldWithController />
</Box>
))
)
.add(
'Sample States',
withInfo('Renders a styled Input element')(() => (
<div>
'Sample States',
withInfo('Renders a styled Input element')(() => (
<div>
<Flex width={900}>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Placeholder with Chevron
</Text>
<InputField onChange={() => {}}>
<Input id="form-field-1" placeholder="Placeholder" />
<Icon name="chevronDown" size="12" />
</InputField>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Placeholder with Icon
</Text>
<InputField onChange={() => {}}>
<Icon name="search" color="blue" size="18" />
<Input id="form-field-3" placeholder="Placeholder with Icon" />
</InputField>
</Box>
</Flex>
<Flex width={900}>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Plain Text
</Text>
<InputField onChange={() => {}}>
<Input id="form-field-1" value="Plain text" />
<Icon name="chevronDown" size="12" />
</InputField>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Plain Text with Icon
</Text>
<InputField onChange={() => {}}>
<Icon name="user" color="blue" />
<Input id="form-field-1" value="Plain text with Icon" />
<Icon name="chevronDown" size="12" />
</InputField>
</Box>
</Flex>
<Flex width={900}>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
With Label and Blue Outline
</Text>
<InputField color="blue" onChange={() => {}}>
<Label>Label</Label>
<Input id="form-field-3" value="Typing Text" />
</InputField>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
With Label, Icon, and Chevron
</Text>
<InputField color="blue" onChange={() => {}}>
<Icon name="user" color="blue" />
<Label>Label</Label>
<Input id="form-field-3" value="Typing text with Icon" />
<Icon name="chevronDown" size="12" />
</InputField>
</Box>
</Flex>
<Flex width={900}>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Email Address with Form Validation
</Text>
<InputField color="red" onChange={() => {}}>
<Label>Email address</Label>
<Input id="form-field-3" value="olvier@examp" />
<Icon name="warning" color="red" size="20" />
</InputField>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Email Address with Form Validation 2
</Text>
<InputField color="green" onChange={() => {}}>
<Label>Email address</Label>
<Input id="form-field-3" value="olvier@example.com" />
<Icon name="success" color="green" size="20" />
</InputField>
</Box>
</Flex>
</div>
))
)
.add(
'State Flow',
withInfo(
'This example demonstrates how the input will behave as the user interacts with it step by step'
)(() => (
<Flex width={900}>
<Box width={1 / 2} pl={3}>
<Box width={1 / 3} pl={3}>
<Text bold pt={4} pb={2}>
Placeholder with Chevron
</Text>
No User Interaction
</Text>
<InputField onChange={() => {}}>
<Input id="form-field-1" placeholder="Placeholder" />
<Icon name="chevronDown" size="12" />
<Label>Drop-off Location</Label>
<Icon name="search" color="blue" size="18" />
<Input id="drop-off" placeholder="Enter a drop-off location" />
</InputField>
</Box>
<Box width={1 / 2} pl={3}>
<Box width={1 / 3} pl={3}>
<Text bold pt={4} pb={2}>
Placeholder with Icon
</Text>
User Clicks in Box
</Text>
<InputField onChange={() => {}}>
<Label>Drop-off Location</Label>
<Icon name="search" color="blue" size="18" />
<Input id="form-field-3" placeholder="Placeholder with Icon" />
<Input
id="drop-off"
color="blue"
placeholder="Enter a drop-off location"
/>
</InputField>
</Box>
</Flex>
<Flex width={900}>
<Box width={1 / 2} pl={3}>
<Box width={1 / 3} pl={3}>
<Text bold pt={4} pb={2}>
Plain Text
</Text>
User Types a Value
</Text>
<InputField onChange={() => {}}>
<Input id="form-field-1" defaultValue="Plain text" />
<Icon name="chevronDown" size="12" />
<Label>Drop-off Location</Label>
<Icon name="search" color="blue" size="18" />
<Input
id="drop-off"
color="blue"
placeholder="Enter a drop-off location"
/>
</InputField>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Plain Text with Icon
</Text>
<InputField onChange={() => {}}>
<Icon name="user" color="blue" />
<Input id="form-field-1" defaultValue="Plain text with Icon" />
<Icon name="chevronDown" size="12" />
</InputField>
</Box>
</Flex>
<Flex width={900}>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
With Label and Blue Outline
</Text>
<InputField color="blue" onChange={() => {}}>
<Label>Label</Label>
<Input id="form-field-3" defaultValue="Typing Text" />
</InputField>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
With Label, Icon, and Chevron
</Text>
<InputField color="blue" onChange={() => {}}>
<Icon name="user" color="blue" />
<Label>Label</Label>
<Input id="form-field-3" defaultValue="Typing text with Icon" />
<Icon name="chevronDown" size="12" />
</InputField>
</Box>
</Flex>
<Flex width={900}>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Email Address with Form Validation
</Text>
<InputField color="red" onChange={() => {}}>
<Label>Email address</Label>
<Input id="form-field-3" defaultValue="olvier@examp" />
<Icon name="warning" color="red" size="20" />
</InputField>
</Box>
<Box width={1 / 2} pl={3}>
<Text bold pt={4} pb={2}>
Email Address with Form Validation 2
</Text>
<InputField color="green" onChange={() => {}}>
<Label>Email address</Label>
<Input id="form-field-3" defaultValue="olvier@example.com" />
<Icon name="success" color="green" size="20" />
</InputField>
</Box>
</Flex>
</div>
))
))
)
.add(
'State Flow',
withInfo('This example demonstrates how the input will behave as the user interacts with it step by step')(() => (
<Flex width={900}>
<Box width={1 / 3} pl={3}>
<Text bold pt={4} pb={2}>
No User Interaction
</Text>
<InputField onChange={() => {}}>
<Label>Drop-off Location</Label>
<Icon name='search' color="blue" size="18" />
<Input id="drop-off" placeholder="Enter a drop-off location" />
</InputField>
</Box>
<Box width={1 / 3} pl={3}>
<Text bold pt={4} pb={2}>
User Clicks in Box
</Text>
<InputField onChange={() => {}}>
<Label>Drop-off Location</Label>
<Icon name='search' color="blue" size="18" />
<Input id="drop-off" color="blue" placeholder="Enter a drop-off location" />
</InputField>
</Box>
<Box width={1 / 3} pl={3}>
<Text bold pt={4} pb={2}>
User Types a Value
</Text>
<InputField onChange={() => {}}>
<Label>Drop-off Location</Label>
<Icon name='search' color="blue" size="18" />
<Input id="drop-off" color="blue" defaultValue="New York" placeholder="Enter a drop-off location" />
</InputField>
</Box>
</Flex>
))
)
class InputController extends React.PureComponent {
class InputFieldWithController extends React.PureComponent {
state = {

@@ -189,13 +192,26 @@ value: '',

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 (
<InputField
onChange={this.onChange}
color={this.getBorderColor()}
info={
!this.state.isValid && this.state.isDirty
? "That's not 5 letters!"
: null
}
isDirty={this.state.isDirty}
isValid={this.state.isValid}
>
<Label>5 Letter Word</Label>
<Icon name="amenityPool" />
<Input
id="form-field"
value={this.state.value}
placeholder="Enter a 5 letter word"
/>
<Icon name="fitness" />
</InputField>
)
}
}

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 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']);
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 margin: 0;\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 margin: 0;\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');

8

dist/InputField.js

@@ -98,7 +98,7 @@ 'use strict';

var hasDefaultValue = void 0;
var hasInitialValue = void 0;
_react2.default.Children.forEach(props.children, function (child) {
if (child && child.type === _Input2.default) {
hasDefaultValue = child.props.defaultValue;
hasInitialValue = !!child.props.value;
}

@@ -108,3 +108,3 @@ });

_this.state = {
showLabel: hasDefaultValue
showLabel: hasInitialValue
};

@@ -180,3 +180,3 @@ return _this;

pl: BeforeIcon ? 40 : 2,
mt: '6px',
mt: '5px',
style: labelStyles,

@@ -183,0 +183,0 @@ htmlFor: inputId

2

dist/Label.js

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

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

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

12

lab.json

@@ -124,3 +124,11 @@ {

],
"appVersion": "0.1.0"
}
"examples": {
"Box": [
"<Box \n p={3}\n color='white'\nbg='blue'>Box</Box>"
]
},
"appVersion": "0.1.0",
"app": {
"version": "0.1.0"
}
}

2

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

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

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