Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
teamleader-ui
Advanced tools
teamleader-ui - npm Package Compare versions
Comparing version 0.0.28-alpha to 0.0.29-alpha
| { | ||
| "name": "teamleader-ui", | ||
| "description": "Teamleader UI library", | ||
| "version": "0.0.28-alpha", | ||
| "version": "0.0.29-alpha", | ||
| "author": "Teamleader <development@teamleader.eu>", | ||
@@ -6,0 +6,0 @@ "betterScripts": { |
| import React from 'react'; | ||
| import { Button, IconButton } from '../../components'; | ||
| const handleItemClick = () => { | ||
| console.log('This item is so special that has a special handler'); | ||
| }; | ||
| class ButtonTest extends React.Component { | ||
| state = { | ||
| icon: 'search', | ||
| text: 'button text', | ||
| }; | ||
| const ButtonTest = () => ( | ||
| <section> | ||
| <h2>Buttons</h2> | ||
| handleIconChange = (event) => { | ||
| this.setState({ icon: event.target.value }); | ||
| }; | ||
| <p> | ||
| <Button primary onMouseUp={handleItemClick}>Primary</Button> | ||
| <Button primary icon="search">Primary with icon</Button> | ||
| <Button primary icon="search" /> | ||
| </p> | ||
| <p> | ||
| <Button primary processing>Primary processing</Button> | ||
| <Button primary processing icon="search">Primary processing with icon</Button> | ||
| <Button primary processing /> | ||
| </p> | ||
| <p> | ||
| <Button primary disabled>Primary disabled</Button> | ||
| <Button primary disabled icon="search">Primary disabled with icon</Button> | ||
| <Button primary disabled icon="search" /> | ||
| </p> | ||
| handleTextChange = (event) => { | ||
| this.setState({ text: event.target.value }); | ||
| }; | ||
| <hr /> | ||
| render () { | ||
| return ( | ||
| <article> | ||
| <header> | ||
| <h1>Buttons</h1> | ||
| </header> | ||
| <h2>Primary</h2> | ||
| <div className="component-spec"> | ||
| <div className="properties"> | ||
| <h3>Properties</h3> | ||
| <h4>Text</h4> | ||
| <p><input type="text" value={this.state.text} onChange={event => this.handleTextChange(event)} /></p> | ||
| <p> | ||
| <Button>Secondary</Button> | ||
| <Button icon="search">Secondary with icon</Button> | ||
| <Button icon="search" /> | ||
| </p> | ||
| <h4>Icon</h4> | ||
| <p><input type="text" value={this.state.icon} onChange={event => this.handleIconChange(event)} /></p> | ||
| </div> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <p> | ||
| <Button primary icon={this.state.icon}>{ this.state.text }</Button> | ||
| </p> | ||
| <p> | ||
| <Button primary processing icon={this.state.icon}>{ this.state.text }</Button> | ||
| </p> | ||
| <p> | ||
| <Button primary disabled icon={this.state.icon}>{ this.state.text }</Button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <h2>Secondary</h2> | ||
| <div className="component-spec"> | ||
| <div className="properties"> | ||
| <h3>Properties</h3> | ||
| <h4>Text</h4> | ||
| <p><input type="text" value={this.state.text} onChange={event => this.handleTextChange(event)} /></p> | ||
| <p> | ||
| <Button bordered>Secondary bordered</Button> | ||
| <Button bordered icon="search">Secondary with icon and border</Button> | ||
| </p> | ||
| <h4>Icon</h4> | ||
| <p><input type="text" value={this.state.icon} onChange={event => this.handleIconChange(event)} /></p> | ||
| </div> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <p> | ||
| <Button icon={this.state.icon}>{ this.state.text }</Button> | ||
| </p> | ||
| <p> | ||
| <Button bordered icon={this.state.icon}>{ this.state.text }</Button> | ||
| </p> | ||
| <p> | ||
| <Button processing icon={this.state.icon}>{ this.state.text }</Button> | ||
| </p> | ||
| <p> | ||
| <Button bordered processing icon={this.state.icon}>{ this.state.text }</Button> | ||
| </p> | ||
| <p> | ||
| <Button disabled icon={this.state.icon}>{ this.state.text }</Button> | ||
| </p> | ||
| <p> | ||
| <Button bordered disabled icon={this.state.icon}>{ this.state.text }</Button> | ||
| </p> | ||
| </div> | ||
| </div> | ||
| <h2>Icon only</h2> | ||
| <div className="component-spec"> | ||
| <div className="properties"> | ||
| <h3>Properties</h3> | ||
| <h4>Icon</h4> | ||
| <p><input type="text" value={this.state.icon} onChange={event => this.handleIconChange(event)} /></p> | ||
| </div> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <p><IconButton icon={this.state.icon} /></p> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| ); | ||
| } | ||
| } | ||
| <p> | ||
| <Button processing>Secondary processing</Button> | ||
| <Button processing icon="search">Secondary processing with icon</Button> | ||
| <Button processing /> | ||
| </p> | ||
| <p> | ||
| <Button bordered processing>Secondary bordered processing</Button> | ||
| <Button bordered processing icon="search">Secondary processing with icon</Button> | ||
| <Button bordered processing /> | ||
| </p> | ||
| <p> | ||
| <Button disabled>Secondary disabled</Button> | ||
| <Button disabled icon="search">Secondary disabled with icon</Button> | ||
| <Button disabled icon="search" /> | ||
| </p> | ||
| <p> | ||
| <Button bordered disabled>Secondary bordered disabled</Button> | ||
| <Button bordered disabled icon="search">Secondary disabled with icon</Button> | ||
| <Button bordered disabled icon="search" /> | ||
| </p> | ||
| <hr /> | ||
| <p><IconButton icon="search" /></p> | ||
| </section> | ||
| ); | ||
| export default ButtonTest; |
@@ -8,4 +8,9 @@ import React from 'react'; | ||
| active: false, | ||
| title: 'My awesome dialog', | ||
| }; | ||
| handleTitleChange = (event) => { | ||
| this.setState({ title: event.target.value }); | ||
| }; | ||
| handleToggle = () => { | ||
@@ -22,5 +27,17 @@ this.setState({ active: !this.state.active }); | ||
| return ( | ||
| <section> | ||
| <h2>Dialog</h2> | ||
| <Button primary label="Show my dialog" onClick={this.handleToggle} /> | ||
| <article> | ||
| <header> | ||
| <h1>Dialog</h1> | ||
| </header> | ||
| <div className="component-spec"> | ||
| <div className="properties"> | ||
| <h3>Properties</h3> | ||
| <h4>Title</h4> | ||
| <p><input type="text" value={this.state.title} onChange={event => this.handleTitleChange(event)} /></p> | ||
| </div> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <Button primary label="Show my dialog" onClick={this.handleToggle} /> | ||
| </div> | ||
| </div> | ||
| <Dialog | ||
@@ -32,7 +49,7 @@ actions={this.actions} | ||
| onOverlayClick={this.handleToggle} | ||
| title="My awesome dialog" | ||
| title={this.state.title} | ||
| > | ||
| <p>Here you can add arbitrary content.</p> | ||
| </Dialog> | ||
| </section> | ||
| </article> | ||
| ); | ||
@@ -39,0 +56,0 @@ } |
| import React from 'react'; | ||
| import { LoadingMolecule } from '../../components'; | ||
| import { RadioGroup, RadioButton } from '../../components/radio'; | ||
| import theme from './loadingMolecule.css'; | ||
| class LoadingMoleculeTest extends React.Component { | ||
| state = { | ||
| tint: 'blackandwhite', | ||
| startColor: '#BABABA', | ||
| stopColor: '#DADADA', | ||
| type: 'normal', | ||
| }; | ||
| handleTypeChange = (value) => { | ||
| this.setState({ type: value }); | ||
| }; | ||
| handleTintChange = (value) => { | ||
| if (value === 'color') { | ||
| this.setState({ | ||
| tint:'color', | ||
| startColor: '#00ACA9', | ||
| stopColor: '#1F7F79', | ||
| }); | ||
| } else { | ||
| this.setState({ | ||
| tint:'blackandwhite', | ||
| startColor: '#BABABA', | ||
| stopColor: '#DADADA', | ||
| }); | ||
| } | ||
| }; | ||
| render () { | ||
| const basePath = window.location.pathname + window.location.search; | ||
| return ( | ||
| <section> | ||
| <h2>Loading Molecules</h2> | ||
| <article> | ||
| <header> | ||
| <h1>Loading Molecules</h1> | ||
| </header> | ||
| <div className={theme['loading-molecule-row']}> | ||
| <div className={theme['loading-molecule-container']}> | ||
| <h4>Normal</h4> | ||
| <LoadingMolecule | ||
| basePath={window.location.pathname + window.location.search} | ||
| /> | ||
| <div className="component-spec"> | ||
| <div className="properties"> | ||
| <h3>Properties</h3> | ||
| <h4>Type</h4> | ||
| <RadioGroup name="type" value={this.state.type} onChange={this.handleTypeChange}> | ||
| <RadioButton label="Small" value="small" /> | ||
| <RadioButton label="Normal" value="normal" /> | ||
| <RadioButton label="Large" value="large" /> | ||
| </RadioGroup> | ||
| <h4>Tint</h4> | ||
| <RadioGroup name="tint" value={this.state.tint} onChange={this.handleTintChange}> | ||
| <RadioButton label="Black/White" value="blackandwhite" /> | ||
| <RadioButton label="Color" value="color" /> | ||
| </RadioGroup> | ||
| </div> | ||
| <div className={theme['loading-molecule-container']}> | ||
| <h4>Small</h4> | ||
| <LoadingMolecule | ||
| basePath={window.location.pathname + window.location.search} | ||
| type="small" | ||
| /> | ||
| </div> | ||
| <div className={theme['loading-molecule-container']}> | ||
| <h4>Large</h4> | ||
| <LoadingMolecule | ||
| basePath={window.location.pathname + window.location.search} | ||
| type="large" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <div className={theme['loading-molecule-row']}> | ||
| <div className={theme['loading-molecule-container']}> | ||
| <h4>Normal</h4> | ||
| <LoadingMolecule | ||
| basePath={window.location.pathname + window.location.search} | ||
| startColor="#00ACA9" | ||
| stopColor="#1F7F79" | ||
| /> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <div className={theme['loading-molecule-row']}> | ||
| <div className={theme['loading-molecule-container']}> | ||
| <LoadingMolecule | ||
| basePath={basePath} | ||
| type={this.state.type} | ||
| startColor={this.state.startColor} | ||
| stopColor={this.state.stopColor} | ||
| /> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div className={theme['loading-molecule-container']}> | ||
| <h4>Small</h4> | ||
| <LoadingMolecule | ||
| basePath={window.location.pathname + window.location.search} | ||
| startColor="#00ACA9" | ||
| stopColor="#1F7F79" | ||
| type="small" | ||
| /> | ||
| </div> | ||
| <div className={theme['loading-molecule-container']}> | ||
| <h4>Large</h4> | ||
| <LoadingMolecule | ||
| basePath={window.location.pathname + window.location.search} | ||
| startColor="#00ACA9" | ||
| stopColor="#1F7F79" | ||
| type="large" | ||
| /> | ||
| </div> | ||
| </div> | ||
| <hr /> | ||
| </section> | ||
| </article> | ||
| ); | ||
@@ -67,0 +78,0 @@ } |
@@ -20,22 +20,35 @@ import React from 'react'; | ||
| return ( | ||
| <section> | ||
| <h2>Menus</h2> | ||
| <Menu onSelect={this.handleSelect} selectable={false} selected={this.state.value}> | ||
| <MenuItem value="foo" caption="Caption" /> | ||
| <MenuItem onClick={this.handleItemClick} value="bar" caption="Caption & Shortcut" shortcut="Ctrl + P" /> | ||
| <MenuItem caption="Disabled ..." disabled shortcut="Ctrl + P" /> | ||
| <MenuDivider /> | ||
| <MenuItem caption="Caption & Icon" icon="check" /> | ||
| <MenuItem caption="Caption, Icon & Shortcut" icon="list_bulleted" shortcut="Ctrl + P" /> | ||
| <MenuItem caption="Disabled ..." icon="flag" shortcut="Ctrl + P" disabled /> | ||
| </Menu> | ||
| <article> | ||
| <header> | ||
| <h1>Menus</h1> | ||
| </header> | ||
| <hr /> | ||
| <h2>Menu</h2> | ||
| <div className="component-spec"> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <Menu onSelect={this.handleSelect} selectable={false} selected={this.state.value}> | ||
| <MenuItem value="foo" caption="Caption" /> | ||
| <MenuItem onClick={this.handleItemClick} value="bar" caption="Caption & Shortcut" shortcut="Ctrl + P" /> | ||
| <MenuItem caption="Disabled ..." disabled shortcut="Ctrl + P" /> | ||
| <MenuDivider /> | ||
| <MenuItem caption="Caption & Icon" icon="check" /> | ||
| <MenuItem caption="Caption, Icon & Shortcut" icon="list_bulleted" shortcut="Ctrl + P" /> | ||
| <MenuItem caption="Disabled ..." icon="flag" shortcut="Ctrl + P" disabled /> | ||
| </Menu> | ||
| </div> | ||
| </div> | ||
| <IconMenu icon="dots_vert" position="topLeft"> | ||
| <MenuItem value="download" icon="user_two" caption="Download" /> | ||
| <MenuDivider /> | ||
| <MenuItem caption="Disabled ..." icon="close" shortcut="Ctrl + P" disabled /> | ||
| </IconMenu> | ||
| </section> | ||
| <h2>IconMenu</h2> | ||
| <div className="component-spec"> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <IconMenu icon="dots_vert" position="topLeft"> | ||
| <MenuItem value="download" icon="user_two" caption="Download" /> | ||
| <MenuDivider /> | ||
| <MenuItem caption="Disabled ..." icon="close" shortcut="Ctrl + P" disabled /> | ||
| </IconMenu> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| ); | ||
@@ -42,0 +55,0 @@ } |
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { PopoverHorizontal } from '../../components/popover/'; | ||
| import { RadioGroup, RadioButton } from '../../components/radio'; | ||
| import Button from '../../components/button'; | ||
@@ -9,4 +10,7 @@ | ||
| active: false, | ||
| backdrop: 'dark', | ||
| direction: 'west', | ||
| position: 'middle', | ||
| subtitle:'', | ||
| title: 'My awesome Horizontal Popover', | ||
| }; | ||
@@ -19,2 +23,14 @@ | ||
| handleBackdropChange = (value) => { | ||
| this.setState({ backdrop: value }); | ||
| }; | ||
| handleTitleChange = (event) => { | ||
| this.setState({ title: event.target.value }); | ||
| }; | ||
| handleSubtitleChange = (event) => { | ||
| this.setState({ subtitle: event.target.value }); | ||
| }; | ||
| handleToggle = () => { | ||
@@ -24,2 +40,10 @@ this.setState({ active: !this.state.active }); | ||
| handleDirectionChange = (value) => { | ||
| this.setState({ direction: value }); | ||
| }; | ||
| handlePositionChange = (value) => { | ||
| this.setState({ position: value }); | ||
| }; | ||
| actions = [ | ||
@@ -31,44 +55,58 @@ { label: 'Cancel', onClick: this.handleToggle }, | ||
| render () { | ||
| const { direction, position } = this.state; | ||
| const { backdrop, direction, position } = this.state; | ||
| return ( | ||
| <section> | ||
| <h2>Horizontal Popover</h2> | ||
| <article> | ||
| <header> | ||
| <h1>Horizontal Popover</h1> | ||
| </header> | ||
| <Button | ||
| primary | ||
| style={{ 'marginLeft': '50%' }} | ||
| label="Show a horizontal popover" | ||
| onClick={this.handleToggle} | ||
| ref={ | ||
| (button) => { | ||
| this.popoverToggleButton = button; | ||
| } | ||
| } | ||
| /> | ||
| <div className="component-spec"> | ||
| <div className="properties"> | ||
| <h3>Properties</h3> | ||
| <h4>Direction</h4> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ direction: 'west' })} checked={direction === 'west'} /> | ||
| west | ||
| </label> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ direction: 'east' })} checked={direction === 'east'} /> | ||
| east | ||
| </label> | ||
| <h4>Backdrop</h4> | ||
| <RadioGroup name="direction" value={backdrop} onChange={this.handleBackdropChange}> | ||
| <RadioButton label="Dark" value="dark" /> | ||
| <RadioButton label="Transparent" value="" /> | ||
| </RadioGroup> | ||
| <h4>Position</h4> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ position: 'top' })} checked={position === 'top'} /> | ||
| top | ||
| </label> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ position: 'middle' })} checked={position === 'middle'} /> | ||
| middle | ||
| </label> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ position: 'bottom' })} checked={position === 'bottom'} /> | ||
| bottom | ||
| </label> | ||
| <h4>Direction</h4> | ||
| <RadioGroup name="direction" value={direction} onChange={this.handleDirectionChange}> | ||
| <RadioButton label="West" value="west" /> | ||
| <RadioButton label="East" value="east" /> | ||
| </RadioGroup> | ||
| <h4>Position</h4> | ||
| <RadioGroup name="position" value={position} onChange={this.handlePositionChange}> | ||
| <RadioButton label="Top" value="top" /> | ||
| <RadioButton label="Middle" value="middle" /> | ||
| <RadioButton label="Bottom" value="bottom" /> | ||
| </RadioGroup> | ||
| <h4>Title</h4> | ||
| <p><input type="text" value={this.state.title} onChange={event => this.handleTitleChange(event)} /></p> | ||
| <h4>Subtitle</h4> | ||
| <p> | ||
| <input type="text" value={this.state.subtitle} onChange={event => this.handleSubtitleChange(event)} /> | ||
| </p> | ||
| </div> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <Button | ||
| primary | ||
| label="Show a horizontal popover" | ||
| onClick={this.handleToggle} | ||
| ref={ | ||
| (button) => { | ||
| this.popoverToggleButton = button; | ||
| } | ||
| } | ||
| /> | ||
| </div> | ||
| </div> | ||
| { this.anchorEl && | ||
@@ -79,2 +117,3 @@ <PopoverHorizontal | ||
| anchorEl={this.anchorEl} | ||
| backdrop={this.state.backdrop} | ||
| direction={this.state.direction} | ||
@@ -85,3 +124,4 @@ position={this.state.position} | ||
| onOverlayClick={this.handleToggle} | ||
| title="My awesome Horizontal POPOVER" | ||
| title={this.state.title} | ||
| subtitle={this.state.subtitle} | ||
| > | ||
@@ -94,4 +134,3 @@ <p>Here you can add popover content.</p> | ||
| } | ||
| <hr /> | ||
| </section> | ||
| </article> | ||
| ); | ||
@@ -98,0 +137,0 @@ } |
| import React from 'react'; | ||
| import ReactDOM from 'react-dom'; | ||
| import { PopoverVertical } from '../../components/popover/'; | ||
| import { RadioGroup, RadioButton } from '../../components/radio'; | ||
| import Button from '../../components/button'; | ||
@@ -9,4 +10,7 @@ | ||
| active: false, | ||
| backdrop: 'dark', | ||
| direction: 'north', | ||
| position: 'left', | ||
| subtitle:'', | ||
| title: 'My awesome Vertical Popover', | ||
| }; | ||
@@ -19,2 +23,14 @@ | ||
| handleBackdropChange = (value) => { | ||
| this.setState({ backdrop: value }); | ||
| }; | ||
| handleTitleChange = (event) => { | ||
| this.setState({ title: event.target.value }); | ||
| }; | ||
| handleSubtitleChange = (event) => { | ||
| this.setState({ subtitle: event.target.value }); | ||
| }; | ||
| handleToggle = () => { | ||
@@ -24,2 +40,10 @@ this.setState({ active: !this.state.active }); | ||
| handleDirectionChange = (value) => { | ||
| this.setState({ direction: value }); | ||
| }; | ||
| handlePositionChange = (value) => { | ||
| this.setState({ position: value }); | ||
| }; | ||
| actions = [ | ||
@@ -31,44 +55,57 @@ { label: 'Cancel', onClick: this.handleToggle }, | ||
| render () { | ||
| const { direction, position } = this.state; | ||
| const { backdrop, direction, position } = this.state; | ||
| return ( | ||
| <section> | ||
| <h2>Vertical Popover</h2> | ||
| <article> | ||
| <header> | ||
| <h1>Vertical Popover</h1> | ||
| </header> | ||
| <Button | ||
| primary | ||
| style={{ 'marginLeft': '50%' }} | ||
| label="Show a vertical popover" | ||
| onClick={this.handleToggle} | ||
| ref={ | ||
| (button) => { | ||
| this.popoverToggleButton = button; | ||
| } | ||
| } | ||
| /> | ||
| <div className="component-spec"> | ||
| <div className="properties"> | ||
| <h3>Properties</h3> | ||
| <h4>Direction</h4> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ direction: 'north' })} checked={direction === 'north'} /> | ||
| north | ||
| </label> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ direction: 'south' })} checked={direction === 'south'} /> | ||
| south | ||
| </label> | ||
| <h4>Backdrop</h4> | ||
| <RadioGroup name="direction" value={backdrop} onChange={this.handleBackdropChange}> | ||
| <RadioButton label="Dark" value="dark" /> | ||
| <RadioButton label="Transparent" value="" /> | ||
| </RadioGroup> | ||
| <h4>Position</h4> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ position: 'left' })} checked={position === 'left'} /> | ||
| left | ||
| </label> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ position: 'center' })} checked={position === 'center'} /> | ||
| center | ||
| </label> | ||
| <label> | ||
| <input type="radio" onChange={() => this.setState({ position: 'right' })} checked={position === 'right'} /> | ||
| right | ||
| </label> | ||
| <h4>Direction</h4> | ||
| <RadioGroup name="direction" value={direction} onChange={this.handleDirectionChange}> | ||
| <RadioButton label="North" value="north" /> | ||
| <RadioButton label="South" value="south" /> | ||
| </RadioGroup> | ||
| <h4>Position</h4> | ||
| <RadioGroup name="position" value={position} onChange={this.handlePositionChange}> | ||
| <RadioButton label="Left" value="left" /> | ||
| <RadioButton label="Center" value="center" /> | ||
| <RadioButton label="Right" value="right" /> | ||
| </RadioGroup> | ||
| <h4>Title</h4> | ||
| <p><input type="text" value={this.state.title} onChange={event => this.handleTitleChange(event)} /></p> | ||
| <h4>Subtitle</h4> | ||
| <p> | ||
| <input type="text" value={this.state.subtitle} onChange={event => this.handleSubtitleChange(event)} /> | ||
| </p> | ||
| </div> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <Button | ||
| primary | ||
| label="Show a vertical popover" | ||
| onClick={this.handleToggle} | ||
| ref={ | ||
| (button) => { | ||
| this.popoverToggleButton = button; | ||
| } | ||
| } | ||
| /> | ||
| </div> | ||
| </div> | ||
| { this.anchorEl && | ||
@@ -79,2 +116,3 @@ <PopoverVertical | ||
| anchorEl={this.anchorEl} | ||
| backdrop={this.state.backdrop} | ||
| direction={this.state.direction} | ||
@@ -85,4 +123,4 @@ position={this.state.position} | ||
| onOverlayClick={this.handleToggle} | ||
| title="My awesome Vertical POPOVER" | ||
| subtitle="with a beautiful subtitle" | ||
| title={this.state.title} | ||
| subtitle={this.state.subtitle} | ||
| > | ||
@@ -95,4 +133,3 @@ <p>Here you can add popover content.</p> | ||
| } | ||
| <hr /> | ||
| </section> | ||
| </article> | ||
| ); | ||
@@ -99,0 +136,0 @@ } |
@@ -24,12 +24,20 @@ import React from 'react'; | ||
| return ( | ||
| <section> | ||
| <h2>Radio Button</h2> | ||
| <article> | ||
| <header> | ||
| <h1>Radio Button</h1> | ||
| </header> | ||
| <RadioGroup name="comic" value={this.state.value} onChange={this.handleChange}> | ||
| <RadioButton label="The Walking Dead" value="thewalkingdead" /> | ||
| <RadioButton label="From Hell" value="fromhell" disabled /> | ||
| <RadioButton label="V for a Vendetta" value="vvendetta" onFocus={this.handleFocus} /> | ||
| <RadioButton label="Watchmen" value="watchmen" onBlur={this.handleBlur} /> | ||
| </RadioGroup> | ||
| </section> | ||
| <div className="component-spec"> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <RadioGroup name="comic" value={this.state.value} onChange={this.handleChange}> | ||
| <RadioButton label="The Walking Dead" value="thewalkingdead" /> | ||
| <RadioButton label="From Hell" value="fromhell" disabled /> | ||
| <RadioButton label="V for a Vendetta" value="vvendetta" onFocus={this.handleFocus} /> | ||
| <RadioButton label="Watchmen" value="watchmen" onBlur={this.handleBlur} /> | ||
| </RadioGroup> | ||
| </div> | ||
| </div> | ||
| </article> | ||
| ); | ||
@@ -36,0 +44,0 @@ } |
| import React from 'react'; | ||
| import Button from '../../components/button'; | ||
| import Toast from '../../components/toast'; | ||
| import { RadioGroup, RadioButton } from '../../components/radio'; | ||
| class ToastTest extends React.Component { | ||
| handleActionChange = (event) => { | ||
| this.setState({ action: event.target.value }); | ||
| }; | ||
| handleLabelChange = (event) => { | ||
| this.setState({ label: event.target.value }); | ||
| }; | ||
| handleSnackbarClick = () => { | ||
@@ -18,4 +27,11 @@ this.setState({ active: false }); | ||
| handleTypeChange = (value) => { | ||
| this.setState({ type: value }); | ||
| }; | ||
| state = { | ||
| action: '', | ||
| active: false, | ||
| label: 'Toast is ready!', | ||
| type: 'accept', | ||
| }; | ||
@@ -25,13 +41,41 @@ | ||
| return ( | ||
| <section> | ||
| <h2>Toast</h2> | ||
| <Button label="Make a toast" primary onClick={this.handleClick} /> | ||
| <article> | ||
| <header> | ||
| <h1>Toast</h1> | ||
| </header> | ||
| <div className="component-spec"> | ||
| <div className="properties"> | ||
| <h3>Properties</h3> | ||
| <h4>Type</h4> | ||
| <RadioGroup name="type" value={this.state.type} onChange={this.handleTypeChange}> | ||
| <RadioButton label="Accept" value="accept" /> | ||
| <RadioButton label="Cancel" value="cancel" /> | ||
| <RadioButton label="Warning" value="warning" /> | ||
| </RadioGroup> | ||
| <h4>Label</h4> | ||
| <p><input type="text" value={this.state.label} onChange={event => this.handleLabelChange(event)} /></p> | ||
| <h4>Action</h4> | ||
| <p><input type="text" value={this.state.action} onChange={event => this.handleActionChange(event)} /></p> | ||
| </div> | ||
| <div className="preview"> | ||
| <h3>Preview</h3> | ||
| <Button label="Make a toast" primary onClick={this.handleClick} /> | ||
| </div> | ||
| </div> | ||
| <Toast | ||
| action={this.state.action} | ||
| active={this.state.active} | ||
| label="Toast is ready!" | ||
| label={this.state.label} | ||
| timeout={3000} | ||
| onClick={this.handleSnackbarClick} | ||
| onTimeout={this.handleSnackbarTimeout} | ||
| type={this.state.type} | ||
| /> | ||
| </section> | ||
| </article> | ||
| ); | ||
@@ -38,0 +82,0 @@ } |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
New author
Supply chain riskA new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by1.59%
393760
- Lines of code
- increased by1.81%
9983
- Number of medium supply chain risk alerts
- decreased by-33.33%
2
Worsened metrics
- Number of package files
- decreased by-1.44%
137
No dependency changes