Skip to content

Commit

Permalink
Merge branch 'main' into dsw-2138-textarea-placeholder
Browse files Browse the repository at this point in the history
  • Loading branch information
xander-marjoram authored Sep 2, 2024
2 parents 7e01bb5 + 1108446 commit 858ca46
Show file tree
Hide file tree
Showing 8 changed files with 48 additions and 50 deletions.
6 changes: 6 additions & 0 deletions .changeset/modern-falcons-cheer.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@justeattakeaway/pie-tag": patch
"pie-storybook": patch
---

[Changed] - use classes instead of attributes for styling
6 changes: 2 additions & 4 deletions apps/pie-storybook/stories/pie-tag.stories.ts
Original file line number Diff line number Diff line change
@@ -1,15 +1,13 @@
import { html, nothing } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';

/* eslint-disable import/no-duplicates */
import '@justeattakeaway/pie-tag';
import {
TagProps as TagBaseProps, variants, sizes, defaultProps,
type TagProps as TagBaseProps, variants, sizes, defaultProps,
} from '@justeattakeaway/pie-tag';
/* eslint-enable import/no-duplicates */
import '@justeattakeaway/pie-icons-webc/dist/IconHeartFilled.js';

import type { StoryMeta, SlottedComponentProps } from '../types';
import { type StoryMeta, type SlottedComponentProps } from '../types';
import { createStory, type TemplateFunction, sanitizeAndRenderHTML } from '../utilities';

type TagProps = SlottedComponentProps<TagBaseProps> & { showIcon: boolean };
Expand Down
2 changes: 1 addition & 1 deletion packages/components/pie-tag/src/defs-react.ts
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
import React from 'react';
import type React from 'react';

export type ReactBaseType = React.HTMLAttributes<HTMLSpanElement>
28 changes: 17 additions & 11 deletions packages/components/pie-tag/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -2,10 +2,11 @@ import {
LitElement, html, unsafeCSS, nothing,
} from 'lit';
import { property } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { validPropertyValues, defineCustomElement } from '@justeattakeaway/pie-webc-core';
import styles from './tag.scss?inline';
import {
TagProps, variants, sizes, defaultProps,
type TagProps, variants, sizes, defaultProps,
} from './defs';

