@graupl/graupl 1.0.0-alpha.9 → 1.0.0-beta.0

package/docs/components/card.md

@@ -0,0 +1,369 @@
+# Card
+
+Defaults
+
+```jsx
+// Card selectors.
+$card-selector: ".card" !default;
+$card-image-selector: ".card-image" !default;
+$card-content-selector: ".card-content" !default;
+$card-body-selector: ".card-body" !default;
+$card-header-selector: ".card-header" !default;
+$card-footer-selector: ".card-footer" !default;
+$card-title-selector: ".card-title" !default;
+$horizontal-card-selector: ".horizontal" !default;
+$horizontal-card-left-selector: ".left" !default;
+$horizontal-card-right-selector: ".right" !default;
+$vertical-card-top-selector: ".top" !default;
+$vertical-card-bottom-selector: ".bottom" !default;
+$inverse-card-selector: ".inverse" !default;
+
+// Card properties.
+$card-transform: none !default;
+$card-hover-transform: $card-transform !default;
+
+// Card layout properties.
+$card-content-ratio: 1fr !default;
+$card-image-ratio: auto !default;
+$horizontal-card-content-ratio: 3fr !default;
+$horizontal-card-image-ratio: 2fr !default;
+```
+
+Variables
+
+Card Properties
+
+```jsx
+--#{root-defaults.$prefix}-card-padding-x
+--#{root-defaults.$prefix}-card-padding-y
+--#{root-defaults.$prefix}-card-padding
+--#{root-defaults.$prefix}-card-transition
+--#{root-defaults.$prefix}-card-transition-reduced-motion
+```
+
+Card transform properties
+
+```jsx
+--#{root-defaults.$prefix}-card-transform
+--#{root-defaults.$prefix}-card-hover-transform
+```
+
+Card gap properties
+
+```jsx
+--#{root-defaults.$prefix}-card-column-gap
+--#{root-defaults.$prefix}-card-row-gap
+--#{root-defaults.$prefix}-card-gap
+```
+
+Card color properties
+
+```jsx
+--#{root-defaults.$prefix}-card-background
+--#{root-defaults.$prefix}-card-color
+```
+
+Card border-properties
+
+```jsx
+--#{root-defaults.$prefix}-card-border-color
+--#{root-defaults.$prefix}-card-top-left-border-radius
+--#{root-defaults.$prefix}-card-top-right-border-radius
+--#{root-defaults.$prefix}-card-bottom-left-border-radius
+--#{root-defaults.$prefix}-card-bottom-right-border-radius
+--#{root-defaults.$prefix}-card-border-radius
+--#{root-defaults.$prefix}-card-border-style
+--#{root-defaults.$prefix}-card-border-width
+--#{root-defaults.$prefix}-card-border
+```
+
+Card layout properties
+
+```jsx
+--#{root-defaults.$prefix}-card-content-ratio
+--#{root-defaults.$prefix}-card-image-ratio
+--#{root-defaults.$prefix}-horizontal-card-content-ratio
+--#{root-defaults.$prefix}-horizontal-card-image-ratio
+```
+
+Card Image Properties
+
+```jsx
+--#{root-defaults.$prefix}-card-image-padding-x
+--#{root-defaults.$prefix}-card-image-padding-y
+--#{root-defaults.$prefix}-card-image-padding
+```
+
+Card content properties
+
+```jsx
+--#{root-defaults.$prefix}-card-content-padding-x
+--#{root-defaults.$prefix}-card-content-padding-y
+--#{root-defaults.$prefix}-card-content-padding
+```
+
+Card content gap properties
+
+```jsx
+--#{root-defaults.$prefix}-card-content-column-gap
+--#{root-defaults.$prefix}-card-content-row-gap
+--#{root-defaults.$prefix}-card-content-gap
+```
+
+Card title properties
+
+```jsx
+--#{root-defaults.$prefix}-card-title-color
+--#{root-defaults.$prefix}-card-title-font-size
+--#{root-defaults.$prefix}-card-title-font-weight
+--#{root-defaults.$prefix}-card-title-font-family
+--#{root-defaults.$prefix}-card-title-line-height
+```
+
+Markup
+
+```jsx
+    <div class="py-10 full-width container">
+      <h2>Cards</h2>
+      <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.top</span> class will have the image placed on the top while cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom</span> class will have the image placed on the bottom.</p>
+      <div class="columns">
+        <div class="card">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card bottom">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card bottom">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card bottom">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="py-10 full-width container">
+      <h2>Horizontal Cards</h2>
+      <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.right</span> class will have the image placed on the right while cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.left</span> class will have the image placed on the left.</p>
+      <div class="columns count-2">
+        <div class="card horizontal">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal right">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal right">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal right">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="py-10 full-width container">
+      <h2>Inverse Cards</h2>
+      <p>Cards using the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.inverse</span> class will have the image placed on the right if it is a horizontal card and on the bottom if it is a vertical card.</p>
+      <p>This is mainly to provide a shortcut for horiztonal cards that you'd like to use the <span class="display-inline-block text-tertiary-800 bg-secondary-100 px-1">.bottom .right</span> classes on when the card is forced to be vertical.</p>
+      <div class="columns count-2">
+        <div class="card horizontal inverse">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+        <div class="card horizontal inverse">
+          <div class="card-image">
+            <img src="https://unsplash.it/1000/400" alt="Card image">
+          </div>
+          <div class="card-content">
+            <div class="card-header">
+              <h3 class="card-title">Title</h3>
+            </div>
+            <div class="card-body">
+              <p>This is some text that describes the card.</p>
+            </div>
+            <div class="card-footer">
+              <a class="button primary stretched" href="#">Card Action</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+```

