BREAKING CHANGES: Remove narrow preset of Grid in favour of produ…

…ct-specific layouts
lmc-eu · Sep 23, 2022 · 64f5588 · 64f5588
1 parent 1a27cfc
commit 64f5588
Show file tree

Hide file tree

Showing 13 changed files with 41 additions and 128 deletions.
diff --git a/packages/web-react/docs/stories/Installation.stories.mdx b/packages/web-react/docs/stories/Installation.stories.mdx
@@ -56,24 +56,22 @@ So instead of:
 ```html
 <!-- HTML -->
 <div class="Container">
-  <div class="Grid Grid--narrow">
-    <div class="Stack">
-      <div class="TextField TextField--fluid">
-        <label for="name" class="TextField__label">Name</label>
-        <input type="text" id="name" class="TextField__input" value="" />
-      </div>
-      <div class="PasswordField PasswordField--fluid">
-        <label for="password" class="PasswordField__label">Password</label>
-        <input type="password" id="password" class="PasswordField__input" value="" />
-      </div>
-      <label class="CheckboxField"
-        ><input type="checkbox" class="CheckboxField__input" value="" />
-        <span class="CheckboxField__text">
-          <span class="CheckboxField__label">Stay Logged In</span>
-        </span>
-      </label>
-      <button type="button" class="Button Button--primary Button--medium Button--block">Login</button>
+  <div class="Stack">
+    <div class="TextField TextField--fluid">
+      <label for="name" class="TextField__label">Name</label>
+      <input type="text" id="name" class="TextField__input" value="" />
     </div>
+    <div class="PasswordField PasswordField--fluid">
+      <label for="password" class="PasswordField__label">Password</label>
+      <input type="password" id="password" class="PasswordField__input" value="" />
+    </div>
+    <label class="CheckboxField"
+      ><input type="checkbox" class="CheckboxField__input" value="" />
+      <span class="CheckboxField__text">
+        <span class="CheckboxField__label">Stay Logged In</span>
+      </span>
+    </label>
+    <button type="button" class="Button Button--primary Button--medium Button--block">Login</button>
   </div>
 </div>
 ```
@@ -82,17 +80,15 @@ You can use:
 
 ```jsx
 // React
-import { Container, Grid, Stack, TextField, CheckboxField, Button } from '@lmc-eu/spirit-web-react';
+import { Container, Stack, TextField, CheckboxField, Button } from '@lmc-eu/spirit-web-react';
 ...
 <Container>
-  <Grid layout="narrow">
-    <Stack>
-      <TextField type="text" id="name" label="Name" isFluid />
-      <TextField type="password" id="password" label="Password" isFluid />
-      <CheckboxField label="Stay Logged In" />
-      <Button isBlock>Login</Button>
-    </Stack>
-  </Grid>
+  <Stack>
+    <TextField type="text" id="name" label="Name" isFluid />
+    <TextField type="password" id="password" label="Password" isFluid />
+    <CheckboxField label="Stay Logged In" />
+    <Button isBlock>Login</Button>
+  </Stack>
 </Container>
 
 ```
diff --git a/packages/web-react/docs/stories/examples/LoginForm.stories.tsx b/packages/web-react/docs/stories/examples/LoginForm.stories.tsx
@@ -7,13 +7,11 @@ export default {
 
 export const LoginForm = () => (
   <Container>
-    <Grid layout="narrow">
-      <Stack>
-        <TextField type="text" id="name" label="Name" isFluid />
-        <TextField type="password" id="password" label="Password" isFluid />
-        <CheckboxField label="Stay Logged In" />
-        <Button isBlock>Login</Button>
-      </Stack>
-    </Grid>
+    <Stack>
+      <TextField type="text" id="name" label="Name" isFluid />
+      <TextField type="password" id="password" label="Password" isFluid />
+      <CheckboxField label="Stay Logged In" />
+      <Button isBlock>Login</Button>
+    </Stack>
   </Container>
 );
diff --git a/packages/web-react/src/components/Grid/Grid.stories.tsx b/packages/web-react/src/components/Grid/Grid.stories.tsx
@@ -14,7 +14,6 @@ export default {
     cols: 12,
     tablet: 12,
     desktop: 12,
-    layout: 'narrow',
   },
 };
 
@@ -122,9 +121,3 @@ ResponsiveColumns.args = {
   tablet: 3,
   cols: 2,
 };
-
-export const NarrowColumnLayout = Template.bind({});
-NarrowColumnLayout.args = {
-  children: <ExampleBox />,
-  layout: 'narrow',
-};
diff --git a/packages/web-react/src/components/Grid/README.md b/packages/web-react/src/components/Grid/README.md
@@ -1,6 +1,6 @@
 # Grid
 
-Use Grid to build multiple column layouts. This Grid works on twelve column system, and it contains variants of 12, 6, 4, 3, 2, and 1 column for each breakpoint. And additionally one centered narrow column.
+Use Grid to build multiple column layouts. This Grid works on twelve column system, and it contains variants of 12, 6, 4, 3, 2, and 1 column for each breakpoint.
 
 **Custom layout**
 
