Skip to content

Commit

Permalink
feat(text): use local import instead of theme directly
Browse files Browse the repository at this point in the history
  • Loading branch information
@skhamvon @dpellier
skhamvon authored and dpellier committed Oct 10, 2023
1 parent 8e8c2b2 commit 6e50ce9
Show file tree
Hide file tree
Showing 8 changed files with 63 additions and 55 deletions.
4 changes: 2 additions & 2 deletions packages/components/text/documentation/specifications/spec.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,9 @@
|Name | Type | Required | Default | Description|
|---|---|:---:|---|---|
|**`breakSpaces`** | _boolean_ | | | If text handles break spaces or not|
|**`color`** | `ODS_THEME_COLOR_INTENT` | | | Text contrasted theme|
|**`color`** | `ODS_TEXT_COLOR_INTENT` | | | Text contrasted theme|
|**`contrasted`** | _boolean_ | | | Text design as contrasted version|
|**`hue`** | `ODS_THEME_COLOR_HUE` | | | Text hue|
|**`hue`** | `ODS_TEXT_COLOR_HUE` | | | Text hue|
|**`level`** | `ODS_THEME_TYPOGRAPHY_LEVEL` | | | Text level|
|**`size`** | `ODS_THEME_TYPOGRAPHY_SIZE` | | | Text size|

