@digigov/react-experimental 1.1.1

package/CHANGELOG.md

@@ -0,0 +1,11 @@
+# Change Log - @digigov/react-experimental
+
+This log was last generated on Mon, 29 Jan 2024 17:45:11 GMT and should not be manually modified.
+
+## 1.1.1
+Mon, 29 Jan 2024 17:45:11 GMT
+
+### Patches
+
+- Add react-experimental folder
+

package/FloatingButton/index.d.ts

@@ -0,0 +1,21 @@
+import React from 'react';
+import { ButtonProps } from '@digigov/react-core/Button';
+export interface FloatingButtonProps extends ButtonProps {
+    /**
+     * direction is optional.
+     * direction sets the position of the button to either left or right side of the screen.
+     * The default value is 'left'.
+     * @value 'right'
+     * @value 'left'
+     * @default 'left'
+     */
+    direction?: 'right' | 'left';
+}
+/**
+ *
+ * A FloatingButton performs the primary, or most common, action on a screen.
+ * Use it primary in mobile applications.
+ * Avoid using text in this type of button, use icons instead.
+ */
+export declare const FloatingButton: React.ForwardRefExoticComponent<Pick<FloatingButtonProps, "form" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "name" | "type" | "role" | "tabIndex" | "direction" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "variant" | "dense"> & React.RefAttributes<HTMLButtonElement>>;
+export default FloatingButton;

package/FloatingButton/index.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["direction", "className", "children"];
+import React from 'react';
+import clsx from 'clsx';
+import Button from '@digigov/react-core/Button';
+/**
+ *
+ * A FloatingButton performs the primary, or most common, action on a screen.
+ * Use it primary in mobile applications.
+ * Avoid using text in this type of button, use icons instead.
+ */
+export var FloatingButton = /*#__PURE__*/React.forwardRef(function FloatingButton(_ref, ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'right' : _ref$direction,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Button, _extends({
+    ref: ref,
+    className: clsx(className, direction === 'right' && 'govgr-floating-btn--right', direction === 'left' && 'govgr-floating-btn--left', true && 'govgr-floating-btn')
+  }, props), children);
+});
+export default FloatingButton;

package/FloatingButton/index.test/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import FloatingButton from '@digigov/react-experimental/FloatingButton';
+var _ref = /*#__PURE__*/React.createElement(FloatingButton, null, "+");
+it('renders the FloatingButton with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+var _ref2 = /*#__PURE__*/React.createElement(FloatingButton, {
+  direction: "right"
+}, "+");
+it('renders the FloatingButton with  direction="right"', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+var _ref3 = /*#__PURE__*/React.createElement(FloatingButton, {
+  direction: "left"
+}, "+");
+it('renders the FloatingButton with  direction="left"', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});

package/FloatingButton/index.test/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/FloatingButton/index.test/index.js"
+}

package/FloatingButton/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/FloatingButton/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../cjs/FloatingButton/index.js"
+}

package/OptionButtonBase/index.d.ts

@@ -0,0 +1,19 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+export interface OptionButtonBaseProps extends BaseProps<'button'> {
+    /**
+     * selected is optional.
+     * Use selected prop to set selected styling.
+    * @value true
+    * @value false
+    * @default false
+    */
+    selected?: boolean;
+}
+/**
+ *
+ * OptionButtonBases can be used to represent small blocks of information.
+ * OptionButtonBase component must be inside OptionButtonBaseSection component.
+ */
+export declare const OptionButtonBase: React.ForwardRefExoticComponent<Pick<OptionButtonBaseProps, "form" | "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "name" | "type" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "value" | "selected" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden"> & React.RefAttributes<HTMLButtonElement>>;
+export default OptionButtonBase;

package/OptionButtonBase/index.js

@@ -0,0 +1,24 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["selected", "className", "children"];
+import React from 'react';
+import clsx from 'clsx';
+import Base from '@digigov/react-core/Base';
+/**
+ *
+ * OptionButtonBases can be used to represent small blocks of information.
+ * OptionButtonBase component must be inside OptionButtonBaseSection component.
+ */
+export var OptionButtonBase = /*#__PURE__*/React.forwardRef(function OptionButtonBase(_ref, ref) {
+  var _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    className = _ref.className,
+    children = _ref.children,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    as: "button",
+    ref: ref,
+    className: clsx(className, selected && 'govgr-option-btn--selected', true && ['govgr-btn', 'govgr-option-btn'])
+  }, props), children);
+});
+export default OptionButtonBase;

