fix(styles): update Switch to latest design [ci visual]

[InnaAtanasova]

Related Issue

Closes #4402

Description

• update the component to match the latest Horizon design
• added Text Switch
• fixed RTL issues

BREAKING CHANGE:

1. Basic/Default Switch now has icons:

Before:

<label class="fd-switch">
    <span class="fd-switch__control">
        <input class="fd-switch__input" type="checkbox" name="" value="" aria-labelledby="label1" id="y21YO3251">
        <div class="fd-switch__slider">
             <div class="fd-switch__track">
                  <span class="fd-switch__handle" role="presentation"></span>
              </div>
        </div>
    </span>
</label>

After:

<label class="fd-switch">
    <span class="fd-switch__control">
         <input class="fd-switch__input" type="checkbox" name="" value="" aria-labelledby="label1" id="y21YO3251">
         <div class="fd-switch__slider">
              <div class="fd-switch__track">
                   <i role="presentation" class="fd-switch__icon fd-switch__icon--on sap-icon--accept"></i>
                   <span class="fd-switch__handle" role="presentation"></span>
                   <i role="presentation" class="fd-switch__icon fd-switch__icon--off sap-icon--less"></i>
              </div>
          </div>
    </span>
</label>

2. Text Switch has the text inside
   Before:

<label class="fd-switch">
    <span class="fd-switch__text">Off</span>
    <span class="fd-switch__control">
        <input class="fd-switch__input" type="checkbox" name="" aria-labelledby="label3" value="" id="y21Y677251">
        <div class="fd-switch__slider">
            <div class="fd-switch__track">
                <span class="fd-switch__handle" role="presentation"></span>
            </div>
           </div>
       </span>
</label>

After:

<label class="fd-switch fd-switch--text">
    <span class="fd-switch__control">
        <input class="fd-switch__input" type="checkbox" name="" aria-labelledby="label3" value="" id="y21Y677251">
        <div class="fd-switch__slider">
            <div class="fd-switch__track">
                <span class="fd-switch__text fd-switch__text--on">on</span>
                <span class="fd-switch__handle" role="presentation"></span>
                <span class="fd-switch__text fd-switch__text--off">off</span>
            </div>
        </div>
    </span>
</label>

[netlify]

✅ Deploy Preview for fundamental-styles ready!

Name	Link
🔨 Latest commit	e0bff3b
🔍 Latest deploy log	https://app.netlify.com/sites/fundamental-styles/deploys/654ba909cbd0bb000851fad8
😎 Deploy Preview	https://deploy-preview-4967--fundamental-styles.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.