@stack-spot/portal-layout 1.0.2 → 1.1.0

package/src/components/PortalSwitcher.tsx

@@ -1,161 +1,161 @@
-import { Button, Flex, IconBox, Text } from '@citric/core'
-import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
-import { SelectionList } from '@stack-spot/portal-components/SelectionList'
-import { AI, EDP, HUB, Logo } from '@stack-spot/portal-components/svg'
-import { theme } from '@stack-spot/portal-theme'
-import { useTranslate } from '@stack-spot/portal-translate'
-import { ReactNode, useState } from 'react'
-import styled from 'styled-components'
-import { announce } from '../utils'
-import { PortalAcronym } from './types'
-
-const Logos: Record<PortalAcronym, ReactNode> = {
-  'AI': <AI />,
-  'EDP': <EDP />,
-  'HUB': <HUB />,
-}
-
-export interface Portal {
-  /**
-   * A Stackspot Portal.
-   */
-  acronym: PortalAcronym,
-  /**
-   * The URL to the Stackspot Portal.
-   */
-  url: string,
-}
-
-export interface PortalSwitcherProps {
-  /**
-   * The Stackspot portals to show in the selector.
-   */
-  portals?: Portal[],
-}
-
-const PortalSwitcherBox = styled(Flex)`
-  flex-direction: column;
-  align-items: start;
-  z-index: 10;
-
-  .current-portal {
-    padding: 8px;
-    border-radius: 4px;
-    cursor: pointer;
-    &:hover {
-      background-color: ${theme.color.light[500]};
-    }
-  }
-
-  .selection-list {
-    max-width: 360px;
-    box-shadow: 4px 4px 48px 0px #000000;
-    position: absolute; 
-    top: 50px;
-
-    .selection-list-content {
-      padding: 8px;
-      border-width: 1px;
-      border-style: solid;
-      border-color: ${theme.color.light['500']};
-
-      &> ul {
-        display: flex;
-        flex-direction: column;
-        gap: 8px;
-      }
-
-      .action {
-        padding: 16px;
-        background-color: ${theme.color.light['400']};
-        border-width: 1px;
-        border-style: solid;
-        border-color: ${theme.color.light['500']};
-        border-radius: 4px;
-
-        &:hover, &:hover a {
-          background-color: ${theme.color.light['500']};
-        }
-
-        a {
-          height: auto;
-          transition: unset;
-          align-items: flex-start;
-        }
-      }
-    }
-  }
- 
-`
-const PORTAL_SWITCHER_ID = 'PortalSwitcher'
-
-/**
- * A selector with different Stackspot portals.
- * Each item contains a logo with a link to the portal.
- * @param props the component Props {@link PortalSwitcherProps}.
- */
-export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
-  const [visible, setVisible] = useState<boolean>(false)
-  const t = useTranslate(translations)
-  const currentPortal = portals?.find(portal => location.href.startsWith(portal.url))
-
-  return <PortalSwitcherBox>
-    {currentPortal ?
-      <Button
-        className="current-portal"
-        appearance="text"
-        colorScheme="light"
-        aria-controls={PORTAL_SWITCHER_ID}
-        aria-expanded={visible}
-        aria-label={`${t.portalSwitcher}: ${currentPortal?.acronym} ${t.selected}`}
-        onClick={() => {
-          setVisible(true)
-          announce(`${t.portalSwitcher} ${t.selected}`)
-        }}>
-        <Flex alignItems="center" className="portal-switcher">
-          {Logos[currentPortal.acronym]}
-          <IconBox size="xs" ml={3}>
-            <Select />
-          </IconBox>
-        </Flex>
-      </Button> :
-      <Logo />}
-    <SelectionList
-      id={PORTAL_SWITCHER_ID}
-      items={portals?.map(portal => ({
-        label: {
-          id: portal.acronym,
-          element: <Flex flexDirection="column">
-            {Logos[portal.acronym]}
-            <Text appearance="microtext1" mt={3} colorScheme="light.700">{t[portal.acronym]}</Text>
-          </Flex>,
-        },
-        target: '_self',
-        href: portal.url,
-        active: currentPortal?.acronym == portal.acronym,
-        iconActive: <CheckCircleFill aria-label={t.selected} />,
-        iconRight: portal.acronym !== currentPortal?.acronym ? <ArrowRight /> : undefined,
-      }))}
-      visible={visible}
-      maxHeight="21rem"
-      onHide={() => setVisible(false)} />
-  </PortalSwitcherBox >
-}
-
-
-const translations = {
-  en: {
-    EDP: 'Efficient and secure solutions from code to production deployment.',
-    AI: 'Speed up coding with efficient suggestions and high-quality results.',
-    HUB: 'Discover AI Stacks, knowledge sources, and quick commands, all in one streamlined hub.',
-    portalSwitcher: 'Portal switcher',
-    selected: 'selected',
-  },
-  pt: {
-    EDP: 'Soluções eficientes e seguras do código até a implantação em produção.',
-    AI: 'Acelere o desenvolvimento com sugestões eficientes e resultados de alta qualidade.',
-    HUB: 'Descubra AI Stacks, knowledge sources e quick commands, tudo em um hub simplificado.',
-    portalSwitcher: 'Seletor de portais',
-    selected: 'selecionado',
-  },
-}
+import { Button, Flex, IconBox, Text } from '@citric/core'
+import { ArrowRight, CheckCircleFill, Select } from '@citric/icons'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { AI, EDP, HUB, Logo } from '@stack-spot/portal-components/svg'
+import { theme } from '@stack-spot/portal-theme'
+import { useTranslate } from '@stack-spot/portal-translate'
+import { ReactNode, useState } from 'react'
+import styled from 'styled-components'
+import { announce } from '../utils'
+import { PortalAcronym } from './types'
+
+const Logos: Record<PortalAcronym, ReactNode> = {
+  'AI': <AI />,
+  'EDP': <EDP />,
+  'HUB': <HUB />,
+}
+
+export interface Portal {
+  /**
+   * A Stackspot Portal.
+   */
+  acronym: PortalAcronym,
+  /**
+   * The URL to the Stackspot Portal.
+   */
+  url: string,
+}
+
+export interface PortalSwitcherProps {
+  /**
+   * The Stackspot portals to show in the selector.
+   */
+  portals?: Portal[],
+}
+
+const PortalSwitcherBox = styled(Flex)`
+  flex-direction: column;
+  align-items: start;
+  z-index: 10;
+
+  .current-portal {
+    padding: 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    &:hover {
+      background-color: ${theme.color.light[500]};
+    }
+  }
+
+  .selection-list {
+    max-width: 360px;
+    box-shadow: 4px 4px 48px 0px #000000;
+    position: absolute; 
+    top: 50px;
+
+    .selection-list-content {
+      padding: 8px;
+      border-width: 1px;
+      border-style: solid;
+      border-color: ${theme.color.light['500']};
+
+      &> ul {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .action {
+        padding: 16px;
+        background-color: ${theme.color.light['400']};
+        border-width: 1px;
+        border-style: solid;
+        border-color: ${theme.color.light['500']};
+        border-radius: 4px;
+
+        &:hover, &:hover a {
+          background-color: ${theme.color.light['500']};
+        }
+
+        a {
+          height: auto;
+          transition: unset;
+          align-items: flex-start;
+        }
+      }
+    }
+  }
+ 
+`
+const PORTAL_SWITCHER_ID = 'PortalSwitcher'
+
+/**
+ * A selector with different Stackspot portals.
+ * Each item contains a logo with a link to the portal.
+ * @param props the component Props {@link PortalSwitcherProps}.
+ */
+export const PortalSwitcher = ({ portals = [] }: PortalSwitcherProps) => {
+  const [visible, setVisible] = useState<boolean>(false)
+  const t = useTranslate(translations)
+  const currentPortal = portals?.find(portal => location.href.startsWith(portal.url))
+
+  return <PortalSwitcherBox>
+    {currentPortal ?
+      <Button
+        className="current-portal"
+        appearance="text"
+        colorScheme="light"
+        aria-controls={PORTAL_SWITCHER_ID}
+        aria-expanded={visible}
+        aria-label={`${t.portalSwitcher}: ${currentPortal?.acronym} ${t.selected}`}
+        onClick={() => {
+          setVisible(true)
+          announce(`${t.portalSwitcher} ${t.selected}`)
+        }}>
+        <Flex alignItems="center" className="portal-switcher">
+          {Logos[currentPortal.acronym]}
+          <IconBox size="xs" ml={3}>
+            <Select />
+          </IconBox>
+        </Flex>
+      </Button> :
+      <Logo />}
+    <SelectionList
+      id={PORTAL_SWITCHER_ID}
+      items={portals?.map(portal => ({
+        label: {
+          id: portal.acronym,
+          element: <Flex flexDirection="column">
+            {Logos[portal.acronym]}
+            <Text appearance="microtext1" mt={3} colorScheme="light.700">{t[portal.acronym]}</Text>
+          </Flex>,
+        },
+        target: '_self',
+        href: portal.url,
+        active: currentPortal?.acronym == portal.acronym,
+        iconActive: <CheckCircleFill aria-label={t.selected} />,
+        iconRight: portal.acronym !== currentPortal?.acronym ? <ArrowRight /> : undefined,
+      }))}
+      visible={visible}
+      maxHeight="21rem"
+      onHide={() => setVisible(false)} />
+  </PortalSwitcherBox >
+}
+
+
+const translations = {
+  en: {
+    EDP: 'Efficient and secure solutions from code to production deployment.',
+    AI: 'Speed up coding with efficient suggestions and high-quality results.',
+    HUB: 'Discover AI Stacks, knowledge sources, and quick commands, all in one streamlined hub.',
+    portalSwitcher: 'Portal switcher',
+    selected: 'selected',
+  },
+  pt: {
+    EDP: 'Soluções eficientes e seguras do código até a implantação em produção.',
+    AI: 'Acelere o desenvolvimento com sugestões eficientes e resultados de alta qualidade.',
+    HUB: 'Descubra AI Stacks, knowledge sources e quick commands, tudo em um hub simplificado.',
+    portalSwitcher: 'Seletor de portais',
+    selected: 'selecionado',
+  },
+}

