@woosmap/ui 3.65.0 → 3.68.0

package/package.json

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

package/src/components/Demo/skeletondemo.styl

@@ -31,12 +31,30 @@
 		background-color $light// rgba($logo2, .82)
 		padding-bottom 2.6rem
 		mbib(1.6)
+		.demo--localities--uk &
+		.demo--localities--fr &
+			border 0
+			width auto
+			flex-grow 1
 	&__data
 		max-height 45rem
 		border-top .1rem solid rgba($secondary, .1)
+		.demo--localities--uk &
+		.demo--localities--fr &
+			max-height unset
+		.demo--localities--uk &
+			height 54rem
+		.demo--localities--fr &
+			height 38rem
 	&__showcase
 		min-height 50rem
 		max-height 71rem
+		.demo--localities--uk &
+		.demo--localities--fr &
+			position relative
+			z-index 100
+			min-height unset
+			max-height unset
 	&__map
 		display flex
 		align-items center
@@ -74,6 +92,9 @@
 		width 100%
 	&__input-container
 		mbib(.6)
+		&--inline
+			.demo--localities--uk &
+				mbib(1.6)
 	&__label
 		inputFont()
 		font-size $inputFontSizeDemo
@@ -215,6 +236,10 @@
 				padding $demoPadding
 				overflow auto
 				max-height 40rem
+				.demo--localities--uk &
+					max-height 49rem
+				.demo--localities--fr &
+					max-height 33rem
 	&--address
 		&__formcontainer
 			.input
@@ -222,6 +247,21 @@
 					margin-bottom .4rem
 				&__line
 					margin-bottom 1rem
+	&--localities--uk
+	&--localities--fr
+		&__formcontainer
+			mbib(1.6)
+			position relative
+			.input__label
+				font-weight 600
+	.overlay
+		position absolute
+		top 0
+		left 0
+		z-index 10
+		width 100%
+		height 100%
+		background-color $light70
 @media screen and (max-width 769px)
 	.demo__showcase
 		max-height 100%

package/src/components/Icon/Icon.js

@@ -153,12 +153,12 @@ import { ReactComponent as SocialFacebook } from '../../icons/social-facebook.sv
 import { ReactComponent as SocialLinkedin } from '../../icons/social-linkedin.svg';
 import { ReactComponent as SocialTwitter } from '../../icons/social-twitter.svg';
 
-const Icons = {
+const WebsiteIcons = {
     autocomplete: Autocomplete,
     battery: Battery,
     buildings: Buildings,
-    cars: Cars,
     care: Care,
+    cars: Cars,
     elephant: Elephant,
     github: Github,
     green: Green,
@@ -177,26 +177,28 @@ const Icons = {
     speed: Speed,
     world: World,
     zoom: Zoom,
+};
 
+const ConsoleIcons = {
     access: Access,
-    add: Add,
     'add-circle': AddCircle,
-    administration: Administration,
-    'administration-tool': AdministrationTool,
+    add: Add,
     'admin-key': AdminKey,
     'admin-tool': AdminTool,
+    'administration-tool': AdministrationTool,
+    administration: Administration,
     agenda: Agenda,
-    'alphabetical-order': AlphabeticalOrder,
     'alphabetical-order-reversed': AlphabeticalOrderReversed,
+    'alphabetical-order': AlphabeticalOrder,
     archive: Archive,
     'arrow-bottom': ArrowBotton,
     'arrow-left': ArrowLeft,
+    'arrow-link': ArrowLink,
     'arrow-right': ArrowRight,
     'arrow-top': ArrowTop,
-    'arrow-link': ArrowLink,
-    asset: Asset,
     'asset-add-file': AssetAddFile,
     'asset-add': AssetAdd,
+    asset: Asset,
     bank: Bank,
     beaker: Beaker,
     bell: Bell,
@@ -208,14 +210,14 @@ const Icons = {
     'caret-top': CaretTop,
     charts: Charts,
     chat: Chat,
-    check: Check,
-    checked: Checked,
     'check-circle': CheckCircle,
     'check-square': CheckSquare,
-    clock: Clock,
+    check: Check,
+    checked: Checked,
     'clock-reversed': ClockReversed,
-    close: Close,
+    clock: Clock,
     'close-thick': CloseThick,
+    close: Close,
     company: Company,
     copy: Copy,
     'credit-card': CreditCard,
@@ -224,21 +226,21 @@ const Icons = {
     delete: Delete,
     details: Details,
     documentation: Documentation,
-    dot: Dot,
     'dot-fill': DotFill,
+    dot: Dot,
     download: Download,
     edit: Edit,
     email: Email,
     enter: Enter,
-    eye: Eye,
-    'eye-crossed-out': EyeCrossedOut,
     exchange: Exchange,
     expand: Expand,
     export: Export,
+    'eye-crossed-out': EyeCrossedOut,
+    eye: Eye,
     flag: Flag,
     globe: Globe,
-    home: Home,
     'home-user': HomeUser,
+    home: Home,
     import: Import,
     info: Info,
     label: Label,
@@ -249,14 +251,14 @@ const Icons = {
     longitude: Longitude,
     manage: Manage,
     marker: Marker,
-    members: Members,
     member: Member,
-    metrics: Metrics,
-    more: More,
-    'menu-vertical': MenuVertical,
+    members: Members,
+    'menu-circle-horizontal': MenuCircleHorizontal,
     'menu-circle-vertical': MenuCircleVertical,
     'menu-horizontal': MenuHorizontal,
-    'menu-circle-horizontal': MenuCircleHorizontal,
+    'menu-vertical': MenuVertical,
+    metrics: Metrics,
+    more: More,
     organization: Organization,
     organizations: Organizations,
     phone: Phone,
@@ -273,9 +275,12 @@ const Icons = {
     'see-page': SeePage,
     settings: Settings,
     shield: Shield,
-    star: Star,
+    showcases: Showcases,
+    'social-facebook': SocialFacebook,
+    'social-linkedin': SocialLinkedin,
+    'social-twitter': SocialTwitter,
     'star-filled': StarFilled,
-    stores: Stores,
+    star: Star,
     support: Support,
     switch: Switch,
     team: Team,
@@ -287,23 +292,29 @@ const Icons = {
     'view-mini-card': ViewMiniCard,
     warning: Warning,
     woosmap: Woosmap,
+};
+
+const ProductsIcons = {
     address: Address,
+    connectors: Connectors,
     distance: Distance,
+    geofencing: Geofencing,
     geolocation: Geolocation,
-    storelocator: StoreLocator,
+    indoor: Indoor,
     localities: Localities,
+    mapping: Mapping,
     maps: Map,
     merchant: Merchant,
-    traffic: Traffic,
-    geofencing: Geofencing,
     multisearch: MultiSearch,
-    mapping: Mapping,
-    connectors: Connectors,
-    showcases: Showcases,
-    indoor: Indoor,
-    'social-facebook': SocialFacebook,
-    'social-linkedin': SocialLinkedin,
-    'social-twitter': SocialTwitter,
+    storelocator: StoreLocator,
+    stores: Stores,
+    traffic: Traffic,
+};
+
+const Icons = {
+    ...WebsiteIcons,
+    ...ConsoleIcons,
+    ...ProductsIcons,
 };
 
 class Icon extends Component {
@@ -313,7 +324,7 @@ class Icon extends Component {
         return (
             <IconComponent
                 className={cl('icon', className)}
-                data-testid={testId}
+                data-testid={`${testId}-${icon}`}
                 width={size}
                 height={size}
                 title={title}
@@ -336,6 +347,10 @@ Icon.propTypes = {
     title: PropTypes.string,
     testId: PropTypes.string,
 };
+
 export default Object.assign(Icon, {
     Icons,
+    WebsiteIcons,
+    ConsoleIcons,
+    ProductsIcons,
 });

package/src/components/Icon/Icon.stories.js

@@ -13,17 +13,22 @@ const Template = () => (
         <Icon size={64} icon="home" />
     </div>
 );
+
 export const Default = Template.bind({});
 Default.args = {};
-const { Icons } = Icon;
-const allIcons = Object.keys(Icons).map((icon) => (
+
+const { Icons, WebsiteIcons, ConsoleIcons, ProductsIcons } = Icon;
+
+const drawIcon = (icon) => (
     <div key={icon} className="icon-story">
         <div className="icon-story__container">
             <Icon size={48} icon={icon} />
             <div className="icon-story__name">{icon}</div>
         </div>
     </div>
-));
-const TemplateCatalog = () => <div className="flex-wrap">{allIcons}</div>;
+);
 
-export const Catalog = TemplateCatalog.bind({});
+export const All = () => <div className="flex-wrap">{Object.keys(Icons).map(drawIcon)}</div>;
+export const Website = () => <div className="flex-wrap">{Object.keys(WebsiteIcons).map(drawIcon)}</div>;
+export const Console = () => <div className="flex-wrap">{Object.keys(ConsoleIcons).map(drawIcon)}</div>;
+export const Products = () => <div className="flex-wrap">{Object.keys(ProductsIcons).map(drawIcon)}</div>;

package/src/components/Icon/Icon.test.js

@@ -6,16 +6,37 @@ import Icon from './Icon';
 
 it('renders an icon component', () => {
     const { getByTestId } = render(<Icon icon="home" size={64} />);
-    expect(getByTestId('icon')).toHaveClass('icon');
-    expect(getByTestId('icon')).toHaveAttribute('width', '64');
-    expect(getByTestId('icon')).toHaveTextContent('home');
+
+    const result = getByTestId('icon-home');
+
+    expect(result).toHaveClass('icon');
+    expect(result).toHaveAttribute('width', '64');
+    expect(result).toHaveTextContent('home');
+});
+
+const isIconRendered = (icon) => {
+    const { getByTestId } = render(<Icon icon={icon} />);
+    const result = getByTestId(`icon-${icon}`);
+
+    expect(result).toHaveClass('icon');
+};
+
+it('renders all website icons components', () => {
+    const { WebsiteIcons } = Icon;
+    Object.keys(WebsiteIcons).forEach(isIconRendered);
 });
-/*
+
+it('renders all console icons components', () => {
+    const { ConsoleIcons } = Icon;
+    Object.keys(ConsoleIcons).forEach(isIconRendered);
+});
+
+it('renders all products icons components', () => {
+    const { ProductsIcons } = Icon;
+    Object.keys(ProductsIcons).forEach(isIconRendered);
+});
+
 it('renders all icon components', () => {
     const { Icons } = Icon;
-    Object.keys(Icons).forEach((icon) => {
-        const { container } = render(<Icon icon={icon} />);
-        expect(container.firstChild).toHaveTextContent(icon);
-    });
+    Object.keys(Icons).forEach(isIconRendered);
 });
-*/

package/src/styles/website/card.styl

@@ -27,10 +27,6 @@
 			&:hover
 				.icon
 					fill $primary !important
-			.wcard--small
-				.icon
-					fill $secondary !important
-
 		.wcard--office
 			border 0
 		> :nth-child(1)
@@ -113,7 +109,6 @@
 			background-repeat no-repeat
 			background-size cover
 			background-position 50% 50%
-			opacity .7
 	&__body
 		padding $cardPadding $cardPadding 0 $cardPadding
 	&__footer
@@ -133,7 +128,7 @@
 			font-size $title4
 			line-height $title4 * 1.4
 			display -webkit-box
-			-webkit-line-clamp 6
+			-webkit-line-clamp 4
 			-webkit-box-orient vertical
 			margin-bottom 3rem !important
 		.wcard
@@ -143,10 +138,10 @@
 				flex-grow 1
 				border-left 3rem solid $logo6
 				padding 2.3rem 4rem
-				height 39.2rem
+				height 26.2rem
 			&__header
 				width 100%
-				max-width 43rem
+				max-width 52rem
 				height auto
 			&__body
 				padding 0
@@ -163,7 +158,6 @@
 				align-items center
 				justify-content center
 				flex-shrink 0
-				opacity 1
 			&__content
 				padding 2rem 4rem
 				height 100%
@@ -209,46 +203,47 @@
 				text-align center
 	&--small
 		max-width 28rem
-		flex-shrink 1
-		background-color unset
-		box-shadow none
-		border 0
+		flex-shrink 0
 		margin 0 3rem 13rem 3rem
+		background-color $light
+		border .1rem solid $dark10
+		box-shadow 0 1.5rem 3rem $dark10
 		.title
-			font-size $title6 + .2
-			font-weight 700
-			line-height $title6 * 1.6
-			margin-bottom 3rem
+			font-size $title5
+			font-weight 500
+			line-height $title6 * 1.4
+			height 9.55rem
+			margin-bottom 2rem
 			-webkit-line-clamp 4
 		.wcard
 			&__header
-				br()
-				border .1rem solid $borderColor
+				br(0)
+				height 13rem
 				width 100%
-				height 17rem
 				display flex
 				align-items center
 				justify-content center
-				background-color $light
-				margin-bottom 3rem
+				margin-bottom 2rem
+				background-color unset
+				border 0
+				border-bottom .1rem solid $dark8
 				img
 				svg
 					width 20rem
 			&__body
-				padding 0
+				padding 0 2rem
 				flex-grow 1
 			&__footer
-				padding 0
+				padding 0 2rem 2rem 2rem
 			&__link
 				.btn
-					color $secondary
+					color $primary
 					.icon
-						fill $secondary
+						fill $primary
 		&:hover
 			&.wcard
-				background-color unset
-				box-shadow none
-				border 0
+				position relative
+				background-color $light
 	&--demo
 		.title
 			margin-bottom 1rem
@@ -259,10 +254,7 @@
 				display -webkit-box
 				-webkit-line-clamp 2
 				-webkit-box-orient vertical
-
 		.wcard
-			&__header
-				opacity 1
 			&__body
 				.paragraph
 					margin-bottom 2rem !important
@@ -280,7 +272,6 @@
 		min-height 38.4rem
 		justify-content space-between
 		position relative
-		opacity 1
 		.city
 			trans()
 			fullwh()
@@ -327,8 +318,6 @@
 			transform translateY(-.4rem)
 			color $textColor
 			.wcard
-				&__header
-					opacity 1
 				&__link
 					.btn
 						color $linkColorHover !important