package/OptionButtonBase/index.test/index.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import OptionButtonBase from '@digigov/react-experimental/OptionButtonBase';
+var _ref = /*#__PURE__*/React.createElement(OptionButtonBase, null, "+");
+it('renders the OptionButtonBase with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+var _ref2 = /*#__PURE__*/React.createElement(OptionButtonBase, {
+  selected: true
+}, "+");
+it('renders the OptionButtonBase with  selected=true', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+var _ref3 = /*#__PURE__*/React.createElement(OptionButtonBase, {
+  selected: false
+}, "+");
+it('renders the OptionButtonBase with  selected=false', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});

package/OptionButtonBase/index.test/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/OptionButtonBase/index.test/index.js"
+}

package/OptionButtonBase/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/OptionButtonBase/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../cjs/OptionButtonBase/index.js"
+}

package/OptionButtonSteps/index.d.ts

@@ -0,0 +1,25 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+export interface OptionButtonStepsProps extends BaseProps<'div'> {
+    /**
+    * @value 0
+    * @value 1
+    * @value 2
+    * @value 3
+    * @value 4
+    * @default 0
+    */
+    steps?: stepsProps;
+    /**
+    * @default 0
+    */
+    activeStep?: number;
+}
+export type stepsProps = 0 | 1 | 2 | 3 | 4;
+/**
+ *
+ * OptionButtonSteps can be used to represent small blocks of information.
+ * OptionButtonSteps component must be inside OptionButtonStepsSection component.
+ */
+export declare const OptionButtonSteps: React.ForwardRefExoticComponent<Pick<OptionButtonStepsProps, "slot" | "style" | "title" | "as" | "className" | "color" | "id" | "lang" | "role" | "tabIndex" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "placeholder" | "spellCheck" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "margin" | "marginTop" | "marginBottom" | "marginLeft" | "marginRight" | "padding" | "paddingTop" | "paddingBottom" | "paddingLeft" | "paddingRight" | "printHidden" | "printVisible" | "xsUpHidden" | "smUpHidden" | "mdUpHidden" | "lgUpHidden" | "xlUpHidden" | "xsHidden" | "smHidden" | "mdHidden" | "lgHidden" | "xlHidden" | "steps" | "activeStep"> & React.RefAttributes<HTMLDivElement>>;
+export default OptionButtonSteps;

package/OptionButtonSteps/index.js

@@ -0,0 +1,31 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["steps", "activeStep", "className"];
+import React from 'react';
+import clsx from 'clsx';
+import Base from '@digigov/react-core/Base';
+/**
+ *
+ * OptionButtonSteps can be used to represent small blocks of information.
+ * OptionButtonSteps component must be inside OptionButtonStepsSection component.
+ */
+export var OptionButtonSteps = /*#__PURE__*/React.forwardRef(function OptionButtonSteps(_ref, ref) {
+  var _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? 0 : _ref$steps,
+    _ref$activeStep = _ref.activeStep,
+    activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
+    className = _ref.className,
+    props = _objectWithoutProperties(_ref, _excluded);
+  var renderStep = function renderStep(step) {
+    return /*#__PURE__*/React.createElement(Base, {
+      as: "div",
+      className: clsx(className, activeStep >= step && 'govgr-option-btn__step--active', true && 'govgr-option-btn__step')
+    });
+  };
+  return /*#__PURE__*/React.createElement(Base, _extends({
+    as: "div",
+    ref: ref,
+    className: clsx(className, true && 'govgr-option-btn__steps')
+  }, props), steps >= 1 && renderStep(1), steps >= 2 && renderStep(2), steps >= 3 && renderStep(3), steps >= 4 && renderStep(4));
+});
+export default OptionButtonSteps;

package/OptionButtonSteps/index.test/index.js

