Skip to content

Commit a9953ea

Browse files
thedannywahlthedannywahl
committed
update features
1 parent 89fb712 commit a9953ea

File tree

4 files changed

+56
-73
lines changed

4 files changed

+56
-73
lines changed

‎src/components/FeatureSelect.tsx‎

Lines changed: 22 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { AccessibleContent } from "@instructure/ui-a11y-content";
22
import { Alert } from "@instructure/ui-alerts";
3-
import { Badge } from "@instructure/ui-badge";
43
import { IconLaunchLine } from "@instructure/ui-icons";
54
import { Select } from "@instructure/ui-select";
65
import { Tag } from "@instructure/ui-tag";
76
import { Text } from "@instructure/ui-text";
7+
import { View } from "@instructure/ui-view";
88
import React, {
99
type FocusEvent,
1010
type KeyboardEvent,
@@ -16,7 +16,6 @@ import Features, {
1616
type FeatureInterface,
1717
type FeaturesType,
1818
} from "../assets/Features";
19-
import Stages from "../assets/Stages";
2019
import type { SignupFormMultiSelectProps } from "./SignupForm";
2120

2221
const FeatureSelect: React.FC<SignupFormMultiSelectProps> = ({
@@ -126,43 +125,33 @@ const FeatureSelect: React.FC<SignupFormMultiSelectProps> = ({
126125
.find((o) => o?.id === id);
127126
};
128127

129-
const stageColorMap = Stages.reduce<Record<string, string>>((acc, stage) => {
130-
acc[stage.name] = stage.color;
131-
return acc;
132-
}, {});
133-
134-
const renderGroupLabel = (key: string, count: number) => {
135-
const color = stageColorMap[key];
128+
const renderGroupLabel = (key: string) => {
129+
const group = filteredOptions[key];
130+
const BrandIcon = group?.[0]?.colorIcon;
136131
return (
137-
<Text>
138-
<Badge
139-
count={count}
140-
margin="0 x-small xxx-small 0"
141-
standalone
142-
themeOverride={{ colorPrimary: color }}
143-
/>
144-
{key}
145-
</Text>
132+
<>
133+
{BrandIcon && <BrandIcon />}
134+
<View margin="0 0 0 small">
135+
<Text>{key}</Text>
136+
</View>
137+
</>
146138
);
147139
};
148140

149141
const renderGroup = (): React.ReactNode => {
150142
return Object.keys(filteredOptions)
151143
.filter((key) => filteredOptions[key] && filteredOptions[key].length > 0)
152144
.map((key) => (
153-
<Select.Group
154-
key={key}
155-
renderLabel={renderGroupLabel(key, filteredOptions[key].length)}
156-
>
157-
{filteredOptions[key].map((option) => (
145+
<Select.Group key={key} renderLabel={renderGroupLabel(key)}>
146+
{filteredOptions[key].map((option: FeatureInterface) => (
158147
<Select.Option
159148
id={option.id}
160149
isHighlighted={option.id === highlightedOptionId}
161150
key={option.id}
162-
renderBeforeLabel={option.icon ? <option.icon /> : null}
151+
// renderBeforeLabel={option.icon ? <option.icon /> : null}
163152
value={option.label}
164153
>
165-
{option.label}
154+
<View margin="0 0 0 medium">{option.label}</View>
166155
</Select.Option>
167156
))}
168157
</Select.Group>
@@ -197,6 +186,13 @@ const FeatureSelect: React.FC<SignupFormMultiSelectProps> = ({
197186
(id: string, index: number): React.JSX.Element | null => {
198187
const option = getOptionById(id);
199188
if (!option) return null;
189+
const groupKey = Object.keys(filteredOptions).find((key) =>
190+
filteredOptions[key].some((opt: FeatureInterface) => opt.id === id),
191+
);
192+
const BrandIcon =
193+
groupKey && filteredOptions[groupKey][0]?.colorIcon
194+
? filteredOptions[groupKey][0].colorIcon
195+
: null;
200196
return (
201197
<Tag
202198
dismissible
@@ -207,7 +203,7 @@ const FeatureSelect: React.FC<SignupFormMultiSelectProps> = ({
207203
onClick={(e: React.MouseEvent) => dismissTag(e, id)}
208204
text={
209205
<AccessibleContent alt={`Remove ${option.label}`}>
210-
{option.icon && <option.icon />} {option.label}
206+
{BrandIcon && <BrandIcon />} {option.label}
211207
</AccessibleContent>
212208
}
213209
/>

‎src/components/HelpTray.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import { View } from "@instructure/ui-view";
77
import type React from "react";
88
import HelpTraySectionAbout from "./HelpTraySectionAbout";
99
import HelpTraySectionFeatures from "./HelpTraySectionFeatures";
10-
import HelpTraySectionStages from "./HelpTraySectionStages";
1110

1211
type HelpTrayProps = {
1312
isTrayOpen: boolean;
@@ -47,13 +46,12 @@ const HelpTray: React.FC<HelpTrayProps> = ({ isTrayOpen, setIsTrayOpen }) => {
4746
open={isTrayOpen}
4847
placement="end"
4948
shouldCloseOnDocumentClick
50-
size="medium"
49+
size="regular"
5150
>
5251
<View as="div" padding="small">
5352
{TrayHeader}
5453
<Flex direction="column" gap="small" padding="small">
5554
<HelpTraySectionAbout />
56-
<HelpTraySectionStages />
5755
<HelpTraySectionFeatures />
5856
</Flex>
5957
</View>

‎src/components/HelpTraySectionAbout.tsx‎

Lines changed: 26 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
1+
import { AccessibleContent } from "@instructure/ui-a11y-content";
12
import { Flex } from "@instructure/ui-flex";
23
import { Heading } from "@instructure/ui-heading";
4+
import { Link } from "@instructure/ui-link";
35
import { Text } from "@instructure/ui-text";
46
import { ToggleDetails } from "@instructure/ui-toggle-details";
7+
import { View } from "@instructure/ui-view";
58
import type { FC } from "react";
69

710
const HelpTraySectionAbout: FC = () => {
@@ -13,18 +16,29 @@ const HelpTraySectionAbout: FC = () => {
1316

1417
return (
1518
<Flex.Item>
16-
<ToggleDetails fluidWidth size="large" summary={toggleHeader}>
17-
<Text as="p" size="small">
18-
This site lets you indicate your interest in Instructure's upcoming
19-
features. Depending on the feature, development stage, and your role
20-
you may or may not be invited to participate in product testing.
21-
</Text>
22-
<Text as="p" size="small">
23-
Please note that many of these features are in early stages of
24-
development may change substantially before release, or may not be
25-
released at all. More information on product development stages is
26-
provided below.
27-
</Text>
19+
<ToggleDetails
20+
defaultExpanded
21+
fluidWidth
22+
size="large"
23+
summary={toggleHeader}
24+
>
25+
<View as="div" padding="0 medium">
26+
<Text as="p" size="small">
27+
Sign up to receive updates on the new features and products
28+
announced at{" "}
29+
<Link href="https://instructurecon.com" target="_blank">
30+
<AccessibleContent alt="Instructurecon 2025">
31+
Instructurecon 2025 {"\u29C9"}
32+
</AccessibleContent>
33+
</Link>
34+
</Text>
35+
<Text as="p" size="small">
36+
Please note that many of these features are in early stages of
37+
development may change substantially before release, or may not be
38+
released at all. More information on features announced is provided
39+
below.
40+
</Text>
41+
</View>
2842
</ToggleDetails>
2943
</Flex.Item>
3044
);

‎src/components/HelpTraySectionFeatures.tsx‎

Lines changed: 7 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,13 @@
11
import { AccessibleContent } from "@instructure/ui-a11y-content";
2-
import { Badge } from "@instructure/ui-badge";
32
import { Flex } from "@instructure/ui-flex";
43
import { Heading } from "@instructure/ui-heading";
54
import { Link } from "@instructure/ui-link";
6-
import { Popover } from "@instructure/ui-popover";
75
import { Text } from "@instructure/ui-text";
86
import { ToggleDetails } from "@instructure/ui-toggle-details";
97
import { View } from "@instructure/ui-view";
108
import type { FC } from "react";
119
import { useState } from "react";
1210
import Features, { type FeatureInterface } from "../assets/Features";
13-
import Stages from "../assets/Stages";
1411

1512
const HelpTraySectionFeatures: FC = () => {
1613
const [expandedKey, setExpandedKey] = useState<string | null>(null);
@@ -33,35 +30,8 @@ const HelpTraySectionFeatures: FC = () => {
3330
);
3431

3532
const renderFeatureDescription = (feature: FeatureInterface) => {
36-
const stage = Stages.find((stage) => stage.name === feature.stage);
37-
const badgeColor = stage?.color ?? Stages[2].color;
38-
39-
if (!stage) return null;
4033
return (
41-
<View as="div" padding="0">
42-
<Popover
43-
placement="top end"
44-
renderTrigger={
45-
<Link aria-describedby={stage.abbreviation} as="abbr">
46-
<Badge
47-
margin="0 x-small xxx-small 0"
48-
standalone
49-
themeOverride={{ colorPrimary: badgeColor }}
50-
type="notification"
51-
/>
52-
</Link>
53-
}
54-
shouldAlignArrow
55-
shouldRenderOffscreen
56-
shouldReturnFocus={false}
57-
withArrow
58-
>
59-
<View padding="x-small">
60-
<Text id={stage.abbreviation} size="small">
61-
{stage.abbreviation}
62-
</Text>
63-
</View>
64-
</Popover>
34+
<View as="div" padding="0 medium">
6535
<Text size="small">{feature.description}</Text>
6636
{feature.link && (
6737
<Text as="p" size="small">
@@ -81,7 +51,12 @@ const HelpTraySectionFeatures: FC = () => {
8151

8252
return (
8353
<Flex.Item>
84-
<ToggleDetails fluidWidth size="large" summary={toggleHeader}>
54+
<ToggleDetails
55+
defaultExpanded
56+
fluidWidth
57+
size="large"
58+
summary={toggleHeader}
59+
>
8560
<View as="div" padding="small 0">
8661
{Object.entries(Features).map(([stage, features]) =>
8762
features.map((feature, idx) => {

0 commit comments

Comments
 (0)