@integrigo/integrigo-ui 1.6.18-a → 1.6.18-c

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.
Files changed (21) hide show
  1. package/lib/index.esm.js +1 -1
  2. package/lib/index.esm.js.map +1 -1
  3. package/lib/index.js +1 -1
  4. package/lib/index.js.map +1 -1
  5. package/lib/src/components/molecules/TextArea/TextArea.d.ts +1 -0
  6. package/lib/src/components/organisms/Modal/Modal.d.ts +1 -0
  7. package/lib/src/components/organisms/Modal/Modal.stories.d.ts +1 -0
  8. package/lib/src/components/organisms/Table/Table.d.ts +5 -3
  9. package/lib/src/components/organisms/Table/Table.stories.d.ts +2 -1
  10. package/package.json +1 -1
  11. package/src/components/atoms/Chip/__snapshots__/Chip.test.tsx.snap +7 -21
  12. package/src/components/atoms/Dot/__snapshots__/Dot.test.tsx.snap +11 -0
  13. package/src/components/molecules/Button/__snapshots__/Button.test.tsx.snap +3 -3
  14. package/src/components/molecules/Profile/__snapshots__/Profile.test.tsx.snap +26 -0
  15. package/src/components/molecules/TextArea/TextArea.tsx +5 -1
  16. package/src/components/organisms/Modal/Modal.stories.tsx +14 -1
  17. package/src/components/organisms/Modal/Modal.tsx +41 -17
  18. package/src/components/organisms/Table/Table.stories.tsx +108 -18
  19. package/src/components/organisms/Table/Table.test.tsx +71 -3
  20. package/src/components/organisms/Table/Table.tsx +39 -7
  21. package/src/components/organisms/Table/__snapshots__/Table.test.tsx.snap +129 -4
package/lib/src/components/molecules/TextArea/TextArea.d.ts CHANGED
@@ -2,5 +2,6 @@ import React from 'react';
2
2
  import { ValidationType } from '../../../types/validation';
3
3
  export interface TextAreaProps extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
4
4
  validationType?: ValidationType;
5
+ size?: "xl" | "l" | "m" | "s";
5
6
  }
6
7
  export declare const TextArea: React.FC<TextAreaProps>;
package/lib/src/components/organisms/Modal/Modal.d.ts CHANGED
@@ -5,6 +5,7 @@ export interface ModalStaticProps {
5
5
  }
6
6
  export interface ModalProps {
7
7
  show: boolean;
8
+ suffix?: React.ReactNode;
8
9
  onClose: () => void;
9
10
  }
10
11
  export declare const Modal: React.FCS<PropsWithChildren<ModalProps>> & ModalStaticProps;
package/lib/src/components/organisms/Modal/Modal.stories.d.ts CHANGED
@@ -3,3 +3,4 @@ import { ComponentStory, ComponentMeta } from "@storybook/react";
3
3
  declare const _default: ComponentMeta<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>> & import("./Modal").ModalStaticProps>;
4
4
  export default _default;
5
5
  export declare const Basic: ComponentStory<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>> & import("./Modal").ModalStaticProps>;
6
+ export declare const WithSuffix: ComponentStory<import("react").FCS<import("react").PropsWithChildren<import("./Modal").ModalProps>> & import("./Modal").ModalStaticProps>;
package/lib/src/components/organisms/Table/Table.d.ts CHANGED
@@ -1,5 +1,5 @@
1
- import React from 'react';
2
- import { Column } from '@tanstack/react-table';
1
+ import React, { ReactNode } from 'react';
2
+ import { Column, Row } from '@tanstack/react-table';
3
3
  declare type Variant = 'primary' | 'secondary';
4
4
  declare type Alignment = 'left' | 'right' | 'center';
5
5
  export interface Props<T extends Record<string, unknown>> extends React.TableHTMLAttributes<HTMLTableElement> {
@@ -7,6 +7,8 @@ export interface Props<T extends Record<string, unknown>> extends React.TableHTM
7
7
  columns: Column<T>[];
8
8
  variant?: Variant;
9
9
  textAlign?: Alignment;
10
+ renderExpandableRowComponent?: (row: Row<T>) => ReactNode;
11
+ renderExpandCollapseComponent?: (row: Row<T>) => ReactNode;
10
12
  }
11
- export declare const Table: <T extends Record<string, unknown>>({ data, columns, variant, textAlign, ...props }: Props<T>) => JSX.Element;
13
+ export declare const Table: <T extends Record<string, unknown>>({ data, columns, variant, textAlign, renderExpandableRowComponent, renderExpandCollapseComponent, ...props }: Props<T>) => JSX.Element;
12
14
  export {};
package/lib/src/components/organisms/Table/Table.stories.d.ts CHANGED
@@ -1,7 +1,8 @@
1
1
  /// <reference types="react" />
2
2
  import { Table } from './Table';
3
3
  import { ComponentMeta, ComponentStory } from '@storybook/react';
4
- declare const _default: ComponentMeta<(<T extends Record<string, unknown>>({ data, columns, variant, textAlign, ...props }: import("./Table").Props<T>) => JSX.Element)>;
4
+ declare const _default: ComponentMeta<(<T extends Record<string, unknown>>({ data, columns, variant, textAlign, renderExpandableRowComponent, renderExpandCollapseComponent, ...props }: import("./Table").Props<T>) => JSX.Element)>;
5
5
  export default _default;
6
6
  export declare const Primary: ComponentStory<typeof Table>;
7
7
  export declare const WithProfile: ComponentStory<typeof Table>;
8
+ export declare const ExpandableRows: ComponentStory<typeof Table>;
package/package.json CHANGED
@@ -3,7 +3,7 @@
3
3
  "publishConfig": {
4
4
  "registry": "https://npm.pkg.github.com/integrigo"
5
5
  },
6
- "version": "1.6.18a",
6
+ "version": "1.6.18c",
7
7
  "main": "lib/index.js",
8
8
  "module": "lib/index.esm.js",
9
9
  "types": "lib/index.d.ts",
package/src/components/atoms/Chip/__snapshots__/Chip.test.tsx.snap CHANGED
@@ -1,9 +1,9 @@
1
1
  // Jest Snapshot v1, https://goo.gl/fbAQLP
2
2
 
3
- exports[`<Radio /> should match snapshot - basic 1`] = `
3
+ exports[`<Chip /> should match snapshot - basic 1`] = `
4
4
  <div>
5
5
  <div
6
- class="sc-gsDKAQ beQSVy"
6
+ class="sc-gsDKAQ jAlhkS"
7
7
  >
8
8
  <span
9
9
  class="sc-hKwDye idViEF"
@@ -14,23 +14,23 @@ exports[`<Radio /> should match snapshot - basic 1`] = `
14
14
  </div>
15
15
  `;
16
16
 
