@grantbii/design-system 1.28.0 → 1.28.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/core/archive/RadioButtons.js +1 -1
- package/core/archive/RadioButtons.js.map +1 -1
- package/core/atoms/Color.d.ts +7 -41
- package/core/atoms/Color.js +0 -6
- package/core/atoms/Color.js.map +1 -1
- package/core/atoms/Typography.js +0 -4
- package/core/atoms/Typography.js.map +1 -1
- package/core/organisms/Modal.js +1 -1
- package/core/organisms/Modal.js.map +1 -1
- package/package.json +4 -4
- package/stories/organisms/Modal.stories.js +7 -5
- package/stories/organisms/Modal.stories.js.map +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
|
|
|
2
2
|
import { createElement as _createElement } from "react";
|
|
3
3
|
import styled from "styled-components";
|
|
4
4
|
import { RadioButton } from "../molecules";
|
|
5
|
-
const RadioButtons = ({ name, options }) => (_jsx(RadioGroup, { children: options.map(({
|
|
5
|
+
const RadioButtons = ({ name, options }) => (_jsx(RadioGroup, { children: options.map(({ value, ...props }) => (_createElement(RadioButton, { ...props, key: `${name}-${value}`, value: value, name: name }))) }));
|
|
6
6
|
export default RadioButtons;
|
|
7
7
|
const RadioGroup = styled.div `
|
|
8
8
|
display: flex;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAW3C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,
|
|
1
|
+
{"version":3,"file":"RadioButtons.js","sourceRoot":"","sources":["../../../core/archive/RadioButtons.tsx"],"names":[],"mappings":";;AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAW3C,MAAM,YAAY,GAAG,CAAC,EAAE,IAAI,EAAE,OAAO,EAAoB,EAAE,EAAE,CAAC,CAC5D,KAAC,UAAU,cACR,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,KAAK,EAAE,EAAE,EAAE,CAAC,CACpC,eAAC,WAAW,OACN,KAAK,EACT,GAAG,EAAE,GAAG,IAAI,IAAI,KAAK,EAAE,EACvB,KAAK,EAAE,KAAK,EACZ,IAAI,EAAE,IAAI,GACV,CACH,CAAC,GACS,CACd,CAAC;AAEF,eAAe,YAAY,CAAC;AAE5B,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAAA;;;;;;;CAO5B,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { RadioButton } from \"../molecules\";\nimport type { Option } from \"../types\";\n\nexport type RadioOption = Option &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\ntype RadioButtonProps = {\n name?: string;\n options: RadioOption[];\n};\n\nconst RadioButtons = ({ name, options }: RadioButtonProps) => (\n <RadioGroup>\n {options.map(({ value, ...props }) => (\n <RadioButton\n {...props}\n key={`${name}-${value}`}\n value={value}\n name={name}\n />\n ))}\n </RadioGroup>\n);\n\nexport default RadioButtons;\n\nconst RadioGroup = styled.div`\n display: flex;\n align-items: center;\n gap: 12px;\n\n white-space: nowrap;\n flex-wrap: wrap;\n`;\n"]}
|
package/core/atoms/Color.d.ts
CHANGED
|
@@ -36,49 +36,15 @@ export declare const accent: {
|
|
|
36
36
|
readonly blue3: "#ECF5FF";
|
|
37
37
|
readonly blue4: "#F5F9FF";
|
|
38
38
|
};
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
readonly black: "#232022";
|
|
46
|
-
readonly grey1: "#999999";
|
|
47
|
-
readonly grey2: "#CCCCCC";
|
|
48
|
-
readonly grey3: "#EEEEEE";
|
|
49
|
-
readonly grey4: "#FAFAFA";
|
|
50
|
-
readonly white: "#FFFFFF";
|
|
51
|
-
};
|
|
52
|
-
readonly typography: {
|
|
53
|
-
readonly blackHigh: "#1A1A1A";
|
|
54
|
-
readonly blackMedium: "#666666";
|
|
55
|
-
readonly blackLow: "#B2B2B2";
|
|
56
|
-
readonly whiteHigh: "#FFFFFF";
|
|
57
|
-
readonly whiteMedium: "#F5F5F5";
|
|
58
|
-
readonly whiteLow: "#E5E5E5";
|
|
59
|
-
};
|
|
60
|
-
readonly accent: {
|
|
61
|
-
readonly red1: "#C02318";
|
|
62
|
-
readonly red2: "#F88E86";
|
|
63
|
-
readonly red3: "#FFE9E7";
|
|
64
|
-
readonly red4: "#FFF1F0";
|
|
65
|
-
readonly yellow1: "#EDAB03";
|
|
66
|
-
readonly yellow2: "#F4CC68";
|
|
67
|
-
readonly yellow3: "#FFF9E8";
|
|
68
|
-
readonly yellow4: "#FFFCF5";
|
|
69
|
-
readonly green1: "#08A45E";
|
|
70
|
-
readonly green2: "#6BC89E";
|
|
71
|
-
readonly green3: "#EBFFF6";
|
|
72
|
-
readonly green4: "#F5FFFA";
|
|
73
|
-
readonly blue1: "#1878E4";
|
|
74
|
-
readonly blue2: "#74AEEF";
|
|
75
|
-
readonly blue3: "#ECF5FF";
|
|
76
|
-
readonly blue4: "#F5F9FF";
|
|
77
|
-
};
|
|
39
|
+
type ValueOf<ObjectType> = ObjectType[keyof ObjectType];
|
|
40
|
+
type ColorGroups = {
|
|
41
|
+
brand: typeof brand;
|
|
42
|
+
neutral: typeof neutral;
|
|
43
|
+
typography: typeof typography;
|
|
44
|
+
accent: typeof accent;
|
|
78
45
|
};
|
|
79
|
-
type ValueOf<T> = T[keyof T];
|
|
80
46
|
type TokenColor = ValueOf<{
|
|
81
|
-
[
|
|
47
|
+
[GroupName in keyof ColorGroups]: ValueOf<ColorGroups[GroupName]>;
|
|
82
48
|
}>;
|
|
83
49
|
export type DesignColor = TokenColor | "transparent";
|
|
84
50
|
export {};
|
package/core/atoms/Color.js
CHANGED
package/core/atoms/Color.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC
|
|
1
|
+
{"version":3,"file":"Color.js","sourceRoot":"","sources":["../../../core/atoms/Color.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,cAAc,EAAE,SAAS;IACzB,YAAY,EAAE,SAAS;CACf,CAAC;AAEX,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;IACnB,SAAS,EAAE,SAAS;IACpB,WAAW,EAAE,SAAS;IACtB,QAAQ,EAAE,SAAS;CACX,CAAC;AAEX,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,4DAA4D;IAC5D,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,IAAI,EAAE,SAAS;IACf,8CAA8C;IAC9C,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,OAAO,EAAE,SAAS;IAClB,kDAAkD;IAClD,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,MAAM,EAAE,SAAS;IACjB,qCAAqC;IACrC,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;IAChB,KAAK,EAAE,SAAS;CACR,CAAC","sourcesContent":["export const brand = {\n grantbiiYellow: \"#EBA338\",\n grantbiiBlue: \"#16538A\",\n} as const;\n\nexport const neutral = {\n black: \"#232022\",\n grey1: \"#999999\",\n grey2: \"#CCCCCC\",\n grey3: \"#EEEEEE\",\n grey4: \"#FAFAFA\",\n white: \"#FFFFFF\",\n} as const;\n\nexport const typography = {\n blackHigh: \"#1A1A1A\",\n blackMedium: \"#666666\",\n blackLow: \"#B2B2B2\",\n whiteHigh: \"#FFFFFF\",\n whiteMedium: \"#F5F5F5\",\n whiteLow: \"#E5E5E5\",\n} as const;\n\nexport const accent = {\n // usually includes dangerous, wrong or rejected information\n red1: \"#C02318\",\n red2: \"#F88E86\",\n red3: \"#FFE9E7\",\n red4: \"#FFF1F0\",\n // usually indicates warning, progressing, etc\n yellow1: \"#EDAB03\",\n yellow2: \"#F4CC68\",\n yellow3: \"#FFF9E8\",\n yellow4: \"#FFFCF5\",\n // usually indicates success, correct, passed, etc\n green1: \"#08A45E\",\n green2: \"#6BC89E\",\n green3: \"#EBFFF6\",\n green4: \"#F5FFFA\",\n // usually indicates info, no emotion\n blue1: \"#1878E4\",\n blue2: \"#74AEEF\",\n blue3: \"#ECF5FF\",\n blue4: \"#F5F9FF\",\n} as const;\n\ntype ValueOf<ObjectType> = ObjectType[keyof ObjectType];\n\ntype ColorGroups = {\n brand: typeof brand;\n neutral: typeof neutral;\n typography: typeof typography;\n accent: typeof accent;\n};\n\ntype TokenColor = ValueOf<{\n [GroupName in keyof ColorGroups]: ValueOf<ColorGroups[GroupName]>;\n}>;\n\nexport type DesignColor = TokenColor | \"transparent\";\n"]}
|
package/core/atoms/Typography.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAMA,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,QAAgB,EAAmB,EAAE,CAC5E,CAAC;IACC,KAAK,EAAE,GAAG,QAAQ,IAAI;IACtB,KAAK,EAAE,GAAG,SAAS,IAAI;CACxB,CAAU,CAAC;AAEd,MAAM,
|
|
1
|
+
{"version":3,"file":"Typography.js","sourceRoot":"","sources":["../../../core/atoms/Typography.ts"],"names":[],"mappings":"AAMA,MAAM,YAAY,GAAG,CAAC,SAAiB,EAAE,QAAgB,EAAmB,EAAE,CAC5E,CAAC;IACC,KAAK,EAAE,GAAG,QAAQ,IAAI;IACtB,KAAK,EAAE,GAAG,SAAS,IAAI;CACxB,CAAU,CAAC;AAEd,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,OAAO,EAAE,SAAS;CACnB,CAAC;AAEF,MAAM,CAAC,MAAM,MAAM,GAA+C;IAChE,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,IAAI,EAAE,GAAG;CACV,CAAC;AAQF,MAAM,SAAS,GAAG,CAChB,UAAsB,EACtB,eAAuB,EACvB,iBAAyB,eAAe,GAAG,CAAC,EACjC,EAAE,CAAC,CAAC;IACf,UAAU,EAAE,MAAM,CAAC,OAAO;IAC1B,UAAU;IACV,QAAQ,EAAE,YAAY,CAAC,eAAe,EAAE,cAAc,CAAC;CACxD,CAAC,CAAC;AAEH,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnD,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AACnD,MAAM,CAAC,MAAM,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAEnD,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,eAAe,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,kBAAkB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAEhE,MAAM,CAAC,MAAM,iBAAiB,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC;AAC5D,MAAM,CAAC,MAAM,mBAAmB,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,CAAC,CAAC;AAChE,MAAM,CAAC,MAAM,oBAAoB,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC;AAElE,MAAM,CAAC,MAAM,WAAW,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAC1D,MAAM,CAAC,MAAM,aAAa,GAAG,SAAS,CAAC,MAAM,CAAC,MAAM,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC;AAC9D,MAAM,CAAC,MAAM,cAAc,GAAG,SAAS,CAAC,MAAM,CAAC,OAAO,EAAE,EAAE,EAAE,EAAE,CAAC,CAAC","sourcesContent":["import type { ScreenSize } from \"../types\";\n\ntype FontWeightLabel = \"regular\" | \"medium\" | \"bold\";\ntype FontWeight = 400 | 500 | 700;\ntype ResponsiveValue = Record<ScreenSize, string>;\n\nconst responsivePx = (desktopPx: number, mobilePx: number): ResponsiveValue =>\n ({\n small: `${mobilePx}px`,\n large: `${desktopPx}px`,\n }) as const;\n\nexport const family = {\n satoshi: \"Satoshi\",\n};\n\nexport const weight: { [label in FontWeightLabel]: FontWeight } = {\n regular: 400,\n medium: 500,\n bold: 700,\n};\n\nexport type TextStyle = {\n fontFamily: string;\n fontWeight: FontWeight;\n fontSize: ResponsiveValue;\n};\n\nconst textStyle = (\n fontWeight: FontWeight,\n desktopFontSize: number,\n mobileFontSize: number = desktopFontSize - 2,\n): TextStyle => ({\n fontFamily: family.satoshi,\n fontWeight,\n fontSize: responsivePx(desktopFontSize, mobileFontSize),\n});\n\nexport const heading1 = textStyle(weight.bold, 32);\nexport const heading2 = textStyle(weight.bold, 28);\nexport const heading3 = textStyle(weight.bold, 24);\n\nexport const subheading1Bold = textStyle(weight.bold, 20);\nexport const subheading1Medium = textStyle(weight.medium, 20);\nexport const subheading1Regular = textStyle(weight.regular, 20);\n\nexport const subheading2Bold = textStyle(weight.bold, 18);\nexport const subheading2Medium = textStyle(weight.medium, 18);\nexport const subheading2Regular = textStyle(weight.regular, 18);\n\nexport const bodyPrimaryBold = textStyle(weight.bold, 16);\nexport const bodyPrimaryMedium = textStyle(weight.medium, 16);\nexport const bodyPrimaryRegular = textStyle(weight.regular, 16);\n\nexport const bodySecondaryBold = textStyle(weight.bold, 14);\nexport const bodySecondaryMedium = textStyle(weight.medium, 14);\nexport const bodySecondaryRegular = textStyle(weight.regular, 14);\n\nexport const captionBold = textStyle(weight.bold, 12, 12);\nexport const captionMedium = textStyle(weight.medium, 12, 12);\nexport const captionRegular = textStyle(weight.regular, 12, 12);\n"]}
|
package/core/organisms/Modal.js
CHANGED
|
@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
|
|
|
4
4
|
import styled from "styled-components";
|
|
5
5
|
import { Color, Responsive, Spacing } from "../atoms";
|
|
6
6
|
import { Overlay } from "../molecules";
|
|
7
|
-
const Modal = ({ width, height, children }) => createPortal(_jsx(Overlay, { "$centerContent": true, children: _jsx(ModalWindow, { "$width": width, "$height": height, children: children }) }), document.body);
|
|
7
|
+
const Modal = ({ width = "auto", height = "auto", children }) => createPortal(_jsx(Overlay, { "$centerContent": true, children: _jsx(ModalWindow, { "$width": width, "$height": height, children: children }) }), document.body);
|
|
8
8
|
export default Modal;
|
|
9
9
|
export const useModal = () => {
|
|
10
10
|
const [isModalOpen, setIsModalOpen] = useState(false);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAc,EAAE,EAAE,
|
|
1
|
+
{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../../core/organisms/Modal.tsx"],"names":[],"mappings":";AAAA,OAAO,EAA0B,WAAW,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACtE,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC;AACtD,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOvC,MAAM,KAAK,GAAG,CAAC,EAAE,KAAK,GAAG,MAAM,EAAE,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAc,EAAE,EAAE,CAC1E,YAAY,CACV,KAAC,OAAO,sCACN,KAAC,WAAW,cAAS,KAAK,aAAW,MAAM,YACxC,QAAQ,GACG,GACN,EACV,QAAQ,CAAC,IAAI,CACd,CAAC;AAEJ,eAAe,KAAK,CAAC;AAErB,MAAM,CAAC,MAAM,QAAQ,GAAG,GAAG,EAAE;IAC3B,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAEtD,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,QAAQ,CAAC;IAC1C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,YAAY,GAAG,WAAW,CAAC,GAAG,EAAE;QACpC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,GAAG,SAAS,CAAC;IAC3C,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,SAAS,GAAG,GAAG,EAAE;QACrB,cAAc,CAAC,IAAI,CAAC,CAAC;QACrB,UAAU,EAAE,CAAC;IACf,CAAC,CAAC;IAEF,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,cAAc,CAAC,KAAK,CAAC,CAAC;QACtB,YAAY,EAAE,CAAC;IACjB,CAAC,CAAC;IAEF,OAAO;QACL,SAAS;QACT,UAAU;QACV,WAAW;KACZ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,WAAW,GAAG,MAAM,CAAC,GAAG,CAAqC;;;;sBAI7C,KAAK,CAAC,OAAO,CAAC,KAAK;;gBAEzB,OAAO,CAAC,KAAK;;;oBAGT,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;;;;;;;qBAWhC,UAAU,CAAC,eAAe,CAAC,MAAM;;;;;aAKzC,CAAC,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;cACrB,CAAC,EAAE,OAAO,EAAE,EAAE,EAAE,CAAC,OAAO;;qBAEjB,OAAO,CAAC,GAAG;;CAE/B,CAAC","sourcesContent":["import { type PropsWithChildren, useCallback, useState } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport styled from \"styled-components\";\nimport { Color, Responsive, Spacing } from \"../atoms\";\nimport { Overlay } from \"../molecules\";\n\ntype ModalProps = {\n width?: string;\n height?: string;\n} & PropsWithChildren;\n\nconst Modal = ({ width = \"auto\", height = \"auto\", children }: ModalProps) =>\n createPortal(\n <Overlay $centerContent>\n <ModalWindow $width={width} $height={height}>\n {children}\n </ModalWindow>\n </Overlay>,\n document.body,\n );\n\nexport default Modal;\n\nexport const useModal = () => {\n const [isModalOpen, setIsModalOpen] = useState(false);\n\n const lockScroll = useCallback(() => {\n document.body.style.overflow = \"hidden\";\n }, []);\n\n const unlockScroll = useCallback(() => {\n document.body.style.overflow = \"initial\";\n }, []);\n\n const openModal = () => {\n setIsModalOpen(true);\n lockScroll();\n };\n\n const closeModal = () => {\n setIsModalOpen(false);\n unlockScroll();\n };\n\n return {\n openModal,\n closeModal,\n isModalOpen,\n };\n};\n\nconst ModalWindow = styled.div<{ $width: string; $height: string }>`\n display: flex;\n flex-direction: column;\n\n background-color: ${Color.neutral.white};\n\n min-height: ${Spacing.px100};\n max-height: 100vh;\n\n @media (width < ${Responsive.widthBreakpoint.laptop}) {\n position: fixed;\n bottom: 0px;\n left: 0px;\n\n width: 100%;\n height: 100%;\n\n border-radius: 0px;\n }\n\n @media (width >= ${Responsive.widthBreakpoint.laptop}) {\n position: static;\n bottom: auto;\n left: auto;\n\n width: ${({ $width }) => $width};\n height: ${({ $height }) => $height};\n\n border-radius: ${Spacing.px8};\n }\n`;\n"]}
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@grantbii/design-system",
|
|
3
3
|
"author": "Grantbii",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
|
-
"version": "1.28.
|
|
5
|
+
"version": "1.28.2",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
"main": "./index.js",
|
|
13
13
|
"types": "./index.d.ts",
|
|
14
14
|
"scripts": {
|
|
15
|
-
"lint": "
|
|
15
|
+
"lint": "eslint . --max-warnings=0",
|
|
16
16
|
"prepare": "husky",
|
|
17
17
|
"build": "npx tsc && cp -r ./core/assets ./dist/core && cp ./package.json ./dist && cp README.md ./dist",
|
|
18
18
|
"postpublish": "rm -rf dist/",
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"@vitest/browser-playwright": "4.1.9",
|
|
48
48
|
"@vitest/coverage-v8": "4.1.9",
|
|
49
49
|
"eslint": "9.39.4",
|
|
50
|
-
"eslint-config-next": "16.2.
|
|
50
|
+
"eslint-config-next": "16.2.10",
|
|
51
51
|
"eslint-config-prettier": "10.1.8",
|
|
52
52
|
"eslint-plugin-storybook": "10.4.6",
|
|
53
53
|
"husky": "9.1.7",
|
|
@@ -67,7 +67,7 @@
|
|
|
67
67
|
"prettier --write"
|
|
68
68
|
],
|
|
69
69
|
"**/*.{mjs,ts,tsx}": [
|
|
70
|
-
"eslint --fix",
|
|
70
|
+
"eslint --fix --max-warnings=0",
|
|
71
71
|
"prettier --write"
|
|
72
72
|
]
|
|
73
73
|
}
|
|
@@ -10,6 +10,7 @@ const ModalContent = styled.div `
|
|
|
10
10
|
flex-direction: column;
|
|
11
11
|
gap: ${Spacing.px8};
|
|
12
12
|
|
|
13
|
+
height: 100%;
|
|
13
14
|
padding: ${Spacing.px20};
|
|
14
15
|
`;
|
|
15
16
|
const ModalHeader = ({ onClickClose }) => (_jsxs(BaseModalHeader, { children: [_jsx(ModalTitle, { children: "Sample Modal Header" }), _jsx(Button, { onClick: onClickClose, Icon: SystemIcon.XIcon, variant: "ghost" })] }));
|
|
@@ -26,10 +27,6 @@ const meta = {
|
|
|
26
27
|
component: Modal,
|
|
27
28
|
tags: ["autodocs"],
|
|
28
29
|
render: (args) => _jsx(ModalDemo, { ...args }),
|
|
29
|
-
args: {
|
|
30
|
-
width: "600px",
|
|
31
|
-
height: "360px",
|
|
32
|
-
},
|
|
33
30
|
};
|
|
34
31
|
export default meta;
|
|
35
32
|
export const ShortContent = {
|
|
@@ -37,9 +34,14 @@ export const ShortContent = {
|
|
|
37
34
|
children: _jsx("p", { children: "Amplifying Business Grant Impact for SMEs & Scale-ups" }),
|
|
38
35
|
},
|
|
39
36
|
};
|
|
37
|
+
const ModalBody = styled.div `
|
|
38
|
+
overflow-y: auto;
|
|
39
|
+
`;
|
|
40
40
|
export const LongContent = {
|
|
41
41
|
args: {
|
|
42
|
-
|
|
42
|
+
width: "500px",
|
|
43
|
+
height: "300px",
|
|
44
|
+
children: (_jsxs(ModalBody, { children: [_jsx("p", { children: "Grantbii is an AI-powered grant intelligence and matching platform that helps grant seekers effortlessly find, match, prep & apply for the right business grants - maximizing grant funding success with minimal effort. Our platform connects businesses with a trusted Grant Enabler Network - solution providers, consulting experts, and delivery partners - ensuring that every dollar of grant funding leads to real business transformation impact." }), _jsx("p", { children: "In the future, Grantbii aims to automate the entire grant application lifecycle, from discovery to claims submission and guide you through the application process with minimal effort on your part." }), _jsx("p", { children: "To maximize your chances of grant success, you can expect to leverage on tools to assess your chances of success and offer expert support to ensure your application meets all necessary requirements." })] })),
|
|
43
45
|
},
|
|
44
46
|
};
|
|
45
47
|
//# sourceMappingURL=Modal.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/organisms/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,MAAM,KAAK,CAAC;AAGb,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAkB,EAAE,EAAE;IAChE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE1D,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EAEjE,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,YACjC,MAAC,YAAY,eACX,KAAC,WAAW,IAAC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,EAChD,QAAQ,IACI,GACT,CACT,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGtB,OAAO,CAAC,GAAG
|
|
1
|
+
{"version":3,"file":"Modal.stories.js","sourceRoot":"","sources":["../../../stories/organisms/Modal.stories.tsx"],"names":[],"mappings":";AAAA,OAAO,EACL,eAAe,EACf,MAAM,EACN,KAAK,EACL,OAAO,EACP,UAAU,EACV,UAAU,EACV,QAAQ,GACT,MAAM,KAAK,CAAC;AAGb,OAAO,MAAM,MAAM,mBAAmB,CAAC;AAOvC,MAAM,SAAS,GAAG,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAkB,EAAE,EAAE;IAChE,MAAM,EAAE,WAAW,EAAE,SAAS,EAAE,UAAU,EAAE,GAAG,QAAQ,EAAE,CAAC;IAE1D,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,KAAK,EAAC,qBAAqB,EAAC,OAAO,EAAE,GAAG,EAAE,CAAC,SAAS,EAAE,GAAI,EAEjE,WAAW,CAAC,CAAC,CAAC,CACb,KAAC,KAAK,IAAC,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,YACjC,MAAC,YAAY,eACX,KAAC,WAAW,IAAC,YAAY,EAAE,GAAG,EAAE,CAAC,UAAU,EAAE,GAAI,EAChD,QAAQ,IACI,GACT,CACT,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAA;;;SAGtB,OAAO,CAAC,GAAG;;;aAGP,OAAO,CAAC,IAAI;CACxB,CAAC;AAMF,MAAM,WAAW,GAAG,CAAC,EAAE,YAAY,EAAoB,EAAE,EAAE,CAAC,CAC1D,MAAC,eAAe,eACd,KAAC,UAAU,sCAAiC,EAC5C,KAAC,MAAM,IAAC,OAAO,EAAE,YAAY,EAAE,IAAI,EAAE,UAAU,CAAC,KAAK,EAAE,OAAO,EAAC,OAAO,GAAG,IACzD,CACnB,CAAC;AAEF,MAAM,eAAe,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAIjC,CAAC;AAEF,MAAM,UAAU,GAAG,MAAM,CAAC,EAAE,CAAA;IACxB,eAAe,CAAC,UAAU,CAAC,QAAQ,CAAC;CACvC,CAAC;AAEF,MAAM,IAAI,GAA2B;IACnC,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,KAAK;IAChB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,MAAM,EAAE,CAAC,IAAI,EAAE,EAAE,CAAC,KAAC,SAAS,OAAK,IAAI,GAAI;CAC1C,CAAC;AAEF,eAAe,IAAI,CAAC;AAIpB,MAAM,CAAC,MAAM,YAAY,GAAU;IACjC,IAAI,EAAE;QACJ,QAAQ,EAAE,gFAA4D;KACvE;CACF,CAAC;AAEF,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAAA;;CAE3B,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;QACd,MAAM,EAAE,OAAO;QACf,QAAQ,EAAE,CACR,MAAC,SAAS,eACR,qdAQI,EAEJ,+NAII,EAEJ,iOAII,IACM,CACb;KACF;CACF,CAAC","sourcesContent":["import {\n applyTypography,\n Button,\n Modal,\n Spacing,\n SystemIcon,\n Typography,\n useModal,\n} from \"@/.\";\nimport type { Meta, StoryObj } from \"@storybook/nextjs-vite\";\nimport type { MouseEventHandler, PropsWithChildren } from \"react\";\nimport styled from \"styled-components\";\n\ntype ModalDemoProps = {\n width?: string;\n height?: string;\n} & PropsWithChildren;\n\nconst ModalDemo = ({ width, height, children }: ModalDemoProps) => {\n const { isModalOpen, openModal, closeModal } = useModal();\n\n return (\n <>\n <Button label=\"Click to open modal\" onClick={() => openModal()} />\n\n {isModalOpen ? (\n <Modal width={width} height={height}>\n <ModalContent>\n <ModalHeader onClickClose={() => closeModal()} />\n {children}\n </ModalContent>\n </Modal>\n ) : (\n <></>\n )}\n </>\n );\n};\n\nconst ModalContent = styled.div`\n display: flex;\n flex-direction: column;\n gap: ${Spacing.px8};\n\n height: 100%;\n padding: ${Spacing.px20};\n`;\n\ntype ModalHeaderProps = {\n onClickClose: MouseEventHandler<HTMLElement>;\n};\n\nconst ModalHeader = ({ onClickClose }: ModalHeaderProps) => (\n <BaseModalHeader>\n <ModalTitle>Sample Modal Header</ModalTitle>\n <Button onClick={onClickClose} Icon={SystemIcon.XIcon} variant=\"ghost\" />\n </BaseModalHeader>\n);\n\nconst BaseModalHeader = styled.div`\n display: flex;\n justify-content: space-between;\n align-items: center;\n`;\n\nconst ModalTitle = styled.h3`\n ${applyTypography(Typography.heading3)}\n`;\n\nconst meta: Meta<typeof ModalDemo> = {\n title: \"Organisms/Modal\",\n component: Modal,\n tags: [\"autodocs\"],\n render: (args) => <ModalDemo {...args} />,\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const ShortContent: Story = {\n args: {\n children: <p>Amplifying Business Grant Impact for SMEs & Scale-ups</p>,\n },\n};\n\nconst ModalBody = styled.div`\n overflow-y: auto;\n`;\n\nexport const LongContent: Story = {\n args: {\n width: \"500px\",\n height: \"300px\",\n children: (\n <ModalBody>\n <p>\n Grantbii is an AI-powered grant intelligence and matching platform\n that helps grant seekers effortlessly find, match, prep & apply for\n the right business grants - maximizing grant funding success with\n minimal effort. Our platform connects businesses with a trusted Grant\n Enabler Network - solution providers, consulting experts, and delivery\n partners - ensuring that every dollar of grant funding leads to real\n business transformation impact.\n </p>\n\n <p>\n In the future, Grantbii aims to automate the entire grant application\n lifecycle, from discovery to claims submission and guide you through\n the application process with minimal effort on your part.\n </p>\n\n <p>\n To maximize your chances of grant success, you can expect to leverage\n on tools to assess your chances of success and offer expert support to\n ensure your application meets all necessary requirements.\n </p>\n </ModalBody>\n ),\n },\n};\n"]}
|