@woosmap/ui 3.148.0 → 3.149.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.js +5 -2
  3. package/src/components/Card/Card.stories.js +29 -8
  4. package/src/components/Card/Card.styl +28 -24
  5. package/src/components/Switch/Switch.styl +2 -2
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@woosmap/ui",
3
- "version": "3.148.0",
3
+ "version": "3.149.0",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/WebGeoServices/ui.git"
package/src/components/Card/Card.js CHANGED
@@ -110,11 +110,12 @@ Footer.propTypes = {
110
110
 
111
111
  class Aside extends Component {
112
112
  render() {
113
- const { children, isGreyBg, isSmall, ...rest } = this.props;
113
+ const { children, isGreyBg, isSmall, isAddon, ...rest } = this.props;
114
114
  const greyClass = isGreyBg ? 'card__aside--grey' : null;
115
115
  const smallClass = isSmall ? 'card__aside--small' : null;
116
+ const addonClass = isAddon ? 'card__aside--addon' : null;
116
117
  return (
117
- <div className={cl('card__aside', greyClass, smallClass)} {...rest}>
118
+ <div className={cl('card__aside', greyClass, smallClass, addonClass)} {...rest}>
118
119
  {children}
119
120
  </div>
120
121
  );
@@ -125,10 +126,12 @@ Aside.propTypes = {
125
126
  children: PropTypes.node.isRequired,
126
127
  isGreyBg: PropTypes.bool,
127
128
  isSmall: PropTypes.bool,
129
+ isAddon: PropTypes.bool,
128
130
  };
129
131
  Aside.defaultProps = {
130
132
  isGreyBg: false,
131
133
  isSmall: false,
134
+ isAddon: false,
132
135
  };
133
136
  class Card extends Component {
134
137
  render() {
package/src/components/Card/Card.stories.js CHANGED
@@ -7,6 +7,7 @@ import Tooltip from '../Tooltip/Tooltip';
7
7
  import SimpleCard from './SimpleCard';
8
8
  import mapImgSq from '../../images/products/product-map-sq.png';
9
9
  import indoorDatabaseImgSq from '../../images/products/product-indoor-database-sq.png';
10
+ import localitiesUkImgSq from '../../images/products/product-localities-uk-sq.png';
10
11
 
11
12
  const Story = {
12
13
  title: 'base/Card',
@@ -16,19 +17,39 @@ const Story = {
16
17
  export default Story;
17
18
  const renderAsideContent = () => (
18
19
  <>
20
+ <Card.Aside isAddon isGrey>
21
+ <div className="card__aside__title">Addon</div>
22
+ <ul className="card__aside__list">
23
+ <li className="card__aside__list__item">
24
+ <img className="card__aside__list__item__image" src={localitiesUkImgSq} alt="Localities UK API" />
25
+ <div>
26
+ <div className="card__aside__list__item__title mb--5">Localities UK API</div>
27
+ <Switch text="Activate" />
28
+ </div>
29
+ </li>
30
+ </ul>
31
+ </Card.Aside>
19
32
  <Card.Aside isGreyBg isSmall>
20
33
  <div className="card__aside__title">Plugged to</div>
21
- <div className="card__aside__body">
22
- <img className="card__aside__body__image" src={indoorDatabaseImgSq} alt="Database API" />
23
- <span className="card__aside__body__title">Indoor Database API</span>
24
- </div>
34
+ <ul className="card__aside__list">
35
+ <li className="card__aside__list__item">
36
+ <img className="card__aside__list__item__image" src={indoorDatabaseImgSq} alt="Database API" />
37
+ <span className="card__aside__list__item__title">Indoor Database API</span>
38
+ </li>
39
+ <li className="card__aside__list__item">
40
+ <img className="card__aside__list__item__image" src={indoorDatabaseImgSq} alt="Database API" />
41
+ <span className="card__aside__list__item__title">Indoor Database API</span>
42
+ </li>
43
+ </ul>
25
44
  </Card.Aside>
26
45
  <Card.Aside>
27
46
  <div className="card__aside__title">Work with</div>
28
- <div className="card__aside__body">
29
- <img className="card__aside__body__image" src={mapImgSq} alt="Map API" />
30
- <span className="card__aside__body__title">Map API</span>
31
- </div>
47
+ <ul className="card__aside__list">
48
+ <li className="card__aside__list__item">
49
+ <img className="card__aside__list__item__image" src={mapImgSq} alt="Map API" />
50
+ <span className="card__aside__list__item__title">Map API</span>
51
+ </li>
52
+ </ul>
32
53
  <div className="card__aside__footer">Will be atomatically activated</div>
33
54
  </Card.Aside>
34
55
  </>
package/src/components/Card/Card.styl CHANGED
@@ -96,7 +96,7 @@
96
96
  &__content
97
97
  mbib(1.2)
98
98
  padding 0
99
- margin 1.4rem 1.4rem 1.4rem 0
99
+ margin 2rem 1.4rem 2rem 0
100
100
  &__header
101
101
  &__title
102
102
  font-size 1.6rem
@@ -107,43 +107,47 @@
107
107
  &__footer
108
108
  padding-top 1rem
109
109
  &__aside
110
+ mbib(1.1)
110
111
  padding 1.4rem
111
112
  font-size $fontSizeSmall
112
- &:not(.card__aside--small)
113
- mbib(1.1)
114
113
  &--grey
115
114
  background-color $dark3
116
- &__body
117
- mbi(1.4)
115
+ &__list
116
+ mbib(.8)
118
117
  display flex
119
- align-items center
120
- &__image
121
- sq(3)
122
- br()
123
- &__title
124
- font-weight 600
125
- font-size $fontSize
118
+ flex-direction column
119
+ &__item
120
+ mbi(1.4)
121
+ display flex
122
+ align-items center
123
+ &__image
124
+ sq(3)
125
+ br()
126
+ &__title
127
+ font-weight 600
128
+ font-size $fontSize
126
129
  &__footer
127
130
  color $dark40
128
131
  &--small
129
- mbi(1)
130
- display flex
131
- align-items center
132
132
  font-size $fontSizeSmall
133
133
  .card__aside
134
- &__body
134
+ &__list
135
135
  mbi(1)
136
- &__image
137
- sq(2.2)
138
- br(50)
139
- &__title
140
- font-size $fontSizeSmall
141
-
142
-
136
+ &__item
137
+ &__image
138
+ sq(2.2)
139
+ br(50)
140
+ &__title
141
+ font-size $fontSizeSmall
142
+ &--addon
143
+ .card__aside
144
+ &__list
145
+ &__item
146
+ &__image
147
+ sq(4.2)
143
148
 
144
149
  &__wrapper
145
150
  display flex
146
- padding-bottom 1rem
147
151
  &__aside
148
152
  border-top .1rem solid $borderColor
149
153
  &.active
package/src/components/Switch/Switch.styl CHANGED
@@ -5,7 +5,7 @@
5
5
  &__container
6
6
  position relative
7
7
  margin-right 1rem
8
- width 3.8rem
8
+ width 3.4rem
9
9
  display inline-block
10
10
  vertical-align middle
11
11
  user-select none
@@ -66,7 +66,7 @@
66
66
  position absolute
67
67
  top 0
68
68
  bottom 0
69
- right 2rem
69
+ right 1.6rem
70
70
  transition all 0.3s ease-in 0s
71
71
  &__checkbox
72
72
  &:checked + .switch__label