DerexXD/UT-Registration-Plus
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: fix icons on PopupMain and convert to tailwind (#108)

Browse Source 
* feat: fix icons on PopupMain

* fix: use text-white

* fix: move TestColors

* fix: convert to tailwind

* fix: finish moving TestColors out

* chore: add path alias

* chore: lint PR

* feat: create storybook.ts and move tailwindColorways there

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>
This commit is contained in:
Dhruv
2024-02-26 16:19:21 -06:00
committed by doprz
parent 07ec5abc3e
commit 87799d8f02
4 changed files with 43 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
src/stories/components/List.stories.tsx
View File

@@ -5,8 +5,7 @@ import type { Meta, StoryObj } from '@storybook/react';
import List from '@views/components/common/List/List';
import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
import React from 'react';
import { TestColors } from './PopupCourseBlock.stories';
import { tailwindColorways } from 'src/shared/util/storybook';
const numberOfCourses = 5;
@@ -71,7 +70,7 @@ export const GenerateCourses = count => {
const exampleCourses = GenerateCourses(numberOfCourses);
const generateCourseBlocks = (exampleCourses, colors) =>
exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
export const ExampleCourseBlocks = generateCourseBlocks(exampleCourses, TestColors);
export const ExampleCourseBlocks = generateCourseBlocks(exampleCourses, tailwindColorways);
const meta = {
title: 'Components/Common/List',

10
src/stories/components/PopupCourseBlock.stories.tsx
View File

@@ -5,7 +5,7 @@ import { getCourseColors } from '@shared/util/colors';
import type { Meta, StoryObj } from '@storybook/react';
import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
import React from 'react';
import { theme } from 'unocss/preset-mini';
import { tailwindColorways } from 'src/shared/util/storybook';
/**
* Represents an example course.
@@ -101,16 +101,10 @@ export const Variants: Story = {
),
};
export const TestColors = Object.keys(theme.colors)
// check that the color is a colorway (is an object)
.filter(color => typeof theme.colors[color] === 'object')
.slice(0, 17)
.map(color => getCourseColors(color as keyof typeof theme.colors));
export const AllColors: Story = {
render: props => (
<div className='grid grid-flow-col grid-cols-2 grid-rows-9 max-w-2xl w-90vw gap-x-4 gap-y-2'>
{TestColors.map((color, i) => (
{tailwindColorways.map((color, i) => (
<PopupCourseBlock key={color.primaryColor} course={ExampleCourse} colors={color} />
))}
</div>