* Change WooCommerce Card to WordPress Card in the WelcomeCard component.
Use isElevated and margin-bottom to make the Card look close to previous UI.
* Use WordPress Card in KnowledgeBase.
For the description in Card header, it will be rendered as a p element instead of h2, which should be more semantically correct. Test is updated to reflect this.
* Add Card component wrapper that supports title and description props.
* Use WordPress Card component wrapper in recommended extensions.
* Code refactor to use WordPress Card wrapper.
* Use WordPress Card wrapper in installed extension.
* Use margin-bottom for children layout at the parent CSS level.
* Add test for Card.
* Fix no margin between cards in Coupons page, and remove previous css for WooCommerce Card.
* Remove old WooCommerce Card css.
* Don't use isElevated in Card, to match the style in WooCommerce Home screen.
* Make item border color consistent with WordPress Card in Installed Extension card.
Use WordPress Card without CardBody here because we don't want the padding from CardBody.
* Make the card description look similar to previous WooCommerce Card description.
* Fix spelling in CSS class names.
* Fix WooCommerce spelling in comment.
* Change the Marketing Card style to match with WooCommerce Home style.
Also change the text gray color to use CSS variable instead of hardcoded gray value.
Also remove the usage of h2 in the Card header to follow WooCommerce Home style.
* Use $gray-200 as light borders between items in card.
* Remove unneeded CSS code based on TODO in comment.
* Migrate leaderboard tests to RTL.
* Remove test of default prop value.
* Migrate ReportSummary tests to RTL.
* Migrate ActivityCard tests to RTL.
* Migrate ActivityCardPlaceholder tests to RTL.
* Migrate remaining ProductType tests to RTL.
* Migrate Card tests to RTL.
* Update RTL and user event packages.
* Migrate Date tests to RTL.
* Migrate D3Legend tests to RTL.
* Migrate D3Base tests to RTL.
* Migrate Gravatar tests to RTL.
* Migrate ImageUpload tests to RTL.
* Migrate ProductImage tests to RTL.
* Migrate Rating tests to RTL.
* Migrate Search tests to RTL.
* Migrate Plugins tests to RTL.
* Migrate SelectControl tests to RTL.
* Migrate Timeline tests to RTL.
Remove tests that inspect DOM since there are snapshots.
* Migrate DismissModal tests to RTL.
* Migrate SetupNotice tests to RTL.
* Migrate WelcomeCard tests to RTL.
* Fix setup error reason retrieval in ShippingBanner.
* Migrate ShippingBanner tests to RTL.
* Migrate RecommendedExtensions tests to RTL.
* Migrate KnowledgeBase tests to RTL.
* Rename enzyme setup file, modify to setup RTL.
* No need to import jest-dom in test files.
* Remove enzyme dependency.
* Use snapshot for testing Leaderboard markup.
* Switch from "not to be empty" to "be in the document".
* No need to waitFor() recordEvent mock.
* Be specific about clicking the "hide" button.
* Use toBeVisible() instead of checking style property.
* add new woocommerce/eslint-plugin
* implement eslint-plugin (switch scripts to use wp-scripts etc)
* various linting fixes
* more lint fixes
* improve fix script
* more eslint fixes
* more eslint fixes
* temporary convert rules to warnings until they are all handled
* linting fixes
* update package-lock.json
* remove duplicates
* remove unnecessary `@wordpress/dependency-group` rule config
* add docs and adjust rules
* prettier fix
* fix merge artifact
* convert more rules to warnings
* change order to reflect importance
* install babel-preset-default
* remove unnecessary configuration for babel
* fix dependency group rule and test
* fix test
* handle collapsible whitespace
* add react testing library eslint plugin
* linter errors
* Add back in prettierrc
* package-lock update
* js lint fix with --fix
* disable whitespace in translation
* package-lock update
* make eslint actual dependency, not peer dependency
* pin eslint to v7
* I don't know why, but its working
* fix lint js
Co-authored-by: Paul Sealock <psealock@gmail.com>
Fixeswoocommerce/woocommerce-admin#4732
This updates `@wordpress/base-styles`, and because `@wordpress/components` depends on variables from it, that must be updated as well.
There are 3 major changes required as part of updating:
1. The $theme-color variable is no longer exposed by base-styles. Instead there are 3 css vars exposed. These are made available by use of a provided mixin. Situations where $theme-color was darkened using scss have been mapped as best as possible to the 2 other darkened shades of the css var that are available such as `--wp-admin-theme-color-darker-20` and `--wp-admin-theme-color-darker-10`. In some cases this means the colors are not exactly the same as before.
2. The post css `theme()` call is no longer available. All uses of this have been consolidated to use of the main theme css var `--wp-admin-theme-color`. This means that calls like `theme(secondary)` or `theme(outline)` etc have all been consolidated to the one color.
3. Many of the variables used for different shades of gray have been deprecated. These have been mapped across to the new gray variables. (Mapped according to the list described in woocommerce/woocommerce-admin#4732)
* Set a max word length for the installed extension descriptions
* Improve InstalledExtensions layout for tablet and mobile
Mobile still needs work…
* Align product icon to top
* Tweak WelcomeCard mobile appearance
* Fix alignment
* Add Marketing feature flag
* Add marketing page and menu item
* Register marketing page with layout controller
* Add initial marketing cards
* Add max-width to marketing overview page
* Add initial marketing WelcomeCard component
* Make marketing welcome card permanently dismiss
* Add a readme for the marketing page components
* Record tracks event when marketing welcome dismissed
* Match design width
* Add welcome image and initial styles
* Use gridicon for close button
* Fix whitespace
* Add PluginsHelper::get_plugin_data()
* Add initial Marketing\InstalledExtensions class
* Preload installed marketing extensions data
* Tweak extension statuses
* Add InstalledExtensionRow component
* Add initial extension data to InstalledExtensions card
* Refactor PluginsHelper::get_plugin_data method
Using the new get_plugin_path_from_slug method
* Ensure get_plugins() function is available for PluginsHelper
* Simplify using PluginsHelper method
* Add MailChimp configured status logic
* Add links to InstalledExtensionRow component
* Add key prop to extensions list
* Setup styles for InstalledExtensions card
* Display nothing if no installed extensions
* Add InstalledExtensions::get_allowed_plugins()
* Setup Marketing Overview API controller
* Add /activate-plugin marketing endpoint
* Add more extensions URL props
* Add Facebook extension configured status logic
* Update Facebook extension URL props
* Fix extenion data logic
* Move component into it’s own directory
* Setup /marketing/overview/recommended endpoint
* Initial marketing page card header styles
* Add basic extension data to RecommendedExtensions
* Use color as variable
* Tweak card header padding for design
* Add basic styling to RecommendedExtensions card
* settingsUrl is not available if the plugin is not active
* Add /marketing/overview/installed-plugins REST endpoint
* Add basic activation functionality to InstalledExtensions component
* Don’t throw error on success
* Add MVP data store for installed extensions card
* Add core dark blue color variable
* Add styles for installed extensions card
* Move knowledge-base component to its own directory
* Pull recommended marketing plugins from remote test site
* Hide description when configured
As per design
* Tweak colors based on design
* Finish off styling for RecommendedExtensions
* Limit recommended extensions to 6 items
* Add error handling to RecommendedExtensions card
* Rename ‘copy’ extension prop
* Add marketing button component to match design
* Create ProductIcon component for marketing
* Add InstalledExtension icons
* Fix icon image paths
* Add ProductIcon to InstallExtensionRow
* Final styling to installed extensions card row
* Knowledge base card placeholders
* Fix missing icons when plugin not activated
* Remove logging
* Tweak array structure to ensure we have an array in JS
and not an object
* Refactor KnowledgeBase marketing component
- We don’t need loop through every post when rendering, just pick the posts we need
- Remove unused classes
* Move padding from each slide to the container
* Improve slider animations by absolute positioning the slides
* Reduce the slider animation timeout and add a note
* Add in-app purchase flow url params for recommended extensions
* Fix slider animation
* Reset slider height on window resize
* Short slider animation, fix double margin on smaller screens
* Add initial marketing/knowledge-base endpoint
* Pull knowledge base posts from API
* Rename welcome card dismiss tracks event
* Record event on recommended product click
* Recond onclick events for installed extensions card
* Record event when carousel navigation clicked
* img elements must have an alt prop
* Remove import that is never used
* use camelCase
* Decode HTML entities from API call
* Remove unused container div
* Add card loading state
* Add images to knowledge base card
* Link knowledge base posts
* Use the Pagination component rather than duplicate it’s functionality
* Clean up and rename knowledge base slider
* Clean knowledge base CSS and update responsive styles for single post slide
* Add a README for button component
* Add README for product icon component
* Add initial readme for Slider component
* Add correct image sizes to knowledge base slider, finalize styles
* Fix extension link urls
* Resolve some code formatting issue
* Bind class click methods to this
* Wrap nodes in Fragment
* Fix wccom-back path
* Add placeholder author and gravatar
Default avatar url size returned from the API is currently set to 96 so I’ve done a simple replace with 16
* Fix style-lint expected new line
* Add docblock for get_knowledge_base_posts()
* Setup data store for marketing to handle installedExtensions card
* Fix function names
“Activating” not “installing”
* Move welcome card component to its own dir
* IconButton component is going to be deprecated
ref: https://github.com/WordPress/gutenberg/pull/19299
* Support multiple activating plugins in the data store
* Rename extension to plugin for consistency
* Add propTypes to component
* Rename data-store/ to data/
* Fix import paths
* Extract isActivatingPlugin logic into datastore
* Move data store selectors into own file
* POST requests are not cached
* Export apiFetch action
* Don’t wrap API response in object
* Implement data store for recommended extensions
* Implement data store for marketing knowledge base
* Tidy getRecommendedPlugins resolver
* Try a cross browser cover/crop image effect to fit proposed design
And help fit longer titles in
* Add caught errors to handler
* Adjust positioning so watermater is displayed
* InstalledExtensions phpcs fixes
* Marketing phpcs fixes
* Alignment fix
* MarketingOverview phpcs fixes
* Missing full stop
* Update breadcrumbs to use new approach
* Fix style lint issues
* Record `marketing_knowledge_article` track event on knowledge base post click
* Import apiFetch and controls from @wordpress/data-controls
* Hex color to lowercase
* Remove duplicate method after rebase
* Use new showPageArrowsLabel rather than hide with CSS
* Fix blurry avatars on hidpi displays
* Hide avatar if URL is falsy
* Replace test author data with live data
* Combine conditionals into ternary
* Combine conditionals into ternary
* Simplify class column logic
* Only preload option and component settings in the admin
* Fix isActivatingPlugin not updating
Component was not re-rendeding.
* Use querySelector over getElementsByClassName
* Hide Marketing Welcome Card immediately on click
* Use create-a-ticket url for supportUrl and make that the default
* Add getInstalledPlugins resolver with preloaded data
* Revert "Add getInstalledPlugins resolver with preloaded data"
This reverts commit b8b127ec6411bef15616576b3bb189dc31777c13.
* Load plugin data in a separate request after activation
* Update welcome image
* Don’t return plugin data in the activation request.
* A space is required before closing bracket
* Update Jest config to gracefully handle static assets
Ref: https://jestjs.io/docs/en/webpack#handling-static-assets
* Remove unused onExit property
* Remove placeholder README
* Use prop directly
* yield createNotice
* Add note to indicate which Category
* Increase transient time to 3 days
* Use $gap-small
* Add proptype
* Add debounce to slider height resize listener
* Clean up isLoading logic
* Dont show image elements if image data is empty
* Open knowledge base posts in a new window
* Add “noreferrer”
* Turn the tab on in all env
Co-authored-by: Daniel Bitzer <danielbitzer@gmail.com>
Sam Seay
Gan Eng Chin
Jeff Stieler
Daniel Bitzer
Paul Sealock
Darren Ethier
Jason Conroy