feat(CC-batch-1): added batch 1

[mattnolting]

Relates to: #11624

Included components:

• About Modal - requires followup discussion
• Accordion
• Action Llist
• Background Image
• Clipboard Copy

Component tracker

Figma preview

Resources:

• Getting started

[patternfly-build]

Preview: https://patternfly-react-pr-11827.surge.sh

A11y report: https://patternfly-react-pr-11827-a11y.surge.sh

[nicolethoen]

Would each component benefit from an added comment linking directly to the component docs on patternfly.org? I think that'd be helpful.

[nicolethoen]

The AccordionToggle should have an id="<your-id-here>" or something like that. id` is a required prop.

[nicolethoen]

I'd also add a comment here recommending they implement an onClick event to toggle the expanded state of this Accordion.

[kmcfaul]

+1

[nicolethoen]

is there a way in figma to make an expandable clipboardCopy variant? If so, then isExpanded can be passed, but also the variant needs to be 'expansion'

[mattnolting]

We can create an expansion var that references figma.enum('State', { Expanded... }

false: undefined should be included to return "undefined" if state === !expanded, otherwise Figma will complain

      expansion: figma.enum('State', { 
        Expanded: 'expansion',
        false: undefined
      }),

[kmcfaul]

Not sure if it's worth adding the isIconList prop here or if there is no distinction in figma. In React this boolean prop adds a class for icon-only lists that removes some additional padding.

[mattnolting]

We can look for Action icons only, and set isIconList based on that.

[nicolethoen]

can this be updated to be

example: (props) => {
  const [isModalOpen, setIsModalOpen] = useState(false);

  const toggleModal = (_event: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => {
    setIsModalOpen(!isModalOpen);
  };

  return (
    <>
      {/* The 'toggleModal' function can be placed on any button in a UI to open and close the AboutModal. */}
      <Button variant="primary" onClick={toggleModal}>
        Show about modal
      </Button>
      <AboutModal
        isOpen={isModalOpen}
        onClose={(e: React.MouseEvent<Element, MouseEvent> | KeyboardEvent | MouseEvent) => toggleModal(e)}
        productName={props.productName}
        trademark={props.trademark}
        brandImageSrc={props.brandImageSrc}
        brandImageAlt={props.brandImageAlt}
        backgroundImageSrc={props.backgroundImageSrc}
      >
        {props.children}
      </AboutModal>
    </>
  );
};

so that the about modal can be toggled open and closed?

[mattnolting]

@nicolethoen I tested this, it throws validation errors and can't be used.