From eeef15491a385e6e3d58ed278e1bc8e38967e4bc Mon Sep 17 00:00:00 2001 From: coderwelsch Date: Mon, 29 Jan 2024 21:29:20 +0100 Subject: [PATCH 1/6] BREAKING CHANGE: restructured and restyled radio box options components to simplify its usage --- .../form-field/radio-box/radio-box-option.tsx | 75 +++++++++---------- .../radio-box/radio-box.stories.tsx | 44 +++++------ 2 files changed, 57 insertions(+), 62 deletions(-) diff --git a/src/components/form-field/radio-box/radio-box-option.tsx b/src/components/form-field/radio-box/radio-box-option.tsx index f81d8cab..bf145b6c 100644 --- a/src/components/form-field/radio-box/radio-box-option.tsx +++ b/src/components/form-field/radio-box/radio-box-option.tsx @@ -1,83 +1,78 @@ import { RadioGroup } from "@headlessui/react"; -import React from "react"; +import React, { Fragment } from "react"; import { classNames } from "../../../util/class-names"; -import { RecommendationTag } from "../../recommendation-tag/recommendation-tag"; -export interface RadioBoxOptionProps { +interface RadioBoxOptionProps { children: React.ReactNode; value: string; disabled?: boolean; - recommendationText?: string; className?: string; } -export const radioBoxContainerStyles = { - base: "group relative flex items-center gap-3 rounded-lg bg-neutral-0 border p-4 border-neutral-300 hover:border-primary-500 hover:bg-primary-50", - checked: "border-primary-500 bg-primary-500 hover:bg-primary-500 hover:text-neutral-0", +const radioBoxContainerStyles = { + base: "group relative flex items-center gap-3 rounded-lg bg-neutral-0 border p-4 border-neutral-300 hover:border-primary-600 hover:bg-primary-50 cursor-pointer focus:outline-none", + checked: "border-primary-600 bg-primary-600 hover:bg-primary-600 hover:text-neutral-0", disabled: - "border-neutral-400 bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100 hover:border-neutral-400 hover:bg-neutral-100", + "border-neutral-400 bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100 hover:border-neutral-400 hover:bg-neutral-100 cursor-not-allowed", + active: "ring-2 ring-primary-200", }; -export const radioBoxCircleStyles = { +const radioBoxCircleStyles = { base: "relative inline-block h-4 w-4 shrink-0 rounded-full bg-neutral-0 border border-neutral-400", - unchecked: "group-hover:border-primary-500 group-hover:bg-neutral-0", + unchecked: "group-hover:border-primary-600 group-hover:bg-neutral-0", + checked: "border-transparent", disabled: "bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100", }; -export const RadioBoxOption = ({ - children, - value, - disabled, - recommendationText, - className, -}: RadioBoxOptionProps) => { +const Title = ({ children }: { children: React.ReactNode }) => ( +

+ {children} +

+); + +const Description = ({ children }: { children: React.ReactNode }) => ( +

+ {children} +

+); + +export const RadioBoxOption = ({ children, value, disabled, className }: RadioBoxOptionProps) => { return ( - - {({ checked, disabled: optionDisabled }) => ( + + {({ checked, disabled: optionDisabled, active }) => (
- {recommendationText && ( - {recommendationText} - )} -
{checked && (
)}
-
- {children} -
+
{children}
)} ); }; + +RadioBoxOption.Title = Title; +RadioBoxOption.Description = Description; diff --git a/src/components/form-field/radio-box/radio-box.stories.tsx b/src/components/form-field/radio-box/radio-box.stories.tsx index 68315901..ce4203fe 100644 --- a/src/components/form-field/radio-box/radio-box.stories.tsx +++ b/src/components/form-field/radio-box/radio-box.stories.tsx @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from "@storybook/react"; import React, { useState } from "react"; import { FormField } from "../form-field"; import { RadioBox } from "./radio-box"; +import { FeaturedTag } from "../../featured-tag/featured-tag"; const meta: Meta = { title: "Input/RadioBox", @@ -18,34 +19,33 @@ const RadioBoxWithHooks = () => { return ( - -
-

Option 1

-

- To be, or not to be, that is the question: Whether ’tis nobler in the - mind to suffer The slings and arrows of outrageous fortune, … -

-
+ + Recommended + + Option 1 + + + To be, or not to be, that is the question: Whether ’tis nobler in the mind + to suffer The slings and arrows of outrageous fortune, … + -
-

Option 2

-

- To be, or not to be, that is the question: Whether ’tis nobler in the - mind to suffer The slings and arrows of outrageous fortune, … -

-
+ Option 2 + + + To be, or not to be, that is the question: Whether ’tis nobler in the mind + to suffer The slings and arrows of outrageous fortune, … + -
-

Option 3

-

- To be, or not to be, that is the question: Whether ’tis nobler in the - mind to suffer The slings and arrows of outrageous fortune, … -

-
+ Option 3 + + + To be, or not to be, that is the question: Whether ’tis nobler in the mind + to suffer The slings and arrows of outrageous fortune, … + From c28f4d268bb8f8dc73a359b4c7f8ecd0ea61b046 Mon Sep 17 00:00:00 2001 From: coderwelsch Date: Mon, 29 Jan 2024 21:29:55 +0100 Subject: [PATCH 2/6] renamed RecommendationTag to FeaturedTag --- .../featured-tag.stories.tsx} | 14 +++++++------- .../featured-tag.tsx} | 6 +++--- 2 files changed, 10 insertions(+), 10 deletions(-) rename src/components/{recommendation-tag/recommendation-tag.stories.tsx => featured-tag/featured-tag.stories.tsx} (78%) rename src/components/{recommendation-tag/recommendation-tag.tsx => featured-tag/featured-tag.tsx} (51%) diff --git a/src/components/recommendation-tag/recommendation-tag.stories.tsx b/src/components/featured-tag/featured-tag.stories.tsx similarity index 78% rename from src/components/recommendation-tag/recommendation-tag.stories.tsx rename to src/components/featured-tag/featured-tag.stories.tsx index ee216287..5700c838 100644 --- a/src/components/recommendation-tag/recommendation-tag.stories.tsx +++ b/src/components/featured-tag/featured-tag.stories.tsx @@ -1,17 +1,17 @@ import type { Meta, StoryObj } from "@storybook/react"; import React, { useState } from "react"; -import { RecommendationTag } from "./recommendation-tag"; +import { FeaturedTag } from "./featured-tag"; import { Panel } from "../panel"; import { FormField } from "../form-field"; -const meta: Meta = { - title: "Input/RecommendationTag", - component: RecommendationTag, +const meta: Meta = { + title: "Input/FeaturedTag", + component: FeaturedTag, }; export default meta; -type Story = StoryObj; +type Story = StoryObj; const RadioBoxWithRecommendationTag = () => { const [value, setValue] = useState("value_1"); @@ -27,7 +27,7 @@ const RadioBoxWithRecommendationTag = () => { id="value" > - Option 1Recommended! + Option 1Recommended! Option 2 @@ -50,7 +50,7 @@ export const PanelExample: Story = {

This example uses a Panel component

- Recommended! + Recommended!
), diff --git a/src/components/recommendation-tag/recommendation-tag.tsx b/src/components/featured-tag/featured-tag.tsx similarity index 51% rename from src/components/recommendation-tag/recommendation-tag.tsx rename to src/components/featured-tag/featured-tag.tsx index ac77efdf..5fbb81ee 100644 --- a/src/components/recommendation-tag/recommendation-tag.tsx +++ b/src/components/featured-tag/featured-tag.tsx @@ -1,16 +1,16 @@ import React, { ReactNode } from "react"; import { classNames } from "../../util/class-names"; -interface RecommendationTagProps { +interface FeaturedTagProps { children: ReactNode; className?: string; } -export const RecommendationTag = ({ children, className }: RecommendationTagProps) => { +export const FeaturedTag = ({ children, className }: FeaturedTagProps) => { return ( From 6f71a82f8f7c814bedabb095fbadb69176fc589c Mon Sep 17 00:00:00 2001 From: coderwelsch Date: Tue, 30 Jan 2024 08:46:39 +0100 Subject: [PATCH 3/6] fix: fix text color styles --- src/styles/index.css | 2 +- src/styles/styles.scoped.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/styles/index.css b/src/styles/index.css index de1a102d..c48163d0 100644 --- a/src/styles/index.css +++ b/src/styles/index.css @@ -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 */ diff --git a/src/styles/styles.scoped.css b/src/styles/styles.scoped.css index 9d0722aa..0b6fe083 100644 --- a/src/styles/styles.scoped.css +++ b/src/styles/styles.scoped.css @@ -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 */ From e9f7b97585c3c4e3f3fdba286cbf9a8915232c55 Mon Sep 17 00:00:00 2001 From: coderwelsch Date: Tue, 30 Jan 2024 08:55:34 +0100 Subject: [PATCH 4/6] feat: added monospaced system fonts --- tailwind.config.cjs | 1 + 1 file changed, 1 insertion(+) diff --git a/tailwind.config.cjs b/tailwind.config.cjs index fcaf06fb..5174e4c4 100644 --- a/tailwind.config.cjs +++ b/tailwind.config.cjs @@ -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", From 73b3219fc524b246ba278a8756f24368d1d077bc Mon Sep 17 00:00:00 2001 From: coderwelsch Date: Tue, 30 Jan 2024 08:55:58 +0100 Subject: [PATCH 5/6] feat: added overview page for global css styles --- 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, … +

+
+ ), +}; From 0268641c4fff979bfd3545e6da514879c5cccd00 Mon Sep 17 00:00:00 2001 From: coderwelsch Date: Tue, 30 Jan 2024 08:58:29 +0100 Subject: [PATCH 6/6] fix: added export for RadioBoxOptionProps --- src/components/form-field/radio-box/radio-box-option.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-field/radio-box/radio-box-option.tsx b/src/components/form-field/radio-box/radio-box-option.tsx index bf145b6c..2fb94acc 100644 --- a/src/components/form-field/radio-box/radio-box-option.tsx +++ b/src/components/form-field/radio-box/radio-box-option.tsx @@ -2,7 +2,7 @@ import { RadioGroup } from "@headlessui/react"; import React, { Fragment } from "react"; import { classNames } from "../../../util/class-names"; -interface RadioBoxOptionProps { +export interface RadioBoxOptionProps { children: React.ReactNode; value: string; disabled?: boolean;