opened
blazebarsamian
username_0
### Scenario: Vars Table
- [ ] Create a new folder in `/docs-src/src/pages/components` called `TextAlignTables`
- [ ] Create a new file in that folder called `TextAlignVars.js`
- [ ] Table details:
    - [ ] **Table Headers:** `Variable Name`, `Default Value`, `Description`
    - [ ] On small screens, there should be a `Table.HeadSmall` that says `TextAlign Vars`
    - [ ] The Table Data should include `<span>[Column Header]</span>` before the table data so that the headers shows on small screens when the table stacks.
    - [ ] Make sure to check the settings file for any vars that were not listed at the top of the components stylesheet. 
- [ ] Import the TextAlignVars file into the main example page: `/docs-src/src/pages/components/TextAlign.js`
- [ ] After the `ExampleSection` include `<h3>Variables:</h3>`
- [ ] Then call in the table: `<TextAlignVars />`

### Scenario: Props Table
- [ ] Create a new file in the `TextAlignTables` folder called `TextAlignProps.js`
- [ ] Table details:
    - [ ] **Table Headers:** `Name`, `Type`, `Default`, `Description`
    - [ ] On small screens, there should be a `Table.HeadSmall` that says `TextAlign Props`
    - [ ] The Table Data should include `<span>[Column Header]</span>` before the table data so that the header shows on small screens when the table stacks. Example: 
   -   ```
        <Table.Data>
           <span>Name:</span> <code>shrink</code>
        </Table.Data>
        ```
   - [ ] Include all possible props (also check the components file to make sure you didnt miss any props that were not listed on the site.) 
- [ ] Import the TextAlignProps file into the main example page: `/docs-src/src/pages/components/TextAlign.js`
- [ ] After the Variables section include `<h3>Properties:</h3>`
- [ ] Then call in the table: `<TextAlignProps />`
As a user, I want the vars & props for the TextAlign component documented on the site
issue
reopened
blazebarsamian
username_0
### Scenario: Vars Table
- [ ] Create a new folder in `/docs-src/src/pages/components` called `TextAlignTables`
- [ ] Create a new file in that folder called `TextAlignVars.js`
- [ ] Table details:
    - [ ] **Table Headers:** `Variable Name`, `Default Value`, `Description`
    - [ ] On small screens, there should be a `Table.HeadStacked` that says `TextAlign Vars`
    - [ ] The Table Data should include `<Table.HeaderInline>[Column Header]</Table.HeaderInline>` before the table data so that the headers shows on small screens when the table stacks.
    - [ ] Make sure to check the settings file for any vars that were not listed at the top of the components stylesheet. 
- [ ] Import the TextAlignVars file into the main example page: `/docs-src/src/pages/components/TextAlign.js`
- [ ] After the `ExampleSection` include `<h3>Variables:</h3>`
- [ ] Then call in the table: `<TextAlignVars />`

### Scenario: Props Table
- [ ] Create a new file in the `TextAlignTables` folder called `TextAlignProps.js`
- [ ] Table details:
    - [ ] **Table Headers:** `Name`, `Type`, `Default`, `Description`
    - [ ] On small screens, there should be a `Table.HeadStacked` that says `TextAlign Props`
    - [ ] The Table Data should include `<Table.HeaderInline>[Column Header]</Table.HeaderInline>` before the table data so that the header shows on small screens when the table stacks. Example: 
   -   ```
        <Table.Data>
           <Table.HeaderInline>Name:</Table.HeaderInline> <code>shrink</code>
        </Table.Data>
        ```
   - [ ] Include all possible props (also check the components file to make sure you didnt miss any props that were not listed on the site.) 
- [ ] Import the TextAlignProps file into the main example page: `/docs-src/src/pages/components/TextAlign.js`
- [ ] After the Variables section include `<h3>Properties:</h3>`
- [ ] Then call in the table: `<TextAlignProps />`
As a user, I want the vars & props for the TextAlign component documented on the site
issue