@woosmap/ui 3.164.0 → 3.166.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.
Files changed (5) hide show
  1. package/package.json +1 -1
  2. package/src/components/Card/Card.stories.js +3 -3
  3. package/src/components/Card/Card.styl +51 -44
  4. package/src/components/Switch/Switch.js +4 -2
  5. package/src/components/Switch/Switch.styl +11 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "3.164.0",
3
+ "version": "3.166.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
package/src/components/Card/Card.stories.js CHANGED
@@ -14,7 +14,7 @@ const Story = {
14
14
  export default Story;
15
15
  const renderAsideContent = () => (
16
16
  <>
17
- <Card.Aside mode="pluggedTo" product={{ id: 'INDOOR_MAP', name: 'Indoor Map' }}>
17
+ <Card.Aside mode="addon" product={{ id: 'LOCALITIES_ADDRESS_UK', name: 'Localisties UK' }}>
18
18
  switch
19
19
  </Card.Aside>
20
20
  </>
@@ -22,7 +22,7 @@ const renderAsideContent = () => (
22
22
 
23
23
  const Template = () => (
24
24
  <div className="flex-column mbib--large">
25
- <Card asideContent={renderAsideContent()} isVertical size="small" product="INDOOR_MAP">
25
+ <Card asideContent={renderAsideContent()} isVertical size="small" product="GEOLOCATION">
26
26
  <Card.Header>
27
27
  <h4 className="card__header__title">Geolocation API</h4>
28
28
  </Card.Header>
@@ -40,7 +40,7 @@ const Template = () => (
40
40
  <Switch text="Activate" />
41
41
  </Card.Footer>
42
42
  </Card>
43
- <Card isVertical size="large" product="TRAFFIC">
43
+ <Card asideContent={renderAsideContent()} isVertical size="large" product="TRAFFIC">
44
44
  <Card.Header>
45
45
  <h4 className="card__header__title">Traffic API</h4>
46
46
  <div className="card__status">
package/src/components/Card/Card.styl CHANGED
@@ -137,6 +137,11 @@
137
137
  &__body
138
138
  &__desc
139
139
  margin-bottom 1rem
140
+ &.card--large
141
+ .card
142
+ &__wrapper
143
+ display block
144
+
140
145
  &.card--small
141
146
  flex-direction row
142
147
  width 26rem
@@ -146,7 +151,7 @@
146
151
  &__img
147
152
  br()
148
153
  sq(5)
149
- margin 1.4rem
154
+ margin 1rem
150
155
  &__content
151
156
  mbib(1.2)
152
157
  padding 0
@@ -160,49 +165,51 @@
160
165
  mbib(.6)
161
166
  &__footer
162
167
  padding-top 1rem
163
- &__aside
164
- mbib(1.1)
165
- padding 1.4rem
166
- font-size $fontSizeSmall
167
- &--grey
168
- &:last-child
169
- border-radius 0 0 .5rem .5rem
170
- &__list
171
- mbib(.8)
172
- display flex
173
- flex-direction column
174
- &__item
175
- mbi(1.4)
176
- display flex
177
- align-items center
178
- &__image
179
- sq(3)
180
- br()
181
- &__section
182
- width 100%
183
- &__title
184
- font-weight 600
185
- font-size $fontSize
186
- margin-bottom .5rem
187
- &__footer
188
- color $dark40
189
- &--small
190
- font-size $fontSizeSmall
191
- .card__aside
192
- &__list
193
- mbi(1)
194
- &__item
195
- &__image
196
- sq(2.2)
197
- br(50)
198
- &__title
199
- font-size $fontSizeSmall
200
- &--addon
201
- .card__aside
202
- &__list
203
- &__item
204
- &__image
205
- sq(4.2)
168
+ &__aside
169
+ mbib(1.1)
170
+ padding 1rem 1.4rem 1.4rem 1.4rem
171
+ font-size $fontSizeSmall
172
+ .card--large &
173
+ padding 1rem 2rem 1.4rem 2rem
174
+ &--grey
175
+ &:last-child
176
+ border-radius 0 0 .5rem .5rem
177
+ &__list
178
+ mbib(.8)
179
+ display flex
180
+ flex-direction column
181
+ &__item
182
+ mbi(1.4)
183
+ display flex
184
+ align-items center
185
+ &__image
186
+ sq(3)
187
+ br()
188
+ &__section
189
+ width 100%
190
+ &__title
191
+ font-weight 600
192
+ font-size $fontSize
193
+ margin-bottom .5rem
194
+ &__footer
195
+ color $dark40
196
+ &--small
197
+ font-size $fontSizeSmall
198
+ .card__aside
199
+ &__list
200
+ mbi(1)
201
+ &__item
202
+ &__image
203
+ sq(2.2)
204
+ br(50)
205
+ &__title
206
+ font-size $fontSizeSmall
207
+ &--addon
208
+ .card__aside
209
+ &__list
210
+ &__item
211
+ &__image
212
+ sq(4.2)
206
213
 
207
214
  &__wrapper
208
215
  display flex
package/src/components/Switch/Switch.js CHANGED
@@ -13,9 +13,9 @@ export default class Switch extends Component {
13
13
  };
14
14
 
15
15
  render() {
16
- const { id, text, checked, onChange, name, optionLabels, disabled } = this.props;
16
+ const { id, text, checked, onChange, name, optionLabels, isSmall, disabled } = this.props;
17
17
  return (
18
- <div className="switch">
18
+ <div className={cl('switch', { 'switch--small': isSmall })}>
19
19
  <div className="switch__container">
20
20
  <input
21
21
  type="checkbox"
@@ -62,6 +62,7 @@ Switch.defaultProps = {
62
62
  name: null,
63
63
  disabled: false,
64
64
  text: '',
65
+ isSmall: false,
65
66
  };
66
67
 
67
68
  Switch.propTypes = {
@@ -72,4 +73,5 @@ Switch.propTypes = {
72
73
  optionLabels: PropTypes.array,
73
74
  disabled: PropTypes.bool,
74
75
  text: PropTypes.string,
76
+ isSmall: PropTypes.bool,
75
77
  };
package/src/components/Switch/Switch.styl CHANGED
@@ -2,6 +2,8 @@
2
2
  display flex
3
3
  align-items center
4
4
  mbi()
5
+ &--small
6
+ mbi(.6rem)
5
7
  &__container
6
8
  position relative
7
9
  margin-right 1rem
@@ -10,6 +12,8 @@
10
12
  vertical-align middle
11
13
  user-select none
12
14
  text-align left
15
+ .switch--small &
16
+ width 2.4rem
13
17
  &__checkbox
14
18
  display none
15
19
  &__label
@@ -28,6 +32,8 @@
28
32
  &__text
29
33
  &--disabled
30
34
  opacity .4
35
+ .switch--small &
36
+ font-size $fontSizeSmall
31
37
  &__inner
32
38
  display block
33
39
  width 200%
@@ -44,6 +50,8 @@
44
50
  color white
45
51
  font-weight bold
46
52
  box-sizing border-box
53
+ .switch--small &
54
+ height 1.3rem
47
55
  &:before
48
56
  content attr(data-yes)
49
57
  text-transform uppercase
@@ -68,6 +76,9 @@
68
76
  bottom 0
69
77
  right 1.6rem
70
78
  transition all 0.3s ease-in 0s
79
+ .switch--small &
80
+ width 1.1rem
81
+ right 1.1rem
71
82
  &__checkbox
72
83
  &:checked + .switch__label
73
84
  .switch