// Valid values available to consumers
Expand All @@ -21,11 +22,11 @@ const componentSelector = 'pie-tag';
export class PieTag extends LitElement implements TagProps {
@property({ type: String })
@validPropertyValues(componentSelector, variants, defaultProps.variant)
public variant: TagProps['variant'] = defaultProps.variant;
public variant = defaultProps.variant;

@property({ type: String })
@validPropertyValues(componentSelector, sizes, defaultProps.size)
public size : TagProps['size'] = defaultProps.size;
public size = defaultProps.size;

@property({ type: Boolean })
public isStrong = defaultProps.isStrong;
Expand All @@ -35,18 +36,23 @@ export class PieTag extends LitElement implements TagProps {

render () {
const {
variant,
size,
isStrong,
isDimmed,
isStrong,
size,
variant,
} = this;

const classes = {
'c-tag': true,
[`c-tag--${size}`]: true,
[`c-tag--${variant}`]: true,
'c-tag--dimmed': isDimmed,
'c-tag--strong': isStrong,
};

return html`
<div
class="c-tag"
variant=${variant}
size=${size}
?isStrong=${isStrong}
?isDimmed=${isDimmed}
class="${classMap(classes)}"
data-test-id="pie-tag"
>
${size === 'large' ? html`<slot name="icon"></slot>` : nothing}
Expand Down
34 changes: 17 additions & 17 deletions packages/components/pie-tag/src/tag.scss
Original file line number Diff line number Diff line change
Expand Up @@ -34,79 +34,79 @@
line-height: var(--tag-line-height);

// Size
&[size='small'] {
&.c-tag--small {
--tag-padding-block: 0;
--tag-padding-inline: var(--dt-spacing-a);
--tag-border-radius: var(--dt-radius-rounded-a);
--tag-font-size: #{p.font-size(--dt-font-caption-size)};
--tag-line-height: #{p.line-height(--dt-font-caption-line-height)};
}

&[size='large'] {
&.c-tag--large {
// same as default styles
}

// Variant
&[variant='neutral'] {
&.c-tag--neutral {
// same as default styles

&[isStrong] {
&.c-tag--strong {
--tag-bg-color: var(--dt-color-container-inverse);
--tag-color: var(--dt-color-content-inverse);
}
}

&[variant='blue'] {
&.c-tag--blue {
--tag-bg-color: var(--dt-color-support-info-02);
--tag-color: var(--dt-color-content-default);

&[isStrong] {
&.c-tag--strong {
--tag-bg-color: var(--dt-color-support-info);
--tag-color: var(--dt-color-content-inverse);
}
}

&[variant='green'] {
&.c-tag--green {
--tag-bg-color: var(--dt-color-support-positive-02);
--tag-color: var(--dt-color-content-default);

&[isStrong] {
&.c-tag--strong {
--tag-bg-color: var(--dt-color-support-positive);
--tag-color: var(--dt-color-content-inverse);
}
}

&[variant='yellow'] {
&.c-tag--yellow {
--tag-bg-color: var(--dt-color-support-warning-02);
--tag-color: var(--dt-color-content-default);

&[isStrong] {
&.c-tag--strong {
--tag-bg-color: var(--dt-color-support-warning);
--tag-color: var(--dt-color-content-dark);
}
}

&[variant='red'] {
&.c-tag--red {
--tag-bg-color: var(--dt-color-support-error-02);
--tag-color: var(--dt-color-content-default);

&[isStrong] {
&.c-tag--strong {
--tag-bg-color: var(--dt-color-support-error);
--tag-color: var(--dt-color-content-light);
}
}

&[variant='brand'] {
&.c-tag--brand {
--tag-bg-color: var(--dt-color-support-brand-02);
--tag-color: var(--dt-color-content-default);
}

&[variant='neutral-alternative'] {
&.c-tag--neutral-alternative {
--tag-bg-color: var(--dt-color-container-default);
--tag-color: var(--dt-color-content-default);
}

&[variant='outline'] {
&.c-tag--outline {
--tag-bg-color: var(--tag-transparent-bg-color);
--tag-color: var(--dt-color-content-default);

Expand All @@ -116,12 +116,12 @@
box-shadow: 0 0 0 1px var(--dt-color-border-strong);
}

&[variant='ghost'] {
&.c-tag--ghost {
--tag-bg-color: var(--tag-transparent-bg-color);
--tag-color: var(--dt-color-content-default);
}

&[isDimmed] {
&.c-tag--dimmed {
opacity: 0.5;
}
}
Expand Down
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@

import { test, expect } from '@justeattakeaway/pie-webc-testing/src/playwright/webc-fixtures.ts';
import { getAllPropCombinations, splitCombinationsByPropertyValue } from '@justeattakeaway/pie-webc-testing/src/helpers/get-all-prop-combos.ts';
import { PropObject, WebComponentPropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
import { type PropObject, type WebComponentPropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
import { PieTag } from '../../src/index.ts';
import { sizes, variants } from '../../src/defs.ts';

Expand Down
16 changes: 2 additions & 14 deletions packages/components/pie-tag/test/component/pie-tag.spec.ts
Original file line number Diff line number Diff line change
@@ -1,23 +1,16 @@
import { getShadowElementStylePropValues } from '@justeattakeaway/pie-webc-testing/src/helpers/get-shadow-element-style-prop-values.ts';
import { test, expect } from '@sand4rt/experimental-ct-web';
import { PieTag, TagProps } from '../../src/index.ts';
import { PieTag, type TagProps } from '../../src/index.ts';

const componentSelector = '[data-test-id="pie-tag"]';
const tagIconSelector = '[data-test-id="tag-icon"]';

const props: Partial<TagProps> = {
size: 'large',
variant: 'neutral',
isStrong: false,
isDimmed: false,
};

type VariantToBgStyle = {
variantName: TagProps['variant'];
bgStyle: string;
};

const variantsToIsStrongStyle:Array<VariantToBgStyle> = [
const variantsToIsStrongStyle: Array<VariantToBgStyle> = [
{ variantName: 'neutral', bgStyle: '--dt-color-container-inverse' },
{ variantName: 'green', bgStyle: '--dt-color-support-positive' },
{ variantName: 'red', bgStyle: '--dt-color-support-error' },
Expand All @@ -35,7 +28,6 @@ test.describe('PieTag - Component tests', () => {
test('should render successfully', async ({ mount, page }) => {
// Arrange
await mount(PieTag, {
props,
slots: {
default: 'Label',
},
Expand All @@ -54,7 +46,6 @@ test.describe('PieTag - Component tests', () => {
test('should render the icon', async ({ mount, page }) => {
// Arrange
await mount(PieTag, {
props,
slots: {
default: 'Label',
icon,
Expand All @@ -74,7 +65,6 @@ test.describe('PieTag - Component tests', () => {
// Arrange
await mount(PieTag, {
props: {
...props,
size: 'small',
},
slots: {
Expand All @@ -96,7 +86,6 @@ test.describe('PieTag - Component tests', () => {
test('should NOT render the icon', async ({ mount, page }) => {
// Arrange
await mount(PieTag, {
props,
slots: {
default: 'Label',
},
Expand All @@ -115,7 +104,6 @@ test.describe('PieTag - Component tests', () => {
test(`a "${variantName}" tag variant bg colour should be equivalent to "${bgStyle}"`, async ({ mount }) => {
const component = await mount(PieTag, {
props: {
...props,
variant: variantName,
isStrong: true,
},
Expand Down
4 changes: 2 additions & 2 deletions packages/components/pie-tag/test/visual/pie-tag.spec.ts
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { test } from '@sand4rt/experimental-ct-web';
import percySnapshot from '@percy/playwright';
import type {
PropObject, WebComponentPropValues, WebComponentTestInput,
import {
type PropObject, type WebComponentPropValues, type WebComponentTestInput,
} from '@justeattakeaway/pie-webc-testing/src/helpers/defs.ts';
import {
getAllPropCombinations, splitCombinationsByPropertyValue,
Expand Down

0 comments on commit 858ca46

Please sign in to comment.