From ba06a9f195ea51595d74bd986aa2a4a82a257833 Mon Sep 17 00:00:00 2001 From: kitajchuk Date: Wed, 6 Jul 2022 09:47:09 -0700 Subject: [PATCH] new version of jambonz-ui --- data/docs.yml | 2 +- markdown/docs/jambonz-ui/components.md | 73 ++++++--- markdown/docs/jambonz-ui/fonts-and-icons.md | 12 +- .../{getting-started.md => index.md} | 8 +- markdown/docs/jambonz-ui/styles.md | 17 +- package.json | 2 +- pages/jambonz-ui.js | 151 ++++++++++-------- pages/pricing.js | 4 +- pages/why.js | 4 +- src/components/footer.js | 2 +- src/components/markdown.js | 7 +- src/components/navi.js | 6 +- src/styles/_navi.scss | 6 +- src/styles/pages/_home.scss | 2 +- src/styles/pages/_why.scss | 2 +- yarn.lock | 8 +- 16 files changed, 179 insertions(+), 127 deletions(-) rename markdown/docs/jambonz-ui/{getting-started.md => index.md} (68%) diff --git a/data/docs.yml b/data/docs.yml index c9c3c20..2153e95 100644 --- a/data/docs.yml +++ b/data/docs.yml @@ -150,7 +150,7 @@ navi: title: Jambonz UI pages: - - path: getting-started + path: / title: Getting started - path: fonts-and-icons diff --git a/markdown/docs/jambonz-ui/components.md b/markdown/docs/jambonz-ui/components.md index b6f7322..f50d4f5 100644 --- a/markdown/docs/jambonz-ui/components.md +++ b/markdown/docs/jambonz-ui/components.md @@ -2,7 +2,7 @@ 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](/jambonz-ui/). -The component library itself is written in [TypeScript](https://www.typescriptlang.org/) so it supports jambonz apps also using TypeScript. More documentation on jambonz UI type definitions will be coming soon. +The component library itself is written in [TypeScript](https://www.typescriptlang.org/) so it supports jambonz apps also using TypeScript. Documentation on jambonz UI type definitions will be implemented as we go. The component library requires that some JS peer dependencies are met in your jambonz app. These are likely the most common, however it's worth noting that you can also use the library with [preact](https://preactjs.com/). In fact, this site is a `Next.js` app using `preact/compat` in place of the `React` packages. @@ -14,6 +14,51 @@ The component library requires that some JS peer dependencies are met in your ja } ``` +###### Button + +| Props | Value(s) | +|-------|----------| +| children | Will render any children | +| mainStyle | Currenly the only valid value is `hollow` | +| subStyle | Valid values are `dark`, `blue`, `teal`, `purple`, `white` | +| as | Render as either `next/link` or `react-router-dom` link | +| to | Use with `react-router-dom` link | +| href | Use with `next/link` | +| ...rest | Props are spread so you can pass extra attributes like `type="submit` for buttons | + +###### ButtonGroup + +| Props | Value(s) | +|-------|----------| +| children | Will render any children -- should be ` - - - + + + + + + +
+ + + + +
-
-
- - - - - +
+
+ + + + + + + + + + +
@@ -162,52 +179,52 @@ function KitOfParts({ textString }) {
-
+
- - - - + + + +
- - - - -
-
-
+
-
+ ); } diff --git a/pages/pricing.js b/pages/pricing.js index fc2d638..1838fed 100644 --- a/pages/pricing.js +++ b/pages/pricing.js @@ -21,7 +21,7 @@ function Structure({data}) {

{data.cta.text}

- @@ -54,7 +54,7 @@ function Services({data}) { })}
- diff --git a/pages/why.js b/pages/why.js index 3f12884..1e3c85a 100644 --- a/pages/why.js +++ b/pages/why.js @@ -48,7 +48,7 @@ function OS({data}) { {data.buttons.map((button) => { const BtnIcon = Icons[button.icon]; return ( - @@ -57,7 +57,7 @@ function OS({data}) {
drachtio - diff --git a/src/components/footer.js b/src/components/footer.js index 1a9d0e0..38128bd 100644 --- a/src/components/footer.js +++ b/src/components/footer.js @@ -27,7 +27,7 @@ function FooterItem({ obj }) { export default function Footer({ siteData }) { return ( -