diff --git a/lib/components/Field/Field.js b/lib/components/Field/Field.js index 6ca8e132..8508b5bd 100644 --- a/lib/components/Field/Field.js +++ b/lib/components/Field/Field.js @@ -50,6 +50,9 @@ var Field = react_1.default.forwardRef(function (_a, forwardedRef) { if (react_1.default.isValidElement(child) && child.type === components_1.Helper) { return react_1.default.createElement(HelperContainer, null, react_1.default.cloneElement(child, { inline: true })); } + if (react_1.default.isValidElement(child) && child.type === components_1.Block) { + return react_1.default.cloneElement(child, { id: inputId, ariaLabelledBy: labelId }); + } if (react_1.default.isValidElement(child)) { return react_1.default.cloneElement(child, { id: inputId, 'aria-labelledby': labelId }); } diff --git a/lib/components/Field/Field.js.map b/lib/components/Field/Field.js.map index abc2a4b0..fa33d797 100644 --- a/lib/components/Field/Field.js.map +++ b/lib/components/Field/Field.js.map @@ -1 +1 @@ -{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0D;AAC1D,wEAAuC;AACvC,+CAA4F;AAC5F,qCAAkC;AAElC,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,wIAAsB,8DAGxC,EAA+C,KAC7D,KADc,UAAC,EAAW;QAAV,SAAS,eAAA;IAAM,OAAA,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC;AAA9B,CAA8B,CAC7D,CAAC;AAEF,IAAM,cAAc,GAAG,2BAAM,CAAC,GAAG,2KAAA,wGAMhC,IAAA,CAAC;AAEF,IAAM,KAAK,GAAG,2BAAM,CAAC,KAAK,mFAAA,gBAEzB,IAAA,CAAC;AAEF,IAAM,OAAO,GAAG,2BAAM,CAAC,IAAI,sGAAA,mCAE1B,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,gHAAA,6CAGjC,IAAA,CAAC;AAuDF,IAAM,KAAK,GAAG,eAAK,CAAC,UAAU,CAC5B,UACE,EAUa,EACb,YAAiC;IAV/B,IAAA,KAAK,WAAA,EACL,MAAM,YAAA,EACN,OAAO,aAAA,EACP,kBAAkB,EAAlB,UAAU,mBAAG,KAAK,KAAA,EAClB,iBAAiB,EAAjB,SAAS,mBAAG,KAAK,KAAA,EACjB,aAAa,mBAAA,EACb,QAAQ,cAAA,EACR,OAAO,aAAA,EACJ,IAAI,cATT,iGAUC,CADQ;IAIT,IAAM,OAAO,GAAG,IAAA,aAAK,EAAC,QAAQ,CAAC,CAAC;IAChC,IAAM,OAAO,GAAG,IAAA,aAAK,EAAC,QAAQ,CAAC,CAAC;IAEhC,IAAM,iBAAiB,GAAG,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;QAC1D,IAAI,eAAK,CAAC,cAAc,CAAc,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,mBAAM,EAAE;YACrE,OAAO,8BAAC,eAAe,QAAE,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAC,MAAM,EAAE,IAAI,EAAC,CAAC,CAAmB,CAAC;SACvF;QAED,IAAI,eAAK,CAAC,cAAc,CAAsB,KAAK,CAAC,EAAE;YACpD,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE,EAAC,EAAE,EAAE,OAAO,EAAE,iBAAiB,EAAE,OAAO,EAAC,CAAC,CAAC;SAC7E;QAED,OAAO,IAAI,CAAC;IACd,CAAC,CAAC,CAAC;IAEH,OAAO,CACL,8BAAC,cAAc,aAAC,GAAG,EAAE,YAAY,EAAE,SAAS,EAAE,SAAS,aAAT,SAAS,cAAT,SAAS,GAAI,KAAK,IAAM,IAAI;QACxE,8BAAC,cAAc;YACZ,UAAU,IAAI,8BAAC,iBAAI,IAAC,KAAK,EAAC,SAAS,GAAG;YACvC,8BAAC,KAAK,IAAC,OAAO,EAAE,OAAO,EAAE,EAAE,EAAE,OAAO;gBACjC,KAAK;gBACL,aAAa,IAAI,CAChB;;oBACQ,0CAAK,aAAa,CAAM,CAC7B,CACJ,CACK;YACP,OAAO,IAAI,8BAAC,OAAO,QAAE,OAAO,CAAW;YACvC,MAAM,IAAI,CAAC,QAAQ,KAAK,OAAO,MAAM,CAAC,CAAC,CAAC,8BAAC,mBAAM,IAAC,IAAI,EAAE,MAAM,GAAI,CAAC,CAAC,CAAC,MAAM,CAAC;YAC1E,OAAO,CACO;QAChB,iBAAiB,CACH,CAClB,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,sBAAK"} \ No newline at end of file +{"version":3,"file":"Field.js","sourceRoot":"","sources":["../../../src/components/Field/Field.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/lib/components/Search/Search.js b/lib/components/Search/Search.js index bdb6e6b3..534fbcbf 100644 --- a/lib/components/Search/Search.js +++ b/lib/components/Search/Search.js @@ -53,7 +53,7 @@ var react_1 = __importDefault(require("react")); var styled_components_1 = __importStar(require("styled-components")); var theme_1 = require("../../theme"); var icons_1 = require("../../icons"); -var Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid ", ";\n background: ", ";\n height: 44px;\n box-sizing: border-box;\n gap: 10px;\n\n :focus-within {\n border-bottom: 1px solid ", ";\n }\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid ", ";\n background: ", ";\n height: 44px;\n box-sizing: border-box;\n gap: 10px;\n\n :focus-within {\n border-bottom: 1px solid ", ";\n }\n\n ", "\n"])), (0, theme_1.getColor)('grey', 100), (0, theme_1.getColor)('white'), (0, theme_1.getColor)('brand', 100), function (_a) { +var Container = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid ", ";\n background: ", ";\n height: 44px;\n box-sizing: border-box;\n gap: 10px;\n\n &:focus-within {\n border-bottom: 1px solid ", ";\n }\n\n ", "\n"], ["\n display: flex;\n justify-content: space-between;\n align-items: center;\n border-bottom: 1px solid ", ";\n background: ", ";\n height: 44px;\n box-sizing: border-box;\n gap: 10px;\n\n &:focus-within {\n border-bottom: 1px solid ", ";\n }\n\n ", "\n"])), (0, theme_1.getColor)('grey', 100), (0, theme_1.getColor)('white'), (0, theme_1.getColor)('brand', 100), function (_a) { var sticky = _a.sticky; return undefined !== sticky && (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n position: sticky;\n top: ", "px;\n z-index: 9;\n "], ["\n position: sticky;\n top: ", "px;\n z-index: 9;\n "])), sticky); }); diff --git a/lib/components/Search/Search.js.map b/lib/components/Search/Search.js.map index eedbbcbd..6bb85290 100644 --- a/lib/components/Search/Search.js.map +++ b/lib/components/Search/Search.js.map @@ -1 +1 @@ -{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA+E;AAC/E,qEAA8C;AAC9C,qCAAwD;AACxD,qCAAuC;AAGvC,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,6UAAuC,4GAItC,EAAqB,mBAClC,EAAiB,iHAMF,EAAsB,cAGjD,EAMC,IACJ,KAjB4B,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAClC,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAMF,IAAA,gBAAQ,EAAC,OAAO,EAAE,GAAG,CAAC,EAGjD,UAAC,EAAQ;QAAP,MAAM,YAAA;IACR,OAAA,SAAS,KAAK,MAAM,QACpB,uBAAG,4IAAA,wCAEM,EAAM,8BAEd,KAFQ,MAAM,CAEd;AALD,CAKC,CACJ,CAAC;AAEF,IAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,6HAAA,0DAIjC,IAAA,CAAC;AAEF,IAAM,WAAW,GAAG,2BAAM,CAAC,KAAK,uMAAA,+DAIrB,EAAqB,uDAInB,EAAqB,UAEjC,KANU,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAInB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAEjC,CAAC;AAEF,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,uLAAA,6CAEP,EAAqB,qEAIzC,KAJoB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAIzC,CAAC;AAEF,IAAM,WAAW,GAAG,2BAAM,CAAC,IAAI,oLAAA,qCAEpB,EAAsB,0EAIhC,KAJU,IAAA,gBAAQ,EAAC,OAAO,EAAE,GAAG,CAAC,CAIhC,CAAC;AA0CF,IAAM,MAAM,GAAG,UAAC,EAA2F;IAA1F,IAAA,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,cAAc,oBAAA,EAAK,IAAI,cAA7E,iFAA8E,CAAD;IAC3F,OAAO,CACL,8BAAC,SAAS,eAAK,IAAI;QACjB,8BAAC,eAAe;YACd,8BAAC,kBAAU,IAAC,IAAI,EAAE,EAAE,GAAI;YACxB,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,UAAC,KAAoC,IAAK,OAAA,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAlC,CAAkC,GACtF,CACc;QACjB,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAKM,wBAAM;AAHd,MAAM,CAAC,WAAW,GAAG,WAAW,CAAC;AACjC,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC"} \ No newline at end of file +{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../src/components/Search/Search.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA+E;AAC/E,qEAA8C;AAC9C,qCAAwD;AACxD,qCAAuC;AAGvC,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,8UAAuC,4GAItC,EAAqB,mBAClC,EAAiB,kHAMF,EAAsB,cAGjD,EAMC,IACJ,KAjB4B,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAClC,IAAA,gBAAQ,EAAC,OAAO,CAAC,EAMF,IAAA,gBAAQ,EAAC,OAAO,EAAE,GAAG,CAAC,EAGjD,UAAC,EAAQ;QAAP,MAAM,YAAA;IACR,OAAA,SAAS,KAAK,MAAM,QACpB,uBAAG,4IAAA,wCAEM,EAAM,8BAEd,KAFQ,MAAM,CAEd;AALD,CAKC,CACJ,CAAC;AAEF,IAAM,eAAe,GAAG,2BAAM,CAAC,GAAG,6HAAA,0DAIjC,IAAA,CAAC;AAEF,IAAM,WAAW,GAAG,2BAAM,CAAC,KAAK,uMAAA,+DAIrB,EAAqB,uDAInB,EAAqB,UAEjC,KANU,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,EAInB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAEjC,CAAC;AAEF,IAAM,SAAS,GAAG,2BAAM,CAAC,GAAG,uLAAA,6CAEP,EAAqB,qEAIzC,KAJoB,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAIzC,CAAC;AAEF,IAAM,WAAW,GAAG,2BAAM,CAAC,IAAI,oLAAA,qCAEpB,EAAsB,0EAIhC,KAJU,IAAA,gBAAQ,EAAC,OAAO,EAAE,GAAG,CAAC,CAIhC,CAAC;AA0CF,IAAM,MAAM,GAAG,UAAC,EAA2F;IAA1F,IAAA,QAAQ,cAAA,EAAE,WAAW,iBAAA,EAAE,KAAK,WAAA,EAAE,WAAW,iBAAA,EAAE,QAAQ,cAAA,EAAE,cAAc,oBAAA,EAAK,IAAI,cAA7E,iFAA8E,CAAD;IAC3F,OAAO,CACL,8BAAC,SAAS,eAAK,IAAI;QACjB,8BAAC,eAAe;YACd,8BAAC,kBAAU,IAAC,IAAI,EAAE,EAAE,GAAI;YACxB,8BAAC,WAAW,IACV,GAAG,EAAE,QAAQ,EACb,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,KAAK,EAAE,WAAW,EAClB,QAAQ,EAAE,UAAC,KAAoC,IAAK,OAAA,cAAc,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,EAAlC,CAAkC,GACtF,CACc;QACjB,QAAQ,CACC,CACb,CAAC;AACJ,CAAC,CAAC;AAKM,wBAAM;AAHd,MAAM,CAAC,WAAW,GAAG,WAAW,CAAC;AACjC,MAAM,CAAC,SAAS,GAAG,SAAS,CAAC"} \ No newline at end of file diff --git a/lib/components/Tags/Tags.d.ts b/lib/components/Tags/Tags.d.ts index 6779eba8..21eb17ed 100644 --- a/lib/components/Tags/Tags.d.ts +++ b/lib/components/Tags/Tags.d.ts @@ -1,5 +1,5 @@ import React, { ReactNode } from 'react'; -declare type Tint = 'green' | 'blue' | 'dark_blue' | 'purple' | 'dark_purple' | 'yellow' | 'red'; +declare type Tint = 'green' | 'blue' | 'dark_blue' | 'purple' | 'dark_purple' | 'yellow' | 'red' | 'dark_cyan' | 'forest_green' | 'olive_green' | 'hot_pink' | 'coral_red' | 'orange' | 'chocolate'; declare const Tag: import("styled-components").StyledComponent<"li", any, { tint: Tint; } & React.HTMLAttributes & Record & import("styled-components").ThemeProps, never>; diff --git a/lib/components/Tags/Tags.js b/lib/components/Tags/Tags.js index 4ab0226e..21341478 100644 --- a/lib/components/Tags/Tags.js +++ b/lib/components/Tags/Tags.js @@ -52,39 +52,20 @@ exports.Tag = exports.Tags = void 0; var react_1 = __importStar(require("react")); var styled_components_1 = __importDefault(require("styled-components")); var theme_1 = require("../../theme"); +var convertTintToColorCode = function (str) { + return str.replace(/_([a-z])/g, function (g) { + return g[1].toUpperCase(); + }); +}; var Tag = styled_components_1.default.li(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n border: 1px solid;\n border-color: ", ";\n color: ", ";\n background-color: ", ";\n height: 16px;\n line-height: 16px;\n padding: 0 6px;\n display: inline-block;\n border-radius: 2px;\n font-size: ", ";\n text-transform: uppercase;\n overflow: hidden;\n max-width: 200px;\n white-space: nowrap;\n text-overflow: ellipsis;\n"], ["\n border: 1px solid;\n border-color: ", ";\n color: ", ";\n background-color: ", ";\n height: 16px;\n line-height: 16px;\n padding: 0 6px;\n display: inline-block;\n border-radius: 2px;\n font-size: ", ";\n text-transform: uppercase;\n overflow: hidden;\n max-width: 200px;\n white-space: nowrap;\n text-overflow: ellipsis;\n"])), function (_a) { var tint = _a.tint; - return ({ - green: '#81cccc', - blue: '#4ca8e0', - dark_blue: '#5e63b6', - purple: '#9452ba', - dark_purple: '#52267d', - yellow: '#fcce76', - red: '#f74b64', - }[tint]); + return (0, theme_1.getColorAlternative)(convertTintToColorCode(tint), 100); }, function (_a) { var tint = _a.tint; - return ({ - green: '#5da8a6', - blue: '#3278b7', - dark_blue: '#3b438c', - purple: '#763e9e', - dark_purple: '#36145e', - yellow: '#ca8411', - red: '#c92343', - }[tint]); + return (0, theme_1.getColorAlternative)(convertTintToColorCode(tint), 120); }, function (_a) { var tint = _a.tint; - return ({ - green: '#f5fafa', - blue: '#f0f7fc', - dark_blue: '#efeff8', - purple: '#f3eef9', - dark_purple: '#eeeaf2', - yellow: '#fefbf2', - red: '#fdedf0', - }[tint]); + return (0, theme_1.getColorAlternative)(convertTintToColorCode(tint), 10); }, (0, theme_1.getFontSize)('small')); exports.Tag = Tag; var TagsContainer = styled_components_1.default.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n display: flex;\n flex-wrap: wrap;\n padding-inline-start: 0;\n margin-block-end: 0;\n margin-block-start: 0;\n list-style-type: none;\n gap: 10px;\n"], ["\n display: flex;\n flex-wrap: wrap;\n padding-inline-start: 0;\n margin-block-end: 0;\n margin-block-start: 0;\n list-style-type: none;\n gap: 10px;\n"]))); diff --git a/lib/components/Tags/Tags.js.map b/lib/components/Tags/Tags.js.map index e8947768..9bdfb960 100644 --- a/lib/components/Tags/Tags.js.map +++ b/lib/components/Tags/Tags.js.map @@ -1 +1 @@ -{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4D;AAC5D,wEAAuC;AACvC,qCAA2D;AAY3D,IAAM,GAAG,GAAG,2BAAM,CAAC,EAAE,0ZAA8B,0CAEjC,EASN,cACD,EASC,yBACU,EASV,6HAMG,EAAoB,iIAMlC,KAzCiB,UAAC,EAAM;QAAL,IAAI,UAAA;IACpB,OAAA,CAAC;QACC,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,SAAS;QACtB,MAAM,EAAE,SAAS;QACjB,GAAG,EAAE,SAAS;KACf,CAAC,IAAI,CAAC,CAAC;AARR,CAQQ,EACD,UAAC,EAAM;QAAL,IAAI,UAAA;IACb,OAAA,CAAC;QACC,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,SAAS;QACtB,MAAM,EAAE,SAAS;QACjB,GAAG,EAAE,SAAS;KACf,CAAC,IAAI,CAAC,CAAC;AARR,CAQQ,EACU,UAAC,EAAM;QAAL,IAAI,UAAA;IACxB,OAAA,CAAC;QACC,KAAK,EAAE,SAAS;QAChB,IAAI,EAAE,SAAS;QACf,SAAS,EAAE,SAAS;QACpB,MAAM,EAAE,SAAS;QACjB,WAAW,EAAE,SAAS;QACtB,MAAM,EAAE,SAAS;QACjB,GAAG,EAAE,SAAS;KACf,CAAC,IAAI,CAAC,CAAC;AARR,CAQQ,EAMG,IAAA,mBAAW,EAAC,OAAO,CAAC,CAMlC,CAAC;AAmDY,kBAAG;AAlDjB,IAAM,aAAa,GAAG,2BAAM,CAAC,EAAE,mOAAA,gKAQ9B,IAAA,CAAC;AAYF,IAAM,IAAI,GAAG,eAAK,CAAC,UAAU,CAC3B,UAAC,EAA8B,EAAE,YAAmC;IAAlE,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAlB,YAAmB,CAAD;IACjB,IAAM,QAAQ,GAAG,UAAC,QAAoB;QACpC,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;YAChC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAC7B,KAAK,IAAI,KAAK,CAAC;aAChB;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,aAAa,aAAC,GAAG,EAAE,YAAY,IAAM,IAAI,GACvC,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;;QACjC,IAAI,IAAA,sBAAc,EAAW,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,GAAG,EAAE;YAEzD,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC/B,KAAK,EAAE,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,KAAK,KAAI,QAAQ,CAAC,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,CAAC;aAC7D,CAAC,CAAC;SACJ;QACD,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC,CAAC,CACY,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,oBAAI"} \ No newline at end of file +{"version":3,"file":"Tags.js","sourceRoot":"","sources":["../../../src/components/Tags/Tags.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA4D;AAC5D,wEAAuC;AACvC,qCAAgF;AAyBhF,IAAM,sBAAsB,GAAG,UAAC,GAAW;IACzC,OAAO,GAAG,CAAC,OAAO,CAAC,WAAW,EAAE,UAAU,CAAC;QACzC,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAC5B,CAAC,CAAC,CAAC;AACL,CAAC,CAAC;AAKF,IAAM,GAAG,GAAG,2BAAM,CAAC,EAAE,0ZAA8B,0CAEjC,EAAkE,cACzE,EAAkE,yBACvD,EAAiE,6HAMxE,EAAoB,iIAMlC,KAdiB,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,IAAA,2BAAmB,EAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC;AAAtD,CAAsD,EACzE,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,IAAA,2BAAmB,EAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,GAAG,CAAC;AAAtD,CAAsD,EACvD,UAAC,EAAM;QAAL,IAAI,UAAA;IAAM,OAAA,IAAA,2BAAmB,EAAC,sBAAsB,CAAC,IAAI,CAAC,EAAE,EAAE,CAAC;AAArD,CAAqD,EAMxE,IAAA,mBAAW,EAAC,OAAO,CAAC,CAMlC,CAAC;AAmDY,kBAAG;AAlDjB,IAAM,aAAa,GAAG,2BAAM,CAAC,EAAE,mOAAA,gKAQ9B,IAAA,CAAC;AAYF,IAAM,IAAI,GAAG,eAAK,CAAC,UAAU,CAC3B,UAAC,EAA8B,EAAE,YAAmC;IAAlE,IAAA,QAAQ,cAAA,EAAK,IAAI,cAAlB,YAAmB,CAAD;IACjB,IAAM,QAAQ,GAAG,UAAC,QAAoB;QACpC,IAAI,KAAK,GAAG,EAAE,CAAC;QAEf,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;YAChC,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;gBAC7B,KAAK,IAAI,KAAK,CAAC;aAChB;QACH,CAAC,CAAC,CAAC;QAEH,OAAO,KAAK,CAAC;IACf,CAAC,CAAC;IAEF,OAAO,CACL,8BAAC,aAAa,aAAC,GAAG,EAAE,YAAY,IAAM,IAAI,GACvC,eAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,UAAA,KAAK;;QACjC,IAAI,IAAA,sBAAc,EAAW,KAAK,CAAC,IAAI,KAAK,CAAC,IAAI,KAAK,GAAG,EAAE;YAEzD,OAAO,eAAK,CAAC,YAAY,CAAC,KAAK,EAAE;gBAC/B,KAAK,EAAE,CAAA,MAAA,KAAK,CAAC,KAAK,0CAAE,KAAK,KAAI,QAAQ,CAAC,MAAA,KAAK,CAAC,KAAK,0CAAE,QAAQ,CAAC;aAC7D,CAAC,CAAC;SACJ;QACD,MAAM,IAAI,KAAK,CAAC,2CAA2C,CAAC,CAAC;IAC/D,CAAC,CAAC,CACY,CACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEM,oBAAI"} \ No newline at end of file diff --git a/lib/illustrations/WarningIllustration.d.ts b/lib/illustrations/WarningIllustration.d.ts new file mode 100644 index 00000000..557320dd --- /dev/null +++ b/lib/illustrations/WarningIllustration.d.ts @@ -0,0 +1,4 @@ +import React from 'react'; +import { IllustrationProps } from './IllustrationProps'; +declare const WarningIllustration: ({ title, size, ...props }: IllustrationProps) => React.JSX.Element; +export { WarningIllustration }; diff --git a/lib/illustrations/WarningIllustration.js b/lib/illustrations/WarningIllustration.js new file mode 100644 index 00000000..703f6c4e --- /dev/null +++ b/lib/illustrations/WarningIllustration.js @@ -0,0 +1,38 @@ +"use strict"; +var __assign = (this && this.__assign) || function () { + __assign = Object.assign || function(t) { + for (var s, i = 1, n = arguments.length; i < n; i++) { + s = arguments[i]; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) + t[p] = s[p]; + } + return t; + }; + return __assign.apply(this, arguments); +}; +var __rest = (this && this.__rest) || function (s, e) { + var t = {}; + for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) + t[p] = s[p]; + if (s != null && typeof Object.getOwnPropertySymbols === "function") + for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) { + if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) + t[p[i]] = s[p[i]]; + } + return t; +}; +var __importDefault = (this && this.__importDefault) || function (mod) { + return (mod && mod.__esModule) ? mod : { "default": mod }; +}; +Object.defineProperty(exports, "__esModule", { value: true }); +exports.WarningIllustration = void 0; +var react_1 = __importDefault(require("react")); +var Warning_svg_1 = __importDefault(require("../../static/illustrations/Warning.svg")); +var WarningIllustration = function (_a) { + var title = _a.title, _b = _a.size, size = _b === void 0 ? 256 : _b, props = __rest(_a, ["title", "size"]); + return (react_1.default.createElement("svg", __assign({ width: size, height: size, viewBox: "0 0 256 256" }, props), + title && react_1.default.createElement("title", null, title), + react_1.default.createElement("image", { href: Warning_svg_1.default }))); +}; +exports.WarningIllustration = WarningIllustration; +//# sourceMappingURL=WarningIllustration.js.map \ No newline at end of file diff --git a/lib/illustrations/WarningIllustration.js.map b/lib/illustrations/WarningIllustration.js.map new file mode 100644 index 00000000..6fd386bd --- /dev/null +++ b/lib/illustrations/WarningIllustration.js.map @@ -0,0 +1 @@ +{"version":3,"file":"WarningIllustration.js","sourceRoot":"","sources":["../../src/illustrations/WarningIllustration.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAE1B,uFAA6D;AAE7D,IAAM,mBAAmB,GAAG,UAAC,EAAgD;IAA/C,IAAA,KAAK,WAAA,EAAE,YAAU,EAAV,IAAI,mBAAG,GAAG,KAAA,EAAK,KAAK,cAA5B,iBAA6B,CAAD;IAAyB,OAAA,CAChF,gDAAK,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAC,aAAa,IAAK,KAAK;QAC5D,KAAK,IAAI,6CAAQ,KAAK,CAAS;QAChC,yCAAO,IAAI,EAAE,qBAAO,GAAI,CACpB,CACP,CAAA;CAAA,CAAC;AAEM,kDAAmB"} \ No newline at end of file diff --git a/lib/illustrations/index.d.ts b/lib/illustrations/index.d.ts index b57bc7d4..30de7860 100644 --- a/lib/illustrations/index.d.ts +++ b/lib/illustrations/index.d.ts @@ -58,3 +58,4 @@ export * from './UserRolesIllustration'; export * from './UsersIllustration'; export * from './UsingIllustration'; export * from './ViewsIllustration'; +export * from './WarningIllustration'; diff --git a/lib/illustrations/index.js b/lib/illustrations/index.js index df7a95ff..acd6d23d 100644 --- a/lib/illustrations/index.js +++ b/lib/illustrations/index.js @@ -70,4 +70,5 @@ __exportStar(require("./UserRolesIllustration"), exports); __exportStar(require("./UsersIllustration"), exports); __exportStar(require("./UsingIllustration"), exports); __exportStar(require("./ViewsIllustration"), exports); +__exportStar(require("./WarningIllustration"), exports); //# sourceMappingURL=index.js.map \ No newline at end of file diff --git a/lib/illustrations/index.js.map b/lib/illustrations/index.js.map index d7f5833b..145f36e5 100644 --- a/lib/illustrations/index.js.map +++ b/lib/illustrations/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/illustrations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4DAA0C;AAC1C,mEAAiD;AACjD,oDAAkC;AAClC,oDAAkC;AAClC,gEAA8C;AAC9C,uDAAqC;AACrC,iEAA+C;AAC/C,gEAA8C;AAC9C,2DAAyC;AACzC,yDAAuC;AACvC,yDAAuC;AACvC,qDAAmC;AACnC,4DAA0C;AAC1C,uDAAqC;AACrC,2DAAyC;AACzC,+DAA6C;AAC7C,oEAAkD;AAClD,uDAAqC;AACrC,sDAAoC;AACpC,yDAAuC;AACvC,+DAA6C;AAC7C,8DAA4C;AAC5C,0DAAwC;AACxC,uDAAqC;AACrC,2DAAyC;AACzC,0DAAwC;AACxC,uDAAqC;AACrC,8DAA4C;AAC5C,sDAAoC;AACpC,uDAAqC;AACrC,0DAAwC;AACxC,uDAAqC;AACrC,2DAAyC;AACzC,0DAAwC;AACxC,sDAAoC;AACpC,uDAAqC;AACrC,4DAA0C;AAC1C,4DAA0C;AAC1C,0DAAwC;AACxC,sDAAoC;AACpC,qDAAmC;AACnC,0DAAwC;AACxC,gEAA8C;AAC9C,6DAA2C;AAC3C,iEAA+C;AAC/C,yDAAuC;AACvC,wDAAsC;AACtC,0DAAwC;AACxC,sDAAoC;AACpC,4DAA0C;AAC1C,uDAAqC;AACrC,yDAAuC;AACvC,uDAAqC;AACrC,uDAAqC;AACrC,yDAAuC;AACvC,2DAAyC;AACzC,0DAAwC;AACxC,sDAAoC;AACpC,sDAAoC;AACpC,sDAAoC"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/illustrations/index.ts"],"names":[],"mappings":";;;;;;;;;;;;AAAA,4DAA0C;AAC1C,mEAAiD;AACjD,oDAAkC;AAClC,oDAAkC;AAClC,gEAA8C;AAC9C,uDAAqC;AACrC,iEAA+C;AAC/C,gEAA8C;AAC9C,2DAAyC;AACzC,yDAAuC;AACvC,yDAAuC;AACvC,qDAAmC;AACnC,4DAA0C;AAC1C,uDAAqC;AACrC,2DAAyC;AACzC,+DAA6C;AAC7C,oEAAkD;AAClD,uDAAqC;AACrC,sDAAoC;AACpC,yDAAuC;AACvC,+DAA6C;AAC7C,8DAA4C;AAC5C,0DAAwC;AACxC,uDAAqC;AACrC,2DAAyC;AACzC,0DAAwC;AACxC,uDAAqC;AACrC,8DAA4C;AAC5C,sDAAoC;AACpC,uDAAqC;AACrC,0DAAwC;AACxC,uDAAqC;AACrC,2DAAyC;AACzC,0DAAwC;AACxC,sDAAoC;AACpC,uDAAqC;AACrC,4DAA0C;AAC1C,4DAA0C;AAC1C,0DAAwC;AACxC,sDAAoC;AACpC,qDAAmC;AACnC,0DAAwC;AACxC,gEAA8C;AAC9C,6DAA2C;AAC3C,iEAA+C;AAC/C,yDAAuC;AACvC,wDAAsC;AACtC,0DAAwC;AACxC,sDAAoC;AACpC,4DAA0C;AAC1C,uDAAqC;AACrC,yDAAuC;AACvC,uDAAqC;AACrC,uDAAqC;AACrC,yDAAuC;AACvC,2DAAyC;AACzC,0DAAwC;AACxC,sDAAoC;AACpC,sDAAoC;AACpC,sDAAoC;AACpC,wDAAsC"} \ No newline at end of file diff --git a/lib/theme/common.d.ts b/lib/theme/common.d.ts index d1d7bc10..82c080ab 100644 --- a/lib/theme/common.d.ts +++ b/lib/theme/common.d.ts @@ -1,10 +1,11 @@ -import { Color, FontFamily, FontSize, Palette } from './theme'; +import { Color, ColorAlternative, FontFamily, FontSize, Palette } from './theme'; declare const CommonStyle: import("styled-components").FlattenInterpolation & import("styled-components").ThemeProps, any>>; declare const placeholderStyle: import("styled-components").FlattenSimpleInterpolation; declare const color: Color; +declare const colorAlternative: ColorAlternative; declare const fontSize: FontSize; declare const palette: Palette; declare const fontFamily: FontFamily; declare const BrandedPath: import("styled-components").StyledComponent<"path", any, Record & import("styled-components").ThemeProps, never>; declare const SkeletonPlaceholder: import("styled-components").StyledComponent<"div", any, {}, never>; -export { color, fontFamily, fontSize, palette, CommonStyle, BrandedPath, SkeletonPlaceholder, placeholderStyle }; +export { color, colorAlternative, fontFamily, fontSize, palette, CommonStyle, BrandedPath, SkeletonPlaceholder, placeholderStyle, }; diff --git a/lib/theme/common.js b/lib/theme/common.js index fb91e9e8..e2893744 100644 --- a/lib/theme/common.js +++ b/lib/theme/common.js @@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) { return result; }; Object.defineProperty(exports, "__esModule", { value: true }); -exports.placeholderStyle = exports.SkeletonPlaceholder = exports.BrandedPath = exports.CommonStyle = exports.palette = exports.fontSize = exports.fontFamily = exports.color = void 0; +exports.placeholderStyle = exports.SkeletonPlaceholder = exports.BrandedPath = exports.CommonStyle = exports.palette = exports.fontSize = exports.fontFamily = exports.colorAlternative = exports.color = void 0; var styled_components_1 = __importStar(require("styled-components")); var theme_1 = require("./theme"); var CommonStyle = (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n input,\n button,\n select,\n textarea {\n font-family: 'Lato';\n font-size: ", ";\n }\n\n font-family: 'Lato';\n font-size: ", ";\n color: ", ";\n line-height: 20px;\n box-sizing: border-box;\n"], ["\n input,\n button,\n select,\n textarea {\n font-family: 'Lato';\n font-size: ", ";\n }\n\n font-family: 'Lato';\n font-size: ", ";\n color: ", ";\n line-height: 20px;\n box-sizing: border-box;\n"])), (0, theme_1.getFontSize)('default'), (0, theme_1.getFontSize)('default'), (0, theme_1.getColor)('grey', 120)); @@ -88,6 +88,51 @@ var color = { white: '#ffffff', }; exports.color = color; +var colorAlternative = { + blue10: '#F0F7FC', + blue100: '#4CA8E0', + blue120: '#3278B7', + chocolate10: '#EEE9E5', + chocolate100: '#512500', + chocolate120: '#441F00', + coralRed10: '#FDF0EF', + coralRed100: '#ED6A5E', + coralRed120: '#B72215', + darkBlue10: '#EFEFF8', + darkBlue100: '#5e63b6', + darkBlue120: '#3B438C', + darkCyan10: '#E5F3F3', + darkCyan100: '#008B8B', + darkCyan120: '#007575', + darkPurple10: '#EEEAF2', + darkPurple100: '#52267D', + darkPurple120: '#36145E', + forestGreen10: '#EDF1EB', + forestGreen100: '#50723C', + forestGreen120: '#436032', + green10: '#F5FAFA', + green100: '#81CCCC', + green120: '#5DA8A6', + hotPink10: '#FFF0F7', + hotPink100: '#FF69B4', + hotPink120: '#CC0066', + oliveGreen10: '#F0F4E9', + oliveGreen100: '#6B8E23', + oliveGreen120: '#5A771D', + orange10: '#FFF3E5', + orange100: '#FF8600', + orange120: '#B25E00', + purple10: '#F3EEF9', + purple100: '#9452BA', + purple120: '#763E9E', + red10: '#FDEDF0', + red100: '#F74B64', + red120: '#C92343', + yellow10: '#FEFBF2', + yellow100: '#FCCE76', + yellow120: '#D69A38', +}; +exports.colorAlternative = colorAlternative; var fontSize = { big: '15px', bigger: '17px', diff --git a/lib/theme/common.js.map b/lib/theme/common.js.map index 50b66d14..88f7c7c5 100644 --- a/lib/theme/common.js.map +++ b/lib/theme/common.js.map @@ -1 +1 @@ -{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/theme/common.ts"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"common.js","sourceRoot":"","sources":["../../src/theme/common.ts"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/lib/theme/connector/index.js b/lib/theme/connector/index.js index ae8f0757..15f51f2b 100644 --- a/lib/theme/connector/index.js +++ b/lib/theme/connector/index.js @@ -16,6 +16,7 @@ var common_1 = require("../common"); var connectorTheme = { name: 'Connector', color: __assign(__assign({}, common_1.color), { brand20: '#dbdef3', brand40: '#b8bde8', brand60: '#959cdc', brand80: '#727bd1', brand100: '#4f5bc6', brand120: '#3b4494', brand140: '#272d62' }), + colorAlternative: common_1.colorAlternative, fontSize: common_1.fontSize, palette: common_1.palette, fontFamily: common_1.fontFamily, diff --git a/lib/theme/connector/index.js.map b/lib/theme/connector/index.js.map index 357e987f..bef38199 100644 --- a/lib/theme/connector/index.js.map +++ b/lib/theme/connector/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/connector/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,oCAA+D;AAE/D,IAAM,cAAc,GAAU;IAC5B,IAAI,EAAE,WAAW;IACjB,KAAK,wBACA,cAAK,KACR,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,GACpB;IACD,QAAQ,mBAAA;IACR,OAAO,kBAAA;IACP,UAAU,qBAAA;CACX,CAAC;AAEM,wCAAc"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/connector/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,oCAAiF;AAEjF,IAAM,cAAc,GAAU;IAC5B,IAAI,EAAE,WAAW;IACjB,KAAK,wBACA,cAAK,KACR,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,GACpB;IACD,gBAAgB,2BAAA;IAChB,QAAQ,mBAAA;IACR,OAAO,kBAAA;IACP,UAAU,qBAAA;CACX,CAAC;AAEM,wCAAc"} \ No newline at end of file diff --git a/lib/theme/onboarder/index.js b/lib/theme/onboarder/index.js index e1837523..db31deff 100644 --- a/lib/theme/onboarder/index.js +++ b/lib/theme/onboarder/index.js @@ -16,6 +16,7 @@ var common_1 = require("../common"); var onboarderTheme = { name: 'Onboarder', color: __assign(__assign({}, common_1.color), { brand20: '#dbedf8', brand40: '#b7dcf2', brand60: '#93caec', brand80: '#6fb9e6', brand100: '#4ca8e0', brand120: '#3c86b3', brand140: '#2d6486' }), + colorAlternative: common_1.colorAlternative, fontSize: common_1.fontSize, palette: common_1.palette, fontFamily: common_1.fontFamily, diff --git a/lib/theme/onboarder/index.js.map b/lib/theme/onboarder/index.js.map index 5f8f3f56..47dd0f9e 100644 --- a/lib/theme/onboarder/index.js.map +++ b/lib/theme/onboarder/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/onboarder/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,oCAA+D;AAE/D,IAAM,cAAc,GAAU;IAC5B,IAAI,EAAE,WAAW;IACjB,KAAK,wBACA,cAAK,KACR,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,GACpB;IACD,QAAQ,mBAAA;IACR,OAAO,kBAAA;IACP,UAAU,qBAAA;CACX,CAAC;AAEM,wCAAc"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/onboarder/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,oCAAiF;AAEjF,IAAM,cAAc,GAAU;IAC5B,IAAI,EAAE,WAAW;IACjB,KAAK,wBACA,cAAK,KACR,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,GACpB;IACD,gBAAgB,2BAAA;IAChB,QAAQ,mBAAA;IACR,OAAO,kBAAA;IACP,UAAU,qBAAA;CACX,CAAC;AAEM,wCAAc"} \ No newline at end of file diff --git a/lib/theme/pim/index.js b/lib/theme/pim/index.js index 93512d69..3dfee631 100644 --- a/lib/theme/pim/index.js +++ b/lib/theme/pim/index.js @@ -16,6 +16,7 @@ var common_1 = require("../common"); var pimTheme = { name: 'PIM', color: __assign(__assign({}, common_1.color), { brand20: '#eadcf1', brand40: '#d4bae3', brand60: '#be97d5', brand80: '#a974c7', brand100: '#9452ba', brand120: '#764194', brand140: '#58316f' }), + colorAlternative: common_1.colorAlternative, fontSize: common_1.fontSize, palette: common_1.palette, fontFamily: common_1.fontFamily, diff --git a/lib/theme/pim/index.js.map b/lib/theme/pim/index.js.map index 8c383bf8..b9ee0d5c 100644 --- a/lib/theme/pim/index.js.map +++ b/lib/theme/pim/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/pim/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,oCAA+D;AAE/D,IAAM,QAAQ,GAAU;IACtB,IAAI,EAAE,KAAK;IACX,KAAK,wBACA,cAAK,KACR,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,GACpB;IACD,QAAQ,mBAAA;IACR,OAAO,kBAAA;IACP,UAAU,qBAAA;CACX,CAAC;AAEM,4BAAQ"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/pim/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,oCAAiF;AAEjF,IAAM,QAAQ,GAAU;IACtB,IAAI,EAAE,KAAK;IACX,KAAK,wBACA,cAAK,KACR,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,GACpB;IACD,gBAAgB,2BAAA;IAChB,QAAQ,mBAAA;IACR,OAAO,kBAAA;IACP,UAAU,qBAAA;CACX,CAAC;AAEM,4BAAQ"} \ No newline at end of file diff --git a/lib/theme/shared-catalogs/index.js b/lib/theme/shared-catalogs/index.js index 20b3bde5..8c649f4c 100644 --- a/lib/theme/shared-catalogs/index.js +++ b/lib/theme/shared-catalogs/index.js @@ -16,6 +16,7 @@ var common_1 = require("../common"); var sharedCatalogsTheme = { name: 'Shared Catalogs', color: __assign(__assign({}, common_1.color), { brand20: '#fdf0d8', brand40: '#fce1b2', brand60: '#fbd28b', brand80: '#fac365', brand100: '#f9b53f', brand120: '#c79032', brand140: '#956c25' }), + colorAlternative: common_1.colorAlternative, fontSize: common_1.fontSize, palette: common_1.palette, fontFamily: common_1.fontFamily, diff --git a/lib/theme/shared-catalogs/index.js.map b/lib/theme/shared-catalogs/index.js.map index c95fd6ae..a400ec0f 100644 --- a/lib/theme/shared-catalogs/index.js.map +++ b/lib/theme/shared-catalogs/index.js.map @@ -1 +1 @@ -{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/shared-catalogs/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,oCAA+D;AAE/D,IAAM,mBAAmB,GAAU;IACjC,IAAI,EAAE,iBAAiB;IACvB,KAAK,wBACA,cAAK,KACR,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,GACpB;IACD,QAAQ,mBAAA;IACR,OAAO,kBAAA;IACP,UAAU,qBAAA;CACX,CAAC;AAEM,kDAAmB"} \ No newline at end of file +{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/theme/shared-catalogs/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;AACA,oCAAiF;AAEjF,IAAM,mBAAmB,GAAU;IACjC,IAAI,EAAE,iBAAiB;IACvB,KAAK,wBACA,cAAK,KACR,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,OAAO,EAAE,SAAS,EAClB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,EACnB,QAAQ,EAAE,SAAS,GACpB;IACD,gBAAgB,2BAAA;IAChB,QAAQ,mBAAA;IACR,OAAO,kBAAA;IACP,UAAU,qBAAA;CACX,CAAC;AAEM,kDAAmB"} \ No newline at end of file diff --git a/lib/theme/theme.d.ts b/lib/theme/theme.d.ts index d0cc0874..3f2fc2c7 100644 --- a/lib/theme/theme.d.ts +++ b/lib/theme/theme.d.ts @@ -62,6 +62,50 @@ declare type Color = { brand140: string; white: string; }; +declare type ColorAlternative = { + blue10: string; + blue100: string; + blue120: string; + chocolate10: string; + chocolate100: string; + chocolate120: string; + coralRed10: string; + coralRed100: string; + coralRed120: string; + darkBlue10: string; + darkBlue100: string; + darkBlue120: string; + darkCyan10: string; + darkCyan100: string; + darkCyan120: string; + darkPurple10: string; + darkPurple100: string; + darkPurple120: string; + forestGreen10: string; + forestGreen100: string; + forestGreen120: string; + green10: string; + green100: string; + green120: string; + hotPink10: string; + hotPink100: string; + hotPink120: string; + oliveGreen10: string; + oliveGreen100: string; + oliveGreen120: string; + orange10: string; + orange100: string; + orange120: string; + purple10: string; + purple100: string; + purple120: string; + red10: string; + red100: string; + red120: string; + yellow10: string; + yellow100: string; + yellow120: string; +}; declare type Palette = { primary: string; secondary: string; @@ -74,6 +118,7 @@ declare type Theme = { palette: Palette; fontSize: FontSize; color: Color; + colorAlternative: ColorAlternative; fontFamily: FontFamily; }; declare type FontFamily = { @@ -83,8 +128,9 @@ declare type FontFamily = { declare type Level = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger'; declare const getColor: (color: string, gradient?: number | undefined) => (props: AkeneoThemedProps) => string; declare const getColorForLevel: (level: Level, gradient: number) => (props: AkeneoThemedProps) => string; +declare const getColorAlternative: (color: string, gradient?: number | undefined) => (props: AkeneoThemedProps) => string; declare const getFontSize: (fontSize: keyof FontSize) => (props: AkeneoThemedProps) => string; declare const getFontFamily: (fontFamilyType: keyof FontFamily) => (props: AkeneoThemedProps) => string; export declare type AkeneoThemedProps

