Commit Graph

47 Commits

Author SHA1 Message Date
Kelly Dwan 4669ab9422 Layout: Add the 40px side gutters on 1100px+ screens (https://github.com/woocommerce/woocommerce-admin/pull/282) 2018-08-08 18:11:54 -04:00
Timmy Crawford c653b601ca Merge pull request woocommerce/woocommerce-admin#280 from woocommerce/fix/navbar-zindex
Header: Set z-index greater than popover
2018-08-07 17:12:25 -07:00
Timmy Crawford 617771de1c Orders Panel: Add default prop object. 2018-08-07 13:11:30 -07:00
Timmy Crawford 5f4a56eb9a Header: Set z-index greater than popover 2018-08-07 12:45:48 -07:00
Kelly Dwan ddeacb84e5 Move non-reset SCSS to new files, add folder structure (https://github.com/woocommerce/woocommerce-admin/pull/274)
* Move non-reset SCSS to a new file

* Split shared files and “meta” files into two folders

This also creates two new base scss files for the different app vs embedded CSS files

* Move notice & embed-specific css out of reset

* Update README with folder structure notes
2018-08-06 11:30:43 -04:00
Timmy Crawford 7639f61c2e Add site title to wcSettings 2018-08-01 12:19:25 -07:00
Timmy Crawford 3f2a6a2fd6 Fix for gutenberg 3.4 2018-08-01 12:07:17 -07:00
Justin Shreve d346945702 Add Collapsed Review View (https://github.com/woocommerce/woocommerce-admin/pull/242)
* Add Collapsed Review View

* Fix spacing issue on main button action
2018-08-01 08:21:51 -04:00
Kelly Dwan 727654ff3b SummaryNumber Component: Update to latest hifi design (https://github.com/woocommerce/woocommerce-admin/pull/237)
* Add first pass + demo of updated SummaryNumber

* Add new larger screen breakpoint

* Remove the max-width from the content wrapper

* Update previous label text

* Fix the border colors/sizing

* Create a mixin to generate the grid template pattern

* Add green/red colors based on trend, with prop to reverse

In some cases, a downward trend is good (ex, refunds), so we want to be able to color those green

* Move selected number containers up to avoid the double-border

* Document className logic, and apply 10-item layout to all cases of 10+ items

* Remove layout notes

* Update component docs, clean up optional displays

* Update style of SummaryNumbers inside cards

* Filter out any `false` or otherwise unrenderable children

* Fix card borders

* Update dashboard component to use new props

* Check that prevValue is defined

a prevValue of 0 was incorrectly outputting `0` for both label and value

* Update no-change datapoint style

* Update default data values

Rather than hiding the prevValue/label or delta section if these are not passed through, use default N/A placeholders

* Change SummaryList & SummaryNumber to a list of links

Add active, hover, and focus styles

* Add a short help text for screen reader users

* Add href to README

* Add the href prop to the readme example

* Fix border colors

The `nth-of-type` rules need to be on the `li` containers

* Fix font-weights on value & delta

* Wrap the previous label/value when the percentage wraps
2018-07-30 11:14:09 -04:00
Justin Shreve 21dfd46cdd Update ActivityCard mobile styles (https://github.com/woocommerce/woocommerce-admin/pull/241) 2018-07-26 14:52:25 -04:00
Justin Shreve ff934eb999 Add SplitButton Component (https://github.com/woocommerce/woocommerce-admin/pull/236)
* Add SplitButton component

* Update primary styles and focus border
2018-07-25 10:25:08 -04:00
Kelly Dwan 944b7ab460 Update to Gutenberg 3.3 (https://github.com/woocommerce/woocommerce-admin/pull/234)
Removes Gutenberg package dependency in favor of published sub-packages, update tests and build process to reflect new package locations
2018-07-23 16:14:40 -04:00
Justin Shreve c587ca94dc Add rating components (https://github.com/woocommerce/woocommerce-admin/pull/233)
* Add rating component

* Add ProductRating, ReviewRating components.
Add tests.
2018-07-23 09:19:24 -04:00
Kelly Dwan 0c845a2852 Activity Panel: Add loading placeholder for ActivityCard, using Inbox as demo (https://github.com/woocommerce/woocommerce-admin/pull/220)
* Mock up an “API response object” for the inbox notices

* Add in a fake “loading” delay

* Add placeholder mixin from Calypso

* Add a placeholder ActivityCard and styles

* Merge exports of placeholder into ActivityCard

* Add tests for placeholder card

* Update readme

* Switch placeholder content prop to a line count, rather than specific children

* Update tests for new lines prop

* Clear timeout when the inbox unmounts

* Add a test for 0 lines
2018-07-20 14:41:39 -04:00
Justin Shreve dabef973bd Add ProductImage Component (https://github.com/woocommerce/woocommerce-admin/pull/231)
* Add ProductImage Component

* Use provided product image alt text
2018-07-20 14:24:39 -04:00
Justin Shreve 3239a74eef Add unread indicator to mobile panel toggle (https://github.com/woocommerce/woocommerce-admin/pull/219)
* Add unread indicator to mobile panel toggle

* Add accessible unread indiciators

* Add default functions for the WP Notices component
2018-07-18 11:20:00 -04:00
Justin Shreve 22028283ef Add Activity Panel Outbound Link Component (https://github.com/woocommerce/woocommerce-admin/pull/213)
* Activity Panel Outbound Link

* Address PR Feedback: Pass through additional props on ActivityOutboundLink, add comment for activity panel wrapping padding, fix README naming, and use $gap $gutter trick for outbound link padding.
2018-07-17 14:51:56 -04:00
Justin Shreve 0e0426e3cd Fix ActivityPanel Slide Animation (https://github.com/woocommerce/woocommerce-admin/pull/217) 2018-07-17 13:07:36 -04:00
Justin Shreve 9cc4e1b97a Add Order Status Component (https://github.com/woocommerce/woocommerce-admin/pull/214) 2018-07-17 09:11:13 -04:00
Kelly Dwan f3150a5727 Activity Panel: Add a "first draft" of Inbox items (https://github.com/woocommerce/woocommerce-admin/pull/212)
* Move panel components into a single folder

* Add ActivityCards to the inbox panel

* Add inbox-specific styles
2018-07-16 14:37:25 -04:00
Justin Shreve dd98f925ef Add Flag Component (https://github.com/woocommerce/woocommerce-admin/pull/197)
* Add Flag Component

* Fix for travis ci

* Fix spacing with new card layout
2018-07-16 12:28:26 -04:00
Kelly Dwan 9fca535c67 Update ActivityCard to latest hifi designs (https://github.com/woocommerce/woocommerce-admin/pull/203)
* ActivityCard: Update to match new activity panel designs

* Add spacing rhythm system, add the rest of the base colors

* Add styles for the ActivityCard

* Use the new ActivityCard in the orders panel

* Update text color & size

* Disable timestamped test (string changes based on date)

* Use moment to generate a relative timestamp to match “3 days ago” snapshot

* Rename spacing vars

The difference between gap and gap-med is not intuitive, so let’s switch to -small, and change -small to -smallest.
2018-07-16 09:53:38 -04:00
Justin Shreve e0b38b5c94 Fix Accessibility issues: tabpanel behavior, and reduced motion setting (https://github.com/woocommerce/woocommerce-admin/pull/185)
* Fix Accessibility issues: tabpanel behavior, and reduced motion setting

* Move tabindex to <Section /> and add aria-label to the panel

* move role and aria-label to div component
2018-07-13 16:28:01 -04:00
Kelly Dwan 99f726bfb5 ActivityPanel: Update semantics for screen reader navigation (https://github.com/woocommerce/woocommerce-admin/pull/182)
* Update semantics for ActivityPanel

Move the Section wrap to the top-level of ActivityPanel
Use an `aside` for the panel, which will expose the panel as a “complementary” in landmark nav
Add a heading for the Section/aside, which also fixes the heading hierarchy

* Update textdomains to match woo-dash change

* Switch panel container to a `div` so that clickOutside works as expected
2018-07-13 15:31:58 -04:00
Justin Shreve 803136ca9a Fixes some display issues on embedded/classic WC pages (https://github.com/woocommerce/woocommerce-admin/pull/186) 2018-07-13 15:19:54 -04:00
Justin Shreve eb7b60d558 Add Gravatar Component (https://github.com/woocommerce/woocommerce-admin/pull/188) 2018-07-11 13:06:26 -04:00
Justin Shreve 71c12e6795 Update woo-dash naming to new wc-admin name (https://github.com/woocommerce/woocommerce-admin/pull/183) 2018-07-10 08:48:06 -04:00
Justin Shreve 3783e5e6f7 Add ActivityHeader & implement panel styles (https://github.com/woocommerce/woocommerce-admin/pull/167)
* Header shadow on scroll, panel styles, implement woo bubble

* Add ActivityHeader component

* Fix admin bar stickyness and missing onInvoke function
2018-07-09 11:46:31 -04:00
Justin Shreve f0c27ee999 Activity Panel: Unread bubble, animations, cleaned up styles/mobile handling (https://github.com/woocommerce/woocommerce-admin/pull/154)
* Activity Panel Updates: Unread bubble, animations, cleaned up styles and mobile handling.

* * Color and animation definition cleanup
* Fix animation for tab switch
* Clicking outside the panel will close it
* Hover bubble border
* Aria attributes/tablist

* Fix mobile styles
2018-07-06 08:40:05 -04:00
Justin Shreve 9f1015b155 Implement updated activity panel tab design (https://github.com/woocommerce/woocommerce-admin/pull/137) 2018-06-29 11:20:08 -04:00
Justin Shreve 2070337459 Add Gridicons (https://github.com/woocommerce/woocommerce-admin/pull/136) 2018-06-28 11:23:26 -04:00
Justin Shreve d604f3625c Rename sidebar to activity-panel, and refactor code and behavior. 2018-06-28 09:52:45 -04:00
Justin Shreve ba68ada59d Add Pagination Component (https://github.com/woocommerce/woocommerce-admin/pull/117)
* Add pagination component

* Refactor query string/route updating so it can be done using a nav-utils helper function

* Fix typo and adjust accessibility attributes for error handling and current page

* Update styles
2018-06-26 10:59:35 -04:00
Justin Shreve bf80e5c649 Global Header & Activity Panel on all WooCommerce Pages (https://github.com/woocommerce/woocommerce-admin/pull/110)
* Makes the header/sidebar component embeddable on other WooCommerce pages.

* Some mobile CSS fixes to make sure the header bar displays properly on smaller screensizes.

* Refactor notices and pull out success message from the panel

* Handle positioning of screen options, update message handling, css fixes and header height increase to match mockups, some code cleanup

* Only enable the header embed on normal/classic WooCommerce pages, and provide a method for plugins to opt-in.
This change also builds nicer breadcrumbs for pages.

* Code cleanup and consistent naming.

* Some spacing cleanup. Also updated the page title method to correctly set page titles in PHP for classic WC pages
2018-06-26 10:49:42 -04:00
Kelly Dwan 99ac7728cd Try a context-aware heading component (https://github.com/woocommerce/woocommerce-admin/pull/121)
* Add H and Section components for context-aware headings

* Switch to using the new context-aware heading and section components

* Style header by class name, not heading level

* Add our client dir to the modules list for Jest

We already have this setting in webpack, but Jest doesn’t pick up on that
2018-06-20 11:10:06 -04:00
Kelly Dwan bc084b7302 Add Summary Number/Performance Tile component (https://github.com/woocommerce/woocommerce-admin/pull/109)
* Add SummaryList and SummaryNumber components

* Add a demo of SummaryList/SummaryNumbers

* Pages without the sidebar displayed can use a larger max-width

* Adjust layout styles for smaller screens
2018-06-14 11:16:57 -04:00
Kelly Dwan 29136ce44c Show real orders in the sidebar orders tab (https://github.com/woocommerce/woocommerce-admin/pull/105)
* Add an activity list component which will fetch and display the respective tabs’ content

* Add currency and order calculation helpers from Calypso

* Add date support to ActivityCard

* Fix the product label when there’s only 1 product

* Only display the orders on the orders tab

* Remove demo component

* PR feedback

- Switch to function components
- Check isLoading for showing loading state
- use v3 of WC API
- Remove getOrderShippingMethod (it’s not a tax-related function)
- Switch to array.reduce
- Add `|| 0` protect to all possible API-based calculations
2018-06-07 12:05:22 -04:00
Paul Sealock b25fdc3f31 DatePicker: Add url support and container 2018-06-05 10:20:25 +12:00
Justin Shreve 59cb071aa2 Expand WP notices with header toggle (https://github.com/woocommerce/woocommerce-admin/pull/101)
* Display WP notices behind a button

* Expand WP notices inline when the WP toggle is clicked

* Update setState calls

* Fix string display when only 1 notice is present

* Remove display:none that snuck in during rebase
2018-06-04 10:25:41 -04:00
Kelly Dwan e0d05ecfa0 Add a label to Count to add context for screen reader users (https://github.com/woocommerce/woocommerce-admin/pull/102)
* Add a label “Total” to the count balloon

* Update README

* Switch to an aria-label, so that we can set a fully translatable string

* Update README to make label default clear
2018-06-01 10:39:48 -04:00
Kelly Dwan b0bcce86d8 Add CSS naming conventions following Gutenberg’s standards (https://github.com/woocommerce/woocommerce-admin/pull/99)
* Add CSS naming conventions following Gutenberg’s standards

* Update `woo-dashboard` to `woocommerce-layout`

* Update admin notice container to new classname standard
2018-06-01 10:35:18 -04:00
Kelly Dwan 4191d7adab Add ActivityCard component (https://github.com/woocommerce/woocommerce-admin/pull/86)
* Add an ActivityCard component

* Add font-size mixin, hover-state mixin, and a fake base padding

* Style the ActivityCard

* Style the card image

* Add README

* Address PR feedback

- Add className prop
- children propType is required
- Link to a real image
2018-05-25 15:34:35 -04:00
Kelly Dwan a56437c9c8 Fix React warnings for nested components/className (https://github.com/woocommerce/woocommerce-admin/pull/83)
* Fix class/className warning

* Fix nested `a` warning

* Add note about SCRIPT_DEBUG
2018-05-23 14:01:41 -04:00
Paul Sealock 558d163f35 Sidebar: Add Tabs 2018-05-23 12:42:26 +12:00
Justin Shreve d47454300a Add timeline separator/heading to the sidebar (https://github.com/woocommerce/woocommerce-admin/pull/71)
* Add a timeline separator to the sidebar.

* Rename Timeline/Separator to SidebarHeader
2018-05-22 16:15:00 -04:00
Justin Shreve 7b0d0b1fed Update wp-admin navigation structure (https://github.com/woocommerce/woocommerce-admin/pull/70)
* Updates wp-admin navigation structure: Dashboard is now under WooCommerce, and Analytics is moved visually under WooCommerce

* Fix focus padding issue and make sure arrow displays for the current submenu
2018-05-22 15:59:32 -04:00
Kelly Dwan 8f23630269 Layout: Add structure components & CSS (https://github.com/woocommerce/woocommerce-admin/pull/45)
* Refactor dashboard layout into new Layout components

* Style the new layout

* Use Slot/Fill for the Header component

* Center cards, fixed size for sidebar

* Only set the box-sizing on things within our app

* Make app the full height of the wp-admin frame

* Add styles to show/hide sidebar

* Toggle the sidebar

* Wrap router around entire Layout, use page setting to show/hide sidebar on page

* Fix the styles on show/hide buttons, add title & close button to the sidebar

* Use a min-height on visible sidebars

* Add/update READMEs

* Update space between main content & sidebar
2018-05-18 13:31:08 -04:00