Merge pull request #439 from klarna/add-bottom-decoration-to-checklist

add bottomDecoration to Checklist

Checklist/example.jsx

@@ -23,6 +23,13 @@ export default {
         <Checklist.Footer><a href='http://google.com'>This is the footer</a></Checklist.Footer>
       </Checklist.Main>,
 
+      'Bottom decoration': <Checklist.Main>
+        <Checklist.Item>Just one click and you're done</Checklist.Item>
+        <Checklist.Item>Very little hassle</Checklist.Item>
+        <Checklist.Item>Just do it!</Checklist.Item>
+        <Checklist.BottomDecoration><div style={{ backgroundColor: 'blue', width: '52px', height: '24px' }} /></Checklist.BottomDecoration>
+      </Checklist.Main>,
+
       Chromeless: <Checklist.Main chromeless>
         <Checklist.Item>Just one click and you're done</Checklist.Item>
         <Checklist.Item>Very little hassle</Checklist.Item>

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 <div
     style={{
@@ -44,6 +46,7 @@ function ChecklistMain ({ chromeless, className, children, title, customize, sty
     </ul>
 
     {footer}
+    {bottomDecoration}
   </div>
 }
 
@@ -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 <div
+    className={classNames(classes.bottomDecoration, className)}
+    id={id}
+    style={listBottomDecorationDynamicStyles}
+    {...props}>
+    {children}
+  </div>
+}
+
+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)

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;
+    bottom: -19px;
+    display: block;
+    padding: 7px;
+    position: absolute;
+    right: 20px;
+  }
 }
+