From 87dd7cd712d95b3b1607eac9697ac15b5b86d2fa Mon Sep 17 00:00:00 2001
From: Anshul Pinto <70994472+anshul-pinto0410@users.noreply.github.com>
Date: Thu, 29 Oct 2020 12:48:09 +0530
Subject: [PATCH] feat: made component for brands and added max w in config
 (#35)

* feat: made component for brands and added max w in config

* feat: removed max w config

* feat: updated docs

Co-authored-by: anshul-pinto0410 <anshul-pinto0410@github.com>
Co-authored-by: Pritam Sinha <pritam.sinha@cleartax.in>
---
 docs/docs/branding.md                | 25 ++++++++++++++++++++
 docs/sidebars.js                     |  1 +
 src/components/Branding/branding.css | 34 ++++++++++++++++++++++++++++
 src/index.css                        |  1 +
 4 files changed, 61 insertions(+)
 create mode 100644 docs/docs/branding.md
 create mode 100644 src/components/Branding/branding.css

diff --git a/docs/docs/branding.md b/docs/docs/branding.md
new file mode 100644
index 0000000..9f2bdb8
--- /dev/null
+++ b/docs/docs/branding.md
@@ -0,0 +1,25 @@
+---
+id: branding
+title: Branding
+sidebar_label: Branding
+---
+
+```html live
+<>
+	<div class="lil-branding">
+		<div class="lil-branding-triplet">
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844309_company_apollo.png" />
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844411_company_bosch.png" />
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844428_company_swiggy.png" />
+		</div>
+		<div class="lil-branding-triplet">
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844272_company_puma.png" />
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844717_company_ikea.png" />
+			<img class="lil-object-none" src="https://assets1.cleartax-cdn.com/cleartax/images/1602844680_company_standard_chartered.png" />
+		</div>
+		<div class="lil-brand-text">
+			trusted by your favorite brands
+		</div>
+	</div>
+</>
+```
diff --git a/docs/sidebars.js b/docs/sidebars.js
index 7cb078f..88dc8e2 100755
--- a/docs/sidebars.js
+++ b/docs/sidebars.js
@@ -15,6 +15,7 @@ module.exports = {
         items: ["border-radius", "border-width"],
       },
       "box-shadow",
+      "branding",
       "button",
       {
         type: "category",
diff --git a/src/components/Branding/branding.css b/src/components/Branding/branding.css
new file mode 100644
index 0000000..e7dfcc5
--- /dev/null
+++ b/src/components/Branding/branding.css
@@ -0,0 +1,34 @@
+.lil-brand-text {
+    bottom: -1rem;
+    right: 1rem;
+    @apply lil-absolute lil-bg-white lil-text-s-18 lil-font-medium lil-px-4 lil-text-font-300;
+}
+
+.lil-branding {
+  @apply lil-flex lil-flex-wrap lil-w-full lil-mt-24 lil-py-16 lil-px-8 lil-relative lil-mb-40 lil-border-grey-300 lil-border-md lil-justify-center lil-rounded-lg;
+}
+
+.lil-branding .lil-branding-triplet{
+    @apply lil-flex lil-py-4 lil-justify-around lil-w-1/2;
+}
+
+
+@screen md{
+    .lil-branding .lil-branding-triplet{
+        @apply lil-w-full;
+    }
+}
+
+@screen sm {
+    .lil-brand-text{
+        @apply lil-relative;
+    }
+
+  .lil-branding {
+    @apply lil-border-none lil-px-2 lil-mb-24 lil-pb-0;
+  }
+
+  .lil-branding .lil-branding-triplet{
+    @apply lil-justify-between lil-w-full;
+  }
+}
diff --git a/src/index.css b/src/index.css
index 6a899ce..2153a6d 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,4 +1,5 @@
 @import "./components/Accordian/accordian.css";
+@import "./components/Branding/branding.css";
 @import "./components/Button/button.css";
 @import "./components/Card/card.css";
 @import "./components/Promise/promise.css";