@grantbii/design-system 1.9.2 → 1.9.4
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/atoms/Dropdown.js.map +1 -1
- package/core/atoms/Input.d.ts +2 -1
- package/core/atoms/Input.js.map +1 -1
- package/core/atoms/Textarea.d.ts +4 -2
- package/core/atoms/Textarea.js.map +1 -1
- package/core/atoms/shared.d.ts +4 -1
- package/core/atoms/shared.js +13 -0
- package/core/atoms/shared.js.map +1 -1
- package/package.json +1 -1
- package/tsconfig.tsbuildinfo +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/atoms/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/atoms/Dropdown.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,EAA6B,MAAM,UAAU,CAAC;AAUtE,MAAM,QAAQ,GAAG,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,GAAG,WAAW,EAAiB,EAAE,EAAE,CAAC,CAC7E,MAAC,MAAM,OAAK,WAAW,aACrB,iBAAQ,MAAM,QAAC,QAAQ,QAAC,KAAK,EAAC,EAAE,YAC7B,YAAY,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,GAAG,GAC3B,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,IACK,CACV,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAsB;;sBAE5B,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC","sourcesContent":["import type { DetailedHTMLProps, SelectHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, type Option } from \"../foundations\";\nimport { InputValidation, type InputValidationProps } from \"./shared\";\n\nexport type DropdownProps = {\n options: Option[];\n defaultLabel?: string;\n} & DetailedHTMLProps<\n SelectHTMLAttributes<HTMLSelectElement>,\n HTMLSelectElement\n>;\n\nconst Dropdown = ({ options, defaultLabel, ...selectProps }: DropdownProps) => (\n <Select {...selectProps}>\n <option hidden disabled value=\"\">\n {defaultLabel ? defaultLabel : \"-\"}\n </option>\n\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </Select>\n);\n\nexport default Dropdown;\n\nconst Select = styled.select<InputValidationProps>`\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n"]}
|
package/core/atoms/Input.d.ts
CHANGED
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import type { DetailedHTMLProps, InputHTMLAttributes } from "react";
|
|
2
2
|
import { type Option } from "../foundations";
|
|
3
|
+
import { type InputValidationProps } from "./shared";
|
|
3
4
|
type InputProps = {
|
|
4
5
|
datalistId?: string;
|
|
5
6
|
datalistOptions?: Option[];
|
|
6
|
-
} & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
7
|
+
} & InputValidationProps & DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
|
|
7
8
|
declare const Input: ({ datalistOptions, datalistId, ...inputProps }: InputProps) => import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
export default Input;
|
package/core/atoms/Input.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/atoms/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../core/atoms/Input.tsx"],"names":[],"mappings":";AACA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAe,MAAM,gBAAgB,CAAC;AACrD,OAAO,EAAE,eAAe,EAA6B,MAAM,UAAU,CAAC;AAQtE,MAAM,KAAK,GAAG,CAAC,EAAE,eAAe,EAAE,UAAU,EAAE,GAAG,UAAU,EAAc,EAAE,EAAE,CAAC,CAC5E,8BACE,KAAC,SAAS,OAAK,UAAU,EAAE,IAAI,EAAE,UAAU,GAAI,EAE9C,UAAU,IAAI,eAAe,CAAC,CAAC,CAAC,CAC/B,KAAC,QAAQ,IAAC,EAAE,EAAE,UAAU,EAAE,OAAO,EAAE,eAAe,GAAI,CACvD,CAAC,CAAC,CAAC,CACF,mBAAK,CACN,IACA,CACJ,CAAC;AAEF,eAAe,KAAK,CAAC;AAErB,MAAM,SAAS,GAAG,MAAM,CAAC,KAAK,CAAsB;;sBAE9B,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAOF,MAAM,QAAQ,GAAG,CAAC,EAAE,EAAE,EAAE,OAAO,EAAiB,EAAE,EAAE,CAAC,CACnD,mBAAU,EAAE,EAAE,EAAE,YACb,OAAO,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CACvB,iBAA2B,KAAK,EAAE,MAAM,CAAC,KAAK,YAC3C,MAAM,CAAC,KAAK,IADF,MAAM,CAAC,KAAK,CAEhB,CACV,CAAC,GACO,CACZ,CAAC","sourcesContent":["import type { DetailedHTMLProps, InputHTMLAttributes } from \"react\";\nimport styled from \"styled-components\";\nimport { Colors, type Option } from \"../foundations\";\nimport { InputValidation, type InputValidationProps } from \"./shared\";\n\ntype InputProps = {\n datalistId?: string;\n datalistOptions?: Option[];\n} & InputValidationProps &\n DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;\n\nconst Input = ({ datalistOptions, datalistId, ...inputProps }: InputProps) => (\n <>\n <BaseInput {...inputProps} list={datalistId} />\n\n {datalistId && datalistOptions ? (\n <Datalist id={datalistId} options={datalistOptions} />\n ) : (\n <></>\n )}\n </>\n);\n\nexport default Input;\n\nconst BaseInput = styled.input<InputValidationProps>`\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\ntype DatalistProps = {\n id: string;\n options: Option[];\n};\n\nconst Datalist = ({ id, options }: DatalistProps) => (\n <datalist id={id}>\n {options.map((option) => (\n <option key={option.value} value={option.value}>\n {option.label}\n </option>\n ))}\n </datalist>\n);\n"]}
|
package/core/atoms/Textarea.d.ts
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
|
|
1
|
+
import { type InputValidationProps } from "./shared";
|
|
2
|
+
type TextareaProps = {
|
|
2
3
|
$heightPixels?: number;
|
|
3
|
-
}
|
|
4
|
+
} & InputValidationProps;
|
|
5
|
+
declare const Textarea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, TextareaProps>> & string;
|
|
4
6
|
export default Textarea;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../core/atoms/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,eAAe,
|
|
1
|
+
{"version":3,"file":"Textarea.js","sourceRoot":"","sources":["../../../core/atoms/Textarea.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,MAAM,EAAE,MAAM,gBAAgB,CAAC;AACxC,OAAO,EAAE,eAAe,EAA6B,MAAM,UAAU,CAAC;AAItE,MAAM,QAAQ,GAAG,MAAM,CAAC,QAAQ,CAAe;YACnC,CAAC,EAAE,aAAa,GAAG,GAAG,EAAE,EAAE,EAAE,CAAC,aAAa;;;sBAGhC,MAAM,CAAC,IAAI,CAAC,KAAK;;;IAGnC,eAAe;CAClB,CAAC;AAEF,eAAe,QAAQ,CAAC","sourcesContent":["import styled from \"styled-components\";\nimport { Colors } from \"../foundations\";\nimport { InputValidation, type InputValidationProps } from \"./shared\";\n\ntype TextareaProps = { $heightPixels?: number } & InputValidationProps;\n\nconst Textarea = styled.textarea<TextareaProps>`\n height: ${({ $heightPixels = 100 }) => $heightPixels}px;\n\n padding: 12px 16px;\n background-color: ${Colors.base.white};\n border-radius: 8px;\n\n ${InputValidation}\n`;\n\nexport default Textarea;\n"]}
|
package/core/atoms/shared.d.ts
CHANGED
|
@@ -7,7 +7,10 @@ export declare const BaseButton: import("styled-components/dist/types").IStyledC
|
|
|
7
7
|
$width?: string;
|
|
8
8
|
}>> & string;
|
|
9
9
|
export declare const LabelledInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
|
|
10
|
-
export
|
|
10
|
+
export type InputValidationProps = {
|
|
11
|
+
$hasError?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export declare const InputValidation: import("styled-components").RuleSet<InputValidationProps>;
|
|
11
14
|
export declare const FILE_TYPE_ICON_MAP: {
|
|
12
15
|
[mimeType: string]: Icons.Icon;
|
|
13
16
|
};
|
package/core/atoms/shared.js
CHANGED
|
@@ -57,6 +57,19 @@ export const InputValidation = css `
|
|
|
57
57
|
border: 1px solid ${Colors.accent.red1};
|
|
58
58
|
outline: 1px solid ${Colors.accent.red1};
|
|
59
59
|
}
|
|
60
|
+
|
|
61
|
+
${({ $hasError = false }) => $hasError
|
|
62
|
+
? css `
|
|
63
|
+
background-color: ${Colors.base.white};
|
|
64
|
+
border: 2px solid ${Colors.accent.red1};
|
|
65
|
+
outline: none;
|
|
66
|
+
|
|
67
|
+
&:focus {
|
|
68
|
+
border: 2px solid ${Colors.accent.red1};
|
|
69
|
+
outline: 1px solid ${Colors.accent.red1};
|
|
70
|
+
}
|
|
71
|
+
`
|
|
72
|
+
: ""}
|
|
60
73
|
`;
|
|
61
74
|
export const FILE_TYPE_ICON_MAP = {
|
|
62
75
|
"application/pdf": Icons.FilePdfIcon,
|
package/core/atoms/shared.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../core/atoms/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAMlC;;;;;;WAMS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;;;;;;;qBAQrB,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAC5C,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;;WAE1B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EACnB,UAAU,GAAG,KAAK,EAClB,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,GAC5C,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC;;sBAEjC,CAAC,EAAE,YAAY,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC,YAAY;;CAEvE,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;
|
|
1
|
+
{"version":3,"file":"shared.js","sourceRoot":"","sources":["../../../core/atoms/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAChD,OAAO,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAE/C,MAAM,CAAC,MAAM,UAAU,GAAG,MAAM,CAAC,GAAG,CAMlC;;;;;;WAMS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,EAAE,EAAE,CAAC,MAAM;;;;;;;;qBAQrB,CAAC,EAAE,UAAU,GAAG,KAAK,EAAE,EAAE,EAAE,CAC5C,UAAU,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM;;WAE1B,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,EAAE,CAAC,MAAM;sBACzC,CAAC,EACnB,UAAU,GAAG,KAAK,EAClB,gBAAgB,GAAG,MAAM,CAAC,IAAI,CAAC,YAAY,GAC5C,EAAE,EAAE,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC,CAAC,gBAAgB,CAAC;;sBAEjC,CAAC,EAAE,YAAY,GAAG,aAAa,EAAE,EAAE,EAAE,CAAC,YAAY;;CAEvE,CAAC;AAEF,MAAM,CAAC,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAA;;;;CAItC,CAAC;AAMF,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAsB;;wBAEhC,MAAM,CAAC,OAAO,CAAC,KAAK;wBACpB,MAAM,CAAC,OAAO,CAAC,KAAK;;;;;wBAKpB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,OAAO,CAAC,KAAK;;;;;wBAKpB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,MAAM,CAAC,KAAK;yBAClB,MAAM,CAAC,MAAM,CAAC,KAAK;;;;wBAIpB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;;;;;wBAKlB,MAAM,CAAC,IAAI,CAAC,KAAK;wBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;yBACjB,MAAM,CAAC,MAAM,CAAC,IAAI;;;IAGvC,CAAC,EAAE,SAAS,GAAG,KAAK,EAAE,EAAE,EAAE,CAC1B,SAAS;IACP,CAAC,CAAC,GAAG,CAAA;8BACmB,MAAM,CAAC,IAAI,CAAC,KAAK;8BACjB,MAAM,CAAC,MAAM,CAAC,IAAI;;;;gCAIhB,MAAM,CAAC,MAAM,CAAC,IAAI;iCACjB,MAAM,CAAC,MAAM,CAAC,IAAI;;SAE1C;IACH,CAAC,CAAC,EAAE;CACT,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAuC;IACpE,iBAAiB,EAAE,KAAK,CAAC,WAAW;IACpC,WAAW,EAAE,KAAK,CAAC,WAAW;IAC9B,YAAY,EAAE,KAAK,CAAC,WAAW;CAChC,CAAC","sourcesContent":["import styled, { css } from \"styled-components\";\nimport { Colors, Icons } from \"../foundations\";\n\nexport const BaseButton = styled.div<{\n $underline?: boolean;\n $backgroundColor?: string;\n $borderColor?: string;\n $color?: string;\n $width?: string;\n}>`\n display: flex;\n justify-content: center;\n align-items: center;\n gap: 10px;\n\n width: ${({ $width = \"auto\" }) => $width};\n\n padding: 10px 16px;\n\n font-weight: 500;\n font-size: 14px;\n\n white-space: nowrap;\n text-decoration: ${({ $underline = false }) =>\n $underline ? \"underline\" : \"none\"};\n\n color: ${({ $color = Colors.typography.whiteHigh }) => $color};\n background-color: ${({\n $underline = false,\n $backgroundColor = Colors.main.grantbiiBlue,\n }) => ($underline ? \"transparent\" : $backgroundColor)};\n\n border: 1px solid ${({ $borderColor = \"transparent\" }) => $borderColor};\n border-radius: 8px;\n`;\n\nexport const LabelledInput = styled.div`\n display: flex;\n align-items: center;\n gap: 8px;\n`;\n\nexport type InputValidationProps = {\n $hasError?: boolean;\n};\n\nexport const InputValidation = css<InputValidationProps>`\n &:disabled {\n background-color: ${Colors.neutral.grey4};\n border: 1px solid ${Colors.neutral.grey3};\n outline: none;\n }\n\n &:valid {\n background-color: ${Colors.base.white};\n border: 1px solid ${Colors.neutral.grey3};\n outline: none;\n }\n\n &:valid&:focus {\n background-color: ${Colors.base.white};\n border: 1px solid ${Colors.accent.blue1};\n outline: 1px solid ${Colors.accent.blue1};\n }\n\n &:invalid {\n background-color: ${Colors.base.white};\n border: 1px solid ${Colors.accent.red1};\n outline: none;\n }\n\n &:invalid&:focus {\n background-color: ${Colors.base.white};\n border: 1px solid ${Colors.accent.red1};\n outline: 1px solid ${Colors.accent.red1};\n }\n\n ${({ $hasError = false }) =>\n $hasError\n ? css`\n background-color: ${Colors.base.white};\n border: 2px solid ${Colors.accent.red1};\n outline: none;\n\n &:focus {\n border: 2px solid ${Colors.accent.red1};\n outline: 1px solid ${Colors.accent.red1};\n }\n `\n : \"\"}\n`;\n\nexport const FILE_TYPE_ICON_MAP: { [mimeType: string]: Icons.Icon } = {\n \"application/pdf\": Icons.FilePdfIcon,\n \"image/png\": Icons.FilePngIcon,\n \"image/jpeg\": Icons.FileJpgIcon,\n};\n"]}
|
package/package.json
CHANGED