@grantbii/design-system 1.24.1 → 1.24.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.
|
@@ -1,7 +1,8 @@
|
|
|
1
|
-
import type { DetailedHTMLProps, SelectHTMLAttributes } from "react";
|
|
1
|
+
import type { ComponentPropsWithoutRef, DetailedHTMLProps, SelectHTMLAttributes } from "react";
|
|
2
2
|
import { type Option } from "../types";
|
|
3
|
+
type DropdownOption = Option & Omit<ComponentPropsWithoutRef<"option">, keyof Option | "children">;
|
|
3
4
|
export type DropdownProps = {
|
|
4
|
-
options:
|
|
5
|
+
options: DropdownOption[];
|
|
5
6
|
defaultLabel?: string;
|
|
6
7
|
} & DetailedHTMLProps<SelectHTMLAttributes<HTMLSelectElement>, HTMLSelectElement>;
|
|
7
8
|
declare const Dropdown: ({ options, defaultLabel, ...selectProps }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,15 +1,21 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import styled from "styled-components";
|
|
3
|
-
import { Color } from "../atoms";
|
|
4
|
-
import { InputValidation } from "../shared";
|
|
3
|
+
import { Color, Typography } from "../atoms";
|
|
5
4
|
import {} from "../types";
|
|
6
|
-
const Dropdown = ({ options, defaultLabel, ...selectProps }) => (_jsxs(Select, { ...selectProps, children: [_jsx("option", { hidden: true, disabled: true, value: "", children: defaultLabel ?? "-" }), options.map((
|
|
5
|
+
const Dropdown = ({ options, defaultLabel, ...selectProps }) => (_jsxs(Select, { ...selectProps, children: [_jsx("option", { hidden: true, disabled: true, value: "", children: defaultLabel ?? "-" }), options.map(({ label, ...optionProps }) => (_jsx("option", { ...optionProps, children: label }, optionProps.value)))] }));
|
|
7
6
|
export default Dropdown;
|
|
8
7
|
const Select = styled.select `
|
|
9
8
|
padding: 12px 16px;
|
|
10
|
-
background-color: ${Color.neutral.white};
|
|
11
9
|
border-radius: 8px;
|
|
12
10
|
|
|
13
|
-
|
|
11
|
+
font-size: 16px;
|
|
12
|
+
font-weight: ${Typography.weight.medium};
|
|
13
|
+
|
|
14
|
+
background-color: transparent;
|
|
15
|
+
border: 1px solid ${Color.neutral.grey2};
|
|
16
|
+
|
|
17
|
+
&:active {
|
|
18
|
+
background-color: ${Color.accent.blue3};
|
|
19
|
+
}
|
|
14
20
|
`;
|
|
15
21
|
//# sourceMappingURL=Dropdown.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/organisms/Dropdown.tsx"],"names":[],"mappings":";
|
|
1
|
+
{"version":3,"file":"Dropdown.js","sourceRoot":"","sources":["../../../core/organisms/Dropdown.tsx"],"names":[],"mappings":";AAKA,OAAO,MAAM,MAAM,mBAAmB,CAAC;AACvC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAe,MAAM,UAAU,CAAC;AAavC,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,IAAI,GAAG,GACb,EAER,OAAO,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,GAAG,WAAW,EAAE,EAAE,EAAE,CAAC,CAC1C,oBAAoC,WAAW,YAC5C,KAAK,IADK,WAAW,CAAC,KAAK,CAErB,CACV,CAAC,IACK,CACV,CAAC;AAEF,eAAe,QAAQ,CAAC;AAExB,MAAM,MAAM,GAAG,MAAM,CAAC,MAAM,CAAA;;;;;iBAKX,UAAU,CAAC,MAAM,CAAC,MAAM;;;sBAGnB,KAAK,CAAC,OAAO,CAAC,KAAK;;;wBAGjB,KAAK,CAAC,MAAM,CAAC,KAAK;;CAEzC,CAAC","sourcesContent":["import type {\n ComponentPropsWithoutRef,\n DetailedHTMLProps,\n SelectHTMLAttributes,\n} from \"react\";\nimport styled from \"styled-components\";\nimport { Color, Typography } from \"../atoms\";\nimport { type Option } from \"../types\";\n\ntype DropdownOption = Option &\n Omit<ComponentPropsWithoutRef<\"option\">, keyof Option | \"children\">;\n\nexport type DropdownProps = {\n options: DropdownOption[];\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 ?? \"-\"}\n </option>\n\n {options.map(({ label, ...optionProps }) => (\n <option key={optionProps.value} {...optionProps}>\n {label}\n </option>\n ))}\n </Select>\n);\n\nexport default Dropdown;\n\nconst Select = styled.select`\n padding: 12px 16px;\n border-radius: 8px;\n\n font-size: 16px;\n font-weight: ${Typography.weight.medium};\n\n background-color: transparent;\n border: 1px solid ${Color.neutral.grey2};\n\n &:active {\n background-color: ${Color.accent.blue3};\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.24.
|
|
5
|
+
"version": "1.24.2",
|
|
6
6
|
"description": "Grantbii's Design System",
|
|
7
7
|
"homepage": "https://design.grantbii.com",
|
|
8
8
|
"repository": {
|
|
@@ -47,16 +47,16 @@
|
|
|
47
47
|
"@vitest/browser-playwright": "4.1.5",
|
|
48
48
|
"@vitest/coverage-v8": "4.1.5",
|
|
49
49
|
"eslint": "9.39.4",
|
|
50
|
-
"eslint-config-next": "16.2.
|
|
50
|
+
"eslint-config-next": "16.2.6",
|
|
51
51
|
"eslint-config-prettier": "10.1.8",
|
|
52
52
|
"eslint-plugin-storybook": "10.3.6",
|
|
53
53
|
"husky": "9.1.7",
|
|
54
54
|
"lint-staged": "16.4.0",
|
|
55
|
-
"next": "16.2.
|
|
55
|
+
"next": "16.2.6",
|
|
56
56
|
"playwright": "1.59.1",
|
|
57
57
|
"prettier": "3.8.3",
|
|
58
|
-
"react": "19.2.
|
|
59
|
-
"react-dom": "19.2.
|
|
58
|
+
"react": "19.2.6",
|
|
59
|
+
"react-dom": "19.2.6",
|
|
60
60
|
"storybook": "10.3.6",
|
|
61
61
|
"styled-components": "6.4.1",
|
|
62
62
|
"typescript": "6.0.3",
|