Merge pull request #857 from kufu/renovate/smarthr-ui-35.x

Update dependency smarthr-ui to v35

content/articles/products/components/badge.mdx

@@ -0,0 +1,67 @@
+---
+title: 'Badge'
+description: ''
+---
+
+import { ComponentPropsTable } from '@Components/ComponentPropsTable'
+import { ComponentStory } from '@Components/ComponentStory'
+
+Badgeコンポーネントは、件数などの数値を視覚的に表すためのコンポーネントです。
+
+<ComponentStory name="Badge" />
+
+## 種類
+
+件数を表すものと、単に視覚情報をドットで表すものの2種類があります。
+
+```tsx editable codeBlock
+<>
+  <Badge count={100} />
+  <Badge count={100} dot />
+</>
+```
+
+アイコンなどの右肩にも表示できます。
+
+```tsx editable codeBlock
+<>
+  <Badge count={9}>
+    <FaBellIcon />
+  </Badge>
+  <Badge dot>
+    <FaBellIcon />
+  </Badge>
+</>
+```
+
+### 色
+
+特に意味は持たせずに4種類の色を用意しています。
+
+```tsx editable codeBlock
+<>
+  <Badge count={9} />
+  <Badge count={9} type="grey" />
+  <Badge count={9} type="yellow" />
+  <Badge count={9} type="red" />
+  <Badge dot />
+  <Badge dot type="grey" />
+  <Badge dot type="yellow" />
+  <Badge dot type="red" />
+</>
+```
+
+## アクセシビリティ
+
+ドット表示の場合には視覚情報しか持たないため、何らかの形で必ずアクセシブルな名前を与えてください。
+
+```tsx editable codeBlock
+<>
+  <Badge dot count={9} />
+  <VisuallyHiddenText>通知があります</VisuallyHiddenText>
+</>
+```
+
+## Props
+
+<ComponentPropsTable name="Badge" />

content/articles/products/components/heading.mdx