package/src/components/Toaster.tsx

@@ -1,95 +1,95 @@
-import { Flex, Text } from '@citric/core'
-import { TimesMini } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { useAnchorTag } from '@stack-spot/portal-components/anchor'
-import { useMemo } from 'react'
-import type { CloseButton as DefaultCloseButton } from 'react-toastify'
-import { ToastContainer, toast } from 'react-toastify'
-import 'react-toastify/dist/ReactToastify.css'
-import { useDictionary } from '../dictionary'
-
-type CloseButtonProps = Parameters<typeof DefaultCloseButton>[0]
-
-export const TOASTER_CLOSE_BTN_CLASS = 'btn-close'
-
-const CloseButton = ({ closeToast }: CloseButtonProps) => {
-  const t = useDictionary()
-  return (
-    <IconButton className={TOASTER_CLOSE_BTN_CLASS} onClick={closeToast} title={t.dismiss}>
-      <TimesMini />
-    </IconButton>
-  )
-}
-
-/**
- * Uses react-toastify to render a Toaster based on the Citric DS.
- */
-export const Toaster = () => <ToastContainer closeButton={CloseButton} />
-
-export interface ToasterAction {
-  /**
-   * The button's label.
-   */
-  label: string,
-  /**
-   * A function to run once the button is clicked.
-   */
-  onClick?: (event: React.MouseEvent) => void,
-  /**
-   * If this is set, instead of a button, an anchor is rendered with this href.
-   */
-  href?: string,
-  /**
-   * Whether or not to close the toaster once the button is clicked.
-   * @default true
-   */
-  closeOnClick?: boolean,
-}
-
-interface ToasterContentProps {
-  id: number | string,
-  actions?: ToasterAction[],
-  onClick?: (event: React.MouseEvent) => void,
-  title?: string,
-  message: React.ReactNode,
-}
-
-const actionStyle: React.CSSProperties = {
-  background: 'transparent',
-  border: 'none',
-  padding: 0,
-  color: 'inherit',
-  font: 'inherit',
-  fontWeight: 500,
-  cursor: 'pointer',
-}
-
-/**
- * Renders a toaster with the default layout for toasters.
- */
-export const ToasterContent = ({ id, message, actions, onClick, title }: ToasterContentProps) => {
-  const Link = useAnchorTag()
-  const buttons = useMemo(() => actions?.map(
-    ({ label, href, onClick, closeOnClick = true }) => (
-      <Text
-        key={label}
-        as={href ? Link : 'button'}
-        href={href}
-        style={actionStyle}
-        onClick={(event: React.MouseEvent) => {
-          onClick?.(event)
-          if (closeOnClick) toast.dismiss(id)
-        }}
-      >
-        {label}
-      </Text>
-    ),
-  ), [actions])
-  return (
-    <div onClick={onClick}>
-      <h1 style={{ textTransform: 'capitalize' }}>{title}</h1>
-      {typeof message === 'string' ? <p>{message}</p> : message}
-      {buttons?.length ? <Flex style={{ gap: '12px', marginTop: '12px' }}>{buttons}</Flex> : null}
-    </div>
-  )
-}
+import { Flex, Text } from '@citric/core'
+import { TimesMini } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { useAnchorTag } from '@stack-spot/portal-components/anchor'
+import { useMemo } from 'react'
+import type { CloseButton as DefaultCloseButton } from 'react-toastify'
+import { ToastContainer, toast } from 'react-toastify'
+import 'react-toastify/dist/ReactToastify.css'
+import { useDictionary } from '../dictionary'
+
+type CloseButtonProps = Parameters<typeof DefaultCloseButton>[0]
+
+export const TOASTER_CLOSE_BTN_CLASS = 'btn-close'
+
+const CloseButton = ({ closeToast }: CloseButtonProps) => {
+  const t = useDictionary()
+  return (
+    <IconButton className={TOASTER_CLOSE_BTN_CLASS} onClick={closeToast} title={t.dismiss}>
+      <TimesMini />
+    </IconButton>
+  )
+}
+
+/**
+ * Uses react-toastify to render a Toaster based on the Citric DS.
+ */
+export const Toaster = () => <ToastContainer closeButton={CloseButton} />
+
+export interface ToasterAction {
+  /**
+   * The button's label.
+   */
+  label: string,
+  /**
+   * A function to run once the button is clicked.
+   */
+  onClick?: (event: React.MouseEvent) => void,
+  /**
+   * If this is set, instead of a button, an anchor is rendered with this href.
+   */
+  href?: string,
+  /**
+   * Whether or not to close the toaster once the button is clicked.
+   * @default true
+   */
+  closeOnClick?: boolean,
+}
+
+interface ToasterContentProps {
+  id: number | string,
+  actions?: ToasterAction[],
+  onClick?: (event: React.MouseEvent) => void,
+  title?: string,
+  message: React.ReactNode,
+}
+
+const actionStyle: React.CSSProperties = {
+  background: 'transparent',
+  border: 'none',
+  padding: 0,
+  color: 'inherit',
+  font: 'inherit',
+  fontWeight: 500,
+  cursor: 'pointer',
+}
+
+/**
+ * Renders a toaster with the default layout for toasters.
+ */
+export const ToasterContent = ({ id, message, actions, onClick, title }: ToasterContentProps) => {
+  const Link = useAnchorTag()
+  const buttons = useMemo(() => actions?.map(
+    ({ label, href, onClick, closeOnClick = true }) => (
+      <Text
+        key={label}
+        as={href ? Link : 'button'}
+        href={href}
+        style={actionStyle}
+        onClick={(event: React.MouseEvent) => {
+          onClick?.(event)
+          if (closeOnClick) toast.dismiss(id)
+        }}
+      >
+        {label}
+      </Text>
+    ),
+  ), [actions])
+  return (
+    <div onClick={onClick}>
+      <h1 style={{ textTransform: 'capitalize' }}>{title}</h1>
+      {typeof message === 'string' ? <p>{message}</p> : message}
+      {buttons?.length ? <Flex style={{ gap: '12px', marginTop: '12px' }}>{buttons}</Flex> : null}
+    </div>
+  )
+}