diff --git a/example/package.json b/example/package.json index 9d455093..e554f5e8 100644 --- a/example/package.json +++ b/example/package.json @@ -6,8 +6,8 @@ "@testing-library/jest-dom": "^4.2.4", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", - "babel-jest": "^24.9.0", "akeneo-design-system": "file:../lib", + "babel-jest": "^24.9.0", "react": "^17.0.2", "react-dom": "^17.0.2", "react-scripts": "3.4.3", diff --git a/example/src/__snapshots__/App.test.js.snap b/example/src/__snapshots__/App.test.js.snap index d2ac7455..76982db5 100644 --- a/example/src/__snapshots__/App.test.js.snap +++ b/example/src/__snapshots__/App.test.js.snap @@ -5,7 +5,7 @@ exports[`renders the expected elements 1`] = `
Success diff --git a/example/yarn.lock b/example/yarn.lock index 704bf1c8..8ba2a030 100644 --- a/example/yarn.lock +++ b/example/yarn.lock @@ -8559,7 +8559,7 @@ prompts@^2.0.1: kleur "^3.0.3" sisteransi "^1.0.4" -prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -8755,15 +8755,14 @@ react-dev-utils@^10.2.1: strip-ansi "6.0.0" text-table "0.2.0" -react-dom@^16.13.1: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.13.1.tgz#c1bd37331a0486c078ee54c4740720993b2e0e7f" - integrity sha512-81PIMmVLnCNLO/fFOQxdQkvEq/+Hfpv24XNJfpyZhTRfO0QcmQIF/PgCa1zCOj2w1hrn12MFLyaJ/G0+Mxtfag== +react-dom@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" + integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" - scheduler "^0.19.1" + scheduler "^0.20.2" react-error-overlay@^6.0.7: version "6.0.7" @@ -8835,14 +8834,13 @@ react-scripts@3.4.3: optionalDependencies: fsevents "2.1.2" -react@^16.13.1: - version "16.13.1" - resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e" - integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w== +react@^17.0.2: + version "17.0.2" + resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" + integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" - prop-types "^15.6.2" read-pkg-up@^2.0.0: version "2.0.0" @@ -9319,10 +9317,10 @@ saxes@^3.1.9: dependencies: xmlchars "^2.1.1" -scheduler@^0.19.1: - version "0.19.1" - resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196" - integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA== +scheduler@^0.20.2: + version "0.20.2" + resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91" + integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ== dependencies: loose-envify "^1.1.0" object-assign "^4.1.1" diff --git a/lib/components/Avatar/Avatar.d.ts b/lib/components/Avatar/Avatar.d.ts index 7a3d2cd3..aa6802c5 100644 --- a/lib/components/Avatar/Avatar.d.ts +++ b/lib/components/Avatar/Avatar.d.ts @@ -1,5 +1,5 @@ import React from 'react'; import { AvatarProps } from './types'; -declare const Avatar: ({ username, firstName, lastName, avatarUrl, size, ...rest }: AvatarProps) => React.JSX.Element; +declare const Avatar: ({ username, firstName, lastName, avatarUrl, size, disabled, selected, ...rest }: AvatarProps) => React.JSX.Element; export { Avatar }; export type { AvatarProps }; diff --git a/lib/components/Avatar/Avatar.js b/lib/components/Avatar/Avatar.js index 0d813dd0..e06ec105 100644 --- a/lib/components/Avatar/Avatar.js +++ b/lib/components/Avatar/Avatar.js @@ -50,19 +50,30 @@ var react_1 = __importStar(require("react")); var styled_components_1 = __importStar(require("styled-components")); var hooks_1 = require("../../hooks"); var theme_1 = require("../../theme"); -var AvatarContainer = styled_components_1.default.span(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n ", "\n display: inline-block;\n color: ", ";\n text-align: center;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n text-transform: uppercase;\n cursor: ", ";\n"], ["\n ", "\n display: inline-block;\n color: ", ";\n text-align: center;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n text-transform: uppercase;\n cursor: ", ";\n"])), function (_a) { +var AvatarContainer = styled_components_1.default.span(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n ", "\n ", "\n display: inline-block;\n background-color: ", ";\n"], ["\n ", "\n ", "\n display: inline-block;\n background-color: ", ";\n"])), function (_a) { var size = _a.size; return size === 'default' - ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 32px;\n width: 32px;\n line-height: 32px;\n font-size: 15px;\n border-radius: 32px;\n "], ["\n height: 32px;\n width: 32px;\n line-height: 32px;\n font-size: 15px;\n border-radius: 32px;\n "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 140px;\n width: 140px;\n line-height: 140px;\n font-size: 66px;\n border-radius: 140px;\n "], ["\n height: 140px;\n width: 140px;\n line-height: 140px;\n font-size: 66px;\n border-radius: 140px;\n "]))); -}, (0, theme_1.getColor)('white'), function (_a) { - var onClick = _a.onClick; - return (onClick ? 'pointer' : 'default'); -}); + ? (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n height: 32px;\n width: 32px;\n border-radius: 32px;\n "], ["\n height: 32px;\n width: 32px;\n border-radius: 32px;\n "]))) : (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 140px;\n width: 140px;\n border-radius: 140px;\n "], ["\n height: 140px;\n width: 140px;\n border-radius: 140px;\n "]))); +}, function (_a) { + var size = _a.size, selected = _a.selected; + return size === 'default' && selected + ? (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n padding: 1px;\n border: 3px solid ", ";\n margin: -4px -8px 0 0;\n "], ["\n padding: 1px;\n border: 3px solid ", ";\n margin: -4px -8px 0 0;\n "])), (0, theme_1.getColor)('blue', 100)) : (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n margin-right: -4px;\n "], ["\n margin-right: -4px;\n "]))); +}, (0, theme_1.getColor)('white')); +var AvatarImage = styled_components_1.default.span(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n ", "\n ", "\n height: 100%;\n width: 100%;\n display: block;\n color: ", ";\n text-align: center;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n text-transform: uppercase;\n"], ["\n ", "\n ", "\n height: 100%;\n width: 100%;\n display: block;\n color: ", ";\n text-align: center;\n background-position: center;\n background-repeat: no-repeat;\n background-size: cover;\n text-transform: uppercase;\n"])), function (_a) { + var size = _a.size; + return size === 'default' + ? (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n line-height: 32px;\n font-size: 15px;\n border-radius: 32px;\n "], ["\n line-height: 32px;\n font-size: 15px;\n border-radius: 32px;\n "]))) : (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n line-height: 140px;\n font-size: 66px;\n border-radius: 140px;\n "], ["\n line-height: 140px;\n font-size: 66px;\n border-radius: 140px;\n "]))); +}, function (_a) { + var disabled = _a.disabled; + return disabled + ? (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n opacity: 50%;\n "], ["\n opacity: 50%;\n "]))) : (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject([""], [""]))); +}, (0, theme_1.getColor)('white')); var Avatar = function (_a) { - var username = _a.username, firstName = _a.firstName, lastName = _a.lastName, avatarUrl = _a.avatarUrl, _b = _a.size, size = _b === void 0 ? 'default' : _b, rest = __rest(_a, ["username", "firstName", "lastName", "avatarUrl", "size"]); + var username = _a.username, firstName = _a.firstName, lastName = _a.lastName, avatarUrl = _a.avatarUrl, _b = _a.size, size = _b === void 0 ? 'default' : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, _d = _a.selected, selected = _d === void 0 ? false : _d, rest = __rest(_a, ["username", "firstName", "lastName", "avatarUrl", "size", "disabled", "selected"]); var theme = (0, hooks_1.useTheme)(); var fallback = (firstName.trim().charAt(0) + lastName.trim().charAt(0) || username.substring(0, 2)).toLocaleUpperCase(); var title = ((firstName || '') + " " + (lastName || '')).trim() || username; + var title_container = title + ' container'; var backgroundColor = (0, react_1.useMemo)(function () { var colorId = username.split('').reduce(function (s, l) { return s + l.charCodeAt(0); }, 0); var colors = [ @@ -82,8 +93,9 @@ var Avatar = function (_a) { return colors[colorId % colors.length]; }, [theme, username]); var style = avatarUrl ? { backgroundImage: "url(" + avatarUrl + ")" } : { backgroundColor: backgroundColor }; - return (react_1.default.createElement(AvatarContainer, __assign({ size: size }, rest, { style: style, title: title }), avatarUrl ? '' : fallback)); + return (react_1.default.createElement(AvatarContainer, { size: size, selected: selected, title: title_container }, + react_1.default.createElement(AvatarImage, __assign({ size: size, disabled: disabled }, rest, { style: style, title: title }), avatarUrl ? '' : fallback))); }; exports.Avatar = Avatar; -var templateObject_1, templateObject_2, templateObject_3; +var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10; //# sourceMappingURL=Avatar.js.map \ No newline at end of file diff --git a/lib/components/Avatar/Avatar.js.map b/lib/components/Avatar/Avatar.js.map index 002b18b2..7f019e20 100644 --- a/lib/components/Avatar/Avatar.js.map +++ b/lib/components/Avatar/Avatar.js.map @@ -1 +1 @@ -{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"} \ No newline at end of file +{"version":3,"file":"Avatar.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatar.tsx"],"names":[],"mappings":"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"} \ No newline at end of file diff --git a/lib/components/Avatar/Avatars.js b/lib/components/Avatar/Avatars.js index 596164d5..066476a4 100644 --- a/lib/components/Avatar/Avatars.js +++ b/lib/components/Avatar/Avatars.js @@ -52,7 +52,7 @@ exports.Avatars = void 0; var react_1 = __importStar(require("react")); var styled_components_1 = __importDefault(require("styled-components")); var theme_1 = require("../../theme"); -var AvatarListContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-end;\n & > * {\n margin-right: -4px;\n position: relative;\n }\n"], ["\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-end;\n & > * {\n margin-right: -4px;\n position: relative;\n }\n"]))); +var AvatarListContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-end;\n & > * {\n position: relative;\n }\n"], ["\n display: flex;\n flex-direction: row-reverse;\n justify-content: flex-end;\n & > * {\n position: relative;\n }\n"]))); var RemainingAvatar = styled_components_1.default.span(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n height: 32px;\n width: 32px;\n color: ", ";\n border: 1px solid;\n line-height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 15px;\n border-radius: 32px;\n"], ["\n height: 32px;\n width: 32px;\n color: ", ";\n border: 1px solid;\n line-height: 32px;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: 15px;\n border-radius: 32px;\n"])), (0, theme_1.getColor)('grey', 120)); var Avatars = function (_a) { var max = _a.max, _b = _a.maxTitle, maxTitle = _b === void 0 ? 10 : _b, children = _a.children, rest = __rest(_a, ["max", "maxTitle", "children"]); diff --git a/lib/components/Avatar/Avatars.js.map b/lib/components/Avatar/Avatars.js.map index e058eeda..83e0ae81 100644 --- a/lib/components/Avatar/Avatars.js.map +++ b/lib/components/Avatar/Avatars.js.map @@ -1 +1 @@ -{"version":3,"file":"Avatars.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatars.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+C;AAC/C,wEAAuC;AAEvC,qCAAwD;AAGxD,IAAM,mBAAmB,GAAG,2BAAM,CAAC,GAAG,yNAAkC,sJAQvE,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,2BAAM,CAAC,IAAI,sRAAA,8CAGxB,EAAqB,mKAQ/B,KARU,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAQ/B,CAAC;AAUF,IAAM,OAAO,GAA2B,UAAC,EAAuC;IAAtC,IAAA,GAAG,SAAA,EAAE,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAtC,+BAAuC,CAAD;IAC7E,IAAM,aAAa,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAM,iBAAiB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtD,IAAM,iBAAiB,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,EAAE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC7E,IAAM,sBAAsB,GAAG,aAAa,CAAC,MAAM,GAAG,GAAG,CAAC;IAC1D,IAAM,eAAe,GAAG,iBAAiB,CAAC,OAAO,EAAE,CAAC;IAEpD,IAAM,mBAAmB,GAAG,IAAA,eAAO,EAAC;QAClC,IAAM,cAAc,GAAG,iBAAiB;aACrC,GAAG,CAAC,UAAA,KAAK;YACR,IAAI,CAAC,eAAK,CAAC,cAAc,CAAc,KAAK,CAAC;gBAAE,OAAO;YAChD,IAAA,KAAkC,KAAK,CAAC,KAAK,EAA5C,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAe,CAAC;YAEpD,OAAO,CAAA,CAAG,SAAS,IAAI,EAAE,WAAI,QAAQ,IAAI,EAAE,CAAE,CAAA,CAAC,IAAI,EAAE,IAAI,QAAQ,CAAC;QACnE,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC;aAClB,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,iBAAiB,CAAC,MAAM,GAAG,QAAQ,EAAE;YACvC,OAAO,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SAC3C;QAED,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElC,OAAO,CACL,8BAAC,mBAAmB,aAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,mBAAmB,IAAM,IAAI;QACpE,sBAAsB,GAAG,CAAC,IAAI,8BAAC,eAAe;;YAAG,sBAAsB,CAAmB;QAC1F,eAAe,CACI,CACvB,CAAC;AACJ,CAAC,CAAC;AAEM,0BAAO"} \ No newline at end of file +{"version":3,"file":"Avatars.js","sourceRoot":"","sources":["../../../src/components/Avatar/Avatars.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,6CAA+C;AAC/C,wEAAuC;AAEvC,qCAAwD;AAGxD,IAAM,mBAAmB,GAAG,2BAAM,CAAC,GAAG,gMAAkC,6HAOvE,IAAA,CAAC;AAEF,IAAM,eAAe,GAAG,2BAAM,CAAC,IAAI,sRAAA,8CAGxB,EAAqB,mKAQ/B,KARU,IAAA,gBAAQ,EAAC,MAAM,EAAE,GAAG,CAAC,CAQ/B,CAAC;AAUF,IAAM,OAAO,GAA2B,UAAC,EAAuC;IAAtC,IAAA,GAAG,SAAA,EAAE,gBAAa,EAAb,QAAQ,mBAAG,EAAE,KAAA,EAAE,QAAQ,cAAA,EAAK,IAAI,cAAtC,+BAAuC,CAAD;IAC7E,IAAM,aAAa,GAAG,gBAAQ,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IACjD,IAAM,iBAAiB,GAAG,aAAa,CAAC,KAAK,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC;IACtD,IAAM,iBAAiB,GAAG,aAAa,CAAC,KAAK,CAAC,GAAG,EAAE,aAAa,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC;IAC7E,IAAM,sBAAsB,GAAG,aAAa,CAAC,MAAM,GAAG,GAAG,CAAC;IAC1D,IAAM,eAAe,GAAG,iBAAiB,CAAC,OAAO,EAAE,CAAC;IAEpD,IAAM,mBAAmB,GAAG,IAAA,eAAO,EAAC;QAClC,IAAM,cAAc,GAAG,iBAAiB;aACrC,GAAG,CAAC,UAAA,KAAK;YACR,IAAI,CAAC,eAAK,CAAC,cAAc,CAAc,KAAK,CAAC;gBAAE,OAAO;YAChD,IAAA,KAAkC,KAAK,CAAC,KAAK,EAA5C,SAAS,eAAA,EAAE,QAAQ,cAAA,EAAE,QAAQ,cAAe,CAAC;YAEpD,OAAO,CAAA,CAAG,SAAS,IAAI,EAAE,WAAI,QAAQ,IAAI,EAAE,CAAE,CAAA,CAAC,IAAI,EAAE,IAAI,QAAQ,CAAC;QACnE,CAAC,CAAC;aACD,KAAK,CAAC,CAAC,EAAE,QAAQ,CAAC;aAClB,IAAI,CAAC,IAAI,CAAC,CAAC;QAEd,IAAI,iBAAiB,CAAC,MAAM,GAAG,QAAQ,EAAE;YACvC,OAAO,cAAc,CAAC,MAAM,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SAC3C;QAED,OAAO,cAAc,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,iBAAiB,CAAC,CAAC,CAAC;IAElC,OAAO,CACL,8BAAC,mBAAmB,aAAC,KAAK,EAAE,IAAI,CAAC,KAAK,IAAI,mBAAmB,IAAM,IAAI;QACpE,sBAAsB,GAAG,CAAC,IAAI,8BAAC,eAAe;;YAAG,sBAAsB,CAAmB;QAC1F,eAAe,CACI,CACvB,CAAC;AACJ,CAAC,CAAC;AAEM,0BAAO"} \ No newline at end of file diff --git a/lib/components/Avatar/types.d.ts b/lib/components/Avatar/types.d.ts index be9b088e..8f6ade2c 100644 --- a/lib/components/Avatar/types.d.ts +++ b/lib/components/Avatar/types.d.ts @@ -8,4 +8,10 @@ export declare type User = { }; export declare type AvatarProps = Override, User & { size?: 'default' | 'big'; + disabled?: boolean; + selected?: boolean; +}>; +export declare type AvatarContainerProps = Override, { + size?: 'default' | 'big'; + selected?: boolean; }>; diff --git a/lib/components/Search/Search.d.ts b/lib/components/Search/Search.d.ts index 0e4c067e..86bcece1 100644 --- a/lib/components/Search/Search.d.ts +++ b/lib/components/Search/Search.d.ts @@ -15,3 +15,4 @@ declare const Search: { Separator: import("styled-components").StyledComponent<"div", any, Record & import("styled-components").ThemeProps, never>; }; export { Search }; +export type { SearchProps }; diff --git a/lib/icons/ChecklistIcon.js b/lib/icons/ChecklistIcon.js index 27474ea2..0bed7f53 100644 --- a/lib/icons/ChecklistIcon.js +++ b/lib/icons/ChecklistIcon.js @@ -31,7 +31,7 @@ var ChecklistIcon = function (_a) { var title = _a.title, _b = _a.size, size = _b === void 0 ? 24 : _b, _c = _a.color, color = _c === void 0 ? 'currentColor' : _c, props = __rest(_a, ["title", "size", "color"]); return (react_1.default.createElement("svg", __assign({ viewBox: "0 0 24 24", width: size, height: size }, props), title && react_1.default.createElement("title", null, title), - react_1.default.createElement("g", { stroke: "none", strokeWidth: "1", fill: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, + react_1.default.createElement("g", { stroke: "none", fillRule: "evenodd", strokeLinecap: "round", strokeLinejoin: "round" }, react_1.default.createElement("path", { d: "M9.48723 4.21967C9.78012 4.51256 9.78012 4.98744 9.48723 5.28033L6.0564 8.71115C5.37299 9.39457 4.26495 9.39457 3.58153 8.71115L2.21967 7.3493C1.92678 7.0564 1.92678 6.58153 2.21967 6.28864C2.51256 5.99574 2.98744 5.99574 3.28033 6.28864L4.64219 7.65049C4.73982 7.74812 4.89811 7.74813 4.99574 7.65049L8.42657 4.21967C8.71946 3.92678 9.19433 3.92678 9.48723 4.21967ZM12 6.68066C12 6.40452 12.2239 6.18066 12.5 6.18066H21.5C21.7761 6.18066 22 6.40452 22 6.68066C22 6.95681 21.7761 7.18066 21.5 7.18066H12.5C12.2239 7.18066 12 6.95681 12 6.68066ZM10 12.6807C10 12.4045 10.2239 12.1807 10.5 12.1807H21.5C21.7761 12.1807 22 12.4045 22 12.6807C22 12.9568 21.7761 13.1807 21.5 13.1807H10.5C10.2239 13.1807 10 12.9568 10 12.6807ZM10 18.6807C10 18.4045 10.2239 18.1807 10.5 18.1807H21.5C21.7761 18.1807 22 18.4045 22 18.6807C22 18.9568 21.7761 19.1807 21.5 19.1807H10.5C10.2239 19.1807 10 18.9568 10 18.6807ZM6.47409 18.681C6.47409 17.9954 5.91831 17.4396 5.23271 17.4396C4.54712 17.4396 3.99133 17.9954 3.99133 18.681C3.99133 19.3666 4.54712 19.9224 5.23271 19.9224C5.91831 19.9224 6.47409 19.3666 6.47409 18.681ZM6.47409 12.6807C6.47409 11.9951 5.91831 11.4393 5.23271 11.4393C4.54712 11.4393 3.99133 11.9951 3.99133 12.6807C3.99133 13.3663 4.54712 13.922 5.23271 13.922C5.91831 13.922 6.47409 13.3663 6.47409 12.6807Z", stroke: color })))); }; exports.ChecklistIcon = ChecklistIcon; diff --git a/lib/icons/ChecklistIcon.js.map b/lib/icons/ChecklistIcon.js.map index 06feca81..cbd93b8a 100644 --- a/lib/icons/ChecklistIcon.js.map +++ b/lib/icons/ChecklistIcon.js.map @@ -1 +1 @@ -{"version":3,"file":"ChecklistIcon.js","sourceRoot":"","sources":["../../src/icons/ChecklistIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAG1B,IAAM,aAAa,GAAG,UAAC,EAA+D;IAA9D,IAAA,KAAK,WAAA,EAAE,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EAAE,aAAsB,EAAtB,KAAK,mBAAG,cAAc,KAAA,EAAK,KAAK,cAAnD,0BAAoD,CAAD;IAAiB,OAAA,CACzF,gDAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,IAAM,KAAK;QAC1D,KAAK,IAAI,6CAAQ,KAAK,CAAS;QAChC,qCAAG,MAAM,EAAC,MAAM,EAAC,WAAW,EAAC,GAAG,EAAC,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO;YAC1G,wCACE,CAAC,EAAC,kyCAAkyC,EACpyC,MAAM,EAAE,KAAK,GACb,CACA,CACA,CACP,CAAA;CAAA,CAAC;AAEM,sCAAa"} \ No newline at end of file +{"version":3,"file":"ChecklistIcon.js","sourceRoot":"","sources":["../../src/icons/ChecklistIcon.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,gDAA0B;AAG1B,IAAM,aAAa,GAAG,UAAC,EAA+D;IAA9D,IAAA,KAAK,WAAA,EAAE,YAAS,EAAT,IAAI,mBAAG,EAAE,KAAA,EAAE,aAAsB,EAAtB,KAAK,mBAAG,cAAc,KAAA,EAAK,KAAK,cAAnD,0BAAoD,CAAD;IAAiB,OAAA,CACzF,gDAAK,OAAO,EAAC,WAAW,EAAC,KAAK,EAAE,IAAI,EAAE,MAAM,EAAE,IAAI,IAAM,KAAK;QAC1D,KAAK,IAAI,6CAAQ,KAAK,CAAS;QAChC,qCAAG,MAAM,EAAC,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,aAAa,EAAC,OAAO,EAAC,cAAc,EAAC,OAAO;YAC9E,wCACE,CAAC,EAAC,kyCAAkyC,EACpyC,MAAM,EAAE,KAAK,GACb,CACA,CACA,CACP,CAAA;CAAA,CAAC;AAEM,sCAAa"} \ No newline at end of file diff --git a/package.json b/package.json index e6bd58f5..ccdc26e1 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "akeneo-design-system", - "version": "0.1.234", + "version": "0.1.235", "description": "Akeneo design system", "main": "lib/index.js", "scripts": { diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx index 4f12f002..275c40ee 100644 --- a/src/components/Avatar/Avatar.tsx +++ b/src/components/Avatar/Avatar.tsx @@ -2,42 +2,82 @@ import React, {useMemo} from 'react'; import styled, {css} from 'styled-components'; import {useTheme} from '../../hooks'; import {AkeneoThemedProps, getColor} from '../../theme'; -import {AvatarProps} from './types'; +import {AvatarContainerProps, AvatarProps} from './types'; -const AvatarContainer = styled.span` +const AvatarContainer = styled.span` ${({size}) => size === 'default' ? css` height: 32px; width: 32px; - line-height: 32px; - font-size: 15px; border-radius: 32px; ` : css` height: 140px; width: 140px; + border-radius: 140px; + `} + ${({size, selected}) => + size === 'default' && selected + ? css` + padding: 1px; + border: 3px solid ${getColor('blue', 100)}; + margin: -4px -8px 0 0; + ` + : css` + margin-right: -4px; + `} + display: inline-block; + background-color: ${getColor('white')}; +`; + +const AvatarImage = styled.span` + ${({size}) => + size === 'default' + ? css` + line-height: 32px; + font-size: 15px; + border-radius: 32px; + ` + : css` line-height: 140px; font-size: 66px; border-radius: 140px; `} - display: inline-block; + ${({disabled}) => + disabled + ? css` + opacity: 50%; + ` + : css``} + height: 100%; + width: 100%; + display: block; color: ${getColor('white')}; text-align: center; background-position: center; background-repeat: no-repeat; background-size: cover; text-transform: uppercase; - cursor: ${({onClick}) => (onClick ? 'pointer' : 'default')}; `; -const Avatar = ({username, firstName, lastName, avatarUrl, size = 'default', ...rest}: AvatarProps) => { +const Avatar = ({ + username, + firstName, + lastName, + avatarUrl, + size = 'default', + disabled = false, + selected = false, + ...rest +}: AvatarProps) => { const theme = useTheme(); const fallback = ( firstName.trim().charAt(0) + lastName.trim().charAt(0) || username.substring(0, 2) ).toLocaleUpperCase(); const title = `${firstName || ''} ${lastName || ''}`.trim() || username; + const title_container = title + ' container'; const backgroundColor = useMemo(() => { const colorId = username.split('').reduce((s, l) => s + l.charCodeAt(0), 0); @@ -62,8 +102,10 @@ const Avatar = ({username, firstName, lastName, avatarUrl, size = 'default', ... const style = avatarUrl ? {backgroundImage: `url(${avatarUrl})`} : {backgroundColor}; return ( - - {avatarUrl ? '' : fallback} + + + {avatarUrl ? '' : fallback} + ); }; diff --git a/src/components/Avatar/Avatar.unit.tsx b/src/components/Avatar/Avatar.unit.tsx index 816f0397..3ef12029 100644 --- a/src/components/Avatar/Avatar.unit.tsx +++ b/src/components/Avatar/Avatar.unit.tsx @@ -61,14 +61,14 @@ test('initial are converted to uppercase', () => { test('size default', () => { render(); - const avatar = screen.getByTitle('John Doe'); + const avatar = screen.getByTitle('John Doe container'); expect(avatar).toHaveStyle('width: 32px'); }); test('size big', () => { render(); - const avatar = screen.getByTitle('John Doe'); + const avatar = screen.getByTitle('John Doe container'); expect(avatar).toHaveStyle('width: 140px'); }); diff --git a/src/components/Avatar/Avatars.tsx b/src/components/Avatar/Avatars.tsx index c431710a..6b294434 100644 --- a/src/components/Avatar/Avatars.tsx +++ b/src/components/Avatar/Avatars.tsx @@ -9,7 +9,6 @@ const AvatarListContainer = styled.div` flex-direction: row-reverse; justify-content: flex-end; & > * { - margin-right: -4px; position: relative; } `; diff --git a/src/components/Avatar/types.ts b/src/components/Avatar/types.ts index c48a0a86..4129445b 100644 --- a/src/components/Avatar/types.ts +++ b/src/components/Avatar/types.ts @@ -30,5 +30,30 @@ export type AvatarProps = Override< * Size of the avatar. */ size?: 'default' | 'big'; + + /** + * Is user disabled + */ + disabled?: boolean; + + /** + * Is user selected + */ + selected?: boolean; + } +>; + +export type AvatarContainerProps = Override< + React.HTMLAttributes, + { + /** + * Size of the avatar. + */ + size?: 'default' | 'big'; + + /** + * Is user selected + */ + selected?: boolean; } >; diff --git a/src/components/Search/Search.tsx b/src/components/Search/Search.tsx index 25a2ad23..20d3f987 100644 --- a/src/components/Search/Search.tsx +++ b/src/components/Search/Search.tsx @@ -123,3 +123,4 @@ Search.ResultCount = ResultCount; Search.Separator = Separator; export {Search}; +export type {SearchProps}; diff --git a/src/icons/ChecklistIcon.tsx b/src/icons/ChecklistIcon.tsx index 54092783..f3d1cf79 100644 --- a/src/icons/ChecklistIcon.tsx +++ b/src/icons/ChecklistIcon.tsx @@ -4,7 +4,7 @@ import {IconProps} from './IconProps'; const ChecklistIcon = ({title, size = 24, color = 'currentColor', ...props}: IconProps) => ( {title && {title}} - +