Skip to content

Commit

Permalink
fix(Feature-section): design updates
Browse files Browse the repository at this point in the history
  • Loading branch information
@ariellalgilmore
ariellalgilmore committed Sep 28, 2023
1 parent b5ecd5f commit 47824be
Show file tree
Hide file tree
Showing 8 changed files with 99 additions and 104 deletions.
20 changes: 8 additions & 12 deletions packages/styles/scss/components/card/_card.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -569,6 +569,10 @@
align-items: center;
}

svg {
color: $link-primary;
}

&[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
color: $link-inverse;
}
Expand All @@ -580,12 +584,6 @@
color: $link-inverse;
}
}

&:hover {
::slotted(svg[slot='icon']) {
color: $link-primary-hover;
}
}
}

// static card footer
Expand All @@ -594,15 +592,13 @@
width: auto;
justify-content: flex-start;

&:active,
&:hover {
text-decoration: none;
color: $link-primary-hover;
}

&:active {
::slotted([slot='icon']) {
color: $text-primary;
}
&:active,
&:hover {
text-decoration: none;
}

&::after {
Expand Down
36 changes: 25 additions & 11 deletions packages/styles/scss/components/feature-section/_feature-section.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,20 +13,12 @@
@use '../../globals/utils/aspect-ratio';
@use '../../globals/carbon-grid';
@use '../../globals/utils/ratio-base' as *;
@use '../../internal/callout/tokens' as *;

@mixin feature-section {
:host(#{$c4d-prefix}-feature-section) {
display: block;
outline: none;

&[media-alignment='left'] {
::slotted(#{$c4d-prefix}-card[link]) {
@include breakpoint-down(lg) {
position: relative;
right: 0;
}
}
}
}

.#{$prefix}--feature-section {
Expand Down Expand Up @@ -69,6 +61,27 @@
}
}

:host(#{$c4d-prefix}-feature-section[color-scheme='inverse'])
.#{$prefix}--feature-section__container {
background-color: $background-inverse;

::slotted([slot='eyebrow']),
::slotted([slot='heading']),
::slotted([slot='copy']) {
color: $text-inverse;
}
}

:host(#{$c4d-prefix}-feature-section[color-scheme='cyan'])
.#{$prefix}--feature-section__container {
background-color: $callout-background-cyan;
}

:host(#{$c4d-prefix}-feature-section[color-scheme='purple'])
.#{$prefix}--feature-section__container {
background-color: $callout-background-purple;
}

.#{$prefix}--feature-section__body {
position: relative;
padding-top: $spacing-07;
Expand Down Expand Up @@ -107,6 +120,7 @@
position: relative;
padding-left: 0;
padding-right: 0;
border: 1px solid $border-subtle-01;

::slotted(#{$c4d-prefix}-image) {
overflow: hidden;
Expand All @@ -127,13 +141,13 @@

::slotted(#{$c4d-prefix}-card-eyebrow) {
display: inline-block;
margin-bottom: $spacing-05;
margin-bottom: $spacing-03;
}

::slotted([slot='footer']) {
position: absolute;
right: 0;
bottom: 0;
bottom: -1px;
width: 75%;
height: auto;

Expand Down
2 changes: 1 addition & 1 deletion packages/web-components/src/components/card/card-footer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -88,7 +88,7 @@ class C4DCardFooter extends C4DLinkWithIcon {
* The color scheme.
*/
@property({ attribute: 'color-scheme', reflect: true })
colorScheme = BASIC_COLOR_SCHEME.REGULAR;
colorScheme = '';

/**
* The `href` in parent `<c4d-card>`.
Expand Down
4 changes: 2 additions & 2 deletions packages/web-components/src/components/card/card.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -189,10 +189,10 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
* The color scheme.
* A typical use case of using another color scheme of card is having a "CTA" purpose of card at the last in card group.
*
* Color scheme options are: "inverse" and "light"
* Color scheme options are: "inverse" and "regular"
*/
@property({ attribute: 'color-scheme', reflect: true })
colorScheme = BASIC_COLOR_SCHEME.REGULAR;
colorScheme = '';

/**
* Link `href`.
Expand Down
25 changes: 13 additions & 12 deletions ...b-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,8 +28,8 @@ import imgLg1x1 from '../../../../../storybook-images/assets/1312/fpo--1x1--1312
import imgMd4x3 from '../../../../../storybook-images/assets/960/fpo--4x3--960x720--002.jpg';
import imgSm1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
import imgXs1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--002.jpg';
import { MEDIA_ALIGNMENT } from '../defs';
import { CTA_TYPE } from '../../cta/defs';
import { COLOR_SCHEME } from '../defs';

import textNullable from '../../../../.storybook/knob-text-nullable';
import readme from './README.stories.react.mdx';
Expand All @@ -41,13 +41,15 @@ import {
types,
} from '../../cta/__stories__/ctaTypeConfig';

const mediaAlignment = {
[`Left`]: MEDIA_ALIGNMENT.LEFT,
[`Right`]: MEDIA_ALIGNMENT.RIGHT,
const colorSchemeTypes = {
[`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
[`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
[`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
[`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
};

export const Default = (args) => {
const { alt, eyebrow, heading, copy, href, ctaType, mediaAlign, defaultSrc } =
const { alt, colorScheme, eyebrow, heading, copy, href, ctaType, defaultSrc } =
args?.FeatureSection ?? {};
let videoFooterCopy;

Expand All @@ -59,7 +61,7 @@ export const Default = (args) => {
}
return (
<C4DVideoCTAContainer>
<C4DFeatureSection media-alignment={mediaAlign}>
<C4DFeatureSection color-scheme={colorScheme}>
<C4DImage slot="image" default-src={defaultSrc} alt={alt}>
<C4DImageItem
media="(min-width: 1584px)"
Expand All @@ -83,8 +85,7 @@ export const Default = (args) => {
link
slot="footer"
href={href}
cta-type={ctaType}
color-scheme="inverse">
cta-type={ctaType}>
<C4DCardHeading>
Try a free virtual business framing session with IBM Garage
</C4DCardHeading>
Expand All @@ -108,10 +109,10 @@ Default.story = {
);

return {
mediaAlign: select(
'Media Alignment',
mediaAlignment,
MEDIA_ALIGNMENT.RIGHT
colorScheme: select(
'Color scheme:',
colorSchemeTypes,
COLOR_SCHEME.REGULAR
),
eyebrow: textNullable(
'Card Eyebrow (optional)(eyebrow):',
Expand Down
23 changes: 12 additions & 11 deletions ...ages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,8 +18,8 @@ import imgLg1x1 from '../../../../../storybook-images/assets/1312/fpo--1x1--1312
import imgMd4x3 from '../../../../../storybook-images/assets/960/fpo--4x3--960x720--002.jpg';
import imgSm1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
import imgXs1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--002.jpg';
import { MEDIA_ALIGNMENT } from '../defs';
import { CTA_TYPE } from '../../cta/defs';
import { COLOR_SCHEME } from '../defs';

import readme from './README.stories.mdx';
import textNullable from '../../../../.storybook/knob-text-nullable';
Expand All @@ -31,13 +31,15 @@ import {
types,
} from '../../cta/__stories__/ctaTypeConfig';

const mediaAlignment = {
[`Left`]: MEDIA_ALIGNMENT.LEFT,
[`Right`]: MEDIA_ALIGNMENT.RIGHT,
const colorSchemeTypes = {
[`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
[`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
[`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
[`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
};

export const Default = (args) => {
const { alt, mediaAlign, eyebrow, heading, copy, href, ctaType } =
const { alt, colorScheme, eyebrow, heading, copy, href, ctaType } =
args?.['c4d-feature-section'] ?? {};
let videoFooterCopy;

Expand All @@ -49,7 +51,7 @@ export const Default = (args) => {
}
return html`
<c4d-video-cta-container>
<c4d-feature-section media-alignment="${mediaAlign}">
<c4d-feature-section color-scheme="${colorScheme}">
<c4d-image
slot="image"
default-src="${ifDefined(imgLg1x1)}"
Expand All @@ -72,7 +74,6 @@ export const Default = (args) => {
>
<c4d-card
link
color-scheme="inverse"
slot="footer"
no-poster=${ctaType === CTA_TYPE.VIDEO}
cta-type=${ctaType}
Expand Down Expand Up @@ -105,10 +106,10 @@ export default {
);

return {
mediaAlign: select(
'Media Alignment',
mediaAlignment,
MEDIA_ALIGNMENT.RIGHT
colorScheme: select(
'Color scheme:',
colorSchemeTypes,
COLOR_SCHEME.REGULAR
),
eyebrow: textNullable(
'Card Eyebrow (optional)(eyebrow):',
Expand Down
22 changes: 16 additions & 6 deletions packages/web-components/src/components/feature-section/defs.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,16 +8,26 @@
*/

/**
* Type of the Media Alignment
* Type of color scheme
*/
export enum MEDIA_ALIGNMENT {
export enum COLOR_SCHEME {
/**
* Right alignment
* Regular color scheme
*/
RIGHT = 'right',
REGULAR = 'regular',

/**
* Left alignment
* Inverse color scheme
*/
LEFT = 'left',
INVERSE = 'inverse',

/**
* Cyan color scheme
*/
CYAN = 'cyan',

/**
* Purple color scheme
*/
PURPLE = 'purple',
}
71 changes: 22 additions & 49 deletions packages/web-components/src/components/feature-section/feature-section.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ import C4DFeatureCard from '../feature-card/feature-card';
import '../image/image';
import styles from './feature-section.scss';
import StableSelectorMixin from '../../globals/mixins/stable-selector';
import { MEDIA_ALIGNMENT } from './defs';
import { COLOR_SCHEME } from './defs';
import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';

const { prefix, stablePrefix: c4dPrefix } = settings;
Expand All @@ -27,62 +27,35 @@ const { prefix, stablePrefix: c4dPrefix } = settings;
@customElement(`${c4dPrefix}-feature-section`)
class C4DFeatureSection extends StableSelectorMixin(C4DFeatureCard) {
/**
* Media Alignment (right (default) | left)
* Color scheme type (regular (default) | inverse | cyan | purple )
*/
@property({ attribute: 'media-alignment', reflect: true })
mediaAlignment = MEDIA_ALIGNMENT.RIGHT;
@property({ attribute: 'color-scheme', reflect: true })
colorScheme = COLOR_SCHEME.REGULAR;

render() {
return html`
${this.mediaAlignment === MEDIA_ALIGNMENT.LEFT
? html`
<div class="${prefix}--grid ${prefix}--feature-section">
<div class="${prefix}--row ${prefix}--feature-section__container">
<div class="${prefix}--grid ${prefix}--feature-section">
<div class="${prefix}--row ${prefix}--feature-section__container">
<div
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body">
<div class="${prefix}--grid">
<div class="${prefix}--row">
<div
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image">
<slot name="image"></slot>
</div>
<div
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body">
<div class="${prefix}--grid">
<div class="${prefix}--row">
<div
class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12">
<slot name="eyebrow"></slot>
<slot name="heading"></slot>
<slot name="copy"></slot>
</div>
</div>
</div>
<slot name="footer"></slot>
</div>
</div>
</div>
`
: html`
<div class="${prefix}--grid ${prefix}--feature-section">
<div class="${prefix}--row ${prefix}--feature-section__container">
<div
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body">
<div class="${prefix}--grid">
<div class="${prefix}--row">
<div
class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12">
<slot name="eyebrow"></slot>
<slot name="heading"></slot>
<slot name="copy"></slot>
</div>
</div>
</div>
</div>
<div
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image">
<slot name="image"></slot>
<slot name="footer"></slot>
class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12">
<slot name="eyebrow"></slot>
<slot name="heading"></slot>
<slot name="copy"></slot>
</div>
</div>
</div>
`}
</div>
<div
class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image">
<slot name="image"></slot>
<slot name="footer"></slot>
</div>
</div>
</div>
`;
}

Expand Down

0 comments on commit 47824be

Please sign in to comment.