Skip to content

Commit 7c1a4a6

Browse files
OpenStaxClaudeOpenStaxClaude
committed
Merge branch 'migrate-buybook-plain-css' into phase-7.3b-assignment-book-info
2 parents b3727de + 2df7d1d commit 7c1a4a6

6 files changed

Lines changed: 434 additions & 212 deletions

File tree

‎src/app/content/components/Assigned.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
/* Assigned component styling */
2+
3+
/* StyledButton - full width button with max-width constraint */
4+
.assigned-styled-button {
5+
width: 100%;
6+
max-width: var(--content-text-width);
7+
margin: 0 auto;
8+
}
9+
10+
/* ToastOverride - override layout for Toast component */
11+
.assigned-toast-override {
12+
top: var(--topbar-desktop-height);
13+
left: 0;
14+
max-width: 100%;
15+
}
16+
17+
/* Mobile breakpoint for ToastOverride
18+
* IMPORTANT: This breakpoint is derived from theme.breakpoints.mobile()
19+
* which corresponds to max-width: 75em (1200px)
20+
* If theme breakpoints change, this must be updated accordingly.
21+
* The conversion formula is: rems * 10 / 16 = ems (because 1rem = 10px, 1em = 16px in media queries)
22+
*/
23+
@media screen and (max-width: 75em) {
24+
.assigned-toast-override {
25+
top: var(--assigned-mobile-top);
26+
}
27+
}
28+
29+
/* PlatformWrapper - hide elements with matching data-platform-hidden attribute */
30+
.platform-wrapper[data-platform="assignable"] [data-platform-hidden="assignable"] {
31+
display: none;
32+
}

‎src/app/content/components/Assigned.tsx‎

Lines changed: 51 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import { FormattedMessage } from 'react-intl';
33
import { useSelector } from 'react-redux';
4-
import styled, { css } from 'styled-components/macro';
4+
import classNames from 'classnames';
55
import AccessibilityButtonsWrapper from '../../components/AccessibilityButtonsWrapper';
66
import Button from '../../components/Button';
77
import { useServices } from '../../context/Services';
@@ -21,37 +21,63 @@ import { contentTextWidth } from './constants';
2121
import Page from './Page';
2222
import { PrevNextBar } from './PrevNextBar';
2323
import { getMobileSearchFailureTop } from './Page/PageToasts';
24-
import theme from '../../theme';
2524
import PageToasts from './Page/PageToasts';
2625
import {
2726
topbarDesktopHeight,
2827
bookBannerMobileMiniHeight,
2928
} from './constants';
29+
import './Assigned.css';
3030

31-
const StyledButton = styled(Button)`
32-
width: 100%;
33-
max-width: ${contentTextWidth}rem;
34-
margin: 0 auto;
35-
`;
36-
37-
// Override layout for Toast
38-
const assignedMobileTop = (props: { mobileToolbarOpen: boolean }) =>
31+
// Helper to compute mobile toast top position
32+
const getAssignedMobileTop = (props: { mobileToolbarOpen: boolean }) =>
3933
getMobileSearchFailureTop(props) - bookBannerMobileMiniHeight;
40-
const ToastOverride = styled(PageToasts)`
41-
top: ${topbarDesktopHeight}rem;
42-
left: 0;
43-
max-width: 100%;
44-
${theme.breakpoints.mobile(css`
45-
top: ${assignedMobileTop}rem;
46-
`)}
47-
`;
48-
49-
// tslint:disable-next-line: variable-name
50-
const PlatformWrapper = styled.div<{ platform: string }>`
51-
[data-platform-hidden="${props => props.platform}"] {
52-
display: none;
53-
}
54-
`;
34+
35+
// StyledButton component - renders Button with assigned-styled-button class
36+
function StyledButton({ className, style, ...props }: React.ComponentProps<typeof Button>) {
37+
return (
38+
<Button
39+
{...props}
40+
className={classNames('assigned-styled-button', className)}
41+
style={{
42+
'--content-text-width': `${contentTextWidth}rem`,
43+
...style,
44+
} as React.CSSProperties}
45+
/>
46+
);
47+
}
48+
49+
// ToastOverride component - renders PageToasts with overridden positioning
50+
function ToastOverride({ className, style, mobileToolbarOpen, ...props }: React.ComponentProps<typeof PageToasts>) {
51+
return (
52+
<PageToasts
53+
{...props}
54+
mobileToolbarOpen={mobileToolbarOpen}
55+
className={classNames('assigned-toast-override', className)}
56+
style={{
57+
'--topbar-desktop-height': `${topbarDesktopHeight}rem`,
58+
'--assigned-mobile-top': `${getAssignedMobileTop({ mobileToolbarOpen })}rem`,
59+
...style,
60+
} as React.CSSProperties}
61+
/>
62+
);
63+
}
64+
65+
// PlatformWrapper component - renders div with platform-specific attribute
66+
interface PlatformWrapperProps extends React.HTMLAttributes<HTMLDivElement> {
67+
platform: string;
68+
}
69+
70+
function PlatformWrapper({ platform, className, children, ...props }: PlatformWrapperProps) {
71+
return (
72+
<div
73+
{...props}
74+
data-platform={platform}
75+
className={classNames('platform-wrapper', className)}
76+
>
77+
{children}
78+
</div>
79+
);
80+
}
5581

5682
const useLoadSection = (currentSection: ArchiveTreeSection | undefined) => {
5783
const services = useServices();

‎src/app/content/components/Attribution.css‎

Lines changed: 145 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
/**
2+
* Attribution Component Styles
3+
*
4+
* Styles for the attribution details section that appears at the bottom of each page.
5+
* Uses CSS variables bound from theme.ts and constants.
6+
*/
7+
8+
/* Details container */
9+
.attribution-details {
10+
/* Typography - matches bodyCopyRegularStyle */
11+
color: var(--attribution-text-color, #424242);
12+
font-size: 1.6rem;
13+
line-height: 2.5rem;
14+
15+
/* Box styling */
16+
box-shadow: 0 -1rem 1rem -1rem rgba(0, 0, 0, 0.1);
17+
margin: 3rem 0 0 0;
18+
min-height: 6rem;
19+
20+
/* Padding - matches wrapperPadding from Layout */
21+
padding-left: 4rem;
22+
padding-right: 4rem;
23+
padding-top: 1.8rem;
24+
}
25+
26+
/* Mobile breakpoint - 75em = 1200px (theme.breakpoints.mobile) */
27+
@media screen and (max-width: 75em) {
28+
.attribution-details {
29+
min-height: 4rem;
30+
padding-left: 1.5rem;
31+
padding-right: 1.5rem;
32+
padding-top: 0.8rem;
33+
}
34+
}
35+
36+
/* Print media - hide attribution */
37+
@media print {
38+
.attribution-details {
39+
display: none;
40+
}
41+
}
42+
43+
/* Summary styles */
44+
.attribution-summary {
45+
/* Content text width constraint - from contentTextStyle */
46+
max-width: var(--content-text-width, 80rem);
47+
margin: 0 auto;
48+
49+
font-weight: 500;
50+
list-style: none;
51+
52+
/* Spacing */
53+
margin-bottom: 1.8rem;
54+
55+
/* Text styling - bodyCopyRegularStyle + decoratedLinkStyle */
56+
color: var(--attribution-text-color, #424242);
57+
font-size: 1.6rem;
58+
line-height: 2.5rem;
59+
}
60+
61+
/* Mobile summary spacing */
62+
@media screen and (max-width: 75em) {
63+
.attribution-summary {
64+
margin-bottom: 0.8rem;
65+
}
66+
}
67+
68+
/* Remove default summary styling */
69+
.attribution-summary::before {
70+
display: none;
71+
}
72+
73+
.attribution-summary::-moz-list-bullet {
74+
list-style-type: none;
75+
}
76+
77+
.attribution-summary::-webkit-details-marker {
78+
display: none;
79+
}
80+
81+
/* Summary is clickable */
82+
.attribution-summary {
83+
cursor: pointer;
84+
color: var(--link-color, #027EB5);
85+
text-decoration: none;
86+
}
87+
88+
.attribution-summary:hover,
89+
.attribution-summary:focus {
90+
text-decoration: underline;
91+
color: var(--link-hover, #0064A0);
92+
}
93+
94+
/* Icon styles */
95+
.attribution-summary-icon {
96+
margin-left: -0.3rem;
97+
height: 1.7rem;
98+
width: 1.7rem;
99+
}
100+
101+
/* Icon visibility based on open state */
102+
.attribution-details[open] .attribution-expand-icon {
103+
display: none;
104+
}
105+
106+
.attribution-details:not([open]) .attribution-collapse-icon {
107+
display: none;
108+
}
109+
110+
/* Content container */
111+
.attribution-content {
112+
/* Content text width constraint */
113+
max-width: var(--content-text-width, 80rem);
114+
margin: 0 auto;
115+
}
116+
117+
/* Full page width in print */
118+
@media screen {
119+
.attribution-content {
120+
max-width: var(--content-text-width, 80rem);
121+
margin: 0 auto;
122+
}
123+
}
124+
125+
/* Content blockquote styling */
126+
.attribution-content blockquote {
127+
margin-left: 0;
128+
}
129+
130+
/* List item styling */
131+
.attribution-details li {
132+
margin-bottom: 1rem;
133+
overflow: visible;
134+
}
135+
136+
/* Link styling within attribution content */
137+
.attribution-content a {
138+
color: var(--link-color, #027EB5);
139+
cursor: pointer;
140+
text-decoration: underline;
141+
}
142+
143+
.attribution-content a:hover {
144+
color: var(--link-hover, #0064A0);
145+
}

0 commit comments

Comments
 (0)