Merge pull request #239 from PrefectHQ/p-content

PContent
PrefectHQ · Jun 6, 2022 · eb92379 · eb92379
2 parents d780c9d + 6d5e9ec
commit eb92379
Show file tree

Hide file tree

Showing 6 changed files with 125 additions and 76 deletions.
diff --git a/demo/main.ts b/demo/main.ts
@@ -7,6 +7,8 @@ import App from './App.vue'
 import router from './router'
 import { plugin } from '@/index'
 
+import './styles.css'
+
 const app = createApp(App)
 app.use(plugin)
 app.use(router)

diff --git a/demo/sections/ButtonsSection.vue b/demo/sections/ButtonsSection.vue
@@ -1,91 +1,96 @@
 <template>
   <Section heading="Buttons">
-    <div class="flex flex-wrap items-start gap-2 mb-4">
-      <p-button>something</p-button>
-      <p-button secondary>
-        secondary
-      </p-button>
-      <p-button inset>
-        inset
-      </p-button>
-      <p-button flat>
-        flat
-      </p-button>
-    </div>
+    <p-content>
+      <p-content secondary class="flex">
+        <p-button>something</p-button>
+        <p-button secondary>
+          secondary
+        </p-button>
+        <p-button inset>
+          inset
+        </p-button>
+        <p-button flat>
+          flat
+        </p-button>
+      </p-content>
 
-    <div class="flex flex-wrap items-start gap-2 mb-4">
-      <p-button icon="BeakerIcon">
-        icon with text
-      </p-button>
+      <p-content secondary class="flex">
+        <p-button icon="BeakerIcon">
+          icon with text
+        </p-button>
 
-      <p-button secondary icon="BeakerIcon">
-        icon with text
-      </p-button>
+        <p-button secondary icon="BeakerIcon">
+          icon with text
+        </p-button>
 
-      <p-button inset icon="BeakerIcon">
-        icon with text
-      </p-button>
+        <p-button inset icon="BeakerIcon">
+          icon with text
+        </p-button>
 
-      <p-button flat icon="BeakerIcon">
-        icon with text
-      </p-button>
-    </div>
+        <p-button flat icon="BeakerIcon">
+          icon with text
+        </p-button>
+      </p-content>
 
-    <div class="flex flex-wrap items-start gap-2 mb-4">
-      <p-button icon="BeakerIcon" />
-      <p-button secondary icon="BeakerIcon" />
-      <p-button inset icon="BeakerIcon" />
-      <p-button flat icon="BeakerIcon" />
-    </div>
+      <p-content secondary class="flex">
+        <p-button icon="BeakerIcon" />
+        <p-button secondary icon="BeakerIcon" />
+        <p-button inset icon="BeakerIcon" />
+        <p-button flat icon="BeakerIcon" />
+      </p-content>
 
-    <div class="flex flex-wrap items-start gap-2 mb-4">
-      <p-button rounded icon="BeakerIcon" />
-      <p-button secondary rounded icon="BeakerIcon" />
-      <p-button inset rounded icon="BeakerIcon" />
-      <p-button flat rounded icon="BeakerIcon" />
-    </div>
+      <p-content secondary class="flex">
+        <p-button rounded icon="BeakerIcon" />
+        <p-button secondary rounded icon="BeakerIcon" />
+        <p-button inset rounded icon="BeakerIcon" />
+        <p-button flat rounded icon="BeakerIcon" />
+      </p-content>
 
-    <div class="flex flex-wrap items-start gap-2 mb-4">
-      <p-button size="xs">
-        size xs
-      </p-button>
-      <p-button size="sm">
-        size sm
-      </p-button>
-      <p-button size="md">
-        size md
-      </p-button>
-      <p-button size="lg">
-        size lg
-      </p-button>
-      <p-button size="xl">
-        size xl
-      </p-button>
-    </div>
+      <p-content secondary class="flex items-start">
+        <p-button size="xs">
+          size xs
+        </p-button>
+        <p-button size="sm">
+          size sm
+        </p-button>
+        <p-button size="md">
+          size md
+        </p-button>
+        <p-button size="lg">
+          size lg
+        </p-button>
+        <p-button size="xl">
+          size xl
+        </p-button>
+      </p-content>
 