@@ -15,22 +15,13 @@ Use Grid to build multiple column layouts. This Grid works on twelve column syst
 </Grid>
 ```
 
-**Narrow layout**
-
-```jsx
-<Grid layout="narrow">
-  <div>content</div>
-</Grid>
-```
-
 ## Available props
 
 | Name          | Type                          | Description                         |
 | ------------- | ----------------------------- | ----------------------------------- |
 | `cols`        | `1`, `2`, `3`, `4`, `6`, `12` | Number of columns to use            |
 | `desktop`     | `1`, `2`, `3`, `4`, `6`, `12` | Number of columns to use on desktop |
 | `tablet`      | `1`, `2`, `3`, `4`, `6`, `12` | Number of columns to use on tablet  |
-| `layout`      | `narrow`                      | Type of layout to display           |
 | `elementType` | HTML element                  | Element type to use for the Grid    |
 
 For detailed information see [Grid](https://github.com/lmc-eu/spirit-design-system/blob/main/packages/web/src/components/Grid/README.md) component
diff --git a/packages/web-react/src/components/Grid/__tests__/Grid.test.tsx b/packages/web-react/src/components/Grid/__tests__/Grid.test.tsx
@@ -43,13 +43,6 @@ describe('Grid', () => {
     expect(element).toHaveClass('Grid--desktop--cols-4');
   });
 
-  it('should have narrow classname', () => {
-    const dom = render(<Grid layout="narrow" />);
-
-    const element = dom.container.querySelector('div') as HTMLElement;
-    expect(element).toHaveClass('Grid--narrow');
-  });
-
   it('should have cols classname', () => {
     const dom = render(<Grid cols={2} />);
 

diff --git a/packages/web-react/src/components/Grid/__tests__/useGridStyleProps.test.tsx b/packages/web-react/src/components/Grid/__tests__/useGridStyleProps.test.tsx
@@ -10,13 +10,6 @@ describe('useGridStyleProps', () => {
     expect(result.current.classProps).toBe('Grid');
   });
 
-  it('should return narrow class', () => {
-    const props: SpiritGridProps = { layout: 'narrow' };
-    const { result } = renderHook(() => useGridStyleProps(props));
-
-    expect(result.current.classProps).toBe('Grid Grid--narrow');
-  });
-
   it('should return responsive variants', () => {
     const props: SpiritGridProps = { cols: 2, tablet: 4, desktop: 12 };
     const { result } = renderHook(() => useGridStyleProps(props));

diff --git a/packages/web-react/src/components/Grid/useGridStyleProps.tsx b/packages/web-react/src/components/Grid/useGridStyleProps.tsx
@@ -45,17 +45,12 @@ const getGridClasses = (
 };
 
 export function useGridStyleProps(props: SpiritGridProps<ElementType>): GridStyles<SpiritGridProps<ElementType>> {
-  const { layout, cols, ...restProps } = props;
-
-  if (layout && (cols || restProps.tablet || restProps.desktop)) {
-    console.warn('Grid layout and custom layout (cols, tablet, desktop) cannot be used together.');
-  }
+  const { cols, ...restProps } = props;
 
   const gridClass = useClassNamePrefix('Grid');
-  const gridLayoutClass = `${gridClass}--${layout}`;
   const gridColsClass = `${gridClass}--cols-${cols}`;
   const { props: modifiedProps, gridClasses } = getGridClasses(gridClass, restProps);
-  const classes = classNames(gridClass, { [gridColsClass]: cols }, gridClasses, { [gridLayoutClass]: layout });
+  const classes = classNames(gridClass, { [gridColsClass]: cols }, gridClasses);
 
   return {
     classProps: classes,

diff --git a/packages/web-react/src/types/grid.ts b/packages/web-react/src/types/grid.ts
@@ -2,7 +2,6 @@ import { ElementType, JSXElementConstructor } from 'react';
 import { ChildrenProps, StyleProps, TransferProps } from './shared';
 
 export type GridColumns = 1 | 2 | 3 | 4 | 5 | 6 | 12;
-export type GridLayouts = 'narrow';
 
 export interface GridElementTypeProps<T extends ElementType = 'div'> {
   /**
@@ -19,14 +18,7 @@ export interface GridCustomLayoutProps {
   desktop?: GridColumns;
 }
 
-export interface GridLayoutProps {
-  layout?: GridLayouts;
-}
-
-export interface GridProps<T extends ElementType = 'div'>
-  extends GridElementTypeProps<T>,
-    GridCustomLayoutProps,
-    GridLayoutProps {}
+export interface GridProps<T extends ElementType = 'div'> extends GridElementTypeProps<T>, GridCustomLayoutProps {}
 
 export interface SpiritGridProps<T extends ElementType = 'div'>
   extends GridProps<T>,

diff --git a/packages/web-twig/src/Resources/components/Grid/Grid.twig b/packages/web-twig/src/Resources/components/Grid/Grid.twig
@@ -4,18 +4,16 @@
 {%- set _cols = props.cols | default(null) -%}
 {%- set _desktop = props.desktop | default(null) -%}
 {%- set _elementType = props.elementType | default('div') -%}
-{%- set _layout = props.layout | default(null) -%}
 {%- set _tablet = props.tablet | default(null) -%}
 
 {# Class names #}
 {%- set _colsClassName = _cols ? _spiritClassPrefix ~ 'Grid--cols-' ~ _cols : null -%}
 {%- set _desktopClassName = _desktop ? _spiritClassPrefix ~ 'Grid--desktop--cols-' ~ _desktop : null -%}
-{%- set _layoutClassName = _cols or _tablet or _desktop ? null : _spiritClassPrefix ~ 'Grid--' ~ _layout -%}
 {%- set _tabletClassName = _tablet ? _spiritClassPrefix ~ 'Grid--tablet--cols-' ~ _tablet : null -%}
 {%- set _rootClassName = _spiritClassPrefix ~ 'Grid' -%}
 
 {# Miscellaneous #}
-{%- set _classNames = [ _rootClassName, _layoutClassName, _colsClassName, _tabletClassName, _desktopClassName, _class ] -%}
+{%- set _classNames = [ _rootClassName, _colsClassName, _tabletClassName, _desktopClassName, _class ] -%}
 
 <{{ _elementType }}
     {{ mainProps(props) }}

diff --git a/packages/web-twig/src/Resources/components/Grid/README.md b/packages/web-twig/src/Resources/components/Grid/README.md
@@ -5,7 +5,7 @@ This is Twig implementation of the [Grid] component.
 Basic example usage:
 
 ```html
