@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/components/BannerWarning.tsx

@@ -1,91 +1,91 @@
-
-import { Button, Flex, IconBox, SxProp, Text } from '@citric/core'
-import { ExclamationTriangle, TimesCircleFill } from '@citric/icons'
-import { Alert } from '@citric/ui'
-import { useState } from 'react'
-import { getCookie, setCookie } from '../utils/cookie'
-
-/**
- * A styled and dismissible alert box for showing important warnings for the user.
- *
- * This renders a yellow box with an exclamation icon. The content passed as parameter is placed on the right of the icon.
- * @param props an object containing the content (children) to show inside the alert box.
- */
-export const BannerWarning = ({ children, showCloseButton = true }:
-  { children: React.ReactNode, sx?: SxProp, showCloseButton?: boolean }) => {
-  const bannerKey = 'bannerClosed'
-
-  const [isVisible, setIsVisible] = useState(() => {
-    if (typeof window !== 'undefined') {
-      const isBannerClosed = getCookie(bannerKey) === 'true'
-      return !isBannerClosed
-    }
-    return false
-  })
-
-  const handleClose = () => {
-    setCookie(bannerKey, 'true')
-    setIsVisible(false)
-  }
-
-  if (!isVisible) {
-    return null
-  }
-
-  return (
-    <Flex sx={{ zIndex: '1', w: '12', mb: 7 }}>
-      <Alert
-        colorScheme="warning"
-        sx={{
-          position: 'relative',
-          px: 3,
-          py: 1,
-          alignItems: 'center',
-          display: 'flex',
-          justifyContent: 'space-between',
-          height: 'auto',
-          padding: `${showCloseButton ? '0.5rem' : '1rem'}`,
-        }}
-      >
-        <Flex
-          sx={{
-            alignItems: 'center',
-            flexWrap: 'nowrap',
-          }}
-        >
-          <IconBox
-            size="sm"
-            colorIcon="light.500"
-          >
-            <ExclamationTriangle />
-          </IconBox>
-          <Text
-            sx={{
-              ml: 5,
-            }}
-            appearance="body2"
-            colorScheme="warning.contrastText"
-          >
-            {children}
-          </Text>
-        </Flex>
-
-        {showCloseButton && <Button
-          appearance={'text'}
-          onClick={handleClose}
-          sx={{
-            p: 0,
-            ml: 2,
-          }}
-        >
-          <IconBox
-            size="lg"
-            colorIcon="light.500"
-          >
-            <TimesCircleFill />
-          </IconBox>
-        </Button>}
-      </Alert>
-    </Flex>
-  )
-}
+
+import { Button, Flex, IconBox, SxProp, Text } from '@citric/core'
+import { ExclamationTriangle, TimesCircleFill } from '@citric/icons'
+import { Alert } from '@citric/ui'
+import { useState } from 'react'
+import { getCookie, setCookie } from '../utils/cookie'
+
+/**
+ * A styled and dismissible alert box for showing important warnings for the user.
+ *
+ * This renders a yellow box with an exclamation icon. The content passed as parameter is placed on the right of the icon.
+ * @param props an object containing the content (children) to show inside the alert box.
+ */
+export const BannerWarning = ({ children, showCloseButton = true }:
+  { children: React.ReactNode, sx?: SxProp, showCloseButton?: boolean }) => {
+  const bannerKey = 'bannerClosed'
+
+  const [isVisible, setIsVisible] = useState(() => {
+    if (typeof window !== 'undefined') {
+      const isBannerClosed = getCookie(bannerKey) === 'true'
+      return !isBannerClosed
+    }
+    return false
+  })
+
+  const handleClose = () => {
+    setCookie(bannerKey, 'true')
+    setIsVisible(false)
+  }
+
+  if (!isVisible) {
+    return null
+  }
+
+  return (
+    <Flex sx={{ zIndex: '1', w: '12', mb: 7 }}>
+      <Alert
+        colorScheme="warning"
+        sx={{
+          position: 'relative',
+          px: 3,
+          py: 1,
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'space-between',
+          height: 'auto',
+          padding: `${showCloseButton ? '0.5rem' : '1rem'}`,
+        }}
+      >
+        <Flex
+          sx={{
+            alignItems: 'center',
+            flexWrap: 'nowrap',
+          }}
+        >
+          <IconBox
+            size="sm"
+            colorIcon="light.500"
+          >
+            <ExclamationTriangle />
+          </IconBox>
+          <Text
+            sx={{
+              ml: 5,
+            }}
+            appearance="body2"
+            colorScheme="warning.contrastText"
+          >
+            {children}
+          </Text>
+        </Flex>
+
+        {showCloseButton && <Button
+          appearance={'text'}
+          onClick={handleClose}
+          sx={{
+            p: 0,
+            ml: 2,
+          }}
+        >
+          <IconBox
+            size="lg"
+            colorIcon="light.500"
+          >
+            <TimesCircleFill />
+          </IconBox>
+        </Button>}
+      </Alert>
+    </Flex>
+  )
+}

