Skip to content
New issue

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

#

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

Already on GitHub? # to your account

docs: remove styled-components references #4550

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
+572 −700
Open

docs: remove styled-components references #4550

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
2 changes: 0 additions & 2 deletions docs/css-prop.d.ts
View file
Open in desktop

This file was deleted.

4 changes: 0 additions & 4 deletions docs/gatsby-config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,9 +75,6 @@ const config: GatsbyConfig = {
resolve: "gatsby-remark-images",
options: {
linkImagesToOriginal: false,
// The base for generating different image widths
// Content max width is 80rem (about 809px with no zoom)
// Minus paddings on each side
maxWidth: 745,
showCaptions: ["title"],
},
Expand Down Expand Up @@ -133,7 +130,6 @@ const config: GatsbyConfig = {
query: "allMdx",
},
},
"gatsby-plugin-styled-components",
"gatsby-plugin-postcss",
"gatsby-plugin-loadable-components-ssr",
"gatsby-plugin-meta-redirect",
Expand Down
5 changes: 0 additions & 5 deletions docs/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,6 @@
"@kiwicom/orbit-components": "*",
"@kiwicom/orbit-design-tokens": "*",
"@kiwicom/orbit-tailwind-preset": "*",
"@kiwicom/orbit-themer": "*",
"@loadable/component": "^5.16.4",
"@mapbox/rehype-prism": "^0.8.0",
"@mdx-js/mdx": "^1.6.22",
Expand All @@ -50,11 +49,9 @@
"@types/react-helmet": "^6.1.1",
"@types/react-scrollspy": "^3.3.9",
"@types/resize-observer-browser": "^0.1.7",
"@types/styled-components": "^5.1.15",
"@types/uuid": "^8.3.1",
"axios": "^1.7.4",
"babel-plugin-inline-react-svg": "^1.1.2",
"babel-plugin-styled-components": "^2.0.7",
"babel-preset-gatsby": "^2.17.0",
"browser-sync": "^3.0.3",
"check-links": "^2.1.2",
Expand All @@ -78,7 +75,6 @@
"gatsby-plugin-react-helmet": "^5.9.0",
"gatsby-plugin-root-import": "^2.0.8",
"gatsby-plugin-sharp": "^4.11.1",
"gatsby-plugin-styled-components": "^6.14.0",
"gatsby-plugin-ts-config": "^2.1.3",
"gatsby-redirect-from": "^0.5.0",
"gatsby-remark-copy-linked-files": "^5.11.0",
Expand Down Expand Up @@ -110,7 +106,6 @@
"remark-preset-lint-recommended": "^5.0.0",
"remark-preset-prettier": "^0.4.0",
"remark-validate-links": "^10.0.2",
"styled-components": "^5.3.1",
"tinykeys": "^1.2.0",
"to-vfile": "8.0.0",
"unified": "^11.0.5",
Expand Down
39 changes: 16 additions & 23 deletions docs/src/__examples__/Theme/default.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,33 +1,26 @@
import React from "react";
import { Button, Stack } from "@kiwicom/orbit-components";
import getTokens from "@kiwicom/orbit-components/lib/getTokens";
import OrbitProvider from "@kiwicom/orbit-components/lib/OrbitProvider";

