Adds required/optional tag option to accordion (#1881)

* Adds required/optional tag option to accordion

* lint

* updates snapshot

* Update variable name

* lint agani

* Removes 100% width

src/shared-components/accordion/__snapshots__/test.tsx.snap

@@ -13,7 +13,7 @@ exports[`<Accordion /> UI snapshots renders disabled accordion 1`] = `
   border-bottom: none;
 }
 
-.emotion-1:last-of-type .css-sk7hsm-TitleWrapper:focus {
+.emotion-1:last-of-type .css-gt5ld8-TitleWrapper:focus {
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }

src/shared-components/accordion/index.tsx

@@ -16,6 +16,10 @@ export interface AccordionProps {
   disabled?: boolean;
   /** determine if the accordion is collapsed (false) or expanded (true) */
   isOpen: boolean;
+  /** show if the photo is required */
+  isRequired?: boolean;
+  /** when true, shows Required/Optional tag */
+  displayRequiredOrOptionalText?: boolean;
   /** when true, border lines between accordions and title/children nodes will disappear */
   noBorder?: boolean;
   /** invoked when title node is clicked */
@@ -45,6 +49,8 @@ export const Accordion: Accordion = ({
   children,
   disabled = false,
   isOpen,
+  isRequired = false,
+  displayRequiredOrOptionalText = false,
   noBorder = false,
   onClick,
   rightAlignArrow = false,
@@ -94,6 +100,7 @@ export const Accordion: Accordion = ({
         aria-expanded={isOpen}
       >
         <Style.Truncate>{title}</Style.Truncate>
+        {displayRequiredOrOptionalText && <Style.Tag>{isRequired ? 'Required' : 'Optional'}</Style.Tag>}
         <Style.ArrowWrapper rightAlign={!!rightAlignArrow}>
           <ChevronIcon rotate={isOpen ? 90 : 0} fill={theme.COLORS.primary} />
         </Style.ArrowWrapper>

src/shared-components/accordion/style.ts

@@ -134,12 +134,22 @@ const Container = styled.div<{
   }}
 `;
 
+const Tag = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  font-size: 0.75rem;
+  font-weight: normal;
+  padding: ${SPACER.medium} 0;
+`;
+
 export default {
   AccordionBox,
   ArrowWrapper,
   Container,
   Content,
   ExpansionWrapper,
+  Tag,
   TitleWrapper,
   Truncate,
 };

stories/accordion/index.stories.tsx

@@ -148,6 +148,43 @@ WithControls.parameters = {
   chromatic: { disable: true },
 };
 
+export const WithRequiredTag = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const onClick = () => {
+    setIsOpen(!isOpen);
+  };
+
+  return (
+    <Accordion.Container>
+      <Accordion
+        title={
+          <Accordion.Content>
+            This is Accordion with required/optional tag
+          </Accordion.Content>
+        }
+        noBorder
+        isOpen={isOpen}
+        isRequired={boolean('isRequired', true)}
+        displayRequiredOrOptionalText={boolean(
+          'displayRequiredOrOptionalText',
+          true,
+        )}
+        onClick={onClick}
+      >
+        <Accordion.Content>
+          This is styled with Accordion.Content
+        </Accordion.Content>
+      </Accordion>
+    </Accordion.Container>
+  );
+};
+
+WithControls.id = `${ACCORDION_STORY_ID_PREFIX}with-required-tag`;
+
+WithControls.parameters = {
+  chromatic: { disable: true },
+};
+
 interface AccordionStories extends Meta {
   title: string;
 }