Table-Cell - React

View on Figma

The Table-Cell is not a standalone component at the moment, and can’t be used outside the Comparison Table Section. This will change in the future, once we introduce a basic table component in React.

TextCell Props

text: string

<Box $maxWidth="400px" $border>
    <TextCell text="Hello World!" />
</Box>

SwatchCell Props

textTop?: string
textBottom?: string
swatches: array
- $colorway: string
- $outline?: boolean
- label: string

<Box $maxWidth="400px" $border>
    <SwatchCell
        textTop="text"
        swatches={[
            { $colorway: '#2D2C2C', $outline: true, label: 'dark grey' },
            { $colorway: '#7E857D', $outline: true, label: 'light grey' },
            { $colorway: '#E9E8E8', $outline: true, label: 'silver' }
        ]}
        textBottom="text"
    />
</Box>

PriceCell Props

priceProps: PriceProps
textTop?: string
textBottom?: string

<Box $maxWidth="400px" $border>
    <PriceCell
        textTop="Text"
        textBottom="Text"
        priceProps={{ price: '£XX', suffix: 'a month' }}
    />
</Box>

CTACell Props

primaryCta?: object
- text: string
- href?: string
- ariaLabel?: string
- data?: object
  - testId?: string
  - trackingDescription?: string
  - trackingLabel?: string
- onClick?: () => void
secondaryCta?: object (same props as primaryCta)

<Box $maxWidth="400px" $border>
    <CTACell
        primaryCta={{
            href: 'https://www.sky.com',
            text: 'Primary CTA',
            data: {
                testId: 'section-primary-cta',
                trackingDescription: 'tracking description',
                trackingLabel: 'tracking label'
            }
        }}
    />
</Box>

ImageCell Props

textTop?: string
textBottom?: string
imageProps: object
- src: ResponsiveProps<string>
- alt: string
- $aspectRatio?: ResponsiveProps<string>
- $objectFit?: string
- $width?: ResponsiveProps<string>
- $height?: ResponsiveProps<string>
- withImageManager?: boolean

<Box $maxWidth="400px" $border>
  <ImageCell
    imageProps={{
      src: 'https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/blt6d1431344ce0a9b7/Draft_Asset_Image.png',
      alt: 'Example image',
      $aspectRatio: '1/1',
      $width: '64px'
    }}
    textTop="Text"
    textBottom="Text"
  />
</Box>

ModalCell Props

modalCta: object
- text: string
- ariaLabel?: string
- data?: object
  - testId?: string
  - trackingDescription?: string
  - trackingLabel?: string
- iconSrc?: string
modalConfig?: object
- ModalProps
- onOpen?: (event: MouseEvent | KeyboardEvent) => void
- $inline?: boolean
modalContent: JSX.Element

function Example() {
  const ModalContent = () => (
    <Image
      src="https://static.skyassets.com/contentstack/assets/blt77d122705d37a002/bltfdb1863151e459ff/cat-1.jpg"
      alt=""
      $width="100%"
      $aspectRatio="16 / 9"
    />
  );

  return (
    <Box $maxWidth="400px" $border>
      <ModalCell
        modalCta={{
          text: 'Modal Cta Link',
          ariaLabel: 'Tech Specs for Sky Glass Gen 2',
          iconSrc: chevronRightLinear,
          data: {
            testId: 'modal-cta',
            trackingDescription: 'tracking description',
            trackingLabel: 'tracking label'
          }
        }}
        modalConfig={{
          $inline: true
        }}
        modalContent={<ModalContent />}
      />
    </Box>
  );
}

ComposableCell Props

cellContent: JSX.Element

function Example() {
  const ComposableCellContent = () => (
    <Text $fontWeight="bold" $color="attention.regular">
        REPLACE ME
    </Text>
  );

  return (
    <Box $maxWidth="400px" $border>
      <ComposableCell
        cellContent={<ComposableCellContent />}
      />
    </Box>
  );
}