Render availability items without version range details

src/components/DocumentationTopic/Summary/AvailabilityRange.vue

@@ -26,7 +26,7 @@ export default {
     },
     introducedAt: {
       type: String,
-      required: true,
+      required: false,
     },
     platformName: {
       type: String,
@@ -51,23 +51,38 @@ export default {
         introducedAt,
         platformName: name,
       } = this;
-      return deprecatedAt ? (
-        this.$t('availability.introduced-and-deprecated', { name, introducedAt, deprecatedAt })
-      ) : (
-        this.$t('availability.available-on', { name, introducedAt })
-      );
+      if (introducedAt && deprecatedAt) {
+        return this.$t('availability.introduced-and-deprecated', {
+          name,
+          introducedAt,
+          deprecatedAt,
+        });
+      }
+
+      if (introducedAt) {
+        return this.$t('availability.available-on-platform-version', {
+          name,
+          introducedAt,
+        });
+      }
+
+      return this.$t('availability.available-on-platform', { name });
     },
     text() {
       const {
         deprecatedAt,
         introducedAt,
         platformName: name,
       } = this;
-      return deprecatedAt ? (
-        `${name} ${introducedAt}\u2013${deprecatedAt}`
-      ) : (
-        `${name} ${introducedAt}+`
-      );
+      if (introducedAt && deprecatedAt) {
+        return `${name} ${introducedAt}\u2013${deprecatedAt}`;
+      }
+
+      if (introducedAt) {
+        return `${name} ${introducedAt}+`;
+      }
+
+      return name;
     },
   },
 };

src/lang/locales/en-US.json

@@ -124,7 +124,8 @@
   },
   "availability": {
     "introduced-and-deprecated": "Introduced in {name} {introducedAt} and deprecated in {name} {deprecatedAt}",
-    "available-on": "Available on {name} {introducedAt} and later"
+    "available-on-platform": "Available on {name}",
+    "available-on-platform-version": "Available on {name} {introducedAt} and later"
   },
   "more": "More",
   "less": "Less",

src/lang/locales/ja-JP.json

@@ -123,7 +123,7 @@
   },
   "availability": {
     "introduced-and-deprecated": "{name} {introducedAt}で導入され、{name} {deprecatedAt}で非推奨になりました",
-    "available-on": "{name} {introducedAt}以降で使用できます"
+    "available-on-platform-version": "{name} {introducedAt}以降で使用できます"
   },
   "more": "さらに表示",
   "less": "表示を減らす",

src/lang/locales/ko-KR.json

@@ -123,7 +123,7 @@
   },
   "availability": {
     "introduced-and-deprecated": "{name} {introducedAt}에서 소개되었고 {name} {deprecatedAt}에서 제거됨",
-    "available-on": "{name} {introducedAt} 이상에서 사용할 수 있음"
+    "available-on-platform-version": "{name} {introducedAt} 이상에서 사용할 수 있음"
   },
   "more": "더 보기",
   "less": "간략히",

src/lang/locales/zh-CN.json

@@ -123,7 +123,7 @@
   },
   "availability": {
     "introduced-and-deprecated": "{name} {introducedAt} 中引入，{name} {deprecatedAt} 中弃用",
-    "available-on": "{name} {introducedAt} 及更高版本中可用"
+    "available-on-platform-version": "{name} {introducedAt} 及更高版本中可用"
   },
   "more": "更多",
   "less": "更少",

tests/unit/components/DocumentationTopic/Summary/AvailabilityRange.spec.js

@@ -34,20 +34,45 @@ describe('AvailabilityRange', () => {
 
     wrapper.setProps({ deprecatedAt });
     expect(wrapper.text()).toBe('fooOS 1.0\u20132.0');
+
+    wrapper.setProps({
+      ...propsData,
+      deprecatedAt: null,
+      introducedAt: null,
+    });
+    expect(wrapper.text()).toBe('fooOS');
   });
 
   it('renders a descriptive title attribute', () => {
-    expect(wrapper.attributes('title')).toBe('availability.available-on fooOS 1.0');
+    expect(wrapper.attributes('title'))
+      .toBe('availability.available-on-platform-version fooOS 1.0');
 
     wrapper.setProps({ deprecatedAt });
-    expect(wrapper.attributes('title')).toBe('availability.introduced-and-deprecated fooOS 1.0 2.0');
+    expect(wrapper.attributes('title'))
+      .toBe('availability.introduced-and-deprecated fooOS 1.0 2.0');
+
+    wrapper.setProps({
+      ...propsData,
+      deprecatedAt: null,
+      introducedAt: null,
+    });
+    expect(wrapper.attributes('title')).toBe('availability.available-on-platform fooOS');
   });
 
   it('renders an aria label with the description (prepended with short text)', () => {
-    expect(wrapper.attributes('aria-label')).toBe('fooOS 1.0+, availability.available-on fooOS 1.0');
+    expect(wrapper.attributes('aria-label'))
+      .toBe('fooOS 1.0+, availability.available-on-platform-version fooOS 1.0');
 
     wrapper.setProps({ deprecatedAt });
     expect(wrapper.attributes('aria-label'))
       .toBe('fooOS 1.0\u20132.0, change-type.deprecated, availability.introduced-and-deprecated fooOS 1.0 2.0');
+
+    wrapper.setProps({
+      ...propsData,
+      deprecatedAt: null,
+      introducedAt: null,
+    });
+    expect(wrapper.attributes('aria-label'))
+      .toBe('fooOS, availability.available-on-platform fooOS');
   });
 });