feat(cta-section): web component version #4338

IgnacioBecerra · 2020-10-29T02:40:23Z

Related Ticket(s)

Description

Introducing the <dds-cta-section> component for Web Components, featuring Footer variations with Content Items and a Link List.

Default:

Content Items Footer:

Link List Footer:

Changelog

New

<dds-cta-section> component
<dds-cta-section-item> component to wrap <dds-cta-section-heading> and <dds-cta-section-copy> with the correct styling

asudoh

Nice progress @IgnacioBecerra!

asudoh · 2020-10-30T22:05:52Z

packages/web-components/src/components/cta-section/cta-section.ts

@@ -23,6 +23,8 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
 * The CTA Section pattern
 *
 * @element dds-cta-section
+ * @slot heading - The text heading.
+ * @slot buttons - The CTA Buttons.
 */
 @customElement(`${ddsPrefix}-cta-section`)
 class DDSCTASection extends StableSelectorMixin(LitElement) {


Seems that this class should inherit DDSContentItem.

Thanks for the heads up! I'm wondering though, what are the main reasons it should inherit DDSContentItem?

Thank you for asking @IgnacioBecerra! One reason is that <dds-cta-section> seems to do a similar thing to <dds-content-item>, especially from the perspective of the API set. Another reason is that <CTASection> in React renders <ContentItem>, effectively extending <ContentItem> via React composition pattern, whereas React composition pattern doesn't work well with Web Components: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/00ad9c7/packages/web-components/docs/coding-conventions.md#preferring-class-inheritance-pattern-over-react-composition-pattern

asudoh · 2020-10-30T22:06:15Z

packages/web-components/src/components/cta-section/cta-section.scss

 }

 .#{$dds-prefix}--content-block__copy {
  display: inline-block;
-  font-size: 1.5rem;
+  font-size: calc(1.25rem + 0 * ((100vw - 20rem) / 62));


Wondering where this change comes from...?

The font size change comes from the React version, I think it was changed from 1.5rem to that calculation recently. Comes from the _cta-section.scss under the styles package.

asudoh

Great progress - Thanks @IgnacioBecerra!

packages/web-components/src/components/cta-section/__stories__/README.stories.mdx

packages/web-components/examples/codesandbox/components/cta-section/index.html

packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts

packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts

ibmdotcom-bot · 2020-11-04T23:47:21Z

Deploy preview created for package React:
https://ibmdotcom-react.s3.us-south.cloud-object-storage.appdomain.cloud/deploy-previews/4338/index.html

Built with commit: 75ad7e67ff8d47fb2b4c240dbdab03112ccc4b0f

ibmdotcom-bot · 2020-11-04T23:53:14Z

Deploy preview created for package Web Components:
https://ibmdotcom-webcomponents.s3.us-east.cloud-object-storage.appdomain.cloud/deploy-previews/4338/index.html

Built with commit: 75ad7e67ff8d47fb2b4c240dbdab03112ccc4b0f

asudoh

Thank you for the update @IgnacioBecerra!

packages/web-components/src/components/cta-section/cta-section-item.ts

packages/web-components/src/components/cta-section/cta-section-item-heading.ts

packages/web-components/src/components/cta-section/cta-section-item-copy.ts

packages/web-components/src/components/cta-section/cta-section-copy.ts

packages/web-components/src/components/cta-section/cta-section-item.ts

IgnacioBecerra · 2020-11-06T03:30:40Z

@asudoh Thanks for the suggestions! Now using tag selection for all the component styling. :)

asudoh

LGTM 👍 - Thanks @IgnacioBecerra for all the updates!

…a/ibm-dotcom-library into cta-web-components

kennylam

@IgnacioBecerra Several components have had content removed (looks like markdown content) in the Percy snapshots. Any idea what's going on there?

IgnacioBecerra · 2020-11-06T15:12:12Z

@kennylam Yeah, I noticed that last night and was about comment about it. I'm using the new <dds-content-item and <dds-content-item-copy that @asudoh will be introducing in #4351. I didn't update the stories for all the components that use the old version of the components, thus the Percy snapshots.

Since this PR is somewhat dependent on #4351, should we wait until that one goes through before merging this one, or should I edit the stories to reflect the changes?

jeffchew · 2020-11-06T16:13:48Z

Minor thing, looks like the formatting for the docs is slightly off, can you take a look?

kennylam · 2020-11-06T17:37:41Z

Since this PR is somewhat dependent on #4351, should we wait until that one goes through before merging this one, or should I edit the stories to reflect the changes?

@IgnacioBecerra Yes good call. That one looks ready to merge soon. We can update here and make sure all is good.

asudoh

Thank you @IgnacioBecerra for the updates and rebasing!

asudoh · 2020-11-06T23:32:36Z

packages/web-components/src/components/cta-section/__stories__/README.stories.mdx

+```html
+<dds-cta-section>
+  <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
+  <dds-cta-section-copy content="Lorem ipsum *dolor* sit amet"></dds-cta-section-copy>


Suggested change

<dds-cta-section-copy content="Lorem ipsum *dolor* sit amet"></dds-cta-section-copy>

<dds-cta-section-copy>Lorem ipsum *dolor* sit amet</dds-cta-section-copy>

asudoh · 2020-11-06T23:33:35Z

packages/web-components/src/components/cta-section/__stories__/README.stories.mdx

+## Props
+
+<Props of="dds-cta-section" />
+


Suggested change

<Description markdown={markdownContents} />

asudoh · 2020-11-06T23:34:03Z

packages/web-components/src/components/cta-section/__stories__/README.stories.mdx

@@ -0,0 +1,60 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+


Suggested change

import markdownContents from '../../../../docs/markdown-contents.md';

asudoh · 2020-11-06T23:34:52Z

packages/web-components/examples/codesandbox/components/cta-section/index.html

+        <div class="bx--col-sm-4 bx-col-lg-12 bx--offset-lg-4">
+          <dds-cta-section>
+            <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
+            <dds-cta-section-copy content=${ifNonNull(copy)}></dds-cta-section-copy>


Suggested change

<dds-cta-section-copy content=${ifNonNull(copy)}></dds-cta-section-copy>

<dds-cta-section-copy>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</dds-cta-section-copy>

asudoh · 2020-11-06T23:38:22Z

packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts

+        <dds-cta-section-item-copy
+          >IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
+        </dds-cta-section-item-copy>


Suggested change

<dds-cta-section-item-copy

>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."

</dds-cta-section-item-copy>

<dds-cta-section-item-copy

>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</dds-cta-section-item-copy>

asudoh · 2020-11-06T23:38:49Z

packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts

+  return html`
+    <dds-cta-section>
+      <dds-content-block-heading>${ifNonNull(heading)}</dds-content-block-heading>
+      <dds-cta-section-copy content=${ifNonNull(copy)}></dds-cta-section-copy>


Suggested change

<dds-cta-section-copy content=${ifNonNull(copy)}></dds-cta-section-copy>

<dds-cta-section-copy>ifNonNull(copy)</dds-cta-section-copy>

IgnacioBecerra · 2020-11-07T00:40:26Z

@asudoh Thanks for catching those! Updated with new component usage.

asudoh · 2020-11-07T01:25:09Z

Cool thanks @IgnacioBecerra for the update!

@jeffchew @kennylam Do you this is ready to go? Thanks!

jeffchew

LGTM!

IgnacioBecerra added 3 commits October 28, 2020 19:38

feat(cta-section): introduction

92818f4

feat(cta-section): default story completed

0f883ea

feat(cta-section): web component introduced

d955fdf

asudoh reviewed Oct 30, 2020

View reviewed changes

IgnacioBecerra added 4 commits November 2, 2020 09:38

Merge branch 'master' into cta-web-components

7b7b2ca

feat(cta-section): default story completed

b220282

feat(cta-section): introducing content item footer

80d563b

feat(cta-section): introducing link list footer

6aaa740

IgnacioBecerra added the package: web components Work necessary for the IBM.com Library web components package label Nov 4, 2020

IgnacioBecerra marked this pull request as ready for review November 4, 2020 23:39

asudoh reviewed Nov 4, 2020

View reviewed changes

IgnacioBecerra added 2 commits November 5, 2020 12:54

feat(cta-section): added new cta-section-copy component

74603ab

Merge branch 'master' into cta-web-components

c71b413

asudoh reviewed Nov 6, 2020

View reviewed changes

feat(cta-section): now using tag selector for component styling

ff785c1

asudoh approved these changes Nov 6, 2020

View reviewed changes

IgnacioBecerra added 3 commits November 5, 2020 20:09

Merge branch 'master' into cta-web-components

359e8db

feat(cta-section): removed duplicate render from conflict

d65e4b4

Merge branch 'cta-web-components' of https://github.com/IgnacioBecerr…

