0
0 Comments

building a component that takes a value ( 

attribute.readonly
), and only displays the first 40 characters, unless the 
<Chevron onClick
is triggered which means I then want to show 
fullDescription
has opposed to the 
shortHeading
– ideally this would render similar to how it does currently only adding perhaps doubling the height of the 
Accordion
component to allow the rest of the content to fit. I know I’m still a bit off but some pointers for my next steps/ ideas for improving what I have already would be really appreciated!

// @flow
import styled from "styled-components";
import chevron from "../Assets/chevron-icon.svg";

type Props = { attribute: AttributeType, className?: string };

const Accordion = styled.div`
  background-color: #e5e9eb;
  height: 56px;
  width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;
  display: flex;
  align-items: center;

  span {
    padding-left: 24px;
  }
`;

const Chevron = styled.img`
height: 40px;
width: 40px;
float: right;
margin-right: 12px;
`;

const ExpandableString = ({ attribute, className }: Props) => {

  const fullDescription = attribute.readonlyvalue;
  const shortHeading = fullDescription.substring(0, 40) + '...';
  const isExpanded = false;

  function toggleContent() {
    isExpanded = true;
  }

  return (
    <Accordion className={className}> 
      <span>{shortHeading}</span>
      <Chevron onClick={toggleContent} src={chevron} alt="Expand or collapse content" />
    </Accordion>
  );
};

export default ExpandableString;
Anonymous Asked question May 13, 2021