ben.carrasco/next-static-site
1
0
Fork 0
mirror of https://github.com/jambonz/next-static-site.git synced 2026-07-24 13:02:22 +00:00
Code Issues Packages Projects Releases Wiki Activity

new version of jambonz-ui

Browse Source
This commit is contained in:
kitajchuk
2022-07-06 09:47:09 -07:00
parent 0511e0a7f4
commit ba06a9f195
16 changed files with 179 additions and 127 deletions
Download Patch File Download Diff File Expand all files Collapse all files
data/docs.yml
+1 -1
View File
@@ -150,7 +150,7 @@ navi:
title: Jambonz UI
pages:
-
path: getting-started
path: /
title: Getting started
-
path: fonts-and-icons
markdown/docs/jambonz-ui/components.md
+47 -26
View File
@@ -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 `<Button>`s |
| className | Any valid `className` string |
###### Icon
| 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` |
| ...rest | Props are spread so you can pass extra attributes like `type="submit` for buttons |
###### IconGroup
| Props | Value(s) |
|-------|----------|
| children | Will render any children -- should be `<Icon>`s |
| className | Any valid `className` string |
| set | Boolean, will add `ico--set` className if present |
###### Typography H[1-6], P, M, MS and MXS
All of these accept the same type of props with the exception of `M`, `MS` and `MXS` not spreading `rest` props.
| Props | Value(s) |
|-------|----------|
| children | Will render any children |
| ...rest | Props are spread so you can pass extra attributes like `className`. Note that `M`, `MS` and `MXS` don't support this. |
##### Using components
You can import available components from the package into your jambonz app JS.
@@ -37,7 +82,7 @@ function MyComponent() {
}
```
##### Button with Link
##### Notes on Button as Link (polymorphic)
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](https://reactjs.org/) 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.
@@ -136,30 +181,6 @@ function MyComponent() {
}
```
###### 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 }` |
<p class="flex">
<a href="/docs/jambonz-ui/styles/">Prev: Styles</a>
<span>&nbsp;</span>
markdown/docs/jambonz-ui/fonts-and-icons.md
+11 -1
View File
@@ -17,6 +17,16 @@ The point of the Jambonz UI library is for jambonz apps to be "on brand" and sha
Fonts can be copied from the package to your static public directory. This can be done manually, at installation time or during app bundling depending on your preference. The package provides a singular `public` directory that consists of all static assets: CSS, JS and fonts. You can literally just copy these assets into your jambonz applications static directory if you want to.
You can even support browser `preload` for the fonts which will optimize the performance even more since the UI library ships with `font-display: swap` already. In your HTML `<head>` you can add some variation of this depending on which fonts render above the fold.
```html
<link rel="preload" href="/fonts/objectivity-medium-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
<link rel="preload" href="/fonts/objectivity-bold-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
<link rel="preload" href="/fonts/objectivity-regular-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
<link rel="preload" href="/fonts/objectivity-boldslanted-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
<link rel="preload" href="/fonts/objectivity-regularslanted-webfont.woff2" crossOrigin="anonymous" as="font" type="font/woff" />
```
##### Examples
For this [Next.js](https://nextjs.org/) app you're on right now we do this with the `postinstall` script in the `package.json` file. We are also opting to ignore the `fonts` directory inside of `public` since the fonts are always copied during `install` which works locally and in CI.
@@ -70,6 +80,6 @@ Jambonz UI utilizes [feathericons](https://feathericons.com/), an open-source ic
You can see how we import the feather icons used on this site [here](https://github.com/jambonz/next-static-site/blob/main/src/components/icons.js).
<p class="flex">
<a href="/docs/jambonz-ui/getting-started/">Prev: Getting started</a>
<a href="/docs/jambonz-ui/">Prev: Getting started</a>
<a href="/docs/jambonz-ui/styles/">Next: Styles</a>
</p>
markdown/docs/jambonz-ui/getting-started.md → markdown/docs/jambonz-ui/index.md
+4 -4
View File
@@ -1,6 +1,6 @@
# Jambonz UI
The Jambonz UI library is a minimal, light-weight UI design package for developing frontends for jambonz apps. It's a kit-of-parts including fonts, a small set of CSS styles, a source set of SASS styles and JavaScript components. Whether you're developing a custom dev stack with tools like [webpack](https://webpack.js.org/) or using a framework (like [vite](https://vitejs.dev/)) you should have no issues utilizing the resources available in the Jambonz UI library package. You can view the available UI elements from the library on this site [here](/jambonz-ui/). Also—this site is using the UI library!
A minimal, light-weight UI design package for developing frontends for jambonz apps. It's a kit-of-parts including fonts, a small set of CSS styles, a source set of SASS styles and JavaScript components. Whether you're developing a custom dev stack with tools like [webpack](https://webpack.js.org/) or using a framework (like [vite](https://vitejs.dev/)) you should have no issues utilizing the resources available in the Jambonz UI library package. You can view the available UI elements from the library on this site [here](/jambonz-ui/). Also—this site is using the UI library!
What this is not is an overopinionated UI framework. Jambonz UI aims to provide foundational design materials like colors, fonts and typography as well as [atomic design](https://bradfrost.com/blog/post/atomic-web-design/) materials like buttons, icons etc. Currently the library is very lean but is expected to grow thoughtfully as jambonz frontend development continues to mature along this line of thinking.
@@ -8,9 +8,9 @@ A primary goal of the library is to have a small footprint. Current sizes:
| Output format | CSS size | JS size |
|---------------|----------|---------|
| Minified and Gzipped | `2 KB` | `631 bytes` |
| Minified | `11 KB` | `2 KB` |
| Compiled | `15 KB` | `4 KB` |
| Minified and Gzipped | `2 KB` | `635 bytes` |
| Minified | `10 KB` | `2 KB` |
| Compiled | `14 KB` | `4 KB` |
##### Installation
markdown/docs/jambonz-ui/styles.md
+9 -8
View File
@@ -23,20 +23,21 @@ Most of the styles are utilized directly by the [components](/dacs/jambonz-ui/co
| CSS selector | Application |
|--------------|-------------|
| `bg--jambonz` | Applies main brand color as element `background-color` |
| `bg--jam` | Applies main brand color as element `background-color` |
| `bg--black` | Applies color as element `background-color` |
| `bg--charcoal` | Applies color as element `background-color` |
| `bg--dark` | Applies color as element `background-color` |
| `bg--grey` | Applies color as element `background-color` |
| `bg--pink` | Applies color as element `background-color` |
| `bg--blue` | Applies color as element `background-color` |
| `bg--purple` | Applies color as element `background-color` |
| `bg--teal` | Applies color as element `background-color` |
| `color--jambonz` | Applies main brand color as element `color` |
| `color--blue` | Applies color as element `color` |
| `color--purple` | Applies color as element `color` |
| `color--teal` | Applies color as element `color` |
| `txt--jam` | Applies main brand color as element `color` |
| `txt--blue` | Applies color as element `color` |
| `txt--purple` | Applies color as element `color` |
| `txt--teal` | Applies color as element `color` |
| `txt--red` | Applies color as element `color` |
| `txt--green` | Applies color as element `color` |
| `wrap` | Center contains content with a `max-width` and default left/right `padding` |
| `wrap-text` | Flex center justifies text—combine with a `max-width` |
| `pad` | Applies normalized top/bottom `padding` |
| `pad-b` | Applies normalized bottom `padding` |
| `pad-t` | Applies normalized top `padding` |
@@ -61,7 +62,7 @@ As mentioned you can use either the whole kit or just the variables and mixins.
```scss
// This loads the entire SASS lib
// You should use this in your root SASS entry point
@use 'jambonz-ui/src/styles/index.scss';
@use 'jambonz-ui/src/styles/index';
// In your local SASS modules you can use the vars and mixins from the UI library
@use 'jambonz-ui/src/styles/vars' as ui-vars;
package.json
+1 -1
View File
@@ -24,7 +24,7 @@
],
"license": "MIT",
"dependencies": {
"jambonz-ui": "^0.0.6",
"jambonz-ui": "^0.0.7",
"nanoid": "^3.1.22",
"next": "^12.1.4",
"next-plugin-preact": "^3.0.6",
pages/jambonz-ui.js
+84 -67
View File
@@ -8,67 +8,67 @@ import Layout, { Hero } from '../src/components/layout';
function KitOfParts({ textString }) {
return (
<div className="kop" style={{ textAlign: 'center' }}>
<section className="kop" style={{ textAlign: 'center' }}>
{/** Typography */}
<div className="kop__typography">
<div className="pad bg--black">
<div className="wrap">
<div className="wrap-text">
<H1 style={{ maxWidth: '1024px' }}>H1: {textString}</H1>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<H1 style={{ maxWidth: '1024px' }}><span>H1:</span> {textString}</H1>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H2 style={{ maxWidth: '850px' }}>H2: {textString}</H2>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<H2 style={{ maxWidth: '850px' }}><span>H2:</span> {textString}</H2>
</div>
</div>
<div className="pad bg--pink">
<div className="wrap">
<div className="wrap-text">
<H3 style={{ maxWidth: '760px' }}>H3: {textString}</H3>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<H3 style={{ maxWidth: '760px' }}><span>H3:</span> {textString}</H3>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H4 style={{ maxWidth: '760px' }}>H4: {textString}</H4>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<H4 style={{ maxWidth: '760px' }}><span>H4:</span> {textString}</H4>
</div>
</div>
<div className="pad bg--grey">
<div className="wrap">
<div className="wrap-text">
<H5 style={{ maxWidth: '660px' }}>H5: {textString}</H5>
<div style={{ display: 'flex', justifyContent: 'center' }}>
<H5 style={{ maxWidth: '660px' }}><span>H5:</span> {textString}</H5>
</div>
</div>
</div>
<div className="wrap">
<div className="wrap-text pad">
<H6 style={{ maxWidth: '620px' }}>H6: {textString}</H6>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<H6 style={{ maxWidth: '620px' }}><span>H6:</span> {textString}</H6>
</div>
<div className="wrap-text pad">
<P style={{ maxWidth: '600px' }}>P: {textString}</P>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P style={{ maxWidth: '600px' }}><span>P:</span> {textString}</P>
</div>
<div className="wrap-text pad">
<P>P: With a <strong>strong</strong> element</P>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P><span>P:</span> With a <strong>strong</strong> element</P>
</div>
<div className="wrap-text pad">
<P>P: With a <strong className="med">medium</strong> element</P>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P><span>P:</span> With a <strong className="med">medium</strong> element</P>
</div>
<div className="wrap-text pad">
<P>P: With an <em>emphasized</em> element</P>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P><span>P:</span> With an <em>emphasized</em> element</P>
</div>
<div className="wrap-text pad">
<P>P: <span className="color--blue">With</span> <span className="color--teal">colored</span> <span className="color--purple">text</span></P>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<P><span>P:</span> <span className="txt--blue">With</span> <span className="txt--teal">colored</span> <span className="txt--purple">text</span></P>
</div>
<div className="wrap-text pad">
<M style={{ maxWidth: '480px' }}>M: {textString}</M>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<M style={{ maxWidth: '480px' }}><span>M:</span> {textString}</M>
</div>
<div className="wrap-text pad">
<MS style={{ maxWidth: '480px' }}>MS: {textString}</MS>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<MS style={{ maxWidth: '480px' }}><span>MS:</span> {textString}</MS>
</div>
<div className="wrap-text pad">
<MXS style={{ maxWidth: '480px' }}>MXS: {textString}</MXS>
<div className="pad" style={{ display: 'flex', justifyContent: 'center' }}>
<MXS style={{ maxWidth: '480px' }}><span>MXS:</span> {textString}</MXS>
</div>
</div>
</div>
@@ -79,7 +79,7 @@ function KitOfParts({ textString }) {
{Object.keys(Icons).map((icon) => {
const SvgIcon = Icons[icon];
return (
<Icon key={icon} mainStyle="fill">
<Icon key={icon}>
<SvgIcon />
</Icon>
);
@@ -88,45 +88,48 @@ function KitOfParts({ textString }) {
</div>
<div className="pad wrap">
<IconGroup set>
<Icon mainStyle="fill" subStyle="dark">
<Icon subStyle="dark">
<Icons.MapPin />
</Icon>
<Icon mainStyle="fill" subStyle="purple">
<Icon subStyle="purple">
<Icons.MapPin />
</Icon>
<Icon mainStyle="fill" subStyle="teal">
<Icon subStyle="teal">
<Icons.MapPin />
</Icon>
<Icon mainStyle="fill" subStyle="blue">
<Icon subStyle="blue">
<Icons.MapPin />
</Icon>
</IconGroup>
</div>
<div className="pad wrap">
<IconGroup set>
<Icon mainStyle="pill" subStyle="dark">
<Icon mainStyle="hollow" subStyle="dark">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill" subStyle="purple">
<Icon mainStyle="hollow" subStyle="purple">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill" subStyle="teal">
<Icon mainStyle="hollow" subStyle="teal">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill" subStyle="blue">
<Icon mainStyle="hollow" subStyle="blue">
<Icons.Heart />
</Icon>
<Icon mainStyle="pill">
<Icon mainStyle="hollow">
<Icons.Heart />
</Icon>
</IconGroup>
</div>
<div className="bg--charcoal">
<div className="pad wrap">
<Icon mainStyle="pill" subStyle="white">
<div className="bg--dark">
<IconGroup set className="pad wrap">
<Icon mainStyle="hollow" subStyle="white">
<Icons.Heart />
</Icon>
</div>
<Icon subStyle="white">
<Icons.Heart />
</Icon>
</IconGroup>
</div>
</div>
{/** Buttons */}
@@ -134,20 +137,34 @@ function KitOfParts({ textString }) {
<div className="wrap">
<div className="pad">
<ButtonGroup>
<Button mainStyle="login">Log In</Button>
<Button mainStyle="login" subStyle="purple">Log In</Button>
<Button mainStyle="login" subStyle="teal">Log In</Button>
<Button mainStyle="login" subStyle="blue">Log In</Button>
<Button small mainStyle="hollow">Log In</Button>
<Button small mainStyle="hollow" subStyle="purple">Log In</Button>
<Button small mainStyle="hollow" subStyle="teal">Log In</Button>
<Button small mainStyle="hollow" subStyle="blue">Log In</Button>
</ButtonGroup>
</div>
<div className="pad">
<ButtonGroup>
<Button small>Log In</Button>
<Button small subStyle="purple">Log In</Button>
<Button small subStyle="teal">Log In</Button>
<Button small subStyle="blue">Log In</Button>
</ButtonGroup>
</div>
</div>
<div className="bg--charcoal">
<div className="wrap pad">
<ButtonGroup>
<Button mainStyle="login" subStyle="white">Log In</Button>
<Button mainStyle="login" subStyle="purple">Log In</Button>
<Button mainStyle="login" subStyle="teal">Log In</Button>
<Button mainStyle="login" subStyle="blue">Log In</Button>
<div className="bg--dark">
<div className="wrap">
<ButtonGroup className="pad">
<Button small mainStyle="hollow" subStyle="white">Log In</Button>
<Button small mainStyle="hollow" subStyle="purple">Log In</Button>
<Button small mainStyle="hollow" subStyle="teal">Log In</Button>
<Button small mainStyle="hollow" subStyle="blue">Log In</Button>
</ButtonGroup>
<ButtonGroup className="pad">
<Button small subStyle="white">Log In</Button>
<Button small subStyle="purple">Log In</Button>
<Button small subStyle="teal">Log In</Button>
<Button small subStyle="blue">Log In</Button>
</ButtonGroup>
</div>
</div>
@@ -162,52 +179,52 @@ function KitOfParts({ textString }) {
<Button subStyle="blue">Do it</Button>
</ButtonGroup>
</div>
<div className="bg--charcoal">
<div className="bg--dark">
<div className="wrap pad">
<ButtonGroup>
<Button mainStyle="pill" subStyle="white">styles</Button>
<Button mainStyle="pill" subStyle="purple">styles</Button>
<Button mainStyle="pill" subStyle="teal">styles</Button>
<Button mainStyle="pill" subStyle="blue">styles</Button>
<Button mainStyle="hollow" subStyle="white">styles</Button>
<Button mainStyle="hollow" subStyle="purple">styles</Button>
<Button mainStyle="hollow" subStyle="teal">styles</Button>
<Button mainStyle="hollow" subStyle="blue">styles</Button>
</ButtonGroup>
</div>
</div>
<div className="wrap">
<ButtonGroup className="pad">
<Button mainStyle="pill">
<Button mainStyle="hollow" subStyle="dark">
<Icons.GitHub />
<span>github.com/jambonz</span>
</Button>
<Button mainStyle="pill">
<Button mainStyle="hollow" subStyle="dark">
<Icons.GitHub />
<span>github.com/drachtio</span>
</Button>
</ButtonGroup>
<ButtonGroup className="pad">
<Button mainStyle="pill" subStyle="purple">
<Button mainStyle="hollow" subStyle="purple">
<span>colors</span>
</Button>
<Button mainStyle="pill" subStyle="teal">
<Button mainStyle="hollow" subStyle="teal">
<span>colors</span>
</Button>
<Button mainStyle="pill" subStyle="blue">
<Button mainStyle="hollow" subStyle="blue">
<span>colors</span>
</Button>
</ButtonGroup>
<div className="pad">
<Button mainStyle="pill" subStyle="jambonz">
<Button mainStyle="hollow">
<Icons.Send />
<span>Contact us</span>
</Button>
</div>
</div>
<div className="bg--jambonz">
<div className="bg--jam">
<div className="wrap pad">
<Button subStyle="white">support@jambonz.org</Button>
</div>
</div>
</div>
</div>
</section>
);
}
pages/pricing.js
+2 -2
View File
@@ -21,7 +21,7 @@ function Structure({data}) {
</div>
<div className="wrap structure__cta">
<P>{data.cta.text}</P>
<Button as={Link} href={`${data.cta.url}?subject=Additional Services Support`} target="_blank" mainStyle="pill" subStyle="jambonz">
<Button as={Link} href={`${data.cta.url}?subject=Additional Services Support`} target="_blank" mainStyle="hollow">
<CtaIcon />
<span>{data.cta.cta}</span>
</Button>
@@ -54,7 +54,7 @@ function Services({data}) {
})}
</div>
<div className="services__cta">
<Button as={Link} href={`${data.url}?subject=Additional Services Support`} target="_blank" mainStyle="pill" subStyle="jambonz">
<Button as={Link} href={`${data.url}?subject=Additional Services Support`} target="_blank" mainStyle="hollow">
<SvgIcon />
<span>{data.cta}</span>
</Button>
pages/why.js
+2 -2
View File
@@ -48,7 +48,7 @@ function OS({data}) {
{data.buttons.map((button) => {
const BtnIcon = Icons[button.icon];
return (
<Button as={Link} key={nanoid()} href={button.url} target="_blank" mainStyle="pill">
<Button as={Link} key={nanoid()} href={button.url} target="_blank" mainStyle="hollow" subStyle="dark">
<BtnIcon />
<span>{button.text}</span>
</Button>
@@ -57,7 +57,7 @@ function OS({data}) {
</ButtonGroup>
<div className="os__logo">
<img src={data.logo} width="313" height="71" alt="drachtio" />
<Button as={Link} href="https://github.com/sponsors/drachtio/" target="_blank" mainStyle="pill" subStyle="jambonz">
<Button as={Link} href="https://github.com/sponsors/drachtio/" target="_blank" mainStyle="hollow">
<Icons.Heart />
<span>Sponsor</span>
</Button>
src/components/footer.js
+1 -1
View File
@@ -27,7 +27,7 @@ function FooterItem({ obj }) {
export default function Footer({ siteData }) {
return (
<footer className="bg--charcoal foot">
<footer className="bg--dark foot">
<div className="wrap foot__wrap">
<div className="foot__navs">
<ul className="foot__links">
src/components/markdown.js
+5 -2
View File
@@ -56,7 +56,10 @@ function MarkdownSidebar({scope, data}) {
</div>
<ul className={classNames(subClasses)}>
{item.pages.map((page) => {
const isActiveItem = (parsedPath === page.path && parsedTab === item.path) && isActiveToggle;
// Supports using an `index.md` with a configured `path` of "/"
const isIndex = (page.path === '/');
const isActiveItem = (isIndex && parsedPath === item.path) || ((parsedPath === page.path && parsedTab === item.path) && isActiveToggle);
const linkHref = isIndex ? `/${scope}/${item.path}` : `/${scope}/${item.path}/${page.path}`;
const itemClasses = {
'ms': true,
'active': isActiveItem,
@@ -64,7 +67,7 @@ function MarkdownSidebar({scope, data}) {
return (
<li key={nanoid()} className="markdown__subitem">
<Link href={`/${scope}/${item.path}/${page.path}`}>
<Link href={linkHref}>
<a className={classNames(itemClasses)}>{page.title}</a>
</Link>
</li>
src/components/navi.js
+3 -3
View File
@@ -29,7 +29,7 @@ function NaviItem({obj}) {
function NaviMobile({ active, handler, siteData }) {
const classes = {
'bg--charcoal': true,
'bg--dark': true,
'wrap': true,
'navi__mobile': true,
'active': active,
@@ -39,7 +39,7 @@ function NaviMobile({ active, handler, siteData }) {
<div className={classNames(classes)}>
<div className="navi__mobile__head">
<div className="navi__mobile__login">
<Button as={Link} href={siteData.navi.login.link} mainStyle="login" subStyle="white" onClick={handler}>
<Button as={Link} href={siteData.navi.login.link} mainStyle="hollow" subStyle="white" onClick={handler} small>
{siteData.navi.login.label}
</Button>
</div>
@@ -106,7 +106,7 @@ export default function Navi({ siteData }) {
</Icon>
</div>
<div className="navi__login">
<Button as={Link} href={siteData.navi.login.link} mainStyle="login">
<Button as={Link} href={siteData.navi.login.link} mainStyle="hollow" small>
{siteData.navi.login.label}
</Button>
</div>
src/styles/_navi.scss
+3 -3
View File
@@ -15,7 +15,7 @@
}
// Menu / X icons for mobile nav interactions
.icon {
.ico {
width: ui-vars.$icon-size-3;
height: ui-vars.$icon-size-3;
@@ -39,7 +39,7 @@
&__link {
text-decoration: none;
color: ui-vars.$charcoal;
color: ui-vars.$dark;
margin-left: 32px;
&:hover {
@@ -69,7 +69,7 @@
line-height: 0;
cursor: pointer;
.icon {
.ico {
transform: translateY(-5px);
}
src/styles/pages/_home.scss
+1 -1
View File
@@ -112,7 +112,7 @@
max-width: 320px;
margin: 0 16px;
background-color: ui-vars.$white;
border: 2px solid ui-vars.$charcoal;
border: 2px solid ui-vars.$dark;
border-radius: 8px;
padding: 16px 32px;
src/styles/pages/_why.scss
+1 -1
View File
@@ -17,7 +17,7 @@
padding-top: 0;
}
.icon {
.ico {
transform: translateY(-4px);
@media (max-width: ui-vars.$width-tablet-1) {
yarn.lock
+4 -4
View File
@@ -2267,10 +2267,10 @@ isstream@~0.1.2:
resolved "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz"
integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
jambonz-ui@^0.0.6:
version "0.0.6"
resolved "https://registry.yarnpkg.com/jambonz-ui/-/jambonz-ui-0.0.6.tgz#63c4afd618f8d4dff210152a8ecf64f61ea67758"
integrity sha512-52P+xsLhqES2lo+Inz/mEzdfIgp5AV4NDzW1+6/16LiYDndxWzCnTyU6xkW4HGxmnEVvGdpcrPnQvuY+W4ojsw==
jambonz-ui@^0.0.7:
version "0.0.7"
resolved "https://registry.yarnpkg.com/jambonz-ui/-/jambonz-ui-0.0.7.tgz#8536933167a312993adf72a5cf730ed1413b5234"
integrity sha512-lDXpOUmaZwHRaHuvHP7dulH4pIiNaYzIiXrZ9Qi1ky2Y30SI28BQIwutD75WaJy6sGyyMDZl8bCphOTxbG+bcQ==
"js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
version "4.0.0"