@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import OptionButtonSteps from '@digigov/react-experimental/OptionButtonSteps';
+var _ref = /*#__PURE__*/React.createElement(OptionButtonSteps, null, "+");
+it('renders the OptionButtonSteps with no props', function () {
+  expect(mount(_ref)).toMatchSnapshot();
+});
+var _ref2 = /*#__PURE__*/React.createElement(OptionButtonSteps, {
+  steps: 3
+}, "+");
+it('renders the OptionButtonSteps with steps="3"', function () {
+  expect(mount(_ref2)).toMatchSnapshot();
+});
+var _ref3 = /*#__PURE__*/React.createElement(OptionButtonSteps, {
+  steps: 4
+}, "+");
+it('renders the OptionButtonSteps with steps=4', function () {
+  expect(mount(_ref3)).toMatchSnapshot();
+});
+var _ref4 = /*#__PURE__*/React.createElement(OptionButtonSteps, {
+  activeStep: 1
+}, "+");
+it('renders the OptionButtonSteps with activeStep=1', function () {
+  expect(mount(_ref4)).toMatchSnapshot();
+});
+var _ref5 = /*#__PURE__*/React.createElement(OptionButtonSteps, {
+  steps: 3,
+  activeStep: 1
+}, "+");
+it('renders the OptionButtonSteps with steps=3 activeStep=1', function () {
+  expect(mount(_ref5)).toMatchSnapshot();
+});

package/OptionButtonSteps/index.test/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../../cjs/OptionButtonSteps/index.test/index.js"
+}

package/OptionButtonSteps/index.test.d.ts

@@ -0,0 +1 @@
+export {};

package/OptionButtonSteps/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "./index.js",
+  "types": "./index.d.ts",
+  "main": "../cjs/OptionButtonSteps/index.js"
+}

package/cjs/FloatingButton/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.FloatingButton = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Button = _interopRequireDefault(require("@digigov/react-core/Button"));
+var _excluded = ["direction", "className", "children"];
+/**
+ *
+ * A FloatingButton performs the primary, or most common, action on a screen.
+ * Use it primary in mobile applications.
+ * Avoid using text in this type of button, use icons instead.
+ */
+var FloatingButton = exports.FloatingButton = /*#__PURE__*/_react["default"].forwardRef(function FloatingButton(_ref, ref) {
+  var _ref$direction = _ref.direction,
+    direction = _ref$direction === void 0 ? 'right' : _ref$direction,
+    className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_Button["default"], (0, _extends2["default"])({
+    ref: ref,
+    className: (0, _clsx["default"])(className, direction === 'right' && 'govgr-floating-btn--right', direction === 'left' && 'govgr-floating-btn--left', true && 'govgr-floating-btn')
+  }, props), children);
+});
+var _default = exports["default"] = FloatingButton;

package/cjs/FloatingButton/index.test/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _FloatingButton = _interopRequireDefault(require("@digigov/react-experimental/FloatingButton"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_FloatingButton["default"], null, "+");
+it('renders the FloatingButton with no props', function () {
+  expect((0, _enzyme.mount)(_ref)).toMatchSnapshot();
+});
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_FloatingButton["default"], {
+  direction: "right"
+}, "+");
+it('renders the FloatingButton with  direction="right"', function () {
+  expect((0, _enzyme.mount)(_ref2)).toMatchSnapshot();
+});
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_FloatingButton["default"], {
+  direction: "left"
+}, "+");
+it('renders the FloatingButton with  direction="left"', function () {
+  expect((0, _enzyme.mount)(_ref3)).toMatchSnapshot();
+});

package/cjs/OptionButtonBase/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.OptionButtonBase = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+var _excluded = ["selected", "className", "children"];
+/**
+ *
+ * OptionButtonBases can be used to represent small blocks of information.
+ * OptionButtonBase component must be inside OptionButtonBaseSection component.
+ */
+var OptionButtonBase = exports.OptionButtonBase = /*#__PURE__*/_react["default"].forwardRef(function OptionButtonBase(_ref, ref) {
+  var _ref$selected = _ref.selected,
+    selected = _ref$selected === void 0 ? false : _ref$selected,
+    className = _ref.className,
+    children = _ref.children,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
+    as: "button",
+    ref: ref,
+    className: (0, _clsx["default"])(className, selected && 'govgr-option-btn--selected', true && ['govgr-btn', 'govgr-option-btn'])
+  }, props), children);
+});
+var _default = exports["default"] = OptionButtonBase;

