@stack-spot/portal-components 2.26.0 → 2.27.0

package/src/components/Stepper/headers.tsx

@@ -1,64 +1,64 @@
-import { Box, Flex, Text } from '@citric/core'
-import { theme } from '@stack-spot/portal-theme'
-import { FC, useContext } from 'react'
-import { styled } from 'styled-components'
-import { StepperContext } from './Stepper'
-
-const StyledStepHeader = styled(Box)`
-  flex: 1;
-  border-top: 0.25rem solid ${theme.color.light[600]};
-  padding-top: 1rem;
-
-  &.active {
-    border-color: ${theme.color.primary[500]};
-  }
-
-  &.finished {
-    flex: unset;
-    width: 4.5rem;
-    border-color: ${theme.color.success[500]};
-  }
-`
-
-const StyledStepHeaderText = styled(Text)`
-  color: ${theme.color.light.contrastText};
-  width: 100%;
-  height: 1.5rem;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-`
-
-interface StepperHeader {
-  /**
-   * Title that is passed to the step component is used here.
-   */
-  title: string,
-}
-
-export interface StepperHeadersProps {
-  headers: StepperHeader[],
-}
-
-/**
- * Renders a component that represents the visual part of a step within the stepper component. 
- * The initial color of the step is primary.500 and when completed it is changed to the success.500 color.
- * 
- * The component stepper wraps this component.
- */
-
-export const StepperHeaders: FC<StepperHeadersProps> = ({ headers }) => {
-  const { activeIndex } = useContext(StepperContext)
-  return (
-    <Flex sx={{ gap: '1rem' }}>
-      {headers.map((header, index) => (
-        <StyledStepHeader 
-          key={header.title}
-          className={index < activeIndex ? 'finished' : (index === activeIndex ? 'active' : '')}
-        >
-          <StyledStepHeaderText>{header.title}</StyledStepHeaderText>
-        </StyledStepHeader>
-      ))}
-    </Flex>
-  )
-}
+import { Box, Flex, Text } from '@citric/core'
+import { theme } from '@stack-spot/portal-theme'
+import { FC, useContext } from 'react'
+import { styled } from 'styled-components'
+import { StepperContext } from './Stepper'
+
+const StyledStepHeader = styled(Box)`
+  flex: 1;
+  border-top: 0.25rem solid ${theme.color.light[600]};
+  padding-top: 1rem;
+
+  &.active {
+    border-color: ${theme.color.primary[500]};
+  }
+
+  &.finished {
+    flex: unset;
+    width: 4.5rem;
+    border-color: ${theme.color.success[500]};
+  }
+`
+
+const StyledStepHeaderText = styled(Text)`
+  color: ${theme.color.light.contrastText};
+  width: 100%;
+  height: 1.5rem;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+`
+
+interface StepperHeader {
+  /**
+   * Title that is passed to the step component is used here.
+   */
+  title: string,
+}
+
+export interface StepperHeadersProps {
+  headers: StepperHeader[],
+}
+
+/**
+ * Renders a component that represents the visual part of a step within the stepper component. 
+ * The initial color of the step is primary.500 and when completed it is changed to the success.500 color.
+ * 
+ * The component stepper wraps this component.
+ */
+
+export const StepperHeaders: FC<StepperHeadersProps> = ({ headers }) => {
+  const { activeIndex } = useContext(StepperContext)
+  return (
+    <Flex sx={{ gap: '1rem' }}>
+      {headers.map((header, index) => (
+        <StyledStepHeader 
+          key={header.title}
+          className={index < activeIndex ? 'finished' : (index === activeIndex ? 'active' : '')}
+        >
+          <StyledStepHeaderText>{header.title}</StyledStepHeaderText>
+        </StyledStepHeader>
+      ))}
+    </Flex>
+  )
+}

package/src/components/Stepper/index.ts

@@ -1,3 +1,3 @@
-export { Stepper, StepperContext } from './Stepper'
-export { Step } from './Step'
-export { StepperNavigation } from './Navigation'
+export { Stepper, StepperContext } from './Stepper'
+export { Step } from './Step'
+export { StepperNavigation } from './Navigation'

package/src/components/Table/HeaderItem.tsx

