@purple/phoenix-components - npm Package Compare versions

Comparing version 0.0.3 to 0.0.4

dist/bundle.cjs.js

@@ -139,6 +139,7 @@ 'use strict';
     var optionsLength = _a.optionsLength;
-    return "repeat(" + optionsLength + ", 180px)";
+    return "repeat(" + optionsLength + ", minmax(100px, 200px))";
 });
-var SingleCard = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    border-color: ", ";\n    font-size: 14px;\n    box-shadow: ", ";\n    font-weight: 500;\n    border-radius: 4px;\n    transition: border 0.3s;\n    cursor: ", ";\n    user-select: none;\n\n    &:hover {\n        border-color: #562878;\n    }\n"], ["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    border-color: ",
-    ";\n    font-size: 14px;\n    box-shadow: ",
+var OptionDecription = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    font-size: 12px;\n    color: rgba(0,0,0,0.6);\n    margin-top: 6px;\n"], ["\n    font-size: 12px;\n    color: rgba(0,0,0,0.6);\n    margin-top: 6px;\n"])));
+var SingleCard = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    font-size: 14px;\n    border-color: ", ";\n    box-shadow: ", ";\n    font-weight: 500;\n    border-radius: 4px;\n    transition: border 0.3s;\n    cursor: ", ";\n    user-select: none;\n\n    &:hover {\n        border-color: #562878;\n    }\n"], ["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    font-size: 14px;\n    border-color: ",
+    ";\n    box-shadow: ",
     ";\n    font-weight: 500;\n    border-radius: 4px;\n    transition: border 0.3s;\n    cursor: ", ";\n    user-select: none;\n\n    &:hover {\n        border-color: #562878;\n    }\n"])), function (_a) {
@@ -157,6 +158,6 @@ var withImage = _a.withImage;
 });
-var CardImage = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    max-width: 40px;\n    margin-bottom: 10px;\n"], ["\n    max-width: 40px;\n    margin-bottom: 10px;\n"])));
-var PickerLabel = styled.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    margin: 0 0 20px 0;\n"], ["\n    display: block;\n    margin: 0 0 20px 0;\n"])));
-var CheckMark = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"], ["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));
-var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
+var CardImage = styled.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    max-width: 40px;\n    margin-bottom: 10px;\n"], ["\n    max-width: 40px;\n    margin-bottom: 10px;\n"])));
+var PickerLabel = styled.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: block;\n    margin: 0 auto 30px;\n    text-align: center;\n    line-height: 20px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 0.7);\n"], ["\n    display: block;\n    margin: 0 auto 30px;\n    text-align: center;\n    line-height: 20px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 0.7);\n"])));
+var CheckMark = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"], ["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));
+var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
@@ -167,5 +168,6 @@ var SelectPicker = function (_a) {
         if (options) {
-            return options.map(function (option, i) { return (React__default.createElement(SingleCard, { key: option.value, checked: option.value === value, onClick: onChange(option.value), withImage: option.image },
+            return options.map(function (option) { return (React__default.createElement(SingleCard, { key: option.value, checked: option.value === value, onClick: function () { return onChange(option.value); }, withImage: option.image },
                 option.image && React__default.createElement(CardImage, { src: option.image }),
                 option.label || option.value,
+                option.description && React__default.createElement(OptionDecription, null, option.description),
                 option.value === value && React__default.createElement(CheckMark, null,
@@ -178,3 +180,3 @@ React__default.createElement(fa.FaCheck, { color: "#fff", size: 14 })))); });
         React__default.createElement(PickerLabel, null, label),
-        React__default.createElement(SelectWrapper, { optionsLength: options.length }, getRadioButtons(options))));
+        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options))));
 };
@@ -181,0 +183,0 @@

dist/bundle.esm.js

@@ -132,6 +132,7 @@ import React__default, { createElement } from 'react';
     var optionsLength = _a.optionsLength;
-    return "repeat(" + optionsLength + ", 180px)";
+    return "repeat(" + optionsLength + ", minmax(100px, 200px))";
 });
