@woosmap/ui 3.165.0 → 3.166.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.165.0",
+  "version": "3.166.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Card/Card.stories.js

@@ -14,7 +14,7 @@ const Story = {
 export default Story;
 const renderAsideContent = () => (
     <>
-        <Card.Aside mode="pluggedTo" product={{ id: 'INDOOR_MAP', name: 'Indoor Map' }}>
+        <Card.Aside mode="addon" product={{ id: 'LOCALITIES_ADDRESS_UK', name: 'Localisties UK' }}>
             switch
         </Card.Aside>
     </>
@@ -22,7 +22,7 @@ const renderAsideContent = () => (
 
 const Template = () => (
     <div className="flex-column mbib--large">
-        <Card asideContent={renderAsideContent()} isVertical size="small" product="INDOOR_MAP">
+        <Card asideContent={renderAsideContent()} isVertical size="small" product="GEOLOCATION">
             <Card.Header>
                 <h4 className="card__header__title">Geolocation API</h4>
             </Card.Header>
@@ -40,7 +40,7 @@ const Template = () => (
                 <Switch text="Activate" />
             </Card.Footer>
         </Card>
-        <Card isVertical size="large" product="TRAFFIC">
+        <Card asideContent={renderAsideContent()} isVertical size="large" product="TRAFFIC">
             <Card.Header>
                 <h4 className="card__header__title">Traffic API</h4>
                 <div className="card__status">

package/src/components/Card/Card.styl

@@ -137,6 +137,11 @@
 				&__body
 					&__desc
 						margin-bottom 1rem
+		&.card--large
+			.card
+				&__wrapper
+					display block
+
 		&.card--small
 			flex-direction row
 			width 26rem
@@ -146,7 +151,7 @@
 				&__img
 					br()
 					sq(5)
-					margin 1.4rem
+					margin 1rem
 				&__content
 					mbib(1.2)
 					padding 0
@@ -160,49 +165,51 @@
 					mbib(.6)
 				&__footer
 					padding-top 1rem
-				&__aside
-					mbib(1.1)
-					padding 1.4rem
-					font-size $fontSizeSmall
-					&--grey
-						&:last-child
-							border-radius 0 0 .5rem .5rem
-					&__list
-						mbib(.8)
-						display flex
-						flex-direction column
-						&__item
-							mbi(1.4)
-							display flex
-							align-items center
-							&__image
-								sq(3)
-								br()
-							&__section
-								width 100%
-								&__title
-									font-weight 600
-									font-size $fontSize
-									margin-bottom .5rem
-					&__footer
-						color $dark40
-					&--small
-						font-size $fontSizeSmall
-						.card__aside
-							&__list
-								mbi(1)
-								&__item
-									&__image
-										sq(2.2)
-										br(50)
-									&__title
-										font-size $fontSizeSmall
-					&--addon
-						.card__aside
-							&__list
-								&__item
-									&__image
-										sq(4.2)
+	&__aside
+		mbib(1.1)
+		padding 1rem 1.4rem 1.4rem 1.4rem
+		font-size $fontSizeSmall
+		.card--large &
+			padding 1rem 2rem 1.4rem 2rem
+		&--grey
+			&:last-child
+				border-radius 0 0 .5rem .5rem
+		&__list
+			mbib(.8)
+			display flex
+			flex-direction column
+			&__item
+				mbi(1.4)
+				display flex
+				align-items center
+				&__image
+					sq(3)
+					br()
+				&__section
+					width 100%
+					&__title
+						font-weight 600
+						font-size $fontSize
+						margin-bottom .5rem
+		&__footer
+			color $dark40
+		&--small
+			font-size $fontSizeSmall
+			.card__aside
+				&__list
+					mbi(1)
+					&__item
+						&__image
+							sq(2.2)
+							br(50)
+						&__title
+							font-size $fontSizeSmall
+		&--addon
+			.card__aside
+				&__list
+					&__item
+						&__image
+							sq(4.2)
 
 	&__wrapper
 		display flex