BestPrice UI Kit
Getting started
Install
yarn add @thebestco/ui-kit styled-components
Storybook
yarn storybook
Testing
yarn test
Build icons from Figma
The icons are exported from Bestprice Figma Icons
yarn build:icons
Sync colors from Figma
The colors are exported from Bestprice Figma colors
Those colors are also in-sync with BestPrice.gr, bp-scripts and more repos.
Peer dependencies
UI kit uses styled-components as peer dependency.
You should install styled-components
in your project in order to execute the ui-kit.
Designs
All the components are designed in BestPrice Figma ui-kit page
Theme
UI-kit is fully customizable, the user can configured most of the dimensions and all of the colors.
Take a look on the bestprice theme preset src/theme/bestPrice/index.ts
.
breakpoints: {
[string]: {
fonts: {
small: {
size: string,
lineHeight: string,
fontWeight: string,
},
...
},
inputs: {
textarea: {
padding: string,
},
}
buttons: {
primary: {
padding: string,
fontWeight: string,
borderRadius: string,
},
...
},
}
supportedBreakpoints: [string],
heuristicBreakpoints: {
small: [string],
medium: [string],
large: [string],
},
sizes: {
default: [number],
},
palette: {
font: {
light: [string],
},
inputBg: {
light: [string],
dark: [string],
},
inputBorder: {
light: [string],
dark: [string],
},
...
},
colors: {},
darkDefaults: {},
opacity: [number],
breakpoints
The breakpoints object contains dimensions for every breakpoint. The smaller breakpoint is the base and the rest breakpoints override it. Hence, if only the smaller breakpoint exist, all the breakpoints will have the smaller presets.
palette
Colors are always keys from the theme.color
.
The color object (palette.[type].{color}
) schema can be
- A simple string that is always the specific color.
- An
{light: string}
object, that gives the specific color in light theme, and gives the corresponding dark default in the dark theme. - An
{light: string, dark: string}
object,that gives the specific color in light theme, and the specific color in the dark theme.
Colors
An object that maps the color name to the hex value. For instance,
colors: {
velvet: '#dfafb4',
porcelain: '#f5f7f8',
codGray: '#111111'
}
darkDefaults
An object that maps the color name to the color key name in the dark theme. If a color is missing, its dark variation will be the same value. For instance,
darkDefaults: {
velvet: 'codGray'
}
Providers
Responsive provider
Provides hooks and utilities regarding the current viewport dimensions.
const breakpoint = useBreakpoint(); // for instance 'xs' | 'sm' | 'md'
const {isXS, isSM, isMD, ...} = useResponsive();
const {isSmall, isMedium, isLarge} = useHeuristic();
Theme provider
Provides the evaluated theme that is required to the ui-kit components.
The theme is propagated using the styled-components ThemeProvider
const theme = useTheme();
Components
- Box
- Buttons
- Primary
- Secondary
- Nav
- Naked
- Icons
- Inputs
- Checkbox
- Field
- RadioButton
- TextArea
- Typography
- Title
- Primary
- Secondary
- Tertiary
- Subheading
- Text
- Small
- Paragraph