feat(task-counter): enable default is collapse in task counter

.storybook/preview.js

@@ -28,6 +28,5 @@ export const parameters = {
     styles: { table: { disable: true } },
     getStyles: { table: { disable: true } },
   },
-  args: { isPlayground: true },
   actions: { argTypesRegex: '^on[A-Z].*' },
 }

molecules/TaskCounter/TaskCounter.js

@@ -16,55 +16,66 @@ const handleToggle = ({ onToggle, isCollapsed, setIsCollapsed }) => () => {
 }
 
 export const TaskCounter = ({
+  title,
   children,
   current,
   total,
   isToggleable,
   onToggle,
   getStyles,
+  defaultIsCollapsed,
 }) => {
-  const [isCollapsed, setIsCollapsed] = useState(true)
+  const [isCollapsed, setIsCollapsed] = useState(defaultIsCollapsed)
 
   return (
     <div className={getStyles('task-counter')}>
-      <div className={getStyles('container')}>
+      <div
+        className={getStyles('container', { 'is-toggleable': isToggleable })}
+        onClick={
+          isToggleable &&
+          handleToggle({ onToggle, isCollapsed, setIsCollapsed })
+        }
+      >
         {isToggleable && (
           <>
             <Icon
               color="inverted"
               size="sm"
               name={isCollapsed ? 'angleUp' : 'angleDown'}
               background="fulfilled"
-              isClickable
-              onClick={handleToggle({ onToggle, isCollapsed, setIsCollapsed })}
             />
-            <Spacer.Vertical size="xs" />
+            <Spacer.Vertical size="sm" />
           </>
         )}
-        <Paragraph weight="medium">{children}</Paragraph>
+        <Paragraph weight="medium">{title}</Paragraph>
         <Paragraph weight="medium" isInline>
           {total ? `${current}/${total}` : current}
         </Paragraph>
       </div>
       <Spacer.Horizontal size="xs" />
       <Divider />
+      {!isCollapsed && children}
     </div>
   )
 }
 
 TaskCounter.propTypes = {
-  children: PropTypes.node.isRequired,
+  title: PropTypes.string.isRequired,
   getStyles: PropTypes.func.isRequired,
   type: PropTypes.oneOf(options.types),
   current: PropTypes.number.isRequired,
+  children: PropTypes.node,
   onToggle: PropTypes.func,
   isToggleable: PropTypes.bool,
   total: PropTypes.number,
+  defaultIsCollapsed: PropTypes.bool,
 }
 
 TaskCounter.defaultProps = {
   getStyles: () => {},
+  onToggle: () => {},
   current: 0,
+  defaultIsCollapsed: true,
 }
 
 export default withStyles(styles)(TaskCounter)

molecules/TaskCounter/TaskCounter.module.css

@@ -9,3 +9,7 @@
   line-height: 1;
   text-transform: uppercase;
 }
+
+.is-toggleable {
+  cursor: pointer;
+}

molecules/TaskCounter/TaskCounter.stories.js

@@ -8,7 +8,7 @@ export default {
   title: 'Molecules/TaskCounter',
   component: TaskCounter,
   args: {
-    children: 'Em Sméagol body.',
+    title: 'Em Sméagol body.',
     current: 2,
   },
   argTypes: {
@@ -21,4 +21,9 @@ export const Total = Template.bind({})
 Total.args = { total: 10 }
 
 export const Toggleable = Template.bind({})
-Toggleable.args = { isToggleable: true, total: 10 }
+Toggleable.args = {
+  isToggleable: true,
+  total: 10,
+  children:
+    "Fells defeated veins this. There and Back Again. A Hobbit's Tale. Loved lucky Istari difficult lay? Dale fellow's rioting. Blanket Misty Mountain started rival wriggles flatten convinced succumbed closing? Slug town fond pipe-weed flatten recognizes Goblins! Innards pouf admirable freely nothingness sleepless exactly afternoon cruelty Bofur? Craftsmen tested fair Alfrid gets figure words winter's field offer healed squash? These galumphing Grima tread mustn't seen melt ideal picked recover employment. Nazgûl alas luckiest?",
+}

molecules/TaskCounter/__snapshots__/TaskCounter.stories.js.snap

@@ -66,11 +66,11 @@ exports[`Storyshots Molecules/TaskCounter Toggleable 1`] = `
     className="task-counter"
   >
     <div
-      className="container"
+      className="container is-toggleable"
+      onClick={[Function]}
     >
       <div
-        className="icon color-inverted size-sm background-fulfilled is-clickable"
-        onClick={[Function]}
+        className="icon color-inverted size-sm background-fulfilled"
         style={
           Object {
             "height": 25,
@@ -97,7 +97,7 @@ exports[`Storyshots Molecules/TaskCounter Toggleable 1`] = `
           Object {
             "height": "100%",
             "maxHeight": "auto",
-            "width": 5,
+            "width": 15,
           }
         }
       />