appbaseio / designkit

Design kit for appbaseio ecosystem

designkit

Design kit for appbaseio ecosystem

Components

Footer

Additional props can be passed to Footer and its child compound components Footer.Links, Footer.List and Footer.Brand.

import { Footer, Title } from '@appbaseio/designkit';

const AppFooter = ({ theme: { colors } }) => (
	<Footer css={{ backgroundColor: colors.footer }}>
		<Footer.Links>
			<Footer.List>
				<Title>Products</Title>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://appbase.io"
					>
						Appbase.io
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://opensource.appbase.io/reactivemaps"
					>
						Reactive Maps
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://opensource.appbase.io/reactivesearch"
					>
						Reactive Search
					</a>
				</li>
			</Footer.List>
			<Footer.List>
				<Title>Docs</Title>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://docs.appbase.io"
					>
						JS Quick Start
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://docs.appbase.io"
					>
						JS API Reference
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://rest.appbase.io"
					>
						REST Quick Start
					</a>
				</li>
			</Footer.List>
			<Footer.List>
				<Title>Use Cases</Title>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://appbase.io"
					>
						Geolocation Queries
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://appbase.io"
					>
						Personalized Feeds
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://appbase.io"
					>
						Realtime Search
					</a>
				</li>
			</Footer.List>
			<Footer.List>
				<Title className="heading">Company</Title>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://status.appbase.io/"
					>
						Status Page
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="http://tos.appbase.io/"
					>
						Terms
					</a>
				</li>
				<li>
					<a
						target="_blank"
						rel="noopener noreferrer"
						href="https://tos.appbase.io/"
					>
						Privacy
					</a>
				</li>
			</Footer.List>
		</Footer.Links>
		<Footer.Brand>
			<img
				width="100%"
				src="/static/svg/jellyfish.svg"
				alt="appbase.io"
			/>
		</Footer.Brand>
	</Footer>
);

News

<News>Build native mobile apps with appbase.io and ReactiveSearch</News>

Hero

A full width and full height section great for highlighting the landing section of new pages.

<Hero style={{ background: 'hotpink' }}>
	<H1>Build native mobile apps with appbase.io and ReactiveSearch</H1>
	<H2>Appbase Design System</H2>
</Hero>

designkit's Issues

Button component's borderRadius theme prop field doesn't work

Not sure why.

Update: This is applicable to all atom components, their theme prop is not being applied.

Add esm/tree shaking support

Currently when we import a single component, everything gets imported. For example,

import { Button } from '@appbaseio/designkit';

...

Improve a11y

This would be applicable to the interactive components

Button component's theme prop field: textDark

There is only one prop within button's theme: textDark. Which is also not being properly prioritized, i.e. global theme's textDark is always set irrespective of what is being set here.

Also the field name textDark isn't the most descriptive name. I suggest changing it to textColor or supporting a textLight field as well.

News component should be subtle

The component's element spacing is too symmetrical and takes too much attention due to the semi-bold font weight.

Suggestions:

• Remove extra padding and spacing,
• Right icon should be >,
• Fonts should be of normal or light weight.

News component (current implementation) in action:

See Stripe's News component as a reference.