Skip to content

Commit

Permalink
feat(odyssey-react-mui): panes => regions
Browse files Browse the repository at this point in the history
  • Loading branch information
@bryancunningham-okta
bryancunningham-okta committed May 22, 2024
1 parent 8d33cf0 commit 476e72b
Show file tree
Hide file tree
Showing 3 changed files with 76 additions and 73 deletions.
23 changes: 13 additions & 10 deletions packages/odyssey-react-mui/src/labs/Grid.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ import {
useOdysseyDesignTokens,
} from "../OdysseyDesignTokensContext";

type SupportedPaneRatios =
type SupportedRegionRatios =
| [1]
| [1, 1]
| [1, 2]
Expand All @@ -29,11 +29,11 @@ type SupportedPaneRatios =

export type GridProps = {
/**
* The supported pane ratios for the Grid. Each number is a fractional unit that is mapped to the 'fr' CSS unit.
* The supported region 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, 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;
regions: SupportedRegionRatios;
/**
* The content of the Grid. May be a `string` or any other `ReactNode` or array of `ReactNode`s.
*/
Expand All @@ -42,7 +42,7 @@ export type GridProps = {

interface GridContentProps {
odysseyDesignTokens: DesignTokens;
panes: string;
regions: string;
}

const GridContainer = styled("div", {
Expand All @@ -56,10 +56,11 @@ const GridContainer = styled("div", {
);

const GridContent = styled("div", {
shouldForwardProp: (prop) => !["odysseyDesignTokens", "panes"].includes(prop),
})<GridContentProps>(({ odysseyDesignTokens, panes }) => ({
shouldForwardProp: (prop) =>
!["odysseyDesignTokens", "regions"].includes(prop),
})<GridContentProps>(({ odysseyDesignTokens, regions }) => ({
display: "grid",
gridTemplateColumns: panes,
gridTemplateColumns: regions,
gridColumnGap: odysseyDesignTokens.Spacing4,
columnGap: odysseyDesignTokens.Spacing4,

Expand All @@ -68,15 +69,17 @@ const GridContent = styled("div", {
},
}));

const Grid = ({ panes, children }: GridProps) => {
const Grid = ({ regions, children }: GridProps) => {
const odysseyDesignTokens = useOdysseyDesignTokens();
const mappedPanes = panes.map((pane) => `minmax(0, ${pane}fr)`).join(" ");
const mappedRegions = regions
.map((region) => `minmax(0, ${region}fr)`)
.join(" ");

return (
<GridContainer odysseyDesignTokens={odysseyDesignTokens}>
<GridContent
odysseyDesignTokens={odysseyDesignTokens}
panes={mappedPanes}
regions={mappedRegions}
>
{Children.toArray(children).map((child) => child)}
</GridContent>
Expand Down
114 changes: 57 additions & 57 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 @@ -20,13 +20,13 @@ const storybookMeta: Meta<GridProps> = {
title: "Labs Components/Grid",
component: Grid,
argTypes: {
panes: {
regions: {
control: "text",
description:
"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",
"The supported region 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: "SupportedPaneRatios",
summary: "SupportedRegionRatios",
},
},
},
Expand Down Expand Up @@ -57,13 +57,13 @@ export default storybookMeta;

export const Single: StoryObj<GridProps> = {
args: {
panes: [1],
regions: [1],
},
render: function C(args) {
return (
<Grid {...args}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
);
Expand All @@ -72,16 +72,16 @@ export const Single: StoryObj<GridProps> = {

export const Split: StoryObj<GridProps> = {
args: {
panes: [1, 1],
regions: [1, 1],
},
render: function C(args) {
return (
<Grid {...args}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
);
Expand All @@ -90,16 +90,16 @@ export const Split: StoryObj<GridProps> = {

export const TwoThirdsStart: StoryObj<GridProps> = {
args: {
panes: [2, 1],
regions: [2, 1],
},
render: function C(args) {
return (
<Grid {...args}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
);
Expand All @@ -108,16 +108,16 @@ export const TwoThirdsStart: StoryObj<GridProps> = {

export const TwoThirdsEnd: StoryObj<GridProps> = {
args: {
panes: [1, 2],
regions: [1, 2],
},
render: function C(args) {
return (
<Grid {...args}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
);
Expand All @@ -126,16 +126,16 @@ export const TwoThirdsEnd: StoryObj<GridProps> = {

export const ThreeFourthsStart: StoryObj<GridProps> = {
args: {
panes: [3, 1],
regions: [3, 1],
},
render: function C(args) {
return (
<Grid {...args}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
);
Expand All @@ -144,61 +144,61 @@ export const ThreeFourthsStart: StoryObj<GridProps> = {

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

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

export const FourPaneSplit: StoryObj<GridProps> = {
export const FourRegionSplit: StoryObj<GridProps> = {
args: {
panes: [1, 1, 1, 1],
regions: [1, 1, 1, 1],
},
render: function C(args) {
return (
<Grid {...args}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
);
Expand All @@ -209,74 +209,74 @@ export const KitchenSink: StoryObj<GridProps> = {
render: function () {
return (
<>
<Grid panes={[1]}>
<Grid regions={[1]}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
<Grid panes={[1, 1]}>
<Grid regions={[1, 1]}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
<Grid panes={[2, 1]}>
<Grid regions={[2, 1]}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
<Grid panes={[1, 2]}>
<Grid regions={[1, 2]}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
<Grid panes={[3, 1]}>
<Grid regions={[3, 1]}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
<Grid panes={[1, 3]}>
<Grid regions={[1, 3]}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
<Grid panes={[1, 1, 1]}>
<Grid regions={[1, 1, 1]}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
<Grid panes={[1, 1, 1, 1]}>
<Grid regions={[1, 1, 1, 1]}>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
<Surface>
<h1>Pane</h1>
<h1>Region</h1>
</Surface>
</Grid>
</>
Expand Down
Loading

0 comments on commit 476e72b

Please sign in to comment.