A getting started page represents a space for people working with Appfire products to take their first steps in activing a tool or product that helps solve their problem or get their job done.

Fuegokit React features a set of crafted heroes, feature sections, and other common patterns you can configure and easily add to your Getting Started page.

Import

To start, make sure your app is wrapped in Fuegokit React's ThemeProvider.

import {ThemeProvider, BaseStyles} from '@fuegokit/react'

Add Fuegokit's BaseStyles component for a set of sensible default resets and to use Fuegokit's default theme object.

function MyApp() {
  return (
    <ThemeProvider>
      <BaseStyles />
      <Box sx={{background: 'surface.default'}}>
        <Text sx={{color: 'text.subtle'}}>An actual app goes here</Text>
      </Box>
    </ThemeProvider>
  )
}

render(<MyApp />)

function MyApp() {
  return (
    <ThemeProvider>
      <BaseStyles />
      <Box sx={{background: 'surface.default'}}>
        <Text sx={{color: 'text.subtle'}}>An actual app goes here</Text>
      </Box>
    </ThemeProvider>
  )
}

render(<MyApp />)

Constructing your page

Wrap your Getting Started page in a container. Fuegokit React provides a few ways to render these components easily without a lot of fuss.

One way is to use a <Stack>:

<Box sx={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
  <Stack size={7}>{/*all Getting Started page components in the stack will be separated by 56px of margin*/}</Stack>
  <FooterSection>{/*footer elements here, render footer outside of the Stack*/}</FooterSection>
</Box>

Using the Max Width Wrapper

None of Fuegokit React's components apply margin to themselves.

When rendering Getting Started page components, use the MaxWidthWrapper component to constrain the width of each element you need to in a responsive container.

Import the components you need:

import {MaxWidthWrapper, PageHero} from '@fuegokit/react'

Then ensure that each member of the stack is constrained as necessary:

const MyConstrainedHero = () => {
  const myActionHandler = action => {
    alert('action handler')
  }
  const myPrimaryHeroAction = {
    type: 'EXTERNAL',
    url: 'https://www.test.com',
    label: 'Primary action',
    tracking: {
      destination: 'some-primary-destination-string',
      type: 'link'
    }
  }

  const mySecondaryHeroAction = {
    type: 'EXTERNAL',
    url: 'https://www.test.com',
    label: 'Secondary action',
    tracking: {
      destination: 'some-secondary-destination-string',
      type: 'link'
    }
  }

  return (
    <MaxWidthWrapper>
      {/* PageHero is now constrained in a responsive container */}
      <PageHero
        actionHandler={myActionHandler}
        buttonAppearance="primary"
        caption="Create simple to sophisticated workflows to fit your needs."
        imgAlt="An illustration representing a workflow in Jira."
        imgUrl="https://user-images.githubusercontent.com/96323698/176555680-aeab5654-ad2b-455b-ab91-b6e98ccc91b5.png"
        primaryAction={myPrimaryHeroAction}
        secondaryAction={mySecondaryHeroAction}
        title="All-in-one app for Jira workflow automation"
        variant="WithImage"
      />
    </MaxWidthWrapper>
  )
}

render(<MyConstrainedHero />)

const MyConstrainedHero = () => {
  const myActionHandler = action => {
    alert('action handler')
  }
  const myPrimaryHeroAction = {
    type: 'EXTERNAL',
    url: 'https://www.test.com',
    label: 'Primary action',
    tracking: {
      destination: 'some-primary-destination-string',
      type: 'link'
    }
  }

  const mySecondaryHeroAction = {
    type: 'EXTERNAL',
    url: 'https://www.test.com',
    label: 'Secondary action',
    tracking: {
      destination: 'some-secondary-destination-string',
      type: 'link'
    }
  }

  return (
    <MaxWidthWrapper>
      {/* PageHero is now constrained in a responsive container */}
      <PageHero
        actionHandler={myActionHandler}
        buttonAppearance="primary"
        caption="Create simple to sophisticated workflows to fit your needs."
        imgAlt="An illustration representing a workflow in Jira."
        imgUrl="https://user-images.githubusercontent.com/96323698/176555680-aeab5654-ad2b-455b-ab91-b6e98ccc91b5.png"
        primaryAction={myPrimaryHeroAction}
        secondaryAction={mySecondaryHeroAction}
        title="All-in-one app for Jira workflow automation"
        variant="WithImage"
      />
    </MaxWidthWrapper>
  )
}

render(<MyConstrainedHero />)

Laying out the Getting Started page

By arranging items in the Getting Started page using a Stack component, you can ensure that the space between each element is consistent.

The Footer should remain absolutely positioned outside of the Stack:

const MyGettingStartedPage = () => {
  const myActionHandler = action => {
    alert('action handler')
  }
  const footerActionObject = {
    type: 'EXTERNAL',
    url: 'https://appfire.com',
    label: 'Footer action object',
    tracking: {
      destination: 'some-destination-string',
      type: 'link'
    }
  }
  const microHeaderActionObject = {
    type: 'INTERNAL',
    url: 'https://appfire.com',
    label: 'Micro header action object label',
    tracking: {
      destination: 'some-destination-string',
      type: 'button'
    }
  }
  const footerData = {
    productCard: {
      title: 'Product resources and support',
      caption: 'Check out these resources for additional information:',
      actions: [
        {...footerActionObject, label: 'Troubleshooting'},
        {...footerActionObject, label: 'System status'},
        {...footerActionObject, label: 'User guide'},
        {...footerActionObject, label: 'Documentation'},
        {...footerActionObject, label: 'Support request'}
      ]
    },
    feedbackCard: {
      title: `We'd love your feedback!`,
      caption:
        "If you're enjoying these features, please consider sharing your experience in a 4-star review on the Marketplace.",
      actions: [{...footerActionObject, label: 'Write a review'}]
    },
    customerCard: {
      title: 'Stay connected',
      caption:
        'Thank you for supporting us! We sincerely appreciate everything you do; you truly are the reason we build great software!',
      actions: [
        {...footerActionObject, label: 'Submit feature request'},
        {...footerActionObject, label: 'Subscribe to product updates'},
        {...footerActionObject, label: 'Read our blog'}
      ]
    }
  }

  const navItems = {
    navItemOne: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'Atlassian Community',
      tracking: {
        destination: 'some-destination-string',
        type: 'link'
      }
    },
    navItemTwo: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'Knowledge base',
      tracking: {
        destination: 'some-destination-string',
        type: 'link'
      }
    },
    navItemThree: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'View documentation',
      tracking: {
        destination: 'some-destination-string',
        type: 'button'
      }
    },
    navItemFour: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'Support request',
      tracking: {
        destination: 'some-destination-string',
        type: 'link'
      }
    }
  }

  const microHeaderData = {
    title: 'Jira Misc Workflow Extensions',
    appLogoUrl: 'https://user-images.githubusercontent.com/96323698/155614696-c585cb10-a2ed-42bd-8bbc-a92619b6ab09.png',
    menuItems: [
      {
        menuGroup: '',
        actions: [
          {...microHeaderActionObject, label: 'Workflows'},
          {...microHeaderActionObject, label: 'Event-based actions'},
          {...microHeaderActionObject, label: 'Scheduled actions'},
          {...microHeaderActionObject, label: 'Shared actions'},
          {...microHeaderActionObject, label: 'View logs'},
          {...microHeaderActionObject, label: 'System status'}
        ]
      }
    ],
    menuComponent: <MicroHeaderMenu menuItems={menuItems} actionHandler={myActionHandler} />
  }
  const {title, appLogoUrl, menuItems, menuComponent} = microHeaderData
  const {productCard, feedbackCard, customerCard} = footerData
  const {navItemOne, navItemTwo, navItemThree, navItemFour} = navItems
  return (
    <Box sx={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
      <MaxWidthWrapper>
        <Stack size={7}>
          <MicroHeader appLogoUrl={appLogoUrl} title={title} menuComponent={menuComponent} />
          <Box sx={{border: '1px dashed', borderColor: 'border.accent.purple.default', height: '150px'}}>
            Your component
          </Box>
          <Box sx={{border: '1px dashed', borderColor: 'border.accent.purple.default', height: '150px'}}>
            Your component
          </Box>
          <Box sx={{border: '1px dashed', borderColor: 'border.accent.purple.default', height: '150px'}}>
            Your component
          </Box>
          <Box sx={{border: '1px dashed', borderColor: 'border.accent.purple.default', height: '150px'}}>
            Your component
          </Box>
        </Stack>
      </MaxWidthWrapper>
      <FooterSection>
        <FooterTitle
          solidText="We're here and"
          gradientText="ready to answer all of your questions"
          gradientTo="#ec4899"
          gradientFrom="#a855f7"
        />

        <FooterCardGrid>
          <FooterCard
            title={productCard.title}
            caption={productCard.caption}
            actions={productCard.actions}
            actionHandler={myActionHandler}
          />
          <FooterCard
            title={feedbackCard.title}
            caption={feedbackCard.caption}
            actions={feedbackCard.actions}
            actionHandler={myActionHandler}
          />
          <FooterCard
            title={customerCard.title}
            caption={customerCard.caption}
            actions={customerCard.actions}
            actionHandler={myActionHandler}
          />
        </FooterCardGrid>
        <FooterNav.Wrapper>
          <FooterNav.Logo />
          <FooterNav>
            <FooterNav.Item {...navItemOne} href={navItemOne.url} onClick={() => myActionHandler(navItemOne)}>
              {navItemOne.label}
            </FooterNav.Item>
            <FooterNav.Item {...navItemTwo} href={navItemTwo.url} onClick={() => myActionHandler(navItemTwo)}>
              {navItemTwo.label}
            </FooterNav.Item>
            <FooterNav.Item {...navItemThree} href={navItemThree.url} onClick={() => myActionHandler(navItemThree)}>
              Documentation
            </FooterNav.Item>
            <FooterNav.Item {...navItemFour} href={navItemFour.url} onClick={() => myActionHandler(navItemFour)}>
              {navItemFour.label}
            </FooterNav.Item>
          </FooterNav>
          <FooterNav.Copyright />
        </FooterNav.Wrapper>
      </FooterSection>
    </Box>
  )
}