@@ -1,52 +1,52 @@
-import { Button, Flex, IconBox, Styles, Text } from '@citric/core'
-import { Props as FlexProps } from '@citric/core/dist/Flex'
-import { SortAscending, SortDescending } from '@citric/icons'
-import React, { ReactNode } from 'react'
-
-export type SortTypes = 'ASC' | 'DESC' | undefined
-
-interface HeaderSortProps extends FlexProps {
-  children: ReactNode | string,
-  sortType: SortTypes,
-  onSort: (sortType: SortTypes) => void,
-}
-
-export const parseParams = ({ key, sort }: { key: string | undefined, sort: 'ASC' | 'DESC' | undefined }) =>
-  key && sort ? `${key?.toUpperCase()}_${sort?.toUpperCase()}` : undefined
-
-function next(current: SortTypes) {
-  switch (current) {
-    case undefined: return 'ASC'
-    case 'ASC': return 'DESC'
-    case 'DESC': return undefined
-  }
-}
-
-export const HeaderSort: React.FC<HeaderSortProps> = ({ children, sortType, onSort, ...props }) => (
-  <Flex
-    as={Button}
-    appearance="text"
-    alignItems="center"
-    flexWrap="nowrap"
-    sx={{ '&:hover, &:active, &:focus': { borderColor: 'transparent' }, padding: 0 } as Styles}
-    onClick={() => onSort(next(sortType))} {...props}>
-    <Text appearance="microtext1" mr="2" colorScheme="light.700">
-      {children}
-    </Text>
-
-    <IconBox colorIcon="inverse.500" size="xs">
-      {sortType === 'ASC' && <SortAscending />}
-      {sortType === 'DESC' && <SortDescending />}
-    </IconBox>
-  </Flex>
-)
-
-type FullFlexProps = Parameters<typeof Flex>[0]
-
-export const Header: React.FC<FullFlexProps> = ({ children, ...props }) => (
-  <Flex alignItems="center" {...props}>
-    <Text appearance="microtext1" mr="2" colorScheme="light.700">
-      {children}
-    </Text>
-  </Flex>
-)
+import { Button, Flex, IconBox, Styles, Text } from '@citric/core'
+import { Props as FlexProps } from '@citric/core/dist/Flex'
+import { SortAscending, SortDescending } from '@citric/icons'
+import React, { ReactNode } from 'react'
+
+export type SortTypes = 'ASC' | 'DESC' | undefined
+
+interface HeaderSortProps extends FlexProps {
+  children: ReactNode | string,
+  sortType: SortTypes,
+  onSort: (sortType: SortTypes) => void,
+}
+
+export const parseParams = ({ key, sort }: { key: string | undefined, sort: 'ASC' | 'DESC' | undefined }) =>
+  key && sort ? `${key?.toUpperCase()}_${sort?.toUpperCase()}` : undefined
+
+function next(current: SortTypes) {
+  switch (current) {
+    case undefined: return 'ASC'
+    case 'ASC': return 'DESC'
+    case 'DESC': return undefined
+  }
+}
+
+export const HeaderSort: React.FC<HeaderSortProps> = ({ children, sortType, onSort, ...props }) => (
+  <Flex
+    as={Button}
+    appearance="text"
+    alignItems="center"
+    flexWrap="nowrap"
+    sx={{ '&:hover, &:active, &:focus': { borderColor: 'transparent' }, padding: 0 } as Styles}
+    onClick={() => onSort(next(sortType))} {...props}>
+    <Text appearance="microtext1" mr="2" colorScheme="light.700">
+      {children}
+    </Text>
+
+    <IconBox colorIcon="inverse.500" size="xs">
+      {sortType === 'ASC' && <SortAscending />}
+      {sortType === 'DESC' && <SortDescending />}
+    </IconBox>
+  </Flex>
+)
+
+type FullFlexProps = Parameters<typeof Flex>[0]
+
+export const Header: React.FC<FullFlexProps> = ({ children, ...props }) => (
+  <Flex alignItems="center" {...props}>
+    <Text appearance="microtext1" mr="2" colorScheme="light.700">
+      {children}
+    </Text>
+  </Flex>
+)

package/src/components/Table/SettingsVerticalMenu.tsx

