@manuscripts/style-guide 3.5.12 → 3.5.14

package/README.md

@@ -5,7 +5,7 @@ React components for Manuscripts applications.
 ## Example usage
 
 ```tsx
-import { PrimaryButton } from '@manuscripts/style-guide'
+import { PrimaryButton } from '@manuscripts/style-guide' 
 
 const Example: React.FunctionComponent<{
   handleClick: React.MouseEventHandler<HTMLButtonElement>
@@ -18,8 +18,8 @@ const Example: React.FunctionComponent<{
 
 ## Development
 
-Run `yarn build` to build the `dist` folder for distribution.
+Run `yarn build` to build the `dist` folder for distribution. 
 
-Run `yarn dev` to automatically rebuild when a file is changed. 
+Run `yarn dev` to automatically rebuild when a file is changed.
 
 If a component needs new theme properties, add the types to `src/theme.ts` and add the corresponding values to `.storybook/theme.ts`.

package/dist/cjs/components/Badge.js

@@ -1,29 +1,33 @@
 "use strict";
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Badge = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
-exports.Badge = styled_components_1.default.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px;
-  border-radius: 50px;
+const Badge = ({ variant = 'default', label, width, size = 'md', }) => {
+    return ((0, jsx_runtime_1.jsx)(BadgeContainer, { "$variant": variant, "$width": width, "$size": size, children: label }));
+};
+exports.Badge = Badge;
+const BadgeContainer = styled_components_1.default.div `
+  background: ${(props) => props.theme.colors.badge[props.$variant].background};
+  color: ${(props) => props.theme.colors.badge[props.$variant].color};
+  font-family: ${(props) => props.theme.font.family.Lato};
+  font-weight: ${(props) => props.theme.font.weight.bold};
+  font-size: ${(props) => props.$size === 'sm'
+    ? props.theme.font.size.small
+    : props.theme.font.size.normal};
+  line-height: ${(props) => props.$size === 'sm'
+    ? props.theme.font.lineHeight.normal
+    : props.theme.font.lineHeight.large};
+  width: ${(props) => (props.$width ? `${props.$width}px` : 'fit-content')};
+  padding-inline: ${(props) => props.theme.grid.unit * 2}px;
+  padding-block: ${(props) => props.theme.grid.unit}px;
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  text-align: center;
+  border: ${(props) => props.theme.colors.badge[props.$variant].border
+    ? `1px solid ${props.theme.colors.badge[props.$variant].border}`
+    : 'none'};
+  min-width: max-content;
 `;

package/dist/cjs/components/NavDropdown.js

@@ -37,7 +37,6 @@ exports.NavDropdownButton = exports.NavDropdownButtonContainer = exports.Notific
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_router_dom_1 = require("react-router-dom");
 const styled_components_1 = __importStar(require("styled-components"));
-const Badge_1 = require("./Badge");
 const Button_1 = require("./Button");
 const icons_1 = require("./icons");
 exports.NavDropdownContainer = styled_components_1.default.div `
@@ -120,7 +119,7 @@ exports.NavDropdownToggle = (0, styled_components_1.default)(icons_1.ArrowUpIcon
     transform: rotate(0deg);
   }
 `;
-exports.NotificationsBadge = (0, styled_components_1.default)(Badge_1.Badge) `
+exports.NotificationsBadge = styled_components_1.default.div `
   background-color: ${(props) => props.isOpen
     ? props.theme.colors.background.success
     : props.theme.colors.brand.default};
@@ -131,6 +130,11 @@ exports.NotificationsBadge = (0, styled_components_1.default)(Badge_1.Badge) `
   max-height: 10px;
   min-width: 10px;
   min-height: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 50px;
 `;
 exports.NavDropdownButtonContainer = (0, styled_components_1.default)(Button_1.SecondaryButton).attrs((props) => ({
     selected: props.isOpen,

package/dist/cjs/defaultTheme.js

@@ -180,11 +180,30 @@ exports.defaultTheme = {
             error: colors.punchRed,
             info: colors.jellyBeanBlue,
             success: colors.killarneyGreen,
-            warning: colors.contrastOrange
+            warning: colors.contrastOrange,
         },
         outline: {
             focus: colors.focusBlue,
         },
+        badge: {
+            default: {
+                background: colors.mercuryGrey,
+                color: colors.greyDark,
+            },
+            primary: { background: colors.manuscriptsBlueDark, color: colors.white },
+            warning: {
+                background: colors.manuscriptsSecondary,
+                color: colors.greyDark,
+            },
+            info: { background: colors.manuscriptsIcons, color: colors.white },
+            bordered: {
+                background: colors.seashellGrey,
+                color: colors.greyDark,
+                border: colors.mercuryGrey,
+            },
+            success: { background: colors.contrastGreen, color: colors.white },
+            dark: { background: colors.greyMuted, color: colors.white },
+        },
     },
     font: {
         family: {

package/dist/es/components/Badge.js

@@ -1,23 +1,26 @@
-/*!
- * © 2019 Atypon Systems LLC
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
+import { jsx as _jsx } from "react/jsx-runtime";
 import styled from 'styled-components';
-export const Badge = styled.div `
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 2px;
-  border-radius: 50px;
+export const Badge = ({ variant = 'default', label, width, size = 'md', }) => {
+    return (_jsx(BadgeContainer, { "$variant": variant, "$width": width, "$size": size, children: label }));
+};
+const BadgeContainer = styled.div `
+  background: ${(props) => props.theme.colors.badge[props.$variant].background};
+  color: ${(props) => props.theme.colors.badge[props.$variant].color};
+  font-family: ${(props) => props.theme.font.family.Lato};
+  font-weight: ${(props) => props.theme.font.weight.bold};
+  font-size: ${(props) => props.$size === 'sm'
+    ? props.theme.font.size.small
+    : props.theme.font.size.normal};
+  line-height: ${(props) => props.$size === 'sm'
+    ? props.theme.font.lineHeight.normal
+    : props.theme.font.lineHeight.large};
+  width: ${(props) => (props.$width ? `${props.$width}px` : 'fit-content')};
+  padding-inline: ${(props) => props.theme.grid.unit * 2}px;
+  padding-block: ${(props) => props.theme.grid.unit}px;
+  border-radius: ${(props) => props.theme.grid.radius.small};
+  text-align: center;
+  border: ${(props) => props.theme.colors.badge[props.$variant].border
+    ? `1px solid ${props.theme.colors.badge[props.$variant].border}`
+    : 'none'};
+  min-width: max-content;
 `;