package/src/components/Breadcrumb/index.tsx

@@ -1,76 +1,76 @@
-import { Text } from '@citric/core'
-import { Skeleton } from '@citric/ui'
-import { last } from 'lodash'
-import { useEffect, useMemo } from 'react'
-import { useAnchorTag } from '../../context/anchor'
-import { titleEffect } from '../../hooks/title'
-import { Box } from './styled'
-
-export type AnchorComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactElement
-
-interface BreadcrumbItem {
-  /**
-   * A unique id for this link of the breadcrumb. If not provided, the label will be used.
-   */
-  key?: string,
-  /**
-   * Label for this route in the breadcrumb.
-   */
-  label: string,
-  /**
-   * If this route is accessible, the link to it.
-   */
-  href?: string,
-}
-
-interface Props {
-  /**
-   * The items to show.
-   */
-  items: BreadcrumbItem[],
-  /**
-   * When true, a loading feedback (skeleton) will show instead of the list.
-   */
-  isLoading?: boolean,
-  /**
-   * If set to true, after mounted, as soon as loading is false, the page title will be prepended with `$name - `, where `$name` is the
-   * label of the last item in `items`.
-   * 
-   * When unmounted, the title will go back to the previous value.
-   * 
-   * @default false
-   */
-  shouldUpdatePageTitle?: boolean,
-  /**
-   * Key of the current page. If an item has this key, it won't be rendered as a link and will be marked as active.
-   */
-  currentPageKey?: string,
-}
-
-interface ItemProps extends Pick<Props, 'currentPageKey'> {
-  item: BreadcrumbItem,
-}
-
-const BreadcrumbItem = ({ item: { label, href, key }, currentPageKey }: ItemProps) => {
-  const text = <Text appearance="breadcrumb">{label}</Text>
-  const Link = useAnchorTag()
-  const shouldBeLink = href && currentPageKey != key
-  return <li>{shouldBeLink ? <Link href={href}>{text}</Link> : text}</li>
-}
-
-/**
- * Builds a breadcrumb navigator based on the items passed in the properties.
- * 
- * If the breadcrumb is obtained asynchronously, pass `isLoading = true` in order to show a loading feedback.
- */
-export const BreadcrumbList = ({ items, isLoading, shouldUpdatePageTitle, currentPageKey }: Props) => {  
-  const listItems = useMemo(
-    () => items.map(item => <BreadcrumbItem key={item.key || item.label} item={item} currentPageKey={currentPageKey} />),
-    [items],
-  )
-  useEffect(() => {
-    const title = last(items)?.label
-    if (shouldUpdatePageTitle && title && !isLoading) return titleEffect(title)
-  }, [items, isLoading])
-  return <Box>{isLoading ? <Skeleton height="21px" /> : <ul>{listItems}</ul>}</Box>
-}
+import { Text } from '@citric/core'
+import { Skeleton } from '@citric/ui'
+import { last } from 'lodash'
+import { useEffect, useMemo } from 'react'
+import { useAnchorTag } from '../../context/anchor'
+import { titleEffect } from '../../hooks/title'
+import { Box } from './styled'
+
+export type AnchorComponent = (props: React.AnchorHTMLAttributes<HTMLAnchorElement>) => React.ReactElement
+
+interface BreadcrumbItem {
+  /**
+   * A unique id for this link of the breadcrumb. If not provided, the label will be used.
+   */
+  key?: string,
+  /**
+   * Label for this route in the breadcrumb.
+   */
+  label: string,
+  /**
+   * If this route is accessible, the link to it.
+   */
+  href?: string,
+}
+
+interface Props {
+  /**
+   * The items to show.
+   */
+  items: BreadcrumbItem[],
+  /**
+   * When true, a loading feedback (skeleton) will show instead of the list.
+   */
+  isLoading?: boolean,
+  /**
+   * If set to true, after mounted, as soon as loading is false, the page title will be prepended with `$name - `, where `$name` is the
+   * label of the last item in `items`.
+   * 
+   * When unmounted, the title will go back to the previous value.
+   * 
+   * @default false
+   */
+  shouldUpdatePageTitle?: boolean,
+  /**
+   * Key of the current page. If an item has this key, it won't be rendered as a link and will be marked as active.
+   */
+  currentPageKey?: string,
+}
+
+interface ItemProps extends Pick<Props, 'currentPageKey'> {
+  item: BreadcrumbItem,
+}
+
+const BreadcrumbItem = ({ item: { label, href, key }, currentPageKey }: ItemProps) => {
+  const text = <Text appearance="breadcrumb">{label}</Text>
+  const Link = useAnchorTag()
+  const shouldBeLink = href && currentPageKey != key
+  return <li>{shouldBeLink ? <Link href={href}>{text}</Link> : text}</li>
+}
+
+/**
+ * Builds a breadcrumb navigator based on the items passed in the properties.
+ * 
+ * If the breadcrumb is obtained asynchronously, pass `isLoading = true` in order to show a loading feedback.
+ */
+export const BreadcrumbList = ({ items, isLoading, shouldUpdatePageTitle, currentPageKey }: Props) => {  
+  const listItems = useMemo(
+    () => items.map(item => <BreadcrumbItem key={item.key || item.label} item={item} currentPageKey={currentPageKey} />),
+    [items],
+  )
+  useEffect(() => {
+    const title = last(items)?.label
+    if (shouldUpdatePageTitle && title && !isLoading) return titleEffect(title)
+  }, [items, isLoading])
+  return <Box>{isLoading ? <Skeleton height="21px" /> : <ul>{listItems}</ul>}</Box>
+}

