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

react-fidelity-ui

Package Overview
Dependencies
Maintainers
1
Versions
17
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-fidelity-ui - npm Package Compare versions

Comparing version

0.0.10
to
0.0.11

3

package.json
{
"name": "react-fidelity-ui",
"version": "0.0.10",
"version": "0.0.11",
"description": "High fidelity UI pack for ReactJS",

@@ -38,2 +38,3 @@ "main": "input.js",

"strip-loader": "^0.1.2",
"svg-sprite-loader": "^3.8.0",
"webpack": "^3.10.0",

@@ -40,0 +41,0 @@ "webpack-livereload-plugin": "^1.2.0"

30

README.md

@@ -37,5 +37,5 @@ <!-- Logo -->

import React from 'react';
import { Breadcrumbs } from 'react-fidelity-ui';
import { Alert } from 'react-fidelity-ui';
const WarningAlert = ({ isAlertVisible = false, onHideAlert = () => {} }) => (
const WarningAlert = ({ isVisible = false, onHide = () => {}, onConfirm = () => {} }) => (
<Alert

@@ -46,4 +46,5 @@ type="warning" // string, default = 'info'

content="Default warning alert" // string, default = ''
isVisible={isAlertVisible} // boolean, default = false
isVisible={isVisible} // boolean, default = false
onCancel={() => onHideAlert()} // function, default = () => {}
onConfirm={() => onConfirm()} // function, default = () => {}
/>

@@ -54,3 +55,3 @@ );

#### Breadcrumbs
Breadcrumbs component. Breadcrumbs offer a number of UI configurations via its options `isToggleableOnMobile` and `isStackedOnMobile`.
Breadcrumbs component. Breadcrumbs offer a number of UI configurations for mobile screens via its options `isToggleableOnMobile` and `isStackedOnMobile`.

@@ -67,3 +68,3 @@ ##### Example

isStackedOnMobile={false} // boolean, default = true
isLastActive={true} // boolea, default = false, when set to {false}, you need to pass items with schema { url: string, name: string, isSelected: boolean }
isLastActive={true} // boolean, default = false, when set to {true}, you need to pass items with schema { url: string, name: string, isSelected: boolean }
items={items} // array of objects, with schema [{ url: '', name: '' }], required

@@ -82,5 +83,5 @@ onChange={({ url, name, isSelected, event }) => {}} // function, default = () => {}

import React from 'react';
import { Breadcrumbs } from 'react-fidelity-ui';
import { Checkbox } from 'react-fidelity-ui';
const Checkbox = ({ isChecked, onToggle = () => {} ) => (
const CheckboxComponent = ({ isChecked, onToggle = () => {} ) => (
<Checkbox

@@ -91,3 +92,3 @@ id="test-abc" // string/number, default = autogenerated uid

labelTitle="Tick to activate" // string, default = ''
onChange={() => onToggle()} // function, default = () => {}
onChange={event => onToggle(event)} // function, default = () => {}
/>

@@ -106,3 +107,3 @@ );

const { changeMultiSelect } = utils;
const { changeSingleSelect, changeMultiSelect } = utils;

@@ -114,5 +115,6 @@ const DropdownComponent = ({ items, onChangeItems }) => (

triggerText="Trigger text" // string, default = ''
items={items} // array of objects, with schema [{ url: '', name: '', isSelected: false }], required
onChange={(selectedId, isSelected) => {
const nextItems = changeMultiSelect(items, selectedId, isSelected);
items={items} // array of objects, with schema [{ name: string, isSelected: boolean }], required
onChange={({ name }, isSelected) => {
// update items using multi select logic
const nextItems = changeMultiSelect(items, name, isSelected, 'name');
onChangeItems({ items: nextItems });

@@ -259,3 +261,3 @@ }}

name={tag.name} // string, required
onRemove={() => onRemove(tag.id)} // function, default = undefined
onRemove={() => onRemove(tag.id)} // function, default = undefined, not invoked when undefined
/>

@@ -285,3 +287,3 @@ );

<span>{itemDate.substr(0, 3)}</span>
)} // function, default = undefined
)} // function, default = undefined, not invoked when undefined
/>

@@ -288,0 +290,0 @@ );

3

src/components/Icon/script/Icon.js
import React from 'react';
import '../../../icons/icon-sprite.svg';

@@ -6,3 +7,3 @@ const Icon = ({ name = 'comment', className = '', title = '' }) => (

<svg className="icon component-icon">
<use xlinkHref={`./src/icons/icon-sprite.svg#icon-${name}`}>
<use xlinkHref={`#icon-sprite_icon-${name}`}>
{/* icon is populated here */}

@@ -9,0 +10,0 @@ </use>

4

webpack-dev.config.js

@@ -27,2 +27,6 @@ const path = require('path');

use: 'sass-bulk-import-loader'
},
{
test: /\.svg$/,
use: 'svg-sprite-loader'
}

@@ -29,0 +33,0 @@ ],

bundle/script.js

Sorry, the diff of this file is too big to display

dist/script.min.js

Sorry, the diff of this file is too big to display