@the-ksquare-group/vuh-stencil-components
v1.1.0
Published
The Ksquare Group's design system, built on Stencil JS, which contains reusable web components for use in multiple front-end libraries.
Downloads
3
Maintainers
Readme
Vuh Design System
Vuh is a project created with the purpose of having a common design system for our company, allowing us to do rapid prototypes. It is comprised of web components that can be used on any of the major JS front-end frameworks. This is possible thanks to Stencil JS, a compiler that generates Web Components (more specifically, Custom Elements) and builds high performance web apps.
Stencil combines the best concepts of the most popular frameworks into a simple build-time tool:
- Virtual DOM
- Async Rendering
- Reactive Data Binding
- Typescript (yes, configured by default!)
- JSX
For the small minority of browsers that do not support modern browser features and APIs, Stencil will automatically polyfill them on-demand.
It also has a tiny API which doesn't need to be learned and re-learned, but rather heavily relies on web standards.
So, if you've worked with React or any other front-end library, you'll feel very comfortable!
Setting Up the Design System in React
- Create a new file on your React project's root folder. For this example, we'll call the new file
register-web-components.ts
, but feel free to name it however you like.
import { defineCustomElements, JSX as LocalJSX, } from '@the-ksquare-group/vuh-stencil-components/loader';
import '@the-ksquare-group/vuh-stencil-components/www/build/vuh-stencil.css';
import { DetailedHTMLProps, HTMLAttributes } from 'react';
type StencilProps<T> = {
[P in keyof T]?: Omit<T[P], "ref"> | HTMLAttributes<T>;
};
type ReactProps<T> = {
[P in keyof T]?: DetailedHTMLProps<HTMLAttributes<T[P]>, T[P]>;
};
type StencilToReact<
T = LocalJSX.IntrinsicElements,
U = HTMLElementTagNameMap
> = StencilProps<T> & ReactProps<U>;
declare global {
export namespace JSX {
interface IntrinsicElements extends StencilToReact {}
}
}
defineCustomElements(window);
- On your React project's index file, import the file you just created.
import './register-web-components';
Setting Up the Design System in Vue
- Add the following to your Vue project's
main.js
file:
import {
applyPolyfills,
defineCustomElements
} from '@the-ksquare-group/vuh-stencil-components/loader';
import '@the-ksquare-group/vuh-stencil-components/www/build/vuh-stencil.css';
// if you want theming options, include your css path
import './custom-global.css';
applyPolyfills().then(() => {
defineCustomElements();
});
Vue.config.ignoredElements = [/^k-/];
Theming CSS Variables
:root {
--vuh-primary-color: #1b8df2;
--vuh-primary-800: #0672d1;
--vuh-primary-700: #0b7de0;
--vuh-primary-600: #1986e6;
--vuh-primary-500: #1b8df2;
--vuh-primary-400: #339bf5;
--vuh-primary-300: #45a3f5;
--vuh-primary-200: #56abf5;
--vuh-primary-100: #7fbef5;
--vuh-primary-300-rgb: 69, 163, 245;
--vuh-primary-100-rgb: 127, 190, 245;
}
CSS Utilities
Text Alignment
| Class | Style Rule | Description | | --------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | .k-text-left | text-align: left | The inline contents are aligned to the left edge of the line box. | | .k-text-right | text-align: right | The inline contents are aligned to the right edge of the line box. | | .k-text-start | text-align: start | The same as text-left if direction is left-to-right and text-right if direction is right-to-left. | | .k-text-end | text-align: end | The same as text-right if direction is left-to-right and text-left if direction is right-to-left. | | .k-text-center | text-align: center | The inline contents are centered within the line box. | | .k-text-justify | text-align: justify | The inline contents are justified. Text should be spaced to line up its left and right edges to the left and right edges of the line box, except for the last line. | | .k-text-wrap | white-space: normal | Sequences of whitespace are collapsed. Newline characters in the source are handled as other whitespace. Breaks lines as necessary to fill line boxes. | | .k-text-nowrap | white-space: nowrap | Collapses whitespace as for normal, but suppresses line breaks (text wrapping) within text. |
Text Transformation
| Class | Style Rule | Description | | ------------------ | -------------------------- | ------------------------------------------------------------------ | | .k-text-uppercase | text-transform: uppercase | Forces all characters to be converted to uppercase. | | .k-text-lowercase | text-transform: lowercase | Forces all characters to be converted to lowercase. | | .k-text-capitalize | text-transform: capitalize | Forces the first letter of each word to be converted to uppercase. |
Element Padding
| Class | Style Rule | Description | | --------------------- | -------------------- | -------------------------------------- | | .k-padding | padding: 16px | Applies padding to all sides. | | .k-padding-top | padding-top: 16px | Applies padding to the top. | | .k-padding-left | padding-left: 16px | Applies padding to the left. | | .k-padding-right | padding-right: 16px | Applies padding to the right. | | .k-padding-bottom | padding-bottom: 16px | Applies padding to the bottom. | | .k-padding-vertical | padding: 16px 0 | Applies padding to the top and bottom. | | .k-padding-horizontal | padding: 0 16px | Applies padding to the left and right. | | .k-no-padding | padding: 0 | Applies no padding to all sides. |
Element Margin
| Class | Style Rule | Description | | -------------------- | ------------------- | ------------------------------------- | | .k-margin | margin: 16px | Applies margin to all sides. | | .k-margin-top | margin-top: 16px | Applies margin to the top. | | .k-margin-left | margin-left: 16px | Applies margin to the left. | | .k-margin-right | margin-right: 16px | Applies margin to the right. | | .k-margin-bottom | margin-bottom: 16px | Applies margin to the bottom. | | .k-margin-vertical | margin: 16px 0 | Applies margin to the top and bottom. | | .k-margin-horizontal | margin: 0 16px | Applies margin to the left and right. | | .k-no-margin | margin: 0 | Applies no margin to all sides. |
Flex Container Properties
| Class | Style Rule | Description | | -------------------------- | ------------------------------ | --------------------------------------------------------------------------- | | .k-justify-content-start | justify-content: flex-start | Items are packed toward the start on the main axis. | | .k-justify-content-end | justify-content: flex-end | Items are packed toward the end on the main axis. | | .k-justify-content-center | justify-content: center | Items are centered along the main axis. | | .k-justify-content-around | justify-content: space-around | Items are evenly distributed on the main axis with equal space around them. | | .k-justify-content-between | justify-content: space-between | Items are evenly distributed on the main axis. | | .k-justify-content-evenly | justify-content: space-evenly | Items are distributed so that the spacing between any two items is equal. | | .k-align-items-start | align-items: flex-start | Items are packed toward the start on the cross axis. | | .k-align-items-end | align-items: flex-end | Items are packed toward the end on the cross axis. | | .k-align-items-center | align-items: center | Items are centered along the cross axis. | | .k-align-items-baseline | align-items: baseline | Items are aligned so that their baselines align. | | .k-align-items-stretch | align-items: stretch | Items are stretched to fill the container. | | .k-nowrap | flex-wrap: nowrap | Items will all be on one line. | | .k-wrap | flex-wrap: wrap | Items will wrap onto multiple lines, from top to bottom. | | .k-wrap-reverse | flex-wrap: wrap-reverse | Items will wrap onto multiple lines, from bottom to top. |
Flex Item Properties
| Class | Style Rule | Description | | ---------------------- | ---------------------- | ---------------------------------------------------------------------- | | .k-align-self-start | align-self: flex-start | Item is packed toward the start on the cross axis. | | .k-align-self-end | align-self: flex-end | Item is packed toward the end on the cross axis. | | .k-align-self-center | align-self: center | Item is centered along the cross axis. | | .k-align-self-baseline | align-self: baseline | Item is aligned so that its baseline aligns with other item baselines. | | .k-align-self-stretch | align-self: stretch | Item is stretched to fill the container. | | .k-align-self-auto | align-self: auto | Item is positioned according to the parent's align-items value. |
Components
In alphabetical order
1. K-Avatar
k-avatar
is Vuh's web component for avatars/profile pictures. It optionally receives a prop called size
which can either be small
, medium
or large
. If no size
is specified, the component's size will be set to small
by default.
It is suggested to use Vuh's k-img
component as its child.
2. K-Banner Family
2.1. K-Banner
k-banner
is Vuh's web component for banners, used when a website needs to display one on an action's success or failure. As such, it receives a prop named type
which can either be success
or error
. If no type
is specified, it will be set as success
by default.
It is strongly encouraged to use Vuh's k-banner-text
component as its child to keep the design's consistency.
2.2. K-Banner-Text
k-banner-text
is Vuh's web component for text on banners.
It should be exclusively used as a child to k-banner
, lest it may not work as described here.
3. K-Breadcrumbs Family
3.1. K-Breadcrumbs
k-breadcrumbs
is Vuh's web component for a breadcrumbs container.
It must contain instances of k-breadcrumbs-item
for it to work properly.
3.2. K-Breadcrumbs-Item
k-breadcrumbs-item
is Vuh's web component for breadcrumbs items.
It must be used exclusively as a child of k-breadcrumbs
for it to work properly.
4. K-Button
k-button
is Vuh's web component for buttons.
It must receive text as its child for the button not to be empty.
5. K-Card
k-card
is Vuh's web component for cards.
It acts a general purpose container which can receive any elements it may require as its children.
6. K-Carousel Family
6.1. K-Carousel
k-carousel
is Vuh's web component for carousels.
It must contain instances of k-carousel-item
for it to work properly.
6.2. K-Carousel-Item
k-carousel-item
is Vuh's web component for carousel items.
Although it can receive any element as its child, it is strongly recommended to use k-img
to ensure optimal results.
7. K-Checkbox
k-checkbox
is Vuh's web component for checkboxes.
It receives text as its child, and if no child is given, the checkbox's accompanying text is set to "Default".
A value
should be given to the checkbox, so the checkbox's event has an event.target.value
.
On Vue, it must use @input
to work.
8. K-Collapse-Menu Family
8.1. K-Collapse-Menu
k-collapse-menu
is Vuh's web component for collapsible menus. It acts as the component family's main container.
It must receive two elements for it to work properly: k-collapse-parent
and k-collapse-list
.
8.2. K-Collapse-Parent
k-collapse-parent
acts as the element upon which a user's hover shows the otherwise hidden k-collapse-list
.
It can receive any element as its own child.
8.3. K-Collapse-List
k-collapse-list
is the element that is displayed when a user hovers over k-collapse-parent
.
It must receive instances of k-collapse-item
for it to work as intended.
8.4. K-Collapse-Item
k-collapse-item
is the element that is displayed inside of k-collapse-list
.
As such, it must be used exclusively as a child of k-collapse-list
.
9. K-Content
k-content
is Vuh's web component for a generic container.
It can receive any elements as its children.
10. K-Dialog Family
10.1. K-Dialog
k-dialog
is Vuh's web component for dialogs. It acts as the main container for its family of components.
It must receive two components as its children for it to work properly: k-dialog-content
and k-dialog-actions
.
10.2. K-Dialog-Actions
k-dialog-actions
is Vuh's web component for actions on a dialog.
It is recommended to use instances of k-button
as its children.
10.3. K-Dialog-Body
k-dialog-body
is Vuh's web component for the text to be displayed inside of k-dialog-content
.
It must be exclusively used as a child to k-dialog-content
.
10.4. K-Dialog-Content
k-dialog-content
is Vuh's web component for the content inside of a dialog.
It must exclusively be used as a child to k-dialog
and its children must be k-dialog-header
and k-dialog-body
.
10.5. K-Dialog-Header
k-dialog-header
is Vuh's web component for the header/title inside of a dialog's content.
It must exclusively be used as a child to k-content
.
11. K-Divider
k-divider
is Vuh's web component for an horizontal divider.
It receives no children.
12. K-Drawer
k-drawer
is Vuh's web component for a drawer/sidebar.
It can receive whichever element it might need to display, as the component works as a container for the sidebar/drawer's contents.
13. K-Dropdown Family
13.1. K-Dropdown
k-dropdown
is Vuh's web component for a dropdown.
It receives instances of k-dropdown-item
as its children, which are then displayed when the component is clicked.
13.2. K-Dropdown-Item
k-dropdown-item
is Vuh's web component for a dropdown's item/option.
It must exclusively be used as a children to k-dropdown
.
On Vue, it must use @input
to work.
14. K-Elevation
k-elevation
is Vuh's web component for a container with an elevation/shadow.
It can receive any elements it might need as its children.
15. K-Grid
15.1. K-Grid
k-grid
is Vuh's web component for the main container of a grid system.
It must exclusively receive instances of k-row
for it to work properly.
15.2. K-Row
k-row
is Vuh's web component for a row in a grid system.
It must exclusively be used as a child to k-grid
and its children can only be instances of k-column
.
15.3. K-Column
k-column
is Vuh's web component for a column in a grid system.
It must exclusively be used as children to k-row
.
16. K-Icon
k-icon
is Vuh's web component for icons.
It should receive no children, as its content is determined by the name
prop.
17. K-Img
k-img
is Vuh's web component for an image element.
It should receive no children, as its content is determined by a prop.
18. K-Input
k-input
is Vuh's web component for an input field.
It should receive no children, as its appearence and contents are determined by props.
On React, it must use the onInput
event to work.
On Vue, it must use @input
to work.
19. K-Label
k-label
is Vuh's web component for a label tag/element.
It receives text as its child.
20. K-List-Group Family
20.1. K-List-Group
k-list-group
is Vuh's web component for a container of list items.
It should exclusively receive instances of k-list-item
as its children.
20.2. K-List-Item
k-list-item
is Vuh's web component for a list's item.
It should exclusively be used as a child to k-list-group
.
21. K-Menu Family
21.1. K-Menu
k-menu
is Vuh's web component for a menu.
It can receive k-menu-content
and k-menu-nav
as its children.
21.2. K-Menu-Content
k-menu-content
is Vuh's web component for the content inside a menu's toolbar.
It can receive whichever element it might need to work as needed.
21.3. K-Menu-Nav
k-menu-nav
is Vuh's web component for a menu's selectable tabs.
It is recommended to use k-tab
as its child, but not necessarily.
22. K-Modal
k-modal
is Vuh's web component for a modal.
It can receive any element it might need to populate its content.
23. K-Notification Family
23.1. K-Notification
k-notification
is Vuh's web component for notifications' main container. It displays all notifications upon being hovered upon.
It must receive k-notification-group
as its child.
23.2. K-Notification-Group
k-notification-group
is Vuh's web component for a group of notification items, which is displayed upon the hovering of k-notification
.
It must exclusively receive instances of k-notification-item
as its children.
23.3. K-Notification-Item
k-notification-item
is Vuh's web component for a notification item.
It must exclusively be used as a child to k-notification-group
.
24. K-Paginator
k-paginator
is Vuh's web component for a paginator.
It receives no children, as its content is determined by props.
25. K-Progress-Bar
k-progress-bar
is Vuh's web component for a progress bar.
It receives no children, as its content is determined by props.
26. K-Radio-Button
26.1 K-Radio-Button
k-radio-button
is Vuh's web component for a radio button.
It can receive text as its child to be displayed at the side of the radio button. If no child is given, the text is set to be "Default."
A value
should be given to the radio button, so the radio button's event has an event.target.value
.
On Vue, it must use @input
to work.
26.1 K-Radio-Button-Group
k-radio-button-group
is an optional container for instances of k-radio-button
, which allows for only one k-radio-button
instance to be selected at a time.
As its name implies, it should only receive instances of k-radio-button
as its children.
27. K-Search-Bar
k-search-bar
is Vuh's web component for a search bar.
It receives no children, as its contents are determined by props.
On React, it must use the onInput
event to work.
28. K-Snackbar
k-snackbar
is Vuh's web component for a snackbar.
It can receive an instance of a k-button
as a child, so the button can be used to fire an action upon being clicked.
29. K-Spinner
k-spinner
is Vuh's web component for a spinner.
It receives no children.
30. K-Stepper Family
30.1. K-Stepper
k-stepper
is Vuh's web component for a stepper.
It must receive k-stepper-header
and k-stepper-content
as its children.
30.2. K-Stepper-Content
k-stepper-content
is Vuh's web component for a stepper's content.
It should only receive an instance of k-stepper-content-item
as it child.
30.3. K-Stepper-Content-Item
k-stepper-content-item
is Vuh's web component for a stepper content's item.
It should only be used as a child to k-stepper-content
.
30.4. K-Stepper-Header
k-stepper-header
is Vuh's web component for a stepper's header.
It should only receive an instance of k-stepper-header-item
as its child.
30.5. K-Stepper-Header-Item
k-stepper-header-item
is Vuh's web component for a stepper header's item.
It should only be used as a child to k-stepper-header
.
31. K-Switch
k-switch
is Vuh's web component for a switch.
It receives no children, as its appearence is determined by props.
32. K-Tab Family
32.1. K-Tab
k-tab
is Vuh's web component for a container of tabs.
It must only receive instances of k-tab-item
as its children.
32.2. K-Tab-Item
k-tab-item
is Vuh's web component for a tab item.
It must only be used as a child of k-tab
.
33. K-Table Family
33.1. K-Table
k-table
is Vuh's web component for a table's container.
It must only receive instances of k-table-row
as its children.
33.2. K-Table-Column
k-table-column
is Vuh's web component for a table's regular column.
It should only be used as a child to instances k-table-row
whose type are not header
.
33.3. K-Table-Header-Column
k-table-header-column
is Vuh's web component for a table header's column.
It should only be used as a child to an instance of k-table-row
whose type is header
.
33.4. K-Table-Row
k-table-row
is Vuh's web component for a table's row.
It should only be used as a child to k-table
and can receive instances of k-table-column
or k-table-header-column
depending on its type
prop.
34. K-Tag
k-tag
is Vuh's web component for a tag.
It can either receive plain text or an instance of k-label
as its child; the second option is encouraged to keep the design's consistency.
35. K-Text-Field
k-text-field
is Vuh's web component for a text field.
It receives no children, as its content is determined by its props.
On React, it must use the onInput
event to work.
36. K-Tooltip
k-tooltip
is Vuh's web component for a tooltip. It wraps the element that, upon being hovered upon, shows the tooltip.
It receives an element as its children, and its content is determined by a prop.
37. K-Typography
k-typography
is Vuh's web component for many different kinds of texts. Its look is determined by prop.
It can either receive plain text as its child, and have its child's appearence determined by the component's variant
and color
props, or receive one of the many text html tags as its children, rendering the use of the variant
prop unnecessary.