package/dist/es/components/NavDropdown.js

@@ -1,7 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { NavLink } from 'react-router-dom';
 import styled, { css } from 'styled-components';
-import { Badge } from './Badge';
 import { SecondaryButton } from './Button';
 import { ArrowUpIcon } from './icons';
 export const NavDropdownContainer = styled.div `
@@ -84,7 +83,7 @@ export const NavDropdownToggle = styled(ArrowUpIcon) `
     transform: rotate(0deg);
   }
 `;
-export const NotificationsBadge = styled(Badge) `
+export const NotificationsBadge = styled.div `
   background-color: ${(props) => props.isOpen
     ? props.theme.colors.background.success
     : props.theme.colors.brand.default};
@@ -95,6 +94,11 @@ export const NotificationsBadge = styled(Badge) `
   max-height: 10px;
   min-width: 10px;
   min-height: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px;
+  border-radius: 50px;
 `;
 export const NavDropdownButtonContainer = styled(SecondaryButton).attrs((props) => ({
     selected: props.isOpen,

package/dist/es/defaultTheme.js

@@ -144,11 +144,30 @@ export const defaultTheme = {
             error: colors.punchRed,
             info: colors.jellyBeanBlue,
             success: colors.killarneyGreen,
-            warning: colors.contrastOrange
+            warning: colors.contrastOrange,
         },
         outline: {
             focus: colors.focusBlue,
         },
+        badge: {
+            default: {
+                background: colors.mercuryGrey,
+                color: colors.greyDark,
+            },
+            primary: { background: colors.manuscriptsBlueDark, color: colors.white },
+            warning: {
+                background: colors.manuscriptsSecondary,
+                color: colors.greyDark,
+            },
+            info: { background: colors.manuscriptsIcons, color: colors.white },
+            bordered: {
+                background: colors.seashellGrey,
+                color: colors.greyDark,
+                border: colors.mercuryGrey,
+            },
+            success: { background: colors.contrastGreen, color: colors.white },
+            dark: { background: colors.greyMuted, color: colors.white },
+        },
     },
     font: {
         family: {

package/dist/types/components/Badge.d.ts

@@ -1,5 +1,5 @@
 /*!
- * © 2019 Atypon Systems LLC
+ * © 2026 Atypon Systems LLC
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License.
@@ -13,4 +13,14 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-export declare const Badge: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+import React from 'react';
+export type BadgeVariant = 'default' | 'primary' | 'warning' | 'info' | 'bordered' | 'success' | 'dark';
+export type BadgeSize = 'sm' | 'md';
+interface BadgeProps {
+    label: string;
+    variant?: BadgeVariant;
+    width?: number;
+    size?: BadgeSize;
+}
+export declare const Badge: React.FC<BadgeProps>;
+export {};

package/dist/types/theme.d.ts

@@ -25,6 +25,7 @@ interface Colors {
     border: Border & Alerts & Variations;
     brand: Brand;
     button: Button;
+    badge: Badge;
     text: Text & Alerts & Variations;
     outline: Outline;
 }
@@ -103,6 +104,20 @@ interface Button {
     secondary: Elements;
     error: Elements;
 }
+interface BadgeVariant {
+    background: string;
+    color: string;
+    border?: string;
+}
+interface Badge {
+    default: BadgeVariant;
+    primary: BadgeVariant;
+    warning: BadgeVariant;
+    info: BadgeVariant;
+    bordered: BadgeVariant;
+    success: BadgeVariant;
+    dark: BadgeVariant;
+}
 interface Text {
     muted: string;
     onDark: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@manuscripts/style-guide",
   "description": "Shared components for Manuscripts applications",
-  "version": "3.5.12",
+  "version": "3.5.14",
   "repository": "github:Atypon-OpenSource/manuscripts-style-guide",
   "license": "Apache-2.0",
   "main": "dist/cjs",