Skip to content

Commit

Permalink
Merge branch 'master' into feat/overflow-animation
Browse files Browse the repository at this point in the history
  • Loading branch information
kodiakhq[bot] authored Oct 26, 2020
2 parents b2f33f7 + 31e2fe5 commit ca886c3
Show file tree
Hide file tree
Showing 16 changed files with 429 additions and 145 deletions.
3 changes: 2 additions & 1 deletion packages/styles/scss/components/card/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,8 @@
:host(#{$dds-prefix}-card),
:host(#{$dds-prefix}-link-list-item-card),
:host(#{$dds-prefix}-card-group-item) .#{$prefix}--card,
:host(#{$dds-prefix}-card-cta) {
:host(#{$dds-prefix}-card-cta),
:host(#{$dds-prefix}-link-list-item-card-cta) {
background-color: $ui-01;
text-decoration: none;
display: flex;
Expand Down
9 changes: 9 additions & 0 deletions packages/styles/scss/components/link-list/_link-list.scss
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@
}

:host(#{$dds-prefix}-link-list-item-card),
:host(#{$dds-prefix}-link-list-item-card-cta),
.#{$prefix}--link-list {
.#{$prefix}--card {
max-width: none;
Expand Down Expand Up @@ -74,6 +75,8 @@
.#{$prefix}--link-list__list--horizontal {
::slotted(#{$dds-prefix}-link-list-item),
::slotted(#{$dds-prefix}-link-list-item-card),
::slotted(#{$dds-prefix}-link-list-item-cta),
::slotted(#{$dds-prefix}-link-list-item-card-cta),
.#{$prefix}--link-list__list__CTA {
float: left;
padding-right: $carbon--spacing-07;
Expand All @@ -88,6 +91,8 @@
.#{$prefix}--link-list__list--vertical {
::slotted(#{$dds-prefix}-link-list-item),
::slotted(#{$dds-prefix}-link-list-item-card),
::slotted(#{$dds-prefix}-link-list-item-cta),
::slotted(#{$dds-prefix}-link-list-item-card-cta),
.#{$prefix}--link-list__list__CTA {
padding-bottom: $carbon--spacing-05;

Expand All @@ -99,6 +104,7 @@

.#{$prefix}--link-list__list--vertical-end {
::slotted(#{$dds-prefix}-link-list-item),
::slotted(#{$dds-prefix}-link-list-item-cta),
.#{$prefix}--link-list__list__CTA .#{$prefix}--link-with-icon__container {
@include carbon--make-col-ready;

Expand Down Expand Up @@ -128,13 +134,15 @@
}

:host(#{$dds-prefix}-link-list-item-card),
:host(#{$dds-prefix}-link-list-item-card-cta),
.#{$prefix}--link-list__list__CTA {
&.#{$prefix}--link-list__list--video .#{$prefix}--card__footer span {
color: $link-01;
}
}

:host(#{$dds-prefix}-link-list-item-card),
:host(#{$dds-prefix}-link-list-item-card-cta),
.#{$prefix}--link-list__list--card .#{$prefix}--link-list__list__CTA {
max-width: carbon--mini-units(80);
border-top: 1px solid $ui-03;
Expand All @@ -145,6 +153,7 @@
}

:host(#{$dds-prefix}-link-list-item-card),
:host(#{$dds-prefix}-link-list-item-card-cta),
.#{$prefix}--link-list__list--card .#{$prefix}--link-list__list__CTA div {
.#{$prefix}--tile {
margin-left: 0;
Expand Down
30 changes: 11 additions & 19 deletions packages/styles/scss/components/link-with-icon/_link-with-icon.scss
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@
.#{$prefix}--link-with-icon,
:host(#{$dds-prefix}-link-with-icon),
:host(#{$dds-prefix}-link-list-item),
:host(#{$dds-prefix}-link-list-item-cta),
:host(#{$dds-prefix}-text-cta) {
display: flex;

Expand Down Expand Up @@ -41,18 +42,18 @@
}
}
}
}

&.#{$prefix}--link-with-icon__icon-left {
justify-content: flex-end;
flex-direction: row-reverse;
.#{$prefix}--link-with-icon.#{$prefix}--link-with-icon__icon-left {
justify-content: flex-end;
flex-direction: row-reverse;

svg {
align-self: start;
position: relative;
top: 1px;
margin-left: 0;
margin-right: $carbon--spacing-03;
}
svg {
align-self: start;
position: relative;
top: 1px;
margin-left: 0;
margin-right: $carbon--spacing-03;
}
}

Expand All @@ -62,15 +63,6 @@
&:not(:first-of-type) {
margin-left: $carbon--spacing-07;
}

.#{$prefix}--link-with-icon__icon-left::slotted(svg[slot='icon']) {
margin-right: $carbon--spacing-03;
margin-left: 0;
}
.#{$prefix}--link-with-icon__icon-right::slotted(svg[slot='icon']) {
margin-left: $carbon--spacing-03;
margin-right: 0;
}
}

.#{$prefix}--link-with-icon__container {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,11 @@
@import '@carbon/ibmdotcom-styles/scss/components/card-link/card-link';

:host(#{$dds-prefix}-card-link),
:host(#{$dds-prefix}-link-list-item-card) {
:host(#{$dds-prefix}-link-list-item-card),
:host(#{$dds-prefix}-link-list-item-card-cta) {
.#{$prefix}--card__wrapper {
.#{$prefix}--card__copy {
flex: 1;
}

::slotted(svg[slot='footer']) {
fill: $link-01;
}
}
}
10 changes: 10 additions & 0 deletions packages/web-components/src/components/card/card-footer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -68,6 +68,16 @@ class DDSCardFooter extends DDSLinkWithIcon {
`;
}

protected _renderInner() {
return this.iconPlacement === ICON_PLACEMENT.LEFT
? html`
${this._renderIcon()}${this._renderContent()}
`
: html`
${this._renderContent()}${this._renderIcon()}
`;
}

/**
* The color scheme.
*/
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,44 @@
/**
* @license
*
* Copyright IBM Corp. 2020
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import { html, css, customElement } from 'lit-element';
import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
import DDSCardCTA from './card-cta';
import styles from '../link-list/link-list.scss';

const { stablePrefix: ddsPrefix } = ddsSettings;

/**
* Link list item card CTA.
*
* @element dds-link-list-item-card-cta
*/
@customElement(`${ddsPrefix}-link-list-item-card-cta`)
class DDSLinkListItemCardCTA extends DDSCardCTA {
protected _renderImage() {
// Link list doesn't show video thumbnail in card
return html`
<slot name="image" @slotchange="${this._handleSlotChange}"></slot>
`;
}

connectedCallback() {
if (!this.hasAttribute('role')) {
this.setAttribute('role', 'listitem');
}
super.connectedCallback();
}

// `styles` here is a `CSSResult` generated by custom WebPack loader
static get styles() {
return css`${super.styles}${styles}`;
}
}

export default DDSLinkListItemCardCTA;
37 changes: 37 additions & 0 deletions packages/web-components/src/components/cta/link-list-item-cta.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
/**
* @license
*
* Copyright IBM Corp. 2020
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/

import { css, customElement } from 'lit-element';
import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
import DDSTextCTA from './text-cta';
import styles from '../link-list/link-list.scss';

const { stablePrefix: ddsPrefix } = ddsSettings;

/**
* Link list item CTA.
*
* @element dds-link-list-item-cta
*/
@customElement(`${ddsPrefix}-link-list-item-cta`)
class DDSLinkListItemCTA extends DDSTextCTA {
connectedCallback() {
if (!this.hasAttribute('role')) {
this.setAttribute('role', 'listitem');
}
super.connectedCallback();
}

// `styles` here is a `CSSResult` generated by custom WebPack loader
static get styles() {
return css`${super.styles}${styles}`;
}
}

export default DDSLinkListItemCTA;
Loading

0 comments on commit ca886c3

Please sign in to comment.