Add demo KB page

deskpro · Jun 28, 2019 · ab58807 · ab58807
1 parent 61ff17f
commit ab58807
Show file tree

Hide file tree

Showing 52 changed files with 2,600 additions and 1,756 deletions.
diff --git a/packages/style/src/Icons.css b/packages/style/src/Icons.css
@@ -1,6 +1,3 @@
-@import "fonts.css";
-@import "vars.css";
-
 svg { fill: var(--grey); }
 
 .dp-po-Icon.Icon--white svg { fill: #fff; }
@@ -31,22 +28,22 @@ svg { fill: var(--grey); }
 .dp-po-Icon.Icon--pink-light svg { fill: #fae8f0; }
 .dp-po-Icon.Icon--purple-light svg { fill: #ebe4f2; }
 
-.dp-IconsWrapper {
+.dp-po-IconsWrapper.Icons-Demo {
   color: inherit;
   display: flex;
   flex-wrap: wrap;
 }
 
-.dp-IconsWrapper > span {
-  align-items: center;
-  color: var(--grey-darkest);
-  display: flex;
+.dp-po-IconsWrapper.Icons-Demo > span {
   flex: 0 0 14.2%;
-  font: var(--b-2);
   padding-bottom: 30px;
+  display: flex;
+  align-items: center;
+  font: var(--b-2);
+  color: var(--grey-darkest);
 }
 
-.dp-IconsWrapper .dp-po-Icon {
+.dp-po-IconsWrapper .dp-po-Icon {
   margin-right: 10px;
 }
 
@@ -58,12 +55,12 @@ svg { fill: var(--grey); }
 
 /* Messenger - Icons */
 
-.dp-IconsWrapper.Messenger-Icons > span {
+.dp-po-IconsWrapper.Messenger-Icons > span {
   flex: 0 0 50%;
   max-width: 400px;
 }
 
 .Messenger-Icons .dp-po-Icon {
-  height: 36px;
   width: 36px;
-}
+  height: 36px;
+}
diff --git a/packages/style/src/arrows.css b/packages/style/src/arrows.css
@@ -1,63 +1,63 @@
 /* arrow */
 
 .dp-po-arrow {
-  cursor: pointer;
-  display: inline-block;
-  height: 12px;
-  position: relative;
-  width: 8px;
+	position: relative;
+	display: inline-block;
+	cursor: pointer;
+	width: 8px;
+	height: 12px;
 }
 
-.dp-po-arrow::before,
-.dp-po-arrow::after {
-  background-color: var(--grey);
-  content: "";
-  height: 7px;
-  position: absolute;
-  width: 1px;
+.dp-po-arrow:before,
+.dp-po-arrow:after {
+	content: "";
+	position: absolute;
+	background-color: var(--grey);
+	width: 1px;
+	height: 7px;
 }
 
-.dp-po-arrow.arrow--brand-primary::before,
-.dp-po-arrow.arrow--brand-primary::after {
-  background-color: var(--brand-primary);
+.dp-po-arrow.arrow--brand-primary:before,
+.dp-po-arrow.arrow--brand-primary:after {
+	background-color: var(--brand-primary);
 }
 
-.dp-po-arrow::before {
-  left: 50%;
-  top: 0;
-  transform: rotate(-45deg);
+.dp-po-arrow:before {
+	top: 0;
+	left: 50%;
+	transform: rotate(-45deg);
 }
 
-.dp-po-arrow::after {
-  bottom: 0;
-  left: 50%;
-  transform: rotate(45deg);
+.dp-po-arrow:after {
+	bottom: 0;
+	left: 50%;
+	transform: rotate(45deg);
 }
 
 .dp-po-arrow.arrow--left {
-  transform: rotate(180deg);
+	transform: rotate(180deg);
 }
 
 .dp-po-arrow.arrow--bottom {
-  transform: rotate(90deg);
+	transform: rotate(90deg);
 }
 
 .dp-po-arrow.arrow--top {
-  transform: rotate(-90deg);
+	transform: rotate(-90deg);
 }
 
-/* arrow avatars */
+/*arrow avatars*/
 
 .dp-po-Avatar .dp-po-arrow {
-  height: 15px;
-  width: 10px;
+	width: 10px;
+	height: 15px;
 }
 
-.dp-po-Avatar .dp-po-arrow::before,
-.dp-po-Avatar .dp-po-arrow::after {
-  height: 10px;
+.dp-po-Avatar .dp-po-arrow:before,
+.dp-po-Avatar .dp-po-arrow:after {
+	height: 10px;
 }
 
-.dp-po-Avatar .dp-po-arrow::before {
-  top: -2px;
+.dp-po-Avatar .dp-po-arrow:before {
+	top: -2px;
 }
diff --git a/packages/style/src/colours.css b/packages/style/src/colours.css
@@ -1,21 +1,21 @@
 .dp-Bg-ColorDemonstration {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: wrap
 }
 
 .dp-Bg-ColorDemonstration > div {
-  align-items: center;
-  color: #050505;
-  display: flex;
   flex: 0 0 14%;
+  display: flex;
+  align-items: center;
   font: var(--s-2);
+  color: #050505;
 }
 
 .dp-Bg-ColorDemonstration div > div {
-  border-radius: 3px;
+  min-width: 40px;
   height: 40px;
+  border-radius: 3px;
   margin: 6px;
-  min-width: 40px;
 }
 
 .dp-Bg-ColorDemonstration h4 {
@@ -120,43 +120,43 @@
 /* background color */
 
 .Bg-Gradients--fusia {
-  background: linear-gradient(270deg, #e16aff 0.91%, #dc68f8 14.56%, #ce61e5 34.18%, #b856c6 57.4%, #99469b 83.16%, #833b7c 99.46%);
+  background: linear-gradient(270deg, #E16AFF 0.91%, #DC68F8 14.56%, #CE61E5 34.18%, #B856C6 57.4%, #99469B 83.16%, #833B7C 99.46%);
 }
 
 .Bg-Gradients--violet {
-  background: linear-gradient(270deg, #9e8ef1 0.87%, #9788e6 15.36%, #8477c9 40.73%, #665c9a 73.72%, #4b4471 99.5%);
+  background: linear-gradient(270deg, #9E8EF1 0.87%, #9788E6 15.36%, #8477C9 40.73%, #665C9A 73.72%, #4B4471 99.5%);
 }
 
 .Bg-Gradients--indigo {
-  background: linear-gradient(270deg, #6f88fc 0.87%, #6c85f8 20.01%, #617eec 39.44%, #5071d7 59.01%, #3760bb 78.67%, #184a97 98.24%, #164894 99.5%);
+  background: linear-gradient(270deg, #6F88FC 0.87%, #6C85F8 20.01%, #617EEC 39.44%, #5071D7 59.01%, #3760BB 78.67%, #184A97 98.24%, #164894 99.5%);
 }
 
 .Bg-Gradients--blue {
-  background: linear-gradient(90deg, #3467a4 0%, #3a8dde 49.48%, #77b5e7 100%);
+  background: linear-gradient(90deg, #3467A4 0%, #3A8DDE 49.48%, #77B5E7 100%);
 }
 
 .Bg-Gradients--cyan {
-  background: linear-gradient(270deg, #2fb1db 0.87%, #2971ae 99.5%);
+  background: linear-gradient(270deg, #2FB1DB 0.87%, #2971AE 99.5%);
 }
 
 .Bg-Gradients--sea {
-  background: linear-gradient(270deg, #8af0fc 0.87%, #6ec6cf 31.41%, #2a5e5e 99.5%);
+  background: linear-gradient(270deg, #8AF0FC 0.87%, #6EC6CF 31.41%, #2A5E5E 99.5%);
 }
 
 .Bg-Gradients--grass {
-  background: linear-gradient(270deg, #31eaa6 0.91%, #34e59f 23.4%, #3dd88c 55.7%, #4bc36d 93.77%, #4dbf68 99.42%);
+  background: linear-gradient(270deg, #31EAA6 0.91%, #34E59F 23.4%, #3DD88C 55.7%, #4BC36D 93.77%, #4DBF68 99.42%);
 }
 
 .Bg-Gradients--yellow {
-  background: linear-gradient(270deg, #f5d16d 0.91%, #f5cc66 18.72%, #f4bd53 44.31%, #f3a534 74.44%, #f28d15 99.5%);
+  background: linear-gradient(270deg, #F5D16D 0.91%, #F5CC66 18.72%, #F4BD53 44.31%, #F3A534 74.44%, #F28D15 99.5%);
 }
 
 .Bg-Gradients--rust {
-  background: linear-gradient(270deg, #ff8f6d 0.91%, #fb8966 19.14%, #f07953 45.33%, #de5f34 76.18%, #cd4718 99.5%);
+  background: linear-gradient(270deg, #FF8F6D 0.91%, #FB8966 19.14%, #F07953 45.33%, #DE5F34 76.18%, #CD4718 99.5%);
 }
 
 .Bg-Gradients--rose {
-  background: linear-gradient(270deg, #ff4c85 0.99%, #f8497f 21.34%, #e5416d 50.57%, #c6334f 85.01%, #b72c41 99.5%);
+  background: linear-gradient(270deg, #FF4C85 0.99%, #F8497F 21.34%, #E5416D 50.57%, #C6334F 85.01%, #B72C41 99.5%);
 }
 
 /* color */

diff --git a/packages/style/src/components/dp-po-Information.css b/packages/style/src/components/dp-po-Information.css
@@ -1,26 +1,26 @@
 .dp-po-Info {
-  background-color: var(--grey-lightest);
-  border: 1px solid var(--brand-primary);
-  border-left: 5px solid var(--brand-primary);
-  border-radius: 6px;
-  color: var(--grey-darkest);
-  display: flex;
-  font: var(--p-2-bold);
-  max-width: 670px;
-  padding: 15px;
-  width: 100%;
+	display: flex;
+	font: var(--p-2-bold);
+	color: var(--grey-darkest);
+	border: 1px solid var(--brand-primary);
+	border-left: 5px solid var(--brand-primary);
+	background-color: var(--grey-lightest);
+	border-radius: 6px;
+	width: 100%;
+	max-width: 670px;
+	padding: 15px;
 }
 
 .dp-po-Info .dp-po-info-txt {
-  padding-left: 15px;
+	padding-left: 15px;
 }
 
 .dp-po-Info.Info--danger {
-  border: 1px solid var(--danger);
-  border-left: 5px solid var(--danger);
+	border: 1px solid var(--danger);
+	border-left: 5px solid var(--danger);
 }
 
 .dp-po-Info .dp-po-Icon {
-  height: 23px;
-  min-width: 23px;
+	min-width: 23px;
+	height: 23px;
 }
diff --git a/packages/style/src/components/dp-po-avatars.css b/packages/style/src/components/dp-po-avatars.css
@@ -1,45 +1,59 @@
 .dp-po-Avatar {
-  align-items: center;
-  display: flex;
+	display: flex;
+	align-items: center;
 }
 
 .dp-po-Avatar-icon {
-  height: 23px;
-  width: 23px;
+	width: 23px;
+	height: 23px;
+	cursor: pointer;
 }
 
 .dp-po-Avatar-name {
-  color: var(--grey-darkest);
-  font: var(--h-6);
-  margin-left: 10px;
+	font: var(--h-6);
+	color: var(--grey-darkest);
+	margin-left: 10px;
 }
 
-/* Avatar--medium */
+/*Avatar--medium*/
 
 .dp-po-Avatar.Avatar--medium .dp-po-Avatar-icon {
-  height: 28px;
-  width: 28px;
+	width: 28px;
+	height: 28px;
 }
 
 .dp-po-Avatar.Avatar--medium .dp-po-Avatar-name {
-  font: var(--h-5-medium);
+	font: var(--h-5-medium);
 }
 
-/* Avatar--small */
+/*Avatar--small*/
 
 .dp-po-Avatar.Avatar--circle.Avatar--small .dp-po-Avatar-icon {
-  height: 25px;
-  width: 25px;
+	width: 25px;
+	height: 25px;
 }
 
 .dp-po-Avatar-name + .dp-po-arrow {
-  margin-left: 10px;
+	margin-left: 10px;
 }
 
-/* avatar/circular */
+/*avatar/circular*/
 
 .dp-po-Avatar.Avatar--circle .dp-po-Avatar-icon {
-  border-radius: 50%;
-  height: 30px;
-  width: 30px;
-}
+	border-radius: 50%;
+	width: 30px;
+	height: 30px;
+}
+
+/*Avatar name*/
+
+.Avatar--name {
+	color: var(--white);
+	font: var(--p-2-bold);
+	text-transform: uppercase;
+	background-color: var(--grey);
+	border-radius: 50%;
+	min-width: 30px;
+	height: 30px;
+	justify-content: center;
+}