-var SingleCard = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    border-color: ", ";\n    font-size: 14px;\n    box-shadow: ", ";\n    font-weight: 500;\n    border-radius: 4px;\n    transition: border 0.3s;\n    cursor: ", ";\n    user-select: none;\n\n    &:hover {\n        border-color: #562878;\n    }\n"], ["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    border-color: ",
-    ";\n    font-size: 14px;\n    box-shadow: ",
+var OptionDecription = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    font-size: 12px;\n    color: rgba(0,0,0,0.6);\n    margin-top: 6px;\n"], ["\n    font-size: 12px;\n    color: rgba(0,0,0,0.6);\n    margin-top: 6px;\n"])));
+var SingleCard = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    font-size: 14px;\n    border-color: ", ";\n    box-shadow: ", ";\n    font-weight: 500;\n    border-radius: 4px;\n    transition: border 0.3s;\n    cursor: ", ";\n    user-select: none;\n\n    &:hover {\n        border-color: #562878;\n    }\n"], ["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    font-size: 14px;\n    border-color: ",
+    ";\n    box-shadow: ",
     ";\n    font-weight: 500;\n    border-radius: 4px;\n    transition: border 0.3s;\n    cursor: ", ";\n    user-select: none;\n\n    &:hover {\n        border-color: #562878;\n    }\n"])), function (_a) {
@@ -150,6 +151,6 @@ var withImage = _a.withImage;
 });
-var CardImage = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    max-width: 40px;\n    margin-bottom: 10px;\n"], ["\n    max-width: 40px;\n    margin-bottom: 10px;\n"])));
-var PickerLabel = styled.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    margin: 0 0 20px 0;\n"], ["\n    display: block;\n    margin: 0 0 20px 0;\n"])));
-var CheckMark = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"], ["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));
-var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
+var CardImage = styled.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    max-width: 40px;\n    margin-bottom: 10px;\n"], ["\n    max-width: 40px;\n    margin-bottom: 10px;\n"])));
+var PickerLabel = styled.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: block;\n    margin: 0 auto 30px;\n    text-align: center;\n    line-height: 20px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 0.7);\n"], ["\n    display: block;\n    margin: 0 auto 30px;\n    text-align: center;\n    line-height: 20px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 0.7);\n"])));
+var CheckMark = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"], ["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));
+var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
@@ -160,5 +161,6 @@ var SelectPicker = function (_a) {
         if (options) {
-            return options.map(function (option, i) { return (React__default.createElement(SingleCard, { key: option.value, checked: option.value === value, onClick: onChange(option.value), withImage: option.image },
+            return options.map(function (option) { return (React__default.createElement(SingleCard, { key: option.value, checked: option.value === value, onClick: function () { return onChange(option.value); }, withImage: option.image },
                 option.image && React__default.createElement(CardImage, { src: option.image }),
                 option.label || option.value,
+                option.description && React__default.createElement(OptionDecription, null, option.description),
                 option.value === value && React__default.createElement(CheckMark, null,
@@ -171,5 +173,5 @@ React__default.createElement(FaCheck, { color: "#fff", size: 14 })))); });
         React__default.createElement(PickerLabel, null, label),
-        React__default.createElement(SelectWrapper, { optionsLength: options.length }, getRadioButtons(options))));
+        React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options))));
 };
 
 export { Input, SelectBox, SelectPicker };

dist/bundle.umd.js

@@ -137,6 +137,7 @@ (function (global, factory) {
         var optionsLength = _a.optionsLength;
-        return "repeat(" + optionsLength + ", 180px)";
+        return "repeat(" + optionsLength + ", minmax(100px, 200px))";
     });
-    var SingleCard = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    border-color: ", ";\n    font-size: 14px;\n    box-shadow: ", ";\n    font-weight: 500;\n    border-radius: 4px;\n    transition: border 0.3s;\n    cursor: ", ";\n    user-select: none;\n\n    &:hover {\n        border-color: #562878;\n    }\n"], ["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    border-color: ",
-        ";\n    font-size: 14px;\n    box-shadow: ",
+    var OptionDecription = styled.div(templateObject_3$1 || (templateObject_3$1 = __makeTemplateObject(["\n    font-size: 12px;\n    color: rgba(0,0,0,0.6);\n    margin-top: 6px;\n"], ["\n    font-size: 12px;\n    color: rgba(0,0,0,0.6);\n    margin-top: 6px;\n"])));
+    var SingleCard = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    font-size: 14px;\n    border-color: ", ";\n    box-shadow: ", ";\n    font-weight: 500;\n    border-radius: 4px;\n    transition: border 0.3s;\n    cursor: ", ";\n    user-select: none;\n\n    &:hover {\n        border-color: #562878;\n    }\n"], ["\n    display: flex;\n    position: relative;\n    min-height: ", ";\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    padding: 14px 0;\n    text-align: center;\n    border: 1px solid;\n    background: #fff;\n    color: rgba(0, 0, 0, 0.8);\n    font-size: 14px;\n    border-color: ",
+        ";\n    box-shadow: ",
         ";\n    font-weight: 500;\n    border-radius: 4px;\n    transition: border 0.3s;\n    cursor: ", ";\n    user-select: none;\n\n    &:hover {\n        border-color: #562878;\n    }\n"])), function (_a) {
@@ -155,6 +156,6 @@ var withImage = _a.withImage;
     });
