Merge pull request #53 from nightswinger/update-header-docs

update header docs
nightswinger · Feb 27, 2024 · 63e68ef · 63e68ef
2 parents a79bf3d + 4fcbd8c
commit 63e68ef
Show file tree

Hide file tree

Showing 19 changed files with 627 additions and 64 deletions.
diff --git a/docs/src/components/doc/DocComponent.vue b/docs/src/components/doc/DocComponent.vue
@@ -1,6 +1,10 @@
 <template>
   <div>
-    <SuiSegment vertical style="border-bottom: 1px solid #DDDDDD;">
+    <SuiSegment
+      id="masthead"
+      vertical
+      style="border-bottom: 1px solid #DDDDDD;"
+    >
       <SuiContainer class="main">
         <div class="intro">
           <SuiHeader as="h1">
@@ -56,6 +60,9 @@ defineProps(['title', 'description', 'componentDocs'])
 }
 
 @media only screen and (max-width: 1144px) {
+  #masthead {
+    padding-top: 3rem;
+  }
   .ui.container.main {
     margin-left: 2rem !important;
   }

diff --git a/docs/src/components/elements/Header/AttachedDoc.vue b/docs/src/components/elements/Header/AttachedDoc.vue
@@ -0,0 +1,30 @@
+<template>
+  <DocSection label="Attached" :code="code">
+    <template #description>
+      A header can be attached to other content, like a segment
+    </template>
+    <template #example>
+      <SuiHeader as="h2" attached="top">
+        Attached Header
+      </SuiHeader>
+      <SuiSegment attached>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+      </SuiSegment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiHeader, SuiSegment } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader as="h2" attached="top">
+    Attached Header
+  </SuiHeader>
+  <SuiSegment attached>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+  </SuiSegment>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Header/BlockDoc.vue b/docs/src/components/elements/Header/BlockDoc.vue
@@ -0,0 +1,26 @@
+<template>
+  <DocSection label="Block" :code="code">
+    <template #description>
+      A header can be formatted to appear inside a content block
+    </template>
+    <template #example>
+      <SuiHeader as="h3" block>
+        Block Header
+      </SuiHeader>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import {
+  SuiHeader,
+} from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader as="h3" block>
+    Block Header
+  </SuiHeader>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Header/ColoredDoc.vue b/docs/src/components/elements/Header/ColoredDoc.vue
@@ -0,0 +1,48 @@
+<template>
+  <DocSection label="Colored" :code="code">
+    <template #description>
+      A header can be formatted with different colors
+    </template>
+    <template #example>
+      <SuiHeader as="h4" primary>Primary</SuiHeader>
+      <SuiHeader as="h4" secondary>Secondary</SuiHeader>
+      <SuiHeader as="h4" color="red">Red</SuiHeader>
+      <SuiHeader as="h4" color="orange">Orange</SuiHeader>
+      <SuiHeader as="h4" color="yellow">Yellow</SuiHeader>
+      <SuiHeader as="h4" color="olive">Olive</SuiHeader>
+      <SuiHeader as="h4" color="green">Green</SuiHeader>
+      <SuiHeader as="h4" color="teal">Teal</SuiHeader>
+      <SuiHeader as="h4" color="blue">Blue</SuiHeader>
+      <SuiHeader as="h4" color="purple">Purple</SuiHeader>
+      <SuiHeader as="h4" color="violet">Violet</SuiHeader>
+      <SuiHeader as="h4" color="pink">Pink</SuiHeader>
+      <SuiHeader as="h4" color="brown">Brown</SuiHeader>
+      <SuiHeader as="h4" color="grey">Grey</SuiHeader>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import {
+  SuiHeader,
+} from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader as="h4" primary>Primary</SuiHeader>
+  <SuiHeader as="h4" secondary>Secondary</SuiHeader>
+  <SuiHeader as="h4" color="red">Red</SuiHeader>
+  <SuiHeader as="h4" color="orange">Orange</SuiHeader>
+  <SuiHeader as="h4" color="yellow">Yellow</SuiHeader>
+  <SuiHeader as="h4" color="olive">Olive</SuiHeader>
+  <SuiHeader as="h4" color="green">Green</SuiHeader>
+  <SuiHeader as="h4" color="teal">Teal</SuiHeader>
+  <SuiHeader as="h4" color="blue">Blue</SuiHeader>
+  <SuiHeader as="h4" color="purple">Purple</SuiHeader>
+  <SuiHeader as="h4" color="violet">Violet</SuiHeader>
+  <SuiHeader as="h4" color="pink">Pink</SuiHeader>
+  <SuiHeader as="h4" color="brown">Brown</SuiHeader>
+  <SuiHeader as="h4" color="grey">Grey</SuiHeader>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Header/ContentHeadersDoc.vue b/docs/src/components/elements/Header/ContentHeadersDoc.vue
@@ -0,0 +1,28 @@
+<template>
+  <DocSection label="Content Headers" :code="code">
+    <template #description>
+      Headers may be oriented to give the importance of a section in the context of the content that surrounds it
+    </template>
+    <template #example>
+      <SuiHeader size="huge">Huge Header</SuiHeader>
+      <SuiHeader size="large">Large Header</SuiHeader>
+      <SuiHeader size="medium">Medium Header</SuiHeader>
+      <SuiHeader size="small">Small Header</SuiHeader>
+      <SuiHeader size="tiny">Tiny Header</SuiHeader>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiHeader } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader size="huge">Huge Header</SuiHeader>
+  <SuiHeader size="large">Large Header</SuiHeader>
+  <SuiHeader size="medium">Medium Header</SuiHeader>
+  <SuiHeader size="small">Small Header</SuiHeader>
+  <SuiHeader size="tiny">Tiny Header</SuiHeader>
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Header/DisabledDoc.vue b/docs/src/components/elements/Header/DisabledDoc.vue
@@ -0,0 +1,26 @@
+<template>
+  <DocSection label="Disabled" :code="code">
+    <template #description>
+      A header can show that it is inactive
+    </template>
+    <template #example>
+      <SuiHeader disabled>
+        Disabled Header
+      </SuiHeader>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import {
+  SuiHeader,
+} from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader disabled>
+    Disabled Header
+  </SuiHeader>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Header/DividingDoc.vue b/docs/src/components/elements/Header/DividingDoc.vue
@@ -0,0 +1,26 @@
+<template>
+  <DocSection label="Dividing" :code="code">
+    <template #description>
+      A header can be formatted to divide itself from the content below it
+    </template>
+    <template #example>
+      <SuiHeader as="h3" dividing>
+        Dividing Header
+      </SuiHeader>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import {
+  SuiHeader,
+} from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader as="h3" dividing>
+    Dividing Header
+  </SuiHeader>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Header/FloatingDoc.vue b/docs/src/components/elements/Header/FloatingDoc.vue
@@ -0,0 +1,37 @@
+<template>
+  <DocSection label="Floating" :code="code">
+    <template #description>
+      A header can sit to the left or right of other content
+    </template>
+    <template #example>
+      <SuiSegment clearing>
+        <SuiHeader as="h3" floated="right">
+          Go Forward
+        </SuiHeader>
+        <SuiHeader as="h3" floated="left">
+          Go Back
+        </SuiHeader>
+      </SuiSegment>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import {
+  SuiHeader,
+  SuiSegment,
+} from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiSegment clearing>
+    <SuiHeader as="h3" floated="right">
+      Go Forward
+    </SuiHeader>
+    <SuiHeader as="h3" floated="left">
+      Go Back
+    </SuiHeader>
+  </SuiSegment>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Header/IconDoc.vue b/docs/src/components/elements/Header/IconDoc.vue
@@ -0,0 +1,34 @@
+<template>
+  <DocSection label="Icon" :code="code">
+    <template #description>
+      A header may contain an Icon
+    </template>
+    <template #example>
+      <SuiHeader as="h2">
+        <SuiIcon name="plug" />
+        <SuiHeaderContent>
+          Uptime Guarantee
+        </SuiHeaderContent>
+      </SuiHeader>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import {
+  SuiHeader,
+  SuiHeaderContent,
+  SuiIcon,
+} from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader as="h2">
+    <SuiIcon name="plug" />
+    <SuiHeaderContent>
+      Uptime Guarantee
+    </SuiHeaderContent>
+  </SuiHeader>
+</template>`
+</script>
diff --git a/docs/src/components/elements/Header/IconHeadersDoc.vue b/docs/src/components/elements/Header/IconHeadersDoc.vue
@@ -0,0 +1,41 @@
+<template>
+  <DocSection label="Icon Headers" :code="code">
+    <template #description>
+      A header can be formatted to emphasize an icon
+    </template>
+    <template #example>
+      <SuiHeader icon>
+        <SuiIcon name="settings" />
+        <SuiHeaderContent>
+          Account Settings
+        </SuiHeaderContent>
+        <SuiHeaderSubheader>
+          Manage your account settings and set e-mail preferences.
+        </SuiHeaderSubheader>
+      </SuiHeader>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import {
+  SuiHeader,
+  SuiHeaderContent,
+  SuiHeaderSubheader,
+  SuiIcon
+} from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader icon>
+    <SuiIcon name="settings" />
+    <SuiHeaderContent>
+      Account Settings
+    </SuiHeaderContent>
+    <SuiHeaderSubheader>
+      Manage your account settings and set e-mail preferences.
+    </SuiHeaderSubheader>
+  </SuiHeader>
+<\/template>`
+</script>
diff --git a/docs/src/components/elements/Header/ImageDoc.vue b/docs/src/components/elements/Header/ImageDoc.vue
@@ -0,0 +1,26 @@
+<template>
+  <DocSection label="Image" :code="code">
+    <template #description>
+      A header may contain an image
+    </template>
+    <template #example>
+      <SuiHeader as="h2">
+        <SuiImage src="/vue-fomantic-ui/images/avatar/large/steve.jpg" avatar />
+        Steve
+      </SuiHeader>
+    </template>
+  </DocSection>
+</template>
+
+<script setup>
+import DocSection from '@/components/doc/DocSection.vue'
+
+import { SuiHeader, SuiImage } from 'vue-fomantic-ui'
+
+const code = `<template>
+  <SuiHeader as="h2">
+    <SuiImage src="/images/avatar/large/steve.jpg" avatar />
+    Steve
+  </SuiHeader>
+<\/template>`
+</script>