Skip to content

Commit

Permalink
Merge pull request #101 from abusix/pla-991-fix-radio-box-styling-issues
Browse files Browse the repository at this point in the history 
Pla 991 fix radio box styling issues
  • Loading branch information
@Coderwelsch
Coderwelsch authored Jan 30, 2024
2 parents 3dc07eb + 426d926 commit dcaadf5
Show file tree
Hide file tree
Showing 4 changed files with 69 additions and 73 deletions.
14 changes: 7 additions & 7 deletions ...dation-tag/recommendation-tag.stories.tsx → ...nts/featured-tag/featured-tag.stories.tsx
View file
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
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
78 changes: 37 additions & 41 deletions src/components/form-field/radio-box/radio-box-option.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,79 @@
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",
"bg-neutral-100 group-hover:border-neutral-300 group-hover:bg-neutral-100 hover:border-neutral-300 hover:bg-neutral-100 cursor-not-allowed",
active: "ring-2 ring-primary-200",
};

export 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",
disabled: "bg-neutral-100 group-hover:border-neutral-400 group-hover:bg-neutral-100",
const radioBoxCircleStyles = {
base: "relative inline-block h-4 w-4 shrink-0 rounded-full bg-neutral-0 border border-neutral-300",
unchecked: "group-hover:border-primary-600 group-hover:bg-neutral-0",
checked: "border-transparent",
disabled:
"bg-neutral-200 border-neutral-200 group-hover:border-neutral-200 group-hover:bg-neutral-200",
};

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-neutral-0 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
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

0 comments on commit dcaadf5

Please sign in to comment.