package/src/components/Breadcrumb/styled.ts

@@ -1,37 +1,37 @@
-import { getFontAppearance } from '@citric/core/dist/utils/theme'
-import { theme } from '@stack-spot/portal-theme'
-import { styled } from 'styled-components'
-
-// the type below should be inferred, but a bug in TS+PNPM prevents it: https://github.com/microsoft/TypeScript/issues/42873
-export const Box: React.FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> = styled.nav`
-  margin-bottom: 24px;
-  
-  ul {
-    display: flex;
-    flex-direction: row;
-  }
-
-  li {
-    display: flex;
-    flex-direction: row;
-
-    &:before {
-      content: '/';
-      font: ${({ theme }) => getFontAppearance(theme as any, 'breadcrumb') as any};
-      margin: 0 10px;
-      color: ${theme.color.light['700']};
-    }
-
-    &:first-child:before {
-      content: none;
-    }
-  }
-
-  a {
-    color: ${theme.color.light['700']};
-    &:hover {
-      text-decoration: underline;
-      color: ${theme.color.light.contrastText};
-    }
-  }
-`
+import { getFontAppearance } from '@citric/core/dist/utils/theme'
+import { theme } from '@stack-spot/portal-theme'
+import { styled } from 'styled-components'
+
+// the type below should be inferred, but a bug in TS+PNPM prevents it: https://github.com/microsoft/TypeScript/issues/42873
+export const Box: React.FC<React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement>> = styled.nav`
+  margin-bottom: 24px;
+  
+  ul {
+    display: flex;
+    flex-direction: row;
+  }
+
+  li {
+    display: flex;
+    flex-direction: row;
+
+    &:before {
+      content: '/';
+      font: ${({ theme }) => getFontAppearance(theme as any, 'breadcrumb') as any};
+      margin: 0 10px;
+      color: ${theme.color.light['700']};
+    }
+
+    &:first-child:before {
+      content: none;
+    }
+  }
+
+  a {
+    color: ${theme.color.light['700']};
+    &:hover {
+      text-decoration: underline;
+      color: ${theme.color.light.contrastText};
+    }
+  }
+`

