@purpurds/grid 4.6.0 → 5.1.0

package/src/col.module.scss

@@ -1,62 +0,0 @@
-@import "@purpurds/tokens/breakpoint/variables";
-
-$columns: 12;
-
-@mixin validate-col-numbers($noOfCols) {
-  @if not(type-of($noOfCols) == "number") {
-    @error 'Invalid col value type "#{type-of($noOfCols)}"';
-  }
-  @if ($noOfCols < 1 or $noOfCols > 12) {
-    @error 'Invalid col value #{$noOfCols}, col number should be from 1 to 12';
-  }
-}
-
-@mixin purpur-col($noOfCols: 1) {
-  --padding-col: var(--purpur-spacing-gutter-sm);
-
-  @include validate-col-numbers($noOfCols);
-  box-sizing: border-box;
-  display: block;
-  padding-left: calc(var(--padding-col) / 2);
-  padding-right: calc(var(--padding-col) / 2);
-  width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});
-
-  @media screen and (min-width: #{$purpur-breakpoint-md}) {
-    --padding-col: var(--purpur-spacing-gutter-md);
-  }
-  @media screen and (min-width: #{$purpur-breakpoint-lg}) {
-    --padding-col: var(--purpur-spacing-gutter-lg);
-  }
-}
-
-@mixin purpur-col-md($noOfCols: 1) {
-  @media screen and (min-width: #{$purpur-breakpoint-md}) {
-    @include validate-col-numbers($noOfCols);
-    width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});
-  }
-}
-
-@mixin purpur-col-lg($noOfCols: 1) {
-  @media screen and (min-width: #{$purpur-breakpoint-lg}) {
-    @include validate-col-numbers($noOfCols);
-    width: calc(((100% - 1px) / #{$columns}) * #{$noOfCols});
-  }
-}
-
-.purpur-col {
-  @for $i from 12 through 1 {
-    &.purpur-col-#{$i} {
-      @include purpur-col($i);
-    }
-    @media screen and (min-width: #{$purpur-breakpoint-md}) {
-      &.purpur-col-md-#{$i} {
-        @include purpur-col-md($i);
-      }
-    }
-    @media screen and (min-width: #{$purpur-breakpoint-lg}) {
-      &.purpur-col-lg-#{$i} {
-        @include purpur-col-lg($i);
-      }
-    }
-  }
-}

package/src/col.tsx

@@ -1,43 +0,0 @@
-import React, { ReactNode } from "react";
-import c from "classnames";
-
-import styles from "./col.module.scss";
-
-export type ColumnWidthType = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export type ColProps = {
-  children: ReactNode;
-  className?: string;
-  ["data-testid"]?: string;
-  width?: ColumnWidthType;
-  widthMd?: ColumnWidthType;
-  widthLg?: ColumnWidthType;
-};
-
-const rootClassName = "purpur-col";
-
-export const Col = ({
-  children,
-  ["data-testid"]: dataTestId,
-  width,
-  className,
-  widthMd,
-  widthLg,
-  ...props
-}: ColProps) => {
-  const classes = c([
-    className,
-    styles[rootClassName],
-    {
-      [styles[`${rootClassName}-${width}`]]: width,
-      [styles[`${rootClassName}-md-${widthMd}`]]: widthMd,
-      [styles[`${rootClassName}-lg-${widthLg}`]]: widthLg,
-    },
-  ]);
-
-  return (
-    <div className={`${classes} ${rootClassName}`} data-testid={dataTestId} {...props}>
-      {children}
-    </div>
-  );
-};

package/src/grid.col.stories.tsx

