Skip to content

Commit

Permalink
feat(TileGroup): migrate to Tailwind
Browse files Browse the repository at this point in the history
  • Loading branch information
oreqizer committed Oct 26, 2023
1 parent d16c08c commit 368bc76
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 45 deletions.
58 changes: 13 additions & 45 deletions packages/orbit-components/src/TileGroup/index.tsx
Original file line number Diff line number Diff line change
@@ -1,57 +1,25 @@
"use client";

import * as React from "react";
import styled, { css } from "styled-components";
import cx from "clsx";

import defaultTheme from "../defaultTheme";
import { StyledSlide } from "../utils/Slide";
import type { Props } from "./types";

const StyledTileGroup = styled.div`
${({ theme }) => css`
width: 100%;
padding: 0;
margin: 0;
box-shadow: ${theme.orbit.boxShadowAction};
border-radius: ${theme.orbit.borderRadiusNormal};
${StyledSlide} {
background: ${theme.orbit.paletteWhite};
}
.orbit-tile-wrapper {
border-radius: 0;
:first-child {
border-top-left-radius: ${theme.orbit.borderRadiusNormal};
border-top-right-radius: ${theme.orbit.borderRadiusNormal};
}
:last-child {
border-bottom-left-radius: ${theme.orbit.borderRadiusNormal};
border-bottom-right-radius: ${theme.orbit.borderRadiusNormal};
}
:not(:last-child) {
border-bottom: 1px solid ${theme.orbit.paletteCloudNormal};
}
box-shadow: none;
transition: background ${theme.orbit.durationFast} ease-in-out,
box-shadow ${theme.orbit.durationFast} ease-in-out,
border-color ${theme.orbit.durationFast} ease-in-out;
:hover,
:focus {
background: ${theme.orbit.paletteCloudNormal};
}
}
`}
`;

StyledTileGroup.defaultProps = {
theme: defaultTheme,
};

const TileGroup = ({ children, dataTest, id, as }: Props) => {
const Component = (as ?? "div") as React.ElementType;

return (
// @ts-expect-error FIXME: ts-migrate
<StyledTileGroup data-test={dataTest} as={as} id={id}>
<Component
className={cx(
"shadow-action rounded-normal [&_.orbit-slide]:bg-white-normal m-0 w-full p-0",
"[&_.orbit-tile-wrapper]:first:rounded-t-normal [&_.orbit-tile-wrapper]:last:rounded-b-normal [&_.orbit-tile-wrapper]:not-last:border-b [&_.orbit-tile-wrapper]:not-last:border-cloud-normal",
"[&_.orbit-tile-wrapper]:duration-fast [&_.orbit-tile-wrapper]:hover:bg-white-normal [&_.orbit-tile-wrapper]:focus:bg-white-normal [&_.orbit-tile-wrapper]:rounded-none [&_.orbit-tile-wrapper]:shadow-none [&_.orbit-tile-wrapper]:transition-colors [&_.orbit-tile-wrapper]:ease-in-out",
)}
data-test={dataTest}
id={id}
>
{children}
</StyledTileGroup>
</Component>
);
};

Expand Down
1 change: 1 addition & 0 deletions packages/orbit-components/src/utils/Slide/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,7 @@ class Slide extends React.Component<Props, State> {
const { transitionFinished, maxHeight, visible } = this.state;
return (
<StyledSlide
className="orbit-slide"
maxHeight={maxHeight}
expanded={expanded}
transitionFinished={transitionFinished}
Expand Down

0 comments on commit 368bc76

Please sign in to comment.