UNPKG

@gold.au/headings

Version:

Class styles for display headings.

gold.designsystemau.org/components/headings

designsystemau/gold-design-system

141 lines (78 loc) ā€¢ 3.52 kB
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
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
@gold.au/headings ============ > Class styles for display headings. ## Contents * [Install](#install) * [Usage](#usage) * [Dependency graph](#dependency-graph) * [Tests](#tests) * [Release History](#release-history) * [License](#license) ---------------------------------------------------------------------------------------------------------------------------------------------------------------- ## Install ```shell yarn add @gold.au/headings ``` ```shell npm install @gold.au/headings ``` **[ā¬† back to top](#contents)** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- ## Usage * [React](#react) **[ā¬† back to top](#contents)** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- ### React Usage: ```jsx import AUheading from './headings.js'; <AUheading size="xl" level="2">Display 2 on h2</AUheading> ``` All props: ```jsx <AUheading size="xl" {/* The display size, 'xs', 'sm', 'md', 'lg', 'xl', 'xxl', 'xxxl' */} level="1" {/* The semantic headline tag level, h1-h6 */} attributeOptions {/* Any other attribute options */} /> ``` _(šŸ’” additional props are spread onto the component)_ For more details have a look at the [usage example](https://github.com/designsystemau/gold-design-system/tree/main/packages/headings/tests/react/index.js). **[ā¬† back to top](#contents)** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- ## Dependency graph ```shell /headings ā””ā”€ /core ``` **[ā¬† back to top](#contents)** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- ## Tests The visual test: https://auds.service.gov.au/packages/headings/tests/site/ **[ā¬† back to top](#contents)** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- ## Release History * v2.0.12 - Update core package dependency to use the latest version * v2.0.11 - Remove --save-dev flag from readme instructions * v2.0.10 - Removed unused `Fragment` React import * v2.0.9 - Removed uikit references * v2.0.8 - Update dependencies * v2.0.7 - Removing web pack dev server, updating dependencies * v2.0.6 - Fixed build scripts for Windows * v2.0.5 - Replace node-sass with sass * v2.0.4 - Change npm run watch browser-sync location * v2.0.3 - Update dependencies * v2.0.2 - Change headings link * v2.0.1 - Fix dependencies * v2.0.0 - Change to focus colour and border/muted color mix * v1.0.0 - Moved to AU namespace, added new color themes and spacing, moved to system fonts * v0.3.0 - Added pancake-react plugin, ES5 main file * v0.2.0 - Added react component * v0.1.0 - šŸ’„ Initial version **[ā¬† back to top](#contents)** ---------------------------------------------------------------------------------------------------------------------------------------------------------------- ## License Copyright (c) Commonwealth of Australia. Licensed under [MIT](https://raw.githubusercontent.com/govau/design-system-components/packages/core/master/LICENSE). **[ā¬† back to top](#contents)** # };