New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add the Audience Tile happy path view (Storybook) #8135
Comments
@techanvil, why do we have a separate task for this storybook story? It should be part of the #8131 ticket, shouldn't it? We usually create new stories when we work on actual components. Or I miss something? |
@eugene-manuilov, #8131 only relates to the UI and logic encapsulated in the Setup CTA Banner component, whereas this issue is about introducing the individual Audience Tile component, initially in Storybook. |
Thanks, @techanvil, I was confused by what it means
@asvinb, let's probably rephrase AC a little bit because currently it is confusing as it feels like the main purpose of this task is to create a storybook story. AC should say that first of all we need to create the new component |
That's right @eugene-manuilov. Thanks for pointing out the confusion, I can see what you mean. I've updated the Feature Descriptions for all of the issues that involve creating a component and adding it to Storybook to make them clearer. |
Thanks @eugene-manuilov . Let me know if it's clearer now. Thanks! |
Yes, thanks, Asvin. AC ✔️ |
IB ✔️ |
Hey @kelvinballoo, thanks for your QA. RE Issue 1, 2 and 6, the total width or your storybook window must be >1200px to load the desktop breakpoint, in these issues you were viewing the mobile or tablet breakpoint where these elements should be missing or padding/layout is different. RE Issue 3, I've manually set the pixel line-heights of the text to match the height for each metric section. RE Issue 4 and 5, fixed. RE Issue 7, is consistent with other usage of digits of there range in the Key Metrics widgets and other dashboard widgets. RE Issue 8 and 9, fixed. |
QA Update ❌Thanks @benbowler , great work. Retested as follows and I just need you to look into Issues 2, 9, 10. ISSUE 1 : ✅ ISSUE 2 : ❌ ISSUE 3 ✅ ISSUE 4 ✅ ISSUE 5 ✅ ISSUE 6 ✅ ISSUE 7 ✅ ISSUE 8 ✅ ISSUE 9 ❌ ISSUE 10 🆕 Image are attached |
Thanks @kelvinballoo, updates below: ISSUE 2 : ❌: You can see the tooltip version of the story here. ISSUE 9 ❌: I made the margin bottom 16px in total rather than adding an additional 16px. PR connected to this ticket with the change and will move to CR once checks pass. |
QA Update
|
Hey @kelvinballoo, the reason the title is hidden on smaller breakpoints is that, in these breakpoints, the |
QA Update ✅Thanks for the clarification @benbowler ! Moving this to 'Approval' |
Feature Description
Create the individual audience tile component, implementing the happy path view (i.e. the main view showing the metrics for an audience), and add it to Storybook.
Note this does not include the loading state or any other state variants which will be implemented separately.
See audience tiles > individual tiles in the design doc.
Do not alter or remove anything below. The following sections will be managed by moderators only.
Acceptance criteria
Implementation Brief
assets/js/modules/analytics-4/components/widgets/AudienceSegmentation/AudienceTile.js
title
infoTooltip
visitors
visitsPerVisitors
pagesPerVisit
pageviews
topCities
topContent
Widget
visitors
,visitsPerVisitors
,pagesPerVisit
, andpageviews
props, should receive value as an object. They will be extracted from report response in parent component, and will represent the metric values. The object should look like this{previousValue: x, currentValue: x, metricValue: x}
. Mimic their usage to what we have inMetricTileNumeric
component.topCities
andtopContent
will receive an object in format{dimensionValues: [], metricValues: [], total: x }
. It will represent the data that is used inTopCitiesWidget
component for example, and then you can borrow the logic fromMetricTileTable
component<Widget noPadding>
, and a main childdiv
with class, saygooglesitekit-audience-segmentation-tile
infoTooltip
components from one of the key metrics widgetsdiv
wrapperPartial data
with figma design.topContent
ortopCities
prop are null, a messageNo data to show yet
should be displayed instead of their datauseBreakpoint
hook to extract the current device size, so that tile title withinfoTooltip
are conditionally rendered in following manner:BREAKPOINT_TABLET
orBREAKPOINT_SMALL
title should not be renderedassets/sass/components/analytics-4/audience-segmentation/audience-tile.scss
and apply the styles to match the figma designs linked in AC for desktop and mobileTest Coverage
AudienceTile
tests and storiesQA Brief
Changelog entry
The text was updated successfully, but these errors were encountered: