@sebgroup/green-react 3.36.0 → 4.0.0

package/index.js

@@ -21,7 +21,6 @@ export { Flexbox } from './src/lib/layout/flexbox/flexbox.js';
 export { InPageWizardStepCard } from './src/lib/in-page-wizard/inPageWizardStepCard.js';
 export { Link } from './src/lib/link/link.js';
 export { List } from './src/lib/list/list.js';
-export { v as ValueList } from './valueList.js';
 export { GroupedList, ListItem } from './src/lib/grouped-list/grouped-list.js';
 export { Navbar } from './src/lib/navbar/navbar.js';
 export { Option, OptionGroup, Select } from './src/lib/select/select.js';

package/package.json

@@ -2,14 +2,14 @@
   "name": "@sebgroup/green-react",
   "main": "./src/index.js",
   "module": "./src/index.js",
-  "version": "3.36.0",
+  "version": "4.0.0",
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
     "@sebgroup/green-core": "^2.35.0",
-    "@sebgroup/chlorophyll": "^3.6.16",
+    "@sebgroup/chlorophyll": "^4.0.0",
     "@sebgroup/extract": "^3.0.3",
     "@lit/react": "^1.0.2",
     "classnames": "^2.3.2",

package/src/index.js

@@ -21,7 +21,6 @@ export { Flexbox } from './lib/layout/flexbox/flexbox.js';
 export { InPageWizardStepCard } from './lib/in-page-wizard/inPageWizardStepCard.js';
 export { Link } from './lib/link/link.js';
 export { List } from './lib/list/list.js';
-export { v as ValueList } from '../valueList.js';
 export { GroupedList, ListItem } from './lib/grouped-list/grouped-list.js';
 export { Navbar } from './lib/navbar/navbar.js';
 export { Option, OptionGroup, Select } from './lib/select/select.js';

package/src/lib/accordion/accordion.js