> = ThemedStyledProps; -export type { Theme, FontSize, FontFamily, Color, Level, Palette }; -export { getColor, getFontFamily, getColorForLevel, getFontSize }; +export type { Theme, FontSize, FontFamily, Color, ColorAlternative, Level, Palette }; +export { getColor, getFontFamily, getColorForLevel, getColorAlternative, getFontSize }; diff --git a/lib/theme/theme.js b/lib/theme/theme.js index 9f12ab3c..7ce71319 100644 --- a/lib/theme/theme.js +++ b/lib/theme/theme.js @@ -1,6 +1,6 @@ "use strict"; Object.defineProperty(exports, "__esModule", { value: true }); -exports.getFontSize = exports.getColorForLevel = exports.getFontFamily = exports.getColor = void 0; +exports.getFontSize = exports.getColorAlternative = exports.getColorForLevel = exports.getFontFamily = exports.getColor = void 0; var getColor = function (color, gradient) { return function (_a) { var theme = _a.theme; @@ -15,6 +15,13 @@ var getColorForLevel = function (level, gradient) { }; }; exports.getColorForLevel = getColorForLevel; +var getColorAlternative = function (color, gradient) { + return function (_a) { + var theme = _a.theme; + return theme.colorAlternative["" + color + (gradient !== null && gradient !== void 0 ? gradient : '')]; + }; +}; +exports.getColorAlternative = getColorAlternative; var getFontSize = function (fontSize) { return function (_a) { var theme = _a.theme; diff --git a/lib/theme/theme.js.map b/lib/theme/theme.js.map index 3c115a4d..79b33ced 100644 --- a/lib/theme/theme.js.map +++ b/lib/theme/theme.js.map @@ -1 +1 @@ -{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":";;;AA0FA,IAAM,QAAQ,GACZ,UAAC,KAAa,EAAE,QAAiB;IACjC,OAAA,UAAC,EAA0B;YAAzB,KAAK,WAAA;QACL,OAAA,KAAK,CAAC,KAAK,CAAC,KAAG,KAAK,IAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAE,CAAW;IAAlD,CAAkD;AADpD,CACoD,CAAC;AAmB/C,4BAAQ;AAjBhB,IAAM,gBAAgB,GACpB,UAAC,KAAY,EAAE,QAAgB;IAC/B,OAAA,UAAC,EAA0B;YAAzB,KAAK,WAAA;QACL,OAAA,KAAK,CAAC,KAAK,CAAC,KAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,QAAU,CAAW;IAA3D,CAA2D;AAD7D,CAC6D,CAAC;AAc/B,4CAAgB;AAZjD,IAAM,WAAW,GACf,UAAC,QAAwB;IACzB,OAAA,UAAC,EAA0B;YAAzB,KAAK,WAAA;QACL,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAAxB,CAAwB;AAD1B,CAC0B,CAAC;AASsB,kCAAW;AAP9D,IAAM,aAAa,GACjB,UAAC,cAAgC;IACjC,OAAA,UAAC,EAA0B;YAAzB,KAAK,WAAA;QACL,OAAA,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;IAAhC,CAAgC;AADlC,CACkC,CAAC;AAInB,sCAAa"} \ No newline at end of file +{"version":3,"file":"theme.js","sourceRoot":"","sources":["../../src/theme/theme.ts"],"names":[],"mappings":";;;AAwIA,IAAM,QAAQ,GACZ,UAAC,KAAa,EAAE,QAAiB;IACjC,OAAA,UAAC,EAA0B;YAAzB,KAAK,WAAA;QACL,OAAA,KAAK,CAAC,KAAK,CAAC,KAAG,KAAK,IAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAE,CAAW;IAAlD,CAAkD;AADpD,CACoD,CAAC;AAwB/C,4BAAQ;AAtBhB,IAAM,gBAAgB,GACpB,UAAC,KAAY,EAAE,QAAgB;IAC/B,OAAA,UAAC,EAA0B;YAAzB,KAAK,WAAA;QACL,OAAA,KAAK,CAAC,KAAK,CAAC,KAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,GAAG,QAAU,CAAW;IAA3D,CAA2D;AAD7D,CAC6D,CAAC;AAmB/B,4CAAgB;AAjBjD,IAAM,mBAAmB,GACvB,UAAC,KAAa,EAAE,QAAiB;IACjC,OAAA,UAAC,EAA0B;YAAzB,KAAK,WAAA;QACL,OAAA,KAAK,CAAC,gBAAgB,CAAC,KAAG,KAAK,IAAG,QAAQ,aAAR,QAAQ,cAAR,QAAQ,GAAI,EAAE,CAAE,CAAW;IAA7D,CAA6D;AAD/D,CAC+D,CAAC;AAcf,kDAAmB;AAZtE,IAAM,WAAW,GACf,UAAC,QAAwB;IACzB,OAAA,UAAC,EAA0B;YAAzB,KAAK,WAAA;QACL,OAAA,KAAK,CAAC,QAAQ,CAAC,QAAQ,CAAC;IAAxB,CAAwB;AAD1B,CAC0B,CAAC;AAS2C,kCAAW;AAPnF,IAAM,aAAa,GACjB,UAAC,cAAgC;IACjC,OAAA,UAAC,EAA0B;YAAzB,KAAK,WAAA;QACL,OAAA,KAAK,CAAC,UAAU,CAAC,cAAc,CAAC;IAAhC,CAAgC;AADlC,CACkC,CAAC;AAInB,sCAAa"} \ No newline at end of file diff --git a/package.json b/package.json index 86f5cc88..5223e00c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "akeneo-design-system", - "version": "0.1.224", + "version": "0.1.225", "description": "Akeneo design system", "main": "lib/index.js", "scripts": { diff --git a/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-field-block-correctly-1-snap.png b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-field-block-correctly-1-snap.png new file mode 100644 index 00000000..c19d9562 Binary files /dev/null and b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-field-block-correctly-1-snap.png differ diff --git a/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-tags-standard-correctly-1-snap.png b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-tags-standard-correctly-1-snap.png index 5285ce91..1a9fbae2 100644 Binary files a/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-tags-standard-correctly-1-snap.png and b/src/__image_snapshots__/all-visual-tsx-visual-tests-renders-components-tags-standard-correctly-1-snap.png differ diff --git a/src/components/Field/Field.stories.mdx b/src/components/Field/Field.stories.mdx index a753564d..71ff1b96 100644 --- a/src/components/Field/Field.stories.mdx +++ b/src/components/Field/Field.stories.mdx @@ -1,7 +1,7 @@ import {useState} from 'react'; import {Meta, Story, ArgsTable, Canvas} from '@storybook/addon-docs'; import {Field} from './Field.tsx'; -import {Helper, Link, Locale, TextInput, Button} from '../../components'; +import {Helper, Link, Locale, TextInput, Button, Block} from '../../components'; + +## Variation with Block + + + + {args => { + return ( + + } + /> + + ); + }} + + diff --git a/src/components/Field/Field.tsx b/src/components/Field/Field.tsx index b5a6ffdd..c30f2364 100644 --- a/src/components/Field/Field.tsx +++ b/src/components/Field/Field.tsx @@ -1,6 +1,6 @@ import React, {Ref, ReactElement, ReactNode} from 'react'; import styled from 'styled-components'; -import {Helper, HelperProps, InputProps, Locale, LocaleProps, Pill} from '../../components'; +import {Helper, HelperProps, InputProps, Locale, LocaleProps, Pill, Block, BlockProps} from '../../components'; import {useId} from '../../hooks'; const FieldContainer = styled.div<{fullWidth: boolean}>` @@ -106,6 +106,10 @@ const Field = React.forwardRef( return {React.cloneElement(child, {inline: true})}; } + if (React.isValidElement(child) && child.type === Block) { + return React.cloneElement(child, {id: inputId, ariaLabelledBy: labelId}); + } + if (React.isValidElement>(child)) { return React.cloneElement(child, {id: inputId, 'aria-labelledby': labelId}); } diff --git a/src/components/Field/Field.unit.tsx b/src/components/Field/Field.unit.tsx index cdeef94e..c90947e3 100644 --- a/src/components/Field/Field.unit.tsx +++ b/src/components/Field/Field.unit.tsx @@ -1,7 +1,7 @@ import React from 'react'; import {Field} from './Field'; import {render, screen} from '../../storybook/test-util'; -import {TextInput, Helper} from '../../components'; +import {TextInput, Helper, Block} from '../../components'; test('it renders its children properly', () => { render( @@ -35,6 +35,17 @@ test('it does not render something else than an Input or Helpers', () => { expect(screen.queryByText('Something else')).not.toBeInTheDocument(); }); +test('it renders a Block', () => { + render( + + + + ); + + expect(screen.getByTestId('block')).toBeInTheDocument(); + expect(screen.getByText('My block title')).toBeInTheDocument(); +}); + test('Field supports forwardRef', () => { const ref = {current: null}; diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 544ef101..25a2ad23 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -14,7 +14,7 @@ const Container = styled.div<{sticky?: number} & AkeneoThemedProps>` box-sizing: border-box; gap: 10px; - :focus-within { + &:focus-within { border-bottom: 1px solid ${getColor('brand', 100)}; } diff --git a/src/components/Tags/Tags.stories.mdx b/src/components/Tags/Tags.stories.mdx index 085e4eda..9e4538fa 100644 --- a/src/components/Tags/Tags.stories.mdx +++ b/src/components/Tags/Tags.stories.mdx @@ -16,7 +16,7 @@ Tags can be used to display a list of keywords. A `Tags` element can only accept a list of `Tag` children. -Each Tag must have one `tint` attribute that you can pick in that list: `'green' | 'blue' | 'dark_blue' | 'purple' | 'dark_purple' | 'yellow' | 'red'` +Each Tag must have one `tint` attribute that you can pick in that list: `'green' | 'blue' | 'dark_blue' | 'purple' | 'dark_purple' | 'yellow' | 'red' | 'dark_cyan' | 'forest_green' | 'olive_green' | 'hot_pink' | 'coral_red' | 'orange' | 'chocolate'` ## Playground @@ -30,8 +30,14 @@ Each Tag must have one `tint` attribute that you can pick in that list: `'green' Purple Dark Purple Green + Forest Green + Olive Green + Dark Cyan + Hot Pink + Coral Red + Chocolate Yellow - Very very very very looooonnnnnng teeeexxt + Very very very very looooonnnnnng teeeexxt ; }} diff --git a/src/components/Tags/Tags.tsx b/src/components/Tags/Tags.tsx index 6c797589..0ee7c785 100644 --- a/src/components/Tags/Tags.tsx +++ b/src/components/Tags/Tags.tsx @@ -1,6 +1,6 @@ import React, {Ref, ReactNode, isValidElement} from 'react'; import styled from 'styled-components'; -import {AkeneoThemedProps, getFontSize} from '../../theme'; +import {AkeneoThemedProps, getColorAlternative, getFontSize} from '../../theme'; /** * The colors defined in this file are the alternative ones @@ -8,42 +8,37 @@ import {AkeneoThemedProps, getFontSize} from '../../theme'; * https://www.notion.so/akeneo/Alternative-colors-0f5283c1b02f4fd4a418f1e20f2efa99 * Those colors will most likely only be used with the tags components */ -type Tint = 'green' | 'blue' | 'dark_blue' | 'purple' | 'dark_purple' | 'yellow' | 'red'; +type Tint = + | 'green' + | 'blue' + | 'dark_blue' + | 'purple' + | 'dark_purple' + | 'yellow' + | 'red' + | 'dark_cyan' + | 'forest_green' + | 'olive_green' + | 'hot_pink' + | 'coral_red' + | 'orange' + | 'chocolate'; + +// Because tints are in snake_case, and colors code are in camelCase +const convertTintToColorCode = (str: string) => { + return str.replace(/_([a-z])/g, function (g) { + return g[1].toUpperCase(); + }); +}; + type TagProps = { tint: Tint; } & React.HTMLAttributes; const Tag = styled.li` border: 1px solid; - border-color: ${({tint}) => - ({ - green: '#81cccc', - blue: '#4ca8e0', - dark_blue: '#5e63b6', - purple: '#9452ba', - dark_purple: '#52267d', - yellow: '#fcce76', - red: '#f74b64', - }[tint])}; - color: ${({tint}) => - ({ - green: '#5da8a6', - blue: '#3278b7', - dark_blue: '#3b438c', - purple: '#763e9e', - dark_purple: '#36145e', - yellow: '#ca8411', - red: '#c92343', - }[tint])}; - background-color: ${({tint}) => - ({ - green: '#f5fafa', - blue: '#f0f7fc', - dark_blue: '#efeff8', - purple: '#f3eef9', - dark_purple: '#eeeaf2', - yellow: '#fefbf2', - red: '#fdedf0', - }[tint])}; + border-color: ${({tint}) => getColorAlternative(convertTintToColorCode(tint), 100)}; + color: ${({tint}) => getColorAlternative(convertTintToColorCode(tint), 120)}; + background-color: ${({tint}) => getColorAlternative(convertTintToColorCode(tint), 10)}; height: 16px; line-height: 16px; padding: 0 6px; diff --git a/src/components/Tags/Tags.unit.tsx b/src/components/Tags/Tags.unit.tsx index 05319df7..3355fb85 100644 --- a/src/components/Tags/Tags.unit.tsx +++ b/src/components/Tags/Tags.unit.tsx @@ -5,11 +5,11 @@ import {render, screen} from '../../storybook/test-util'; test('it renders its children properly', () => { render( - Red Tag + Dark blue Tag ); - expect(screen.getByText('Red Tag')).toBeInTheDocument(); + expect(screen.getByText('Dark blue Tag')).toBeInTheDocument(); }); test('it fails when there are invalid children', () => { diff --git a/src/guidelines/Colors.stories.mdx b/src/guidelines/Colors.stories.mdx index 084eaa92..d80b9721 100644 --- a/src/guidelines/Colors.stories.mdx +++ b/src/guidelines/Colors.stories.mdx @@ -10,6 +10,7 @@ export const ColorContainer = styled(PreviewContainer)` `; export const colors = ['green', 'blue', 'yellow', 'red', 'grey', 'purple']; +export const colorsAlternative = ['green', 'darkCyan', 'forestGreen', 'oliveGreen', 'blue', 'darkBlue', 'purple', 'darkPurple', 'hotPink', 'red', 'coralRed', 'yellow', 'orange', 'chocolate']; # Colors @@ -68,3 +69,32 @@ Colors enhance the experience by providing visual clues and drawing attention to + + + +

+

Alternative colors

+ {colorsAlternative.map(colorName => { + return ( +
+ {colorName} + + {Object.keys(themes[0].colorAlternative) + .filter(colorCode => 0 === colorCode.indexOf(colorName)) + .map(colorCode => { + const color = themes[0].colorAlternative[colorCode]; + return ( + + + {colorCode} + {color} + + ); + })} + +
+ ); + })} +
+ + diff --git a/src/illustrations/WarningIllustration.tsx b/src/illustrations/WarningIllustration.tsx new file mode 100644 index 00000000..0a006798 --- /dev/null +++ b/src/illustrations/WarningIllustration.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import {IllustrationProps} from './IllustrationProps'; +import Warning from '../../static/illustrations/Warning.svg'; + +const WarningIllustration = ({title, size = 256, ...props}: IllustrationProps) => ( + + {title && {title}} + + +); + +export {WarningIllustration}; diff --git a/src/illustrations/index.ts b/src/illustrations/index.ts index b57bc7d4..30de7860 100644 --- a/src/illustrations/index.ts +++ b/src/illustrations/index.ts @@ -58,3 +58,4 @@ export * from './UserRolesIllustration'; export * from './UsersIllustration'; export * from './UsingIllustration'; export * from './ViewsIllustration'; +export * from './WarningIllustration'; diff --git a/src/theme/common.ts b/src/theme/common.ts index 25f0f9d2..2cbb2e5b 100644 --- a/src/theme/common.ts +++ b/src/theme/common.ts @@ -1,5 +1,5 @@ import styled, {css, keyframes} from 'styled-components'; -import {Color, FontFamily, FontSize, getColor, getFontSize, Palette} from './theme'; +import {Color, ColorAlternative, FontFamily, FontSize, getColor, getFontSize, Palette} from './theme'; const CommonStyle = css` input, @@ -100,6 +100,51 @@ const color: Color = { white: '#ffffff', }; +const colorAlternative: ColorAlternative = { + blue10: '#F0F7FC', + blue100: '#4CA8E0', + blue120: '#3278B7', + chocolate10: '#EEE9E5', + chocolate100: '#512500', + chocolate120: '#441F00', + coralRed10: '#FDF0EF', + coralRed100: '#ED6A5E', + coralRed120: '#B72215', + darkBlue10: '#EFEFF8', + darkBlue100: '#5e63b6', + darkBlue120: '#3B438C', + darkCyan10: '#E5F3F3', + darkCyan100: '#008B8B', + darkCyan120: '#007575', + darkPurple10: '#EEEAF2', + darkPurple100: '#52267D', + darkPurple120: '#36145E', + forestGreen10: '#EDF1EB', + forestGreen100: '#50723C', + forestGreen120: '#436032', + green10: '#F5FAFA', + green100: '#81CCCC', + green120: '#5DA8A6', + hotPink10: '#FFF0F7', + hotPink100: '#FF69B4', + hotPink120: '#CC0066', + oliveGreen10: '#F0F4E9', + oliveGreen100: '#6B8E23', + oliveGreen120: '#5A771D', + orange10: '#FFF3E5', + orange100: '#FF8600', + orange120: '#B25E00', + purple10: '#F3EEF9', + purple100: '#9452BA', + purple120: '#763E9E', + red10: '#FDEDF0', + red100: '#F74B64', + red120: '#C92343', + yellow10: '#FEFBF2', + yellow100: '#FCCE76', + yellow120: '#D69A38', +}; + const fontSize: FontSize = { big: '15px', bigger: '17px', @@ -129,4 +174,14 @@ const SkeletonPlaceholder = styled.div` ${placeholderStyle} `; -export {color, fontFamily, fontSize, palette, CommonStyle, BrandedPath, SkeletonPlaceholder, placeholderStyle}; +export { + color, + colorAlternative, + fontFamily, + fontSize, + palette, + CommonStyle, + BrandedPath, + SkeletonPlaceholder, + placeholderStyle, +}; diff --git a/src/theme/connector/index.ts b/src/theme/connector/index.ts index ead5ce5b..4d98874e 100644 --- a/src/theme/connector/index.ts +++ b/src/theme/connector/index.ts @@ -1,5 +1,5 @@ import {Theme} from '../theme'; -import {color, fontSize, palette, fontFamily} from '../common'; +import {color, fontSize, palette, fontFamily, colorAlternative} from '../common'; const connectorTheme: Theme = { name: 'Connector', @@ -13,6 +13,7 @@ const connectorTheme: Theme = { brand120: '#3b4494', brand140: '#272d62', }, + colorAlternative, fontSize, palette, fontFamily, diff --git a/src/theme/onboarder/index.ts b/src/theme/onboarder/index.ts index 9231c0b6..48918dc0 100644 --- a/src/theme/onboarder/index.ts +++ b/src/theme/onboarder/index.ts @@ -1,5 +1,5 @@ import {Theme} from '../theme'; -import {color, fontSize, palette, fontFamily} from '../common'; +import {color, fontSize, palette, fontFamily, colorAlternative} from '../common'; const onboarderTheme: Theme = { name: 'Onboarder', @@ -13,6 +13,7 @@ const onboarderTheme: Theme = { brand120: '#3c86b3', brand140: '#2d6486', }, + colorAlternative, fontSize, palette, fontFamily, diff --git a/src/theme/pim/index.ts b/src/theme/pim/index.ts index 3950f57c..7c98cc34 100644 --- a/src/theme/pim/index.ts +++ b/src/theme/pim/index.ts @@ -1,5 +1,5 @@ import {Theme} from '../theme'; -import {color, fontSize, palette, fontFamily} from '../common'; +import {color, colorAlternative, fontSize, palette, fontFamily} from '../common'; const pimTheme: Theme = { name: 'PIM', @@ -13,6 +13,7 @@ const pimTheme: Theme = { brand120: '#764194', brand140: '#58316f', }, + colorAlternative, fontSize, palette, fontFamily, diff --git a/src/theme/shared-catalogs/index.ts b/src/theme/shared-catalogs/index.ts index fb47f672..937599ea 100644 --- a/src/theme/shared-catalogs/index.ts +++ b/src/theme/shared-catalogs/index.ts @@ -1,5 +1,5 @@ import {Theme} from '../theme'; -import {color, fontSize, palette, fontFamily} from '../common'; +import {color, fontSize, palette, fontFamily, colorAlternative} from '../common'; const sharedCatalogsTheme: Theme = { name: 'Shared Catalogs', @@ -13,6 +13,7 @@ const sharedCatalogsTheme: Theme = { brand120: '#c79032', brand140: '#956c25', }, + colorAlternative, fontSize, palette, fontFamily, diff --git a/src/theme/theme.ts b/src/theme/theme.ts index 78c4c031..fe264488 100644 --- a/src/theme/theme.ts +++ b/src/theme/theme.ts @@ -65,6 +65,51 @@ type Color = { white: string; }; +type ColorAlternative = { + blue10: string; + blue100: string; + blue120: string; + chocolate10: string; + chocolate100: string; + chocolate120: string; + coralRed10: string; + coralRed100: string; + coralRed120: string; + darkBlue10: string; + darkBlue100: string; + darkBlue120: string; + darkCyan10: string; + darkCyan100: string; + darkCyan120: string; + darkPurple10: string; + darkPurple100: string; + darkPurple120: string; + forestGreen10: string; + forestGreen100: string; + forestGreen120: string; + green10: string; + green100: string; + green120: string; + hotPink10: string; + hotPink100: string; + hotPink120: string; + oliveGreen10: string; + oliveGreen100: string; + oliveGreen120: string; + orange10: string; + orange100: string; + orange120: string; + purple10: string; + purple100: string; + purple120: string; + red10: string; + red100: string; + red120: string; + yellow10: string; + yellow100: string; + yellow120: string; +}; + type Palette = { primary: string; secondary: string; @@ -78,6 +123,7 @@ type Theme = { palette: Palette; fontSize: FontSize; color: Color; + colorAlternative: ColorAlternative; fontFamily: FontFamily; }; @@ -98,6 +144,11 @@ const getColorForLevel = ({theme}: AkeneoThemedProps): string => theme.color[`${theme.palette[level]}${gradient}`] as string; +const getColorAlternative = + (color: string, gradient?: number): ((props: AkeneoThemedProps) => string) => + ({theme}: AkeneoThemedProps): string => + theme.colorAlternative[`${color}${gradient ?? ''}`] as string; + const getFontSize = (fontSize: keyof FontSize): ((props: AkeneoThemedProps) => string) => ({theme}: AkeneoThemedProps): string => @@ -109,5 +160,5 @@ const getFontFamily = theme.fontFamily[fontFamilyType]; export type AkeneoThemedProps

> = ThemedStyledProps; -export type {Theme, FontSize, FontFamily, Color, Level, Palette}; -export {getColor, getFontFamily, getColorForLevel, getFontSize}; +export type {Theme, FontSize, FontFamily, Color, ColorAlternative, Level, Palette}; +export {getColor, getFontFamily, getColorForLevel, getColorAlternative, getFontSize}; diff --git a/static/illustrations/Warning.svg b/static/illustrations/Warning.svg new file mode 100644 index 00000000..9810491b --- /dev/null +++ b/static/illustrations/Warning.svg @@ -0,0 +1,203 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +