@automattic/vip-design-system 1.1.0 → 1.2.0
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/.editorconfig +11 -0
- package/.github/workflows/ci.yml +66 -0
- package/.prettierignore +5 -1
- package/.prettierrc +1 -8
- package/.storybook/{main.js → main.ts} +5 -2
- package/CONTRIBUTING.md +0 -2
- package/README.md +0 -1
- package/babel.config.js +1 -0
- package/build/system/Box/Box.tsx +22 -0
- package/build/system/Heading/Heading.tsx +38 -0
- package/package.json +116 -109
- package/src/system/Box/Box.stories.tsx +11 -0
- package/src/system/Box/Box.tsx +22 -0
- package/src/system/Heading/Heading.stories.tsx +19 -0
- package/src/system/Heading/Heading.tsx +38 -0
- package/tokens/valet-core/$metadata.json +1 -1
- package/tokens/valet-core/$themes.json +1 -1
- package/tokens/valet-core/figma-parsely-expressive-type.json +1 -1
- package/tokens/valet-core/figma-valet-expressive-type.json +1 -1
- package/tokens/valet-core/figma-wpvip-expressive-type.json +1 -1
- package/tokens/valet-core/parsely-expressive-color.json +1 -1
- package/tokens/valet-core/parsely-expressive-core.json +1 -1
- package/tokens/valet-core/parsely-expressive-type.json +1 -1
- package/tokens/valet-core/valet-core.json +1 -1
- package/tokens/valet-core/valet-expressive-color.json +1 -1
- package/tokens/valet-core/valet-expressive-core.json +1 -1
- package/tokens/valet-core/wpvip-expressive-color-dark.json +1 -1
- package/tokens/valet-core/wpvip-expressive-color.json +1 -1
- package/tokens/valet-core/wpvip-expressive-core.json +1 -1
- package/tokens/valet-core/wpvip-expressive-type.json +1 -1
- package/tokens/valet-core/wpvip-productive-color-dark.json +980 -980
- package/tokens/valet-core/wpvip-productive-color.json +1 -1
- package/tsconfig.json +21 -0
- package/.github/workflows/nodejs.yaml +0 -29
- package/build/system/Box/Box.js +0 -24
- package/build/system/Box/Box.stories.js +0 -20
- package/build/system/Heading/Heading.js +0 -42
- package/build/system/Heading/Heading.stories.js +0 -35
- package/src/system/Box/Box.js +0 -24
- package/src/system/Heading/Heading.js +0 -36
- /package/{src/system/Box/Box.stories.jsx → build/system/Box/Box.stories.tsx} +0 -0
- /package/{src/system/Heading/Heading.stories.jsx → build/system/Heading/Heading.stories.tsx} +0 -0
package/.editorconfig
ADDED
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
name: CI
|
|
2
|
+
|
|
3
|
+
on:
|
|
4
|
+
pull_request:
|
|
5
|
+
push:
|
|
6
|
+
branches:
|
|
7
|
+
- trunk
|
|
8
|
+
workflow_dispatch:
|
|
9
|
+
|
|
10
|
+
concurrency:
|
|
11
|
+
group: ${{ github.workflow }}-${{ github.ref }}
|
|
12
|
+
cancel-in-progress: true
|
|
13
|
+
|
|
14
|
+
permissions:
|
|
15
|
+
contents: read
|
|
16
|
+
|
|
17
|
+
jobs:
|
|
18
|
+
lint:
|
|
19
|
+
name: Lint and check types
|
|
20
|
+
runs-on: ubuntu-latest
|
|
21
|
+
steps:
|
|
22
|
+
- name: Setup and install
|
|
23
|
+
uses: Automattic/vip-actions/nodejs-setup@trunk
|
|
24
|
+
with:
|
|
25
|
+
node-version-file: .nvmrc
|
|
26
|
+
|
|
27
|
+
- name: Run linter
|
|
28
|
+
run: npm run lint
|
|
29
|
+
|
|
30
|
+
- name: Check formatting
|
|
31
|
+
run: npm run format:check
|
|
32
|
+
|
|
33
|
+
- name: Check types
|
|
34
|
+
run: npm run check-types
|
|
35
|
+
|
|
36
|
+
dependaban:
|
|
37
|
+
name: Dependaban
|
|
38
|
+
runs-on: ubuntu-latest
|
|
39
|
+
steps:
|
|
40
|
+
- uses: Automattic/vip-actions/dependaban@trunk
|
|
41
|
+
|
|
42
|
+
jest:
|
|
43
|
+
name: Jest tests
|
|
44
|
+
needs: [lint]
|
|
45
|
+
runs-on: ubuntu-latest
|
|
46
|
+
steps:
|
|
47
|
+
- name: Setup and install
|
|
48
|
+
uses: Automattic/vip-actions/nodejs-setup@trunk
|
|
49
|
+
with:
|
|
50
|
+
node-version-file: .nvmrc
|
|
51
|
+
|
|
52
|
+
- name: Run Tests
|
|
53
|
+
run: npm run jest
|
|
54
|
+
|
|
55
|
+
build:
|
|
56
|
+
name: Build
|
|
57
|
+
needs: [lint]
|
|
58
|
+
runs-on: ubuntu-latest
|
|
59
|
+
steps:
|
|
60
|
+
- name: Setup and install
|
|
61
|
+
uses: Automattic/vip-actions/nodejs-setup@trunk
|
|
62
|
+
with:
|
|
63
|
+
node-version-file: .nvmrc
|
|
64
|
+
|
|
65
|
+
- name: Build
|
|
66
|
+
run: npm run build
|
package/.prettierignore
CHANGED
package/.prettierrc
CHANGED
|
@@ -1,5 +1,7 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
1
|
+
import type { StorybookConfig } from '@storybook/react-webpack5';
|
|
2
|
+
|
|
3
|
+
const config: StorybookConfig = {
|
|
4
|
+
stories: [ '../src/**/*.stories.[jt]sx' ],
|
|
3
5
|
addons: [
|
|
4
6
|
'@storybook/addon-a11y',
|
|
5
7
|
'@storybook/addon-docs',
|
|
@@ -17,3 +19,4 @@ module.exports = {
|
|
|
17
19
|
},
|
|
18
20
|
};
|
|
19
21
|
|
|
22
|
+
export default config;
|
package/CONTRIBUTING.md
CHANGED
|
@@ -65,7 +65,6 @@ npm run theme-update
|
|
|
65
65
|
|
|
66
66
|
The process to release to npm should be started when all pull requests intended for publishing have been merged and the software has been fully tested for publication. You can release either using GitHub Actions or locally.
|
|
67
67
|
|
|
68
|
-
|
|
69
68
|
### Versioning Guidelines
|
|
70
69
|
|
|
71
70
|
- `patch`: for non-breaking changes/bugfixes and small updates.
|
|
@@ -88,7 +87,6 @@ This is the preferred method for pushing out the latest release. The workflow ru
|
|
|
88
87
|
1. When ready, merge the pull request. This will lead to a new version to be [published on npmjs.com](https://www.npmjs.com/package/@automattic/vip-design-system).
|
|
89
88
|
1. Another pull request will be created to bump to a development version, also assigned to you. Merge it to finish the process.
|
|
90
89
|
|
|
91
|
-
|
|
92
90
|
### Local
|
|
93
91
|
|
|
94
92
|
Follow these steps to publish locally:
|
package/README.md
CHANGED
|
@@ -4,7 +4,6 @@ Design system components used throughout VIP.
|
|
|
4
4
|
|
|
5
5
|
[Storybook Components](https://vip-design-system-components.netlify.app/)
|
|
6
6
|
|
|
7
|
-
|
|
8
7
|
## Contributing
|
|
9
8
|
|
|
10
9
|
See [CONTRIBUTING.md](https://github.com/Automattic/vip-design-system/blob/trunk/CONTRIBUTING.md) for details on development, testing, publishing, etc.
|
package/babel.config.js
CHANGED
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import React, { Ref } from 'react';
|
|
5
|
+
import classNames, { Argument } from 'classnames';
|
|
6
|
+
import { Box as ThemeBox, BoxProps as ThemeBoxProps } from 'theme-ui';
|
|
7
|
+
|
|
8
|
+
export interface BoxProps extends Omit< ThemeBoxProps, 'className' > {
|
|
9
|
+
className?: Argument;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const Box = React.forwardRef< HTMLDivElement, BoxProps >(
|
|
13
|
+
( props: BoxProps, ref: Ref< HTMLDivElement > ) => (
|
|
14
|
+
<ThemeBox
|
|
15
|
+
{ ...props }
|
|
16
|
+
className={ classNames( 'vip-box-component', props.className ) }
|
|
17
|
+
ref={ ref }
|
|
18
|
+
/>
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
Box.displayName = 'Box';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import React, { Ref } from 'react';
|
|
5
|
+
import {
|
|
6
|
+
Heading as ThemeHeading,
|
|
7
|
+
HeadingProps as ThemeHeadingProps,
|
|
8
|
+
ThemeUIStyleObject,
|
|
9
|
+
} from 'theme-ui';
|
|
10
|
+
import classNames, { Argument } from 'classnames';
|
|
11
|
+
|
|
12
|
+
// We must Omit className because we are overriding its default React implementation.
|
|
13
|
+
// Also, while the sx and variant props may seem redundant, specifying them here
|
|
14
|
+
// exposes them in Storybook's controls panel.
|
|
15
|
+
export interface HeadingProps extends Omit< ThemeHeadingProps, 'className' > {
|
|
16
|
+
className?: Argument;
|
|
17
|
+
sx?: ThemeUIStyleObject;
|
|
18
|
+
variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const Heading = React.forwardRef< HTMLHeadingElement, HeadingProps >(
|
|
22
|
+
( { variant = 'h3', sx, className, ...rest }, ref: Ref< HTMLHeadingElement > ) => (
|
|
23
|
+
<ThemeHeading
|
|
24
|
+
sx={ {
|
|
25
|
+
color: 'heading',
|
|
26
|
+
// pass variant prop to sx
|
|
27
|
+
variant: `text.${ variant.toString() }`,
|
|
28
|
+
...sx,
|
|
29
|
+
} }
|
|
30
|
+
className={ classNames( 'vip-heading-component', className ) }
|
|
31
|
+
ref={ ref }
|
|
32
|
+
variant={ variant }
|
|
33
|
+
{ ...rest }
|
|
34
|
+
/>
|
|
35
|
+
)
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
Heading.displayName = 'Heading';
|
package/package.json
CHANGED
|
@@ -1,111 +1,118 @@
|
|
|
1
1
|
{
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
2
|
+
"name": "@automattic/vip-design-system",
|
|
3
|
+
"version": "1.2.0",
|
|
4
|
+
"main": "build/system/index.js",
|
|
5
|
+
"scripts": {
|
|
6
|
+
"build-storybook": "storybook build",
|
|
7
|
+
"cmd:format": "prettier '**/*.(js|json|jsx|md|mdx|ts|tsx|yml|yaml)'",
|
|
8
|
+
"cmd:lint": "eslint --ext 'js,jsx,ts,tsx' --max-warnings 0",
|
|
9
|
+
"prepare": "npm run build",
|
|
10
|
+
"build": "npm run theme-update && cross-env NODE_ENV=production babel src --out-dir build --copy-files && npm run theme-builder-copy",
|
|
11
|
+
"check-types": "tsc",
|
|
12
|
+
"format": "npm run cmd:format -- --write",
|
|
13
|
+
"format:check": "npm run cmd:format -- --check",
|
|
14
|
+
"jest": "NODE_ENV=test jest --detectOpenHandles --env=jsdom",
|
|
15
|
+
"jest:coverage": "npm run jest && open-cli ./coverage/index.html",
|
|
16
|
+
"jest:watch": "npm run jest --watch",
|
|
17
|
+
"theme-builder-copy": "npm run theme-builder-copy-light && npm run theme-builder-copy-dark",
|
|
18
|
+
"theme-builder-copy-light": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-light.json build/system/theme/generated/valet-theme-light.json",
|
|
19
|
+
"theme-builder-copy-dark": "mkdir -p build/system/theme/generated/ && cp src/system/theme/generated/valet-theme-dark.json build/system/theme/generated/valet-theme-dark.json",
|
|
20
|
+
"theme-update": "npm run theme-update-light && npm run theme-update-dark",
|
|
21
|
+
"theme-update-light": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-light.json valet-core,wpvip-productive-color",
|
|
22
|
+
"theme-update-dark": "token-transformer tokens/valet-core src/system/theme/generated/valet-theme-dark.json valet-core,wpvip-productive-color-dark",
|
|
23
|
+
"lint": "npm run cmd:lint .",
|
|
24
|
+
"lint:fix": "npm run cmd:lint . -- --fix",
|
|
25
|
+
"storybook": "storybook dev -p 6006",
|
|
26
|
+
"dev": "npm run storybook",
|
|
27
|
+
"test": "npm run jest",
|
|
28
|
+
"watch": "npm run build -- --watch"
|
|
29
|
+
},
|
|
30
|
+
"dependencies": {
|
|
31
|
+
"@radix-ui/react-accordion": "^1.0.1",
|
|
32
|
+
"@radix-ui/react-checkbox": "^1.0.0",
|
|
33
|
+
"@radix-ui/react-dialog": "^1.0.0",
|
|
34
|
+
"@radix-ui/react-dropdown-menu": "^1.0.1-rc.6",
|
|
35
|
+
"@radix-ui/react-switch": "^1.0.0",
|
|
36
|
+
"@radix-ui/react-tabs": "^1.0.0",
|
|
37
|
+
"@radix-ui/react-tooltip": "^1.0.0",
|
|
38
|
+
"accessible-autocomplete": "^2.0.4",
|
|
39
|
+
"classnames": "^2.3.1",
|
|
40
|
+
"framer-motion": "^3.9.1",
|
|
41
|
+
"react-icons": "^4.7.0"
|
|
42
|
+
},
|
|
43
|
+
"peerDependencies": {
|
|
44
|
+
"react": "^18.0.0",
|
|
45
|
+
"react-dom": "^18.0.0",
|
|
46
|
+
"theme-ui": "0.16.0"
|
|
47
|
+
},
|
|
48
|
+
"jest": {
|
|
49
|
+
"collectCoverage": true,
|
|
50
|
+
"coverageReporters": [
|
|
51
|
+
"json",
|
|
52
|
+
"html"
|
|
53
|
+
],
|
|
54
|
+
"testEnvironmentOptions": {
|
|
55
|
+
"url": "http://localhost"
|
|
56
|
+
},
|
|
57
|
+
"roots": [
|
|
58
|
+
"<rootDir>/src",
|
|
59
|
+
"<rootDir>/test"
|
|
60
|
+
],
|
|
61
|
+
"setupFiles": [
|
|
62
|
+
"<rootDir>/test/setupTests.js"
|
|
63
|
+
],
|
|
64
|
+
"setupFilesAfterEnv": [
|
|
65
|
+
"<rootDir>/test/setupAfterEnv.js"
|
|
66
|
+
],
|
|
67
|
+
"transformIgnorePatterns": [
|
|
68
|
+
"\\.stories.jsx$"
|
|
69
|
+
],
|
|
70
|
+
"transform": {
|
|
71
|
+
"\\.[jt]sx?$": "babel-jest"
|
|
72
|
+
},
|
|
73
|
+
"moduleNameMapper": {
|
|
74
|
+
"\\.(css|less)$": "<rootDir>/test/fileMock.js"
|
|
75
|
+
}
|
|
76
|
+
},
|
|
77
|
+
"devDependencies": {
|
|
78
|
+
"@automattic/eslint-plugin-wpvip": "0.5.8",
|
|
79
|
+
"@axe-core/react": "4.4.3",
|
|
80
|
+
"@babel/cli": "7.22.9",
|
|
81
|
+
"@babel/core": "7.22.9",
|
|
82
|
+
"@babel/preset-env": "7.22.9",
|
|
83
|
+
"@babel/preset-react": "7.22.5",
|
|
84
|
+
"@babel/preset-typescript": "7.22.15",
|
|
85
|
+
"@babel/runtime": "7.22.6",
|
|
86
|
+
"@emotion/react": "11.11.1",
|
|
87
|
+
"@radix-ui/react-icons": "^1.1.1",
|
|
88
|
+
"@storybook/addon-a11y": "7.2.1",
|
|
89
|
+
"@storybook/addon-actions": "7.2.1",
|
|
90
|
+
"@storybook/addon-controls": "7.2.1",
|
|
91
|
+
"@storybook/addon-essentials": "7.2.1",
|
|
92
|
+
"@storybook/addon-links": "7.2.1",
|
|
93
|
+
"@storybook/addon-storysource": "7.2.1",
|
|
94
|
+
"@storybook/react": "7.2.1",
|
|
95
|
+
"@storybook/react-webpack5": "7.2.1",
|
|
96
|
+
"@testing-library/dom": "^8.11.1",
|
|
97
|
+
"@testing-library/jest-dom": "^5.15.0",
|
|
98
|
+
"@testing-library/react": "14.0.0",
|
|
99
|
+
"@tsconfig/node18": "18.2.2",
|
|
100
|
+
"@types/react": "18.2.17",
|
|
101
|
+
"@types/react-dom": "18.2.7",
|
|
102
|
+
"cross-env": "7.0.3",
|
|
103
|
+
"eslint": "8.46.0",
|
|
104
|
+
"eslint-plugin-storybook": "^0.6.13",
|
|
105
|
+
"jest": "29.6.2",
|
|
106
|
+
"jest-axe": "8.0.0",
|
|
107
|
+
"jest-environment-jsdom": "29.6.2",
|
|
108
|
+
"open-cli": "^7.0.1",
|
|
109
|
+
"prettier": "npm:wp-prettier@2.8.5",
|
|
110
|
+
"react": "18.2.0",
|
|
111
|
+
"react-dom": "18.2.0",
|
|
112
|
+
"react-refresh": "^0.9.0",
|
|
113
|
+
"storybook": "7.2.1",
|
|
114
|
+
"theme-ui": "0.16.0",
|
|
115
|
+
"token-transformer": "^0.0.29",
|
|
116
|
+
"typescript": "5.2.2"
|
|
117
|
+
}
|
|
111
118
|
}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import React, { Ref } from 'react';
|
|
5
|
+
import classNames, { Argument } from 'classnames';
|
|
6
|
+
import { Box as ThemeBox, BoxProps as ThemeBoxProps } from 'theme-ui';
|
|
7
|
+
|
|
8
|
+
export interface BoxProps extends Omit< ThemeBoxProps, 'className' > {
|
|
9
|
+
className?: Argument;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const Box = React.forwardRef< HTMLDivElement, BoxProps >(
|
|
13
|
+
( props: BoxProps, ref: Ref< HTMLDivElement > ) => (
|
|
14
|
+
<ThemeBox
|
|
15
|
+
{ ...props }
|
|
16
|
+
className={ classNames( 'vip-box-component', props.className ) }
|
|
17
|
+
ref={ ref }
|
|
18
|
+
/>
|
|
19
|
+
)
|
|
20
|
+
);
|
|
21
|
+
|
|
22
|
+
Box.displayName = 'Box';
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Internal dependencies
|
|
3
|
+
*/
|
|
4
|
+
import { Box, Heading } from '..';
|
|
5
|
+
|
|
6
|
+
export default {
|
|
7
|
+
title: 'Heading',
|
|
8
|
+
component: Heading,
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
export const Default = () => (
|
|
12
|
+
<Box>
|
|
13
|
+
<Heading variant="h1">Your Applications</Heading>
|
|
14
|
+
<Heading variant="h2">Heading Two</Heading>
|
|
15
|
+
<Heading variant="h3">Heading Three</Heading>
|
|
16
|
+
<Heading variant="h4">Heading Four</Heading>
|
|
17
|
+
<Heading variant="h5">Heading Five</Heading>
|
|
18
|
+
</Box>
|
|
19
|
+
);
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* External dependencies
|
|
3
|
+
*/
|
|
4
|
+
import React, { Ref } from 'react';
|
|
5
|
+
import {
|
|
6
|
+
Heading as ThemeHeading,
|
|
7
|
+
HeadingProps as ThemeHeadingProps,
|
|
8
|
+
ThemeUIStyleObject,
|
|
9
|
+
} from 'theme-ui';
|
|
10
|
+
import classNames, { Argument } from 'classnames';
|
|
11
|
+
|
|
12
|
+
// We must Omit className because we are overriding its default React implementation.
|
|
13
|
+
// Also, while the sx and variant props may seem redundant, specifying them here
|
|
14
|
+
// exposes them in Storybook's controls panel.
|
|
15
|
+
export interface HeadingProps extends Omit< ThemeHeadingProps, 'className' > {
|
|
16
|
+
className?: Argument;
|
|
17
|
+
sx?: ThemeUIStyleObject;
|
|
18
|
+
variant: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
export const Heading = React.forwardRef< HTMLHeadingElement, HeadingProps >(
|
|
22
|
+
( { variant = 'h3', sx, className, ...rest }, ref: Ref< HTMLHeadingElement > ) => (
|
|
23
|
+
<ThemeHeading
|
|
24
|
+
sx={ {
|
|
25
|
+
color: 'heading',
|
|
26
|
+
// pass variant prop to sx
|
|
27
|
+
variant: `text.${ variant.toString() }`,
|
|
28
|
+
...sx,
|
|
29
|
+
} }
|
|
30
|
+
className={ classNames( 'vip-heading-component', className ) }
|
|
31
|
+
ref={ ref }
|
|
32
|
+
variant={ variant }
|
|
33
|
+
{ ...rest }
|
|
34
|
+
/>
|
|
35
|
+
)
|
|
36
|
+
);
|
|
37
|
+
|
|
38
|
+
Heading.displayName = 'Heading';
|