package/src/components/ButtonLoading.tsx

@@ -1,29 +1,29 @@
-import { Button, Text } from '@citric/core'
-import { ButtonProps } from '@citric/core/dist/Button'
-import { LoadingCircular } from '@citric/ui'
-import { ReactNode } from 'react'
-
-interface Props extends ButtonProps {
-  isLoading?: boolean,
-  loadingSize?: 'sm' | 'md' | 'lg',
-  children: ReactNode,
-  onClick?: () => void,
-}
-
-export const ButtonLoading = ({ isLoading, loadingSize = 'sm', children, disabled, sx, ...props }: Props) => (
-  <Button
-    type="submit"
-    {...props}
-    disabled={isLoading || disabled}
-    sx={{ ...sx, position: 'relative' }}
-  >
-    <Text as="span" sx={{ visibility: isLoading ? 'hidden' : 'visible' }}>
-      {children}
-    </Text>
-    <LoadingCircular
-      colorScheme={props.colorScheme}
-      size={loadingSize}
-      sx={{ visibility: isLoading ? 'visible' : 'hidden', position: 'absolute' }}
-    />
-  </Button>
-)
+import { Button, Text } from '@citric/core'
+import { ButtonProps } from '@citric/core/dist/Button'
+import { LoadingCircular } from '@citric/ui'
+import { ReactNode } from 'react'
+
+interface Props extends ButtonProps {
+  isLoading?: boolean,
+  loadingSize?: 'sm' | 'md' | 'lg',
+  children: ReactNode,
+  onClick?: () => void,
+}
+
+export const ButtonLoading = ({ isLoading, loadingSize = 'sm', children, disabled, sx, ...props }: Props) => (
+  <Button
+    type="submit"
+    {...props}
+    disabled={isLoading || disabled}
+    sx={{ ...sx, position: 'relative' }}
+  >
+    <Text as="span" sx={{ visibility: isLoading ? 'hidden' : 'visible' }}>
+      {children}
+    </Text>
+    <LoadingCircular
+      colorScheme={props.colorScheme}
+      size={loadingSize}
+      sx={{ visibility: isLoading ? 'visible' : 'hidden', position: 'absolute' }}
+    />
+  </Button>
+)

package/src/components/ChatBot.tsx

