Skip to content

Commit

Permalink
feat: TOC Scroll into view function updated #69
Browse files Browse the repository at this point in the history
  • Loading branch information
@Edithmark42
Edithmark42 committed Jan 4, 2024
1 parent 328e61b commit 8a6cbc9
Show file tree
Hide file tree
Showing 9 changed files with 94 additions and 476 deletions.
24 changes: 15 additions & 9 deletions package/components/dataDisplay/CoreH.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,19 +2,19 @@
import React from "react";

import CoreTypography from "./CoreTypography";
import { sanitizeComponentProps } from "../../utils/componentUtil";

const CoreH = React.forwardRef((props, ref) => {
//DONT use this directly instead use CoreH1 to CoreH6

props = sanitizeComponentProps(CoreH, props);
return (
<CoreTypography
{...props}
component={props.__level}
variant={props.variant ? props.variant : props.__level}
ref={ref}
>
{props.children}
</CoreTypography>
/>

);
});

Expand All @@ -23,12 +23,18 @@ CoreH.validProps = [
...CoreTypography.validProps,
{
description: "",
name: "__level",
type: [
name : "__level",
type : [
{
default: "h1",
type: "string",
validValues: ["h1", "h2", "h3", "h4", "h5"],
default : "h1",
type : "string",
validValues: [
"h1",
"h2",
"h3",
"h4",
"h5"
],
},
],
},
Expand Down
23 changes: 7 additions & 16 deletions package/components/dataDisplay/CoreH1.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,25 +4,16 @@ import React from "react";
import CoreH from "./CoreH";
import { sanitizeComponentProps } from "../../utils/componentUtil";

export default function CoreH1(props) {
const CoreH1 = React.forwardRef((props, ref) => {
props = sanitizeComponentProps(CoreH1, props);
const {
align, gutterBottom, noWrap, paragraph, component, variant = "h1", children
} = props;

return (
<CoreH
align={align}
gutterBottom={gutterBottom}
noWrap={noWrap}
paragraph={paragraph}
component={component}
variant={variant}
__level="h1">
{children}
</CoreH>
<CoreH {...props} __level="h1" ref={ref}/>
);
}
});

CoreH1.displayName = "CoreH1";
CoreH1.validProps = [...CoreH.validProps];
CoreH1.invalidProps = ["sx", "classes"];
CoreH1.invalidProps = ["sx", "classes"];

export default CoreH1;
94 changes: 10 additions & 84 deletions package/components/dataDisplay/CoreH2.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,91 +4,17 @@ import React from "react";
import CoreH from "./CoreH";
import { sanitizeComponentProps } from "../../utils/componentUtil";

export default function CoreH2(props) {
const CoreH2 = React.forwardRef((props, ref) => {
props = sanitizeComponentProps(CoreH2, props);
const {
align, gutterBottom, noWrap, paragraph, component, variant = "h2", children
} = props;


return (
<CoreH
align={align}
gutterBottom={gutterBottom}
noWrap={noWrap}
paragraph={paragraph}
component={component}
variant={variant}
__level="h2">
{children}
</CoreH>
<CoreH {...props} __level="h2" ref={ref}/>
);
}
});

CoreH2.validProps = [
{
description: "Set the text-align on the component.",
name : "align",
types : [
{
default : "inherit",
type : "string",
validValues: [
"center",
"inherit",
"justify",
"left",
"right"
]
}
]
},
{
description: "If true, the text will have a bottom margin.",
name : "gutterBottom",
types : [
{
default : false,
type : "boolean",
validValues: [true, false]
}
]
},
{
description: "If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow).",
name : "noWrap",
types : [
{
default : false,
type : "boolean",
validValues: [true, false]
}
]
},
{
description: "If true, the element will be a paragraph element.",
name : "paragraph",
types : [
{
default : false,
type : "boolean",
validValues: [true, false]
}
]
},
{
description: "The component used for the root node. Either a string to use a HTML element or a component.",
name : "component",
types : [{ type: "string" }]
},
{
description: "Applies the theme typography styles.",
name : "variant",
types : [
{
default: "h2",
type : "string"
}
]
}
];
CoreH2.invalidProps = ["sx", "classes"];
CoreH2.displayName = "CoreH2";

CoreH2.validProps = [...CoreH.validProps];
CoreH2.invalidProps = ["sx", "classes"];

export default CoreH2;
94 changes: 10 additions & 84 deletions package/components/dataDisplay/CoreH3.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,91 +4,17 @@ import React from "react";
import CoreH from "./CoreH";
import { sanitizeComponentProps } from "../../utils/componentUtil";

export default function CoreH3(props) {
const CoreH3 = React.forwardRef((props, ref) => {
props = sanitizeComponentProps(CoreH3, props);
const {
align, gutterBottom, noWrap, paragraph, component, variant = "h3", children
} = props;


return (
<CoreH
align={align}
gutterBottom={gutterBottom}
noWrap={noWrap}
paragraph={paragraph}
component={component}
variant={variant}
__level="h3">
{children}
</CoreH>
<CoreH {...props} __level="h3" ref={ref}/>
);
}
});

CoreH3.validProps = [
{
description: "Set the text-align on the component.",
name : "align",
types : [
{
default : "inherit",
type : "string",
validValues: [
"center",
"inherit",
"justify",
"left",
"right"
]
}
]
},
{
description: "If true, the text will have a bottom margin.",
name : "gutterBottom",
types : [
{
default : false,
type : "boolean",
validValues: [true, false]
}
]
},
{
description: "If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow).",
name : "noWrap",
types : [
{
default : false,
type : "boolean",
validValues: [true, false]
}
]
},
{
description: "If true, the element will be a paragraph element.",
name : "paragraph",
types : [
{
default : false,
type : "boolean",
validValues: [true, false]
}
]
},
{
description: "The component used for the root node. Either a string to use a HTML element or a component.",
name : "component",
types : [{ type: "string" }]
},
{
description: "Applies the theme typography styles.",
name : "variant",
types : [
{
default: "h3",
type : "string"
}
]
}
];
CoreH3.invalidProps = ["sx", "classes"];
CoreH3.displayName = "CoreH3";

CoreH3.validProps = [...CoreH.validProps];
CoreH3.invalidProps = ["sx", "classes"];

export default CoreH3;
90 changes: 4 additions & 86 deletions package/components/dataDisplay/CoreH4.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,97 +6,15 @@ import { sanitizeComponentProps } from "../../utils/componentUtil";

const CoreH4 = React.forwardRef((props, ref) => {
props = sanitizeComponentProps(CoreH4, props);
const {
align,
gutterBottom,
noWrap,
paragraph,
component,
variant = "h4",
children,
} = props;


return (
<CoreH
align={align}
gutterBottom={gutterBottom}
noWrap={noWrap}
paragraph={paragraph}
component={component}
variant={variant}
__level="h4"
ref={ref}
>
{children}
</CoreH>
<CoreH {...props} __level="h4" ref={ref}/>
);
});

CoreH4.displayName = "CoreH4";

CoreH4.validProps = [
{
description: "Set the text-align on the component.",
name: "align",
types: [
{
default: "inherit",
type: "string",
validValues: ["center", "inherit", "justify", "left", "right"],
},
],
},
{
description: "If true, the text will have a bottom margin.",
name: "gutterBottom",
types: [
{
default: false,
type: "boolean",
validValues: [true, false],
},
],
},
{
description:
"If true, the text will not wrap, but instead will truncate with a text overflow ellipsis. Note that text overflow can only happen with block or inline-block level elements (the element needs to have a width in order to overflow).",
name: "noWrap",
types: [
{
default: false,
type: "boolean",
validValues: [true, false],
},
],
},
{
description: "If true, the element will be a paragraph element.",
name: "paragraph",
types: [
{
default: false,
type: "boolean",
validValues: [true, false],
},
],
},
{
description:
"The component used for the root node. Either a string to use a HTML element or a component.",
name: "component",
types: [{ type: "string" }],
},
{
description: "Applies the theme typography styles.",
name: "variant",
types: [
{
default: "h4",
type: "string",
},
],
},
];
CoreH4.validProps = [...CoreH.validProps];
CoreH4.invalidProps = ["sx", "classes"];

export default CoreH4;
export default CoreH4;
Loading

0 comments on commit 8a6cbc9

Please sign in to comment.