Skip to content

Commit 265f563

Browse files
jeffchewjeffchew
authored
feat(expressive-theme): sunset of the expressive theme (#7012)
### Related Ticket(s) Refs #6747 ### Description This merges the feature branch `feat/expressive-sunset` into the `master` branch. This is the culmination of work from the last few months to effectively remove the expressive theme across `Carbon for IBM.com`. ### Changelog **Changed** - Multiple changes, see epic #5944 **Removed** - Expressive theme as default from `Carbon for IBM.com`
1 parent 37473d7 commit 265f563

File tree

96 files changed

+1525
-1231
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

96 files changed

+1525
-1231
lines changed

‎.github/workflows/automerge-feat.yml

-24
This file was deleted.

‎packages/react/docs/breaking-changes.md

+20
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,25 @@
11
# Breaking changes
22

3+
## v1.25.0
4+
5+
### Design adjustment
6+
7+
- All content block and content group components should now pass the Card CTA `copy` as `heading`. Example:
8+
9+
```javascript
10+
<ContentBlockSimple
11+
cta={{
12+
cta: {
13+
href: 'https://www.example.com',
14+
},
15+
style: 'card',
16+
type: 'local',
17+
heading: 'Lorem ipsum dolor sit ametttt',
18+
}}
19+
...
20+
/>
21+
```
22+
323
## v1.24.0
424

525
### Deprecation warning

‎packages/react/examples/codesandbox/components/ContentBlockMedia/src/index.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ const App = () => (
7171
},
7272
style: "card",
7373
type: "local",
74-
copy: "Lorem ipsum dolor sit ametttt",
74+
heading: "Lorem ipsum dolor sit ametttt",
7575
},
7676
},
7777
{
@@ -120,7 +120,7 @@ const App = () => (
120120
},
121121
style: "card",
122122
type: "local",
123-
copy: "Lorem ipsum dolor sit ametttt",
123+
heading: "Lorem ipsum dolor sit ametttt",
124124
},
125125
},
126126
]}

‎packages/react/examples/codesandbox/components/ContentGroupSimple/src/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const App = () => (
6767
},
6868
style: 'card',
6969
type: 'local',
70-
copy: 'Lorem ipsum dolor sit ametttt',
70+
heading: 'Lorem ipsum dolor sit ametttt',
7171
}}
7272
/>
7373
</div>

‎packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap

+1,193-911
Large diffs are not rendered by default.

