{"version":3,"file":"index-BbtpOhUI.js","sources":["../../app/javascript/components/components/base_ui/surfaces/section_block/index.tsx"],"sourcesContent":["import React, { CSSProperties, Fragment } from \"react\";\nimport { Theme } from \"../../../../styling/baseui_theme\";\nimport { Card, CardProps, CardOverrides, StyledBody } from \"baseui/card\";\nimport { mergeOverrides } from \"baseui\";\nimport { Overrides } from \"baseui/overrides\";\nimport styled from \"styled-components\";\nimport { ButtonProps } from \"../../inputs/button\";\nimport { InformationFilled } from \"@carbon/icons-react\";\nimport { CarbonIconProps } from \"@carbon/icons-react/lib/CarbonIcon\";\nimport { Tooltip } from \"../tooltip\";\n\nexport enum ORIENTATION {\n  horizontal = \"horizontal\",\n  vertical = \"vertical\",\n}\n\nexport const StyledHorizontalRule = styled.hr`\n  background-color: ${({ theme }) => theme.colors.borderOpaque};\n  height: 1px;\n  border: none;\n  width: 100%;\n  margin-top: ${({ theme }) => theme.sizing.scale800};\n  margin-bottom: ${({ theme }) => theme.sizing.scale800};\n`;\n\nconst StyledHorizontalDiv = styled.div`\n  width: 100%;\n  display: flex;\n`;\n\nconst StyledLeftDiv = styled.div`\n  flex: 1;\n  padding-right: ${({ theme }) => theme.sizing.scale800};\n  vertical-align: middle;\n`;\n\nconst StyledRightDiv = styled.div`\n  flex: 1;\n  border-left: ${({ theme }) => theme.colors.borderOpaque} solid 1px;\n  padding-left: ${({ theme }) => theme.sizing.scale800};\n`;\n\nexport type SectionBlockProps = Omit<CardProps, \"overrides\"> & {\n  title?: React.ReactNode;\n  titleTooltip?: string | undefined;\n  titleTooltipSize?: CarbonIconProps[\"size\"] | undefined;\n  bodyTwoPartOrientation?: ORIENTATION[keyof ORIENTATION];\n  partOne?: React.ReactNode;\n  partTwo?: React.ReactNode;\n  partThree?: React.ReactNode;\n  button?: ButtonProps;\n  footer?: React.ReactNode;\n  className?: string | undefined;\n  styletronOverrides?: CardOverrides;\n  ariaLabel?: string;\n  bodyOverrides?: CSSProperties;\n  showFooterHorizontalRule?: boolean;\n};\n\nconst sectionBlockStyleOverride: Overrides<CardOverrides> = {\n  Root: {\n    style: ({ $theme }: { $theme: Theme }) => ({\n      backgroundColor: $theme.colors.white,\n      borderTopLeftRadius: \"0px\",\n      borderTopRightRadius: \"0px\",\n      borderBottomRightRadius: \"0px\",\n      borderBottomLeftRadius: \"0px\",\n      paddingTop: $theme.sizing.scale600,\n      paddingBottom: $theme.sizing.scale900,\n    }),\n  },\n  Contents: {\n    style: () => ({\n      position: \"relative\",\n      marginTop: \"0px\",\n      marginBottom: \"0px\",\n      marginLeft: \"0px\",\n      marginRight: \"0px\",\n    }),\n  },\n  Title: {\n    style: ({ $theme }: { $theme: Theme }) => ({\n      fontSize: $theme.typography.HeadingXSmall.fontSize,\n      lineHeight: $theme.typography.HeadingXSmall.lineHeight,\n      fontWeight: $theme.typography.HeadingXSmall.fontWeight,\n      paddingLeft: $theme.sizing.scale800,\n      paddingRight: $theme.sizing.scale800,\n      paddingBottom: $theme.sizing.scale600,\n      borderBottom: `${$theme.colors.borderOpaque} solid 1px`,\n      verticalAlign: \"middle\",\n    }),\n  },\n  Body: {\n    style: ({ $theme }: { $theme: Theme }) => ({\n      marginTop: $theme.sizing.scale800,\n      marginLeft: $theme.sizing.scale800,\n      marginRight: $theme.sizing.scale800,\n      marginBottom: 0,\n    }),\n  },\n};\n\n//A little hacky but this is necessary to support the tabIndex prop which allows the component to be focusable\nconst StyledBaseUISectionBlock = styled(Card)<SectionBlockProps & { tabIndex?: string }>`\n  &:focus,\n  &:focus-visible {\n    outline-color: ${({ theme }) => theme.colors.accent};\n  }\n`;\n// If we need to add a fourth part to this component in the future, we should consider refactoring.\nexport const SectionBlock = ({\n  title,\n  titleTooltip,\n  titleTooltipSize = 16,\n  bodyTwoPartOrientation,\n  partOne,\n  partTwo,\n  partThree,\n  button,\n  footer,\n  className,\n  styletronOverrides,\n  bodyOverrides,\n  children,\n  ariaLabel,\n  showFooterHorizontalRule,\n  ...props\n}: SectionBlockProps) => {\n  let styleOverride = sectionBlockStyleOverride;\n\n  if (styletronOverrides) {\n    styleOverride = mergeOverrides(\n      sectionBlockStyleOverride,\n      styletronOverrides as Overrides<CardOverrides>,\n    );\n  }\n\n  if (!title) {\n    styleOverride = mergeOverrides(styleOverride, {\n      Body: {\n        style: () => ({\n          marginTop: 0,\n        }),\n      },\n    } as Overrides<CardOverrides>);\n  }\n\n  const fullTitle = titleTooltip ? (\n    <Fragment>\n      {title}{\" \"}\n      <Tooltip content={titleTooltip}>\n        <InformationFilled size={titleTooltipSize} className=\"info-tooltip\" />\n      </Tooltip>\n    </Fragment>\n  ) : (\n    title\n  );\n\n  let fullBody = children;\n\n  if (bodyTwoPartOrientation === ORIENTATION.vertical) {\n    const shouldRenderHorizontalRule = partOne && (partTwo || partThree);\n    const shouldRenderAdditionalHorizontalRule = partTwo && partThree;\n    fullBody = (\n      <Fragment>\n        {partOne}\n        {shouldRenderHorizontalRule && <StyledHorizontalRule />}\n        {partTwo}\n        {shouldRenderAdditionalHorizontalRule && <StyledHorizontalRule />}\n        {partThree}\n      </Fragment>\n    );\n  } else if (bodyTwoPartOrientation === ORIENTATION.horizontal) {\n    fullBody = (\n      <Fragment>\n        <StyledHorizontalDiv>\n          <StyledLeftDiv>{partOne}</StyledLeftDiv>\n          <StyledRightDiv>{partTwo}</StyledRightDiv>\n          <StyledLeftDiv>{partThree}</StyledLeftDiv>\n        </StyledHorizontalDiv>\n      </Fragment>\n    );\n  }\n\n  const fullFooter = (\n    <>\n      {(!!(partOne || partTwo || partThree) || showFooterHorizontalRule) && (\n        <StyledHorizontalRule />\n      )}\n      {button ? (\n        <>\n          {footer}\n          {button}\n        </>\n      ) : (\n        footer\n      )}\n    </>\n  );\n\n  const defaultBodyOverrides = { marginBottom: 0 };\n\n  const sectionBlock = (\n    <StyledBaseUISectionBlock\n      title={fullTitle}\n      {...(ariaLabel ? { \"aria-label\": ariaLabel } : {})}\n      {...(className?.length ? { className } : {})}\n      {...props}\n      overrides={styleOverride}\n      tabIndex=\"0\"\n    >\n      <StyledBody\n        style={bodyOverrides ? bodyOverrides : defaultBodyOverrides}\n        id={\"base-styled-body\"}\n      >\n        {fullBody}\n      </StyledBody>\n      {fullFooter && <>{fullFooter}</>}\n    </StyledBaseUISectionBlock>\n  );\n\n  return sectionBlock;\n};\n\nexport const ButtonsContainer = styled.div`\n  display: flex;\n  justify-content: start;\n  flex-direction: column;\n\n  // add margin to the last child\n  & > *:nth-child(n + 2):last-child {\n    margin-top: ${({ theme }) => theme.sizing.scale600};\n\n    ${({ theme }) => theme.mediaQuery.medium} {\n      margin-left: ${({ theme }) => theme.sizing.scale600};\n      margin-top: 0;\n    }\n  }\n\n  ${({ theme }) => theme.mediaQuery.medium} {\n    flex-direction: row;\n  }\n`;\n"],"names":["ORIENTATION","StyledHorizontalRule","styled","theme","StyledHorizontalDiv","StyledLeftDiv","StyledRightDiv","sectionBlockStyleOverride","$theme","StyledBaseUISectionBlock","Card","SectionBlock","title","titleTooltip","titleTooltipSize","bodyTwoPartOrientation","partOne","partTwo","partThree","button","footer","className","styletronOverrides","bodyOverrides","children","ariaLabel","showFooterHorizontalRule","props","styleOverride","mergeOverrides","fullTitle","Fragment","jsx","Tooltip","InformationFilled","fullBody","shouldRenderHorizontalRule","shouldRenderAdditionalHorizontalRule","jsxs","fullFooter","defaultBodyOverrides","StyledBody","ButtonsContainer"],"mappings":"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"}