-<Grid layout="narrow">
+<Grid>
   <span>col 1</span>
   <span>col 2</span>
   <span>col 3</span>
@@ -49,14 +49,13 @@ Without lexer:
 
 ## API
 
-| Prop name     | Type                               | Default | Required | Description                          |
-| ------------- | ---------------------------------- | ------- | -------- | ------------------------------------ |
-| `cols`        | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use             |
-| `desktop`     | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use on desktop  |
-| `tablet`      | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use on tablet   |
-| `layout`      | `narrow`                           | `null`  | no       | Type of predefined layout to display |
-| `class`       | `string`                           | `null`  | no       | Custom CSS class                     |
-| `elementType` | `string`                           | `div`   | no       | HTML tag to render                   |
+| Prop name     | Type                               | Default | Required | Description                         |
+| ------------- | ---------------------------------- | ------- | -------- | ----------------------------------- |
+| `cols`        | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use            |
+| `desktop`     | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use on desktop |
+| `tablet`      | `1`, `2`, `3`, `4`, `5`, `6`, `12` | `null`  | no       | Number of columns to use on tablet  |
+| `class`       | `string`                           | `null`  | no       | Custom CSS class                    |
+| `elementType` | `string`                           | `div`   | no       | HTML tag to render                  |
 
 You can add `id`, `data-*` or `aria-*` attributes to further extend component's
 descriptiveness and accessibility.

diff --git a/packages/web/src/scss/components/Grid/README.md b/packages/web/src/scss/components/Grid/README.md
@@ -53,11 +53,3 @@ Responsive columns:
   <span>col 6</span>
 </div>
 ```
-
-Responsive narrow layout variant:
-
-```html
-<div class="Grid Grid--narrow">
-  <span>Narrow col</span>
-</div>
-```
diff --git a/packages/web/src/scss/components/Grid/_Grid.scss b/packages/web/src/scss/components/Grid/_Grid.scss
@@ -12,19 +12,3 @@
 }
 
 @include tools.equal-columns(theme.$grid-equal-columns, theme.$breakpoints);
-
-.Grid--narrow {
-    grid-template-columns: repeat(theme.$grid-columns, 1fr);
-}
-
-.Grid--narrow > * {
-    grid-column: span 12;
-
-    @include breakpoint.up(map.get(theme.$breakpoints, tablet)) {
-        grid-column: 2 / span 10;
-    }
-
-    @include breakpoint.up(map.get(theme.$breakpoints, desktop)) {
-        grid-column: 4 / span 6;
-    }
-}
diff --git a/packages/web/src/scss/components/Grid/index.html b/packages/web/src/scss/components/Grid/index.html
@@ -65,16 +65,5 @@ <h2 class="docs-Heading">Responsive Columns</h2>
     </div>
 
   </section>
-  <section class="docs-Section">
-
-    <h3 class="docs-Heading">Narrow Column Layout</h3>
-
-    <div class="Grid Grid--narrow">
-      <div class="docs-Box text-center">
-        Full on mobile, 10 cols on tablet and 6 cols on desktop. Centered.
-      </div>
-    </div>
-
-  </section>
 
 {{/layout/plain }}