docs: clean up formatting and layout details

Signed-off-by: Jeremy Wilken <gnomation@gnomeontherun.com>
vmware-archive · Aug 8, 2020 · 2e8e338 · 2e8e338
1 parent 6298a81
commit 2e8e338
Show file tree

Hide file tree

Showing 79 changed files with 594 additions and 1,571 deletions.
diff --git a/apps/website/.gitignore b/apps/website/.gitignore
@@ -1,3 +1,4 @@
 api/
 dist/
-node_modules/
+node_modules/
+.vuepress/public/images
diff --git a/apps/website/.markdownlint.json b/apps/website/.markdownlint.json
@@ -0,0 +1,8 @@
+{
+  "default": true,
+  "line-length": false,
+  "MD024": false,
+  "MD036": false,
+  "no-trailing-punctuation": false,
+  "no-inline-html": false
+}
diff --git a/apps/website/.vuepress/config.js b/apps/website/.vuepress/config.js
@@ -125,8 +125,7 @@ module.exports = {
         '@clr/core/textarea': path.resolve('../../dist/core/textarea'),
         '@clr/core/time': path.resolve('../../dist/core/time'),
         '@clr/core/toggle': path.resolve('../../dist/core/toggle'),
-        '@clr/icons': path.resolve('../../dist/clr-icons'),
-        '@clr/icons/shapes/all-shapes': path.resolve('../../dist/clr-icons/shapes/all-shapes.min'),
+        // @TODO Would like to be able to remove these
         'ramda': path.resolve('../../packages/core/node_modules/ramda'),
         'ramda/es/anyPass': path.resolve('../../packages/core/node_modules/ramda/es/anyPass.js'),
         'ramda/es/equals': path.resolve('../../packages/core/node_modules/ramda/es/equals.js'),

diff --git a/apps/website/.vuepress/public/demos/button/icon-css.html b/apps/website/.vuepress/public/demos/button/icon-css.html
@@ -1,18 +1,18 @@
 <button type="button" class="btn btn-icon" aria-label="home">
-  <cds-icon shape="home"></cds-icon>
+  <clr-icon shape="home"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon btn-primary" aria-label="settings">
-  <cds-icon shape="cog"></cds-icon>
+  <clr-icon shape="cog"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon btn-warning" aria-label="warning">
-  <cds-icon shape="warning-standard"></cds-icon>
+  <clr-icon shape="warning-standard"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon btn-danger" aria-label="error">
-  <cds-icon shape="error-standard"></cds-icon>
+  <clr-icon shape="error-standard"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon btn-success" aria-label="done">
-  <cds-icon shape="check"></cds-icon>
+  <clr-icon shape="check"></clr-icon>
 </button>
 <button type="button" class="btn btn-icon" disabled aria-label="home">
-  <cds-icon shape="home"></cds-icon>
+  <clr-icon shape="home"></clr-icon>
 </button>
diff --git a/apps/website/.vuepress/public/demos/button/types-css.html b/apps/website/.vuepress/public/demos/button/types-css.html
@@ -1,9 +1,3 @@
-<!--
-  ~ Copyright (c) 2016-2020 VMware, Inc.
-  ~ All Rights ReserveThis software is released under MIT license.
-  ~ The full license information can be found in LICENSE in the root directory of this project.
-  -->
-
 <button class="btn btn-primary">Primary</button>
 <button class="btn">Secondary</button>
 <button class="btn btn-link">Tertiary</button>
diff --git a/apps/website/.vuepress/public/demos/card/clickable-css.html b/apps/website/.vuepress/public/demos/card/clickable-css.html
@@ -1,9 +1,3 @@
-<!--
-  ~ Copyright (c) 2016-2020 VMware, Inc.
-  ~ All Rights ReserveThis software is released under MIT license.
-  ~ The full license information can be found in LICENSE in the root directory of this project.
-  -->
-
 <div class="clr-row">
   <div class="clr-col-lg-6 clr-col-12">
     <a href="..." class="card clickable">

diff --git a/apps/website/.vuepress/public/demos/card/dropdown-css.html b/apps/website/.vuepress/public/demos/card/dropdown-css.html
@@ -22,7 +22,7 @@
         <div class="dropdown top-left open">
           <button class="dropdown-toggle btn btn-sm btn-link">
             Dropdown 1
-            <clr-icon shape="caret down"></clr-icon>
+            <clr-icon shape="caret" direction="down"></clr-icon>
           </button>
           <div class="dropdown-menu">
             <a href="..." class="dropdown-item">Item 1</a>

diff --git a/apps/website/.vuepress/public/demos/checkbox/basic-css.html b/apps/website/.vuepress/public/demos/checkbox/basic-css.html
@@ -1,8 +1,8 @@
 <div class="clr-checkbox-wrapper">
-  <input type="checkbox" id="vertical-checkbox1" name="checkbox-full" value="option1" class="clr-checkbox" />
-  <label for="vertical-checkbox1" class="clr-control-label">option 1</label>
+  <input type="checkbox" id="basic-checkbox1" name="checkbox-full" value="option1" class="clr-checkbox" />
+  <label for="basic-checkbox1" class="clr-control-label">Option 1</label>
 </div>
 <div class="clr-checkbox-wrapper">
-  <input type="checkbox" id="vertical-checkbox2" name="checkbox-full" value="option2" class="clr-checkbox" />
-  <label for="vertical-checkbox2" class="clr-control-label">option 2</label>
+  <input type="checkbox" id="basic-checkbox2" name="checkbox-full" value="option2" class="clr-checkbox" />
+  <label for="basic-checkbox2" class="clr-control-label">Option 2</label>
 </div>
diff --git a/apps/website/.vuepress/public/demos/checkbox/disabled-css.html b/apps/website/.vuepress/public/demos/checkbox/disabled-css.html
@@ -2,16 +2,37 @@
   <label class="clr-control-label">Disabled checkbox example</label>
   <div class="clr-control-container">
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="checkbox10" name="checkbox-disabled" value="option1" class="clr-checkbox" disabled />
-      <label for="checkbox10" class="clr-control-label">option 1</label>
+      <input
+        type="checkbox"
+        id="disabled-checkbox1"
+        name="checkbox-disabled"
+        value="option1"
+        class="clr-checkbox"
+        disabled
+      />
+      <label for="disabled-checkbox1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="checkbox11" name="checkbox-disabled" value="option2" class="clr-checkbox" disabled />
-      <label for="checkbox11" class="clr-control-label">option 2</label>
+      <input
+        type="checkbox"
+        id="disabled-checkbox2"
+        name="checkbox-disabled"
+        value="option2"
+        class="clr-checkbox"
+        disabled
+      />
+      <label for="disabled-checkbox2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="checkbox12" name="checkbox-disabled" value="option3" class="clr-checkbox" disabled />
-      <label for="checkbox12" class="clr-control-label">option 3</label>
+      <input
+        type="checkbox"
+        id="disabled-checkbox3"
+        name="checkbox-disabled"
+        value="option3"
+        class="clr-checkbox"
+        disabled
+      />
+      <label for="disabled-checkbox3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>

diff --git a/apps/website/.vuepress/public/demos/checkbox/helper-css.html b/apps/website/.vuepress/public/demos/checkbox/helper-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Basic checkbox</label>
   <div class="clr-control-container clr-error">
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox1" name="checkbox-error" value="option1" class="clr-checkbox" />
-      <label for="vertical-checkbox1" class="clr-control-label">option 1</label>
+      <input type="checkbox" id="helper-checkbox1" name="checkbox-error" value="option1" class="clr-checkbox" />
+      <label for="helper-checkbox1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox2" name="checkbox-error" value="option2" class="clr-checkbox" />
-      <label for="vertical-checkbox2" class="clr-control-label">option 2</label>
+      <input type="checkbox" id="helper-checkbox2" name="checkbox-error" value="option2" class="clr-checkbox" />
+      <label for="helper-checkbox2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox3" name="checkbox-error" value="option3" class="clr-checkbox" />
-      <label for="vertical-checkbox3" class="clr-control-label">option 3</label>
+      <input type="checkbox" id="helper-checkbox3" name="checkbox-error" value="option3" class="clr-checkbox" />
+      <label for="helper-checkbox3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>

diff --git a/apps/website/.vuepress/public/demos/checkbox/indeterminate-css.html b/apps/website/.vuepress/public/demos/checkbox/indeterminate-css.html
@@ -8,13 +8,13 @@
         name="test6"
         value="option1"
         aria-describedby="clr-form-control-13-helper"
-        id="clr-form-control-13"
+        id="indeterminate-checkbox"
         class="ng-untouched ng-pristine ng-valid"
       />
-      <label class="clr-control-label" for="clr-form-control-13">Option 1</label>
+      <label class="clr-control-label" for="indeterminate-checkbox">Option 1</label>
     </clr-checkbox-wrapper>
     <div class="clr-subtext-wrapper">
-      <clr-control-helper id="null-helper" class="clr-subtext ng-star-inserted">Helper text</clr-control-helper>
+      <clr-control-helper class="clr-subtext ng-star-inserted">Helper text</clr-control-helper>
     </div>
   </div>
 </clr-checkbox-container>
diff --git a/apps/website/.vuepress/public/demos/checkbox/inline-css.html b/apps/website/.vuepress/public/demos/checkbox/inline-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Inline checkbox example</label>
   <div class="clr-control-container clr-control-inline">
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox1" name="checkbox-full" value="option1" class="clr-checkbox" />
-      <label for="vertical-checkbox1" class="clr-control-label">option 1</label>
+      <input type="checkbox" id="inline-checkbox1" name="checkbox-full" value="option1" class="clr-checkbox" />
+      <label for="inline-checkbox1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox2" name="checkbox-full" value="option2" class="clr-checkbox" />
-      <label for="vertical-checkbox2" class="clr-control-label">option 2</label>
+      <input type="checkbox" id="inline-checkbox2" name="checkbox-full" value="option2" class="clr-checkbox" />
+      <label for="inline-checkbox2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-checkbox-wrapper">
-      <input type="checkbox" id="vertical-checkbox3" name="checkbox-full" value="option3" class="clr-checkbox" />
-      <label for="vertical-checkbox3" class="clr-control-label">option 3</label>
+      <input type="checkbox" id="inline-checkbox3" name="checkbox-full" value="option3" class="clr-checkbox" />
+      <label for="inline-checkbox3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>

diff --git a/apps/website/.vuepress/public/demos/header/types.html b/apps/website/.vuepress/public/demos/header/types.html
@@ -46,7 +46,7 @@
     <div class="dropdown bottom-left">
       <button class="nav-icon dropdown-toggle" aria-label="toggle settings menu">
         <clr-icon shape="cog"></clr-icon>
-        <clr-icon shape="caret down"></clr-icon>
+        <clr-icon shape="caret" direction="down"></clr-icon>
       </button>
       <div class="dropdown-menu">
         <a href="javascript://" class="dropdown-item">About</a>
@@ -82,7 +82,7 @@
     <div class="dropdown bottom-left">
       <button class="nav-text dropdown-toggle" aria-label="open user profile">
         john.doe@vmware.com
-        <clr-icon shape="caret down"></clr-icon>
+        <clr-icon shape="caret" direction="down"></clr-icon>
       </button>
       <div class="dropdown-menu">
         <a href="javascript://" class="dropdown-item">Preferences</a>

diff --git a/apps/website/.vuepress/public/demos/login/login-css.html b/apps/website/.vuepress/public/demos/login/login-css.html
@@ -1,5 +1,5 @@
 <div class="login-wrapper">
-  <form class="login">
+  <form class="login" style="min-height: 500px;">
     <section class="title">
       <h3 class="welcome">Welcome to</h3>
       Company Product Name

diff --git a/apps/website/.vuepress/public/demos/radio/basic-css.html b/apps/website/.vuepress/public/demos/radio/basic-css.html
@@ -1,8 +1,8 @@
 <div class="clr-radio-wrapper">
-  <input type="radio" id="radio1" name="radio-basic" value="option1" class="clr-radio" />
-  <label for="radio1">Option 1</label>
+  <input type="radio" id="basic-radio1" name="radio-basic" value="option1" class="clr-radio" />
+  <label for="basic-radio1">Option 1</label>
 </div>
 <div class="clr-radio-wrapper">
-  <input type="radio" id="radio1" name="radio-basic" value="option2" class="clr-radio" />
-  <label for="radio1">Option 2</label>
+  <input type="radio" id="basic-radio2" name="radio-basic" value="option2" class="clr-radio" />
+  <label for="basic-radio2">Option 2</label>
 </div>
diff --git a/apps/website/.vuepress/public/demos/radio/disabled-css.html b/apps/website/.vuepress/public/demos/radio/disabled-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Disabled radio example</label>
   <div class="clr-control-container">
     <div class="clr-radio-wrapper">
-      <input type="radio" id="radio10" name="radio-error" value="option1" class="clr-radio" disabled />
-      <label for="radio10" class="clr-control-label">option 1</label>
+      <input type="radio" id="disabled-radio1" name="radio-error" value="option1" class="clr-radio" disabled />
+      <label for="disabled-radio1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="radio11" name="radio-error" value="option2" class="clr-radio" disabled />
-      <label for="radio11" class="clr-control-label">option 2</label>
+      <input type="radio" id="disabled-radio2" name="radio-error" value="option2" class="clr-radio" disabled />
+      <label for="disabled-radio2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="radio12" name="radio-error" value="option3" class="clr-radio" disabled />
-      <label for="radio12" class="clr-control-label">option 3</label>
+      <input type="radio" id="disabled-radio3" name="radio-error" value="option3" class="clr-radio" disabled />
+      <label for="disabled-radio3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>

diff --git a/apps/website/.vuepress/public/demos/radio/helper-css.html b/apps/website/.vuepress/public/demos/radio/helper-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Helper/Error Radio</label>
   <div class="clr-control-container clr-error">
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio1" name="radio-error" value="option1" class="clr-radio" />
-      <label for="vertical-radio1" class="clr-control-label">option 1</label>
+      <input type="radio" id="helper-radio1" name="radio-error" value="option1" class="clr-radio" />
+      <label for="helper-radio1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio2" name="radio-error" value="option2" class="clr-radio" />
-      <label for="vertical-radio2" class="clr-control-label">option 2</label>
+      <input type="radio" id="helper-radio2" name="radio-error" value="option2" class="clr-radio" />
+      <label for="helper-radio2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio3" name="radio-error" value="option3" class="clr-radio" />
-      <label for="vertical-radio3" class="clr-control-label">option 3</label>
+      <input type="radio" id="helper-radio3" name="radio-error" value="option3" class="clr-radio" />
+      <label for="helper-radio3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>

diff --git a/apps/website/.vuepress/public/demos/radio/inline-css.html b/apps/website/.vuepress/public/demos/radio/inline-css.html
@@ -2,16 +2,16 @@
   <label class="clr-control-label">Inline radio example</label>
   <div class="clr-control-container clr-control-inline">
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio1" name="radio-full" value="option1" class="clr-radio" />
-      <label for="vertical-radio1" class="clr-control-label">option 1</label>
+      <input type="radio" id="inline-radio1" name="radio-full" value="option1" class="clr-radio" />
+      <label for="inline-radio1" class="clr-control-label">Option 1</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio2" name="radio-full" value="option2" class="clr-radio" />
-      <label for="vertical-radio2" class="clr-control-label">option 2</label>
+      <input type="radio" id="inline-radio2" name="radio-full" value="option2" class="clr-radio" />
+      <label for="inline-radio2" class="clr-control-label">Option 2</label>
     </div>
     <div class="clr-radio-wrapper">
-      <input type="radio" id="vertical-radio3" name="radio-full" value="option3" class="clr-radio" />
-      <label for="vertical-radio3" class="clr-control-label">option 3</label>
+      <input type="radio" id="inline-radio3" name="radio-full" value="option3" class="clr-radio" />
+      <label for="inline-radio3" class="clr-control-label">Option 3</label>
     </div>
     <div class="clr-subtext-wrapper">
       <clr-icon class="clr-validate-icon" shape="exclamation-circle"></clr-icon>

diff --git a/apps/website/.vuepress/public/demos/range/basic-css.html b/apps/website/.vuepress/public/demos/range/basic-css.html
@@ -9,7 +9,7 @@
         max="80"
         aria-describedby="clr-form-control-1-helper"
         id="clr-form-control-1"
-        class="clr-range ng-untouched ng-pristine ng-valid"
+        class="clr-range"
       />
     </div>
   </div>

diff --git a/apps/website/.vuepress/public/demos/range/disabled-css.html b/apps/website/.vuepress/public/demos/range/disabled-css.html
@@ -1,19 +1,16 @@
-<clr-range-container class="clr-form-control clr-row clr-form-control-disabled"
-  ><label class="clr-control-label clr-col-12 clr-col-md-2" for="clr-form-control-3">Disabled</label>
+<div class="clr-form-control clr-row clr-form-control-disabled">
+  <label class="clr-control-label clr-col-12 clr-col-md-2" for="clr-form-control-3">Disabled</label>
   <div class="clr-control-container clr-col-md-10 clr-col-12">
     <div class="clr-range-wrapper progress-fill">
       <input
         type="range"
-        clrrange=""
         name="four"
         aria-describedby="clr-form-control-3-helper"
         id="clr-form-control-3"
-        class="clr-range ng-untouched ng-pristine"
+        class="clr-range"
         disabled=""
-      /><span class="fill-input ng-star-inserted" style="width: 118.68px;"></span>
+      /><span class="fill-input ng-star-inserted" style="width: 0;"></span>
     </div>
-    <clr-control-helper id="clr-form-control-3-helper" class="clr-subtext ng-star-inserted"
-      >Helper text</clr-control-helper
-    >
-  </div></clr-range-container
->
+    <div id="clr-form-control-3-helper" class="clr-subtext">Helper text</div>
+  </div>
+</div>
diff --git a/apps/website/.vuepress/public/demos/range/helper-css.html b/apps/website/.vuepress/public/demos/range/helper-css.html
@@ -1,18 +1,15 @@
-<clr-range-container class="clr-form-control clr-row"
-  ><label class="clr-control-label clr-col-12 clr-col-md-2" for="clr-form-control-2">Full example</label>
+<div class="clr-form-control clr-row">
+  <label class="clr-control-label clr-col-12 clr-col-md-2" for="helper-range">Full example</label>
   <div class="clr-control-container clr-col-md-10 clr-col-12">
     <div class="clr-range-wrapper progress-fill">
       <input
         type="range"
-        clrrange=""
         name="three"
         aria-describedby="clr-form-control-2-helper"
         id="clr-form-control-2"
-        class="clr-range ng-untouched ng-pristine ng-valid"
-      /><span class="fill-input ng-star-inserted" style="width: 46.44px;"></span>
+        class="clr-range"
+      /><span class="fill-input" style="width: 0px;"></span>
     </div>
-    <clr-control-helper id="clr-form-control-2-helper" class="clr-subtext ng-star-inserted"
-      >Helper text</clr-control-helper
-    >
-  </div></clr-range-container
->
+    <div id="clr-form-control-2-helper" class="clr-subtext">Helper text</div>
+  </div>
+</div>
diff --git a/apps/website/.vuepress/theme/components/Home.vue b/apps/website/.vuepress/theme/components/Home.vue
@@ -12,8 +12,8 @@
         <div cds-layout="m-y:lg m-y@sm:xl">
           <!--          <div>-->
           <h2 cds-text="title center medium">
-            We didn’t invent design systems - we just made the best one. Clarity is an open source, enterprise-focused
-            design system with a core value of accessibility.
+            We built an awesome design system, and we think you’ll agree. Join us to see how Clarity is an open source,
+            enterprise-focused design system with a core design principle of inclusion.
           </h2>
           <!--          </div>-->
         </div>
@@ -161,7 +161,7 @@
               <img cds-layout="container:fill" src="/images/home/img-pr-icons.svg" aria-hidden="true" />
             </router-link>
             <router-link to="/foundation/icons/">
-              <h4 cds-text="title medium" cds-layout="m-t:lg">
+              <h4 cds-text="title regular" cds-layout="m-t:lg">
                 Icons
               </h4>
             </router-link>