Merge pull request #2657 from SUI-Components/feature/molecule-accordi…

…on-label-wraps-text-wrap

feat(components/molecule/accordion): add text-wrap balance property t…

components/molecule/accordion/demo/articles/ArticleLabelWrap.js

@@ -0,0 +1,92 @@
+import {useState} from 'react'
+
+import PropTypes from 'prop-types'
+
+import {
+  Article,
+  Cell,
+  Code,
+  Grid,
+  H2,
+  Label,
+  Paragraph,
+  RadioButton,
+  RadioButtonGroup
+} from '@s-ui/documentation-library'
+
+import Accordion, {
+  moleculeAccordionHeaderLabelWraps,
+  MoleculeAccordionItem as AccordionItem
+} from '../../src/index.js'
+import LoremIpsum from '../LoremIpsum.js'
+
+const ArticleLabelWrap = ({className}) => {
+  const [currentLabelWrap, setCurrentLabelWrap] = useState()
+
+  return (
+    <Article className={className}>
+      <H2>Label wrap</H2>
+      <Paragraph>
+        You can customize your header title label wrap style under the{' '}
+        <Code>headerLabelWraps</Code> prop.
+      </Paragraph>
+      <Grid cols={1} gutter={[8, 8]}>
+        <Label>headerLabelWrap</Label>
+        <Cell>
+          <RadioButtonGroup
+            value={currentLabelWrap}
+            onChange={(_, value) => setCurrentLabelWrap(value)}
+          >
+            {[
+              undefined,
+              ...Object.values(moleculeAccordionHeaderLabelWraps)
+            ].map(labelWrap => (
+              <RadioButton
+                key={`${labelWrap}`}
+                value={labelWrap}
+                checked={labelWrap === currentLabelWrap}
+                label={`${labelWrap}`}
+              />
+            ))}
+          </RadioButtonGroup>
+        </Cell>
+        <div style={{maxWidth: '350px'}}>
+          <Accordion behavior="single" headerLabelWrap={currentLabelWrap}>
+            <AccordionItem
+              value="value-1"
+              label="Accordion Item Header 1 with a long text that overflows the container"
+              content={
+                <>
+                  <p>Accordion Item Content 1</p>
+                  <p>
+                    <LoremIpsum units="words" count={200} format="plain" />
+                  </p>
+                </>
+              }
+            />
+            <AccordionItem
+              value="value-2"
+              label="Accordion Item Header 2 with a long text that overflows the container"
+              content={
+                <>
+                  <p>Accordion Item Content 2</p>
+                  <p>
+                    <LoremIpsum units="words" count={200} format="plain" />
+                  </p>
+                </>
+              }
+            />
+          </Accordion>
+        </div>
+      </Grid>
+    </Article>
+  )
+}
+
+ArticleLabelWrap.displayName = 'ArticleLabelWrap'
+
+ArticleLabelWrap.propTypes = {
+  className: PropTypes.string
+}
+
+export default ArticleLabelWrap

components/molecule/accordion/demo/index.js

@@ -6,6 +6,7 @@ import ArticleDefault from './articles/ArticleDefault.js'
 import ArticleDisabled from './articles/ArticleDisabled.js'
 import ArticleHeight from './articles/ArticleHeight.js'
 import ArticleIcon from './articles/ArticleIcon.js'
+import ArticleLabelWrap from './articles/ArticleLabelWrap.js'
 import ArticleSpacing from './articles/ArticleSpacing.js'
 import ArticleTransition from './articles/ArticleTransition.js'
 import {CLASS_SECTION} from './settings.js'
@@ -37,6 +38,8 @@ const Demo = () => {
       <ArticleDisabled className={CLASS_SECTION} />
       <br />
       <ArticleCustom className={CLASS_SECTION} />
+      <br />
+      <ArticleLabelWrap className={CLASS_SECTION} />
     </div>
   )
 }

components/molecule/accordion/src/styles/index.scss

@@ -109,6 +109,7 @@ $base-class-item-panel: '#{$base-class-item}Panel';
     text-align: inherit;
     &--wrap {
       white-space: wrap;
+      text-wrap: balance;
     }
     &--noWrap {
       text-overflow: ellipsis;