From 2f95027b055520e4f091953537a49ca2f47c3f75 Mon Sep 17 00:00:00 2001 From: oyessb <47382101+oyessb@users.noreply.github.com> Date: Wed, 7 Feb 2024 13:17:21 +0100 Subject: [PATCH 1/5] PXWEB2-86 Added heading component. Example of usage in app.tsx. --- apps/pxweb2/src/app/app.tsx | 5 +- libs/pxweb2-ui/src/index.ts | 1 + .../Typography/Heading/Heading.module.scss | 75 +++++++++++-------- .../Typography/Heading/Heading.spec.tsx | 10 +++ .../Typography/Heading/Heading.stories.tsx | 73 ++++++++++++++++++ .../components/Typography/Heading/Heading.tsx | 37 +++++++++ 6 files changed, 168 insertions(+), 33 deletions(-) create mode 100644 libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.spec.tsx create mode 100644 libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.stories.tsx create mode 100644 libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx diff --git a/apps/pxweb2/src/app/app.tsx b/apps/pxweb2/src/app/app.tsx index 65694726..e7b0cafa 100644 --- a/apps/pxweb2/src/app/app.tsx +++ b/apps/pxweb2/src/app/app.tsx @@ -2,7 +2,7 @@ import styles from './app.module.scss'; -import { Button } from '@pxweb2/pxweb2-ui'; +import { Button, Heading } from '@pxweb2/pxweb2-ui'; function test(event: React.MouseEvent) { event.preventDefault(); @@ -15,8 +15,7 @@ function testSubmit() { export function App() { return ( <> -

Welcome to pxweb2!

- + Welcome to pxweb2! diff --git a/libs/pxweb2-ui/src/index.ts b/libs/pxweb2-ui/src/index.ts index 690c1e61..4d54cea0 100644 --- a/libs/pxweb2-ui/src/index.ts +++ b/libs/pxweb2-ui/src/index.ts @@ -1 +1,2 @@ export * from './lib/components/Button/Button'; +export * from './lib/components/Typography/Heading/Heading'; diff --git a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss index f356a0ea..c432c86e 100644 --- a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss +++ b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss @@ -1,40 +1,55 @@ +@use '../../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed; + .heading { - font-family: PxWeb-font-700; - } - - .xsmall { - font-size: 1rem; - line-height: 1.625rem; - letter-spacing: 0em; - text-align: left; - + font-family: PxWeb-font-700; +} + +.xsmall { + font-size: 1rem; + line-height: 1.625rem; + letter-spacing: 0em; + text-align: left; + &.spacing { + margin-bottom: fixed.$spacing-1; } - - .small { - font-size: 1.25rem; - line-height: 1.75; - letter-spacing: 0.005em; - text-align: left; +} + +.small { + font-size: 1.25rem; + line-height: 1.75; + letter-spacing: 0.005em; + text-align: left; + &.spacing { + margin-bottom: fixed.$spacing-1; } - - .medium { - font-size: 1.5rem; - line-height: 2.25rem; - letter-spacing: 0em; - text-align: left; +} + +.medium { + font-size: 1.5rem; + line-height: 2.25rem; + letter-spacing: 0em; + text-align: left; + &.spacing { + margin-bottom: fixed.$spacing-3; } - - .large { - font-size: 2rem; - line-height: 2.75rem; - letter-spacing: 0em; - text-align: left; +} + +.large { + font-size: 2rem; + line-height: 2.75rem; + letter-spacing: 0em; + text-align: left; + &.spacing { + margin-bottom: fixed.$spacing-5; } - - .xlarge { +} + +.xlarge { font-size: 2.5rem; line-height: 3.5rem; letter-spacing: 0em; text-align: left; + &.spacing { + margin-bottom: fixed.$spacing-6; } - \ No newline at end of file +} diff --git a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.spec.tsx b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.spec.tsx new file mode 100644 index 00000000..e8d300b6 --- /dev/null +++ b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.spec.tsx @@ -0,0 +1,10 @@ +import { render } from '@testing-library/react'; + +import Heading from './Heading'; + +describe('Heading', () => { + it('should render successfully', () => { + const { baseElement } = render(); + expect(baseElement).toBeTruthy(); + }); +}); diff --git a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.stories.tsx b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.stories.tsx new file mode 100644 index 00000000..48f2d01c --- /dev/null +++ b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.stories.tsx @@ -0,0 +1,73 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { Heading } from './Heading'; + +const meta: Meta = { + component: Heading, + title: 'Components/Typography/Heading', + argTypes: { + as: { + table: { + disable: true + } + } + } +}; +export default meta; +type Story = StoryObj; + +const text = "Heading is used for headlines to describe the content" + +export const Default: Story = { + args: { + children: text, + }, +}; + +export const HeadingXLarge: Story = { + args: { + size: 'xlarge', + children: text + }, + }; + + export const HeadingLarge: Story = { + args: { + size: 'large', + children: text + }, + }; + + export const HeadingMedium: Story = { + args: { + size: 'medium', + children: text + }, + }; + + export const HeadingSmall: Story = { + args: { + size: 'small', + children: text + }, + }; + export const HeadingXSmall: Story = { + args: { + size: 'xsmall', + children: text + }, + }; + + export const HeadingAsLegend: Story = { + args: { + children: "I am legend!", + as: "legend" + }, + }; + + export const HeadingNoSpacing: Story = { + args: { + children: text, + spacing: false + }, + }; + diff --git a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx new file mode 100644 index 00000000..35bd55d3 --- /dev/null +++ b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx @@ -0,0 +1,37 @@ +import cl from 'clsx'; +import classes from './Heading.module.scss'; +import React from 'react'; + +/* eslint-disable-next-line */ +export interface HeadingProps extends React.HTMLAttributes{ + size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' + level?: "1" | "2" | "3" | "4" | "5" | "6"; + spacing?: boolean; + children: string; + as?: React.ElementType; +} + +export function Heading({ + size = 'medium', + level = '1', + children, + spacing = true, + as, + ...rest +}: HeadingProps) { + const Component = as ?? (`h${level}` as React.ElementType); + return ( + + {children} + + ); +} + +export default Heading; From 85efd63eef2b65e5693cf9278209932b1f706d58 Mon Sep 17 00:00:00 2001 From: Michael Pande Date: Tue, 6 Feb 2024 13:41:00 +0100 Subject: [PATCH 2/5] Use CSS variables instead (#29) --- .gitignore | 1 + apps/pxweb2/index.html | 1 + apps/pxweb2/public/theme/variables.css | 64 +++++++++++++++++++ libs/pxweb2-ui/.storybook/preview.ts | 9 +-- .../lib/components/Button/Button.module.scss | 56 ++++++++-------- .../src/lib/components/Link/Link.module.scss | 8 +-- libs/pxweb2-ui/style-dictionary/build.js | 22 +++---- libs/pxweb2-ui/style-dictionary/config.json | 28 -------- 8 files changed, 110 insertions(+), 79 deletions(-) create mode 100644 apps/pxweb2/public/theme/variables.css delete mode 100644 libs/pxweb2-ui/style-dictionary/config.json diff --git a/.gitignore b/.gitignore index 6601a678..726be141 100644 --- a/.gitignore +++ b/.gitignore @@ -43,3 +43,4 @@ Thumbs.db # Style dictionary custom_theme.json +theme/variables.css diff --git a/apps/pxweb2/index.html b/apps/pxweb2/index.html index bda20d76..0504708e 100644 --- a/apps/pxweb2/index.html +++ b/apps/pxweb2/index.html @@ -8,6 +8,7 @@ +
diff --git a/apps/pxweb2/public/theme/variables.css b/apps/pxweb2/public/theme/variables.css new file mode 100644 index 00000000..386e2407 --- /dev/null +++ b/apps/pxweb2/public/theme/variables.css @@ -0,0 +1,64 @@ +/** + * Do not edit directly + * Generated on Tue, 06 Feb 2024 11:35:57 GMT + */ + +:root { + --px-border-radius-none: 0; + --px-border-radius-xxsmall: 0.5px; + --px-border-radius-xsmall: 2px; + --px-border-radius-small: 4px; + --px-border-radius-medium: 8px; + --px-border-radius-large: 16px; + --px-border-radius-xlarge: 24px; + --px-border-radius-full: 9999px; + --px-color-background-default: #ffffff; + --px-color-background-subtle: #f0f8f9; + --px-color-surface-default: #ffffff; + --px-color-surface-subtle: #f0f8f9; + --px-color-surface-moderate: #c3dcdc; + --px-color-surface-inverted: #274247; + --px-color-surface-highlight: #ecfeed; + --px-color-surface-action: #274247; + --px-color-surface-action-hover: #274247; + --px-color-surface-action-active: #162327; + --px-color-surface-subtle-hover: #dbebeb; + --px-color-surface-subtle-active: #c3dcdc; + --px-color-surface-info-subtle: #d7ecfe; + --px-color-surface-info-moderate: #c3e6fe; + --px-color-surface-success-subtle: #dbf5dc; + --px-color-surface-success-moderate: #b6e8b8; + --px-color-surface-warning-subtle: #fbf1c0; + --px-color-surface-warning-moderate: #feeb9f; + --px-color-surface-error-subtle: #ffe4e0; + --px-color-surface-error-moderate: #ffcec7; + --px-color-border-default: #162327; + --px-color-border-subtle: #c3dcdc; + --px-color-border-moderate: #62919a; + --px-color-border-divider: #62919a; + --px-color-border-divider-subtle: #c3dcdc; + --px-color-border-action: #274247; + --px-color-border-hover: #62919a; + --px-color-border-selected: #274247; + --px-color-border-info: #37b3f9; + --px-color-border-success: #4fc887; + --px-color-border-warning: #fcbf27; + --px-color-border-error: #fd7e6d; + --px-color-border-focus: #9272fc; + --px-color-border-focus-on-inverted: #9272fc; + --px-color-text-default: #162327; + --px-color-text-subtle: #2d6975; + --px-color-text-on-inverted: #ffffff; + --px-color-text-action: #274247; + --px-color-text-on-action: #ffffff; + --px-color-text-on-action-subtle: #162327; + --px-color-icon-default: #162327; + --px-color-icon-on-inverted: #ffffff; + --px-color-icon-action: #274247; + --px-color-icon-on-action: #ffffff; + --px-color-icon-on-action-subtle: #162327; + --px-color-icon-info: #0179c8; + --px-color-icon-success: #00824d; + --px-color-icon-warning: #cb7603; + --px-color-icon-error: #e23822; +} diff --git a/libs/pxweb2-ui/.storybook/preview.ts b/libs/pxweb2-ui/.storybook/preview.ts index c94b4e04..4e813168 100644 --- a/libs/pxweb2-ui/.storybook/preview.ts +++ b/libs/pxweb2-ui/.storybook/preview.ts @@ -1,9 +1,10 @@ import { Preview } from '@storybook/react'; - + +import './../style-dictionary/dist/css/variables.css'; import './../src/lib/global.scss'; - + const preview: Preview = { parameters: {}, }; - -export default preview; \ No newline at end of file + +export default preview; diff --git a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss index 3679b826..ab491da6 100644 --- a/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss +++ b/libs/pxweb2-ui/src/lib/components/Button/Button.module.scss @@ -1,5 +1,3 @@ -@use '../../../../style-dictionary/dist/scss/variables.scss' as variables; - .button { text-align: center; @@ -16,30 +14,30 @@ &:hover, &:focus { - border-radius: variables.$border-radius-full; + border-radius: var(--px-border-radius-full); text-decoration: none; } } } .primary { - color: variables.$color-text-on-action; - border-radius: variables.$border-radius-full; - background: variables.$color-surface-action; + color: var(--px-color-text-on-action); + border-radius: var(--px-border-radius-full); + background: var(--px-color-surface-action); // Override browser default styles border: none; border-style: none; &:hover { - border-radius: variables.$border-radius-medium; + border-radius: var(--px-border-radius-medium); } &:active { - border-radius: variables.$border-radius-medium; - background: variables.$color-surface-action-active; + border-radius: var(--px-border-radius-medium); + background: var(--px-color-surface-action-active); } &:disabled { - background: variables.$color-surface-action; + background: var(--px-color-surface-action); } } @@ -47,23 +45,23 @@ // Override browser defaults styles background-color: inherit; - color: variables.$color-text-action; - border-radius: variables.$border-radius-full; - border: 1.5px solid variables.$color-border-action; + color: var(--px-color-text-action); + border-radius: var(--px-border-radius-full); + border: 1.5px solid var(--px-color-border-action); &:hover { - color: variables.$color-text-on-action-subtle; - border-radius: variables.$border-radius-medium; - background: variables.$color-surface-subtle-hover; + color: var(--px-color-text-on-action-subtle); + border-radius: var(--px-border-radius-medium); + background: var(--px-color-surface-subtle-hover); } &:active { - color: variables.$color-text-on-action; - border-radius: variables.$border-radius-medium; - background: variables.$color-surface-action-active; + color: var(--px-color-text-on-action); + border-radius: var(--px-border-radius-medium); + background: var(--px-color-surface-action-active); } &:disabled { background-color: inherit; - color: variables.$color-text-action; + color: var(--px-color-text-action); } } @@ -71,23 +69,23 @@ // Override browser defaults styles background-color: inherit; - color: variables.$color-text-action; + color: var(--px-color-text-action); border: none; - border-radius: variables.$border-radius-full; + border-radius: var(--px-border-radius-full); &:hover { - color: variables.$color-text-on-action-subtle; - border-radius: variables.$border-radius-medium; - background: variables.$color-surface-subtle-hover; + color: var(--px-color-text-on-action-subtle); + border-radius: var(--px-border-radius-medium); + background: var(--px-color-surface-subtle-hover); } &:active { - color: variables.$color-text-on-action; - border-radius: variables.$border-radius-medium; - background: variables.$color-surface-action-active; + color: var(--px-color-text-on-action); + border-radius: var(--px-border-radius-medium); + background: var(--px-color-surface-action-active); } &:disabled { background-color: inherit; - color: variables.$color-text-action; + color: var(--px-color-text-action); } } diff --git a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss index 6290505d..ece73ef7 100644 --- a/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss +++ b/libs/pxweb2-ui/src/lib/components/Link/Link.module.scss @@ -1,14 +1,12 @@ -@use '../../../../style-dictionary/dist/scss/variables.scss' as variables; - .link { font-family: 'Roboto', sans-serif; - color: variables.$color-text-action; + color: var(--px-color-text-action); &:hover { text-decoration: none; } &:focus { - color: variables.$color-text-on-action-subtle; - background-color: variables.$color-surface-subtle-active; + color: var(--px-color-text-on-action-subtle); + background-color: var(--px-color-surface-subtle-active); } } diff --git a/libs/pxweb2-ui/style-dictionary/build.js b/libs/pxweb2-ui/style-dictionary/build.js index f24a62b4..6e269359 100644 --- a/libs/pxweb2-ui/style-dictionary/build.js +++ b/libs/pxweb2-ui/style-dictionary/build.js @@ -13,23 +13,19 @@ const configs = [ './libs/pxweb2-ui/style-dictionary/src/custom_theme.json', ], platforms: { - scss: { - transformGroup: 'scss', - buildPath: './libs/pxweb2-ui/style-dictionary/dist/scss/', + css: { + prefix: 'px-', + transformGroup: 'css', + buildPath: './libs/pxweb2-ui/style-dictionary/dist/css/', files: [ { - destination: 'variables.scss', - format: 'scss/variables', + destination: 'variables.css', + format: 'css/variables', }, - ], - }, - js: { - transformGroup: 'js', - buildPath: './libs/pxweb2-ui/style-dictionary/dist/js/', - files: [ { - destination: 'variables.js', - format: 'javascript/es6', + destination: + '../../../../../apps/pxweb2/public/theme/variables.css', + format: 'css/variables', }, ], }, diff --git a/libs/pxweb2-ui/style-dictionary/config.json b/libs/pxweb2-ui/style-dictionary/config.json deleted file mode 100644 index a6295ee9..00000000 --- a/libs/pxweb2-ui/style-dictionary/config.json +++ /dev/null @@ -1,28 +0,0 @@ -{ - "source": [ - "./libs/pxweb2-ui/style-dictionary/src/default_theme.json", - "./libs/pxweb2-ui/style-dictionary/src/custom_theme.json" - ], - "platforms": { - "scss": { - "transformGroup": "scss", - "buildPath": "./libs/pxweb2-ui/style-dictionary/dist/scss/", - "files": [ - { - "destination": "variables.scss", - "format": "scss/variables" - } - ] - }, - "js": { - "transformGroup": "js", - "buildPath": "./libs/pxweb2-ui/style-dictionary/dist/js/", - "files": [ - { - "destination": "variables.js", - "format": "javascript/es6" - } - ] - } - } -} From 816fc8604cdc45b19ac16257a6cba053ef4647b8 Mon Sep 17 00:00:00 2001 From: oyessb <47382101+oyessb@users.noreply.github.com> Date: Wed, 7 Feb 2024 15:51:02 +0100 Subject: [PATCH 3/5] PXWEB2-86 Added color for text with css variable. --- .../src/lib/components/Typography/Heading/Heading.module.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss index c432c86e..549083fd 100644 --- a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss +++ b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss @@ -2,6 +2,7 @@ .heading { font-family: PxWeb-font-700; + color: var(--px-color-text-default); } .xsmall { From 9ef85d5e6f299a3fdf0e992d036fe59bbbf599db Mon Sep 17 00:00:00 2001 From: PerIngeVaaje Date: Fri, 9 Feb 2024 13:14:08 +0100 Subject: [PATCH 4/5] PXWEB-86 Added option for align and text color. Change order for size-option in Story. Show level option as radiobutton in story. --- .../Typography/Heading/Heading.module.scss | 18 ++++ .../Typography/Heading/Heading.stories.tsx | 102 ++++++++++-------- .../components/Typography/Heading/Heading.tsx | 30 +++--- 3 files changed, 91 insertions(+), 59 deletions(-) diff --git a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss index 549083fd..ce342203 100644 --- a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss +++ b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.module.scss @@ -3,6 +3,7 @@ .heading { font-family: PxWeb-font-700; color: var(--px-color-text-default); + margin: 0; } .xsmall { @@ -54,3 +55,20 @@ margin-bottom: fixed.$spacing-6; } } + +.align-start { + text-align: start; +} +.align-center { + text-align: center; +} +.align-end { + text-align: end; +} + +.text-color-default { + color: var(--px-color-text-default); +} +.text-color-subtle { + color: var(--px-color-text-subtle); +} diff --git a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.stories.tsx b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.stories.tsx index 48f2d01c..e6589285 100644 --- a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.stories.tsx +++ b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.stories.tsx @@ -7,67 +7,75 @@ const meta: Meta = { argTypes: { as: { table: { - disable: true - } - } - } + disable: true, + }, + }, + }, }; export default meta; type Story = StoryObj; -const text = "Heading is used for headlines to describe the content" +const text = 'Heading is used for headlines to describe the content'; export const Default: Story = { args: { children: text, }, + argTypes: { + size: { + options: ['xlarge', 'large', 'medium', 'small', 'xsmall'], + control: { type: 'radio' }, + }, + level: { + control: { type: 'radio' }, + }, + }, }; export const HeadingXLarge: Story = { - args: { - size: 'xlarge', - children: text - }, - }; - - export const HeadingLarge: Story = { - args: { - size: 'large', - children: text - }, - }; + args: { + size: 'xlarge', + children: text, + }, +}; - export const HeadingMedium: Story = { - args: { - size: 'medium', - children: text - }, - }; +export const HeadingLarge: Story = { + args: { + size: 'large', + children: text, + }, +}; - export const HeadingSmall: Story = { - args: { - size: 'small', - children: text - }, - }; - export const HeadingXSmall: Story = { - args: { - size: 'xsmall', - children: text - }, - }; +export const HeadingMedium: Story = { + args: { + size: 'medium', + children: text, + }, +}; - export const HeadingAsLegend: Story = { - args: { - children: "I am legend!", - as: "legend" - }, - }; +export const HeadingSmall: Story = { + args: { + size: 'small', + children: text, + }, +}; +export const HeadingXSmall: Story = { + args: { + size: 'xsmall', + children: text, + }, +}; - export const HeadingNoSpacing: Story = { - args: { - children: text, - spacing: false - }, - }; +export const HeadingAsLegend: Story = { + args: { + children: 'I am legend!', + as: 'legend', + }, +}; +export const HeadingNoSpacing: Story = { + args: { + children: text, + spacing: false, + }, +}; diff --git a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx index 35bd55d3..650005ea 100644 --- a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx +++ b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx @@ -3,9 +3,11 @@ import classes from './Heading.module.scss'; import React from 'react'; /* eslint-disable-next-line */ -export interface HeadingProps extends React.HTMLAttributes{ - size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' - level?: "1" | "2" | "3" | "4" | "5" | "6"; +export interface HeadingProps extends React.HTMLAttributes { + size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge'; + level?: '1' | '2' | '3' | '4' | '5' | '6'; + align?: 'start' | 'center' | 'end'; + color?: 'default' | 'subtle'; spacing?: boolean; children: string; as?: React.ElementType; @@ -14,20 +16,24 @@ export interface HeadingProps extends React.HTMLAttributes{ export function Heading({ size = 'medium', level = '1', + align = 'start', + color = 'default', children, spacing = true, as, ...rest }: HeadingProps) { - const Component = as ?? (`h${level}` as React.ElementType); - return ( - {children} From e750a93a45311284f313abba8e53eaff53f8b2f0 Mon Sep 17 00:00:00 2001 From: PerIngeVaaje Date: Fri, 9 Feb 2024 14:22:57 +0100 Subject: [PATCH 5/5] PXWEB-86 Spacing set to false as default --- .../pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx index 650005ea..2d4e4669 100644 --- a/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx +++ b/libs/pxweb2-ui/src/lib/components/Typography/Heading/Heading.tsx @@ -19,7 +19,7 @@ export function Heading({ align = 'start', color = 'default', children, - spacing = true, + spacing = false, as, ...rest }: HeadingProps) {