Skip to content
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

Rework flexible/general stories #12464

Open
wants to merge 7 commits into
base: main
Choose a base branch
from
Open

Conversation

cemms1
Copy link
Contributor

@cemms1 cemms1 commented Sep 26, 2024

What does this change?

Updates the Storybook stories for the FlexibleGeneral component to better demonstrate the variations in designs for various card configurations in as few stories as possible.

We now create a list of standard cards with defined variations in design so that we can visualise all the design quirks in one story. Each story now represents variations to the splash (sublinks + boost level) and not variations in the standard cards

Also contains other semi-related refactoring work to FlexibleSpecial and FlexibleGeneral

Why?

Part of this Trello ticket

We can use this to better visualise and document which design variations and configuration options there are with the FlexibleGeneral container as well as showing what design features are currently missing.

See Chromatic diff for better visualisation of changes.

Screenshots

Before After
before after

Copy link

github-actions bot commented Sep 26, 2024

Size Change: +2 B (0%)

Total Size: 923 kB

ℹ️ View Unchanged
Filename Size Change
dotcom-rendering/dist/1000.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/1026.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1073.client.web.********************.js 4.88 kB 0 B
dotcom-rendering/dist/1090.client.web.********************.js 752 B 0 B
dotcom-rendering/dist/1156.client.web.********************.js 3.86 kB 0 B
dotcom-rendering/dist/1190.client.web.********************.js 3.65 kB 0 B
dotcom-rendering/dist/1279.client.web.********************.js 4.56 kB 0 B
dotcom-rendering/dist/1391.client.web.********************.js 725 B 0 B
dotcom-rendering/dist/1417.client.web.********************.js 2.28 kB 0 B
dotcom-rendering/dist/1425.client.web.********************.js 3.45 kB 0 B
dotcom-rendering/dist/1476.client.web.********************.js 784 B 0 B
dotcom-rendering/dist/1482.client.web.********************.js 4.03 kB 0 B
dotcom-rendering/dist/1667.client.web.********************.js 918 B 0 B
dotcom-rendering/dist/17.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/181.client.web.********************.js 4.53 kB 0 B
dotcom-rendering/dist/1888.client.web.********************.js 2.92 kB 0 B
dotcom-rendering/dist/1904.client.web.********************.js 12.6 kB 0 B
dotcom-rendering/dist/1940.client.web.********************.js 507 B 0 B
dotcom-rendering/dist/2123.client.web.********************.js 619 B 0 B
dotcom-rendering/dist/2182.client.web.********************.js 529 B 0 B
dotcom-rendering/dist/2249.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/2310.client.web.********************.js 880 B 0 B
dotcom-rendering/dist/2337.client.web.********************.js 3.05 kB 0 B
dotcom-rendering/dist/2398.client.web.********************.js 2.67 kB 0 B
dotcom-rendering/dist/2471.client.web.********************.js 14.5 kB 0 B
dotcom-rendering/dist/2544.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/267.client.web.********************.js 917 B 0 B
dotcom-rendering/dist/2803.client.web.********************.js 4.68 kB 0 B
dotcom-rendering/dist/281.client.web.********************.js 642 B 0 B
dotcom-rendering/dist/3006.client.web.********************.js 4.49 kB 0 B
dotcom-rendering/dist/305.client.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/3054.client.web.********************.js 4.65 kB 0 B
dotcom-rendering/dist/3109.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/3270.client.web.********************.js 961 B 0 B
dotcom-rendering/dist/3304.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/3769.client.web.********************.js 999 B 0 B
dotcom-rendering/dist/3875.client.web.********************.js 4.06 kB 0 B
dotcom-rendering/dist/408.client.web.********************.js 10 kB 0 B
dotcom-rendering/dist/4122.client.web.********************.js 1.84 kB 0 B
dotcom-rendering/dist/4149.client.web.********************.js 3.77 kB 0 B
dotcom-rendering/dist/4282.client.web.********************.js 685 B 0 B
dotcom-rendering/dist/4501.client.web.********************.js 4.29 kB 0 B
dotcom-rendering/dist/4533.client.web.********************.js 2.93 kB 0 B
dotcom-rendering/dist/4569.client.web.********************.js 3.73 kB 0 B
dotcom-rendering/dist/4628.client.web.********************.js 654 B 0 B
dotcom-rendering/dist/4749.client.web.********************.js 20.2 kB 0 B
dotcom-rendering/dist/4866.client.web.********************.js 6.29 kB 0 B
dotcom-rendering/dist/4875.client.web.********************.js 157 B 0 B
dotcom-rendering/dist/4941.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/5087.client.web.********************.js 439 B 0 B
dotcom-rendering/dist/5100.client.web.********************.js 3.34 kB 0 B
dotcom-rendering/dist/5165.client.web.********************.js 5.69 kB 0 B
dotcom-rendering/dist/5192.client.web.********************.js 4.91 kB 0 B
dotcom-rendering/dist/5238.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/5337.client.web.********************.js 7.63 kB 0 B
dotcom-rendering/dist/5340.client.web.********************.js 3.31 kB 0 B
dotcom-rendering/dist/5445.client.web.********************.js 3.42 kB 0 B
dotcom-rendering/dist/5624.client.web.********************.js 2.97 kB 0 B
dotcom-rendering/dist/5648.client.web.********************.js 3.02 kB 0 B
dotcom-rendering/dist/5658.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/5757.client.web.********************.js 931 B 0 B
dotcom-rendering/dist/5880.client.web.********************.js 828 B 0 B
dotcom-rendering/dist/6044.client.web.********************.js 726 B 0 B
dotcom-rendering/dist/6059.client.web.********************.js 8.85 kB 0 B
dotcom-rendering/dist/6071.client.web.********************.js 577 B 0 B
dotcom-rendering/dist/6102.client.web.********************.js 3.79 kB 0 B
dotcom-rendering/dist/6135.client.web.********************.js 779 B 0 B
dotcom-rendering/dist/614.client.web.********************.js 17.4 kB 0 B
dotcom-rendering/dist/6154.client.web.********************.js 5.8 kB 0 B
dotcom-rendering/dist/6332.client.web.********************.js 3.42 kB 0 B
dotcom-rendering/dist/6446.client.web.********************.js 4.56 kB 0 B
dotcom-rendering/dist/6505.client.web.********************.js 1 kB 0 B
dotcom-rendering/dist/6598.client.web.********************.js 780 B 0 B
dotcom-rendering/dist/6638.client.web.********************.js 907 B 0 B
dotcom-rendering/dist/678.client.web.********************.js 804 B 0 B
dotcom-rendering/dist/682.client.web.********************.js 2.99 kB 0 B
dotcom-rendering/dist/6915.client.web.********************.js 22.7 kB 0 B
dotcom-rendering/dist/7072.client.web.********************.js 3.83 kB 0 B
dotcom-rendering/dist/7116.client.web.********************.js 23 kB 0 B
dotcom-rendering/dist/7291.client.web.********************.js 3.34 kB 0 B
dotcom-rendering/dist/7341.client.web.********************.js 3.99 kB 0 B
dotcom-rendering/dist/7346.client.web.********************.js 2.52 kB 0 B
dotcom-rendering/dist/7407.client.web.********************.js 3.7 kB 0 B
dotcom-rendering/dist/7517.client.web.********************.js 6.7 kB 0 B
dotcom-rendering/dist/7691.client.web.********************.js 853 B 0 B
dotcom-rendering/dist/7780.client.web.********************.js 2.08 kB 0 B
dotcom-rendering/dist/783.client.web.********************.js 2.42 kB 0 B
dotcom-rendering/dist/8053.client.web.********************.js 6.4 kB 0 B
dotcom-rendering/dist/8095.client.web.********************.js 4.05 kB 0 B
dotcom-rendering/dist/8167.client.web.********************.js 5.56 kB 0 B
dotcom-rendering/dist/8235.client.web.********************.js 9.95 kB 0 B
dotcom-rendering/dist/83.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/840.client.web.********************.js 3.2 kB 0 B
dotcom-rendering/dist/8504.client.web.********************.js 827 B 0 B
dotcom-rendering/dist/8536.client.web.********************.js 595 B 0 B
dotcom-rendering/dist/8626.client.web.********************.js 890 B 0 B
dotcom-rendering/dist/8697.client.web.********************.js 956 B 0 B
dotcom-rendering/dist/8702.client.web.********************.js 3.38 kB 0 B
dotcom-rendering/dist/8746.client.web.********************.js 3.01 kB 0 B
dotcom-rendering/dist/8822.client.web.********************.js 526 B 0 B
dotcom-rendering/dist/8833.client.web.********************.js 829 B 0 B
dotcom-rendering/dist/8962.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/9132.client.web.********************.js 4.2 kB 0 B
dotcom-rendering/dist/9184.client.web.********************.js 493 B 0 B
dotcom-rendering/dist/9493.client.web.********************.js 785 B 0 B
dotcom-rendering/dist/9557.client.web.********************.js 921 B 0 B
dotcom-rendering/dist/9721.client.web.********************.js 717 B 0 B
dotcom-rendering/dist/9736.client.web.********************.js 44.2 kB 0 B
dotcom-rendering/dist/9835.client.web.********************.js 647 B 0 B
dotcom-rendering/dist/9899.client.web.********************.js 669 B 0 B
dotcom-rendering/dist/Accessibility-importable.client.web.********************.js 5.96 kB 0 B
dotcom-rendering/dist/AdBlockAsk-importable.client.web.********************.js 2.85 kB 0 B
dotcom-rendering/dist/AdPortals-importable.client.web.********************.js 3.94 kB 0 B
dotcom-rendering/dist/AlreadyVisited-importable.client.web.********************.js 424 B 0 B
dotcom-rendering/dist/AppsEpic-importable.client.web.********************.js 3.57 kB 0 B
dotcom-rendering/dist/AppsFooter-importable.client.web.********************.js 3.67 kB 0 B
dotcom-rendering/dist/AppsLightboxImage-importable.client.web.********************.js 3.06 kB 0 B
dotcom-rendering/dist/AppsLightboxImageStore-importable.client.web.********************.js 2.5 kB 0 B
dotcom-rendering/dist/AudioAtomWrapper-importable.client.web.********************.js 3.58 kB 0 B
dotcom-rendering/dist/AustralianTerritorySwitcher-importable.client.web.********************.js 4.89 kB 0 B
dotcom-rendering/dist/Branding-importable.client.web.********************.js 3.05 kB 0 B
dotcom-rendering/dist/braze-web-sdk-core.client.web.********************.js 37.2 kB 0 B
dotcom-rendering/dist/BrazeMessaging-importable.client.web.********************.js 1.96 kB 0 B
dotcom-rendering/dist/CalloutBlockComponent-importable.client.web.********************.js 6.71 kB 0 B
dotcom-rendering/dist/CalloutEmbedBlockComponent-importable.client.web.********************.js 7.44 kB 0 B
dotcom-rendering/dist/CardCommentCount-importable.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/Carousel-importable.client.web.********************.js 6.02 kB 0 B
dotcom-rendering/dist/CarouselForNewsletters-importable.client.web.********************.js 4.5 kB 0 B
dotcom-rendering/dist/ChartAtom-importable.client.web.********************.js 540 B 0 B
dotcom-rendering/dist/CommentCount-importable.client.web.********************.js 3.3 kB 0 B
dotcom-rendering/dist/DiscussionApps-importable.client.web.********************.js 1.91 kB 0 B
dotcom-rendering/dist/DiscussionMeta-importable.client.web.********************.js 1.22 kB 0 B
dotcom-rendering/dist/DiscussionWeb-importable.client.web.********************.js 1.74 kB 0 B
dotcom-rendering/dist/DocumentBlockComponent-importable.client.web.********************.js 3.63 kB 0 B
dotcom-rendering/dist/Dropdown-importable.client.web.********************.js 1.73 kB 0 B
dotcom-rendering/dist/EditionSwitcherBanner-importable.client.web.********************.js 5.96 kB 0 B
dotcom-rendering/dist/EmbedBlockComponent-importable.client.web.********************.js 4.26 kB 0 B
dotcom-rendering/dist/EnhancePinnedPost-importable.client.web.********************.js 2.01 kB 0 B
dotcom-rendering/dist/FetchOnwardsData-importable.client.web.********************.js 2.44 kB 0 B
dotcom-rendering/dist/FilterKeyEventsToggle-importable.client.web.********************.js 968 B 0 B
dotcom-rendering/dist/FocusStyles-importable.client.web.********************.js 618 B 0 B
dotcom-rendering/dist/FollowWrapper-importable.client.web.********************.js 763 B 0 B
dotcom-rendering/dist/FooterLabel-importable.client.web.********************.js 347 B 0 B
dotcom-rendering/dist/FooterReaderRevenueLinks-importable.client.web.********************.js 3.75 kB 0 B
dotcom-rendering/dist/frameworks.client.web.********************.js 20.9 kB 0 B
dotcom-rendering/dist/FrontSubNav-importable.client.web.********************.js 5.45 kB 0 B
dotcom-rendering/dist/GetCricketScoreboard-importable.client.web.********************.js 3.82 kB 0 B
dotcom-rendering/dist/GetMatchNav-importable.client.web.********************.js 10.4 kB 0 B
dotcom-rendering/dist/GetMatchStats-importable.client.web.********************.js 7.89 kB 0 B
dotcom-rendering/dist/GetMatchTabs-importable.client.web.********************.js 2.71 kB 0 B
dotcom-rendering/dist/guardian-braze-components-banner.client.web.********************.js 17.2 kB 0 B
dotcom-rendering/dist/guardian-braze-components-end-of-article.client.web.********************.js 11.5 kB 0 B
dotcom-rendering/dist/GuideAtomWrapper-importable.client.web.********************.js 783 B 0 B
dotcom-rendering/dist/HighlightsContainer-importable.client.web.********************.js 5 kB 0 B
dotcom-rendering/dist/index.client.web.********************.js 45.7 kB +2 B (0%)
dotcom-rendering/dist/InstagramBlockComponent-importable.client.web.********************.js 3.29 kB 0 B
dotcom-rendering/dist/InteractiveAtomMessenger-importable.client.web.********************.js 849 B 0 B
dotcom-rendering/dist/InteractiveBlockComponent-importable.client.web.********************.js 6.33 kB 0 B
dotcom-rendering/dist/InteractiveContentsBlockComponent-importable.client.web.********************.js 4.72 kB 0 B
dotcom-rendering/dist/KeyEventsCarousel-importable.client.web.********************.js 4.77 kB 0 B
dotcom-rendering/dist/KnowledgeQuizAtom-importable.client.web.********************.js 3.56 kB 0 B
dotcom-rendering/dist/LatestLinks-importable.client.web.********************.js 4.18 kB 0 B
dotcom-rendering/dist/LightboxHash-importable.client.web.********************.js 436 B 0 B
dotcom-rendering/dist/LightboxLayout-importable.client.web.********************.js 6.49 kB 0 B
dotcom-rendering/dist/LiveBlogEpic-importable.client.web.********************.js 3.78 kB 0 B
dotcom-rendering/dist/LiveblogNotifications-importable.client.web.********************.js 3.15 kB 0 B
dotcom-rendering/dist/Liveness-importable.client.web.********************.js 5.52 kB 0 B
dotcom-rendering/dist/ManyNewsletterSignUp-importable.client.web.********************.js 7.64 kB 0 B
dotcom-rendering/dist/MapEmbedBlockComponent-importable.client.web.********************.js 5.45 kB 0 B
dotcom-rendering/dist/Metrics-importable.client.web.********************.js 2.69 kB 0 B
dotcom-rendering/dist/MostViewedFooter-importable.client.web.********************.js 5.72 kB 0 B
dotcom-rendering/dist/MostViewedFooterData-importable.client.web.********************.js 8.35 kB 0 B
dotcom-rendering/dist/MostViewedRightWithAd-importable.client.web.********************.js 4.71 kB 0 B
dotcom-rendering/dist/OnwardsUpper-importable.client.web.********************.js 5.83 kB 0 B
dotcom-rendering/dist/PersonalityQuizAtom-importable.client.web.********************.js 3.71 kB 0 B
dotcom-rendering/dist/ProfileAtom-importable.client.web.********************.js 543 B 0 B
dotcom-rendering/dist/ProfileAtomWrapper-importable.client.web.********************.js 803 B 0 B
dotcom-rendering/dist/PulsingDot-importable.client.web.********************.js 750 B 0 B
dotcom-rendering/dist/QandaAtom-importable.client.web.********************.js 542 B 0 B
dotcom-rendering/dist/ReaderRevenueDev-importable.client.web.********************.js 469 B 0 B
dotcom-rendering/dist/readerRevenueDevUtils.client.web.********************.js 1.97 kB 0 B
dotcom-rendering/dist/RelativeTime-importable.client.web.********************.js 2.53 kB 0 B
dotcom-rendering/dist/RichLinkComponent-importable.client.web.********************.js 7.23 kB 0 B
dotcom-rendering/dist/SecureSignup-importable.client.web.********************.js 5.1 kB 0 B
dotcom-rendering/dist/SendTargetingParams-importable.client.web.********************.js 2.19 kB 0 B
dotcom-rendering/dist/sentry.client.web.********************.js 792 B 0 B
dotcom-rendering/dist/SetABTests-importable.client.web.********************.js 3.69 kB 0 B
dotcom-rendering/dist/SetAdTargeting-importable.client.web.********************.js 484 B 0 B
dotcom-rendering/dist/ShareButton-importable.client.web.********************.js 1.54 kB 0 B
dotcom-rendering/dist/shimport.client.web.********************.js 2.8 kB 0 B
dotcom-rendering/dist/ShowHideContainers-importable.client.web.********************.js 644 B 0 B
dotcom-rendering/dist/ShowMore-importable.client.web.********************.js 1.75 kB 0 B
dotcom-rendering/dist/SignInGateMain.client.web.********************.js 4.54 kB 0 B
dotcom-rendering/dist/SignInGateMainCheckoutComplete.client.web.********************.js 5.63 kB 0 B
dotcom-rendering/dist/SignInGateSelector-importable.client.web.********************.js 3.16 kB 0 B
dotcom-rendering/dist/SlotBodyEnd-importable.client.web.********************.js 3.48 kB 0 B
dotcom-rendering/dist/SpotifyBlockComponent-importable.client.web.********************.js 5.31 kB 0 B
dotcom-rendering/dist/StickyBottomBanner-importable.client.web.********************.js 4.2 kB 0 B
dotcom-rendering/dist/StickyLiveblogAskWrapper-importable.client.web.********************.js 7.69 kB 0 B
dotcom-rendering/dist/SubNav-importable.client.web.********************.js 3.41 kB 0 B
dotcom-rendering/dist/TableOfContents-importable.client.web.********************.js 3.2 kB 0 B
dotcom-rendering/dist/TimelineAtom-importable.client.web.********************.js 1.23 kB 0 B
dotcom-rendering/dist/Titlepiece-importable.client.web.********************.js 14.7 kB 0 B
dotcom-rendering/dist/TopBar-importable.client.web.********************.js 8.26 kB 0 B
dotcom-rendering/dist/TopBarSupport-importable.client.web.********************.js 2.75 kB 0 B
dotcom-rendering/dist/TweetBlockComponent-importable.client.web.********************.js 1.13 kB 0 B
dotcom-rendering/dist/UnsafeEmbedBlockComponent-importable.client.web.********************.js 3.3 kB 0 B
dotcom-rendering/dist/VideoFacebookBlockComponent-importable.client.web.********************.js 5.46 kB 0 B
dotcom-rendering/dist/VineBlockComponent-importable.client.web.********************.js 3.12 kB 0 B
dotcom-rendering/dist/WeatherWrapper-importable.client.web.********************.js 7.06 kB 0 B
dotcom-rendering/dist/YoutubeBlockComponent-importable.client.web.********************.js 6.37 kB 0 B