17
- exports[`<Radio /> should match snapshot - icon 1`] = `
17
+ exports[`<Chip /> should match snapshot - icon 1`] = `
18
18
  <div>
19
19
  <div
20
- class="sc-gsDKAQ beQSVy"
20
+ class="sc-gsDKAQ jAlhkS"
21
21
  >
22
22
  <span
23
- class="sc-dkPtRN doqhX"
23
+ class="sc-dkPtRN ljgGG"
24
24
  >
25
25
  <svg
26
26
  fill="var(--shades-of-grey-0)"
27
27
  height="15"
28
- viewBox="0 0 14 14"
28
+ viewBox="0 0 24 24"
29
29
  width="15"
30
30
  xmlns="http://www.w3.org/2000/svg"
31
31
  >
32
32
  <path
33
- d="m8.41 7 4.3-4.29a1.004 1.004 0 1 0-1.42-1.42L7 5.59l-4.29-4.3a1.004 1.004 0 0 0-1.42 1.42L5.59 7l-4.3 4.29a1 1 0 0 0 0 1.42.998.998 0 0 0 1.42 0L7 8.41l4.29 4.3a.998.998 0 0 0 1.42 0 .997.997 0 0 0 .219-1.095.998.998 0 0 0-.22-.325L8.41 7Z"
33
+ d="M13.4099 11.9999L17.7099 7.70994C17.8982 7.52164 18.004 7.26624 18.004 6.99994C18.004 6.73364 17.8982 6.47825 17.7099 6.28994C17.5216 6.10164 17.2662 5.99585 16.9999 5.99585C16.7336 5.99585 16.4782 6.10164 16.2899 6.28994L11.9999 10.5899L7.70994 6.28994C7.52164 6.10164 7.26624 5.99585 6.99994 5.99585C6.73364 5.99585 6.47824 6.10164 6.28994 6.28994C6.10164 6.47825 5.99585 6.73364 5.99585 6.99994C5.99585 7.26624 6.10164 7.52164 6.28994 7.70994L10.5899 11.9999L6.28994 16.2899C6.19621 16.3829 6.12182 16.4935 6.07105 16.6154C6.02028 16.7372 5.99414 16.8679 5.99414 16.9999C5.99414 17.132 6.02028 17.2627 6.07105 17.3845C6.12182 17.5064 6.19621 17.617 6.28994 17.7099C6.3829 17.8037 6.4935 17.8781 6.61536 17.9288C6.73722 17.9796 6.86793 18.0057 6.99994 18.0057C7.13195 18.0057 7.26266 17.9796 7.38452 17.9288C7.50638 17.8781 7.61698 17.8037 7.70994 17.7099L11.9999 13.4099L16.2899 17.7099C16.3829 17.8037 16.4935 17.8781 16.6154 17.9288C16.7372 17.9796 16.8679 18.0057 16.9999 18.0057C17.132 18.0057 17.2627 17.9796 17.3845 17.9288C17.5064 17.8781 17.617 17.8037 17.7099 17.7099C17.8037 17.617 17.8781 17.5064 17.9288 17.3845C17.9796 17.2627 18.0057 17.132 18.0057 16.9999C18.0057 16.8679 17.9796 16.7372 17.9288 16.6154C17.8781 16.4935 17.8037 16.3829 17.7099 16.2899L13.4099 11.9999Z"
34
34
  />
35
35
  </svg>
36
36
  </span>
@@ -42,17 +42,3 @@ exports[`<Radio /> should match snapshot - icon 1`] = `
42
42
  </div>
43
43
  </div>
44
44
  `;