package/cjs/OptionButtonBase/index.test/index.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _OptionButtonBase = _interopRequireDefault(require("@digigov/react-experimental/OptionButtonBase"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_OptionButtonBase["default"], null, "+");
+it('renders the OptionButtonBase with no props', function () {
+  expect((0, _enzyme.mount)(_ref)).toMatchSnapshot();
+});
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_OptionButtonBase["default"], {
+  selected: true
+}, "+");
+it('renders the OptionButtonBase with  selected=true', function () {
+  expect((0, _enzyme.mount)(_ref2)).toMatchSnapshot();
+});
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_OptionButtonBase["default"], {
+  selected: false
+}, "+");
+it('renders the OptionButtonBase with  selected=false', function () {
+  expect((0, _enzyme.mount)(_ref3)).toMatchSnapshot();
+});

package/cjs/OptionButtonSteps/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.OptionButtonSteps = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireDefault(require("react"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _Base = _interopRequireDefault(require("@digigov/react-core/Base"));
+var _excluded = ["steps", "activeStep", "className"];
+/**
+ *
+ * OptionButtonSteps can be used to represent small blocks of information.
+ * OptionButtonSteps component must be inside OptionButtonStepsSection component.
+ */
+var OptionButtonSteps = exports.OptionButtonSteps = /*#__PURE__*/_react["default"].forwardRef(function OptionButtonSteps(_ref, ref) {
+  var _ref$steps = _ref.steps,
+    steps = _ref$steps === void 0 ? 0 : _ref$steps,
+    _ref$activeStep = _ref.activeStep,
+    activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
+    className = _ref.className,
+    props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  var renderStep = function renderStep(step) {
+    return /*#__PURE__*/_react["default"].createElement(_Base["default"], {
+      as: "div",
+      className: (0, _clsx["default"])(className, activeStep >= step && 'govgr-option-btn__step--active', true && 'govgr-option-btn__step')
+    });
+  };
+  return /*#__PURE__*/_react["default"].createElement(_Base["default"], (0, _extends2["default"])({
+    as: "div",
+    ref: ref,
+    className: (0, _clsx["default"])(className, true && 'govgr-option-btn__steps')
+  }, props), steps >= 1 && renderStep(1), steps >= 2 && renderStep(2), steps >= 3 && renderStep(3), steps >= 4 && renderStep(4));
+});
+var _default = exports["default"] = OptionButtonSteps;

package/cjs/OptionButtonSteps/index.test/index.js

@@ -0,0 +1,35 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _react = _interopRequireDefault(require("react"));
+var _enzyme = require("enzyme");
+var _OptionButtonSteps = _interopRequireDefault(require("@digigov/react-experimental/OptionButtonSteps"));
+var _ref = /*#__PURE__*/_react["default"].createElement(_OptionButtonSteps["default"], null, "+");
+it('renders the OptionButtonSteps with no props', function () {
+  expect((0, _enzyme.mount)(_ref)).toMatchSnapshot();
+});
+var _ref2 = /*#__PURE__*/_react["default"].createElement(_OptionButtonSteps["default"], {
+  steps: 3
+}, "+");
+it('renders the OptionButtonSteps with steps="3"', function () {
+  expect((0, _enzyme.mount)(_ref2)).toMatchSnapshot();
+});
+var _ref3 = /*#__PURE__*/_react["default"].createElement(_OptionButtonSteps["default"], {
+  steps: 4
+}, "+");
+it('renders the OptionButtonSteps with steps=4', function () {
+  expect((0, _enzyme.mount)(_ref3)).toMatchSnapshot();
+});
+var _ref4 = /*#__PURE__*/_react["default"].createElement(_OptionButtonSteps["default"], {
+  activeStep: 1
+}, "+");
+it('renders the OptionButtonSteps with activeStep=1', function () {
+  expect((0, _enzyme.mount)(_ref4)).toMatchSnapshot();
+});
+var _ref5 = /*#__PURE__*/_react["default"].createElement(_OptionButtonSteps["default"], {
+  steps: 3,
+  activeStep: 1
+}, "+");
+it('renders the OptionButtonSteps with steps=3 activeStep=1', function () {
+  expect((0, _enzyme.mount)(_ref5)).toMatchSnapshot();
+});

package/cjs/index.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _FloatingButton = require("@digigov/react-experimental/FloatingButton");
+Object.keys(_FloatingButton).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _FloatingButton[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _FloatingButton[key];
+    }
+  });
+});
+var _OptionButtonBase = require("@digigov/react-experimental/OptionButtonBase");
+Object.keys(_OptionButtonBase).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OptionButtonBase[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _OptionButtonBase[key];
+    }
+  });
+});
+var _OptionButtonSteps = require("@digigov/react-experimental/OptionButtonSteps");
+Object.keys(_OptionButtonSteps).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _OptionButtonSteps[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _OptionButtonSteps[key];
+    }
+  });
+});

