{"version":3,"file":"Alert.cjs","names":[],"sources":["../../../src/components/Alert/Alert.tsx"],"sourcesContent":["/*\nCopyright 2023 New Vector Ltd.\n\nSPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial\nPlease see LICENSE files in the repository root for full details.\n*/\n\nimport classNames from \"classnames\";\nimport React, { type PropsWithChildren, useCallback } from \"react\";\n\nimport CheckCircleIcon from \"@vector-im/compound-design-tokens/assets/web/icons/check-circle\";\nimport ErrorIcon from \"@vector-im/compound-design-tokens/assets/web/icons/error-solid\";\nimport InfoIcon from \"@vector-im/compound-design-tokens/assets/web/icons/info\";\nimport CloseIcon from \"@vector-im/compound-design-tokens/assets/web/icons/close\";\n\nimport styles from \"./Alert.module.css\";\nimport { Text } from \"../Typography/Text\";\nimport { IconButton } from \"../Button\";\n\ntype AlertProps = {\n  /**\n   * The type of alert\n   */\n  type: \"success\" | \"critical\" | \"info\";\n  /**\n   * The headline of the alert.\n   */\n  title: string;\n  /**\n   * The CSS class name.\n   */\n  className?: string;\n  /**\n   * Actions that will be displayed to the right of the content\n   * Wraps and stacks actions under content when alert's size is <=600px\n   * eg\n   * ```\n   * <Alert\n   *  title='Title'\n   *  actions={<Button onClick={doSomething}>Yes</Button>}\n   * />\n   * ```\n   */\n  actions?: React.ReactNode;\n  /**\n   * Event callback when dismissing the alert. Determines the display of the\n   * \"close\" button at the top right of the alert.\n   * @param e the event parameters\n   */\n  onClose?: (e: React.MouseEvent) => void;\n};\n\n/**\n * An alert component component that is dismissable when passing an `onClose`\n * property.\n */\nexport const Alert: React.FC<PropsWithChildren<AlertProps>> = ({\n  type,\n  title,\n  children,\n  className,\n  actions,\n  onClose,\n  ...props\n}: PropsWithChildren<AlertProps>) => {\n  const classes = classNames(styles.alert, className);\n\n  const renderIcon = useCallback(\n    (props: React.ComponentProps<typeof ErrorIcon>) => {\n      switch (type) {\n        case \"critical\":\n          return <ErrorIcon {...props} />;\n        case \"info\":\n          return <InfoIcon {...props} />;\n        case \"success\":\n          return <CheckCircleIcon {...props} />;\n      }\n    },\n    [type],\n  );\n\n  return (\n    <div {...props} className={classes} data-type={type}>\n      {renderIcon({\n        width: 24,\n        height: 24,\n        className: styles.icon,\n        \"aria-hidden\": true,\n      })}\n      <div className={styles.content}>\n        <div className={styles[\"text-content\"]}>\n          <Text size=\"md\" weight=\"semibold\">\n            {title}\n          </Text>\n          <Text size=\"sm\" weight=\"regular\">\n            {children}\n          </Text>\n        </div>\n        {actions && <div className={styles.actions}>{actions}</div>}\n      </div>\n      {/* TODO: Setup an i18n function for the aria label below */}\n      {onClose && (\n        <IconButton\n          onClick={onClose}\n          aria-label=\"Close\"\n          role=\"button\"\n          className={styles.close}\n        >\n          <CloseIcon />\n        </IconButton>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;AAwDA,IAAa,SAAkD,EAC7D,MACA,OACA,UACA,WACA,SACA,SACA,GAAG,YACgC;CACnC,MAAM,WAAA,GAAA,WAAA,SAAqB,qBAAA,QAAO,OAAO,UAAU;CAEnD,MAAM,cAAA,GAAA,MAAA,cACH,UAAkD;AACjD,UAAQ,MAAR;GACE,KAAK,WACH,QAAO,iBAAA,GAAA,kBAAA,KAAC,+DAAA,SAAD,EAAW,GAAI,OAAS,CAAA;GACjC,KAAK,OACH,QAAO,iBAAA,GAAA,kBAAA,KAAC,wDAAA,SAAD,EAAU,GAAI,OAAS,CAAA;GAChC,KAAK,UACH,QAAO,iBAAA,GAAA,kBAAA,KAAC,gEAAA,SAAD,EAAiB,GAAI,OAAS,CAAA;;IAG3C,CAAC,KAAK,CACP;AAED,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,GAAI;EAAO,WAAW;EAAS,aAAW;YAA/C;GACG,WAAW;IACV,OAAO;IACP,QAAQ;IACR,WAAW,qBAAA,QAAO;IAClB,eAAe;IAChB,CAAC;GACF,iBAAA,GAAA,kBAAA,MAAC,OAAD;IAAK,WAAW,qBAAA,QAAO;cAAvB,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;KAAK,WAAW,qBAAA,QAAO;eAAvB,CACE,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;MAAM,MAAK;MAAK,QAAO;gBACpB;MACI,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,aAAA,MAAD;MAAM,MAAK;MAAK,QAAO;MACpB;MACI,CAAA,CACH;QACL,WAAW,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,WAAW,qBAAA,QAAO;eAAU;KAAc,CAAA,CACvD;;GAEL,WACC,iBAAA,GAAA,kBAAA,KAAC,mBAAA,YAAD;IACE,SAAS;IACT,cAAW;IACX,MAAK;IACL,WAAW,qBAAA,QAAO;cAElB,iBAAA,GAAA,kBAAA,KAAC,yDAAA,SAAD,EAAa,CAAA;IACF,CAAA;GAEX"}