next-static-site/markdown/docs/jambonz-ui/components.md

Components

The UI library would not be complete without some atomic components for use in your jambonz apps. Currently there are components for normalized typography, iconography and buttons. As jambonz frontend development continues to mature new use cases will become viable candidates to incorporate into this UI kit—form elements being the most notable upcoming candidates. To see all the components in action, visually in one place you can go here.

The component library requires that some JS peer dependencies are met in your jambonz app. The component library itself is also written in TypeScript so it supports jambonz apps also using TypeScript.

"peerDependencies": {
  "react": ">=18.2.0",
  "react-dom": ">=18.2.0",
  "react-feather": ">=2.0.9"
}

Using components

You can import available components from the package into your jambonz app JS.

import { ButtonGroup, Button, Icon } from 'jambonz-ui';

function MyComponent() {
  return (
    <ButtonGroup className="pad">
      <Button mainStyle="pill">
        <Icons.GitHub />
        <span>github.com/jambonz</span>
      </Button>
      <Button mainStyle="pill">
        <Icons.GitHub />
        <span>github.com/drachtio</span>
      </Button>
    </ButtonGroup>
  );
}

Button with Link

The Button component takes a few props that are specific to rendering a link element, <a>, with button styles. If you just need a button, you can ignore these props. But if you would like links to be styled like buttons (CTAs) and you want them to route within the React context you can do that. The distinction between which one has to do with passing either the to or the href props that are passed on to the Link component in question.

Using the Link prop with react-router-dom.

import { Link } from 'react-router-dom';
import { Button } from 'jambonz-ui';

function MyComponent() {
  return (
    <Button
      as={Link}
      to="/someurl/"
      subStyle="dark">
        Some text
    </Button>
  );
}

Using the Link prop with next/link for Next.js.

import Link from 'next/link';
import { Button } from 'jambonz-ui';

function MyComponent() {
  return (
    <Button
      as={Link}
      href="/someurl/"
      subStyle="dark">
        Some text
    </Button>
  );
}

Importing your icon set

By default the UI library doesn't import any icons from feathericons, however it declares react-feather as a peer dependency. This means you can import just the icons you are using in your jambonz app. This allows for tree-shaking to take effect and ensures we don't load extra bloat into our dist JS that isn't explicitly used. The Icon component renders a stylized design icon with many visual variations.

You can see how we import the feather icons used on this site here. But for a quick reference here is a compressed example.

First we create a module in our jambonz app and import the icons we would like to use and export them for use in the rest of the app.

import {
  X,
  Lock,
  Send,
  Menu,
  Phone,
  Heart,
  ExternalLink,
  // ...
} from 'react-feather';

export const Icons = {
  X,
  Lock,
  Send,
  Menu,
  Phone,
  Heart,
  ExternalLink,
  // ...
};

export default Icons;

Then we can use these icons both inline and with the Icon component for stylized designer icons.

import { Icons, Heart } from './my-icons';
import { Icon } from 'jambonz-ui';

function MyComponent() {
  return (
    <>
      <Icon mainStyle="pill" subStyle="dark">
        <Icons.Heart />
      </Icon>
      <Link href="https://www.behance.net/gallery/60530395/Objectivity-Free-Font-Family">
        <a className="i" target="_blank">
          <span>design</span>
          <Icons.ExternalLink />
        </a>
      </Link>
    </>
  );
}

Atomic components

Component	Props
Icon	{ children, subStyle, mainStyle, ...rest }
IconGroup	{ children, className, set }
Button	{ children, to, href, as, subStyle, mainStyle, ...rest }
ButtonGroup	{ children, className }

Typography components

Component	Props
H1	{ children, ...rest }
H2	{ children, ...rest }
H3	{ children, ...rest }
H4	{ children, ...rest }
H5	{ children, ...rest }
H6	{ children, ...rest }
P	{ children, ...rest }
M	{ children }
MS	{ children }
MXS	{ children }

Prev: Styles