@oneblink/apps-react 6.9.0-beta.1 → 6.9.0-beta.3

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.
@@ -0,0 +1,186 @@
1
+ $validation-errors-border-radius: 8px;
2
+
3
+ .ob-validation-notification-wrapper {
4
+ position: fixed;
5
+ bottom: 1rem;
6
+ right: 1rem;
7
+ z-index: 31;
8
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
9
+ transition-duration: 300ms;
10
+ }
11
+
12
+ .ob-validation-color-transition {
13
+ transition-property: color;
14
+ transition-duration: inherit;
15
+ transition-timing-function: inherit;
16
+ }
17
+
18
+ .ob-validation-notification-card {
19
+ transition-property: transform, background-color;
20
+ transition-duration: inherit;
21
+ transition-timing-function: inherit;
22
+ border-radius: $validation-errors-border-radius;
23
+ max-height: 350px;
24
+ overflow-y: auto;
25
+ border-color: $danger;
26
+ border-width: 2px;
27
+ border-style: solid;
28
+ animation: pulse-animation 1.5s infinite;
29
+ @keyframes pulse-animation {
30
+ 0% {
31
+ box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.4);
32
+ }
33
+ 100% {
34
+ box-shadow: 0 0 0 16px rgba(255, 0, 0, 0);
35
+ }
36
+ }
37
+ }
38
+
39
+ // Card
40
+ .ob-validation-notification-card.is-expanded {
41
+ background-color: $white;
42
+ color: $black;
43
+ }
44
+
45
+ .ob-validation-notification-card.is-contracted {
46
+ background-color: $danger;
47
+ color: $white;
48
+ }
49
+
50
+ // Card Content
51
+ .ob-validation-notification-card-content {
52
+ transition-property: padding;
53
+ transition-duration: inherit;
54
+ transition-timing-function: inherit;
55
+ padding: 1rem;
56
+ padding-bottom: 1.5rem;
57
+ }
58
+ .is-contracted .ob-validation-notification-card-content {
59
+ padding-top: 0.5rem;
60
+ padding-bottom: 0.5rem;
61
+ }
62
+
63
+ // Card Content Header
64
+ .ob-validation-notification-card-header-wrapper {
65
+ display: flex;
66
+ width: 100%;
67
+ align-items: center;
68
+ justify-content: space-between;
69
+ }
70
+
71
+ .ob-validation-notification-card-header-title-wrapper {
72
+ display: flex;
73
+ align-items: center;
74
+ }
75
+
76
+ .ob-validation-notification-card-header-title-text {
77
+ font-weight: $weight-semibold;
78
+ }
79
+
80
+ .ob-validation-notification-card-header-title-icon {
81
+ margin-right: 0.5rem;
82
+ font-size: 22px;
83
+ }
84
+
85
+ // Card collapse
86
+ .ob-validation-notification-card-collapse-wrapper {
87
+ transition-property: width, opacity;
88
+ transition-duration: inherit;
89
+ transition-timing-function: inherit;
90
+ white-space: nowrap;
91
+ overflow-x: hidden;
92
+ }
93
+
94
+ .ob-validation-notification-wrapper .MuiCollapse-root {
95
+ transition-property: height;
96
+ transition-duration: inherit;
97
+ transition-timing-function: inherit;
98
+ }
99
+
100
+ .is-contracted .ob-validation-notification-card-collapse-wrapper {
101
+ // Allows for a perfectly smooth transition when the text size is unaltered by the browser.
102
+ width: 196px;
103
+ opacity: 0;
104
+ }
105
+ .is-expanded .ob-validation-notification-card-collapse-wrapper {
106
+ width: 300px;
107
+ opacity: 1;
108
+ }
109
+
110
+ // List
111
+ .ob-validation-notification-card-page-label {
112
+ font-weight: $weight-semibold;
113
+ font-size: 0.875rem;
114
+ }
115
+ .ob-validation-notification-card-page-label.is-not-first {
116
+ margin-top: 0.5rem;
117
+ }
118
+ .ob-validation-notification-card-list {
119
+ margin-top: 0.5rem;
120
+ border-radius: $validation-errors-border-radius;
121
+ }
122
+
123
+ // Items
124
+ .ob-validation-notification-card-item {
125
+ display: flex;
126
+ justify-content: space-between;
127
+ align-items: center;
128
+ padding: 0.5rem;
129
+ }
130
+ .ob-validation-notification-card-item.is-first {
131
+ border-top-left-radius: $validation-errors-border-radius;
132
+ border-top-right-radius: $validation-errors-border-radius;
133
+ }
134
+ .ob-validation-notification-card-item.is-last {
135
+ border-bottom-left-radius: $validation-errors-border-radius;
136
+ border-bottom-right-radius: $validation-errors-border-radius;
137
+ }
138
+
139
+ .ob-validation-notification-card-item-text {
140
+ white-space: nowrap;
141
+ font-size: 0.875rem;
142
+ }
143
+
144
+ .ob-validation-notification-card-item-text-error-message {
145
+ text-overflow: ellipsis;
146
+ }
147
+
148
+ .ob-validation-notification-card-item-icon {
149
+ margin-left: 0.5rem;
150
+ }
151
+
152
+ // Below desktop
153
+ @media only screen and (max-width: $desktop) {
154
+ .ob-bottom-navigation__content {
155
+ .ob-validation-notification-wrapper {
156
+ margin-bottom: 4rem;
157
+ }
158
+ }
159
+ }
160
+
161
+ // Mobile size
162
+ @media only screen and (max-width: $tablet) {
163
+ .ob-bottom-navigation__content {
164
+ .is-showing-pages {
165
+ .ob-validation-notification-wrapper {
166
+ margin-bottom: 7.5rem;
167
+ }
168
+ }
169
+ }
170
+
171
+ .ob-validation-notification-wrapper {
172
+ left: 1rem;
173
+ }
174
+
175
+ .is-contracted .ob-validation-notification-card-collapse-wrapper {
176
+ width: 100%;
177
+ }
178
+ .is-expanded .ob-validation-notification-card-collapse-wrapper {
179
+ width: 100%;
180
+ }
181
+ .section .ob-list.ob-validation-notification-card-list {
182
+ margin-right: unset;
183
+ margin-left: unset;
184
+ width: unset;
185
+ }
186
+ }
package/dist/styles.css CHANGED
@@ -9855,6 +9855,178 @@ textarea:disabled {
9855
9855
  }
