EDU-13701: Add new section: 'Adding styles to a new section'

docs/faststore/docs/customization/building-sections/creating-a-new-section.mdx

@@ -229,3 +229,182 @@ For this section, we will use the following components from the Faststore UI: [B
 
   ![new-section-structure-without-styles](https://vtexhelp.vtexassets.com/assets/docs/src/section-structure-without-styles___7be40088d6137bdd63cbb4940c2fa599.png)
 
+To add styles to `OurStore`, refer to the following section [Importing styles when creating a new section](#importing-styles-when-creating-a-new-section).
+
+## Adding styles to a new section
+
+After creating a new section, you can style it to match your store's branding. Follow the steps below using the [`OurStores`](#ourstores) section as an example.
+
+### Instructions
+
+1. In your store code, open the `components` folder and create the `ourStores.module.scss` file. This file will import the FastStore UI components styles.
+2. Add the following code to the `ourStores.module.scss` file:
+
+  ```scss 
+  .ourStores {
+    @import '@faststore/ui/src/components/atoms/Button/styles.scss';
+    @import '@faststore/ui/src/components/atoms/Select/styles.scss';
+    @import '@faststore/ui/src/components/molecules/SelectField/styles.scss';
+  }
+  ```
+
+> ℹ️ This code imports the [Button](https://developers.vtex.com/docs/guides/faststore/atoms-icon) and [SelectField](https://developers.vtex.com/docs/guides/faststore/molecules-select-field) styles to the custom component that you are creating. The `Select` component styles is also being improted, since `SelectField` inherits it.
+
+3. Import this stylesheet into the `OurStores.tsx` file:
+
+  ```tsx mark=4
+  import React from 'react'
+  import { Button, Icon, SelectField } from '@faststore/ui'
+
+  import styles from './ourStores.module.scss'
+
+  export interface OurStoresProps {
+    title: string
+    description: string
+  }
+
+  export default function OurStores(props: OurStoresProps) {
+    return (
+      <section className={styles.ourStores}>
+        <h2>{props.title}</h2>
+        <p>{props.description}</p>
+        <div>
+          <SelectField
+            id="select-state-store"
+            label="State:"
+            options={{
+              newYork: 'New York',
+              arizona: 'Arizona',
+              massachusetts: 'Massachusetts',
+              hawaii: 'Hawaii',
+            }}
+          />
+          <SelectField
+            id="select-city-store"
+            label="City:"
+            options={{
+              newYorkCity: 'New York City',
+              phoenix: 'Phoenix',
+              boston: 'Boston',
+              honolulu: 'Honolulu',
+            }}
+          />
+          <Button
+            variant="secondary"
+            icon={<Icon name="ArrowRight" />}
+            iconPosition="right"
+          >
+            Find Store
+          </Button>
+        </div>
+      </section>
+    )
+  }
+  ```
+
+4. Open the terminal and run `yarn dev` to see the section with initial styling.
+
+  ![new-section-without-styles](https://vtexhelp.vtexassets.com/assets/docs/src/without-styles___4680d2a9a67e4175f3b73eff036ca8ac.png)
+
+5. Add more styles to the section by using [design tokens](https://developers.vtex.com/docs/guides/faststore/global-tokens-overview#global-tokens) and [component's data attributes](https://developers.vtex.com/docs/guides/faststore/atoms-button#customization) to the `ourStores.module.scss` file:
+
+  ```scss mark=6:42
+  .ourStores {
+    @import '@faststore/ui/src/components/atoms/Button/styles.scss';
+    @import '@faststore/ui/src/components/atoms/Select/styles.scss';
+    @import '@faststore/ui/src/components/molecules/SelectField/styles.scss';
+
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    padding: var(--fs-spacing-5);
+    margin: auto;
+    background-color: var(--fs-color-neutral-bkg);
+
+    [data-fs-select-field] {
+      flex-direction: column;
+      align-items: flex-start;
+
+      [data-fs-select] {
+        border: var(--fs-border-width) solid var(--fs-border-color);
+        margin-top: var(--fs-spacing-0);
+        width: 10rem;
+        height: var(--fs-control-min-height);
+
+        select {
+          width: 100%;
+        }
+      }
+    }
+  }
+
+  .ourStores__title {
+    font-size: var(--fs-text-size-title-section);
+    margin-bottom: var(--fs-spacing-1);
+  }
+
+  .ourStores__content {
+    display: flex;
+    align-items: flex-end;
+    column-gap: var(--fs-spacing-5);
+    margin: var(--fs-spacing-5);
+  }
+  ```
+
+6. Update the `OuStore.tsx` file by adding new CSS classes to style the title and the `SelectedField`.
+
+  ```tsx mark=14:16
+  import React from 'react'
+  import { Button, Icon, SelectField } from '@faststore/ui'
+
+  import styles from './ourStores.module.scss'
+
+  export interface OurStoresProps {
+    title: string
+    description: string
+  }
+
+  export default function OurStores(props: OurStoresProps) {
+    return (
+      <section className={styles.ourStores}>
+        <h2 className={styles.ourStores__title}>{props.title}</h2>
+        <p>{props.description}</p>
+        <div className={styles.ourStores__content}>
+          <SelectField
+            id="select-state-store"
+            label="State:"
+            options={{
+              newYork: 'New York',
+              arizona: 'Arizona',
+              massachusetts: 'Massachusetts',
+              hawaii: 'Hawaii',
+            }}
+          />
+          <SelectField
+            id="select-city-store"
+            label="City:"
+            options={{
+              newYorkCity: 'New York City',
+              phoenix: 'Phoenix',
+              boston: 'Boston',
+              honolulu: 'Honolulu',
+            }}
+          />
+          <Button
+            variant="secondary"
+            icon={<Icon name="ArrowRight" />}
+            iconPosition="right"
+          >
+            Find Store
+          </Button>
+        </div>
+      </section>
+    )
+  }
+  ```
+
+6. Run again `yarn dev` in the terminal to see the final result of the styled section:
+
+![new-section-with-styles](https://vtexhelp.vtexassets.com/assets/docs/src/with-styles___4b1cd40d4dcbbba544fd051b1f2dcb36.png)