@instructure/ui-heading 8.12.1-snapshot.7 → 8.13.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/CHANGELOG.md +4 -0
- package/es/Heading/__examples__/Heading.examples.js +1 -4
- package/es/Heading/index.js +18 -13
- package/es/Heading/props.js +0 -30
- package/lib/Heading/__examples__/Heading.examples.js +1 -4
- package/lib/Heading/index.js +19 -14
- package/lib/Heading/props.js +1 -31
- package/package.json +13 -14
- 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
- package/LICENSE.md +0 -27
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,10 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
# [8.13.0](https://github.com/instructure/instructure-ui/compare/v8.12.0...v8.13.0) (2021-12-01)
|
|
7
|
+
|
|
8
|
+
**Note:** Version bump only for package @instructure/ui-heading
|
|
9
|
+
|
|
6
10
|
# [8.12.0](https://github.com/instructure/instructure-ui/compare/v8.11.1...v8.12.0) (2021-11-17)
|
|
7
11
|
|
|
8
12
|
**Note:** Version bump only for package @instructure/ui-heading
|
|
@@ -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,10 +41,11 @@ 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
|
-
constructor(
|
|
47
|
-
super(...
|
|
47
|
+
constructor() {
|
|
48
|
+
super(...arguments);
|
|
48
49
|
this.ref = null;
|
|
49
50
|
|
|
50
51
|
this.handleRef = el => {
|
|
@@ -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
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.default = exports.Heading = void 0;
|
|
9
9
|
|
|
10
10
|
var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
|
|
11
11
|
|
|
@@ -35,10 +35,11 @@ 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
|
-
constructor(
|
|
41
|
-
super(...
|
|
41
|
+
constructor() {
|
|
42
|
+
super(...arguments);
|
|
42
43
|
this.ref = null;
|
|
43
44
|
|
|
44
45
|
this.handleRef = el => {
|
|
@@ -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
|
@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", {
|
|
6
6
|
value: true
|
|
7
7
|
});
|
|
8
|
-
exports.
|
|
8
|
+
exports.propTypes = exports.allowedProps = void 0;
|
|
9
9
|
|
|
10
10
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
11
11
|
|
|
@@ -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.
|
|
3
|
+
"version": "8.13.0",
|
|
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.
|
|
29
|
-
"@instructure/emotion": "8.
|
|
30
|
-
"@instructure/shared-types": "8.
|
|
31
|
-
"@instructure/ui-prop-types": "8.
|
|
32
|
-
"@instructure/ui-react-utils": "8.
|
|
33
|
-
"@instructure/ui-testable": "8.
|
|
34
|
-
"@instructure/ui-view": "8.
|
|
28
|
+
"@instructure/console": "8.13.0",
|
|
29
|
+
"@instructure/emotion": "8.13.0",
|
|
30
|
+
"@instructure/shared-types": "8.13.0",
|
|
31
|
+
"@instructure/ui-prop-types": "8.13.0",
|
|
32
|
+
"@instructure/ui-react-utils": "8.13.0",
|
|
33
|
+
"@instructure/ui-testable": "8.13.0",
|
|
34
|
+
"@instructure/ui-view": "8.13.0",
|
|
35
35
|
"prop-types": "^15"
|
|
36
36
|
},
|
|
37
37
|
"devDependencies": {
|
|
38
|
-
"@instructure/ui-babel-preset": "8.
|
|
39
|
-
"@instructure/ui-test-locator": "8.
|
|
40
|
-
"@instructure/ui-test-utils": "8.
|
|
41
|
-
"@instructure/ui-themes": "8.
|
|
38
|
+
"@instructure/ui-babel-preset": "8.13.0",
|
|
39
|
+
"@instructure/ui-test-locator": "8.13.0",
|
|
40
|
+
"@instructure/ui-test-utils": "8.13.0",
|
|
41
|
+
"@instructure/ui-themes": "8.13.0"
|
|
42
42
|
},
|
|
43
43
|
"peerDependencies": {
|
|
44
44
|
"react": ">=16.8 <=17"
|
|
@@ -46,6 +46,5 @@
|
|
|
46
46
|
"publishConfig": {
|
|
47
47
|
"access": "public"
|
|
48
48
|
},
|
|
49
|
-
"sideEffects": false
|
|
50
|
-
"gitHead": "1e7ac821932a91fe9ef761c96f747c7ea1f3925a"
|
|
49
|
+
"sideEffects": false
|
|
51
50
|
}
|
|
@@ -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"}
|
package/LICENSE.md
DELETED
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: The MIT License (MIT)
|
|
3
|
-
category: Getting Started
|
|
4
|
-
order: 9
|
|
5
|
-
---
|
|
6
|
-
|
|
7
|
-
# The MIT License (MIT)
|
|
8
|
-
|
|
9
|
-
Copyright (c) 2015 Instructure, Inc.
|
|
10
|
-
|
|
11
|
-
**Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
12
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
13
|
-
in the Software without restriction, including without limitation the rights
|
|
14
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
15
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
16
|
-
furnished to do so, subject to the following conditions.**
|
|
17
|
-
|
|
18
|
-
The above copyright notice and this permission notice shall be included in all
|
|
19
|
-
copies or substantial portions of the Software.
|
|
20
|
-
|
|
21
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
22
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
23
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
24
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
25
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
26
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
27
|
-
SOFTWARE.
|