-    var CardImage = styled.img(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n    max-width: 40px;\n    margin-bottom: 10px;\n"], ["\n    max-width: 40px;\n    margin-bottom: 10px;\n"])));
-    var PickerLabel = styled.label(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    display: block;\n    margin: 0 0 20px 0;\n"], ["\n    display: block;\n    margin: 0 0 20px 0;\n"])));
-    var CheckMark = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"], ["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));
-    var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6;
+    var CardImage = styled.img(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n    max-width: 40px;\n    margin-bottom: 10px;\n"], ["\n    max-width: 40px;\n    margin-bottom: 10px;\n"])));
+    var PickerLabel = styled.label(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n    display: block;\n    margin: 0 auto 30px;\n    text-align: center;\n    line-height: 20px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 0.7);\n"], ["\n    display: block;\n    margin: 0 auto 30px;\n    text-align: center;\n    line-height: 20px;\n    font-size: 14px;\n    color: rgba(0, 0, 0, 0.7);\n"])));
+    var CheckMark = styled.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"], ["\n    position: absolute;\n    width: 32px;\n    height: 32px;\n    background: #562878;\n    border-radius: 2px;\n    top: -15px;\n    right: -15px;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n"])));
+    var templateObject_1$3, templateObject_2$2, templateObject_3$1, templateObject_4, templateObject_5, templateObject_6, templateObject_7;
 
@@ -165,5 +166,6 @@ var SelectPicker = function (_a) {
             if (options) {
-                return options.map(function (option, i) { return (React__default.createElement(SingleCard, { key: option.value, checked: option.value === value, onClick: onChange(option.value), withImage: option.image },
+                return options.map(function (option) { return (React__default.createElement(SingleCard, { key: option.value, checked: option.value === value, onClick: function () { return onChange(option.value); }, withImage: option.image },
                     option.image && React__default.createElement(CardImage, { src: option.image }),
                     option.label || option.value,
+                    option.description && React__default.createElement(OptionDecription, null, option.description),
                     option.value === value && React__default.createElement(CheckMark, null,
@@ -176,3 +178,3 @@ React__default.createElement(fa.FaCheck, { color: "#fff", size: 14 })))); });
             React__default.createElement(PickerLabel, null, label),
-            React__default.createElement(SelectWrapper, { optionsLength: options.length }, getRadioButtons(options))));
+            React__default.createElement(SelectWrapper, { name: name, optionsLength: options.length }, getRadioButtons(options))));
     };
@@ -179,0 +181,0 @@

dist/SelectPicker/index.d.ts

 /// <reference types="react" />
 interface SelectPickerProps {
-    options?: any;
+    options?: Array<Option>;
     label?: string;
     name?: string;
-    onChange?: any;
+    onChange: any;
     value?: string;
 }
+interface Option {
+    value: string;
+    label: string;
+    description?: string;
+    image?: string;
+}
 declare const SelectPicker: ({ options, label, name, onChange, value }: SelectPickerProps) => JSX.Element;
 export default SelectPicker;

dist/SelectPicker/SelectPickerStyles.d.ts

 export declare const SelectPickerWrapper: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SelectWrapper: import("styled-components").StyledComponent<"div", any, any, never>;
+export declare const OptionDecription: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SingleCard: import("styled-components").StyledComponent<"div", any, any, never>;
@@ -4,0 +5,0 @@ export declare const CardImage: import("styled-components").StyledComponent<"img", any, {}, never>;

package.json

 {
   "name": "@purple/phoenix-components",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

New alerts

License Policy Violation

License

This 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

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

49964

increased by4.56%

Lines of code

595

increased by2.76%

No dependency changes