Merge branch 'master' into rcsl/add-flight-change-illus

docs/plugins/contributors/fetchedUsers.json

@@ -119,21 +119,6 @@
     "position": "",
     "github": "https://github.com/janpanschab"
   },
-  {
-    "id": 284263,
-    "name": "Jan Škrášek",
-    "username": "hrach",
-    "error": "",
-    "twitter": "hrachcz",
-    "website": "https://hrach.dev",
-    "info": "Staff Engineer in Kiwi.com • Kotlin and Android • JetPack Compose in Orbit Design System • Nextras Orm",
-    "core": false,
-    "active": false,
-    "dribble": "",
-    "avatar_url": "https://avatars.githubusercontent.com/u/284263?v=4",
-    "position": "",
-    "github": "https://github.com/hrach"
-  },
   {
     "id": 2174629,
     "name": "Jaroslav Kubíček",
@@ -344,6 +329,21 @@
     "position": "",
     "github": "https://github.com/mainframev"
   },
+  {
+    "id": 821851,
+    "name": "Vojtěch Bulant",
+    "username": "vbulant",
+    "error": "",
+    "twitter": null,
+    "website": "http://twitter.com/vbulant",
+    "info": null,
+    "core": false,
+    "active": false,
+    "dribble": "",
+    "avatar_url": "https://avatars.githubusercontent.com/u/821851?v=4",
+    "position": "",
+    "github": "https://github.com/vbulant"
+  },
   {
     "id": 1473642,
     "name": "Václav Šír",

docs/src/__examples__/Layout/CUSTOM.tsx

@@ -5,32 +5,17 @@ import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";
 export default {
   Example: () => {
     const divStyle = {
-      minHeight: `${defaultTheme.orbit.heightIllustrationMedium}`,
-      background: `${defaultTheme.orbit.backgroundBody}`,
+      minHeight: defaultTheme.orbit.heightIllustrationMedium,
+      background: defaultTheme.orbit.backgroundBody,
     };
 
     return (
-      <Layout type="Search">
-        <LayoutColumn hideOn={["smallMobile", "mediumMobile"]}>
-          <div style={divStyle}>
-            <Text>
-              This column is hidden on <code>mediumMobile</code> and smaller screens.
-            </Text>
-          </div>
-        </LayoutColumn>
+      <Layout type="MMB">
         <LayoutColumn as="span">
           <div style={divStyle}>
             <Text>
-              This column is designed for the main content. It&apos;s always visible. It&apos;s a{" "}
-              <code>span</code> element instead of the default <code>div</code>.
-            </Text>
-          </div>
-        </LayoutColumn>
-        <LayoutColumn hideOn={["smallMobile", "largeDesktop"]}>
-          <div style={divStyle}>
-            <Text>
-              This column is hidden on very small (<code>smallMobile</code>) and very large (
-              <code>largeDesktop</code>) screens.
+              This column is rendered as a<code>span</code> element instead of the default{" "}
+              <code>div</code>.
             </Text>
           </div>
         </LayoutColumn>

docs/src/__examples__/Layout/MMB.tsx

@@ -12,7 +12,7 @@ export default {
       <Layout type="MMB">
         <LayoutColumn>
           <div style={style}>
-            <Text>This column is designed for the main content. It&apos;s always visible.</Text>
+            <Text>This column is designed for the main content.</Text>
           </div>
         </LayoutColumn>
       </Layout>

docs/src/__examples__/Layout/SEARCH.tsx

@@ -12,23 +12,17 @@ export default {
       <Layout type="Search">
         <LayoutColumn>
           <div style={divStyle}>
-            <Text>
-              This column is designed for filters. It&apos;s hidden on <code>largeMobile</code> and
-              smaller screens.
-            </Text>
+            <Text>This column is designed for filters.</Text>
           </div>
         </LayoutColumn>
         <LayoutColumn>
           <div style={divStyle}>
-            <Text>This column is designed for the main content. It&apos;s always visible.</Text>
+            <Text>This column is designed for the main content.</Text>
           </div>
         </LayoutColumn>
         <LayoutColumn>
           <div style={divStyle}>
-            <Text>
-              This column is designed for promotions. It&apos;s hidden on <code>desktop</code> and
-              smaller screens.
-            </Text>
+            <Text>This column is designed for promotions.</Text>
           </div>
         </LayoutColumn>
       </Layout>

docs/src/data/tailwind-migration-status.yaml

@@ -49,7 +49,7 @@ ItinerarySegmentBanner: false
 ItinerarySegmentDetail: false
 ItinerarySegmentStop: false
 Layout: true
-LayoutColumn: false
+LayoutColumn: true
 LinkList: true
 OrbitList: true
 List: true

docs/src/documentation/03-components/12-layout/layout/01-guidelines.mdx

@@ -28,7 +28,6 @@ To choose the best component for your use case, see our [developing layouts guid
 
 When choosing a layout with columns that change,
 make sure the same content appears no matter the width.
-If a column is hidden, move its content to a different one.
 
 Use progressive disclosure to keep content close by.
 Consider a [Hide component](/components/responsive/hide/) to vary what appears in each column.
@@ -53,12 +52,12 @@ On smaller screens, the second column is placed underneath the first.
 
 ### MMB layout
 
-The MMB layout is a one-column layout with the same visibility no matter the screen size.
+The MMB layout is a one-column layout.
 
 <ReactExample exampleId="Layout-mmb" />
 
 ### Search layout
 
-The Search layout is a three-column layout with one column always visible and the others variable.
+The Search layout is a three-column layout on larger screens. On smaller screens, the columns are placed below each other.
 
 <ReactExample exampleId="Layout-search" />

packages/orbit-components/src/Layout/Layout.ct-story.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+
+import Wizard, { WizardStep } from "../Wizard";
+import Card, { CardSection } from "../Card";
+
+import Layout, { LayoutColumn } from ".";
+
+const Fill = ({ children }) => <div style={{ backgroundColor: "honeydew" }}>{children}</div>;
+
+export function LayoutStorySearch() {
+  return (
+    <Layout type="Search">
+      <LayoutColumn>
+        <Fill>Filters</Fill>
+      </LayoutColumn>
+      <LayoutColumn>
+        <Fill>Results</Fill>
+      </LayoutColumn>
+      <LayoutColumn>
+        <Fill>Sidebar</Fill>
+      </LayoutColumn>
+    </Layout>
+  );
+}
+
+export function LayoutStoryBooking() {
+  return (
+    <Layout type="Booking">
+      <LayoutColumn>
+        <Fill>Wizard</Fill>
+      </LayoutColumn>
+      <LayoutColumn>
+        <Fill>Form</Fill>
+      </LayoutColumn>
+      <LayoutColumn>
+        <Fill>Summary</Fill>
+      </LayoutColumn>
+    </Layout>
+  );
+}
+
+export function LayoutStoryMMB() {
+  return (
+    <Layout type="MMB">
+      <LayoutColumn>
+        <Fill>Main</Fill>
+      </LayoutColumn>
+    </Layout>
+  );
+}
+
+export function LayoutStoryWizard() {
+  return (
+    <Layout type="Booking">
+      <LayoutColumn>
+        <Fill>
+          {/* eslint-disable-next-line orbit-components/unique-id */}
+          <Wizard activeStep={3} completedSteps={3} id="wizard">
+            <WizardStep title="Search" />
+            <WizardStep title="Passenger details" />
+            <WizardStep title="Ticket fare" />
+            <WizardStep title="Customize your trip" />
+            <WizardStep title="Overview & Payment" />
+          </Wizard>
+        </Fill>
+      </LayoutColumn>
+      <LayoutColumn>
+        <Fill>Form</Fill>
+      </LayoutColumn>
+      <LayoutColumn>
+        <Fill>Summary</Fill>
+      </LayoutColumn>
+    </Layout>
+  );
+}
+
+export function LayoutStoryCard() {
+  return (
+    <Layout type="Booking">
+      <LayoutColumn>
+        <Card>
+          <CardSection>
+            <Fill>Wizard</Fill>
+          </CardSection>
+        </Card>
+      </LayoutColumn>
+      <LayoutColumn>
+        <Card>
+          <CardSection>
+            <Fill>Form</Fill>
+          </CardSection>
+        </Card>
+      </LayoutColumn>
+      <LayoutColumn>
+        <Card>
+          <CardSection>
+            <Fill>Summary</Fill>
+          </CardSection>
+        </Card>
+      </LayoutColumn>
+    </Layout>
+  );
+}

packages/orbit-components/src/Layout/Layout.ct.tsx

@@ -0,0 +1,53 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import {
+  LayoutStorySearch,
+  LayoutStoryBooking,
+  LayoutStoryMMB,
+  LayoutStoryWizard,
+  LayoutStoryCard,
+} from "./Layout.ct-story";
+import RenderInRtl from "../utils/rtl/RenderInRtl";
+
+test.describe("visual Layout", () => {
+  test("search", async ({ mount }) => {
+    const component = await mount(<LayoutStorySearch />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("booking", async ({ mount }) => {
+    const component = await mount(<LayoutStoryBooking />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("mmb", async ({ mount }) => {
+    const component = await mount(<LayoutStoryMMB />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("rtl", async ({ mount }) => {
+    const component = await mount(
+      <RenderInRtl>
+        <LayoutStoryBooking />
+      </RenderInRtl>,
+    );
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("wizard", async ({ mount }) => {
+    const component = await mount(<LayoutStoryWizard />);
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("card", async ({ mount }) => {
+    const component = await mount(<LayoutStoryCard />);
+
+    await expect(component).toHaveScreenshot();
+  });
+});

packages/orbit-components/src/Layout/Layout.stories.tsx

@@ -1,16 +1,14 @@
 import * as React from "react";
-import styled from "styled-components";
 
 import Card, { CardSection } from "../Card";
 import RenderInRtl from "../utils/rtl/RenderInRtl";
 import Wizard, { WizardStep } from "../Wizard";
 
 import Layout, { LayoutColumn } from ".";
 
-const CustomDiv = styled.div`
-  height: 400px;
-  background: rgba(0, 169, 145, 0.2);
-`;
+const CustomDiv = ({ children }: { children?: React.ReactNode }) => (
+  <div style={{ height: "400px", backgroundColor: "rgba(0, 169, 145, 0.2)" }}>{children}</div>
+);
 
 export default {
   title: "Layout",
@@ -99,7 +97,7 @@ export const Customized = () => (
         </CardSection>
       </Card>
     </LayoutColumn>
-    <LayoutColumn hideOn={["largeMobile"]} as="span">
+    <LayoutColumn as="span">
       <Card>
         <CardSection>
           <CustomDiv />