@@ -1,50 +1,50 @@
-import { Box, IconBox, OneOfIconSizes } from '@citric/core'
-import { SxProperties } from '@citric/core/dist/sx'
-import { EllipsisVertical } from '@citric/icons'
-import { IconButton } from '@citric/ui'
-import { SelectionList } from '@stack-spot/portal-components/SelectionList'
-import { useState } from 'react'
-
-interface SettingsVerticalMenuProps {
-  id: string,
-  buttonAriaLabel?: string,
-  size?: OneOfIconSizes,
-  sxIconButton?: SxProperties,
-  buttonDataTestHint?: string,
-  items: React.ComponentProps<typeof SelectionList>['items'],
-}
-
-export const SettingsVerticalMenu = ({ 
-  id, 
-  buttonAriaLabel, 
-  size, 
-  buttonDataTestHint, 
-  sxIconButton, 
-  items = [] }: SettingsVerticalMenuProps) => {
-  const [visibleMenu, setVisibleMenu] = useState(false)
-  if (items?.length === 0) {
-    return null
-  }
-
-  return (
-    <Box sx={{ position: 'relative' }}>
-      <IconButton 
-        role="button"
-        title={buttonAriaLabel} 
-        data-test-hint={buttonDataTestHint} 
-        aria-label={buttonAriaLabel} 
-        onClick={() => setVisibleMenu(state => !state)} >
-        <IconBox size={size} sx={sxIconButton}>
-          <EllipsisVertical />
-        </IconBox>
-      </IconButton>
-      <SelectionList
-        id={id}
-        visible={visibleMenu}
-        onHide={() => setVisibleMenu(false)}
-        style={{ position: 'absolute', top: 40, right: 0, minWidth: '200px' }}
-        items={items}
-      />
-    </Box>
-  )
-}
+import { Box, IconBox, OneOfIconSizes } from '@citric/core'
+import { SxProperties } from '@citric/core/dist/sx'
+import { EllipsisVertical } from '@citric/icons'
+import { IconButton } from '@citric/ui'
+import { SelectionList } from '@stack-spot/portal-components/SelectionList'
+import { useState } from 'react'
+
+interface SettingsVerticalMenuProps {
+  id: string,
+  buttonAriaLabel?: string,
+  size?: OneOfIconSizes,
+  sxIconButton?: SxProperties,
+  buttonDataTestHint?: string,
+  items: React.ComponentProps<typeof SelectionList>['items'],
+}
+
+export const SettingsVerticalMenu = ({ 
+  id, 
+  buttonAriaLabel, 
+  size, 
+  buttonDataTestHint, 
+  sxIconButton, 
+  items = [] }: SettingsVerticalMenuProps) => {
+  const [visibleMenu, setVisibleMenu] = useState(false)
+  if (items?.length === 0) {
+    return null
+  }
+
+  return (
+    <Box sx={{ position: 'relative' }}>
+      <IconButton 
+        role="button"
+        title={buttonAriaLabel} 
+        data-test-hint={buttonDataTestHint} 
+        aria-label={buttonAriaLabel} 
+        onClick={() => setVisibleMenu(state => !state)} >
+        <IconBox size={size} sx={sxIconButton}>
+          <EllipsisVertical />
+        </IconBox>
+      </IconButton>
+      <SelectionList
+        id={id}
+        visible={visibleMenu}
+        onHide={() => setVisibleMenu(false)}
+        style={{ position: 'absolute', top: 40, right: 0, minWidth: '200px' }}
+        items={items}
+      />
+    </Box>
+  )
+}

package/src/components/Table/StyledLinkTable.tsx

@@ -1,22 +1,22 @@
-import styled from 'styled-components'
-import { ReactNode } from 'react'
-import { useAnchorTag } from '../../context/anchor'
-
-const StyledLink = styled.a`
-  &:hover {
-    text-decoration: underline;
-  }
-`
-
-export const StyledLinkTable = ({
-  children,
-  ...props
-}: { children: ReactNode } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
-  const Link = useAnchorTag()
-
-  return (
-    <StyledLink as={Link} {...props}>
-      {children}
-    </StyledLink>
-  )
-}
+import styled from 'styled-components'
+import { ReactNode } from 'react'
+import { useAnchorTag } from '../../context/anchor'
+
+const StyledLink = styled.a`
+  &:hover {
+    text-decoration: underline;
+  }
+`
+
+export const StyledLinkTable = ({
+  children,
+  ...props
+}: { children: ReactNode } & React.AnchorHTMLAttributes<HTMLAnchorElement>) => {
+  const Link = useAnchorTag()
+
+  return (
+    <StyledLink as={Link} {...props}>
+      {children}
+    </StyledLink>
+  )
+}