45
-
46
- exports[`<Radio /> should match snapshot 1`] = `
47
- <div>
48
- <div
49
- class="sc-gsDKAQ beQSVy"
50
- >
51
- <span
52
- class="sc-hKwDye idViEF"
53
- >
54
- Accept
55
- </span>
56
- </div>
57
- </div>
58
- `;
package/src/components/atoms/Dot/__snapshots__/Dot.test.tsx.snap ADDED
@@ -0,0 +1,11 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`<Dot /> should match snapshot - basic 1`] = `
4
+ <div>
5
+ <div
6
+ class="sc-gsDKAQ leWMld"
7
+ >
8
+ 7
9
+ </div>
10
+ </div>
11
+ `;
package/src/components/molecules/Button/__snapshots__/Button.test.tsx.snap CHANGED
@@ -43,7 +43,7 @@ exports[`<Button /> ghost + loading - should match snapshot 1`] = `
43
43
  xmlns="http://www.w3.org/2000/svg"
44
44
  >
45
45
  <path
46
- d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z"
46
+ d="M6.9917 14.502C6.86037 14.5019 6.73032 14.5278 6.60898 14.578C6.48764 14.6283 6.37739 14.7019 6.28452 14.7948C6.19166 14.8876 6.118 14.9979 6.06776 15.1192C6.01751 15.2406 5.99167 15.3706 5.9917 15.502V17.2843C4.70275 15.8266 3.99141 13.9478 3.9917 12.002C3.99152 11.7079 4.00913 11.414 4.04443 11.1221C4.06062 10.9915 4.05089 10.8591 4.01579 10.7323C3.98069 10.6055 3.92092 10.4869 3.83989 10.3832C3.75887 10.2796 3.65818 10.1929 3.54361 10.1282C3.42904 10.0636 3.30284 10.0222 3.17223 10.0064C3.04162 9.99055 2.90918 10.0007 2.78249 10.0362C2.65581 10.0716 2.53736 10.1318 2.43396 10.2131C2.33055 10.2944 2.24421 10.3954 2.17988 10.5101C2.11555 10.6249 2.0745 10.7512 2.05908 10.8819C2.01379 11.2535 1.99129 11.6276 1.9917 12.002C1.99306 14.3881 2.85066 16.6946 4.40857 18.502H2.9917C2.72649 18.502 2.47213 18.6073 2.2846 18.7949C2.09706 18.9824 1.9917 19.2367 1.9917 19.502C1.9917 19.7672 2.09706 20.0215 2.2846 20.2091C2.47213 20.3966 2.72649 20.502 2.9917 20.502H6.9917C7.1481 20.5 7.30177 20.4607 7.4399 20.3873C7.57804 20.314 7.69664 20.2086 7.78583 20.0802C7.79749 20.0648 7.81238 20.0534 7.82324 20.0372C7.8299 20.0272 7.83008 20.0154 7.8363 20.0053C7.88396 19.9248 7.91967 19.8378 7.9423 19.747C7.95711 19.696 7.96762 19.6439 7.97373 19.5911C7.9766 19.5602 7.99173 19.5336 7.99173 19.502V15.502C7.99177 15.3707 7.96593 15.2406 7.91569 15.1193C7.86545 14.9979 7.79179 14.8877 7.69892 14.7948C7.60605 14.7019 7.49579 14.6283 7.37444 14.578C7.2531 14.5278 7.12304 14.5019 6.9917 14.502ZM8.4917 6.00197H6.70923C8.16704 4.71307 10.0458 4.00174 11.9917 4.00197C12.2856 4.00126 12.5793 4.01887 12.8711 4.05471C13.0015 4.07054 13.1338 4.06054 13.2603 4.02526C13.3869 3.98998 13.5053 3.93012 13.6087 3.8491C13.7121 3.76807 13.7986 3.66747 13.8631 3.55303C13.9277 3.4386 13.969 3.31257 13.9849 3.18215C14.0007 3.05172 13.9907 2.91946 13.9554 2.7929C13.9201 2.66634 13.8603 2.54797 13.7793 2.44455C13.6982 2.34112 13.5976 2.25467 13.4832 2.19013C13.3688 2.12559 13.2427 2.08421 13.1123 2.06838C12.7405 2.02352 12.3662 2.00134 11.9917 2.00197C9.60557 2.00326 7.29912 2.8608 5.49171 4.41866V3.00197C5.49171 2.73675 5.38635 2.4824 5.19881 2.29486C5.01128 2.10732 4.75692 2.00197 4.49171 2.00197C4.22649 2.00197 3.97213 2.10732 3.7846 2.29486C3.59706 2.4824 3.4917 2.73675 3.4917 3.00197V7.00197C3.49799 7.06806 3.51117 7.13332 3.53101 7.19668L3.53125 7.1979C3.55554 7.32095 3.60348 7.43812 3.67242 7.5429L3.68384 7.5598C3.74992 7.6559 3.83274 7.73934 3.92834 7.80614C3.93927 7.81414 3.9447 7.8264 3.95605 7.83403C3.97034 7.84349 3.98652 7.84649 4.00111 7.85515C4.05782 7.88926 4.11791 7.91741 4.18042 7.93915C4.26491 7.96854 4.35299 7.98632 4.44226 7.992C4.45959 7.99292 4.47419 8.002 4.49171 8.002H8.4917C8.75692 8.002 9.01128 7.89664 9.19881 7.7091C9.38635 7.52157 9.4917 7.26721 9.4917 7.002C9.4917 6.73678 9.38635 6.48243 9.19881 6.29489C9.01128 6.10735 8.75692 6.002 8.4917 6.002V6.00197ZM20.4522 16.8061C20.4279 16.683 20.3799 16.5657 20.3109 16.461L20.2996 16.4442C20.2335 16.348 20.1506 16.2645 20.0549 16.1977C20.044 16.1898 20.0386 16.1775 20.0273 16.1699C20.0165 16.1627 20.0037 16.1625 19.9927 16.1558C19.8659 16.0853 19.7269 16.0393 19.583 16.0204C19.5514 16.0174 19.5241 16.0019 19.4917 16.0019H15.4917C15.2265 16.0019 14.9721 16.1073 14.7846 16.2948C14.5971 16.4823 14.4917 16.7367 14.4917 17.0019C14.4917 17.2671 14.5971 17.5215 14.7846 17.709C14.9721 17.8966 15.2265 18.0019 15.4917 18.0019H17.2741C15.8163 19.2908 13.9376 20.0022 11.9917 20.0019C11.6977 20.0023 11.404 19.9844 11.1123 19.9482C10.8489 19.9162 10.5836 19.9902 10.3747 20.1538C10.1658 20.3175 10.0305 20.5574 9.99854 20.8208C9.96655 21.0842 10.0405 21.3495 10.2041 21.5584C10.3678 21.7672 10.6077 21.9025 10.8711 21.9345C11.2429 21.9794 11.6172 22.0019 11.9917 22.0019C14.3778 22.0006 16.6843 21.1431 18.4917 19.5852V21.002C18.4917 21.2672 18.5971 21.5215 18.7846 21.7091C18.9721 21.8966 19.2265 22.002 19.4917 22.002C19.7569 22.002 20.0113 21.8966 20.1988 21.7091C20.3863 21.5215 20.4917 21.2672 20.4917 21.002V17.002C20.4854 16.9359 20.4722 16.8706 20.4524 16.8073L20.4522 16.8061ZM20.9917 5.50197C21.2569 5.50197 21.5113 5.39661 21.6988 5.20907C21.8863 5.02154 21.9917 4.76718 21.9917 4.50197C21.9917 4.23675 21.8863 3.9824 21.6988 3.79486C21.5113 3.60732 21.2569 3.50197 20.9917 3.50197H16.9917C16.9266 3.50824 16.8623 3.52121 16.7999 3.54067L16.7932 3.54201C16.6718 3.5663 16.5561 3.61367 16.4525 3.68154L16.4329 3.69478C16.3373 3.76075 16.2542 3.84331 16.1876 3.93856C16.1798 3.94936 16.1676 3.95467 16.1602 3.96584C16.153 3.97658 16.1528 3.98928 16.1461 4.0002C16.0747 4.12779 16.0284 4.26786 16.0097 4.41286C16.0068 4.44375 15.9917 4.47036 15.9917 4.50197V8.50197C15.9917 8.76718 16.0971 9.02154 16.2846 9.20907C16.4721 9.39661 16.7265 9.50197 16.9917 9.50197C17.2569 9.50197 17.5113 9.39661 17.6988 9.20907C17.8863 9.02154 17.9917 8.76718 17.9917 8.50197V6.71909C19.2806 8.17706 19.9919 10.0559 19.9917 12.0019C19.9919 12.296 19.9743 12.5898 19.939 12.8818C19.9073 13.145 19.9813 13.4101 20.1448 13.6188C20.3083 13.8275 20.5479 13.9628 20.811 13.9951C20.8516 13.9998 20.8923 14.0021 20.9331 14.0019C21.1773 14.0016 21.4129 13.9119 21.5955 13.7498C21.7781 13.5878 21.8951 13.3644 21.9243 13.122C21.9696 12.7504 21.9921 12.3763 21.9917 12.002C21.9903 9.61578 21.1327 7.30933 19.5747 5.50197H20.9917Z"
47
47
  />
48
48
  </svg>
49
49
  </div>
@@ -112,7 +112,7 @@ exports[`<Button /> primary + loading - should match snapshot 1`] = `
112
112
  xmlns="http://www.w3.org/2000/svg"
113
113
  >
114
114
  <path