render(<MyGettingStartedPage />)

const MyGettingStartedPage = () => {
  const myActionHandler = action => {
    alert('action handler')
  }
  const footerActionObject = {
    type: 'EXTERNAL',
    url: 'https://appfire.com',
    label: 'Footer action object',
    tracking: {
      destination: 'some-destination-string',
      type: 'link'
    }
  }
  const microHeaderActionObject = {
    type: 'INTERNAL',
    url: 'https://appfire.com',
    label: 'Micro header action object label',
    tracking: {
      destination: 'some-destination-string',
      type: 'button'
    }
  }
  const footerData = {
    productCard: {
      title: 'Product resources and support',
      caption: 'Check out these resources for additional information:',
      actions: [
        {...footerActionObject, label: 'Troubleshooting'},
        {...footerActionObject, label: 'System status'},
        {...footerActionObject, label: 'User guide'},
        {...footerActionObject, label: 'Documentation'},
        {...footerActionObject, label: 'Support request'}
      ]
    },
    feedbackCard: {
      title: `We'd love your feedback!`,
      caption:
        "If you're enjoying these features, please consider sharing your experience in a 4-star review on the Marketplace.",
      actions: [{...footerActionObject, label: 'Write a review'}]
    },
    customerCard: {
      title: 'Stay connected',
      caption:
        'Thank you for supporting us! We sincerely appreciate everything you do; you truly are the reason we build great software!',
      actions: [
        {...footerActionObject, label: 'Submit feature request'},
        {...footerActionObject, label: 'Subscribe to product updates'},
        {...footerActionObject, label: 'Read our blog'}
      ]
    }
  }

  const navItems = {
    navItemOne: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'Atlassian Community',
      tracking: {
        destination: 'some-destination-string',
        type: 'link'
      }
    },
    navItemTwo: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'Knowledge base',
      tracking: {
        destination: 'some-destination-string',
        type: 'link'
      }
    },
    navItemThree: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'View documentation',
      tracking: {
        destination: 'some-destination-string',
        type: 'button'
      }
    },
    navItemFour: {
      type: 'EXTERNAL',
      url: 'https://appfire.com',
      label: 'Support request',
      tracking: {
        destination: 'some-destination-string',
        type: 'link'
      }
    }
  }

  const microHeaderData = {
    title: 'Jira Misc Workflow Extensions',
    appLogoUrl: 'https://user-images.githubusercontent.com/96323698/155614696-c585cb10-a2ed-42bd-8bbc-a92619b6ab09.png',
    menuItems: [
      {
        menuGroup: '',
        actions: [
          {...microHeaderActionObject, label: 'Workflows'},
          {...microHeaderActionObject, label: 'Event-based actions'},
          {...microHeaderActionObject, label: 'Scheduled actions'},
          {...microHeaderActionObject, label: 'Shared actions'},
          {...microHeaderActionObject, label: 'View logs'},
          {...microHeaderActionObject, label: 'System status'}
        ]
      }
    ],
    menuComponent: <MicroHeaderMenu menuItems={menuItems} actionHandler={myActionHandler} />
  }
  const {title, appLogoUrl, menuItems, menuComponent} = microHeaderData
  const {productCard, feedbackCard, customerCard} = footerData
  const {navItemOne, navItemTwo, navItemThree, navItemFour} = navItems
  return (
    <Box sx={{display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'center'}}>
      <MaxWidthWrapper>
        <Stack size={7}>
          <MicroHeader appLogoUrl={appLogoUrl} title={title} menuComponent={menuComponent} />
          <Box sx={{border: '1px dashed', borderColor: 'border.accent.purple.default', height: '150px'}}>
            Your component
          </Box>
          <Box sx={{border: '1px dashed', borderColor: 'border.accent.purple.default', height: '150px'}}>
            Your component
          </Box>
          <Box sx={{border: '1px dashed', borderColor: 'border.accent.purple.default', height: '150px'}}>
            Your component
          </Box>
          <Box sx={{border: '1px dashed', borderColor: 'border.accent.purple.default', height: '150px'}}>
            Your component
          </Box>
        </Stack>
      </MaxWidthWrapper>
      <FooterSection>
        <FooterTitle
          solidText="We're here and"
          gradientText="ready to answer all of your questions"
          gradientTo="#ec4899"
          gradientFrom="#a855f7"
        />

        <FooterCardGrid>
          <FooterCard
            title={productCard.title}
            caption={productCard.caption}
            actions={productCard.actions}
            actionHandler={myActionHandler}
          />
          <FooterCard
            title={feedbackCard.title}
            caption={feedbackCard.caption}
            actions={feedbackCard.actions}
            actionHandler={myActionHandler}
          />
          <FooterCard
            title={customerCard.title}
            caption={customerCard.caption}
            actions={customerCard.actions}
            actionHandler={myActionHandler}
          />
        </FooterCardGrid>
        <FooterNav.Wrapper>
          <FooterNav.Logo />
          <FooterNav>
            <FooterNav.Item {...navItemOne} href={navItemOne.url} onClick={() => myActionHandler(navItemOne)}>
              {navItemOne.label}
            </FooterNav.Item>
            <FooterNav.Item {...navItemTwo} href={navItemTwo.url} onClick={() => myActionHandler(navItemTwo)}>
              {navItemTwo.label}
            </FooterNav.Item>
            <FooterNav.Item {...navItemThree} href={navItemThree.url} onClick={() => myActionHandler(navItemThree)}>
              Documentation
            </FooterNav.Item>
            <FooterNav.Item {...navItemFour} href={navItemFour.url} onClick={() => myActionHandler(navItemFour)}>
              {navItemFour.label}
            </FooterNav.Item>
          </FooterNav>
          <FooterNav.Copyright />
        </FooterNav.Wrapper>
      </FooterSection>
    </Box>
  )
}

render(<MyGettingStartedPage />)

To experiment with more full page examples and to see more implementation details with mock data, use the Getting Started page playground in Storybook, or refer to the example project repo's here.

Getting started page

Import

Constructing your page

Using the Max Width Wrapper

Laying out the Getting Started page

See also