w-design-system 0.0.21 → 0.0.23
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/assets/icon/chevron-down.svg +3 -0
- package/dist/assets/icon/chevron-left.svg +3 -0
- package/dist/assets/icon/chevron-right.svg +3 -0
- package/dist/assets/icon/dump.svg +3 -0
- package/dist/assets/icon/edit.svg +10 -0
- package/dist/assets/icon/index.d.ts +6 -1
- package/dist/assets/icon/index.d.ts.map +1 -1
- package/dist/assets/icon/index.js +6 -1
- package/dist/assets/icon/index.js.map +1 -1
- package/dist/assets/icon/index.ts +17 -1
- package/dist/assets/icon/spin.svg +3 -0
- package/dist/components/ButtonRound/index.d.ts.map +1 -1
- package/dist/components/ButtonRound/index.js +4 -4
- package/dist/components/ButtonRound/index.js.map +1 -1
- package/dist/components/ButtonRound/stories.d.ts.map +1 -1
- package/dist/components/ButtonRound/stories.js +1 -2
- package/dist/components/ButtonRound/stories.js.map +1 -1
- package/dist/components/ButtonRound/styles.js +5 -5
- package/dist/components/ButtonRound/styles.js.map +1 -1
- package/dist/components/CardStories/index.d.ts +9 -0
- package/dist/components/CardStories/index.d.ts.map +1 -0
- package/dist/components/CardStories/index.js +43 -0
- package/dist/components/CardStories/index.js.map +1 -0
- package/dist/components/CardStories/stories.d.ts +9 -0
- package/dist/components/CardStories/stories.d.ts.map +1 -0
- package/dist/components/CardStories/stories.js +35 -0
- package/dist/components/CardStories/stories.js.map +1 -0
- package/dist/components/Loading/index.d.ts +8 -0
- package/dist/components/Loading/index.d.ts.map +1 -0
- package/dist/components/Loading/index.js +50 -0
- package/dist/components/Loading/index.js.map +1 -0
- package/dist/components/Loading/stories.d.ts +12 -0
- package/dist/components/Loading/stories.d.ts.map +1 -0
- package/dist/components/Loading/stories.js +46 -0
- package/dist/components/Loading/stories.js.map +1 -0
- package/dist/components/Modal/stories.js +1 -1
- package/dist/components/Modal/stories.js.map +1 -1
- package/dist/components/Paginate/index.d.ts +10 -0
- package/dist/components/Paginate/index.d.ts.map +1 -0
- package/dist/components/Paginate/index.js +58 -0
- package/dist/components/Paginate/index.js.map +1 -0
- package/dist/components/Paginate/stories.d.ts +6 -0
- package/dist/components/Paginate/stories.d.ts.map +1 -0
- package/dist/components/Paginate/stories.js +37 -0
- package/dist/components/Paginate/stories.js.map +1 -0
- package/dist/components/Paginate/styles.d.ts +2 -0
- package/dist/components/Paginate/styles.d.ts.map +1 -0
- package/dist/components/Paginate/styles.js +97 -0
- package/dist/components/Paginate/styles.js.map +1 -0
- package/dist/components/Paragraph/index.d.ts +5 -1
- package/dist/components/Paragraph/index.d.ts.map +1 -1
- package/dist/components/Paragraph/index.js +31 -9
- package/dist/components/Paragraph/index.js.map +1 -1
- package/dist/components/Paragraph/stories.d.ts.map +1 -1
- package/dist/components/Paragraph/stories.js +18 -20
- package/dist/components/Paragraph/stories.js.map +1 -1
- package/dist/components/Table/index.d.ts +21 -0
- package/dist/components/Table/index.d.ts.map +1 -0
- package/dist/components/Table/index.js +90 -0
- package/dist/components/Table/index.js.map +1 -0
- package/dist/components/Table/stories.d.ts +9 -0
- package/dist/components/Table/stories.d.ts.map +1 -0
- package/dist/components/Table/stories.js +159 -0
- package/dist/components/Table/stories.js.map +1 -0
- package/dist/components/Table/styles.d.ts +1 -0
- package/dist/components/Table/styles.d.ts.map +1 -0
- package/dist/components/Table/styles.js +2 -0
- package/dist/components/Table/styles.js.map +1 -0
- package/dist/components/Tabs/stories.js +3 -3
- package/dist/components/Tabs/stories.js.map +1 -1
- package/dist/components/Types/index.d.ts +1 -0
- package/dist/components/Types/index.d.ts.map +1 -1
- package/dist/components/index.d.ts +2 -0
- package/dist/components/index.d.ts.map +1 -1
- package/dist/components/index.js +2 -0
- package/dist/components/index.js.map +1 -1
- package/package.json +1 -1
- package/src/assets/icon/chevron-down.svg +3 -0
- package/src/assets/icon/chevron-left.svg +3 -0
- package/src/assets/icon/chevron-right.svg +3 -0
- package/src/assets/icon/dump.svg +3 -0
- package/src/assets/icon/edit.svg +10 -0
- package/src/assets/icon/index.ts +17 -1
- package/src/assets/icon/spin.svg +3 -0
- package/src/components/ButtonRound/index.tsx +5 -4
- package/src/components/ButtonRound/stories.tsx +2 -2
- package/src/components/ButtonRound/styles.ts +5 -5
- package/src/components/CardStories/index.tsx +59 -0
- package/src/components/CardStories/stories.tsx +44 -0
- package/src/components/Loading/index.tsx +73 -0
- package/src/components/Loading/stories.tsx +65 -0
- package/src/components/Modal/stories.tsx +1 -1
- package/src/components/Paginate/index.tsx +108 -0
- package/src/components/Paginate/stories.tsx +53 -0
- package/src/components/Paginate/styles.ts +96 -0
- package/src/components/Paragraph/index.tsx +30 -11
- package/src/components/Paragraph/stories.tsx +18 -21
- package/src/components/Table/index.tsx +203 -0
- package/src/components/Table/stories.tsx +198 -0
- package/src/components/Table/styles.ts +0 -0
- package/src/components/Tabs/stories.tsx +3 -3
- package/src/components/Types/index.ts +1 -0
- package/src/components/index.tsx +2 -0
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
2
|
+
<path d="M11.0517 17.9483C11.5739 18.4706 12.4184 18.4706 12.9352 17.9483L23.6083 7.28075C24.1306 6.75849 24.1306 5.91397 23.6083 5.39726C23.086 4.88055 22.2415 4.87499 21.7248 5.39726L12.0017 15.1203L2.27312 5.3917C1.75085 4.86943 0.906331 4.86943 0.38962 5.3917C-0.127092 5.91397 -0.132648 6.75849 0.38962 7.2752L11.0517 17.9483Z" fill="black"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M3.145 6.4468C2.84034 6.75146 2.84034 7.24409 3.145 7.54551L9.36776 13.7715C9.67241 14.0762 10.165 14.0762 10.4665 13.7715C10.7679 13.4669 10.7711 12.9742 10.4665 12.6728L4.79468 6.99777L10.4697 1.32598C10.7744 1.02133 10.7744 0.528693 10.4697 0.227278C10.165 -0.0741368 9.67241 -0.0773778 9.371 0.227278L3.145 6.4468Z" fill="#999999"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M10.4697 6.4468C10.7744 6.75146 10.7744 7.24409 10.4697 7.54551L4.24694 13.7715C3.94229 14.0762 3.44965 14.0762 3.14824 13.7715C2.84682 13.4669 2.84358 12.9742 3.14824 12.6728L8.82003 7.00101L3.145 1.32598C2.84034 1.02133 2.84034 0.528693 3.145 0.227278C3.44965 -0.0741368 3.94229 -0.0773778 4.2437 0.227278L10.4697 6.4468Z" fill="#999999"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
2
|
+
<path d="M9.99141 2.41875L9.10087 3.75H15.8971L15.0065 2.41875C14.9362 2.31562 14.8191 2.25 14.6925 2.25H10.3008C10.1742 2.25 10.057 2.31094 9.98672 2.41875H9.99141ZM16.8814 1.17188L18.6015 3.75H19.2483H21.4981H21.8731C22.4964 3.75 22.9979 4.25156 22.9979 4.875C22.9979 5.49844 22.4964 6 21.8731 6H21.4981V20.25C21.4981 22.3219 19.8201 24 17.7485 24H7.24949C5.17781 24 3.49985 22.3219 3.49985 20.25V6H3.12489C2.50151 6 2 5.49844 2 4.875C2 4.25156 2.50151 3.75 3.12489 3.75H3.49985H5.74963H6.39644L8.11659 1.16719C8.60404 0.440625 9.42427 0 10.3008 0H14.6925C15.569 0 16.3892 0.440625 16.8767 1.16719L16.8814 1.17188ZM5.74963 6V20.25C5.74963 21.0797 6.41988 21.75 7.24949 21.75H17.7485C18.5781 21.75 19.2483 21.0797 19.2483 20.25V6H5.74963ZM9.49927 9V18.75C9.49927 19.1625 9.1618 19.5 8.74934 19.5C8.33688 19.5 7.99941 19.1625 7.99941 18.75V9C7.99941 8.5875 8.33688 8.25 8.74934 8.25C9.1618 8.25 9.49927 8.5875 9.49927 9ZM13.2489 9V18.75C13.2489 19.1625 12.9114 19.5 12.499 19.5C12.0865 19.5 11.749 19.1625 11.749 18.75V9C11.749 8.5875 12.0865 8.25 12.499 8.25C12.9114 8.25 13.2489 8.5875 13.2489 9ZM16.9985 9V18.75C16.9985 19.1625 16.6611 19.5 16.2486 19.5C15.8361 19.5 15.4987 19.1625 15.4987 18.75V9C15.4987 8.5875 15.8361 8.25 16.2486 8.25C16.6611 8.25 16.9985 8.5875 16.9985 9Z" fill="black"/>
|
|
3
|
+
</svg>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
2
|
+
<g clip-path="url(#clip0_125_9498)">
|
|
3
|
+
<path d="M20.6719 2.76091L21.2391 3.3281C21.6797 3.76873 21.6797 4.48123 21.2391 4.91716L19.875 6.28591L17.7141 4.12498L19.0781 2.76091C19.5187 2.32029 20.2312 2.32029 20.6672 2.76091H20.6719ZM9.83437 12.0093L16.125 5.71404L18.2859 7.87497L11.9906 14.1656C11.8547 14.3015 11.6859 14.4 11.5031 14.4515L8.76094 15.2344L9.54375 12.4922C9.59531 12.3094 9.69375 12.1406 9.82969 12.0047L9.83437 12.0093ZM17.4891 1.17185L8.24062 10.4156C7.83281 10.8234 7.5375 11.325 7.38281 11.8734L6.04219 16.5609C5.92969 16.9547 6.0375 17.3765 6.32812 17.6672C6.61875 17.9578 7.04062 18.0656 7.43437 17.9531L12.1219 16.6125C12.675 16.4531 13.1766 16.1578 13.5797 15.7547L22.8281 6.51091C24.1453 5.19372 24.1453 3.05623 22.8281 1.73904L22.2609 1.17185C20.9437 -0.145337 18.8062 -0.145337 17.4891 1.17185ZM4.125 2.99998C1.84687 2.99998 0 4.84685 0 7.12497V19.875C0 22.1531 1.84687 24 4.125 24H16.875C19.1531 24 21 22.1531 21 19.875V14.625C21 14.0015 20.4984 13.5 19.875 13.5C19.2516 13.5 18.75 14.0015 18.75 14.625V19.875C18.75 20.9109 17.9109 21.75 16.875 21.75H4.125C3.08906 21.75 2.25 20.9109 2.25 19.875V7.12497C2.25 6.08904 3.08906 5.24998 4.125 5.24998H9.375C9.99844 5.24998 10.5 4.74841 10.5 4.12498C10.5 3.50154 9.99844 2.99998 9.375 2.99998H4.125Z" fill="black"/>
|
|
4
|
+
</g>
|
|
5
|
+
<defs>
|
|
6
|
+
<clipPath id="clip0_125_9498">
|
|
7
|
+
<rect width="24" height="24" fill="white"/>
|
|
8
|
+
</clipPath>
|
|
9
|
+
</defs>
|
|
10
|
+
</svg>
|
|
@@ -3,5 +3,10 @@ import { default as alertSVG } from './alert.svg';
|
|
|
3
3
|
import { default as commentSVG } from './comment.svg';
|
|
4
4
|
import { default as imageSVG } from './image.svg';
|
|
5
5
|
import { default as closeSVG } from './close.svg';
|
|
6
|
-
|
|
6
|
+
import { default as dumpSVG } from './dump.svg';
|
|
7
|
+
import { default as editSVG } from './edit.svg';
|
|
8
|
+
import { default as chevronDownSVG } from './chevron-down.svg';
|
|
9
|
+
import { default as chevronLeftSVG } from './chevron-left.svg';
|
|
10
|
+
import { default as chevronRightSVG } from './chevron-right.svg';
|
|
11
|
+
export { docCheckSVG, alertSVG, commentSVG, imageSVG, closeSVG, dumpSVG, editSVG, chevronDownSVG, chevronRightSVG, chevronLeftSVG, };
|
|
7
12
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/assets/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,cAAc,EACd,eAAe,EACf,cAAc,GACf,CAAA"}
|
|
@@ -3,5 +3,10 @@ import { default as alertSVG } from './alert.svg';
|
|
|
3
3
|
import { default as commentSVG } from './comment.svg';
|
|
4
4
|
import { default as imageSVG } from './image.svg';
|
|
5
5
|
import { default as closeSVG } from './close.svg';
|
|
6
|
-
|
|
6
|
+
import { default as dumpSVG } from './dump.svg';
|
|
7
|
+
import { default as editSVG } from './edit.svg';
|
|
8
|
+
import { default as chevronDownSVG } from './chevron-down.svg';
|
|
9
|
+
import { default as chevronLeftSVG } from './chevron-left.svg';
|
|
10
|
+
import { default as chevronRightSVG } from './chevron-right.svg';
|
|
11
|
+
export { docCheckSVG, alertSVG, commentSVG, imageSVG, closeSVG, dumpSVG, editSVG, chevronDownSVG, chevronRightSVG, chevronLeftSVG, };
|
|
7
12
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/assets/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/assets/icon/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,eAAe,CAAA;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,YAAY,CAAA;AAC/C,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,oBAAoB,CAAA;AAC9D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,qBAAqB,CAAA;AAChE,OAAO,EACL,WAAW,EACX,QAAQ,EACR,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,OAAO,EACP,OAAO,EACP,cAAc,EACd,eAAe,EACf,cAAc,GACf,CAAA"}
|
|
@@ -3,4 +3,20 @@ import { default as alertSVG } from './alert.svg'
|
|
|
3
3
|
import { default as commentSVG } from './comment.svg'
|
|
4
4
|
import { default as imageSVG } from './image.svg'
|
|
5
5
|
import { default as closeSVG } from './close.svg'
|
|
6
|
-
|
|
6
|
+
import { default as dumpSVG } from './dump.svg'
|
|
7
|
+
import { default as editSVG } from './edit.svg'
|
|
8
|
+
import { default as chevronDownSVG } from './chevron-down.svg'
|
|
9
|
+
import { default as chevronLeftSVG } from './chevron-left.svg'
|
|
10
|
+
import { default as chevronRightSVG } from './chevron-right.svg'
|
|
11
|
+
export {
|
|
12
|
+
docCheckSVG,
|
|
13
|
+
alertSVG,
|
|
14
|
+
commentSVG,
|
|
15
|
+
imageSVG,
|
|
16
|
+
closeSVG,
|
|
17
|
+
dumpSVG,
|
|
18
|
+
editSVG,
|
|
19
|
+
chevronDownSVG,
|
|
20
|
+
chevronRightSVG,
|
|
21
|
+
chevronLeftSVG,
|
|
22
|
+
}
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
|
|
2
|
+
<path d="M13.125 4.875C13.125 5.49844 12.6234 6 12 6C11.3766 6 10.875 5.49844 10.875 4.875V1.125C10.875 0.503906 11.3766 0 12 0C12.6234 0 13.125 0.503906 13.125 1.125V4.875ZM13.125 22.875C13.125 23.4984 12.6234 24 12 24C11.3766 24 10.875 23.4984 10.875 22.875V19.125C10.875 18.5016 11.3766 18 12 18C12.6234 18 13.125 18.5016 13.125 19.125V22.875ZM0 12C0 11.3766 0.503906 10.875 1.125 10.875H4.875C5.49844 10.875 6 11.3766 6 12C6 12.6234 5.49844 13.125 4.875 13.125H1.125C0.503906 13.125 0 12.6234 0 12ZM22.875 10.875C23.4984 10.875 24 11.3766 24 12C24 12.6234 23.4984 13.125 22.875 13.125H19.125C18.5016 13.125 18 12.6234 18 12C18 11.3766 18.5016 10.875 19.125 10.875H22.875ZM20.4844 3.51469C20.925 3.95391 20.925 4.66641 20.4844 5.10469L17.8359 7.75781C17.3953 8.19844 16.6828 8.19844 16.2422 7.75781C15.8016 7.31719 15.8016 6.60469 16.2422 6.16875L18.8953 3.51469C19.3359 3.07547 20.0438 3.07547 20.4844 3.51469ZM5.10469 20.4844C4.66406 20.925 3.95625 20.925 3.47344 20.4844C3.07547 20.0438 3.07547 19.3313 3.47344 18.8953L6.16406 16.2422C6.60469 15.8016 7.31719 15.8016 7.75781 16.2422C8.19844 16.6828 8.19844 17.3953 7.75781 17.8312L5.10469 20.4844ZM3.47344 3.51469C3.95625 3.07547 4.66406 3.07547 5.10469 3.51469L7.75781 6.16875C8.19844 6.60469 8.19844 7.31719 7.75781 7.75781C7.31719 8.19844 6.60469 8.19844 6.16406 7.75781L3.47344 5.10469C3.07547 4.66641 3.07547 3.95391 3.47344 3.51469ZM20.4844 18.8953C20.925 19.3313 20.925 20.0438 20.4844 20.4844C20.0438 20.925 19.3359 20.925 18.8953 20.4844L16.2422 17.8312C15.8016 17.3953 15.8016 16.6828 16.2422 16.2422C16.6828 15.8016 17.3953 15.8016 17.8359 16.2422L20.4844 18.8953Z" fill="black"/>
|
|
3
|
+
</svg>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonRound/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAE3C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonRound/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAGzB,OAAO,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAE3C,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAoBlD,CAAA"}
|
|
@@ -13,9 +13,9 @@ import React from 'react';
|
|
|
13
13
|
import { IconWrapper } from '../IconWrapper';
|
|
14
14
|
import { ButtonStyled } from './styles';
|
|
15
15
|
export const ButtonRound = (_a) => {
|
|
16
|
-
var { variant = 'primary', children, disabled = false, icon, outline, badge } = _a, props = __rest(_a, ["variant", "children", "disabled", "icon", "outline", "badge"]);
|
|
17
|
-
return (React.createElement(ButtonStyled, Object.assign({ variant: variant, disabled: disabled, outline: outline, badge: badge }, props),
|
|
18
|
-
badge && React.createElement("span", { className: 'buttonRoundBadge' }, badge),
|
|
19
|
-
React.createElement(IconWrapper, { src: icon || '', color: 'white', width: '20px', height: '20px', className: 'buttonRadiusWrapperIcon' })));
|
|
16
|
+
var { variant = 'primary', children, disabled = false, icon, outline, badge, size = 'medium' } = _a, props = __rest(_a, ["variant", "children", "disabled", "icon", "outline", "badge", "size"]);
|
|
17
|
+
return (React.createElement(ButtonStyled, Object.assign({ variant: variant, disabled: disabled, outline: outline, badge: badge, size: size }, props),
|
|
18
|
+
badge && size === 'medium' && React.createElement("span", { className: 'buttonRoundBadge' }, badge),
|
|
19
|
+
React.createElement(IconWrapper, { src: icon || '', color: 'white', width: size === 'small' ? '16px' : '20px', height: size === 'small' ? '16px' : '20px', className: 'buttonRadiusWrapperIcon' })));
|
|
20
20
|
};
|
|
21
21
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ButtonRound/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGvC,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ButtonRound/index.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAA;AAC5C,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;AAGvC,MAAM,CAAC,MAAM,WAAW,GAA+B,CAAC,EASvD,EAAE,EAAE;QATmD,EACtD,OAAO,GAAG,SAAS,EACnB,QAAQ,EACR,QAAQ,GAAG,KAAK,EAChB,IAAI,EACJ,OAAO,EACP,KAAK,EACL,IAAI,GAAG,QAAQ,OAEhB,EADI,KAAK,cAR8C,uEASvD,CADS;IACJ,OAAA,CACJ,oBAAC,YAAY,kBAAC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,IAAM,KAAK;QACtG,KAAK,IAAI,IAAI,KAAK,QAAQ,IAAI,8BAAM,SAAS,EAAE,kBAAkB,IAAG,KAAK,CAAQ;QAClF,oBAAC,WAAW,IACV,GAAG,EAAE,IAAI,IAAI,EAAE,EACf,KAAK,EAAE,OAAO,EACd,KAAK,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EACzC,MAAM,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,EAC1C,SAAS,EAAE,yBAAyB,GACpC,CACW,CAChB,CAAA;CAAA,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonRound/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAIjD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAsBC,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA;
|
|
1
|
+
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/ButtonRound/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAIjD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAsBC,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,WAAW,CAAC,CAAA;AAEzC,eAAO,MAAM,UAAU,EAAE,KAOxB,CAAA;AAED,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAA"}
|
|
@@ -34,11 +34,10 @@ export const Playground = {
|
|
|
34
34
|
};
|
|
35
35
|
export const ButtonBadge = {
|
|
36
36
|
args: {
|
|
37
|
-
variant: '
|
|
37
|
+
variant: 'primary',
|
|
38
38
|
children: 'ButtonPlayground',
|
|
39
39
|
disabled: false,
|
|
40
40
|
icon: exampleIcon,
|
|
41
|
-
badge: 10,
|
|
42
41
|
},
|
|
43
42
|
};
|
|
44
43
|
//# sourceMappingURL=stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/ButtonRound/stories.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,6BAA6B,CAAA;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,cAAc;aACxB;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,WAAW,CAAC;YACtB,WAAW,EAAE,WAAW;SACzB;QAED,OAAO,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;KAC/B;CACiC,CAAA;AAEpC,eAAe,IAAI,CAAA;AAGnB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,kBAAkB;QAC5B,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,WAAW;KAClB;CACF,CAAA;
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/ButtonRound/stories.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,6BAA6B,CAAA;AAErD,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AACtD,OAAO,EAAE,WAAW,EAAE,MAAM,SAAS,CAAA;AAErC,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,OAAO,EAAE;YACP,OAAO,EAAE;gBACP,IAAI,EAAE,QAAQ;gBACd,OAAO,EAAE,cAAc;aACxB;SACF;QACD,QAAQ,EAAE;YACR,OAAO,EAAE,SAAS;SACnB;QACD,IAAI,EAAE;YACJ,OAAO,EAAE,QAAQ;YACjB,OAAO,EAAE,CAAC,WAAW,CAAC;YACtB,WAAW,EAAE,WAAW;SACzB;QAED,OAAO,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE;KAC/B;CACiC,CAAA;AAEpC,eAAe,IAAI,CAAA;AAGnB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,kBAAkB;QAC5B,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,WAAW;KAClB;CACF,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,OAAO,EAAE,SAAS;QAClB,QAAQ,EAAE,kBAAkB;QAC5B,QAAQ,EAAE,KAAK;QACf,IAAI,EAAE,WAAW;KAClB;CACF,CAAA"}
|
|
@@ -95,8 +95,8 @@ export const ButtonStyled = styled.button `
|
|
|
95
95
|
align-items: center;
|
|
96
96
|
justify-content: center;
|
|
97
97
|
box-sizing: border-box;
|
|
98
|
-
height:
|
|
99
|
-
width:
|
|
98
|
+
height: ${({ size }) => (size === 'small' ? '32px' : '40px')};
|
|
99
|
+
width: ${({ size }) => (size === 'small' ? '32px' : '40px')};
|
|
100
100
|
font-size: 16px;
|
|
101
101
|
font-weight: 600;
|
|
102
102
|
line-height: 140%;
|
|
@@ -108,7 +108,7 @@ export const ButtonStyled = styled.button `
|
|
|
108
108
|
background-color 0.3s,
|
|
109
109
|
opacity 0.3s;
|
|
110
110
|
color: white;
|
|
111
|
-
gap: 12px;
|
|
111
|
+
gap: ${({ size }) => (size === 'small' ? '8' : '12px')};
|
|
112
112
|
cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
|
|
113
113
|
opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
|
|
114
114
|
${({ variant = 'primary', outline }) => colorScheme[variant]};
|
|
@@ -121,8 +121,8 @@ export const ButtonStyled = styled.button `
|
|
|
121
121
|
margin-bottom: 24px;
|
|
122
122
|
margin-left: 54px;
|
|
123
123
|
position: absolute;
|
|
124
|
-
width: 26px;
|
|
125
|
-
height: 26px;
|
|
124
|
+
width: ${({ size }) => (size === 'small' ? '16px' : '26px')};
|
|
125
|
+
height: ${({ size }) => (size === 'small' ? '16px' : '26px')};
|
|
126
126
|
border-radius: 100%;
|
|
127
127
|
font-size: 12px;
|
|
128
128
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/ButtonRound/styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAGjC,MAAM,EAAE,MAAM,EAAE,GAAG,KAAK,CAAA;AACxB,MAAM,6BAA6B,GAAG,CAAC,KAAa,EAAE,EAAE,CAAC,GAAG,CAAA;;;cAG9C,KAAK;;gBAEH,KAAK;;;;;kBAKH,KAAK;;CAEtB,CAAA;AACD,MAAM,WAAW,GAAG;IAClB,OAAO,EAAE,GAAG,CAAA;kBACI,MAAM,CAAC,OAAO;MAC1B,6BAA6B,CAAC,MAAM,CAAC,OAAO,CAAC;;0BAEzB,MAAM,CAAC,OAAO;QAChC,6BAA6B,CAAC,MAAM,CAAC,MAAM,CAAC;;;0BAG1B,MAAM,CAAC,OAAO;QAChC,6BAA6B,CAAC,MAAM,CAAC,OAAO,CAAC;;GAElD;IACD,SAAS,EAAE,GAAG,CAAA;kBACE,MAAM,CAAC,MAAM;;0BAEL,MAAM,CAAC,MAAM;QAC/B,6BAA6B,CAAC,MAAM,CAAC,MAAM,CAAC;;;0BAG1B,MAAM,CAAC,MAAM;;MAEjC,6BAA6B,CAAC,MAAM,CAAC,MAAM,CAAC;GAC/C;IACD,MAAM,EAAE,GAAG,CAAA;kBACK,MAAM,CAAC,KAAK;;0BAEJ,MAAM,CAAC,KAAK;;;0BAGZ,MAAM,CAAC,KAAK;;MAEhC,6BAA6B,CAAC,MAAM,CAAC,KAAK,CAAC;GAC9C;IACD,OAAO,EAAE,GAAG,CAAA;kBACI,MAAM,CAAC,OAAO;aACnB,MAAM,CAAC,OAAO;;0BAED,MAAM,CAAC,OAAO;;;0BAGd,MAAM,CAAC,OAAO;;MAElC,6BAA6B,CAAC,MAAM,CAAC,OAAO,CAAC;GAChD;IACD,OAAO,EAAE,GAAG,CAAA;kBACI,MAAM,CAAC,MAAM;;0BAEL,MAAM,CAAC,MAAM;;;0BAGb,MAAM,CAAC,MAAM;;MAEjC,6BAA6B,CAAC,MAAM,CAAC,MAAM,CAAC;GAC/C;IACD,IAAI,EAAE,GAAG,CAAA;kBACO,MAAM,CAAC,OAAO;;0BAEN,MAAM,CAAC,OAAO;;;0BAGd,MAAM,CAAC,OAAO;;MAElC,6BAA6B,CAAC,MAAM,CAAC,OAAO,CAAC;GAChD;IACD,MAAM,EAAE,GAAG,CAAA;kBACK,MAAM,CAAC,QAAQ;;0BAEP,MAAM,CAAC,QAAQ;;;0BAGf,MAAM,CAAC,QAAQ;;MAEnC,6BAA6B,CAAC,MAAM,CAAC,QAAQ,CAAC;GACjD;CACO,CAAA;AAEV,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,MAAM,CAAkB
|
|
1
|
+
{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/ButtonRound/styles.ts"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface CardStoriesProps {
|
|
3
|
+
title?: string;
|
|
4
|
+
subTitle?: string;
|
|
5
|
+
children?: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
declare const CardStories: ({ title, subTitle, children }: CardStoriesProps) => React.JSX.Element;
|
|
8
|
+
export default CardStories;
|
|
9
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/CardStories/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAqCzB,UAAU,gBAAgB;IACxB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B;AACD,QAAA,MAAM,WAAW,kCAAmC,gBAAgB,sBAcnE,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled from 'styled-components';
|
|
3
|
+
import { Paragraph } from '../Paragraph';
|
|
4
|
+
import { theme } from '../Themes';
|
|
5
|
+
const ContainerCardStories = styled.div `
|
|
6
|
+
min-height: 300px;
|
|
7
|
+
min-width: 200px;
|
|
8
|
+
height: auto;
|
|
9
|
+
width: auto;
|
|
10
|
+
border: 1px solid #e0e0e0;
|
|
11
|
+
border-radius: 8px;
|
|
12
|
+
display: flex;
|
|
13
|
+
justify-content: space-between;
|
|
14
|
+
flex-direction: column;
|
|
15
|
+
`;
|
|
16
|
+
const Wrapper = styled.div `
|
|
17
|
+
padding: 16px;
|
|
18
|
+
display: flex;
|
|
19
|
+
min-height: 240px;
|
|
20
|
+
min-width: 200px;
|
|
21
|
+
justify-content: center;
|
|
22
|
+
align-items: center;
|
|
23
|
+
flex-wrap: wrap;
|
|
24
|
+
flex-direction: column;
|
|
25
|
+
`;
|
|
26
|
+
const WrapperFooter = styled.div `
|
|
27
|
+
height: 50px;
|
|
28
|
+
width: 100%;
|
|
29
|
+
display: flex;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
align-items: center;
|
|
32
|
+
border-top: 1px solid #e0e0e0;
|
|
33
|
+
flex-direction: column;
|
|
34
|
+
`;
|
|
35
|
+
const CardStories = ({ title, subTitle, children }) => {
|
|
36
|
+
return (React.createElement(ContainerCardStories, null,
|
|
37
|
+
React.createElement(Wrapper, null, children),
|
|
38
|
+
React.createElement(WrapperFooter, null,
|
|
39
|
+
React.createElement(Paragraph, { color: theme.colors.shade50, heavyBod: true }, title),
|
|
40
|
+
React.createElement(Paragraph, { size: 'x-small', color: theme.colors.shade30 }, subTitle))));
|
|
41
|
+
};
|
|
42
|
+
export default CardStories;
|
|
43
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CardStories/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAqB,MAAM,mBAAmB,CAAA;AACrD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,MAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;CAUtC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;CASzB,CAAA;AACD,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;CAQ/B,CAAA;AAOD,MAAM,WAAW,GAAG,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,QAAQ,EAAoB,EAAE,EAAE;IACtE,OAAO,CACL,oBAAC,oBAAoB;QACnB,oBAAC,OAAO,QAAE,QAAQ,CAAW;QAC7B,oBAAC,aAAa;YACZ,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,QAAQ,UAC7C,KAAK,CACI;YACZ,oBAAC,SAAS,IAAC,IAAI,EAAE,SAAS,EAAE,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,IACpD,QAAQ,CACC,CACE,CACK,CACxB,CAAA;AACH,CAAC,CAAA;AAED,eAAe,WAAW,CAAA"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import CardStories from './index';
|
|
3
|
+
declare const meta: Meta<typeof CardStories>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const Default: Story;
|
|
7
|
+
export declare const WithCustomContent: Story;
|
|
8
|
+
export declare const WithoutSubtitle: Story;
|
|
9
|
+
//# sourceMappingURL=stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/CardStories/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,WAAW,MAAM,SAAS,CAAA;AAIjC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,WAAW,CAOC,CAAA;AAEpC,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,OAAO,EAAE,KAMrB,CAAA;AAED,eAAO,MAAM,iBAAiB,EAAE,KAW/B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAK7B,CAAA"}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
import CardStories from './index';
|
|
2
|
+
import { Paragraph } from '../Paragraph';
|
|
3
|
+
import React from 'react';
|
|
4
|
+
const meta = {
|
|
5
|
+
title: 'Components/CardStories',
|
|
6
|
+
component: CardStories,
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: 'centered',
|
|
9
|
+
},
|
|
10
|
+
tags: ['autodocs'],
|
|
11
|
+
};
|
|
12
|
+
export default meta;
|
|
13
|
+
export const Default = {
|
|
14
|
+
args: {
|
|
15
|
+
title: 'Default Title',
|
|
16
|
+
subTitle: 'Default Subtitle',
|
|
17
|
+
children: 'This is the default content.',
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
export const WithCustomContent = {
|
|
21
|
+
args: {
|
|
22
|
+
title: 'Custom Title',
|
|
23
|
+
subTitle: 'Custom Subtitle',
|
|
24
|
+
children: (React.createElement(React.Fragment, null,
|
|
25
|
+
React.createElement(Paragraph, null, "This is custom content."),
|
|
26
|
+
React.createElement(Paragraph, { size: "small" }, "Additional custom content."))),
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
export const WithoutSubtitle = {
|
|
30
|
+
args: {
|
|
31
|
+
title: 'Title Only',
|
|
32
|
+
children: React.createElement(Paragraph, null, "This card has no subtitle."),
|
|
33
|
+
},
|
|
34
|
+
};
|
|
35
|
+
//# sourceMappingURL=stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/CardStories/stories.tsx"],"names":[],"mappings":"AACA,OAAO,WAAW,MAAM,SAAS,CAAA;AACjC,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,MAAM,IAAI,GAA6B;IACrC,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;CACgB,CAAA;AAEpC,eAAe,IAAI,CAAA;AAGnB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;QACtB,QAAQ,EAAE,kBAAkB;QAC5B,QAAQ,EAAE,8BAA8B;KACzC;CACF,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAU;IACtC,IAAI,EAAE;QACJ,KAAK,EAAE,cAAc;QACrB,QAAQ,EAAE,iBAAiB;QAC3B,QAAQ,EAAE,CACR;YACE,oBAAC,SAAS,kCAAoC;YAC9C,oBAAC,SAAS,IAAC,IAAI,EAAC,OAAO,iCAAuC,CAC7D,CACJ;KACF;CACF,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,KAAK,EAAE,YAAY;QACnB,QAAQ,EAAE,oBAAC,SAAS,qCAAuC;KAC5D;CACF,CAAA"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface LoadingProps {
|
|
3
|
+
size?: 'small' | 'medium' | 'large';
|
|
4
|
+
}
|
|
5
|
+
export declare const FullScreenLoading: React.FC<LoadingProps>;
|
|
6
|
+
export declare const ContainerLoading: React.FC<LoadingProps>;
|
|
7
|
+
export {};
|
|
8
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AA8CzB,UAAU,YAAY;IACpB,IAAI,CAAC,EAAE,OAAO,GAAG,QAAQ,GAAG,OAAO,CAAA;CACpC;AAGD,eAAO,MAAM,iBAAiB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CASpD,CAAA;AAGD,eAAO,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,YAAY,CASnD,CAAA"}
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import styled, { keyframes } from 'styled-components';
|
|
3
|
+
import spinSVG from '../../assets/icon/spin.svg';
|
|
4
|
+
import { Paragraph } from '../Paragraph';
|
|
5
|
+
import { theme } from '../Themes';
|
|
6
|
+
// Animação de rotação
|
|
7
|
+
const spinAnimation = keyframes `
|
|
8
|
+
0% { transform: rotate(0deg); }
|
|
9
|
+
100% { transform: rotate(360deg); }
|
|
10
|
+
`;
|
|
11
|
+
// Estilos para o wrapper de tela cheia
|
|
12
|
+
const FullScreenWrapper = styled.div `
|
|
13
|
+
position: fixed;
|
|
14
|
+
top: 0;
|
|
15
|
+
left: 0;
|
|
16
|
+
width: 100vw;
|
|
17
|
+
height: 100vh;
|
|
18
|
+
display: flex;
|
|
19
|
+
align-items: center;
|
|
20
|
+
justify-content: center;
|
|
21
|
+
background-color: rgb(164, 162, 162);
|
|
22
|
+
z-index: 9999;
|
|
23
|
+
`;
|
|
24
|
+
// Estilos para o wrapper do contêiner
|
|
25
|
+
const ContainerWrapper = styled.div ``;
|
|
26
|
+
// Estilos para o wrapper do conteúdo
|
|
27
|
+
const ContainerWrapperStyles = styled.div `
|
|
28
|
+
display: flex;
|
|
29
|
+
align-items: center;
|
|
30
|
+
justify-content: center;
|
|
31
|
+
flex-direction: column;
|
|
32
|
+
gap: 16px;
|
|
33
|
+
`;
|
|
34
|
+
// Estilos para a imagem de loading
|
|
35
|
+
const LoadingImage = styled.img `
|
|
36
|
+
width: ${({ size }) => (size === 'small' ? '30px' : size === 'medium' ? '50px' : '70px')};
|
|
37
|
+
height: ${({ size }) => (size === 'small' ? '30px' : size === 'medium' ? '50px' : '70px')};
|
|
38
|
+
animation: ${spinAnimation} 2s linear infinite;
|
|
39
|
+
`;
|
|
40
|
+
// Componente de loading em tela cheia
|
|
41
|
+
export const FullScreenLoading = ({ size = 'medium' }) => (React.createElement(FullScreenWrapper, null,
|
|
42
|
+
React.createElement(ContainerWrapperStyles, null,
|
|
43
|
+
React.createElement(LoadingImage, { src: spinSVG, alt: "loading", size: size }),
|
|
44
|
+
React.createElement(Paragraph, { color: theme.colors.shade40, size: "x-small" }, "CARREGANDO"))));
|
|
45
|
+
// Componente de loading no contêiner
|
|
46
|
+
export const ContainerLoading = ({ size = 'medium' }) => (React.createElement(ContainerWrapper, null,
|
|
47
|
+
React.createElement(ContainerWrapperStyles, null,
|
|
48
|
+
React.createElement(LoadingImage, { src: spinSVG, alt: "loading", size: size }),
|
|
49
|
+
React.createElement(Paragraph, { color: theme.colors.shade30, size: "x-small" }, "CARREGANDO"))));
|
|
50
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Loading/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,MAAM,EAAE,EAAE,SAAS,EAAE,MAAM,mBAAmB,CAAA;AACrD,OAAO,OAAO,MAAM,4BAA4B,CAAA;AAChD,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,KAAK,EAAE,MAAM,WAAW,CAAA;AAEjC,sBAAsB;AACtB,MAAM,aAAa,GAAG,SAAS,CAAA;;;CAG9B,CAAA;AAED,uCAAuC;AACvC,MAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;;;;;CAWnC,CAAA;AAED,sCAAsC;AACtC,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CAAA,EAAE,CAAA;AAErC,qCAAqC;AACrC,MAAM,sBAAsB,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;CAMxC,CAAA;AAED,mCAAmC;AACnC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAwC;WAC5D,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;YAC9E,CAAC,EAAE,IAAI,EAAE,EAAE,EAAE,CAAC,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,KAAK,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC;eAC5E,aAAa;CAC3B,CAAA;AAOD,sCAAsC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAA2B,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,EAAE,EAAE,CAAC,CAChF,oBAAC,iBAAiB;IAChB,oBAAC,sBAAsB;QACrB,oBAAC,YAAY,IAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,GAAI;QACxD,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,iBAE1C,CACW,CACP,CACrB,CAAA;AAED,qCAAqC;AACrC,MAAM,CAAC,MAAM,gBAAgB,GAA2B,CAAC,EAAE,IAAI,GAAG,QAAQ,EAAE,EAAE,EAAE,CAAC,CAC/E,oBAAC,gBAAgB;IACf,oBAAC,sBAAsB;QACrB,oBAAC,YAAY,IAAC,GAAG,EAAE,OAAO,EAAE,GAAG,EAAC,SAAS,EAAC,IAAI,EAAE,IAAI,GAAI;QACxD,oBAAC,SAAS,IAAC,KAAK,EAAE,KAAK,CAAC,MAAM,CAAC,OAAO,EAAE,IAAI,EAAC,SAAS,iBAE1C,CACW,CACR,CACpB,CAAA"}
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
+
import { FullScreenLoading } from './index';
|
|
3
|
+
declare const meta: Meta<typeof FullScreenLoading>;
|
|
4
|
+
export default meta;
|
|
5
|
+
type Story = StoryObj<typeof meta>;
|
|
6
|
+
export declare const FullScreenSmall: Story;
|
|
7
|
+
export declare const FullScreenMedium: Story;
|
|
8
|
+
export declare const FullScreenLarge: Story;
|
|
9
|
+
export declare const ContainerSmall: Story;
|
|
10
|
+
export declare const ContainerMedium: Story;
|
|
11
|
+
export declare const ContainerLarge: Story;
|
|
12
|
+
//# sourceMappingURL=stories.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Loading/stories.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AACtD,OAAO,EAAE,iBAAiB,EAAoB,MAAM,SAAS,CAAA;AAI7D,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,iBAAiB,CAaC,CAAA;AAE1C,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,eAAe,EAAE,KAI7B,CAAA;AAED,eAAO,MAAM,gBAAgB,EAAE,KAI9B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAI7B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA;AAED,eAAO,MAAM,eAAe,EAAE,KAM7B,CAAA;AAED,eAAO,MAAM,cAAc,EAAE,KAM5B,CAAA"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import { FullScreenLoading, ContainerLoading } from './index';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
import CardStories from '../CardStories';
|
|
4
|
+
const meta = {
|
|
5
|
+
title: 'Components/Loading',
|
|
6
|
+
component: FullScreenLoading,
|
|
7
|
+
parameters: {
|
|
8
|
+
layout: 'centered',
|
|
9
|
+
},
|
|
10
|
+
tags: ['autodocs'],
|
|
11
|
+
argTypes: {
|
|
12
|
+
size: {
|
|
13
|
+
control: { type: 'select', options: ['small', 'medium', 'large'] },
|
|
14
|
+
description: 'Select the size of the loading spinner',
|
|
15
|
+
},
|
|
16
|
+
},
|
|
17
|
+
};
|
|
18
|
+
export default meta;
|
|
19
|
+
export const FullScreenSmall = {
|
|
20
|
+
args: {
|
|
21
|
+
size: 'small',
|
|
22
|
+
},
|
|
23
|
+
};
|
|
24
|
+
export const FullScreenMedium = {
|
|
25
|
+
args: {
|
|
26
|
+
size: 'medium',
|
|
27
|
+
},
|
|
28
|
+
};
|
|
29
|
+
export const FullScreenLarge = {
|
|
30
|
+
args: {
|
|
31
|
+
size: 'large',
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
export const ContainerSmall = {
|
|
35
|
+
render: () => (React.createElement(CardStories, { title: "Loading", subTitle: "small" },
|
|
36
|
+
React.createElement(ContainerLoading, { size: "small" }))),
|
|
37
|
+
};
|
|
38
|
+
export const ContainerMedium = {
|
|
39
|
+
render: () => (React.createElement(CardStories, { title: "Loading", subTitle: "medium" },
|
|
40
|
+
React.createElement(ContainerLoading, { size: "medium" }))),
|
|
41
|
+
};
|
|
42
|
+
export const ContainerLarge = {
|
|
43
|
+
render: () => (React.createElement(CardStories, { title: "Loading", subTitle: "large" },
|
|
44
|
+
React.createElement(ContainerLoading, { size: "large" }))),
|
|
45
|
+
};
|
|
46
|
+
//# sourceMappingURL=stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Loading/stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC7D,OAAO,KAAK,MAAM,OAAO,CAAA;AACzB,OAAO,WAAW,MAAM,gBAAgB,CAAA;AAExC,MAAM,IAAI,GAAmC;IAC3C,KAAK,EAAE,oBAAoB;IAC3B,SAAS,EAAE,iBAAiB;IAC5B,UAAU,EAAE;QACV,MAAM,EAAE,UAAU;KACnB;IACD,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,OAAO,EAAE,EAAE,IAAI,EAAE,QAAQ,EAAE,OAAO,EAAE,CAAC,OAAO,EAAE,QAAQ,EAAE,OAAO,CAAC,EAAE;YAClE,WAAW,EAAE,wCAAwC;SACtD;KACF;CACuC,CAAA;AAE1C,eAAe,IAAI,CAAA;AAGnB,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;KACd;CACF,CAAA;AAED,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE;QACJ,IAAI,EAAE,QAAQ;KACf;CACF,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,IAAI,EAAE,OAAO;KACd;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO;QAC3C,oBAAC,gBAAgB,IAAC,IAAI,EAAC,OAAO,GAAG,CACrB,CACf;CACF,CAAA;AAED,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,QAAQ;QAC5C,oBAAC,gBAAgB,IAAC,IAAI,EAAC,QAAQ,GAAG,CACtB,CACf;CACF,CAAA;AAED,MAAM,CAAC,MAAM,cAAc,GAAU;IACnC,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,oBAAC,WAAW,IAAC,KAAK,EAAC,SAAS,EAAC,QAAQ,EAAC,OAAO;QAC3C,oBAAC,gBAAgB,IAAC,IAAI,EAAC,OAAO,GAAG,CACrB,CACf;CACF,CAAA"}
|
|
@@ -17,7 +17,7 @@ export const Playground = {
|
|
|
17
17
|
isOpen && (React.createElement(Modal, { onClose: () => setIsOpen(false), footer: React.createElement(React.Fragment, null,
|
|
18
18
|
React.createElement(Button, { onClick: () => setIsOpen(true), variant: 'gray' }, "Cancelar"),
|
|
19
19
|
React.createElement(Button, { onClick: () => setIsOpen(true) }, "Open Modal")) },
|
|
20
|
-
React.createElement(Paragraph, { size: 'medium',
|
|
20
|
+
React.createElement(Paragraph, { size: 'medium', heavyBod: true }, "Modal Title"),
|
|
21
21
|
React.createElement(Paragraph, null, "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.")))));
|
|
22
22
|
},
|
|
23
23
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Modal/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;CACY,CAAA;AAE9B,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE3C,OAAO,CACL;YACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB;YAC1D,MAAM,IAAI,CACT,oBAAC,KAAK,IACJ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EACJ;oBACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,eAE9C;oBACT,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB,CAC1D;gBAGL,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,
|
|
1
|
+
{"version":3,"file":"stories.js","sourceRoot":"","sources":["../../../src/components/Modal/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;AAChC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAA;AAC/B,OAAO,EAAE,SAAS,EAAE,MAAM,cAAc,CAAA;AACxC,OAAO,EAAE,MAAM,EAAE,MAAM,WAAW,CAAA;AAElC,MAAM,IAAI,GAAuB;IAC/B,KAAK,EAAE,kBAAkB;IACzB,SAAS,EAAE,KAAK;CACY,CAAA;AAE9B,eAAe,IAAI,CAAA;AAInB,MAAM,CAAC,MAAM,UAAU,GAAU;IAC/B,MAAM,EAAE,GAAG,EAAE;QACX,sDAAsD;QACtD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAA;QAE3C,OAAO,CACL;YACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB;YAC1D,MAAM,IAAI,CACT,oBAAC,KAAK,IACJ,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,EAC/B,MAAM,EACJ;oBACE,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,EAAE,OAAO,EAAE,MAAM,eAE9C;oBACT,oBAAC,MAAM,IAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,iBAAqB,CAC1D;gBAGL,oBAAC,SAAS,IAAC,IAAI,EAAE,QAAQ,EAAE,QAAQ,wBAEvB;gBACZ,oBAAC,SAAS,ykBAOE,CACN,CACT,CACA,CACJ,CAAA;IACH,CAAC;CACF,CAAA"}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export type PropsPaginate = {
|
|
3
|
+
currentPage: number;
|
|
4
|
+
itemCount: number;
|
|
5
|
+
itemsPerPage?: number;
|
|
6
|
+
onChangePage: (page: number) => void;
|
|
7
|
+
onChangeItemsPerPage: (itemsPerPage: number) => void;
|
|
8
|
+
};
|
|
9
|
+
export declare const Paginate: ({ currentPage, itemCount, onChangePage, itemsPerPage, onChangeItemsPerPage, }: PropsPaginate) => React.JSX.Element;
|
|
10
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Paginate/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,MAAM,MAAM,aAAa,GAAG;IAC1B,WAAW,EAAE,MAAM,CAAA;IACnB,SAAS,EAAE,MAAM,CAAA;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,YAAY,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACpC,oBAAoB,EAAE,CAAC,YAAY,EAAE,MAAM,KAAK,IAAI,CAAA;CACrD,CAAA;AAED,eAAO,MAAM,QAAQ,kFAMlB,aAAa,sBAyFf,CAAA"}
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { Container } from './styles';
|
|
3
|
+
import { IconWrapper } from '../IconWrapper';
|
|
4
|
+
import { chevronLeftSVG, chevronRightSVG } from '../../assets/icon';
|
|
5
|
+
export const Paginate = ({ currentPage, itemCount, onChangePage, itemsPerPage, onChangeItemsPerPage, }) => {
|
|
6
|
+
// Se itemsPerPage for undefined, o valor default e 20
|
|
7
|
+
let itemsPerPageValue = itemsPerPage || 20;
|
|
8
|
+
const pageCount = Math.ceil(itemCount / itemsPerPageValue);
|
|
9
|
+
const pages = [];
|
|
10
|
+
// o interval indica quantas paginas mostrar antes e depois da pagina atual
|
|
11
|
+
const interval = 2;
|
|
12
|
+
// Adiciona a primeira pagina
|
|
13
|
+
if (pageCount > 0 && currentPage - interval > 1) {
|
|
14
|
+
pages.push(1);
|
|
15
|
+
}
|
|
16
|
+
// Adiciona as paginas entre a primeira e a ultima do intervalo
|
|
17
|
+
const start = Math.max(currentPage - interval, 1);
|
|
18
|
+
const end = Math.min(currentPage + interval, pageCount);
|
|
19
|
+
if (start > 2) {
|
|
20
|
+
pages.push('elipsis');
|
|
21
|
+
}
|
|
22
|
+
for (let i = start; i <= end; i++) {
|
|
23
|
+
pages.push(i);
|
|
24
|
+
}
|
|
25
|
+
if (end < pageCount - 1) {
|
|
26
|
+
pages.push('elipsis');
|
|
27
|
+
}
|
|
28
|
+
if (pageCount > currentPage + interval) {
|
|
29
|
+
pages.push(pageCount);
|
|
30
|
+
}
|
|
31
|
+
const minItem = (currentPage - 1) * itemsPerPageValue + 1;
|
|
32
|
+
const maxItem = Math.min(currentPage * itemsPerPageValue, itemCount);
|
|
33
|
+
const itemPerPageOptions = Array.from(new Set([10, 20, 50, 100, itemsPerPage]));
|
|
34
|
+
return (React.createElement(Container, null,
|
|
35
|
+
React.createElement("ul", { className: "pagination" },
|
|
36
|
+
React.createElement(IconWrapper, { className: currentPage === 1 ? 'icon-disabled' : 'icon', src: chevronLeftSVG, width: "14px", onClick: () => onChangePage(currentPage - 1) }),
|
|
37
|
+
pages.map((page, index) => {
|
|
38
|
+
if (page === 'elipsis') {
|
|
39
|
+
return React.createElement("li", { key: `elipsis-${index}` }, "...");
|
|
40
|
+
}
|
|
41
|
+
return (React.createElement("li", { key: page, className: page === currentPage ? 'page-active' : 'page', onClick: () => onChangePage(page) }, page));
|
|
42
|
+
}),
|
|
43
|
+
React.createElement(IconWrapper, { className: currentPage === pageCount ? 'icon-disabled' : 'icon', src: chevronRightSVG, width: "14px", onClick: () => onChangePage(currentPage + 1) })),
|
|
44
|
+
React.createElement("div", { className: "items-per-page-wrapper" },
|
|
45
|
+
React.createElement("div", { className: "item-per-page" }, "Itens por pa\u0301gina"),
|
|
46
|
+
React.createElement("select", { value: itemsPerPageValue, onChange: e => {
|
|
47
|
+
onChangeItemsPerPage(Number(e.target.value));
|
|
48
|
+
} }, itemPerPageOptions.map((item, index) => {
|
|
49
|
+
return (React.createElement("option", { key: index, value: item }, item));
|
|
50
|
+
})),
|
|
51
|
+
React.createElement("div", { className: "items-per-page-selected" },
|
|
52
|
+
minItem,
|
|
53
|
+
" - ",
|
|
54
|
+
maxItem,
|
|
55
|
+
" de ",
|
|
56
|
+
itemCount))));
|
|
57
|
+
};
|
|
58
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Paginate/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"stories.d.ts","sourceRoot":"","sources":["../../../src/components/Paginate/stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAA;AAKjD,OAAO,EAAY,aAAa,EAAE,MAAM,GAAG,CAAA;AAE3C,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,aAAa,CAW7B,CAAA;AAED,eAAe,IAAI,CAAA;AA4BnB,eAAO,MAAM,OAAO,EAAE,QAAQ,CAAC,aAAa,CAI3C,CAAA"}
|