feat(components/molecule/collapsible): Custom toggle button and butto…

…n alignment
SUI-Components · Nov 16, 2022 · ea080b0 · ea080b0
1 parent f924d16
commit ea080b0
Show file tree

Hide file tree

Showing 8 changed files with 136 additions and 15 deletions.
diff --git a/components/molecule/collapsible/demo/ArticleAlignment.js b/components/molecule/collapsible/demo/ArticleAlignment.js
@@ -10,13 +10,14 @@ const ArticleAlignment = ({className, icon, showText, hideText}) => {
     <Article className={className}>
       <H2>Collapsible Alignment</H2>
       <Paragraph>
-        These are the options for the prop <Code> alignContainer</Code>
+        These are the options for the prop <Code> alignContainer</Code> and{' '}
+        <Code> alignButton</Code> (default left)
       </Paragraph>
       <br />
       <br />
       <DemoWrapper>
         <div style={{display: 'flex', flexDirection: 'column', maxWidth: 400}}>
-          <span>Collapsible Left</span>
+          <span>Collapsible Left and Button Left</span>
           <div
             style={{
               backgroundColor: '#fff',
@@ -35,13 +36,14 @@ const ArticleAlignment = ({className, icon, showText, hideText}) => {
           </div>
         </div>
         <div style={{display: 'flex', flexDirection: 'column', maxWidth: 400}}>
-          <span>Collapsible Center</span>
+          <span>Collapsible Center and Button Center</span>
           <div style={{backgroundColor: '#fff', fontSize: 14, padding: 16}}>
             <MoleculeCollapsible
               icon={icon}
               showText={showText}
               hideText={hideText}
               alignContainer="center"
+              alignButton="center"
             >
               <Text />
             </MoleculeCollapsible>
@@ -55,6 +57,7 @@ const ArticleAlignment = ({className, icon, showText, hideText}) => {
               showText={showText}
               hideText={hideText}
               alignContainer="right"
+              alignButton="right"
             >
               <Text />
             </MoleculeCollapsible>

diff --git a/components/molecule/collapsible/demo/ArticleCustomToggleButton.js b/components/molecule/collapsible/demo/ArticleCustomToggleButton.js
@@ -0,0 +1,73 @@
+import PropTypes from 'prop-types'
+
+import {Article, Code, H2, Paragraph} from '@s-ui/documentation-library'
+import Button, {
+  atomButtonDesigns,
+  atomButtonShapes,
+  atomButtonSizes
+} from '@s-ui/react-atom-button'
+
+import MoleculeCollapsible from '../src/index.js'
+import {DemoWrapper, Text} from './config/index.js'
+
+const ArticleCustomToggleButton = ({className, icon, showText, hideText}) => {
+  const ToggleButton = props => {
+    return (
+      <div style={{paddingTop: '12px'}}>
+        <Button
+          {...props}
+          shape={atomButtonShapes.CIRCULAR}
+          design={atomButtonDesigns.OUTLINE}
+          size={atomButtonSizes.SMALL}
+          role="button"
+        ></Button>
+      </div>
+    )
+  }
+
+  return (
+    <Article className={className}>
+      <H2>Collapsible Gradient</H2>
+      <Paragraph>
+        The prop <Code>toggleButton</Code> accepts a custom component to toggle
+        collapse
+      </Paragraph>
+      <br />
+      <br />
+      <DemoWrapper>
+        <div style={{display: 'flex', flexDirection: 'column'}}>
+          <span>Custom toggle button</span>
+          <div
+            style={{
+              backgroundColor: '#fff',
+              fontSize: 14,
+              padding: 16,
+              textAlign: 'left',
+              maxWidth: 400
+            }}
+          >
+            <MoleculeCollapsible
+              icon={icon}
+              showText={showText}
+              hideText={hideText}
+              toggleButton={ToggleButton}
+              withGradient={false}
+              alignButton="center"
+            >
+              <Text />
+            </MoleculeCollapsible>
+          </div>
+        </div>
+      </DemoWrapper>
+    </Article>
+  )
+}
+
+ArticleCustomToggleButton.propTypes = {
+  className: PropTypes.string,
+  icon: PropTypes.node,
+  showText: PropTypes.string,
+  hideText: PropTypes.string
+}
+
+export default ArticleCustomToggleButton
diff --git a/components/molecule/collapsible/demo/ArticleGradient.js b/components/molecule/collapsible/demo/ArticleGradient.js
@@ -37,7 +37,7 @@ const ArticleGradient = ({className, icon, showText, hideText}) => {
         </div>
 
         <div style={{display: 'flex', flexDirection: 'column'}}>
-          <span>Collapsible whithout Gradient</span>
+          <span>Collapsible without Gradient</span>
           <div
             style={{
               backgroundColor: '#fff',

diff --git a/components/molecule/collapsible/demo/index.js b/components/molecule/collapsible/demo/index.js
@@ -3,6 +3,7 @@ import {Paragraph} from '@s-ui/documentation-library'
 import {GetIcon} from './config/index.js'
 import ArticleAlignment from './ArticleAlignment.js'
 import ArticleCustomHeight from './ArticleCustomHeight.js'
+import ArticleCustomToggleButton from './ArticleCustomToggleButton.js'
 import ArticleGradient from './ArticleGradient.js'
 import ArticleNoCollapse from './ArticleNoCollapse.js'
 import ArticleTransition from './ArticleTransition.js'
@@ -28,6 +29,13 @@ const Demo = () => {
         <ArticleGradient icon={icon} showText={showText} hideText={hideText} />
         <br />
         <br />
+        <ArticleCustomToggleButton
+          icon={icon}
+          showText={showText}
+          hideText={hideText}
+        />
+        <br />
+        <br />
         <ArticleTransition
           icon={icon}
           showText={showText}

diff --git a/components/molecule/collapsible/demo/index.scss b/components/molecule/collapsible/demo/index.scss
@@ -0,0 +1,2 @@
+@import '~@s-ui/react-atom-button/lib/index';
+@import '../src/index.scss';
diff --git a/components/molecule/collapsible/src/index.js b/components/molecule/collapsible/src/index.js
@@ -5,6 +5,7 @@ import PropTypes from 'prop-types'
 
 import {
   BASE_CLASS,
+  BUTTON_ALIGN,
   BUTTON_CLASS,
   BUTTON_CONTENT_CLASS,
   COLLAPSED_CLASS,
@@ -18,12 +19,14 @@ import {
 const MoleculeCollapsible = ({
   onClose = () => {},
   onOpen = () => {},
+  alignButton,
   alignContainer,
   children,
   height = MIN_HEIGHT,
+  hideText,
   icon,
   showText,
-  hideText,
+  toggleButton: ToggleButton,
   withGradient = true,
   withOverflow = false,
   withTransition = true
@@ -56,6 +59,7 @@ const MoleculeCollapsible = ({
   })
   const containerClassName = cx(`${CONTAINER_BUTTON_CLASS}`, {
     [`${CONTAINER_BUTTON_CLASS}--withGradient`]: withGradient,
+    [`${CONTAINER_BUTTON_CLASS}--alignButton-${alignButton}`]: alignButton,
     [COLLAPSED_CLASS]: collapsed
   })
   const contentClassName = cx(`${CONTENT_CLASS}`, {
@@ -75,16 +79,25 @@ const MoleculeCollapsible = ({
       </div>
       {showButton && (
         <div className={containerClassName}>
-          <button
-            type="button"
-            className={BUTTON_CLASS}
-            onClick={toggleCollapse}
-          >
-            <span className={BUTTON_CONTENT_CLASS} tabIndex="-1">
+          {ToggleButton ? (
+            <ToggleButton
+              onClick={toggleCollapse}
+              rightIcon={<span className={iconClassName}>{icon}</span>}
+            >
               {collapsed ? showText : hideText}
-              <span className={iconClassName}>{icon}</span>
-            </span>
-          </button>
+            </ToggleButton>
+          ) : (
+            <button
+              type="button"
+              className={BUTTON_CLASS}
+              onClick={toggleCollapse}
+            >
+              <span className={BUTTON_CONTENT_CLASS} tabIndex="-1">
+                {collapsed ? showText : hideText}
+                <span className={iconClassName}>{icon}</span>
+              </span>
+            </button>
+          )}
         </div>
       )}
     </div>
@@ -94,6 +107,10 @@ const MoleculeCollapsible = ({
 MoleculeCollapsible.displayName = 'MoleculeCollapsible'
 
 MoleculeCollapsible.propTypes = {
+  /**
+   * Container button center || left || right
+   */
+  alignButton: PropTypes.oneOf(Object.values(BUTTON_ALIGN)),
   /**
    * Container align center || right
    */
@@ -106,6 +123,10 @@ MoleculeCollapsible.propTypes = {
    * Define the min height visible
    */
   height: PropTypes.number,
+  /**
+   * Custom toggle button
+   */
+  toggleButton: PropTypes.node,
   /**
    * Icon to be added on the right of the content
    */

diff --git a/components/molecule/collapsible/src/settings.js b/components/molecule/collapsible/src/settings.js
@@ -12,3 +12,8 @@ export const CONTENT_ALIGN = {
   CENTER: 'center',
   RIGHT: 'right'
 }
+
+export const BUTTON_ALIGN = {
+  CENTER: 'center',
+  RIGHT: 'right'
+}
diff --git a/components/molecule/collapsible/src/styles/index.scss b/components/molecule/collapsible/src/styles/index.scss
@@ -58,9 +58,18 @@ $base-class: '.sui-MoleculeCollapsible';
   &-container {
     background-color: $bgc-collapsible-container;
     position: relative;
-    text-align: $ta-collapsible-container;
     width: 100%;
 
+    &--alignButton {
+      &-center {
+        text-align: center;
+      }
+
+      &-right {
+        text-align: right;
+      }
+    }
+
     &#{&}--withGradient.is-collapsed {
       &::before {
         background: $bg-collapsible-container-gradient;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		@import '~@s-ui/react-atom-button/lib/index';
		@import '../src/index.scss';