Expand Down
6 changes: 3 additions & 3 deletions packages/components/text/src/components/osds-text/constants/default-attributes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
import type { OdsTextAttribute } from '../interfaces/attributes';
import { ODS_THEME_COLOR_HUE, ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { ODS_TEXT_COLOR_HUE, ODS_TEXT_COLOR_INTENT } from './text-color';
import { ODS_TEXT_LEVEL } from './text-level';
import { ODS_TEXT_SIZE } from './text-size';

const DEFAULT_ATTRIBUTE: OdsTextAttribute = Object.freeze({
breakSpaces: false,
color: ODS_THEME_COLOR_INTENT.default,
color: ODS_TEXT_COLOR_INTENT.default,
contrasted: false,
level: ODS_TEXT_LEVEL.body,
size: ODS_TEXT_SIZE._100,
hue: ODS_THEME_COLOR_HUE._500,
hue: ODS_TEXT_COLOR_HUE._500,
});

export {
Expand Down
8 changes: 8 additions & 0 deletions packages/components/text/src/components/osds-text/constants/text-color.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { ODS_THEME_COLOR_INTENT, ODS_THEME_COLOR_INTENTS, ODS_THEME_COLOR_HUE, ODS_THEME_COLOR_HUES } from '@ovhcloud/ods-common-theming';

export {
ODS_THEME_COLOR_INTENT as ODS_TEXT_COLOR_INTENT,
ODS_THEME_COLOR_HUE as ODS_TEXT_COLOR_HUE,
ODS_THEME_COLOR_INTENTS as ODS_TEXT_COLOR_INTENTS,
ODS_THEME_COLOR_HUES as ODS_TEXT_COLOR_HUES,
};
6 changes: 3 additions & 3 deletions packages/components/text/src/components/osds-text/interfaces/attributes.ts
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ODS_THEME_COLOR_HUE, ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import type { ODS_TEXT_COLOR_HUE, ODS_TEXT_COLOR_INTENT } from '../constants/text-color';
import type { ODS_TEXT_LEVEL } from '../constants/text-level';
import type { ODS_TEXT_SIZE } from '../constants/text-size';

Expand All @@ -10,7 +10,7 @@ interface OdsTextAttribute {
/**
* Text contrasted theme
*/
color?: ODS_THEME_COLOR_INTENT
color?: ODS_TEXT_COLOR_INTENT
/**
* Text design as contrasted version
*/
Expand All @@ -26,7 +26,7 @@ interface OdsTextAttribute {
/**
* Text hue
*/
hue?: ODS_THEME_COLOR_HUE
hue?: ODS_TEXT_COLOR_HUE
}

export {
Expand Down
8 changes: 4 additions & 4 deletions packages/components/text/src/components/osds-text/osds-text.e2e.screenshot.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import type { E2EPage } from '@stencil/core/testing';
import type { OdsTextAttribute } from './interfaces/attributes';
import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
import { ODS_THEME_COLOR_HUES, ODS_THEME_COLOR_INTENTS } from '@ovhcloud/ods-common-theming';
import { ODS_TEXT_COLOR_HUES, ODS_TEXT_COLOR_INTENTS } from './constants/text-color';
import { newE2EPage } from '@stencil/core/testing';
import { ODS_TEXT_LEVELS } from './constants/text-level';
import { ODS_TEXT_SIZES } from './constants/text-size';
Expand All @@ -15,7 +15,7 @@ describe('e2e:osds-text', () => {

async function setup(content: string) {
page = await newE2EPage();

await page.setContent(content);
await page.evaluate(() => {
document.body.style.setProperty('margin', '0px');
Expand All @@ -29,8 +29,8 @@ describe('e2e:osds-text', () => {
});

it('should take screenshots of all attributes variations', async () => {
ODS_THEME_COLOR_HUES.forEach((hue) => {
ODS_THEME_COLOR_INTENTS.forEach((color) => {
ODS_TEXT_COLOR_HUES.forEach((hue) => {
ODS_TEXT_COLOR_INTENTS.forEach((color) => {
ODS_TEXT_SIZES.forEach((size) => {
ODS_TEXT_LEVELS.forEach((level) => {
variations.push(`
Expand Down
72 changes: 36 additions & 36 deletions packages/components/text/src/components/osds-text/osds-text.e2e.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type { E2EElement, E2EPage } from '@stencil/core/testing';
import type { OdsTextAttribute } from './interfaces/attributes';
import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str } from '@ovhcloud/ods-common-testing';
import { ODS_THEME_COLOR_HUE, ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import { newE2EPage } from '@stencil/core/testing';
import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
import { ODS_TEXT_COLOR_HUE, ODS_TEXT_COLOR_INTENT } from './constants/text-color';
import { ODS_TEXT_LEVEL } from './constants/text-level';
import { ODS_TEXT_SIZE } from './constants/text-size';

Expand All @@ -27,7 +27,7 @@ describe('e2e:osds-text', () => {
}

it('should render', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, contrasted: false } });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, contrasted: false } });
expect(el).not.toBeNull();
});

Expand Down Expand Up @@ -68,125 +68,125 @@ describe('e2e:osds-text', () => {

describe('slots', () => {
it('should have a slot', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, contrasted: false }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, contrasted: false }, html: slotContent });
expect(textSlot).not.toBeNull();
});

});

describe('colors', () => {
it('should have a default color', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.default }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.default);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.default }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_TEXT_COLOR_INTENT.default);
});

it('should have a primary color', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.primary);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_TEXT_COLOR_INTENT.primary);
});

it('should have a text color', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.text }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.text);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.text }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_TEXT_COLOR_INTENT.text);
});

it('should have an accent color', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.accent }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.accent);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.accent }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_TEXT_COLOR_INTENT.accent);
});

it('should have a warning color', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.warning }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.warning);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.warning }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_TEXT_COLOR_INTENT.warning);
});

it('should have a success color', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.success }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.success);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.success }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_TEXT_COLOR_INTENT.success);
});

it('should have a info color', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.info }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.info);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.info }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_TEXT_COLOR_INTENT.info);
});

it('should have a promotion color', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.promotion }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_THEME_COLOR_INTENT.promotion);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.promotion }, html: slotContent });
expect(await el.getProperty('color')).toBe(ODS_TEXT_COLOR_INTENT.promotion);
});
});

describe('level', () => {
it('should have a body level', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.body }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.body }, html: slotContent });
expect(await el.getProperty('level')).toBe(ODS_TEXT_LEVEL.body);
});

it('should have a button level', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.button }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.button }, html: slotContent });
expect(await el.getProperty('level')).toBe(ODS_TEXT_LEVEL.button);
});

it('should have a caption level', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.caption }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.caption }, html: slotContent });
expect(await el.getProperty('level')).toBe(ODS_TEXT_LEVEL.caption);
});

it('should have a subheading level', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.subheading }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.subheading }, html: slotContent });
expect(await el.getProperty('level')).toBe(ODS_TEXT_LEVEL.subheading);
});

it('should have a heading level', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.heading }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, level: ODS_TEXT_LEVEL.heading }, html: slotContent });
expect(await el.getProperty('level')).toBe(ODS_TEXT_LEVEL.heading);
});
});

describe('sizes', () => {
it('should have a 100 size', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._100 }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._100 }, html: slotContent });
expect(await el.getProperty('size')).toBe(ODS_TEXT_SIZE._100);
});
it('should have a 200 size', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._200 }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._200 }, html: slotContent });
expect(await el.getProperty('size')).toBe(ODS_TEXT_SIZE._200);
});
it('should have a 300 size', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._300 }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._300 }, html: slotContent });
expect(await el.getProperty('size')).toBe(ODS_TEXT_SIZE._300);
});
it('should have a 400 size', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._400 }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._400 }, html: slotContent });
expect(await el.getProperty('size')).toBe(ODS_TEXT_SIZE._400);
});
it('should have a 500 size', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._500 }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._500 }, html: slotContent });
expect(await el.getProperty('size')).toBe(ODS_TEXT_SIZE._500);
});
it('should have a 600 size', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._600 }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._600 }, html: slotContent });
expect(await el.getProperty('size')).toBe(ODS_TEXT_SIZE._600);
});
it('should have a 700 size', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._700 }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._700 }, html: slotContent });
expect(await el.getProperty('size')).toBe(ODS_TEXT_SIZE._700);
});
it('should have a 800 size', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._800 }, html: slotContent });
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, size: ODS_TEXT_SIZE._800 }, html: slotContent });
expect(await el.getProperty('size')).toBe(ODS_TEXT_SIZE._800);
});
});

describe('hues', () => {
it('should have a 100 hue', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, hue: ODS_THEME_COLOR_HUE._100 }, html: slotContent });
expect(await el.getProperty('hue')).toBe(ODS_THEME_COLOR_HUE._100);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, hue: ODS_TEXT_COLOR_HUE._100 }, html: slotContent });
expect(await el.getProperty('hue')).toBe(ODS_TEXT_COLOR_HUE._100);
});

it('should have a 500 hue', async () => {
await setup({ attributes: { color: ODS_THEME_COLOR_INTENT.primary, hue: ODS_THEME_COLOR_HUE._500 }, html: slotContent });
expect(await el.getProperty('hue')).toBe(ODS_THEME_COLOR_HUE._500);
await setup({ attributes: { color: ODS_TEXT_COLOR_INTENT.primary, hue: ODS_TEXT_COLOR_HUE._500 }, html: slotContent });
expect(await el.getProperty('hue')).toBe(ODS_TEXT_COLOR_HUE._500);
});
});
});
8 changes: 4 additions & 4 deletions packages/components/text/src/components/osds-text/osds-text.spec.ts
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import type { SpecPage } from '@stencil/core/testing';
import type { OdsTextAttribute } from './interfaces/attributes';
import { odsComponentAttributes2StringAttributes, odsStringAttributes2Str, odsUnitTestAttribute } from '@ovhcloud/ods-common-testing';
import { ODS_THEME_COLOR_INTENT, ODS_THEME_COLOR_INTENTS } from '@ovhcloud/ods-common-theming';
import { newSpecPage } from '@stencil/core/testing';
import { DEFAULT_ATTRIBUTE } from './constants/default-attributes';
import { ODS_TEXT_COLOR_INTENT, ODS_TEXT_COLOR_INTENTS } from './constants/text-color';
import { ODS_TEXT_LEVEL, ODS_TEXT_LEVELS } from './constants/text-level';
import { ODS_TEXT_SIZE, ODS_TEXT_SIZES } from './constants/text-size';
import { OsdsText } from './osds-text';
Expand Down Expand Up @@ -66,14 +66,14 @@ describe('spec:osds-text', () => {
odsUnitTestAttribute<OdsTextAttribute, 'color'>({
name: 'color',
defaultValue: DEFAULT_ATTRIBUTE.color,
newValue: ODS_THEME_COLOR_INTENT.primary,
value: ODS_THEME_COLOR_INTENT.default,
newValue: ODS_TEXT_COLOR_INTENT.primary,
value: ODS_TEXT_COLOR_INTENT.default,
setup: (value) => setup({ attributes: { ['color']: value } }),
...config,
});

it('should set a color if attribute is added', async () => {
const randomColor = ODS_THEME_COLOR_INTENTS[Math.floor(Math.random() * ODS_THEME_COLOR_INTENTS.length)];
const randomColor = ODS_TEXT_COLOR_INTENTS[Math.floor(Math.random() * ODS_TEXT_COLOR_INTENTS.length)];
await setup({ attributes: { color: randomColor } });
expect(instance.color).toBe(randomColor);
});
Expand Down
6 changes: 3 additions & 3 deletions packages/components/text/src/components/osds-text/osds-text.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import type { ODS_THEME_COLOR_HUE, ODS_THEME_COLOR_INTENT } from '@ovhcloud/ods-common-theming';
import type { ODS_TEXT_COLOR_INTENT, ODS_TEXT_COLOR_HUE } from './constants/text-color';
import type { ODS_TEXT_LEVEL } from './constants/text-level';
import type { ODS_TEXT_SIZE } from './constants/text-size';
import type { OdsTextAttribute } from './interfaces/attributes';
Expand All @@ -19,7 +19,7 @@ export class OsdsText implements OdsTextAttribute {
@Prop({ reflect: true }) public breakSpaces? = DEFAULT_ATTRIBUTE.breakSpaces;

/** @see OdsTextAttribute.color */
@Prop({ reflect: true }) public color?: ODS_THEME_COLOR_INTENT = DEFAULT_ATTRIBUTE.color;
@Prop({ reflect: true }) public color?: ODS_TEXT_COLOR_INTENT = DEFAULT_ATTRIBUTE.color;

/** @see OdsTextAttribute.contrasted */
@Prop({ reflect: true }) public contrasted? = DEFAULT_ATTRIBUTE.contrasted;
Expand All @@ -31,7 +31,7 @@ export class OsdsText implements OdsTextAttribute {
@Prop({ reflect: true }) public level?: ODS_TEXT_LEVEL = DEFAULT_ATTRIBUTE.level;

/** @see OdsTextAttribute.hue */
@Prop({ reflect: true }) public hue?: ODS_THEME_COLOR_HUE = DEFAULT_ATTRIBUTE.hue;
@Prop({ reflect: true }) public hue?: ODS_TEXT_COLOR_HUE = DEFAULT_ATTRIBUTE.hue;

render() {
return (
Expand Down

0 comments on commit 6e50ce9

Please sign in to comment.