export default {
Example: () => {
const customTokens = getTokens({
palette: {
product: {
light: "#fdf0ff",
lightHover: "#fbdfff",
lightActive: "#f9ceff",
normal: "#5b0068",
normalHover: "#4c0057",
normalActive: "#3d0046",
dark: "#110013",
darker: "#0d0010",
darkHover: "#0f0011",
darkActive: "#0d000f",
},
},
});

return (
<Stack>
<Button type="primary">Primary Button</Button>
<OrbitProvider useId={React.useId} theme={{ orbit: customTokens }}>
<Button type="primary">Primary Button (themed)</Button>
</OrbitProvider>
{/* Default Orbit styling using Tailwind classes */}
<div className="bg-white-normal rounded-large p-4">
<Button type="primary">Default Theme Button</Button>
</div>

{/* Custom themed section using Tailwind classes */}
<div className="bg-product-light rounded-large p-4">
<p className="text-product-dark mb-2">Using Orbit Tailwind preset colors</p>
<Button type="primary">Themed Button</Button>
</div>

{/* Responsive design example */}
<div className="bg-white-normal sm:bg-product-light md:bg-blue-light rounded-large p-4">
<p className="text-product-dark mb-2">Responsive theming with Tailwind</p>
<Button type="primary">Responsive Theme</Button>
</div>
</Stack>
);
},
Expand Down
93 changes: 42 additions & 51 deletions docs/src/components/DocLayout/TopBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,44 +1,35 @@
import React from "react";
import { Box, Heading, Stack, Text, ButtonLink, Hide } from "@kiwicom/orbit-components";
import styled, { css } from "styled-components";

import Tabs, { getTabShadowReachLeft } from "../Tabs";
import Tabs from "../Tabs";
import { HeaderButtonLink } from "../HeaderLink";
import { AddBookmark } from "../Bookmarks";
import StyledProse from "./primitives/StyledProse";
import Prose from "./primitives/Prose";
import Description from "./primitives/Description";
import Wrapper from "./primitives/Wrapper";
import TopWrapper from "./primitives/TopWrapper";
import Breadcrumbs from "../Breadcrumbs";
import StorybookLogo from "../../images/storybook-logo.svg";

const StyledDescription = styled.span`
display: flex;
line-height: 22px;
`;

const StyledWrapper = styled.div`
${({ theme }) => css`
position: relative;
background: ${`linear-gradient(
85.39deg,
${theme.orbit.paletteWhiteHover} 3.73%,
${theme.orbit.paletteCloudLight} 53.77%
)`};
width: 100%;
`};
`;

const StyledTopWrapper = styled.div<{ $hasTabs: boolean }>`
${({ theme, $hasTabs }) => css`
display: flex;
width: 100%;
justify-content: space-between;
align-items: end;
${$hasTabs &&
// maintain alignment of tabs with the content
css`
padding-left: calc(${theme.orbit.space800} - ${getTabShadowReachLeft});
`};
`}
`;
interface Props {
custom?: boolean;
title?: string;
noElevation?: boolean;
children?: React.ReactNode;
tabs?: Array<{
slug: string;
title: string;
tabCollection: string | null;
}>;
location: { pathname: string };
tocHasItems?: boolean;
hasHeaderLink?: boolean;
headerLink?: string;
breadcrumbs?: Array<{ name: string; url: string }>;
description?: string;
hasStorybook?: boolean;
storybookLink?: string;
}

const TopBar = ({
custom,
Expand All @@ -54,13 +45,12 @@ const TopBar = ({
description,
hasStorybook,
storybookLink,
}) => {
}: Props) => {
const hasTabs = tabs && tabs.length > 0;

const hasLowerLayer = hasTabs || hasHeaderLink || hasStorybook;

return custom ? (
<StyledProse
<Prose
padding={
noElevation
? { top: "none", bottom: "800", left: "800", right: "800" }
Expand All @@ -69,9 +59,9 @@ const TopBar = ({
elevation={noElevation ? undefined : "level3"}
>
{children}
</StyledProse>
</Prose>
) : (
<StyledWrapper>
<Wrapper>
<Box
padding={{
top: "1000",
Expand All @@ -80,17 +70,18 @@ const TopBar = ({
bottom: hasLowerLayer ? "none" : "1000",
}}
>
{breadcrumbs && <Breadcrumbs breadcrumbs={breadcrumbs} />}
{breadcrumbs && breadcrumbs.length > 0 && (
<Breadcrumbs
breadcrumbs={breadcrumbs.map(({ name, url }) => ({
name,
url,
}))}
/>
)}
<Box padding={{ bottom: hasLowerLayer ? "medium" : "none" }}>
<Stack inline align="center" spaceAfter="small">
<AddBookmark title={title} description={description} />
<div
css={css`
/* align with the bookmark icon */
position: relative;
top: 1px;
`}
>
<div className="relative top-px">
<Heading as="h1" type="title0">
{title}
</Heading>
Expand All @@ -99,7 +90,7 @@ const TopBar = ({
{description && (
<Box padding={{ left: "1000" }}>
<Text>
<StyledDescription>{description}</StyledDescription>
<Description>{description}</Description>
</Text>
</Box>
)}
Expand All @@ -111,7 +102,7 @@ const TopBar = ({
justify={hasTabs ? "between" : "end"}
tablet={{ maxWidth: tocHasItems ? "80%" : "100%" }}
>
<StyledTopWrapper $hasTabs={Boolean(tabs)}>
<TopWrapper hasTabs={Boolean(tabs)}>
{hasTabs && <Tabs activeTab={location.pathname} tabs={tabs} />}
<Hide on={["smallMobile", "mediumMobile"]}>
<Stack flex spacing="100">
Expand All @@ -123,17 +114,17 @@ const TopBar = ({
iconLeft={<StorybookLogo />}
external
href={`https://kiwicom.github.io/orbit/?path=/story/${
storybookLink ?? title.toLowerCase()
storybookLink ?? title?.toLowerCase() ?? ""
}`}
/>
)}
</Stack>
</Hide>
</StyledTopWrapper>
</TopWrapper>
</Box>
)}
</Box>
</StyledWrapper>
</Wrapper>
);
};

Expand Down
Loading
Loading