✨ feat: Update existing pseudo-variant tables, add pseudo-variant tab…

…les for remaining pages

cirrus-docs-next/layouts/components/pseudo-variant/index.tsx

@@ -11,7 +11,6 @@ export const PseudoVariant: React.FC<any> = (props: PseudoVariantProps) => {
         PseudoVariantsEnum.CHECKED,
         PseudoVariantsEnum.DARK,
         PseudoVariantsEnum.DISABLED,
-        PseudoVariantsEnum.EXPAND,
         PseudoVariantsEnum.FIRST_OF_TYPE,
         PseudoVariantsEnum.FOCUS,
         PseudoVariantsEnum.FOCUS_VISIBLE,
@@ -35,7 +34,7 @@ export const PseudoVariant: React.FC<any> = (props: PseudoVariantProps) => {
 
     return (
         <>
-            <h6>Supported Pseudo-Variants</h6>
+            <h6 className="font-normal">Supported Pseudo-Variants</h6>
             <div className="u-flex u-gap-1 u-flex-wrap">
                 {PSEUDO_VARIANTS.map((pseudo) => (
                     <div

cirrus-docs-next/models/psuedo-variant.ts

@@ -3,7 +3,6 @@ export enum PseudoVariantsEnum {
     CHECKED = 'checked',
     DARK = 'dark',
     DISABLED = 'disabled',
-    EXPAND = 'expand',
     FIRST_OF_TYPE = 'first-of-type',
     FOCUS = 'focus',
     FOCUS_VISIBLE = 'focus-visible',

cirrus-docs-next/src/fonts/letter-spacing/index.tsx

@@ -14,6 +14,8 @@ import { toc } from './toc';
 import { PAGE_TITLE_PREFIX } from '../../../constants';
 import { TITLE_FONTS } from '../../../config/sidebar';
 import { Blockquote } from '../../../layouts/components/blockquote';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
+import { PseudoVariantsEnum } from '../../../models/psuedo-variant';
 
 export const LetterSpacingPage: React.FC<any> = (props) => {
     const DEFAULT_LETTER_SPACING_CLASSES = {
@@ -56,6 +58,8 @@ export const LetterSpacingPage: React.FC<any> = (props) => {
                         <p>These are utility classes that specify the letter spacing (tracking) of an element.</p>
 
                         <ClassTable classTable={classTable} />
+                        <div className="space"></div>
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
                     </div>
                 </section>
 

cirrus-docs-next/src/fonts/line-height/index.tsx

@@ -14,6 +14,7 @@ import { toc } from './toc';
 import { PAGE_TITLE_PREFIX } from '../../../constants';
 import { TITLE_FONTS } from '../../../config/sidebar';
 import { Blockquote } from '../../../layouts/components/blockquote';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
 
 export const LineHeightsPage: React.FC<any> = (props) => {
     const DEFAULT_LINE_HEIGHT_CLASSES = {
@@ -46,6 +47,8 @@ export const LineHeightsPage: React.FC<any> = (props) => {
                         <p>These are utility classes that specify the line height of an element's text.</p>
 
                         <ClassTable classTable={classTable} />
+                        <div className="space"></div>
+                        <PseudoVariant defaultEnabledPseudos={[]} />
                     </div>
                 </section>
 

cirrus-docs-next/src/grid/span/index.tsx

@@ -12,6 +12,8 @@ import { DEFAULT_COLUMN_SIZING_SYSTEM, DEFAULT_ROW_SIZING_SYSTEM, DEFAULT_ROW_ST
 import Link from 'next/link';
 import { TITLE_GRID } from '../../../config/sidebar';
 import { ClassTable } from '../../../layouts/components/class-table';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
+import { PseudoVariantsEnum } from '../../../models/psuedo-variant';
 
 export const GridSpanPage: React.FC<any> = (props) => {
     const GRID_COLUMN_CLASS_TABLE = DEFAULT_COLUMN_SIZING_SYSTEM.map((size) => {
@@ -85,6 +87,8 @@ export const GridSpanPage: React.FC<any> = (props) => {
                         </p>
 
                         <ClassTable classTable={GRID_COLUMN_CLASS_TABLE} />
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
+                        <div className="space space--lg"></div>
 
                         <div className="grid u-gap-2">
                             <div className="grid-c-1 _grid-ex">
@@ -189,6 +193,8 @@ export const GridSpanPage: React.FC<any> = (props) => {
                         </p>
 
                         <ClassTable classTable={GRID_ROW_CLASS_TABLE} />
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
+                        <div className="space space--lg"></div>
 
                         <div
                             className="grid grid-cols-6 u-gap-2"
@@ -247,13 +253,17 @@ export const GridSpanPage: React.FC<any> = (props) => {
                             class. The <i>cs</i> stands for <i>column start</i>.
                         </p>
                         <ClassTable classTable={GRID_CS_CLASS_TABLE} />
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
+                        <div className="space space--xl"></div>
+
                         <p>
                             To specify the ending column position for an element, use the <code>grid-ce-[1-12]</code>{' '}
                             class. The <i>ce</i> stands for <i>column end</i>.
                         </p>
                         <ClassTable classTable={GRID_CE_CLASS_TABLE} />
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
 
-                        <div className="space space--lg"></div>
+                        <div className="space space--xl"></div>
 
                         <div className="grid u-gap-2">
                             <div className="grid-cs-2 grid-ce-7 _grid-ex">2-7</div>
@@ -298,11 +308,15 @@ export const GridSpanPage: React.FC<any> = (props) => {
                             class. The <i>rs</i> stands for <i>row start</i>.
                         </p>
                         <ClassTable classTable={GRID_RS_CLASS_TABLE} />
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
+                        <div className="space space--xl"></div>
                         <p>
                             To specify the ending row position for an element, use the <code>grid-re-[1-4]</code> class.
                             The <i>re</i> stands for <i>row end</i>.
                         </p>
                         <ClassTable classTable={GRID_RE_CLASS_TABLE} />
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
+                        <div className="space space--xl"></div>
                         <div className="grid grid-cols-5 grid-rows-4 u-gap-2">
                             <div className="grid-rs-1 grid-re-4 _grid-ex">1-4</div>
                             <div className="grid-rs-2 grid-re-4 _grid-ex">2-4</div>

cirrus-docs-next/src/grid/span/toc.ts

@@ -15,6 +15,11 @@ export const toc: TableOfContentsEntry[] = [
                 anchor: '#start-end',
                 children: null,
             },
+            {
+                name: 'Variants',
+                anchor: '#variants',
+                children: null,
+            },
         ],
     },
 ];

cirrus-docs-next/src/grid/templates/index.tsx

@@ -13,6 +13,8 @@ import { DEFAULT_COLUMN_SIZING_SYSTEM, DEFAULT_ROW_SIZING_SYSTEM, PAGE_TITLE_PRE
 import { Tag, VersionTag } from '../../../layouts/components/tag';
 import { TITLE_GRID } from '../../../config/sidebar';
 import { ClassTable } from '../../../layouts/components/class-table';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
+import { PseudoVariantsEnum } from '../../../models/psuedo-variant';
 
 export const GridTemplatesPage: React.FC<any> = (props) => {
 
@@ -141,6 +143,8 @@ grid-template-rows: var(--grid-template-row);`,
                         </p>
 
                         <ClassTable classTable={GRID_COLUMN_CLASS_TABLE} />
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
+                        <div className="space space--lg"></div>
 
                         <div className="grid u-gap-2 grid-cols-1">
                             <div className="_grid-ex">
@@ -294,6 +298,8 @@ grid-template-rows: var(--grid-template-row);`,
                         </p>
 
                         <ClassTable classTable={GRID_ROW_CLASS_TABLE} />
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
+                        <div className="space space--lg"></div>
 
                         <div className="grid u-gap-2 grid-rows-1">
                             <div className="_grid-ex grid-r-1">

cirrus-docs-next/src/layout/height/index.tsx

@@ -14,6 +14,8 @@ import { DEFAULT_PERCENTAGES, DEFAULT_SIZING_SYSTEM, PAGE_TITLE_PREFIX } from '.
 import { ClassTable } from '../../../layouts/components/class-table';
 import { VersionTag } from '../../../layouts/components/tag';
 import { TITLE_LAYOUT } from '../../../config/sidebar';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
+import { PseudoVariantsEnum } from '../../../models/psuedo-variant';
 
 export const HeightPage: React.FC<any> = (props) => {
     let classTable = [
@@ -66,6 +68,9 @@ export const HeightPage: React.FC<any> = (props) => {
                         <p>Classes to set the height of an element.</p>
 
                         <ClassTable classTable={classTable} />
+                        <div className="space"></div>
+
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
                     </div>
                 </section>
 
@@ -217,8 +222,9 @@ export const HeightPage: React.FC<any> = (props) => {
                         </span>
                         <p>
                             All utility classes mentioned here support viewport based application. All you need to do is
-                            add a <code>&lt;viewport&gt;:&lt;class&gt;</code> at the end of the class(es) you are using. For example,
-                            use <code>md:h-30p</code> to apply <code>h-30p</code> on medium screens and above.
+                            add a <code>&lt;viewport&gt;:&lt;class&gt;</code> at the end of the class(es) you are using.
+                            For example, use <code>md:h-30p</code> to apply <code>h-30p</code> on medium screens and
+                            above.
                         </p>
 
                         <CodeBlock

cirrus-docs-next/src/layout/margin/index.tsx

@@ -14,6 +14,8 @@ import Link from 'next/link';
 import { ClassTable } from '../../../layouts/components/class-table';
 import { Tag } from '../../../layouts/components/tag';
 import { TITLE_LAYOUT } from '../../../config/sidebar';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
+import { PseudoVariantsEnum } from '../../../models/psuedo-variant';
 
 export const MarginPage: React.FC<any> = (props) => {
     const types = [
@@ -80,6 +82,17 @@ export const MarginPage: React.FC<any> = (props) => {
                         <Headline title="Margin" link="#margin" />
                         <div className="divider"></div>
                         <p>These are utility classes used to add margins for any element.</p>
+
+                        <ClassTable classTable={classTable} />
+                        <div className="space"></div>
+
+                        <PseudoVariant
+                            defaultEnabledPseudos={[
+                                PseudoVariantsEnum.RESPONSIVE,
+                                PseudoVariantsEnum.FIRST_OF_TYPE,
+                                PseudoVariantsEnum.LAST_OF_TYPE,
+                            ]}
+                        />
                     </div>
                 </section>
 
@@ -96,8 +109,6 @@ export const MarginPage: React.FC<any> = (props) => {
                             </Link>{' '}
                             below.
                         </p>
-
-                        <ClassTable classTable={classTable} />
                     </div>
                 </section>
 
@@ -242,8 +253,8 @@ export const MarginPage: React.FC<any> = (props) => {
                         </span>
                         <p>
                             The margin classes mentioned here support viewport based application. All you need to do is
-                            add a <code>&lt;viewport&gt;:&lt;class&gt;</code> at the end of the class(es) you are using. For example,
-                            use <code>md:m-3</code> to apply <code>m-3</code> on medium screens and above.
+                            add a <code>&lt;viewport&gt;:&lt;class&gt;</code> at the end of the class(es) you are using.
+                            For example, use <code>md:m-3</code> to apply <code>m-3</code> on medium screens and above.
                         </p>
 
                         <CodeBlock

cirrus-docs-next/src/layout/max-height/index.tsx

@@ -14,6 +14,8 @@ import { DefaultLayout } from '../../../layouts/default';
 import { toc } from './toc';
 import { PAGE_TITLE_PREFIX } from '../../../constants';
 import { TITLE_LAYOUT } from '../../../config/sidebar';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
+import { PseudoVariantsEnum } from '../../../models/psuedo-variant';
 
 export const MaxHeightPage: React.FC<any> = (props) => {
     const DEFAULT_CLASSES = {
@@ -52,6 +54,9 @@ export const MaxHeightPage: React.FC<any> = (props) => {
                         <p>Classes to set the maximum height of an element.</p>
 
                         <ClassTable classTable={classTable} />
+                        <div className="space"></div>
+
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
                     </div>
                 </section>
 
@@ -60,22 +65,26 @@ export const MaxHeightPage: React.FC<any> = (props) => {
                         <Headline title="Examples" link="#examples" size="4" />
                         <div className="divider"></div>
 
-                        <p>Using these classes it quite simple to control the maximum height an element should have. You can either use a percentage based class or use a class to span the whole screen using the <code>max-h-[size]</code> syntax.</p>
+                        <p>
+                            Using these classes it quite simple to control the maximum height an element should have.
+                            You can either use a percentage based class or use a class to span the whole screen using
+                            the <code>max-h-[size]</code> syntax.
+                        </p>
 
                         <div className="p-4 bg-green-100 u-round-xs text-white font-bold u-text-center">
-                            <div className="max-h-100p p-2 bg-green-500 u-round-xs">
-                                max-h-100p
-                            </div>
+                            <div className="max-h-100p p-2 bg-green-500 u-round-xs">max-h-100p</div>
                         </div>
                         <div className="space"></div>
 
-                        <CodeBlock code={`<div class="p-4 bg-green-100 u-round-xs text-white font-bold u-text-center">
+                        <CodeBlock
+                            code={`<div class="p-4 bg-green-100 u-round-xs text-white font-bold u-text-center">
     <div class="max-h-100p p-2 bg-green-500 u-round-xs">max-h-100p</div>
-</div>`} language='htmlbars' />
-
+</div>`}
+                            language="htmlbars"
+                        />
                     </div>
                 </section>
-                
+
                 <section className="padtop" id="responsive">
                     <div className="content">
                         <Headline title="Responsive" link="#responsive" size="4" />
@@ -123,15 +132,15 @@ $config: (
                         </p>
                     </div>
                 </section>
-                
+
                 <section className="padtop" id="variants">
                     <div className="content">
                         <Headline title="Variants" link="#variants" size="4" />
                         <div className="divider"></div>
 
                         <p>
-                            The classes specified above are the default utility classes for setting maximum heights. You can
-                            add, change, or remove classes within the <code>_config.scss</code> file of Cirrus.
+                            The classes specified above are the default utility classes for setting maximum heights. You
+                            can add, change, or remove classes within the <code>_config.scss</code> file of Cirrus.
                         </p>
 
                         <div className="space"></div>

cirrus-docs-next/src/layout/max-width/index.tsx

@@ -14,6 +14,8 @@ import { DefaultLayout } from '../../../layouts/default';
 import { toc } from './toc';
 import { PAGE_TITLE_PREFIX } from '../../../constants';
 import { TITLE_LAYOUT } from '../../../config/sidebar';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
+import { PseudoVariantsEnum } from '../../../models/psuedo-variant';
 
 export const MaxWidthPage: React.FC<any> = (props) => {
     const DEFAULT_CLASSES = {
@@ -57,6 +59,9 @@ export const MaxWidthPage: React.FC<any> = (props) => {
                         <p>Classes to set the maximum width of an element.</p>
 
                         <ClassTable classTable={classTable} />
+                        <div className="space"></div>
+
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
                     </div>
                 </section>
 

cirrus-docs-next/src/layout/min-height/index.tsx

@@ -14,6 +14,8 @@ import { DefaultLayout } from '../../../layouts/default';
 import { toc } from './toc';
 import { PAGE_TITLE_PREFIX } from '../../../constants';
 import { TITLE_LAYOUT } from '../../../config/sidebar';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
+import { PseudoVariantsEnum } from '../../../models/psuedo-variant';
 
 export const MinHeightPage: React.FC<any> = (props) => {
     const DEFAULT_CLASSES = {
@@ -52,6 +54,9 @@ export const MinHeightPage: React.FC<any> = (props) => {
                         <p>Classes to set the minimum height of an element.</p>
 
                         <ClassTable classTable={classTable} />
+                        <div className="space"></div>
+
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
                     </div>
                 </section>
 

cirrus-docs-next/src/layout/min-width/index.tsx

@@ -15,6 +15,8 @@ import { toc } from './toc';
 import { PAGE_TITLE_PREFIX } from '../../../constants';
 import { TITLE_LAYOUT } from '../../../config/sidebar';
 import { ResizableInternal } from '../../../layouts/components/resizable';
+import { PseudoVariant } from '../../../layouts/components/pseudo-variant';
+import { PseudoVariantsEnum } from '../../../models/psuedo-variant';
 
 export const MinWidthPage: React.FC<any> = (props) => {
     const DEFAULT_CLASSES = {
@@ -58,6 +60,9 @@ export const MinWidthPage: React.FC<any> = (props) => {
                         <p>Classes to set the minimum width of an element.</p>
 
                         <ClassTable classTable={classTable} />
+                        <div className="space"></div>
+
+                        <PseudoVariant defaultEnabledPseudos={[PseudoVariantsEnum.RESPONSIVE]} />
                     </div>
                 </section>