@beekeeper/home-screen-ui

1.0.0 • Public • Published

@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>

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>

List with SimpleRow

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 }"
/>

SimpleRow with cover

or

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

SimpleRow with 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>

WidgetHeader

WidgetTitle

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

<WidgetTitle>My Awesome Widget</WidgetTitle>

WidgetTitle

HeaderLink

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

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

HeaderLink

ErrorState

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

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

ErrorState

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" />

ErrorState

📔 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.

Package Sidebar

Install

npm i @beekeeper/home-screen-ui

Weekly Downloads

54

Version

1.0.0

License

UNLICENSED

Unpacked Size

183 kB

Total Files

13

Last publish

Collaborators

  • querciak
  • jan_meier_beekeeper
  • andrzej.augustyniak
  • npm-owner
  • anandbhaskaran
  • thiago.schmid