@instructure/ui-heading 8.12.1-snapshot.37 → 8.12.1-snapshot.44
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/es/Heading/__examples__/Heading.examples.js +1 -4
- package/es/Heading/index.js +16 -11
- package/es/Heading/props.js +0 -30
- package/lib/Heading/__examples__/Heading.examples.js +1 -4
- package/lib/Heading/index.js +16 -11
- package/lib/Heading/props.js +0 -30
- package/package.json +13 -13
- package/src/Heading/__examples__/Heading.examples.ts +7 -12
- package/src/Heading/index.tsx +3 -4
- package/src/Heading/props.ts +24 -24
- package/types/Heading/__examples__/Heading.examples.d.ts +3 -3
- package/types/Heading/__examples__/Heading.examples.d.ts.map +1 -1
- package/types/Heading/index.d.ts +1 -0
- package/types/Heading/index.d.ts.map +1 -1
- package/types/Heading/props.d.ts +24 -0
- package/types/Heading/props.d.ts.map +1 -1
|
@@ -26,7 +26,7 @@ export default {
|
|
|
26
26
|
propValues: {
|
|
27
27
|
color: ['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit']
|
|
28
28
|
},
|
|
29
|
-
getComponentProps:
|
|
29
|
+
getComponentProps: () => {
|
|
30
30
|
return {
|
|
31
31
|
children: 'Hello this is a test heading',
|
|
32
32
|
margin: 'medium none'
|
|
@@ -36,8 +36,5 @@ export default {
|
|
|
36
36
|
return {
|
|
37
37
|
background: ['primary-inverse', 'secondary-inverse'].includes(props.color) ? 'primary-inverse' : 'primary'
|
|
38
38
|
};
|
|
39
|
-
},
|
|
40
|
-
filter: props => {
|
|
41
|
-
return props.type === 'notification' && props.countUntil || props.standalone && props.placement !== 'start top';
|
|
42
39
|
}
|
|
43
40
|
};
|
package/es/Heading/index.js
CHANGED
|
@@ -41,6 +41,7 @@ import { propTypes, allowedProps } from './props';
|
|
|
41
41
|
---
|
|
42
42
|
category: components
|
|
43
43
|
---
|
|
44
|
+
@tsProps
|
|
44
45
|
**/
|
|
45
46
|
let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 = testable(), _dec(_class = _dec2(_class = (_temp = _class2 = class Heading extends Component {
|
|
46
47
|
constructor(...args) {
|
|
@@ -58,25 +59,29 @@ let Heading = (_dec = withStyle(generateStyle, generateComponentTheme), _dec2 =
|
|
|
58
59
|
}
|
|
59
60
|
|
|
60
61
|
componentDidMount() {
|
|
61
|
-
|
|
62
|
+
var _this$props$makeStyle, _this$props;
|
|
63
|
+
|
|
64
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
62
65
|
}
|
|
63
66
|
|
|
64
67
|
componentDidUpdate() {
|
|
65
|
-
|
|
68
|
+
var _this$props$makeStyle2, _this$props2;
|
|
69
|
+
|
|
70
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
66
71
|
}
|
|
67
72
|
|
|
68
73
|
render() {
|
|
69
74
|
var _this$props$styles;
|
|
70
75
|
|
|
71
|
-
const _this$
|
|
72
|
-
border = _this$
|
|
73
|
-
children = _this$
|
|
74
|
-
color = _this$
|
|
75
|
-
level = _this$
|
|
76
|
-
margin = _this$
|
|
77
|
-
elementRef = _this$
|
|
78
|
-
makeStyles = _this$
|
|
79
|
-
props = _objectWithoutProperties(_this$
|
|
76
|
+
const _this$props3 = this.props,
|
|
77
|
+
border = _this$props3.border,
|
|
78
|
+
children = _this$props3.children,
|
|
79
|
+
color = _this$props3.color,
|
|
80
|
+
level = _this$props3.level,
|
|
81
|
+
margin = _this$props3.margin,
|
|
82
|
+
elementRef = _this$props3.elementRef,
|
|
83
|
+
makeStyles = _this$props3.makeStyles,
|
|
84
|
+
props = _objectWithoutProperties(_this$props3, _excluded);
|
|
80
85
|
|
|
81
86
|
const ElementType = getElementType(Heading, this.props, () => {
|
|
82
87
|
if (level === 'reset') {
|
package/es/Heading/props.js
CHANGED
|
@@ -25,43 +25,13 @@ import PropTypes from 'prop-types';
|
|
|
25
25
|
import { childrenOrValue } from '@instructure/ui-prop-types';
|
|
26
26
|
import { ThemeablePropTypes } from '@instructure/emotion';
|
|
27
27
|
const propTypes = {
|
|
28
|
-
/**
|
|
29
|
-
* Add a top- or bottom-border to the Heading
|
|
30
|
-
*/
|
|
31
28
|
border: PropTypes.oneOf(['none', 'top', 'bottom']),
|
|
32
|
-
|
|
33
|
-
/**
|
|
34
|
-
* The text content of the Heading
|
|
35
|
-
*/
|
|
36
29
|
children: childrenOrValue,
|
|
37
|
-
|
|
38
|
-
/**
|
|
39
|
-
* The font color to render
|
|
40
|
-
*/
|
|
41
30
|
color: PropTypes.oneOf(['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit']),
|
|
42
|
-
|
|
43
|
-
/**
|
|
44
|
-
* The *visual* appearance of the Heading: h1 is largest; h5 is smallest.
|
|
45
|
-
*/
|
|
46
31
|
level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* Choose the element Heading should render as. Will default to the `level` prop
|
|
50
|
-
* if not specified.
|
|
51
|
-
*/
|
|
52
32
|
as: PropTypes.elementType,
|
|
53
33
|
// eslint-disable-line react/require-default-props
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
57
|
-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
58
|
-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
59
|
-
*/
|
|
60
34
|
margin: ThemeablePropTypes.spacing,
|
|
61
|
-
|
|
62
|
-
/**
|
|
63
|
-
* Provides a ref to the underlying HTML element
|
|
64
|
-
*/
|
|
65
35
|
elementRef: PropTypes.func
|
|
66
36
|
};
|
|
67
37
|
const allowedProps = ['border', 'children', 'color', 'level', 'as', 'margin', 'elementRef'];
|
|
@@ -33,7 +33,7 @@ var _default = {
|
|
|
33
33
|
propValues: {
|
|
34
34
|
color: ['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit']
|
|
35
35
|
},
|
|
36
|
-
getComponentProps:
|
|
36
|
+
getComponentProps: () => {
|
|
37
37
|
return {
|
|
38
38
|
children: 'Hello this is a test heading',
|
|
39
39
|
margin: 'medium none'
|
|
@@ -43,9 +43,6 @@ var _default = {
|
|
|
43
43
|
return {
|
|
44
44
|
background: ['primary-inverse', 'secondary-inverse'].includes(props.color) ? 'primary-inverse' : 'primary'
|
|
45
45
|
};
|
|
46
|
-
},
|
|
47
|
-
filter: props => {
|
|
48
|
-
return props.type === 'notification' && props.countUntil || props.standalone && props.placement !== 'start top';
|
|
49
46
|
}
|
|
50
47
|
};
|
|
51
48
|
exports.default = _default;
|
package/lib/Heading/index.js
CHANGED
|
@@ -35,6 +35,7 @@ var _dec, _dec2, _class, _class2, _temp;
|
|
|
35
35
|
---
|
|
36
36
|
category: components
|
|
37
37
|
---
|
|
38
|
+
@tsProps
|
|
38
39
|
**/
|
|
39
40
|
let Heading = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec2 = (0, _testable.testable)(), _dec(_class = _dec2(_class = (_temp = _class2 = class Heading extends _react.Component {
|
|
40
41
|
constructor(...args) {
|
|
@@ -52,25 +53,29 @@ let Heading = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default),
|
|
|
52
53
|
}
|
|
53
54
|
|
|
54
55
|
componentDidMount() {
|
|
55
|
-
|
|
56
|
+
var _this$props$makeStyle, _this$props;
|
|
57
|
+
|
|
58
|
+
(_this$props$makeStyle = (_this$props = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props);
|
|
56
59
|
}
|
|
57
60
|
|
|
58
61
|
componentDidUpdate() {
|
|
59
|
-
|
|
62
|
+
var _this$props$makeStyle2, _this$props2;
|
|
63
|
+
|
|
64
|
+
(_this$props$makeStyle2 = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props2);
|
|
60
65
|
}
|
|
61
66
|
|
|
62
67
|
render() {
|
|
63
68
|
var _this$props$styles;
|
|
64
69
|
|
|
65
|
-
const _this$
|
|
66
|
-
border = _this$
|
|
67
|
-
children = _this$
|
|
68
|
-
color = _this$
|
|
69
|
-
level = _this$
|
|
70
|
-
margin = _this$
|
|
71
|
-
elementRef = _this$
|
|
72
|
-
makeStyles = _this$
|
|
73
|
-
props = (0, _objectWithoutProperties2.default)(_this$
|
|
70
|
+
const _this$props3 = this.props,
|
|
71
|
+
border = _this$props3.border,
|
|
72
|
+
children = _this$props3.children,
|
|
73
|
+
color = _this$props3.color,
|
|
74
|
+
level = _this$props3.level,
|
|
75
|
+
margin = _this$props3.margin,
|
|
76
|
+
elementRef = _this$props3.elementRef,
|
|
77
|
+
makeStyles = _this$props3.makeStyles,
|
|
78
|
+
props = (0, _objectWithoutProperties2.default)(_this$props3, _excluded);
|
|
74
79
|
const ElementType = (0, _getElementType.getElementType)(Heading, this.props, () => {
|
|
75
80
|
if (level === 'reset') {
|
|
76
81
|
return 'span';
|
package/lib/Heading/props.js
CHANGED
|
@@ -37,43 +37,13 @@ var _emotion = require("@instructure/emotion");
|
|
|
37
37
|
* SOFTWARE.
|
|
38
38
|
*/
|
|
39
39
|
const propTypes = {
|
|
40
|
-
/**
|
|
41
|
-
* Add a top- or bottom-border to the Heading
|
|
42
|
-
*/
|
|
43
40
|
border: _propTypes.default.oneOf(['none', 'top', 'bottom']),
|
|
44
|
-
|
|
45
|
-
/**
|
|
46
|
-
* The text content of the Heading
|
|
47
|
-
*/
|
|
48
41
|
children: _childrenOrValue.childrenOrValue,
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* The font color to render
|
|
52
|
-
*/
|
|
53
42
|
color: _propTypes.default.oneOf(['primary', 'secondary', 'primary-inverse', 'secondary-inverse', 'inherit']),
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* The *visual* appearance of the Heading: h1 is largest; h5 is smallest.
|
|
57
|
-
*/
|
|
58
43
|
level: _propTypes.default.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
|
|
59
|
-
|
|
60
|
-
/**
|
|
61
|
-
* Choose the element Heading should render as. Will default to the `level` prop
|
|
62
|
-
* if not specified.
|
|
63
|
-
*/
|
|
64
44
|
as: _propTypes.default.elementType,
|
|
65
45
|
// eslint-disable-line react/require-default-props
|
|
66
|
-
|
|
67
|
-
/**
|
|
68
|
-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
69
|
-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
70
|
-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
71
|
-
*/
|
|
72
46
|
margin: _emotion.ThemeablePropTypes.spacing,
|
|
73
|
-
|
|
74
|
-
/**
|
|
75
|
-
* Provides a ref to the underlying HTML element
|
|
76
|
-
*/
|
|
77
47
|
elementRef: _propTypes.default.func
|
|
78
48
|
};
|
|
79
49
|
exports.propTypes = propTypes;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/ui-heading",
|
|
3
|
-
"version": "8.12.1-snapshot.
|
|
3
|
+
"version": "8.12.1-snapshot.44+6f00103af",
|
|
4
4
|
"description": "A component for creating typographic headings",
|
|
5
5
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
6
6
|
"type": "commonjs",
|
|
@@ -25,20 +25,20 @@
|
|
|
25
25
|
"license": "MIT",
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@babel/runtime": "^7.13.10",
|
|
28
|
-
"@instructure/console": "8.12.1-snapshot.
|
|
29
|
-
"@instructure/emotion": "8.12.1-snapshot.
|
|
30
|
-
"@instructure/shared-types": "8.12.1-snapshot.
|
|
31
|
-
"@instructure/ui-prop-types": "8.12.1-snapshot.
|
|
32
|
-
"@instructure/ui-react-utils": "8.12.1-snapshot.
|
|
33
|
-
"@instructure/ui-testable": "8.12.1-snapshot.
|
|
34
|
-
"@instructure/ui-view": "8.12.1-snapshot.
|
|
28
|
+
"@instructure/console": "8.12.1-snapshot.44+6f00103af",
|
|
29
|
+
"@instructure/emotion": "8.12.1-snapshot.44+6f00103af",
|
|
30
|
+
"@instructure/shared-types": "8.12.1-snapshot.44+6f00103af",
|
|
31
|
+
"@instructure/ui-prop-types": "8.12.1-snapshot.44+6f00103af",
|
|
32
|
+
"@instructure/ui-react-utils": "8.12.1-snapshot.44+6f00103af",
|
|
33
|
+
"@instructure/ui-testable": "8.12.1-snapshot.44+6f00103af",
|
|
34
|
+
"@instructure/ui-view": "8.12.1-snapshot.44+6f00103af",
|
|
35
35
|
"prop-types": "^15"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@instructure/ui-babel-preset": "8.12.1-snapshot.
|
|
39
|
-
"@instructure/ui-test-locator": "8.12.1-snapshot.
|
|
40
|
-
"@instructure/ui-test-utils": "8.12.1-snapshot.
|
|
41
|
-
"@instructure/ui-themes": "8.12.1-snapshot.
|
|
38
|
+
"@instructure/ui-babel-preset": "8.12.1-snapshot.44+6f00103af",
|
|
39
|
+
"@instructure/ui-test-locator": "8.12.1-snapshot.44+6f00103af",
|
|
40
|
+
"@instructure/ui-test-utils": "8.12.1-snapshot.44+6f00103af",
|
|
41
|
+
"@instructure/ui-themes": "8.12.1-snapshot.44+6f00103af"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": ">=16.8 <=17"
|
|
@@ -47,5 +47,5 @@
|
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
49
|
"sideEffects": false,
|
|
50
|
-
"gitHead": "
|
|
50
|
+
"gitHead": "6f00103af2fc970bbdcc8c2505413e42257afef4"
|
|
51
51
|
}
|
|
@@ -21,6 +21,8 @@
|
|
|
21
21
|
* OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
22
22
|
* SOFTWARE.
|
|
23
23
|
*/
|
|
24
|
+
|
|
25
|
+
import { HeadingProps } from '../props'
|
|
24
26
|
export default {
|
|
25
27
|
sectionProp: 'level',
|
|
26
28
|
propValues: {
|
|
@@ -32,26 +34,19 @@ export default {
|
|
|
32
34
|
'inherit'
|
|
33
35
|
]
|
|
34
36
|
},
|
|
35
|
-
|
|
36
|
-
getComponentProps: (props) => {
|
|
37
|
+
getComponentProps: () => {
|
|
37
38
|
return {
|
|
38
39
|
children: 'Hello this is a test heading',
|
|
39
40
|
margin: 'medium none'
|
|
40
41
|
}
|
|
41
42
|
},
|
|
42
|
-
|
|
43
|
-
getExampleProps: (props) => {
|
|
43
|
+
getExampleProps: (props: HeadingProps) => {
|
|
44
44
|
return {
|
|
45
|
-
background: ['primary-inverse', 'secondary-inverse'].includes(
|
|
45
|
+
background: ['primary-inverse', 'secondary-inverse'].includes(
|
|
46
|
+
props.color!
|
|
47
|
+
)
|
|
46
48
|
? 'primary-inverse'
|
|
47
49
|
: 'primary'
|
|
48
50
|
}
|
|
49
|
-
},
|
|
50
|
-
// @ts-expect-error ts-migrate(7006) FIXME: Parameter 'props' implicitly has an 'any' type.
|
|
51
|
-
filter: (props) => {
|
|
52
|
-
return (
|
|
53
|
-
(props.type === 'notification' && props.countUntil) ||
|
|
54
|
-
(props.standalone && props.placement !== 'start top')
|
|
55
|
-
)
|
|
56
51
|
}
|
|
57
52
|
}
|
package/src/Heading/index.tsx
CHANGED
|
@@ -40,6 +40,7 @@ import type { HeadingProps } from './props'
|
|
|
40
40
|
---
|
|
41
41
|
category: components
|
|
42
42
|
---
|
|
43
|
+
@tsProps
|
|
43
44
|
**/
|
|
44
45
|
@withStyle(generateStyle, generateComponentTheme)
|
|
45
46
|
@testable()
|
|
@@ -68,13 +69,11 @@ class Heading extends Component<HeadingProps> {
|
|
|
68
69
|
}
|
|
69
70
|
|
|
70
71
|
componentDidMount() {
|
|
71
|
-
|
|
72
|
-
this.props.makeStyles()
|
|
72
|
+
this.props.makeStyles?.()
|
|
73
73
|
}
|
|
74
74
|
|
|
75
75
|
componentDidUpdate() {
|
|
76
|
-
|
|
77
|
-
this.props.makeStyles()
|
|
76
|
+
this.props.makeStyles?.()
|
|
78
77
|
}
|
|
79
78
|
|
|
80
79
|
render() {
|
package/src/Heading/props.ts
CHANGED
|
@@ -42,17 +42,41 @@ import type {
|
|
|
42
42
|
type HeadingLevel<U extends keyof JSX.IntrinsicElements> = U
|
|
43
43
|
|
|
44
44
|
type HeadingOwnProps = {
|
|
45
|
+
/**
|
|
46
|
+
* The text content of the Heading
|
|
47
|
+
*/
|
|
45
48
|
children?: React.ReactNode // TODO: childrenOrValue or is it even needed?
|
|
49
|
+
/**
|
|
50
|
+
* Add a top- or bottom-border to the Heading
|
|
51
|
+
*/
|
|
46
52
|
border?: 'none' | 'top' | 'bottom'
|
|
53
|
+
/**
|
|
54
|
+
* The font color to render
|
|
55
|
+
*/
|
|
47
56
|
color?:
|
|
48
57
|
| 'primary'
|
|
49
58
|
| 'secondary'
|
|
50
59
|
| 'primary-inverse'
|
|
51
60
|
| 'secondary-inverse'
|
|
52
61
|
| 'inherit'
|
|
62
|
+
/**
|
|
63
|
+
* The *visual* appearance of the Heading: h1 is largest; h5 is smallest.
|
|
64
|
+
*/
|
|
53
65
|
level?: HeadingLevel<'h1' | 'h2' | 'h3' | 'h4' | 'h5'> | 'reset'
|
|
66
|
+
/**
|
|
67
|
+
* Choose the element Heading should render as. Will default to the `level` prop
|
|
68
|
+
* if not specified.
|
|
69
|
+
*/
|
|
54
70
|
as?: AsElementType
|
|
71
|
+
/**
|
|
72
|
+
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
73
|
+
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
74
|
+
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
75
|
+
*/
|
|
55
76
|
margin?: Spacing
|
|
77
|
+
/**
|
|
78
|
+
* Provides a ref to the underlying HTML element
|
|
79
|
+
*/
|
|
56
80
|
elementRef?: (element: Element | null) => void
|
|
57
81
|
}
|
|
58
82
|
|
|
@@ -67,17 +91,8 @@ type HeadingProps = HeadingOwnProps &
|
|
|
67
91
|
type HeadingStyle = ComponentStyle<'heading'>
|
|
68
92
|
|
|
69
93
|
const propTypes: PropValidators<PropKeys> = {
|
|
70
|
-
/**
|
|
71
|
-
* Add a top- or bottom-border to the Heading
|
|
72
|
-
*/
|
|
73
94
|
border: PropTypes.oneOf(['none', 'top', 'bottom']),
|
|
74
|
-
/**
|
|
75
|
-
* The text content of the Heading
|
|
76
|
-
*/
|
|
77
95
|
children: childrenOrValue,
|
|
78
|
-
/**
|
|
79
|
-
* The font color to render
|
|
80
|
-
*/
|
|
81
96
|
color: PropTypes.oneOf([
|
|
82
97
|
'primary',
|
|
83
98
|
'secondary',
|
|
@@ -85,24 +100,9 @@ const propTypes: PropValidators<PropKeys> = {
|
|
|
85
100
|
'secondary-inverse',
|
|
86
101
|
'inherit'
|
|
87
102
|
]),
|
|
88
|
-
/**
|
|
89
|
-
* The *visual* appearance of the Heading: h1 is largest; h5 is smallest.
|
|
90
|
-
*/
|
|
91
103
|
level: PropTypes.oneOf(['h1', 'h2', 'h3', 'h4', 'h5', 'reset']),
|
|
92
|
-
/**
|
|
93
|
-
* Choose the element Heading should render as. Will default to the `level` prop
|
|
94
|
-
* if not specified.
|
|
95
|
-
*/
|
|
96
104
|
as: PropTypes.elementType, // eslint-disable-line react/require-default-props
|
|
97
|
-
/**
|
|
98
|
-
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
99
|
-
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
100
|
-
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
101
|
-
*/
|
|
102
105
|
margin: ThemeablePropTypes.spacing,
|
|
103
|
-
/**
|
|
104
|
-
* Provides a ref to the underlying HTML element
|
|
105
|
-
*/
|
|
106
106
|
elementRef: PropTypes.func
|
|
107
107
|
}
|
|
108
108
|
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
+
import { HeadingProps } from '../props';
|
|
1
2
|
declare const _default: {
|
|
2
3
|
sectionProp: string;
|
|
3
4
|
propValues: {
|
|
4
5
|
color: string[];
|
|
5
6
|
};
|
|
6
|
-
getComponentProps: (
|
|
7
|
+
getComponentProps: () => {
|
|
7
8
|
children: string;
|
|
8
9
|
margin: string;
|
|
9
10
|
};
|
|
10
|
-
getExampleProps: (props:
|
|
11
|
+
getExampleProps: (props: HeadingProps) => {
|
|
11
12
|
background: string;
|
|
12
13
|
};
|
|
13
|
-
filter: (props: any) => any;
|
|
14
14
|
};
|
|
15
15
|
export default _default;
|
|
16
16
|
//# sourceMappingURL=Heading.examples.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Heading.examples.d.ts","sourceRoot":"","sources":["../../../src/Heading/__examples__/Heading.examples.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Heading.examples.d.ts","sourceRoot":"","sources":["../../../src/Heading/__examples__/Heading.examples.ts"],"names":[],"mappings":"AAwBA,OAAO,EAAE,YAAY,EAAE,MAAM,UAAU,CAAA;;;;;;;;;;6BAkBZ,YAAY;;;;AAjBvC,wBA0BC"}
|
package/types/Heading/index.d.ts
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Heading/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Heading/index.tsx"],"names":[],"mappings":"AAuBA,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAMjC,OAAO,EAAa,GAAG,EAAE,MAAM,sBAAsB,CAAA;AAMrD,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,SAAS,CAAA;AAE3C;;;;;GAKG;AACH,cAEM,OAAQ,SAAQ,SAAS,CAAC,YAAY,CAAC;IAC3C,MAAM,CAAC,QAAQ,CAAC,WAAW,aAAY;IAEvC,MAAM,CAAC,SAAS;;;;;;;;OAAY;IAC5B,MAAM,CAAC,YAAY;;;;;;;;SAAe;IAClC,MAAM,CAAC,YAAY;;;;;MAKT;IAEV,GAAG,EAAE,OAAO,GAAG,IAAI,CAAO;IAE1B,SAAS,OAAQ,OAAO,GAAG,IAAI,UAQ9B;IAED,iBAAiB;IAIjB,kBAAkB;IAIlB,MAAM;CAgCP;AAED,eAAe,OAAO,CAAA;AACtB,OAAO,EAAE,OAAO,EAAE,CAAA"}
|
package/types/Heading/props.d.ts
CHANGED
|
@@ -3,12 +3,36 @@ import type { AsElementType, PropValidators, HeadingTheme, OtherHTMLAttributes }
|
|
|
3
3
|
import type { Spacing, WithStyleProps, ComponentStyle } from '@instructure/emotion';
|
|
4
4
|
declare type HeadingLevel<U extends keyof JSX.IntrinsicElements> = U;
|
|
5
5
|
declare type HeadingOwnProps = {
|
|
6
|
+
/**
|
|
7
|
+
* The text content of the Heading
|
|
8
|
+
*/
|
|
6
9
|
children?: React.ReactNode;
|
|
10
|
+
/**
|
|
11
|
+
* Add a top- or bottom-border to the Heading
|
|
12
|
+
*/
|
|
7
13
|
border?: 'none' | 'top' | 'bottom';
|
|
14
|
+
/**
|
|
15
|
+
* The font color to render
|
|
16
|
+
*/
|
|
8
17
|
color?: 'primary' | 'secondary' | 'primary-inverse' | 'secondary-inverse' | 'inherit';
|
|
18
|
+
/**
|
|
19
|
+
* The *visual* appearance of the Heading: h1 is largest; h5 is smallest.
|
|
20
|
+
*/
|
|
9
21
|
level?: HeadingLevel<'h1' | 'h2' | 'h3' | 'h4' | 'h5'> | 'reset';
|
|
22
|
+
/**
|
|
23
|
+
* Choose the element Heading should render as. Will default to the `level` prop
|
|
24
|
+
* if not specified.
|
|
25
|
+
*/
|
|
10
26
|
as?: AsElementType;
|
|
27
|
+
/**
|
|
28
|
+
* Valid values are `0`, `none`, `auto`, `xxx-small`, `xx-small`, `x-small`,
|
|
29
|
+
* `small`, `medium`, `large`, `x-large`, `xx-large`. Apply these values via
|
|
30
|
+
* familiar CSS-like shorthand. For example: `margin="small auto large"`.
|
|
31
|
+
*/
|
|
11
32
|
margin?: Spacing;
|
|
33
|
+
/**
|
|
34
|
+
* Provides a ref to the underlying HTML element
|
|
35
|
+
*/
|
|
12
36
|
elementRef?: (element: Element | null) => void;
|
|
13
37
|
};
|
|
14
38
|
declare type PropKeys = keyof HeadingOwnProps;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Heading/props.ts"],"names":[],"mappings":";AA6BA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,YAAY,EACZ,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,IAAI,CAAC,CAAA;AAE5D,aAAK,eAAe,GAAG;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IAClC,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,iBAAiB,GACjB,mBAAmB,GACnB,SAAS,CAAA;IACb,KAAK,CAAC,EAAE,YAAY,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,OAAO,CAAA;IAChE,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,eAAe,CAAA;AAErC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,YAAY,GAAG,eAAe,GACjC,cAAc,CAAC,YAAY,EAAE,YAAY,CAAC,GAC1C,mBAAmB,CAAC,eAAe,CAAC,CAAA;AAEtC,aAAK,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAE7C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,
|
|
1
|
+
{"version":3,"file":"props.d.ts","sourceRoot":"","sources":["../../src/Heading/props.ts"],"names":[],"mappings":";AA6BA,OAAO,KAAK,EACV,aAAa,EACb,cAAc,EACd,YAAY,EACZ,mBAAmB,EACpB,MAAM,2BAA2B,CAAA;AAClC,OAAO,KAAK,EACV,OAAO,EACP,cAAc,EACd,cAAc,EACf,MAAM,sBAAsB,CAAA;AAE7B,aAAK,YAAY,CAAC,CAAC,SAAS,MAAM,GAAG,CAAC,iBAAiB,IAAI,CAAC,CAAA;AAE5D,aAAK,eAAe,GAAG;IACrB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,QAAQ,CAAA;IAClC;;OAEG;IACH,KAAK,CAAC,EACF,SAAS,GACT,WAAW,GACX,iBAAiB,GACjB,mBAAmB,GACnB,SAAS,CAAA;IACb;;OAEG;IACH,KAAK,CAAC,EAAE,YAAY,CAAC,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC,GAAG,OAAO,CAAA;IAChE;;;OAGG;IACH,EAAE,CAAC,EAAE,aAAa,CAAA;IAClB;;;;OAIG;IACH,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB;;OAEG;IACH,UAAU,CAAC,EAAE,CAAC,OAAO,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED,aAAK,QAAQ,GAAG,MAAM,eAAe,CAAA;AAErC,aAAK,eAAe,GAAG,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAA;AAEhD,aAAK,YAAY,GAAG,eAAe,GACjC,cAAc,CAAC,YAAY,EAAE,YAAY,CAAC,GAC1C,mBAAmB,CAAC,eAAe,CAAC,CAAA;AAEtC,aAAK,YAAY,GAAG,cAAc,CAAC,SAAS,CAAC,CAAA;AAE7C,QAAA,MAAM,SAAS,EAAE,cAAc,CAAC,QAAQ,CAcvC,CAAA;AAED,QAAA,MAAM,YAAY,EAAE,eAQnB,CAAA;AAED,YAAY,EAAE,YAAY,EAAE,YAAY,EAAE,CAAA;AAC1C,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAA"}
|