@beekeeper/home-screen-ui

A library of UI components, built to be used on the Home Screen. If you are new to developing widgets for the Home Screen, please visit our Developer Portal.

Get Started

To install the library, just run:

yarn add @beekeeper/home-screen-ui

Components

Home Screen UI contains the following components:

• List
• SimpleRow
• WidgetHeader
• WidgetTitle
• HeaderLink
• ErrorState
• Progress Bar

which can be imported by:

import { List, SimpleRow } from '@beekeeper/home-screen-ui';

List

List is a container component rendering the items property as rows. Make sure to set a value for the item.id field. To style a row, use the row slot of the List component.

<List :items="items">
    <template v-slot:row="{ item }">
        <span>{{ item.text }}</span>
    </template>
</List>

or with SimpleRow:

<List :items="items">
    <template v-slot:row="{ item }">
        <SimpleRow
            :title="item.title"
            :subtitle="item.subtitle"
            :cover="{ src: item.photoUrl, alt: item.title }"
        />
    </template>
</List>

SimpleRow

SimpleRow should be used within a List component. SimpleRow requires you to specify a title, optionally subtitle, color and cover, where cover is an object of { src, alt } and color is a string.

<SimpleRow
    :title="item.title"
    :subtitle="item.subtitle"
    :cover="{ src: item.photoUrl, alt: item.title }"
/>

or

<SimpleRow :title="item.title" :subtitle="item.subtitle" color="" />

WidgetHeader

WidgetHeader provides a layout for the top of the widget. Typically used with WidgetTitle and optional HeaderLink in named slots left and right.

<WidgetHeader>
    <template v-slot:left
        ><WidgetTitle>My Awesome Widget</WidgetTitle></template
    >
    <template v-slot:right
        ><HeaderLink href="https://example.com"
            >See Website</HeaderLink
        ></template
    >
</WidgetHeader>

WidgetTitle

WidgetTitle styles the title of a widget. Typically used within the WidgetHeader component.

<WidgetTitle>My Awesome Widget</WidgetTitle>

HeaderLink

HeaderLink displayed at the top of a widget. Typically within the WidgetHeader component.

<HeaderLink href="https://mysite.com">See All</HeaderLink>

ErrorState

ErrorState displayed container with error text and button. It should contain buttonText, errorText as string props.

<ErrorState :buttonText="buttonText" :errorText="errorText" />

Progress Bar

A progress bar indicating the current progress. The current value is set through a property called progress and it should be between 0 and 100. Styling can be changed through CSS variables shown below.

<ProgressBar :progress="progress" />

📔 CSS Variables

| Variable | Default | Description | | :-----------------------------: | :-------: | :--------------------------------: | | --progress-bar-height | 10px | Height of the progress bar | | --progress-bar-color | #00ABC2 | Color of the filled progress bar | | --progress-bar-background-color | #F1F2F3 | Color of the unfilled progress bar |

Contributing

In order to work independently on new widgets, this repository features a Storybook instance, which can be started with yarn run storybook. Follow the instructions in the console to view components in the browser. Take a look at existing stories in the stories folder.