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

feat:(726) card composable #802

Merged
merged 73 commits into from
Apr 11, 2023
Merged
Changes from 1 commit
Commits
Show all changes
73 commits
Select commit Hold shift + click to select a range
b1e300e
spike(PPDSC-2577): card composable
Jan 10, 2023
5974e88
spike(PPDSC-2577): add card
Jan 10, 2023
89bc4e1
spike(PPDSC-2577): play around
Jan 11, 2023
3776333
spike(PPDSC-2577): add areas
Jan 12, 2023
6639bfe
spike(PPDSC-2577): add areas
Jan 12, 2023
fb02c16
chore(PPDSC-2747): stories added
mstuartf Feb 16, 2023
32c1b83
chore(PPDSC-2747): fix build
mstuartf Feb 16, 2023
6429391
chore(PPDSC-2747): img component
mstuartf Feb 16, 2023
c7736e2
chore(PPDSC-2747): typo
mstuartf Feb 17, 2023
7301155
chore(PPDSC-2747): chore(PPDSC-2754: storybook, order to overrides
Feb 27, 2023
f30d809
chore(PPDSC-2747): update style overrides
Feb 28, 2023
1eae517
chore(PPDSC-2747): chore/ppdse-2747-added areas & variations
baburay23 Feb 28, 2023
66e181e
chore(PPDSC-2747): grid for stories with multiple cases
Feb 28, 2023
9a5e9af
chore(PPDSC-2747): chore/ppdse-2747-variations-inset-done
baburay23 Feb 28, 2023
ed1d562
chore(PPDSC-2747): chore/ppdse-2747-added areas on stories
baburay23 Feb 28, 2023
5452378
chore(PPDSC-2747): chore/ppdse-2747-layout and span done
baburay23 Feb 28, 2023
2812106
chore(PPDSC-2747): combine overrides stories
Mar 1, 2023
3a5a7d2
chore(PPDSC-2747): chore/ppdse-2747-switched stories
baburay23 Mar 1, 2023
70a1cb9
chore(PPDSC-2747): chore/ppdse-2747-switched stories
baburay23 Mar 1, 2023
7095961
chore(PPDSC-2747): chore/ppdse-2747-replaced text
baburay23 Mar 1, 2023
eebc5d6
chore(PPDSC-2747): chore/ppdse-2747-fixed box shadow
baburay23 Mar 1, 2023
427196e
chore(PPDSC-2747): chore/ppdse-2747-testing max width
baburay23 Mar 1, 2023
8897de8
chore(PPDSC-2747): chore/ppdse-2747-fixed layout columnns
baburay23 Mar 1, 2023
14653e0
chore(PPDSC-2747): chore/ppdse-2747-switched columnn colors
baburay23 Mar 1, 2023
0e3c826
chore(PPDSC-2747): chore/ppdse-2747-added default vis
baburay23 Mar 2, 2023
5107517
chore(PPDSC-2747): requested changes to overrides story
Mar 2, 2023
16123fa
chore(PPDSC-2747): chore/ppdse-2747-fixed focus visible
baburay23 Mar 2, 2023
3632de3
chore(PPDSC-2747): chore/ppdse-2747-fixed focus visible
baburay23 Mar 2, 2023
913be84
chore(PPDSC-2747): simplify default story
Mar 2, 2023
46209e1
chore(PPDSC-2747): correct responsive card story
Mar 2, 2023
27a4bda
chore(PPDSC-2747): update snapshots
Mar 3, 2023
e20999e
chore(PPDSC-2747): chore/ppdse-2747-removed preset
baburay23 Mar 3, 2023
bdce5de
chore(PPDSC-2747): chore/ppdse-2747-removed preset
baburay23 Mar 3, 2023
0c799ab
chore(PPDSC-2747): chore/ppdse-2747-removed preset-again
baburay23 Mar 3, 2023
1657a07
chore(PPDSC-2747): chore/ppdse-2747-updated snaps
baburay23 Mar 3, 2023
814a875
chore(PPDSC-2747): chore/ppdse-2747-updated complier
baburay23 Mar 3, 2023
387cb1c
chore(PPDSC-2747): chore/ppdse-2747-updated
baburay23 Mar 3, 2023
db7fc56
chore(PPDSC-2747): added types
baburay23 Mar 3, 2023
63331dd
chore(PPDSC-2747): rename to card-composable
Mar 3, 2023
e4a6ccd
chore(PPDSC-2747): fix Default layout
Mar 3, 2023
d0d6059
chore(PPDSC-2747): update snapshots
Mar 3, 2023
3ca7dc5
chore(PPDSC-2747): fixed type
baburay23 Mar 3, 2023
f98709d
chore(PPDSC-2747): added space on headline
baburay23 Mar 3, 2023
600067a
chore(PPDSC-2747): added space on flag
baburay23 Mar 3, 2023
59fbf19
chore(PPDSC-2747): fixed height thing
baburay23 Mar 6, 2023
389c9e6
chore(PPDSC-2747): added space
baburay23 Mar 6, 2023
d677c3f
chore(PPDSC-2747): remove cardcoverlink experiment ref
Mar 7, 2023
391e927
chore(PPDSC-2747): adjust link focus rectangle sizes
Mar 8, 2023
fbfd1fb
chore(PPDSC-2747): remove spacing overrides
Mar 10, 2023
4398e5f
chore(PPDSC-2747): update button
Mar 10, 2023
5b6fa97
feat(726): merge
Apr 3, 2023
2a40c65
feat(726): refactor
Apr 3, 2023
d4c5572
feat(726): update stories
Apr 4, 2023
96a40f7
feat(726): add ref and theme
Apr 4, 2023
5436c21
feat(726): update stories
Apr 4, 2023
986c38b
feat(726): fix images
Apr 4, 2023
dd1f35a
feat(726): add unit tests
Apr 4, 2023
d02fc6a
feat(726): change to use LinkStandalone
Apr 4, 2023
b2352cb
Merge branch 'main' into feat/726-card-composable
mutebg Apr 4, 2023
a197cbb
feat(726): remove headlineLink
Apr 4, 2023
f4538d8
feat(726): fix tests
Apr 4, 2023
5e3b09d
feat(726): address design feedback
Apr 5, 2023
2b178be
Merge branch 'main' into feat/726-card-composable
mutebg Apr 5, 2023
fd583ed
feat(726): fix docs snapshots
Apr 5, 2023
5921415
feat(726): add defaults to all comps
Apr 5, 2023
a6da1e6
feat(726): address design feedback
Apr 5, 2023
24f9ed9
feat(726): add defaults to card-link
Apr 5, 2023
84022b6
feat(726): update snapshots
Apr 5, 2023
4969e53
feat(726): add transition preset
Apr 5, 2023
593df10
Merge branch 'main' into feat/726-card-composable
mutebg Apr 6, 2023
fd6b7a2
feat(726): address feedback
Apr 6, 2023
1e462e4
Merge branch 'main' into feat/726-card-composable
mutebg Apr 7, 2023
d5ed200
Merge branch 'main' into feat/726-card-composable
mutebg Apr 11, 2023
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
feat(726): address design feedback
  • Loading branch information
Stoyan Delev committed Apr 5, 2023
commit 5e3b09d00bff6e8a3f6e210ac5817e8e7033f106
162 changes: 37 additions & 125 deletions src/card-composable/__tests__/__stories/card-composable.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ import {
IconFilledBookmarkBorder,
} from '../../../icons';
import {LinkInline} from '../../../link';
import {defaultFocusVisible} from '../../../utils/default-focus-visible';
import {Tag} from '../../../tag';
import {VideoPlayer} from '../../../video-player';
import {DEFATULT_VIDEO_PLAYER_CONFIG} from '../../../video-player/__tests__/config';
Expand Down Expand Up @@ -57,11 +56,7 @@ const cardCustomThemeObject: CreateThemeArgs = {
name: 'card-custom-theme',
overrides: {
stylePresets: {
centered: {
base: {
textAlign: 'center',
},
},
// split stories
firstSplitBarCustom: {
base: {
color: '{{colors.inkBase}}',
Expand All @@ -76,30 +71,6 @@ const cardCustomThemeObject: CreateThemeArgs = {
textAlign: 'center',
},
},
// TODO: might need to move or move it to defaults
headlineLink: {
base: {
color: '{{colors.inkContrast}}',
textDecoration: 'none',
},
hover: {
color: '{{colors.interactivePrimary040}}',
textDecoration: 'none',
},
active: {
color: '{{colors.interactivePrimary050}}',
textDecoration: 'none',
},
visited: {
color: '{{colors.interactiveVisited010}}',
},
'focus-visible': defaultFocusVisible,
},
headlineWithHoverFromParent: {
base: {
color: 'currentColor',
},
},
// Other stories
cardBook: {
base: {
Expand All @@ -125,7 +96,13 @@ const cardCustomThemeObject: CreateThemeArgs = {
'{{borders.borderWidth010}} {{borders.borderWidth000}} {{borders.borderWidth000}} {{borders.borderWidth000}}',
},
},
// cardContentSeparateColor
// Other stories
centered: {
base: {
textAlign: 'center',
},
},
// Whole card as a link by applying the 'expand' prop
cardContentSeparateColor: {
base: {
boxShadow: '{{shadows.shadow020}}',
Expand All @@ -144,22 +121,26 @@ const cardCustomThemeObject: CreateThemeArgs = {
// Style preset - card and flag colours
cardContainerWithHover: {
base: {
borderStyle: 'solid',
borderColor: '{{colors.inkBrand010}}',
borderWidth: '{{borders.borderWidth010}}',
backgroundColor: '{{colors.interface010}}',
backgroundColor: '{{colors.interfaceInformative020}}',
color: '{{colors.inkBrand010}}',
},
hover: {
boxShadow: '{{shadows.shadow030}}',
backgroundColor: '{{colors.interface020}}',
color: '{{colors.inkContrast}}',
backgroundColor: '{{colors.interfaceInformative010}}',
color: '{{colors.inkInverse}}',
},
},
// Style preset - headline, paragraph, card actions and tag colours
cardContainerActionsMock: {
currentColor: {
base: {
backgroundColor: '{{colors.amber010}}',
color: 'currentColor',
},
},
currentColorTag: {
base: {
color: 'currentColor',
borderStyle: 'solid',
borderColor: 'currentColor',
borderWidth: '{{borders.borderWidth010}}',
},
},
},
Expand Down Expand Up @@ -263,13 +244,7 @@ export const StoryVariations = () => (
>
<CardContent rowGap={contentGap}>
<CardLink href={window.location.href}>
<H
overrides={{
heading: {
// stylePreset: 'headlineLink'
},
}}
/>
<H />
</CardLink>
</CardContent>
<CardMedia
Expand All @@ -293,13 +268,7 @@ export const StoryVariations = () => (
>
<Flag>Flag</Flag>
<CardLink expand href={window.location.href}>
<H
overrides={{
heading: {
// stylePreset: 'headlineLink'
},
}}
/>
<H />
</CardLink>
<P />
</CardContent>
Expand Down Expand Up @@ -546,7 +515,7 @@ const SplitCard = ({columns}: {columns: string}) => {
<CardMedia
media={{src: 'https://storybook.newskit.co.uk/placeholder-3x2.png'}}
/>
<CardActions>
<CardActions alignItems="start">
<Tag href="/news">Tag</Tag>
</CardActions>
</CardComposable>
Expand Down Expand Up @@ -589,9 +558,7 @@ export const StoryOrder = () => (
media={{src: 'https://storybook.newskit.co.uk/placeholder-3x2.png'}}
/>
<CardActions>
<Tag onClick={() => alert('Tag clicked')} size="medium">
Tag
</Tag>
<Tag size="medium">Tag</Tag>
</CardActions>
</CardComposable>
</StorybookCase>
Expand Down Expand Up @@ -652,29 +619,6 @@ export const StoryResponsiveCard = () => (
);
StoryResponsiveCard.storyName = 'Responsive card';

export const StoryOnClick = () => (
<StorybookPage>
<StorybookCase title="onClick handler on Tag">
<CardComposable overrides={{maxWidth: '250px'}} rowGap={areasGap}>
<CardContent rowGap={contentGap}>
<Flag>Flag</Flag>
<H />
<P />
</CardContent>
<CardMedia
media={{src: 'https://storybook.newskit.co.uk/placeholder-3x2.png'}}
/>
<CardActions>
<Tag onClick={() => alert('Tag clicked')} size="medium">
Tag
</Tag>
</CardActions>
</CardComposable>
</StorybookCase>
</StorybookPage>
);
StoryOnClick.storyName = 'On click';

export const StoryLogicalProps = () => (
<StorybookPage>
<StorybookCase title="Margin overrides">
Expand Down Expand Up @@ -772,61 +716,31 @@ export const StoryOverrides = () => (
<H
overrides={{
heading: {
stylePreset: 'headlineWithHoverFromParent',
stylePreset: 'currentColor',
},
}}
/>
<P />
<P stylePreset="currentColor" />
</CardContent>
{/* CardActions might be better to be a Grid instead of Block so all sub-components are consistent? */}
<CardActions
overrides={{paddingBlockEnd: 'space040', paddingInline: 'space040'}}
>
<Tag href="http://example.com" size="medium">
<Tag
href="http://example.com"
size="medium"
overrides={{stylePreset: 'currentColorTag'}}
>
Tag
</Tag>
</CardActions>
</CardComposable>
</StorybookCase>

<StorybookCase title="Style preset - headline, paragraph, card actions and tag colours">
<StorybookCase title="Typography preset - Headline">
<CardComposable
overrides={{
maxWidth: '372px',
}}
overrides={{maxWidth: '372px', stylePreset: 'no'}}
rowGap={areasGap}
>
<CardMedia
media={{src: 'https://storybook.newskit.co.uk/placeholder-3x2.png'}}
/>
<CardContent
overrides={{paddingInline: 'space040'}}
rowGap={contentGap}
>
<Flag>Flag</Flag>
<H
overrides={{
heading: {
stylePreset: 'inkBrand010',
},
}}
/>
<P stylePreset="cardContainerActionsMock" />
</CardContent>
<CardActions
overrides={{
paddingInline: 'space040',
stylePreset: 'cardContainerActionsMock',
}}
>
<Tag href="http://example.com" size="medium">
Tag
</Tag>
</CardActions>
</CardComposable>
</StorybookCase>
<StorybookCase title="Typography preset - Headline">
<CardComposable overrides={{maxWidth: '372px'}} rowGap={areasGap}>
<CardContent rowGap={contentGap}>
<Flag>Flag</Flag>
<H
Expand All @@ -853,7 +767,7 @@ StoryOverrides.storyName = 'Styling overrides';
// https://www.linkedin.com/search/results/content/?keywords=design&origin=FACETED_SEARCH&postedBy=%5B%22first%22%2C%22following%22%5D&sid=xxV&sortBy=%22relevance%22
export const ComplexStory = () => (
<StorybookPage>
<StorybookCase title="Random card">
<StorybookCase title="Other card">
<CardComposable
overrides={{maxWidth: '250px', stylePreset: 'cardBook'}}
style={{overflow: 'hidden'}}
Expand Down Expand Up @@ -973,10 +887,8 @@ export const ComplexStory = () => (
}}
/>
<TextBlock typographyPreset="utilityBody020" stylePreset="inkBase">
Featuring free WiFi, Palacio de Rojas is located 350 m from the
Lonja Silk Exchange and Valencia’s Central Market. It offers
air-conditioned apartments with city views. Private parking is
offered upon request.
Short paragraph description of the article, outlining main story and
focus.
</TextBlock>
</CardContent>
<CardActions
Expand Down