From d819d84d536369c9a31f52404dbb0563c7a3aa25 Mon Sep 17 00:00:00 2001 From: Klas Mellbourn Date: Tue, 17 Oct 2017 11:00:04 +0200 Subject: [PATCH 1/4] add bottomDecoration to Checklist, to be able to show icons on the bottom border --- Checklist/example.jsx | 7 +++++++ Checklist/index.jsx | 40 +++++++++++++++++++++++++++++++++++++++- Checklist/styles.scss | 13 +++++++++++++ 3 files changed, 59 insertions(+), 1 deletion(-) diff --git a/Checklist/example.jsx b/Checklist/example.jsx index 4eea02bc..2b8d2edb 100644 --- a/Checklist/example.jsx +++ b/Checklist/example.jsx @@ -23,6 +23,13 @@ export default { This is the footer , + 'Bottom decoration': + Just one click and you're done + Very little hassle + Just do it! +
+ , + Chromeless: Just one click and you're done Very little hassle diff --git a/Checklist/index.jsx b/Checklist/index.jsx index 859f6f8a..1eb62cb9 100644 --- a/Checklist/index.jsx +++ b/Checklist/index.jsx @@ -14,7 +14,8 @@ const classes = { title: `${baseClass}__title`, item: `${baseClass}__item`, checkmark: `${baseClass}__checkmark`, - footer: `${baseClass}__footer` + footer: `${baseClass}__footer`, + bottomDecoration: `${baseClass}__bottom-decoration` } function ChecklistMain ({ chromeless, className, children, title, customize, style, styles, ...props }) { @@ -29,6 +30,7 @@ function ChecklistMain ({ chromeless, className, children, title, customize, sty const allChildren = React.Children.toArray(children) const items = allChildren.filter((child) => child.type === Item) const footer = allChildren.filter((child) => child.type === Footer) + const bottomDecoration = allChildren.filter((child) => child.type === BottomDecoration) return
{footer} + {bottomDecoration}
} @@ -166,3 +169,38 @@ export const Footer = compose( })), withOverrideFromContext )(ChecklistFooter) + +function ChecklistBottomDecoration({ className, children, customize, id, styles, ...props }) { + const classNames = classNamesBind.bind({ ...defaultStyles, ...styles }) + const listBottomDecorationDynamicStyles = customize + ? { color: customize.textColor } + : undefined + + return
+ {children} +
+} + +ChecklistBottomDecoration.displayName = 'Checklist.BottomDecoration' + +ChecklistBottomDecoration.propTypes = { + className: PropTypes.string, + children: childrenPropType, + id: PropTypes.string, + styles: PropTypes.object, + customize: PropTypes.object +} + +export const BottomDecoration = compose( + setDisplayName('Checklist.BottomDecoration'), + withTheme((customizations, { customize }) => ({ + customize: { + ...customize + } + })), + withOverrideFromContext +)(ChecklistBottomDecoration) diff --git a/Checklist/styles.scss b/Checklist/styles.scss index 1681ca7a..17ff4618 100644 --- a/Checklist/styles.scss +++ b/Checklist/styles.scss @@ -7,6 +7,7 @@ line-height: ($grid * 4); margin: ($grid * -.2) 0 0 0; padding: ($grid * 2) ($grid * 4) ($grid * 2.8); + position: relative; ul { list-style: none; @@ -68,4 +69,16 @@ top: $grid; width: ($grid * 4); } + + &__bottom-decoration { + background-color: map-get($colors, white); + border: 1px solid map-get($colors, light-grey);; + border-radius: 3px; + display: block; + padding: 7px; + position: absolute; + bottom: -19px; + right: 20px; + } } + From 947cda4b4794fb042014f717639f4e163c15181d Mon Sep 17 00:00:00 2001 From: Klas Mellbourn Date: Tue, 17 Oct 2017 11:19:16 +0200 Subject: [PATCH 2/4] fix linting errors --- Checklist/example.jsx | 2 +- Checklist/index.jsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/Checklist/example.jsx b/Checklist/example.jsx index 2b8d2edb..a793cea2 100644 --- a/Checklist/example.jsx +++ b/Checklist/example.jsx @@ -27,7 +27,7 @@ export default { Just one click and you're done Very little hassle Just do it! -
+
, Chromeless: diff --git a/Checklist/index.jsx b/Checklist/index.jsx index 1eb62cb9..cfe4cea2 100644 --- a/Checklist/index.jsx +++ b/Checklist/index.jsx @@ -170,7 +170,7 @@ export const Footer = compose( withOverrideFromContext )(ChecklistFooter) -function ChecklistBottomDecoration({ className, children, customize, id, styles, ...props }) { +function ChecklistBottomDecoration ({ className, children, customize, id, styles, ...props }) { const classNames = classNamesBind.bind({ ...defaultStyles, ...styles }) const listBottomDecorationDynamicStyles = customize ? { color: customize.textColor } From d751e1912a74574a12be254188d22dbc30cf8e43 Mon Sep 17 00:00:00 2001 From: Klas Mellbourn Date: Tue, 17 Oct 2017 13:23:17 +0200 Subject: [PATCH 3/4] fix linting error --- Checklist/example.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Checklist/example.jsx b/Checklist/example.jsx index a793cea2..5de1e1d3 100644 --- a/Checklist/example.jsx +++ b/Checklist/example.jsx @@ -27,7 +27,7 @@ export default { Just one click and you're done Very little hassle Just do it! -
+
, Chromeless: From 91ad7a76afb72b97357654955a84468495e58378 Mon Sep 17 00:00:00 2001 From: Klas Mellbourn Date: Tue, 17 Oct 2017 13:31:55 +0200 Subject: [PATCH 4/4] fix linting error --- Checklist/styles.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Checklist/styles.scss b/Checklist/styles.scss index 17ff4618..ae2dcd8e 100644 --- a/Checklist/styles.scss +++ b/Checklist/styles.scss @@ -74,10 +74,10 @@ background-color: map-get($colors, white); border: 1px solid map-get($colors, light-grey);; border-radius: 3px; + bottom: -19px; display: block; padding: 7px; position: absolute; - bottom: -19px; right: 20px; } }