package/docs/components/index.md

@@ -0,0 +1 @@
+# Components

package/docs/components/inputgroup.md

@@ -0,0 +1,159 @@
+# Input Group
+
+Defaults
+
+```jsx
+// Input group selectors.
+$input-group-selector: ".input-group" !default;
+$input-group-inline-selector: ".inline" !default;
+$input-group-help-text-selector: ".help-text" !default;
+
+// Grid names.
+$input-group-grid-label-name: label !default;
+$input-group-grid-input-name: input !default;
+$input-group-grid-help-name: help !default;
+
+// Input group properties.
+$input-group-grid-template-columns: 100% !default;
+$input-group-grid-template-rows: auto auto auto !default;
+
+// Inline input group properties.
+$input-group-inline-grid-template-columns: auto 1fr !default;
+$input-group-inline-grid-template-rows: auto auto !default;
+
+// Inner element properties.
+$input-group-label-grid-area: $input-group-grid-label-name !default;
+$input-group-input-grid-area: $input-group-grid-input-name !default;
+$input-group-help-grid-area: $input-group-grid-help-name !default;
+```
+
+Variables
+
+Input group properties
+
+```jsx
+--#{root-defaults.$prefix}-input-group-grid-template-areas
+--#{root-defaults.$prefix}-input-group-grid-template-columns
+--#{root-defaults.$prefix}-input-group-grid-template-rows
+--#{root-defaults.$prefix}-input-group-row-gap
+--#{root-defaults.$prefix}-input-group-column-gap
+--#{root-defaults.$prefix}-input-group-gap
+```
+
+Inline input group properties
+
+```jsx
+--#{root-defaults.$prefix}-input-group-inline-grid-template-areas
+--#{root-defaults.$prefix}-input-group-inline-grid-template-columns
+--#{root-defaults.$prefix}-input-group-inline-grid-template-rows
+```
+
+Inner element properties
+
+```jsx
+--#{root-defaults.$prefix}-input-group-label-grid-area
+--#{root-defaults.$prefix}-input-group-input-grid-area
+--#{root-defaults.$prefix}-input-group-help-grid-area
+```
+
+Markup
+
+```jsx
+    <div class="py-10 full-width container">
+      <h2>Form elements</h2>
+      <p>Graupl provides default styling for all form elements.</p>
+      <form class="full-width rg-4">
+        <div class="input-group">
+          <label for="input">Input</label>
+          <input type="text" placeholder="Input" id="input">
+          <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
+        </div>
+        <div class="input-group inline"><label for="input-readonly">Readonly Input</label>
+          <input type="text" placeholder="Readonly Input" id="input-readonly" value="Readonly Input" readonly>
+          <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
+        </div>
+        <div class="input-group"><label for="input-disabled">Disabled Input</label>
+          <input type="text" placeholder="Disabled Input" id="input-disabled" disabled>
+          <small class="help-text">This is some help text to assist with knowing what the field is about.</small>
+        </div>
+        <div class="input-group inline"><label for="textarea">Textarea</label>
+          <textarea class="textarea" placeholder="Textarea" id="textarea"></textarea>
+        </div>
+        <div class="input-group"><label for="textarea-readonly">Readonly Textarea</label>
+          <textarea class="textarea" placeholder="Readonly Textarea" id="textarea-readonly"
+            readonly>Readonly Textarea</textarea>
+        </div>
+        <div class="input-group"><label for="textarea-disabled">Disabled Textarea</label>
+          <textarea class="textarea" placeholder="Disabled Textarea" id="textarea-disabled" disabled></textarea>
+        </div>
+        <div class="input-group inline"><label for="select">Select</label>
+          <select id="select">
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <optgroup label="Group 1">
+              <option value="3">Option 3</option>
+              <option value="4">Option 4</option>
+              <option value="5">Option 5</option>
+            </optgroup>
+          </select>
+        </div>
+        <div class="input-group"><label for="select-disabled">Disabled Select</label>
+          <select id="select-disabled" disabled>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <optgroup label="Group 1">
+              <option value="3">Option 3</option>
+              <option value="4">Option 4</option>
+              <option value="5">Option 5</option>
+            </optgroup>
+          </select>
+        </div>
+        <div class="input-group"><label for"multi-select">Multi-select</label>
+          <select id="multi-select" multiple>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <optgroup label="Group 1">
+              <option value="3">Option 3</option>
+              <option value="4">Option 4</option>
+              <option value="5">Option 5</option>
+            </optgroup>
+          </select>
+        </div>
+        <div class="input-group inline"><label for="multi-select-disabled">Disabled Multi-select</label>
+          <select id="multi-select-disabled" multiple disabled>
+            <option value="1">Option 1</option>
+            <option value="2">Option 2</option>
+            <optgroup label="Group 1">
+              <option value="3">Option 3</option>
+              <option value="4">Option 4</option>
+              <option value="5">Option 5</option>
+            </optgroup>
+          </select>
+        </div>
+        <fieldset>
+          <legend>Checkboxes</legend>
+          <label for="checkbox">
+            <input type="checkbox" id="checkbox"> Checkbox</label>
+          <label for="checkbox-checked">
+            <input type="checkbox" id="checkbox-checked" checked> Checked Checkbox</label>
+          <label for="checkbox-disabled">
+            <input type="checkbox" id="checkbox-disabled" disabled> Disabled Checkbox</label>
+        </fieldset>
+        <fieldset>
+          <legend>Radio Buttons</legend>
+          <label for="radio"><input type="radio" id="radio" name="radio"> Radio</label>
+          <label for="radio-checked"><input type="radio" id="radio-checked" name="radio" checked> Checked Radio</label>
+          <label for="radio-disabled"><input type="radio" id="radio-disabled" name="radio" disabled> Disabled
+            Radio</label>
+        </fieldset>
+        <fieldset disabled>
+          <legend>Disabled Fieldset</legend>
+          <label for="disabled-fieldset-checkbox">
+            <input type="checkbox" id="disabled-fieldset-checkbox"> Checkbox</label>
+        </fieldset>
+        <div class="input-group"><label for="range">Range</label>
+          <input type="range" class="range" id="range">
+        </div>
+      </form>
+    </div>
+```