6d7b49e

…a/ibm-dotcom-library into cta-web-components

kennylam reviewed Nov 6, 2020

View reviewed changes

jeffchew and others added 3 commits November 6, 2020 11:14

Merge branch 'master' into cta-web-components

a287065

feat(cta-section): fixed README formatting

ec6fe34

feat(cta-section): fixed prettier error

a6f0436

Merge branch 'master' into cta-web-components

24d0222

IgnacioBecerra added 2 commits November 6, 2020 12:40

feat(cta-section): fixed components after merging

d2650ee

feat(cta-section): fixed cta-section-copy

763d420

asudoh reviewed Nov 6, 2020

View reviewed changes

feat(cta-section): fixed old component usage

a32b33b

jeffchew approved these changes Nov 9, 2020

View reviewed changes

jeffchew added the Ready to merge Label for the pull requests that are ready to merge label Nov 9, 2020

Merge branch 'master' into cta-web-components

75ad7e6

kodiakhq bot merged commit cfffb86 into carbon-design-system:master Nov 9, 2020

jeffchew mentioned this pull request Nov 10, 2020

November 2020 Release Plan (v1.13.0) #3598

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(cta-section): web component version #4338

feat(cta-section): web component version #4338

IgnacioBecerra commented Oct 29, 2020 •

edited

Loading

asudoh left a comment

asudoh Oct 30, 2020

IgnacioBecerra Oct 30, 2020

asudoh Oct 31, 2020

asudoh Oct 30, 2020

IgnacioBecerra Oct 30, 2020

asudoh left a comment

ibmdotcom-bot commented Nov 4, 2020 •

edited

Loading

ibmdotcom-bot commented Nov 4, 2020 •

edited

Loading

asudoh left a comment

IgnacioBecerra commented Nov 6, 2020

asudoh left a comment

kennylam left a comment

IgnacioBecerra commented Nov 6, 2020 •

edited

Loading

jeffchew commented Nov 6, 2020

kennylam commented Nov 6, 2020

asudoh left a comment

asudoh Nov 6, 2020

asudoh Nov 6, 2020

asudoh Nov 6, 2020

asudoh Nov 6, 2020

asudoh Nov 6, 2020

asudoh Nov 6, 2020

IgnacioBecerra commented Nov 7, 2020

asudoh commented Nov 7, 2020

jeffchew left a comment

	<dds-cta-section-copy content="Lorem ipsum dolor sit amet"></dds-cta-section-copy>
	<dds-cta-section-copy>Lorem ipsum dolor sit amet</dds-cta-section-copy>

		@@ -0,0 +1,60 @@
		import { Props, Description } from '@storybook/addon-docs/blocks';
		import contributing from '../../../../../../docs/contributing-license.md';


	import markdownContents from '../../../../docs/markdown-contents.md';

	<dds-cta-section-copy content=${ifNonNull(copy)}></dds-cta-section-copy>
	<dds-cta-section-copy>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</dds-cta-section-copy>

	<dds-cta-section-copy content=${ifNonNull(copy)}></dds-cta-section-copy>
	<dds-cta-section-copy>ifNonNull(copy)</dds-cta-section-copy>

feat(cta-section): web component version #4338

feat(cta-section): web component version #4338

Conversation

IgnacioBecerra commented Oct 29, 2020 • edited Loading

Related Ticket(s)

Description

Changelog

asudoh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

asudoh left a comment

Choose a reason for hiding this comment

ibmdotcom-bot commented Nov 4, 2020 • edited Loading

ibmdotcom-bot commented Nov 4, 2020 • edited Loading

asudoh left a comment

Choose a reason for hiding this comment

IgnacioBecerra commented Nov 6, 2020

asudoh left a comment

Choose a reason for hiding this comment

kennylam left a comment

Choose a reason for hiding this comment

IgnacioBecerra commented Nov 6, 2020 • edited Loading

jeffchew commented Nov 6, 2020

kennylam commented Nov 6, 2020

asudoh left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

IgnacioBecerra commented Nov 7, 2020

asudoh commented Nov 7, 2020

jeffchew left a comment

Choose a reason for hiding this comment

IgnacioBecerra commented Oct 29, 2020 •

edited

Loading

ibmdotcom-bot commented Nov 4, 2020 •

edited

Loading

ibmdotcom-bot commented Nov 4, 2020 •

edited

Loading

IgnacioBecerra commented Nov 6, 2020 •

edited

Loading