package/index.d.ts

@@ -0,0 +1,3 @@
+export * from '@digigov/react-experimental/FloatingButton';
+export * from '@digigov/react-experimental/OptionButtonBase';
+export * from '@digigov/react-experimental/OptionButtonSteps';

package/index.js

@@ -0,0 +1,8 @@
+/** @license Digigov v1.1.1
+ *
+ * This source code is licensed under the BSD-2-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+export * from '@digigov/react-experimental/FloatingButton';
+export * from '@digigov/react-experimental/OptionButtonBase';
+export * from '@digigov/react-experimental/OptionButtonSteps';

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@digigov/react-experimental",
+  "version": "1.1.1",
+  "description": "@digigov react experimental components",
+  "author": "GRNET Developers <devs@lists.grnet.gr>",
+  "license": "BSD-2-Clause",
+  "main": "./cjs/index.js",
+  "module": "./index.js",
+  "peerDependencies": {
+    "@digigov/css": "1.1.1",
+    "@digigov/react-experimental": "1.1.1",
+    "@digigov/react-icons": "1.1.1",
+    "clsx": "1.1.1",
+    "react": "^16.8.0 || ^17.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0"
+  },
+  "dependencies": {
+    "ts-morph": "18.0.0"
+  },
+  "private": false,
+  "typings": "./index.d.ts"
+}

package/src/FloatingButton/index.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import FloatingButton from '@digigov/react-experimental/FloatingButton';
+
+it('renders the FloatingButton with no props', () => {
+  expect(mount(<FloatingButton>+</FloatingButton>)).toMatchSnapshot();
+});
+it('renders the FloatingButton with  direction="right"', () => {
+  expect(mount(<FloatingButton direction="right">+</FloatingButton>)).toMatchSnapshot();
+});
+it('renders the FloatingButton with  direction="left"', () => {
+  expect(mount(<FloatingButton direction="left">+</FloatingButton>)).toMatchSnapshot();
+});

package/src/FloatingButton/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import Button, { ButtonProps } from '@digigov/react-core/Button';
+
+export interface FloatingButtonProps extends ButtonProps {
+  /**
+   * direction is optional.
+   * direction sets the position of the button to either left or right side of the screen.
+   * The default value is 'left'.
+   * @value 'right'
+   * @value 'left'
+   * @default 'left'
+   */
+  direction?: 'right' | 'left';
+}
+/**
+ *
+ * A FloatingButton performs the primary, or most common, action on a screen.
+ * Use it primary in mobile applications.
+ * Avoid using text in this type of button, use icons instead.
+ */
+export const FloatingButton = React.forwardRef<
+  HTMLButtonElement,
+  FloatingButtonProps
+>(function FloatingButton(
+  { direction = 'right', className, children, ...props },
+  ref
+) {
+  return (
+    <Button
+      ref={ref}
+      className={clsx(className, {
+        'govgr-floating-btn': true,
+        'govgr-floating-btn--right': direction === 'right',
+        'govgr-floating-btn--left': direction === 'left',
+      })}
+      {...props}
+    >
+      {children}
+    </Button>
+  );
+});
+
+export default FloatingButton;