115
- d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z"
115
+ d="M6.9917 14.502C6.86037 14.5019 6.73032 14.5278 6.60898 14.578C6.48764 14.6283 6.37739 14.7019 6.28452 14.7948C6.19166 14.8876 6.118 14.9979 6.06776 15.1192C6.01751 15.2406 5.99167 15.3706 5.9917 15.502V17.2843C4.70275 15.8266 3.99141 13.9478 3.9917 12.002C3.99152 11.7079 4.00913 11.414 4.04443 11.1221C4.06062 10.9915 4.05089 10.8591 4.01579 10.7323C3.98069 10.6055 3.92092 10.4869 3.83989 10.3832C3.75887 10.2796 3.65818 10.1929 3.54361 10.1282C3.42904 10.0636 3.30284 10.0222 3.17223 10.0064C3.04162 9.99055 2.90918 10.0007 2.78249 10.0362C2.65581 10.0716 2.53736 10.1318 2.43396 10.2131C2.33055 10.2944 2.24421 10.3954 2.17988 10.5101C2.11555 10.6249 2.0745 10.7512 2.05908 10.8819C2.01379 11.2535 1.99129 11.6276 1.9917 12.002C1.99306 14.3881 2.85066 16.6946 4.40857 18.502H2.9917C2.72649 18.502 2.47213 18.6073 2.2846 18.7949C2.09706 18.9824 1.9917 19.2367 1.9917 19.502C1.9917 19.7672 2.09706 20.0215 2.2846 20.2091C2.47213 20.3966 2.72649 20.502 2.9917 20.502H6.9917C7.1481 20.5 7.30177 20.4607 7.4399 20.3873C7.57804 20.314 7.69664 20.2086 7.78583 20.0802C7.79749 20.0648 7.81238 20.0534 7.82324 20.0372C7.8299 20.0272 7.83008 20.0154 7.8363 20.0053C7.88396 19.9248 7.91967 19.8378 7.9423 19.747C7.95711 19.696 7.96762 19.6439 7.97373 19.5911C7.9766 19.5602 7.99173 19.5336 7.99173 19.502V15.502C7.99177 15.3707 7.96593 15.2406 7.91569 15.1193C7.86545 14.9979 7.79179 14.8877 7.69892 14.7948C7.60605 14.7019 7.49579 14.6283 7.37444 14.578C7.2531 14.5278 7.12304 14.5019 6.9917 14.502ZM8.4917 6.00197H6.70923C8.16704 4.71307 10.0458 4.00174 11.9917 4.00197C12.2856 4.00126 12.5793 4.01887 12.8711 4.05471C13.0015 4.07054 13.1338 4.06054 13.2603 4.02526C13.3869 3.98998 13.5053 3.93012 13.6087 3.8491C13.7121 3.76807 13.7986 3.66747 13.8631 3.55303C13.9277 3.4386 13.969 3.31257 13.9849 3.18215C14.0007 3.05172 13.9907 2.91946 13.9554 2.7929C13.9201 2.66634 13.8603 2.54797 13.7793 2.44455C13.6982 2.34112 13.5976 2.25467 13.4832 2.19013C13.3688 2.12559 13.2427 2.08421 13.1123 2.06838C12.7405 2.02352 12.3662 2.00134 11.9917 2.00197C9.60557 2.00326 7.29912 2.8608 5.49171 4.41866V3.00197C5.49171 2.73675 5.38635 2.4824 5.19881 2.29486C5.01128 2.10732 4.75692 2.00197 4.49171 2.00197C4.22649 2.00197 3.97213 2.10732 3.7846 2.29486C3.59706 2.4824 3.4917 2.73675 3.4917 3.00197V7.00197C3.49799 7.06806 3.51117 7.13332 3.53101 7.19668L3.53125 7.1979C3.55554 7.32095 3.60348 7.43812 3.67242 7.5429L3.68384 7.5598C3.74992 7.6559 3.83274 7.73934 3.92834 7.80614C3.93927 7.81414 3.9447 7.8264 3.95605 7.83403C3.97034 7.84349 3.98652 7.84649 4.00111 7.85515C4.05782 7.88926 4.11791 7.91741 4.18042 7.93915C4.26491 7.96854 4.35299 7.98632 4.44226 7.992C4.45959 7.99292 4.47419 8.002 4.49171 8.002H8.4917C8.75692 8.002 9.01128 7.89664 9.19881 7.7091C9.38635 7.52157 9.4917 7.26721 9.4917 7.002C9.4917 6.73678 9.38635 6.48243 9.19881 6.29489C9.01128 6.10735 8.75692 6.002 8.4917 6.002V6.00197ZM20.4522 16.8061C20.4279 16.683 20.3799 16.5657 20.3109 16.461L20.2996 16.4442C20.2335 16.348 20.1506 16.2645 20.0549 16.1977C20.044 16.1898 20.0386 16.1775 20.0273 16.1699C20.0165 16.1627 20.0037 16.1625 19.9927 16.1558C19.8659 16.0853 19.7269 16.0393 19.583 16.0204C19.5514 16.0174 19.5241 16.0019 19.4917 16.0019H15.4917C15.2265 16.0019 14.9721 16.1073 14.7846 16.2948C14.5971 16.4823 14.4917 16.7367 14.4917 17.0019C14.4917 17.2671 14.5971 17.5215 14.7846 17.709C14.9721 17.8966 15.2265 18.0019 15.4917 18.0019H17.2741C15.8163 19.2908 13.9376 20.0022 11.9917 20.0019C11.6977 20.0023 11.404 19.9844 11.1123 19.9482C10.8489 19.9162 10.5836 19.9902 10.3747 20.1538C10.1658 20.3175 10.0305 20.5574 9.99854 20.8208C9.96655 21.0842 10.0405 21.3495 10.2041 21.5584C10.3678 21.7672 10.6077 21.9025 10.8711 21.9345C11.2429 21.9794 11.6172 22.0019 11.9917 22.0019C14.3778 22.0006 16.6843 21.1431 18.4917 19.5852V21.002C18.4917 21.2672 18.5971 21.5215 18.7846 21.7091C18.9721 21.8966 19.2265 22.002 19.4917 22.002C19.7569 22.002 20.0113 21.8966 20.1988 21.7091C20.3863 21.5215 20.4917 21.2672 20.4917 21.002V17.002C20.4854 16.9359 20.4722 16.8706 20.4524 16.8073L20.4522 16.8061ZM20.9917 5.50197C21.2569 5.50197 21.5113 5.39661 21.6988 5.20907C21.8863 5.02154 21.9917 4.76718 21.9917 4.50197C21.9917 4.23675 21.8863 3.9824 21.6988 3.79486C21.5113 3.60732 21.2569 3.50197 20.9917 3.50197H16.9917C16.9266 3.50824 16.8623 3.52121 16.7999 3.54067L16.7932 3.54201C16.6718 3.5663 16.5561 3.61367 16.4525 3.68154L16.4329 3.69478C16.3373 3.76075 16.2542 3.84331 16.1876 3.93856C16.1798 3.94936 16.1676 3.95467 16.1602 3.96584C16.153 3.97658 16.1528 3.98928 16.1461 4.0002C16.0747 4.12779 16.0284 4.26786 16.0097 4.41286C16.0068 4.44375 15.9917 4.47036 15.9917 4.50197V8.50197C15.9917 8.76718 16.0971 9.02154 16.2846 9.20907C16.4721 9.39661 16.7265 9.50197 16.9917 9.50197C17.2569 9.50197 17.5113 9.39661 17.6988 9.20907C17.8863 9.02154 17.9917 8.76718 17.9917 8.50197V6.71909C19.2806 8.17706 19.9919 10.0559 19.9917 12.0019C19.9919 12.296 19.9743 12.5898 19.939 12.8818C19.9073 13.145 19.9813 13.4101 20.1448 13.6188C20.3083 13.8275 20.5479 13.9628 20.811 13.9951C20.8516 13.9998 20.8923 14.0021 20.9331 14.0019C21.1773 14.0016 21.4129 13.9119 21.5955 13.7498C21.7781 13.5878 21.8951 13.3644 21.9243 13.122C21.9696 12.7504 21.9921 12.3763 21.9917 12.002C21.9903 9.61578 21.1327 7.30933 19.5747 5.50197H20.9917Z"
116
116
  />
