Skip to content

Commit

Permalink
Merge pull request #103 from abusix/pla-996-hailstorm-fix-inline-link…
Browse files Browse the repository at this point in the history 
…-css-style

Pla 996 hailstorm fix inline link css style
  • Loading branch information
@Coderwelsch
Coderwelsch authored Feb 1, 2024
2 parents 4c2fb36 + 4cc3b00 commit 1f4c173
Show file tree
Hide file tree
Showing 4 changed files with 199 additions and 2 deletions.
196 changes: 196 additions & 0 deletions src/styles/global-styles.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -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<object>;

export const Headlines: Story = {
render: () => (
<div className="flex flex-col gap-4">
<h3 className="headline-700">Headline Styles</h3>

<TableUnvirtualized>
<TableUnvirtualized.Header>
<TableUnvirtualized.Header.Row>
<TableUnvirtualized.Header.Cell>ClassName</TableUnvirtualized.Header.Cell>
<TableUnvirtualized.Header.Cell>Example</TableUnvirtualized.Header.Cell>
</TableUnvirtualized.Header.Row>
</TableUnvirtualized.Header>

<TableUnvirtualized.Body>
<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>headline-100</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<h1 className="headline-100">
The quick brown fox jumps over the lazy dog
</h1>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>headline-200</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<h1 className="headline-200">
The quick brown fox jumps over the lazy dog
</h1>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>headline-300</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<h1 className="headline-300">
The quick brown fox jumps over the lazy dog
</h1>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>headline-400</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<h1 className="headline-400">
The quick brown fox jumps over the lazy dog
</h1>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>headline-500</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<h1 className="headline-500">
The quick brown fox jumps over the lazy dog
</h1>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>headline-600</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<h1 className="headline-600">
The quick brown fox jumps over the lazy dog
</h1>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>headline-700</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<h1 className="headline-700">
The quick brown fox jumps over the lazy dog
</h1>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>headline-800</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<h1 className="headline-800">
The quick brown fox jumps over the lazy dog
</h1>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>headline-900</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<h1 className="headline-900">
The quick brown fox jumps over the lazy dog
</h1>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>
</TableUnvirtualized.Body>
</TableUnvirtualized>
</div>
),
};

export const Paragraphs: Story = {
render: () => (
<div className="flex flex-col gap-4">
<h3 className="headline-700">Paragraph Styles</h3>

<TableUnvirtualized>
<TableUnvirtualized.Header>
<TableUnvirtualized.Header.Row>
<TableUnvirtualized.Header.Cell>ClassName</TableUnvirtualized.Header.Cell>
<TableUnvirtualized.Header.Cell>Example</TableUnvirtualized.Header.Cell>
</TableUnvirtualized.Header.Row>
</TableUnvirtualized.Header>

<TableUnvirtualized.Body>
<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>paragraph-100</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<p className="paragraph-100">
The quick brown fox jumps over the lazy dog
</p>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>paragraph-200</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<p className="paragraph-200">
The quick brown fox jumps over the lazy dog
</p>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>

<TableUnvirtualized.Body.Row>
<TableUnvirtualized.Body.Cell>
<pre>paragraph-300</pre>
</TableUnvirtualized.Body.Cell>
<TableUnvirtualized.Body.Cell>
<p className="paragraph-300">
The quick brown fox jumps over the lazy dog
</p>
</TableUnvirtualized.Body.Cell>
</TableUnvirtualized.Body.Row>
</TableUnvirtualized.Body>
</TableUnvirtualized>
</div>
),
};

export const InlineLink: Story = {
render: () => (
<div className="flex flex-col gap-4">
<h3 className="headline-700 font-mono">inline-link</h3>

<p className="paragraph-200">
<a href="https://abusix.com" className="inline-link">
Be or not to be,
</a>{" "}
that is the question: Whether ’tis nobler in the mind to suffer The slings and
arrows of outrageous fortune, …
</p>
</div>
),
};
2 changes: 1 addition & 1 deletion src/styles/index.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@
}

.inline-link {
@apply text-primary-600 underline hover:text-primary-900;
@apply text-primary-500 underline hover:text-primary-600;
}

/* Tailwind checkbox needs it to change styles of the check */
Expand Down
2 changes: 1 addition & 1 deletion src/styles/styles.scoped.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@
}

.inline-link {
@apply text-primary-600 underline hover:text-primary-900;
@apply text-primary-500 underline hover:text-primary-600;
}

/* Tailwind checkbox needs it to change styles of the check */
Expand Down
1 change: 1 addition & 0 deletions tailwind.config.cjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,6 +101,7 @@ export default {
fontFamily: {
display: ["Fabriga", "serif"],
sans: ["Inter", "sans-serif"],
mono: ["ui-monospace", "SFMono-Regular", "Menlo", "Monaco", "Consolas", "Liberation Mono", "Courier New", "monospace"]
},
maxWidth: {
285: "71.25rem",
Expand Down

0 comments on commit 1f4c173

Please sign in to comment.