Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Pla 996 hailstorm improve/change css colors and styles of class-styles #102

Closed
wants to merge 6 commits into from
Closed

Pla 996 hailstorm improve/change css colors and styles of class-styles #102

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
eeef154
BREAKING CHANGE: restructured and restyled radio box options componen…
Jan 29, 2024
c28f4d2
renamed RecommendationTag to FeaturedTag
Jan 29, 2024
6f71a82
fix: fix text color styles
Jan 30, 2024
e9f7b97
feat: added monospaced system fonts
Jan 30, 2024
73b3219
feat: added overview page for global css styles
Jan 30, 2024
0268641
fix: added export for RadioBoxOptionProps
Jan 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 7 additions & 7 deletions ...dation-tag/recommendation-tag.stories.tsx → ...nts/featured-tag/featured-tag.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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<typeof RecommendationTag> = {
title: "Input/RecommendationTag",
component: RecommendationTag,
const meta: Meta<typeof FeaturedTag> = {
title: "Input/FeaturedTag",
component: FeaturedTag,
};

export default meta;

type Story = StoryObj<typeof RecommendationTag>;
type Story = StoryObj<typeof FeaturedTag>;

const RadioBoxWithRecommendationTag = () => {
const [value, setValue] = useState("value_1");
Expand All @@ -27,7 +27,7 @@ const RadioBoxWithRecommendationTag = () => {
id="value"
>
<FormField.RadioBox.Option value="option_1">
Option 1<RecommendationTag>Recommended!</RecommendationTag>
Option 1<FeaturedTag>Recommended!</FeaturedTag>
</FormField.RadioBox.Option>

<FormField.RadioBox.Option value="option_2">Option 2</FormField.RadioBox.Option>
Expand All @@ -50,7 +50,7 @@ export const PanelExample: Story = {
<div className="w-96">
<Panel className="relative">
<p>This example uses a Panel component</p>
<RecommendationTag>Recommended!</RecommendationTag>
<FeaturedTag>Recommended!</FeaturedTag>
</Panel>
</div>
),
Expand Down
6 changes: 3 additions & 3 deletions ...recommendation-tag/recommendation-tag.tsx → src/components/featured-tag/featured-tag.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<span
className={classNames(
"absolute right-6 top-0 z-10 -translate-y-1/2 rounded border border-primary-500 bg-primary-100 px-1 text-xs uppercase tracking-wide text-primary-500",
"absolute right-4 top-0 z-10 -translate-y-1/2 rounded border border-primary-600 bg-primary-50 px-1 text-xs font-medium uppercase tracking-wide text-primary-600",
className
)}
>
Expand Down
73 changes: 34 additions & 39 deletions src/components/form-field/radio-box/radio-box-option.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 {
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 }) => (
<h2 className="headline-500 text-neutral-900 group-[.is-checked]:text-neutral-0 group-[.is-disabled]:text-neutral-500">
{children}
</h2>
);

const Description = ({ children }: { children: React.ReactNode }) => (
<p className="paragraph-200 text-neutral-800 group-[.is-checked]:text-primary-100 group-[.is-disabled]:text-neutral-500">
{children}
</p>
);

export const RadioBoxOption = ({ children, value, disabled, className }: RadioBoxOptionProps) => {
return (
<RadioGroup.Option
value={value}
className="w-full cursor-pointer focus:outline-none"
disabled={disabled}
>
{({ checked, disabled: optionDisabled }) => (
<RadioGroup.Option value={value} disabled={disabled} as={Fragment}>
{({ checked, disabled: optionDisabled, active }) => (
<div
className={classNames(
radioBoxContainerStyles.base,
checked && radioBoxContainerStyles.checked,
optionDisabled && radioBoxContainerStyles.disabled
checked && classNames("is-checked", radioBoxContainerStyles.checked),
optionDisabled &&
classNames("is-disabled", radioBoxContainerStyles.disabled),
active && radioBoxContainerStyles.active
)}
>
{recommendationText && (
<RecommendationTag>{recommendationText}</RecommendationTag>
)}

<div
className={classNames(
radioBoxCircleStyles.base,
!checked && radioBoxCircleStyles.unchecked,
checked && radioBoxCircleStyles.checked,
optionDisabled && radioBoxCircleStyles.disabled
)}
>
{checked && (
<div
className={classNames(
"absolute inset-0 m-auto block h-2 w-2 rounded-full bg-primary-500",
"absolute inset-0 m-auto block h-2 w-2 rounded-full bg-primary-600",
optionDisabled && "bg-neutral-500"
)}
/>
)}
</div>

<div
className={classNames(
"flex flex-col gap-2",
checked && "text-neutral-0",
optionDisabled && "text-neutral-600",
className
)}
>
{children}
</div>
<div className={classNames("flex flex-col gap-2", className)}>{children}</div>
</div>
)}
</RadioGroup.Option>
);
};

RadioBoxOption.Title = Title;
RadioBoxOption.Description = Description;
44 changes: 22 additions & 22 deletions src/components/form-field/radio-box/radio-box.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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<typeof RadioBox> = {
title: "Input/RadioBox",
Expand All @@ -18,34 +19,33 @@ const RadioBoxWithHooks = () => {
return (
<FormField>
<FormField.RadioBox id="value" value={value} onChange={setValue}>
<FormField.RadioBox.Option value="value_1" recommendationText="Recommended">
<div className="flex flex-col gap-2">
<h2 className="headline-500">Option 1</h2>
<p className="paragraph-200">
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, …
</p>
</div>
<FormField.RadioBox.Option value="value_1">
<FeaturedTag>Recommended</FeaturedTag>

<FormField.RadioBox.Option.Title>Option 1</FormField.RadioBox.Option.Title>

<FormField.RadioBox.Option.Description>
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, …
</FormField.RadioBox.Option.Description>
</FormField.RadioBox.Option>

<FormField.RadioBox.Option value="value_2">
<div className="flex flex-col gap-2">
<h2 className="headline-500">Option 2</h2>
<p className="paragraph-200">
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, …
</p>
</div>
<FormField.RadioBox.Option.Title>Option 2</FormField.RadioBox.Option.Title>

<FormField.RadioBox.Option.Description>
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, …
</FormField.RadioBox.Option.Description>
</FormField.RadioBox.Option>

<FormField.RadioBox.Option value="value_3" disabled>
<div className="flex flex-col gap-2">
<h2 className="headline-500">Option 3</h2>
<p className="paragraph-200">
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, …
</p>
</div>
<FormField.RadioBox.Option.Title>Option 3</FormField.RadioBox.Option.Title>

<FormField.RadioBox.Option.Description>
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, …
</FormField.RadioBox.Option.Description>
</FormField.RadioBox.Option>
</FormField.RadioBox>
</FormField>
Expand Down
Loading
Loading