@codecademy/gamut 71.0.1-alpha.2135a1.0 → 71.0.1-alpha.7bf2a2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/lib/claude.mjs +14 -5
- package/bin/lib/cursor.mjs +4 -1
- package/dist/Form/elements/Form.d.ts +1 -1
- package/dist/List/ListProvider.d.ts +1 -1
- package/dist/List/elements.d.ts +2 -2
- package/dist/index.d.ts +0 -3
- package/dist/index.js +0 -3
- package/package.json +6 -6
- package/dist/AccordionAreaDeprecated/index.d.ts +0 -20
- package/dist/AccordionAreaDeprecated/index.js +0 -60
- package/dist/AccordionButtonDeprecated/ButtonDeprecated/index.d.ts +0 -93
- package/dist/AccordionButtonDeprecated/ButtonDeprecated/index.js +0 -65
- package/dist/AccordionButtonDeprecated/ButtonDeprecatedBase/index.d.ts +0 -43
- package/dist/AccordionButtonDeprecated/ButtonDeprecatedBase/index.js +0 -71
- package/dist/AccordionButtonDeprecated/ButtonDeprecatedBase/styles.module.scss +0 -74
- package/dist/AccordionButtonDeprecated/index.d.ts +0 -25
- package/dist/AccordionButtonDeprecated/index.js +0 -65
- package/dist/AccordionDeprecated/index.d.ts +0 -39
- package/dist/AccordionDeprecated/index.js +0 -39
package/bin/lib/claude.mjs
CHANGED
|
@@ -15,7 +15,7 @@ export async function claudePluginSpec(sourceRoot) {
|
|
|
15
15
|
} catch {
|
|
16
16
|
throw new Error(
|
|
17
17
|
`Missing ${mp}.\n` +
|
|
18
|
-
`A .claude-plugin/marketplace.json is required for Claude Code installation
|
|
18
|
+
`A .claude-plugin/marketplace.json is required for Claude Code installation.`
|
|
19
19
|
);
|
|
20
20
|
}
|
|
21
21
|
|
|
@@ -26,14 +26,20 @@ export async function claudePluginSpec(sourceRoot) {
|
|
|
26
26
|
const { name: marketplaceName, plugins } = json;
|
|
27
27
|
|
|
28
28
|
if (!marketplaceName || !Array.isArray(plugins) || plugins.length === 0) {
|
|
29
|
-
throw new Error(
|
|
29
|
+
throw new Error(
|
|
30
|
+
`Invalid marketplace.json — needs "name" and "plugins[]": ${mp}`
|
|
31
|
+
);
|
|
30
32
|
}
|
|
31
33
|
|
|
32
34
|
const entry =
|
|
33
|
-
plugins.find(
|
|
35
|
+
plugins.find(
|
|
36
|
+
(p) => p.source === './' || p.source === '.' || p.source == null
|
|
37
|
+
) ?? plugins[0];
|
|
34
38
|
|
|
35
39
|
if (!entry?.name) {
|
|
36
|
-
throw new Error(
|
|
40
|
+
throw new Error(
|
|
41
|
+
`No plugin name found in marketplace.json plugins[]: ${mp}`
|
|
42
|
+
);
|
|
37
43
|
}
|
|
38
44
|
|
|
39
45
|
return `${entry.name}@${marketplaceName}`;
|
|
@@ -47,6 +53,9 @@ export async function claudePluginSpec(sourceRoot) {
|
|
|
47
53
|
*/
|
|
48
54
|
export function marketplaceName(spec) {
|
|
49
55
|
const name = spec.split('@')[1];
|
|
50
|
-
if (!name)
|
|
56
|
+
if (!name)
|
|
57
|
+
throw new Error(
|
|
58
|
+
`Could not parse marketplace name from plugin spec: ${spec}`
|
|
59
|
+
);
|
|
51
60
|
return name;
|
|
52
61
|
}
|
package/bin/lib/cursor.mjs
CHANGED
|
@@ -4,7 +4,10 @@ import { join } from 'node:path';
|
|
|
4
4
|
|
|
5
5
|
/** @returns {string} */
|
|
6
6
|
export function cursorPluginsRoot() {
|
|
7
|
-
return
|
|
7
|
+
return (
|
|
8
|
+
process.env.CURSOR_PLUGINS_LOCAL ??
|
|
9
|
+
join(homedir(), '.cursor', 'plugins', 'local')
|
|
10
|
+
);
|
|
8
11
|
}
|
|
9
12
|
|
|
10
13
|
/**
|
|
@@ -526,7 +526,7 @@ declare const StyledForm: import("@emotion/styled").StyledComponent<{
|
|
|
526
526
|
}>;
|
|
527
527
|
} & {
|
|
528
528
|
theme?: import("@emotion/react").Theme;
|
|
529
|
-
}, Pick<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "name" | "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "method" | "target" | "autoComplete" | "acceptCharset" | "action" | "encType" | "noValidate"
|
|
529
|
+
}, Pick<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "name" | "slot" | "style" | "title" | "dir" | "children" | "className" | "aria-hidden" | "onAnimationStart" | "onDragStart" | "onDragEnd" | "onDrag" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoCapitalize" | "autoFocus" | "contentEditable" | "contextMenu" | "draggable" | "enterKeyHint" | "hidden" | "id" | "lang" | "nonce" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "exportparts" | "part" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-braillelabel" | "aria-brailleroledescription" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colindextext" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-description" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowindextext" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDragCapture" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerLeave" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "method" | "target" | "autoComplete" | keyof React.ClassAttributes<HTMLFormElement> | "acceptCharset" | "action" | "encType" | "noValidate">, {}>;
|
|
530
530
|
export type FormProps = ComponentProps<typeof StyledForm>;
|
|
531
531
|
export declare const Form: React.FC<FormProps>;
|
|
532
532
|
export {};
|
|
@@ -12,5 +12,5 @@ export declare function useList({ listType, rowBreakpoint, scrollable, spacing,
|
|
|
12
12
|
rowBreakpoint: "xs" | "sm" | "md" | undefined;
|
|
13
13
|
scrollable: boolean | undefined;
|
|
14
14
|
spacing: "normal" | "condensed" | "compact" | undefined;
|
|
15
|
-
variant: "table" | "default" | "block" | "
|
|
15
|
+
variant: "table" | "default" | "block" | "card" | "plain" | undefined;
|
|
16
16
|
};
|
package/dist/List/elements.d.ts
CHANGED
|
@@ -348,7 +348,7 @@ declare const space: import("@codecademy/variance/dist/types/config").Parser<imp
|
|
|
348
348
|
readonly property: "direction";
|
|
349
349
|
};
|
|
350
350
|
}>>;
|
|
351
|
-
declare const listVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"variant", false | "table" | "default" | "block" | "
|
|
351
|
+
declare const listVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"variant", false | "table" | "default" | "block" | "card" | "plain"> & {
|
|
352
352
|
theme?: import("@emotion/react").Theme;
|
|
353
353
|
}) => import("@codecademy/variance").CSSObject;
|
|
354
354
|
export interface ListProps extends StyleProps<typeof listVariants>, StyleProps<typeof spacingVariants>, StyleProps<typeof space> {
|
|
@@ -366,7 +366,7 @@ declare const interactiveState: (props: Partial<Record<"interactive", boolean>>
|
|
|
366
366
|
declare const spacingVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"spacing", false | "normal" | "condensed" | "compact"> & {
|
|
367
367
|
theme?: import("@emotion/react").Theme;
|
|
368
368
|
}) => import("@codecademy/variance").CSSObject;
|
|
369
|
-
declare const rowVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"variant", false | "table" | "default" | "block" | "
|
|
369
|
+
declare const rowVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"variant", false | "table" | "default" | "block" | "card" | "plain"> & {
|
|
370
370
|
theme?: import("@emotion/react").Theme;
|
|
371
371
|
}) => import("@codecademy/variance").CSSObject;
|
|
372
372
|
declare const rowBreakpointVariants: (props: import("@codecademy/variance/dist/types/config").VariantProps<"rowBreakpoint", false | "xs" | "sm" | "md" | "grid"> & {
|
package/dist/index.d.ts
CHANGED
package/dist/index.js
CHANGED
package/package.json
CHANGED
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@codecademy/gamut",
|
|
3
3
|
"description": "Styleguide & Component library for Codecademy",
|
|
4
|
-
"version": "71.0.1-alpha.
|
|
4
|
+
"version": "71.0.1-alpha.7bf2a2.0",
|
|
5
5
|
"author": "Codecademy Engineering <dev@codecademy.com>",
|
|
6
6
|
"bin": "./bin/gamut.mjs",
|
|
7
7
|
"dependencies": {
|
|
8
|
-
"@codecademy/gamut-icons": "9.57.8-alpha.
|
|
9
|
-
"@codecademy/gamut-illustrations": "0.58.14-alpha.
|
|
10
|
-
"@codecademy/gamut-patterns": "0.10.33-alpha.
|
|
11
|
-
"@codecademy/gamut-styles": "20.0.1-alpha.
|
|
12
|
-
"@codecademy/variance": "0.26.2-alpha.
|
|
8
|
+
"@codecademy/gamut-icons": "9.57.8-alpha.7bf2a2.0",
|
|
9
|
+
"@codecademy/gamut-illustrations": "0.58.14-alpha.7bf2a2.0",
|
|
10
|
+
"@codecademy/gamut-patterns": "0.10.33-alpha.7bf2a2.0",
|
|
11
|
+
"@codecademy/gamut-styles": "20.0.1-alpha.7bf2a2.0",
|
|
12
|
+
"@codecademy/variance": "0.26.2-alpha.7bf2a2.0",
|
|
13
13
|
"@formatjs/intl-locale": "5.3.1",
|
|
14
14
|
"@react-aria/interactions": "3.25.0",
|
|
15
15
|
"@types/marked": "^4.0.8",
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
export type AccordionAreaDeprecatedProps = {
|
|
3
|
-
children: React.ReactNode;
|
|
4
|
-
className?: string;
|
|
5
|
-
/**
|
|
6
|
-
* Whether the accordion is visually expanded to show its contents.
|
|
7
|
-
*/
|
|
8
|
-
expanded?: boolean;
|
|
9
|
-
/**
|
|
10
|
-
* Contents of the clickable header button.
|
|
11
|
-
*/
|
|
12
|
-
top: React.ReactNode;
|
|
13
|
-
};
|
|
14
|
-
/**
|
|
15
|
-
* @deprecated
|
|
16
|
-
* This component is in the old visual identity and will be updated soon.
|
|
17
|
-
*
|
|
18
|
-
* Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
|
|
19
|
-
*/
|
|
20
|
-
export declare const AccordionAreaDeprecated: React.FC<AccordionAreaDeprecatedProps>;
|
|
@@ -1,60 +0,0 @@
|
|
|
1
|
-
import _styled from "@emotion/styled/base";
|
|
2
|
-
function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
|
|
3
|
-
import { motion } from 'framer-motion';
|
|
4
|
-
import { useState } from 'react';
|
|
5
|
-
import * as React from 'react';
|
|
6
|
-
import { useIsomorphicLayoutEffect } from 'react-use';
|
|
7
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
8
|
-
const transitionDuration = 0.2;
|
|
9
|
-
const variants = {
|
|
10
|
-
expanded: {
|
|
11
|
-
height: 'auto'
|
|
12
|
-
},
|
|
13
|
-
folded: {
|
|
14
|
-
height: '0'
|
|
15
|
-
}
|
|
16
|
-
};
|
|
17
|
-
|
|
18
|
-
/**
|
|
19
|
-
* @deprecated
|
|
20
|
-
* This component is in the old visual identity and will be updated soon.
|
|
21
|
-
*
|
|
22
|
-
* Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
|
|
23
|
-
*/
|
|
24
|
-
|
|
25
|
-
export const AccordionAreaDeprecated = ({
|
|
26
|
-
children,
|
|
27
|
-
className,
|
|
28
|
-
expanded,
|
|
29
|
-
top
|
|
30
|
-
}) => {
|
|
31
|
-
const [delayExpanded, setDelayExpanded] = useState(expanded);
|
|
32
|
-
useIsomorphicLayoutEffect(() => {
|
|
33
|
-
const handle = setTimeout(() => setDelayExpanded(expanded), transitionDuration * 1000);
|
|
34
|
-
return () => clearTimeout(handle);
|
|
35
|
-
}, [expanded]);
|
|
36
|
-
return /*#__PURE__*/_jsxs("div", {
|
|
37
|
-
className: className,
|
|
38
|
-
children: [top, /*#__PURE__*/_jsx(StyledAccordionBody, {
|
|
39
|
-
animate: expanded ? 'expanded' : 'folded',
|
|
40
|
-
initial: expanded ? 'expanded' : 'folded',
|
|
41
|
-
transition: {
|
|
42
|
-
duration: 0.2,
|
|
43
|
-
ease: 'easeInOut'
|
|
44
|
-
},
|
|
45
|
-
variants: variants,
|
|
46
|
-
children: (expanded || delayExpanded) && children
|
|
47
|
-
})]
|
|
48
|
-
});
|
|
49
|
-
};
|
|
50
|
-
const StyledAccordionBody = /*#__PURE__*/_styled(motion.div, {
|
|
51
|
-
target: "edhiluh0",
|
|
52
|
-
label: "StyledAccordionBody"
|
|
53
|
-
})(process.env.NODE_ENV === "production" ? {
|
|
54
|
-
name: "d3v9zr",
|
|
55
|
-
styles: "overflow:hidden"
|
|
56
|
-
} : {
|
|
57
|
-
name: "d3v9zr",
|
|
58
|
-
styles: "overflow:hidden/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BY2NvcmRpb25BcmVhRGVwcmVjYXRlZC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUU4QyIsImZpbGUiOiIuLi8uLi9zcmMvQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgfSBmcm9tICdyZWFjdC11c2UnO1xuXG5leHBvcnQgdHlwZSBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuXG4gIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgYWNjb3JkaW9uIGlzIHZpc3VhbGx5IGV4cGFuZGVkIHRvIHNob3cgaXRzIGNvbnRlbnRzLlxuICAgKi9cbiAgZXhwYW5kZWQ/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBDb250ZW50cyBvZiB0aGUgY2xpY2thYmxlIGhlYWRlciBidXR0b24uXG4gICAqL1xuICB0b3A6IFJlYWN0LlJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IHRyYW5zaXRpb25EdXJhdGlvbiA9IDAuMjtcblxuY29uc3QgdmFyaWFudHMgPSB7XG4gIGV4cGFuZGVkOiB7IGhlaWdodDogJ2F1dG8nIH0sXG4gIGZvbGRlZDogeyBoZWlnaHQ6ICcwJyB9LFxufTtcblxuLyoqXG4gKiBAZGVwcmVjYXRlZFxuICogVGhpcyBjb21wb25lbnQgaXMgaW4gdGhlIG9sZCB2aXN1YWwgaWRlbnRpdHkgYW5kIHdpbGwgYmUgdXBkYXRlZCBzb29uLlxuICpcbiAqIENoZWNrIHRoZSBbR2FtdXQgQm9hcmRdKGh0dHBzOi8vd3d3Lm5vdGlvbi5zby9jb2RlY2FkZW15L0dhbXV0LVN0YXR1cy1UaW1lbGluZS1kZDNjMTM1ZDM4NDg0NjRlYTZlYjFiNDhlNjhmYmIxZCkgZm9yIGNvbXBvbmVudCBzdGF0dXNcbiAqL1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQ6IFJlYWN0LkZDPFxuICBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZFByb3BzXG4+ID0gKHsgY2hpbGRyZW4sIGNsYXNzTmFtZSwgZXhwYW5kZWQsIHRvcCB9KSA9PiB7XG4gIGNvbnN0IFtkZWxheUV4cGFuZGVkLCBzZXREZWxheUV4cGFuZGVkXSA9IHVzZVN0YXRlKGV4cGFuZGVkKTtcblxuICB1c2VJc29tb3JwaGljTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBoYW5kbGUgPSBzZXRUaW1lb3V0KFxuICAgICAgKCkgPT4gc2V0RGVsYXlFeHBhbmRlZChleHBhbmRlZCksXG4gICAgICB0cmFuc2l0aW9uRHVyYXRpb24gKiAxMDAwXG4gICAgKTtcblxuICAgIHJldHVybiAoKSA9PiBjbGVhclRpbWVvdXQoaGFuZGxlKTtcbiAgfSwgW2V4cGFuZGVkXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17Y2xhc3NOYW1lfT5cbiAgICAgIHt0b3B9XG4gICAgICA8U3R5bGVkQWNjb3JkaW9uQm9keVxuICAgICAgICBhbmltYXRlPXtleHBhbmRlZCA/ICdleHBhbmRlZCcgOiAnZm9sZGVkJ31cbiAgICAgICAgaW5pdGlhbD17ZXhwYW5kZWQgPyAnZXhwYW5kZWQnIDogJ2ZvbGRlZCd9XG4gICAgICAgIHRyYW5zaXRpb249e3sgZHVyYXRpb246IDAuMiwgZWFzZTogJ2Vhc2VJbk91dCcgfX1cbiAgICAgICAgdmFyaWFudHM9e3ZhcmlhbnRzfVxuICAgICAgPlxuICAgICAgICB7KGV4cGFuZGVkIHx8IGRlbGF5RXhwYW5kZWQpICYmIGNoaWxkcmVufVxuICAgICAgPC9TdHlsZWRBY2NvcmRpb25Cb2R5PlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuY29uc3QgU3R5bGVkQWNjb3JkaW9uQm9keSA9IHN0eWxlZChtb3Rpb24uZGl2KWBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG4iXX0= */",
|
|
59
|
-
toString: _EMOTION_STRINGIFIED_CSS_ERROR__
|
|
60
|
-
});
|
|
@@ -1,93 +0,0 @@
|
|
|
1
|
-
import { ReactNode } from 'react';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { ButtonDeprecatedBaseProps } from '../ButtonDeprecatedBase';
|
|
4
|
-
export declare const buttonPresetThemes: {
|
|
5
|
-
readonly secondary: "mint";
|
|
6
|
-
readonly platform: "greyblue";
|
|
7
|
-
readonly lantern: "darkmint";
|
|
8
|
-
readonly royalblue: "brand-purple";
|
|
9
|
-
};
|
|
10
|
-
declare const themes: readonly ["hyper", "navy", "red", "white", "brand-red", "brand-yellow", "brand-purple", "brand-dark-blue", "brand-blue", "mint", "darkmint", "grey", "greyblue"];
|
|
11
|
-
export type ButtonDeprecatedThemes = keyof typeof buttonPresetThemes | (typeof themes)[number];
|
|
12
|
-
export type ButtonDeprecatedProps = ButtonDeprecatedBaseProps & {
|
|
13
|
-
/**
|
|
14
|
-
* Whether button should behave like a block element or inline.
|
|
15
|
-
*/
|
|
16
|
-
block?: boolean;
|
|
17
|
-
/**
|
|
18
|
-
* Capitalize the text of the button.
|
|
19
|
-
*/
|
|
20
|
-
caps?: boolean;
|
|
21
|
-
children: ReactNode;
|
|
22
|
-
/**
|
|
23
|
-
* Disables the button and adds visual indicators to show it is not interactive.
|
|
24
|
-
*/
|
|
25
|
-
disabled?: boolean;
|
|
26
|
-
/**
|
|
27
|
-
* Variant that displays the button as flat.
|
|
28
|
-
*/
|
|
29
|
-
flat?: boolean;
|
|
30
|
-
/**
|
|
31
|
-
* Adds a pulsing animation to the button
|
|
32
|
-
*/
|
|
33
|
-
go?: boolean;
|
|
34
|
-
/**
|
|
35
|
-
* Changes the button to a link with no visual indication
|
|
36
|
-
*/
|
|
37
|
-
href?: string;
|
|
38
|
-
/**
|
|
39
|
-
* Link relationship property to be used with `href`
|
|
40
|
-
*/
|
|
41
|
-
rel?: string;
|
|
42
|
-
/**
|
|
43
|
-
* Link target property to be used with `href`
|
|
44
|
-
*/
|
|
45
|
-
target?: string;
|
|
46
|
-
id?: string;
|
|
47
|
-
/**
|
|
48
|
-
* Variant that displays the button as an inline link element, but maintains its semantic meaning as a button.
|
|
49
|
-
*/
|
|
50
|
-
link?: boolean;
|
|
51
|
-
/**
|
|
52
|
-
* Variant the displays the button as a button that is outlined instead of solid.
|
|
53
|
-
*/
|
|
54
|
-
outline?: boolean;
|
|
55
|
-
/**
|
|
56
|
-
* Variant that rounds the corners of the button
|
|
57
|
-
*/
|
|
58
|
-
round?: boolean;
|
|
59
|
-
/**
|
|
60
|
-
* Variant that determines the size of the button
|
|
61
|
-
*/
|
|
62
|
-
size?: 'small' | 'large';
|
|
63
|
-
/**
|
|
64
|
-
* Variant that displays the button as a square
|
|
65
|
-
*/
|
|
66
|
-
square?: boolean;
|
|
67
|
-
/**
|
|
68
|
-
* Variant that controls the background and text color of the button
|
|
69
|
-
* */
|
|
70
|
-
theme?: ButtonDeprecatedThemes;
|
|
71
|
-
type?: string;
|
|
72
|
-
/**
|
|
73
|
-
* Variant that underlines the text of the button.
|
|
74
|
-
*/
|
|
75
|
-
underline?: boolean;
|
|
76
|
-
/**
|
|
77
|
-
* Determines whether button dimensions should be determined by the content
|
|
78
|
-
*/
|
|
79
|
-
fitText?: boolean;
|
|
80
|
-
};
|
|
81
|
-
/**
|
|
82
|
-
* @deprecated
|
|
83
|
-
* This component is deprecated and is no longer supported.
|
|
84
|
-
*
|
|
85
|
-
* See [FillButon](https://gamut.codecademy.com/storybook/?path=/docs/atoms-button--fill-button#fill-button)
|
|
86
|
-
*
|
|
87
|
-
* @example
|
|
88
|
-
* import { FillButton } fom '@codecademy/gamut';
|
|
89
|
-
*
|
|
90
|
-
* <FillButton variant="primary" />
|
|
91
|
-
*/
|
|
92
|
-
export declare const ButtonDeprecated: React.FC<ButtonDeprecatedProps>;
|
|
93
|
-
export {};
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
/* eslint-disable react/destructuring-assignment */
|
|
2
|
-
import cx from 'classnames';
|
|
3
|
-
import hasIn from 'lodash/hasIn';
|
|
4
|
-
import * as React from 'react';
|
|
5
|
-
import { omitProps } from '../../utils';
|
|
6
|
-
import { ButtonDeprecatedBase } from '../ButtonDeprecatedBase';
|
|
7
|
-
// eslint-disable-next-line gamut/no-css-standalone
|
|
8
|
-
import styles from './styles/index.module.scss';
|
|
9
|
-
|
|
10
|
-
// themes can be an alias to a color
|
|
11
|
-
// or a unique button type
|
|
12
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
|
-
export const buttonPresetThemes = {
|
|
14
|
-
secondary: 'mint',
|
|
15
|
-
platform: 'greyblue',
|
|
16
|
-
lantern: 'darkmint',
|
|
17
|
-
royalblue: 'brand-purple'
|
|
18
|
-
};
|
|
19
|
-
const themes = ['hyper', 'navy', 'red', 'white', 'brand-red', 'brand-yellow', 'brand-purple', 'brand-dark-blue', 'brand-blue', 'mint', 'darkmint', 'grey', 'greyblue'];
|
|
20
|
-
const propKeys = ['theme', 'size', 'outline', 'underline', 'link', 'caps', 'go', 'children', 'block', 'className', 'round', 'square', 'flat', 'fitText', 'onClick'];
|
|
21
|
-
const isPreset = theme => {
|
|
22
|
-
return hasIn(buttonPresetThemes, theme);
|
|
23
|
-
};
|
|
24
|
-
|
|
25
|
-
/**
|
|
26
|
-
* @deprecated
|
|
27
|
-
* This component is deprecated and is no longer supported.
|
|
28
|
-
*
|
|
29
|
-
* See [FillButon](https://gamut.codecademy.com/storybook/?path=/docs/atoms-button--fill-button#fill-button)
|
|
30
|
-
*
|
|
31
|
-
* @example
|
|
32
|
-
* import { FillButton } fom '@codecademy/gamut';
|
|
33
|
-
*
|
|
34
|
-
* <FillButton variant="primary" />
|
|
35
|
-
*/
|
|
36
|
-
|
|
37
|
-
export const ButtonDeprecated = props => {
|
|
38
|
-
let {
|
|
39
|
-
theme = 'brand-red'
|
|
40
|
-
} = props;
|
|
41
|
-
if (isPreset(theme)) {
|
|
42
|
-
theme = buttonPresetThemes[theme];
|
|
43
|
-
}
|
|
44
|
-
const typeClassName = props.link ? styles.link : styles.btn;
|
|
45
|
-
const themeClassName = props.link ? styles[`link-${theme}`] : styles[`btn-${theme}`];
|
|
46
|
-
const classes = cx(typeClassName, themeClassName, styles[props.size], {
|
|
47
|
-
[styles.block]: props.block,
|
|
48
|
-
[styles.go]: props.go,
|
|
49
|
-
[styles.outline]: props.outline,
|
|
50
|
-
[styles.underline]: props.underline,
|
|
51
|
-
[styles.caps]: props.caps,
|
|
52
|
-
[styles.round]: props.round,
|
|
53
|
-
[styles.square]: props.square,
|
|
54
|
-
[styles.flat]: props.flat,
|
|
55
|
-
[styles['fit-text']]: props.fitText
|
|
56
|
-
}, props.className);
|
|
57
|
-
const propsToTransfer = omitProps(propKeys, props);
|
|
58
|
-
return /*#__PURE__*/_jsx(ButtonDeprecatedBase, {
|
|
59
|
-
...propsToTransfer,
|
|
60
|
-
className: classes,
|
|
61
|
-
link: props.link,
|
|
62
|
-
onClick: props.onClick,
|
|
63
|
-
children: props.children
|
|
64
|
-
});
|
|
65
|
-
};
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { HTMLProps, ReactNode } from 'react';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { ChildComponentDescriptor } from '../../typings/react';
|
|
4
|
-
export type ButtonDeprecatedBaseProps = Omit<HTMLProps<HTMLAnchorElement> & HTMLProps<HTMLButtonElement>, 'as' | 'size'> & {
|
|
5
|
-
/**
|
|
6
|
-
* Component type to wrap children with.
|
|
7
|
-
*/
|
|
8
|
-
as?: ChildComponentDescriptor;
|
|
9
|
-
/**
|
|
10
|
-
* @remarks We would love to properly type this with generics, but cannot yet.
|
|
11
|
-
* @see https://github.com/Codecademy/gamut/pull/270#discussion_r270917147
|
|
12
|
-
* @see https://github.com/Microsoft/TypeScript/issues/21048
|
|
13
|
-
*/
|
|
14
|
-
asProps?: any;
|
|
15
|
-
children?: ReactNode;
|
|
16
|
-
className?: string;
|
|
17
|
-
href?: string;
|
|
18
|
-
target?: string;
|
|
19
|
-
rel?: string;
|
|
20
|
-
/**
|
|
21
|
-
* Variant that displays the button as an inline link element, but maintains its semantic meaning as a button.
|
|
22
|
-
*/
|
|
23
|
-
link?: boolean;
|
|
24
|
-
/**
|
|
25
|
-
* @remarks
|
|
26
|
-
* Technically, this is only ever a button event *or* a link event.
|
|
27
|
-
* We '&' them together for ease of usage.
|
|
28
|
-
*/
|
|
29
|
-
onClick?: (event: React.MouseEvent<HTMLAnchorElement> & React.MouseEvent<HTMLButtonElement>) => void;
|
|
30
|
-
};
|
|
31
|
-
/**
|
|
32
|
-
* @deprecated
|
|
33
|
-
* This component is deprecated and is no longer supported.
|
|
34
|
-
*
|
|
35
|
-
* See [Anchor](https://gamut.codecademy.com/storybook/?path=/docs/typography-anchor--anchor) for similiar functionality
|
|
36
|
-
*
|
|
37
|
-
* @example
|
|
38
|
-
* import { Anchor } from '@codecademy/gamut';
|
|
39
|
-
*
|
|
40
|
-
* <Anchor variant="interface">Button</Anchor>
|
|
41
|
-
*
|
|
42
|
-
*/
|
|
43
|
-
export declare const ButtonDeprecatedBase: React.FC<ButtonDeprecatedBaseProps>;
|
|
@@ -1,71 +0,0 @@
|
|
|
1
|
-
import cx from 'classnames';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { omitProps } from '../../utils';
|
|
4
|
-
// eslint-disable-next-line gamut/no-css-standalone
|
|
5
|
-
import styles from './styles.module.scss';
|
|
6
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
7
|
-
const propKeys = ['children', 'className', 'href', 'link', 'onClick', 'target', 'rel'];
|
|
8
|
-
/**
|
|
9
|
-
* @deprecated
|
|
10
|
-
* This component is deprecated and is no longer supported.
|
|
11
|
-
*
|
|
12
|
-
* See [Anchor](https://gamut.codecademy.com/storybook/?path=/docs/typography-anchor--anchor) for similiar functionality
|
|
13
|
-
*
|
|
14
|
-
* @example
|
|
15
|
-
* import { Anchor } from '@codecademy/gamut';
|
|
16
|
-
*
|
|
17
|
-
* <Anchor variant="interface">Button</Anchor>
|
|
18
|
-
*
|
|
19
|
-
*/
|
|
20
|
-
|
|
21
|
-
export const ButtonDeprecatedBase = props => {
|
|
22
|
-
const {
|
|
23
|
-
href,
|
|
24
|
-
className,
|
|
25
|
-
link,
|
|
26
|
-
onClick,
|
|
27
|
-
target,
|
|
28
|
-
rel
|
|
29
|
-
} = props;
|
|
30
|
-
const {
|
|
31
|
-
as: As,
|
|
32
|
-
asProps = {},
|
|
33
|
-
...restOfProps
|
|
34
|
-
} = props;
|
|
35
|
-
const propsToTransfer = omitProps(propKeys, restOfProps);
|
|
36
|
-
const classes = cx(styles.basicBtn, className, {
|
|
37
|
-
[styles.basicLink]: link
|
|
38
|
-
});
|
|
39
|
-
const defaultProps = {
|
|
40
|
-
...propsToTransfer,
|
|
41
|
-
className: classes,
|
|
42
|
-
onClick,
|
|
43
|
-
'data-btn': true
|
|
44
|
-
};
|
|
45
|
-
if (As) {
|
|
46
|
-
return /*#__PURE__*/_jsx(As, {
|
|
47
|
-
...defaultProps,
|
|
48
|
-
...asProps
|
|
49
|
-
});
|
|
50
|
-
}
|
|
51
|
-
if (href) {
|
|
52
|
-
// Check if this is a popup and and appropriate rel props if they don't exist (see https://web.dev/external-anchors-use-rel-noopener/)
|
|
53
|
-
const anchorProps = {
|
|
54
|
-
target,
|
|
55
|
-
rel: target === '_blank' && !rel ? 'noopener noreferrer' : rel
|
|
56
|
-
};
|
|
57
|
-
|
|
58
|
-
// Anchor tag receives children content from propsToTransfer
|
|
59
|
-
// eslint-disable-next-line jsx-a11y/anchor-has-content
|
|
60
|
-
return /*#__PURE__*/_jsx("a", {
|
|
61
|
-
...defaultProps,
|
|
62
|
-
...anchorProps,
|
|
63
|
-
href: href
|
|
64
|
-
});
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
// eslint-disable-next-line react/button-has-type
|
|
68
|
-
return /*#__PURE__*/_jsx("button", {
|
|
69
|
-
...defaultProps
|
|
70
|
-
});
|
|
71
|
-
};
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
.basicBtn {
|
|
2
|
-
display: inline-block;
|
|
3
|
-
text-align: center;
|
|
4
|
-
text-decoration: none;
|
|
5
|
-
white-space: nowrap;
|
|
6
|
-
vertical-align: middle;
|
|
7
|
-
cursor: pointer;
|
|
8
|
-
font-family: inherit;
|
|
9
|
-
font: inherit;
|
|
10
|
-
padding: 0;
|
|
11
|
-
margin: 0;
|
|
12
|
-
border: none;
|
|
13
|
-
background: none;
|
|
14
|
-
color: inherit;
|
|
15
|
-
line-height: normal;
|
|
16
|
-
|
|
17
|
-
&,
|
|
18
|
-
&:active {
|
|
19
|
-
&:focus {
|
|
20
|
-
outline: none;
|
|
21
|
-
}
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
&:hover:focus {
|
|
25
|
-
text-decoration: none;
|
|
26
|
-
}
|
|
27
|
-
&:focus {
|
|
28
|
-
text-decoration: none;
|
|
29
|
-
}
|
|
30
|
-
|
|
31
|
-
&:active {
|
|
32
|
-
background-image: none;
|
|
33
|
-
outline: 0;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
&:disabled {
|
|
37
|
-
cursor: not-allowed;
|
|
38
|
-
opacity: 0.65;
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.basicLink {
|
|
43
|
-
text-decoration: none;
|
|
44
|
-
vertical-align: baseline;
|
|
45
|
-
cursor: pointer;
|
|
46
|
-
|
|
47
|
-
&,
|
|
48
|
-
&:active,
|
|
49
|
-
&:disabled {
|
|
50
|
-
background-color: transparent;
|
|
51
|
-
}
|
|
52
|
-
&,
|
|
53
|
-
&:focus,
|
|
54
|
-
&:active {
|
|
55
|
-
border-color: transparent;
|
|
56
|
-
}
|
|
57
|
-
&:hover,
|
|
58
|
-
&:focus {
|
|
59
|
-
opacity: 0.7;
|
|
60
|
-
text-decoration: none;
|
|
61
|
-
border-color: transparent;
|
|
62
|
-
background-color: transparent;
|
|
63
|
-
}
|
|
64
|
-
&:hover:focus {
|
|
65
|
-
opacity: 0.7;
|
|
66
|
-
background-color: transparent;
|
|
67
|
-
}
|
|
68
|
-
&:disabled {
|
|
69
|
-
&:hover:focus {
|
|
70
|
-
opacity: 0.7;
|
|
71
|
-
text-decoration: none;
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
}
|
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { ButtonDeprecatedBaseProps } from './ButtonDeprecatedBase';
|
|
3
|
-
export type AccordionButtonSize = 'normal' | 'large';
|
|
4
|
-
export type AccordionButtonTheme = 'blue' | 'plain' | 'yellow';
|
|
5
|
-
export type AccordionButtonDeprecatedProps = ButtonDeprecatedBaseProps & {
|
|
6
|
-
/**
|
|
7
|
-
* Whether the button should display as open or closed.
|
|
8
|
-
*/
|
|
9
|
-
expanded?: boolean;
|
|
10
|
-
/**
|
|
11
|
-
* Determines the size of the button.
|
|
12
|
-
*/
|
|
13
|
-
size?: 'normal' | 'large';
|
|
14
|
-
/**
|
|
15
|
-
* Visual theme for the clickable header button.
|
|
16
|
-
*/
|
|
17
|
-
theme?: 'blue' | 'plain' | 'yellow';
|
|
18
|
-
};
|
|
19
|
-
/**
|
|
20
|
-
* @deprecated
|
|
21
|
-
* This component is in the old visual identity and will be updated soon.
|
|
22
|
-
*
|
|
23
|
-
* Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
|
|
24
|
-
*/
|
|
25
|
-
export declare const AccordionButtonDeprecated: React.FC<AccordionButtonDeprecatedProps>;
|
|
@@ -1,65 +0,0 @@
|
|
|
1
|
-
import { ArrowChevronDownIcon } from '@codecademy/gamut-icons';
|
|
2
|
-
import cx from 'classnames';
|
|
3
|
-
import * as React from 'react';
|
|
4
|
-
import { ButtonDeprecated } from './ButtonDeprecated';
|
|
5
|
-
import { ButtonDeprecatedBase } from './ButtonDeprecatedBase';
|
|
6
|
-
// eslint-disable-next-line gamut/no-css-standalone
|
|
7
|
-
import styles from './styles.module.scss';
|
|
8
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
const buttonThemes = {
|
|
10
|
-
blue: {
|
|
11
|
-
component: ButtonDeprecated,
|
|
12
|
-
props: {
|
|
13
|
-
flat: true,
|
|
14
|
-
theme: 'white'
|
|
15
|
-
}
|
|
16
|
-
},
|
|
17
|
-
plain: {
|
|
18
|
-
component: ButtonDeprecated,
|
|
19
|
-
props: {
|
|
20
|
-
flat: true,
|
|
21
|
-
theme: 'brand-dark-blue'
|
|
22
|
-
}
|
|
23
|
-
},
|
|
24
|
-
yellow: {
|
|
25
|
-
component: ButtonDeprecatedBase,
|
|
26
|
-
props: {}
|
|
27
|
-
}
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
/**
|
|
31
|
-
* @deprecated
|
|
32
|
-
* This component is in the old visual identity and will be updated soon.
|
|
33
|
-
*
|
|
34
|
-
* Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
|
|
35
|
-
*/
|
|
36
|
-
|
|
37
|
-
export const AccordionButtonDeprecated = ({
|
|
38
|
-
children,
|
|
39
|
-
className,
|
|
40
|
-
expanded,
|
|
41
|
-
size = 'normal',
|
|
42
|
-
theme = 'plain',
|
|
43
|
-
...baseProps
|
|
44
|
-
}) => {
|
|
45
|
-
const {
|
|
46
|
-
component: ButtonComponent,
|
|
47
|
-
props
|
|
48
|
-
} = buttonThemes[theme];
|
|
49
|
-
const iconSize = size === 'large' ? 30 : undefined;
|
|
50
|
-
return /*#__PURE__*/_jsxs(ButtonComponent, {
|
|
51
|
-
"aria-expanded": expanded,
|
|
52
|
-
className: cx(styles.accordionButton, styles[theme], styles[size], className),
|
|
53
|
-
...baseProps,
|
|
54
|
-
...props,
|
|
55
|
-
children: [/*#__PURE__*/_jsx("span", {
|
|
56
|
-
className: styles.children,
|
|
57
|
-
children: children
|
|
58
|
-
}), /*#__PURE__*/_jsx(ArrowChevronDownIcon, {
|
|
59
|
-
"aria-hidden": true,
|
|
60
|
-
className: cx(styles.expansionIcon, expanded && styles.expansionIconExpanded),
|
|
61
|
-
height: iconSize,
|
|
62
|
-
width: iconSize
|
|
63
|
-
})]
|
|
64
|
-
});
|
|
65
|
-
};
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import * as React from 'react';
|
|
2
|
-
import { AccordionButtonSize, AccordionButtonTheme } from '../AccordionButtonDeprecated';
|
|
3
|
-
export type ChildrenOrExpandedRender = React.ReactNode | ((expanded: boolean) => React.ReactNode);
|
|
4
|
-
export type AccordionDeprecatedProps = {
|
|
5
|
-
children: ChildrenOrExpandedRender;
|
|
6
|
-
/**
|
|
7
|
-
* CSS class name added to the root area container.
|
|
8
|
-
*/
|
|
9
|
-
className?: string;
|
|
10
|
-
/**
|
|
11
|
-
* Whether the accordion should start off with expanded state.
|
|
12
|
-
*/
|
|
13
|
-
initiallyExpanded?: boolean;
|
|
14
|
-
/**
|
|
15
|
-
* Called when the top button is clicked.
|
|
16
|
-
*
|
|
17
|
-
* @param expanding - New expanded state the accordion will transition to.
|
|
18
|
-
*/
|
|
19
|
-
onClick?: (expanding: boolean) => void;
|
|
20
|
-
/**
|
|
21
|
-
* Visual size of the top button.
|
|
22
|
-
*/
|
|
23
|
-
size?: AccordionButtonSize;
|
|
24
|
-
/**
|
|
25
|
-
* Visual theme of the top button.
|
|
26
|
-
*/
|
|
27
|
-
theme?: AccordionButtonTheme;
|
|
28
|
-
/**
|
|
29
|
-
* Contents to place within the top button.
|
|
30
|
-
*/
|
|
31
|
-
top: ChildrenOrExpandedRender;
|
|
32
|
-
};
|
|
33
|
-
/**
|
|
34
|
-
* @deprecated
|
|
35
|
-
* This component is in the old visual identity and will be updated soon.
|
|
36
|
-
*
|
|
37
|
-
* Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
|
|
38
|
-
*/
|
|
39
|
-
export declare const AccordionDeprecated: React.FC<AccordionDeprecatedProps>;
|
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
import { useState } from 'react';
|
|
2
|
-
import * as React from 'react';
|
|
3
|
-
import { AccordionAreaDeprecated } from '../AccordionAreaDeprecated';
|
|
4
|
-
import { AccordionButtonDeprecated } from '../AccordionButtonDeprecated';
|
|
5
|
-
import { jsx as _jsx } from "react/jsx-runtime";
|
|
6
|
-
/**
|
|
7
|
-
* @deprecated
|
|
8
|
-
* This component is in the old visual identity and will be updated soon.
|
|
9
|
-
*
|
|
10
|
-
* Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
|
|
11
|
-
*/
|
|
12
|
-
|
|
13
|
-
export const AccordionDeprecated = ({
|
|
14
|
-
children,
|
|
15
|
-
className,
|
|
16
|
-
initiallyExpanded,
|
|
17
|
-
onClick,
|
|
18
|
-
size,
|
|
19
|
-
theme,
|
|
20
|
-
top
|
|
21
|
-
}) => {
|
|
22
|
-
const [expanded, setExpanded] = useState(!!initiallyExpanded);
|
|
23
|
-
const expandRenderer = renderer => renderer instanceof Function ? renderer(expanded) : renderer;
|
|
24
|
-
return /*#__PURE__*/_jsx(AccordionAreaDeprecated, {
|
|
25
|
-
className: className,
|
|
26
|
-
expanded: expanded,
|
|
27
|
-
top: /*#__PURE__*/_jsx(AccordionButtonDeprecated, {
|
|
28
|
-
expanded: expanded,
|
|
29
|
-
size: size,
|
|
30
|
-
theme: theme,
|
|
31
|
-
onClick: () => {
|
|
32
|
-
setExpanded(!expanded);
|
|
33
|
-
onClick?.(!expanded);
|
|
34
|
-
},
|
|
35
|
-
children: expandRenderer(top)
|
|
36
|
-
}),
|
|
37
|
-
children: expandRenderer(children)
|
|
38
|
-
});
|
|
39
|
-
};
|