Merge pull request #2140 from OpenNeuroOrg/toggleCounter

update to some scss vars and created new toggle counter button

Author: thinknoack

.pnp.js

@@ -2,4 +2,5 @@
   @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600');
   </style>
 
-<script src="https://kit.fontawesome.com/dbe89e3d01.js" crossorigin="anonymous"></script>
+<script src="https://kit.fontawesome.com/dbe89e3d01.js" crossorigin="anonymous"></script>
+

packages/openneuro-components/.storybook/preview-head.html

@@ -5,7 +5,7 @@ import { Icon } from '../icon/Icon'
 import './accordion.scss'
 
 export interface AccordionTabProps {
-  children: object
+  children: React.ReactNode
   tabId: string
   className: string
   label: string

packages/openneuro-components/src/accordion/AccordionTab.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import './accordion.scss'
 
 export interface AccordionWrapProps {
-  children: object
+  children: React.ReactNode
   className: string
 }
 

packages/openneuro-components/src/accordion/AccordionWrap.tsx

@@ -15,6 +15,7 @@ export interface ButtonProps {
   imgSrc?: string
   iconSize?: string
   className?: string
+  children: React.ReactNode
 }
 
 /**
@@ -32,6 +33,8 @@ export const Button: React.FC<ButtonProps> = ({
   imgSrc,
   iconSize,
   className,
+  children,
+  disabled,
   ...props
 }) => {
   const mode =
@@ -53,6 +56,7 @@ export const Button: React.FC<ButtonProps> = ({
 
   return (
     <button
+      disabled={disabled}
       role="button"
       type="button"
       className={[
@@ -67,6 +71,7 @@ export const Button: React.FC<ButtonProps> = ({
       {imgIcon}
       {fontIcon}
       {label}
+      {children}
     </button>
   )
 }

packages/openneuro-components/src/button/Button.tsx

@@ -1,4 +1,4 @@
-@import '../scss/global';
+@import '../scss/variables';
 
 .on-button {
   font-family: $font-sans;

packages/openneuro-components/src/button/button.scss

@@ -0,0 +1,59 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+import { CountToggle, CountToggleProps } from './CountToggle'
+
+export default {
+  title: 'Components/CountToggle',
+  component: CountToggle,
+} as Meta
+
+const CountToggleTemplate: Story<CountToggleProps> = ({
+  label,
+  icon,
+  disabled,
+  tooltip,
+}) => {
+  const [displayOptions, setDisplayOptions] = React.useState(false)
+  const [count, setCount] = React.useState(1)
+
+  const onClick = () => {
+    setCount(count === 1 ? 2 : 1)
+  }
+
+  return (
+    <CountToggle
+      label={label}
+      icon={icon}
+      disabled={disabled}
+      onClick={onClick}
+      tooltip={tooltip}
+      displayOptions={displayOptions}
+      setDisplayOptions={setDisplayOptions}
+      count={count}
+    />
+  )
+}
+
+export const Example = CountToggleTemplate.bind({})
+Example.args = {
+  icon: 'fa-thumbtack',
+  disabled: false,
+  tooltip: 'hello Tip',
+  label: 'Follow',
+}
+
+Example.parameters = {
+  layout: 'centered',
+}
+
+export const disabled = CountToggleTemplate.bind({})
+disabled.args = {
+  icon: 'fa-thumbtack',
+  disabled: true,
+  tooltip: 'hello Tip',
+  label: 'Follow',
+}
+
+disabled.parameters = {
+  layout: 'centered',
+}

packages/openneuro-components/src/count-toggle/CountToggle.stories.tsx

@@ -0,0 +1,76 @@
+import React from 'react'
+import './count-toggle.scss'
+import { Tooltip } from '../tooltip/Tooltip'
+import { Button } from '../button/Button'
+import { Modal } from '../modal/Modal'
+import { UserModalInner } from '../modal/UserModalInner'
+
+export interface CountToggleProps {
+  label?: string
+  icon?: string
+  disabled?: boolean
+  tooltip?: string
+  onClick?: () => void
+  lock?: boolean
+  displayOptions: boolean
+  setDisplayOptions: (boolean) => void
+  count: number
+}
+export const CountToggle = ({
+  label,
+  icon,
+  disabled,
+  tooltip,
+  onClick,
+  displayOptions,
+  setDisplayOptions,
+  count,
+}: CountToggleProps) => {
+  const toggleClick = () => {
+    onClick()
+    setDisplayOptions(!displayOptions)
+  }
+  const [isOpen, setIsOpen] = React.useState(false)
+  const toggleLogin = () => setIsOpen(!isOpen)
+  const toggleButton = (
+    <span className="toggle-counter">
+      <Button
+        className={displayOptions ? 'toggle-btn active' : 'toggle-btn'}
+        iconSize="12px"
+        icon={'fa ' + icon}
+        onClick={() => toggleClick()}>
+        {label} <span>{count}</span>
+      </Button>
+    </span>
+  )
+  const disabledToggleButton = (
+    <span className="toggle-counter disabled">
+      <Button
+        className={displayOptions ? 'toggle-btn active' : 'toggle-btn'}
+        iconSize="12px"
+        icon={'fa ' + icon}
+        onClick={() => toggleLogin()}>
+        {label} <span>{count}</span>
+      </Button>
+    </span>
+  )
+
+  return (
+    <>
+      <div className="toggle-counter-wrap">
+        {tooltip ? (
+          <Tooltip flow="up" tooltip={tooltip}>
+            {disabled ? disabledToggleButton : toggleButton}
+          </Tooltip>
+        ) : disabled ? (
+          disabledToggleButton
+        ) : (
+          toggleButton
+        )}
+      </div>
+      <Modal isOpen={isOpen} toggle={toggleLogin} closeText="Close">
+        <UserModalInner />
+      </Modal>
+    </>
+  )
+}

packages/openneuro-components/src/count-toggle/CountToggle.tsx

@@ -0,0 +1,30 @@
+@import '../scss/variables';
+
+.toggle-btn {
+  border: 1px solid #aaa;
+  padding: 7px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  &:hover {
+    text-decoration: none;
+    background-color: #eee;
+  }
+  i {
+    margin: 2px 13px 0 5px;
+    color: #999;
+  }
+  span {
+    border-left: 1px solid #aaa;
+    margin: -7px 0 -7px 12px;
+    display: block;
+    position: relative;
+    padding: 7px 3px 7px 10px;
+  }
+
+  &.active {
+    i {
+      color: $current-theme-primary;
+    }
+  }
+}

packages/openneuro-components/src/count-toggle/count-toggle.scss

@@ -3,7 +3,7 @@ import './dropdown.scss'
 
 export interface DropdownProps {
   label: Record<string, any>
-  children
+  children: React.ReactNode
   className?: string
 }