117
117
  </svg>
118
118
  </div>
@@ -181,7 +181,7 @@ exports[`<Button /> secondary + loading - should match snapshot 1`] = `
181
181
  xmlns="http://www.w3.org/2000/svg"
182
182
  >
183
183
  <path
184
- d="M6.992 14.502a1 1 0 0 0-1 1v1.782a7.973 7.973 0 0 1-2-5.282c0-.294.017-.588.052-.88a1 1 0 1 0-1.985-.24 9.176 9.176 0 0 0-.067 1.12 9.965 9.965 0 0 0 2.417 6.5H2.992a1 1 0 1 0 0 2h4a.982.982 0 0 0 .794-.422c.011-.015.026-.027.037-.043.007-.01.007-.022.013-.032a.965.965 0 0 0 .106-.258.95.95 0 0 0 .032-.156c.003-.03.018-.057.018-.089v-4a1 1 0 0 0-1-1Zm1.5-8.5H6.709a7.974 7.974 0 0 1 5.283-2c.294 0 .587.017.88.053a1 1 0 0 0 .24-1.987 9.226 9.226 0 0 0-1.12-.066 9.964 9.964 0 0 0-6.5 2.417V3.002a1 1 0 0 0-2 0v4c.006.066.02.131.039.195a.97.97 0 0 0 .141.346l.012.017c.066.096.149.18.244.246.011.008.017.02.028.028.014.01.03.012.045.021a.96.96 0 0 0 .441.137c.018 0 .032.01.05.01h4a1 1 0 1 0 0-2Zm11.96 10.804a.968.968 0 0 0-.141-.345l-.011-.017a.972.972 0 0 0-.245-.246c-.011-.008-.016-.02-.028-.028-.01-.007-.023-.008-.034-.014a1.152 1.152 0 0 0-.41-.136c-.032-.003-.059-.018-.091-.018h-4a1 1 0 0 0 0 2h1.782a7.973 7.973 0 0 1-5.282 2c-.294 0-.588-.018-.88-.054a1 1 0 0 0-.24 1.986c.37.045.745.068 1.12.068a9.964 9.964 0 0 0 6.5-2.417v1.417a1 1 0 0 0 2 0v-4a.956.956 0 0 0-.04-.195Zm.54-11.304a1 1 0 1 0 0-2h-4a.95.95 0 0 0-.192.039l-.007.001a.969.969 0 0 0-.34.14l-.02.013a.975.975 0 0 0-.245.244c-.008.01-.02.016-.028.027-.007.01-.007.023-.014.034a1.145 1.145 0 0 0-.136.413c-.003.03-.018.057-.018.089v4a1 1 0 0 0 2 0V6.719a7.975 7.975 0 0 1 2 5.283c0 .294-.018.588-.053.88a1.001 1.001 0 0 0 1.985.24c.046-.372.068-.746.068-1.12a9.964 9.964 0 0 0-2.417-6.5h1.417Z"
184
+ d="M6.9917 14.502C6.86037 14.5019 6.73032 14.5278 6.60898 14.578C6.48764 14.6283 6.37739 14.7019 6.28452 14.7948C6.19166 14.8876 6.118 14.9979 6.06776 15.1192C6.01751 15.2406 5.99167 15.3706 5.9917 15.502V17.2843C4.70275 15.8266 3.99141 13.9478 3.9917 12.002C3.99152 11.7079 4.00913 11.414 4.04443 11.1221C4.06062 10.9915 4.05089 10.8591 4.01579 10.7323C3.98069 10.6055 3.92092 10.4869 3.83989 10.3832C3.75887 10.2796 3.65818 10.1929 3.54361 10.1282C3.42904 10.0636 3.30284 10.0222 3.17223 10.0064C3.04162 9.99055 2.90918 10.0007 2.78249 10.0362C2.65581 10.0716 2.53736 10.1318 2.43396 10.2131C2.33055 10.2944 2.24421 10.3954 2.17988 10.5101C2.11555 10.6249 2.0745 10.7512 2.05908 10.8819C2.01379 11.2535 1.99129 11.6276 1.9917 12.002C1.99306 14.3881 2.85066 16.6946 4.40857 18.502H2.9917C2.72649 18.502 2.47213 18.6073 2.2846 18.7949C2.09706 18.9824 1.9917 19.2367 1.9917 19.502C1.9917 19.7672 2.09706 20.0215 2.2846 20.2091C2.47213 20.3966 2.72649 20.502 2.9917 20.502H6.9917C7.1481 20.5 7.30177 20.4607 7.4399 20.3873C7.57804 20.314 7.69664 20.2086 7.78583 20.0802C7.79749 20.0648 7.81238 20.0534 7.82324 20.0372C7.8299 20.0272 7.83008 20.0154 7.8363 20.0053C7.88396 19.9248 7.91967 19.8378 7.9423 19.747C7.95711 19.696 7.96762 19.6439 7.97373 19.5911C7.9766 19.5602 7.99173 19.5336 7.99173 19.502V15.502C7.99177 15.3707 7.96593 15.2406 7.91569 15.1193C7.86545 14.9979 7.79179 14.8877 7.69892 14.7948C7.60605 14.7019 7.49579 14.6283 7.37444 14.578C7.2531 14.5278 7.12304 14.5019 6.9917 14.502ZM8.4917 6.00197H6.70923C8.16704 4.71307 10.0458 4.00174 11.9917 4.00197C12.2856 4.00126 12.5793 4.01887 12.8711 4.05471C13.0015 4.07054 13.1338 4.06054 13.2603 4.02526C13.3869 3.98998 13.5053 3.93012 13.6087 3.8491C13.7121 3.76807 13.7986 3.66747 13.8631 3.55303C13.9277 3.4386 13.969 3.31257 13.9849 3.18215C14.0007 3.05172 13.9907 2.91946 13.9554 2.7929C13.9201 2.66634 13.8603 2.54797 13.7793 2.44455C13.6982 2.34112 13.5976 2.25467 13.4832 2.19013C13.3688 2.12559 13.2427 2.08421 13.1123 2.06838C12.7405 2.02352 12.3662 2.00134 11.9917 2.00197C9.60557 2.00326 7.29912 2.8608 5.49171 4.41866V3.00197C5.49171 2.73675 5.38635 2.4824 5.19881 2.29486C5.01128 2.10732 4.75692 2.00197 4.49171 2.00197C4.22649 2.00197 3.97213 2.10732 3.7846 2.29486C3.59706 2.4824 3.4917 2.73675 3.4917 3.00197V7.00197C3.49799 7.06806 3.51117 7.13332 3.53101 7.19668L3.53125 7.1979C3.55554 7.32095 3.60348 7.43812 3.67242 7.5429L3.68384 7.5598C3.74992 7.6559 3.83274 7.73934 3.92834 7.80614C3.93927 7.81414 3.9447 7.8264 3.95605 7.83403C3.97034 7.84349 3.98652 7.84649 4.00111 7.85515C4.05782 7.88926 4.11791 7.91741 4.18042 7.93915C4.26491 7.96854 4.35299 7.98632 4.44226 7.992C4.45959 7.99292 4.47419 8.002 4.49171 8.002H8.4917C8.75692 8.002 9.01128 7.89664 9.19881 7.7091C9.38635 7.52157 9.4917 7.26721 9.4917 7.002C9.4917 6.73678 9.38635 6.48243 9.19881 6.29489C9.01128 6.10735 8.75692 6.002 8.4917 6.002V6.00197ZM20.4522 16.8061C20.4279 16.683 20.3799 16.5657 20.3109 16.461L20.2996 16.4442C20.2335 16.348 20.1506 16.2645 20.0549 16.1977C20.044 16.1898 20.0386 16.1775 20.0273 16.1699C20.0165 16.1627 20.0037 16.1625 19.9927 16.1558C19.8659 16.0853 19.7269 16.0393 19.583 16.0204C19.5514 16.0174 19.5241 16.0019 19.4917 16.0019H15.4917C15.2265 16.0019 14.9721 16.1073 14.7846 16.2948C14.5971 16.4823 14.4917 16.7367 14.4917 17.0019C14.4917 17.2671 14.5971 17.5215 14.7846 17.709C14.9721 17.8966 15.2265 18.0019 15.4917 18.0019H17.2741C15.8163 19.2908 13.9376 20.0022 11.9917 20.0019C11.6977 20.0023 11.404 19.9844 11.1123 19.9482C10.8489 19.9162 10.5836 19.9902 10.3747 20.1538C10.1658 20.3175 10.0305 20.5574 9.99854 20.8208C9.96655 21.0842 10.0405 21.3495 10.2041 21.5584C10.3678 21.7672 10.6077 21.9025 10.8711 21.9345C11.2429 21.9794 11.6172 22.0019 11.9917 22.0019C14.3778 22.0006 16.6843 21.1431 18.4917 19.5852V21.002C18.4917 21.2672 18.5971 21.5215 18.7846 21.7091C18.9721 21.8966 19.2265 22.002 19.4917 22.002C19.7569 22.002 20.0113 21.8966 20.1988 21.7091C20.3863 21.5215 20.4917 21.2672 20.4917 21.002V17.002C20.4854 16.9359 20.4722 16.8706 20.4524 16.8073L20.4522 16.8061ZM20.9917 5.50197C21.2569 5.50197 21.5113 5.39661 21.6988 5.20907C21.8863 5.02154 21.9917 4.76718 21.9917 4.50197C21.9917 4.23675 21.8863 3.9824 21.6988 3.79486C21.5113 3.60732 21.2569 3.50197 20.9917 3.50197H16.9917C16.9266 3.50824 16.8623 3.52121 16.7999 3.54067L16.7932 3.54201C16.6718 3.5663 16.5561 3.61367 16.4525 3.68154L16.4329 3.69478C16.3373 3.76075 16.2542 3.84331 16.1876 3.93856C16.1798 3.94936 16.1676 3.95467 16.1602 3.96584C16.153 3.97658 16.1528 3.98928 16.1461 4.0002C16.0747 4.12779 16.0284 4.26786 16.0097 4.41286C16.0068 4.44375 15.9917 4.47036 15.9917 4.50197V8.50197C15.9917 8.76718 16.0971 9.02154 16.2846 9.20907C16.4721 9.39661 16.7265 9.50197 16.9917 9.50197C17.2569 9.50197 17.5113 9.39661 17.6988 9.20907C17.8863 9.02154 17.9917 8.76718 17.9917 8.50197V6.71909C19.2806 8.17706 19.9919 10.0559 19.9917 12.0019C19.9919 12.296 19.9743 12.5898 19.939 12.8818C19.9073 13.145 19.9813 13.4101 20.1448 13.6188C20.3083 13.8275 20.5479 13.9628 20.811 13.9951C20.8516 13.9998 20.8923 14.0021 20.9331 14.0019C21.1773 14.0016 21.4129 13.9119 21.5955 13.7498C21.7781 13.5878 21.8951 13.3644 21.9243 13.122C21.9696 12.7504 21.9921 12.3763 21.9917 12.002C21.9903 9.61578 21.1327 7.30933 19.5747 5.50197H20.9917Z"
185
185
  />
186
186
  </svg>
187
187
  </div>
package/src/components/molecules/Profile/__snapshots__/Profile.test.tsx.snap ADDED
@@ -0,0 +1,26 @@
1
+ // Jest Snapshot v1, https://goo.gl/fbAQLP
2
+
3
+ exports[`<Profile /> profile should match snapshot 1`] = `
4
+ <div>
5
+ <div
6
+ class="sc-dJjYzT bsksSc"
7
+ >
8
+ <img
9
+ alt="Jane Doe"
10
+ class="sc-jRQBWg hjrVkd"
11
+ height="32"
12
+ src="https://img.freepik.com/darmowe-zdjecie/dosc-usmiechnieta-radosnie-kobieta-o-jasnych-wlosach-ubrana-swobodnie-wygladajaca-z-zadowoleniem_176420-15187.jpg?w=1380&t=st=1660198496~exp=1660199096~hmac=7401572065d2cd7bb67d9f43dbde5c116b90aad419b179fffac1196df24869f2"
13
+ width="32"
14
+ />
15
+ <div
16
+ class="sc-dlVxhl ctocLT"
17
+ >
18
+ <span
19
+ class="sc-hGPBjI kWwFIh"
20
+ >
21
+ Jane Doe
22
+ </span>
23
+ </div>
24
+ </div>
25
+ </div>
26
+ `;
package/src/components/molecules/TextArea/TextArea.tsx CHANGED
@@ -2,17 +2,19 @@ import React from 'react';
2
2
  import styled from 'styled-components';
3
3
  import { getValidationTypeProps } from '../../../helpers/validation';
4
4
  import { ValidationType } from '../../../types/validation';
5
+ import { fieldSizeVariants } from '../../atoms/Field';
5
6
 
6
7
  export interface TextAreaProps
7
8
  extends React.TextareaHTMLAttributes<HTMLTextAreaElement> {
8
9
  validationType?: ValidationType;
10
+ size?: "xl" | "l" | "m" | "s";
9
11
  }
10
12
 
11
13
  export const TextArea: React.FC<TextAreaProps> = (props) => {
12
14
  return <TextAreaElement rows={4} {...props} />;
13
15
  };
14
16
 
15
- const TextAreaElement = styled.textarea<Pick<TextAreaProps, 'validationType'>>`
17
+ const TextAreaElement = styled.textarea<Pick<TextAreaProps, 'validationType' | 'size'>>`
16
18
  background-color: var(--color-white);
17
19
  border: 2px solid var(--shades-of-grey-80);
18
20
  border-radius: var(--padding-s);
@@ -21,6 +23,8 @@ const TextAreaElement = styled.textarea<Pick<TextAreaProps, 'validationType'>>`
21
23
  overflow: hidden;
