Skip to content

Commit f1664d3

Browse files
ChrisUserChrisUser
committed
Update css classes naming convention
1 parent b27b952 commit f1664d3

File tree

4 files changed

+127
-74
lines changed

4 files changed

+127
-74
lines changed

‎README.md‎

Lines changed: 37 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -110,32 +110,58 @@ You must import the style directly from the package directory, like this:
110110
import "react-usage-bar/build/index.css"
111111
```
112112

113-
The main css classes are the following (**Spoiler**: There are more of them):
113+
The project variables are:
114114

115-
### `.UsageBar`
115+
- `--text-color`
116+
- `--background-tooltip-color`
117+
- `--background-bar-color`
116118

117-
The main div of the component.
119+
The main css classes are the following:
118120

119-
### `.UsageBar__error`
121+
### `.u-UsageBar__error`
120122

121123
The error message.
122124

123-
### `.UsageBar__bar`
125+
### `.u-UsageBar-light`
126+
127+
The class that contains all the colors for the light mode.
128+
129+
### `.u-UsageBar-dark`
130+
131+
The class that contains all the colors for the dark mode.
132+
133+
### `.c-UsageBar` | `.c-UsageBar__compact`
134+
135+
The main div of the component.
136+
137+
### `.o-UsageBar__bar` | `.o-UsageBar__compact__bar`
124138

125139
The actual bar of the component.
126140

127-
### `.UsageBar__bar__element`
141+
### `.o-UsageBar__bar__element`
128142

129-
The single item represented in the bar.
143+
The single item represented in the bar. This class is vastly used.
130144

131-
### `.UsageBar__bar__element--tooltip`
145+
### `.o-UsageBar__bar__tooltip`
132146

133147
The tooltip of the item in which are written all the textual info.
134148

135-
- `.UsageBar__bar__element--tooltip--element__percentage` - Used to control the style of the percentage lables.
149+
- `.o-UsageBar__bar__tooltip__percentage` - Used to control the style of the percentage lables.
136150

137151
- `::after` - Is used to make the triangular shape on the bottom (or top) of the tooltips.
138152

153+
### `.o-UsageBar__bar__elements__labels__container`
154+
155+
Used in the compact layout to list all the labels for the elements.
156+
157+
### `.o-UsageBar__bar__elements__label`
158+
159+
The labels for the elements of the bar.
160+
161+
### `.o-UsageBar__bar__elements__label--dot`
162+
163+
The colored dot before the label of the elements.
164+
139165
<br>
140166

141167
## 📖 Docs
@@ -152,6 +178,8 @@ $ yarn storybook
152178

153179
If you have a suggestion that would make this component better feel free to open a pull request or create an issue for any bug you find.
154180

181+
<br>
182+
155183
## Licence
156184

157185
React Usage Bar is [MIT licensed](https://github.com/ChrisUser/react-usage-bar/blob/master/LICENSE).

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "react-usage-bar",
3-
"version": "1.1.4",
3+
"version": "1.1.5",
44
"description": "Usage bar, graphic component for React",
55
"main": "build/index.js",
66
"typings": "build/index.d.ts",

‎src/UsageBar.tsx‎

Lines changed: 50 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ const UsageBar: React.FC<Props> = ({
3737
"#FB8500",
3838
"#1B4332",
3939
"#795548",
40-
"#DC2F02"
40+
"#DC2F02",
4141
]
4242
const darkColors: string[] = [
4343
"#4CC9F0",
@@ -49,32 +49,42 @@ const UsageBar: React.FC<Props> = ({
4949
"#BD96EE",
5050
"#FF85A1",
5151
"#4AD66D",
52-
"#BEBFC4"
52+
"#BEBFC4",
5353
]
5454

55-
const uncorrectValues = React.useMemo(() => total < items.reduce((tot: number, element: Item) => tot + element.value, 0), [items, total])
55+
const uncorrectValues = React.useMemo(
56+
() =>
57+
total <
58+
items.reduce((tot: number, element: Item) => tot + element.value, 0),
59+
[items, total]
60+
)
5661

57-
const getPercentageValue = React.useCallback((value: number) => ((value / total) * 100).toFixed(0), [total])
62+
const getPercentageValue = React.useCallback(
63+
(value: number) => ((value / total) * 100).toFixed(0),
64+
[total]
65+
)
5866

5967
React.useEffect(() => {
60-
if(!uncorrectValues) {
68+
if (!uncorrectValues) {
6169
setColors()
6270
}
6371
}, [items])
6472

6573
React.useEffect(() => {
66-
if(!uncorrectValues) {
67-
setFormattedItems(items.map((item: Item, index: number) => {
68-
if(item.color) return item
69-
else return {...item, color: usedColors[index]}
70-
}))
74+
if (!uncorrectValues) {
75+
setFormattedItems(
76+
items.map((item: Item, index: number) => {
77+
if (item.color) return item
78+
else return { ...item, color: usedColors[index] }
79+
})
80+
)
7181
}
7282
}, [items, usedColors])
7383

7484
const setColors = React.useCallback(() => {
7585
let selectedColors: string[] = []
7686
const colorsToPickFrom = darkMode ? darkColors : lightColors
77-
for(let i = 0; i < items.length; i++) {
87+
for (let i = 0; i < items.length; i++) {
7888
const randIndex = Math.floor(Math.random() * items.length)
7989
const color = colorsToPickFrom[randIndex]
8090
selectedColors.push(color)
@@ -86,60 +96,71 @@ const UsageBar: React.FC<Props> = ({
8696
const renderUsageBar = React.useMemo(() => {
8797
if (compactLayout) {
8898
return (
89-
<div id="Usage--Bar--Element" className={`UsageBar Compact__UsageBar ${darkMode ? 'UsageBar__dark' : 'UsageBar__light'}`}>
90-
<div className="UsageBar__bar UsageBar__bar__compact__bar">
99+
<div
100+
className={`c-UsageBar c-UsageBar__compact ${
101+
darkMode ? "u-UsageBar-dark" : "u-UsageBar-light"
102+
}`}
103+
>
104+
<div className="o-UsageBar__bar o-UsageBar__compact__bar">
91105
{formattedItems.map((element: Item, index: number) => {
92106
return (
93107
<div
94108
key={index}
95-
className="UsageBar__bar__element"
109+
className="o-UsageBar__bar__element"
96110
style={{
97111
width: `${getPercentageValue(element.value)}%`,
98112
backgroundColor: element.color,
99113
}}
100114
/>
101-
)}
102-
)}
115+
)
116+
})}
103117
</div>
104118
{!removeLabels && (
105-
<div className="UsageBar__bar__elements__labels__container">
119+
<div className="o-UsageBar__bar__elements__labels__container">
106120
{formattedItems.map((element: Item, index: number) => {
107121
return (
108-
<div key={index} className="UsageBar__bar__elements__label">
109-
<div className="UsageBar__bar__elements__label--dot" style={{backgroundColor: element.color}} />
122+
<div key={index} className="o-UsageBar__bar__elements__label">
123+
<div
124+
className="o-UsageBar__bar__elements__label--dot"
125+
style={{ backgroundColor: element.color }}
126+
/>
110127
<span>{element.name}</span>
111128
{showPercentage && (
112-
<span className="UsageBar__bar__element--tooltip--element__percentage">
129+
<span className="o-UsageBar__bar__tooltip__percentage">
113130
{getPercentageValue(element.value) + "%"}
114131
</span>
115132
)}
116133
</div>
117-
)}
118-
)}
134+
)
135+
})}
119136
</div>
120137
)}
121138
</div>
122139
)
123140
}
124-
141+
125142
return (
126-
<div id="Usage--Bar--Element" className={`UsageBar ${darkMode ? 'UsageBar__dark' : 'UsageBar__light'}`}>
127-
<div className="UsageBar__bar">
143+
<div
144+
className={`c-UsageBar ${
145+
darkMode ? "u-UsageBar-dark" : "u-UsageBar-light"
146+
}`}
147+
>
148+
<div className="o-UsageBar__bar">
128149
{formattedItems.map((element: Item, index: number) => {
129150
return (
130151
<div
131152
key={index}
132-
className="UsageBar__bar__element"
153+
className="o-UsageBar__bar__element"
133154
style={{
134155
width: `${getPercentageValue(element.value)}%`,
135156
backgroundColor: element.color,
136157
}}
137158
>
138159
{!removeLabels && (
139-
<div className="UsageBar__bar__element--tooltip">
160+
<div className="o-UsageBar__bar__tooltip">
140161
<span>{element.name}</span>
141162
{showPercentage && (
142-
<span className="UsageBar__bar__element--tooltip--element__percentage">
163+
<span className="o-UsageBar__bar__tooltip__percentage">
143164
{getPercentageValue(element.value) + "%"}
144165
</span>
145166
)}
@@ -155,7 +176,7 @@ const UsageBar: React.FC<Props> = ({
155176

156177
if (uncorrectValues)
157178
return (
158-
<span className="UsageBar__error">
179+
<span className="u-UsageBar__error">
159180
ERROR: Elements values exceed the total.
160181
</span>
161182
)

0 commit comments

Comments
 (0)