Skip to content

Commit 7588836

Browse files
nasdannasdan
committed
add titles
1 parent e750d02 commit 7588836

File tree

12 files changed

+132
-31
lines changed

12 files changed

+132
-31
lines changed

‎.github/workflows/ci.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
name: Publish Packages
1+
name: CI
22

33
on:
44
pull_request:

‎examples/basic-with-apply/src/playground.module.css

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
1+
body {
2+
font-family: Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
3+
}
4+
5+
h1,
6+
h2,
7+
p {
8+
margin: 0;
9+
}
10+
111
.root {
212
display: grid;
313
grid-template-areas:
14+
'title title'
15+
'description description'
416
'focal-point-subtitle result-subtitle'
517
'focal-point result';
618
row-gap: 1rem;
719
column-gap: 10rem;
820
grid-template-columns: auto 1fr;
921
}
1022

11-
h2 {
12-
font-family: Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
13-
margin: 0;
14-
font-size: 1.5rem;
23+
.title {
24+
grid-area: title;
25+
font-size: 2rem;
1526
font-weight: bold;
1627
text-align: center;
1728
}
1829

30+
.description {
31+
grid-area: description;
32+
text-align: center;
33+
}
34+
1935
.focal-point-subtitle {
2036
grid-area: focal-point-subtitle;
37+
font-size: 1.5rem;
38+
font-weight: bold;
39+
text-align: center;
2140
}
2241

2342
.focal-point {
@@ -49,6 +68,9 @@ h2 {
4968

5069
.result-subtitle {
5170
grid-area: result-subtitle;
71+
font-size: 1.5rem;
72+
font-weight: bold;
73+
text-align: center;
5274
}
5375

5476
.result {

‎examples/basic-with-apply/src/playground.tsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,12 @@ export const Playground: React.FC<Props> = props => {
2121

2222
return (
2323
<div className={classes.root}>
24-
<h2 className={classes.focalPointSubtitle}>Image focal point</h2>
24+
<h1 className={classes.title}>Basic with apply button</h1>
25+
<p className={classes.description}>
26+
This example is the same as the basic example, but it adds a button to apply the focal point changes to the
27+
image.
28+
</p>
29+
<h2 className={classes.focalPointSubtitle}>Image focal point</h2>
2530
<form className={classes.focalPoint} onSubmit={handleSubmit}>
2631
{children}
2732
<button className={classes.submitButton} type="submit">

‎examples/basic/README.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ const App = () => {
2828
return (
2929
+ <ImageFocalPoint
3030
+ src="your-image-src"
31-
+ onClick={(focalPoint) => {
31+
+ onChange={(focalPoint) => {
3232
+ // Whatever you want to do when the user clicks on the image
3333
+ }}
3434
+ />

‎examples/basic/src/playground.module.css

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
1+
body {
2+
font-family: Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
3+
}
4+
5+
h1,
6+
h2,
7+
p {
8+
margin: 0;
9+
}
10+
111
.root {
212
display: grid;
313
grid-template-areas:
14+
'title title'
15+
'description description'
416
'focal-point-subtitle result-subtitle'
517
'focal-point result';
618
row-gap: 1rem;
719
column-gap: 10rem;
820
grid-template-columns: auto 1fr;
921
}
1022

11-
h2 {
12-
font-family: Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
13-
margin: 0;
14-
font-size: 1.5rem;
23+
.title {
24+
grid-area: title;
25+
font-size: 2rem;
1526
font-weight: bold;
1627
text-align: center;
1728
}
1829

30+
.description {
31+
grid-area: description;
32+
text-align: center;
33+
}
34+
1935
.focal-point-subtitle {
2036
grid-area: focal-point-subtitle;
37+
font-size: 1.5rem;
38+
font-weight: bold;
39+
text-align: center;
2140
}
2241

2342
.focal-point {
@@ -26,6 +45,9 @@ h2 {
2645

2746
.result-subtitle {
2847
grid-area: result-subtitle;
48+
font-size: 1.5rem;
49+
font-weight: bold;
50+
text-align: center;
2951
}
3052

3153
.result {

‎examples/basic/src/playground.tsx

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,10 @@ export const Playground: React.FC<Props> = props => {
1313

1414
return (
1515
<div className={classes.root}>
16+
<h1 className={classes.title}>Basic</h1>
17+
<p className={classes.description}>
18+
This example shows how to use the library with the minimal properties (<i>src</i> and <i>onChange</i>)
19+
</p>
1620
<h2 className={classes.focalPointSubtitle}>Image focal point</h2>
1721
<div className={classes.focalPoint}>{children}</div>
1822

‎examples/controlled/README.md

Lines changed: 7 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,13 @@ import { ImageFocalPoint } from '@lemoncode/react-image-focal-point';
1313
const App = () => {
1414
return (
1515
<ImageFocalPoint
16-
src="your-image-src"
17-
onClick={(newFocalPoint) => {
18-
// Whatever you want to do when the user clicks on the image
19-
}}
20-
/>
16+
src="your-image-src"
17+
onChange={newFocalPoint => {
18+
// Whatever you want to do when the user clicks on the image
19+
}}
20+
/>
2121
);
22-
}
23-
22+
};
2423
```
2524

2625
Create a state to provide the initial focal point values and store the new ones:
@@ -35,7 +34,7 @@ const App = () => {
3534
<ImageFocalPoint
3635
src="your-image-src"
3736
+ focalPoint={focalPoint}
38-
onClick={(newFocalPoint) => {
37+
onChange={(newFocalPoint) => {
3938
+ setFocalPoint(newFocalPoint);
4039
}}
4140
/>
@@ -59,4 +58,3 @@ const App = () => {
5958
height="36"
6059
/>
6160
</a>
62-

‎examples/controlled/src/playground.module.css

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,42 @@
1+
body {
2+
font-family: Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
3+
}
4+
5+
h1,
6+
h2,
7+
p {
8+
margin: 0;
9+
}
10+
111
.root {
212
display: grid;
313
grid-template-areas:
14+
'title title'
15+
'description description'
416
'focal-point-subtitle result-subtitle'
517
'focal-point result';
618
row-gap: 1rem;
719
column-gap: 10rem;
820
grid-template-columns: auto 1fr;
921
}
1022

11-
h2 {
12-
font-family: Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
13-
margin: 0;
14-
font-size: 1.5rem;
23+
.title {
24+
grid-area: title;
25+
font-size: 2rem;
1526
font-weight: bold;
1627
text-align: center;
1728
}
1829

30+
.description {
31+
grid-area: description;
32+
text-align: center;
33+
}
34+
1935
.focal-point-subtitle {
2036
grid-area: focal-point-subtitle;
37+
font-size: 1.5rem;
38+
font-weight: bold;
39+
text-align: center;
2140
}
2241

2342
.focal-point {
@@ -26,6 +45,9 @@ h2 {
2645

2746
.result-subtitle {
2847
grid-area: result-subtitle;
48+
font-size: 1.5rem;
49+
font-weight: bold;
50+
text-align: center;
2951
}
3052

3153
.result {

‎examples/controlled/src/playground.tsx

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,8 @@ export const Playground: React.FC<Props> = props => {
1313

1414
return (
1515
<div className={classes.root}>
16+
<h1 className={classes.title}>Controlled</h1>
17+
<p className={classes.description}>This example shows how to provide some initial focal point values.</p>
1618
<h2 className={classes.focalPointSubtitle}>Image focal point</h2>
1719
<div className={classes.focalPoint}>{children}</div>
1820

‎examples/styled/README.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const App = () => {
1414
return (
1515
<ImageFocalPoint
1616
src="your-image-src"
17-
onClick={(newFocalPoint) => {
17+
onChange={(newFocalPoint) => {
1818
// Whatever you want to do when the user clicks on the image
1919
}}
2020
/>
@@ -47,7 +47,7 @@ const App = () => {
4747
<ImageFocalPoint
4848
+ className="image-focal-point"
4949
src="your-image-src"
50-
onClick={(newFocalPoint) => {
50+
onChange={(newFocalPoint) => {
5151
// Whatever you want to do when the user clicks on the image
5252
}}
5353
/>
@@ -93,7 +93,7 @@ const App = () => {
9393
+ focalPoint: 'focal-point',
9494
+ }}
9595
src="your-image-src"
96-
onClick={(newFocalPoint) => {
96+
onChange={(newFocalPoint) => {
9797
// Whatever you want to do when the user clicks on the image
9898
}}
9999
/>

0 commit comments

Comments
 (0)