goobs-frontend 0.8.30 → 0.9.0

package/README.md

@@ -1,18 +1,22 @@
 # goobs-frontend
 
-goobs-frontend, previously known as goobs-repo, is a comprehensive React-based UI library built on Material-UI. It offers a wide range of customizable components for building responsive and consistent user interfaces with advanced features like form validation, theming, and code syntax highlighting.
+goobs-frontend, is a React-based UI library built on Material-UI.
 
 The NPM repo is available here - https://www.npmjs.com/package/goobs-frontend
 
 This entire repository is written in TypeScript, and there is no need for a separate types installation.
 
+## Storybook
+
+See component design and documentation in Storybook available here - https://storybook.technologiesunlimited.net/
+
 ## Integrating goobs-frontend with Next.js
 
-This guide explains how to integrate the goobs-frontend package with a Next.js project.
+This guide explains how to integrate goobs-frontend with a Next.js project
 
 **Step 1: Install the project**
 
-In your Next.js project directory, run the following command to install goobs-frontend:
+In your Next.js project directory, run the following command to install goobs-frontend
 
 #### npm
 
@@ -28,364 +32,372 @@ yarn add goobs-frontend
 
 **Step 2: Update next.config.js**
 
-We are using SWC; here is the minimum recommended configuration for next.config.js using our repository:
+You must then transpile the package in next.config
 
 ```javascript
 /** @type {import('next').NextConfig} */
 
 const nextConfig = {
-  reactStrictMode: true,
-  swcMinify: true,
   transpilePackages: ['goobs-frontend'],
 }
 
 export default nextConfig
 ```
 
-You can see more information on how we got here and how it was incorrectly done in previous versions via - https://github.com/goobz22/goobs-frontend/discussions/21
-
-**Step 3: Implement into project and build to confirm functionality**
-
-All components should be successfully building as of this release and are being used within production in one way or another.
-
-This README update, along with the following documentation updates, are all part of a push to better document the usage of this project.
+After this is done, you can import components from goobs-frontend into your project.
 
 ## Components
 
-The following components are available within goobs-frontend. Each component has a dedicated wiki page with detailed documentation, usage examples, and best practices.
+Below is a high-level overview of all components now available in goobs-frontend. For full usage instructions, code snippets, and best practices, see our Storybook.
 
 ### Accordion
 
-The Accordion component provides an expandable panel for organizing and presenting content in a collapsible manner.
+Description: A collapsible container for toggling expanded/collapsed content.
+
+Features:
 
