@servicetitan/design-system - npm Package Compare versions

Comparing version 1.3.1 to 1.4.0

dist/elements/Button/Button.d.ts

@@ -5,7 +5,8 @@ import * as React from 'react';
  */
-export interface Props {
+export interface ButtonPropsStrict {
     /** Background color.<br /> Possible values: <i>'primary'</i>, <i>'blue'</i>, <i>'negative'</i>, <i>'red'</i> */
     color?: string;
+    /** Provide children to be rendered inside of the <Button> element */
     children: JSX.Element | React.ReactNode;
-    /** Add class attribute */
+    /** Additional classes */
     className?: string;
@@ -20,2 +21,8 @@ /** Disabled button, unclicable */
     href?: string;
+    /** React element to be rendered as an icon */
+    icon?: React.ReactElement<any>;
+    /** Name of icon to render inside of button */
+    iconName?: string;
+    /** Position the icon on the left or the right of the text */
+    iconPosition?: 'left' | 'right';
     /** Unclicable button */
@@ -43,2 +50,5 @@ inactive?: boolean;
     width?: string;
+}
+export interface ButtonProps extends ButtonPropsStrict {
+    /** Unstrict Props */
     [propName: string]: any;
@@ -49,4 +59,9 @@ }
  */
-export declare class Button extends React.Component<Props> {
+export declare class Button extends React.Component<ButtonProps> {
+    static defaultProps: {
+        iconPosition: string;
+    };
+    hasIcon(): boolean;
+    renderIcon(): JSX.Element;
     render(): JSX.Element;
 }

dist/elements/Button/Button.js

@@ -36,2 +36,3 @@ var __extends = (this && this.__extends) || (function () {
 import * as classnames from 'classnames';
+import { Icon } from '../../visual/Icon';
 /**
@@ -45,4 +46,23 @@ * Buttons provide a possible user actions
     }
+    Button.prototype.hasIcon = function () {
+        if (this.props.iconName || this.props.icon)
+            return true;
+        return false;
+    };
+    Button.prototype.renderIcon = function () {
+        if (!this.hasIcon())
+            return;
+        var ButtonIcon = null;
+        if (this.props.iconName)
+            ButtonIcon = React.createElement(Icon, { className: "Button__icon", name: this.props.iconName });
+        if (this.props.icon)
+            ButtonIcon = this.props.icon;
+        var ButtonIconClasses = classnames('Button__icon', {
+            'Button__icon--left': (this.props.iconPosition === 'left'),
+            'Button__icon--right': (this.props.iconPosition === 'right'),
+        });
+        return React.createElement("span", { className: ButtonIconClasses }, ButtonIcon);
+    };
     Button.prototype.render = function () {
-        var _a = this.props, className = _a.className, full = _a.full, inactive = _a.inactive, large = _a.large, loading = _a.loading, negative = _a.negative, outline = _a.outline, primary = _a.primary, small = _a.small, text = _a.text, props = __rest(_a, ["className", "full", "inactive", "large", "loading", "negative", "outline", "primary", "small", "text"]);
+        var _a = this.props, className = _a.className, full = _a.full, icon = _a.icon, iconName = _a.iconName, iconPosition = _a.iconPosition, inactive = _a.inactive, large = _a.large, loading = _a.loading, negative = _a.negative, outline = _a.outline, primary = _a.primary, small = _a.small, text = _a.text, props = __rest(_a, ["className", "full", "icon", "iconName", "iconPosition", "inactive", "large", "loading", "negative", "outline", "primary", "small", "text"]);
         var _b = this.props, color = _b.color, fill = _b.fill, size = _b.size, width = _b.width;
@@ -65,6 +85,7 @@ // Override string props with boolean values
         };
-        var ButtonColor = (color) ? ButtonColorClasses[color] : '';
+        var ButtonColor = (color) ? ButtonColorClasses[color] : 'Button--grey';
         var ButtonWidth = (width && width !== 'full') ? width : false;
         var preventClicks = (this.props.disabled || inactive || loading);
         var ButtonClasses = classnames('Button', className, ButtonColor, {
+            'Button--solid': !fill,
             'Button--outline': (fill === 'outline'),
@@ -80,4 +101,10 @@ 'Button--transparent': (fill === 'none'),
         return (React.createElement(ButtonElement, __assign({ role: "button", className: ButtonClasses, style: { width: ButtonWidth }, disabled: preventClicks }, props),
-            React.createElement("span", { className: "Button__text" }, this.props.children)));
+            React.createElement("span", { className: "Button__content" },
+                (iconPosition === 'left') && this.renderIcon(),
+                this.props.children,
+                (iconPosition === 'right') && this.renderIcon())));
     };
+    Button.defaultProps = {
+        iconPosition: 'left',
+    };
     return Button;
@@ -84,0 +111,0 @@ }(React.Component));

dist/elements/Button/index.d.ts

@@ -1,1 +0,1 @@
-export { Button } from './Button';
+export { Button, ButtonProps, ButtonPropsStrict } from './Button';

dist/elements/Card/Card.d.ts

@@ -14,2 +14,3 @@ import * as React from 'react';
     thin?: boolean;
+    padding?: string;
     [propName: string]: any;
@@ -16,0 +17,0 @@ }

dist/elements/Card/Card.js

@@ -52,10 +52,11 @@ var __extends = (this && this.__extends) || (function () {
     Card.prototype.render = function () {
-        var _a = this.props, className = _a.className, disabled = _a.disabled, raised = _a.raised, thin = _a.thin, sharp = _a.sharp, hoverable = _a.hoverable, active = _a.active, light = _a.light, props = __rest(_a, ["className", "disabled", "raised", "thin", "sharp", "hoverable", "active", "light"]);
+        var _a = this.props, className = _a.className, disabled = _a.disabled, raised = _a.raised, thin = _a.thin, sharp = _a.sharp, hoverable = _a.hoverable, active = _a.active, light = _a.light, padding = _a.padding, props = __rest(_a, ["className", "disabled", "raised", "thin", "sharp", "hoverable", "active", "light", "padding"]);
         var CardClasses = classnames('Card', className, {
             'Card--raised': raised,
-            'Card--thin': thin,
+            'Card--thin': thin || padding === 'thin',
             'Card--sharp': sharp,
             'Card--hoverable': hoverable || this.props.onClick,
             'Card--active': active,
-            'Card--disabled': disabled
+            'Card--disabled': disabled,
+            'Card--no-padding': padding === 'none'
         });
@@ -62,0 +63,0 @@ var children = (React.createElement(CardSection, { light: light }, this.props.children));

dist/elements/ProgressBar/ProgressBar.js

@@ -42,3 +42,3 @@ var __extends = (this && this.__extends) || (function () {
     ProgressBar.prototype.render = function () {
-        var _a = this.props, className = _a.className, El = _a.el, green = _a.green, progress = _a.progress, red = _a.red, small = _a.small, yellow = _a.yellow, props = __rest(_a, ["className", "el", "green", "progress", "red", "small", "yellow"]);
+        var _a = this.props, className = _a.className, ProgressBarElement = _a.el, green = _a.green, progress = _a.progress, red = _a.red, small = _a.small, yellow = _a.yellow, props = __rest(_a, ["className", "el", "green", "progress", "red", "small", "yellow"]);
         var ProgressBarClasses = classnames('ProgressBar', className, {
@@ -50,3 +50,3 @@ 'ProgressBar--green': (green),
         });
-        return (React.createElement(El, __assign({ className: ProgressBarClasses, max: "100", value: progress }, props),
+        return (React.createElement(ProgressBarElement, __assign({ className: ProgressBarClasses, max: "100", value: progress }, props),
             React.createElement("div", { className: "ProgressBar__bg", role: "presentation" },
@@ -53,0 +53,0 @@ React.createElement("div", { className: "ProgressBar__value", style: { width: progress + '%' } }))));

dist/patterns/Form/Form.d.ts

 import * as React from 'react';
-import { FormProps as SemanticFormProps, FormCheckbox, FormDropdown, FormField, FormGroup, FormInput, FormRadio, FormTextArea } from 'semantic-ui-react';
+import { FormProps as SemanticFormProps, FormCheckbox, FormField, FormGroup, FormInput, FormRadio, FormTextArea } from 'semantic-ui-react';
 import { FormButton } from './FormButton';
 import { FormSelect } from './FormSelect';
+import { FormDropdown } from './FormDropdown';
 export declare class Form extends React.Component<SemanticFormProps> {
@@ -6,0 +7,0 @@ static Checkbox: typeof FormCheckbox;

dist/patterns/Form/Form.js

@@ -26,5 +26,6 @@ var __extends = (this && this.__extends) || (function () {
 import * as React from 'react';
-import { Form as SemanticForm, FormCheckbox, FormDropdown, FormField, FormGroup, FormInput, FormRadio, FormTextArea } from 'semantic-ui-react';
+import { Form as SemanticForm, FormCheckbox, FormField, FormGroup, FormInput, FormRadio, FormTextArea } from 'semantic-ui-react';
 import { FormButton } from './FormButton';
 import { FormSelect } from './FormSelect';
+import { FormDropdown } from './FormDropdown';
 var Form = /** @class */ (function (_super) {
@@ -31,0 +32,0 @@ __extends(Form, _super);

dist/patterns/Form/FormButton.d.ts

 import * as React from 'react';
+import { Button } from '../../elements/Button';
 import { FormButtonProps as SemanticFormButtonProps } from 'semantic-ui-react';
 export declare class FormButton extends React.Component<SemanticFormButtonProps> {
-    static defaultProps: Partial<SemanticFormButtonProps>;
+    static defaultProps: {
+        control: typeof Button;
+    };
     render(): JSX.Element;
 }

dist/patterns/Form/FormSelect.d.ts

@@ -7,3 +7,3 @@ import * as React from 'react';
 }
-interface FormSelectProps extends SemanticFormSelectProps {
+export interface FormSelectProps extends SemanticFormSelectProps {
     grouped?: boolean;
@@ -17,3 +17,5 @@ }
 export declare class FormSelect extends React.Component<FormSelectProps, FormSelectState> {
-    static defaultProps: Partial<FormSelectProps>;
+    static defaultProps: {
+        icon: JSX.Element;
+    };
     readonly options: SemanticDropdownItemProps[];
@@ -20,0 +22,0 @@ constructor(props: FormSelectProps);

dist/patterns/Form/FormSelect.js

@@ -37,2 +37,3 @@ var __extends = (this && this.__extends) || (function () {
 import { FormSelect as SemanticFormSelect } from 'semantic-ui-react';
+import { Icon } from '../../visual/Icon';
 var GroupedFormSelectItem = function (props) {
@@ -151,3 +152,3 @@ return (React.createElement(React.Fragment, null,
     FormSelect.defaultProps = {
-        icon: React.createElement("i", { className: "icon dropdown" })
+        icon: React.createElement(Icon, { name: "angle-down", className: "icon dropdown" })
     };
@@ -154,0 +155,0 @@ return FormSelect;

dist/patterns/Form/index.d.ts

 export { Form } from './Form';
+export { FormDropdownProps } from './FormDropdown';
+export { FormSelectProps } from './FormSelect';

dist/system.d.ts

@@ -1,2 +0,3 @@
-export { Checkbox, Input, Radio, Select, Dropdown, TextArea } from 'semantic-ui-react';
+export { Checkbox, Input, Radio, Select, TextArea } from 'semantic-ui-react';
+export { Icon } from './visual/Icon';
 export { Text } from './visual/Text';
@@ -6,5 +7,8 @@ export { Container } from './layout/Container';
 export { Button } from './elements/Button';
+export { ButtonGroup } from './elements/ButtonGroup';
 export { Card } from './elements/Card';
+export { Dropdown, DropdownProps } from './elements/Dropdown';
 export { Link } from './elements/Link';
 export { ProgressBar } from './elements/ProgressBar';
-export { Form } from './patterns/Form';
+export { ProgressTracker } from './elements/ProgressTracker';
+export { Form, FormDropdownProps, FormSelectProps } from './patterns/Form';

dist/system.js

@@ -1,3 +0,4 @@
-export { Checkbox, Input, Radio, Select, Dropdown, TextArea } from 'semantic-ui-react';
+export { Checkbox, Input, Radio, Select, TextArea } from 'semantic-ui-react';
 // Visual
+export { Icon } from './visual/Icon';
 export { Text } from './visual/Text';
@@ -9,7 +10,10 @@ // Layout
 export { Button } from './elements/Button';
+export { ButtonGroup } from './elements/ButtonGroup';
 export { Card } from './elements/Card';
+export { Dropdown } from './elements/Dropdown';
 export { Link } from './elements/Link';
 export { ProgressBar } from './elements/ProgressBar';
+export { ProgressTracker } from './elements/ProgressTracker';
 // Patterns
 export { Form } from './patterns/Form';
 //# sourceMappingURL=system.js.map

package.json

 {
     "name": "@servicetitan/design-system",
-    "version": "1.3.1",
+    "version": "1.4.0",
     "description": "",
@@ -43,3 +43,3 @@ "main": "./dist/system.js",
     },
-    "gitHead": "0c485fb20a6db274f0fc47593fc9387038f51e5a"
+    "gitHead": "94423168601153f9d86629d9ec439851a7b52043"
 }

No alert changes

Improved metrics

Total package byte prevSize

560040

increased by9.69%

Number of package files

100

increased by56.25%

Lines of code

8704

increased by11.2%

No dependency changes