‎packages/react/src/components/ButtonGroup/ButtonGroup.js

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const ButtonGroup = ({ buttons }) => {
3838
<li key={key} className={`${prefix}--buttongroup-item`}>
3939
<Button
4040
data-autoid={`${stablePrefix}--button-group-${key}`}
41+
isExpressive
4142
{...button}
4243
type="button"
4344
kind={key === buttons.length - 1 ? 'primary' : 'tertiary'}>

‎packages/react/src/components/CTA/CardCTA.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -53,7 +53,7 @@ const CardCTA = ({
5353
)}
5454
{!renderLightBox && (
5555
<CardLink
56-
customClassName={`${prefix}--card__video`}
56+
customClassName={`${prefix}--card__CardCTA ${prefix}--card__video`}
5757
card={{
5858
...cardProps,
5959
cta: {
@@ -75,6 +75,7 @@ const CardCTA = ({
7575
} else {
7676
return (
7777
<CardLink
78+
customClassName={`${prefix}--card__CardCTA`}
7879
card={{
7980
...cardProps,
8081
cta: {

‎packages/react/src/components/CardLink/CardLink.js

+4-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,10 @@ const { prefix } = settings;
1717
* CardLink component
1818
*/
1919
const CardLink = ({ card, customClassName }) => {
20-
const cardLinkClassname = cx(`${prefix}--card__CTA`, customClassName);
20+
const cardLinkClassname = cx(
21+
`${prefix}--card-link ${prefix}--card__CTA`,
22+
customClassName
23+
);
2124
return <Card customClassName={cardLinkClassname} {...card} />;
2225
};
2326

‎packages/react/src/components/CardLink/__stories__/CardLink.stories.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ const getBaseKnobs = ({ groupId }) => {
1616
const iconStyle = disabled ? Error20 : ArrowRight20;
1717
return {
1818
card: {
19-
copy: text(
20-
'Card Heading (card.copy):',
19+
heading: text(
20+
'Card Heading (card.heading):',
2121
'Explore AI use cases in all industries',
2222
groupId
2323
),

‎packages/react/src/components/ContentBlockCards/__stories__/ContentBlockCards.stories.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,7 @@ Default.story = {
7171
},
7272
style: 'card',
7373
type: select('CTA type', ctaTypes, ctaTypes.local, groupId),
74-
copy: 'Lorem ipsum dolor sit ametttt',
74+
heading: 'Lorem ipsum dolor sit ametttt',
7575
},
7676
};
7777
},
@@ -116,7 +116,7 @@ WithImages.story = {
116116
},
117117
style: 'card',
118118
type: select('CTA type', ctaTypes, ctaTypes.local, groupId),
119-
copy: 'Lorem ipsum dolor sit ametttt',
119+
heading: 'Lorem ipsum dolor sit ametttt',
120120
},
121121
};
122122
},
@@ -164,7 +164,7 @@ WithVideos.story = {
164164
},
165165
style: 'card',
166166
type: select('CTA type', ctaTypes, ctaTypes.local, groupId),
167-
copy: 'Lorem ipsum dolor sit ametttt',
167+
heading: 'Lorem ipsum dolor sit ametttt',
168168
},
169169
};
170170
},

‎packages/react/src/components/ContentBlockMedia/ContentBlockMedia.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ ContentBlockMedia.propTypes = {
125125
])
126126
),
127127
]),
128-
copy: PropTypes.string,
128+
heading: PropTypes.string,
129129
href: PropTypes.string,
130130
customClassName: PropTypes.string,
131131
}),
@@ -174,7 +174,7 @@ ContentBlockMedia.propTypes = {
174174
PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
175175
),
176176
]),
177-
copy: PropTypes.string,
177+
heading: PropTypes.string,
178178
href: PropTypes.string,
179179
customClassName: PropTypes.string,
180180
}),
@@ -193,7 +193,7 @@ ContentBlockMedia.propTypes = {
193193
PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
194194
),
195195
]),
196-
copy: PropTypes.string,
196+
heading: PropTypes.string,
197197
href: PropTypes.string,
198198
customClassName: PropTypes.string,
199199
}),

‎packages/react/src/components/ContentBlockMedia/README.stories.mdx

+1-1
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ function App() {
9191
},
9292
style: 'card',
9393
type: 'local',
94-
copy: 'Lorem ipsum dolor sit ametttt',
94+
heading: 'Lorem ipsum dolor sit ametttt',
9595
},
9696
}
9797
]};

‎packages/react/src/components/ContentBlockMixed/README.stories.mdx

-2
Original file line numberDiff line numberDiff line change
@@ -51,7 +51,6 @@ function App() {
5151
},
5252
style: 'card',
5353
type: 'local',
54-
copy: 'Content Block CTA copy',
5554
heading: 'Content Block CTA heading',
5655
};
5756

@@ -116,7 +115,6 @@ function App() {
116115
style: 'text',
117116
type: 'local',
118117
copy: 'ContentGroupSimple CTA copy',
119-
heading: 'ContentGroupSimple CTA heading',
120118
},
121119
},
122120
];

‎packages/react/src/components/ContentBlockMixed/__stories__/ContentBlockMixed.stories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@ Default.story = {
148148
},
149149
style: 'card',
150150
type: select('CTA type', ctaTypes, ctaTypes.local, groupId),
151-
copy: 'Lorem ipsum dolor sit ametttt',
151+
heading: 'Lorem ipsum dolor sit ametttt',
152152
},
153153
items,
154154
};

