Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
woocommerce/plugins/woocommerce-admin/client/marketing/components/button/README.md

23 lines
388 B
Markdown
Raw Normal View History

Marketing Tab MVP (https://github.com/woocommerce/woocommerce-admin/pull/3953) * 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>
2020-03-28 13:48:27 +00:00
Button
===
This component creates simple reusable html `<button></button>` element.
## Usage
```jsx
<Button
Button: Remove deprecated isDefault (https://github.com/woocommerce/woocommerce-admin/pull/4548)
2020-06-11 19:22:20 +00:00
isSecondary
Marketing Tab MVP (https://github.com/woocommerce/woocommerce-admin/pull/3953) * 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>
2020-03-28 13:48:27 +00:00
onClick={ this.onActivateClick }
disabled={ isLoading }
>
{ __( 'Activate', 'woocommerce-admin' ) }
</Button>
```
### Props
Name | Type | Default | Description
--- | --- | --- | ---
`className` | String | `null` | Additional class name to style the component