From a7e4a88f90029dbdf9cf91a0da8d7a6de52ed7e7 Mon Sep 17 00:00:00 2001 From: Timo Zehnle Date: Fri, 17 Dec 2021 15:14:09 +0100 Subject: [PATCH] feat: remove Heading from marigold --- .changeset/new-dragons-tan.md | 10 ++ config/storybook/Welcome.stories.mdx | 2 +- docs/content/components/heading.mdx | 120 ------------------ docs/content/components/inline.mdx | 20 ++- docs/content/components/stack.mdx | 16 ++- docs/content/components/text.mdx | 94 +++++++++++++- docs/content/foundation/icons.mdx | 25 +++- docs/content/themes/b2b.mdx | 25 ++-- docs/content/themes/core.mdx | 25 ++-- docs/content/themes/unicorn.mdx | 25 ++-- docs/src/components/DoAndDont.tsx | 17 +-- docs/src/mdx.tsx | 30 ++--- docs/src/pages/404.tsx | 6 +- docs/src/theme/typography.ts | 36 +++--- packages/components/src/Card/Card.stories.mdx | 1 - packages/components/src/Dialog/Dialog.tsx | 6 +- .../src/Heading/Heading.stories.mdx | 39 ------ .../components/src/Heading/Heading.test.tsx | 81 ------------ packages/components/src/Heading/Heading.tsx | 31 ----- packages/components/src/Heading/index.ts | 1 - packages/components/src/Message/Message.tsx | 6 +- .../components/src/Stack/Stack.stories.mdx | 5 +- packages/components/src/Text/Text.test.tsx | 4 +- packages/components/src/index.ts | 1 - packages/components/src/theme.ts | 2 - packages/icons/src/Icons.stories.mdx | 25 +++- packages/system/src/Box.test.tsx | 4 +- packages/system/src/Colors.stories.mdx | 33 +++-- themes/theme-b2b/src/index.ts | 45 +++---- themes/theme-core/src/index.ts | 45 +++---- themes/theme-unicorn/src/index.ts | 45 +++---- 31 files changed, 324 insertions(+), 501 deletions(-) create mode 100644 .changeset/new-dragons-tan.md delete mode 100644 docs/content/components/heading.mdx delete mode 100644 packages/components/src/Heading/Heading.stories.mdx delete mode 100644 packages/components/src/Heading/Heading.test.tsx delete mode 100755 packages/components/src/Heading/Heading.tsx delete mode 100644 packages/components/src/Heading/index.ts diff --git a/.changeset/new-dragons-tan.md b/.changeset/new-dragons-tan.md new file mode 100644 index 0000000000..ba05708fd4 --- /dev/null +++ b/.changeset/new-dragons-tan.md @@ -0,0 +1,10 @@ +--- +"@marigold/storybook-config": patch +"docs": patch +"@marigold/components": patch +"@marigold/icons": patch +"@marigold/system": patch +"@marigold/theme-b2b": patch +--- + +feat: remove Heading from marigold diff --git a/config/storybook/Welcome.stories.mdx b/config/storybook/Welcome.stories.mdx index fdcc474020..82bdd209c0 100644 --- a/config/storybook/Welcome.stories.mdx +++ b/config/storybook/Welcome.stories.mdx @@ -1,5 +1,5 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs'; -import { Box, Heading, Image, Link, Stack, Text } from '@marigold/components'; +import { Box, Image, Link, Stack, Text } from '@marigold/components'; import { ExternalLink } from '@marigold/icons'; import logo from './assets/type_logo.png'; diff --git a/docs/content/components/heading.mdx b/docs/content/components/heading.mdx deleted file mode 100644 index 407e30a973..0000000000 --- a/docs/content/components/heading.mdx +++ /dev/null @@ -1,120 +0,0 @@ ---- -title: Heading ---- - -# Heading - -## Description - -Use the Heading component for headings of texts. Predefined variants are `h1`, `h2`, `h3`, `h4`, `h5` and `h6`. - -## Properties - -| Property | Type | Default | -| :-------- | :--------------------------------- | :------ | -| `as` | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` | `h2` | -| `variant` | `string` | `h2` | - -## Import - -```tsx onlyCode -import { Heading } from '@marigold/components'; -``` - -## Live-Code Example - -```tsx expandCode - - Amazing heading - -``` - -## Usage - -```tsx -<> - - H1 amazing heading - - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit - amet. - - -``` - -```tsx -<> - H2 amazing heading - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit - amet. - - -``` - -```tsx -<> - - H3 amazing heading - - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit - amet. - - -``` - -```tsx -<> - - H4 amazing heading - - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit - amet. - - -``` - -```tsx -<> - - H5 amazing heading - - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit - amet. - - -``` - -```tsx -<> - - H6 amazing heading - - - Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy - eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam - voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet - clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit - amet. - - -``` diff --git a/docs/content/components/inline.mdx b/docs/content/components/inline.mdx index e14670aeed..cbeb3d365b 100644 --- a/docs/content/components/inline.mdx +++ b/docs/content/components/inline.mdx @@ -56,11 +56,15 @@ import { Inline } from '@marigold/components'; ```tsx - Block #1 + + Block #1 + Lorem ipsum dolor sit amet. - Bock #2 + + Bock #2 + Lorem ipsum dolor sit amet. @@ -70,21 +74,27 @@ import { Inline } from '@marigold/components'; ```tsx - Top + + Top + Lorem ipsum dolor sit amet. ``` ```tsx - Center + + Center + Lorem ipsum dolor sit amet. ``` ```tsx - Bottom + + Bottom + Lorem ipsum dolor sit amet. ``` diff --git a/docs/content/components/stack.mdx b/docs/content/components/stack.mdx index 7a73961b03..4ee0ee8b71 100644 --- a/docs/content/components/stack.mdx +++ b/docs/content/components/stack.mdx @@ -25,7 +25,9 @@ import { Stack } from '@marigold/components'; ```tsx expandCode - Header + + Header + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus. @@ -39,7 +41,9 @@ import { Stack } from '@marigold/components'; ```tsx - Header + + Header + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada, @@ -60,14 +64,18 @@ import { Stack } from '@marigold/components'; ```tsx - Stack Content #1 + + Stack Content #1 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus. - Stack Content #2 + + Stack Content #2 + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus. diff --git a/docs/content/components/text.mdx b/docs/content/components/text.mdx index 1d0d57f94d..028f7c0088 100644 --- a/docs/content/components/text.mdx +++ b/docs/content/components/text.mdx @@ -49,7 +49,7 @@ import { Text } from '@marigold/components'; ``` ```tsx - + P: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita @@ -64,3 +64,95 @@ import { Text } from '@marigold/components'; ```tsx Pink is awesome! ``` + +### Heading + +```tsx +<> + + H1 amazing heading + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit + amet. + + +``` + +```tsx +<> + + H2 amazing heading + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit + amet. + + +``` + +```tsx +<> + + H3 amazing heading + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit + amet. + + +``` + +```tsx +<> + + H4 amazing heading + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit + amet. + + +``` + +```tsx +<> + + H5 amazing heading + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit + amet. + + +``` + +```tsx +<> + + H6 amazing heading + + + Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy + eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam + voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet + clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit + amet. + + +``` diff --git a/docs/content/foundation/icons.mdx b/docs/content/foundation/icons.mdx index 47903925ed..a3b35a0596 100644 --- a/docs/content/foundation/icons.mdx +++ b/docs/content/foundation/icons.mdx @@ -114,7 +114,6 @@ import { Column, Columns, Divider, - Heading, Inline, Text, } from '@marigold/components'; @@ -125,7 +124,9 @@ import { CopySVGIcon } from '../../src/components/CopySVGIcon'; Select a Marigold icon and use it as described [here](../../components/icon) or click on an Icon in the list to copy them as `` Element -UI + + UI + @@ -250,7 +251,9 @@ or click on an Icon in the list to copy them as `` Element -Info + + Info + @@ -385,7 +388,9 @@ or click on an Icon in the list to copy them as `` Element -Action + + Action + @@ -525,7 +530,9 @@ or click on an Icon in the list to copy them as `` Element -Ticketing + + Ticketing + @@ -598,7 +605,9 @@ or click on an Icon in the list to copy them as `` Element -User + + User + @@ -656,7 +665,9 @@ or click on an Icon in the list to copy them as `` Element -Social + + Social + diff --git a/docs/content/themes/b2b.mdx b/docs/content/themes/b2b.mdx index b4869e1c53..73e59b65db 100644 --- a/docs/content/themes/b2b.mdx +++ b/docs/content/themes/b2b.mdx @@ -7,7 +7,6 @@ import { Column, Columns, Container, - Heading, Stack, Text, } from '@marigold/components'; @@ -41,24 +40,24 @@ Inter Black for headings (font-weight: 900), Inter Regular for body text. - + Heading H1 - - + + Heading H2 - - + + Heading H3 - - + + Heading H4 - - + + Heading H5 - - + + Heading H6 - + ## Colors diff --git a/docs/content/themes/core.mdx b/docs/content/themes/core.mdx index 320546f010..39ead6493e 100644 --- a/docs/content/themes/core.mdx +++ b/docs/content/themes/core.mdx @@ -7,7 +7,6 @@ import { Column, Columns, Container, - Heading, Stack, Text, } from '@marigold/components'; @@ -40,24 +39,24 @@ Standard breakpoints for shifting of menu and large-scale elements. We use two b Arial, Helvetica, sans-serif for headings and for body text (font-weight: 900 & 400). - + Heading H1 - - + + Heading H2 - - + + Heading H3 - - + + Heading H4 - - + + Heading H5 - - + + Heading H6 - + ## Colors diff --git a/docs/content/themes/unicorn.mdx b/docs/content/themes/unicorn.mdx index 95550face1..b289e9846c 100644 --- a/docs/content/themes/unicorn.mdx +++ b/docs/content/themes/unicorn.mdx @@ -7,7 +7,6 @@ import { Column, Columns, Container, - Heading, Stack, Text, } from '@marigold/components'; @@ -41,24 +40,24 @@ Roboto for headings (font-weight: 800), Arial for body text. - + Heading H1 - - + + Heading H2 - - + + Heading H3 - - + + Heading H4 - - + + Heading H5 - - + + Heading H6 - + ## Colors diff --git a/docs/src/components/DoAndDont.tsx b/docs/src/components/DoAndDont.tsx index 510110197d..2132219fd3 100644 --- a/docs/src/components/DoAndDont.tsx +++ b/docs/src/components/DoAndDont.tsx @@ -1,13 +1,6 @@ import * as React from 'react'; -import { - Box, - Card, - Divider, - Heading, - Inline, - Text, -} from '@marigold/components'; +import { Box, Card, Divider, Inline, Text } from '@marigold/components'; import { Banned, Check } from '@marigold/icons'; import { ComponentProps } from '@marigold/types'; @@ -43,16 +36,16 @@ export const DoAndDont: React.FC = ({ {dont ? ( - + Don't - + ) : ( - + Do - + )} diff --git a/docs/src/mdx.tsx b/docs/src/mdx.tsx index 76de642c6a..21ae6aea4b 100644 --- a/docs/src/mdx.tsx +++ b/docs/src/mdx.tsx @@ -2,7 +2,7 @@ import React from 'react'; // @ts-ignore (reason: package has no types) import { preToCodeBlock } from 'mdx-utils'; -import { Box, Heading, Text } from '@marigold/components'; +import { Box, Text } from '@marigold/components'; import { ComponentProps } from '@marigold/types'; import { Preview } from './components/Preview'; @@ -10,39 +10,39 @@ import { Preview } from './components/Preview'; // Typography // --------------- export const h1: React.FC> = ({ children, ...props }) => ( - + {children} - + ); export const h2: React.FC> = ({ children, ...props }) => ( - + {children} - + ); export const h3: React.FC> = ({ children, ...props }) => ( - + {children} - + ); export const h4: React.FC> = ({ children, ...props }) => ( - + {children} - + ); export const h5: React.FC> = ({ children, ...props }) => ( - + {children} - + ); export const h6: React.FC> = ({ children, ...props }) => ( - + {children} - + ); export const p: React.FC> = ({ children, ...props }) => ( @@ -128,9 +128,9 @@ export const td: React.FC> = ({ children, ...props }) => ( export const th: React.FC> = ({ children, ...props }) => ( - + {children} - + ); diff --git a/docs/src/pages/404.tsx b/docs/src/pages/404.tsx index 9c14e5c7dc..44f3770529 100644 --- a/docs/src/pages/404.tsx +++ b/docs/src/pages/404.tsx @@ -1,10 +1,12 @@ import React from 'react'; -import { Text, Heading } from '@marigold/components'; +import { Text } from '@marigold/components'; export default function NotFoundPage() { return ( <> - 404 + + 404 + oooops ); diff --git a/docs/src/theme/typography.ts b/docs/src/theme/typography.ts index 813f5f8386..5c71cbed65 100644 --- a/docs/src/theme/typography.ts +++ b/docs/src/theme/typography.ts @@ -43,20 +43,7 @@ export const typography = { ...text.root, color: 'gray.40', }, - muted: { - ...text.root, - color: 'gray.60', - }, - link: { - color: 'gray.20', - textDecoration: 'none', - '&:hover': { - color: 'blue.70', - }, - }, - }, - heading: { - h1: { + headline1: { ...text.root, ...text.heading, fontSize: 'xlarge', @@ -65,7 +52,7 @@ export const typography = { marginTop: 'none', }, }, - h2: { + headline2: { ...text.root, ...text.heading, fontSize: 'large', @@ -75,7 +62,7 @@ export const typography = { marginTop: 'none', }, }, - h3: { + headline3: { ...text.root, ...text.heading, fontSize: 'medium', @@ -85,20 +72,31 @@ export const typography = { marginTop: 'none', }, }, - h4: { + headline4: { ...text.root, ...text.heading, fontSize: 'small', }, - h5: { + headline5: { ...text.root, ...text.heading, fontSize: 'xsmall', }, - h6: { + headline6: { ...text.root, fontSize: 'xsmall', textTransform: 'uppercase', }, + muted: { + ...text.root, + color: 'gray.60', + }, + link: { + color: 'gray.20', + textDecoration: 'none', + '&:hover': { + color: 'blue.70', + }, + }, }, } as const; diff --git a/packages/components/src/Card/Card.stories.mdx b/packages/components/src/Card/Card.stories.mdx index 02de417fb6..75f1e43eca 100644 --- a/packages/components/src/Card/Card.stories.mdx +++ b/packages/components/src/Card/Card.stories.mdx @@ -1,5 +1,4 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import { Heading } from '../Heading'; import { Card } from './Card'; import { Text } from '../Text'; diff --git a/packages/components/src/Dialog/Dialog.tsx b/packages/components/src/Dialog/Dialog.tsx index 436d527e9e..1253e00e97 100755 --- a/packages/components/src/Dialog/Dialog.tsx +++ b/packages/components/src/Dialog/Dialog.tsx @@ -7,7 +7,7 @@ import { Close } from '@marigold/icons'; import { Box } from '../Box'; import { Button } from '../Button'; -import { Heading } from '../Heading'; +import { Text } from '../Text'; import { ModalDialog } from './ModalDialog'; @@ -59,9 +59,9 @@ export const Dialog: React.FC = ({ {title && ( - + {title} - + )} {children} diff --git a/packages/components/src/Heading/Heading.stories.mdx b/packages/components/src/Heading/Heading.stories.mdx deleted file mode 100644 index 892c867081..0000000000 --- a/packages/components/src/Heading/Heading.stories.mdx +++ /dev/null @@ -1,39 +0,0 @@ -import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import { Heading } from './Heading'; -import { Text } from '../Text'; - - - -# Heading - -export const Template = args => ( -
- Heading - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse - dignissim dapibus elit, vel egestas felis pharetra non. Cras - malesuada, massa nec ultricies efficitur, lectus ante consequat magna, - a porttitor massa ex ut quam. -
-); - - - {Template.bind({})} - - - diff --git a/packages/components/src/Heading/Heading.test.tsx b/packages/components/src/Heading/Heading.test.tsx deleted file mode 100644 index 362d43a5aa..0000000000 --- a/packages/components/src/Heading/Heading.test.tsx +++ /dev/null @@ -1,81 +0,0 @@ -import React from 'react'; -import { render, screen } from '@testing-library/react'; -import { ThemeProvider } from '@marigold/system'; -import { Heading } from './Heading'; - -const theme = { - fonts: { - body: 'Roboto', - headings: 'Inter', - }, - heading: { - h2: { - fontFamily: 'headings', - }, - h3: { - fontFamily: 'body', - }, - }, -}; - -test('supports default variant and themeSection', () => { - render( - - Default - - ); - const heading = screen.getByTitle(/default/); - - expect(heading).toHaveStyle(`font-family: Inter`); -}); - -test('accepts other variant than default', () => { - render( - - - Default - - - ); - const heading = screen.getByTitle(/default/); - - expect(heading).toHaveStyle(`font-family: Roboto`); -}); - -test('supports default as prop', () => { - render(Default); - const heading = screen.getByTitle(/default/); - - expect(heading.tagName).toEqual('H2'); -}); - -test('accepts other as prop than default', () => { - render( - - Default - - ); - const heading = screen.getByTitle(/default/); - - expect(heading.tagName).toEqual('H3'); -}); - -test('renders correct HTML element', () => { - render(Default); - const heading = screen.getByTitle(/default/); - - expect(heading instanceof HTMLHeadingElement).toBeTruthy(); -}); - -test('accepts custom styles prop className', () => { - render( - - - Default - - - ); - const heading = screen.getByTitle(/heading/); - - expect(heading.className).toMatch('custom-class-name'); -}); diff --git a/packages/components/src/Heading/Heading.tsx b/packages/components/src/Heading/Heading.tsx deleted file mode 100755 index eb989c8a82..0000000000 --- a/packages/components/src/Heading/Heading.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import { ComponentProps } from '@marigold/types'; -import { Box } from '../Box'; - -// Theme Extension -// --------------- -export interface HeadingThemeExtension { - heading?: { - [key: string]: Value; - }; -} - -// Props -// --------------- -export type HeadingProps = { - as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'; - variant?: string; -} & ComponentProps<'h1'>; - -// Component -// --------------- -export const Heading: React.FC = ({ - as = 'h2', - variant = 'h2', - children, - ...props -}) => ( - - {children} - -); diff --git a/packages/components/src/Heading/index.ts b/packages/components/src/Heading/index.ts deleted file mode 100644 index 6406e7b07f..0000000000 --- a/packages/components/src/Heading/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from './Heading'; diff --git a/packages/components/src/Message/Message.tsx b/packages/components/src/Message/Message.tsx index 4ebd204f12..7284120fd8 100755 --- a/packages/components/src/Message/Message.tsx +++ b/packages/components/src/Message/Message.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { Exclamation, Info, Notification } from '@marigold/icons'; import { ComponentProps } from '@marigold/types'; import { Box } from '../Box'; -import { Heading } from '../Heading'; +import { Text } from '../Text'; // Theme Extension // --------------- @@ -45,9 +45,9 @@ export const Message: React.FC = ({ > {icon} - + {messageTitle} - + {children} diff --git a/packages/components/src/Stack/Stack.stories.mdx b/packages/components/src/Stack/Stack.stories.mdx index 376b1bb401..6b73bc4360 100644 --- a/packages/components/src/Stack/Stack.stories.mdx +++ b/packages/components/src/Stack/Stack.stories.mdx @@ -1,5 +1,4 @@ import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs'; -import { Heading } from '../Heading'; import { Stack } from './Stack'; import { Text } from '../Text'; @@ -36,7 +35,9 @@ import { Text } from '../Text'; export const Template = args => ( - Heading + + Heading + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada, diff --git a/packages/components/src/Text/Text.test.tsx b/packages/components/src/Text/Text.test.tsx index 834b8fbc8a..93d69fb4f0 100644 --- a/packages/components/src/Text/Text.test.tsx +++ b/packages/components/src/Text/Text.test.tsx @@ -15,7 +15,7 @@ const theme = { body: { fontFamily: 'Oswald Regular', }, - heading: { + headline1: { fontFamily: 'Inter', }, }, @@ -35,7 +35,7 @@ test('uses `text.body` as default variant', () => { test('allows to change variants via `variant` prop (with "text" prefix)', () => { render( - text + text ); const text = screen.getByText(/text/); diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index a3fccd67e6..ec37879c75 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -12,7 +12,6 @@ export * from './Columns'; export * from './Dialog'; export * from './Divider'; export * from './Field'; -export * from './Heading'; export * from './Hidden'; export * from './Image'; export * from './Inline'; diff --git a/packages/components/src/theme.ts b/packages/components/src/theme.ts index 0ec413a18b..322ea8bec2 100644 --- a/packages/components/src/theme.ts +++ b/packages/components/src/theme.ts @@ -13,7 +13,6 @@ import { type CardThemeExtension } from './Card'; import { type CheckboxThemeExtension } from './Checkbox'; import { type DialogThemeExtension } from './Dialog'; import { type DividerThemeExtension } from './Divider'; -import { type HeadingThemeExtension } from './Heading'; import { type ImageThemeExtension } from './Image'; import { type InputThemeExtension } from './Input'; import { type LabelThemeExtension } from './Label'; @@ -38,7 +37,6 @@ export interface Theme CheckboxThemeExtension, DialogThemeExtension, DividerThemeExtension, - HeadingThemeExtension, ImageThemeExtension, InputThemeExtension, LabelThemeExtension, diff --git a/packages/icons/src/Icons.stories.mdx b/packages/icons/src/Icons.stories.mdx index c2a279ae08..713e3f7a24 100644 --- a/packages/icons/src/Icons.stories.mdx +++ b/packages/icons/src/Icons.stories.mdx @@ -111,7 +111,6 @@ import { Column, Columns, Container, - Heading, Stack, Text, } from '@marigold/components'; @@ -160,7 +159,9 @@ export const Template = args => ; - UI + + UI + ; - Info + + Info + ; - Action + + Action + ; - Ticketing + + Ticketing + ; - User + + User + ; - Social + + Social + { test('accept an array of variants', () => { render( - + Test diff --git a/packages/system/src/Colors.stories.mdx b/packages/system/src/Colors.stories.mdx index 4fb055d325..5bb863c22a 100644 --- a/packages/system/src/Colors.stories.mdx +++ b/packages/system/src/Colors.stories.mdx @@ -1,12 +1,5 @@ import { Meta, Story, Canvas } from '@storybook/addon-docs'; -import { - Box, - Column, - Columns, - Container, - Heading, - Text, -} from '@marigold/components'; +import { Box, Column, Columns, Container, Text } from '@marigold/components'; @@ -18,7 +11,9 @@ import { - Gray + + Gray + - Orange + + Orange + - Blue + + Blue + - Green + + Green + - Red + + Red + - Base Colours + + Base Colours +