chromium/chrome/browser/resources/ash/settings/os_files_page/files_settings_card.html

<style include="settings-shared">
  :host-context(body.revamp-wayfinding-enabled)
      #disconnectGoogleDriveAccountToggle {
    --cr-icon-button-margin-end: 16px;
    --iron-icon-fill-color: var(--cros-sys-primary);
  }

  #smbSharesIcon {
    fill: var(--cros-sys-primary);
    margin-inline-end: 16px;
  }

  #smbSharesTextContainer {
    /*
    The Add SMB Shares button changes size based on its text translation. Flex
    here is used for resizing the SMB shares text div based on the size of the
    button.
    */
    flex: 1;
  }
</style>

<settings-card header-text="$i18n{filesPageTitle}">
  <cr-link-row id="googleDriveRow"
      start-icon="[[rowIcons_.googleDrive]]"
      on-click="onClickGoogleDrive_"
      label="$i18n{googleDriveLabel}"
      role-description="$i18n{subpageArrowRoleDescription}">
      <div id="googleDriveSubLabel" slot="sub-label"
          inner-h-t-m-l="[[getGoogleDriveSubLabelInnerHtml_(driveDisabled_, bulkPinningPrefEnabled_, mirrorSyncPrefEnabled_)]]">
      </div>
  </cr-link-row>

  <template is="dom-if" if="[[shouldShowOneDriveSettings_]]">
    <cr-link-row id="oneDriveRow"
        start-icon="[[rowIcons_.oneDrive]]"
        class="hr"
        on-click="onClickOneDrive_"
        label="$i18n{oneDriveLabel}"
        sub-label="[[computeOneDriveSignedInLabel_(oneDriveConnectionState_)]]"
        role-description="$i18n{subpageArrowRoleDescription}">
    </cr-link-row>
  </template>

  <template is="dom-if" if="[[shouldShowOfficeSettings_]]">
    <cr-link-row id="officeRow"
          class="hr"
          start-icon="[[rowIcons_.ms365]]"
          on-click="onClickOffice_"
          label="$i18n{officeLabel}"
          sub-label="$i18n{officeSublabel}"
          role-description="$i18n{subpageArrowRoleDescription}">
      </cr-link-row>
  </template>

  <template is="dom-if" if="[[isRevampWayfindingEnabled_]]">
    <template is="dom-if" if="[[shouldShowAddSmbButton_]]" restamp>
      <div id="addSmbSharesRow" class="settings-box two-line">
        <iron-icon id="smbSharesIcon" icon="[[rowIcons_.smbShares]]">
        </iron-icon>
        <div id="smbSharesTextContainer" class="start">
          <div class="settings-box-text">
            <div>
              $i18n{smbSharesTitle}
            </div>
            <div id="secondaryText" class="secondary">
              <localized-link
                  localized-string="$i18n{smbSharesTitleDescription}"
                  link-url="$i18n{smbSharesLearnMoreURL}">
              </localized-link>
            </div>
          </div>
        </div>
        <controlled-button id="addShareButton"
            on-click="openAddSmbDialog_"
            label="$i18n{addSmbShare}"
            disabled="[[!prefs.network_file_shares.allowed.value]]"
            pref="[[prefs.network_file_shares.allowed]]"
            end-justified>
        </controlled-button>
      </div>
    </template>
  </template>

  <template is="dom-if" if="[[computeShowSmbLinkRow_(shouldShowAddSmbButton_)]]" restamp>
    <cr-link-row id="smbSharesRow"
        start-icon="[[rowIcons_.smbShares]]"
        class="hr"
        on-click="onClickSmbShares_"
        label="$i18n{smbSharesTitle}"
        role-description="$i18n{subpageArrowRoleDescription}">
    </cr-link-row>
  </template>
</settings-card>

<template is="dom-if" if="[[shouldShowAddSmbDialog_]]" restamp>
  <add-smb-share-dialog on-close="closeAddSmbDialog_"
      last-url="[[prefs.network_file_shares.most_recently_used_url.value]]"
      should-open-file-manager-after-mount>
  </add-smb-share-dialog>
</template>