@czi-sds/components 14.6.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.
Files changed (11) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +323 -0
  3. package/dist/index.cjs.d.ts +1141 -0
  4. package/dist/index.cjs.js +5904 -0
  5. package/dist/index.esm.d.ts +1141 -0
  6. package/dist/index.esm.js +5783 -0
  7. package/dist/tailwind.json +147 -0
  8. package/dist/tsconfig.tsbuildinfo +1 -0
  9. package/dist/variables.css +111 -0
  10. package/dist/variables.scss +109 -0
  11. package/package.json +140 -0
package/dist/variables.css ADDED
@@ -0,0 +1,111 @@
1
+ :root {
2
+ --sds-font-letter-spacing-default: 0.3px;
3
+ --sds-font-letter-spacing-caps: 1px;
4
+ --sds-font-color: black;
5
+ --sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
6
+ --sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
7
+ --sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
8
+ --sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
9
+ --sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
10
+ --sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
11
+ --sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
12
+ --sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
13
+ --sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
14
+ --sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
15
+ --sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
16
+ --sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
17
+ --sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
18
+ --sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
19
+ --sds-font-caps-xxxxs-600-text-transform: uppercase;
20
+ --sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
21
+ --sds-font-caps-xxxs-600-text-transform: uppercase;
22
+ --sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
23
+ --sds-font-caps-xxs-600-text-transform: uppercase;
24
+ --sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
25
+ --sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
26
+ --sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
27
+ --sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
28
+ --sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
29
+ --sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
30
+ --sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
31
+ --sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
32
+ --sds-color-overlay-100: rgba(0, 0, 0, 0.08);
33
+ --sds-color-overlay-200: rgba(0, 0, 0, 0.03);
34
+ --sds-color-beta-100: #f4f0f9;
35
+ --sds-color-beta-200: #f0ebf6;
36
+ --sds-color-beta-400: #7a41ce;
37
+ --sds-color-beta-600: #693bac;
38
+ --sds-color-error-100: #fef2f2;
39
+ --sds-color-error-200: #f8e8e8;
40
+ --sds-color-error-400: #dc132c;
41
+ --sds-color-error-600: #b70016;
42
+ --sds-color-gray-100: #f8f8f8;
43
+ --sds-color-gray-200: #eaeaea;
44
+ --sds-color-gray-300: #cccccc;
45
+ --sds-color-gray-400: #999999;
46
+ --sds-color-gray-500: #767676;
47
+ --sds-color-gray-600: #545454;
48
+ --sds-color-gray-black: #000000;
49
+ --sds-color-gray-white: #ffffff;
50
+ --sds-color-info-100: #eff2fc;
51
+ --sds-color-info-200: #ebeffc;
52
+ --sds-color-info-400: #3867fa;
53
+ --sds-color-info-600: #223f9c;
54
+ --sds-color-primary-100: #f8f9fe;
55
+ --sds-color-primary-200: #eff2fc;
56
+ --sds-color-primary-300: #a9bdfc;
57
+ --sds-color-primary-400: #3867fa;
58
+ --sds-color-primary-500: #2b52cd;
59
+ --sds-color-primary-600: #223f9c;
60
+ --sds-color-secondary-400: #9bc74e;
61
+ --sds-color-success-100: #ecf5f0;
62
+ --sds-color-success-200: #e6f7ed;
63
+ --sds-color-success-400: #3cb371;
64
+ --sds-color-success-600: #1c7f48;
65
+ --sds-color-warning-100: #fcf6ec;
66
+ --sds-color-warning-200: #fff3e1;
67
+ --sds-color-warning-400: #f5a623;
68
+ --sds-color-warning-600: #946314;
69
+ --sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
70
+ --sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
71
+ --sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
72
+ --sds-borders-error-400: 1px solid #dc132c;
73
+ --sds-borders-gray-100: 1px solid #f8f8f8;
74
+ --sds-borders-gray-200: 1px solid #eaeaea;
75
+ --sds-borders-gray-300: 1px solid #cccccc;
76
+ --sds-borders-gray-400: 1px solid #999999;
77
+ --sds-borders-gray-500: 1px solid #767676;
78
+ --sds-borders-gray-dashed: 2px dashed #999999;
79
+ --sds-borders-link-dashed: 1px dashed;
80
+ --sds-borders-link-solid: 1px solid;
81
+ --sds-borders-primary-300: 1px solid #a9bdfc;
82
+ --sds-borders-primary-400: 1px solid #3867fa;
83
+ --sds-borders-primary-500: 1px solid #2b52cd;
84
+ --sds-borders-primary-600: 1px solid #223f9c;
85
+ --sds-borders-primary-dashed: 2px dashed #3867fa;
86
+ --sds-borders-success-400: 1px solid #3cb371;
87
+ --sds-borders-warning-400: 1px solid #f5a623;
88
+ --sds-spaces-default: 10px;
89
+ --sds-spaces-xxxs: 2px;
90
+ --sds-spaces-xxs: 4px;
91
+ --sds-spaces-xs: 6px;
92
+ --sds-spaces-s: 8px;
93
+ --sds-spaces-m: 10px;
94
+ --sds-spaces-l: 14px;
95
+ --sds-spaces-xl: 22px;
96
+ --sds-spaces-xxl: 38px;
97
+ --sds-icon-sizes-input-height: 16px; /* for use with input icons only */
98
+ --sds-icon-sizes-input-width: 16px; /* for use with input icons only */
99
+ --sds-icon-sizes-xs-height: 10px;
100
+ --sds-icon-sizes-xs-width: 10px;
101
+ --sds-icon-sizes-s-height: 14px;
102
+ --sds-icon-sizes-s-width: 14px;
103
+ --sds-icon-sizes-l-height: 22px;
104
+ --sds-icon-sizes-l-width: 22px;
105
+ --sds-icon-sizes-xl-height: 32px;
106
+ --sds-icon-sizes-xl-width: 32px;
107
+ --sds-corners-corner-l: 20px;
108
+ --sds-corners-corner-m: 4px;
109
+ --sds-corners-corner-s: 2px;
110
+ --sds-corners-corner-none: 0px;
111
+ }
package/dist/variables.scss ADDED
@@ -0,0 +1,109 @@
1
+ $sds-font-letter-spacing-default: 0.3px;
2
+ $sds-font-letter-spacing-caps: 1px;
3
+ $sds-font-color: black;
4
+ $sds-font-font-family: 'Open Sans', 'OpenSans-Regular';
5
+ $sds-font-body-xxxs-400-font: 400 11px/16px 'Open Sans', 'OpenSans-Regular';
6
+ $sds-font-body-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
7
+ $sds-font-body-xxs-400-font: 400 12px/18px 'Open Sans', 'OpenSans-Regular';
8
+ $sds-font-body-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
9
+ $sds-font-body-xs-400-font: 400 13px/20px 'Open Sans', 'OpenSans-Regular';
10
+ $sds-font-body-xs-600-font: 600 13px/20px 'Open Sans', 'OpenSans-SemiBold';
11
+ $sds-font-body-s-400-font: 400 14px/24px 'Open Sans', 'OpenSans-Regular';
12
+ $sds-font-body-s-600-font: 600 14px/24px 'Open Sans', 'OpenSans-SemiBold';
13
+ $sds-font-body-m-400-font: 400 16px/26px 'Open Sans', 'OpenSans-Regular';
14
+ $sds-font-body-m-600-font: 600 16px/26px 'Open Sans', 'OpenSans-SemiBold';
15
+ $sds-font-body-l-400-font: 400 18px/28px 'Open Sans', 'OpenSans-Regular';
16
+ $sds-font-body-l-600-font: 600 18px/28px 'Open Sans', 'OpenSans-SemiBold';
17
+ $sds-font-caps-xxxxs-600-font: 600 10px/14px 'Open Sans', 'OpenSans-SemiBold';
18
+ $sds-font-caps-xxxxs-600-text-transform: uppercase;
19
+ $sds-font-caps-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
20
+ $sds-font-caps-xxxs-600-text-transform: uppercase;
21
+ $sds-font-caps-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
22
+ $sds-font-caps-xxs-600-text-transform: uppercase;
23
+ $sds-font-header-xxxs-600-font: 600 11px/16px 'Open Sans', 'OpenSans-SemiBold';
24
+ $sds-font-header-xxs-600-font: 600 12px/18px 'Open Sans', 'OpenSans-SemiBold';
25
+ $sds-font-header-xs-600-font: 600 13px/18px 'Open Sans', 'OpenSans-SemiBold';
26
+ $sds-font-header-s-600-font: 600 14px/20px 'Open Sans', 'OpenSans-SemiBold';
27
+ $sds-font-header-m-600-font: 600 16px/22px 'Open Sans', 'OpenSans-SemiBold';
28
+ $sds-font-header-l-600-font: 600 18px/24px 'Open Sans', 'OpenSans-SemiBold';
29
+ $sds-font-header-xl-600-font: 600 22px/30px 'Open Sans', 'OpenSans-SemiBold';
30
+ $sds-font-header-xxl-600-font: 600 26px/34px 'Open Sans', 'OpenSans-SemiBold';
31
+ $sds-color-overlay-100: rgba(0, 0, 0, 0.08);
32
+ $sds-color-overlay-200: rgba(0, 0, 0, 0.03);
33
+ $sds-color-beta-100: #f4f0f9;
34
+ $sds-color-beta-200: #f0ebf6;
35
+ $sds-color-beta-400: #7a41ce;
36
+ $sds-color-beta-600: #693bac;
37
+ $sds-color-error-100: #fef2f2;
38
+ $sds-color-error-200: #f8e8e8;
39
+ $sds-color-error-400: #dc132c;
40
+ $sds-color-error-600: #b70016;
41
+ $sds-color-gray-100: #f8f8f8;
42
+ $sds-color-gray-200: #eaeaea;
43
+ $sds-color-gray-300: #cccccc;
44
+ $sds-color-gray-400: #999999;
45
+ $sds-color-gray-500: #767676;
46
+ $sds-color-gray-600: #545454;
47
+ $sds-color-gray-black: #000000;
48
+ $sds-color-gray-white: #ffffff;
49
+ $sds-color-info-100: #eff2fc;
50
+ $sds-color-info-200: #ebeffc;
51
+ $sds-color-info-400: #3867fa;
52
+ $sds-color-info-600: #223f9c;
53
+ $sds-color-primary-100: #f8f9fe;
54
+ $sds-color-primary-200: #eff2fc;
55
+ $sds-color-primary-300: #a9bdfc;
56
+ $sds-color-primary-400: #3867fa;
57
+ $sds-color-primary-500: #2b52cd;
58
+ $sds-color-primary-600: #223f9c;
59
+ $sds-color-secondary-400: #9bc74e;
60
+ $sds-color-success-100: #ecf5f0;
61
+ $sds-color-success-200: #e6f7ed;
62
+ $sds-color-success-400: #3cb371;
63
+ $sds-color-success-600: #1c7f48;
64
+ $sds-color-warning-100: #fcf6ec;
65
+ $sds-color-warning-200: #fff3e1;
66
+ $sds-color-warning-400: #f5a623;
67
+ $sds-color-warning-600: #946314;
68
+ $sds-drop-shadows-shadow-l: 0.0px 2.0px 12.0px 0px rgba(0, 0, 0, 0.3);
69
+ $sds-drop-shadows-shadow-m: 0.0px 2.0px 10.0px 0px rgba(0, 0, 0, 0.15),0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.15);
70
+ $sds-drop-shadows-shadow-s: 0.0px 2.0px 4.0px 0px rgba(0, 0, 0, 0.25);
71
+ $sds-borders-error-400: 1px solid #dc132c;
72
+ $sds-borders-gray-100: 1px solid #f8f8f8;
73
+ $sds-borders-gray-200: 1px solid #eaeaea;
74
+ $sds-borders-gray-300: 1px solid #cccccc;
75
+ $sds-borders-gray-400: 1px solid #999999;
76
+ $sds-borders-gray-500: 1px solid #767676;
77
+ $sds-borders-gray-dashed: 2px dashed #999999;
78
+ $sds-borders-link-dashed: 1px dashed;
79
+ $sds-borders-link-solid: 1px solid;
80
+ $sds-borders-primary-300: 1px solid #a9bdfc;
81
+ $sds-borders-primary-400: 1px solid #3867fa;
82
+ $sds-borders-primary-500: 1px solid #2b52cd;
83
+ $sds-borders-primary-600: 1px solid #223f9c;
84
+ $sds-borders-primary-dashed: 2px dashed #3867fa;
85
+ $sds-borders-success-400: 1px solid #3cb371;
86
+ $sds-borders-warning-400: 1px solid #f5a623;
87
+ $sds-spaces-default: 10px;
88
+ $sds-spaces-xxxs: 2px;
89
+ $sds-spaces-xxs: 4px;
90
+ $sds-spaces-xs: 6px;
91
+ $sds-spaces-s: 8px;
92
+ $sds-spaces-m: 10px;
93
+ $sds-spaces-l: 14px;
94
+ $sds-spaces-xl: 22px;
95
+ $sds-spaces-xxl: 38px;
96
+ $sds-icon-sizes-input-height: 16px; // for use with input icons only
97
+ $sds-icon-sizes-input-width: 16px; // for use with input icons only
98
+ $sds-icon-sizes-xs-height: 10px;
99
+ $sds-icon-sizes-xs-width: 10px;
100
+ $sds-icon-sizes-s-height: 14px;
101
+ $sds-icon-sizes-s-width: 14px;
102
+ $sds-icon-sizes-l-height: 22px;
103
+ $sds-icon-sizes-l-width: 22px;
104
+ $sds-icon-sizes-xl-height: 32px;
105
+ $sds-icon-sizes-xl-width: 32px;
106
+ $sds-corners-corner-l: 20px;
107
+ $sds-corners-corner-m: 4px;
108
+ $sds-corners-corner-s: 2px;
109
+ $sds-corners-corner-none: 0px;
package/package.json ADDED
@@ -0,0 +1,140 @@
1
+ {
2
+ "name": "@czi-sds/components",
3
+ "version": "14.6.2",
4
+ "main": "dist/index.cjs.js",
5
+ "module": "dist/index.esm.js",
6
+ "repository": {
7
+ "type": "git",
8
+ "url": "https://github.com/chanzuckerberg/sci-components.git"
9
+ },
10
+ "publishConfig": {
11
+ "access": "public"
12
+ },
13
+ "license": "MIT",
14
+ "devDependencies": {
15
+ "@babel/core": "^7.21.0",
16
+ "@babel/preset-env": "^7.20.2",
17
+ "@babel/preset-typescript": "^7.21.0",
18
+ "@chanzuckerberg/axe-storybook-testing": "^6.3.0",
19
+ "@chanzuckerberg/story-utils": "^4.0.0",
20
+ "@emotion/core": "^11.0.0",
21
+ "@emotion/css": "^11.1.3",
22
+ "@emotion/react": "^11.1.5",
23
+ "@emotion/styled": "^11.9.3",
24
+ "@mui/icons-material": "^5.6.0",
25
+ "@mui/lab": "^5.0.0-alpha.76",
26
+ "@mui/material": "^5.6.0",
27
+ "@rollup/plugin-typescript": "^8.3.1",
28
+ "@rollup/plugin-url": "^6.1.0",
29
+ "@storybook/addon-actions": "^7.0.5",
30
+ "@storybook/addon-storyshots": "^7.0.5",
31
+ "@storybook/react": "^7.0.5",
32
+ "@svgr/rollup": "^5.5.0",
33
+ "@svgr/webpack": "^5.5.0",
34
+ "@testing-library/react": "^12.1.2",
35
+ "@types/jest": "^27.0.2",
36
+ "@types/postcss-flexbugs-fixes": "^4.2.1",
37
+ "@types/react": "^17.0.2",
38
+ "@types/react-dom": "^17.0.1",
39
+ "@typescript-eslint/eslint-plugin": "^5.0.0",
40
+ "@typescript-eslint/parser": "^5.0.0",
41
+ "autoprefixer": "^10.4.13",
42
+ "babel-eslint": "^10.1.0",
43
+ "babel-loader": "^8.2.2",
44
+ "chromatic": "^6.3.4",
45
+ "commitizen": "^4.2.4",
46
+ "concurrently": "^6.0.0",
47
+ "css-font": "^1.2.0",
48
+ "cz-conventional-changelog": "^3.3.0",
49
+ "eslint": "^7.32.0",
50
+ "eslint-config-airbnb-typescript": "^12.3.1",
51
+ "eslint-config-prettier": "^8.1.0",
52
+ "eslint-loader": "^4.0.2",
53
+ "eslint-plugin-flowtype": "^5.3.1",
54
+ "eslint-plugin-import": "^2.22.1",
55
+ "eslint-plugin-jest": "^25.0.6",
56
+ "eslint-plugin-jest-playwright": "^0.2.1",
57
+ "eslint-plugin-jsx-a11y": "^6.4.1",
58
+ "eslint-plugin-prettier": "^3.3.1",
59
+ "eslint-plugin-react": "^7.22.0",
60
+ "eslint-plugin-react-hooks": "^4.2.0",
61
+ "eslint-plugin-sonarjs": "^0.10.0",
62
+ "eslint-plugin-storybook": "^0.6.10",
63
+ "husky": "^5.1.3",
64
+ "jest": "^27.2.5",
65
+ "lint-staged": "^10.5.4",
66
+ "postcss-flexbugs-fixes": "^5.0.2",
67
+ "prettier": "^2.2.1",
68
+ "prettier-plugin-organize-imports": "^1.1.1",
69
+ "react": "^17.0.1",
70
+ "react-dom": "^17.0.1",
71
+ "rollup": "^2.40.0",
72
+ "rollup-plugin-bundle-scss": "^0.1.3",
73
+ "rollup-plugin-copy": "^3.4.0",
74
+ "rollup-plugin-css-only": "^3.1.0",
75
+ "rollup-plugin-delete": "^2.0.0",
76
+ "rollup-plugin-ts": "^3.0.2",
77
+ "storybook-addon-emotion-theme": "^2.1.1",
78
+ "style-dictionary": "^3.0.3",
79
+ "stylelint": "^13.11.0",
80
+ "stylelint-config-recommended": "^3.0.0",
81
+ "stylelint-config-standard": "^20.0.0",
82
+ "svg-jest": "^1.0.1",
83
+ "ts-jest": "^27.0.5",
84
+ "typescript": "4.6"
85
+ },
86
+ "peerDependencies": {
87
+ "@emotion/css": "^11.1.3",
88
+ "@emotion/react": "^11.1.5",
89
+ "@emotion/styled": "^11.1.5",
90
+ "@mui/base": "^5.0.0-alpha.83",
91
+ "@mui/icons-material": "^5.6.0",
92
+ "@mui/lab": "^5.0.0-alpha.76",
93
+ "@mui/material": "^5.6.0",
94
+ "react": ">=17.0.1",
95
+ "react-dom": ">=17.0.1"
96
+ },
97
+ "scripts": {
98
+ "build": "yarn sd-build && rollup -c",
99
+ "build-watch": "rollup -c -w",
100
+ "start": "start-storybook -p 6006",
101
+ "build-storybook": "build-storybook -o docs-build",
102
+ "test-storybook": "test-storybook",
103
+ "lint": "concurrently \"node_modules/.bin/eslint src/**/*.{ts,tsx} --quiet --fix\" \"node_modules/.bin/stylelint --fix '**/*.{js,ts,tsx,css}'\" \"npm run type-check\"",
104
+ "type-check": "tsc --noEmit",
105
+ "prepare": "cd ../../ && husky install",
106
+ "test": "jest",
107
+ "sd-build": "yarn style-dictionary build --config src/common/styles-dictionary/config.js",
108
+ "chromatic": "npx chromatic --exit-zero-on-changes --project-token=cad4aacbfeba",
109
+ "storybook:axe": "yarn build-storybook && yarn storybook:axeOnly",
110
+ "storybook:axeOnly": "axe-storybook --build-dir docs-build",
111
+ "namespace-check": "tsc --p tsconfig-namespace-check.json --noEmit"
112
+ },
113
+ "lint-staged": {
114
+ "*.{js,jsx,ts,tsx,md,html,css,yml}": "npx prettier --write"
115
+ },
116
+ "files": [
117
+ "dist"
118
+ ],
119
+ "description": "2021 Create-a-thon Science Initiative Component Library",
120
+ "bugs": {
121
+ "url": "https://github.com/chanzuckerberg/sci-components/issues"
122
+ },
123
+ "homepage": "https://github.com/chanzuckerberg/sci-components#readme",
124
+ "keywords": [
125
+ "react",
126
+ "materialui",
127
+ "science",
128
+ "design",
129
+ "system",
130
+ "component",
131
+ "library"
132
+ ],
133
+ "author": "",
134
+ "config": {
135
+ "commitizen": {
136
+ "path": "./node_modules/cz-conventional-changelog"
137
+ }
138
+ },
139
+ "gitHead": "24cd3c30b91567924a3512627730b5ac9200a0bd"
140
+ }