@zebra-fed/zds-react-desktop - npm Package Compare versions

Comparing version 0.6.72 to 0.9.0

components/SVGIcon/SVGIcon.d.ts

 import { SyntheticEvent } from 'react';
 import PropTypes from 'prop-types';
-import { SizeType } from "../../interfaces/SizeType";
+import { SizeType } from '../../interfaces';
 import CSS from 'csstype';
@@ -10,3 +10,3 @@ export interface SVGIconProps {
     style?: CSS.Properties;
-    size?: SizeType;
+    size?: SizeType | string;
     color?: string;
@@ -13,0 +13,0 @@ className?: string;

components/SVGIcon/SVGIcon.js

@@ -20,4 +20,4 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import styled from "styled-components";
-import { SizeType } from "../../interfaces/SizeType";
-var IconWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n    opacity: ", ";\n    > svg {\n        fill: ", ";\n        width:  ", ";\n        height:  ", ";\n        transition: fill .5s, opacity .5s;\n    }\n    &:hover {\n        > svg {\n            fill: ", ";\n            cursor: ", ";\n        }\n    }\n"], ["\n    display: flex;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n    opacity: ", ";\n    > svg {\n        fill: ", ";\n        width:  ", ";\n        height:  ", ";\n        transition: fill .5s, opacity .5s;\n    }\n    &:hover {\n        > svg {\n            fill: ", ";\n            cursor: ", ";\n        }\n    }\n"])), function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return (props.hoverColor && props.hasclick && !props.disabled) ? 'pointer' : 'default'; }, function (props) { return props.disabled ? .5 : 1; }, function (props) { return props.color; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return !props.disabled ? (props.hoverColor || props.color) : props.color; }, function (props) { return (props.hoverColor && props.hasclick && !props.disabled) ? 'pointer' : 'default'; });
+import { SizeType } from '../../interfaces';
+var IconWrapper = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n    display: inline-flex;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n    opacity: ", ";\n    > svg {\n        fill: ", ";\n        width:  ", ";\n        height:  ", ";\n        transition: fill .5s, opacity .5s;\n    }\n    &:hover {\n        > svg {\n            fill: ", ";\n            cursor: ", ";\n        }\n    }\n"], ["\n    display: inline-flex;\n    position: relative;\n    width: ", ";\n    height: ", ";\n    cursor: ", ";\n    opacity: ", ";\n    > svg {\n        fill: ", ";\n        width:  ", ";\n        height:  ", ";\n        transition: fill .5s, opacity .5s;\n    }\n    &:hover {\n        > svg {\n            fill: ", ";\n            cursor: ", ";\n        }\n    }\n"])), function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return (props.hoverColor && props.hasClick && !props.disabled) ? 'pointer' : 'default'; }, function (props) { return props.disabled ? .5 : 1; }, function (props) { return props.color; }, function (props) { return props.size; }, function (props) { return props.size; }, function (props) { return !props.disabled ? (props.hoverColor || props.color) : props.color; }, function (props) { return (props.hoverColor && props.hasClick && !props.disabled) ? 'pointer' : 'default'; });
 export var SVGIcon = function (props) {
@@ -59,3 +59,3 @@ var inherit = 'default';
     var useTag = '<use xlink:href="#' + props.iconid + '" />';
-    return (React.createElement(IconWrapper, __assign({ className: 'Icon ' + props.className, hoverColor: props.hoverColor, hasclick: !!onClick, disabled: !!(disabled), style: style, size: iconSize, color: color ? color : colorObj.iconColor, "data-name": props.iconid }, context.getDataSet(props)),
+    return (React.createElement(IconWrapper, __assign({ className: 'Icon ' + props.className, hoverColor: props.hoverColor, hasClick: !!onClick, disabled: !!(disabled), style: style, size: iconSize, color: color ? color : colorObj.iconColor, "data-name": props.iconid }, context.getDataSet(props)),
         React.createElement("svg", { "data-id": props["data-id"], viewBox: "0 0 100 100", dangerouslySetInnerHTML: { __html: useTag } }),
@@ -62,0 +62,0 @@ onClick && !disabled ? React.createElement("div", __assign({ style: { position: 'absolute', cursor: 'pointer', top: 0, bottom: 0, right: 0, left: 0, backgroundColor: 'rgba(0,0,0,.001)' }, className: "icon-click-target", onClick: clickAction }, context.getDataSet(props, ' clickTarget'))) : null));

components/TextField/TextField.d.ts

@@ -6,3 +6,3 @@ import React, { SyntheticEvent } from 'react';
 import { InputType } from "../../interfaces/InputType";
-import { AnnotationPosition } from "../../interfaces/AnnotationPosition";
+import { AnnotationPosition } from '../../interfaces';
 export interface TextFieldProps {
@@ -9,0 +9,0 @@ autoComplete?: string;

components/TextField/TextField.js

@@ -10,3 +10,3 @@ import React, { useContext, useEffect, useRef, useState, forwardRef, useImperativeHandle } from 'react';
 import { LabelWrapper } from "./LabelWrapper";
-import { AnnotationPosition } from "../../interfaces/AnnotationPosition";
+import { AnnotationPosition } from '../../interfaces';
 import { HintMessage, TextFieldWrapper } from "./TextFieldWrapper";
@@ -13,0 +13,0 @@ var tabIndexVal = 1;

components/TextField/TextFieldWrapper.js

@@ -11,2 +11,3 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
 import { SizeType } from "../../interfaces/SizeType";
+import { InputType } from "../../interfaces/InputType";
 export var HintMessage = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\ndisplay: flex;\nfont-family: ", ";\n> .input_error {\n    display: flex;\n    font-size: ", ";\n    text-align: left;\n    color: ", ";\n    &:empty {\n        display:none;\n    }\n}\n> .input_hint {\n    display: flex;\n    font-size: ", ";\n    text-align: left;\n    color: ", ";\n    &:empty {\n        display:none;\n    }\n}\n"], ["\ndisplay: flex;\nfont-family: ", ";\n> .input_error {\n    display: flex;\n    font-size: ", ";\n    text-align: left;\n    color: ", ";\n    &:empty {\n        display:none;\n    }\n}\n> .input_hint {\n    display: flex;\n    font-size: ", ";\n    text-align: left;\n    color: ", ";\n    &:empty {\n        display:none;\n    }\n}\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.spacingObj.bodySmallFontSize; }, function (props) { return props.colors.errorBorderColor; }, function (props) { return props.spacingObj.bodySmallFontSize; }, function (props) { return props.colors.textColor; });
@@ -20,8 +21,8 @@ var calcPaddingLeft = function (preFixWidth, spacingObj) {
 };
-export var TextFieldWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    border-radius: ", "px;\n    min-height: ", "px;\n    color: ", ";\n    line-height: ", "px;\n    border: solid 1px ", ";\n    position: relative;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    z-index: 1;\n    outline: none;\n    font-weight: normal;\n    width: calc(", " - ", "px);\n    display: inline-block;\n    margin: ", ";\n    background-color: ", ";\n    box-shadow: 0 0 0 1px transparent;\n    transition: .25s linear border-color, .1s linear box-shadow;\n    &:hover {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    &.active {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    > input, > textarea {\n        font-family: ", ";\n        background-color: transparent;\n        overflow: hidden;\n        line-height: ", ";\n        outline: none;\n        width: calc(100% - ", "px);\n        padding-bottom: 0;\n        padding-top: 0;\n        color: ", ";\n        font-weight: 400;\n        font-size:  ", ";\n        margin-top: ", ";\n        border: none;\n        &::placeholder {\n            color: ", ";\n        }\n        caret-color: ", ";\n    }\n    > .prefix, .postfix {\n        display: flex;\n        align-items: center;\n        position: absolute;\n        font-size:  ", "rem;\n        padding: 0 ", "px 0 ", "px;\n        top: 0;\n        bottom: 0;\n    }\n    > .prefix {\n        left: 0;\n        padding-left: ", "px;\n    }\n    > .postfix {\n        right: 0;\n        padding-right: ", "px;\n    }\n"], ["\n    font-family: ", ";\n    border-radius: ", "px;\n    min-height: ", "px;\n    color: ", ";\n    line-height: ", "px;\n    border: solid 1px ", ";\n    position: relative;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    z-index: 1;\n    outline: none;\n    font-weight: normal;\n    width: calc(", " - ", "px);\n    display: inline-block;\n    margin: ", ";\n    background-color: ", ";\n    box-shadow: 0 0 0 1px transparent;\n    transition: .25s linear border-color, .1s linear box-shadow;\n    &:hover {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    &.active {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    > input, > textarea {\n        font-family: ", ";\n        background-color: transparent;\n        overflow: hidden;\n        line-height: ", ";\n        outline: none;\n        width: calc(100% - ", "px);\n        padding-bottom: 0;\n        padding-top: 0;\n        color: ", ";\n        font-weight: 400;\n        font-size:  ", ";\n        margin-top: ", ";\n        border: none;\n        &::placeholder {\n            color: ", ";\n        }\n        caret-color: ", ";\n    }\n    > .prefix, .postfix {\n        display: flex;\n        align-items: center;\n        position: absolute;\n        font-size:  ", "rem;\n        padding: 0 ", "px 0 ", "px;\n        top: 0;\n        bottom: 0;\n    }\n    > .prefix {\n        left: 0;\n        padding-left: ", "px;\n    }\n    > .postfix {\n        right: 0;\n        padding-right: ", "px;\n    }\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.shape !== ShapeType.Sharp ? props.spacingObj.padding / 2 : 0; }, function (props) { return props.elementType === 'textarea' ? props.height * 2.5 : props.height; }, function (props) { return props.colors.textColor; }, function (props) { return props.height; }, function (props) { return !!props.error ? props.colors.errorBorderColor : props.colors.borderColor; }, function (props) { return calcPaddingLeft(props.preFixWidth, props.spacingObj); }, function (props) { return calcPaddingRight(props.inputType, props.postFixWidth, props.spacingObj); }, function (props) { return props.width; }, function (props) { return (calcPaddingLeft(props.preFixWidth, props.spacingObj) + (calcPaddingRight(props.inputType, props.postFixWidth, props.spacingObj))); }, function (props) { return (props.showSuggestions ? '0' : props.spacingObj.margin) + 'px 0'; }, function (props) { return props.disabled ? props.colors.idleBorderColor
+export var TextFieldWrapper = styled.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n    font-family: ", ";\n    border-radius: ", "px;\n    min-height: ", "px;\n    color: ", ";\n    line-height: ", "px;\n    border: solid 1px ", ";\n    position: relative;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    z-index: 1;\n    outline: none;\n    font-weight: normal;\n    width: calc(", " - ", "px);\n    display: inline-block;\n    margin: ", ";\n    background-color: ", ";\n    box-shadow: 0 0 0 1px transparent;\n    transition: .25s linear border-color, .1s linear box-shadow;\n    &:hover {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    &.active {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    > input, > textarea {\n        font-family: ", ";\n        background-color: transparent;\n        overflow: hidden;\n        line-height: ", ";\n        outline: none;\n        width: calc(100% - ", "px);\n        padding-bottom: 0;\n        padding-top: 0;\n        position: relative;\n        &::-webkit-outer-spin-button,\n        &::-webkit-inner-spin-button {\n          margin-left: ", "px;\n          width: ", "px;\n        }\n        color: ", ";\n        font-weight: 400;\n        font-size:  ", ";\n        margin-top: ", ";\n        border: none;\n        &::placeholder {\n            color: ", ";\n        }\n        caret-color: ", ";\n    }\n    > .prefix, .postfix {\n        display: flex;\n        align-items: center;\n        position: absolute;\n        font-size:  ", "rem;\n        padding: 0 ", "px 0 ", "px;\n        top: 0;\n        bottom: 0;\n    }\n    > .prefix {\n        left: 0;\n        padding-left: ", "px;\n    }\n    > .postfix {\n        right: 0;\n        padding-right: ", "px;\n    }\n"], ["\n    font-family: ", ";\n    border-radius: ", "px;\n    min-height: ", "px;\n    color: ", ";\n    line-height: ", "px;\n    border: solid 1px ", ";\n    position: relative;\n    padding-left: ", "px;\n    padding-right: ", "px;\n    z-index: 1;\n    outline: none;\n    font-weight: normal;\n    width: calc(", " - ", "px);\n    display: inline-block;\n    margin: ", ";\n    background-color: ", ";\n    box-shadow: 0 0 0 1px transparent;\n    transition: .25s linear border-color, .1s linear box-shadow;\n    &:hover {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    &.active {\n        border-color: ", ";\n        box-shadow: 0 0 0 1px ", ";\n    }\n    > input, > textarea {\n        font-family: ", ";\n        background-color: transparent;\n        overflow: hidden;\n        line-height: ", ";\n        outline: none;\n        width: calc(100% - ", "px);\n        padding-bottom: 0;\n        padding-top: 0;\n        position: relative;\n        &::-webkit-outer-spin-button,\n        &::-webkit-inner-spin-button {\n          margin-left: ", "px;\n          width: ", "px;\n        }\n        color: ", ";\n        font-weight: 400;\n        font-size:  ", ";\n        margin-top: ", ";\n        border: none;\n        &::placeholder {\n            color: ", ";\n        }\n        caret-color: ", ";\n    }\n    > .prefix, .postfix {\n        display: flex;\n        align-items: center;\n        position: absolute;\n        font-size:  ", "rem;\n        padding: 0 ", "px 0 ", "px;\n        top: 0;\n        bottom: 0;\n    }\n    > .prefix {\n        left: 0;\n        padding-left: ", "px;\n    }\n    > .postfix {\n        right: 0;\n        padding-right: ", "px;\n    }\n"])), function (props) { return props.fontFamilyObj; }, function (props) { return props.shape !== ShapeType.Sharp ? props.spacingObj.padding / 2 : 0; }, function (props) { return props.elementType === 'textarea' ? props.height * 2.5 : props.height; }, function (props) { return props.colors.textColor; }, function (props) { return props.height; }, function (props) { return !!props.error ? props.colors.errorBorderColor : props.colors.borderColor; }, function (props) { return calcPaddingLeft(props.preFixWidth, props.spacingObj); }, function (props) { return calcPaddingRight(props.inputType, props.postFixWidth, props.spacingObj); }, function (props) { return props.width; }, function (props) { return (calcPaddingLeft(props.preFixWidth, props.spacingObj) + (calcPaddingRight(props.inputType, props.postFixWidth, props.spacingObj))); }, function (props) { return (props.showSuggestions ? '0' : props.spacingObj.margin) + 'px 0'; }, function (props) { return props.disabled ? props.colors.idleBorderColor
     : (!!props.error || props.error)
         ? props.colors.errorBackgroundColor
-        : props.colors.backgroundColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.hoverBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.hoverBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.typingBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.typingBorderColor; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.elementType === 'textarea' ? 'normal' : "".concat(props.height, "px"); }, function (props) { return props.postFixWidth; }, function (props) { return props.colors.typingTextColor; }, function (props) { return (props.size === SizeType.XSmall || props.size === SizeType.Small)
+        : props.colors.backgroundColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.hoverBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.hoverBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.typingBorderColor; }, function (props) { return !!props.error || props.error ? props.colors.errorBorderColor : props.colors.typingBorderColor; }, function (props) { return props.fontFamilyObj; }, function (props) { return props.elementType === 'textarea' ? 'normal' : "".concat(props.height, "px"); }, function (props) { return props.inputType === InputType.Number ? 0 : props.postFixWidth; }, function (props) { return props.postFixWidth - (props.spacingObj.margin * 2); }, function (props) { return props.spacingObj.margin * 3; }, function (props) { return props.colors.typingTextColor; }, function (props) { return (props.size === SizeType.XSmall || props.size === SizeType.Small)
     ? props.spacingObj.bodyMediumFontSize
     : props.spacingObj.bodyLargeFontSize; }, function (props) { return props.elementType === 'textarea' ? props.spacingObj.padding + 'px' : 0; }, function (props) { return props.colors.textColor; }, function (props) { return props.colors.textColor; }, function (props) { return props.spacingObj.fontSize; }, function (props) { return 2 * props.spacingObj.padding; }, function (props) { return 2 * props.spacingObj.padding; }, function (props) { return 1.5 * props.spacingObj.padding; }, function (props) { return 1.5 * props.spacingObj.padding; });
 var templateObject_1, templateObject_2;

interfaces/ShapeType.js

@@ -1,8 +0,1 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ShapeType = void 0;
-
 /**
@@ -13,7 +6,9 @@ * Theme style definitions for various components. Typically describes the
  */
-var ShapeType = {
-  Round: 'round',
-  Rounded: 'rounded',
-  Sharp: 'sharp'
-};
-exports.ShapeType = ShapeType;
+import PropTypes from "prop-types";
+export var ShapeType;
+(function (ShapeType) {
+    ShapeType["Round"] = "round";
+    ShapeType["Rounded"] = "rounded";
+    ShapeType["Sharp"] = "sharp";
+})(ShapeType || (ShapeType = {}));
+export var ShapePropType = PropTypes.oneOf(Object.values(ShapeType));

package.json

 {
   "name": "@zebra-fed/zds-react-desktop",
-  "version": "0.6.72",
+  "version": "0.9.0",
   "description": "Zebra Desktop. A React component library.",
@@ -5,0 +5,0 @@ "main": "./index.css",

sandbox.js

 import React, { useState, useEffect } from 'react';
-import { SVGIcon, RangeSlider, RangeSliderInput, SliderInput, TextField } from './components';
+import { SVGIcon, TextField } from './components';
 import { StripesTheme } from './StripesTheme';
 import { icons } from './iconLibrary';
 import '@zebra-fed/icons/Navigation/index.css';
-import { ThemeMode, ShapeType } from './interfaces';
+import { ThemeMode, ShapeType, InputType } from './interfaces';
 export function App() {
@@ -37,10 +37,9 @@ var themeObj = {
     return React.createElement(StripesTheme, { mode: ThemeMode.Light, theme: themeObj },
+        React.createElement("div", { style: { display: 'flex', alignItems: 'center' } },
+            React.createElement(SVGIcon, { iconid: 'home', size: '50px', style: { marginRight: '10px' } }),
+            React.createElement("span", null, "Get Started")),
         React.createElement("div", { style: { margin: '50px' } },
-            React.createElement(RangeSliderInput, { numMarkers: 10, range: [0, 90], step: 2, onChange: function (val) { return console.log(val); }, shape: ShapeType.Rounded, label: 'This is a Label', value: [40, 50] })),
+            React.createElement(TextField, { shape: ShapeType.Sharp, postfix: React.createElement(SVGIcon, { iconid: 'email' }), width: '100px', inputType: InputType.Number, placeholder: "Enter a Number" })),
         React.createElement("div", { style: { margin: '50px' } },
-            React.createElement(SliderInput, { numMarkers: 10, range: [0, 90], step: 2, label: 'Another Label for testing height', onChange: function (val) { return console.log(val); }, shape: ShapeType.Rounded, value: 40 })),
-        React.createElement("div", { style: { margin: '50px' } },
-            React.createElement(RangeSlider, { numMarkers: 10, range: [0, 90], value: [40, 50] })),
-        React.createElement("div", { style: { margin: '50px' } },
-            React.createElement(TextField, { shape: ShapeType.Sharp, postfix: React.createElement(SVGIcon, { iconid: 'email' }), width: '50%', placeholder: "Enter a Number" })));
+            React.createElement(TextField, { shape: ShapeType.Sharp, postfix: React.createElement(SVGIcon, { iconid: 'email' }), width: '100px', placeholder: "Enter a Number" })));
 }

New alerts

New author

Supply chain risk

A 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

715986

increased by0.06%

Number of package files

292

increased by0.34%

Worsened metrics

Lines of code

11440

decreased by-0.01%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes