diff --git a/CHANGELOG.md b/CHANGELOG.md index 028ff24a..b331b1de 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -7,12 +7,16 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## [Unreleased] +### Changed + +- To CSS Handles. + ## [1.16.0] - 2020-07-03 ### Added -- Corporate section data css handles -- Data entry custom css handles. +- Corporate section data css handles. +- Data entry custom css handles. ## [1.15.0] - 2020-06-24 diff --git a/manifest.json b/manifest.json index 53637a95..c80394b2 100644 --- a/manifest.json +++ b/manifest.json @@ -18,7 +18,8 @@ "vtex.address-form": "4.x", "vtex.react-vtexid": "4.x", "vtex.pixel-manager": "1.x", - "vtex.store-messages": "0.x" + "vtex.store-messages": "0.x", + "vtex.css-handles": "0.x" }, "builders": { "react": "3.x", diff --git a/node/package.json b/node/package.json index cabe8a13..ea37ac21 100644 --- a/node/package.json +++ b/node/package.json @@ -8,18 +8,18 @@ "eslint-config-vtex": "10.x", "prettier": "^1.18.2", "typescript": "3.8.3", - "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.5.4/public/_types/react", + "vtex.address-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.6.2/public/_types/react", "vtex.country-codes": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.country-codes@2.0.1/public/_types/react", - "vtex.my-account": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.13.5/public/@types/vtex.my-account", - "vtex.my-account-commons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.3.0/public/@types/vtex.my-account-commons", - "vtex.my-cards": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-cards@1.9.0/public/@types/vtex.my-cards", - "vtex.my-orders-app": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.5.2/public/_types/react", + "vtex.my-account": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.15.0/public/@types/vtex.my-account", + "vtex.my-account-commons": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.4.1/public/@types/vtex.my-account-commons", + "vtex.my-cards": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-cards@1.9.1/public/@types/vtex.my-cards", + "vtex.my-orders-app": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.6.2/public/_types/react", "vtex.pixel-manager": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.1.4/public/@types/vtex.pixel-manager", - "vtex.profile-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.profile-form@3.3.1/public/_types/react", - "vtex.react-vtexid": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.22.0/public/_types/react", - "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.123.1/public/@types/vtex.store-graphql", - "vtex.store-messages": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-messages@0.3.0/public/_types/react", - "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.116.0/public/@types/vtex.styleguide" + "vtex.profile-form": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.profile-form@3.3.2/public/_types/react", + "vtex.react-vtexid": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.28.1/public/_types/react", + "vtex.store-graphql": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.123.4/public/@types/vtex.store-graphql", + "vtex.store-messages": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-messages@0.3.2/public/_types/react", + "vtex.styleguide": "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.124.0/public/@types/vtex.styleguide" }, "dependencies": { "@vtex/api": "^3.48.2" diff --git a/node/yarn.lock b/node/yarn.lock index a21265d5..c0b09d9d 100644 --- a/node/yarn.lock +++ b/node/yarn.lock @@ -2080,53 +2080,53 @@ uuid@^3.1.0: resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.3.3.tgz#4568f0216e78760ee1dbf3a4d2cf53e224112866" integrity sha512-pW0No1RGHgzlpHJO1nsVrHKpOEIxkGg1xB+v0ZmdNH5OAeAwzAVrCnI2/6Mtx+Uys6iaylxa+D3g4j63IKKjSQ== -"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.5.4/public/_types/react": +"vtex.address-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.6.2/public/_types/react": version "0.0.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.5.4/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.address-form@4.6.2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" "vtex.country-codes@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.country-codes@2.0.1/public/_types/react": version "0.0.0" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.country-codes@2.0.1/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" -"vtex.my-account-commons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.3.0/public/@types/vtex.my-account-commons": - version "1.3.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.3.0/public/@types/vtex.my-account-commons#6ca2e5e0ec266b2aa4048b4094052771aa524aae" +"vtex.my-account-commons@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.4.1/public/@types/vtex.my-account-commons": + version "1.4.1" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account-commons@1.4.1/public/@types/vtex.my-account-commons#789abf1a5725623250a56c300e100b74d1ce73bb" -"vtex.my-account@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.13.5/public/@types/vtex.my-account": - version "1.13.5" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.13.5/public/@types/vtex.my-account#fb351d9c7d6992479b4375041bcc2507f9515ac3" +"vtex.my-account@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.15.0/public/@types/vtex.my-account": + version "1.15.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-account@1.15.0/public/@types/vtex.my-account#6088dd61c1184cf8cb60139256c6edad29f9af8c" -"vtex.my-cards@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-cards@1.9.0/public/@types/vtex.my-cards": - version "1.9.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-cards@1.9.0/public/@types/vtex.my-cards#2aecb3fc14d856e25ac1c3bf1ff78036c6712f1e" +"vtex.my-cards@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-cards@1.9.1/public/@types/vtex.my-cards": + version "1.9.1" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-cards@1.9.1/public/@types/vtex.my-cards#9d279e9341a87cea32d02cb51368ef7e568492ff" -"vtex.my-orders-app@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.5.2/public/_types/react": +"vtex.my-orders-app@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.6.2/public/_types/react": version "0.0.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.5.2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.my-orders-app@3.6.2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" "vtex.pixel-manager@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.1.4/public/@types/vtex.pixel-manager": version "1.1.4" resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.pixel-manager@1.1.4/public/@types/vtex.pixel-manager#96907e17f4e5c584162a47dc425cb5afb2267d00" -"vtex.profile-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.profile-form@3.3.1/public/_types/react": +"vtex.profile-form@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.profile-form@3.3.2/public/_types/react": version "0.0.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.profile-form@3.3.1/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.profile-form@3.3.2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" -"vtex.react-vtexid@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.22.0/public/_types/react": +"vtex.react-vtexid@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.28.1/public/_types/react": version "0.0.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.22.0/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.react-vtexid@4.28.1/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" -"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.123.1/public/@types/vtex.store-graphql": - version "2.123.1" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.123.1/public/@types/vtex.store-graphql#0d3137dc505f7e1a38cdc8499ad12e6327cac657" +"vtex.store-graphql@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.123.4/public/@types/vtex.store-graphql": + version "2.123.4" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-graphql@2.123.4/public/@types/vtex.store-graphql#f570a189a1b37d84e5215917efac2e5fb21af548" -"vtex.store-messages@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-messages@0.3.0/public/_types/react": +"vtex.store-messages@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-messages@0.3.2/public/_types/react": version "0.0.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-messages@0.3.0/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.store-messages@0.3.2/public/_types/react#fa7a0347e046eab3dd768998fc9252b2c0dd5aef" -"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.116.0/public/@types/vtex.styleguide": - version "9.116.0" - resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.116.0/public/@types/vtex.styleguide#f17be9afb6ee66c71f2ea8d5ba81b2d18b2caa76" +"vtex.styleguide@http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.124.0/public/@types/vtex.styleguide": + version "9.124.0" + resolved "http://vtex.vtexassets.com/_v/public/typings/v1/vtex.styleguide@9.124.0/public/@types/vtex.styleguide#5c79d53204ea7e52b5fe5118c6ba0579cbc9ed8c" which@^1.2.9: version "1.3.1" diff --git a/react/components/Menu/UserInfo.tsx b/react/components/Menu/UserInfo.tsx index dee151c0..e2ec211d 100644 --- a/react/components/Menu/UserInfo.tsx +++ b/react/components/Menu/UserInfo.tsx @@ -2,34 +2,43 @@ import React, { FunctionComponent } from 'react' import { graphql } from 'react-apollo' import { compose, branch, renderComponent } from 'recompose' import { FormattedMessage } from 'react-intl' +import { useCssHandles } from 'vtex.css-handles' import GREETING, { Result } from '../../graphql/customerGreeting.gql' import Loading from './UserInfoLoading' -import styles from '../../styles.css' import PictureRenderer from './ProfilePicture/PictureRenderer' +const CSS_HANDLES = [ + 'userInfo', + 'userImage', + 'userGreeting', + 'userName', + 'userGreeting', +] as const + const UserInfo: FunctionComponent = ({ profilePicture, firstName }) => { + const cssHandles = useCssHandles(CSS_HANDLES) return ( -
-
+
+
{firstName ? (
,
-
+
{firstName}!
) : ( -
+
!
)} diff --git a/react/components/Menu/UserInfoLoading.tsx b/react/components/Menu/UserInfoLoading.tsx index 2e87856e..a0c21b8a 100644 --- a/react/components/Menu/UserInfoLoading.tsx +++ b/react/components/Menu/UserInfoLoading.tsx @@ -1,14 +1,16 @@ -import React from 'react' +import React, { FC } from 'react' import { SkeletonPiece } from 'vtex.my-account-commons' +import { useCssHandles } from 'vtex.css-handles' -import styles from '../../styles.css' +const CSS_HANDLES = ['shimmer'] as const -const UserInfoLoading = () => { +const UserInfoLoading: FC = () => { + const cssHandles = useCssHandles(CSS_HANDLES) return (
-
+
diff --git a/react/components/Menu/index.tsx b/react/components/Menu/index.tsx index d3ded547..8294ba65 100644 --- a/react/components/Menu/index.tsx +++ b/react/components/Menu/index.tsx @@ -6,11 +6,13 @@ import { compose } from 'recompose' import { ExtensionPoint } from 'vtex.render-runtime' import { AuthService, AuthState } from 'vtex.react-vtexid' import { ModalDialog } from 'vtex.styleguide' +import { withCssHandles } from 'vtex.css-handles' import UserInfo from './UserInfo' import MenuLink from './MenuLink' import { withSettings, Settings } from '../shared/withSettings' -import styles from '../../styles.css' + +const CSS_HANDLES = ['css', 'menu', 'menuLinks', 'menuLink'] as const function renderLinks(links: Link[], displayMyCards: boolean | null) { let linksToDisplay = links @@ -31,14 +33,14 @@ class Menu extends Component { } public render() { - const { intl, settings } = this.props + const { cssHandles, intl, settings } = this.props return (