fix: use css packages instead of component-classes (#55)

* fix: use css packages instead of component-classes * fix: bump css to 1.0.0-alpha.33 and @warp-ds/uno to 1.0.0-alpha.60 * docs: bump pkg version in eik url * test: set link tags in storybook's preview-head --------- Co-authored-by: BalbinaK <balbuhhha@gmail.com>
warp-ds · Jul 14, 2023 · 64d45d3 · 64d45d3
1 parent 6ee34ac
commit 64d45d3
Show file tree

Hide file tree

Showing 32 changed files with 159 additions and 86 deletions.
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,2 @@
+<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/tokens/finn-no.css" />
+<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/resets.min.css" />
diff --git a/@types/index.d.ts b/@types/index.d.ts
@@ -9,5 +9,4 @@ declare module '*.module.css' {
 }
 
 declare module '@fabric-ds/css';
-declare module '@warp-ds/component-classes';
 declare module '@fabric-ds/css/tailwind-css';
diff --git a/index.html b/index.html
@@ -9,7 +9,8 @@
       href="https://www.finn.no/favicon.ico"
       type="image/x-icon"
     />
-    <link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/tokens/v1/finn-no.css" />
+    <link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/tokens/finn-no.css" />
+    <link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/resets.min.css" />
   </head>
   <body>
     <div class="m-16">

diff --git a/package.json b/package.json
@@ -103,9 +103,9 @@
   },
   "dependencies": {
     "@chbphone55/classnames": "^2.0.0",
-    "@warp-ds/uno": "^1.0.0-alpha.49",
-    "@warp-ds/component-classes": "^1.0.0-alpha.116",
+    "@warp-ds/css": "^1.0.0-alpha.33",
     "@warp-ds/core": "^1.0.0",
+    "@warp-ds/uno": "^1.0.0-alpha.60",
     "react-focus-lock": "^2.5.2",
     "resize-observer-polyfill": "^1.5.1",
     "scroll-doctor": "^1.0.0"

diff --git a/packages/_helpers/affix.tsx b/packages/_helpers/affix.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { suffix, prefix } from '@warp-ds/component-classes';
+import { suffix, prefix } from '@warp-ds/css/component-classes';
 import { classNames } from '@chbphone55/classnames';
 
 interface AffixProps {

diff --git a/packages/_helpers/clickable.tsx b/packages/_helpers/clickable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { classNames } from '@chbphone55/classnames';
-import { clickable as ccClickable } from '@warp-ds/component-classes';
+import { clickable as ccClickable } from '@warp-ds/css/component-classes';
 import { Item as ToggleItem } from '../toggle/src/item';
 import { useId } from '../utils/src/useId';
 

diff --git a/packages/_helpers/dead-toggle.tsx b/packages/_helpers/dead-toggle.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { classNames } from '@chbphone55/classnames';
-import { toggle as ccToggle } from '@warp-ds/component-classes';
+import { toggle as ccToggle } from '@warp-ds/css/component-classes';
 import { Item } from '../toggle/src/item';
 
 export interface DeadToggleProps {

diff --git a/packages/alert/src/component.tsx b/packages/alert/src/component.tsx
@@ -1,6 +1,6 @@
 import { classNames } from '@chbphone55/classnames';
 import React, { PropsWithChildren, ReactElement } from 'react';
-import { alert as ccAlert } from '@warp-ds/component-classes';
+import { alert as ccAlert } from '@warp-ds/css/component-classes';
 import { AlertProps } from '.';
 import { ExpandTransition } from '../../_helpers';
 

diff --git a/packages/attention/src/component.tsx b/packages/attention/src/component.tsx
@@ -6,7 +6,7 @@ import {
   useRecompute as recompute,
   arrowLabels,
 } from '@warp-ds/core/attention';
-import { attention as ccAttention } from '@warp-ds/component-classes';
+import { attention as ccAttention } from '@warp-ds/css/component-classes';
 import { ArrowProps, AttentionProps } from './props';
 
 export function Attention(props: AttentionProps) {

diff --git a/packages/box/src/component.tsx b/packages/box/src/component.tsx
@@ -1,5 +1,5 @@
 import { classNames } from '@chbphone55/classnames';
-import { box as ccBox } from '@warp-ds/component-classes';
+import { box as ccBox } from '@warp-ds/css/component-classes';
 import React from 'react';
 import { BoxProps } from './props';
 

diff --git a/packages/breadcrumbs/src/component.tsx b/packages/breadcrumbs/src/component.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import type { BreadcrumbsProps } from './props';
 import { interleave } from '@warp-ds/core/breadcrumbs';
-import { breadcrumbs as ccBreadcrumbs } from "@warp-ds/component-classes";
+import { breadcrumbs as ccBreadcrumbs } from "@warp-ds/css/component-classes";
 
 export const Breadcrumbs = (props: BreadcrumbsProps) => {
   const { children, className, ...rest } = props;

diff --git a/packages/button/src/component.tsx b/packages/button/src/component.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, Ref } from 'react';
-import { button as ccButton } from '@warp-ds/component-classes';
+import { button as ccButton } from '@warp-ds/css/component-classes';
 import { classNames } from '@chbphone55/classnames';
 import type { ButtonProps } from './props';
 

diff --git a/packages/card/src/component.tsx b/packages/card/src/component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { card as ccCard } from '@warp-ds/component-classes';
+import { card as ccCard } from '@warp-ds/css/component-classes';
 import { classNames } from '@chbphone55/classnames';
 import { CardProps } from './props';
 import { useLogDeprecationWarning } from '../../utils/src';

diff --git a/packages/combobox/src/component.tsx b/packages/combobox/src/component.tsx
@@ -11,7 +11,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { combobox as ccCombobox } from '@warp-ds/component-classes';
+import { combobox as ccCombobox } from '@warp-ds/css/component-classes';
 import { TextField } from '../../textfield/src';
 import { useId } from '../../utils/src';
 import { ComboboxProps, OptionWithIdAndMatch } from './props';

diff --git a/packages/expandable/src/component.tsx b/packages/expandable/src/component.tsx
@@ -2,7 +2,7 @@ import { classNames } from '@chbphone55/classnames';
 import {
   box as ccBox,
   expandable as ccExpandable,
-} from '@warp-ds/component-classes';
+} from '@warp-ds/css/component-classes';
 import React from 'react';
 import { ExpandTransition, UnstyledHeading } from '../../_helpers';
 import { ExpandableProps } from './props';

diff --git a/packages/modal/src/component.tsx b/packages/modal/src/component.tsx
@@ -1,5 +1,5 @@
 import { classNames } from '@chbphone55/classnames';
-import { modal as ccModal } from '@warp-ds/component-classes';
+import { modal as ccModal } from '@warp-ds/css/component-classes';
 import React, { useEffect, useRef } from 'react';
 import { useId } from '../../utils/src';
 import FocusLock from 'react-focus-lock';

diff --git a/packages/pill/src/component.tsx b/packages/pill/src/component.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { classNames } from '@chbphone55/classnames';
 import { PillProps } from '.';
-import { pill as ccPill } from '@warp-ds/component-classes';
+import { pill as ccPill } from '@warp-ds/css/component-classes';
 
 export function Pill(props: PillProps) {
   return (

diff --git a/packages/select/src/component.tsx b/packages/select/src/component.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { select as ccSelect, label as ccLabel, helpText as ccHelpText } from '@warp-ds/component-classes';
+import { select as ccSelect, label as ccLabel, helpText as ccHelpText } from '@warp-ds/css/component-classes';
 import { useId } from '../../utils/src';
 import { classNames } from '@chbphone55/classnames';
 import type { SelectProps } from './props';

diff --git a/packages/slider/src/component.tsx b/packages/slider/src/component.tsx
@@ -1,6 +1,6 @@
 import { classNames } from '@chbphone55/classnames';
 import { createHandlers, useDimensions } from '@warp-ds/core/slider';
-import { slider as ccSlider } from '@warp-ds/component-classes';
+import { slider as ccSlider } from '@warp-ds/css/component-classes';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { SliderProps } from './props';
 

diff --git a/packages/steps/src/component.tsx b/packages/steps/src/component.tsx
@@ -1,7 +1,7 @@
 import React, { createContext } from 'react';
 import { StepsProps } from './props';
 import { classNames } from '@chbphone55/classnames';
-import { steps as ccSteps } from '@warp-ds/component-classes';
+import { steps as ccSteps } from '@warp-ds/css/component-classes';
 
 
 export const StepsContext = createContext<{

diff --git a/packages/steps/src/step.tsx b/packages/steps/src/step.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { classNames } from '@chbphone55/classnames';
-import { step as ccStep } from '@warp-ds/component-classes';
+import { step as ccStep } from '@warp-ds/css/component-classes';
 import { useContext } from 'react';
 import { StepsContext } from './component';
 

diff --git a/packages/switch/src/component.tsx b/packages/switch/src/component.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { SwitchProps } from './props';
 import { classNames } from '@chbphone55/classnames';
-import { switchToggle as ccSwitch } from '@warp-ds/component-classes';
+import { switchToggle as ccSwitch } from '@warp-ds/css/component-classes';
 
 export function Switch({
   id,

diff --git a/packages/tabs/src/component-tab-panel.tsx b/packages/tabs/src/component-tab-panel.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { tab as ccTab } from '@warp-ds/component-classes';
+import { tab as ccTab } from '@warp-ds/css/component-classes';
 import type { TabPanelProps } from './props';
 
 export function TabPanel(props: TabPanelProps) {

diff --git a/packages/tabs/src/component-tab.tsx b/packages/tabs/src/component-tab.tsx
@@ -1,17 +1,18 @@
 import React from 'react';
 import { classNames } from '@chbphone55/classnames';
-import { tab as ccTab } from '@warp-ds/component-classes';
+import { tab as ccTab } from '@warp-ds/css/component-classes';
 import type { TabProps } from './props';
 
 const setup = ({ className, isActive, setActive, ...rest }: any) => ({
   tab: classNames(ccTab.tab, {
     [className]: !!className,
     [ccTab.tabActive]: isActive,
   }),
-  icon: classNames(ccTab.icon, ccTab.iconUnderlined, isActive ? ccTab.iconUnderlinedActive : ccTab.iconUnderlinedInactive),
+  icon: classNames(ccTab.icon, {
+    [ccTab.iconUnderlinedActive] : isActive,
+  }),
   content: classNames(ccTab.contentUnderlined, {
     [ccTab.contentUnderlinedActive]: isActive,
-    [ccTab.contentUnderlinedInactive]: !isActive,
   }),
   attrs: { ...rest },
 });

diff --git a/packages/tabs/src/component-tabs.tsx b/packages/tabs/src/component-tabs.tsx
@@ -6,7 +6,7 @@ import React, {
   Children,
 } from 'react';
 import { classNames } from '@chbphone55/classnames';
-import { gridLayout, tabs as ccTabs } from '@warp-ds/component-classes';
+import { gridLayout, tabs as ccTabs } from '@warp-ds/css/component-classes';
 import { debounce } from './utils';
 import type { TabsProps } from './props';
 

diff --git a/packages/textarea/src/component.tsx b/packages/textarea/src/component.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef, useRef } from 'react';
 import { classNames } from '@chbphone55/classnames';
-import { input as ccInput, label as ccLabel, helpText as ccHelpText } from '@warp-ds/component-classes';
+import { input as ccInput, label as ccLabel, helpText as ccHelpText } from '@warp-ds/css/component-classes';
 import { useId } from '../../utils/src';
 import { TextAreaProps } from './props';
 import useTextAreaHeight from './useTextAreaHeight';

diff --git a/packages/textfield/src/component.tsx b/packages/textfield/src/component.tsx
@@ -1,6 +1,6 @@
 import React, { forwardRef } from 'react';
 import { classNames } from '@chbphone55/classnames';
-import { input as ccInput, label as ccLabel, helpText as ccHelpText } from '@warp-ds/component-classes';
+import { input as ccInput, label as ccLabel, helpText as ccHelpText } from '@warp-ds/css/component-classes';
 import { useId } from '../../utils/src';
 import { TextFieldProps } from './props';
 

diff --git a/packages/toggle/src/component.tsx b/packages/toggle/src/component.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { label as ccLabel, helpText as ccHelpText, toggle as ccToggle } from '@warp-ds/component-classes';
+import { label as ccLabel, helpText as ccHelpText, toggle as ccToggle } from '@warp-ds/css/component-classes';
 import { useId } from '../../utils/src';
 import { ToggleEntry, ToggleProps } from './props';
 import { classNames } from '@chbphone55/classnames';
@@ -50,10 +50,10 @@ export function Toggle(props: ToggleProps) {
     props.selected !== undefined || props.checked !== undefined;  
 
   const labelClasses = classNames({
+    [ccToggle.indeterminate]: props.indeterminate,
     [ccToggle.label]: !isRadioButton,
     [ccToggle.focusable]: !isRadioButton,
     [ccToggle.noContent]: !props.indeterminate,
-    [ccToggle.indeterminate]: props.indeterminate,
     [`${ccToggle.radio} ${ccToggle.labelRadioBorder} ${ccToggle.radioChecked}`]: isRadio,
     [ccToggle.radioInvalid]: isRadio && isInvalid,
     [`${ccToggle.checkbox} ${ccToggle.labelCheckboxBorder} ${ccToggle.checkboxChecked}`]: isCheckbox,

diff --git a/packages/toggle/src/item.tsx b/packages/toggle/src/item.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { toggle as ccToggle } from '@warp-ds/component-classes';
+import { toggle as ccToggle } from '@warp-ds/css/component-classes';
 import { useId } from '../../utils/src';
 import { ToggleEntry } from './props';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/tokens/finn-no.css" />
		<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/css/1.0.0-alpha.33/resets.min.css" />