-[Accordion Wiki](https://github.com/goobz22/goobs-frontend/wiki/Accordion)
+Built on Material-UI’s Accordion.
+
+Combines Accordion, AccordionSummary, and AccordionDetails for a complete layout.
 
 ### Button
 
-The Button component is a customizable button with support for icons, variants, and styling props. It provides a flexible and reusable way to create buttons in your application.
+Description: A Material-UI Button wrapper with advanced customization—supporting icons, text alignment, and coloring.
+
+Features: Flexible icon positioning (left, right, above).
 
-[Button Wiki](https://github.com/goobz22/goobs-frontend/wiki/Button)
+Configurable background color, text color, dimensions, etc.
 
 ### Card
 
-The Card component offers various card layouts for displaying content, including product cards, pricing cards, and more. It supports different variants such as default, inventory, pricing summary, detailed pricing summary, product, and product summary.
+Description: A versatile container with multiple variants (inventory, pricing, product, tasks, etc.).
+
+Features: Displays images, stepper integration, and optional breadcrumbs.
 
-[Card Wiki](https://github.com/goobz22/goobs-frontend/wiki/Card)
+Ideal for product listings, tasks, or advanced pricing scenarios.
 
 ### CodeCopy
 
-The CodeCopy component renders a code block with syntax highlighting and a copy-to-clipboard functionality.
+Description: Renders syntax-highlighted code blocks and offers a single-click “Copy to clipboard” button.
+
+Features: Uses highlight.js for syntax highlighting.
+
+Great for docs, tutorials, or developer portals.
 
-[CodeCopy Wiki](https://github.com/goobz22/goobs-frontend/wiki/CodeCopy)
+### ConfirmationCodeInputs
 
-### ConfirmationCodeInput
+Description: An OTP-style multi-digit input.
 
-The ConfirmationCodeInput component provides an input field for entering confirmation codes, often used in two-factor authentication scenarios.
+Features: Automatically moves focus between fields, numeric-only.
 
-[ConfirmationCodeInput Wiki](https://github.com/goobz22/goobs-frontend/wiki/ConfirmationCodeInput)
+Visual valid/invalid status indicator.
+
+### ComplexTextEditor
+
+Description: A text editor capable of switching between modes (simple, markdown, or rich text) via a single toolbar.
+
+Features: Uses sub-editors (SimpleEditor, RichTextEditor, MarkdownEditor).
+
+Accepts label, min-rows, error text, etc.
 
 ### Content
 
-The Content component is a flexible container for rendering various types of content within your application. It supports different content types including typography, radio groups, confirmation code inputs, links, buttons, images, pricing tables, steppers, transfer lists, cards, code copy blocks, text fields, date fields, dropdowns, increment number fields, searchbars, number fields, password fields, and QR codes.
+Description: A catch-all container that can render multiple typed sub-components (typography, images, forms, etc.).
+
+Features: Allows dynamic rendering of sub-components in a structured layout.
+
+### CustomToolbar
+
+Description: A flexible toolbar with optional buttons, search bar, dropdowns, and management actions.
+
+Features:
+
+- Left: Renders an optional vertical divider and an array of buttons.
+- LeftCenter: Typically a search bar.
+- Right: Renders one or more Dropdown components.
+- RightCenter: Manages selected rows or data actions (duplicate, delete, etc.).
+
+### DataGrid
 
-[Content Wiki](https://github.com/goobz22/goobs-frontend/wiki/Content)
+Description: A table/grid with row selection, search, pagination, and advanced row management (duplicate, delete, etc.).
+
+Features:
+
+- Built-in search integration.
+- Custom toolbars, footers, and row selection.
+- Single or multiple row selection with checkboxes.
+
+### DataGridCheckbox
+
+Description: A specialized Checkbox for data grid usage, logging click/change events.
+
+Features:
+
+- Styled for grid contexts.
+- Allows debug logging or analytics.
 
 ### DateField
 
-The DateField component provides a date picker input field with customizable styling options.
+Description: A date picker that supports both manual text entry and a pop-up calendar (via react-datepicker).
+
+Features:
+
+- Arrow-key increments for day/month/year.
+- Partial manual editing (e.g., only day or month).
+
+### Dialog and Popup
+
+Description: Modal components for various form-based interactions.
 
-[DateField Wiki](https://github.com/goobz22/goobs-frontend/wiki/DateField)
+Features:
+
+- Popup for simpler modals; Dialog for more complex or multi-step forms.
+- Both can integrate with form controls or custom actions.
 
 ### Dropdown
 
-The Dropdown component offers a customizable select input with various styling options.
+Description: A select input with advanced styling (label above or on the outline) and typed options.
+
+Features:
+
+- Allows custom color overrides for background, outline, and font.
+- Works well in forms or toolbars.
+
+### FormDataGrid
+
+Description: A specialized DataGrid for form-based usage.
 
-[Dropdown Wiki](https://github.com/goobz22/goobs-frontend/wiki/Dropdown)
+Features:
+
+- Possibly merges form validation with row-based data editing.
+- Accepts typed definitions for columns, validation, or data transformations.
 
 ### Grid
 
-The Grid component is a highly customizable and flexible grid system built with React and Material-UI. It allows you to create complex grid layouts with ease, providing a wide range of configuration options for grids, rows, columns, and cells.
+Description: A flexible grid system for laying out UI components, wrapping Material-UI’s Grid.
+
+Features:
 
-[Grid Wiki](https://github.com/goobz22/goobs-frontend/wiki/Grid)
+- Row/column/cell configurations with advanced spacing and alignment.
+- Perfect for building complex multi-column forms or pages.
 
 ### IncrementNumberField
 
-The IncrementNumberField component provides an input field for numeric values with increment and decrement buttons.
+Description: A numeric input with dedicated increment/decrement buttons.
+
+Features:
+
+- Restricts input to digits.
+- Configurable label, background, outline, and text color.
+
+### MultiSelectChip
 
-[IncrementNumberField Wiki](https://github.com/goobz22/goobs-frontend/wiki/IncrementNumberField)
+Description: A multiple-selection dropdown that displays selected items as chips.
 
-### Nav
+Features:
 
-The Nav component provides navigation functionality, including both horizontal and vertical navigation options.
+- Easy to handle multiple values.
+- Optional background, font, and label styling.
 
-[Nav Wiki](https://github.com/goobz22/goobs-frontend/wiki/Nav)
+### Nav (Vertical)
+
+Description: A vertical navigation component with expandable main/sub nav items, optional search, etc.
+
+Features:
+
+- Supports multiple levels: mainNav, subNav, and viewNav.
+- Collapsible sections and optional route-based or onClick triggers.
 
 ### NumberField
 
-The NumberField component offers an input field specifically designed for numeric input with optional minimum and maximum value constraints.
+Description: A numeric text field with optional min/max constraints.
 
-[NumberField Wiki](https://github.com/goobz22/goobs-frontend/wiki/NumberField)
+Features:
+
+- Restricts non-numeric input.
+- Auto-corrects values outside allowable ranges.
 
 ### PasswordField
 
-The PasswordField component provides a secure input field for password entry with a show/hide password toggle.
+Description: A text field for secure passwords, featuring a show/hide toggle icon.
+
+Features:
 
-[PasswordField Wiki](https://github.com/goobz22/goobs-frontend/wiki/PasswordField)
+- Color overrides for background, outline, text.
+- Eye icon toggles between hidden and visible text.
 
 ### PhoneNumberField
 
-The PhoneNumberField component offers an input field specifically formatted for phone number entry.
+Description: A phone number input that auto-formats values (e.g., +1-xxx-xxx-xxxx).
+
+Features:
 
-[PhoneNumberField Wiki](https://github.com/goobz22/goobs-frontend/wiki/PhoneNumberField)
+- Removes non-digit characters, ensures +1.
+- Great for US-based phone inputs, can be adapted for international usage.
 
 ### PricingTable
 
-The PricingTable component renders a customizable pricing table for displaying product or service pricing information.
+Description: A tabular display of multi-tier pricing data, toggling monthly/annual costs, etc.
+
+Features:
+
+- Compare multiple packages.
+- Checkmark-based feature lists.
+- Integrated CTA buttons, easily link to a router or checkout flow.
+
+### ProjectBoard
+
+Description: A kanban-like board for tasks, with drag-and-drop columns, search, and sub-forms (AddTask, ShowTask).
+
+Features:
 
-[PricingTable Wiki](https://github.com/goobz22/goobs-frontend/wiki/PricingTable)
+- Handles status/sub-status or severity-based columns.
+- Built-in search, comment, revision history, assigned user, etc.
 
-### QRCode
+### QRCodeComponent
 
-The QRCode component generates and displays QR codes based on the provided value.
+Description: Dynamically generates a QR code from TOTP secrets (or any string).
 
-[QRCode Wiki](https://github.com/goobz22/goobs-frontend/wiki/QRCode)
+Features:
+
+- Integrates with otplib for generating or verifying TOTP secrets.
+- Accepts size, optional title, and callback for the generated secret.
 
 ### RadioGroup
 
-The RadioGroup component renders a group of radio buttons for selecting a single option from multiple choices.
+Description: A group of radio buttons for single-option selection, built on Material-UI’s RadioGroup.
+
+Features:
+
+- Accepts typed RadioOption for label customizations.
+- Includes an optional overall label with custom font variants/colors.
+
+### RichTextEditor
+
+Description: A full WYSIWYG editor with optional Markdown toggles, link insertion, bold/italic, etc.
+
+Features:
+
+- Built on Slate or similar.
+- Separate toolbars for Rich Text vs. Markdown modes.
+
+### SearchableDropdown
+
+Description: A dropdown with real-time filtering, based on Material-UI’s Autocomplete.
+
+Features:
 
-[RadioGroup Wiki](https://github.com/goobz22/goobs-frontend/wiki/RadioGroup)
+- Additional attributes for each option (attribute1, attribute2).
+- Flexible color/label styling.
 
 ### Searchbar
 
-The Searchbar component provides a search input field with customizable styling options.
+Description: A stylized search input field, typically placed in a toolbar or nav.
 
-[Searchbar Wiki](https://github.com/goobz22/goobs-frontend/wiki/Searchbar)
+Features:
 
-### Stepper
+- Icon, label positioning, and color customization.
+- Easy onChange event to handle filtering or searching.
 
-The Stepper component provides a step-by-step interface for guiding users through a process or workflow.
+### ShowTask
 
-[Stepper Wiki](https://github.com/goobz22/goobs-frontend/wiki/Stepper)
+Description: A modal-based component that displays a single task, its fields, and a comment section with revision history.
+
+Features:
+
+- Edits or adds comments, optionally restricted to the original commenter.
+- Adjust sub-status, assigned user, next-action date, etc.
+
+### Stepper (CustomStepper)
+
+Description: A multi-step progress indicator for processes or wizards.
+
+Features:
+
+- Supports “completed”, “active”, “error”, or “inactive” steps.
+- Displays optional step descriptions or links.
+- Step icons can be customized (check, lock, error, etc.).
+
+### StyledTooltip
+
+Description: A Material-UI Tooltip extended with custom color, offsets, and arrow placement.
+
+Features:
+
+- Override background color, text color, arrow color.
+- Precisely position via offset props.
+
+### Tabs (Horizontal)
+
+Description: A horizontal tab navigation bar built with Material-UI’s Tabs.
+
+Features:
+
+- Route-based (trigger='route') or custom callback (trigger='onClick') tab switches.
+- Supports alignment (left, center, right, justify) and optional borders.
 
 ### TextField
 
-The TextField component offers a customizable text input field with various styling and behavior options.
+Description: A Material-UI TextField wrapper with advanced color and label position overrides, plus optional end adornments.
+
+Features:
 
-[TextField Wiki](https://github.com/goobz22/goobs-frontend/wiki/TextField)
+- Label can shrink onto or above the outline for a unique UI.
+- Extended color styling for background, outline, font, placeholder, etc.
 
 ### Toolbar
 
-The Toolbar component offers a customizable toolbar for use in various UI scenarios.
+Description: A flexible container for actions, often used atop tables or pages for filtering, button actions, and more.
 
-[Toolbar Wiki](https://github.com/goobz22/goobs-frontend/wiki/Toolbar)
+Features:
+
+- Extensible subcomponents (Left, LeftCenter, Right, RightCenter).
+- Adapts layout based on screen size (desktop, tablet, mobile).
 
 ### Tooltip
 
-The Tooltip component is a customizable and styled version of the Material-UI Tooltip component. It provides a way to display informative text when users hover over, focus on, or tap an element.
+Description: A styled tooltip (see StyledTooltip).
+
+Features:
 
-[Tooltip Wiki](https://github.com/goobz22/goobs-frontend/wiki/Tooltip)
+- Enhanced theming, offsets, arrow customization.
+- Works with icons, text, or anything that needs a hover tooltip.
 
 ### TransferList
 
-The TransferList component provides a dual-list interface for transferring items between two lists.
+Description: A dual-list component for transferring items between left and right.
 
-[TransferList Wiki](https://github.com/goobz22/goobs-frontend/wiki/TransferList)
+Features:
 
-### Typography
+- “Move selected” or “Move all” controls.
+- Single or multiple selection variants.
+- Can pair with dropdowns for multi-collection contexts.
 
-The Typography component is a text component for rendering customizable typography with support for different font families, variants, and colors.
-
-[Typography Wiki](https://github.com/goobz22/goobs-frontend/wiki/Typography)
-
-## Usage
-
-To use the components, types, and utilities in your project, you can import them from the `goobs-frontend` package. Here's a comprehensive list of all available imports:
-
-```typescript
-import {
-  // Components
-  CustomButton,
-  CustomGrid,
-  Typography,
-  ConfirmationCodeInput,
-  RadioGroup,
-  PopupForm,
-  ContentSection,
-  Accordion,
-  AccordionSummary,
-  AccordionDetails,
-  Card,
-  CodeCopy,
-  Nav,
-  PricingTable,
-  CustomStepper,
-  CustomToolbar,
-  TransferList,
-  StyledTooltip,
-  QRCodeComponent,
-  DateField,
-  Dropdown,
-  IncrementNumberField,
-  NumberField,
-  PasswordField,
-  PhoneNumberField,
-  Searchbar,
-  TextField,
-
-  // Types
-  CustomButtonProps,
-  CustomGridProps,
-  Alignment,
-  BorderProp,
-  columnconfig,
-  gridconfig,
-  cellconfig,
-  FontFamily,
-  TypographyVariant,
-  TypographyProps,
-  ConfirmationCodeInputsProps,
-  RadioOption,
-  RadioGroupProps,
-  PopupFormProps,
-  ContentSectionProps,
-  CardProps,
-  CodeCopyProps,
-  NavProps,
-  PricingProps,
-  CustomStepperProps,
-  ToolbarProps,
-  TransferListProps,
-  CustomTooltipProps,
-  QRCodeProps,
-  DateFieldProps,
-  DropdownProps,
-  IncrementNumberFieldProps,
-  NumberFieldProps,
-  PasswordFieldProps,
-  PhoneNumberFieldProps,
-  SearchbarProps,
-  TextFieldProps,
-
-  // Extended Types
-  ExtendedButtonProps,
-  ExtendedTypographyProps,
-  ExtendedTextFieldProps,
-  ExtendedQRCodeProps,
-  ExtendedDropdownProps,
-  ExtendedDateFieldProps,
-  ExtendedNumberFieldProps,
-  ExtendedIncrementNumberFieldProps,
-  ExtendedPasswordFieldProps,
-  ExtendedSearchbarProps,
-  ExtendedCodeCopyProps,
-  ExtendedCardProps,
-  ExtendedTransferListProps,
-  ExtendedStepperProps,
-  ExtendedPricingProps,
-  ExtendedImageProps,
-  ExtendedConfirmationCodeInputsProps,
-  ExtendedRadioGroupProps,
-
-  // Component Props Types
-  TypographyComponentProps,
-  ConfirmationCodeInputProps,
-  RadioGroupComponentProps,
-  PopupFormComponentProps,
-  ContentSectionComponentProps,
-  AccordionProps,
-  AccordionSummaryProps,
-  AccordionDetailsProps,
-  CardComponentProps,
-  CodeCopyComponentProps,
-  NavComponentProps,
-  PricingTableComponentProps,
-  CustomStepperComponentProps,
-  CustomToolbarComponentProps,
-  TransferListComponentProps,
-  StyledTooltipComponentProps,
-
-  // Styles
-  formContainerStyle,
-
-  // Animations
-  Animation,
-
-  // Colors
-  moss,
-  aqua,
-  madder,
-  woad,
-  marine,
-  pansy,
-  stainlessSteel,
-  coal,
-  ocean,
-  sky,
-  salmon,
-  lightning,
-  sage,
-  lilac,
-  gunpowder,
-  lightMadder,
-  black,
-  white,
-  none,
-  semiTransparentWhite,
-  semiTransparentBlack,
-  red,
-  green,
-  greyborder,
-
-  // Typography
-  arapeyh1,
-  arapeyh2,
-  arapeyh3,
-  arapeyh4,
-  arapeyh5,
-  arapeyh6,
-  arapeyparagraph,
-  interh1,
-  interh2,
-  interh3,
-  interh4,
-  interh5,
-  interh6,
-  interparagraph,
-  interhelperheader,
-  interhelperfooter,
-  merrih1,
-  merrih2,
-  merrih3,
-  merrih4,
-  merrih5,
-  merrih6,
-  merriparagraph,
-  merrihelperfooter,
-} from 'goobs-frontend'
-```
+### Typography
 
-Please refer to the individual component and utility files for more details on their usage and available props.
+Description: A text component supporting multiple font families (Arapey, Inter, Merriweather) and variant styles.
 
-## License
+Features:
 
-This project is licensed under the MIT License.
+- Additional variants like paragraph, helperheader, helperfooter.
+- Flexible coloring and consistent text sizing across your app.
 
-## Feedback and Contributions
+### Feedback and Contributions
 
-We welcome feedback, bug reports, and contributions. If you encounter any issues or have feature requests, please open an issue on the [GitHub repository](https://github.com/goobz22/goobs-frontend/issues).
+We welcome contributions of all kinds:
 
-If you would like to contribute to the project, please fork the repository and submit a pull request with your changes.
+- Issues: Report bugs or request features via GitHub Issues.
+- Pull Requests: Fork, create a branch, and open a PR for review.
+- Custom Requests: If you need special features or want these components ported to a different design system, reach out.
 
-If you would like to request this ported over to a different design system, a feature/capability, or more information on this project, please reach out to Matthew Goluba.
+### License
 
-## Contact
+goobs-frontend is licensed under the MIT License.
 
-For any questions or inquiries, please contact Matthew Goluba.
+### Contact
 
-- Email - mkgoluba@technologiesunlimited.net
-- LinkedIn - https://www.linkedin.com/in/matthew-goluba/
+For questions, support, or further details, please contact Matthew Goluba
 
-The website is in progress and will be shared here soon.
+Email: mkgoluba@technologiesunlimited.net
 
-Please email for the quickest response.
+Enjoy building with goobs-frontend!

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "goobs-frontend",
-  "version": "0.8.30",
+  "version": "0.9.0",
   "type": "module",
   "description": "A comprehensive React-based libary that extends the functionality of Material-UI",
   "license": "MIT",
@@ -82,42 +82,54 @@
   },
   "homepage": "https://github.com/goobz22/goobs-frontend#readme",
   "keywords": [
+    "accordion",
+    "button",
+    "card",
+    "code-copy",
     "confirmationCodeInput",
     "confirmationCode",
-    "radioButton",
-    "radioGroup",
+    "complexeditor",
     "contentSection",
-    "reusablePopup",
-    "next.js",
-    "material-ui",
-    "node.js",
-    "formData",
+    "customizable-components",
+    "dataGrid",
+    "dialog",
+    "dropdown",
+    "front-end",
     "form",
-    "button",
+    "formData",
+    "formDataGrid",
     "grid",
-    "responsive",
-    "typography",
-    "button",
-    "searchbar",
-    "dropdown",
-    "complexeditor",
-    "textfield",
-    "phonenumber",
-    "password",
+    "incrementNumberField",
+    "material-ui",
+    "mfa",
+    "multiSelectChip",
+    "navigation",
+    "next.js",
+    "node.js",
     "number",
-    "card",
+    "password",
+    "phonenumber",
+    "popup",
     "pricing-table",
-    "navigation",
-    "stepper",
-    "tooltip",
-    "accordion",
-    "code-copy",
-    "customizable-components",
+    "projectBoard",
+    "qrCode",
+    "radioButton",
+    "radioGroup",
     "react-components",
-    "ui-library",
-    "front-end",
+    "responsive",
     "responsive-design",
-    "typescript"
+    "searchbar",
+    "stepper",
+    "storybook",
+    "tabs",
+    "textField",
+    "tooltip",
+    "transferList",
+    "2fa",
+    "two-factor-auth",
+    "typescript",
+    "typography",
+    "ui-library"
   ],
   "resolutions": {
     "string-width": "^4.2.3",

package/src/stories/Button.tsx

@@ -1,4 +1,5 @@
 import React from 'react'
+
 import './button.css'
 
 export interface ButtonProps {
@@ -22,26 +23,23 @@ export const Button = ({
   label,
   ...props
 }: ButtonProps) => {
-  // Determine which CSS class to apply
   const mode = primary
     ? 'storybook-button--primary'
     : 'storybook-button--secondary'
-
-  // Use inline styles for background color
-  const inlineStyles: React.CSSProperties = {
-    backgroundColor,
-  }
-
   return (
     <button
       type="button"
       className={['storybook-button', `storybook-button--${size}`, mode].join(
         ' '
       )}
-      style={inlineStyles}
       {...props}
     >
       {label}
+      <style>{`
+        button {
+          background-color: ${backgroundColor};
+        }
+      `}</style>
     </button>
   )
 }

package/src/stories/Page.stories.ts

@@ -17,7 +17,7 @@ type Story = StoryObj<typeof meta>
 
 export const LoggedOut: Story = {}
 
-// More on interaction testing: https://storybook.js.org/docs/writing-tests/interaction-testing
+// More on component testing: https://storybook.js.org/docs/writing-tests/component-testing
 export const LoggedIn: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement)

package/src/stories/button.css

@@ -8,7 +8,7 @@
   font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
 }
 .storybook-button--primary {
-  background-color: #1ea7fd;
+  background-color: #555ab9;
   color: white;
 }
 .storybook-button--secondary {

package/src/stories/page.css

@@ -22,8 +22,7 @@
 }
 
 .storybook-page a {
-  color: #1ea7fd;
-  text-decoration: none;
+  color: inherit;
 }
 
 .storybook-page ul {
@@ -42,7 +41,7 @@
   border-radius: 1em;
   background: #e7fdd8;
   padding: 4px 12px;
-  color: #66bf3c;
+  color: #357a14;
   font-weight: 700;
   font-size: 11px;
   line-height: 12px;