‎packages/react/src/components/ContentBlockSegmented/ContentBlockSegmented.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ ContentBlockSegmented.propTypes = {
125125
PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
126126
),
127127
]),
128-
copy: PropTypes.string,
128+
heading: PropTypes.string,
129129
href: PropTypes.string,
130130
customClassName: PropTypes.string,
131131
}),
@@ -212,7 +212,7 @@ ContentBlockSegmented.propTypes = {
212212
cta: PropTypes.shape({
213213
style: PropTypes.oneOf(['card']),
214214
type: PropTypes.oneOf(['local']),
215-
copy: PropTypes.string,
215+
heading: PropTypes.string,
216216
customClassName: PropTypes.string,
217217
}),
218218
video: PropTypes.shape({

‎packages/react/src/components/ContentBlockSegmented/README.stories.mdx

+8
Original file line numberDiff line numberDiff line change
@@ -68,6 +68,14 @@ function App() {
6868
'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
6969
},
7070
};
71+
const cta = {
72+
cta: {
73+
href: 'https://www.ibm.com',
74+
},
75+
style: 'card',
76+
type: 'local',
77+
heading: 'Content Block CTA heading',
78+
};
7179

7280
return (
7381
<ContentBlockSegmented

‎packages/react/src/components/ContentBlockSegmented/__stories__/ContentBlockSegmented.stories.js

+11
Original file line numberDiff line numberDiff line change
@@ -128,6 +128,7 @@ const getCTAKnobs = ({ groupId }) => {
128128
},
129129
style: select('CTA style (style):', ctaStyles, ctaStyles.card, groupId),
130130
type: select('CTA type (type):', ctaTypes, ctaTypes.local, groupId),
131+
heading: 'Lorem ipsum dolor',
131132
copy: 'Lorem ipsum dolor',
132133
},
133134
};
@@ -168,6 +169,11 @@ Default.story = {
168169
ContentBlockSegmented: ({ groupId }) => {
169170
const knobs = getBaseKnobs({ groupId });
170171
const ctaKnobs = getCTAKnobs({ groupId });
172+
if (ctaKnobs.cta.style === 'card') {
173+
delete ctaKnobs.cta.copy;
174+
} else {
175+
delete ctaKnobs.cta.heading;
176+
}
171177

172178
return {
173179
...knobs,
@@ -263,6 +269,11 @@ WithLinkList.story = {
263269
);
264270

265271
const ctaKnobs = getCTAKnobs({ groupId });
272+
if (ctaKnobs.cta.style === 'card') {
273+
delete ctaKnobs.cta.copy;
274+
} else {
275+
delete ctaKnobs.cta.heading;
276+
}
266277

267278
const aside = {
268279
items: <LinkList style="card" {...linkListProps} />,

‎packages/react/src/components/ContentBlockSimple/ContentBlockSimple.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ ContentBlockSimple.propTypes = {
131131
PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
132132
),
133133
]),
134-
copy: PropTypes.string,
134+
heading: PropTypes.string,
135135
href: PropTypes.string,
136136
customClassName: PropTypes.string,
137137
}),

‎packages/react/src/components/ContentBlockSimple/__stories__/ContentBlockSimple.stories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ const getBaseKnobs = ({ groupId }) => {
8686
},
8787
style: select('CTA style', ctaStyles, ctaStyles.card, groupId),
8888
type: select('CTA type', ctaTypes, ctaTypes.local, groupId),
89-
copy: 'Lorem ipsum dolor sit ametttt',
89+
heading: 'Lorem ipsum dolor sit ametttt',
9090
},
9191
};
9292
};