compressed-size-action

@cemms1 cemms1 force-pushed the cemms1/flexible-general-stories branch from de127b7 to e4592ad Compare September 27, 2024 10:06
@@ -154,7 +154,7 @@ const HorizontalDivider = () => (
${from.desktop} {
width: 140px;
}
margin-top: 12px;
margin-top: ${space[3]}px;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not related, just ensuring we use source spacing where possible

@@ -101,8 +101,8 @@ export const OneCardLayout = ({
imagePositionOnMobile,
supportingContentAlignment,
} = determineCardProperties(
card.boostLevel,
card?.supportingContent?.length ?? 0,
card.boostLevel ?? 'default',
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Refactoring: cards with unspecified boostLevel are considered to be unboosted ie "default"

@@ -19,7 +19,7 @@ type Props = {
absoluteServerTimes: boolean;
};

type boostProperties = {
type BoostProperties = {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Types should be PascalCase rather than camelCase. This is flagged up in eslint:
image

@cemms1 cemms1 added the run_chromatic Runs chromatic when label is applied label Sep 27, 2024
@cemms1 cemms1 marked this pull request as ready for review September 27, 2024 10:32
@cemms1 cemms1 requested a review from a team as a code owner September 27, 2024 10:32
@github-actions github-actions bot removed the run_chromatic Runs chromatic when label is applied label Sep 27, 2024
@cemms1 cemms1 force-pushed the cemms1/flexible-general-stories branch from 192d04a to 73c16f9 Compare September 30, 2024 17:12
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant