Skip to content

Commit 21581b3

Browse files
scott-williams-azscott-williams-az
committed
fix anchor menu
1 parent 4fc88b8 commit 21581b3

File tree

3 files changed

+248
-66
lines changed

3 files changed

+248
-66
lines changed

‎packages/unity-bootstrap-theme/stories/atoms/anchor-menu/anchor-menu.examples.stories.js‎

Lines changed: 178 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,185 @@
11
import React from "react";
22

3-
import { defaultDecorator } from "../../../../../shared/components/Layout";
4-
3+
import { imageName } from "../../../../../shared/assets";
4+
import { htmlRootDecorator } from "../../../../../shared/components/Layout";
5+
import {getLoremSentences} from "../../../../../shared/constants/strings";
56
export default {
67
title: "Atoms/Anchor Menu",
7-
decorators: [ defaultDecorator ],
8-
parameters: {
9-
controls: { disable: true },
10-
docs: {
11-
description: {
12-
component: `This example has moved to unity-react-core.
13-
14-
React components and HTML templates are now located in a shared space to ensure consistency between the React and Bootstrap usages.
15-
`,
16-
},
8+
parameters: {
9+
header: {
10+
forced: true,
1711
},
18-
}
12+
controls: { disable: true },
13+
},
14+
decorators: [htmlRootDecorator],
1915
};
20-
21-
22-
export const AnchorMenu = {
23-
render: () => <p>
24-
Follow the link to view the{" "}
25-
<a
26-
href="../../@asu/unity-react-core/index.html?path=/story/components-anchormenu--default"
27-
target="_parent"
28-
>
29-
anchor menu
30-
</a>{" "}
31-
example in @asu/unity-react-core.
32-
</p>
16+
let loremOffset = 0;
17+
export const AnchorMenu = () => {
18+
return (
19+
<>
20+
<div className="container-fluid">
21+
<div className="uds-hero-lg has-btn-row">
22+
<img
23+
className="hero"
24+
src={imageName.hero02}
25+
alt="Sample placeholder image."
26+
width="1920"
27+
height="1000"
28+
loading="lazy"
29+
decoding="async"
30+
fetchpriority="high"
31+
/>
32+
<h1>
33+
<span className="highlight-gold">Gettysburg Address</span>
34+
</h1>
35+
<div className="content">
36+
<p className="text-white">
37+
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
38+
eiusmod tempor incididunt ut labore et dolore magna aliqua.
39+
</p>
40+
</div>
41+
<div className="btn-row">
42+
<a href="#" className="btn btn-default btn-gold">
43+
Read the 13th Amendment
44+
</a>
45+
</div>
46+
</div>
47+
<div
48+
id="uds-anchor-menu"
49+
className="uds-anchor-menu uds-anchor-menu-expanded-lg"
50+
>
51+
<div className="container">
52+
<div className="uds-anchor-menu-wrapper">
53+
<h2
54+
data-bs-toggle="collapse"
55+
data-bs-target="#collapseExample"
56+
aria-expanded="false"
57+
aria-controls="collapseExample"
58+
data-ga-name="onclick"
59+
data-ga-event="collapse"
60+
data-ga-type="click"
61+
data-ga="On this page"
62+
>
63+
On This Page: <span className="fas fa-chevron-down"></span>
64+
</h2>
65+
<div id="collapseExample" className="card card-body collapse">
66+
<nav className="nav" aria-label="Same Page">
67+
<a
68+
className="nav-link"
69+
href="#first"
70+
data-ga-name="onclick"
71+
data-ga-event="link"
72+
data-ga-action="click"
73+
data-ga-type="internal link"
74+
data-ga-region="main content"
75+
data-ga-section="gettysburg address"
76+
data-ga="Anchor item"
77+
>
78+
<span className="fas fa-link"></span>First item
79+
</a>
80+
<a
81+
className="nav-link"
82+
href="#second"
83+
data-ga-name="onclick"
84+
data-ga-event="link"
85+
data-ga-action="click"
86+
data-ga-type="internal link"
87+
data-ga-region="main content"
88+
data-ga-section="gettysburg address"
89+
data-ga="Anchor item"
90+
>
91+
<span className="fas fa-link"></span>Second item
92+
</a>
93+
<a
94+
className="nav-link"
95+
href="#third"
96+
data-ga-name="onclick"
97+
data-ga-event="link"
98+
data-ga-action="click"
99+
data-ga-type="internal link"
100+
data-ga-region="main content"
101+
data-ga-section="gettysburg address"
102+
data-ga="Anchor item"
103+
>
104+
<span className="fa fa-link"></span>Third item
105+
</a>
106+
<a
107+
className="nav-link"
108+
href="#fourth"
109+
data-ga-name="onclick"
110+
data-ga-event="link"
111+
data-ga-action="click"
112+
data-ga-type="internal link"
113+
data-ga-region="main content"
114+
data-ga-section="gettysburg address"
115+
data-ga="Anchor item"
116+
>
117+
<span className="fa fa-link"></span>Fourth item
118+
</a>
119+
<a
120+
className="nav-link"
121+
href="#fifth"
122+
data-ga-name="onclick"
123+
data-ga-event="link"
124+
data-ga-action="click"
125+
data-ga-type="internal link"
126+
data-ga-region="main content"
127+
data-ga-section="gettysburg address"
128+
data-ga="Anchor item"
129+
>
130+
<span className="fa fa-link"></span>Fifth item
131+
</a>
132+
</nav>
133+
</div>
134+
</div>
135+
</div>
136+
</div>
137+
</div>
138+
<div className="container">
139+
<div className="row">
140+
<div className="col-md-12 pb-5">
141+
<div className="py-2">
142+
<p>{getLoremSentences(40, loremOffset++ * 3)}</p>
143+
<p>{getLoremSentences(30, loremOffset++ * 3)}</p>
144+
<p>{getLoremSentences(20, loremOffset++ * 3)}</p>
145+
<p>{getLoremSentences(40, loremOffset++ * 3)}</p>
146+
</div>
147+
<div className="py-2">
148+
<h2 id="first" > first </h2>
149+
<p>First. {getLoremSentences(40, loremOffset++ * 3)}</p>
150+
<p>First. {getLoremSentences(50, loremOffset++ * 3)}</p>
151+
<p>First. {getLoremSentences(10, loremOffset++ * 3)}</p>
152+
</div>
153+
<div className="py-2">
154+
<h2 id="second"> second </h2>
155+
<p>Second. {getLoremSentences(20, loremOffset++ * 3)}</p>
156+
<p>Second. {getLoremSentences(50, loremOffset++ * 3)}</p>
157+
<p>Second. {getLoremSentences(60, loremOffset++ * 3)}</p>
158+
</div>
159+
<div className="py-2">
160+
<h2 id="third" > third </h2>
161+
<p>Third. {getLoremSentences(20, loremOffset++ * 3)}</p>
162+
<p>Third. {getLoremSentences(10, loremOffset++ * 3)}</p>
163+
<p>Third. {getLoremSentences(40, loremOffset++ * 3)}</p>
164+
<p>Third. {getLoremSentences(10, loremOffset++ * 3)}</p>
165+
</div>
166+
<div className="py-2">
167+
<h2 id="fourth"> fourth </h2>
168+
<p>Fourth. {getLoremSentences(70, loremOffset++ * 3)}</p>
169+
<p>Fourth. {getLoremSentences(40, loremOffset++ * 3)}</p>
170+
</div>
171+
<div className="py-2">
172+
<h2 id="fifth" > fifth </h2>
173+
<p>Fifth. {getLoremSentences(40, loremOffset++ * 3)}</p>
174+
<p>Fifth. {getLoremSentences(10, loremOffset++ * 3)}</p>
175+
<p>Fifth. {getLoremSentences(30, loremOffset++ * 3)}</p>
176+
<p>Fifth. {getLoremSentences(20, loremOffset++ * 3)}</p>
177+
</div>
178+
</div>
179+
<div className="py-2"></div>
180+
</div>
181+
</div>
182+
<div style={{ height: "1000px" }}></div>
183+
</>
184+
);
33185
};

‎packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.jsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
import { Button } from "../Button/Button";
2121
import { GaEventWrapper } from "../GaEventWrapper/GaEventWrapper";
2222
import { AnchorMenuWrapper } from "./AnchorMenu.styles";
23+
import { useBaseSpecificFramework } from "../GaEventWrapper/useBaseSpecificFramework";
2324

2425
const menuTitle = "On This Page";
2526

@@ -43,6 +44,9 @@ export const AnchorMenu = ({
4344
firstElementId,
4445
focusFirstFocusableElement = false,
4546
}) => {
47+
48+
const { isReact, isBootstrap } = useBaseSpecificFramework();
49+
4650
const anchorMenuRef = useRef(null);
4751
const isSmallDevice = useMediaQuery("(max-width: 991px)");
4852
const [state, setState] = useState({
@@ -190,6 +194,7 @@ export const AnchorMenu = ({
190194
// @ts-ignore
191195
requiresAltMenuSpacing={state.hasAltMenuSpacing}
192196
ref={anchorMenuRef}
197+
id="uds-anchor-menu"
193198
className={classNames(
194199
"uds-anchor-menu",
195200
"uds-anchor-menu-expanded-lg",
@@ -252,7 +257,10 @@ export const AnchorMenu = ({
252257
ariaLabel={item.text}
253258
label={item.text}
254259
icon={item.icon}
255-
onClick={() => handleClickLink(item.targetIdName)}
260+
onClick={
261+
isReact && (() => handleClickLink(item.targetIdName))
262+
}
263+
href={isBootstrap && `#${item.targetIdName}`}
256264
/>
257265
))}
258266
</nav>

‎packages/unity-react-core/src/components/AnchorMenu/AnchorMenu.stories.jsx‎

Lines changed: 61 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,21 @@
22
import classNames from "classnames";
33
import React from "react";
44

5+
import {
6+
getLoremSentences,
7+
titleCaseDefinition,
8+
} from "../../../../../shared/constants/strings";
59
import { Divider } from "../Divider/Divider";
610
import { AnchorMenu } from "./AnchorMenu";
7-
import { getLoremSentences, titleCaseDefinition } from "../../../../../shared/constants/strings";
11+
import { Basic as Header } from "../../../../unity-bootstrap-theme/stories/organisms/global-header/global-header.templates.jsx";
12+
import { useBaseSpecificFramework } from "../GaEventWrapper/useBaseSpecificFramework.js";
813

9-
const titleCaseTitle = "Anchor Menus Should Always be Formatted with Title Case";
14+
const titleCaseTitle =
15+
"Anchor Menus Should Always be Formatted with Title Case";
1016
export default {
1117
title: "Components/AnchorMenu",
1218
component: AnchorMenu,
1319
excludeStories: ["Containers"],
14-
globals: {
15-
framework: "react",
16-
},
17-
tags: ["!bootstrap"],
1820
parameters: {
1921
docs: {
2022
description: {
@@ -54,46 +56,66 @@ const items = [
5456
export const Containers = () => {
5557
return (
5658
<>
57-
{items && items.map((item, index) => {
58-
const lastStyle = (index === items.length - 1) ? {marginBottom: "100vh"} : undefined;
59-
return (
60-
<div
61-
id={item.targetIdName}
62-
key={item.targetIdName}
63-
style={lastStyle}>
64-
<h2>{item.text}</h2>
65-
{/* use titleCaseDefinition for the first item */}
66-
{ (index === 0) &&
67-
<>
68-
<h3>{titleCaseTitle}</h3>
59+
{items &&
60+
items.map((item, index) => {
61+
const lastStyle =
62+
index === items.length - 1 ? { marginBottom: "100vh" } : undefined;
63+
return (
64+
<div
65+
id={item.targetIdName}
66+
key={item.targetIdName}
67+
style={lastStyle}
68+
>
69+
<h2>{item.text}</h2>
70+
{/* use titleCaseDefinition for the first item */}
71+
{index === 0 && (
72+
<>
73+
<h3>{titleCaseTitle}</h3>
74+
<p>
75+
<strong>Definition: </strong>
76+
{titleCaseDefinition}
77+
</p>
78+
<Divider type="copy" />
79+
</>
80+
)}
6981
<p>
70-
<strong>Definition: </strong>{ titleCaseDefinition }
82+
{
83+
getLoremSentences(
84+
40,
85+
index * 3
86+
) /* 40 sentences, index * 3 offset just creates some variety */
87+
}
7188
</p>
72-
<Divider type="copy"/>
73-
</>
74-
}
75-
<p>
76-
{getLoremSentences(40, index * 3) /* 40 sentences, index * 3 offset just creates some variety */}
77-
</p>
78-
</div>
79-
);
80-
})}
89+
</div>
90+
);
91+
})}
8192
</>
8293
);
8394
};
8495

85-
const Template = args => (
86-
<div className={classNames("container")}>
87-
<div className={classNames("row", "row-spaced", "pt-2", "pb-2")}>
88-
<div className={classNames("col", "col-12", "col-md-12", "col-lg-12")}>
89-
{/* Component */}
90-
<AnchorMenu {...args} />
91-
{/* Demostration purposes containers */}
92-
<Containers />
96+
const Template = args => {
97+
const { isBootstrap } = useBaseSpecificFramework();
98+
99+
return (
100+
<>
101+
{/* Bootstrap version of anchor menu depends on the header component */}
102+
{isBootstrap && <Header />}
103+
104+
<div className={classNames("container")}>
105+
<div className={classNames("row", "row-spaced", "pt-2", "pb-2")}>
106+
<div
107+
className={classNames("col", "col-12", "col-md-12", "col-lg-12")}
108+
>
109+
{/* Component */}
110+
<AnchorMenu {...args} />
111+
{/* Demostration purposes containers */}
112+
<Containers />
113+
</div>
114+
</div>
93115
</div>
94-
</div>
95-
</div>
96-
);
116+
</>
117+
);
118+
};
97119

98120
export const Default = Template.bind({});
99121
Default.args = {

0 commit comments

Comments
 (0)