Schedulable Action

This component is basically a Box for Timeslot, Add-On, Discount or anything that demands a Box with two columns with actions being contained in the right hand column.

Use Box component for a simple wrapper with padding and borders.

Examples

SchedulableAction

<Formik initialValues={{ first: 0, second: 2}} onSubmit={() => {}}>
  <Grid gridGap={2} width={1} width={500}>
    <SchedulableAction
      actions={
        <>
          <Quantity max={2} />
          <Button variant="secondary">Action</Button>
        </>
      }
    >
      <ItemText>
        <ItemTextTop>
          <Pin icon="kayak">Category</Pin>
        </ItemTextTop>
        <H5>
          Item title
        </H5>
        <Text color="secondary">Content of thing.</Text>
      </ItemText>
      <Link href="/">Secondary action</Link>
    </SchedulableAction>

    <SchedulableAction
      actions={
        <Button variant="secondary">
          Choose
        </Button>
      }
    >
      <ItemText>
        <H5 subtitle="Start time - end time">
          Timeslot - Full date
        </H5>
        <Text color="secondary">Status if any</Text>
      </ItemText>
    </SchedulableAction>

    <SchedulableAction
      actions={
        <>
          <Quantity max={2} />
          <Button variant="secondary">Add</Button>
        </>
      }
    >
      <ItemText>
        <H5>Add-on name</H5>
        <Price pence={2000} currency="gbp" />
        <Text color="secondary">Addon description</Text>
      </ItemText>
    </SchedulableAction>

    <SchedulableAction actions={<Button variant="secondary">View more</Button>}>
      <ItemText>
        <H5 subtitle="Amount of thing left">
          Discount - Name #code
        </H5>
        <Text color="secondary">
          Info that helps choosing between 2 applicable discounts
        </Text>
      </ItemText>
      <Link href="/">View more</Link>
    </SchedulableAction>
  </Grid>
</Formik>