Added BpkPanel (#1039)

* Added BpkPanel.kt

* Added Panel story.

* Updated DocsRegistry.kt

* Added tests.

* Added docs.

* Added screenshots tests

* Added screenshots

* Added licence headers.

* Ktlint fix.

* Updated panel samples.

* Updated screenshot tests

* Updated screenshots

app/src/androidTest/java/net/skyscanner/backpack/compose/panel/BpkPanelTest.kt

@@ -0,0 +1,50 @@
+/**
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package net.skyscanner.backpack.compose.panel
+
+import androidx.test.ext.junit.runners.AndroidJUnit4
+import net.skyscanner.backpack.BpkSnapshotTest
+import net.skyscanner.backpack.BpkTestVariant
+import net.skyscanner.backpack.demo.compose.DefaultPanelExample
+import net.skyscanner.backpack.demo.compose.NoPaddingPanelExample
+import org.junit.Before
+import org.junit.Test
+import org.junit.runner.RunWith
+
+@RunWith(AndroidJUnit4::class)
+class BpkPanelTest : BpkSnapshotTest() {
+
+  @Before
+  fun setup() {
+    setDimensions(height = 200, width = 200)
+  }
+
+  @Test
+  fun padded() = composed {
+    DefaultPanelExample()
+  }
+
+  @Test
+  fun noPadding() {
+    assumeVariant(BpkTestVariant.Default, BpkTestVariant.DarkMode)
+    composed {
+      NoPaddingPanelExample()
+    }
+  }
+}

app/src/androidTest/java/net/skyscanner/backpack/docs/DocsRegistry.kt

@@ -79,7 +79,8 @@ object DocsRegistry {
     ViewScreenshot("Nav Bar - With Menu", "navigation", ::setupNavBarCollapsed),
     ViewScreenshot("Nudger", "all"),
     ViewScreenshot("Overlay", "all"),
-    ViewScreenshot("Panel", "all"),
+    ViewScreenshot("Panel - View", "all"),
+    ComposeScreenshot("Panel - Compose", "all"),
     ViewScreenshot("RadioButton - View", "default"),
     ComposeScreenshot("RadioButton - Compose", "default"),
     ViewScreenshot("Rating - Default", "default"),

app/src/main/java/net/skyscanner/backpack/demo/compose/PanelStory.kt

@@ -0,0 +1,93 @@
+/**
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package net.skyscanner.backpack.demo.compose
+
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.fillMaxWidth
+import androidx.compose.foundation.layout.padding
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Preview
+import net.skyscanner.backpack.compose.panel.BpkPanel
+import net.skyscanner.backpack.compose.panel.BpkPanelPadding
+import net.skyscanner.backpack.compose.text.BpkText
+import net.skyscanner.backpack.compose.theme.BpkTheme
+import net.skyscanner.backpack.compose.tokens.BpkSpacing
+import net.skyscanner.backpack.demo.R
+
+@Composable
+fun PanelStory() {
+  Column(
+    modifier = Modifier.padding(BpkSpacing.Base),
+    verticalArrangement = Arrangement.spacedBy(BpkSpacing.Base),
+  ) {
+
+    val panelModifier = Modifier
+      .fillMaxWidth()
+      .weight(1f)
+
+    BpkText(
+      text = stringResource(id = R.string.panel_default),
+      style = BpkTheme.typography.heading3,
+    )
+    DefaultPanelExample(panelModifier)
+
+    BpkText(
+      text = stringResource(id = R.string.panel_no_padding),
+      style = BpkTheme.typography.heading3,
+    )
+    NoPaddingPanelExample(Modifier.fillMaxWidth())
+  }
+}
+
+@Composable
+@Preview
+fun DefaultPanelExample(
+  modifier: Modifier = Modifier,
+) {
+  BpkPanel(
+    modifier = modifier,
+    contentAlignment = Alignment.Center,
+  ) {
+    BpkText(
+      text = stringResource(R.string.stub),
+      overflow = TextOverflow.Clip,
+    )
+  }
+}
+
+@Composable
+fun NoPaddingPanelExample(
+  modifier: Modifier = Modifier,
+) {
+  BpkPanel(
+    modifier = modifier,
+    contentAlignment = Alignment.Center,
+    padding = BpkPanelPadding.None,
+  ) {
+    BpkText(
+      text = stringResource(R.string.stub),
+      overflow = TextOverflow.Clip,
+    )
+  }
+}

app/src/main/java/net/skyscanner/backpack/demo/data/ComponentRegistry.kt

@@ -27,6 +27,7 @@ import net.skyscanner.backpack.demo.compose.ButtonsStory
 import net.skyscanner.backpack.demo.compose.CardStory
 import net.skyscanner.backpack.demo.compose.HeadingStyleStory
 import net.skyscanner.backpack.demo.compose.HeroStyleStory
+import net.skyscanner.backpack.demo.compose.PanelStory
 import net.skyscanner.backpack.demo.compose.RadioButtonStory
 import net.skyscanner.backpack.demo.compose.SwitchStory
 import net.skyscanner.backpack.demo.compose.ThemeStory
@@ -272,7 +273,13 @@ object ComponentRegistry {
     ),
     "Nudger" story NodeData { Story of R.layout.fragment_nudger },
     "Overlay" story NodeData { Story of R.layout.fragment_overlay },
-    "Panel" story NodeData { Story of R.layout.fragment_panel },
+    "Panel" story NodeData(
+      { children -> TabStory of children },
+      mapOf(
+        TAB_TITLE_VIEW story NodeData { Story of R.layout.fragment_panel },
+        TAB_TITLE_COMPOSE composeStory { PanelStory() },
+      )
+    ),
     "RadioButton" story NodeData(
       { children -> TabStory of children },
       mapOf(

app/src/main/res/values/strings.xml

@@ -107,4 +107,7 @@
   <string name="toggle_disabled_checked">Disabled Checked</string>
   <string name="toggle_custom_title">Custom</string>
   <string name="toggle_custom_subtitle">Content</string>
+
+  <string name="panel_default">Default</string>
+  <string name="panel_no_padding">No padding</string>
 </resources>

backpack-compose/src/main/kotlin/net/skyscanner/backpack/compose/panel/BpkPanel.kt

@@ -0,0 +1,67 @@
+/**
+ * Backpack for Android - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner Ltd
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+package net.skyscanner.backpack.compose.panel
+
+import androidx.compose.foundation.border
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.shape.RoundedCornerShape
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.unit.dp
+import net.skyscanner.backpack.compose.theme.BpkTheme
+import net.skyscanner.backpack.compose.tokens.BpkBorderRadius
+import net.skyscanner.backpack.compose.tokens.BpkSpacing
+
+sealed interface BpkPanelPadding {
+
+  object None : BpkPanelPadding
+
+  object Base : BpkPanelPadding
+
+}
+
+@Composable
+fun BpkPanel(
+  modifier: Modifier = Modifier,
+  contentAlignment: Alignment = Alignment.TopStart,
+  propagateMinConstraints: Boolean = false,
+  padding: BpkPanelPadding = BpkPanelPadding.Base,
+  content: @Composable BoxScope.() -> Unit
+) {
+  Box(
+    contentAlignment = contentAlignment,
+    propagateMinConstraints = propagateMinConstraints,
+    content = content,
+    modifier = modifier
+      .clip(PanelShape)
+      .border(1.dp, BpkTheme.colors.line, PanelShape)
+      .padding(
+        all = when (padding) {
+          BpkPanelPadding.None -> 0.dp
+          BpkPanelPadding.Base -> BpkSpacing.Base
+        },
+      ),
+  )
+}
+
+private val PanelShape = RoundedCornerShape(BpkBorderRadius.Md)

docs/compose/Panel/README.md

@@ -0,0 +1,28 @@
+# Panel
+
+## Installation
+
+Backpack Compose is available through [Maven Central](https://search.maven.org/artifact/net.skyscanner.backpack/backpack-compose). Check the main [Readme](https://github.com/skyscanner/backpack-android#installation) for a complete installation guide.
+
+## Usage
+
+Example of a Panel:
+
+```Kotlin
+import net.skyscanner.backpack.compose.panel.BpkPanel
+
+BpkPanel {
+    content()
+}
+```
+
+Example of a Panel with no padding:
+
+```Kotlin
+import net.skyscanner.backpack.compose.panel.BpkPanel
+import net.skyscanner.backpack.compose.panel.BpkPanelPadding
+
+BpkPanel(padding = BpkPanelPadding.None) {
+  content()
+}
+```