Skip to content

Commit

Permalink
Merge pull request #337 from ably/compare-page-iterations
Browse files Browse the repository at this point in the history
[WEB-3702] Reinstate TW layer directives, remove JSX CSS imports
  • Loading branch information
jamiehenson authored Apr 29, 2024
2 parents d821738 + fd7fdca commit 18c0ae1
Show file tree
Hide file tree
Showing 33 changed files with 930 additions and 908 deletions.
8 changes: 8 additions & 0 deletions .storybook/styles.css
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,14 @@
@import "../src/core/fonts/jetBrains-mono.css";
@import "../src/core/fonts/manrope.css";
@import "../src/core/styles.css";
@import "../src/core/ContactFooter/component.css";
@import "../src/core/CookieMessage/component.css";
@import "../src/core/Flash/component.css";
@import "../src/core/Footer/component.css";
@import "../src/core/Meganav/component.css";
@import "../src/core/Notice/component.css";
@import "../src/core/Slider/component.css";
@import "../src/core/utils/syntax-highlighter.css";
@import "../src/reset/styles.css";

@import "./application.css";
4 changes: 1 addition & 3 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@ably/ui",
"version": "14.0.0-dev.5379086",
"version": "14.0.0-dev.2944826",
"description": "Home of the Ably design system library ([design.ably.com](https://design.ably.com)). It provides a showcase, development/test environment and a publishing pipeline for different distributables.",
"repository": {
"type": "git",
Expand Down Expand Up @@ -37,8 +37,6 @@
"eslint-plugin-storybook": "^0.6.15",
"msw": "1.3.2",
"msw-storybook-addon": "^1.10.0",
"postcss": "^8.4.35",
"postcss-import": "^13.0.0",
"prettier": "^2.3.0",
"storybook": "^7.6.4",
"svg-sprite": "^2.0.4",
Expand Down
1 change: 1 addition & 0 deletions postcss.config.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
export default {
plugins: {
"postcss-import": {},
"tailwindcss/nesting": {},
tailwindcss: {},
autoprefixer: {},
},
Expand Down
2 changes: 1 addition & 1 deletion src/core/Accordion.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -80,7 +80,7 @@ const AccordionRow = ({
onClick={handleSetIndex}
className={`flex w-full px-0 focus:outline-none py-20`}
>
<span className="ui-text-p1 !font-bold text-left mr-8">{name}</span>
<span className="ui-text-p1 font-bold text-left mr-8">{name}</span>
<span className="ml-auto">{active ? iconActive : iconInactive}</span>
</button>

Expand Down
1 change: 0 additions & 1 deletion src/core/Code.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
import React from "react";

import "./utils/syntax-highlighter.css";
import {
highlightSnippet,
registerDefaultLanguages,
Expand Down
1 change: 0 additions & 1 deletion src/core/ContactFooter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import React, { useEffect } from "react";
import Icon from "./Icon";
import _absUrl from "./url-base.js";
import toggleChatWidget from "./hubspot-chat-toggle";
import "./ContactFooter/component.css";

type ContactFooterProps = {
urlBase: string;
Expand Down
16 changes: 9 additions & 7 deletions src/core/ContactFooter/component.css
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
.ui-contact-footer {
background-size: 100% 100%;
background-position: right center;
@apply w-full bg-gradient-active-orange;
}
@layer components {
.ui-contact-footer {
background-size: 100% 100%;
background-position: right center;
@apply w-full bg-gradient-active-orange;
}

.ui-contact-footer-box {
@apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
.ui-contact-footer-box {
@apply p-24 sm:p-32 xl:p-40 bg-white flex flex-col justify-between rounded-sm;
}
}
1 change: 0 additions & 1 deletion src/core/CookieMessage.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,6 @@
import React, { useRef, useEffect, useState } from "react";
import Cookie from "js-cookie";

import "./CookieMessage/component.css";
import _absUrl from "./url-base";

const COOKIE_EXPIRY = 365;
Expand Down
22 changes: 12 additions & 10 deletions src/core/CookieMessage/component.css
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
.ui-cookie-message {
@apply rounded-lg bg-white font-sans;
@apply justify-between items-center;
@apply opacity-100 z-50 bottom-0 fixed sm:flex;
@apply p-16 mb-16 ml-16;
max-width: 70vw;
box-shadow: 0px 24px 32px 0px #0000000d;
border: 1px solid var(--color-mid-grey);
border-left: 0.5rem solid var(--color-electric-cyan);
transition: bottom 250ms ease-out, opacity 150ms ease-out;
@layer components {
.ui-cookie-message {
@apply rounded-lg bg-white font-sans;
@apply justify-between items-center;
@apply opacity-100 z-50 bottom-0 fixed sm:flex;
@apply p-16 mb-16 ml-16;
max-width: 70vw;
box-shadow: 0px 24px 32px 0px #0000000d;
border: 1px solid var(--color-mid-grey);
border-left: 0.5rem solid var(--color-electric-cyan);
transition: bottom 250ms ease-out, opacity 150ms ease-out;
}
}
23 changes: 16 additions & 7 deletions src/core/Expander.tsx
Original file line number Diff line number Diff line change
@@ -1,31 +1,40 @@
import React, { PropsWithChildren, useEffect, useRef, useState } from "react";

type ExpanderProps = {
height?: number;
heightThreshold?: number;
className?: string;
fadeClassName?: string;
};

const Expander = ({
height = 200,
heightThreshold = 200,
className,
fadeClassName,
children,
}: PropsWithChildren<ExpanderProps>) => {
const innerRef = useRef<HTMLDivElement>(null);
const [contentHeight, setContentHeight] = useState(height);
const [showControls, setShowControls] = useState(false);
const [height, setHeight] = useState<number | "auto">(heightThreshold);
const [expanded, setExpanded] = useState(false);

useEffect(() => {
setContentHeight(innerRef.current?.clientHeight ?? height);
}, [height, expanded]);
const contentHeight = innerRef.current?.clientHeight ?? heightThreshold;

const showControls = contentHeight > height;
if (contentHeight < heightThreshold) {
setHeight("auto");
} else if (expanded) {
setHeight(contentHeight);
} else {
setHeight(heightThreshold);
}

setShowControls(contentHeight >= heightThreshold);
}, [heightThreshold, expanded]);

return (
<>
<div
style={{ height: expanded ? contentHeight : height }}
style={{ height }}
className={`overflow-hidden transition-all relative ${className ?? ""}`}
>
{showControls && !expanded && (
Expand Down
1 change: 0 additions & 1 deletion src/core/Flash.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import { nanoid } from "nanoid/non-secure";
import { getRemoteDataStore } from "./remote-data-store.js";
import ConnectStateWrapper from "./ConnectStateWrapper";
import Icon from "./Icon";
import "./Flash/component.css";

type FlashProps = {
id: string;
Expand Down
40 changes: 21 additions & 19 deletions src/core/Flash/component.css
Original file line number Diff line number Diff line change
@@ -1,23 +1,25 @@
.ui-flash {
@apply w-full fixed;
top: 5.5rem;
z-index: calc(var(--stacking-context-page-meganav) - 10);
transition: margin-top 200ms;
}
@layer components {
.ui-flash {
@apply w-full fixed;
top: 5.5rem;
z-index: calc(var(--stacking-context-page-meganav) - 10);
transition: margin-top 200ms;
}

.ui-flash-message {
@apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
transition: opacity 200ms, transform 200ms, height 200ms 200ms,
margin-top 200ms 200ms;
transform: translateY(-200%) rotateX(-90deg);
}
.ui-flash-message {
@apply font-sans font-light antialiased max-w-screen-xl mx-auto mt-8 opacity-0 relative;
transition: opacity 200ms, transform 200ms, height 200ms 200ms,
margin-top 200ms 200ms;
transform: translateY(-200%) rotateX(-90deg);
}

/* dynamic content inside flash, can't add classes */
.ui-flash-text a {
@apply underline;
}
/* dynamic content inside flash, can't add classes */
.ui-flash-text a {
@apply underline;
}

.ui-flash-message-enter {
@apply opacity-100;
transform: translateY(0) rotateX(0);
.ui-flash-message-enter {
@apply opacity-100;
transform: translateY(0) rotateX(0);
}
}
1 change: 0 additions & 1 deletion src/core/Footer.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ import React from "react";

import Icon from "./Icon";
import _absUrl from "./url-base.js";
import "./Footer/component.css";

type FooterProps = {
paths: {
Expand Down
46 changes: 24 additions & 22 deletions src/core/Footer/component.css
Original file line number Diff line number Diff line change
@@ -1,31 +1,33 @@
.ui-footer-col-title {
@apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
}
@layer components {
.ui-footer-col-title {
@apply font-mono text-overline2 p-menu-row-title font-medium uppercase tracking-widen-0.16;
}

.ui-footer-menu-row-link {
@apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
}
.ui-footer-menu-row-link {
@apply text-menu3 text-cool-black font-sans font-medium hover:text-gui-hover block;
}

.ui-footer-link {
@apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
}
.ui-footer-link {
@apply text-gui-default hover:text-gui-hover text-menu3 font-sans font-medium;
}

.ui-footer-compliance-text {
font-size: 12px;
}
.ui-footer-compliance-text {
font-size: 12px;
}

.ui-footer-tick-icon {
min-width: 1.5rem;
}
.ui-footer-tick-icon {
min-width: 1.5rem;
}

@media (max-width: 1040px) {
.ui-footer-bottom-links {
@apply pb-40;
@media (max-width: 1040px) {
.ui-footer-bottom-links {
@apply pb-40;
}
}
}

@media screen {
.ui-footer-glassdoor {
display: none;
@media screen {
.ui-footer-glassdoor {
display: none;
}
}
}
1 change: 0 additions & 1 deletion src/core/Meganav.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ import { connectState } from "./remote-data-store.js";
import { selectSessionData } from "./remote-session-data.js";

import Logo from "./Logo";
import "./Meganav/component.css";
import MeganavData from "./Meganav/component.json";
import MeganavScripts from "./Meganav/component.js";
import MeganavItemsDesktop from "./MeganavItemsDesktop";
Expand Down
Loading

0 comments on commit 18c0ae1

Please sign in to comment.