@@ -26,8 +26,8 @@ SmartHR UIでは、タイプ（`type`props）で種類を指定できます。
 
 ```tsx editable codeBlock
 <Stack>
-  <Heading type="screenTitle" tag="span">画面タイトル（type: screenTitle, fontSize: XL）</Heading>
-  <Heading type="sectionTitle" tag="span">セクションタイトル（type: sectionTitle, fontSize: L）</Heading>
+  <PageHeading tag="span">画面タイトル（type: screenTitle, fontSize: XL）</PageHeading>
+  <Heading tag="span">セクションタイトル（type: sectionTitle, fontSize: L）</Heading>
   <Heading type="blockTitle" tag="span">ブロックタイトル（type: blockTitle, fontSize: M）</Heading>
   <Heading type="subBlockTitle" tag="span">サブ・ブロックタイトル（type: subBlockTitle, fontSize: M）</Heading>
   <Heading type="subSubBlockTitle" tag="span">サブ・サブ・ブロックタイトル（type: subSubBlockTitle, fontSize: S）</Heading>
@@ -80,7 +80,7 @@ SmartHR UIでは、タイプ（`type`props）で種類を指定できます。
         <Td><a href="/products/design-tokens/typography/"><code>L</code></a></Td>
         <Td>normal</Td>
         <Td><a href="/products/design-tokens/color/#h3-2"><code>TEXT_BLACK</code></a></Td>
-        <Td><Heading type="sectionTitle" tag="span">well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。</Heading></Td>
+        <Td><Heading tag="span">well-working 労働にまつわる社会課題をなくし、誰もがその人らしく働ける社会をつくる。</Heading></Td>
       </tr>
     </tbody>
   </Table>

content/articles/products/components/switch.mdx

@@ -0,0 +1,46 @@
+---
+title: 'Switch'
+description: ''
+---
+
+import { ComponentPropsTable } from '@Components/ComponentPropsTable'
+import { ComponentStory } from '@Components/ComponentStory'
+
+Switchコンポーネントは、オン・オフを切り替えます。状態の切り替えは即時で反映されます。
+
+<ComponentStory name="Switch" />
+
+## 使用上の注意
+
+### CheckBox との違い
+
+Switchは操作時に即時実行されます。Checkboxと異なり、送信ボタンは不要です。
+
+また、未確定（`:indeterminate`）の状態を持ちません。内部的に `role=switch` を使っています。
+
+### SegmentedControl との違い
+
+Switchはオン・オフのどちらか1つの状態を表します。対する概念ではあるが、異なる状態を表す場合はSegmentedControlを使ってください。
+
+```tsx editable codeBlock
+<SegmentedControl size="s" options={[
+  { value: 'list view', content: 'リスト表示' },
+  { value: 'map view', content: 'マップ表示' },
+]} value="list view" />
+```
+
+### ラベルについて
+
+Switchは基本的にラベルを必要とします。周囲のコンテキストに依って省略できます。
+
+また、利用者が状態を認識しにくくなるため、Switchの状態が切り替わってもラベルは変更しないでください。
+
+## Props
+
+<ComponentPropsTable name="Switch" />
+
+## 関連リンク
+
+* [CheckBox](/products/components/check-box/)
+* [SegmentedControl](/products/components/segmented-control/)
+* [ARIA: switch ロール - アクセシビリティ | MDN](https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/Roles/switch_role)

package.json

@@ -56,7 +56,7 @@
     "react-instantsearch-dom": "^6.40.4",
     "react-live": "^4.1.3",
     "react-string-replace": "^1.1.1",
-    "smarthr-ui": "^34.1.0",
+    "smarthr-ui": "^35.3.0",
     "styled-components": "^5.3.11"
   },
   "devDependencies": {

yarn.lock

@@ -13275,10 +13275,10 @@ react-fast-compare@^3.0.0:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
   integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
 
-react-icons@^4.10.1:
-  version "4.10.1"
-  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.10.1.tgz#3f3b5eec1f63c1796f6a26174a1091ca6437a500"
-  integrity sha512-/ngzDP/77tlCfqthiiGNZeYFACw85fUjZtLbedmJ5DTlNDIwETxhwBzdOJ21zj4iJdvc0J3y7yOsX3PpxAJzrw==
+react-icons@^4.11.0:
+  version "4.11.0"
+  resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.11.0.tgz#4b0e31c9bfc919608095cc429c4f1846f4d66c65"
+  integrity sha512-V+4khzYcE5EBk/BvcuYRq6V/osf11ODUM2J8hg2FDSswRrGvqiYUYPRy4OdrWaQOBj4NcpJfmHZLNaD+VH0TyA==
 
 react-innertext@^1.1.5:
   version "1.1.5"
@@ -14396,18 +14396,18 @@ smarthr-normalize-css@^1.1.0:
   dependencies:
     styled-reset "^4.4.2"
 
-smarthr-ui@^34.1.0:
-  version "34.1.0"
-  resolved "https://registry.yarnpkg.com/smarthr-ui/-/smarthr-ui-34.1.0.tgz#fb35ab7ae3ae6021119aa447c776a394bdabbd04"
-  integrity sha512-k+5pUQ2eQPvEVD781yziVJ5sH35D5QppLmv2Sc2Kf0G5keWXOXe4kCV3E17glo9qpPvIz/o4dF3uUwnkteDj3A==
+smarthr-ui@^35.3.0:
+  version "35.3.0"
+  resolved "https://registry.yarnpkg.com/smarthr-ui/-/smarthr-ui-35.3.0.tgz#e9098422b8797ee52549084ccf1dbe7026f7ab1d"
+  integrity sha512-ZdRO8J+s6LrH01uwSwfvdBzN6hBlB6INcZY4tpuwDgWyB2wAb2JbsHhKic1ZbZ7h8l5AcfFBzcBm5856whfNGA==
   dependencies:
     "@smarthr/wareki" "^1.2.0"
     dayjs "^1.11.9"
     lodash.merge "^4.6.2"
     lodash.range "^3.2.0"
     polished "^4.2.2"
     react-draggable "^4.4.5"
-    react-icons "^4.10.1"
+    react-icons "^4.11.0"
     react-innertext "^1.1.5"
     react-transition-group "^4.4.5"