@@ -1,82 +1,82 @@
-import { Button, Flex, IconBox, Styles } from '@citric/core'
-import { QuestionAnswer, Times } from '@citric/icons'
-import { CHAT_BUTTON_ID, CHAT_BUTTON_WRAPPER_ID, getServiceNowLauncher, hideChatWindow, showChatWindow } from '../hooks/service-now'
-
-const styles: Styles = {
-  content: {
-    position: 'fixed',
-    bottom: '80px',
-    right: '0',
-    visibility: 'visible',
-    '&.opened .times': {
-      display: 'block',
-    },
-    '&.opened .question': {
-      display: 'none',
-    },
-    '.times': {
-      display: 'none',
-    },
-    '.question': {
-      display: 'block',
-    },
-  },
-  button: {
-    position: 'fixed',
-    right: '15px',
-    width: '64px',
-    height: '64px',
-    borderRadius: '50%',
-    border: 'none',
-    opacity: '0',
-    '&.show': {
-      opacity: '1',
-    },
-    '&:hover, &:focus': {
-      background: 'primary.500',
-    },
-  },
-  icon: {
-    position: 'absolute',
-    top: '50%',
-    left: '50%',
-    transform: 'translate(-50%, -50%)',
-  },
-}
-
-/**
- * A button for opening or closing the service-now chat window.
- * 
- * This is a circular orange button with a chat icon if the chat window is closed or a close icon if the chat window is open.
- */
-export const ChatBot = () => {
-  const handleOpenChatBot = () => {
-    const chatIframe = getServiceNowLauncher()
-    if (chatIframe) {
-      const isVisible = chatIframe.classList.contains('show')
-      if (isVisible) {
-        hideChatWindow()
-      } else {
-        showChatWindow()
-      }
-    }
-  }
-
-  return (
-    <Flex id={CHAT_BUTTON_WRAPPER_ID} sx={styles.content}>
-      <Button
-        onClick={handleOpenChatBot}
-        id={CHAT_BUTTON_ID}
-        sx={styles.button}
-      >
-        <IconBox
-          colorIcon="light.400"
-          sx={styles.icon}
-          size="lg">
-          <Times className="times" />
-          <QuestionAnswer className="question" />
-        </IconBox>
-      </Button>
-    </Flex>
-  )
-}
+import { Button, Flex, IconBox, Styles } from '@citric/core'
+import { QuestionAnswer, Times } from '@citric/icons'
+import { CHAT_BUTTON_ID, CHAT_BUTTON_WRAPPER_ID, getServiceNowLauncher, hideChatWindow, showChatWindow } from '../hooks/service-now'
+
+const styles: Styles = {
+  content: {
+    position: 'fixed',
+    bottom: '80px',
+    right: '0',
+    visibility: 'visible',
+    '&.opened .times': {
+      display: 'block',
+    },
+    '&.opened .question': {
+      display: 'none',
+    },
+    '.times': {
+      display: 'none',
+    },
+    '.question': {
+      display: 'block',
+    },
+  },
+  button: {
+    position: 'fixed',
+    right: '15px',
+    width: '64px',
+    height: '64px',
+    borderRadius: '50%',
+    border: 'none',
+    opacity: '0',
+    '&.show': {
+      opacity: '1',
+    },
+    '&:hover, &:focus': {
+      background: 'primary.500',
+    },
+  },
+  icon: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+  },
+}
+
+/**
+ * A button for opening or closing the service-now chat window.
+ * 
+ * This is a circular orange button with a chat icon if the chat window is closed or a close icon if the chat window is open.
+ */
+export const ChatBot = () => {
+  const handleOpenChatBot = () => {
+    const chatIframe = getServiceNowLauncher()
+    if (chatIframe) {
+      const isVisible = chatIframe.classList.contains('show')
+      if (isVisible) {
+        hideChatWindow()
+      } else {
+        showChatWindow()
+      }
+    }
+  }
+
+  return (
+    <Flex id={CHAT_BUTTON_WRAPPER_ID} sx={styles.content}>
+      <Button
+        onClick={handleOpenChatBot}
+        id={CHAT_BUTTON_ID}
+        sx={styles.button}
+      >
+        <IconBox
+          colorIcon="light.400"
+          sx={styles.icon}
+          size="lg">
+          <Times className="times" />
+          <QuestionAnswer className="question" />
+        </IconBox>
+      </Button>
+    </Flex>
+  )
+}

package/src/components/ContentValidateFilter.tsx

@@ -1,15 +1,15 @@
-import { PlaceholderResourceEmptySearch } from './Placeholder'
-
-export const ContentValidateFilter = ({
-  searchText,
-  listLength,
-  children,
-}: {
-  searchText?: string,
-  listLength: number,
-  children: React.ReactNode,
-}) => {
-  if (!listLength && searchText) return <PlaceholderResourceEmptySearch />
-  return <>{children}</>
-}
-
+import { PlaceholderResourceEmptySearch } from './Placeholder'
+
+export const ContentValidateFilter = ({
+  searchText,
+  listLength,
+  children,
+}: {
+  searchText?: string,
+  listLength: number,
+  children: React.ReactNode,
+}) => {
+  if (!listLength && searchText) return <PlaceholderResourceEmptySearch />
+  return <>{children}</>
+}
+