22
24
  color: var(--shades-of-grey-100);
23
25
  font-weight: var(--font-bold);
26
+ font-size: ${(p) => fieldSizeVariants[p.size || 'm'].font};
27
+ padding: ${(p) => fieldSizeVariants[p.size || 'm'].padding};
24
28
  transition: border var(--transition-speed),
25
29
  background-color var(--transition-speed);
26
30
  width: 100%;
package/src/components/organisms/Modal/Modal.stories.tsx CHANGED
@@ -16,7 +16,7 @@ export default {
16
16
  const Template: ComponentStory<typeof Modal> = (args) => (
17
17
  <>
18
18
  Some other content
19
- <Modal show={args.show} onClose={() => null}>
19
+ <Modal {...args}>
20
20
  hey
21
21
  <Modal.Divider />
22
22
  hey hey
@@ -26,3 +26,16 @@ const Template: ComponentStory<typeof Modal> = (args) => (
26
26
 
27
27
  export const Basic = Template.bind({});
28
28
  Basic.args = {};
29
+
30
+ export const WithSuffix = Template.bind({});
31
+ WithSuffix.args = {
32
+ suffix: (
33
+ <div>
34
+ This is a suffix
35
+ <p>a</p>
36
+ <p>b</p>
37
+ <p>c</p>
38
+ <p>d</p>
39
+ </div>
40
+ )
41
+ };
package/src/components/organisms/Modal/Modal.tsx CHANGED
@@ -9,25 +9,33 @@ export interface ModalStaticProps {
9
9
 
10
10
  export interface ModalProps {
11
11
  show: boolean;
12
+ suffix?: React.ReactNode;
12
13
  onClose: () => void;
13
14
  }
14
15
 
15
16
  export const Modal: React.FCS<PropsWithChildren<ModalProps>> &
16
- ModalStaticProps = ({ className, children, show, onClose }) => {
17
+ ModalStaticProps = ({ className, children, show, suffix, onClose }) => {
17
18
  if (!show) {
18
19
  return null;
19
20
  }
20
21
 
22
+ console.log(suffix);
23
+
21
24
  return (
22
25
  <Root>
23
- <ModalCard size="s" flat className={className}>
24
- <CloseModal>
25
- <CloseIcon onClick={onClose}>
26
- <Icon type="close" />
27
- </CloseIcon>
28
- </CloseModal>
29
- {children}
30
- </ModalCard>
26
+ <PageCenter>
27
+ <Content>
28
+ <ModalCard size="s" flat className={className}>
29
+ <CloseModal>
30
+ <CloseIcon onClick={onClose}>
31
+ <Icon type="close" />
32
+ </CloseIcon>
33
+ </CloseModal>
34
+ {children}
35
+ </ModalCard>
36
+ <Suffix>{suffix}</Suffix>
37
+ </Content>
38
+ </PageCenter>
31
39
  </Root>
32
40
  );
33
41
  };
@@ -39,7 +47,7 @@ const Root = styled.div`
39
47
  left: 0;
40
48
  top: 0;
41
49
  width: 100%;
42
- height: 100%;
50
+ min-height: 100%;
43
51
  z-index: 100;
44
52
 
45
53
  &::after {
@@ -54,15 +62,27 @@ const Root = styled.div`
54
62
  }
55
63
  `;
56
64
 
57
- const ModalCard = styled(Card)`
58
- padding: var(--padding-s);
65
+ const PageCenter = styled.div`
59
66
  position: fixed;
60
- left: 50%;
61
- top: 50%;
62
- max-width: 320px;
63
- width: calc(100vw - 2 * var(--padding-m));
64
- transform: translate(-50%, -50%);
67
+ height: 100%;
68
+ width: 100%;
69
+ display: flex;
70
+ align-items: center;
71
+ justify-content: center;
65
72
  z-index: 101;
73
+ overflow-y: auto;
74
+ padding: var(--padding-m);
75
+ `;
76
+
77
+ const Content = styled.div`
78
+ height: auto;
79
+ width: calc(100vw - 2 * var(--padding-m));
80
+ max-width: 320px;
81
+ margin: auto;
82
+ `;
83
+
84
+ const ModalCard = styled(Card)`
85
+ padding: var(--padding-s);
66
86
  `;
67
87
 
68
88
  const CloseModal = styled.div`
@@ -85,3 +105,7 @@ const CloseIcon = styled.button`
85
105
  }
86
106
  }
87
107
  `;
108
+
109
+ const Suffix = styled.div`
110
+ padding: var(--padding-m) 0;
111
+ `;
package/src/components/organisms/Table/Table.stories.tsx CHANGED
@@ -4,7 +4,7 @@ import { ComponentMeta, ComponentStory } from '@storybook/react';
4
4
 
5
5
  import {
6
6
  Column,
7
- createColumnHelper,
7
+ createColumnHelper, Row,
8
8
  } from '@tanstack/react-table';
9
9
  import { Button, Profile } from '../../molecules';
10
10
 
@@ -49,7 +49,7 @@ export const Primary: ComponentStory<typeof Table> = (args) => {
49
49
  progress: number
50
50
  };
51
51
 
52
- const personData: Person[] = [
52
+ const data: Person[] = [
53
53
  {
54
54
  firstName: 'tanner',
55
55
  lastName: 'linsley',
@@ -76,52 +76,52 @@ export const Primary: ComponentStory<typeof Table> = (args) => {
76
76
  },
77
77
  ];
78
78
 
79
- const personColumnHelper = createColumnHelper<Person>();
79
+ const columnHelper = createColumnHelper<Person>();
80
80
 
81
81
  const personColumns = [
82
- personColumnHelper.accessor('firstName', {
82
+ columnHelper.accessor('firstName', {
83
83
  cell: info => info.getValue(),
84
84
  footer: info => info.column.id,
85
85
  }),
86
- personColumnHelper.accessor(row => row.lastName, {
86
+ columnHelper.accessor(row => row.lastName, {
87
87
  id: 'lastName',
88
88
  cell: info => info.getValue(),
89
89
  header: () => 'Last Name',
90
90
  footer: info => info.column.id,
91
91
  }),
92
- personColumnHelper.accessor('age', {
92
+ columnHelper.accessor('age', {
93
93
  header: () => 'Age',
94
94
  cell: info => info.renderValue(),
95
95
  footer: info => info.column.id,
96
96
  }),
97
- personColumnHelper.accessor('visits', {
97
+ columnHelper.accessor('visits', {
98
98
  header: () => 'Visits',
99
99
  footer: info => info.column.id,
100
100
  }),
101
- personColumnHelper.accessor('status', {
101
+ columnHelper.accessor('status', {
102
102
  header: 'Status',
103
103
  footer: info => info.column.id,
104
104
  }),
105
- personColumnHelper.accessor('progress', {
105
+ columnHelper.accessor('progress', {
106
106
  header: 'Profile Progress',
107
107
  footer: info => info.column.id,
108
108
  }),
109
109
  ] as Column<Person>[];
110
110
 
111
111
  return (
112
- <Table columns={personColumns} data={personData} variant={args.variant} textAlign={args.textAlign}/>
112
+ <Table columns={personColumns} data={data} variant={args.variant} textAlign={args.textAlign}/>
113
113
  );
114
114
  };
115
115
 
116
116
  export const WithProfile: ComponentStory<typeof Table> = (args) => {
117
- type DataType = {
117
+ type Profile = {
118
118
  fullName: string;
119
119
  points: number;
120
120
  avatar: string;
121
121
  email: string;
122
122
  };
123
123
 
124
- const data: DataType[] = [
124
+ const data: Profile[] = [
125
125
  {
126
126
  fullName: 'Tanner Linsley',
127
127
  points: 24,
@@ -142,10 +142,10 @@ export const WithProfile: ComponentStory<typeof Table> = (args) => {
142
142
  },
143
143
  ];
144
144
 
145
- const profileColumnHelper = createColumnHelper<DataType>();
145
+ const columnHelper = createColumnHelper<Profile>();
146
146
 
147
147
  const columns = [
148
- profileColumnHelper.accessor('fullName', {
148
+ columnHelper.accessor('fullName', {
149
149
  cell: info => {
150
150
  return (
151
151
  <div style={{ display: 'flex', alignItems: 'center' }}>
@@ -162,19 +162,109 @@ export const WithProfile: ComponentStory<typeof Table> = (args) => {
162
162
  header: () => 'Team member',
163
163
  footer: info => info.column.id,
164
164
  }),
165
- profileColumnHelper.accessor('points', {
165
+ columnHelper.accessor('points', {
166
166
  header: () => 'Points',
167
167
  cell: info => info.renderValue(),
168
168
  footer: info => info.column.id,
169
169
  }),
170
- profileColumnHelper.display({
170
+ columnHelper.display({
171
171
  header: 'Actions',
172
172
  id: 'Actions',
173
173
  cell: () => <div style={{ width: '30px' }}><Button direction={'ltr'} icon={'edit'} ghost>Edit</Button></div>,
174
174
  }),
175
- ] as Column<DataType>[];
175
+ ] as Column<Profile>[];
176
176
 
177
177
  return (
178
- <Table columns={columns} data={data} variant={args.variant} width={'100%'} textAlign={"left"}/>
178
+ <Table columns={columns} data={data} variant={args.variant} width={'100%'} textAlign={'left'}/>
179
179
  );
180
+ };
181
+
182
+ export const ExpandableRows: ComponentStory<typeof Table> = (args) => {
183
+ type Person = {
184
+ firstName: string
185
+ lastName: string
186
+ age: number
187
+ visits: number
188
+ status: string
189
+ progress: number
190
+ };
191
+
192
+ const data: Person[] = [
193
+ {
194
+ firstName: 'tanner',
195
+ lastName: 'linsley',
196
+ age: 24,
197
+ visits: 100,
198
+ status: 'In Relationship',
199
+ progress: 50,
200
+ },
201
+ {
202
+ firstName: 'tandy',
203
+ lastName: 'miller',
204
+ age: 40,
205
+ visits: 40,
206
+ status: 'Single',
207
+ progress: 80,
208
+ },
209
+ {
210
+ firstName: 'joe',
211
+ lastName: 'dirte',
212
+ age: 45,
213
+ visits: 20,
214
+ status: 'Complicated',
215
+ progress: 10,
216
+ },
217
+ ];
218
+
219
+ const columnHelper = createColumnHelper<Person>();
220
+
221
+ const personColumns = [
222
+ columnHelper.accessor('firstName', {
223
+ header: 'First Name',
224
+ cell: info => info.getValue(),
225
+ footer: info => info.column.id,
226
+ }),
227
+ columnHelper.accessor(row => row.lastName, {
228
+ id: 'lastName',
229
+ cell: info => info.getValue(),
230
+ header: () => 'Last Name',
231
+ footer: info => info.column.id,
232
+ }),
233
+ columnHelper.accessor('age', {
234
+ header: () => 'Age',
235
+ cell: info => info.renderValue(),
236
+ footer: info => info.column.id,
237
+ }),
238
+ columnHelper.accessor('visits', {
239
+ header: () => 'Visits',
240
+ footer: info => info.column.id,
241
+ }),
242
+ columnHelper.accessor('status', {
243
+ header: 'Status',
244
+ footer: info => info.column.id,
245
+ }),
246
+ columnHelper.accessor('progress', {
247
+ header: 'Profile Progress',
248
+ footer: info => info.column.id,
249
+ }),
250
+ ] as Column<Person>[];
251
+
252
+ return (
253
+ <Table
254
+ columns={personColumns}
255
+ data={data}
256
+ variant={args.variant}
257
+ textAlign={args.textAlign}
258
+ renderExpandCollapseComponent={(row: Row<Person>) => (
259
+ <div
260
+ style={{ cursor: 'pointer' }}
261
+ onClick={() => row.toggleExpanded()}>
262
+ Edit
263
+ </div>
264
+ )}
265
+ renderExpandableRowComponent={(row: Row<Person>) => (
266
+ <div>Hello {row.original.firstName} {row.original.lastName}</div>
267
+ )}
268
+ />
269
+ );
180
270
  };