9856
9856
  }
9857
9857
 
9858
+ .ob-validation-notification-wrapper {
9859
+ position: fixed;
9860
+ bottom: 1rem;
9861
+ right: 1rem;
9862
+ z-index: 31;
9863
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
9864
+ transition-duration: 300ms;
9865
+ }
9866
+
9867
+ .ob-validation-color-transition {
9868
+ transition-property: color;
9869
+ transition-duration: inherit;
9870
+ transition-timing-function: inherit;
9871
+ }
9872
+
9873
+ .ob-validation-notification-card {
9874
+ transition-property: transform, background-color;
9875
+ transition-duration: inherit;
9876
+ transition-timing-function: inherit;
9877
+ border-radius: 8px;
9878
+ max-height: 350px;
9879
+ overflow-y: auto;
9880
+ border-color: #e8113c;
9881
+ border-width: 2px;
9882
+ border-style: solid;
9883
+ animation: pulse-animation 1.5s infinite;
9884
+ }
9885
+ @keyframes pulse-animation {
9886
+ 0% {
9887
+ box-shadow: 0 0 0 0px rgba(255, 0, 0, 0.4);
9888
+ }
9889
+ 100% {
9890
+ box-shadow: 0 0 0 16px rgba(255, 0, 0, 0);
9891
+ }
9892
+ }
9893
+
9894
+ .ob-validation-notification-card.is-expanded {
9895
+ background-color: hsl(0, 0%, 100%);
9896
+ color: hsl(0, 0%, 4%);
9897
+ }
9898
+
9899
+ .ob-validation-notification-card.is-contracted {
9900
+ background-color: #e8113c;
9901
+ color: hsl(0, 0%, 100%);
9902
+ }
9903
+
9904
+ .ob-validation-notification-card-content {
9905
+ transition-property: padding;
9906
+ transition-duration: inherit;
9907
+ transition-timing-function: inherit;
9908
+ padding: 1rem;
9909
+ padding-bottom: 1.5rem;
9910
+ }
9911
+
9912
+ .is-contracted .ob-validation-notification-card-content {
9913
+ padding-top: 0.5rem;
9914
+ padding-bottom: 0.5rem;
9915
+ }
9916
+
9917
+ .ob-validation-notification-card-header-wrapper {
9918
+ display: flex;
9919
+ width: 100%;
9920
+ align-items: center;
9921
+ justify-content: space-between;
9922
+ }
9923
+
9924
+ .ob-validation-notification-card-header-title-wrapper {
9925
+ display: flex;
9926
+ align-items: center;
9927
+ }
9928
+
9929
+ .ob-validation-notification-card-header-title-text {
9930
+ font-weight: 600;
9931
+ }
9932
+
9933
+ .ob-validation-notification-card-header-title-icon {
9934
+ margin-right: 0.5rem;
9935
+ font-size: 22px;
9936
+ }
9937
+
9938
+ .ob-validation-notification-card-collapse-wrapper {
9939
+ transition-property: width, opacity;
9940
+ transition-duration: inherit;
9941
+ transition-timing-function: inherit;
9942
+ white-space: nowrap;
9943
+ overflow-x: hidden;
9944
+ }
9945
+
9946
+ .ob-validation-notification-wrapper .MuiCollapse-root {
9947
+ transition-property: height;
9948
+ transition-duration: inherit;
9949
+ transition-timing-function: inherit;
9950
+ }
9951
+
9952
+ .is-contracted .ob-validation-notification-card-collapse-wrapper {
9953
+ width: 196px;
9954
+ opacity: 0;
9955
+ }
9956
+
9957
+ .is-expanded .ob-validation-notification-card-collapse-wrapper {
9958
+ width: 300px;
9959
+ opacity: 1;
9960
+ }
9961
+
9962
+ .ob-validation-notification-card-page-label {
9963
+ font-weight: 600;
9964
+ font-size: 0.875rem;
9965
+ }
9966
+
9967
+ .ob-validation-notification-card-page-label.is-not-first {
9968
+ margin-top: 0.5rem;
9969
+ }
9970
+
9971
+ .ob-validation-notification-card-list {
9972
+ margin-top: 0.5rem;
9973
+ border-radius: 8px;
9974
+ }
9975
+
9976
+ .ob-validation-notification-card-item {
9977
+ display: flex;
9978
+ justify-content: space-between;
9979
+ align-items: center;
9980
+ padding: 0.5rem;
9981
+ }
9982
+
9983
+ .ob-validation-notification-card-item.is-first {
9984
+ border-top-left-radius: 8px;
9985
+ border-top-right-radius: 8px;
9986
+ }
9987
+
9988
+ .ob-validation-notification-card-item.is-last {
9989
+ border-bottom-left-radius: 8px;
9990
+ border-bottom-right-radius: 8px;
9991
+ }
9992
+
9993
+ .ob-validation-notification-card-item-text {
9994
+ white-space: nowrap;
9995
+ font-size: 0.875rem;
9996
+ }
9997
+
9998
+ .ob-validation-notification-card-item-text-error-message {
9999
+ text-overflow: ellipsis;
10000
+ }
10001
+
10002
+ .ob-validation-notification-card-item-icon {
10003
+ margin-left: 0.5rem;
10004
+ }
10005
+
10006
+ @media only screen and (max-width: 1024px) {
10007
+ .ob-bottom-navigation__content .ob-validation-notification-wrapper {
10008
+ margin-bottom: 4rem;
10009
+ }
10010
+ }
10011
+ @media only screen and (max-width: 769px) {
10012
+ .ob-bottom-navigation__content .is-showing-pages .ob-validation-notification-wrapper {
10013
+ margin-bottom: 7.5rem;
10014
+ }
10015
+ .ob-validation-notification-wrapper {
10016
+ left: 1rem;
10017
+ }
10018
+ .is-contracted .ob-validation-notification-card-collapse-wrapper {
10019
+ width: 100%;
10020
+ }
10021
+ .is-expanded .ob-validation-notification-card-collapse-wrapper {
10022
+ width: 100%;
10023
+ }
10024
+ .section .ob-list.ob-validation-notification-card-list {
10025
+ margin-right: unset;
10026
+ margin-left: unset;
10027
+ width: unset;
10028
+ }
10029
+ }
9858
10030
  .flatpickr-calendar {
9859
10031
  background: transparent;
9860
10032
  opacity: 0;
package/dist/styles.scss CHANGED
@@ -141,6 +141,7 @@ $section-padding-mobile: $section-padding-mobile-y $section-padding-mobile-x;
141
141
  @import './styles/api-nsw-liquor-licence.scss';
142
142
  @import './styles/arcgis-web-map.scss';
143
143
  @import './styles/abn.scss';
144
+ @import './styles/validation-errors-card.scss';
144
145
  //
145
146
  // Third Party
146
147
  //
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@oneblink/apps-react",
3
3
  "description": "Helper functions for OneBlink apps in ReactJS.",
4
- "version": "6.9.0-beta.1",
4
+ "version": "6.9.0-beta.3",
5
5
  "author": "OneBlink <developers@oneblink.io> (https://oneblink.io)",
6
6
  "bugs": {
7
7
  "url": "https://github.com/oneblink/apps-react/issues"