@@ -14,7 +14,7 @@ var Accordion = function Accordion(_ref) {
     uuid = _React$useState2[0];
     _React$useState2[1];
   return jsx("div", {
-    className: "accordion",
+    className: "gds-accordion",
     children: items && items.map(function (item, index) {
       return jsx(AccordionItem, {
         item: item,

package/src/lib/alert-ribbon/alert-ribbon.js

@@ -32,11 +32,11 @@ function AlertRibbon(_ref) {
       setCloseButton(null);
     } else {
       if (closeText) setCloseButton(jsx("button", {
-        className: "close",
+        className: "gds-close",
         "aria-label": closeText,
         children: jsx("i", {})
       }));else setCloseButton(jsx("button", {
-        className: "close",
+        className: "gds-close",
         "aria-label": "Close",
         children: jsx("i", {})
       }));
@@ -69,7 +69,7 @@ function AlertRibbon(_ref) {
     });
   };
   return jsxs("div", {
-    className: "alert-ribbon ".concat(type),
+    className: "gds-alert-ribbon ".concat(type),
     role: role,
     "aria-live": ariaLive,
     children: [jsx("i", {
@@ -81,7 +81,7 @@ function AlertRibbon(_ref) {
         children: children
       })]
     }), closeButton && jsx("button", {
-      className: "close",
+      className: "gds-close",
       type: "button",
       "aria-label": (_a = closeAriaLabel !== null && closeAriaLabel !== void 0 ? closeAriaLabel : closeText) !== null && _a !== void 0 ? _a : 'Close alert',
       onClick: function onClick(event) {

package/src/lib/badge/badge.js

@@ -41,7 +41,7 @@ function Badge(_a) {
     }
   }, [badgeType, customColor, customBackgroundColor]);
   return !isClosed ? jsxs("span", Object.assign({}, props, {
-    className: "badge ".concat(type),
+    className: "gds-badge ".concat(type),
     style: {
       color: customColor,
       backgroundColor: customBackgroundColor

package/src/lib/breadcrumb/breadcrumb.js

@@ -9,7 +9,7 @@ var Breadcrumb = function Breadcrumb(_ref) {
   var children = _ref.children,
     className = _ref.className;
   return jsx("ul", {
-    className: classNames('breadcrumb', className),
+    className: classNames('gds-breadcrumb', className),
     children: React.Children.map(children, function (Child, childIndex) {
       return jsxs(React.Fragment, {
         children: [Child, childIndex !== React.Children.count(children) - 1 && jsx(BreadcrumbItem, {

package/src/lib/card/card.js

@@ -8,7 +8,7 @@ function Card(_ref) {
     header = _ref.header,
     footer = _ref.footer;
   return jsxs("section", {
-    className: "card",
+    className: "gds-card",
     children: [header && jsx("header", {
       children: header
     }), children, footer && jsx("footer", {

package/src/lib/form/button/button.js

@@ -17,7 +17,7 @@ var Button = /*#__PURE__*/forwardRef(function (_a, ref) {
     size = _a.size,
     testId = _a.testId,
     props = __rest(_a, ["className", "variant", "active", "type", "size", "testId"]);
-  var buttonClassName = classNames(className, variant, size, {
+  var buttonClassName = classNames('gds-button', className, variant, size, {
     active: active
   }) || undefined;
   return variant == 'close' ? jsx("button", Object.assign({

package/src/lib/form/checkbox/checkbox.js

@@ -23,11 +23,11 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
     _useState2 = _slicedToArray(_useState, 1),
     uuid = _useState2[0];
   var validationClassName = validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator);
-  var labelClassNames = classNames('form-control', _defineProperty({}, validationClassName, validator));
+  var labelClassNames = classNames('gds-form-control', _defineProperty({}, validationClassName, validator));
   var inputClassNames = classNames(className, _defineProperty({}, validationClassName, validator));
   var describedBy = classNames(ariaDescribedBy, _defineProperty({}, "".concat(uuid, "_message"), (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0));
   return jsxs("div", {
-    className: "form-group",
+    className: "gds-form-group",
     children: [jsxs("label", {
       htmlFor: uuid,
       className: labelClassNames,
@@ -43,7 +43,7 @@ var Checkbox = /*#__PURE__*/forwardRef(function (_a, ref) {
         ref: ref
       }, props)), jsx("i", {})]
     }), validator && jsxs("span", {
-      className: "form-info",
+      className: "gds-form-info",
       id: "".concat(uuid, "_message"),
       style: {
         display: 'flex',

package/src/lib/form/group/group.js

@@ -10,22 +10,22 @@ function Group(_ref) {
     groupBorder = _ref$groupBorder === void 0 ? false : _ref$groupBorder,
     _ref$groupFocus = _ref.groupFocus,
     groupFocus = _ref$groupFocus === void 0 ? false : _ref$groupFocus;
-  var groupClassName = classNames('group', {
-    'group-border': groupBorder
+  var groupClassName = classNames('gds-group', {
+    'gds-group-border': groupBorder
   }, {
-    'group-focus': groupFocus
+    'gds-group-focus': groupFocus
   }, {
     'is-invalid': error
   }, className);
   var errorMessage = error ? error.message || error : '';
   return jsxs("div", {
-    className: "form-group",
+    className: "gds-form-group",
     id: id,
     children: [jsx("div", {
       className: groupClassName,
       children: children
     }), error && jsx("span", {
-      className: "form-info",
+      className: "gds-form-info",
       id: id && "".concat(id, "-message"),
       children: errorMessage
     })]

package/src/lib/form/input/input.js

@@ -75,7 +75,7 @@ var Input = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, [formatter, setLocalValue, onChange, onChangeInput]);
   var showSimpleInput = !label && !info && !expandableInfo;
   var describedBy = classNames(ariaDescribedBy, _defineProperty(_defineProperty({}, "".concat(uuid, "_info"), !showSimpleInput && info), "gds-expandable-info-".concat(uuid), !showSimpleInput && expandableInfo));
-  var inputClassName = classNames(className, _defineProperty({}, validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator), validator));
+  var inputClassName = classNames('gds-input', className, _defineProperty({}, validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator), validator));
   var input = jsx("input", Object.assign({
     "aria-describedby": describedBy || undefined,
     "aria-invalid": (validator === null || validator === void 0 ? void 0 : validator.indicator) === 'error',

package/src/lib/form/radioButton/radioButton.js

@@ -15,7 +15,7 @@ var RadioButton = /*#__PURE__*/forwardRef(function (_a, ref) {
   var inputClassNames = classNames(validator && validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator));
   return jsxs("label", {
     htmlFor: id,
-    className: "form-control",
+    className: "gds-form-control",
     children: [jsx("input", Object.assign({
       id: id,
       type: "radio",

package/src/lib/form/text/text.js

@@ -6,7 +6,7 @@ import { jsx } from 'react/jsx-runtime';
 var Text = function Text(_ref) {
   var children = _ref.children;
   return jsx("span", {
-    className: "form-text",
+    className: "gds-form-text",
     children: children
   });
 };

package/src/lib/form/textarea/textarea.js

@@ -55,7 +55,7 @@ var TextArea = /*#__PURE__*/forwardRef(function (_a, ref) {
     if (onChange) onChange(event);
   }, [setLocalValue, onChange]);
   var describedBy = classNames(ariaDescribedBy, _defineProperty(_defineProperty(_defineProperty({}, "gds-expandable-info-".concat(uuid), expandableInfo), "".concat(uuid, "_info"), info), "".concat(uuid, "_message"), (validator === null || validator === void 0 ? void 0 : validator.message) !== undefined && validator.message.length > 0));
-  var inputClassName = classNames(className, _defineProperty({}, validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator), validator)) || undefined;
+  var inputClassName = classNames('gds-textarea', className, _defineProperty({}, validateClassName(validator === null || validator === void 0 ? void 0 : validator.indicator), validator)) || undefined;
   var rightAlignedFooterInfo = maxLength ? "".concat((localValue === null || localValue === void 0 ? void 0 : localValue.length) || 0, "/").concat(maxLength) : undefined;
   return jsx(FormItem, {
     "aria-live": ariaLive,

package/src/lib/formItem/formItem.js

@@ -76,7 +76,7 @@ var FormItem = function FormItem(_ref) {
           htmlFor: role ? undefined : inputId,
           children: label
         }), labelInformation && jsx("div", {
-          className: "form-info",
+          className: "gds-form-info",
           id: "".concat(inputId, "_info"),
           children: labelInformation
         })]

package/src/lib/in-page-wizard/inPageWizardStepCard.js

@@ -20,7 +20,7 @@ var InPageWizardStepCard = function InPageWizardStepCard(_ref) {
     _ref$nextBtnText = _ref.nextBtnText,
     nextBtnText = _ref$nextBtnText === void 0 ? 'Next' : _ref$nextBtnText,
     onEditClick = _ref.onEditClick;
-  var sectionClassName = classNames('gds-in-page-wizard-step-card', 'card', {
+  var sectionClassName = classNames('gds-card', 'gds-in-page-wizard-step-card', {
     active: stepStatus === 'IsActive',
     completed: stepStatus === 'IsComplete'
   });
@@ -43,7 +43,7 @@ var InPageWizardStepCard = function InPageWizardStepCard(_ref) {
       }), stepStatus === 'IsComplete' && jsx("div", {
         className: "gds-in-page-wizard-step-card__header__edit",
         children: jsxs("button", {
-          className: "secondary small",
+          className: "gds-button secondary small",
           onClick: onEditClick,
           children: [jsx(Edit, {
             fill: 'var(--color)',
@@ -58,14 +58,14 @@ var InPageWizardStepCard = function InPageWizardStepCard(_ref) {
     }), stepStatus === 'IsActive' && !hideFooter && jsx("footer", {
       className: "gds-in-page-wizard-step-card__footer",
       children: jsxs("button", {
-        className: "primary",
+        className: "gds-button",
         onClick: onNextClick,
         children: [nextBtnText, nextBtnIcon]
       })
     }), stepStatus === 'IsComplete' && !hideFooter && jsx("footer", {
       className: "gds-in-page-wizard-step-card__footer gds-in-page-wizard-step-card__footer--edit",
       children: jsxs("button", {
-        className: "secondary",
+        className: "gds-button secondary",
         onClick: onEditClick,
         children: [jsx(Edit, {
           fill: 'var(--color)',

package/src/lib/link/link.d.ts

@@ -1,11 +1,11 @@
 import { HTMLProps, PropsWithChildren } from 'react';
-import { ButtonVariant } from '@sebgroup/extract';
 interface LinkProps extends HTMLProps<HTMLAnchorElement> {
-    button?: boolean | ButtonVariant;
+    button?: boolean | string;
     secondary?: boolean;
+    variant?: 'blue' | 'white' | 'black';
 }
 /**
  * @deprecated Please use the `gds-link` web component from green-core instead
  */
-export declare const Link: ({ button, secondary, children, className, role, ...otherProps }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Link: ({ button, secondary, children, className, role, variant, ...props }: PropsWithChildren<LinkProps>) => import("react/jsx-runtime").JSX.Element;
 export default Link;

package/src/lib/link/link.js

@@ -11,16 +11,20 @@ var Link = function Link(_a) {
     children = _a.children,
     className = _a.className,
     role = _a.role,
-    otherProps = __rest(_a, ["button", "secondary", "children", "className", "role"]);
+    _a$variant = _a.variant,
+    variant = _a$variant === void 0 ? 'blue' : _a$variant,
+    props = __rest(_a, ["button", "secondary", "children", "className", "role", "variant"]);
   var linkClassName = classNames(className, {
-    button: button
-  }, button, {
-    'link gds-link-arrow': secondary
-  });
+    'gds-link': !button,
+    'gds-button': button,
+    'gds-link-arrow': secondary,
+    'gds-link--white': variant === 'white',
+    'gds-link--black': variant === 'black'
+  }, button);
   return jsx("a", Object.assign({
     className: linkClassName,
     role: button ? 'button' : role
-  }, otherProps, {
+  }, props, {
     children: children
   }));
 };

package/src/lib/list/index.d.ts

@@ -1,2 +1 @@
 export * from './list';
-export * as ValueList from './valueList';

package/src/lib/list/index.js

@@ -1,5 +1,4 @@
 export { List } from './list.js';
-export { v as ValueList } from '../../../valueList.js';
 import '../../../_tslib.js';
 import 'react/jsx-runtime';
 import './listItem.js';

package/src/lib/modal/modal.js

@@ -103,9 +103,8 @@ var Modal = function Modal(_a) {
     enableBodyScrollLock = _a$enableBodyScrollLo === void 0 ? true : _a$enableBodyScrollLo,
     props = __rest(_a, ["type", "id", "isOpen", "size", "enableBodyScrollLock"]);
   var _useState = useState(id),
-    _useState2 = _slicedToArray(_useState, 2),
+    _useState2 = _slicedToArray(_useState, 1),
     uuid = _useState2[0];
-    _useState2[1];
   var _useState3 = useState(UNMOUNTED),
     _useState4 = _slicedToArray(_useState3, 2),
     status = _useState4[0],

package/src/lib/table/components/parts/TableHeaderCell/TableHeaderCell.js

@@ -1,6 +1,6 @@
 import { _ as _slicedToArray } from '../../../../../../_rollupPluginBabelHelpers.js';
 import { _ as __rest } from '../../../../../../_tslib.js';
-import { jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import React from 'react';
 import classNames from 'classnames';
 import { useTableContext } from '../../context/TableContextProvider.js';
@@ -78,15 +78,15 @@ var TableHeaderCell = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   }, [sortable, sortedColumn]);
   return jsx("th", Object.assign({
     className: classNames(className, {
-      'sg-sortable': sortable
+      'gds-sortable': sortable
     }),
     onClick: sortable ? onSort : onClick,
     ref: ref,
     "aria-sort": getCurrentSortValue()
   }, props, {
-    children: sortable ? jsx("button", {
-      className: "sg-table-sort",
-      children: children
+    children: sortable ? jsxs("button", {
+      className: "gds-table-sort",
+      children: [" ", children]
     }) : children
   }));
 });

package/src/lib/list/valueList.d.ts

@@ -1,33 +0,0 @@
-import { ReactElement } from 'react';
-interface ValueListProps {
-    children?: ReactElement<ValueListItemProps> | ReactElement<ValueListItemProps>[];
-    inverted?: boolean;
-}
-interface ValueListItemProps {
-    children: string;
-}
-/**
- * @deprecated
- * Use `GroupedList` instead.
- */
-export declare const Label: ({ children }: ValueListItemProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated
- * Use `GroupedList` instead.
- */
-export declare const Value: ({ children }: ValueListItemProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated
- * Use `GroupedList` instead.
- */
-export declare const List: ({ children, inverted }: ValueListProps) => import("react/jsx-runtime").JSX.Element;
-/**
- * @deprecated
- * Use `GroupedList` instead.
- */
-declare const _default: {
-    List: ({ children, inverted }: ValueListProps) => import("react/jsx-runtime").JSX.Element;
-    Label: ({ children }: ValueListItemProps) => import("react/jsx-runtime").JSX.Element;
-    Value: ({ children }: ValueListItemProps) => import("react/jsx-runtime").JSX.Element;
-};
-export default _default;

package/src/lib/list/valueList.js

@@ -1,2 +0,0 @@
-import 'react/jsx-runtime';
-export { L as Label, a as List, V as Value, b as default } from '../../../valueList.js';

package/valueList.js

@@ -1,55 +0,0 @@
-import { jsx } from 'react/jsx-runtime';
-
-/**
- * @deprecated
- * Use `GroupedList` instead.
- */
-var Label = function Label(_ref) {
-  var children = _ref.children;
-  return jsx("dt", {
-    children: children
-  });
-};
-/**
- * @deprecated
- * Use `GroupedList` instead.
- */
-var Value = function Value(_ref2) {
-  var children = _ref2.children;
-  return jsx("dd", {
-    children: children
-  });
-};
-/**
- * @deprecated
- * Use `GroupedList` instead.
- */
-var List = function List(_ref3) {
-  var children = _ref3.children,
-    inverted = _ref3.inverted;
-  var classNames = 'gds-list';
-  if (inverted) classNames += ' gds-list--inverted';
-  return jsx("dl", {
-    className: classNames,
-    children: children
-  });
-};
-/**
- * @deprecated
- * Use `GroupedList` instead.
- */
-var valueList = {
-  List: List,
-  Label: Label,
-  Value: Value
-};
-
-var valueList$1 = /*#__PURE__*/Object.freeze({
-  __proto__: null,
-  Label: Label,
-  List: List,
-  Value: Value,
-  default: valueList
-});
-
-export { Label as L, Value as V, List as a, valueList as b, valueList$1 as v };