@digigov/react-experimental 2.0.0-rc.16 → 2.0.0-rc.17
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/FloatingButton/index.js +23 -23
- package/FloatingButton/index.js.map +7 -0
- package/Kitchensink/AllComponents/index.js +8 -9
- package/Kitchensink/AllComponents.js.map +7 -0
- package/Kitchensink/KitchensinkByCategory/index.js +47 -32
- package/Kitchensink/KitchensinkByCategory.js.map +7 -0
- package/Kitchensink/KitchensinkByLetter/index.js +26 -18
- package/Kitchensink/KitchensinkByLetter.js.map +7 -0
- package/Kitchensink/KitchensinkComponent/index.js +31 -44
- package/Kitchensink/KitchensinkComponent.js.map +7 -0
- package/Kitchensink/KitchensinkDashboard/index.js +43 -38
- package/Kitchensink/KitchensinkDashboard.js.map +7 -0
- package/Kitchensink/index.js +2 -1
- package/Kitchensink/index.js.map +7 -0
- package/OptionButtonBase/index.js +24 -23
- package/OptionButtonBase/index.js.map +7 -0
- package/OptionButtonSteps/index.js +34 -29
- package/OptionButtonSteps/index.js.map +7 -0
- package/cjs/FloatingButton/index.js +55 -29
- package/cjs/FloatingButton/index.js.map +7 -0
- package/cjs/Kitchensink/AllComponents/index.js +39 -14
- package/cjs/Kitchensink/AllComponents.js.map +7 -0
- package/cjs/Kitchensink/KitchensinkByCategory/index.js +75 -38
- package/cjs/Kitchensink/KitchensinkByCategory.js.map +7 -0
- package/cjs/Kitchensink/KitchensinkByLetter/index.js +58 -24
- package/cjs/Kitchensink/KitchensinkByLetter.js.map +7 -0
- package/cjs/Kitchensink/KitchensinkComponent/index.js +60 -53
- package/cjs/Kitchensink/KitchensinkComponent.js.map +7 -0
- package/cjs/Kitchensink/KitchensinkDashboard/index.js +75 -44
- package/cjs/Kitchensink/KitchensinkDashboard.js.map +7 -0
- package/cjs/Kitchensink/index.js +29 -59
- package/cjs/Kitchensink/index.js.map +7 -0
- package/cjs/OptionButtonBase/index.js +56 -29
- package/cjs/OptionButtonBase/index.js.map +7 -0
- package/cjs/OptionButtonSteps/index.js +66 -35
- package/cjs/OptionButtonSteps/index.js.map +7 -0
- package/cjs/index.js +27 -48
- package/cjs/index.js.map +7 -0
- package/index.js +6 -5
- package/index.js.map +7 -0
- package/libs/ui/src/navigation/Breadcrumbs/Breadcrumbs.stories.d.ts +1 -0
- package/libs/ui/src/navigation/Breadcrumbs/__stories__/WithoutCurrentPage.d.ts +3 -0
- package/libs-ui/react-core/src/AdminAside/index.d.ts +3 -3
- package/libs-ui/react-core/src/AdminHeader/index.d.ts +3 -3
- package/libs-ui/react-core/src/AdminHeaderContent/index.d.ts +2 -2
- package/libs-ui/react-core/src/AdminLayout/index.d.ts +2 -7
- package/libs-ui/react-core/src/AdminMain/index.d.ts +2 -2
- package/package.json +5 -8
- package/FloatingButton/index.test/index.js +0 -19
- package/FloatingButton/index.test/package.json +0 -6
- package/OptionButtonBase/index.test/index.js +0 -19
- package/OptionButtonBase/index.test/package.json +0 -6
- package/OptionButtonSteps/index.test/index.js +0 -32
- package/OptionButtonSteps/index.test/package.json +0 -6
- package/cjs/FloatingButton/index.test/index.js +0 -22
- package/cjs/OptionButtonBase/index.test/index.js +0 -22
- package/cjs/OptionButtonSteps/index.test/index.js +0 -35
package/FloatingButton/index.js
CHANGED
|
@@ -1,24 +1,24 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
-
return /*#__PURE__*/React.createElement(Button, _extends({
|
|
20
|
-
ref: ref,
|
|
21
|
-
className: clsx(className, direction === 'right' && 'ds-floating-btn--right', direction === 'left' && 'ds-floating-btn--left', true && 'ds-floating-btn')
|
|
22
|
-
}, props), children);
|
|
1
|
+
import React from "react";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import Button from "@digigov/react-core/Button";
|
|
4
|
+
const FloatingButton = React.forwardRef(function FloatingButton2({ direction = "right", className, children, ...props }, ref) {
|
|
5
|
+
return /* @__PURE__ */ React.createElement(
|
|
6
|
+
Button,
|
|
7
|
+
{
|
|
8
|
+
ref,
|
|
9
|
+
className: clsx(className, {
|
|
10
|
+
"ds-floating-btn": true,
|
|
11
|
+
"ds-floating-btn--right": direction === "right",
|
|
12
|
+
"ds-floating-btn--left": direction === "left"
|
|
13
|
+
}),
|
|
14
|
+
...props
|
|
15
|
+
},
|
|
16
|
+
children
|
|
17
|
+
);
|
|
23
18
|
});
|
|
24
|
-
|
|
19
|
+
var FloatingButton_default = FloatingButton;
|
|
20
|
+
export {
|
|
21
|
+
FloatingButton,
|
|
22
|
+
FloatingButton_default as default
|
|
23
|
+
};
|
|
24
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/FloatingButton/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Button, { ButtonProps } from '@digigov/react-core/Button';\n\nexport interface FloatingButtonProps extends ButtonProps {\n /**\n * direction is optional.\n * direction sets the position of the button to either left or right side of the screen.\n * The default value is 'left'.\n * @value 'right'\n * @value 'left'\n * @default 'left'\n */\n direction?: 'right' | 'left';\n}\n/**\n *\n * A FloatingButton performs the primary, or most common, action on a screen.\n * Use it primary in mobile applications.\n * Avoid using text in this type of button, use icons instead.\n */\nexport const FloatingButton = React.forwardRef<\n HTMLButtonElement,\n FloatingButtonProps\n>(function FloatingButton(\n { direction = 'right', className, children, ...props },\n ref\n) {\n return (\n <Button\n ref={ref}\n className={clsx(className, {\n 'ds-floating-btn': true,\n 'ds-floating-btn--right': direction === 'right',\n 'ds-floating-btn--left': direction === 'left',\n })}\n {...props}\n >\n {children}\n </Button>\n );\n});\n\nexport default FloatingButton;"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,YAA6B;AAmB7B,MAAM,iBAAiB,MAAM,WAGlC,SAASA,gBACT,EAAE,YAAY,SAAS,WAAW,UAAU,GAAG,MAAM,GACrD,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW,KAAK,WAAW;AAAA,QACzB,mBAAmB;AAAA,QACnB,0BAA0B,cAAc;AAAA,QACxC,yBAAyB,cAAc;AAAA,MACzC,CAAC;AAAA,MACA,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,yBAAQ;",
|
|
6
|
+
"names": ["FloatingButton"]
|
|
7
|
+
}
|
|
@@ -1,9 +1,8 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { stories } from
|
|
3
|
-
import { KitchenSinkDashboard } from
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
};
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { stories } from "@digigov/ui/registry";
|
|
3
|
+
import { KitchenSinkDashboard } from "@digigov/react-experimental/Kitchensink/KitchensinkDashboard";
|
|
4
|
+
const AllComponents = () => /* @__PURE__ */ React.createElement(KitchenSinkDashboard, { stories });
|
|
5
|
+
export {
|
|
6
|
+
AllComponents
|
|
7
|
+
};
|
|
8
|
+
//# sourceMappingURL=AllComponents.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Kitchensink/AllComponents.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\n\nimport { stories } from '@digigov/ui/registry';\nimport { KitchenSinkDashboard } from '@digigov/react-experimental/Kitchensink/KitchensinkDashboard';\n\nexport const AllComponents = () => <KitchenSinkDashboard stories={stories} />;\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAElB,SAAS,eAAe;AACxB,SAAS,4BAA4B;AAE9B,MAAM,gBAAgB,MAAM,oCAAC,wBAAqB,SAAkB;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,33 +1,48 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
}
|
|
1
|
+
import React from "react";
|
|
2
|
+
import {
|
|
3
|
+
KitchenSinkCategory
|
|
4
|
+
} from "@digigov/react-core/KitchenSinkCategory";
|
|
5
|
+
import {
|
|
6
|
+
KitchenSinkHeading
|
|
7
|
+
} from "@digigov/react-core/KitchenSinkHeading";
|
|
8
|
+
import { KitchensinkByLetter } from "@digigov/react-experimental/Kitchensink/KitchensinkByLetter";
|
|
9
|
+
const KitchensinkByCategory = ({
|
|
10
|
+
category,
|
|
11
|
+
stories
|
|
12
|
+
}) => {
|
|
13
|
+
const alphabeticalOrder = Object.keys(stories).reduce(
|
|
14
|
+
(abStories, componentStoriesKey) => {
|
|
15
|
+
const componentStories = stories[componentStoriesKey];
|
|
16
|
+
if (!componentStories.default.component) {
|
|
17
|
+
throw new Error(`no component was found in ${componentStoriesKey}`);
|
|
18
|
+
}
|
|
19
|
+
const name = componentStories.default.displayName;
|
|
20
|
+
console.log("componentStories", componentStories, "stories", stories);
|
|
21
|
+
if (!name) {
|
|
22
|
+
throw new Error(`no name was found for ${componentStoriesKey}`);
|
|
23
|
+
}
|
|
24
|
+
const letter = name[0];
|
|
25
|
+
if (abStories[letter]) {
|
|
26
|
+
abStories[letter].push(componentStories);
|
|
27
|
+
} else {
|
|
28
|
+
abStories[letter] = [componentStories];
|
|
29
|
+
}
|
|
30
|
+
return abStories;
|
|
31
|
+
},
|
|
32
|
+
{}
|
|
33
|
+
);
|
|
34
|
+
return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(KitchenSinkHeading, null, category), /* @__PURE__ */ React.createElement(KitchenSinkCategory, null, Object.keys(alphabeticalOrder).sort().map((letter, index) => {
|
|
35
|
+
return /* @__PURE__ */ React.createElement(
|
|
36
|
+
KitchensinkByLetter,
|
|
37
|
+
{
|
|
38
|
+
letter,
|
|
39
|
+
stories: alphabeticalOrder[letter],
|
|
40
|
+
key: index
|
|
41
|
+
}
|
|
42
|
+
);
|
|
32
43
|
})));
|
|
33
|
-
};
|
|
44
|
+
};
|
|
45
|
+
export {
|
|
46
|
+
KitchensinkByCategory
|
|
47
|
+
};
|
|
48
|
+
//# sourceMappingURL=KitchensinkByCategory.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Kitchensink/KitchensinkByCategory.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport {\n KitchenSinkCategory,\n} from '@digigov/react-core/KitchenSinkCategory';\nimport {\n KitchenSinkHeading,\n} from '@digigov/react-core/KitchenSinkHeading';\nimport { KitchensinkByLetter } from '@digigov/react-experimental/Kitchensink/KitchensinkByLetter';\n\nexport interface KitchensinkByCategoryInterface {\n category: string;\n stories: React.ReactElement[];\n}\n\nexport const KitchensinkByCategory = ({\n category,\n stories,\n}: KitchensinkByCategoryInterface) => {\n const alphabeticalOrder = Object.keys(stories).reduce(\n (abStories, componentStoriesKey) => {\n const componentStories = stories[componentStoriesKey];\n if (!componentStories.default.component) {\n throw new Error(`no component was found in ${componentStoriesKey}`);\n }\n const name = componentStories.default.displayName;\n console.log('componentStories', componentStories, 'stories', stories);\n if (!name) {\n throw new Error(`no name was found for ${componentStoriesKey}`);\n }\n const letter = name[0];\n if (abStories[letter]) {\n abStories[letter].push(componentStories);\n } else {\n abStories[letter] = [componentStories];\n }\n return abStories;\n },\n {}\n );\n return (\n <div>\n <KitchenSinkHeading>{category}</KitchenSinkHeading>\n <KitchenSinkCategory>\n {Object.keys(alphabeticalOrder)\n .sort()\n .map((letter, index) => {\n return (\n <KitchensinkByLetter\n letter={letter}\n stories={alphabeticalOrder[letter]}\n key={index}\n />\n );\n })}\n </KitchenSinkCategory>\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB;AAAA,EACE;AAAA,OACK;AACP;AAAA,EACE;AAAA,OACK;AACP,SAAS,2BAA2B;AAO7B,MAAM,wBAAwB,CAAC;AAAA,EACpC;AAAA,EACA;AACF,MAAsC;AACpC,QAAM,oBAAoB,OAAO,KAAK,OAAO,EAAE;AAAA,IAC7C,CAAC,WAAW,wBAAwB;AAClC,YAAM,mBAAmB,QAAQ,mBAAmB;AACpD,UAAI,CAAC,iBAAiB,QAAQ,WAAW;AACvC,cAAM,IAAI,MAAM,6BAA6B,mBAAmB,EAAE;AAAA,MACpE;AACA,YAAM,OAAO,iBAAiB,QAAQ;AACtC,cAAQ,IAAI,oBAAoB,kBAAkB,WAAW,OAAO;AACpE,UAAI,CAAC,MAAM;AACT,cAAM,IAAI,MAAM,yBAAyB,mBAAmB,EAAE;AAAA,MAChE;AACA,YAAM,SAAS,KAAK,CAAC;AACrB,UAAI,UAAU,MAAM,GAAG;AACrB,kBAAU,MAAM,EAAE,KAAK,gBAAgB;AAAA,MACzC,OAAO;AACL,kBAAU,MAAM,IAAI,CAAC,gBAAgB;AAAA,MACvC;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACA,SACE,oCAAC,aACC,oCAAC,0BAAoB,QAAS,GAC9B,oCAAC,2BACE,OAAO,KAAK,iBAAiB,EAC3B,KAAK,EACL,IAAI,CAAC,QAAQ,UAAU;AACtB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,kBAAkB,MAAM;AAAA,QACjC,KAAK;AAAA;AAAA,IACP;AAAA,EAEJ,CAAC,CACL,CACF;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,19 +1,27 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import Heading from
|
|
3
|
-
import { KitchenSinkLetterContent } from
|
|
4
|
-
import { KitchensinkComponent } from
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import Heading from "@digigov/react-core/Heading";
|
|
3
|
+
import { KitchenSinkLetterContent } from "@digigov/react-core/KitchenSinkLetterContent";
|
|
4
|
+
import { KitchensinkComponent } from "@digigov/react-experimental/Kitchensink/KitchensinkComponent";
|
|
5
|
+
const KitchensinkByLetter = ({
|
|
6
|
+
letter,
|
|
7
|
+
stories
|
|
8
|
+
}) => {
|
|
9
|
+
return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Heading, null, letter), /* @__PURE__ */ React.createElement(KitchenSinkLetterContent, null, stories.map((story, index) => {
|
|
10
|
+
return /* @__PURE__ */ React.createElement(
|
|
11
|
+
KitchensinkComponent,
|
|
12
|
+
{
|
|
13
|
+
tags: story.default.tags,
|
|
14
|
+
title: story.default.displayName,
|
|
15
|
+
description: story.default.description,
|
|
16
|
+
link: story.default.link,
|
|
17
|
+
width: story.default.defaultWidth,
|
|
18
|
+
stories: story,
|
|
19
|
+
key: index
|
|
20
|
+
}
|
|
21
|
+
);
|
|
18
22
|
})));
|
|
19
|
-
};
|
|
23
|
+
};
|
|
24
|
+
export {
|
|
25
|
+
KitchensinkByLetter
|
|
26
|
+
};
|
|
27
|
+
//# sourceMappingURL=KitchensinkByLetter.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Kitchensink/KitchensinkByLetter.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport Heading from '@digigov/react-core/Heading';\nimport { KitchenSinkLetterContent } from '@digigov/react-core/KitchenSinkLetterContent';\nimport { KitchensinkComponent } from '@digigov/react-experimental/Kitchensink/KitchensinkComponent';\n\nexport interface KitchensinkByLetterInterface {\n letter: string;\n stories: any;\n}\n\nexport const KitchensinkByLetter = ({\n letter,\n stories,\n}: KitchensinkByLetterInterface) => {\n return (\n <div>\n <Heading>{letter}</Heading>\n <KitchenSinkLetterContent>\n {stories.map((story, index) => {\n return (\n <KitchensinkComponent\n tags={story.default.tags}\n title={story.default.displayName}\n description={story.default.description}\n link={story.default.link}\n width={story.default.defaultWidth}\n stories={story}\n key={index}\n />\n );\n })}\n </KitchenSinkLetterContent>\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,aAAa;AACpB,SAAS,gCAAgC;AACzC,SAAS,4BAA4B;AAO9B,MAAM,sBAAsB,CAAC;AAAA,EAClC;AAAA,EACA;AACF,MAAoC;AAClC,SACE,oCAAC,aACC,oCAAC,eAAS,MAAO,GACjB,oCAAC,gCACE,QAAQ,IAAI,CAAC,OAAO,UAAU;AAC7B,WACE;AAAA,MAAC;AAAA;AAAA,QACC,MAAM,MAAM,QAAQ;AAAA,QACpB,OAAO,MAAM,QAAQ;AAAA,QACrB,aAAa,MAAM,QAAQ;AAAA,QAC3B,MAAM,MAAM,QAAQ;AAAA,QACpB,OAAO,MAAM,QAAQ;AAAA,QACrB,SAAS;AAAA,QACT,KAAK;AAAA;AAAA,IACP;AAAA,EAEJ,CAAC,CACH,CACF;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,45 +1,32 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { KitchenSinkCard } from
|
|
3
|
-
import { KitchenSinkContent } from
|
|
4
|
-
import { KitchenSinkContentInfo } from
|
|
5
|
-
import { KitchenSinkContentTags } from
|
|
6
|
-
import PhaseBanner, {
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
import
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
}, /*#__PURE__*/React.createElement(KitchenSinkContentInfo, null, /*#__PURE__*/React.createElement(KitchenSinkContentTags, null, tags && tags.map(function (tag, index) {
|
|
28
|
-
return /*#__PURE__*/React.createElement(PhaseBanner, {
|
|
29
|
-
key: index
|
|
30
|
-
}, /*#__PURE__*/React.createElement(PhaseBannerTag, null, tag), _ref2);
|
|
31
|
-
})), /*#__PURE__*/React.createElement(Heading, {
|
|
32
|
-
size: "lg"
|
|
33
|
-
}, title), /*#__PURE__*/React.createElement(Paragraph, null, description), link && /*#__PURE__*/React.createElement(Link, {
|
|
34
|
-
href: link
|
|
35
|
-
}, "View on GOV.GR Design System"), _ref3), Object.keys(stories).filter(function (story) {
|
|
36
|
-
return story !== 'default';
|
|
37
|
-
}).map(function (story, index) {
|
|
38
|
-
var Component = stories[story];
|
|
39
|
-
return /*#__PURE__*/React.createElement("div", {
|
|
40
|
-
key: index
|
|
41
|
-
}, _ref4, /*#__PURE__*/React.createElement(Heading, {
|
|
42
|
-
size: "sm"
|
|
43
|
-
}, story), /*#__PURE__*/React.createElement(KitchenSinkCard, null, /*#__PURE__*/React.createElement(Component, null)));
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { KitchenSinkCard } from "@digigov/react-core/KitchenSinkCard";
|
|
3
|
+
import { KitchenSinkContent } from "@digigov/react-core/KitchenSinkContent";
|
|
4
|
+
import { KitchenSinkContentInfo } from "@digigov/react-core/KitchenSinkContentInfo";
|
|
5
|
+
import { KitchenSinkContentTags } from "@digigov/react-core/KitchenSinkContentTags";
|
|
6
|
+
import PhaseBanner, {
|
|
7
|
+
PhaseBannerTag,
|
|
8
|
+
PhaseBannerText
|
|
9
|
+
} from "@digigov/ui/feedback/PhaseBanner";
|
|
10
|
+
import SectionBreak from "@digigov/ui/layouts/SectionBreak";
|
|
11
|
+
import Link from "@digigov/ui/navigation/Link";
|
|
12
|
+
import { Paragraph } from "@digigov/ui/typography";
|
|
13
|
+
import Heading from "@digigov/ui/typography/Heading";
|
|
14
|
+
const KitchensinkComponent = ({
|
|
15
|
+
tags = [],
|
|
16
|
+
title,
|
|
17
|
+
description,
|
|
18
|
+
link,
|
|
19
|
+
stories,
|
|
20
|
+
width = "md"
|
|
21
|
+
}) => {
|
|
22
|
+
return /* @__PURE__ */ React.createElement(KitchenSinkContent, { wide: width === "lg" }, /* @__PURE__ */ React.createElement(KitchenSinkContentInfo, null, /* @__PURE__ */ React.createElement(KitchenSinkContentTags, null, tags && tags.map((tag, index) => {
|
|
23
|
+
return /* @__PURE__ */ React.createElement(PhaseBanner, { key: index }, /* @__PURE__ */ React.createElement(PhaseBannerTag, null, tag), /* @__PURE__ */ React.createElement(PhaseBannerText, null, "\u0391\u03C5\u03C4\u03AE \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BC\u03AF\u03B1 \u03BD\u03AD\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u2013 \u03C4\u03B1", " ", /* @__PURE__ */ React.createElement(Link, { href: "#feedback" }, "\u03C3\u03C7\u03CC\u03BB\u03B9\u03AC"), " \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03BC\u03B1\u03C2 \u03B2\u03BF\u03B7\u03B8\u03AE\u03C3\u03BF\u03C5\u03BD \u03BD\u03B1 \u03C4\u03B7 \u03B2\u03B5\u03BB\u03C4\u03B9\u03CE\u03C3\u03BF\u03C5\u03BC\u03B5."));
|
|
24
|
+
})), /* @__PURE__ */ React.createElement(Heading, { size: "lg" }, title), /* @__PURE__ */ React.createElement(Paragraph, null, description), link && /* @__PURE__ */ React.createElement(Link, { href: link }, "View on GOV.GR Design System"), /* @__PURE__ */ React.createElement(SectionBreak, null)), Object.keys(stories).filter((story) => story !== "default").map((story, index) => {
|
|
25
|
+
const Component = stories[story];
|
|
26
|
+
return /* @__PURE__ */ React.createElement("div", { key: index }, /* @__PURE__ */ React.createElement(SectionBreak, null), /* @__PURE__ */ React.createElement(Heading, { size: "sm" }, story), /* @__PURE__ */ React.createElement(KitchenSinkCard, null, /* @__PURE__ */ React.createElement(Component, null)));
|
|
44
27
|
}));
|
|
45
|
-
};
|
|
28
|
+
};
|
|
29
|
+
export {
|
|
30
|
+
KitchensinkComponent
|
|
31
|
+
};
|
|
32
|
+
//# sourceMappingURL=KitchensinkComponent.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Kitchensink/KitchensinkComponent.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { KitchenSinkCard } from '@digigov/react-core/KitchenSinkCard';\nimport { KitchenSinkContent } from '@digigov/react-core/KitchenSinkContent';\nimport { KitchenSinkContentInfo } from '@digigov/react-core/KitchenSinkContentInfo';\nimport { KitchenSinkContentTags } from '@digigov/react-core/KitchenSinkContentTags';\nimport PhaseBanner, {\n PhaseBannerTag,\n PhaseBannerText,\n} from '@digigov/ui/feedback/PhaseBanner';\nimport SectionBreak from '@digigov/ui/layouts/SectionBreak';\nimport Link from '@digigov/ui/navigation/Link';\nimport { Paragraph } from '@digigov/ui/typography';\nimport Heading from '@digigov/ui/typography/Heading';\n\nexport interface KitchensinkComponentInterface {\n tags?: string[]; // ex. Experimental\n title: string;\n description?: string;\n link?: string;\n stories: React.ReactElement[];\n width?: 'md' | 'lg';\n}\nexport const KitchensinkComponent = ({\n tags = [],\n title,\n description,\n link,\n stories,\n width = 'md',\n}: KitchensinkComponentInterface) => {\n return (\n <KitchenSinkContent wide={width === 'lg'}>\n <KitchenSinkContentInfo>\n <KitchenSinkContentTags>\n {tags &&\n tags.map((tag, index) => {\n return (\n <PhaseBanner key={index}>\n <PhaseBannerTag>{tag}</PhaseBannerTag>\n <PhaseBannerText>\n \u0391\u03C5\u03C4\u03AE \u03B5\u03AF\u03BD\u03B1\u03B9 \u03BC\u03AF\u03B1 \u03BD\u03AD\u03B1 \u03C5\u03C0\u03B7\u03C1\u03B5\u03C3\u03AF\u03B1 \u2013 \u03C4\u03B1{' '}\n <Link href=\"#feedback\">\u03C3\u03C7\u03CC\u03BB\u03B9\u03AC</Link> \u03C3\u03B1\u03C2 \u03B8\u03B1 \u03BC\u03B1\u03C2 \u03B2\u03BF\u03B7\u03B8\u03AE\u03C3\u03BF\u03C5\u03BD \u03BD\u03B1\n \u03C4\u03B7 \u03B2\u03B5\u03BB\u03C4\u03B9\u03CE\u03C3\u03BF\u03C5\u03BC\u03B5.\n </PhaseBannerText>\n </PhaseBanner>\n );\n })}\n </KitchenSinkContentTags>\n <Heading size=\"lg\">{title}</Heading>\n <Paragraph>{description}</Paragraph>\n {link && <Link href={link}>View on GOV.GR Design System</Link>}\n <SectionBreak />\n </KitchenSinkContentInfo>\n {Object.keys(stories)\n .filter((story) => story !== 'default')\n .map((story, index) => {\n const Component = stories[story];\n return (\n <div key={index}>\n <SectionBreak />\n <Heading size=\"sm\">{story}</Heading>\n <KitchenSinkCard>\n <Component />\n </KitchenSinkCard>\n </div>\n );\n })}\n </KitchenSinkContent>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,uBAAuB;AAChC,SAAS,0BAA0B;AACnC,SAAS,8BAA8B;AACvC,SAAS,8BAA8B;AACvC,OAAO;AAAA,EACL;AAAA,EACA;AAAA,OACK;AACP,OAAO,kBAAkB;AACzB,OAAO,UAAU;AACjB,SAAS,iBAAiB;AAC1B,OAAO,aAAa;AAUb,MAAM,uBAAuB,CAAC;AAAA,EACnC,OAAO,CAAC;AAAA,EACR;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,QAAQ;AACV,MAAqC;AACnC,SACE,oCAAC,sBAAmB,MAAM,UAAU,QAClC,oCAAC,8BACC,oCAAC,8BACE,QACC,KAAK,IAAI,CAAC,KAAK,UAAU;AACvB,WACE,oCAAC,eAAY,KAAK,SAChB,oCAAC,sBAAgB,GAAI,GACrB,oCAAC,uBAAgB,sKACkB,KACjC,oCAAC,QAAK,MAAK,eAAY,sCAAM,GAAO,0MAEtC,CACF;AAAA,EAEJ,CAAC,CACL,GACA,oCAAC,WAAQ,MAAK,QAAM,KAAM,GAC1B,oCAAC,iBAAW,WAAY,GACvB,QAAQ,oCAAC,QAAK,MAAM,QAAM,8BAA4B,GACvD,oCAAC,kBAAa,CAChB,GACC,OAAO,KAAK,OAAO,EACjB,OAAO,CAAC,UAAU,UAAU,SAAS,EACrC,IAAI,CAAC,OAAO,UAAU;AACrB,UAAM,YAAY,QAAQ,KAAK;AAC/B,WACE,oCAAC,SAAI,KAAK,SACR,oCAAC,kBAAa,GACd,oCAAC,WAAQ,MAAK,QAAM,KAAM,GAC1B,oCAAC,uBACC,oCAAC,eAAU,CACb,CACF;AAAA,EAEJ,CAAC,CACL;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,40 +1,45 @@
|
|
|
1
|
-
import React from
|
|
2
|
-
import { KitchenSinkAllComponents } from
|
|
3
|
-
import Paragraph from
|
|
4
|
-
import { KitchensinkByCategory } from
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { KitchenSinkAllComponents } from "@digigov/react-core/KitchenSinkAllComponents";
|
|
3
|
+
import Paragraph from "@digigov/react-core/Paragraph";
|
|
4
|
+
import { KitchensinkByCategory } from "@digigov/react-experimental/Kitchensink/KitchensinkByCategory";
|
|
5
|
+
const KitchenSinkDashboard = ({
|
|
6
|
+
stories
|
|
7
|
+
}) => {
|
|
8
|
+
const categoryOrder = Object.keys(stories).reduce(
|
|
9
|
+
(catStories, componentStoriesKey) => {
|
|
10
|
+
const componentStories = stories[componentStoriesKey];
|
|
11
|
+
if (componentStories.default.ignore) {
|
|
12
|
+
return catStories;
|
|
13
|
+
}
|
|
14
|
+
if (!componentStories.default.component) {
|
|
15
|
+
throw new Error(`no component was found in ${componentStoriesKey}`);
|
|
16
|
+
}
|
|
17
|
+
const title = componentStories.default.title.split("/")[1];
|
|
18
|
+
if (!title) {
|
|
19
|
+
throw new Error(`no title was found for ${componentStoriesKey}`);
|
|
20
|
+
}
|
|
21
|
+
const category = title;
|
|
22
|
+
if (catStories[category]) {
|
|
23
|
+
catStories[category].push(componentStories);
|
|
24
|
+
} else {
|
|
25
|
+
catStories[category] = [componentStories];
|
|
26
|
+
}
|
|
14
27
|
return catStories;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
catStories[category] = [componentStories];
|
|
28
|
-
}
|
|
29
|
-
return catStories;
|
|
30
|
-
}, {});
|
|
31
|
-
return /*#__PURE__*/React.createElement("div", null, _ref2, /*#__PURE__*/React.createElement(KitchenSinkAllComponents, null, Object.keys(categoryOrder).sort(function (a, b) {
|
|
32
|
-
return a > b ? -1 : 1;
|
|
33
|
-
}).map(function (category, index) {
|
|
34
|
-
return /*#__PURE__*/React.createElement(KitchensinkByCategory, {
|
|
35
|
-
category: category,
|
|
36
|
-
stories: categoryOrder[category],
|
|
37
|
-
key: index
|
|
38
|
-
});
|
|
28
|
+
},
|
|
29
|
+
{}
|
|
30
|
+
);
|
|
31
|
+
return /* @__PURE__ */ React.createElement("div", null, /* @__PURE__ */ React.createElement(Paragraph, { fontSize: 72, fontWeight: "bold" }, "Components"), /* @__PURE__ */ React.createElement(KitchenSinkAllComponents, null, Object.keys(categoryOrder).sort((a, b) => a > b ? -1 : 1).map((category, index) => {
|
|
32
|
+
return /* @__PURE__ */ React.createElement(
|
|
33
|
+
KitchensinkByCategory,
|
|
34
|
+
{
|
|
35
|
+
category,
|
|
36
|
+
stories: categoryOrder[category],
|
|
37
|
+
key: index
|
|
38
|
+
}
|
|
39
|
+
);
|
|
39
40
|
})));
|
|
40
|
-
};
|
|
41
|
+
};
|
|
42
|
+
export {
|
|
43
|
+
KitchenSinkDashboard
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=KitchensinkDashboard.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Kitchensink/KitchensinkDashboard.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport { KitchenSinkAllComponents } from '@digigov/react-core/KitchenSinkAllComponents';\nimport Paragraph from '@digigov/react-core/Paragraph';\nimport { KitchensinkByCategory } from '@digigov/react-experimental/Kitchensink/KitchensinkByCategory';\n\nexport interface KitchenSinkDashboardInterface {\n stories: any;\n}\n\nexport const KitchenSinkDashboard = ({\n stories,\n}: KitchenSinkDashboardInterface) => {\n const categoryOrder = Object.keys(stories).reduce(\n (catStories, componentStoriesKey) => {\n const componentStories = stories[componentStoriesKey];\n if (componentStories.default.ignore) {\n return catStories;\n }\n if (!componentStories.default.component) {\n throw new Error(`no component was found in ${componentStoriesKey}`);\n }\n const title = componentStories.default.title.split('/')[1];\n if (!title) {\n throw new Error(`no title was found for ${componentStoriesKey}`);\n }\n const category = title;\n if (catStories[category]) {\n catStories[category].push(componentStories);\n } else {\n catStories[category] = [componentStories];\n }\n return catStories;\n },\n {}\n );\n return (\n <div>\n <Paragraph fontSize={72} fontWeight=\"bold\">\n Components\n </Paragraph>\n <KitchenSinkAllComponents>\n {Object.keys(categoryOrder)\n .sort((a, b) => (a > b ? -1 : 1))\n .map((category, index) => {\n return (\n <KitchensinkByCategory\n category={category}\n stories={categoryOrder[category]}\n key={index}\n />\n );\n })}\n </KitchenSinkAllComponents>\n </div>\n );\n};\n"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB,SAAS,gCAAgC;AACzC,OAAO,eAAe;AACtB,SAAS,6BAA6B;AAM/B,MAAM,uBAAuB,CAAC;AAAA,EACnC;AACF,MAAqC;AACnC,QAAM,gBAAgB,OAAO,KAAK,OAAO,EAAE;AAAA,IACzC,CAAC,YAAY,wBAAwB;AACnC,YAAM,mBAAmB,QAAQ,mBAAmB;AACpD,UAAI,iBAAiB,QAAQ,QAAQ;AACnC,eAAO;AAAA,MACT;AACA,UAAI,CAAC,iBAAiB,QAAQ,WAAW;AACvC,cAAM,IAAI,MAAM,6BAA6B,mBAAmB,EAAE;AAAA,MACpE;AACA,YAAM,QAAQ,iBAAiB,QAAQ,MAAM,MAAM,GAAG,EAAE,CAAC;AACzD,UAAI,CAAC,OAAO;AACV,cAAM,IAAI,MAAM,0BAA0B,mBAAmB,EAAE;AAAA,MACjE;AACA,YAAM,WAAW;AACjB,UAAI,WAAW,QAAQ,GAAG;AACxB,mBAAW,QAAQ,EAAE,KAAK,gBAAgB;AAAA,MAC5C,OAAO;AACL,mBAAW,QAAQ,IAAI,CAAC,gBAAgB;AAAA,MAC1C;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC;AAAA,EACH;AACA,SACE,oCAAC,aACC,oCAAC,aAAU,UAAU,IAAI,YAAW,UAAO,YAE3C,GACA,oCAAC,gCACE,OAAO,KAAK,aAAa,EACvB,KAAK,CAAC,GAAG,MAAO,IAAI,IAAI,KAAK,CAAE,EAC/B,IAAI,CAAC,UAAU,UAAU;AACxB,WACE;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,SAAS,cAAc,QAAQ;AAAA,QAC/B,KAAK;AAAA;AAAA,IACP;AAAA,EAEJ,CAAC,CACL,CACF;AAEJ;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/Kitchensink/index.js
CHANGED
|
@@ -2,4 +2,5 @@ export * from "./AllComponents";
|
|
|
2
2
|
export * from "./KitchensinkByCategory";
|
|
3
3
|
export * from "./KitchensinkByLetter";
|
|
4
4
|
export * from "./KitchensinkComponent";
|
|
5
|
-
export * from "./KitchensinkDashboard";
|
|
5
|
+
export * from "./KitchensinkDashboard";
|
|
6
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/Kitchensink/index.ts"],
|
|
4
|
+
"sourcesContent": ["export * from './AllComponents';\nexport * from './KitchensinkByCategory';\nexport * from './KitchensinkByLetter';\nexport * from './KitchensinkComponent';\nexport * from './KitchensinkDashboard';\n"],
|
|
5
|
+
"mappings": "AAAA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -1,24 +1,25 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
as: "button",
|
|
20
|
-
ref: ref,
|
|
21
|
-
className: clsx(className, selected && 'ds-option-btn--selected', true && ['ds-btn', 'ds-option-btn'])
|
|
22
|
-
}, props), children);
|
|
1
|
+
import React from "react";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import Base from "@digigov/react-core/Base";
|
|
4
|
+
const OptionButtonBase = React.forwardRef(function OptionButtonBase2({ selected = false, className, children, ...props }, ref) {
|
|
5
|
+
return /* @__PURE__ */ React.createElement(
|
|
6
|
+
Base,
|
|
7
|
+
{
|
|
8
|
+
as: "button",
|
|
9
|
+
ref,
|
|
10
|
+
className: clsx(className, {
|
|
11
|
+
"ds-btn": true,
|
|
12
|
+
"ds-option-btn": true,
|
|
13
|
+
"ds-option-btn--selected": selected
|
|
14
|
+
}),
|
|
15
|
+
...props
|
|
16
|
+
},
|
|
17
|
+
children
|
|
18
|
+
);
|
|
23
19
|
});
|
|
24
|
-
|
|
20
|
+
var OptionButtonBase_default = OptionButtonBase;
|
|
21
|
+
export {
|
|
22
|
+
OptionButtonBase,
|
|
23
|
+
OptionButtonBase_default as default
|
|
24
|
+
};
|
|
25
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/OptionButtonBase/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface OptionButtonBaseProps\n extends BaseProps<'button'> {\n /**\n * selected is optional. \n * Use selected prop to set selected styling.\n * @value true\n * @value false\n * @default false\n */\n selected?: boolean\n}\n/**\n *\n * OptionButtonBases can be used to represent small blocks of information.\n * OptionButtonBase component must be inside OptionButtonBaseSection component.\n */\nexport const OptionButtonBase = React.forwardRef<\n HTMLButtonElement,\n OptionButtonBaseProps\n>(function OptionButtonBase(\n { selected = false, className, children, ...props },\n ref\n) {\n return (\n <Base\n as=\"button\"\n ref={ref}\n className={clsx(className, {\n 'ds-btn': true,\n 'ds-option-btn': true,\n 'ds-option-btn--selected': selected,\n })}\n {...props}\n >\n {children}\n </Base>\n );\n});\n\nexport default OptionButtonBase;"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AAkBzB,MAAM,mBAAmB,MAAM,WAGpC,SAASA,kBACT,EAAE,WAAW,OAAO,WAAW,UAAU,GAAG,MAAM,GAClD,KACA;AACA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,WAAW,KAAK,WAAW;AAAA,QACzB,UAAU;AAAA,QACV,iBAAiB;AAAA,QACjB,2BAA2B;AAAA,MAC7B,CAAC;AAAA,MACA,GAAG;AAAA;AAAA,IAEH;AAAA,EACH;AAEJ,CAAC;AAED,IAAO,2BAAQ;",
|
|
6
|
+
"names": ["OptionButtonBase"]
|
|
7
|
+
}
|
|
@@ -1,31 +1,36 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
*
|
|
9
|
-
* OptionButtonSteps can be used to represent small blocks of information.
|
|
10
|
-
* OptionButtonSteps component must be inside OptionButtonStepsSection component.
|
|
11
|
-
*/
|
|
12
|
-
export var OptionButtonSteps = /*#__PURE__*/React.forwardRef(function OptionButtonSteps(_ref, ref) {
|
|
13
|
-
var _ref$steps = _ref.steps,
|
|
14
|
-
steps = _ref$steps === void 0 ? 0 : _ref$steps,
|
|
15
|
-
_ref$activeStep = _ref.activeStep,
|
|
16
|
-
activeStep = _ref$activeStep === void 0 ? 0 : _ref$activeStep,
|
|
17
|
-
className = _ref.className,
|
|
18
|
-
props = _objectWithoutProperties(_ref, _excluded);
|
|
19
|
-
var renderStep = function renderStep(step) {
|
|
20
|
-
return /*#__PURE__*/React.createElement(Base, {
|
|
1
|
+
import React from "react";
|
|
2
|
+
import clsx from "clsx";
|
|
3
|
+
import Base from "@digigov/react-core/Base";
|
|
4
|
+
const OptionButtonSteps = React.forwardRef(function OptionButtonSteps2({ steps = 0, activeStep = 0, className, ...props }, ref) {
|
|
5
|
+
const renderStep = (step) => /* @__PURE__ */ React.createElement(
|
|
6
|
+
Base,
|
|
7
|
+
{
|
|
21
8
|
as: "div",
|
|
22
|
-
className: clsx(className,
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
9
|
+
className: clsx(className, {
|
|
10
|
+
"ds-option-btn__step": true,
|
|
11
|
+
"ds-option-btn__step--active": activeStep >= step
|
|
12
|
+
})
|
|
13
|
+
}
|
|
14
|
+
);
|
|
15
|
+
return /* @__PURE__ */ React.createElement(
|
|
16
|
+
Base,
|
|
17
|
+
{
|
|
18
|
+
as: "div",
|
|
19
|
+
ref,
|
|
20
|
+
className: clsx(className, {
|
|
21
|
+
"ds-option-btn__steps": true
|
|
22
|
+
}),
|
|
23
|
+
...props
|
|
24
|
+
},
|
|
25
|
+
steps >= 1 && renderStep(1),
|
|
26
|
+
steps >= 2 && renderStep(2),
|
|
27
|
+
steps >= 3 && renderStep(3),
|
|
28
|
+
steps >= 4 && renderStep(4)
|
|
29
|
+
);
|
|
30
30
|
});
|
|
31
|
-
|
|
31
|
+
var OptionButtonSteps_default = OptionButtonSteps;
|
|
32
|
+
export {
|
|
33
|
+
OptionButtonSteps,
|
|
34
|
+
OptionButtonSteps_default as default
|
|
35
|
+
};
|
|
36
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/OptionButtonSteps/index.tsx"],
|
|
4
|
+
"sourcesContent": ["import React from 'react';\nimport clsx from 'clsx';\nimport Base, { BaseProps } from '@digigov/react-core/Base';\n\nexport interface OptionButtonStepsProps extends BaseProps<'div'> {\n /**\n * @value 0\n * @value 1\n * @value 2\n * @value 3\n * @value 4\n * @default 0\n */\n steps?: stepsProps;\n /**\n * @default 0\n */\n activeStep?: number;\n}\n\nexport type stepsProps = 0 | 1 | 2 | 3 | 4;\n/**\n *\n * OptionButtonSteps can be used to represent small blocks of information.\n * OptionButtonSteps component must be inside OptionButtonStepsSection component.\n */\nexport const OptionButtonSteps = React.forwardRef<\n HTMLDivElement,\n OptionButtonStepsProps\n>(function OptionButtonSteps(\n { steps = 0, activeStep = 0, className, ...props },\n ref\n) {\n\n const renderStep = (step: number) => (\n <Base\n as=\"div\"\n className={clsx(className, {\n 'ds-option-btn__step': true,\n 'ds-option-btn__step--active': activeStep >= step,\n })}\n ></Base>\n );\n\n return (\n <Base\n as=\"div\"\n ref={ref}\n className={clsx(className, {\n 'ds-option-btn__steps': true,\n })}\n {...props}\n >\n {steps >= 1 && renderStep(1)}\n {steps >= 2 && renderStep(2)}\n {steps >= 3 && renderStep(3)}\n {steps >= 4 && renderStep(4)}\n </Base>\n );\n});\n\nexport default OptionButtonSteps;"],
|
|
5
|
+
"mappings": "AAAA,OAAO,WAAW;AAClB,OAAO,UAAU;AACjB,OAAO,UAAyB;AAwBzB,MAAM,oBAAoB,MAAM,WAGrC,SAASA,mBACT,EAAE,QAAQ,GAAG,aAAa,GAAG,WAAW,GAAG,MAAM,GACjD,KACA;AAEA,QAAM,aAAa,CAAC,SAClB;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH,WAAW,KAAK,WAAW;AAAA,QACzB,uBAAuB;AAAA,QACvB,+BAA+B,cAAc;AAAA,MAC/C,CAAC;AAAA;AAAA,EACF;AAGH,SACE;AAAA,IAAC;AAAA;AAAA,MACC,IAAG;AAAA,MACH;AAAA,MACA,WAAW,KAAK,WAAW;AAAA,QACzB,wBAAwB;AAAA,MAC1B,CAAC;AAAA,MACA,GAAG;AAAA;AAAA,IAEH,SAAS,KAAK,WAAW,CAAC;AAAA,IAC1B,SAAS,KAAK,WAAW,CAAC;AAAA,IAC1B,SAAS,KAAK,WAAW,CAAC;AAAA,IAC1B,SAAS,KAAK,WAAW,CAAC;AAAA,EAC7B;AAEJ,CAAC;AAED,IAAO,4BAAQ;",
|
|
6
|
+
"names": ["OptionButtonSteps"]
|
|
7
|
+
}
|