Skip to content

Commit

Permalink
fix: small nit fixes
Browse files Browse the repository at this point in the history
  • Loading branch information
@trevoring-okta
trevoring-okta committed May 8, 2024
1 parent 7986a03 commit 8d33cf0
Show file tree
Hide file tree
Showing 3 changed files with 55 additions and 56 deletions.
9 changes: 2 additions & 7 deletions packages/odyssey-react-mui/src/labs/Grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,15 +25,12 @@ type SupportedPaneRatios =
| [1, 3]
| [3, 1]
| [1, 1, 1]
| [1, 2, 1]
| [2, 1, 1]
| [1, 1, 2]
| [1, 1, 1, 1];

export type GridProps = {
/**
* The supported pane ratios for the Grid. Each number is a fractional unit that is mapped to the 'fr' CSS unit.
* e.g. [2, 1] defines a 2/3, 1/3 layout and [1, 2, 1] defines a 1/4, 1/2, 1/4 layout
* e.g. [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout
* @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_grid_layout/Basic_concepts_of_grid_layout#the_fr_unit
*/
panes: SupportedPaneRatios;
Expand Down Expand Up @@ -81,9 +78,7 @@ const Grid = ({ panes, children }: GridProps) => {
odysseyDesignTokens={odysseyDesignTokens}
panes={mappedPanes}
>
{Children.toArray(children).map((child, index) => (
<div key={index}>{child}</div>
))}
{Children.toArray(children).map((child) => child)}
</GridContent>
</GridContainer>
);
Expand Down
80 changes: 40 additions & 40 deletions packages/odyssey-storybook/src/components/odyssey-labs/Grid/Grid.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,10 @@ const storybookMeta: Meta<GridProps> = {
panes: {
control: "text",
description:
"The title of the layout to be situated in the layout header",
"The supported pane ratios for the Grid. Each number is a fractional unit that is mapped to the 'fr' CSS unit. For example: [2, 1] defines a 2/3, 1/3 layout and [1, 1, 1] defines a 1/3, 1/3, 1/3 layout",
table: {
type: {
summary: "string",
summary: "SupportedPaneRatios",
},
},
},
Expand Down Expand Up @@ -63,7 +63,7 @@ export const Single: StoryObj<GridProps> = {
return (
<Grid {...args}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
);
Expand All @@ -78,10 +78,10 @@ export const Split: StoryObj<GridProps> = {
return (
<Grid {...args}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
);
Expand All @@ -96,10 +96,10 @@ export const TwoThirdsStart: StoryObj<GridProps> = {
return (
<Grid {...args}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
);
Expand All @@ -114,10 +114,10 @@ export const TwoThirdsEnd: StoryObj<GridProps> = {
return (
<Grid {...args}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
);
Expand All @@ -132,10 +132,10 @@ export const ThreeFourthsStart: StoryObj<GridProps> = {
return (
<Grid {...args}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
);
Expand All @@ -150,55 +150,55 @@ export const ThreeFourthsEnd: StoryObj<GridProps> = {
return (
<Grid {...args}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
);
},
};

export const ThreeColumnSplit: StoryObj<GridProps> = {
export const ThreePaneSplit: StoryObj<GridProps> = {
args: {
panes: [1, 1, 1],
},
render: function C(args) {
return (
<Grid {...args}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
);
},
};

export const FourColumnSplit: StoryObj<GridProps> = {
export const FourPaneSplit: StoryObj<GridProps> = {
args: {
panes: [1, 1, 1, 1],
},
render: function C(args) {
return (
<Grid {...args}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
);
Expand All @@ -211,72 +211,72 @@ export const KitchenSink: StoryObj<GridProps> = {
<>
<Grid panes={[1]}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
<Grid panes={[1, 1]}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
<Grid panes={[2, 1]}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
<Grid panes={[1, 2]}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
<Grid panes={[3, 1]}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
<Grid panes={[1, 3]}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
<Grid panes={[1, 1, 1]}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
<Grid panes={[1, 1, 1, 1]}>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
<Surface>
<h1>Column</h1>
<h1>Pane</h1>
</Surface>
</Grid>
</>
Expand Down
22 changes: 13 additions & 9 deletions ...ges/odyssey-storybook/src/components/odyssey-labs/OdysseyLayout/OdysseyLayout.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -522,9 +522,10 @@ export const Dashboard: StoryObj<OdysseyLayoutProps> = {
marginTop: odysseyDesignTokens.Spacing4,
}}
>
{organizationData.map((data) => {
{organizationData.map((data, index) => {
return (
<Box
key={index}
sx={{
display: "flex",
justifyContent: "space-between",
Expand Down Expand Up @@ -630,9 +631,10 @@ export const Dashboard: StoryObj<OdysseyLayoutProps> = {
For troubleshooting purposes, you can let Okta Support login to
your account as an administrator.
</Support>
{endUserData.map((data) => {
{endUserData.map((data, index) => {
return (
<Box
key={index}
sx={{
display: "flex",
justifyContent: "space-between",
Expand Down Expand Up @@ -704,13 +706,15 @@ export const FullWidth: StoryObj<OdysseyLayoutProps> = {
isFullWidth={args.isFullWidth}
>
<Grid panes={[1]}>
<DataTable
columns={personColumns}
getData={getData}
hasSearch
hasFilters
totalRows={10}
/>
<Surface>
<DataTable
columns={personColumns}
getData={getData}
hasSearch
hasFilters
totalRows={10}
/>
</Surface>
</Grid>
</OdysseyLayout>
);
Expand Down

0 comments on commit 8d33cf0

Please sign in to comment.