-    <div class="flex flex-wrap items-start gap-2 mb-4">
-      <p-button size="xs" rounded icon="BeakerIcon" />
-      <p-button size="sm" rounded icon="BeakerIcon" />
-      <p-button size="md" rounded icon="BeakerIcon" />
-      <p-button size="lg" rounded icon="BeakerIcon" />
-      <p-button size="xl" rounded icon="BeakerIcon" />
-    </div>
+      <p-content secondary class="flex items-start">
+        <p-button size="xs" rounded icon="BeakerIcon" />
+        <p-button size="sm" rounded icon="BeakerIcon" />
+        <p-button size="md" rounded icon="BeakerIcon" />
+        <p-button size="lg" rounded icon="BeakerIcon" />
+        <p-button size="xl" rounded icon="BeakerIcon" />
+      </p-content>
 
-    <div class="flex flex-wrap items-start gap-2 mb-4">
-      <p-button disabled>
-        disabled
-      </p-button>
-      <p-button disabled secondary icon="BeakerIcon">
-        disabled secondary with icon
-      </p-button>
-      <p-button disabled inset icon="BeakerIcon" />
-      <p-button disabled flat icon="BeakerIcon" />
-    </div>
+      <p-content secondary class="flex">
+        <p-button disabled>
+          disabled
+        </p-button>
+        <p-button disabled secondary icon="BeakerIcon">
+          disabled secondary with icon
+        </p-button>
+        <p-button disabled inset icon="BeakerIcon" />
+        <p-button disabled flat icon="BeakerIcon" />
+      </p-content>
 
-    <p-button :loading="buttonLoading" icon="BeakerIcon">
-      Loading Button
-    </p-button>
-    <p-checkbox v-model="buttonLoading" label="show loading" />
+      <p-content secondary class="flex">
+        <p-button :loading="buttonLoading" icon="BeakerIcon">
+          Loading Button
+        </p-button>
+      </p-content>
+
+      <p-checkbox v-model="buttonLoading" label="show loading" />
+    </p-content>
   </Section>
 </template>
 

diff --git a/demo/styles.css b/demo/styles.css
@@ -0,0 +1,2 @@
+@tailwind components;
+@tailwind utilities;
diff --git a/src/components/Content/PContent.vue b/src/components/Content/PContent.vue
@@ -0,0 +1,28 @@
+<template>
+  <div class="p-content" :class="classes">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { computed } from 'vue'
+
+  const props = defineProps<{
+    secondary?: boolean,
+  }>()
+
+  const classes = computed(() => ({
+    'p-content--secondary': props.secondary,
+  }))
+</script>
+
+<style>
+.p-content { @apply
+  grid
+  gap-4
+}
+
+.p-content--secondary { @apply
+  gap-2
+}
+</style>
diff --git a/src/components/Content/index.ts b/src/components/Content/index.ts
@@ -0,0 +1,8 @@
+import { App } from 'vue'
+import PContent from './PContent.vue'
+
+const install = (app: App): void => {
+  app.component('PContent', PContent)
+}
+
+export { PContent, install }
diff --git a/src/components/index.ts b/src/components/index.ts
@@ -6,6 +6,7 @@ import { PCard, install as installPCard } from './Card'
 import { PCheckbox, install as installPCheckbox } from './Checkbox'
 import { PCode, install as installPCode } from './Code'
 import { PCombobox, install as installPCombobox } from './Combobox'
+import { PContent, install as installPContent } from './Content'
 import { PContextDivider, install as installPContextDivider } from './ContextDivider'
 import { PContextNavItem, install as installPContextNavItem } from './ContextNavItem'
 import { PContextSidebar, install as installPContextSidebar } from './ContextSidebar'
@@ -56,6 +57,7 @@ export {
   PCheckbox,
   PCode,
   PCombobox,
+  PContent,
   PContextDivider,
   PContextNavItem,
   PContextSidebar,
@@ -113,6 +115,7 @@ export const installs = [
   installPCheckbox,
   installPCode,
   installPCombobox,
+  installPContent,
   installPContextDivider,
   installPContextNavItem,
   installPContextSidebar,
@@ -165,6 +168,7 @@ declare module '@vue/runtime-core' {
     PCheckbox: typeof PCheckbox,
     PCode: typeof PCode,
     PCombobox: typeof PCombobox,
+    PContent: typeof PContent,
     PContextNavItem: typeof PContextNavItem,
     PContextSidebar: typeof PContextSidebar,
     PDateInput: typeof PDateInput,