@dbosoft/nextjs-uicore 1.5.1 → 1.6.1

package/src/subnav/partials/CtaLinks/icons/github.svg

@@ -1,4 +1,4 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <title>GitHub</title>
-    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <title>GitHub</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
 </svg>

package/src/subnav/partials/CtaLinks/index.tsx

@@ -1,46 +1,46 @@
-import clsx from 'clsx'
-import LinkButton from '@dbosoft/react-uicore/linkbutton'
-import Link from 'next/link'
-import type { ICtaItem } from '../..'
-import GithubStarsLink from './github-stars-link'
-
-function CtaLinks(props: {
-  links: ICtaItem[],
-  hideGithubStars: boolean,
-  isInDropdown: boolean
-}) {
-  const { links, hideGithubStars, isInDropdown } = props
-  return (
-    <div className={clsx("flex gap-2", isInDropdown ? "pt-4 flex-col" : "items-center ml-4 space-x-1 ")}>
-      {links.map((link, stableIdx) => {
-
-        const textKey = link.text.toLowerCase()
-        const isGithub = textKey === 'github'
-
-         if (isGithub)
-          return (
-            <GithubStarsLink
-               
-              hideGithubStars={hideGithubStars}
-              key={stableIdx}
-              url={link.url}
-            />
-          ) 
-        return (
-          <LinkButton
-             
-            Link={Link}
-            className={link.className}
-            key={stableIdx}
-            linktype={link.linktype}
-            text={link.text}
-            url={link.url}
-            variant={link.variant}
-          />
-        )
-      })}
-    </div>
-  )
-}
-
-export default CtaLinks
+import clsx from 'clsx'
+import LinkButton from '@dbosoft/react-uicore/linkbutton'
+import Link from 'next/link'
+import type { ICtaItem } from '../..'
+import GithubStarsLink from './github-stars-link'
+
+function CtaLinks(props: {
+  links: ICtaItem[],
+  hideGithubStars: boolean,
+  isInDropdown: boolean
+}) {
+  const { links, hideGithubStars, isInDropdown } = props
+  return (
+    <div className={clsx("flex gap-2", isInDropdown ? "pt-4 flex-col" : "items-center ml-4 space-x-1 ")}>
+      {links.map((link, stableIdx) => {
+
+        const textKey = link.text.toLowerCase()
+        const isGithub = textKey === 'github'
+
+         if (isGithub)
+          return (
+            <GithubStarsLink
+               
+              hideGithubStars={hideGithubStars}
+              key={stableIdx}
+              url={link.url}
+            />
+          ) 
+        return (
+          <LinkButton
+             
+            Link={Link}
+            className={link.className}
+            key={stableIdx}
+            linktype={link.linktype}
+            text={link.text}
+            url={link.url}
+            variant={link.variant}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default CtaLinks

package/src/subnav/partials/MenuItemsDefault/index.tsx

@@ -1,52 +1,52 @@
-import type { ReactElement } from 'react';
-import React from 'react'
-import LinkWrap from '@dbosoft/react-uicore/link-wrap'
-import NavItemText from '../nav-item-text'
-import type { MenuItem } from '../..'
-import Link from 'next/link';
-
-function MenuItemsDefault(props: {
-  menuItems: MenuItem[]
-}) {
-  const { menuItems } = props
-
-  return (
-    <ul
-      className="inline-flex items-center">
-      {menuItems.map((menuItem, stableIdx) => {
-        if (menuItem === 'divider') {
-          return <VerticalDivider key={stableIdx} />
-        }
-        const { text, url } = menuItem
-        return <NavLink
-          isActive={menuItem.active || false}
-          key={stableIdx}
-          text={text}
-          url={url}
-        />
-      })}
-    </ul>
-  )
-}
-function VerticalDivider() {
-  return (
-    <li>
-      <span className="bg-gray-400 dark:bg-gray-200 w-0.5 h-6 mx-1 block" />
-    </li>
-  )
-}
-
-
-function NavLink(props: { text: string; url: string; isActive: boolean }) {
-  const { text, url, isActive } = props
-  return (
-    <li>
-      <LinkWrap Link={Link} className="px-2" href={url}>
-        <NavItemText isActive={isActive} text={text} />
-      </LinkWrap>
-    </li>
-  )
-}
-
-
-export default MenuItemsDefault
+import type { ReactElement } from 'react';
+import React from 'react'
+import LinkWrap from '@dbosoft/react-uicore/link-wrap'
+import NavItemText from '../nav-item-text'
+import type { MenuItem } from '../..'
+import Link from 'next/link';
+
+function MenuItemsDefault(props: {
+  menuItems: MenuItem[]
+}) {
+  const { menuItems } = props
+
+  return (
+    <ul
+      className="inline-flex items-center">
+      {menuItems.map((menuItem, stableIdx) => {
+        if (menuItem === 'divider') {
+          return <VerticalDivider key={stableIdx} />
+        }
+        const { text, url } = menuItem
+        return <NavLink
+          isActive={menuItem.active || false}
+          key={stableIdx}
+          text={text}
+          url={url}
+        />
+      })}
+    </ul>
+  )
+}
+function VerticalDivider() {
+  return (
+    <li>
+      <span className="bg-gray-400 dark:bg-gray-200 w-0.5 h-6 mx-1 block" />
+    </li>
+  )
+}
+
+
+function NavLink(props: { text: string; url: string; isActive: boolean }) {
+  const { text, url, isActive } = props
+  return (
+    <li>
+      <LinkWrap Link={Link} className="px-2" href={url}>
+        <NavItemText isActive={isActive} text={text} />
+      </LinkWrap>
+    </li>
+  )
+}
+
+
+export default MenuItemsDefault

package/src/subnav/partials/MenuItemsDefault/style.module.scss

@@ -1,71 +1,71 @@
-.root {
-  display: flex;
-  padding: 0 32px;
-  margin: 0 auto;
-  align-items: center;
-  list-style: none;
-
-  &.alignRight {
-    margin-right: 0;
-    padding-right: 16px;
-  }
-}
-
-.listItem {
-  position: relative;
-  white-space: nowrap;
-  margin: 0;
-  padding: 0;
-}
-
-.navLink {
-  composes: g-type-body-small-strong from global;
-  position: relative;
-  padding: 0 16px;
-  line-height: 2.5rem;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.submenuItem {
-  composes: g-type-body-small-strong from global;
-  color: var(--black);
-}
-
-.submenuModal {
-  border-radius: 4px;
-  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
-  background: var(--white);
-  z-index: 1;
-  display: block;
-  position: absolute;
-  top: 100%;
-  margin: 8px 0 0 0;
-  padding: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  list-style: none;
-
-  & li {
-    & a:hover .text {
-      text-decoration: underline;
-    }
-
-    & + li {
-      margin-top: 6px;
-    }
-  }
-
-  &.isCollapsed {
-    display: none;
-  }
-}
-
-.verticalDivider {
-  background: var(--gray-5);
-  height: 1.75rem;
-  width: 1px;
-  margin: 0 8px;
-  display: block;
-}
+.root {
+  display: flex;
+  padding: 0 32px;
+  margin: 0 auto;
+  align-items: center;
+  list-style: none;
+
+  &.alignRight {
+    margin-right: 0;
+    padding-right: 16px;
+  }
+}
+
+.listItem {
+  position: relative;
+  white-space: nowrap;
+  margin: 0;
+  padding: 0;
+}
+
+.navLink {
+  composes: g-type-body-small-strong from global;
+  position: relative;
+  padding: 0 16px;
+  line-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.submenuItem {
+  composes: g-type-body-small-strong from global;
+  color: var(--black);
+}
+
+.submenuModal {
+  border-radius: 4px;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  background: var(--white);
+  z-index: 1;
+  display: block;
+  position: absolute;
+  top: 100%;
+  margin: 8px 0 0 0;
+  padding: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  list-style: none;
+
+  & li {
+    & a:hover .text {
+      text-decoration: underline;
+    }
+
+    & + li {
+      margin-top: 6px;
+    }
+  }
+
+  &.isCollapsed {
+    display: none;
+  }
+}
+
+.verticalDivider {
+  background: var(--gray-5);
+  height: 1.75rem;
+  width: 1px;
+  margin: 0 8px;
+  display: block;
+}

package/src/subnav/partials/MenuItemsOverflow/index.tsx

@@ -1,51 +1,51 @@
-import type { ReactElement } from 'react';
-import React from 'react'
-import LinkWrap from '@dbosoft/react-uicore/link-wrap'
-import CtaLinks from '../CtaLinks'
-import type { ICtaItem, MenuItem } from '../..'
-import s from './style.module.scss'
-import Link from 'next/link';
-import clsx from 'clsx'
-
-interface MenuItemsOverflowProps {
-  menuItems: MenuItem[],
-  ctaLinks: ICtaItem[],
-  hideGithubStars: boolean,
-}
-
-
-export default function MenuItemsOverflow({ menuItems, ctaLinks, hideGithubStars }: MenuItemsOverflowProps) {
-  return (<><ul className={s.ulElem}>
-    {menuItems.map((menuItem, stableIdx) => {
-      if (menuItem === 'divider') return null
-
-      const { text, url } = menuItem
-      return (
-        <SubmenuItem
-          active={menuItem.active || false}
-          key={stableIdx}
-          text={text}
-          url={url}
-        />
-      )
-    })}
-  </ul>
-    <CtaLinks
-      hideGithubStars={hideGithubStars}
-      isInDropdown
-      links={ctaLinks}
-    /></>)
-
-}
-
-function SubmenuItem({ url, text, active }: { url: string; text: string; active: boolean }) {
-
-  return (
-    <li>
-      <LinkWrap Link={Link} className={clsx(s.submenuItem, "text-black dark:text-white" )} href={url} title={text}>
-        {text}
-      </LinkWrap>
-    </li>
-  )
-}
-
+import type { ReactElement } from 'react';
+import React from 'react'
+import LinkWrap from '@dbosoft/react-uicore/link-wrap'
+import CtaLinks from '../CtaLinks'
+import type { ICtaItem, MenuItem } from '../..'
+import s from './style.module.scss'
+import Link from 'next/link';
+import clsx from 'clsx'
+
+interface MenuItemsOverflowProps {
+  menuItems: MenuItem[],
+  ctaLinks: ICtaItem[],
+  hideGithubStars: boolean,
+}
+
+
+export default function MenuItemsOverflow({ menuItems, ctaLinks, hideGithubStars }: MenuItemsOverflowProps) {
+  return (<><ul className={s.ulElem}>
+    {menuItems.map((menuItem, stableIdx) => {
+      if (menuItem === 'divider') return null
+
+      const { text, url } = menuItem
+      return (
+        <SubmenuItem
+          active={menuItem.active || false}
+          key={stableIdx}
+          text={text}
+          url={url}
+        />
+      )
+    })}
+  </ul>
+    <CtaLinks
+      hideGithubStars={hideGithubStars}
+      isInDropdown
+      links={ctaLinks}
+    /></>)
+
+}
+
+function SubmenuItem({ url, text, active }: { url: string; text: string; active: boolean }) {
+
+  return (
+    <li>
+      <LinkWrap Link={Link} className={clsx(s.submenuItem, "text-black dark:text-white" )} href={url} title={text}>
+        {text}
+      </LinkWrap>
+    </li>
+  )
+}
+

package/src/subnav/partials/MenuItemsOverflow/style.module.scss

@@ -1,51 +1,51 @@
-.root {
-  position: relative;
-  margin-left: auto;
-}
-
-.dropdown {
-  background: var(--white);
-  border-radius: 4px;
-  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
-  margin-top: 8px;
-  max-height: calc(100vh - 300%);
-  overflow-y: auto;
-  padding: 12px 24px 0 24px;
-  position: absolute;
-  right: 0;
-  top: 100%;
-  width: 256px;
-  z-index: 1;
-
-  &.isCollapsed {
-    display: none;
-  }
-}
-
-.ulElem {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.submenuTitle {
-  composes: g-type-label from global;
-  margin: 12px 0 8px 0;
-  color: var(--gray-3);
-}
-
-.divider {
-  margin: 12px 0;
-  border: 0;
-  padding: 0;
-  height: 1px;
-  background: var(--gray-5);
-}
-
-.submenuItem {
-  composes: g-type-body-small-strong from global;
-  display: block;
-  padding: 4px 0;
-  line-height: 1.6em;
-  color: var(--black);
-}
+.root {
+  position: relative;
+  margin-left: auto;
+}
+
+.dropdown {
+  background: var(--white);
+  border-radius: 4px;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  margin-top: 8px;
+  max-height: calc(100vh - 300%);
+  overflow-y: auto;
+  padding: 12px 24px 0 24px;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  width: 256px;
+  z-index: 1;
+
+  &.isCollapsed {
+    display: none;
+  }
+}
+
+.ulElem {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.submenuTitle {
+  composes: g-type-label from global;
+  margin: 12px 0 8px 0;
+  color: var(--gray-3);
+}
+
+.divider {
+  margin: 12px 0;
+  border: 0;
+  padding: 0;
+  height: 1px;
+  background: var(--gray-5);
+}
+
+.submenuItem {
+  composes: g-type-body-small-strong from global;
+  display: block;
+  padding: 4px 0;
+  line-height: 1.6em;
+  color: var(--black);
+}

package/src/subnav/partials/TitleLink/index.tsx

@@ -1,25 +1,25 @@
-import type { FC, ReactElement, ReactNode } from 'react'
-import LinkWrap from '@dbosoft/react-uicore/link-wrap'
-import Link from 'next/link'
-
-
-const TitleLink: FC<{
-  text?: string,
-  url: string,
-  children?: ReactNode
-}> = ({
-  text,
-  url, children }) => {
-    return (
-      <LinkWrap
-        Link={Link}
-        className="font-bold text-gray-900 tracking-widest text-lg inline"
-        href={url}
-        title={text}
-      >{text}
-        {children}
-      </LinkWrap>
-    )
-  }
-
-export default TitleLink
+import type { FC, ReactElement, ReactNode } from 'react'
+import LinkWrap from '@dbosoft/react-uicore/link-wrap'
+import Link from 'next/link'
+
+
+const TitleLink: FC<{
+  text?: string,
+  url: string,
+  children?: ReactNode
+}> = ({
+  text,
+  url, children }) => {
+    return (
+      <LinkWrap
+        Link={Link}
+        className="font-semibold text-gray-900 tracking-widest text-lg inline"
+        href={url}
+        title={text}
+      >{text}
+        {children}
+      </LinkWrap>
+    )
+  }
+
+export default TitleLink

package/src/subnav/partials/nav-item-text/index.tsx

@@ -1,29 +1,29 @@
-import clsx from 'clsx'
-import React from 'react'
-
-/**
- *
- * A span of styled text with
- * an active state that adds a thick
- * bottom border.
- *
- */
-function NavItemText({
-  isActive,
-  text,
-}: {
-  /** If true, item will be rendered with a thick bottom border below the text. */
-  isActive: boolean
-  /** Plain text to render within the styled <span /> */
-  text: string
-}): React.ReactElement {
-  return (
-    <span
-      className={clsx("text-black dark:text-white text-sm font-semibold", isActive ? "border-b-2 pb-2 border-black" : "")}
-    >
-      {text}
-    </span>
-  )
-}
-
-export default NavItemText
+import clsx from 'clsx'
+import React from 'react'
+
+/**
+ *
+ * A span of styled text with
+ * an active state that adds a thick
+ * bottom border.
+ *
+ */
+function NavItemText({
+  isActive,
+  text,
+}: {
+  /** If true, item will be rendered with a thick bottom border below the text. */
+  isActive: boolean
+  /** Plain text to render within the styled <span /> */
+  text: string
+}): React.ReactElement {
+  return (
+    <span
+      className={clsx("text-black dark:text-white text-sm font-semibold", isActive ? "border-b-2 pb-2 border-black" : "")}
+    >
+      {text}
+    </span>
+  )
+}
+
+export default NavItemText