From 4cc3b00ee657def8d67641166cf5686405d00e84 Mon Sep 17 00:00:00 2001 From: coderwelsch Date: Tue, 30 Jan 2024 12:26:23 +0100 Subject: [PATCH] added overview page for custom tailwind classNames --- src/styles/global-styles.stories.tsx | 196 +++++++++++++++++++++++++++ 1 file changed, 196 insertions(+) create mode 100644 src/styles/global-styles.stories.tsx diff --git a/src/styles/global-styles.stories.tsx b/src/styles/global-styles.stories.tsx new file mode 100644 index 00000000..56840911 --- /dev/null +++ b/src/styles/global-styles.stories.tsx @@ -0,0 +1,196 @@ +import type { Meta, StoryObj } from "@storybook/react"; +import React from "react"; +import { TableUnvirtualized } from "../components/table-unvirtualized/table-unvirtualized"; + +const meta: Meta = { + title: "Global CSS Style Classes", +}; + +export default meta; +type Story = StoryObj; + +export const Headlines: Story = { + render: () => ( +
+

Headline Styles

+ + + + + ClassName + Example + + + + + + + 
headline-100
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
headline-200
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
headline-300
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
headline-400
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
headline-500
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
headline-600
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
headline-700
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
headline-800
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
headline-900
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + +
+ ), +}; + +export const Paragraphs: Story = { + render: () => ( +
+

Paragraph Styles

+ + + + + ClassName + Example + + + + + + + 
paragraph-100
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
paragraph-200
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + + + 
paragraph-300
+ + +

+ The quick brown fox jumps over the lazy dog +

+ + + + +
+ ), +}; + +export const InlineLink: Story = { + render: () => ( +
+

inline-link

+ +

+ + Be or not to be, + {" "} + that is the question: Whether ’tis nobler in the mind to suffer The slings and + arrows of outrageous fortune, … +

+
+ ), +};