@obosbbl/grunnmuren-react 1.0.1 → 1.1.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/Campaign/Campaign.d.ts +25 -0
- package/dist/Campaign/index.d.ts +1 -0
- package/dist/Checkbox/Checkbox.d.ts +3 -1
- package/dist/StepList/StepList.d.ts +13 -0
- package/dist/StepList/index.d.ts +1 -0
- package/dist/grunnmuren.es.js +134 -24
- package/dist/index.d.ts +3 -1
- package/package.json +6 -6
- package/dist/Stepper/Stepper.d.ts +0 -13
- package/dist/Stepper/index.d.ts +0 -1
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface CampaignProps<T extends React.ElementType> {
|
|
3
|
+
/** @default div */
|
|
4
|
+
as?: T;
|
|
5
|
+
body: React.ReactElement;
|
|
6
|
+
/** Use the `body` and `image` props. */
|
|
7
|
+
children?: never;
|
|
8
|
+
image: React.ReactElement;
|
|
9
|
+
/**
|
|
10
|
+
* Setting this to false changes the ordering of the body and the image on >= medium sceens.
|
|
11
|
+
* Use this to alternate the image's positon with lists of Campaigns.
|
|
12
|
+
* @default true
|
|
13
|
+
*/
|
|
14
|
+
rightAlignBody?: boolean;
|
|
15
|
+
}
|
|
16
|
+
declare const Campaign: {
|
|
17
|
+
<T extends import("react").ElementType<any> = "div">(props: CampaignProps<T> & Omit<import("react").PropsWithoutRef<import("react").ComponentProps<T>>, keyof CampaignProps<T>>): JSX.Element;
|
|
18
|
+
Body: (props: CampaignBodyProps) => JSX.Element;
|
|
19
|
+
Image: (props: CampaignImageProps) => JSX.Element;
|
|
20
|
+
};
|
|
21
|
+
interface CampaignBodyProps extends React.ComponentPropsWithoutRef<'div'> {
|
|
22
|
+
}
|
|
23
|
+
interface CampaignImageProps extends React.ComponentPropsWithoutRef<'img'> {
|
|
24
|
+
}
|
|
25
|
+
export { Campaign };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './Campaign';
|
|
@@ -5,5 +5,7 @@
|
|
|
5
5
|
export interface CheckboxProps extends React.ComponentPropsWithRef<'input'> {
|
|
6
6
|
children: React.ReactNode;
|
|
7
7
|
className?: string;
|
|
8
|
+
/** Error message for the form control */
|
|
9
|
+
error?: string;
|
|
8
10
|
}
|
|
9
|
-
export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "className" | "children" | "form" | "slot" | "style" | "title" | "pattern" | "list" | "role" | "key" | "alt" | "crossOrigin" | "height" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "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" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "autoComplete" | "accept" | "capture" | "checked" | "multiple" | "maxLength" | "minLength" | "enterKeyHint" | "max" | "min" | "readOnly" | "required" | "size"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
11
|
+
export declare const Checkbox: import("react").ForwardRefExoticComponent<Pick<CheckboxProps, "className" | "children" | "form" | "slot" | "style" | "title" | "pattern" | "list" | "role" | "error" | "key" | "alt" | "crossOrigin" | "height" | "src" | "width" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "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" | "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" | "step" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value" | "autoComplete" | "accept" | "capture" | "checked" | "multiple" | "maxLength" | "minLength" | "enterKeyHint" | "max" | "min" | "readOnly" | "required" | "size"> & import("react").RefAttributes<HTMLInputElement>>;
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
interface StepListProps extends React.ComponentPropsWithoutRef<'ol'> {
|
|
3
|
+
}
|
|
4
|
+
declare const StepList: {
|
|
5
|
+
(props: StepListProps): JSX.Element;
|
|
6
|
+
Item: (props: StepListItemProps) => JSX.Element;
|
|
7
|
+
};
|
|
8
|
+
interface StepListItemProps extends React.ComponentPropsWithoutRef<'li'> {
|
|
9
|
+
/** Content for the StepListItem's bullet */
|
|
10
|
+
bullet: React.ReactNode;
|
|
11
|
+
}
|
|
12
|
+
export declare const StepListItem: (props: StepListItemProps) => JSX.Element;
|
|
13
|
+
export { StepList };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export * from './StepList';
|
package/dist/grunnmuren.es.js
CHANGED
|
@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
|
|
|
31
31
|
};
|
|
32
32
|
import classNames from "clsx";
|
|
33
33
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
34
|
-
import { useCallback, useState, useEffect, useId, forwardRef, useContext, createContext, useMemo, useRef } from "react";
|
|
34
|
+
import { useCallback, useState, useEffect, useId, forwardRef, useContext, createContext, isValidElement, Children, cloneElement, useMemo, useRef } from "react";
|
|
35
35
|
var __defProp2 = Object.defineProperty;
|
|
36
36
|
var __defProps2 = Object.defineProperties;
|
|
37
37
|
var __getOwnPropDescs2 = Object.getOwnPropertyDescriptors;
|
|
@@ -51,6 +51,19 @@ var __spreadValues2 = (a, b) => {
|
|
|
51
51
|
return a;
|
|
52
52
|
};
|
|
53
53
|
var __spreadProps2 = (a, b) => __defProps2(a, __getOwnPropDescs2(b));
|
|
54
|
+
const ChevronDown = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
|
|
55
|
+
width: "1.25em",
|
|
56
|
+
height: "1.25em",
|
|
57
|
+
fill: "none",
|
|
58
|
+
viewBox: "0 0 29 17",
|
|
59
|
+
role: "img",
|
|
60
|
+
"aria-hidden": props["aria-label"] == null
|
|
61
|
+
}, props), {
|
|
62
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
63
|
+
fill: "currentColor",
|
|
64
|
+
d: "M0 4.31662L4.31662 0L14.3752 10.0484L24.4337 0L28.7503 4.31662L17.2563 15.8106C16.4929 16.5722 15.4586 16.9999 14.3803 16.9999C13.3019 16.9999 12.2676 16.5722 11.5042 15.8106L0 4.31662Z"
|
|
65
|
+
})
|
|
66
|
+
}));
|
|
54
67
|
const Close = (props) => /* @__PURE__ */ jsx("svg", __spreadProps2(__spreadValues2({
|
|
55
68
|
width: "1.25em",
|
|
56
69
|
height: "1.25em",
|
|
@@ -325,6 +338,62 @@ const Button = forwardRef((props, ref) => {
|
|
|
325
338
|
});
|
|
326
339
|
});
|
|
327
340
|
const ButtonColorContext = createContext("standard");
|
|
341
|
+
const CampaignContext = createContext(true);
|
|
342
|
+
const Campaign = (props) => {
|
|
343
|
+
const _a = props, {
|
|
344
|
+
as: Component = "div",
|
|
345
|
+
body: Body,
|
|
346
|
+
className,
|
|
347
|
+
image: Image,
|
|
348
|
+
rightAlignBody = true
|
|
349
|
+
} = _a, rest = __objRest(_a, [
|
|
350
|
+
"as",
|
|
351
|
+
"body",
|
|
352
|
+
"className",
|
|
353
|
+
"image",
|
|
354
|
+
"rightAlignBody"
|
|
355
|
+
]);
|
|
356
|
+
return /* @__PURE__ */ jsxs(Component, __spreadProps(__spreadValues({
|
|
357
|
+
className: classNames(className, "grid gap-8 md:grid-flow-col md:grid-cols-[50%,50%] md:gap-0")
|
|
358
|
+
}, rest), {
|
|
359
|
+
children: [/* @__PURE__ */ jsx(CampaignContext.Provider, {
|
|
360
|
+
value: rightAlignBody,
|
|
361
|
+
children: Image
|
|
362
|
+
}), Body]
|
|
363
|
+
}));
|
|
364
|
+
};
|
|
365
|
+
const CampaignBody = (props) => {
|
|
366
|
+
const _a = props, {
|
|
367
|
+
className
|
|
368
|
+
} = _a, rest = __objRest(_a, [
|
|
369
|
+
"className"
|
|
370
|
+
]);
|
|
371
|
+
return /* @__PURE__ */ jsx("div", __spreadValues({
|
|
372
|
+
className: classNames(className, "md:mx-18 self-center")
|
|
373
|
+
}, rest));
|
|
374
|
+
};
|
|
375
|
+
const CampaignImage = (props) => {
|
|
376
|
+
const _a = props, {
|
|
377
|
+
className: classNameProp,
|
|
378
|
+
children
|
|
379
|
+
} = _a, rest = __objRest(_a, [
|
|
380
|
+
"className",
|
|
381
|
+
"children"
|
|
382
|
+
]);
|
|
383
|
+
const bodyIsRightAligned = useContext(CampaignContext);
|
|
384
|
+
const className = classNames(classNameProp, "<md:rounded-b-3xl w-full", bodyIsRightAligned ? "md:rounded-r-3xl" : "md:rounded-l-3xl md:order-1");
|
|
385
|
+
if (isValidElement(children)) {
|
|
386
|
+
const child = Children.only(children);
|
|
387
|
+
return cloneElement(child, __spreadValues({
|
|
388
|
+
className
|
|
389
|
+
}, rest));
|
|
390
|
+
}
|
|
391
|
+
return /* @__PURE__ */ jsx("img", __spreadValues({
|
|
392
|
+
className
|
|
393
|
+
}, rest));
|
|
394
|
+
};
|
|
395
|
+
Campaign.Body = CampaignBody;
|
|
396
|
+
Campaign.Image = CampaignImage;
|
|
328
397
|
const Card = (props) => {
|
|
329
398
|
const _a = props, {
|
|
330
399
|
as: Component = "div",
|
|
@@ -380,26 +449,52 @@ const CardContent = (props) => {
|
|
|
380
449
|
}, rest));
|
|
381
450
|
};
|
|
382
451
|
const CardLinkOverlay = forwardRef((props, ref) => {
|
|
452
|
+
const _a = props, {
|
|
453
|
+
className
|
|
454
|
+
} = _a, rest = __objRest(_a, [
|
|
455
|
+
"className"
|
|
456
|
+
]);
|
|
383
457
|
return /* @__PURE__ */ jsx("a", __spreadValues({
|
|
384
|
-
className: "no-underline before:absolute before:top-0 before:left-0 before:block before:h-full before:w-full
|
|
458
|
+
className: classNames(className, "no-underline before:absolute before:top-0 before:left-0 before:block before:h-full before:w-full hover:underline"),
|
|
385
459
|
ref
|
|
386
|
-
},
|
|
460
|
+
}, rest));
|
|
387
461
|
});
|
|
388
462
|
const Checkbox = forwardRef((props, ref) => {
|
|
389
463
|
const _a = props, {
|
|
390
464
|
children,
|
|
391
|
-
className
|
|
465
|
+
className,
|
|
466
|
+
error,
|
|
467
|
+
id: idProp
|
|
392
468
|
} = _a, rest = __objRest(_a, [
|
|
393
469
|
"children",
|
|
394
|
-
"className"
|
|
470
|
+
"className",
|
|
471
|
+
"error",
|
|
472
|
+
"id"
|
|
395
473
|
]);
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
474
|
+
const id = useFallbackId(idProp);
|
|
475
|
+
const errorMsgId = id + "err";
|
|
476
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
477
|
+
className: "grid gap-2",
|
|
478
|
+
children: [/* @__PURE__ */ jsxs("label", {
|
|
479
|
+
className: classNames(className, "inline-flex cursor-pointer items-center"),
|
|
480
|
+
children: [/* @__PURE__ */ jsx("input", __spreadProps(__spreadValues({
|
|
481
|
+
id,
|
|
482
|
+
className: classNames("checkbox checked:bg-green checked:border-green mr-3 grid h-[1.25em] w-[1.25em] flex-none cursor-pointer appearance-none place-content-center rounded border-2 border-solid bg-white text-white focus:outline-none focus:ring-2", {
|
|
483
|
+
"border-gray-dark focus:ring-black": !error,
|
|
484
|
+
"border-red focus:ring-red": !!error
|
|
485
|
+
}),
|
|
486
|
+
ref,
|
|
487
|
+
type: "checkbox"
|
|
488
|
+
}, rest), {
|
|
489
|
+
"aria-describedby": classNames({
|
|
490
|
+
[errorMsgId]: !!error
|
|
491
|
+
}),
|
|
492
|
+
"aria-invalid": !!error
|
|
493
|
+
})), children]
|
|
494
|
+
}), !!error && /* @__PURE__ */ jsx(FormErrorMessage, {
|
|
495
|
+
id: errorMsgId,
|
|
496
|
+
children: error
|
|
497
|
+
})]
|
|
403
498
|
});
|
|
404
499
|
});
|
|
405
500
|
const Footer = (props) => {
|
|
@@ -926,10 +1021,10 @@ const SnackbarContent = (props) => {
|
|
|
926
1021
|
children: props.children
|
|
927
1022
|
}));
|
|
928
1023
|
};
|
|
929
|
-
const
|
|
1024
|
+
const StepList = (props) => {
|
|
930
1025
|
return /* @__PURE__ */ jsx("ol", __spreadValues({}, props));
|
|
931
1026
|
};
|
|
932
|
-
const
|
|
1027
|
+
const StepListItem = (props) => {
|
|
933
1028
|
const _a = props, {
|
|
934
1029
|
className,
|
|
935
1030
|
children,
|
|
@@ -942,22 +1037,18 @@ const Step = (props) => {
|
|
|
942
1037
|
return /* @__PURE__ */ jsxs("li", __spreadProps(__spreadValues({
|
|
943
1038
|
className: classNames(className, "group relative flex gap-4 pb-8 text-sm last:pb-0 md:gap-8 md:pb-12 md:text-base")
|
|
944
1039
|
}, rest), {
|
|
945
|
-
children: [/* @__PURE__ */ jsx(
|
|
1040
|
+
children: [/* @__PURE__ */ jsx(StepListBullet, {
|
|
946
1041
|
children: bullet
|
|
947
1042
|
}), children]
|
|
948
1043
|
}));
|
|
949
1044
|
};
|
|
950
|
-
const
|
|
951
|
-
const _a = props, {
|
|
952
|
-
className
|
|
953
|
-
} = _a, rest = __objRest(_a, [
|
|
954
|
-
"className"
|
|
955
|
-
]);
|
|
1045
|
+
const StepListBullet = (props) => {
|
|
956
1046
|
return /* @__PURE__ */ jsx("span", __spreadValues({
|
|
957
1047
|
"aria-hidden": true,
|
|
958
|
-
className:
|
|
959
|
-
},
|
|
1048
|
+
className: "text-green border-gray-light after:bg-gray-light grid h-10 w-10 flex-none place-content-center rounded-full border-2 text-sm font-bold after:absolute after:left-5 after:top-10 after:bottom-0 after:w-0.5 group-last:after:hidden md:h-20 md:w-20 md:text-xl md:after:left-10 md:after:top-20"
|
|
1049
|
+
}, props));
|
|
960
1050
|
};
|
|
1051
|
+
StepList.Item = StepListItem;
|
|
961
1052
|
const TextArea = forwardRef((props, ref) => {
|
|
962
1053
|
const _a = props, {
|
|
963
1054
|
description,
|
|
@@ -1062,4 +1153,23 @@ const TextField = forwardRef((props, ref) => {
|
|
|
1062
1153
|
})]
|
|
1063
1154
|
});
|
|
1064
1155
|
});
|
|
1065
|
-
|
|
1156
|
+
const Select = forwardRef((props, ref) => {
|
|
1157
|
+
const _a = props, {
|
|
1158
|
+
children,
|
|
1159
|
+
className
|
|
1160
|
+
} = _a, rest = __objRest(_a, [
|
|
1161
|
+
"children",
|
|
1162
|
+
"className"
|
|
1163
|
+
]);
|
|
1164
|
+
return /* @__PURE__ */ jsxs("div", {
|
|
1165
|
+
className: classNames("relative", className),
|
|
1166
|
+
children: [/* @__PURE__ */ jsx("select", __spreadProps(__spreadValues({}, rest), {
|
|
1167
|
+
className: "focus:border-blue border-gray-dark w-full appearance-none rounded-lg border-2 border-solid bg-white px-4 py-3 focus:outline-none",
|
|
1168
|
+
ref,
|
|
1169
|
+
children
|
|
1170
|
+
})), /* @__PURE__ */ jsx(ChevronDown, {
|
|
1171
|
+
className: "absolute top-4 right-4"
|
|
1172
|
+
})]
|
|
1173
|
+
});
|
|
1174
|
+
});
|
|
1175
|
+
export { Alert, Banner, BannerImage, Button, ButtonColorContext, Campaign, Card, CardContent, CardImage, CardLinkOverlay, CardList, Checkbox, Footer, Form, FormError, FormErrorMessage, FormHeading, FormHelperText, FormLabel, FormSuccess, Hero, HeroActions, HeroContent, HeroContext, HeroImage, Input, Link, Navbar, NavbarCollapsible, NavbarContent, NavbarExpandedMobileContent, NavbarItem, NavbarItems, Select, Snackbar, SnackbarButton, SnackbarContent, StepList, StepListItem, TextArea, TextField, assignRef, useBlockBackgroundColor, useComposedRefs, useFallbackId, useFormControlValidity, useMedia, usePrefersReducedMotion, useScreenMaxWidthMd };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './Alert';
|
|
2
2
|
export * from './Banner';
|
|
3
3
|
export * from './Button';
|
|
4
|
+
export * from './Campaign';
|
|
4
5
|
export * from './Card';
|
|
5
6
|
export * from './Checkbox';
|
|
6
7
|
export * from './Footer';
|
|
@@ -10,7 +11,8 @@ export * from './Input';
|
|
|
10
11
|
export * from './Link';
|
|
11
12
|
export * from './Navbar';
|
|
12
13
|
export * from './Snackbar';
|
|
13
|
-
export * from './
|
|
14
|
+
export * from './StepList';
|
|
14
15
|
export * from './TextArea';
|
|
15
16
|
export * from './TextField';
|
|
16
17
|
export * from './hooks';
|
|
18
|
+
export * from './Select';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@obosbbl/grunnmuren-react",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.1.2",
|
|
4
4
|
"description": "OBOS Grunnmuren design system React components",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"repository": {
|
|
@@ -17,8 +17,8 @@
|
|
|
17
17
|
],
|
|
18
18
|
"types": "./dist/index.d.ts",
|
|
19
19
|
"devDependencies": {
|
|
20
|
-
"@babel/core": "7.18.
|
|
21
|
-
"@obosbbl/grunnmuren-tailwind": "^0.4.
|
|
20
|
+
"@babel/core": "7.18.6",
|
|
21
|
+
"@obosbbl/grunnmuren-tailwind": "^0.4.2",
|
|
22
22
|
"@storybook/addon-controls": "6.5.9",
|
|
23
23
|
"@storybook/addon-docs": "6.5.9",
|
|
24
24
|
"@storybook/addon-postcss": "2.0.0",
|
|
@@ -33,16 +33,16 @@
|
|
|
33
33
|
"react-dom": "18.2.0",
|
|
34
34
|
"require-from-string": "2.0.2",
|
|
35
35
|
"tailwindcss": "3.1.4",
|
|
36
|
-
"vite": "2.9.
|
|
36
|
+
"vite": "2.9.13",
|
|
37
37
|
"webpack": "5.73.0"
|
|
38
38
|
},
|
|
39
39
|
"dependencies": {
|
|
40
40
|
"@obosbbl/grunnmuren-icons": "^0.3.0",
|
|
41
|
-
"clsx": "1.
|
|
41
|
+
"clsx": "1.2.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": "^18",
|
|
45
|
-
"@obosbbl/grunnmuren-tailwind": "^0.4.
|
|
45
|
+
"@obosbbl/grunnmuren-tailwind": "^0.4.2"
|
|
46
46
|
},
|
|
47
47
|
"peerDependenciesMeta": {
|
|
48
48
|
"@obosbbl/grunnmuren-tailwind": {
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
interface StepperProps extends React.ComponentPropsWithoutRef<'ol'> {
|
|
3
|
-
}
|
|
4
|
-
export declare const Stepper: (props: StepperProps) => JSX.Element;
|
|
5
|
-
interface StepProps extends React.ComponentPropsWithoutRef<'li'> {
|
|
6
|
-
/** Content for the Step item's bullet */
|
|
7
|
-
bullet: React.ReactNode;
|
|
8
|
-
}
|
|
9
|
-
export declare const Step: (props: StepProps) => JSX.Element;
|
|
10
|
-
interface StepBulletProps extends React.ComponentPropsWithoutRef<'span'> {
|
|
11
|
-
}
|
|
12
|
-
export declare const StepBullet: (props: StepBulletProps) => JSX.Element;
|
|
13
|
-
export {};
|
package/dist/Stepper/index.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export * from './Stepper';
|