@@ -1,79 +0,0 @@
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { Grid } from "./grid";
-
-const meta: Meta<typeof Grid.Col> = {
-  title: "Components/Grid",
-  component: Grid.Col,
-  parameters: {
-    design: [
-      {
-        name: "Grid",
-        type: "figma",
-        url:
-          "https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A10669&mode=design&t=lPtp9KR80NhTNx9u-1",
-      },
-    ],
-    storyHead: {
-      title: "Grid.Col",
-    },
-  },
-  argTypes: {
-    ["data-testid"]: { control: { type: "text" } },
-    className: { control: { type: "text" } },
-    children: { control: { type: "text" } },
-    width: { control: { type: "range", min: 1, max: 12, step: 1 } },
-    widthMd: { control: { type: "range", min: 1, max: 12, step: 1 } },
-    widthLg: { control: { type: "range", min: 1, max: 12, step: 1 } },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Grid.Col>;
-
-export const Column: Story = {
-  args: {
-    width: 12,
-    widthMd: 12,
-    widthLg: 12,
-  },
-  render: ({ children, ...args }) => (
-    <Grid>
-      <Grid.Row>
-        <Grid.Col {...args}>
-          <p>Column 1</p>
-          {children}
-        </Grid.Col>
-        <Grid.Col {...args}>
-          <p>Column 2</p>
-          {children}
-        </Grid.Col>
-        <Grid.Col {...args}>
-          <p>Column 3</p>
-          {children}
-        </Grid.Col>
-        <Grid.Col {...args}>
-          <p>Column 4</p>
-          {children}
-        </Grid.Col>
-        <Grid.Col {...args}>
-          <p>Column 5</p>
-          {children}
-        </Grid.Col>
-        <Grid.Col {...args}>
-          <p>Column 6</p>
-          {children}
-        </Grid.Col>
-        <Grid.Col {...args}>
-          <p>Column 7</p>
-          {children}
-        </Grid.Col>
-        <Grid.Col {...args}>
-          <p>Column 8</p>
-          {children}
-        </Grid.Col>
-      </Grid.Row>
-    </Grid>
-  ),
-};

package/src/grid.row.stories.tsx

@@ -1,67 +0,0 @@
-/* eslint-disable react/prop-types */
-import React from "react";
-import type { Meta, StoryObj } from "@storybook/react";
-
-import { Grid } from "./grid";
-import { RowSpacingSizes } from "./row";
-
-const meta: Meta<typeof Grid.Row> = {
-  title: "Components/Grid",
-  component: Grid.Row,
-  parameters: {
-    design: [
-      {
-        name: "Grid",
-        type: "figma",
-        url:
-          "https://www.figma.com/file/2QIcZVqP99ZKY4rNW7VuSx/Purpur-DS---Foundations-Library?type=design&node-id=5704%3A10669&mode=design&t=lPtp9KR80NhTNx9u-1",
-      },
-    ],
-    storyHead: {
-      title: "Grid.Row",
-    },
-  },
-  argTypes: {
-    ["data-testid"]: { control: { type: "text" } },
-    className: { control: { type: "text" } },
-    children: { control: { type: "text" } },
-    colGap: { control: { type: "boolean" } },
-    spacing: {
-      control: { type: "select" },
-      options: [undefined, ...RowSpacingSizes],
-    },
-  },
-};
-export default meta;
-
-type Story = StoryObj<typeof Grid.Row>;
-
-export const Row: Story = {
-  args: {
-    colGap: false,
-  },
-  render: ({ children, ...args }) => (
-    <Grid>
-      <Grid.Row {...args}>
-        <Grid.Col width={12} widthMd={6} widthLg={4}>
-          <p>Column 1 - Row 1</p>
-          {children}
-        </Grid.Col>
-        <Grid.Col width={12} widthMd={6} widthLg={4}>
-          <p>Column 2 - Row 1</p>
-          {children}
-        </Grid.Col>
-      </Grid.Row>
-      <Grid.Row {...args}>
-        <Grid.Col width={12} widthMd={6} widthLg={4}>
-          <p>Column 3 - Row 2</p>
-          {children}
-        </Grid.Col>
-        <Grid.Col width={12} widthMd={6} widthLg={4}>
-          <p>Column 4 - Row 2</p>
-          {children}
-        </Grid.Col>
-      </Grid.Row>
-    </Grid>
-  ),
-};

package/src/row.module.scss

@@ -1,58 +0,0 @@
-@import "@purpurds/tokens/breakpoint/variables";
-
-.purpur-row {
-  --margin: var(--purpur-spacing-gutter-sm);
-
-  box-sizing: border-box;
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: left;
-  margin-left: calc(-1 * var(--margin) / 2);
-  margin-right: calc(-1 * var(--margin) / 2);
-
-  @media screen and (min-width: #{$purpur-breakpoint-md}) {
-    --margin: var(--purpur-spacing-gutter-md);
-  }
-  @media screen and (min-width: #{$purpur-breakpoint-lg}) {
-    --margin: var(--purpur-spacing-gutter-lg);
-  }
-  @media screen and (min-width: #{$purpur-breakpoint-xl}) {
-    --margin: var(--purpur-spacing-gutter-xl);
-  }
-
-  &:last-of-type {
-    margin-bottom: 0;
-  }
-
-  &--sm {
-    margin-bottom: var(--purpur-spacing-gutter-sm);
-  }
-
-  &--md {
-    margin-bottom: var(--purpur-spacing-gutter-md);
-  }
-
-  &--lg {
-    margin-bottom: var(--purpur-spacing-gutter-md);
-
-    @media screen and (min-width: #{$purpur-breakpoint-lg}) {
-      margin-bottom: var(--purpur-spacing-gutter-lg);
-    }
-  }
-
-  &--col-gap {
-    margin-top: calc(-1 * var(--purpur-spacing-gutter-sm));
-
-    @media screen and (min-width: #{$purpur-breakpoint-md}) {
-      margin-top: calc(-1 * var(--purpur-spacing-gutter-md));
-    }
-
-    > :global(.purpur-col) {
-      margin-top: var(--purpur-spacing-gutter-sm);
-
-      @media screen and (min-width: #{$purpur-breakpoint-md}) {
-        margin-top: var(--purpur-spacing-gutter-md);
-      }
-    }
-  }
-}

package/src/row.tsx

@@ -1,47 +0,0 @@
-import React, { ReactNode } from "react";
-import c from "classnames";
-
-import styles from "./row.module.scss";
-
-export const RowSpacings = {
-  SM: "sm",
-  MD: "md",
-  LG: "lg",
-} as const;
-
-export const RowSpacingSizes = Object.values(RowSpacings);
-export type RowSpacingsType = (typeof RowSpacings)[keyof typeof RowSpacings];
-
-export type RowProps = {
-  className?: string;
-  colGap?: boolean;
-  ["data-testid"]?: string;
-  children: ReactNode;
-  spacing?: RowSpacingsType;
-};
-
-const rootClassName = "purpur-row";
-
-export const Row = ({
-  children,
-  ["data-testid"]: dataTestId,
-  spacing,
-  className,
-  colGap,
-  ...props
-}: RowProps) => {
-  const classes = c([
-    className,
-    styles[rootClassName],
-    {
-      [styles[`${rootClassName}--${spacing}`]]: spacing,
-      [styles[`${rootClassName}--col-gap`]]: colGap,
-    },
-  ]);
-
-  return (
-    <div className={classes} data-testid={dataTestId} {...props}>
-      {children}
-    </div>
-  );
-};