‎packages/react/src/components/ContentGroupCards/ContentGroupCards.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ ContentGroupCards.propTypes = {
9393
items: PropTypes.arrayOf(
9494
PropTypes.shape({
9595
title: PropTypes.string,
96-
copy: PropTypes.string,
96+
heading: PropTypes.string,
9797
cta: PropTypes.shape({
9898
href: PropTypes.string,
9999
}),

‎packages/react/src/components/ContentGroupSimple/ContentGroupSimple.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -131,7 +131,7 @@ ContentGroupSimple.propTypes = {
131131
PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
132132
),
133133
]),
134-
copy: PropTypes.string,
134+
heading: PropTypes.string,
135135
href: PropTypes.string,
136136
customClassName: PropTypes.string,
137137
}),
@@ -213,7 +213,7 @@ ContentGroupSimple.propTypes = {
213213
PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
214214
),
215215
]),
216-
copy: PropTypes.string,
216+
heading: PropTypes.string,
217217
href: PropTypes.string,
218218
customClassName: PropTypes.string,
219219
}),

‎packages/react/src/components/ContentGroupSimple/__stories__/data/ContentGroupSimple.knobs.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -89,7 +89,7 @@ const ContentGroupSimpleKnobs = {
8989
},
9090
style: 'card',
9191
type: 'local',
92-
copy: 'Lorem ipsum dolor sit amet',
92+
heading: 'Lorem ipsum dolor sit amet',
9393
},
9494
};
9595

‎packages/react/src/components/ImageWithCaption/__stories__/ImageWithCaption.stories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ export default {
1919
...readme.parameters,
2020
knobs: {
2121
ImageWithCaption: ({ groupId }) => ({
22-
heading: text('Heading (heading):', 'this is a caption', groupId),
22+
heading: text('Heading (heading):', 'This is a caption', groupId),
2323
image: {
2424
sources: [
2525
{

‎packages/react/src/components/LinkWithIcon/LinkWithIcon.js

+1
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ const LinkWithIcon = ({
3838
)}
3939
data-autoid={`${stablePrefix}--link-with-icon`}>
4040
<Link
41+
size="lg"
4142
href={href}
4243
className={classNames(`${prefix}--link-with-icon`, {
4344
[`${prefix}--link-with-icon__icon-left`]: iconPlacement === 'left',

‎packages/react/src/components/LocaleModal/__stories__/LocaleModal.stories.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ export const Default = ({ parameters }) => {
2828
const { useMockData } = parameters?.props?.LocaleModal ?? {};
2929
return (
3030
<LocaleModal
31-
isOpen={true}
31+
isOpen
3232
localeData={useMockData ? localeData : null}
3333
localeDisplay={useMockData ? 'United States - English' : null}
3434
/>

‎packages/react/src/components/Masthead/MastheadMegaMenu/CategoryLink.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@
55
* LICENSE file in the root directory of this source tree.
66
*/
77
import ArrowRight16 from '@carbon/icons-react/es/arrow--right/16';
8-
import { LinkWithIcon } from '../../LinkWithIcon';
8+
import Link from '../../../internal/vendor/carbon-components-react/components/Link/Link';
99
import PropTypes from 'prop-types';
1010
import React from 'react';
1111
import settings from 'carbon-components/es/globals/js/settings';
@@ -19,12 +19,12 @@ const CategoryLink = ({ href, title, highlighted, ...rest }) => {
1919
return (
2020
<>
2121
{highlighted ? (
22-
<LinkWithIcon
22+
<Link
2323
className={`${prefix}--masthead__megamenu__category-sublink--highlighted`}
24-
href={href}>
24+
href={href}
25+
renderIcon={ArrowRight16}>
2526
<span>{title}</span>
26-
<ArrowRight16 />
27-
</LinkWithIcon>
27+
</Link>
2828
) : (
2929
<a
3030
tabIndex={0}

‎packages/styles/scss/components/back-to-top/_back-to-top.scss

+2-2
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@
2323
bottom: $carbon--spacing-10;
2424
border-color: $ui-background;
2525
border-radius: 50%;
26-
width: $container-02;
27-
height: $container-02;
26+
width: $container-04;
27+
height: $container-04;
2828
margin-left: auto;
2929
visibility: visible;
3030
opacity: 1;

0 commit comments

Comments
 (0)