Usage

Import

import { CheckTemplate, Check } from '@passfort/ui'
content_copy
Copy

Example

<CheckTemplate>
  <Check
    renderTitle={() => (
      <Row divider={<Divider direction="vertical" />}>
        <Center>
          <Tag style="success" name="Passed" />
        </Center>

        <Stack spacing={0} alignItems="flex-start">
          <Text bold>Check variant with provider name </Text>
          <Text color="text-light">12 January 2023 @ 2:21am</Text>{' '}
        </Stack>
      </Row>
    )}
  >
    <Stack mt={2} spacing={4}>
      <Row>
        <Text bold>Result passed</Text>{' '}
        <Text color="text-light">
          This check returned X of Y things required to pass
        </Text>
      </Row>
      <Row>
        <Button label="Check action" />
        <Button label="Check action" />
      </Row>
      <Accordion>
        <AccordionItem title="Details used to run this check">
          <Text>Item content</Text>
        </AccordionItem>
      </Accordion>

      <Box h={20} bg="N50"></Box>
    </Stack>
  </Check>
  <Check
    renderTitle={() => (
      <Row divider={<Divider direction="vertical" />}>
        <Center>
          <Tag style="error" name="Failed" />
        </Center>

        <Stack spacing={0} alignItems="flex-start">
          <Text bold>Check variant with provider name </Text>
          <Text color="text-light">12 January 2023 @ 1:21am</Text>{' '}
        </Stack>
      </Row>
    )}
  >
    <Stack mt={2} spacing={4}>
      <Box>
        <Flag
          type="error"
          title="Something went wrong"
          description="General body text to describe stuff"
        />
      </Box>
      <Accordion>
        <AccordionItem title="Details used to run this check">
          <Text>Item content</Text>
        </AccordionItem>
      </Accordion>
    </Stack>
  </Check>
</CheckTemplate>
<CheckTemplate>
  <Check
    renderTitle={() => (
      <Row divider={<Divider direction="vertical" />}>
        <Center>
          <Tag style="success" name="Passed" />
        </Center>

        <Stack spacing={0} alignItems="flex-start">
          <Text bold>Check variant with provider name </Text>
          <Text color="text-light">12 January 2023 @ 2:21am</Text>{' '}
        </Stack>
      </Row>
    )}
  >
    <Stack mt={2} spacing={4}>
      <Row>
        <Text bold>Result passed</Text>{' '}
        <Text color="text-light">
          This check returned X of Y things required to pass
        </Text>
      </Row>
      <Row>
        <Button label="Check action" />
        <Button label="Check action" />
      </Row>
      <Accordion>
        <AccordionItem title="Details used to run this check">
          <Text>Item content</Text>
        </AccordionItem>
      </Accordion>

      <Box h={20} bg="N50"></Box>
    </Stack>
  </Check>
  <Check
    renderTitle={() => (
      <Row divider={<Divider direction="vertical" />}>
        <Center>
          <Tag style="error" name="Failed" />
        </Center>

        <Stack spacing={0} alignItems="flex-start">
          <Text bold>Check variant with provider name </Text>
          <Text color="text-light">12 January 2023 @ 1:21am</Text>{' '}
        </Stack>
      </Row>
    )}
  >
    <Stack mt={2} spacing={4}>
      <Box>
        <Flag
          type="error"
          title="Something went wrong"
          description="General body text to describe stuff"
        />
      </Box>
      <Accordion>
        <AccordionItem title="Details used to run this check">
          <Text>Item content</Text>
        </AccordionItem>
      </Accordion>
    </Stack>
  </Check>
</CheckTemplate>
content_copy
Copy
live example