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;