package/src/OptionButtonBase/index.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import OptionButtonBase from '@digigov/react-experimental/OptionButtonBase';
+
+it('renders the OptionButtonBase with no props', () => {
+  expect(mount(<OptionButtonBase>+</OptionButtonBase>)).toMatchSnapshot();
+});
+it('renders the OptionButtonBase with  selected=true', () => {
+  expect(mount(<OptionButtonBase selected={true}>+</OptionButtonBase>)).toMatchSnapshot();
+});
+it('renders the OptionButtonBase with  selected=false', () => {
+  expect(mount(<OptionButtonBase selected={false}>+</OptionButtonBase>)).toMatchSnapshot();
+});

package/src/OptionButtonBase/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface OptionButtonBaseProps
+  extends BaseProps<'button'> {
+  /**
+   * selected is optional. 
+   * Use selected prop to set selected styling.
+  * @value true
+  * @value false
+  * @default false
+  */
+  selected?: boolean
+}
+/**
+ *
+ * OptionButtonBases can be used to represent small blocks of information.
+ * OptionButtonBase component must be inside OptionButtonBaseSection component.
+ */
+export const OptionButtonBase = React.forwardRef<
+  HTMLButtonElement,
+  OptionButtonBaseProps
+>(function OptionButtonBase(
+  { selected = false, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+    as="button"
+    ref={ref}
+    className={clsx(className, {
+      'govgr-btn': true,
+      'govgr-option-btn': true,
+      'govgr-option-btn--selected': selected,
+    })}
+    {...props}    
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default OptionButtonBase;

package/src/OptionButtonSteps/index.test.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import OptionButtonSteps from '@digigov/react-experimental/OptionButtonSteps';
+
+it('renders the OptionButtonSteps with no props', () => {
+  expect(mount(<OptionButtonSteps>+</OptionButtonSteps>)).toMatchSnapshot();
+});
+it('renders the OptionButtonSteps with steps="3"', () => {
+  expect(mount(<OptionButtonSteps steps={3}>+</OptionButtonSteps>)).toMatchSnapshot();
+});
+it('renders the OptionButtonSteps with steps=4', () => {
+  expect(mount(<OptionButtonSteps steps={4}>+</OptionButtonSteps>)).toMatchSnapshot();
+});
+it('renders the OptionButtonSteps with activeStep=1', () => {
+  expect(mount(<OptionButtonSteps activeStep={1}>+</OptionButtonSteps>)).toMatchSnapshot();
+});
+it('renders the OptionButtonSteps with steps=3 activeStep=1', () => {
+  expect(mount(<OptionButtonSteps steps={3} activeStep={1}>+</OptionButtonSteps>)).toMatchSnapshot();
+});

package/src/OptionButtonSteps/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface OptionButtonStepsProps extends BaseProps<'div'> {
+  /**
+  * @value 0
+  * @value 1
+  * @value 2
+  * @value 3
+  * @value 4
+  * @default 0
+  */
+  steps?: stepsProps;
+  /**
+  * @default 0
+  */
+  activeStep?: number;
+}
+
+export type stepsProps = 0 | 1 | 2 | 3 | 4;
+/**
+ *
+ * OptionButtonSteps can be used to represent small blocks of information.
+ * OptionButtonSteps component must be inside OptionButtonStepsSection component.
+ */
+export const OptionButtonSteps = React.forwardRef<
+  HTMLDivElement,
+  OptionButtonStepsProps
+>(function OptionButtonSteps(
+  { steps = 0, activeStep = 0, className, ...props },
+  ref
+) {
+
+  const renderStep = (step: number) => (
+    <Base
+      as="div"
+      className={clsx(className, {
+        'govgr-option-btn__step': true,
+        'govgr-option-btn__step--active': activeStep >= step,
+      })}
+    ></Base>
+  );
+
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-option-btn__steps': true,
+      })}
+      {...props}
+    >
+      {steps >= 1 && renderStep(1)}
+      {steps >= 2 && renderStep(2)}
+      {steps >= 3 && renderStep(3)}
+      {steps >= 4 && renderStep(4)}
+    </Base>
+  );
+});
+
+export default OptionButtonSteps;

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from '@digigov/react-experimental/FloatingButton';
+export * from '@digigov/react-experimental/OptionButtonBase';
+export * from '@digigov/react-experimental/OptionButtonSteps';